:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans",-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;

  /* Texto y borde de cada tono sobre su fondo suave, y lo que va encima de
     un fondo de marca. Con nombre propio para que el modo oscuro los cambie
     todos de una vez en vez de color a color. */
  --good-ink:#1d6b52; --good-line:#cfe6da;
  --warn-ink:#7a5313; --warn-line:#eaddbf;
  --bad-ink:#8f3427;  --bad-line:#eecec6; --bad-soft:#fdf8f7;
  --brand-line:#c6d9ea; --brand-hover:#eaf0f5; --accent-hover:#185a6e;
  --neutral-bg:#eef1f4; --gris:var(--gris);
  --on-brand:#ffffff;
  --campo:#ffffff;
  --side:#ffffff; --side-ink:#3a4a5a; --side-on:var(--brand-soft); --side-on-ink:var(--brand);


  /* ---- 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);
}
/* ---- Tonos del claro ----
   El blanco de arriba deslumbra a quien pasa el día delante de la pantalla.
   Cuatro fondos pálidos más, sacados de las pruebas de estilo de octubre de
   2026: ui/tema.js pone data-tono en <html>. Cada uno cambia el lienzo, las
   superficies, las líneas y los campos; el gris del texto y el teal bajan un
   punto para seguir en AA (4,5:1) sobre el fondo más oscuro del tono.
   Van ANTES del modo oscuro y con la misma especificidad: en oscuro, o en
   Sistema con el sistema en oscuro, el oscuro gana por orden y el tono no se ve. */
:root[data-tono="papel"]{
  --bg:#efece5; --bg-2:#e5e1d8; --surface:#faf8f3; --surface-2:#f4f1ea;
  --line:#e0dcd2; --line-strong:#cdc7bb; --campo:#fcfbf7; --side:#f7f5ef; --neutral-bg:#ebe7df;
  --muted:#56636f; --accent-ink:#1b6479;
}
:root[data-tono="piedra"]{
  --bg:#eaebeb; --bg-2:#dfe1e1; --surface:#f6f6f5; --surface-2:#efefee;
  --line:#dadcdc; --line-strong:#c6c9c9; --campo:#f9f9f8; --side:#f3f3f2; --neutral-bg:#e6e7e7;
  --muted:#56636f; --accent-ink:#1b6479;
}
:root[data-tono="niebla"]{
  --bg:#e8edf2; --bg-2:#dde4eb; --surface:#f4f7fa; --surface-2:#edf1f6;
  --line:#d5dee7; --line-strong:#c0cdda; --campo:#f8fafc; --side:#f1f5f8; --neutral-bg:#e4e9ef;
  --muted:#56636f; --accent-ink:#1b6479;
}
:root[data-tono="salvia"]{
  --bg:#e8eee9; --bg-2:#dde5df; --surface:#f5f8f5; --surface-2:#eef3ef;
  --line:#d6e0d8; --line-strong:#c1cfc4; --campo:#f9fbf9; --side:#f2f6f2; --neutral-bg:#e4ebe6;
  --muted:#56636f; --accent-ink:#1b6479;
}
/* ---- Modo oscuro ----
   Solo en la aplicación: index.html pone data-tema en <html> (sistema, claro
   u oscuro). Los portales de proveedor, fabricante y comprador no lo llevan y
   se quedan siempre en claro. Los PDF no pasan por aquí. */
