/* ══════════════════════════════════════════════════════════════════════════════
   Core · HJB Química Internacional — hoja única del sistema
   Rediseño contra docs/ESTANDAR_UI_CORE.md (24-ago-2026).

   Tres decisiones que explican casi todo lo que sigue:

   1. **Los colores del cliente, no una paleta genérica.** Los tokens de marca
      salen del logotipo de HJB (docs/PALETA.md). Lo que se agrega son GRADOS de
      esos mismos colores: `--azul` (#418CFF) es correcto como relleno y como
      serie de datos, y reprueba WCAG AA como color de texto sobre blanco (3.0:1).
      Por eso existe `--azul-tinta`: mismo tono, contraste de lectura. No es una
      paleta nueva, es la misma con la profundidad que faltaba.

   2. **Dos temas de primera, ninguno de relleno.** El oscuro no es el claro
      invertido: cambia la jerarquía de superficie (en claro la tarjeta flota con
      sombra; en oscuro la sombra no se ve, así que la tarjeta se separa con una
      línea) y baja la saturación del acento para que no brille. Sin neón.

   3. **Se evitan a propósito las señales de "hecho por AI"** que el estándar
      enumera: nada de franja de color de 3 px a la izquierda de las tarjetas
      —era la señal más confiable y este repo la tenía en cuatro pantallas—,
      nada de tarjeta dentro de tarjeta con borde gris, un solo radio para todo,
      gradientes decorativos, emoji como icono ni animación en el hover de cada
      caja. El movimiento queda reservado a los cambios de estado.

   Tipografía: maridaje deliberado de DOS familias, no una. Los textos van en la
   sans del sistema; **todo dato —cifra, fecha, clave, huella, umbral— va en la
   mono tabular**. Es lo que hace que un MRP se lea como instrumento y no como
   folleto, y de paso resuelve la alineación de columnas sin trucos. No se usan
   fuentes web: la página se proyecta en sitio del cliente, donde puede no haber
   internet, y el CSP del servicio no admite `font-src` externo. La restricción
   es real y está declarada como tal en el estándar.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. tokens ───────────────────────────── */
:root{
  color-scheme:light;

  /* — marca (docs/PALETA.md) — */
  --azul:#418CFF;          /* relleno, series de datos, foco */
  --turquesa:#00D1CE;      /* la marca y sólo la marca: no es un CTA */
  --marino:#394D68;
  --tinta:#22314A;

  /* — grados de lectura derivados — */
  --azul-tinta:#1B5FCC;    /* el azul cuando tiene que ser TEXTO (AA sobre papel) */
  --azul-suave:rgba(65,140,255,.10);
  --azul-borde:rgba(65,140,255,.32);

  /* — superficie — */
  --fondo:#F5F8FB;
  --papel:#FFFFFF;
  --papel2:#F1F5F9;        /* subfila, encabezado de tabla, hueco */
  --papel3:#E7EDF4;
  --linea:#DFE6EE;
  --linea-firme:#C3CFDC;

  /* — texto — */
  --gris:#6E7D8F;          /* secundario legible: el #8A97A8 previo daba 2.9:1 */
  --gris-tenue:#93A0B0;    /* sólo decorativo, nunca información */

  /* — semáforo, en grado de texto — */
  --ok:#0B7A55;      --ok-marca:#00B37E;   --ok-suave:rgba(0,179,126,.12);
  --alerta:#C0311C;  --alerta-marca:#E94A34;--alerta-suave:rgba(233,74,52,.11);
  --ambar:#8A6100;   --ambar-marca:#C98A00; --ambar-suave:rgba(201,138,0,.14);

  /* — escala de radio: TRES, usados a propósito — */
  --r1:4px;    /* controles, pastillas, celdas */
  --r2:9px;    /* tarjetas y paneles */
  --r3:16px;   /* diálogos y paleta de comandos */
  --r:var(--r2);                    /* compatibilidad con plantillas previas */

  /* — escala de espaciado 4/8 — */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  /* — escala tipográfica — */
  --t-micro:10.5px; --t-mini:11.5px; --t-chico:12.5px; --t-base:13.5px;
  --t-cuerpo:14.5px; --t-medio:16px; --t-grande:20px; --t-titulo:26px; --t-cifra:30px;

  /* — familias: el maridaje — */
  --f-ui:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --f-dato:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",
           Menlo,Consolas,monospace;

  /* — elevación — */
  --sombra:0 1px 2px rgba(16,26,42,.05), 0 6px 20px rgba(16,26,42,.06);
  --sombra-alta:0 12px 40px rgba(16,26,42,.18);
  --borde-tarjeta:transparent;      /* en claro la tarjeta flota; en oscuro se dibuja */

  --lateral-ancho:252px;
  --transicion:180ms cubic-bezier(.4,0,.2,1);
}

