:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --bg:#f2f5f8;          /* gris azulado claro */
  --bg-2:#e7edf3;
  --surface:#ffffff;
  --surface-2:#f6f9fb;
  --ink:#1a2530;         /* casi negro frío */
  --muted:#5f6f7e;
  --line:#dde5ec;
  --line-strong:#c9d5e0;

  --brand:#005191;       /* azul corporativo MFW */
  --brand-2:#003a6b;
  --brand-soft:#e3edf6;
  --accent:#2f8ba3;      /* teal MFW (barras del logo) */

  --good:#2f8f6b; --good-bg:#e7f2ec;
  --warn:#c1852a; --warn-bg:#f7eed9;
  --bad:#bd4b3b;  --bad-bg:#f7e6e2;


  /* ---- Escala tipográfica ----
     Seis pasos, cada uno con un trabajo. Antes había más de treinta tamaños
     distintos, con 0.82, 0.83, 0.84 y 0.85 rem conviviendo: diferencias que el
     ojo no lee como jerarquía, solo como desorden. */
  --t-xs:.75rem;      /* etiquetas, metadatos, pies */
  --t-sm:.875rem;     /* texto secundario, ayudas */
  --t-base:1rem;      /* cuerpo */
  --t-lg:1.25rem;     /* subtítulos */
  --t-xl:1.625rem;    /* títulos de sección */
  --t-2xl:2.125rem;   /* título de página */

  /* ---- Radios ----
     Cuánto redondea un producto es una decisión de marca, no algo que se
     decida esquina por esquina: había diez radios distintos entre 2 y 14 px.
     Los de 1-3 px se quedan fuera de la escala porque no son forma, son el
     remate de una barra de tres píxeles de ancho. */
  --r-xs:4px;      /* chips, etiquetas, casillas */
  --r-sm:8px;      /* botones, campos, bloques pequeños */
  --r-md:12px;     /* tarjetas */
  --r-lg:16px;     /* diálogos y contenedores grandes */
  --r-full:99px;   /* píldoras */
  --shadow:0 1px 2px rgba(10,35,60,.05), 0 10px 30px rgba(10,35,60,.07);
  --shadow-sm:0 1px 3px rgba(10,35,60,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.08}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:var(--t-sm)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}

/* ================= APP SHELL ================= */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex:none;background:var(--brand);color:#e9f0f7;display:flex;flex-direction:column;
  padding:24px 16px;position:sticky;top:0;height:100vh}
.app-shell.anon .sidebar,.app-shell.anon .topbar{display:none}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1380px;margin:0 auto;padding:32px 32px 80px;flex:1}

.side-brand{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:4px 0 20px}
/* Un solo logo arriba: el del cliente cuando lo tiene, el de MFW si no.
   Dos marcas compitiendo en la misma columna ensucian y no dicen nada.
   La tarjeta ocupa la misma caja que los enlaces del menú —mismo borde
   izquierdo, mismo ancho y mismo radio que la pestaña activa— para que no
   quede colgando arriba con un margen propio. */
.logo-chip{background:#fff;border:0;border-radius:var(--r-sm);padding:8px 12px;display:inline-flex;
  align-items:center;flex:none;cursor:pointer;transition:.14s}
