/* ==========================================================================
   MEDSBOARD · TOKENS DE COLOR
   Archivo: MedsBoard_Tokens_Color_2026-08-27_v1.css
   Uso:    pegar al inicio de la hoja de estilos del shell (index.html /
           index_TORRE_NEXT). Cambiar de paleta = cambiar un atributo:
              <html data-tema="torre|marca|teal|ejecutiva|dark">
           Ninguna regla de componente vuelve a llevar un hex literal.
   ==========================================================================

   REGLA DE ORO
   1. Ningún componente escribe un hex. Todo sale de var(--token).
   2. --ok / --warn / --crit están RESERVADOS para estado. Nunca son color
      de serie. Siempre acompañados de texto o icono (nunca color solo).
   3. Series CON orden (FEFO, ABC, cobertura) -> rampa --ramp-1..5.
      Series SIN orden (proveedores, EPS, bodegas) -> --s1..--s4, en orden
      fijo y nunca recicladas. La 5.ª categoría se agrupa en "Otros".
   4. 60 / 30 / 10: fondo y superficies / neutros de texto y línea / acento.
   5. Un solo eje por gráfico. Dos magnitudes distintas = dos gráficos.

   CONTRASTE VERIFICADO (WCAG 2.1, texto sobre --bg)
     tema        --ink/--bg   --ink-2/--bg   --ac/--bg
     torre         17,1:1        4,9:1         8,5:1
     marca         17,7:1        4,8:1        14,3:1
     teal          12,3:1        5,5:1         4,5:1
     ejecutiva     17,0:1        4,6:1         6,4:1
     dark          17,6:1        7,8:1         4,4:1
   Todos cumplen AA (>=4,5:1 texto normal). --ac se usa como texto solo en
   tamaño >=14px o en peso 600.
   ========================================================================== */


/* ---------- Tipografía y forma (comunes a todos los temas) ---------- */
:root{
  --f-ui:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-num:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; /* cifras */
  --r:6px;            /* radio estándar        */
  --r-lg:10px;        /* radio de tarjeta      */
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:0 4px 16px rgba(15,23,42,.10);
}


/* ==========================================================================
   TEMA 1 · TORRE  (el actual — referencia, cero costo de adopción)
   ========================================================================== */
:root,
[data-tema="torre"]{
  --bg:#F8FAFC;          /* lienzo de la app                    */
  --surface:#FFFFFF;     /* tarjetas, tablas, barra superior    */
  --surface-2:#F1F5F9;   /* zebra de tabla, pistas de barra     */
  --line:#E2E8F0;        /* bordes y separadores                */
  --line-fuerte:#CBD5E1; /* borde de control, cabecera de tabla */

  --ink:#0F172A;         /* cifras y títulos                    */
  --ink-2:#5B7085;       /* etiquetas y explicaciones           */
  --ink-3:#8AA0B4;       /* eyebrow, ejes, texto deshabilitado  */

  --nav:#1B3A57;         /* sidebar / barra de módulos          */
  --nav-ink:#E8F0F7;
  --nav-activo:#7FB6D9;  /* subrayado del módulo activo         */
  --head:#12283F;        /* barra superior oscura, tooltips     */

  --ac:#0F4C81;          /* accionable: botón, fila activa      */
  --ac-suave:#E3EDF6;    /* fondo de chip/avatar del acento     */
  --ac-fuerte:#0A3A63;   /* hover del acento                    */

  --ok:#2E7D57;   --ok-bg:#E7F3EC;
  --warn:#C77F0A; --warn-bg:#FDF3E0;
  --crit:#C0392B; --crit-bg:#FBEAE8;
  --info:#0F4C81;

  --s1:#0F4C81; --s2:#12857C; --s3:#C77F0A; --s4:#8E4EC6;   /* series sin orden */
  --ramp-1:#DCE9F4; --ramp-2:#A9C8E3; --ramp-3:#6DA0C9;
  --ramp-4:#2E6FA3; --ramp-5:#0F4C81;                       /* series con orden */
}


/* ==========================================================================
   TEMA 2 · MARCA  (navy + dorado) — identidad corporativa
   El dorado NO es decorativo: marca lo que exige acción.
   ========================================================================== */
[data-tema="marca"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F3F5;
  --line:#E4E7EB; --line-fuerte:#CDD3DA;
  --ink:#111827; --ink-2:#6B7280; --ink-3:#9AA3AF;
  --nav:#0D2B4E; --nav-ink:#DCE6F2; --nav-activo:#F2B705; --head:#0D2B4E;
  --ac:#0D2B4E; --ac-suave:#E7EDF5; --ac-fuerte:#081D36;
  --ok:#16A34A;   --ok-bg:#E8F6ED;
  --warn:#B27C05; --warn-bg:#FBF1DC;   /* dorado oscurecido a AA sobre blanco */
  --crit:#DC2626; --crit-bg:#FBE9E9;
  --info:#0D2B4E;
  --s1:#0D2B4E; --s2:#3E5A78; --s3:#B27C05; --s4:#7E6BA8;
  --ramp-1:#E2E8F0; --ramp-2:#B7C4D4; --ramp-3:#7E93AC;
  --ramp-4:#3E5A78; --ramp-5:#0D2B4E;
}
/* NOTA: el #F2B705 del reel tiene 1,77:1 contra blanco -> NO sirve para texto
   ni para barra pequeña sin etiqueta. Se conserva como --nav-activo (masa
   grande) y se usa #B27C05 cuando el dorado tiene que leerse como dato.     */


/* ==========================================================================
   TEMA 3 · MONOCROMÁTICA TEAL — jerarquía por intensidad, no por tono
   La mejor opción para pantallas densas de inventario/FEFO.
   ========================================================================== */