/* El oscuro se define UNA vez y se aplica por dos caminos: la preferencia del
   sistema cuando nadie eligió, y la elección explícita cuando sí. Que el toggle
   gane en ambos sentidos es la mitad que casi siempre falta. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --azul:#5C9DFF; --turquesa:#22D3D0; --marino:#A9BDD6; --tinta:#E9EFF7;
    --azul-tinta:#8CBAFF; --azul-suave:rgba(92,157,255,.14); --azul-borde:rgba(92,157,255,.38);
    --fondo:#0D131C; --papel:#141C27; --papel2:#1B2532; --papel3:#233040;
    --linea:#25313F; --linea-firme:#3A4A5E;
    --gris:#93A4B8; --gris-tenue:#6D7E92;
    --ok:#3FD3A0; --ok-marca:#00B37E; --ok-suave:rgba(63,211,160,.13);
    --alerta:#FF8571; --alerta-marca:#E94A34; --alerta-suave:rgba(255,133,113,.13);
    --ambar:#E0AE43; --ambar-marca:#C98A00; --ambar-suave:rgba(224,174,67,.14);
    --sombra:none;
    --sombra-alta:0 14px 44px rgba(0,0,0,.55);
    --borde-tarjeta:var(--linea);
  }
}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --azul:#5C9DFF; --turquesa:#22D3D0; --marino:#A9BDD6; --tinta:#E9EFF7;
  --azul-tinta:#8CBAFF; --azul-suave:rgba(92,157,255,.14); --azul-borde:rgba(92,157,255,.38);
  --fondo:#0D131C; --papel:#141C27; --papel2:#1B2532; --papel3:#233040;
  --linea:#25313F; --linea-firme:#3A4A5E;
  --gris:#93A4B8; --gris-tenue:#6D7E92;
  --ok:#3FD3A0; --ok-marca:#00B37E; --ok-suave:rgba(63,211,160,.13);
  --alerta:#FF8571; --alerta-marca:#E94A34; --alerta-suave:rgba(255,133,113,.13);
  --ambar:#E0AE43; --ambar-marca:#C98A00; --ambar-suave:rgba(224,174,67,.14);
  --sombra:none;
  --sombra-alta:0 14px 44px rgba(0,0,0,.55);
  --borde-tarjeta:var(--linea);
}

/* ───────────────────────────── 2. base ───────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:var(--t-cuerpo)/1.5 var(--f-ui);color:var(--tinta);background:var(--fondo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.018em;font-weight:650;color:var(--tinta);line-height:1.22}
h1{font-size:var(--t-titulo)} h2{font-size:var(--t-medio)} h3{font-size:var(--t-cuerpo)}
h4{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--gris);font-weight:700}
a{color:var(--azul-tinta);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:650}
small{font-size:var(--t-mini)}
code,kbd,samp{font-family:var(--f-dato)}
hr{border:0;border-top:1px solid var(--linea);margin:var(--e5) 0}
::selection{background:var(--azul-suave)}

/* Foco visible SIEMPRE, y en el mismo tono en las dos superficies. Sin esto el
   requisito de teclado del estándar es una declaración sin evidencia. */
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:var(--r1)}

/* Todo número, fecha, clave o huella va en la mono tabular. Es la mitad del
   maridaje tipográfico y lo que alinea las columnas sin depender del ancho. */
