: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) */
  --accent-ink:#1f6f86;  /* el mismo teal, oscurecido para texto y botones: 5,7:1 sobre blanco */

  --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}
/* El menú va en el orden en que se hace el trabajo —empresa, envases,
   proveedores y declaraciones—, sin rótulo, y debajo dos grupos con el suyo:
   el seguimiento y los complementos. */
.side-nav{overflow-y:auto;min-height:0}
.side-link[data-tab="panel"]{margin-bottom:10px}
.side-grupo{margin:14px 12px 4px;font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(233,240,247,.55)}
@media(max-height:820px){.side-link{padding:9px 12px}.side-grupo{margin-top:10px}}
.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-ink);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}
/* Declaraciones: la cuenta de arriba y, en cada fila, el estado y sus botones. */
.decl-cuenta{margin:0 0 12px;font-size:var(--t-sm);color:var(--muted)}
.decl-cuenta b{color:var(--ink)}
.row-card.decl-fila{cursor:default}
.row-card.decl-fila .rc-right{gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* «Siguiente paso»: plano, una regla fina encima y el botón a la derecha. */
.paso-sig{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:8px 0 0;
  padding:16px 0 0;border-top:1px solid var(--line)}
.paso-sig span{font-size:var(--t-sm);color:var(--muted)}
.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-ink)} .btn.accent:hover{background:#185a6e}
.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}

/* Un botón con icono. El icono va antes del texto y hereda su color, así que
   sirve igual en el botón de acento que en el fantasma. */
.btn .ico{width:18px;height:18px;flex:none;margin-right:7px;vertical-align:-4px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round}

/* ---- Añadir varios ----
   Las tres formas de meter envases en bloque. Son el mismo trabajo hecho de
   tres maneras y solo se usan al principio, así que van plegadas; abiertas,
   cada una dice para qué sirve, que es lo que no decía «Plantilla Excel». */
.anadir{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;
  margin:0 0 18px;padding:16px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-md)}
.anadir-op{position:relative;display:flex;align-items:center;gap:13px;text-align:left;
  font-family:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 18px}
.anadir-op:hover{border-color:var(--brand);background:var(--brand-soft)}
.anadir-op .ico{flex:none;width:30px;height:30px;fill:none;stroke:var(--brand);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.anadir-op b{font-size:var(--t-base);color:var(--ink);line-height:1.3;font-weight:600}

/* ---- La explicación, escondida hasta que hace falta ----
   Cada acceso llevaba dos renglones debajo del nombre. Todos a la vez ocupan
   más que lo que explican, y cuando ya se sabe lo que hace cada botón
   estorban para siempre.

   Sale con medio segundo de espera, para que no salten al cruzar el ratón por
   encima, y sale también al llegar con el teclado. La explicación es siempre
   un extra: el nombre del botón se sostiene solo, así que donde no hay ratón
   no se pierde nada. */
.pista{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:max-content;
  max-width:270px;background:var(--ink);color:#fff;font-size:var(--t-sm);
  font-weight:400;line-height:1.45;text-align:left;border-radius:var(--r-sm);
  padding:9px 12px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .13s ease .45s,transform .13s ease .45s,visibility 0s .58s}
.pista-izq{left:auto;right:0}
.pista::before{content:"";position:absolute;bottom:100%;left:18px;border:6px solid transparent;
  border-bottom-color:var(--ink)}
.pista-izq::before{left:auto;right:18px}
*:hover > .pista,*:focus-visible > .pista{opacity:1;visibility:visible;
  transform:translateY(0);transition-delay:.45s,.45s,0s}
@media (prefers-reduced-motion:reduce){.pista{transform:none}}

/* ---- La «i» de información ----
   Junto al nombre de un campo o de un bloque. Lo que explica sale en la misma
   pista de los botones, con su medio segundo de espera. */
.info-i{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--line-strong);
  color:var(--muted);background:var(--surface);font:italic 700 11px/1 Georgia,"Times New Roman",serif;
  text-transform:none;letter-spacing:0;vertical-align:middle;cursor:help}
.info-i:hover,.info-i:focus-visible{color:var(--brand);border-color:var(--brand);outline:none}
.info-i .pista{font-family:var(--font-sans);font-style:normal;font-size:var(--t-sm);font-weight:400;
  letter-spacing:0;text-transform:none}

/* ---- Envases a dos columnas ----
   La cartera a la izquierda y un lateral a la derecha. Antes todo iba en una
   columna con los accesos a otras pantallas metidos en la barra de botones,
   y sobraba medio ancho de pantalla sin usar.

   En móvil se apila, y ahí el lateral queda debajo de la lista. Es el precio
   y está asumido: esto se usa en un escritorio con la cartera delante. */
.env-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;
  align-items:start}
.env-lado{display:grid;gap:16px;position:sticky;top:16px}
.lado{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 20px;box-shadow:var(--shadow-sm)}
/* El título de cada bloque, en tinta y como se escribe: heredaba del h3
   general las mayúsculas y el gris, y en el lateral se leía como un rótulo
   apagado en vez de como el nombre de lo que hay debajo. */
.lado h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  margin:0 0 12px;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--ink);
  display:flex;align-items:center;gap:8px}
.lado .btn{position:relative;width:100%;justify-content:center;padding:11px 14px}

/* Los dibujos guardados. Vivían solo dentro del lienzo y plegados, así que no
   había forma de saber que existían sin entrar a mirar. */
.lado-lista{list-style:none;margin:14px 0 0;padding:14px 0 0;display:grid;gap:6px;
  border-top:1px solid var(--line)}
.lado-lista button{display:grid;width:100%;text-align:left;font-family:inherit;
  cursor:pointer;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px;gap:1px}
.lado-lista button:hover{border-color:var(--brand);background:var(--brand-soft)}
.lado-lista b{font-size:var(--t-sm);color:var(--ink);font-weight:600;line-height:1.3}
.lado-lista span{font-size:var(--t-xs);color:var(--muted)}
.lado-nota{font-size:var(--t-sm);color:var(--muted);margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--line)}

@media (max-width:1080px){
  .env-cols{grid-template-columns:1fr}
  .env-lado{position:static}
}

/* ================= 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}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
@media (max-width:640px){.grid3{grid-template-columns:1fr 1fr}}
@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}
.pill.none{background:#eef1f4;color:var(--muted)}

/* ================= 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}

/* ================= PROVEEDORES =================
   La lista era ocho renglones idénticos. Con todo del mismo peso, quien entra
   los lee los ocho para encontrar los dos que importan, y a la tercera vez ya
   no los lee: mira por encima y se le pasa el que lleva un mes sin contestar.
   Lo que sigue es el arreglo, y es todo jerarquía: cuatro cifras que además
   filtran, una franja de color por estado en el borde izquierdo, y la acción
   que toca dentro de la propia línea. */

/* Las cuatro cifras. Son botones: un contador que no se puede pulsar obliga a
   volver a la lista a buscar a mano cuáles eran los tres que decía. */