:root[data-tema="oscuro"]{
  --bg:var(--o-bg,#0f161d); --bg-2:var(--o-bg-2,#16212b); --surface:var(--o-surface,#16202a); --surface-2:var(--o-surface-2,#1c2833);
  --ink:var(--o-ink,#e3eaf0); --muted:var(--o-muted,#97a6b4); --line:var(--o-line,#26333f); --line-strong:var(--o-line-strong,#344555);
  --brand:#6aaee6; --brand-2:#a9d0f2; --brand-soft:#173149;
  --accent:#4fb3cc; --accent-ink:#5cbcd4;
  --good:#4fb48c; --good-bg:#15302a; --warn:#d9a24a; --warn-bg:#2f2614; --bad:#e3806f; --bad-bg:#3a201b;
  --good-ink:#8ad6b4; --good-line:#25483d; --warn-ink:#e9c98a; --warn-line:#4c3d1f;
  --bad-ink:#f2a596; --bad-line:#5a2f27; --bad-soft:#2a1b18;
  --brand-line:#29496a; --brand-hover:#1f3347; --accent-hover:#7dcde0;
  --neutral-bg:var(--o-neutral-bg,#222e3a); --gris:#5f7183;
  --on-brand:#08131d; --campo:var(--o-campo,#121b24);
  --side:var(--o-side,#121a22); --side-ink:var(--o-side-ink,#c3d0dd); --side-on:#173149; --side-on-ink:#a9d0f2;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-tema="sistema"]{
  --bg:var(--o-bg,#0f161d); --bg-2:var(--o-bg-2,#16212b); --surface:var(--o-surface,#16202a); --surface-2:var(--o-surface-2,#1c2833);
  --ink:var(--o-ink,#e3eaf0); --muted:var(--o-muted,#97a6b4); --line:var(--o-line,#26333f); --line-strong:var(--o-line-strong,#344555);
  --brand:#6aaee6; --brand-2:#a9d0f2; --brand-soft:#173149;
  --accent:#4fb3cc; --accent-ink:#5cbcd4;
  --good:#4fb48c; --good-bg:#15302a; --warn:#d9a24a; --warn-bg:#2f2614; --bad:#e3806f; --bad-bg:#3a201b;
  --good-ink:#8ad6b4; --good-line:#25483d; --warn-ink:#e9c98a; --warn-line:#4c3d1f;
  --bad-ink:#f2a596; --bad-line:#5a2f27; --bad-soft:#2a1b18;
  --brand-line:#29496a; --brand-hover:#1f3347; --accent-hover:#7dcde0;
  --neutral-bg:var(--o-neutral-bg,#222e3a); --gris:#5f7183;
  --on-brand:#08131d; --campo:var(--o-campo,#121b24);
  --side:var(--o-side,#121a22); --side-ink:var(--o-side-ink,#c3d0dd); --side-on:#173149; --side-on-ink:#a9d0f2;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  color-scheme:dark;
  }
}
/* ---- Tonos del oscuro ----
   Noche es el azul de arriba. Grafito, Carbón y Negro son grises neutros, cada
   uno más oscuro, como piden Material (base #121212, superficies más claras
   cuanto más arriba) y Apple (fondo negro de verdad, capas en #1c1c1e): en
   oscuro la altura se dice con luz, no con sombra. El texto no llega a blanco
   puro (#e6e6e6) para que no vibre sobre el negro.
   Solo ponen variables --o-*, que únicamente leen los dos bloques de arriba:
   en claro no pintan nada, y Oscuro y Sistema-en-oscuro los toman igual. */
:root[data-tono-osc="grafito"]{
  --o-bg:#1c1d1f; --o-bg-2:#232427; --o-surface:#252629; --o-surface-2:#2c2d30;
  --o-line:#36373a; --o-line-strong:#46484c; --o-campo:#1f2022; --o-side:#1f2022; --o-neutral-bg:#303134;
  --o-ink:#e6e6e6; --o-muted:#a3a3a3; --o-side-ink:#cfcfcf;
}
:root[data-tono-osc="carbon"]{
  --o-bg:#121212; --o-bg-2:#191919; --o-surface:#1b1b1b; --o-surface-2:#222222;
  --o-line:#2a2a2a; --o-line-strong:#3a3a3a; --o-campo:#161616; --o-side:#151515; --o-neutral-bg:#262626;
  --o-ink:#e6e6e6; --o-muted:#a3a3a3; --o-side-ink:#cfcfcf;
}
:root[data-tono-osc="negro"]{
  --o-bg:#000000; --o-bg-2:#0b0b0b; --o-surface:#111111; --o-surface-2:#1a1a1a;
  --o-line:#222222; --o-line-strong:#333333; --o-campo:#0a0a0a; --o-side:#000000; --o-neutral-bg:#1c1c1c;
  --o-ink:#e6e6e6; --o-muted:#a3a3a3; --o-side-ink:#cfcfcf;
}
*{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:240px;flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;
  border-right:1px solid var(--line);padding:0 8px 8px;position:sticky;top:0;height:100vh;transition:width .18s}
.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}

/* ---- Menú lateral ----
   Medidas de las guías de diseño de producto (Carbon, Polaris, Primer,
   Atlassian, Fluent): 240 px de ancho, filas de 32 px, texto de 14 px,
   iconos de 18 px con el mismo trazo, el color de marca solo en lo
   seleccionado y gris neutro al pasar el ratón. */
.side-cab{display:flex;align-items:center;gap:10px;height:56px;padding:0 4px 0 6px;margin:0 -8px 8px;
  padding-left:14px;padding-right:8px;border-bottom:1px solid var(--line);flex:none}
/* Un solo logo arriba: el del cliente cuando lo tiene, el de MFW si no. */
.logo-chip{background:transparent;border:0;border-radius:var(--r-xs);padding:0;display:inline-flex;
  align-items:center;flex:none;cursor:pointer;transition:.14s}
.logo-chip:hover{box-shadow:0 0 0 3px var(--brand-soft)}
.logo-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.logo-chip img{height:22px;display:block}
.logo-chip .logo-oscuro,.logo-chip .logo-mini{display:none}
/* El del cliente: su tarjeta blanca, también en oscuro, que su logo no se toca. */
.logo-chip.con-cliente{background:#fff;border:1px solid var(--line);padding:3px 6px;border-radius:var(--r-xs)}
.logo-chip img.cliente{height:auto;max-height:30px;max-width:96px}
.logo-chip .logo-mini{width:28px;height:28px;border-radius:6px;background:var(--brand);color:var(--on-brand);
  font-family:var(--font-display);font-weight:600;font-size:15px;align-items:center;justify-content:center}
.auth-logo{height:44px;display:block}
.auth-logo.logo-oscuro{display:none}
/* En oscuro, el logo de MFW en su versión clara (assets/logo_mfw_oscuro.png). */
:root[data-tema="oscuro"] .logo-chip:not(.con-cliente) .logo-claro,:root[data-tema="oscuro"] .auth-logo.logo-claro{display:none}
:root[data-tema="oscuro"] .logo-chip:not(.con-cliente) .logo-oscuro,:root[data-tema="oscuro"] .auth-logo.logo-oscuro{display:block}
@media (prefers-color-scheme: dark){
  :root[data-tema="sistema"] .logo-chip:not(.con-cliente) .logo-claro,:root[data-tema="sistema"] .auth-logo.logo-claro{display:none}
  :root[data-tema="sistema"] .logo-chip:not(.con-cliente) .logo-oscuro,:root[data-tema="sistema"] .auth-logo.logo-oscuro{display:block}
}
.wordmark{flex:1;min-width:0;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;line-height:1;
  color:var(--ink);padding-left:10px;border-left:1px solid var(--line)}
.side-plegar{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;
  border:0;border-radius:6px;color:var(--muted);cursor:pointer}
.side-plegar:hover{background:var(--surface-2);color:var(--ink)}
.side-plegar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}

.side-preguntar{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;margin:0 0 10px;flex:none;
  border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--muted);font-family:inherit;
  font-size:var(--t-sm);cursor:pointer;text-align:left;transition:border-color .1s}
.side-preguntar:hover{border-color:var(--line-strong);color:var(--ink)}
.side-preguntar .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.side-preguntar .lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-preguntar kbd{font-family:inherit;font-size:11px;border:1px solid var(--line-strong);border-radius:4px;padding:0 4px;
  color:var(--muted);background:var(--surface)}

.side-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;margin:0 -8px;padding:0 8px}
.side-link{position:relative;display:flex;align-items:center;gap:10px;min-height:32px;padding:6px 8px;background:transparent;
  border:0;border-radius:6px;color:var(--side-ink);font-family:inherit;font-size:var(--t-sm);font-weight:400;line-height:20px;
  text-align:left;cursor:pointer;transition:background .05s}
.side-link .lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Iconos de línea: misma caja y mismo grosor; heredan el color del enlace. */
.side-link .ico{width:18px;height:18px;flex:none;color:var(--muted);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.side-link:hover{background:var(--surface-2)}
.side-link.sel{background:var(--side-on);color:var(--side-on-ink);font-weight:600}
.side-link.sel .ico{color:var(--side-on-ink)}
.side-link.sel::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
/* Lo que pide algo, en una cifra gris a la derecha. Sin nada pendiente no sale. */
.side-cnt{flex:none;font-size:11px;font-weight:600;line-height:16px;color:var(--muted);background:var(--neutral-bg);
  border-radius:99px;padding:1px 7px;font-variant-numeric:tabular-nums}
.side-cnt:empty{display:none}
.side-link.sel .side-cnt{background:var(--surface);color:var(--side-on-ink)}
/* 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. Rótulos sin mayúsculas, que se leen peor. */
.side-grupo{margin:16px 8px 4px;font-size:var(--t-xs);font-weight:600;color:var(--muted)}

/* Beta: los avisos, a la vista y en su sitio. */
.side-beta{display:flex;align-items:center;gap:10px;width:100%;margin:auto 0 0;padding:8px 10px;flex:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--side-ink);
  font-family:inherit;font-size:var(--t-xs);line-height:1.35;text-align:left;cursor:pointer;transition:border-color .1s}
.side-beta:hover{border-color:var(--line-strong)}
.side-beta:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.side-beta .lab{flex:1;min-width:0}
.side-beta .lab b{display:block;color:var(--ink);font-weight:600}
.side-beta .ico{width:18px;height:18px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.beta-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--on-brand);background:var(--accent-ink);
  border-radius:4px;padding:2px 6px}

.side-foot{flex:none;margin:8px -8px 0;padding:8px 8px 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.side-cuenta-fila{position:relative}
.side-cuenta-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;background:none;border:0;
  border-radius:6px;color:inherit;font-family:inherit;text-align:left;cursor:pointer}
.side-cuenta-btn:hover,.side-cuenta-btn[aria-expanded="true"]{background:var(--surface-2)}
.side-cuenta-btn.sel{background:var(--side-on)}
.side-cuenta-btn.sel .side-user{color:var(--side-on-ink)}
.side-cuenta-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.side-cuenta-btn .lab{flex:1;min-width:0;line-height:1.25}
.side-cuenta-btn .flechas{width:16px;height:16px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.side-av{width:28px;height:28px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--side-on-ink);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side-user{display:block;font-weight:600;color:var(--ink);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-emp{display:block;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-cuenta-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:45;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px}
.side-cuenta,.side-salir{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 8px;background:none;
  border:0;border-radius:6px;color:var(--ink);font-family:inherit;font-size:var(--t-sm);text-align:left;cursor:pointer}
.side-cuenta:hover,.side-salir:hover{background:var(--surface-2)}
.side-cuenta.sel{background:var(--side-on);color:var(--side-on-ink)}
.side-cuenta .ico,.side-salir .ico{width:16px;height:16px;flex:none;color:var(--muted);fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.side-pref{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;padding:6px 0 0}
.side-pref .side-idioma,.side-pref .side-tema{margin-top:0}

/* Pantallas bajas: filas un poco más juntas para que quepa el menú entero. */
@media(max-height:900px){.side-link{min-height:30px;padding:5px 8px}.side-grupo{margin-top:12px}.side-beta{padding:6px 10px}}
.side-nav{margin-bottom:10px}

/* ---- Menú plegado: un raíl de 64 px con los iconos (Ctrl+\) ----
   Solo en escritorio; en el móvil el menú ya se esconde entero. */
@media(min-width:861px){
  .app-shell.plegado .sidebar{width:64px}
  .app-shell.plegado .side-cab{flex-direction:column;justify-content:center;gap:6px;height:auto;padding:12px 0 10px}
  .app-shell.plegado .wordmark,.app-shell.plegado .logo-chip img{display:none!important}
  .app-shell.plegado .logo-chip .logo-mini{display:flex}
  .app-shell.plegado .logo-chip.con-cliente{background:transparent;border:0;padding:0}
  .app-shell.plegado .side-preguntar{justify-content:center;padding:0}
  .app-shell.plegado .side-link{justify-content:center;padding:6px 0}
  .app-shell.plegado .lab,.app-shell.plegado .side-cnt,.app-shell.plegado kbd,.app-shell.plegado .side-alfa,
  .app-shell.plegado .flechas,.app-shell.plegado .beta-tag,.app-shell.plegado .side-pref{display:none!important}
  .app-shell.plegado .side-grupo{font-size:0;margin:8px 6px;height:1px;background:var(--line)}
  .app-shell.plegado .side-beta{justify-content:center;padding:8px 0}
  .app-shell.plegado .side-cuenta-btn{justify-content:center;padding:6px 0}
  .app-shell.plegado .side-cuenta-menu{left:0;right:auto;width:220px}
}

.topbar{display:none;align-items:center;gap:12px;background:var(--side);color:var(--ink);border-bottom:1px solid var(--line);padding:12px 16px}
.hamb{background:transparent;border:0;color:var(--ink);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%}
/* ---- La entrada de Norte (index.html) y el acceso de fabricantes ----
   Pantalla entera en el azul de MFW: degradado de #003a6b a #005191, dos
   luces suaves (azul y teal de la casa), una rejilla de puntos que se
   desvanece hacia los bordes y curvas de nivel finas, como las de un mapa:
   el norte. Todo CSS y un SVG en línea; sin imágenes de fuera (CSP de
   _headers: img-src admite data:). Las luces se mueven muy despacio, salvo
   con "reducir movimiento". Los colores son de marca y no cambian con el
   tema: en claro y en oscuro la entrada es la misma. */
.auth-screen.entrada-azul{position:fixed;inset:0;z-index:40;overflow-y:auto;display:grid;place-items:center;
  min-height:100%;padding:56px 20px 40px;color:#fff;isolation:isolate;
  background:
    radial-gradient(48rem 34rem at 88% -8%, rgba(47,139,163,.50), transparent 62%),
    radial-gradient(44rem 32rem at -12% 108%, rgba(26,120,214,.42), transparent 62%),
    linear-gradient(160deg,#002e57 0%,#004a86 48%,#005191 72%,#003d70 100%)}
/* Curvas de nivel y rejilla de puntos. */
.auth-screen.entrada-azul::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cg stroke-opacity='.10'%3E%3Cpath d='M-80 640C180 520 360 760 640 600S1120 420 1520 520'/%3E%3Cpath d='M-80 680C190 560 380 800 660 640S1130 460 1520 560'/%3E%3Cpath d='M-80 720C200 600 400 840 680 680S1140 500 1520 600'/%3E%3Cpath d='M-80 760C210 640 420 880 700 720S1150 540 1520 640'/%3E%3C/g%3E%3Cg stroke-opacity='.07'%3E%3Cpath d='M-80 180C220 60 520 260 820 140S1260 40 1520 120'/%3E%3Cpath d='M-80 220C230 100 530 300 830 180S1270 80 1520 160'/%3E%3Cpath d='M-80 260C240 140 540 340 840 220S1280 120 1520 200'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px);
  background-size:cover,24px 24px;background-position:center,0 0;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 100%);
          mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 100%)}
/* Una luz que deriva, detrás de las opciones. */
.auth-screen.entrada-azul::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:46rem;height:46rem;
  left:50%;top:42%;margin:-23rem 0 0 -23rem;border-radius:50%;filter:blur(60px);opacity:.55;
  background:radial-gradient(circle at 30% 30%,rgba(76,170,255,.55),rgba(47,139,163,.25) 45%,transparent 70%);
  animation:entradaLuz 28s ease-in-out infinite alternate}
@keyframes entradaLuz{
  0%{transform:translate(-8%,-6%) scale(1)}
  50%{transform:translate(10%,4%) scale(1.08)}
  100%{transform:translate(-4%,8%) scale(.96)}}
@media (prefers-reduced-motion:reduce){ .auth-screen.entrada-azul::after{animation:none} }

.entrada-azul .auth-card{position:relative;max-width:600px;width:100%}
/* Geist, una sans de producto en la línea de San Francisco: solo en la entrada.
   La aplicación sigue con IBM Plex Sans y Fraunces (15 oct 2026). */
.auth-screen.entrada-azul{font-family:"Geist",var(--font-sans)}
.entrada-azul .entrada-op b,.entrada-azul .btn,.entrada-azul input,.entrada-azul select{font-family:"Geist",var(--font-sans)}
/* El logo de MFW, arriba a la izquierda como la cabecera de una web; el centro es de Norte. */
.entrada-azul .auth-brand{position:fixed;top:24px;left:28px;margin:0;z-index:2}
.entrada-logo{height:40px;width:auto;display:block}
.entrada-azul .entrada-titulo{display:flex;align-items:center;gap:.22em;font-family:"Geist",var(--font-sans);font-weight:700;
  font-size:clamp(66px,11vw,116px);line-height:1;letter-spacing:-.055em;margin:0 0 14px -.07em;color:#fff}
/* El margen izquierdo de -.07em es óptico: a este tamaño el blanco propio de la
   N la separaba 8 px del borde del lema y de los botones (medido en el navegador). */
.entrada-lema{font-size:clamp(18px,2.3vw,23px);line-height:1.35;color:rgba(255,255,255,.80);margin:0;max-width:40ch}

/* Las dos opciones: cristal sobre el azul, una palabra y una flecha. */
.entrada-ops{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0 8px}
.entrada-op{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:22px 22px;border-radius:8px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,20,45,.25);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s}
.entrada-op:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);transform:translateY(-3px);text-decoration:none}
.entrada-op:active{transform:translateY(-1px) scale(.99)}
.entrada-op:focus-visible{outline:2px solid #fff;outline-offset:3px}
.entrada-op b{font-family:var(--font-sans);font-size:22px;font-weight:600;letter-spacing:-.01em;color:#fff}
.entrada-op i{margin-left:auto;font-style:normal;font-size:22px;color:rgba(255,255,255,.85);transition:transform .22s}
.entrada-op:hover i{transform:translateX(4px)}
.eo-ico{width:28px;height:28px;flex:none;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
/* Lo que es cada uno, en un tooltip al pasar o al enfocar. */
.eo-tip{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:3;padding:10px 13px;border-radius:12px;
  background:rgba(4,22,42,.94);color:#fff;font-size:13px;font-weight:400;line-height:1.45;
  box-shadow:0 12px 30px rgba(0,0,0,.30);opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s,transform .16s}
.eo-tip::before{content:"";position:absolute;top:-6px;left:26px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.entrada-op:hover .eo-tip,.entrada-op:focus-visible .eo-tip{opacity:1;transform:none;transition-delay:.25s}
/* Sin ratón no hay tooltip: el texto va debajo de la palabra, más tenue. */
@media (hover:none){
  .entrada-op{flex-wrap:wrap}
  .eo-tip{position:static;flex-basis:100%;opacity:.78;transform:none;background:none;box-shadow:none;padding:0;margin-top:2px}
  .eo-tip::before{display:none}
}
@media (max-width:560px){
  .entrada-ops{grid-template-columns:1fr}
  .entrada-logo{height:30px}
  .entrada-azul .auth-brand{top:18px;left:20px}
}

/* El resto de la pantalla, sobre el azul. */
.entrada-azul .trust{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.16);margin-top:32px;text-align:left}
/* El pie, a la izquierda como todo lo de arriba. */
.entrada-azul .trust-legal{text-align:left;justify-content:flex-start}
.entrada-azul .trust-legal button{color:rgba(255,255,255,.85)}
/* El idioma, justo debajo de las opciones o de los botones del alta. */
.entrada-idioma{margin:16px 0 0;text-align:left}
/* Sobre el azul, el idioma es una pastilla blanca: translúcido se perdía. */
.entrada-azul .entrada-idioma[data-selector-idioma] select{padding:8px 30px 8px 14px;border-radius:999px;font-size:var(--t-sm);font-weight:600;
  background-color:#fff;color:#003a6b;border:0;box-shadow:0 4px 14px rgba(0,20,45,.25);cursor:pointer}
.entrada-azul .entrada-idioma[data-selector-idioma] select:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* El alta: Solicitar el alta en blanco lleno, como Entrar; Reservar, con borde blanco. */
.entrada-azul .entrada-alta .btn.secondary{background:#fff;color:#003a6b;border:0;box-shadow:0 4px 14px rgba(0,20,45,.25)}
.entrada-azul .entrada-alta .btn.secondary:hover{background:#e8f1fa;color:#003a6b}
.entrada-azul .entrada-alta .btn.ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.entrada-azul .entrada-alta .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.entrada-azul .trust-idioma select,.entrada-azul [data-selector-idioma] select{background:rgba(255,255,255,.10);color:#fff;
  border-color:rgba(255,255,255,.28)}
.entrada-azul [data-selector-idioma] option{color:#0b1c2c}
.entrada-azul .eyebrow{color:rgba(255,255,255,.72)}
.entrada-azul h1.display{color:#fff;font-family:"Geist",var(--font-sans);font-weight:700;font-size:clamp(30px,4vw,38px);
  letter-spacing:-.035em;margin:4px 0 20px}
.entrada-azul label,.entrada-azul .field label{color:rgba(255,255,255,.88)}
/* Correo y contraseña: rótulo y campo más grandes que en el resto de la aplicación. */
.entrada-azul .field label{font-size:17px;font-weight:500;margin-bottom:8px}
.entrada-azul .field input{font-size:17px;padding:14px 16px}
.entrada-azul .field input,.entrada-azul .field input:focus{background:#fff;color:#0b1c2c;border-color:transparent}
.entrada-azul .field input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.entrada-azul .err{color:#ffd0c4}
.entrada-azul .btn{background:#fff;color:#003a6b}
.entrada-azul .btn:hover{background:#e8f1fa;color:#003a6b}
/* Entrar no ocupa el ancho entero: en blanco y a todo lo ancho parecía otro campo. */
.entrada-azul .btn.block{display:flex;width:fit-content;min-width:9rem;padding:12px 32px;margin:4px auto 0}
.entrada-azul .btn.secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.34)}
.entrada-azul .btn.secondary:hover{background:rgba(255,255,255,.2);color:#fff}
.entrada-azul .btn.ghost{background:transparent;color:#fff}
.entrada-azul .btn.ghost:hover{background:rgba(255,255,255,.10);color:#fff}
.entrada-azul .enlace-sobrio,.entrada-azul a:not(.btn):not(.entrada-op){color:rgba(255,255,255,.88)}
.entrada-azul .small,.entrada-azul .muted{color:rgba(255,255,255,.72)}
.entrada-volver{display:block;margin:0 0 18px;padding:0;text-align:left}
.entrada-azul .enlace-sobrio{display:block;text-align:left;padding-left:0;padding-right:0}
.entrada-alta{margin:30px 0 4px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.entrada-alta h2{font-family:"Geist",var(--font-sans);font-size:var(--t-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0;color:rgba(255,255,255,.72)}
.entrada-alta .btn-row{margin-top:14px}
/* Cómo funciona: grande, es lo primero que mira quien aún no tiene cuenta. */
.entrada-azul a.entrada-como{display:inline-flex;align-items:center;gap:.35em;margin-top:10px;font-size:clamp(22px,2.6vw,28px);
  font-weight:600;letter-spacing:-.02em;color:#fff;text-decoration:none}
.entrada-azul a.entrada-como span{transition:transform .2s}
.entrada-azul a.entrada-como:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.entrada-azul a.entrada-como:hover span{transform:translateX(4px)}
.entrada-azul .reveal summary{color:rgba(255,255,255,.75)}
.auth-card .field input{background:var(--campo)}
.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 .rc-sub.decl-desfase.obliga{color:var(--bad-ink)}
.banner .decl-motivos{margin:6px 0 0;padding-left:18px}
.row-card.decl-fila .rc-right{gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Declaraciones, en grupos: el nombre en tinta con su recuento, sin las
   mayúsculas grises de los h3, que entre tarjetas desaparecían. */
.decl-tit{font-size:var(--t-base);font-weight:600;color:var(--ink);margin:22px 0 10px}
.decl-tit:first-of-type{margin-top:6px}
.decl-tit span{font-family:var(--font-sans);font-size:var(--t-sm);font-weight:400;color:var(--muted);margin-left:4px}
/* Los envases sin el expediente completo: una línea plegada y, abierta,
   una fila corta por envase con su enlace a la ficha y su Preparar. */
/* Avance de las declaraciones: archivadas, del proveedor y listas para firmar. */
.decl-avance{margin:0 0 22px}
.decl-avance-txt{font-size:var(--t-sm);color:var(--muted);margin-bottom:8px}
.decl-avance-txt b{color:var(--ink);font-variant-numeric:tabular-nums}
.decl-barra{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--neutral-bg)}
.decl-barra i{display:block;height:100%}
.decl-barra .a{background:var(--good)} .decl-barra .p{background:var(--accent)} .decl-barra .y{background:var(--brand)}
.decl-sin{margin-top:22px}
.decl-sin-nota{font-size:var(--t-sm);color:var(--muted);margin:-8px 0 8px}
.decl-sin ul{border-bottom:1px solid var(--line)}
.decl-mas{margin-top:10px}
.decl-sin>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:13px 2px;font-size:var(--t-sm);color:var(--muted)}
.decl-sin>summary::-webkit-details-marker{display:none}
.decl-sin>summary::after{content:"+";font-size:var(--t-base);opacity:.6}
.decl-sin[open]>summary::after{content:"–"}
.decl-sin>summary:hover{color:var(--ink)}
.decl-sin>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.decl-sin>summary b{color:var(--ink)}
.decl-sin ul{list-style:none;margin:0;padding:0 0 8px}
.decl-sin li{display:flex;align-items:center;gap:12px;padding:6px 2px;border-top:1px solid var(--line)}
.decl-sin-txt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.decl-sin-txt .enlace-sku{text-align:left;color:var(--ink);text-decoration-color:var(--line-strong)}
.decl-sin-txt .enlace-sku:hover{color:var(--brand)}
.decl-sin-txt>span{font-size:var(--t-xs);color:var(--muted);letter-spacing:.02em}
/* El lateral: las tres pantallas que no son de un envase, en una tarjeta. */
.decl-otras .decl-ir{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;background:none;border:0;border-top:1px solid var(--line);
  padding:13px 2px;color:var(--ink)}
.decl-otras h3+.decl-ir{border-top:0;padding-top:4px}
.decl-otras .decl-ir:hover b{color:var(--brand)}
.decl-otras .decl-ir:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.decl-otras .decl-ir .ico{flex:none;width:22px;height:22px;fill:none;stroke:var(--brand);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.decl-otras .decl-ir b{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.decl-otras .lado-lista{margin:0 0 12px;padding:0;border-top:0}
.decl-otras .lado-nota{margin:0 0 12px;padding:0;border-top:0}
/* La pista sale a la izquierda de la tarjeta: debajo tapaba el botón de al
   lado justo cuando se iba a pulsar. Apilado, en pantalla estrecha, vuelve
   debajo, y nunca se queda con el clic. */
.decl-otras .pista{pointer-events:none}
@media (min-width:1081px){
  .decl-otras .pista{top:50%;right:calc(100% + 22px);left:auto;transform:translateY(-50%)}
  .decl-otras .pista::before{display:none}
  .decl-otras *:hover>.pista,.decl-otras *:focus-visible>.pista{transform:translateY(-50%)}
}
/* «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,.card>.head-row:first-child h1{margin-bottom:0}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  background:var(--brand);color:var(--on-brand);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:var(--brand-hover)}
.btn.accent{background:var(--accent-ink)} .btn.accent:hover{background:var(--accent-hover)}
.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:var(--bad-line)}
.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 ----
   Un solo botón con todas las formas de meter envases. Eran tres mosaicos
   a la vista siempre, al lado de «Nuevo envase», para algo que se usa al
   principio y poco más. Dentro, cada opción dice para qué sirve. */
.anadir-menu{position:relative}
.am-flecha{font-style:normal;font-size:11px;margin-left:8px;opacity:.8}
.anadir-lista{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:340px;
  max-width:calc(100vw - 32px);display:grid;gap:2px;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
/* En el móvil el botón queda a la izquierda: el menú se abre hacia la derecha. */
@media(max-width:640px){ .anadir-lista{left:0;right:auto} }
.anadir-op{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;background:none;border:0;border-radius:var(--r-sm);
  padding:10px 12px}
.anadir-op:hover,.anadir-op:focus-visible{background:var(--brand-soft);outline:none}
.anadir-op .ico{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--brand);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.anadir-op span{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.anadir-op b{display:block;font-size:var(--t-sm);color:var(--ink);font-weight:600;margin-bottom:1px}

/* ---- La lista de Envases ----
   Pensada para cientos de envases: buscador, filtros por lo que falta,
   grupos plegables y filas de una línea. El estado se dice en la píldora de
   cada fila y en la barra de cada grupo. Con pocos envases sale una sola
   tabla sin grupos. */
.env-cab-der{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-left:auto}
.env-cabtit{min-width:0;font-family:var(--font-sans)}
.env-sub{margin:4px 0 0;font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.env-herr{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.env-buscar{flex:1;min-width:240px;position:relative}
.env-buscar svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.env-buscar input{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--campo);color:var(--ink);font:inherit;font-size:var(--t-sm)}
.env-buscar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.env-agr{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--muted)}
.env-agr .vista-sel{margin-left:0}
.env-faltas{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:10px 28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:0 0 12px}
.env-fcol h4{margin:0 0 6px;font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.env-fchips{display:flex;flex-wrap:wrap;gap:6px}
.env-fchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:var(--t-sm);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-full);padding:4px 11px;cursor:pointer}
.env-fchip b{font-weight:600;font-variant-numeric:tabular-nums}
.env-fchip:hover{border-color:var(--brand)}
.env-fchip.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.env-fchip:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.env-fchip .pt{width:8px;height:8px;border-radius:50%;flex:none}
.env-fchip .pt.good{background:var(--good)} .env-fchip .pt.warn{background:var(--warn)} .env-fchip .pt.bad{background:var(--bad)}
.env-fchip .pt.info{background:var(--brand)} .env-fchip .pt.none{background:var(--line-strong)}
.env-mostrando{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--t-sm);color:var(--muted);margin:0 0 10px}
.env-mostrando .enl{padding:0}
.env-vacia{padding:40px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.env-grupo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.env-ghead{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer}
.env-ghead:hover{background:var(--surface-2)}
.env-gtog{display:flex;align-items:flex-start;gap:10px;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.env-gtog:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.env-flecha{color:var(--muted);transition:transform .15s;line-height:1.5}
.env-grupo.abierto .env-flecha{transform:rotate(90deg)}
.env-gnom{min-width:0}
.env-gnom b{font-weight:600}
.env-gn{color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.env-gres{display:block;font-size:var(--t-sm);color:var(--muted)}
.env-gbarra{display:flex;align-items:stretch;width:120px;height:6px;border-radius:var(--r-full);overflow:hidden;background:var(--neutral-bg)}
.env-gbarra i{display:block;flex:none}
.env-gbarra .good{background:var(--good)} .env-gbarra .bad{background:var(--bad)} .env-gbarra .warn{background:var(--warn)}
.env-gbarra .info{background:var(--brand)} .env-gbarra .none{background:var(--line-strong)}
.env-tabla-marco{overflow-x:auto;border-top:1px solid var(--line)}
.env-grupo.sin-cab .env-tabla-marco{border-top:0}
.env-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.env-tabla th{text-align:left;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:8px 10px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.env-tabla td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.env-tabla tbody tr{cursor:pointer}
.env-tabla tbody tr:hover td{background:var(--surface-2)}
.env-tabla tbody tr:last-child td{border-bottom:0}
.env-tabla tr.sel td,.env-tabla tr.sel:hover td{background:var(--brand-soft)}
.env-tabla .chk{width:36px;padding-right:0}
.env-tabla input[type=checkbox],.env-ghead input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.env-fnom{color:var(--ink);font-weight:500}
.env-fnom:hover{color:var(--brand)}
.env-ref{display:block;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:var(--t-xs);color:var(--muted)}
.env-tabla .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.env-tabla .c-paises,.env-tabla .c-falta{white-space:nowrap}
.env-tabla td.env-vacio{color:var(--warn-ink)}
.env-ftag{display:inline-block;font-size:var(--t-xs);font-weight:600;padding:1px 7px;border-radius:var(--r-xs);margin:1px 4px 1px 0;white-space:nowrap}
.env-ftag.emp{background:var(--warn-bg);color:var(--warn-ink)}
.env-ftag.prov,.env-ftag.otro{background:var(--neutral-bg);color:var(--muted)}
.env-ftag.mas{background:none;color:var(--muted);padding:1px 2px}
.env-tabla .pill{padding:3px 10px}
.env-vermas{display:block;width:100%;border:0;border-top:1px solid var(--line);background:var(--surface-2);padding:10px;
  color:var(--brand);font:inherit;font-weight:600;font-size:var(--t-sm);cursor:pointer}
.env-vermas:hover{background:var(--brand-hover)}
/* La barra de la selección: pegada abajo mientras se ve la lista, sin
   depender del ancho del menú lateral. Tinta sobre fondo: sale invertida en
   los dos temas. */
.env-acciones{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;width:max-content;max-width:100%;margin:16px auto 0;padding:10px 12px;
  background:var(--ink);color:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow)}
.env-acciones[hidden]{display:none}
.env-acciones .n{font-weight:700;padding:0 8px 0 4px;font-variant-numeric:tabular-nums;font-size:var(--t-sm)}
.env-acciones button{font:inherit;font-size:var(--t-sm);font-weight:600;color:inherit;border:0;border-radius:var(--r-sm);
  padding:8px 12px;cursor:pointer;background:color-mix(in srgb,var(--surface) 14%,transparent)}
.env-acciones button:hover{background:color-mix(in srgb,var(--surface) 26%,transparent)}
.env-acciones button:disabled{opacity:.5;cursor:default}
.env-acciones button.x{background:none;opacity:.8}
.env-acciones button:focus-visible{outline:2px solid var(--surface);outline-offset:1px}
.env-dlg-paises{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:46vh;overflow:auto;margin-bottom:8px}
.env-dlg-paises label{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:6px 10px;font-size:var(--t-sm);cursor:pointer}
.env-dlg-paises label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.env-dlg-paises code{margin-left:auto;font-size:var(--t-xs);color:var(--muted)}
.env-dlg-cols{margin:0 0 12px;padding:0;list-style:none;font-size:var(--t-sm)}
.env-dlg-cols li{padding:6px 0;border-bottom:1px solid var(--line)}
@media (max-width:1080px){ .env-faltas{grid-template-columns:repeat(2,auto)} }
@media (max-width:760px){
  .env-faltas{grid-template-columns:1fr}
  .env-fchip:disabled:not(.sel){display:none}
  .env-agr{width:100%;flex-wrap:wrap}
  .env-agr .vista-sel{display:flex;width:100%}
  .env-agr .vista-sel button{flex:1;padding:8px 6px}
  .env-ghead{grid-template-columns:20px minmax(0,1fr)}
  .env-ghead .env-gbarra,.env-ghead .env-gacc{grid-column:2}
  .env-tabla .c-prov,.env-tabla .c-nivel,.env-tabla .c-mat,.env-tabla .c-peso,.env-tabla .c-paises{display:none}
  .env-fcol:not(:has(.env-fchip:not(:disabled))){display:none}
  .env-acciones{width:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .env-acciones .n,.env-acciones button{white-space:nowrap;flex:none}
  .env-tabla .pill{white-space:normal;line-height:1.3}
}
@media (max-width:480px){ .env-tabla .c-falta{display:none} }
@media (prefers-reduced-motion:reduce){ .env-flecha{transition:none} }

/* ---- La ficha de un envase ----
   Una columna de 860 px: Qué falta, Documentos, El envase y Más datos, cada
   uno en su caja, y la barra de Guardar pegada abajo. */
.card.fe{max-width:860px;margin-left:auto;margin-right:auto;margin-bottom:0}
.card.fe>.back-link{margin-bottom:8px}
.card>.head-row.fe-cab{border-bottom:0;padding-bottom:0;margin-bottom:4px;align-items:flex-start}
.fe-cab h1{margin:0}
.fe-cab .pill{margin-top:10px}
.fe-sub{margin:0 0 20px;color:var(--muted);font-size:var(--t-sm)}
.fe-blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;margin-bottom:16px}
.fe-blk>h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);margin:0 0 12px;padding:0;border:0}
.fe-blk.fe-falta{background:var(--warn-bg);border-color:var(--warn-line)}
.fe-falta>h2{color:var(--warn-ink)}
.fe-faltas{list-style:none;margin:0;padding:0}
.fe-faltas li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--warn-line);font-size:var(--t-sm);color:var(--ink)}
.fe-faltas li:first-child{border-top:0;padding-top:0}
.fe-faltas small{display:block;color:var(--warn-ink);font-size:var(--t-xs);margin-top:2px}
.fe-faltas .enl{flex:none;font-weight:600;padding:2px 0}
.fe-falta-ok{margin:0 0 8px;color:var(--good-ink);font-size:var(--t-sm);font-weight:600}
.fe-falta-pie{font-size:var(--t-sm);color:var(--warn-ink);margin:10px 0 0;padding-top:10px;border-top:1px solid var(--warn-line)}

/* La declaración: cada apartado con su número; lo que falta, en una línea
   junto a los botones, y el cómo debajo del campo. */
.campo-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  margin-right:8px;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-size:var(--t-xs);
  font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}
.field.falta .campo-n{background:var(--bad);color:#fff}
.campo-ref{font-weight:400;color:var(--muted);font-size:var(--t-xs)}
.field.falta .falta-como{color:var(--bad-ink)}
.doc-pend-pie{font-size:var(--t-sm);color:var(--warn-ink);margin:0 0 10px;line-height:1.7}
.doc-pend-pie .enl{display:inline;padding:0;font-weight:600}

.fe-falta-pie .enl{padding:0;font-weight:600}
.banner.fe-ok .enl{padding:0;font-weight:600}
.fe-h3{font-size:var(--t-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.fe-de{display:inline-block;font-size:var(--t-xs);font-weight:600;color:var(--brand);background:var(--brand-soft);
  border-radius:var(--r-xs);padding:0 6px;margin-left:4px;vertical-align:1px}
.fe-opc{font-weight:400}
.fe-aviso-ficha{font-size:var(--t-sm);color:var(--ink);background:var(--brand-soft);border-radius:var(--r-sm);padding:8px 12px;margin:10px 0 0}
#feDocs .att-list{margin-top:0}
.fe-subir{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.fe-subir select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--campo);color:var(--ink);font:inherit;font-size:var(--t-sm)}
#feDocs .red-bloque{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#feDocs .red-bloque h3{font-size:var(--t-sm);font-weight:600;margin:0}
.red-en-norte{margin:6px 0 0;color:var(--ink)}
#feDocs .huecos{margin-top:12px}
.fe-prov{font-size:var(--t-sm);color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fe-prov>p{margin:0}
.fe-prov b{color:var(--ink);font-weight:600}
.fe-prov .enl{padding:0 2px}
#feProvEdit{margin-top:10px}
#feProvEdit .chips{margin-top:8px}
/* Países: un campo con etiquetas y sus sugerencias. */
.fe-paises{position:relative}
.fe-lbl{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:8px}
.fe-chipbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--campo);cursor:text}
.fe-chipbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fe-chipbox.vacio{border-color:var(--warn);background:var(--warn-bg)}
.fe-chipbox input{flex:1;min-width:150px;border:0;outline:0;background:transparent;font:inherit;font-size:var(--t-base);color:var(--ink);padding:4px 2px}
.fe-chipbox input::placeholder{color:var(--muted)}
.fe-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--ink);border-radius:var(--r-full);
  padding:4px 6px 4px 12px;font-size:var(--t-sm);font-weight:600}
.fe-chip code,.fe-sug code,.fe-uds code{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:var(--t-xs);font-weight:400;color:var(--muted)}
.fe-chip button{background:none;border:0;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:1rem;line-height:1;padding:0;cursor:pointer}
.fe-chip button:hover{background:var(--line-strong)}
.fe-sug{position:absolute;left:0;right:0;top:calc(100% - 26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;z-index:15;max-height:260px;overflow:auto}
.fe-sug[hidden]{display:none}
.fe-sug li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--r-xs);cursor:pointer;font-size:var(--t-sm)}
.fe-sug li.sel{background:var(--brand-soft)}
.fe-sug mark{background:none;color:inherit;font-weight:700}
.fe-atajos{font-size:var(--t-xs);color:var(--muted);margin:8px 0 0;line-height:2}
.fe-atajos kbd{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:var(--t-xs);border:1px solid var(--line-strong);border-bottom-width:2px;
  border-radius:var(--r-xs);padding:1px 6px;background:var(--surface-2);color:var(--ink)}
.fe-uds{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.fe-uds label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);font-weight:600}
.fe-uds label code{margin-left:6px}
.fe-uds input{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--campo);color:var(--ink);
  font:inherit;font-variant-numeric:tabular-nums}
.fe-uds input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* Más datos: apartados plegados con su estado a la derecha. */
.fe-ap{border-top:1px solid var(--line)}
.fe-ap:first-of-type{border-top:0}
.fe-ap>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}
.fe-ap>summary::-webkit-details-marker{display:none}
.fe-ap>summary::before{content:"+";width:14px;color:var(--muted);flex:none}
.fe-ap[open]>summary::before{content:"–"}
.fe-ap>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.fe-ap>summary .n{flex:1;font-weight:600;font-size:var(--t-sm)}
.fe-ap>summary .q{font-weight:400;color:var(--muted);margin-left:6px}
.fe-est{font-size:var(--t-xs);font-weight:600;padding:3px 10px;border-radius:var(--r-full);white-space:nowrap}
.fe-est:empty{display:none}
.fe-est.ok{background:var(--good-bg);color:var(--good-ink)}
.fe-est.fa{background:var(--warn-bg);color:var(--warn-ink)}
.fe-est.ne{background:var(--neutral-bg);color:var(--muted)}
.fe-cuerpo{padding:0 0 14px 26px}
/* La barra de abajo, pegada al borde mientras se ve la ficha. */
.fe-barra{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;margin:8px -4px 0;
  padding:12px 4px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.fe-esp{flex:1;font-size:var(--t-sm);color:var(--muted);min-width:0}
.fe-mas{position:relative}
.fe-mas-btn{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:transparent;color:var(--muted);
  font:inherit;font-weight:700;cursor:pointer}
.fe-mas-btn:hover{background:var(--surface)}
.fe-menu{position:absolute;bottom:48px;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:25}
.fe-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:var(--r-xs);
  font:inherit;font-size:var(--t-sm);color:var(--ink);cursor:pointer}
.fe-menu button:hover,.fe-menu button:focus-visible{background:var(--surface-2);outline:none}
.fe-menu .rojo{color:var(--bad-ink)}
.fe-destello{animation:feDestello 1.4s ease}
@keyframes feDestello{20%{box-shadow:0 0 0 4px var(--brand-line)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .fe-destello{animation:none} }
@media (max-width:760px){
  .fe-blk{padding:16px}
  .fe-cuerpo{padding-left:0}
  .fe-esp{display:none}
  .fe-barra .btn{flex:1;padding-left:12px;padding-right:12px}
  .fe-faltas li{align-items:flex-start}
}

/* ---- 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:var(--bg);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:var(--good-line)} .tile.good .n{color:var(--good)}
.tile.warn{background:var(--warn-bg);border-color:var(--warn-line)} .tile.warn .n{color:var(--warn)}
.tile.bad{background:var(--bad-bg);border-color:var(--bad-line)} .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:var(--good-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.none{background:var(--neutral-bg);color:var(--muted)}
.pill.info{background:var(--brand-soft);color:var(--brand-2)}

/* ================= 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:var(--bad-ink)}
@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:var(--warn-ink);line-height:1.5}
.prov-lote b{color:var(--warn-ink)}
.prov-lote.prov-erp{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand-2)}
.prov-lote.prov-erp b{color:var(--brand-2)}
.prov-erp-sub{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px}

.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 .prov-norte{font-size:var(--t-xs);font-weight:600;padding:0 6px;margin-right:4px}
.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:var(--warn-ink);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:var(--warn-line)}
.huecos.falta>summary{color:var(--warn-ink)}
.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}
/* La sección Actividad, día a día: la raya separa días, no líneas, y lo que
   se repite se pliega en una línea con su recuento. */
.feed-dias>li{border-bottom:0;padding:6px 0}
.feed-dias>li.dia{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.feed-dias>li.dia:first-child{border-top:0;margin-top:0}
.feed-dias .f-det{flex:1;min-width:0}
/* Un nombre de archivo largo no se parte solo y empujaba la × fuera. */
.feed-dias .f-txt{min-width:0;overflow-wrap:anywhere}
.feed-dias .f-det>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:8px;
  font-weight:600;color:var(--ink)}
.feed-dias .f-det>summary::-webkit-details-marker{display:none}
.feed-dias .f-det>summary::after{content:"+";color:var(--muted);font-weight:400}
.feed-dias .f-det[open]>summary::after{content:"–"}
.feed-dias .f-det>summary:hover{color:var(--brand)}
.feed-dias .f-det>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.feed-dias .f-sub{margin:6px 0 2px;padding-left:12px;border-left:2px solid var(--line)}
.feed-dias .f-sub li{border-bottom:0;padding:4px 0}
.feed-dias .f-sub .f-fecha{display:none}
.feed .f-grupo:hover .feed-x{opacity:0}
.feed .f-sub li:hover .feed-x,.feed .f-sub .feed-x:focus-visible{opacity:1}
.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}
.mat-row .peso-fuente{grid-column:1/-1;margin:-2px 0 0;font-size:var(--t-xs);color:var(--muted)}
@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:var(--warn-line);color:var(--warn-ink)}
.banner.info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-2)}
.banner.good{background:var(--good-bg);border-color:var(--good-line);color:var(--good-ink)}

/* ================= AYUDA / TUTORIAL ================= */
.help-hero{margin-bottom:36px}
.help-hero h1{margin-top:0}
/* Índice de Brújula: saltos a cada apartado. Con margen arriba al llegar. */
.bru-indice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-16px 0 32px;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.bru-indice span{color:var(--muted);margin-right:6px}
.bru-indice button{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 12px;
  font-family:inherit;font-size:var(--t-sm);color:var(--ink);cursor:pointer}
.bru-indice button:hover{border-color:var(--line-strong)}
#tab-brujula .card[id]{scroll-margin-top:24px}
.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}
/* Los artículos 5 a 12: una fila por artículo, plana, sin tarjetas. */
.doc-arts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.doc-art{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.doc-art-n{font-weight:700;color:var(--brand-2);white-space:nowrap}
.doc-art-t small{display:block;color:var(--muted);font-size:var(--t-xs);line-height:1.45;margin-top:2px}
.doc-art .pill{white-space:nowrap}
.doc-auto{white-space:pre-wrap;font-family:inherit;font-size:var(--t-sm);line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0;color:var(--ink)}
#docBloqueos ul{margin:6px 0 0;padding-left:18px}
.tec-nota{display:block;width:100%;min-height:44px;margin-top:6px;font-size:var(--t-sm)}
#docBloqueos li{margin:2px 0}
@media (max-width:560px){.doc-art{grid-template-columns:48px 1fr}.doc-art .pill{grid-column:2;justify-self:start}}

/* ================= 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}
/* Evidencias con validez: la línea de estado y su formulario, que ocupa la fila entera al abrirse. */
.att-list li.att-ev{flex-wrap:wrap}
.att-list .ev-estado{color:var(--muted)}
.att-list .ev-estado.caducada{color:var(--bad-ink)}
.att-list .ev-estado.por_caducar{color:var(--warn-ink)}
.att-list .ev-estado .pill{padding:1px 8px;margin-right:4px}
.ev-form{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px 12px;padding-top:8px;border-top:1px solid var(--line)}
.ev-form .btn-row{grid-column:1/-1;margin:0}
/* El lote de versiones nuevas: títulos de cada grupo. */
.decl-lote h3{margin:18px 0 8px;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.decl-lote .obliga{color:var(--bad-ink)}
.decl-lote .faltas{margin:4px 0 0;gap:4px}
.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:var(--on-brand);
  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:var(--on-brand)}
.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)}
/* Las cabeceras azules de los portales y del panel (prov-top, fab-pub-top):
   el logo de MFW en su pastilla blanca y Norte con el subtítulo debajo, como
   antes del 15 oct 2026. El menú lateral nuevo cambió .logo-chip y .wordmark
   para la aplicación, y aquí el logo azul se perdía sobre el azul y el
   subtítulo se pegaba a Norte. */
:is(.prov-top,.fab-pub-top) .logo-chip{background:#fff;border-radius:var(--r-sm);padding:7px 10px;cursor:default}
:is(.prov-top,.fab-pub-top) .logo-chip:hover{box-shadow:none}
:is(.prov-top,.fab-pub-top) .wordmark{display:flex;flex-direction:column;gap:3px;flex:0 1 auto;border-left:0;padding-left:0;color:inherit}
.wordmark .by{font-family:var(--font-sans);font-weight:500;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;opacity:.75}

/* ---- 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:var(--good-line)}
.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 var(--good-line);
  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:var(--bad-soft)}
.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:var(--warn-ink);text-align:left}
.q-faltan ul .enlace-sobrio:hover{color:var(--brand)}

/* El formulario del art. 16: de dónde sale cada dato, la unidad detrás del
   número, lo declarado como que no cumple y los envases con declaración. */
.pv-base{display:inline-block;margin-left:8px;font-size:var(--t-xs);font-weight:400;color:var(--muted);
  vertical-align:middle}
.pv-num{display:flex;align-items:center;gap:8px;max-width:14rem}
.pv-num span{font-size:var(--t-sm);color:var(--muted)}
.pv-nocumple{color:#8a5f16}
.pv-condoc{display:inline-block;margin-left:8px;font-size:var(--t-xs);color:var(--brand)}
.pv-subsec{font-size:var(--t-sm);font-weight:600;color:var(--muted);margin:14px 0 6px;
  text-transform:uppercase;letter-spacing:.03em}

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

/* ================= 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:var(--warn-ink)}
.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)}
/* De dónde sale cada dato leído de una ficha (ppwr/procedencia.js) */
.imp-table tr.imp-proc td{background:var(--surface-2);padding-top:4px}
.proc-lista{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.proc-lista li{font-size:var(--t-sm);line-height:1.4;padding-left:8px;border-left:2px solid var(--line)}
.proc-lista li.proc-baja{border-left-color:var(--bad)}
.proc-lista label{cursor:pointer}
.proc-lista .pill{padding:1px 8px;margin-left:4px}
.cita{font-style:italic;color:var(--ink-2,inherit)}
.proc-revisar{color:var(--bad)}

/* ================= ASISTENTE PPWR ================= */
.top-preguntar{margin-left:auto;padding:7px 12px;font-size:var(--t-sm);background:var(--brand);color:var(--on-brand);
  border:0;border-radius:var(--r-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:.15s}
.top-preguntar:hover{background:var(--brand-2)}
.app-shell.anon .top-preguntar{display:none}
.assist-panel{position:fixed;right:22px;bottom:22px;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:var(--on-brand);font-size:var(--t-base)}
.assist-x{background:transparent;border:0;color:var(--on-brand);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:var(--on-brand);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,.side-preguntar,.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:var(--gris)}
.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:var(--muted)}
.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:var(--bad-ink)}
.ob.a .ob-ico{background:var(--warn-bg);color:var(--warn-ink)}
.ob.v .ob-ico{background:var(--good-bg);color:var(--good-ink)}
.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:var(--bad-ink);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 var(--gris);
  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:var(--gris)}

/* ---- «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:var(--gris)}

.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:var(--gris)}
.area.r .punto{background:var(--bad)} .area.a .punto{background:var(--warn)}
.area.v .punto{background:var(--good)} .area.g .punto{background:var(--gris)}
.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)}

/* ---- 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:var(--on-brand)}
.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}

/* ---- Obligaciones: tarjeta cerrada de una línea, dos grupos debajo ----
   Cerrada solo lleva nombre, país y estado; el porqué y los datos de la
   norma abren la ficha, en dos líneas cortas antes de las acciones. */
.ob>summary{align-items:center}
.comose .ob-razon{margin:0 0 8px}
.comose .ob-datos{margin:0 0 16px;font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums}
.ob-datos .norma{color:var(--brand-2);font-weight:600}
.ob-datos .grave{color:var(--bad-ink)}
.ob-datos .sep{opacity:.6}
.grupos-ob{margin-top:32px}
.grupos-ob .grupo>summary .g-pista{margin-left:auto;font-size:var(--t-xs);color:var(--muted)}
.grupos-ob .grupo>summary .g-pista+.cuenta{margin-left:0}
.grupos-ob .sub-grupo{display:flex;align-items:baseline;gap:8px;margin:16px 0 8px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grupos-ob .sub-grupo span{font-weight:600;letter-spacing:0}
.grupos-ob .sub-grupo:first-of-type{margin-top:4px}
@media(max-width:620px){ .grupos-ob .grupo>summary .g-pista{display:none} }


/* ---- 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:var(--bad-ink)}
.pill-ob.good{background:var(--good-bg);color:var(--good-ink)}
.pill-ob.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill-ob.info{background:var(--brand-soft);color:var(--brand-2)}
.pill-ob.none{background:var(--neutral-bg);color:var(--muted)}
.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:var(--bad-ink)}
.grupo>summary .cuenta.good{background:var(--good-bg);color:var(--good-ink)}
.grupo>summary .cuenta.warn{background:var(--warn-bg);color:var(--warn-ink)}
.grupo>summary .cuenta.info{background:var(--brand-soft);color:var(--brand-2)}
.grupo>summary .cuenta.none{background:var(--neutral-bg);color:var(--muted)}
.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:var(--bad-ink);background:var(--bad-bg);border-radius:var(--r-full);padding:2px 8px;font-weight:600;font-size:var(--t-xs)}
.area.v .e{color:var(--good-ink);background:var(--good-bg);border-radius:var(--r-full);padding:2px 8px;font-weight:600;font-size:var(--t-xs)}
.area.g .e{color:var(--muted);background:var(--neutral-bg);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. */
/* El dibujo de un envase (dibujoEnvase). */
.cart-ic{display:block;margin:0 auto 7px;color:var(--brand)}

/* ---- 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}
/* Dos renglones como mucho: con el título entero la bola caía lejos de la
   regla. El título completo sale al dejar el puntero encima. */
.anio-et{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  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}

/* El desglose, en una línea de texto. Eran cuatro cifras con su etiqueta y,
   a su altura, competían con la grande. */
.hero-linea{margin:12px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.hero-linea b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hero-linea b.ojo{color:var(--warn-ink)}

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

.lado-n{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  font-variant-numeric:tabular-nums}

/* ---- El paso que toca ----
   Una franja y no cuatro tarjetas: el primer paso sin hacer, con su cifra
   y su botón. La regla de arriba dice por dónde va el proceso sin repetir
   el menú; cada tramo lleva a su sección. */
.paso-panel{background:var(--brand-soft);border-radius:var(--r-md);padding:10px 16px 16px 20px}
.pp-cab{display:flex;align-items:center;gap:14px}
.pp-et{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-2)}
.pp-regla{display:flex;gap:4px;flex:0 1 160px}
.pp-tramo{position:relative;flex:1;height:16px;border:0;padding:0;background:none;cursor:pointer}
.pp-tramo::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;
  border-radius:var(--r-full);background:var(--line-strong)}
.pp-tramo.ok::before{background:var(--brand)}
.pp-tramo.actual::before{background:var(--accent)}
.pp-tramo:hover::before{opacity:.7}
.pp-tramo:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pp-x{margin-left:auto;min-width:32px;min-height:32px;background:none;border:0;
  color:var(--muted);cursor:pointer;font-size:var(--t-sm);border-radius:var(--r-sm)}
.pp-x:hover{color:var(--ink);background:var(--surface)}
.pp-cuerpo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:4px}
.pp-txt{flex:1;min-width:14rem}
.pp-txt b{display:block;font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;
  color:var(--ink);line-height:1.25}
.pp-txt span{font-size:var(--t-sm);color:var(--muted)}

/* Por firmar: filas planas, como el resto de listas. Llevaban borde rojo e
   icono, y catorce declaraciones pendientes no son catorce alarmas. */
.panel-lista{list-style:none;margin:0;padding:0}
.panel-lista li{display:flex;align-items:center;gap:16px;padding:11px 6px;
  border-bottom:1px solid var(--line);cursor:pointer}
.panel-lista li:last-child{border-bottom:0}
.panel-lista li:hover{background:var(--surface)}
.panel-lista li:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pl-txt{flex:1;min-width:0;font-size:var(--t-sm);color:var(--muted);line-height:1.4}
.pl-txt b{display:block;font-size:var(--t-base);color:var(--ink);font-weight:600}
.panel-lista li.listo .pl-txt{color:var(--good-ink)}
.pl-ref{flex:none;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}

/* La actividad, al lado y corta: tres líneas y el enlace a la lista. */
.panel-cols{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
.panel-act{position:sticky;top:16px}
.panel-act>.head-row{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.panel-act h2{margin:0}
.panel-act .feed li{position:relative;flex-wrap:wrap;gap:2px 8px;padding-right:34px}
.panel-act .feed .f-fecha{width:100%}
.panel-act .feed-x{position:absolute;right:0;top:4px}
.pa-pie{display:flex;flex-wrap:wrap;gap:0 16px;margin:6px 0 0}
@media (max-width:1080px){
  .panel-cols{grid-template-columns:1fr;gap:8px}
  .panel-act{position:static}
}
.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 ----
   Cada bloque, un título y una línea; la base legal va en la «i». Los
   mercados, una fila por país con los nombres de columna una sola vez. */
h3.emp-h{margin-top:28px}
.emp-linea{margin:-6px 0 12px}
.emp-casillas{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.emp-casillas label,.emp-aviso label{display:flex;align-items:flex-start;gap:8px;
  font-size:var(--t-sm);cursor:pointer;max-width:60rem}
.emp-casillas input,.emp-aviso input{width:auto;margin:3px 0 0;cursor:pointer;flex:none}
.emp-aviso{display:flex;align-items:center;margin:20px 0 0}
.emp-aviso label{align-items:center}
.emp-aviso input{margin:0}
.emp-cuenta{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.merc-cab,.merc-row{display:grid;grid-template-columns:120px 1fr 1.2fr 36px;gap:8px;align-items:center}
.merc-cab{font-size:var(--t-sm);font-weight:600;padding:0 0 6px;border-bottom:1px solid var(--line)}
.merc-cab span{display:flex;align-items:center}
.merc-row{padding:6px 0;border-bottom:1px solid var(--line)}
.merc-row select{width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink)}
.merc-row select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
@media(max-width:720px){
  .merc-cab,.merc-row{grid-template-columns:84px 1fr 36px;grid-template-areas:"p c x" "e e x";row-gap:6px}
  .merc-cab>:nth-child(1),.merc-row>:nth-child(1){grid-area:p}
  .merc-cab>:nth-child(2),.merc-row>:nth-child(2){grid-area:c}
  .merc-cab>:nth-child(3),.merc-row>:nth-child(3){grid-area:e}
  .merc-cab>:nth-child(4),.merc-row>:nth-child(4){grid-area:x}
}
/* Cuenta: exportar, en una línea con su botón. */
.cuenta-exp{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cuenta-exp p{margin:0}


/* ================= 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. */
.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:var(--good-line);color:var(--good-ink);font-weight:600}
.btn-acc.principal:hover{background:var(--good);border-color:var(--good);color:var(--on-brand)}
.btn-acc.abierto{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-2)}
.acc-hecho{font-size:var(--t-sm);color:var(--good-ink);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:var(--warn-ink);background:var(--warn-bg);border-color:var(--warn-line)}
.acc-renov.urge{color:var(--bad-ink);background:var(--bad-bg);border-color:var(--bad-line);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:var(--bad-ink);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:var(--warn-ink);background:var(--warn-bg);
  border-radius:var(--r-full);padding:3px 10px;white-space:nowrap}

/* ---- Conexión con el ERP ---- */
.erp-code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--t-xs);
  color:var(--ink);overflow-wrap:anywhere}
.erp-datos{display:grid;gap:6px;margin:0 0 20px}
.erp-datos>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.erp-datos dt{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.erp-datos dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-sm)}
.erp-datos .btn.ghost{padding:4px 8px}
.erp-recien{border-left:4px solid var(--brand);background:var(--brand-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;margin:0 0 16px}
.erp-recien-cab{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:var(--t-sm);margin-bottom:8px}
.erp-recien-cab span{color:var(--brand-2)}
.erp-recien-fila{display:flex;gap:12px;align-items:center}
.erp-recien-fila .erp-code{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 10px}
.erp-tabla .erp-code{white-space:nowrap;overflow-wrap:normal}
.erp-tabla .erp-nom{display:block;font-weight:600}
.erp-tabla .erp-sub{display:block;font-size:var(--t-xs);color:var(--muted)}
.erp-tabla td{vertical-align:middle}
.erp-tabla .erp-fecha{white-space:nowrap;font-variant-numeric:tabular-nums}
.erp-tabla .erp-acc{text-align:right;width:1%;white-space:nowrap}
.erp-tabla tr.erp-anulada td{color:var(--muted)}
.erp-tabla tr.erp-anulada .erp-nom{font-weight:500}
.erp-vacio{margin:0}
.erp-nueva{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin-top:16px;max-width:560px}
.erp-nueva label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.erp-plegadas{margin-top:20px}
.erp-plegadas summary{cursor:pointer;font-size:var(--t-sm);color:var(--muted);width:max-content}
.erp-plegadas summary:hover{color:var(--brand)}
@media (max-width:640px){
  .erp-datos>div,.erp-nueva{grid-template-columns:1fr;gap:4px}
  .erp-recien-fila{flex-direction:column;align-items:stretch}
}

.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,.foot-legal a,.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,.foot-legal a: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}

/* El selector de idioma: en la barra lateral y bajo la tarjeta de acceso.
   Un desplegable nativo y discreto; el del sistema ya sabe abrirse en el móvil. */
.sel-idioma{font-family:inherit;font-size:var(--t-xs);border-radius:6px;padding:4px 6px;cursor:pointer}
.side-idioma{margin-top:10px}
/* Tema: Sistema sigue al sistema operativo; Claro y Oscuro lo fijan. */
.side-tema{display:flex;margin-top:10px;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.side-tema button{flex:1;background:var(--campo);border:0;color:var(--side-ink);font-family:inherit;
  font-size:var(--t-xs);padding:6px 4px;cursor:pointer;position:relative}
.side-tema button+button{border-left:1px solid var(--line-strong)}
.side-tema button.sel{background:var(--side-on);color:var(--side-on-ink);font-weight:600}
.side-tema button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.side-tema svg{width:16px;height:16px;display:block;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.side-tema .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Los tonos, en una fila de cuadrados encima del botón (ui/tema.js la coloca).
   Cada cuadrado lleva el color de su tono, no el del que esté puesto; el
   nombre va en title y aria-label. */
.side-pref{position:relative}
.side-tonos{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;display:flex;gap:6px;padding:6px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:var(--shadow);
  animation:tonos-entra .12s ease-out}
@keyframes tonos-entra{from{opacity:0;transform:translateY(3px)}}
.side-tonos button{width:22px;height:22px;padding:0;border:1px solid rgba(128,140,152,.6);border-radius:4px;cursor:pointer}
.side-tonos button:hover{border-color:var(--brand)}
.side-tonos button[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.side-tonos button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.side-tonos [data-valor="blanco"]{background:#ffffff}
.side-tonos [data-valor="papel"]{background:#e5e1d8}
.side-tonos [data-valor="piedra"]{background:#dfe1e1}
.side-tonos [data-valor="niebla"]{background:#dde4eb}
.side-tonos [data-valor="salvia"]{background:#dde5df}
.side-tonos [data-valor="noche"]{background:#0f161d}
.side-tonos [data-valor="grafito"]{background:#1c1d1f}
.side-tonos [data-valor="carbon"]{background:#121212}
.side-tonos [data-valor="negro"]{background:#000000}
@media (prefers-reduced-motion: reduce){.side-tonos{animation:none}}
.side-idioma .sel-idioma{background:var(--campo);color:var(--ink);border:1px solid var(--line-strong)}
.side-idioma .sel-idioma option{color:var(--ink,#1a1a1a)}
.prov-idioma{margin-left:auto}
.prov-idioma .sel-idioma{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.prov-idioma .sel-idioma option{color:var(--ink,#1a1a1a)}
.trust-idioma{text-align:center;margin:10px 0 0}
.trust-idioma .sel-idioma{background:var(--campo);color:var(--muted);border:1px solid var(--line)}

/* ================= 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:var(--on-brand)}
.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:var(--warn-ink);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 var(--brand-line);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:var(--ink);color:var(--ink)}
.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:var(--on-brand);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:var(--bad-line);color:var(--bad-ink)}
.av-aviso{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.av-nota{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.av-ok{background:var(--good-bg);border-color:var(--good-line);color:var(--good-ink)}

.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:var(--on-brand)}
.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}
/* Fabricantes: sus personas, el formulario para dar acceso o borrar, y los borrados. */
.adm-personas{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:3px;font-size:var(--t-xs);color:var(--ink)}
.adm-personas .enl{padding:0 0 0 8px;font-size:var(--t-xs)}
.adm-form-fab{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.adm-borrados{margin:4px 0 16px;font-size:var(--t-xs)}
.adm-borrados summary{cursor:pointer;color:var(--muted);margin-bottom:8px}
/* 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:var(--warn-line);color:var(--warn-ink)}
.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 var(--warn-line);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:16px;font-size:var(--t-sm);color:var(--warn-ink);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 var(--good-line);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:16px;font-size:var(--t-sm);color:var(--good-ink)}
.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:var(--warn-ink);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:var(--good-ink)}
.alfa-cifra.warn{color:var(--warn-ink)}
.alfa-cifra.bad{color:var(--bad-ink)}
.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:var(--bad-ink);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:var(--good-ink)}
.alfa-art11 li.a11-no span{color:var(--bad-ink)}
.alfa-art11 li.a11-falta span{color:var(--warn-ink)}

/* 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}
/* Cifra que no es firme (tarifa sin cotejar, provisional o por confirmar). */
.alfa-nofirme{display:inline-block;padding:0 6px;border-radius:999px;background:var(--warn-bg);
  color:#8a5f16;font-size:var(--t-xs);font-weight:600;white-space:nowrap;cursor:help;vertical-align:1px}
.alfa-scrap-canal{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.alfa-scrap-canal:first-of-type{border-top:0;padding-top:0}
.alfa-dudas{margin:6px 0 0;font-size:var(--t-xs);color:var(--muted)}
.alfa-dudas summary{cursor:pointer}
.alfa-dudas ul{margin:6px 0 0;padding-left:18px}

/* 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:var(--on-brand)}
.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:var(--on-brand)}
.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:var(--good-ink)}
.alfa-delta.sube{background:var(--bad-bg);color:var(--bad-ink)}

.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)}
/* La casilla de piloto lleva una frase entera: en el móvil tiene que poder bajar de línea. */
.chip-check.adm-piloto{display:flex;align-items:flex-start;max-width:100%;border-radius:var(--r-sm);
  margin:4px 0 14px;line-height:1.4}
.chip-check.adm-piloto input{margin-top:3px}
.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:0;margin-left:0;background:none;color:var(--muted)}
.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:var(--good-ink);
  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:var(--on-brand)}
.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:var(--warn-ink)}
.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:var(--warn-ink)}
.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:var(--warn-ink);font-weight:600}
.prod-ventas.editando .ud{width:150px}
.aviso-linea{border-left:4px solid var(--warn);background:var(--warn-bg);color:var(--warn-ink);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:var(--warn-ink);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:var(--warn-ink);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:var(--warn-ink);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. */
.feed-x{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.enlace-sku{padding:7px 2px}
.foot-legal button,.foot-legal a,.trust-legal button{padding:8px 4px}



/* --- Panel: lista de cuestionarios en tabla --- */
.adm-barra{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.adm-barra input{flex:1;min-width:200px;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-barra select{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-tabla-caja{overflow-x:auto;border-top:1px solid var(--line)}
.adm-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.adm-tabla th{text-align:left;font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-tabla td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-tabla td.c,.adm-tabla th.c{width:32px;text-align:center}
.adm-tabla td.pequena{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
.adm-tabla td.acc{white-space:nowrap;text-align:right}
.adm-tabla td.acc .btn{margin-left:4px}
.adm-tabla tr.enlace td{background:var(--surface-2)}
.adm-tabla tbody tr:not(.enlace):hover{background:var(--surface-2)}
.adm-chip.ok{color:var(--good);background:var(--good-bg)}
.adm-masiva{display:flex;align-items:center;gap:12px;background:var(--brand-soft);
  border-radius:var(--r-sm);padding:8px 12px;margin-bottom:8px}
.adm-pagina{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;
  font-size:var(--t-sm);color:var(--muted)}
.adm-lote{border-left:4px solid var(--accent-ink);padding-left:14px;margin-top:12px}

/* Sesión de soporte de MFW (admin/entrar.js): franja fija arriba mientras dure. */
.franja-soporte{position:sticky;top:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;padding:7px 16px;background:var(--warn);color:var(--on-brand);font-size:13px;font-weight:600}
.franja-soporte button{background:#fff;color:#7a4f10;border:0;border-radius:4px;padding:3px 10px;
  font:inherit;font-weight:600;cursor:pointer}
.franja-soporte .fs-x{background:transparent;color:var(--on-brand);padding:3px 8px;font-size:12px}
.franja-soporte .fs-x:hover{background:rgba(255,255,255,.18)}
.franja-soporte.hidden,.chip-soporte.hidden{display:none}
/* Con la franja cerrada: una etiqueta en la esquina que la vuelve a abrir. */
.chip-soporte{position:fixed;top:10px;right:12px;z-index:2147482000;background:var(--warn);color:var(--on-brand);
  border:0;border-radius:var(--r-full);padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-sm)}
.chip-soporte:hover{filter:brightness(1.08)}

/* Preguntas que cambian el veredicto (ui/preguntas.js), dentro de Obligaciones. */
.preg{margin:18px 0 6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 16px}
.preg>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0;cursor:pointer;list-style:none}
.preg>summary::-webkit-details-marker{display:none}
.preg>summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.preg[open]>summary::before{transform:rotate(90deg)}
.preg-tit{font-weight:700;font-size:var(--t-lg);color:var(--ink)}
.preg h3{margin:18px 0 6px}
.preg-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 16px}
.preg-num{display:flex;align-items:center;gap:8px}
.preg-num input{max-width:140px}
.preg-mercados{display:flex;flex-direction:column;gap:8px}
.preg-merc{display:grid;grid-template-columns:minmax(120px,180px) repeat(auto-fit,minmax(220px,1fr));gap:0 16px;
  align-items:end;padding:10px 0;border-top:1px solid var(--line)}
.preg-merc .field{margin:0}
.preg-merc-pais{display:flex;flex-direction:column;gap:2px;padding-bottom:10px}
.preg-bloque{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 10px}
.preg-bloque select{flex:1 1 220px;min-width:0;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-sm)}
.preg-tabla th{white-space:nowrap}
.preg-tabla td select{padding:4px 6px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--t-xs);max-width:170px}
.preg-tabla td.muted{text-align:center}
.preg-env{background:none;border:0;padding:0;color:var(--brand-2);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.preg-env:hover{text-decoration:underline}
.preg-reparto{margin:6px 0 14px;padding-left:18px}
.preg>:last-child{margin-bottom:16px}
@media (max-width:640px){
  .preg{padding:0 12px}
  .preg-merc{grid-template-columns:1fr}
}