.dato,.num,.cifra,.reloj,.huella,td.n,th.n,.kpi .n,.k2 .v,.t1 .v{
  font-family:var(--f-dato);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ───────────────────── 3. armazón de la aplicación ───────────────────── */
.app{display:grid;grid-template-columns:var(--lateral-ancho) 1fr;min-height:100vh}
.app.compacta{--lateral-ancho:64px}

.lateral{background:var(--tinta);color:#C9D6E6;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:30}
:root[data-tema="oscuro"] .lateral{background:#0A0F17;border-right:1px solid var(--linea)}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .lateral{
  background:#0A0F17;border-right:1px solid var(--linea)}}

.lateral .cabeza{padding:var(--e5) var(--e5) var(--e4);border-bottom:1px solid rgba(255,255,255,.09)}
.lateral .marca2{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;
  color:#fff;letter-spacing:-.025em}
.lateral .marca2 i{width:8px;height:8px;border-radius:50%;background:var(--turquesa);
  box-shadow:0 0 0 4px rgba(0,209,206,.16);flex:none}
.lateral .marca2 small{display:block;font-size:var(--t-mini);font-weight:500;color:#8FA5C0;
  margin-top:2px;letter-spacing:.01em}

.mods{padding:var(--e3) var(--e3);flex:1;overflow:auto}
.mods .grupo{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#7189A8;padding:var(--e4) 10px var(--e2)}
.mods a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r1);
  color:#C9D6E6;font-size:var(--t-cuerpo);font-weight:500;margin-bottom:2px;line-height:1.25;
  transition:background var(--transicion),color var(--transicion)}
.mods a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.mods a[aria-current="page"]{background:var(--azul);color:#fff;font-weight:650}
:root[data-tema="oscuro"] .mods a[aria-current="page"]{background:rgba(92,157,255,.20);color:#CFE1FF}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .mods a[aria-current="page"]{
  background:rgba(92,157,255,.20);color:#CFE1FF}}
.mods a svg{width:17px;height:17px;flex:none;opacity:.85;stroke-width:1.75}
.mods a .cuenta{margin-left:auto;font-family:var(--f-dato);font-size:var(--t-micro);font-weight:700;
  background:rgba(255,255,255,.14);padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.mods a .cuenta.urge{background:var(--alerta-marca);color:#fff}
.mods a.apagado{opacity:.42;pointer-events:none}
.mods a.apagado .cuenta{background:transparent;color:#7F93AE;font-weight:500}

.lateral .pie2{padding:var(--e3) 18px 18px;border-top:1px solid rgba(255,255,255,.09);
  font-size:var(--t-chico)}
.lateral .pie2 b{color:#fff;display:block;font-size:var(--t-base);font-weight:650}
.lateral .pie2 span{color:#8FA5C0;font-size:var(--t-mini)}
.lateral .pie2 a{color:#8FA5C0;font-size:var(--t-mini);display:inline-block;margin-top:7px}

.principal{min-width:0;background:var(--fondo);display:flex;flex-direction:column}

/* ── barra de utilidades: migas + frescura + controles de sesión ──
   Va arriba de todo y es la misma en las ocho pantallas. Aquí viven las cinco
   cosas que el estándar exige tener a la vista y que antes no existían en
   ninguna: dónde estoy, de cuándo es el dato, qué papel traigo, en qué idioma
   y con qué tema, y cómo me salgo. */
.barra-app{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--e3);
  padding:0 var(--e5);height:52px;background:var(--papel);
  border-bottom:1px solid var(--linea);flex-wrap:nowrap}

.migas{display:flex;align-items:center;gap:var(--e2);font-size:var(--t-chico);
  color:var(--gris);min-width:0;flex:1;overflow:hidden;white-space:nowrap}
.migas a{color:var(--gris)}
.migas a:hover{color:var(--tinta)}
.migas .sep{color:var(--gris-tenue);flex:none}
.migas b{color:var(--tinta);font-weight:650;overflow:hidden;text-overflow:ellipsis}

/* Sello de frescura: «Datos al HH:MM» + refrescar. Un número sin corte no se
   puede verificar, y el que se ve viejo tiene que verse viejo. */
.sello{display:inline-flex;align-items:center;gap:var(--e2);padding:4px 10px;border-radius:999px;
  background:var(--papel2);font-size:var(--t-mini);color:var(--gris);white-space:nowrap;flex:none}
.sello .pt{width:6px;height:6px;border-radius:50%;background:var(--ok-marca);flex:none}
.sello.viejo{background:var(--ambar-suave);color:var(--ambar)}
.sello.viejo .pt{background:var(--ambar-marca)}
.sello.roto{background:var(--alerta-suave);color:var(--alerta)}
.sello.roto .pt{background:var(--alerta-marca)}
.sello time{font-family:var(--f-dato);color:inherit}

.utiles{display:flex;align-items:center;gap:var(--e1);flex:none}

/* Botón de icono: 32×32, sin fondo hasta que se toca. */
.bi{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r1);background:transparent;color:var(--gris);cursor:pointer;
  transition:background var(--transicion),color var(--transicion)}
.bi:hover{background:var(--papel2);color:var(--tinta)}
.bi svg{width:17px;height:17px;stroke-width:1.8;fill:none;stroke:currentColor}
.bi[aria-pressed="true"]{background:var(--azul-suave);color:var(--azul-tinta)}
.bi .globo{position:absolute;transform:translate(9px,-9px);min-width:15px;height:15px;
  border-radius:999px;background:var(--alerta-marca);color:#fff;font-family:var(--f-dato);
  font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* Buscar / paleta de comandos: el disparador vive en la barra. */
.busca-disp{display:inline-flex;align-items:center;gap:var(--e2);height:32px;padding:0 10px;
  border:1px solid var(--linea);border-radius:var(--r1);background:var(--papel2);
  color:var(--gris);font:var(--t-chico)/1 var(--f-ui);cursor:pointer;white-space:nowrap}
.busca-disp:hover{border-color:var(--linea-firme);color:var(--tinta)}
.busca-disp svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
kbd{font-family:var(--f-dato);font-size:var(--t-micro);border:1px solid var(--linea-firme);
  border-bottom-width:2px;border-radius:var(--r1);padding:1px 5px;color:var(--gris);background:var(--papel)}

/* Papel de quien entró: visible, no escondido en un menú. */
.papel{display:inline-flex;align-items:center;gap:var(--e2);height:32px;padding:0 10px;
  border-radius:var(--r1);background:var(--papel2);white-space:nowrap;cursor:pointer;border:0;
  font-family:var(--f-ui);color:inherit}
.papel .ini{width:20px;height:20px;border-radius:50%;background:var(--azul);color:#fff;
  font-size:var(--t-micro);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.papel .qn{font-size:var(--t-chico);font-weight:600;color:var(--tinta);max-width:130px;
  overflow:hidden;text-overflow:ellipsis}
.papel .pp{font-size:var(--t-mini);color:var(--gris)}

/* ── encabezado de pantalla ── */
.tope{background:var(--papel);border-bottom:1px solid var(--linea);
  padding:var(--e5) var(--e6) var(--e4);display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--e5);flex-wrap:wrap}
.tope h1{font-size:var(--t-grande);margin:0 0 3px}
.tope .lede{margin:0;font-size:var(--t-base)}
.tope .acciones{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}

.cuerpo{padding:var(--e5) var(--e6) var(--e7);max-width:1280px;width:100%;flex:1}
.envoltura{max-width:1180px;margin:0 auto;padding:var(--e5) var(--e5) var(--e7)}
.lede{color:var(--marino);font-size:var(--t-cuerpo);margin-bottom:var(--e5);max-width:74ch;line-height:1.55}

/* ── pie: versión, build y entorno. Sin esto no se sabe qué se está mirando. ── */
.pie-app{border-top:1px solid var(--linea);padding:var(--e4) var(--e6);display:flex;
  gap:var(--e2) var(--e5);flex-wrap:wrap;align-items:center;font-size:var(--t-mini);color:var(--gris)}
.pie-app .ver{font-family:var(--f-dato);color:var(--gris)}
.pie-app .ent{font-family:var(--f-dato);font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--r1);
  background:var(--papel3);color:var(--marino)}
.pie-app .ent[data-entorno="prod"]{background:var(--ok-suave);color:var(--ok)}
.pie-app .ent[data-entorno="staging"],.pie-app .ent[data-entorno="dev"]{
  background:var(--ambar-suave);color:var(--ambar)}
.pie-app .crece{flex:1}

/* Fuera de producción se grita, no se susurra: quien ve una cifra tiene derecho
   a saber que no es la de producción antes de repetirla en una junta. */
.cinta-entorno{background:var(--ambar-marca);color:#1B1400;font-size:var(--t-mini);font-weight:700;
  letter-spacing:.06em;text-align:center;padding:5px var(--e4);
  font-family:var(--f-dato);text-transform:uppercase}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto}
  .mods{display:flex;flex-wrap:wrap;gap:4px;padding:10px}
  .mods .grupo{display:none} .mods a{margin:0}
  .cuerpo{padding:var(--e4) var(--e4) var(--e7)}
  .tope{padding:var(--e4) var(--e4) var(--e3)}
  .barra-app{padding:0 var(--e4);gap:var(--e2)}
  .busca-disp span,.papel .qn{display:none}
  .pie-app{padding:var(--e4)}
}

/* ─────────────────────── 4. superficies de contenido ─────────────────────── */
/* Tarjeta SIN borde por defecto: en claro se separa por elevación, y en oscuro
   —donde la sombra no existe— por una línea. Nunca las dos a la vez, y nunca
   una tarjeta con borde dentro de otra tarjeta con borde. */
.tarjeta{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  box-shadow:var(--sombra);padding:var(--e4) var(--e5);margin-bottom:var(--e4)}
.tarjeta>h2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  margin-bottom:var(--e3);flex-wrap:wrap}
.tarjeta .tarjeta{box-shadow:none;border:0;background:var(--papel2);padding:var(--e3) var(--e4)}
.sub{color:var(--gris);font-size:var(--t-chico);font-weight:400}
.seccion{margin-top:var(--e6)}
.seccion>h2{margin-bottom:var(--e1)}
.seccion>.d{font-size:var(--t-base);color:var(--gris);margin-bottom:var(--e3);max-width:82ch;line-height:1.5}
h2.s{font-size:var(--t-medio);margin:var(--e6) 0 var(--e1);color:var(--tinta)}
p.d2{font-size:var(--t-base);color:var(--gris);margin-bottom:var(--e3);max-width:84ch;line-height:1.5}

/* ── procedencia (barra de contexto de datos) ── */
.proc{display:flex;flex-wrap:wrap;gap:var(--e2) 18px;align-items:center;padding:10px var(--e5);
  background:var(--papel2);border-bottom:1px solid var(--linea);font-size:var(--t-chico);color:var(--marino)}
.proc b{color:var(--tinta)}

/* ── pastillas de estado ── */
.pill,.eti,.pastilla{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--r1);font-size:var(--t-micro);font-weight:700;letter-spacing:.05em;
  white-space:nowrap;background:var(--papel3);color:var(--marino);text-transform:uppercase}
.pill.ok,.p-ok,.pastilla.ok{background:var(--ok-suave);color:var(--ok)}
.pill.mal,.p-crit,.pastilla.mal,.eti.crit{background:var(--alerta-suave);color:var(--alerta)}
.pill.tibio,.p-warn,.pastilla.tibio{background:var(--ambar-suave);color:var(--ambar)}
.pill.neutro,.p-mut,.pastilla.neutro{background:var(--papel3);color:var(--gris)}
.pill.info,.pastilla.info{background:var(--azul-suave);color:var(--azul-tinta)}
.pill.vigente{background:var(--azul-suave);color:var(--azul-tinta)}

/* ── avisos: SIN franja de color a la izquierda ──
   La franja de 3-4 px es, según el propio estándar, la señal de «hecho por AI»
   más confiable, y este repo la tenía en `.aviso`, `.exc`, `.mod` y `.aviso2`.
   Se sustituye por lo que un sistema de diseño real usa: fondo teñido al 11 %,
   un icono de estado y el texto. Se distingue igual y no grita plantilla. */
.aviso,.aviso2{display:flex;gap:var(--e3);align-items:flex-start;
  background:var(--ambar-suave);border-radius:var(--r2);padding:var(--e3) var(--e4);
  font-size:var(--t-base);color:var(--marino);margin-bottom:var(--e4);line-height:1.5;max-width:92ch}
.aviso b,.aviso2 b{color:var(--tinta)}
.aviso::before,.aviso2::before{content:"";width:16px;height:16px;flex:none;margin-top:2px;
  background:currentColor;color:var(--ambar-marca);
  -webkit-mask:var(--ic-alerta) center/contain no-repeat;mask:var(--ic-alerta) center/contain no-repeat}
.aviso.malo,.aviso.crit{background:var(--alerta-suave)}
.aviso.malo::before,.aviso.crit::before{color:var(--alerta-marca)}
.aviso.bueno{background:var(--ok-suave)}
.aviso.bueno::before{color:var(--ok-marca);-webkit-mask:var(--ic-ok) center/contain no-repeat;
  mask:var(--ic-ok) center/contain no-repeat}
.aviso.info{background:var(--azul-suave)}
.aviso.info::before{color:var(--azul);-webkit-mask:var(--ic-info) center/contain no-repeat;
  mask:var(--ic-info) center/contain no-repeat}

/* Iconos como máscaras SVG: son datos, no emoji, y toman el color del token. */
:root{
  --ic-alerta:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M12 9v4m0 4h.01"/><path d="M10.3 3.9 2.4 17a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>');
  --ic-ok:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>');
  --ic-info:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5m0-8h.01"/></svg>');
}

/* ───────────────────────────── 5. cifras ───────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:var(--e3);
  margin-bottom:var(--e5)}
.kpi{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  padding:var(--e4);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:var(--e1)}
.kpi .l{font-size:var(--t-mini);color:var(--gris);line-height:1.35;order:1;
  letter-spacing:.02em;text-transform:uppercase;font-weight:650}
.kpi .n{font-size:var(--t-cifra);font-weight:600;letter-spacing:-.035em;line-height:1.05;order:2;
  transition:color var(--transicion)}
.kpi .n small{font-size:var(--t-cuerpo);font-weight:500;color:var(--gris);letter-spacing:0}
.kpi .delta{order:3;display:flex;align-items:center;gap:5px;font-size:var(--t-mini);
  font-family:var(--f-dato);color:var(--gris)}
.kpi .delta.sube{color:var(--ok)} .kpi .delta.baja{color:var(--alerta)}
.kpi .chispa{order:4;margin-top:var(--e1);height:26px}
.kpi .chispa svg{width:100%;height:100%;display:block;overflow:visible}
.kpi.urge .n{color:var(--alerta)}
.kpi.bien .n{color:var(--ok)}
.kpi.tibio .n{color:var(--ambar)}

/* compatibilidad: las variantes de ficha que traían core.html y sistema.html */
.kpis2,.tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:var(--e3);
  margin-bottom:var(--e4)}
.k2,.t1{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  padding:var(--e4);box-shadow:var(--sombra)}
.k2 .v,.t1 .v{font-size:var(--t-titulo);font-weight:600;color:var(--tinta);letter-spacing:-.03em;line-height:1.1}
.k2 .v small,.t1 .v small{font-size:var(--t-base);color:var(--gris);font-weight:500}
.k2 .l,.t1 .l{font-size:var(--t-mini);color:var(--gris);margin-top:var(--e1);line-height:1.35;
  text-transform:uppercase;letter-spacing:.02em;font-weight:650}
.k2.mal .v,.t1.mal .v{color:var(--alerta)}
.k2.ok .v,.t1.ok .v{color:var(--ok)}
.t1.am .v{color:var(--ambar)}

.reloj{font-weight:700}
.reloj.rojo{color:var(--alerta)} .reloj.ambar{color:var(--ambar)} .reloj.verde{color:var(--ok)}

/* ───────────────────────────── 6. tablas ─────────────────────────────
   Una tabla de verdad: encabezado pegajoso, primera columna congelada, orden,
   filtro, columnas conmutables, densidad y exportación. El comportamiento vive
   en core.js; aquí está la forma. */
.tabla-panel{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:var(--e4)}
.tabla-barra{display:flex;align-items:center;gap:var(--e2);padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--linea);flex-wrap:wrap}
.tabla-barra .crece{flex:1;min-width:120px}
.tabla-barra .cuantas{font-family:var(--f-dato);font-size:var(--t-mini);color:var(--gris);white-space:nowrap}

.campo{height:32px;padding:0 10px;border:1px solid var(--linea);border-radius:var(--r1);
  background:var(--papel);color:var(--tinta);font:var(--t-chico)/1 var(--f-ui);width:100%;max-width:280px}
.campo:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}
.campo::placeholder{color:var(--gris-tenue)}
select.campo{max-width:200px;cursor:pointer}
.buscar{width:100%;max-width:420px;height:36px;padding:0 var(--e3);border:1px solid var(--linea);
  border-radius:var(--r1);font:var(--t-cuerpo)/1 var(--f-ui);color:var(--tinta);background:var(--papel)}
.buscar:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)}

