/* Q-Ver — tokens de diseño (canon 2026-08-27, derivado del Reporte Ejecutivo S34 aprobado por Adán).
   NO edites valores aquí en piezas: incluye este archivo tal cual. Un solo tema claro para HTML compartido. */
:root{
  --rojo:#C4152F;      /* ÚNICO acento: eyebrows, una palabra del titular, barra de cita, numeración, pie */
  --rojo-soft:#FBEDEF;
  --pizarra:#40544E;   /* el "VER" del wordmark; uso muy contenido */
  --tinta:#262626;     /* titulares */
  --cuerpo:#58585B;    /* texto */
  --apagado:#8A8A8D;   /* notas, pies */
  --hairline:#E4E4E4;  /* separadores; nunca cajas con sombra */
  --sunk:#F7F7F7; --surface:#FCFCFB; --fondo:#FFFFFF;
  /* SEMÁFORO DE DATO (Adán 7-oct-2026): verde = bien / en meta · amarillo = atención / por cerrar · rojo = mal / vencido / bajo meta.
     El rojo de marca (--rojo) NUNCA pinta datos: ni barras, ni series, ni cifras, ni filas. Dato sin juicio = --dato. */
  --ok:#16A34A; --warn:#EAB308; --bad:#DC2626; --good:var(--ok);
  --ok-soft:#86EFAC; --warn-soft:#FDE047; --bad-soft:#FCA5A5; --dato:#40544E;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fs-eyebrow:10.5px; --ls-eyebrow:.22em;
  --fs-titular:28px; --lh-titular:1.1; --ls-titular:-.03em;
  --fs-cuerpo:12.5px; --fs-nota:10px; --fs-cifra:16px;
}
html{background:var(--fondo)}body{margin:0;font-family:var(--sans);color:var(--cuerpo);font-size:var(--fs-cuerpo);line-height:1.55;font-variant-numeric:tabular-nums}
.eyebrow{color:var(--rojo);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);font-weight:700}
h1,.titular{color:var(--tinta);font-weight:800;font-size:var(--fs-titular);line-height:var(--lh-titular);letter-spacing:var(--ls-titular);margin:.2em 0 .4em;text-wrap:balance}
h1 em,.titular em{color:var(--rojo);font-style:normal}
.intro{color:var(--cuerpo);font-size:var(--fs-cuerpo);max-width:72ch}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0}
.tarjeta{padding:12px 16px;border-left:1px solid var(--hairline)}.tarjeta:first-child{border-left:0}
.tarjeta .num{color:var(--rojo);font-family:var(--mono);font-weight:700;font-size:var(--fs-nota)}
.tarjeta .label{text-transform:uppercase;font-weight:700;font-size:var(--fs-nota);letter-spacing:.13em;color:var(--tinta)}
.cifra{font-family:var(--mono);font-size:var(--fs-cifra);color:var(--tinta)}
.cita{border-left:3px solid var(--rojo);padding:6px 14px;color:var(--tinta);font-size:13px}
.pie{color:var(--apagado);font-size:var(--fs-nota);border-top:1px solid var(--hairline);padding-top:8px;margin-top:24px}
.pie b{color:var(--rojo)}
.wordmark{font-weight:800;letter-spacing:-.045em}.wordmark .q{color:var(--rojo)}.wordmark .ver{color:var(--pizarra)}
/* semáforo: texto .s-* · relleno (barra, punto, svg) .f-* · umbral de avance de meta: ≥90% ok · 60–89% warn · <60% bad */
.s-ok{color:var(--ok)}.s-warn{color:var(--warn)}.s-bad{color:var(--bad)}
.f-ok{background:var(--ok);fill:var(--ok)}.f-warn{background:var(--warn);fill:var(--warn)}.f-bad{background:var(--bad);fill:var(--bad)}.f-dato{background:var(--dato);fill:var(--dato)}
table.datos{border-collapse:collapse;width:100%}table.datos th{font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.13em;color:var(--apagado);text-align:left;border-bottom:1px solid var(--hairline);padding:6px 8px}table.datos td{padding:6px 8px;border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums}