.prov-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px}
.prov-cifra{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:inherit;cursor:pointer;text-align:left;transition:.13s}
.prov-cifra b{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.prov-cifra span{font-size:var(--t-xs);color:var(--muted);line-height:1.3}
.prov-cifra:hover{border-color:var(--line-strong)}
.prov-cifra:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.prov-cifra.sel{background:var(--brand-soft);border-color:var(--brand)}
.prov-cifra.sel b,.prov-cifra.sel span{color:var(--brand-2)}
/* Solo se pinta de rojo cuando hay alguien esperando. Un contador
   permanentemente en alarma deja de leerse a la semana. */
.prov-cifra.urge b{color:var(--bad)}
.prov-cifra.urge.sel{background:var(--bad-bg);border-color:var(--bad)}
.prov-cifra.urge.sel b,.prov-cifra.urge.sel span{color:#8d3527}
@media(max-width:720px){.prov-cifras{grid-template-columns:1fr 1fr}}

.prov-sueltos{font-size:var(--t-xs);color:var(--muted);margin:8px 0 0}
/* El enlace sobrio es de bloque a lo ancho por defecto (lo usan las pantallas
   de acceso). Aquí va dentro de una frase. */
.prov-sueltos .enlace-sobrio{display:inline;width:auto;margin:0;padding:0;font-size:inherit}

/* Reclamar a todos de una vez. Va después de las cifras y antes de la lista
   porque es la respuesta a lo que acaban de decir las cifras. */
.prov-lote{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:14px 0 0;padding:14px 16px;background:var(--warn-bg);
  border-left:4px solid var(--warn);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-sm);color:#6d4a12;line-height:1.5}
.prov-lote b{color:#5a3d0f}

.prov-buscar{width:100%;margin:14px 0 0;padding:10px 14px;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)}
.prov-buscar:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

.prov-lista{display:flex;flex-direction:column;gap:8px;margin-top:16px}

/* La línea. Tres columnas fijas —quién, en qué punto, qué se hace— para que
   al recorrer la lista con la vista el estado esté siempre en el mismo sitio.
   El borde de la izquierda lleva el color: es lo que permite contar de un
   vistazo cuántos van mal sin leer una sola etiqueta. */
.prov-fila{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  align-items:center;gap:16px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--r-md);transition:.14s}
.prov-fila:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.prov-fila.t-bad{border-left-color:var(--bad)}
.prov-fila.t-warn{border-left-color:var(--warn)}
.prov-fila.t-good{border-left-color:var(--good)}
.prov-fila.t-muted{border-left-color:var(--line-strong)}
.prov-fila.t-bad:hover{border-color:var(--bad)}

.prov-abrir{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.prov-abrir:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-xs)}
.prov-nom{font-weight:600;font-size:var(--t-base);color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov-abrir:hover .prov-nom{color:var(--brand)}
.prov-sub{font-size:var(--t-xs);color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.prov-medio{display:flex;flex-direction:column;gap:5px;min-width:0}
.prov-medio .mini-prog{width:100%;max-width:9rem}
.prov-cuenta{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}

.prov-der{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.prov-chevron{background:none;border:0;color:var(--muted);font-size:var(--t-lg);line-height:1;
  cursor:pointer;padding:2px 4px;border-radius:var(--r-xs)}
.prov-chevron:hover{color:var(--brand)}
.prov-chevron:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

@media(max-width:860px){
  .prov-fila{grid-template-columns:1fr auto;gap:10px}
  .prov-medio{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}
  .prov-medio .mini-prog{max-width:6rem}
  .prov-der{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
  .prov-chevron{display:none}
}

/* La tarjeta de "qué falta", arriba de la ficha del proveedor. Es lo primero
   que se lee al entrar, así que lleva el estado en el título y el botón
   debajo: nada de tener que deducirlo de una lista. */
.prov-acc-card{border-left:4px solid var(--line-strong)}
.prov-acc-card.t-bad{border-left-color:var(--bad)}
.prov-acc-card.t-warn{border-left-color:var(--warn)}
.prov-acc-card.t-good{border-left-color:var(--good)}
.prov-acc-card>h2{margin-bottom:6px}

.prov-hist{list-style:none;padding:0;margin:6px 0 0}
.prov-hist li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.prov-hist li:last-child{border-bottom:0}
.prov-hist .ph-f{flex:none;width:6.5rem;font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums}
.prov-hist .ph-q{flex:1;min-width:12rem;color:var(--ink)}
.prov-hist .ph-c{font-size:var(--t-xs);color:var(--muted)}

/* ---- El diálogo del recordatorio ----
   Lo que se enseña aquí es literalmente lo que va a salir: lo compone el
   servidor con el mismo código que envía. Por eso el texto va en monoespaciada
   y sin retocar, como un correo y no como una vista de la aplicación. */
.rec-cargando{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 0}
.rec-meta{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px}
.rec-meta>div{display:flex;gap:12px;align-items:baseline;font-size:var(--t-sm)}
.rec-meta span{flex:none;width:6.5rem;font-size:var(--t-xs);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.rec-meta b{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.rec-nota{margin:0 0 12px;padding:10px 14px;background:var(--warn-bg);border-left:4px solid var(--warn);
  border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:var(--t-sm);color:#6d4a12;line-height:1.5}
.rec-texto{margin:0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:19rem;overflow-y:auto}
.rec-pie{margin:10px 0 0;font-size:var(--t-xs);color:var(--muted);line-height:1.5}
.modal-caja.ancha{max-width:42rem}
.rec-pie-btns{justify-content:space-between;flex-wrap:wrap;gap:12px}
.rec-otras,.rec-principales{display:flex;gap:8px;align-items:center}
.rec-otras .btn{white-space:nowrap}
.rec-lote{list-style:none;padding:0;margin:0}
.rec-lote li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.rec-lote li:last-child{border-bottom:0}
.rec-lote b{flex:none;min-width:9rem}
.rec-lote span{flex:1;min-width:10rem;font-size:var(--t-xs);color:var(--muted);overflow-wrap:anywhere}
.rec-lote em{font-style:normal;font-size:var(--t-xs);color:var(--brand-2);font-weight:600}
/* En el teléfono, cada proveedor en su renglón: en fila, el correo parte la
   dirección por la mitad y lo que se le pide se va a la esquina contraria. */
@media(max-width:520px){
  .rec-lote li{flex-direction:column;gap:2px}
  .rec-lote b,.rec-lote span{min-width:0}
}

/* ================= 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(4,1fr);gap:16px;margin-bottom:18px}
@media(max-width:1100px){.onboard .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.onboard .steps{grid-template-columns:1fr}}
/* Cada paso lleva a su sección. El que toca ahora va en blanco; los hechos,
   apagados y con su marca. */
.ostep{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font:inherit;color:inherit;
  cursor:pointer;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:16px;transition:.14s}
.ostep:hover{background:rgba(255,255,255,.14)}
.ostep:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ostep.paso-ok{opacity:.7}
.ostep.actual{background:#fff;color:var(--ink);border-color:#fff}
.ostep.actual .os-d{color:var(--muted)}
.ostep .os-e{margin-top:auto;padding-top:10px;font-size:var(--t-xs);font-weight:600;color:rgba(233,240,247,.9)}
.ostep.actual .os-e{color:var(--brand-2)}
.ostep .os-ir{padding-top:10px;font-size:var(--t-sm);font-weight:600;color:var(--brand)}
.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}
/* ---- El camino desde cero ----
   Las fases agrupan, pero la numeración corre entre ellas: son ocho pasos
   seguidos, y partir el número en tres cuentas haría parecer que hay tres
   trámites distintos. Lo condicional va sin número y con otra forma, para que
   se vea de un vistazo que no le toca a todo el mundo. */
.fase{margin-top:24px}
.fase:first-child{margin-top:0}
.fase-t{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin:0 0 4px}
.fase-p{font-size:var(--t-sm);color:var(--muted);margin:0 0 4px}
.paso-cu{display:inline-block;font-size:var(--t-xs);font-weight:600;color:var(--brand-2);
  background:var(--brand-soft);border-radius:var(--r-full);padding:2px 9px;margin-left:8px}
.solo-si{display:grid;gap:14px;margin-top:10px}
.solo-si .ss{border-left:2px solid var(--line-strong);padding-left:14px}
.solo-si h3{margin:0 0 3px;font-size:var(--t-base)}
.solo-si p{margin:0;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
@media(min-width:1100px){ .solo-si{grid-template-columns:1fr 1fr 1fr;gap:22px} }

.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:90;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)}

/* ---- Lo que ve el proveedor ----
   Quien abre esto no es un usuario nuestro: es alguien que ha recibido un
   correo de una empresa y un enlace que le pide datos técnicos. Llega sin
   contexto y sin ganas. Todo lo de aquí abajo existe para que sepa en todo
   momento cuánto le queda, y para que no pierda lo que ya ha escrito. */

/* Cuánto lleva y cuánto falta, arriba de la lista. */
.pv-prog{margin-top:20px;padding:14px 16px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.pv-prog.listo{background:var(--good-bg);border-color:#c6e2d4}
.pv-prog-cab{font-size:var(--t-sm);color:var(--muted);margin-bottom:2px}
.pv-prog-cab b{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pv-prog .progress{margin:8px 0 0}

/* La lista del portal va en una columna aunque quepan dos. No es un catálogo
   que se ojea, es una cola de tareas: en dos columnas se pierde el orden de
   "primero esto y luego lo otro", que es justo lo que aquí hay que enseñar. */
.pv-lista{display:flex!important;flex-direction:column;gap:12px}

/* Lo entregado se queda, pero apagado: sigue estando para corregirlo y deja
   de competir por la atención con lo que falta. */
.pv-hecha{opacity:.72}
.pv-hecha:hover{opacity:1}

/* Por qué le llega esto. Un enlace frío que pide datos técnicos se parece a
   un fraude, y quien duda no pregunta: simplemente no lo rellena. */
.pv-porque{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.pv-porque>summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--brand)}
.pv-porque p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;margin:10px 0 0}

/* Página del comprador: los documentos de cada envase, uno por línea, con sus
   dos botones a la derecha; en el móvil los botones bajan debajo del nombre. */
.cmp-docs{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cmp-docs li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line)}
.cmp-docs li:last-child{border-bottom:0}
.cmp-docs li>div:first-child{display:grid;gap:2px;min-width:0}
.cmp-docs b{font-size:var(--t-sm);font-weight:600}
.cmp-docs .muted{overflow-wrap:anywhere}
.cmp-acc{display:flex;gap:6px}

/* Norte, al compartir: la lista de envases a elegir y el enlace recién creado. */
.cmp-elegir{display:grid;gap:6px;margin:8px 0 0;max-height:420px;overflow:auto;padding-right:4px}
.cmp-elegir label{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;background:var(--surface)}
.cmp-elegir label:hover{border-color:var(--brand)}
.cmp-elegir input{width:auto;margin:0}
.cmp-elegir .cmp-n{flex:1;min-width:0}
.cmp-elegir .cmp-n span{display:block;font-size:var(--t-xs);color:var(--muted)}
.cmp-nuevo{margin:0 0 24px;padding:14px 16px;background:var(--good-bg);border:1px solid #c6e2d4;
  border-radius:var(--r-md)}
.cmp-nuevo p{margin:0 0 10px;font-size:var(--t-sm)}

/* La cuenta de apartados obligatorios, dentro de la declaración. */
.pv-cuenta{margin:14px 0 18px;padding:12px 16px;background:var(--surface-2);
  border-left:4px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0}
.pv-cuenta.listo{background:var(--good-bg);border-left-color:var(--good)}
.pv-cuenta .prog-oblig{margin-top:0}

/* El campo que falta, señalado donde está. */
.field.falta>label{color:var(--bad)}
.field.falta input,.field.falta textarea,.field.falta select{border-color:var(--bad);
  background:#fdf8f7}
.field.falta input:focus,.field.falta textarea:focus{border-color:var(--bad);
  box-shadow:0 0 0 3px var(--bad-bg)}
.q-faltan ul .enlace-sobrio{display:inline;width:auto;margin:0;padding:0;
  color:#6d4a12;text-align:left}
.q-faltan ul .enlace-sobrio:hover{color:var(--brand)}

/* El aviso de guardado automático: presente, callado, y nunca un diálogo. */
.pv-botones{align-items:center;flex-wrap:wrap}
.pv-auto{font-size:var(--t-xs);color:var(--muted);min-height:1em}

/* Y la confirmación al terminar, con cara de confirmación. */
.pv-fin{text-align:center;padding:44px 24px}
.pv-fin .lede,.pv-fin .muted{max-width:32rem;margin-left:auto;margin-right:auto}
.pv-tic{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--good-bg);color:var(--good);display:flex;align-items:center;
  justify-content:center;font-size:26px;font-weight:700}

/* ================= 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}

/* ---- «Esto le ha cambiado las obligaciones» ----
   Sale encima de todo lo demás al volver de Mi empresa con los mercados
   tocados. No es un aviso flotante: se queda hasta que se cierra, porque hay
   que leerlo entero y a veces apuntarlo. La franja azul de la izquierda es lo
   que lo separa de una tarjeta corriente sin gritar; el color de cada grupo lo
   ponen los puntos, que ya son los de la leyenda de abajo. */
.cambio-banner{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--r-md);
  padding:18px 22px 16px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.cmb-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cmb-eti{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand)}
.cmb-tit-p{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  margin:5px 0 0;line-height:1.3;color:var(--ink)}
.cmb-tit-p b{font-weight:700}
.cmb-x{flex:none;width:30px;height:30px;line-height:1;font-family:inherit;font-size:15px;
  cursor:pointer;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);border-radius:var(--r-sm);padding:0}
.cmb-x:hover{border-color:var(--line-strong);color:var(--ink)}

.cmb-grupo{margin-top:18px}
.cmb-grupo h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.cmb-grupo h4::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.cmb-grupo h4 span{font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--bg-2);border-radius:var(--r-full);padding:1px 8px;letter-spacing:0}
.cmb-alta h4::before{background:var(--bad)}
.cmb-baja h4::before{background:var(--good)}
.cmb-duda h4::before{background:#9aabba}

.cmb-grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cmb-grupo button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 13px}
.cmb-grupo button:hover{border-color:var(--brand);background:var(--brand-soft)}
.cmb-pais{grid-row:1/3;align-self:center;font-size:var(--t-xs);font-weight:700;
  color:var(--brand);background:var(--brand-soft);border-radius:var(--r-full);
  padding:3px 10px;white-space:nowrap}
.cmb-tit{font-size:var(--t-sm);font-weight:600;color:var(--ink);line-height:1.3}
.cmb-nota{font-size:var(--t-xs);color:var(--muted);line-height:1.35}
.cmb-nada{margin:16px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.cmb-pie{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

@media(max-width:620px){
  .cmb-grupo button{grid-template-columns:minmax(0,1fr)}
  .cmb-pais{grid-row:auto;justify-self:start;margin-bottom:4px}
}

@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. */
/* ---- La cartera, dibujada ----
   Una rueda con un 5 dentro obliga a ir a otra pantalla para saber de qué
   cinco habla. Dibujados se reconocen, y el punto de color dice cuál está en
   regla sin leer una palabra. Son los mismos dibujos que el lienzo, para que
   la aplicación hable un solo idioma. */
.cartera{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.cart-p{position:relative;width:104px;padding:15px 8px 12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-2);text-align:center;cursor:pointer;
  font-family:inherit;transition:border-color .12s,transform .12s}
.cart-p:hover{border-color:var(--brand);transform:translateY(-2px)}
.cart-ic{display:block;margin:0 auto 7px;color:var(--brand)}
.cart-n{display:block;font-size:var(--t-xs);line-height:1.3;color:var(--ink);font-weight:500;
  overflow-wrap:anywhere}
.cart-p.nuevo{border-style:dashed;background:none}
.cart-p.nuevo .cart-ic{color:var(--line-strong)}
.cart-p.nuevo:hover .cart-ic{color:var(--brand)}
.cart-punto{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%}
.cart-punto.bien{background:var(--good)}
.cart-punto.ojo{background:var(--warn)}
.cart-punto.mal{background:var(--bad)}
.cart-ley{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--t-xs);color:var(--muted);
  margin:0}
.cart-ley i{position:static;display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:5px}

/* ---- Lo que hay que hacer, con la cara de lo que es ----
   Un trámite, un documento y un pago no son la misma clase de trabajo, y eran
   tres renglones iguales con un punto rojo. El icono de la categoría ya
   estaba en el sprite; aquí no se usaba. */
.tarea{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;
  gap:16px;padding:15px 17px;border:1px solid var(--line);border-left:4px solid var(--bad);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;margin-bottom:10px}
.tarea:hover{background:var(--bad-bg);border-color:var(--bad)}
.tarea-cara{width:46px;height:46px;border-radius:50%;background:var(--bad-bg);
  display:flex;align-items:center;justify-content:center;color:var(--bad)}
.ico-cat{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
.tarea-txt{min-width:0;font-size:var(--t-sm);color:var(--muted);line-height:1.45}
.tarea-txt b{display:block;font-size:var(--t-base);color:var(--ink);line-height:1.3;
  margin-bottom:2px;font-weight:600}
.tarea-pais{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--r-full);padding:2px 8px}

/* ---- Las fechas, sobre el año ----
   «Vence el 31 de marzo, quedan 47 días» obliga a calcular. En una línea de
   doce meses se ve de un vistazo si el mes que viene está cargado y cuándo
   hay respiro. */
.anio{position:relative;height:96px;margin:6px 0 24px}
.anio-regla{position:absolute;top:56px;left:0;right:0;height:2px;background:var(--line)}
.anio-mes{position:absolute;top:62px;transform:translateX(-50%);font-size:10.5px;
  color:var(--muted);letter-spacing:.02em}
.anio-hoy{position:absolute;top:46px;height:22px;width:2px;background:var(--accent)}
.anio-hito{position:absolute;top:0;transform:translateX(-50%);width:110px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:center}
.anio-et{display:block;font-size:var(--t-xs);font-weight:600;line-height:1.25;color:var(--ink)}
.anio-cuando{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.anio-bola{display:block;width:13px;height:13px;border-radius:50%;margin:6px auto 0;
  border:3px solid var(--surface)}
.anio-hito.urge .anio-bola{background:var(--bad)}
.anio-hito.urge .anio-cuando{color:var(--bad);font-weight:600}
.anio-hito.cerca .anio-bola{background:var(--warn)}
.anio-hito.lejos .anio-bola{background:var(--brand)}
.anio-hito:hover .anio-et{text-decoration:underline}
@media(max-width:760px){
  /* En pantalla estrecha las marcas se pisan: la línea deja sitio scrollando. */
  .anio{overflow-x:auto;overflow-y:hidden}
}

/* ---- Lo que falta, plegado ----
   En un cliente recién dado de alta faltan siete u ocho datos, y ocho
   renglones a la entrada del panel tapan lo que hay que hacer. Plegado sigue
   diciendo cuántos son, que es lo que importa de la lista. */
.fp-linea{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;width:100%}
.fp-mas{display:flex;align-items:center;gap:8px;font-family:inherit;background:none;
  border:0;padding:0;cursor:pointer;color:var(--brand);text-align:left}
.fp-mas b{font-size:var(--t-sm);font-weight:600}
.fp-mas i{font-style:normal;font-size:12px}
.fp-mas:hover b{text-decoration:underline}

/* ---- La cifra que manda ----
   Un tablero contesta una sola pregunta al entrar: «¿voy bien?». Así que hay
   una cifra grande y todo lo demás va por debajo, en tamaño y en orden. Es la
   forma que tienen los tableros de cumplimiento que ya funcionan, y la que
   recomiendan las guías: una métrica principal claramente mayor, la franja de
   apoyo en la misma fila y el detalle solo cuando se pide. */
/* Plano, como el resto de secciones: aquí las tarjetas no son cajas. La
   jerarquía la hace el tamaño del número, no un marco alrededor. */
.hero{padding:0}
.hero-cifra{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.hero-cifra b{font-family:var(--font-display);font-size:64px;line-height:.95;
  font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-cifra span{font-size:var(--t-lg);color:var(--muted);line-height:1.2}
.hero-cifra.mal b{color:var(--bad)}
.hero-cifra.bien b{color:var(--good)}
.hero-cifra.gris b{color:var(--line-strong)}
.hero-nota{font-size:var(--t-sm);color:var(--muted);line-height:1.5;margin:8px 0 0;
  max-width:56ch}

/* Los tres de apoyo. Pequeños a propósito: si compiten con la cifra, deja de
   haber cifra. */
.hero-mini{display:flex;flex-wrap:wrap;gap:28px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.mini b{display:block;font-family:var(--font-display);font-size:var(--t-lg);
  font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.mini span{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:1px}
.mini.mal b{color:var(--bad)}
.mini.ojo b{color:var(--warn)}

.col-hacer{display:grid;gap:16px;align-content:start}
.col-hacer .card{margin:0}

/* El lateral, el mismo componente que en Envases. */
.lado-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lado-cab h3{margin:0}
.lado-n{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  font-variant-numeric:tabular-nums}
.lado-cifra{display:flex;align-items:center;gap:14px;margin:12px 0 0}
.lado-cifra span{font-size:var(--t-sm);color:var(--muted);line-height:1.4}
.lado-rot{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin:16px 0 8px}
.lado .cartera{margin:0}
.lado .cart-p{width:auto;flex:1 1 84px;min-width:84px;padding:12px 6px 10px}
.lado .cart-ley{display:none}
.lado-nota.ojo{color:var(--bad)}

/* Lo que falta por contar, arriba y con salida./* Lo que falta por contar, arriba y con salida. Estaba al final del panel en
   letra pequeña, y es lo que desbloquea todo lo demás. */
.falta-perfil{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;border-top:1px solid var(--line);padding:16px 0 0;margin:18px 0 0}
.falta-perfil ul{margin:14px 0 0;padding-left:18px;font-size:var(--t-sm);
  color:var(--muted);line-height:1.6}
.falta-perfil .btn{flex:none}


/* 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. */

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

/* 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}
}
/* Dentro de Envases la lista ya no ocupa el ancho de la ventana: hay un
   lateral al lado. Las columnas las decide el hueco que queda, no la ventana;
   si no, a 1300 px se metían tres tarjetas en 600 y los nombres salían
   partidos en tres renglones. */
@media(min-width:900px){
  .env-cols .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
    gap:12px}
}

/* 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)}

.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}

/* Por encima del botón flotante de sugerencias (z-index 70). Estaba en 60 y
   el botón se plantaba encima del pie de CUALQUIER diálogo: en el teléfono
   tapaba justo el botón que confirma. */
.modal-fondo{position:fixed;inset:0;z-index:80;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 a la izquierda y cada pieza, un
   rectángulo a su alrededor. Dos columnas —el dibujo y lo que dice el motor—
   porque es una pantalla para usar delante del cliente: él señala, nosotros
   dibujamos, 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.

   Está hecha para escritorio y se queda con la pantalla entera: dejaba dos
   franjas de fondo a los lados mientras el dibujo se apretaba en el medio. */
.cj-wrap{max-width:2200px;margin:0 auto;padding:20px 28px 56px}

.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:14px 22px;box-shadow:var(--shadow-sm)}
.cj-datos{display:grid;gap:12px;align-content:start}
.cj-datos label,.editor label{display:grid;grid-template-columns:minmax(0,1fr);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);
  /* Sin esto, un desplegable con una opción de nombre largo —«caja de
     agrupación o caja colectiva»— ensancha la columna entera y el panel se
     desplaza a lo ancho: el borde derecho de la ficha se queda fuera. */
  min-width:0;max-width:100%}
.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:8px 0 0;max-width:52rem}

/* Dos columnas: el dibujo y lo que hay que repasar. Había una tercera con la
   paleta de piezas, y era la mitad del problema: obligaba a elegir la pieza
   antes de saber dónde iba, y a cruzar la pantalla arrastrándola. Ahora se
   elige dentro del hueco, y ese ancho se lo queda el dibujo. */
/* Media pantalla para el dibujo y media para el envio. Antes el panel eran
   400 px fijos: en un monitor ancho el dibujo se quedaba con todo lo demas y
   las notas —que es lo que hay que leer para decidir— se apretaban en una
   tira estrecha con dos palabras por linea. */
.cj-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  align-items:start}
/* La columna del dibujo: sus dos tarjetas, una debajo de otra. */
.cj-izq{display:grid;gap:16px;min-width:0;align-content:start}
.cj-panel,.cj-lienzo{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
/* El panel se queda a la vista y lo que se desplaza es solo el repaso: los
   botones de dar de alta y vaciar viven abajo del todo, y con el panel entero
   desplazándose se iban de la pantalla justo al abrir la ficha de una pieza,
   que es cuando más falta hacen. */
.cj-panel{position:sticky;top:16px;max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;overflow:hidden}
.cj-panel > h2,.cj-panel > .cj-acciones,.cj-panel > #cj-alta{flex:none}
.cj-panel > #cj-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  margin-right:-6px;padding-right:6px}
.cj-panel h2{font-family:var(--font-display);font-size:var(--t-lg);
  font-weight:600;margin:0 0 4px}

/* ---- La barra de envíos ----
   Qué dibujo se está tocando y si está guardado. Sin esto todos los dibujos
   son el mismo y no se sabe cuál se está pisando. */
.cj-envios{margin-bottom:14px}
.env-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.env-tit{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  margin-right:2px}
.env-tit i{font-style:normal;color:var(--muted);font-weight:400}
.env-estado{font-size:var(--t-xs);color:var(--good);background:var(--good-bg);
  border-radius:var(--r-full);padding:2px 9px;margin-right:auto}
.env-estado.sucio{color:#8a5a10;background:var(--warn-bg)}
.env-nota{font-size:var(--t-xs);color:var(--muted);line-height:1.5;margin:10px 0 0}
.env-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.env-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;
  align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;background:var(--surface-2)}
.env-lista li.sel{border-color:var(--brand);background:var(--brand-soft)}
.env-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}
.env-nom:hover{color:var(--brand);text-decoration:underline}
.env-meta{grid-column:1;font-size:var(--t-xs);color:var(--muted)}
.env-btn{grid-column:2;grid-row:1 / span 2}
.env-btn button{border:1px solid var(--line-strong);background:var(--surface);
  color:var(--muted);border-radius:var(--r-xs);width:26px;height:26px;cursor:pointer;
  font-size:12px;line-height:1;font-family:inherit}
.env-btn button:hover{border-color:var(--bad);color:var(--bad)}

/* ---- Lo que se va a dar de alta ----
   Aquí salía el JSON del volcado, que es enseñarle al cliente el trabajo sin
   hacer. Ahora dice qué pasa con cada pieza antes de que pase. */
.alta-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.alta-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;
  background:var(--surface-2);font-size:var(--t-sm)}
.alta-lista b{grid-column:1;font-weight:600}
.alta-et{grid-column:2;grid-row:1;font-size:9px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-soft);
  border-radius:var(--r-full);padding:2px 8px;align-self:start;white-space:nowrap}
.alta-et.ya{color:var(--muted);background:var(--bg-2)}
.alta-det{grid-column:1;font-size:var(--t-xs);color:var(--muted)}
#cj-alta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
#cj-alta:empty{display:none}

.cj-barra{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.cj-pista{flex:1;background:var(--brand-soft);border:1px solid #cfe0ee;border-radius:var(--r-md);
  padding:12px 14px;font-size:var(--t-sm);margin:0;color:var(--brand-2);line-height:1.5}
.cj-barra .btn{flex:none}

/* ---- El dibujo ----
   Una fila que baja de línea, no una tira que se va a la derecha. El envío
   entero tiene que caber en la pantalla: si hay que empujar una barra para
   ver el final, deja de leerse como una sola cosa. */
/* El tamaño de la pieza no es un número fijo: lo pone ajustarTamano() en
   --lz-w según lo que haya que dibujar y el sitio que quede, para que el
   envío se lea en las menos líneas posibles y lo más grande que quepa. Estos
   152 px son solo lo que se ve antes de que el guion mida. */
.lz{--lz-w:152px;--lz-ic:76px;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 0;
  background:var(--bg-2);border-radius:var(--r-md);padding:16px 10px}
.lz-caja{position:relative;display:block;width:var(--lz-w)}
.lz-pieza{display:flex;flex-direction:column;align-items:center;gap:2px;width:var(--lz-w);
  max-width:100%;
  font-family:inherit;text-align:center;cursor:pointer;
  padding:calc(var(--lz-ic,76px) * .22 + 2px) 10px 10px;
  border:2px solid var(--lz-c,var(--line-strong));background:var(--lz-f,var(--surface));
  border-radius:var(--r-md);color:var(--ink)}
.lz-pieza:hover{box-shadow:0 0 0 3px var(--brand-soft)}
.lz-pieza.sel{box-shadow:0 0 0 3px var(--brand-soft);border-width:3px;
  padding:calc(var(--lz-ic,76px) * .22 + 1px) 9px 9px}
.lz-pieza.sincerrar{border-style:dashed}
.lz-prod{background:var(--surface);border-color:#1a2530;color:#1a2530}
.lz-prod.suelto{border-style:dashed;background:transparent}
.lz-ic{display:block;color:var(--lz-c,currentColor)}
.lz-pieza > .lz-ic{width:var(--lz-ic);height:var(--lz-ic)}
.lz-nom{font-size:var(--lz-nom,var(--t-sm));font-weight:600;line-height:1.25}
.lz-det{font-size:var(--t-xs);color:var(--muted);line-height:1.35}
.lz-niv{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--lz-c,var(--muted));margin-top:3px;line-height:1.3}
.lz-flecha{align-self:flex-start;margin-top:calc(var(--lz-ic,76px) * .6 + 18px);
  font-size:var(--t-xs);color:var(--muted);padding:0 6px;white-space:nowrap}
.lz-flecha::after{content:" →"}

/* Lo pegado y lo que va dentro, como fichas dentro de la tarjeta de su pieza.
   Colgaban debajo con el nombre suelto y, en cuanto había dos, los rótulos se
   escribían uno encima de otro y no se leía ninguno. */
.lz-fichas{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:9px;
  padding-top:8px;border-top:1px dotted var(--line-strong);width:100%}
.lz-ficha{font-family:inherit;font-size:11px;line-height:1.5;cursor:pointer;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:1px 8px}
.lz-ficha em{font-style:normal;color:var(--muted);margin-right:4px}
.lz-ficha:hover,.lz-ficha.sel{border-color:var(--brand);background:var(--brand-soft)}

/* Los mandos, encima de la pieza que mueven. */
.lz-mandos{display:flex;justify-content:center;gap:3px;margin-top:8px}
.lz-mandos button{width:28px;height:28px;line-height:1;font-family:inherit;font-size:13px;
  cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--muted);border-radius:var(--r-xs);padding:0}
.lz-mandos button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.lz-mandos button:disabled{opacity:.35;cursor:default}

/* El hueco donde meter una pieza. Un círculo con un más, no una barra negra:
   una barra rellena se lee como un tope y no como un sitio donde meter algo. */
.lz-hueco{position:relative;display:flex;align-items:flex-start;align-self:flex-start;
  margin-top:calc(var(--lz-ic,76px) * .4 + 15px)}
.lz-hueco > button{width:38px;height:38px;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.lz-hueco > button > i{font-style:normal;width:26px;height:26px;line-height:24px;
  border-radius:50%;border:1px dashed var(--line-strong);color:var(--muted);
  font-size:16px;text-align:center;background:var(--surface)}
.lz-hueco > button:hover > i,.lz-hueco.abierto > button > i{background:var(--brand);
  color:#fff;border-color:var(--brand);border-style:solid}
.lz-hueco > button:focus-visible{outline:none}
.lz-hueco > button:focus-visible > i{box-shadow:0 0 0 3px var(--brand-soft)}

/* ---- El elegidor ----
   Sale donde se ha señalado. Ofrece lo de todos los días; lo raro aparece al
   escribir, que es cuando alguien sabe lo que busca. */
.lz-elige{position:absolute;z-index:30;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%);width:324px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:12px;text-align:left}
.lz-caja > .lz-elige{left:calc(var(--lz-w,152px) / 2)}
.lz-elige h4{margin:0 0 8px;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.lz-elige input{width:100%;font-family:inherit;font-size:var(--t-sm);padding:8px 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg-2);
  color:var(--ink);margin-bottom:8px}
.lz-elige input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lz-ops{max-height:420px;overflow-y:auto;margin:0 -4px}
.lz-grupo h5{margin:8px 4px 3px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.lz-op{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-family:inherit;
  font-size:var(--t-sm);cursor:pointer;background:none;border:0;padding:6px 6px;
  border-radius:var(--r-sm);color:var(--ink);line-height:1.3}
.lz-op:hover,.lz-op:focus-visible{background:var(--brand-soft);outline:none}
.lz-op .lz-ic{flex:none;color:var(--brand)}
.lz-ojo{display:block;font-style:normal;font-size:var(--t-xs);color:var(--muted)}
.lz-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}
.lz-nada{font-size:var(--t-sm);color:var(--muted);padding:6px}
.lz-todas{display:block;width:100%;text-align:left;font-family:inherit;font-size:var(--t-xs);
  color:var(--brand);background:none;border:0;padding:7px 4px 1px;cursor:pointer;
  text-decoration:underline}
.lz-todas:hover{color:var(--ink)}

/* --- 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}

.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;grid-template-columns:minmax(0,1fr);gap:10px}
.editor.arriba{margin:0 0 6px;padding:0 0 14px;border-top:0;border-bottom:2px solid var(--brand)}
.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:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ed-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* Casilla en línea con su texto. Requiere el prefijo `.editor` por
   especificidad: `.editor label` aplica display:grid y mayúsculas, y
   `.editor input` fuerza ancho y relleno. */
.editor .ed-check{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);grid-template-columns:none}
.editor .ed-check input{width:auto;min-width:0;margin:0;padding:0;flex:0 0 auto}
.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}

@media (max-width:1100px){
  .cj-cols{grid-template-columns:1fr}
  .cj-panel{position:static;max-height:none}
}
@media (max-width:860px){
  .cj-cabecera{grid-template-columns:1fr}
  .cj-barra{flex-direction:column}
  /* En pantalla estrecha el elegidor no cabe al lado del hueco: se pega al
     borde izquierdo del dibujo en vez de salirse. */
  .lz-elige{left:0;transform:none;width:min(324px,86vw)}
  .lz-caja > .lz-elige{left:0}
}

/* ---- 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,.arranque.plegado .arr-sector{display:none}
.arranque.plegado.abierto .arr-lista{display:grid;margin-top:12px}
.arranque.plegado.abierto .arr-sector{display:block}

/* ---- Lo que no es envase ----
   Vive en el panel, plegado. No es algo que se ponga en el dibujo: es la
   respuesta a si algo se declara, y cada kilo declarado de más se paga. */
.pan-plegable{margin-bottom:0}
.pan-plegable button{font-family:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;
  padding:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.pan-plegable button:hover{color:var(--brand)}
.pan-plegable i{font-style:normal}
.no-lista{list-style:none;padding:0;margin:8px 0 0}
.no-lista li{font-size:var(--t-xs);line-height:1.5;color:var(--muted);
  padding:6px 0;border-top:1px solid var(--line)}
.no-lista b{color:var(--ink);font-weight:600;display:block}
.no-salvo{display:block;font-style:normal;color:var(--brand);margin-top:2px}

/* ---- 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:repeat(2,minmax(0,1fr));gap:16px}

/* La consola entera vive dentro de 1380 px porque es el ancho en el que se lee
   cómodo un texto. El dibujo no se lee: se mira, y de esos 1380 px le quedaban
   menos de mil después de descontar la columna del repaso y los márgenes, así
   que un envío de cuatro capas ya se partía en dos líneas —con la flecha «va
   en» colgando al final de la primera— aunque el monitor tuviera sitio de
   sobra. Mientras se está dibujando, y solo entonces, la consola renuncia a su
   tope y llega al borde de la ventana. */
/* Las pantallas de tabla y gráfica —el lienzo de envíos y el coste de la
   cartera— se quedaban dentro de los 1.380 px con medio monitor en blanco a
   los lados. Aquí el sitio se usa: sin tope de ancho y con el margen lateral
   justo, que si no las columnas se estrechan y el contenido se corta. */
.wrap.ancho{max-width:none;padding-left:20px;padding-right:20px}
/* Aquí el panel fluye entero con la tarjeta: ni tope de alto ni desplazamiento
   propio. Del tamaño de la pieza no hay que decir nada, porque se mide sobre
   el hueco que queda de verdad. */
.cj-embebido .cj-panel{position:static;max-height:none;display:block;overflow:visible;
  background:var(--surface-2);box-shadow:none}
.cj-embebido .cj-panel > #cj-panel{overflow:visible;margin-right:0;padding-right:0}
.cj-embebido .cj-lienzo{box-shadow:none;border-color:var(--line)}
.cj-embebido .arranque{background:var(--surface)}
@media (max-width:1200px){
  .cj-embebido .cj-cols{grid-template-columns:1fr}
}
@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 número corrido del cuestionario: delante del nombre y en cifra tabular,
   para que una columna de números se lea como una columna. */
.adm-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);
  font-variant-numeric:tabular-nums;color:var(--brand);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 6px;margin-right:4px}

/* --- 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 ya no se desplaza a lo ancho: la fila baja de línea, así que el
   envío entero cabe en la pantalla por largo que sea. */
#cj-dibujo{padding-bottom:4px}

/* 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}

/* ============================================================
   SECCIÓN ALFA

   Se distingue visualmente del resto de la consola —sello, borde rayado— para
   que una cifra orientativa no se confunda con un dato de conformidad. Ninguna
   cifra de esta sección usa el verde reservado a «conforme».
   ============================================================ */
.side-alfa{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--warn-bg);color:#8a5f16;border-radius:var(--r-full);padding:2px 7px;margin-left:6px}

.alfa-aviso{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;padding:18px 20px;
  border:1px solid var(--line-strong);border-left:4px solid #b8860b;border-radius:var(--r-sm);
  background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 12px,
    transparent 12px,transparent 24px)}
.alfa-aviso p{margin:0 0 8px;font-size:var(--t-sm);line-height:1.6}
.alfa-aviso p:last-child{margin-bottom:0}
.alfa-sello{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.12em;
  background:#b8860b;color:#fff;border-radius:var(--r-sm);padding:6px 10px}

.alfa-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.alfa-tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;color:var(--muted);cursor:pointer}
.alfa-tab.sel{color:var(--brand-2);border-bottom-color:var(--brand)}

.alfa-fila{padding:16px 0;border-top:1px solid var(--line)}
.alfa-fila-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.alfa-cifra{margin:6px 0;font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.alfa-cifra.good{color:#1d6b52}
.alfa-cifra.warn{color:#8a5f16}
.alfa-cifra.bad{color:#8f3427}
.alfa-cifra.info{color:var(--brand-2)}
.alfa-cifra.off{color:var(--muted)}
.alfa-cifra-sub{display:block;font-size:var(--t-xs);font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:2px}

.alfa-nota{margin:8px 0 0;font-size:var(--t-xs);color:var(--muted);line-height:1.6;
  padding-left:10px;border-left:2px solid var(--line-strong)}
.alfa-nota-fuerte{border-left-color:#8f3427;color:var(--ink)}
.alfa-faltan{margin-top:8px;font-size:var(--t-xs);color:var(--muted)}
.alfa-faltan ul{margin:4px 0 0;padding-left:18px}

.alfa-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
  margin-top:16px}
.alfa-tarjeta{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.alfa-cat{margin:8px 0 4px;font-size:var(--t-sm);line-height:1.4}
.alfa-cat-n{display:inline-block;min-width:26px;text-align:center;background:var(--brand-soft);
  color:var(--brand-2);font-weight:700;border-radius:var(--r-sm);padding:1px 6px;margin-right:6px}
.alfa-barra{height:6px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;
  margin:10px 0 6px}
.alfa-barra-int{height:100%;background:var(--brand);border-radius:var(--r-full)}

/* El coste de la cartera era una sola columna de dos pantallas y media
   —elegir el SCRAP, bajar a las cifras, seguir bajando a la gráfica— con la
   mitad del ancho en blanco. Se elegía arriba y el efecto quedaba fuera de
   la vista. Ahora el SCRAP va al lado y el dinero enfrente, como el lateral
   del lienzo de envases, y el lateral se queda pegado al hacer scroll.

   La comparativa de SCRAP no entra aquí: es una tabla de cinco columnas y va
   debajo, a todo lo ancho. */
/* Cuando la página se abre a todo lo ancho, el aviso de Alfa y la fila de
   pestañas se quedan EXACTAMENTE con la medida que tienen en las otras cuatro
   pestañas. Si no, al cambiar de pestaña el aviso se ensancha, el párrafo
   ocupa una línea menos, todo salta hacia arriba y se nota.

   1.316 px no es un número redondo: es el ancho real del contenido en el resto
   del sitio —los 1.380 px de `.wrap` menos sus 32 px de padding a cada lado—.
   Poner aquí 1.380 lo dejaba 64 px más ancho, que era justo el salto. */
.wrap.ancho .alfa-cabecera{max-width:1316px;margin-left:auto;margin-right:auto}

/* 40 / 60. Al SCRAP le basta con cuatro columnas estrechas de tabla; la
   gráfica agradece el resto, que sus barras se leen por longitud. */
.alfa-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:24px;align-items:start}
.alfa-col-lado{position:sticky;top:16px}
/* En la columna estrecha, tres casillas en fila salen a 149 px y no se lee ni
   la etiqueta. Se reparten por lo que caben, que en una pantalla de portátil
   son dos y en un monitor grande, tres. */
.alfa-col-lado .grid3{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 14px}
.alfa-col-lado .alfa-supuestos{margin:0}
.alfa-col-ancha{min-width:0}
.alfa-col-ancha .alfa-costes{margin-top:0}
@media (max-width:1040px){
  .alfa-cols{grid-template-columns:1fr}
  .alfa-col-lado{position:static}
  .alfa-col-ancha .alfa-costes{margin-top:20px}
}

.alfa-supuestos{margin:24px 0;padding:16px 18px;background:var(--surface-2);
  border-radius:var(--r-sm)}
.alfa-supuestos h3{margin:0 0 4px;font-size:var(--t-sm)}

.alfa-costes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  margin-top:20px}
.alfa-coste{border-top:2px solid var(--line-strong);padding-top:12px}
.alfa-coste .alfa-cifra{font-size:24px}
.alfa-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;
  padding-top:14px;border-top:2px solid var(--ink)}
.alfa-total b{font-size:26px;letter-spacing:-.02em}
.alfa-palanca{margin-top:20px;padding:14px 16px;border:1px solid var(--brand);
  border-radius:var(--r-sm);background:var(--brand-soft);font-size:var(--t-sm);line-height:1.6}
.alfa-palanca ul{margin:6px 0 0;padding-left:18px}

@media (max-width:640px){
  .alfa-aviso{flex-direction:column;gap:10px}
  .alfa-cifra{font-size:26px}
}

/* Los nueve requisitos del artículo 11, uno por línea. El estado va en el
   símbolo y en el color, no solo en el color. */
.alfa-art11{list-style:none;margin:8px 0;padding:0;font-size:var(--t-xs);line-height:1.5}
.alfa-art11 li{display:flex;gap:6px;padding:2px 0;color:var(--muted)}
.alfa-art11 li span{flex:0 0 12px;font-weight:700;text-align:center}
.alfa-art11 li.a11-si{color:var(--ink)}
.alfa-art11 li.a11-si span{color:#1d6b52}
.alfa-art11 li.a11-no span{color:#8f3427}
.alfa-art11 li.a11-falta span{color:#8a5f16}

/* La tabla de coste de la cartera. Los números a la derecha, para poder
   compararlos de un vistazo por la columna. */
.alfa-tabla-envoltorio{overflow-x:auto;margin-top:12px}
.alfa-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.alfa-tabla th,.alfa-tabla td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.alfa-tabla th{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.02em;
  color:var(--muted);font-weight:600;white-space:nowrap}
.alfa-tabla td.n,.alfa-tabla th.n{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.alfa-tabla tbody tr:hover{background:var(--surface-2)}
.alfa-fila-alta td{background:var(--brand-soft)}
.alfa-fila-alta:hover td{background:var(--brand-soft)}
.alfa-incompleto{color:var(--muted);font-weight:700;cursor:help}

/* Conmutador gráfica/tabla y lienzo de las gráficas. */
.alfa-cab-vista{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:28px}
.alfa-cab-vista h3{margin:0}
.alfa-conmutador{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-full);
  overflow:hidden;background:var(--surface)}
.alfa-conmutador button{border:0;background:none;font-family:inherit;font-size:var(--t-xs);
  font-weight:600;padding:7px 16px;color:var(--muted);cursor:pointer}
.alfa-conmutador button.sel{background:var(--brand);color:#fff}
.alfa-sub{margin:28px 0 4px;font-size:var(--t-sm)}

.alfa-svg{width:100%;height:auto;display:block;margin:10px 0 4px;overflow:visible}
.alfa-svg .g-etq{font-size:12px;fill:var(--muted)}
.alfa-svg .g-val{font-size:12px;font-weight:600;fill:var(--ink);
  font-variant-numeric:tabular-nums}
.alfa-svg rect{transition:opacity .12s}
.alfa-svg rect:hover{opacity:.82}

.alfa-leyenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:var(--t-xs);
  color:var(--muted)}
.alfa-leyenda-it{display:inline-flex;align-items:center;gap:6px}
.alfa-leyenda-it i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* El comentario del asistente. Vacío hasta que alguien lo pide. */
.alfa-insights{margin-top:16px}
.alfa-insights:empty{display:none}
.alfa-insights.pensando{padding:14px 16px;border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--muted)}
.alfa-insights.aviso{padding:14px 16px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--muted)}
.alfa-insights.hay{padding:16px 18px;border:1px solid var(--brand);border-radius:var(--r-sm);
  background:var(--brand-soft)}
.alfa-insights.hay p{margin:0;font-size:var(--t-sm);line-height:1.65}
.alfa-insights-cab{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-2);margin-bottom:6px}
.alfa-insights-pie{margin-top:10px !important;font-size:var(--t-xs) !important;
  color:var(--muted)}

/* El botón de insights tenía aspecto de enlace y no se encontraba. */
.alfa-btn-insights{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);
  background:var(--brand-soft);color:var(--brand-2);border-radius:var(--r-full);
  font-family:inherit;font-size:var(--t-xs);font-weight:700;padding:7px 15px;cursor:pointer;
  white-space:nowrap}
.alfa-btn-insights:hover{background:var(--brand);color:#fff}
.alfa-btn-insights span{font-size:13px;line-height:1}

/* El enunciado del apartado del art. 29, bajo su título. */
.alfa-detalle-obj{margin:2px 0 8px;font-size:var(--t-xs);color:var(--muted);line-height:1.55}

/* Edición en vivo del coste de un envase. */
.alfa-editor{margin:20px 0;padding:18px 20px;background:var(--surface-2);border-radius:var(--r-sm)}
.alfa-editor-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:10px}
.alfa-editor-cab h3{margin:0}
.alfa-editor-nota{font-size:var(--t-xs);color:var(--muted)}
.alfa-tabla-ed input[type=number]{width:100%;min-width:72px;text-align:right;padding:6px 8px}
.alfa-tabla-ed td{vertical-align:middle}

/* El salto respecto a lo que hay guardado. */
.alfa-delta{display:inline-block;margin-left:10px;font-size:var(--t-xs);font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);vertical-align:middle}
.alfa-delta.baja{background:var(--good-bg);color:#1d6b52}
.alfa-delta.sube{background:var(--bad-bg);color:#8f3427}

.alfa-guardar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
  padding:14px 16px;border:1px solid var(--warn);background:var(--warn-bg);
  border-radius:var(--r-sm);font-size:var(--t-sm)}
.alfa-guardar span{flex:1 1 220px}

/* Rehacer los datos de ejemplo, en la ficha del tenant de la demo. */
.adm-sembrar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}
.adm-sembrar span{flex:1 1 220px}

/* Los complementos de pago, en la ficha de cada cliente del panel. */
.adm-modulos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 8px;font-size:var(--t-sm)}
.adm-mod-tit{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.adm-mod{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-hasta{font-size:var(--t-xs);color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.adm-hasta input{font:inherit;font-size:var(--t-xs);padding:2px 4px;border:1px solid var(--line-strong);border-radius:var(--r-xs)}

/* ---- El avance del SCRAP Scanner ----
   Para quien no lo tiene: qué hace, uno de sus envases calculado de verdad
   —para que se vea cómo es— y el botón para pedirlo. */
.side-alfa.candado{display:inline-flex;align-items:center;padding:3px 5px}
.avance{max-width:720px}
.avance .display{margin:6px 0 8px}
.avance-suyo{font-size:var(--t-base);margin:0 0 16px;padding-left:14px;border-left:4px solid var(--accent)}
.avance-lista{margin:0 0 24px;padding-left:18px;display:grid;gap:8px}
.avance-muestra{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:0 0 20px}
.avance-muestra .muestra-cab h2{margin:4px 0 2px}
.avance-muestra .muestra-cab{margin-bottom:16px}
.avance-muestra .alfa-nota{margin-bottom:0}
.avance-pedido{border-left:4px solid var(--good);background:var(--good-bg);color:#1d6b52;
  padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--t-sm)}

/* ---- Envases por producto: la lista de materiales ----
   Plana, como el resto de Norte: filas separadas por una regla fina y nada de
   tarjetas apiladas. El árbol de cada producto es una tabla con columnas
   fijas, para leerla de arriba abajo; los avisos llevan el borde lateral de
   4 px de la casa. */
.vista-sel{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface);margin-left:auto}
.vista-sel button{font:inherit;font-size:var(--t-sm);font-weight:600;border:0;background:transparent;
  color:var(--muted);padding:8px 16px;cursor:pointer}
.vista-sel button.sel{background:var(--brand);color:#fff}
.vista-sel button span{font-weight:500;opacity:.75;margin-left:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}
.enl{font:inherit;font-size:var(--t-sm);color:var(--brand);background:none;border:0;padding:2px 4px;
  cursor:pointer;white-space:nowrap}
.enl:hover{text-decoration:underline}

/* Lo que acaba de pasar al importar: una línea, no un panel. */
.imp-linea{display:flex;align-items:flex-start;gap:12px;font-size:var(--t-sm);color:var(--muted);
  padding:0 0 12px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.imp-linea p{margin:0;flex:1}
.imp-linea b{color:var(--ink);font-weight:600}
.imp-cerrar{border:0;background:none;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.imp-avisos{margin:-8px 0 16px;padding-left:18px;font-size:var(--t-sm);color:var(--muted)}

/* Las dudas, juntas y enlazadas. */
.por-responder{background:var(--warn-bg);border-left:4px solid var(--warn);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:12px 16px;margin:0 0 20px}
.por-responder h3{font-family:var(--font-sans);font-size:var(--t-base);font-weight:600;margin:0 0 6px;color:#6d4a10}
.por-responder h3 span{font-weight:500;margin-left:4px}
.por-responder ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:var(--t-sm);color:#6d4a10}
.enlace-duda{font:inherit;color:var(--brand-2);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-align:left}
.por-responder .enl{margin-top:6px;padding-left:0}

/* La lista de productos. */
.prod-lista{border-top:1px solid var(--line)}
.prod{border-bottom:1px solid var(--line)}
.prod-cab{display:flex;align-items:center;gap:12px;width:100%;padding:12px 8px;background:none;border:0;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.prod-cab:hover{background:var(--surface-2)}
.prod-cab .chev{width:14px;flex:none;color:var(--muted);font-size:12px}
.prod-cab svg.dib{flex:none}
.prod-nom{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.prod-nom small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--muted)}
.prod-kg{font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.prod-kg b{color:var(--ink);font-weight:600}
.tag-dibujo{font-size:var(--t-xs);font-weight:600;color:var(--accent-ink)}
.prod-det{padding:0 0 16px}
.prod-ventas{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:var(--t-sm);
  color:var(--muted);padding:2px 8px 12px 34px}
.prod-ventas .venta-pais{color:var(--ink);font-weight:600}
.prod-ventas .pais{font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em}
.prod-ventas .falta{color:#8a5f16;font-weight:600}
.prod-ventas.editando .ud{width:150px}
.aviso-linea{border-left:4px solid var(--warn);background:var(--warn-bg);color:#6d4a10;font-size:var(--t-sm);
  padding:10px 14px;margin:0 0 12px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.aviso-linea .btn-row{margin-top:8px}
.prod-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 8px 0}

/* El árbol: una tabla. */
.tabla-scroll{overflow-x:auto}
.bom-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.bom-tabla th{text-align:left;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:8px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.bom-tabla td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.bom-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bom-tabla .c-pieza{width:46%}
.bom-tabla tr:focus{outline:2px solid var(--brand);outline-offset:-2px}
.celda-pieza{display:flex;align-items:center;gap:8px}
.celda-pieza svg.dib{flex:none}
.pleg{width:20px;height:20px;flex:none;border:0;background:none;padding:0;color:var(--muted);cursor:pointer;font-size:12px}
.pleg-hueco{width:20px;flex:none}
.f-nom{flex:1;min-width:0;overflow-wrap:anywhere}
.f-nom small{display:block;font-size:var(--t-xs);color:var(--muted)}
.solo-movil{display:none}
.bom-tabla tr.grupo .f-nom{font-weight:600}
.bom-tabla tr.venta td{background:var(--brand-soft)}
.bom-tabla tr.noenv td{color:var(--muted)}
.bom-tabla tr.sin-clase .f-nom{color:#8a5f16;font-weight:600}
.bom-tabla tr.con-duda td:first-child{box-shadow:inset 4px 0 var(--warn)}
.bom-tabla tr.fila-duda td{background:var(--warn-bg);color:#6d4a10;box-shadow:inset 4px 0 var(--warn)}
.fila-duda p{margin:0 0 4px}
.fila-duda p:last-child{margin:0}
.fila-duda select{font:inherit;font-size:var(--t-sm);padding:6px 8px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);max-width:100%;margin-right:6px}
.venta-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-left:4px}
.niv{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--c);white-space:nowrap}
.niv::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.niv-no{color:#8a5f16;font-weight:600;white-space:nowrap}
.est{background:none;border:0;padding:0;cursor:pointer}
.est:hover .pill{text-decoration:underline}
/* Las acciones de la fila, solo en la fila donde se está. En una pantalla
   táctil no hay «pasar por encima»: ahí se ven siempre. */
.celda-pieza{position:relative}
.bom-tabla tbody tr:hover td{background:var(--surface-2)}
.bom-tabla tbody tr.fila-duda:hover td{background:var(--warn-bg)}
.acc{display:none;gap:2px;position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:var(--surface-2);padding-left:12px;box-shadow:-10px 0 10px -4px var(--surface-2)}
.bom-tabla tr:hover .acc,.bom-tabla tr:focus-within .acc{display:flex}
@media (hover:none){.acc{display:flex;position:static;transform:none;background:none;box-shadow:none;padding:0}}

/* El lateral: los kilos. */
.lado-sub{font-size:var(--t-sm);color:var(--muted);margin:-6px 0 14px}
.kg-lista{display:grid;gap:10px;margin:0 0 6px}
.kg-fila{display:grid;grid-template-columns:92px 1fr auto;gap:10px;align-items:center;font-size:var(--t-sm)}
.kg-bar{height:8px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.kg-bar i{display:block;height:100%;background:var(--brand)}
.kg-fila .v{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.porunidad{font-size:var(--t-sm);border-top:1px solid var(--line);padding-top:10px;margin-top:10px;
  display:flex;justify-content:space-between;gap:12px}
.lado-enlace{display:inline-block;margin-top:14px;padding-left:0}

/* La pantalla de columnas: a la izquierda qué columna es cada dato, con dos
   valores de muestra; a la derecha lo que sale con ellas. */
.bom-cols{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px;align-items:start}
.bom-mapa{display:grid;gap:8px}
.bom-mapa .ud{flex-direction:column;align-items:stretch;gap:2px}
.bom-mapa .ud select,.bom-mapa .ud input{font:inherit;font-size:var(--t-sm);border:0;background:none;padding:2px 0}
.bom-mapa .ud select:focus{outline:none}
.bom-mapa .ejemplo{font-size:var(--t-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bom-previa{border-left:1px solid var(--line);padding-left:32px}
.bom-previa h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;margin:0 0 12px;line-height:1.25}
.bom-esquema{list-style:none;margin:0;padding:0;font-size:var(--t-sm);display:grid;gap:4px}
.bom-esquema .cant{font-family:var(--font-display);font-weight:600;color:var(--brand);margin-right:4px}

@media(max-width:1080px){
  .bom-cols{grid-template-columns:1fr}
  .bom-previa{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
}
@media(max-width:640px){
  .vista-sel{margin-left:0}
  .bom-tabla .c-mat,.bom-tabla .c-peso{display:none}
  .solo-movil{display:inline}
  .prod-cab{flex-wrap:wrap}
  .prod-ventas{padding-left:8px}
}
.lado h3 .info-i{margin-left:0}


/* ================= AFINADO DE INTERFAZ (30 sep 2026) ================= */
/* Las pistas (ⓘ) ocultas siguen ocupando sitio fuera de la pantalla y
   ensanchaban la página: barra de desplazamiento lateral en Mi empresa y en
   el expediente. clip recorta sin crear contenedor de scroll, así que el menú
   fijo y los elementos sticky no cambian. */
html,body{overflow-x:clip}

/* Arranque con sesión guardada: hasta que se sabe si el token vale no se
   pinta ni el acceso ni el menú. Si el script no llegara a cargar, a los 5 s
   se muestra todo igualmente. */
.app-shell.arrancando .sidebar,.app-shell.arrancando .topbar,.app-shell.arrancando .wrap > section{
  visibility:hidden;animation:norte-aparece 0s 5s forwards}
@keyframes norte-aparece{to{visibility:visible}}

/* Zonas de pulsación: lo que se toca con el dedo no baja de ~32 px. */
.side-user a{display:inline-block;padding:8px 6px;margin:-8px -6px}
.feed-x,.onboard .x{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.enlace-sku{padding:7px 2px}
.foot-legal button,.trust-legal button{padding:8px 4px}

/* En el móvil la tarjeta de pasos enseña solo el paso que toca: cuatro
   tarjetas apiladas llenaban la primera pantalla y la cifra que importa
   quedaba debajo. */
@media(max-width:720px){
  .onboard{padding:18px 18px 14px;margin-bottom:16px}
  .onboard .lede{display:none}
  .onboard .steps{margin-bottom:10px}
  .onboard .ostep:not(.actual){display:none}
  .onboard h2{font-size:var(--t-lg)}
  .wrap{padding-bottom:96px} /* el botón «Preguntar» flota sobre el final */
}


/* ---- Cuestionario del cliente: secciones planas ----
   Cada parte separada por una regla, sin tarjeta; solo llevan caja los
   objetos de verdad (una fila de envase, un proveedor, un mercado). */
.q-seccion{background:none;border:0;border-radius:0;box-shadow:none;padding:28px 0 8px;
  border-top:1px solid var(--line)}
.q-seccion:first-of-type{border-top:0;padding-top:8px}
.q-etq{display:inline-block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand-2);background:var(--brand-soft);
  padding:3px 9px;border-radius:var(--r-xs);margin-bottom:8px}
.q-opcional .q-intro{border-left:4px solid var(--accent-ink);padding-left:14px;max-width:46rem}
.q-cierre{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  box-shadow:none;padding:28px 0 0;margin-top:20px}


/* Envases en una línea: cuatro campos por fila en pantalla ancha. */
.q-compacta .q-grid{grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)}
.q-compacta .q-campo.corto{max-width:none}
@media(max-width:700px){.q-compacta .q-grid{grid-template-columns:1fr 1fr}
  .q-compacta .q-campo:first-child{grid-column:1 / -1}}
/* El bloque plegable: el título es el botón para abrirlo. */
.q-seccion details>summary{cursor:pointer;list-style:none}
.q-seccion details>summary::-webkit-details-marker{display:none}
.q-seccion details>summary h2{display:inline-block;margin:0}
.q-seccion details>summary::after{content:"Mostrar ▸";display:inline-block;margin-left:12px;
  font-size:var(--t-sm);color:var(--brand);font-weight:600}
.q-seccion details[open]>summary::after{content:"Ocultar ▾"}
.q-seccion details[open]>summary{margin-bottom:10px}

/* La etiqueta «Opcional…» va sobre el título, no pegada a él. */
.q-seccion details>summary .q-etq{display:block;width:fit-content;margin-bottom:8px}


/* Subida de Excel en Envases: una alternativa, no un bloque más. */
.q-subir{border-top:1px dashed var(--line-strong);margin-top:16px;padding-top:14px}
.q-subir p{font-size:var(--t-sm);color:var(--muted);margin:4px 0 10px;max-width:44rem}
.q-subir .q-subir-msg{color:var(--ink);margin:10px 0 0}