.tabla-caja{overflow:auto;max-height:min(72vh,760px)}
table{width:100%;border-collapse:separate;border-spacing:0}
th{text-align:left;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris);font-weight:700;padding:9px var(--e3);background:var(--papel2);
  border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:2;white-space:nowrap}
td{padding:10px var(--e3);border-bottom:1px solid var(--linea);font-size:var(--t-base);
  vertical-align:top;color:var(--marino)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--papel2)}
td.n,th.n,.num{text-align:right;white-space:nowrap}
th.n{text-align:right}
tr.mala td{background:var(--alerta-suave)}
tr.mala:hover td{background:var(--alerta-suave)}

/* primera columna congelada: se lee qué material es aunque la tabla se corra */
.tabla-panel.congela td:first-child,.tabla-panel.congela th:first-child{
  position:sticky;left:0;z-index:1;background:var(--papel)}
.tabla-panel.congela th:first-child{z-index:3;background:var(--papel2)}
.tabla-panel.congela tbody tr:hover td:first-child{background:var(--papel2)}

/* densidad: compacto para quien revisa 200 renglones al día */
.tabla-panel.compacta td{padding:5px var(--e2);font-size:var(--t-chico)}
.tabla-panel.compacta th{padding:6px var(--e2)}

th[data-orden]{cursor:pointer;user-select:none}
th[data-orden]:hover{color:var(--tinta)}
th[data-orden]::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;
  border:4px solid transparent;vertical-align:middle;opacity:0}
