:root{
  color-scheme: light;
  /* Paleta de producto (verde pino, apta SaaS). Marca = verde; acento = esmeralda para lo interactivo. */
  --brand:#1d5a45; --brand2:#236b53; --brand-ink:#164636;
  /* Colores de TEXTO: todos ≥4.5:1 sobre los tres fondos claros (#fff, --bg #f5f7f5 y
     --brand-bg #f4f8f5 de las tarjetas). El acento además se usa como fondo con texto blanco
     (.mr-open, .prail a.on): al oscurecerlo, esa combinación pasa de 3,23:1 a 5,14:1. */
  --accent:#0a7d58; --gold:#0a7d58;            /* --gold = alias del esmeralda (acento) */
  --pos:#0b7a44; --warn:#8a5f00; --neg:#b93a26; --blue:#2563eb;
  --pos-bright:#0f9d58; --warn-bright:#f5a623; --neg-bright:#ef6f53;
  --pos-bg:#e6f5ea; --warn-bg:#fdf3e0; --neg-bg:#fdece9; --accent-bg:#e3f5ee; --brand-bg:#eef4f1;
  --ink:#16211c; --muted:#5a6862; --line:#e4e9e6; --line-soft:#eef2f0;
  --bg:#f5f7f5; --card:#ffffff;
  /* ---- Paleta de ESTADO (rellenos que llevan texto blanco encima) -------------------------------
     Esta paleta existía escrita a mano en cinco listas de JavaScript y nunca se había declarado; era
     la "segunda paleta" del diagnóstico. NO es un duplicado de los colores de texto de arriba: son
     FONDOS de los chips de estado y prioridad (.pk-chip lleva color:#fff sobre ellos).
     Por eso el mínimo acá es 4,5:1 CONTRA BLANCO, no contra el fondo de la página.
     Cuatro no llegaban y se oscurecieron; el contraste medido va al lado:
       --st-idea      era #8a8f98  2,64-3,25:1 (el gris servía para "idea" y "archivado" a la vez)
       --st-espera    era #c98a3a  2,92:1  <- el peor caso que reportó la auditoría de diseño
       --st-baja      era #6b8f71  3,63:1
       --st-archivado era #9aa0a6  2,64:1  <- el peor de todos, no estaba reportado
     A "archivado" se le dio un gris más oscuro que a "idea" a propósito: los dos originales eran casi
     el mismo gris y quedaban indistinguibles al corregirlos. */
  --st-idea:#72777f;        /* 4,51:1 — idea, por hacer            */
  --st-espera:#9e6c2e;      /* 4,53:1 — pausado, en curso, media   */
  --st-activo:#1d7a4d;      /* 5,33:1 — activo, hecha, publicado   */
  --st-hecho:#325a9b;       /* 6,84:1 — hecho, aprobado            */
  --st-revision:#8f3550;    /* 7,52:1 — en revisión                */
  --st-alta:#b3261e;        /* 6,54:1 — prioridad alta, bloqueada  */
  --st-baja:#5c7b62;        /* 4,70:1 — prioridad baja             */
  --st-archivado:#5f6368;   /* 6,17:1 — archivado                  */
  /* ---- Paleta de SERIES de gráfico: NO está acá, y es a propósito ------------------------------
     Acá vivieron --gr-1..9 (azul, verde, ámbar, apagados) durante un rato, y eran la SEGUNDA paleta
     de series: en 99-arranque.js ya estaba CPAL, la serie categórica muestreada del anillo del logo,
     con SERCOL (color estable por servicio) y CRAMP (rampa de una sola tinta).

     Se resolvió a favor de CPAL y estos tokens se borraron, por un motivo que no era estético: el
     color se asignaba por POSICIÓN en el arreglo, así que el mismo servicio salía de un color en el
     Resumen y de otro en Margen o en Reclamos, y para cruzar dos gráficos había que releer las dos
     leyendas. Con SERCOL el color se pide por servicio y eso no puede volver a pasar.

     Las series viven en JavaScript y no como tokens porque Chart.js no entiende var(): los colores
     hay que resolverlos a un valor concreto igual. Lo que se necesita de un token —un solo lugar
     donde cambiarlo— lo dan CPAL y SERCOL. */
  /* ANCHO DE LA BARRA DE SECCIONES. Vive acá y no en .side porque lo usan DOS lugares: la barra misma
     (03-navegacion.css) y el hueco que le reserva la marca en el encabezado (02-encabezado.css), que es
     lo que hace que la costura vertical entre la barra y el contenido se continúe hacia arriba.
     Si el número estuviera escrito en los dos, el día que la barra cambie de ancho el encabezado se
     desalinea y nadie va a saber por qué — el pedido de Matías del 10/08 fue exactamente que la guardia
     arranque donde arranca la pregunta de Inicio. */
  --sidew:236px;
  --r:10px; --r-sm:8px; --r-pill:999px;
  --shadow:none;
  --shadow-pop:0 8px 22px rgba(21,29,44,.18);
  /* ---- Escala de espaciado ----------------------------------------------------------------
     PARA CÓDIGO NUEVO: al agregar gap/padding/margin, tomar un valor de acá en vez de inventar
     un número. El CSS existente quedó con 59 combinaciones ad-hoc (553 usos, 69% en estilos
     inline dentro de strings JS); no se reescribió porque no había ningún problema visible y el
     barrido tocaba todas las pantallas a cambio de nada. La escala frena que el ad-hoc crezca.
     Los pasos salen de los valores que el tablero YA usa más (6, 8, 10, 4…), no de una grilla
     de 4px teórica: mantienen la densidad actual en vez de airear todo. */
  --sp-1:2px;  --sp-2:4px;  --sp-3:6px;   --sp-4:8px;   --sp-5:10px;  --sp-6:12px;
  --sp-7:16px; --sp-8:20px; --sp-9:24px;  --sp-10:32px; --sp-11:40px;
}
/* Cifras tabulares: las columnas de números dejan de bailar */
.kpi .val,.sem .sv,.tk-val,.tk-d,table th,table td,.barrow .tr,.verdict .vtx b{font-variant-numeric:tabular-nums lining-nums}
/* Prosa con más aire */
.story,.insight,.note,.kpi .khint,.sem .sd,.legend{line-height:1.55}
/* Ancho del tablero. Antes estaba clavado en 1180px y en un monitor de 1920 se perdía el 38% de la
   pantalla. Ahora la caja se estira hasta 1520px, PERO los bloques de texto corrido (.story,
   .insight, .note, .legend) se limitan aparte: una línea de 150 caracteres es incómoda de leer.
   Grillas, tablas y gráficos sí aprovechan todo el ancho, que es donde el espacio rinde. */
:root{--maxw:1520px}
*{box-sizing:border-box}
/* Foco visible para quien navega con teclado. :focus-visible solo se activa con teclado, así que
   no aparece al hacer clic con el mouse ni al tocar en el celular: no ensucia el uso normal.
   Sobre el header verde oscuro el anillo va blanco, porque el acento no se vería. */