[data-tema="teal"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#E6F4F3;
  --line:#D3E9E6; --line-fuerte:#B0D8D3;
  --ink:#0D3B39; --ink-2:#4D6F6D; --ink-3:#7FA09D;
  --nav:#0D3B39; --nav-ink:#D7ECE9; --nav-activo:#7ED2CC; --head:#0D3B39;
  --ac:#16857A; --ac-suave:#E6F4F3; --ac-fuerte:#0D3B39;
  --ok:#16857A;   --ok-bg:#E3F3F0;
  --warn:#B27C05; --warn-bg:#FBF1DC;
  --crit:#C0392B; --crit-bg:#FBEAE8;
  --info:#40B3A6;
  --s1:#0D3B39; --s2:#16857A; --s3:#40B3A6; --s4:#7ED2CC;
  --ramp-1:#E6F4F3; --ramp-2:#BEE7E3; --ramp-3:#7ED2CC;
  --ramp-4:#40B3A6; --ramp-5:#16857A;
}
/* NOTA: en monocromática, --ok comparte tono con el acento. Por eso el
   semáforo aquí EXIGE etiqueta de texto: el color solo no distingue.       */


/* ==========================================================================
   TEMA 4 · EJECUTIVA — base clara + grises, azul solo donde hay que mirar
   Es la única cuya paleta de series pasa las 5 pruebas de daltonismo.
   ========================================================================== */
[data-tema="ejecutiva"]{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#E5E7EB;
  --line:#E2E5E9; --line-fuerte:#C6CCD4;
  --ink:#111827; --ink-2:#6B7280; --ink-3:#9CA3AF;
  --nav:#0D1B2A; --nav-ink:#DCE3EC; --nav-activo:#5B8DEF; --head:#111827;
  --ac:#1D4ED8; --ac-suave:#E6EDFD; --ac-fuerte:#16389E;
  --ok:#16A34A;   --ok-bg:#E8F6ED;
  --warn:#B45309; --warn-bg:#FCF0E2;
  --crit:#DC2626; --crit-bg:#FBE9E9;
  --info:#1D4ED8;
  --s1:#1D4ED8; --s2:#0E9F8E; --s3:#D97706; --s4:#A855F7;
  --ramp-1:#E5E7EB; --ramp-2:#C3D3F5; --ramp-3:#93C5FD;
  --ramp-4:#3B6FE0; --ramp-5:#1D4ED8;
}
/* VALIDADO: #1D4ED8,#0E9F8E,#D97706,#A855F7 pasa banda de luminosidad,
   piso de croma, separación CVD (ΔE 13,1 peor par protan) y contraste 3:1. */


/* ==========================================================================
   TEMA 5 · DARK PREMIUM — pantalla de sala / turno noche
   ========================================================================== */
[data-tema="dark"]{
  --bg:#0D1117; --surface:#141A23; --surface-2:#1B212C;
  --line:#2A313C; --line-fuerte:#3A424F;
  --ink:#F5F7FA; --ink-2:#A1A7B3; --ink-3:#767D8A;
  --nav:#0A0E14; --nav-ink:#CDD3DE; --nav-activo:#7C5CFF; --head:#0A0E14;
  --ac:#7C5CFF; --ac-suave:#1E1B36; --ac-fuerte:#9B84FF;
  --ok:#22C55E;   --ok-bg:#12281A;
  --warn:#F0A62B; --warn-bg:#2C2110;
  --crit:#EF4444; --crit-bg:#2C1414;
  --info:#2D8CFF;
  --s1:#7C5CFF; --s2:#2D8CFF; --s3:#F0A62B; --s4:#22C55E;
  --ramp-1:#232B3A; --ramp-2:#33406B; --ramp-3:#4A56A8;
  --ramp-4:#6249DB; --ramp-5:#7C5CFF;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 6px 24px rgba(0,0,0,.55);
}
/* NOTA: en oscuro --s4 (verde) coincide con --ok. Si un gráfico de series
   convive con semáforo en la misma tarjeta, usar solo --s1..--s3.          */


/* ==========================================================================
   COMPONENTES BASE — copiar tal cual; ya no llevan hex
   ========================================================================== */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Toda cifra va en la familia mono y con cifras tabulares: las columnas
   de valores quedan alineadas dígito a dígito. Innegociable en un ERP.   */
.num, td.n, .cifra, table.grid td.n{
  font-family:var(--f-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

/* Píldora de estado: color + texto. Nunca color solo. */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-num); font-size:10px; font-weight:600;
  padding:2px 7px; border-radius:99px;
}
.pill::before{content:"●"; font-size:8px; line-height:1}
.pill.ok  {background:var(--ok-bg);   color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit)}

/* Rejilla densa tipo Mantis */
table.grid{width:100%; border-collapse:collapse; font-size:12px}
table.grid th{
  text-align:left; font-family:var(--f-num); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:7px 10px;
  border-bottom:1px solid var(--line-fuerte);
  position:sticky; top:0; background:var(--surface); z-index:1;
}
table.grid td{padding:9px 10px; border-bottom:1px solid var(--line)}
table.grid tbody tr:nth-child(even){background:var(--surface-2)}
table.grid tbody tr:hover{box-shadow:inset 2px 0 0 var(--ac)}
table.grid td.n{text-align:right; white-space:nowrap}

/* Botón primario */
.btn{
  font-family:var(--f-ui); font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:var(--r); cursor:pointer;
  background:var(--ac); color:#fff; border:1px solid var(--ac);
}
.btn:hover{background:var(--ac-fuerte); border-color:var(--ac-fuerte)}
.btn.sec{background:var(--surface); color:var(--ink); border-color:var(--line-fuerte)}
.btn:focus-visible{outline:2px solid var(--ac); outline-offset:2px}

@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}