th[aria-sort="ascending"]::after{border-bottom-color:var(--azul);opacity:1;margin-bottom:4px}
th[aria-sort="descending"]::after{border-top-color:var(--azul);opacity:1;margin-top:4px}

/* menú de columnas */
.menu{position:absolute;z-index:60;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r2);box-shadow:var(--sombra-alta);padding:var(--e2);min-width:200px;max-height:320px;overflow:auto}
.menu label{display:flex;align-items:center;gap:var(--e2);padding:6px var(--e2);border-radius:var(--r1);
  font-size:var(--t-chico);color:var(--marino);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.menu label:hover{background:var(--papel2)}
.menu .tit{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--gris);
  font-weight:700;padding:var(--e2)}

/* ─────────────────── 7. los tres estados de cada superficie ───────────────────
   Vacío, cargando y error. Es lo que la UI hecha por AI casi siempre omite, y
   lo que separa un sistema de una demostración: el vacío dice POR QUÉ está
   vacío y qué hacer; el error dice qué falló y ofrece reintentar. */
.estado{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2);
  background:var(--papel2);border-radius:var(--r2);padding:var(--e5);max-width:76ch}
.estado .ic{width:24px;height:24px;color:var(--gris-tenue);margin-bottom:var(--e1)}
.estado .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.estado h3{font-size:var(--t-cuerpo);color:var(--tinta)}
.estado p{font-size:var(--t-base);color:var(--gris);line-height:1.55}
.estado .boton{margin-top:var(--e2)}
.estado.error{background:var(--alerta-suave)}
.estado.error .ic{color:var(--alerta-marca)}
.estado.error h3{color:var(--alerta)}
.vacio{color:var(--gris);font-size:var(--t-base);padding:var(--e4) 0;line-height:1.55}

/* Esqueletos, no ruedas girando: la rueda no dice cuánto falta ni qué forma
   tendrá lo que viene. Se apagan solos con prefers-reduced-motion. */
.esq{background:linear-gradient(90deg,var(--papel2) 25%,var(--papel3) 37%,var(--papel2) 63%);
  background-size:400% 100%;animation:esq 1.3s ease-in-out infinite;border-radius:var(--r1);
  height:12px;margin-bottom:var(--e2)}
.esq.t{height:20px;width:38%} .esq.c{height:28px;width:100%} .esq.m{width:70%} .esq.s{width:45%}
@keyframes esq{0%{background-position:100% 50%}100%{background-position:0 50%}}
.esq-tabla{padding:var(--e4)}