.side-brand .logo-chip{width:100%;justify-content:center;padding:12px}
.side-brand .wordmark{padding-left:12px}
.logo-chip:hover{box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.logo-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.logo-chip img{height:26px;display:block}
/* El logo del cliente respira más: no es una marca de producto en una tira,
   es su identidad. */
.logo-chip img.cliente{height:auto;max-height:64px;max-width:100%}
.auth-logo{height:44px;display:block}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);line-height:1;display:flex;flex-direction:column;gap:3px}
.wordmark .by{font-family:var(--font-sans);font-weight:500;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.side-nav{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.side-link{display:flex;align-items:center;gap:12px;background:transparent;border:0;color:#d9e5f0;
  font-family:inherit;font-size:var(--t-base);font-weight:500;text-align:left;padding:12px 12px;border-radius:var(--r-sm);cursor:pointer;transition:.14s}
/* Iconos de línea: misma caja, mismo grosor, y el trazo hereda el color del
   enlace, así que se apagan y encienden con él en vez de ir por su cuenta. */
.side-link .ico{width:22px;height:22px;flex:none;opacity:.85;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side-link:hover .ico,.side-link.sel .ico{opacity:1}
.side-link:hover{background:rgba(255,255,255,.09)}
.side-link.sel{background:#fff;color:var(--brand-2);font-weight:600}
.side-link.sel .ico{opacity:1}
.side-foot{margin-top:auto;padding:16px 8px 4px;border-top:1px solid rgba(255,255,255,.14);font-size:var(--t-sm)}
.side-emp{font-weight:600;color:#fff;margin-bottom:2px}
.side-user{opacity:.8} .side-user a{color:#fff;text-decoration:underline;cursor:pointer}

.topbar{display:none;align-items:center;gap:12px;background:var(--brand);color:#fff;padding:12px 16px}
.hamb{background:transparent;border:0;color:#fff;font-size:var(--t-xl);cursor:pointer;line-height:1;padding:0 4px}
.top-title{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg)}
.foot{text-align:center;color:var(--muted);font-size:var(--t-xs);padding:16px}

@media(max-width:860px){
  .sidebar{position:fixed;z-index:40;left:0;top:0;transform:translateX(-100%);transition:.22s;box-shadow:var(--shadow)}
  .app-shell.open .sidebar{transform:translateX(0)}
  .topbar{display:flex} .app-shell.anon .topbar{display:none}
  .wrap{padding:20px 16px 72px}
}

/* ================= AUTH ================= */
.auth-screen{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:20px 0}
/* Login sin tarjeta: los campos directamente sobre el fondo. */
.auth-card{max-width:440px;width:100%}
.auth-card .field input{background:#fff}
.auth-brand{margin-bottom:16px}
.auth-card h1{font-size:var(--t-2xl);margin:.05em 0 .2em}
.eyebrow{display:inline-block;font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.lede{color:var(--muted);margin:0 0 24px;font-size:var(--t-base)}

/* ================= TYPO ================= */
h1{font-family:var(--font-display);font-weight:600;font-size:var(--t-2xl);letter-spacing:-.01em;margin:.1em 0 .3em;line-height:1.12}
h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.01em;margin:0 0 16px}
h3{font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:24px 0 12px}
.page-head{margin-bottom:24px}
.page-head .lede{margin-bottom:0}

/* ================= SECCIONES =================
   Sin cajas: el contenido va plano sobre el fondo y las secciones se separan
   con espacio y una regla fina bajo el título. Solo llevan superficie propia
   los objetos de verdad (envases, banners, onboarding, dashboard). */
.card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;margin-bottom:40px}
.card>h2{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:16px}
.card>.head-row:first-child{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:16px}
.card>.head-row:first-child h2{margin-bottom:0}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  background:var(--brand);color:#fff;padding:12px 24px;border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-base);
  font-weight:600;transition:.15s;text-decoration:none;letter-spacing:.01em}
.btn:hover{background:var(--brand-2);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}
.btn.secondary{background:var(--surface-2);color:var(--brand-2);border:1px solid var(--line-strong)}
.btn.secondary:hover{background:#eaf0f5}
.btn.accent{background:var(--accent)} .btn.accent:hover{background:#25758b}
.btn.ghost{background:transparent;color:var(--brand);padding:8px 12px}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.small{padding:8px 16px;font-size:var(--t-sm)}
.btn.danger{background:var(--bad-bg);color:var(--bad)} .btn.danger:hover{background:#f2d9d3}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}

/* ================= FIELDS ================= */
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;padding:12px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-size:var(--t-base);font-family:inherit;background:var(--surface);color:var(--ink)}
.field textarea{min-height:74px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .fhelp{font-size:var(--t-xs);color:var(--muted);margin-top:8px;font-weight:400;line-height:1.45}
.err{color:var(--bad);font-size:var(--t-sm);margin-top:8px;min-height:1em}
.trust{font-size:var(--t-xs);color:var(--muted);letter-spacing:.02em;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.ok-msg{color:var(--good);font-size:var(--t-sm);margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.reveal{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.reveal summary{cursor:pointer;font-weight:600;font-size:var(--t-sm);color:var(--brand)}
.reveal[open] summary{margin-bottom:8px}

/* ================= TILES / DASHBOARD ================= */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
@media(max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px 16px;position:relative}
.tile .n{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:600;line-height:1}
.tile .l{font-size:var(--t-xs);color:var(--muted);margin-top:8px;font-weight:500}
.tile.good{background:var(--good-bg);border-color:#cfe6da} .tile.good .n{color:var(--good)}
.tile.warn{background:var(--warn-bg);border-color:#eaddbf} .tile.warn .n{color:var(--warn)}
.tile.bad{background:var(--bad-bg);border-color:#eecec6} .tile.bad .n{color:var(--bad)}
.progress{height:9px;background:var(--bg-2);border-radius:var(--r-full);overflow:hidden;margin:8px 0 4px}
.progress>i{display:block;height:100%;background:var(--brand);width:0;transition:.35s}
.metric-line{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--muted);margin-top:16px}
.metric-line b{font-family:var(--font-display);font-size:var(--t-lg);color:var(--ink);font-weight:600}

/* ================= SEMÁFORO / PILLS ================= */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700;padding:4px 12px;border-radius:var(--r-full);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.good{background:var(--good-bg);color:#1d6b52}
.pill.warn{background:var(--warn-bg);color:#8a5f16}
.pill.bad{background:var(--bad-bg);color:#8f3427}

/* ================= LISTAS ================= */
.list{display:flex;flex-direction:column;gap:12px}
.row-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px;
  display:flex;align-items:center;gap:16px;cursor:pointer;transition:.14s}
.row-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.row-card .rc-main{flex:1;min-width:0}
.row-card .rc-title{font-weight:600;font-size:var(--t-base)}
.row-card .rc-sub{font-size:var(--t-xs);color:var(--muted);margin-top:2px;letter-spacing:.02em}
.row-card .rc-right{display:flex;align-items:center;gap:16px}
.mini-prog{width:88px;height:7px;background:var(--bg-2);border-radius:var(--r-full);overflow:hidden}
.mini-prog>i{display:block;height:100%;border-radius:var(--r-full)}
.row-static{cursor:default;flex-direction:column;align-items:stretch;gap:8px}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ================= ACTIVIDAD ================= */
.feed{list-style:none;padding:0;margin:0}
.feed li{display:flex;gap:16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);line-height:1.45}
.feed li:last-child{border-bottom:0}
.feed .f-fecha{flex:none;width:88px;font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
/* Quitar una línea del tablón. Discreta hasta que se pasa por encima:
   está para usarse de vez en cuando, no para competir con lo que se lee. */
.feed-x{flex:none;background:none;border:0;color:var(--muted);font-size:var(--t-base);
  line-height:1;padding:2px 6px;border-radius:var(--r-xs);cursor:pointer;opacity:0;transition:.13s}
.feed li:hover .feed-x,.feed-x:focus-visible{opacity:1}
.feed-x:hover{background:var(--surface-2);color:var(--ink)}
.feed-x:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Una línea que lleva a algún sitio tiene que parecerlo, sin gritarlo:
   el subrayado aparece al pasar por encima, como un enlace de texto. */
.feed .f-txt{flex:1}
/* Números en columna: alineados a la derecha y con cifras de ancho fijo,
   que es como se comparan de un vistazo. */
.imp-table td.num,.imp-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.imp-table tr.fila-total td{border-top:2px solid var(--line-strong);background:var(--surface-2)}
/* Lo que la aplicación prepara para que el cliente lo use tal cual: una
   línea de factura, una cláusula, una tabla de kilos. Se separa de la
   explicación porque no se lee, se copia. */
.herramienta{background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:var(--r-sm);margin:0 0 16px}
.herramienta>summary{list-style:none;cursor:pointer;padding:12px 16px;
  font-size:var(--t-sm);font-weight:600;color:var(--brand-2);display:flex;align-items:center;gap:8px}
.herramienta>summary::-webkit-details-marker{display:none}
.herramienta>summary::before{content:"+";opacity:.6;font-weight:400;width:12px}
.herramienta[open]>summary::before{content:"–"}
.herramienta>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r-sm)}
.herr-cuerpo{padding:0 16px 14px}
.herramienta .imp-wrap{margin:0}
/* Los huecos del expediente, plegados. Uno abierto —lo que hay que hacer— y
   el resto a un clic: la pantalla se abre por el trabajo, no por los avisos. */
.huecos{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--surface-2)}
.huecos>summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:var(--t-sm);
  font-weight:600;display:flex;align-items:center;gap:8px}
.huecos>summary::-webkit-details-marker{display:none}
.huecos>summary::before{content:"+";opacity:.6;font-weight:400;width:12px}
.huecos[open]>summary::before{content:"–"}
.huecos>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r-sm)}
.huecos .faltas{margin:0;padding:0 14px 12px}
.huecos p{padding:0 14px 12px;margin:0}
.huecos.falta{background:var(--warn-bg);border-color:#eaddbf}
.huecos.falta>summary{color:#7a5313}
.huecos.futuro>summary,.huecos.ficha>summary,.huecos.medir>summary{color:var(--brand-2)}

/* Cada familia propuesta, con sus referencias marcables. */
.familia{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin-bottom:12px}
.familia .chips{margin:10px 0 12px}
.chip-check{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-full);padding:6px 14px;font-size:var(--t-sm);
  cursor:pointer;margin:0 6px 6px 0}
.chip-check input{width:auto;margin:0;cursor:pointer}
.chip-check:hover{border-color:var(--brand)}
.copiable{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:10px 12px;margin:0;font-size:var(--t-sm);line-height:1.5;
  user-select:all;-webkit-user-select:all}
.feed li.clicable .f-txt{cursor:pointer}
.feed li.clicable:hover .f-txt{text-decoration:underline;text-underline-offset:2px}
.fila-ob.clicable,.aviso-renov li.clicable{cursor:pointer;transition:.13s}
.fila-ob.clicable:hover{background:var(--surface-2)}
.aviso-renov li.clicable:hover{filter:brightness(.97)}
.fila-ob.clicable:focus-visible,.aviso-renov li.clicable:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}

/* ================= FALTANTES ================= */
.faltas{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.faltas li{font-size:var(--t-sm);display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.faltas .tag{flex:none;font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:var(--r-xs);margin-top:2px}
.faltas .tag.dato{background:var(--brand-soft);color:var(--brand)}
.faltas .tag.documento{background:var(--bad-bg);color:var(--bad)}

/* ================= EDITOR ================= */
.mat-row{display:grid;grid-template-columns:1.1fr 1.1fr .6fr .6fr .6fr auto;gap:8px;align-items:end;margin-bottom:8px}
@media(max-width:620px){.mat-row{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip-toggle{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-full);padding:8px 12px;
  font-size:var(--t-sm);cursor:pointer;font-family:inherit;transition:.12s;color:var(--ink)}
.chip-toggle:hover{border-color:var(--brand)}
.chip-toggle.sel{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2);font-weight:600}

/* ================= BANNERS ================= */
.banner{border-radius:var(--r-md);padding:16px 16px;font-size:var(--t-sm);line-height:1.5;margin-bottom:16px;border:1px solid transparent}
.banner.warn{background:var(--warn-bg);border-color:#eaddbf;color:#7a5313}
.banner.info{background:var(--brand-soft);border-color:#c6d9ea;color:var(--brand-2)}
.banner.good{background:var(--good-bg);border-color:#cfe6da;color:#1d6b52}

/* ================= ONBOARDING ================= */
.onboard{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#e9f0f7;border-radius:var(--r-lg);
  padding:24px 28px;margin-bottom:24px;position:relative;box-shadow:var(--shadow)}
.onboard h2{color:#fff;margin-bottom:8px}
.onboard .lede{color:rgba(233,240,247,.85);margin-bottom:20px;max-width:60ch}
.onboard .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:720px){.onboard .steps{grid-template-columns:1fr}}
.ostep{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:16px}
.ostep .os-n{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:#fff;margin-bottom:4px}
.ostep .os-t{font-weight:600;font-size:var(--t-base);margin-bottom:3px}
.ostep .os-d{font-size:var(--t-sm);color:rgba(233,240,247,.8);line-height:1.45}
.onboard .x{position:absolute;top:14px;right:16px;background:transparent;border:0;color:rgba(255,255,255,.7);
  font-size:var(--t-lg);cursor:pointer;line-height:1}
.onboard .x:hover{color:#fff}

/* ================= AYUDA / TUTORIAL ================= */
.help-hero{margin-bottom:36px}
.help-hero h1{margin-top:0}
.steps-num{list-style:none;padding:0;margin:0;counter-reset:st}
.steps-num>li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps-num>li:last-child{border-bottom:0}
.steps-num .sn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-family:var(--font-display);font-weight:700;display:grid;place-items:center;font-size:var(--t-base)}
.steps-num .st-b{flex:1}
.steps-num .st-t{font-weight:600;font-size:var(--t-base);margin-bottom:3px}
.steps-num .st-d{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.glossary{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.glossary{grid-template-columns:1fr}}
.gloss{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px}
.gloss .gt{font-weight:700;font-size:var(--t-base);margin-bottom:4px}
.gloss .gd{font-size:var(--t-sm);color:var(--muted);line-height:1.5}

/* ================= DoC FORM ================= */
.doc-sec-title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--brand-2);
  margin:24px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.req-badge,.rec-badge{display:inline-block;font-size:var(--t-xs);font-weight:700;border-radius:var(--r-xs);padding:2px 8px;margin-left:8px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}
.req-badge{color:var(--bad);background:var(--bad-bg)}
.rec-badge{color:var(--brand);background:var(--brand-soft)}
.ia-btn{margin-top:8px}

/* ================= ADJUNTOS ================= */
.att-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.att-list li{display:flex;align-items:center;gap:12px;font-size:var(--t-sm);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.att-list .att-type{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:20px;text-align:center;color:var(--muted);font-size:var(--t-sm);cursor:pointer;transition:.14s}
.dropzone:hover{border-color:var(--brand);background:var(--surface-2)}

/* ================= COPYBOX ================= */
.copybox{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 8px;font-size:var(--t-sm)}
.copybox input{flex:1;border:0;background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);color:var(--ink)}
.copybox input:focus{outline:none}

.back-link{background:none;border:0;color:var(--brand);font-weight:600;cursor:pointer;font-size:var(--t-sm);padding:0;margin-bottom:16px;font-family:inherit}
.back-link:hover{text-decoration:underline}

.loading{text-align:center;padding:44px 0;color:var(--muted)}
.spin{width:38px;height:38px;border:3px solid var(--bg-2);border-top-color:var(--brand);border-radius:50%;margin:0 auto 16px;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:var(--brand-2);color:#fff;
  padding:12px 24px;border-radius:var(--r-full);font-size:var(--t-sm);box-shadow:var(--shadow);z-index:60;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= PORTAL PROVEEDOR ================= */
.prov-top{background:var(--brand);color:#fff}
.prov-top-in{max-width:820px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:12px}
.prov-top .logo-chip{padding:8px 8px}
.prov-top .logo-chip img{height:20px}
.prov-top .wordmark{font-size:var(--t-lg)}

/* ================= RESUMEN DE LA CARTERA DE ENVASES =================
   Antes: una tira sticky de cuatro cápsulas de doce píxeles. Lo primero que
   se leía en la pantalla era, a la vez, lo más pequeño de ella — jerarquía
   del revés. Ahora es un bloque de tres columnas, cada una con su
   encabezado, que contesta las tres preguntas de una cartera: cuántos hay,
   cómo están repartidos y cuánto falta. Sin encabezado, la barra no dice qué
   mide y el porcentaje no dice de qué. */
.dash-global{margin-bottom:24px}
.cartera{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 24px 24px}
.cart-col{display:flex;flex-direction:column;min-width:0}
.cart-h{font-size:var(--t-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}

/* La cifra que define la cartera: el número manda y no comparte línea. */
.cart-cifra{justify-content:flex-start;padding-right:8px}
.cart-cifra b{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:600;
  line-height:.95;color:var(--brand-2);font-variant-numeric:tabular-nums}

/* Una barra repartida dice "uno de tres" mejor que tres cápsulas sueltas:
   enseña la proporción, que es lo que se quiere saber de un vistazo. */
.barra-apilada{display:flex;height:14px;border-radius:var(--r-full);overflow:hidden;
  background:var(--surface-2);gap:2px}
.barra-apilada .seg{display:block;transition:opacity .14s}
.barra-apilada .seg.good{background:var(--good)}
.barra-apilada .seg.warn{background:var(--warn)}
.barra-apilada .seg.bad{background:var(--bad)}
.cartera:has(.seg.on) .seg:not(.on){opacity:.25}

.cart-leyenda{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:16px}
.cart-leg{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid transparent;
  border-radius:var(--r-sm);padding:4px 8px 4px 8px;font-family:inherit;font-size:var(--t-sm);
  color:var(--muted);cursor:pointer;transition:.13s;text-align:left}
.cart-leg b{font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cart-leg .pt{width:9px;height:9px;border-radius:50%;flex:none}
.cart-leg.good .pt{background:var(--good)} .cart-leg.warn .pt{background:var(--warn)}
.cart-leg.bad .pt{background:var(--bad)}
.cart-leg:hover{background:var(--surface-2);border-color:var(--line)}
.cart-leg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cart-leg.on{background:var(--brand-soft);border-color:transparent;color:var(--brand-2)}
.cart-leg.on b{color:var(--brand-2)}
.cart-todos{align-self:center;background:none;border:0;font-family:inherit;font-size:var(--t-sm);
  color:var(--brand);cursor:pointer;padding:4px 8px;text-decoration:underline;text-underline-offset:2px}

.cart-prog{padding-left:32px;border-left:1px solid var(--line);max-width:15rem}
.cart-prog .cp-n{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:600;
  line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-prog .cp-n em{font-style:normal;font-size:var(--t-lg);color:var(--muted);margin-left:2px}
.cart-prog .cp-t{font-size:var(--t-xs);color:var(--muted);line-height:1.4;margin-top:8px}

@media(max-width:1080px){
  .cartera{grid-template-columns:auto 1fr;gap:24px}
  .cart-prog{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px;
    max-width:none;padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line)}
  .cart-prog .cart-h{margin-bottom:0;width:100%}
  .cart-prog .cp-t{margin-top:0}
}
@media(max-width:620px){
  .cartera{grid-template-columns:1fr;padding:16px;gap:24px}
}

/* ================= HITOS PPWR ================= */
.hitos{list-style:none;padding:0;margin:0}
.hitos li{padding:12px 0;border-bottom:1px solid var(--line)}
.hitos li:last-child{border-bottom:0}
.hito-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.hito-fecha{font-family:var(--font-display);font-weight:600;font-size:var(--t-base);color:var(--brand-2)}
.hito-chip{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-xs);background:var(--brand-soft);color:var(--brand-2);white-space:nowrap}
.hito-chip.near{background:var(--warn-bg);color:#8a5f16}
.hito-chip.past{background:var(--bad-bg);color:var(--bad)}
.hito-t{font-weight:600;font-size:var(--t-base)}
.pais-tag{display:inline-block;font-size:var(--t-xs);letter-spacing:.06em;font-weight:600;
  color:var(--brand);background:var(--brand-soft);border-radius:var(--r-xs);padding:1px 4px;
  margin-left:4px;vertical-align:.1em}
.hito-d{font-size:var(--t-sm);color:var(--muted);line-height:1.45}

/* ================= IMPORTACIÓN EXCEL ================= */
.imp-wrap{overflow-x:auto;margin:8px 0 4px;border:1px solid var(--line);border-radius:var(--r-sm)}
.imp-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.imp-table th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:8px 8px;border-bottom:1px solid var(--line-strong);background:var(--surface-2);white-space:nowrap}
.imp-table td{padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.imp-table tr:last-child td{border-bottom:0}
.imp-table tr.imp-bad{background:var(--bad-bg);color:var(--bad)}

/* ================= ASISTENTE PPWR ================= */
.assist-fab{position:fixed;right:22px;bottom:22px;z-index:70;background:var(--brand);color:#fff;border:0;
  border-radius:var(--r-full);padding:12px 20px;font-family:inherit;font-size:var(--t-base);font-weight:600;cursor:pointer;
  box-shadow:var(--shadow);transition:.15s}
.assist-fab:hover{background:var(--brand-2)}
.assist-panel{position:fixed;right:22px;bottom:80px;z-index:70;width:min(360px,calc(100vw - 44px));
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.assist-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  background:var(--brand);color:#fff;font-size:var(--t-base)}
.assist-x{background:transparent;border:0;color:#fff;font-size:var(--t-base);cursor:pointer;line-height:1;padding:2px 4px}
.assist-log{display:flex;flex-direction:column;gap:8px;padding:16px;max-height:44vh;overflow-y:auto}
.assist-msg{padding:8px 12px;border-radius:var(--r-md);font-size:var(--t-sm);max-width:88%;white-space:pre-wrap;line-height:1.45}
.assist-msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:3px}
.assist-msg.assistant{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:3px}
.assist-msg.pending{color:var(--muted);font-style:italic}
.assist-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 8px}
.assist-chip{background:var(--surface);border:1px solid var(--line-strong);color:var(--brand-2);border-radius:var(--r-full);
  padding:8px 12px;font-size:var(--t-xs);font-family:inherit;cursor:pointer;transition:.12s}
.assist-chip:hover{border-color:var(--brand);background:var(--brand-soft)}
.assist-row{display:flex;gap:8px;padding:0 16px 12px}
.assist-row input{flex:1;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:var(--t-sm);font-family:inherit}
.assist-row input:focus{outline:none;border-color:var(--brand)}
.assist-foot{font-size:var(--t-xs);color:var(--muted);padding:0 16px 12px}

@media print{.sidebar,.topbar,.prov-top,.btn-row,.no-print,.foot,.assist-fab,.assist-panel{display:none!important}body{background:#fff}.card{box-shadow:none;border:1px solid #ccc}}

/* ================= OBLIGACIONES =================
   Lista plana con una sola marca de color: un punto de 8px. Sin cajas de
   colores ni filas teñidas, que con dieciséis obligaciones convierten la
   pantalla en un muro. El detalle de cada una se despliega bajo su fila. */
.prog-oblig{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.barra-fina{flex:1;min-width:10rem;height:3px;background:var(--bg-2);border-radius:2px;overflow:hidden}
.barra-fina i{display:block;height:100%;background:var(--brand)}
.prog-oblig span{font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- Cada obligación es una tarjeta, no un renglón ----
   Separadas por 1px, doce obligaciones se leen como una tabla de doce filas
   iguales: nada destaca y nada se distingue. Con superficie propia y aire
   entre ellas, cada una vuelve a ser una cosa que hacer. */
.lista{border-top:0;display:flex;flex-direction:column;gap:8px}
.ob{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--r-md);overflow:hidden;transition:border-color .14s,box-shadow .14s}
.ob>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto auto;gap:4px 16px;align-items:start;padding:16px 16px 16px 16px}
.ob>summary::-webkit-details-marker{display:none}
.ob>summary:hover .tit{color:var(--brand)}
.ob>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:var(--r-sm)}
/* El color va en el filo, no en el fondo: doce tarjetas rojas rellenas
   convierten la pantalla en una alarma y dejan de decir nada. */
.ob.r{border-left-color:var(--bad)}  .ob.a{border-left-color:var(--warn)}
.ob.v{border-left-color:var(--good)} .ob.g{border-left-color:#9aabba}
.ob:hover{border-color:var(--line-strong);box-shadow:0 1px 4px rgba(16,32,48,.06)}
.ob[open]{border-color:var(--line-strong);box-shadow:0 3px 14px rgba(16,32,48,.08)}

/* El icono de categoría: registro, pago, documento, requisito del envase. */
.ob-ico{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-2);color:#7d8fa0}
.ico-ob{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ob.r .ob-ico{background:var(--bad-bg);color:#8f3427}
.ob.a .ob-ico{background:var(--warn-bg);color:#8a5f16}
.ob.v .ob-ico{background:var(--good-bg);color:#1d6b52}
.ob.tachada .ob-ico{background:var(--surface-2);color:var(--muted)}

.ob-cuerpo{min-width:0}
.ob .tit{font-weight:600;font-size:var(--t-base);line-height:1.35}
.ob .meta{font-size:var(--t-sm);color:var(--muted);margin-top:4px;line-height:1.5}
/* Los datos que antes había que abrir la ficha para ver. */
.ob .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ob .chip{font-size:var(--t-xs);color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 8px;white-space:nowrap}
.ob .chip.norma{color:var(--brand-2);background:var(--brand-soft);border-color:transparent;
  font-variant-numeric:tabular-nums}
.ob .chip.grave{color:#8f3427;background:var(--bad-bg);border-color:transparent;font-weight:600}
.ob.tachada .chips{opacity:.55}

.ob .plazo{font-size:var(--t-xs);color:var(--muted);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ob .abrir{color:var(--muted);font-size:var(--t-lg);line-height:1;opacity:.5;
  align-self:center;transition:transform .14s}
.ob>summary:hover .abrir{opacity:.9;color:var(--brand)}
.ob[open] .abrir{transform:rotate(45deg);opacity:.9}
.ob .pais{display:inline-block;font-size:var(--t-xs);letter-spacing:.06em;font-weight:600;
  color:var(--brand);background:var(--brand-soft);border-radius:var(--r-xs);
  padding:1px 4px;margin-left:8px;vertical-align:.09em}

.comose{padding:3px 16px 24px 68px;max-width:44rem;border-top:1px solid var(--line);
  margin-top:2px;padding-top:16px}
.comose h4{font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:16px 0 8px}
.comose h4:first-child{margin-top:8px}
.comose p{margin:0;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.comose ol{margin:0;padding-left:20px;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.comose ol li{margin-bottom:8px}
/* Lo que hace la plataforma por él: es lo que distingue ayudar de encargar. */
.comose .yo{background:var(--brand-soft);border-radius:var(--r-sm);padding:12px 16px;margin-top:16px}
.comose .yo p{color:var(--brand-2)}
.comose .fuente{font-size:var(--t-sm);margin-top:16px}
.comose .fuente a{color:var(--brand)}

.grises{background:var(--surface);border-left:2px solid #9aabba;
  padding:16px 16px;margin-top:16px;border-radius:0 8px 8px 0}
.grises h3{margin:0 0 4px;font-size:var(--t-sm);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
.grises ul{margin:8px 0 0;padding-left:16px;color:var(--muted);font-size:var(--t-sm)}
.grises li{margin-bottom:3px}

.leyenda-ob{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted)}
.leyenda-ob span{display:flex;align-items:center;gap:8px}
.leyenda-ob i{width:8px;height:8px;border-radius:50%;display:block}
.leyenda-ob .p-r{background:var(--bad)} .leyenda-ob .p-a{background:var(--warn)}
.leyenda-ob .p-v{background:var(--good)} .leyenda-ob .p-g{background:#9aabba}

@media(max-width:620px){
  .ob>summary{grid-template-columns:auto 1fr auto;padding:12px 12px;gap:4px 12px}
  .ob .col-der{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:8px;margin-top:8px}
  .ob .abrir{grid-row:1;grid-column:3;align-self:start;margin-top:3px}
  .comose{padding-left:12px;padding-right:12px}
}

/* ---- Panel: las tres primeras obligaciones, sin desplegable ---- */
.fila-ob{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--line)}
.fila-ob .punto{width:8px;height:8px;border-radius:50%;align-self:center;background:var(--muted)}
.fila-ob.r .punto{background:var(--bad)}
.fila-ob .tit{font-weight:500;font-size:var(--t-base);line-height:1.35}
.fila-ob .meta{grid-column:2;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.fila-ob .pais{display:inline-block;font-size:var(--t-xs);letter-spacing:.06em;font-weight:600;
  color:var(--brand);background:var(--brand-soft);border-radius:var(--r-xs);padding:1px 4px;
  margin-left:8px;vertical-align:.09em}

/* ---- Semáforo por áreas: seis filas, no veinticuatro ---- */
.areas{border-top:1px solid var(--line)}
.area{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:8px 2px;border-bottom:1px solid var(--line)}
.area .punto{width:8px;height:8px;border-radius:50%;background:#9aabba}
.area.r .punto{background:var(--bad)} .area.a .punto{background:var(--warn)}
.area.v .punto{background:var(--good)} .area.g .punto{background:#9aabba}
.area .q{font-size:var(--t-base);font-weight:500}
.area .e{font-size:var(--t-sm);color:var(--muted);text-align:right}
.area.r .e{color:var(--bad)}

/* ---- Puertas a cada sección: un dato por puerta ---- */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.puerta{background:var(--surface);border:0;text-align:left;font-family:inherit;color:inherit;font-size:var(--t-base);
  display:block;padding:16px 16px 16px;cursor:pointer;transition:.13s}
.puerta:hover{background:var(--brand-soft)}
.puerta:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.puerta .n{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;display:block}
.puerta .l{display:block;font-size:var(--t-sm);font-weight:600;margin-top:8px}
.puerta .d{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px}
.puerta .d.alerta{color:var(--bad)}
.puerta .rueda{display:block;margin-bottom:1px}
.rueda text{font-family:var(--font-display);font-weight:600;font-size:15px;
  fill:var(--ink);text-anchor:middle}

/* ---- Marcar una obligación como resuelta ---- */
.marcar{margin-top:16px}
.marcar-campos{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px}
.marcar-campos label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-xs);font-weight:600;color:var(--ink)}
.marcar-campos input{padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--t-sm);background:var(--surface);color:var(--ink);min-width:11rem}
.marcar-campos input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hecho{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;background:var(--good-bg);border-radius:var(--r-sm);padding:12px 16px;font-size:var(--t-sm)}
.hecho b{color:var(--good)}
.hecho .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm)}

/* ---- Tachar: un botón pequeño bajo el plazo, sin abrir la obligación ---- */
.col-der{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;
  padding-top:2px}
.check{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 8px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  font-family:inherit;font-size:var(--t-xs);line-height:1;cursor:pointer;transition:.13s}
.check:hover{border-color:var(--good);color:var(--good);background:var(--good-bg)}
.check:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.check.on{background:var(--good);border-color:var(--good);color:#fff}
.ob.tachada .tit{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}
.ob.tachada .meta{opacity:.7}

/* ---- Grupos plegados: el resto no se enseña de golpe ---- */
.grupos{border-top:1px solid var(--line)}
.grupo{border-bottom:1px solid var(--line)}
.grupo>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:12px 2px;font-size:var(--t-sm);color:var(--muted)}
.grupo>summary::-webkit-details-marker{display:none}
.grupo>summary::before{content:"+";color:var(--muted);opacity:.6;font-size:var(--t-base);order:2}
.grupo[open]>summary::before{content:"–"}
.grupo>summary:hover{color:var(--ink)}
.grupo>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.grupo>summary .cuenta{font-variant-numeric:tabular-nums;color:var(--muted);opacity:.75;
  font-size:var(--t-sm);margin-left:auto;margin-right:8px}
.grupo .lista{padding:4px 0 12px}


/* ---- Etiqueta de estado: nombra el estado y le pone color ---- */
.pill-ob{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:var(--r-full);white-space:nowrap}
.pill-ob.bad{background:var(--bad-bg);color:#8f3427}
.pill-ob.good{background:var(--good-bg);color:#1d6b52}
.pill-ob.warn{background:var(--warn-bg);color:#8a5f16}
.pill-ob.info{background:var(--brand-soft);color:var(--brand-2)}
.pill-ob.none{background:#eef2f6;color:#5f7183}
.pill-ob.off{background:var(--surface-2);color:var(--muted)}

/* El recuento de cada grupo plegado lleva el color de lo que contiene. */
.grupo>summary .g-t{font-weight:600;color:var(--ink)}
.grupo>summary .cuenta{font-weight:700;border-radius:var(--r-full);padding:2px 8px;font-size:var(--t-xs);opacity:1}
.grupo>summary .cuenta.bad{background:var(--bad-bg);color:#8f3427}
.grupo>summary .cuenta.good{background:var(--good-bg);color:#1d6b52}
.grupo>summary .cuenta.warn{background:var(--warn-bg);color:#8a5f16}
.grupo>summary .cuenta.info{background:var(--brand-soft);color:var(--brand-2)}
.grupo>summary .cuenta.none{background:#eef2f6;color:#5f7183}
.grupo>summary .cuenta.off{background:var(--surface-2);color:var(--muted)}

/* Las áreas del panel también nombran su estado con color. */
.area.r .e{color:#8f3427;background:var(--bad-bg);border-radius:var(--r-full);padding:2px 8px;font-weight:600;font-size:var(--t-xs)}
.area.v .e{color:#1d6b52;background:var(--good-bg);border-radius:var(--r-full);padding:2px 8px;font-weight:600;font-size:var(--t-xs)}
.area.g .e{color:#5f7183;background:#eef2f6;border-radius:var(--r-full);padding:2px 8px;font-weight:600;font-size:var(--t-xs)}
.area .punto{width:3px;height:20px;border-radius:2px}

/* ---- Áreas como tarjetas de progreso ----
   Cada bloque se lee como un proyecto: fracción, porcentaje y barra. "1 de 2"
   dice más de un vistazo que "1 pendiente", porque enseña también cuánto queda. */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:12px;margin-top:4px}
.area-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 16px 16px;border-left:3px solid var(--line-strong);transition:.13s}
.area-card:hover{box-shadow:var(--shadow-sm)}
.area-card.r{border-left-color:var(--bad)}
.area-card.v{border-left-color:var(--good)}
.area-card.g{border-left-color:#9aabba}
.area-card.i{border-left-color:var(--brand)}
.area-card.o{border-left-color:var(--line-strong)}
.ac-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ac-t{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.ac-pct{font-family:var(--font-display);font-size:var(--t-base);font-weight:600;
  font-variant-numeric:tabular-nums;flex:none}
.area-card.r .ac-pct{color:var(--bad)} .area-card.v .ac-pct{color:var(--good)}
.area-card.g .ac-pct{color:#5f7183} .area-card.i .ac-pct{color:var(--brand)}
.area-card.o .ac-pct{color:var(--muted)}
.ac-bar{height:5px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:8px 0 8px}
.ac-bar i{display:block;height:100%;border-radius:3px;background:var(--line-strong);transition:width .4s ease}
.area-card.r .ac-bar i{background:var(--bad)} .area-card.v .ac-bar i{background:var(--good)}
.area-card.g .ac-bar i{background:#9aabba} .area-card.i .ac-bar i{background:var(--brand)}
.ac-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-xs)}
.ac-frac{color:var(--muted);font-variant-numeric:tabular-nums}
.ac-e{font-weight:600;font-size:var(--t-xs);border-radius:var(--r-full);padding:2px 8px}
.area-card.r .ac-e{background:var(--bad-bg);color:#8f3427}
.area-card.v .ac-e{background:var(--good-bg);color:#1d6b52}
.area-card.g .ac-e{background:#eef2f6;color:#5f7183}
.area-card.i .ac-e{background:var(--brand-soft);color:var(--brand-2)}
.area-card.o .ac-e{background:var(--surface-2);color:var(--muted)}

/* ---- Asistente en el panel ----
   Estaba en un botón flotante de la esquina, que es donde va lo que no importa.
   Preguntar es la vía más corta entre la duda y la respuesta cuando el cliente
   no conoce el vocabulario: no sabe buscar "SCRAP", sabe preguntar por qué
   tiene que pagar dos sistemas. */
.asistente-card{background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%);
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px 20px;margin-bottom:40px}
.as-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.as-ico{flex:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-base)}
.asistente-card h2{border:0;padding:0;font-size:var(--t-base)}
.as-caja{display:flex;gap:8px;flex-wrap:wrap}
.as-caja input{flex:1;min-width:14rem;padding:12px 16px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-base);background:var(--surface);color:var(--ink)}
.as-caja input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.as-sug{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.as-chip{background:var(--surface);border:1px solid var(--line-strong);color:var(--brand-2);
  font-family:inherit;font-size:var(--t-sm);padding:8px 12px;border-radius:var(--r-full);cursor:pointer;transition:.13s}
.as-chip:hover{border-color:var(--brand);background:var(--brand-soft)}
.as-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Llevar la duda al asistente con la obligación delante. */
.ayuda-ob{margin-top:16px}

/* ---- Mi empresa: una fila por mercado ---- */
.merc-row{display:grid;grid-template-columns:.7fr 1.2fr 1.4fr auto;gap:8px;
  align-items:end;padding:8px 0;border-bottom:1px solid var(--line)}
.merc-row:first-child{border-top:1px solid var(--line)}
@media(max-width:720px){
  .merc-row{grid-template-columns:1fr 1fr;gap:8px}
  .merc-row>button{grid-column:2;justify-self:end}
}


/* ================= APROVECHAR EL ANCHO =================
   El contenido iba en una sola columna de 1060px: en un monitor normal, una
   tira estrecha con la mitad de la pantalla vacía. Lo que se lee seguido
   —una obligación, la guía— se queda con ancho de lectura; lo que se escanea
   —listas, tarjetas, fichas— se reparte en columnas. */

/* Panel: lo urgente a la izquierda, el estado por ámbito a la derecha. */
.dos-col{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}
@media(max-width:1080px){ .dos-col{grid-template-columns:1fr;gap:0} }

/* En pantalla ancha, las áreas caben en dos columnas dentro de su mitad. */
@media(min-width:1081px){
  .dos-col .areas-grid{grid-template-columns:1fr 1fr}
}

/* Envases y proveedores: rejilla en vez de una fila por línea. */
@media(min-width:900px){
  .list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media(min-width:1300px){
  .list{grid-template-columns:1fr 1fr 1fr}
}

/* Las fechas clave de la guía, en rejilla. */
@media(min-width:900px){
  .hitos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .hitos li{margin-bottom:0}
}
@media(min-width:1300px){ .hitos{grid-template-columns:1fr 1fr 1fr} }

/* El glosario ya venía en rejilla; se le da una columna más de aire. */
@media(min-width:1200px){
  .glossary{grid-template-columns:1fr 1fr 1fr}
}

/* La lista de obligaciones ocupa el ancho, pero el texto que se lee dentro
   se queda en medida de lectura: una línea de 140 caracteres no se sigue. */
.comose{max-width:46rem}
.lede,.ayuda{max-width:44rem}

/* Los controles de formulario no heredan el tipo de letra ni el tamaño del
   documento: sin esto, un botón sin font-size cae al 13,33px del navegador y
   rompe la escala sin que se vea de dónde viene. */
button,input,select,textarea{font-family:inherit;font-size:var(--t-base)}

/* ---- Estado intermedio: "la estoy tramitando" ----
   Ni rojo ni verde: azul, porque no es una alarma ni un logro, es trabajo en
   curso. Y con la fecha en que empezó, que es lo que el cliente no recuerda. */
.pill-ob.tramite{background:var(--brand-soft);color:var(--brand-2)}
.ob.t{border-left-color:var(--brand)}
.ob.t .ob-ico{background:var(--brand-soft);color:var(--brand-2)}
.grupo>summary .cuenta.tramite{background:var(--brand-soft);color:var(--brand-2)}
.area-card.t{border-left-color:var(--brand)}
.area-card.t .ac-pct{color:var(--brand)}
.area-card.t .ac-bar i{background:var(--brand)}
.area-card.t .ac-e{background:var(--brand-soft);color:var(--brand-2)}

.tramite-caja{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 16px;margin-top:16px}
.tramite-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.nota-lbl{display:block;font-size:var(--t-xs);font-weight:600;margin-bottom:8px}
.nota-lbl .muted{font-weight:400}
.tramite-caja textarea{width:100%;margin-top:4px;padding:8px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-sm);background:var(--surface);
  color:var(--ink);resize:vertical;min-height:52px}
.tramite-caja textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* ---- Estados vacíos que invitan, en vez de constatar un hueco ---- */
/* La lista de envases pasa a dos columnas en pantallas anchas; sin esto el
   estado vacío se metía en una sola celda y salía como una columna estrecha. */
.list>.vacio,.list>p{grid-column:1/-1}
.vacio{text-align:center;padding:40px 24px;border:1px dashed var(--line-strong);
  border-radius:var(--r-md);background:var(--surface)}
.vacio h3{font-size:var(--t-lg);font-family:var(--font-display);font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 8px}
.vacio p{color:var(--muted);font-size:var(--t-sm);margin:0 auto;max-width:30rem}
.vacio .btn-row{justify-content:center}

/* Los botones dicen que están trabajando en vez de quedarse mudos. */
button:disabled{opacity:.6;cursor:progress}

/* ---- Encabezados de sección de obligaciones ----
   Con tarjetas debajo, un encabezado en versalitas grises desaparece: la
   pantalla se lee como una sola lista larga sin principio. */
.sec-cab{display:flex;align-items:baseline;gap:8px;margin:24px 0 4px}
.sec-cab.sep{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.sec-cab .sec-tit{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.sec-cab .sec-n{font-size:var(--t-xs);font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:var(--r-full);padding:2px 8px;
  font-variant-numeric:tabular-nums}
.sec-ayuda{color:var(--muted);font-size:var(--t-sm);margin:0 0 16px;max-width:44rem}

/* ================= AVISAR DE ALGO =================
   El enlace vive en el pie de la barra lateral: siempre a la vista y nunca
   en medio. Un botón flotante más habría competido con el del asistente, y
   dos burbujas en la misma esquina no son dos atajos, son ninguno. */
.side-aviso{display:flex;align-items:center;gap:8px;width:100%;margin-top:16px;
  padding:8px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);color:#cfe0ee;font-family:inherit;font-size:var(--t-xs);
  cursor:pointer;transition:.14s;text-align:left}
.side-aviso:hover{background:rgba(255,255,255,.13);color:#fff}
.side-aviso:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ico-av{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.modal-fondo{position:fixed;inset:0;z-index:60;background:rgba(16,32,48,.42);
  display:flex;align-items:center;justify-content:center;padding:24px;
  backdrop-filter:blur(2px)}
.modal-caja{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:34rem;
  box-shadow:0 18px 50px rgba(16,32,48,.22);display:flex;flex-direction:column;
  max-height:calc(100vh - 48px)}
.modal-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 24px 0}
.modal-cab h2{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;margin:0}
.modal-x{background:none;border:0;font-size:var(--t-xl);line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px;border-radius:var(--r-xs)}
.modal-x:hover{color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.modal-cuerpo{padding:16px 24px 4px;overflow-y:auto}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 20px}

/* Dos casillas grandes en vez de un desplegable: son dos cosas distintas y
   la diferencia hay que poder leerla, no adivinarla por el nombre. */
.fb-tipos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.fb-tipo{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;cursor:pointer;transition:.13s}
.fb-tipo b{font-size:var(--t-sm);color:var(--ink)}
.fb-tipo span{font-size:var(--t-xs);color:var(--muted);line-height:1.35}
.fb-tipo:hover{border-color:var(--line-strong)}
.fb-tipo:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.fb-tipo.sel{background:var(--brand-soft);border-color:var(--brand)}
.fb-tipo.sel b{color:var(--brand-2)}

.fb-lbl{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:16px}
.fb-lbl textarea{width:100%;margin-top:8px;padding:12px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-base);background:var(--surface);
  color:var(--ink);resize:vertical;min-height:112px;font-weight:400}
.fb-lbl textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* Lo que se envía, a la vista. Plegado para no estorbar, pero ahí. */
.fb-ctx{border-top:1px solid var(--line);padding-top:12px;margin-bottom:8px}
.fb-ctx>summary{list-style:none;cursor:pointer;font-size:var(--t-xs);color:var(--muted);
  display:flex;align-items:center;gap:8px}
.fb-ctx>summary::-webkit-details-marker{display:none}
.fb-ctx>summary::before{content:"+";opacity:.7}
.fb-ctx[open]>summary::before{content:"–"}
.fb-ctx>summary:hover{color:var(--ink)}
.fb-ctx ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.fb-ctx li{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-xs);
  padding:4px 8px;background:var(--surface-2);border-radius:var(--r-xs)}
.fb-ctx li span{color:var(--muted)}
.fb-ctx li b{color:var(--ink);font-weight:600;text-align:right}
.fb-ctx-nota{font-size:var(--t-xs);color:var(--muted);margin:8px 0 0}

.fb-ok{text-align:center;padding:12px 0 8px}
.fb-ok-mark{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  background:var(--good-bg);color:var(--good);display:flex;align-items:center;
  justify-content:center;font-size:var(--t-xl)}
.fb-ok p{font-size:var(--t-sm);line-height:1.5;margin:0 auto 8px;max-width:26rem}

@media(max-width:620px){
  .modal-fondo{padding:0;align-items:flex-end}
  .modal-caja{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh}
  .fb-tipos{grid-template-columns:1fr}
}

/* ---- La guía de cada obligación ----
   Lo que hay que tener a mano va antes del procedimiento: el trámite que se
   abandona no es el difícil, es el que se empieza sin el certificado digital
   y hay que dejar a medias. Y lo secundario va plegado, porque quien está
   resolviendo un trámite no necesita leerse el régimen sancionador. */
.comose .lista-check{list-style:none;padding:0;margin:0 0 4px;display:grid;gap:4px}
.comose .lista-check li{position:relative;padding-left:24px;font-size:var(--t-sm);line-height:1.5}
.comose .lista-check li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:8px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-xs)}

.datos-tramite{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.datos-tramite .dt{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px}
.datos-tramite .dt span{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.datos-tramite .dt p{margin:0;font-size:var(--t-sm);line-height:1.5}
@media(max-width:620px){.datos-tramite{grid-template-columns:1fr}}

.comose .amplia{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.comose .amplia>summary{list-style:none;cursor:pointer;font-size:var(--t-sm);font-weight:600;
  color:var(--brand);display:flex;align-items:center;gap:8px}
.comose .amplia>summary::-webkit-details-marker{display:none}
.comose .amplia>summary::before{content:"+";opacity:.75;font-weight:400}
.comose .amplia[open]>summary::before{content:"–"}
.comose .amplia>summary:hover{color:var(--brand-2)}
.comose .amplia>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
  border-radius:var(--r-xs)}
.comose .amplia ul{margin:12px 0 0;padding-left:20px;display:grid;gap:8px}
.comose .amplia li,.comose .amplia p{font-size:var(--t-sm);line-height:1.55}
.comose .amplia>p{margin:12px 0 0}
.comose .amplia h5{font-size:var(--t-sm);font-weight:600;margin:12px 0 4px;color:var(--ink)}

/* ---- Brújula: las dos normas y las dudas de cada paso ---- */
.dos-normas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.norma-caja{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 20px}
.norma-caja .norma-et{display:inline-block;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.04em;color:var(--brand-2);background:var(--brand-soft);
  border-radius:var(--r-xs);padding:2px 8px;margin-bottom:8px}
.norma-caja h3{font-family:var(--font-display);font-size:var(--t-base);font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 4px}
.norma-caja p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--muted)}
@media(max-width:720px){.dos-normas{grid-template-columns:1fr}}

.paso-mas{margin-top:12px}
.paso-mas>summary{list-style:none;cursor:pointer;font-size:var(--t-sm);color:var(--brand);
  display:flex;align-items:center;gap:8px}
.paso-mas>summary::-webkit-details-marker{display:none}
.paso-mas>summary::before{content:"+";opacity:.75}
.paso-mas[open]>summary::before{content:"–"}
.paso-mas>summary:hover{color:var(--brand-2)}
.paso-mas>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
  border-radius:var(--r-xs)}
.paso-mas h5{font-size:var(--t-sm);font-weight:600;margin:12px 0 4px;color:var(--ink)}
.paso-mas p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--muted)}

/* ---- La barra de acción de una obligación ----
   Al abrir una obligación se viene a una de dos cosas: a decir en qué punto
   está —un segundo— o a enterarse de cómo se hace —un rato—. Lo de un segundo
   iba al final de cuatrocientos píxeles de texto; ahora va primero y ocupa una
   línea. Los campos no aparecen hasta que se piden: una ficha que enseña a la
   vez los tres formularios ocupa lo que ocupan los tres aunque se use uno. */
.barra-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.btn-acc{background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:8px 12px;font-family:inherit;font-size:var(--t-sm);
  color:var(--ink);cursor:pointer;transition:.13s;white-space:nowrap}
.btn-acc:hover{border-color:var(--brand);color:var(--brand)}
.btn-acc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-acc.principal{background:var(--good-bg);border-color:#cfe6da;color:#1d6b52;font-weight:600}
.btn-acc.principal:hover{background:var(--good);border-color:var(--good);color:#fff}
.btn-acc.abierto{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2)}
.acc-hecho{font-size:var(--t-sm);color:#1d6b52;background:var(--good-bg);
  border-radius:var(--r-sm);padding:8px 12px}
.acc-hecho b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs)}
.acc-tramite{font-size:var(--t-sm);color:var(--brand-2);background:var(--brand-soft);
  border-radius:var(--r-sm);padding:8px 12px}
.panel-acc{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px;margin:-4px 0 16px}
.panel-acc .marcar-campos{margin:0}

/* Lo que se lee: dos líneas a la vista y el resto plegado con su recuento,
   que es lo que dice que hay algo dentro sin obligar a atravesarlo. */
.ob-que{font-size:var(--t-sm);line-height:1.6;color:var(--ink);margin:0 0 12px;max-width:44rem}
.amplia-n{display:inline-block;font-size:var(--t-xs);font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:var(--r-full);padding:1px 8px;margin-left:4px}
.comose .amplia{margin-top:0;border-top:1px solid var(--line);padding:12px 0}
.comose .amplia+.amplia{margin-top:-1px}

/* Unidades al año por país: una casilla por país marcado, ni una más. */
.unidades-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.ud{display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.ud>span{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;color:var(--brand-2);
  background:var(--brand-soft);border-radius:var(--r-xs);padding:2px 8px;flex:none}
.ud input{flex:1;min-width:0;border:0;background:none;font-family:inherit;
  font-size:var(--t-sm);color:var(--ink);padding:0}
.ud input:focus{outline:none}
.ud:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* Qué envases impiden resolver un umbral. Un "faltan datos" sin destinatario
   es un callejón: con veinte envases, saber cuál es la mitad del trabajo. */
.faltan-envases{background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--line-strong);border-radius:var(--r-sm);
  padding:12px 16px;margin-bottom:16px}
.faltan-envases h4{margin:0 0 8px}
.faltan-envases ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.faltan-envases li{font-size:var(--t-sm);color:var(--muted)}
.enlace-sku{background:none;border:0;padding:0;font-family:inherit;font-size:var(--t-sm);
  font-weight:600;color:var(--brand);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.enlace-sku:hover{color:var(--brand-2)}
.enlace-sku:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}

/* ---- Cuándo vuelve a tocar ----
   La fecha que el cliente se molesta en anotar tiene que servirle de algo.
   Antes se guardaba y se quedaba en el expediente sin disparar nada. */
.acc-renov{font-size:var(--t-sm);color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.acc-renov.cerca{color:#8a5f16;background:var(--warn-bg);border-color:#eaddbf}
.acc-renov.urge{color:#8f3427;background:var(--bad-bg);border-color:#eecec6;font-weight:600}

.aviso-renov{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--warn);border-radius:var(--r-md);padding:16px 20px;
  margin-bottom:24px}
.aviso-renov ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aviso-renov li{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;font-size:var(--t-sm);padding:8px 12px;
  background:var(--surface-2);border-radius:var(--r-sm)}
.aviso-renov li b{font-weight:600;color:var(--ink)}
.aviso-renov li span{color:var(--muted);font-size:var(--t-xs);white-space:nowrap}
.aviso-renov li.urge{background:var(--bad-bg)}
.aviso-renov li.urge span{color:#8f3427;font-weight:600}

/* Un enlace discreto bajo el botón de entrar: quien lo busca lo encuentra,
   quien no, no lo ve compitiendo con el botón principal. */
.enlace-sobrio{display:block;width:100%;margin-top:14px;background:none;border:0;
  font-family:inherit;font-size:var(--t-sm);color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:4px}
.enlace-sobrio:hover{color:var(--brand)}
.enlace-sobrio:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
  border-radius:var(--r-xs)}

/* ---- Quién tiene acceso ---- */
.personas{display:grid;gap:8px;margin-bottom:24px}
.persona{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 16px}
.p-quien{flex:1;min-width:180px;display:flex;flex-direction:column}
.p-nom{font-weight:600;font-size:var(--t-sm)}
.p-yo{font-weight:400;color:var(--muted);font-size:var(--t-xs)}
.p-mail{font-size:var(--t-xs);color:var(--muted)}
.p-perfil{font-size:var(--t-xs);color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-full);padding:3px 10px;white-space:nowrap}
.p-perfil.admin{color:var(--brand-2);background:var(--brand-soft);border-color:transparent;font-weight:600}
.p-pend{font-size:var(--t-xs);color:#8a5f16;background:var(--warn-bg);
  border-radius:var(--r-full);padding:3px 10px;white-space:nowrap}

.invitar{border-top:1px solid var(--line);padding-top:20px}
.invitar h4{margin:0 0 12px;font-size:var(--t-sm);font-weight:600}
.inv-fila{display:flex;gap:8px;flex-wrap:wrap}
.inv-fila input{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-sm);
  background:var(--surface);color:var(--ink)}
.inv-fila input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.inv-fila select{padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink)}

/* ---- Los papeles ----
   Se leen, así que se les da medida de lectura y aire. Un documento legal que
   nadie lee no protege a nadie: el cliente firma sin entender y el día del
   problema discute que no se le informó. */
.wrap-legal{max-width:1380px;margin:0 auto;padding:32px 32px 80px}
.legal{max-width:44rem}
.legal .display{margin:16px 0 8px}
.legal .lede{color:var(--muted);font-size:var(--t-base);margin:0 0 32px}
.legal-cuerpo h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);margin:32px 0 8px}
.legal-cuerpo p{font-size:var(--t-sm);line-height:1.65;margin:0 0 12px}
.legal-cuerpo ul{margin:0 0 12px;padding-left:20px;display:grid;gap:8px}
.legal-cuerpo li{font-size:var(--t-sm);line-height:1.6}
.legal-cuerpo b{font-weight:600}
.legal-fecha{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--muted)}

.foot-legal{display:inline-flex;gap:12px;margin-left:12px;flex-wrap:wrap}
.foot-legal button,.trust-legal button{background:none;border:0;padding:0;
  font-family:inherit;font-size:inherit;color:var(--brand);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.foot-legal button:hover,.trust-legal button:hover{color:var(--brand-2)}
.trust-legal{text-align:center;font-size:var(--t-xs);color:var(--muted);margin:8px 0 0}

/* ================= LIENZO DE CONJUNTO =================
   El envío dibujado por capas: el producto en el centro y cada pieza, un
   rectángulo a su alrededor. Tres columnas —piezas, dibujo, lo que dice el
   motor— porque es una pantalla para usar delante del cliente: él señala,
   nosotros arrastramos, y el panel de la derecha va diciendo lo que falta.

   Los controles de cada capa viven en la lista del panel, nunca encima del
   dibujo: un dibujo lleno de botones deja de leerse como un dibujo. */
.cj-wrap{max-width:1560px;margin:0 auto;padding:24px 24px 64px}

.cj-cabecera{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 24px;box-shadow:var(--shadow-sm)}
.cj-datos{display:grid;gap:12px;align-content:start}
.cj-datos label,.editor label{display:grid;gap:4px;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.cj-datos input,.editor input,.editor select{font-family:inherit;font-size:var(--t-base);
  font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 12px;
  background:var(--surface)}
.cj-datos input:focus,.editor input:focus,.editor select:focus{outline:2px solid var(--brand);
  outline-offset:-1px;border-color:var(--brand)}

.cj-preg{display:block;font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  margin-bottom:10px}
.cj-btns{display:flex;flex-wrap:wrap;gap:8px}
.seg{font-family:inherit;font-size:var(--t-sm);cursor:pointer;padding:8px 14px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--r-full)}
.seg:hover{background:var(--surface-2)}
.seg.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cj-ayuda{font-size:var(--t-xs);color:var(--muted);margin:10px 0 0;max-width:48rem}

.cj-cols{display:grid;grid-template-columns:236px minmax(0,1fr) 360px;gap:20px;margin-top:20px;
  align-items:start}
.cj-catalogo,.cj-panel,.cj-lienzo{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.cj-catalogo,.cj-panel{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.cj-catalogo h2,.cj-panel h2{font-family:var(--font-display);font-size:var(--t-lg);
  font-weight:600;margin:0 0 4px}

.cat-grupo{margin-top:14px}
.cat-grupo h3{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 6px;font-weight:600}
.cat-pieza{display:block;width:100%;text-align:left;font-family:inherit;font-size:var(--t-sm);
  cursor:grab;margin-bottom:4px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;touch-action:none}
.cat-pieza:hover{border-color:var(--brand);background:var(--brand-soft)}
.cat-pieza.sel{border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 2px var(--brand-soft)}

/* --- El dibujo --- */
.cj-pista{background:var(--brand-soft);border:1px solid #cfe0ee;border-radius:var(--r-md);
  padding:14px 16px;font-size:var(--t-sm);margin:0 0 14px;color:var(--brand-2);line-height:1.55}
#dibujo svg{width:100%;height:auto;display:block;font-family:var(--font-sans)}
#dibujo .capa-rect,#dibujo .capa-tit,#dibujo .chip,#dibujo .producto{cursor:pointer}
#dibujo .capa-rect:hover{filter:brightness(.97)}
#dibujo .chip:hover rect{stroke-width:2}
#dibujo .capa-rect.sel{filter:drop-shadow(0 0 0 2px var(--brand-soft))}

/* Las zonas donde se puede soltar. Invisibles hasta que hay algo en la mano:
   una pantalla llena de recuadros punteados en reposo no se lee. */
#dibujo .zona rect{fill:var(--brand);fill-opacity:.07;stroke:var(--brand);stroke-width:1.5;
  stroke-dasharray:6 4}
#dibujo .zona text{fill:var(--brand);opacity:.85}
#dibujo .zona.dentro rect{fill-opacity:.2;stroke-dasharray:none;stroke-width:2.5}
#dibujo .zona.dentro text{opacity:1}

/* --- Lo que dice el motor --- */
.pan-t{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:18px 0 8px;font-weight:600}
.res-cifras{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.res-cifra{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 10px;min-width:70px}
.res-cifra b{display:block;font-family:var(--font-display);font-size:var(--t-lg);line-height:1.1}
.res-cifra span{font-size:var(--t-xs);color:var(--muted)}
.res-peso{font-size:var(--t-sm);margin:8px 0 4px}

.capas-lista{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.capas-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;
  align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px 7px 10px;
  background:var(--surface-2)}
.capas-lista li.sel{border-color:var(--brand);background:var(--brand-soft)}
.cl-nom{grid-column:1;justify-self:start;text-align:left;border:0;background:none;padding:0;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink);cursor:pointer}
.cl-nom:hover{color:var(--brand);text-decoration:underline}
.cl-niv{grid-column:1;display:flex;flex-wrap:wrap;gap:3px}
.cl-niv i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;color:#fff;
  border-radius:var(--r-full);padding:1px 7px}
.cl-btn{grid-column:2;grid-row:1 / span 2;display:flex;gap:2px}
.cl-btn button{border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  border-radius:var(--r-xs);width:24px;height:24px;cursor:pointer;font-size:12px;line-height:1;
  font-family:inherit}
.cl-btn button:hover{border-color:var(--brand);color:var(--brand)}

.avisos{display:grid;gap:8px}
.av{font-size:var(--t-sm);line-height:1.45;border-radius:var(--r-sm);padding:9px 11px;
  border:1px solid transparent}
.av-et{display:block;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:2px}
.av-falta{background:var(--bad-bg);border-color:#eccfc8;color:#7a2c20}
.av-aviso{background:var(--warn-bg);border-color:#e8d5a8;color:#6d4a12}
.av-nota{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.av-ok{background:var(--good-bg);border-color:#c6e2d4;color:#1f6b4e}

.editor{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.editor h3{font-family:var(--font-display);font-size:var(--t-base);font-weight:600;margin:0}
.ed-porque{font-size:var(--t-xs);color:var(--muted);margin:-4px 0 0;line-height:1.5}
.ed-porque b{color:var(--ink)}
.ed-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ed-btns{display:flex;gap:8px;margin-top:2px}

.cj-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.cj-sel{font-family:inherit;font-size:var(--t-sm);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:8px 10px;background:var(--surface);color:var(--ink);cursor:pointer}
#jsonWrap{margin-top:12px;display:grid;gap:8px}
#jsonBox{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--t-xs);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:10px}

/* El fantasma que sigue al dedo. No captura eventos: si los capturase,
   elementFromPoint devolvería siempre el fantasma y nunca la zona de debajo. */
.fantasma{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
  background:var(--brand);color:#fff;font-size:var(--t-xs);font-weight:600;
  padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--shadow);white-space:nowrap}
body.arrastrando{cursor:grabbing;user-select:none}

@media (max-width:1240px){
  .cj-cols{grid-template-columns:210px minmax(0,1fr)}
  .cj-panel{grid-column:1 / -1;position:static;max-height:none}
}
@media (max-width:860px){
  .cj-cabecera{grid-template-columns:1fr}
  .cj-cols{grid-template-columns:1fr}
  .cj-catalogo{position:static;max-height:none}
}

/* ---- Arranque: cómo se manda esto ----
   Va encima del dibujo y no dentro de un desplegable del panel. Es la primera
   decisión y tiene que verse; cuando ya hay algo dibujado, se pliega. */
.arranque{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  padding:14px 16px;margin-bottom:14px}
.arr-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:12px}
.arr-cab b{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600}
.arr-cab span{font-size:var(--t-sm);color:var(--muted)}
.arr-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.arr-pl{display:block;text-align:left;font-family:inherit;cursor:pointer;padding:10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.arr-pl:hover{border-color:var(--brand);background:var(--brand-soft)}
.arr-pl .mini{display:block;width:100%;height:auto;margin-bottom:8px}
.arr-pl b{display:block;font-size:var(--t-sm);color:var(--ink);line-height:1.25}
.arr-pl span{display:block;font-size:var(--t-xs);color:var(--muted);line-height:1.4;margin-top:2px}
.arr-toggle{border:1px solid var(--line-strong);background:var(--surface);color:var(--brand);
  font-family:inherit;font-size:var(--t-xs);border-radius:var(--r-full);padding:3px 12px;
  cursor:pointer}
.arr-toggle:hover{background:var(--brand-soft)}
.arranque.plegado{padding:10px 16px}
.arranque.plegado .arr-cab{margin-bottom:0}
.arranque.plegado .arr-cab b{font-size:var(--t-base)}
.arranque.plegado .arr-lista{display:none}
.arranque.plegado.abierto .arr-lista{display:grid;margin-top:12px}

/* Montar el envío a mano, sin arrastrar nada. */
.cj-manual{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}

/* ---- Los envases que la empresa ya tiene ---- */
.cat-cartera{margin-top:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-nota{font-size:var(--t-xs);color:var(--muted);line-height:1.45;margin:0}

/* El catálogo tiene 69 piezas porque el Anexo I nombra 69. Las de todos los
   días se ven; las raras salen con este botón, por grupo. */
.cat-mas{display:block;width:100%;text-align:left;font-family:inherit;
  font-size:var(--t-xs);color:var(--brand);background:none;border:0;
  padding:6px 2px;cursor:pointer;text-decoration:underline}
.cat-mas:hover{color:var(--ink)}
/* La pieza que solo es envase según cómo se venda lo dice en el botón: la
   percha con la prenda sí, la percha sola no, y es el mismo objeto. */
.cat-ojo{display:block;font-style:normal;font-size:var(--t-xs);color:var(--muted)}
.cat-no .no-lista{list-style:none;padding:0;margin:8px 0 0}
.cat-no .no-lista li{font-size:var(--t-xs);line-height:1.5;color:var(--muted);
  padding:6px 0;border-top:1px solid var(--line)}
.cat-no .no-lista b{color:var(--ink);font-weight:600;display:block}
.cat-no .no-salvo{display:block;font-style:normal;color:var(--brand);margin-top:2px}
.cat-sku{display:block;line-height:1.3}
.cat-sku .cat-fmt{display:block;font-size:var(--t-xs);color:var(--muted);font-weight:400}
.cat-sku .cat-ya{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--good);background:var(--good-bg);border-radius:var(--r-full);
  padding:1px 6px;margin-left:4px}
.cat-sku.puesto{opacity:.75}

/* ---- El lienzo dentro de la consola ----
   La misma pantalla, montada como subsección de Envases. Cambia el marco: ya
   hay una tarjeta blanca alrededor y una columna menos de ancho, así que las
   tres columnas se estrechan, las cabeceras dejan de ser tarjetas sueltas y
   nada se queda pegado al hacer scroll dentro de otra caja que ya scrollea. */
.cj-embebido{margin-top:16px}
.cj-embebido .cj-cabecera{background:var(--surface-2);box-shadow:none;padding:16px 18px}
.cj-embebido .cj-cols{grid-template-columns:210px minmax(0,1fr) 320px;gap:16px}
.cj-embebido .cj-catalogo,.cj-embebido .cj-panel{position:static;max-height:none;
  background:var(--surface-2);box-shadow:none}
.cj-embebido .cj-lienzo{box-shadow:none;border-color:var(--line)}
.cj-embebido .arranque{background:var(--surface)}
@media (max-width:1400px){
  .cj-embebido .cj-cols{grid-template-columns:190px minmax(0,1fr)}
  .cj-embebido .cj-panel{grid-column:1 / -1}
}
@media (max-width:900px){
  .cj-embebido .cj-cabecera{grid-template-columns:1fr}
  .cj-embebido .cj-cols{grid-template-columns:1fr}
}

/* ---- El visor de documentos ----
   Los papeles se miran dentro de la aplicación. Un PDF necesita sitio: la caja
   ocupa casi toda la ventana, porque un visor pequeño obliga a bajarlo igual
   y entonces no sirve de nada. */
.visor-fondo{padding:20px}
.visor-caja{max-width:1100px;width:100%;height:92vh;display:flex;flex-direction:column}
.visor-caja .modal-cab{flex:none}
.visor-btns{display:flex;align-items:center;gap:6px}
.visor-cuerpo{flex:1;min-height:0;background:var(--bg-2);border-top:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;display:flex;
  align-items:center;justify-content:center}
.visor-cuerpo iframe{width:100%;height:100%;border:0;display:block}
.visor-cuerpo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:700px){
  .visor-fondo{padding:0}
  .visor-caja{height:100vh;max-width:none;border-radius:0}
  .visor-cuerpo{border-radius:0}
  .visor-btns .btn{padding:6px 10px}
}

/* ================= PANEL DE ADMINISTRACIÓN (MFW) =================
   No es la consola de un cliente y no debe parecerlo: aquí no hay semáforo ni
   expedientes, hay una lista de clientes y un formulario largo. Se apoya en
   los mismos componentes (card, field, btn, av) para no inventar una segunda
   forma de hacer lo mismo. */
.adm-wrap{max-width:1100px;margin:0 auto;padding:24px 24px 72px}
.adm-quien{margin-left:auto;font-size:var(--t-xs);color:#cfe0ee;letter-spacing:.02em}

.adm-tabs{display:flex;align-items:center;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.adm-tab{font-family:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  padding:9px 16px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--muted);border-radius:var(--r-full)}
.adm-tab:hover{color:var(--brand);border-color:var(--brand)}
.adm-tab.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.adm-salir{margin-left:auto;font-family:inherit;font-size:var(--t-sm);background:none;border:0;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.adm-salir:hover{color:var(--brand)}

.adm-h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  margin:28px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.adm-h3:first-of-type{border-top:0;padding-top:0;margin-top:20px}

.adm-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:14px}
.adm-cli{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface-2)}
.adm-cli.demo{border-style:dashed}
.adm-cli h3{font-family:var(--font-display);font-size:var(--t-base);font-weight:600;margin:0 0 4px}
.adm-chip{font-family:var(--font-sans);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);background:var(--bg-2);border-radius:var(--r-full);
  padding:2px 8px;vertical-align:middle}
.adm-meta{font-size:var(--t-xs);color:var(--muted);margin:0 0 8px}
.adm-meta code{background:var(--bg-2);border-radius:var(--r-xs);padding:1px 5px}
.adm-cifras{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--t-xs);color:var(--ink);margin:0 0 8px}
.adm-users{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);
  display:grid;gap:3px;font-size:var(--t-xs);color:var(--muted)}
.adm-pend{color:var(--warn);font-weight:600}

/* --- El formulario de alta --- */
.adm-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.adm-fila input,.adm-fila select{flex:1;min-width:150px;font-family:inherit;font-size:var(--t-sm);
  padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink)}
.adm-fila input:focus,.adm-fila select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.adm-fila .adm-mini{flex:0 0 110px;min-width:110px}
.adm-sangria{padding-left:16px;border-left:2px solid var(--line)}
.adm-etq{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.adm-uds{display:inline-flex;align-items:center;gap:4px}
.adm-uds i{font-style:normal;font-size:var(--t-xs);color:var(--muted);font-weight:700}
.adm-uds input{flex:0 0 96px;min-width:96px}
.adm-x{flex:0 0 auto;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:15px;line-height:1;
  font-family:inherit}
.adm-x:hover{border-color:var(--bad);color:var(--bad)}
.adm-envase{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;
  background:var(--surface-2)}
.adm-checks{display:grid;gap:8px}
.adm-check{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-sm);cursor:pointer}
.adm-check input{margin-top:3px}

.adm-veredicto{margin:22px 0 16px;display:grid;gap:10px}
.adm-veredicto .av ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.adm-veredicto .av li{line-height:1.45}
.banner.aviso{background:var(--warn-bg);border-color:#eaddbf;color:#7a5313}
.banner.aviso ul{margin:6px 0 0;padding-left:18px}

@media (max-width:720px){
  .adm-wrap{padding:16px 14px 60px}
  .adm-fila input,.adm-fila select{min-width:120px}
}

/* ---- El cuestionario del cliente ----
   Lo abre alguien que no conoce la herramienta, desde el correo y a menudo en
   el móvil. Medida de lectura, campos grandes y una sola columna cuando no
   cabe: un formulario apretado se abandona a la tercera pregunta. */
.q-wrap{max-width:820px;margin:0 auto;padding:28px 20px 80px}
.q-cabecera{margin-bottom:26px}
.q-cabecera .display{font-size:var(--t-2xl);margin:0 0 8px}
.q-explica{font-size:var(--t-sm);color:var(--muted);line-height:1.6;margin:10px 0 0;max-width:46rem}
.q-explica b{color:var(--ink)}

.q-seccion{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.q-seccion h2{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;margin:0 0 6px}
.q-intro{font-size:var(--t-sm);color:var(--muted);line-height:1.55;margin:0 0 16px;max-width:44rem}

.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.q-campo{display:flex;flex-direction:column;gap:5px}
.q-campo.corto{max-width:200px}
.q-campo label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.q-campo label i{font-style:normal;font-weight:400;color:var(--muted);font-size:var(--t-xs)}
.q-campo input,.q-campo select{font-family:inherit;font-size:var(--t-base);padding:11px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.q-campo input:focus,.q-campo select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.q-ayuda{font-size:var(--t-xs);color:var(--muted);line-height:1.45}

.q-fila{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:12px;
  background:var(--surface-2)}
.q-fila-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.q-fila-cab b{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.q-x{border:0;background:none;color:var(--muted);font-family:inherit;font-size:var(--t-xs);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.q-x:hover{color:var(--bad)}
.q-check{display:flex;align-items:flex-start;gap:9px;font-size:var(--t-sm);cursor:pointer;
  padding:8px 0;flex-wrap:wrap}
.q-check input{margin-top:3px}
.q-check .q-ayuda{flex-basis:100%;padding-left:26px}

.q-cierre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.q-faltan{background:var(--warn-bg);border:1px solid #eaddbf;border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:16px;font-size:var(--t-sm);color:#6d4a12;line-height:1.5}
.q-faltan ul{margin:8px 0;padding-left:18px}
.q-faltan p{margin:8px 0 0}
.q-listo{background:var(--good-bg);border:1px solid #c6e2d4;border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:16px;font-size:var(--t-sm);color:#1f6b4e}
.q-pie{font-size:var(--t-xs);color:var(--muted);margin:12px 0 0;line-height:1.5}
.q-aviso{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 24px;box-shadow:var(--shadow-sm);max-width:44rem;margin:40px auto}
.q-aviso .display{font-size:var(--t-xl);margin:0 0 8px}
.q-aviso p{font-size:var(--t-sm);line-height:1.6;margin:0 0 8px}

/* El dibujo del envío: altura de lectura fija y desplazamiento lateral si el
   envío es largo. Antes se escalaba al ancho de la columna y en la consola
   (que es estrecha) salía a la mitad de tamaño. */
#cj-dibujo{overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
#cj-dibujo svg{height:250px;width:auto;max-width:none;display:block}
#cj-dibujo .cj-pieza,#cj-dibujo .cj-prod,#cj-dibujo .cj-cuelga{cursor:pointer}
#cj-dibujo .cj-pieza:hover rect{filter:brightness(.97)}
#cj-dibujo .cj-cuelga:hover circle{stroke-width:2.2}

/* El menú de arranque, agrupado por oficio y con el producto dibujado. */
.arr-sector{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin:14px 0 8px}
.arr-sector:first-of-type{margin-top:2px}
.arr-ic{width:38px;height:38px;display:block;margin:0 auto 8px}