/* ───────────────────── 8. botones, toasts y diálogos ───────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--tinta);color:var(--papel);border:1px solid transparent;border-radius:var(--r1);
  padding:0 var(--e4);height:36px;font:600 var(--t-base)/1 var(--f-ui);cursor:pointer;
  transition:background var(--transicion),border-color var(--transicion)}
.boton:hover{background:#16233a;text-decoration:none}
:root[data-tema="oscuro"] .boton{background:var(--azul);color:#08131F}
:root[data-tema="oscuro"] .boton:hover{background:#7FB2FF}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .boton{background:var(--azul);color:#08131F}
  :root:not([data-tema="claro"]) .boton:hover{background:#7FB2FF}}
.boton:disabled{opacity:.45;cursor:default}
.boton.claro{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
.boton.claro:hover{background:var(--papel2);border-color:var(--linea-firme)}
.boton.fantasma{background:transparent;color:var(--gris);border-color:transparent}
.boton.fantasma:hover{background:var(--papel2);color:var(--tinta)}
.boton.peligro{background:var(--alerta);color:#fff}
.boton.peligro:hover{background:#9E2716}
.boton.chico{height:28px;padding:0 10px;font-size:var(--t-mini)}
.boton svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}

/* Toasts: confirmación efímera de lo que pasó. Live region para lector de pantalla. */
.tostadas{position:fixed;right:var(--e5);bottom:var(--e5);z-index:80;display:flex;
  flex-direction:column;gap:var(--e2);max-width:min(380px,90vw)}
.tostada{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r2);
  box-shadow:var(--sombra-alta);padding:var(--e3) var(--e4);display:flex;gap:var(--e3);
  align-items:flex-start;font-size:var(--t-base);color:var(--marino);
  animation:entra var(--transicion) ease-out}
.tostada b{display:block;color:var(--tinta);margin-bottom:2px}
.tostada .pt{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;background:var(--azul)}
.tostada.ok .pt{background:var(--ok-marca)}
.tostada.mal .pt{background:var(--alerta-marca)}
.tostada.tibio .pt{background:var(--ambar-marca)}
.tostada button{margin-left:auto;background:0;border:0;color:var(--gris-tenue);cursor:pointer;
  font-size:16px;line-height:1;padding:2px}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

dialog{border:0;border-radius:var(--r3);padding:0;max-width:560px;width:92vw;
  box-shadow:var(--sombra-alta);background:var(--papel);color:var(--tinta)}
dialog::backdrop{background:rgba(10,16,26,.55);backdrop-filter:blur(2px)}
.dlg{padding:var(--e5)}
.dlg h3{font-size:var(--t-medio);margin-bottom:var(--e2)}
.dlg p{font-size:var(--t-base);color:var(--marino);line-height:1.55}
.dlg .campo{max-width:none;height:38px;margin-top:var(--e3)}
.dlg .pies{display:flex;gap:var(--e2);justify-content:flex-end;margin-top:var(--e5);flex-wrap:wrap}
.dt{padding:var(--e5)}                        /* compat: diálogo de detalle de /core */
.dt h3{font-size:18px;letter-spacing:-.02em}
.dt .cerrar{position:absolute;top:14px;right:16px;background:0;border:0;font-size:22px;
  color:var(--gris);cursor:pointer;line-height:1}

/* ─────────────────── 9. paleta de comandos (Ctrl/Cmd-K) ─────────────────── */
dialog.paleta{max-width:560px;border-radius:var(--r3);padding:0;position:fixed;top:12vh;
  margin-left:auto;margin-right:auto}
.paleta .cja{padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);display:flex;
  align-items:center;gap:var(--e3)}
.paleta .cja svg{width:17px;height:17px;color:var(--gris);stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.paleta input{flex:1;border:0;background:0;font:var(--t-medio)/1.3 var(--f-ui);color:var(--tinta);outline:0}
.paleta input::placeholder{color:var(--gris-tenue)}
.paleta ul{list-style:none;max-height:52vh;overflow:auto;padding:var(--e2)}
.paleta li{display:flex;align-items:center;gap:var(--e3);padding:9px var(--e3);border-radius:var(--r1);
  cursor:pointer;font-size:var(--t-base);color:var(--marino)}
.paleta li[aria-selected="true"]{background:var(--azul-suave);color:var(--azul-tinta)}
.paleta li svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.75}
.paleta li .gr{margin-left:auto;font-size:var(--t-micro);color:var(--gris-tenue);
  text-transform:uppercase;letter-spacing:.1em}
.paleta .nada{padding:var(--e5);color:var(--gris);font-size:var(--t-base);text-align:center}

/* ───────────────────── 10. piezas propias del dominio ───────────────────── */
/* Panorama a 90 días: una barra por semana del horizonte. */
.p90{display:flex;align-items:flex-end;gap:6px;height:150px;padding:var(--e2) 0 0}
.p90 .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:22px}
.p90 .barra{background:var(--azul);border-radius:3px 3px 0 0;min-height:3px;
  transition:height var(--transicion)}
.p90 .col.tarde .barra{background:var(--ambar-marca)}
.p90 .col.rota .barra{background:var(--alerta-marca)}
.p90 .pie{font-family:var(--f-dato);font-size:var(--t-micro);color:var(--gris);text-align:center;
  margin-top:6px;white-space:nowrap}
.leyenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:var(--e3);font-size:var(--t-mini);color:var(--gris)}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda .sw{width:14px;height:8px;display:inline-block;border-radius:2px}
.leyenda .sw.ok{background:var(--azul)}
.leyenda .sw.tarde{background:var(--ambar-marca)}
.leyenda .sw.rota{background:var(--alerta-marca)}

/* Fichas de módulo del mapa del sistema: el estado se dice con un punto y una
   etiqueta, no con una franja de color pegada al borde izquierdo. */
.mod{display:flex;gap:var(--e2);align-items:flex-start;padding:7px var(--e2);border-radius:var(--r1);
  margin-bottom:var(--e1);cursor:pointer;transition:background var(--transicion)}
.mod:hover{background:var(--papel2)}
.mod::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;
  background:var(--gris-tenue)}
.mod.op::before{background:var(--ok-marca)}
.mod.pa::before{background:var(--ambar-marca)}
.mod .n{font-size:var(--t-chico);font-weight:600;color:var(--tinta);line-height:1.3}
.mod .e{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-top:2px;color:var(--gris)}
.mod.op .e{color:var(--ok)} .mod.pa .e{color:var(--ambar)}
.mod .f{font-size:var(--t-micro);color:var(--gris);margin-top:3px}

.huella{font-family:var(--f-dato);font-size:var(--t-mini);color:var(--gris)}

/* Ficha desplegable (contexto, plan por material) */
details.ficha,.plan-det{background:var(--papel);border:1px solid var(--borde-tarjeta);
  border-radius:var(--r2);box-shadow:var(--sombra);margin-bottom:var(--e2);overflow:hidden}
details.ficha>summary,.plan-det>summary{cursor:pointer;list-style:none;padding:var(--e3) var(--e4);
  display:flex;gap:var(--e3);align-items:center;font-weight:600;color:var(--tinta);font-size:var(--t-base)}
details.ficha>summary::-webkit-details-marker,.plan-det>summary::-webkit-details-marker{display:none}
details.ficha>summary:hover,.plan-det>summary:hover{background:var(--papel2)}
details.ficha .tit{font-weight:600;color:var(--tinta);font-size:var(--t-cuerpo);flex:1;line-height:1.35}
details.ficha .sig{color:var(--gris);font-size:17px;line-height:1;transition:transform var(--transicion)}
details.ficha[open] .sig{transform:rotate(45deg)}
details.ficha .cuerpo{padding:0 var(--e4) var(--e4);border-top:1px solid var(--linea)}
details.ficha .cuerpo p{white-space:pre-wrap;font-size:var(--t-cuerpo);line-height:1.6;
  color:var(--marino);margin-top:var(--e3)}
details.ficha .fuente{margin-top:var(--e3);padding-top:9px;border-top:1px solid var(--linea);
  font-size:var(--t-mini);color:var(--gris);display:flex;gap:var(--e3);flex-wrap:wrap}
details.ficha .fuente b{color:var(--marino);font-weight:600}

/* Cita de la regla dentro de una recomendación */
details.cita{margin-top:7px}
details.cita>summary{cursor:pointer;list-style:none;font-size:var(--t-mini);color:var(--azul-tinta);font-weight:600}
details.cita>summary::-webkit-details-marker{display:none}
details.cita>summary:before{content:"+ "}
details.cita[open]>summary:before{content:"– "}
.citac{margin-top:7px;padding:var(--e3);background:var(--papel2);border-radius:var(--r1);font-size:var(--t-chico)}
.citac p{white-space:pre-wrap;margin:5px 0 0;color:var(--marino);line-height:1.5}
.citaf{display:block;margin-top:6px;font-size:var(--t-mini);color:var(--gris)}
.citaf.sin{color:var(--alerta);font-weight:600}

/* Registrar la decisión tomada */
.dec{margin-top:var(--e2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dec button{font:500 var(--t-mini)/1 var(--f-ui);height:26px;padding:0 10px;border:1px solid var(--linea);
  background:var(--papel);border-radius:var(--r1);cursor:pointer;color:var(--marino);
  transition:border-color var(--transicion),color var(--transicion)}
.dec button:hover{border-color:var(--azul);color:var(--azul-tinta)}
.dec button:disabled{opacity:.45;cursor:default}
.decok{font-family:var(--f-dato);font-size:var(--t-mini);color:var(--gris)}
.decok.ok{color:var(--ok);font-weight:600}
.decok.mal{color:var(--alerta);font-weight:600}

.exc{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  box-shadow:var(--sombra);padding:var(--e4) var(--e5);margin-bottom:var(--e2)}
.exc .cab{display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.exc .mat{font-weight:700;color:var(--tinta);font-size:var(--t-cuerpo)}
.exc .reloj{margin-left:auto;font-size:var(--t-chico);font-weight:700;white-space:nowrap}
.exc .reloj.tarde{color:var(--alerta)}
.exc .reloj.pronto{color:var(--ambar)}
.exc .det{font-size:var(--t-cuerpo);color:var(--marino);line-height:1.55}
.exc .pie3{margin-top:11px;padding-top:9px;border-top:1px solid var(--linea);
  display:flex;gap:var(--e4);flex-wrap:wrap;font-size:var(--t-mini);color:var(--gris)}
.exc .pie3 b{color:var(--marino);font-weight:600}
.sinDest{color:var(--alerta);font-weight:600}
.mat{font-weight:650;color:var(--tinta)}
.mat small{display:block;font-weight:400;color:var(--gris);font-size:var(--t-mini);margin-top:2px;
  font-family:var(--f-ui)}
.imp{font-size:var(--t-mini);color:var(--marino);margin-top:3px}
.imp i{font-style:normal;color:var(--gris)}
.neg{color:var(--alerta);font-weight:700}

/* Palancas de sensibilidad y fases del mapa */
.pal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e3);margin-bottom:var(--e2)}
.pal .p{background:var(--papel);border:1px solid var(--borde-tarjeta);border-radius:var(--r2);
  box-shadow:var(--sombra);padding:var(--e4)}
.pal .p h3{font-size:var(--t-cuerpo);color:var(--tinta);margin-bottom:5px}
.pal .p p{font-size:var(--t-chico);color:var(--gris);line-height:1.5}

/* Sólo lectura para lector de pantalla */
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--papel);color:var(--tinta);
  padding:var(--e3) var(--e4);border-radius:var(--r1);box-shadow:var(--sombra-alta)}
.saltar:focus{left:var(--e4);top:var(--e2)}

/* Impresión: el plan se imprime y se lleva a la junta de compras. */
@media print{
  .lateral,.barra-app,.tabla-barra,.utiles,.pie-app .ent{display:none !important}
  .app{display:block} body{background:#fff}
  .tarjeta,.tabla-panel,.kpi{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .tabla-caja{max-height:none;overflow:visible}
  th{position:static}
}

/* ─────────────── 11. identidad y controles de la barra ───────────────
   El papel de quien entró se ve SIEMPRE, no dentro de un menú: sin él, un
   planeador que recibe 403 en /sistema no tiene forma de saber que es su perfil
   y no una falla. Y la salida es explícita: hasta hoy cerrar sesión era cerrar
   el navegador y esperar. */
.lateral .pie2{display:flex;flex-direction:column;gap:var(--e2)}
.yo2{display:flex;align-items:center;gap:var(--e2);min-width:0}
.yo2 .ini{width:28px;height:28px;border-radius:50%;background:var(--azul);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:var(--t-mini);font-weight:700;
  letter-spacing:.02em}
.yo2 .qn{min-width:0}
.yo2 .qn b{display:block;color:#fff;font-size:var(--t-base);font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo2 .qn>span{color:#8FA5C0;font-size:var(--t-mini)}
.lateral .pie2>a{display:inline-flex;align-items:center;gap:6px;color:#8FA5C0;font-size:var(--t-mini);
  margin-top:2px;align-self:flex-start}
.lateral .pie2>a:hover{color:#fff}

/* El botón de tema tiene TRES estados y enseña el que está puesto, no uno fijo.
   Un icono de luna que no cambia deja al usuario adivinando si ya cambió algo. */
.bi-tema svg{display:none}
.bi-tema[data-modo="claro"] .ic-sol,
.bi-tema[data-modo="oscuro"] .ic-luna,
.bi-tema[data-modo="auto"] .ic-auto{display:block}
.bi-idioma{font-family:var(--f-dato);font-size:var(--t-mini);font-weight:700;letter-spacing:.06em}

.barra-app .sello[hidden]{display:none}

/* Un contador con un guion adentro parece un dato que no cargó. El que no tiene
   número no se dibuja: hueco honesto antes que dato falso. */
.mods a .cuenta[hidden],.mods a .cuenta:empty{display:none}

/* ═══════════════════════ 12. gráficas ═══════════════════════
   Los colores de DATO son suyos y viven aquí, no en el script, para que el tema
   los cambie sin tocar código. No se eligieron a ojo: se validaron con el
   comprobador de la casa contra la superficie real de cada tema.

   `--g-serie` en claro es el azul de HJB tal cual (#418CFF pasa las cinco
   comprobaciones sobre blanco). En OSCURO ese mismo azul aclarado se sale de la
   banda de luminosidad —L 0.698 contra un techo de 0.67— y por eso el trazo baja
   a #4E93F2: sigue siendo el azul de la marca y sí pasa. Es la misma lección que
   ya estaba en los tokens de texto: un color correcto como relleno no es
   automáticamente correcto como trazo sobre otra superficie. */
:root{
  --g-serie:#418CFF;          /* la serie: el azul de HJB, validado sobre blanco */
  --g-apoyo:#6E7D8F;          /* el contexto, en gris: patrón de énfasis, no categoría */
  --g-rejilla:#E6EBF1;        /* un paso fuera de la superficie, sólida y de 1px */
  --g-base:#B6C2D0;           /* la línea del cero: más firme que la rejilla */
  --g-eje:#6E7D8F;
  --g-critico:#C0311C;        /* la ruptura. Siempre con etiqueta, nunca sólo color */
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --g-serie:#4E93F2; --g-apoyo:#6D7E92; --g-rejilla:#222E3C;
    --g-base:#3A4A5E; --g-eje:#93A4B8; --g-critico:#FF8571;
  }
}
:root[data-tema="oscuro"]{
  --g-serie:#4E93F2; --g-apoyo:#6D7E92; --g-rejilla:#222E3C;
  --g-base:#3A4A5E; --g-eje:#93A4B8; --g-critico:#FF8571;
}

.graf{position:relative}
.graf svg{display:block;width:100%}
.graf-globo{position:absolute;top:0;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r1);box-shadow:var(--sombra-alta);padding:6px 9px;font-size:var(--t-mini);
  color:var(--marino);pointer-events:none;white-space:nowrap;font-family:var(--f-dato)}
.graf-globo b{display:block;color:var(--tinta);font-family:var(--f-ui);margin-bottom:1px}
.graf-globo[hidden]{display:none}

/* La tabla equivalente de cada gráfica. Va cerrada para no competir con el dibujo,
   y existe siempre: un valor que sólo se alcanza con el ratón no está disponible
   para quien usa lector de pantalla, ni para quien imprime el plan. */
.graf-tabla{margin-top:var(--e2)}
.graf-tabla>summary{cursor:pointer;list-style:none;font-size:var(--t-mini);color:var(--azul-tinta);
  font-weight:600;padding:4px 0}
.graf-tabla>summary::-webkit-details-marker{display:none}
.graf-tabla>summary:before{content:"+ "}
.graf-tabla[open]>summary:before{content:"– "}
.graf-tabla table{margin-top:var(--e2)}
.graf-tabla th{position:static}

/* La chispa dentro de una celda: sin ejes, sin rejilla, sin etiqueta. A ese
   tamaño cualquier adorno tapa el dato. */
td .chispa-celda{display:block;line-height:0}
th.chispa-col{width:110px}

/* Medidor de fase: la pista es un paso más claro del MISMO tono, no un gris
   ajeno, para que el estado se lea a lo largo de toda la barra. */
.medidor{height:5px;border-radius:999px;background:var(--azul-suave);overflow:hidden;margin-top:7px}
.medidor i{display:block;height:100%;background:var(--g-serie);border-radius:999px;
  transition:width var(--transicion)}
.medidor.completo i{background:var(--ok-marca)}