/* ═══════════════════════════════════════════════════════════════════════════
   ÁMBAR · BASE COMPARTIDA — la cargan el LIS y el Tablero
   ───────────────────────────────────────────────────────────────────────────
   ESTE ARCHIVO ES LA ÚNICA FUENTE DE VERDAD de la tipografía y de la paleta.
   Antes estaban duplicadas —el LIS acá y el Tablero en su tokens.css— y una
   duplicación así ya costó cara: --ok y --ink estuvieron declarados dos veces
   dentro del propio styles.css y el valor viejo ganaba en silencio; el verde
   del «validado» no cumplía AA y nadie se enteró (ADR-017).
   Si agregás un color, va acá, y con su contraste medido.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --font:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-num:  'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  /* La escala de línea. Explícita a propósito: ver el seguro de más abajo. */
  --lh-tight:  1.25;   /* filas de tabla, etiquetas, celdas densas */
  --lh-base:   1.5;    /* texto corrido */
  --lh-title:  1.15;   /* títulos */

  /* ── ESCALA TIPOGRÁFICA ──────────────────────────────────────────────────
     11 · 12 · 13 · 15 · 18 · 22 · 28 · 38. Estaba escrita en
     01-sistema-de-diseno.md desde el principio y NO existía como token: cada
     pantalla eligió su tamaño a ojo. Nombrada por USO, no por número, para que
     al escribir una regla se elija qué es la cosa y no cuántos píxeles mide. */
  --fs-micro:  11px;   /* versalitas de sección, pie de tarjeta   */
  --fs-mini:   12px;   /* badge, subtítulo de dato                */
  --fs-dato:   13px;   /* celda de tabla, chip                    */
  --fs-base:   15px;   /* texto de interfaz, ítem de navegación   */
  --fs-lead:   18px;   /* bajada, título de tarjeta               */
  --fs-titulo: 22px;   /* título de panel                         */
  --fs-cifra:  28px;   /* la cifra de una tarjeta de métrica      */
  --fs-heroe:  38px;   /* el número que manda en la pantalla      */

  /* ── RADIOS ──────────────────────────────────────────────────────────────
     Tres, y se eligen por el TAMAÑO de la caja: un radio fijo en cajas de
     distinto porte se ve distinto en cada una. Hoy conviven 7·8·9·10·12·14·20
     sin criterio; los nuevos usan estos y lo viejo se migra al tocarlo. */
  --r-ctl:    5px;     /* control: botón, input, chip  */
  --r-card:   9px;     /* tarjeta                      */
  --r-panel: 14px;     /* panel, modal                 */
  --r-pill: 999px;     /* pill                         */

  /* ── MOVIMIENTO ──────────────────────────────────────────────────────────
     «La animación tiene una sola tarea: decir que algo pasó y dónde.»
     Cuatro tiempos por lo que se mueve, no por lo que se ve lindo. */
  --d-fast:  120ms;    /* respuesta al dedo: hover, foco           */
  --d-base:  190ms;    /* cambio de estado: activo, chip, badge    */
  --d-slow:  290ms;    /* panel que entra o sale                   */
  --d-lazy:  480ms;    /* magnitud: la barra, el punto del rango   */
  --e-base:   cubic-bezier(.2,.8,.25,1);    /* curva de todo       */
  --e-resorte:cubic-bezier(.34,1.4,.64,1);  /* sólo lo que aterriza*/
}

/* El movimiento es información, no adorno: quien pidió menos movimiento
   igual tiene que ver el cambio de estado, así que se apaga el tiempo, no
   la regla. Un solo lugar en vez de un `prefers-reduced-motion` por archivo. */
@media (prefers-reduced-motion: reduce){
  :root{ --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-lazy:0ms; }
}

@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/geist-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/geist-600.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/geist-700.woff2') format('woff2')}

@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/geist-mono-500.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/geist-mono-600.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/geist-mono-700.woff2') format('woff2')}

:root{
  --paper:#FBF9F5; --surface:#FFFFFF; --surface-2:#F4F1EA; --surface-3:#EAE5DA;
  --hairline:#E3DDD0; --border-control:#8A8170;
  --ink:#17150F; --ink-2:#57503F; --ink-3:#5E5748;

  /* Tinta que va sobre un RELLENO de color, no sobre el papel: el texto del
     botón primario, de la topbar, de la solapa activa, del hero. Son 46 usos
     que hasta el 13-ago-2026 eran un `#fff` suelto y quedaron mapeados a
     --surface, que es un FONDO: el nombre decía «esta superficie es blanca»
     cuando lo que había era tinta sobre teal.
     NO lo redefine el tema oscuro, y es a propósito: su fondo tampoco cambia
     —el relleno sale de --teal / --petrol / --coral, que son del :root viejo y
     no tienen variante oscura—. El día que el relleno se invierta, esta línea
     se invierte con él; antes no. */
  --ink-on-fill:#FFFFFF;

  --brand:#8A5206;      /* 6.07:1 sobre papel · sólo cromo y marca */
  --brand-hi:#A05E0A;   /* hover del primario · texto blanco 5.12:1 */
  --brand-wash:#FBF0DC;

  --alto:#A5440A;  /* 5.82:1 */
  --bajo:#0B5C93;  /* 6.73:1 */
  --crit:#A31712;  /* 7.43:1 */
  /* El wash que a la paleta le faltaba. Es de la ALARMA, no de la decoración:
     lo llevan las 8 cosas que significan «el laboratorio puede entregar un
     resultado malo» — equipo caído, estufa fuera de rango, el corte CLSI que
     no coincide, un insumo vencido. El rojo hoy no falla porque las alarmas lo
     usen: falla porque lo usaban 13 cosas que NO son alarmas (ADR-014). */
  --crit-wash:#F7DCD8;  /* --crit encima: 6.02:1 · ΔE 11.5 del papel */
  --ok:#1F6B4A;    /* 6.13:1 */
  --focus:#0B5C93;
  /* «normal» no lleva token: no se pinta */

  /* ESTADO DE UN PROCESO — gris, nunca color (ADR-011). El color de arriba es
     del RESULTADO; gastarlo en «esta orden está ingresada» es gastarlo.
     El avance va en PESO, no en tono: los neutros de Ámbar son todos tonos de
     papel y una rampa por luminosidad deja los pasos a ΔE 2-3, invisibles.
     A → B es ΔE 48, y el relleno está a ΔE 19-32 de alto/bajo/crit/brand. */
  --proc-bg:#E4DED0;   --proc-tx:#57503F;      /* A · abierto      5.97:1 */
  --proc-fill:#57503F; --proc-fill-tx:#FBF9F5; /* B · esperando    7.61:1 */
  --proc-off:#5E5748;                          /* C · cerrado      6.81:1 */

  /* CROMO — hovers, chips, contenedores, selección. No significa nada clínico,
     así que NO lleva color: es superficie tintada y nada más (ΔE 4.5-11 de los
     tres washes de resultado, así que no se confunde con ninguno).
     🚨 La marca acá va como BORDE y TEXTO, nunca como relleno: --brand-wash y
     el chip de «alto» (--hi-bg) están a ΔE 0.6 y --brand con --hi-tx a ΔE 1.6.
     No es una tensión, es una colisión: un chip ámbar plano de «seleccionado»
     ES, píxel por píxel, un chip de «alto». Los separa el TRATAMIENTO. */
  --chrome-bg:#EEEAE0;                         /* superficie interactiva */
  --chrome-bg-hi:#D9D2C0;                      /* un paso más: hover de lo tintado */
  --chrome-sel-bd:#8A5206;                     /* seleccionado: la marca, en el borde */
  --chrome-sel-tx:#7A4805;                     /* y en el texto — 7.16:1 sobre el relleno */

  --sombra-1:0 1px 2px rgba(62,34,2,.07);
  --sombra-2:0 8px 24px rgba(62,34,2,.10);
  --sombra-3:0 24px 60px rgba(62,34,2,.16);
}

/* `bio` hereda también este bloque: acá viven --chrome-bg, --proc-* y los demás
   que el contrato de 40 todavía no cubre. Sin esto quedaban en su valor CLARO
   sobre papel oscuro — el chip «N alterados» daba 1,59:1, ilegible. */
[data-skin="guardia"], [data-skin="bio"]{
  --paper:#14110B; --surface:#1D1912; --surface-2:#262118; --surface-3:#2F291D;
  --hairline:#332C1E; --border-control:#6B6250;
  --ink:#F5EFE3; --ink-2:#B5AB96; --ink-3:#9C9280;
  --brand:#E8A93C; --brand-hi:#F3BE5E; --brand-wash:#2A2113;
  --alto:#F0A44A; --bajo:#5FB4EE; --crit:#FF7C7C; --crit-wash:#3A1512; --ok:#57C98F; --focus:#7BC2F0;
  --proc-bg:#332C1E;   --proc-tx:#B5AB96;      /* 6.34:1 */
  --chrome-bg:#272115; --chrome-bg-hi:#443B28;
  --chrome-sel-bd:#E8A93C; --chrome-sel-tx:#E8A93C;
  --proc-fill:#B5AB96; --proc-fill-tx:#14110B; /* 8.28:1 */
  --proc-off:#9C9280;                          /* 6.13:1 */
}

/* ── piel guardia · completada por herramientas/tokenizar/piel_oscura.py ──
   Cada valor está medido contra el papel oscuro #14110B: 4.5:1 si es tinta
   (WCAG 1.4.3), 3:1 si es relleno o borde (1.4.11). Los que ya servían se
   declaran igual, con su medición: un token sin declarar no se distingue de
   uno olvidado. */
/* `html[data-skin]` y no `[data-skin]` a secas: este último empata en
   especificidad con `:root` (los dos 0-1-0) y ahí gana EL ÚLTIMO del
   documento — y styles.css carga DESPUÉS que este archivo. Con eso, todo
   token que el :root viejo re-declare (--muted, --hi-bg, --hi-tx, --lo-tx,
   --mint) se quedaba en su valor claro con la piel puesta. Un punto más de
   especificidad y el orden deja de importar. */
/* `bio` también: sin esto los ~90 tokens viejos —los que todavía no entraron al
   contrato— caían a su valor CLARO sobre el papel oscuro y dejaban 83 textos por
   debajo de AA en la pantalla de Validación. Los valores se derivaron contra el
   papel marrón de `guardia`, no contra el verde de `bio`: sirven de piso, y lo
   que quede corto se corrige medido, abajo. */
html[data-skin="guardia"], html[data-skin="bio"]{
  --aisl-add-atb:#2d3537;   /* #c4d3d6 → 12.48:1 · relleno */
  --area-nom:#1a9199;   /* #147076 → 4.63:1 · tinta */
  --area-sub:#8d8172;   /* #6b6257 → 4.60:1 · tinta */
  --atb-auto:#2697ad;   /* #1f7a8c → 4.65:1 · tinta */
  --atb-warn:#e15d56;   /* #d9342b → 4.55:1 · tinta */
  --aviso-dni:#615331;   /* #e2c98a → 24.49:1 · relleno */
  --aviso-revisar:#b27500;   /* #6b4600 → 4.53:1 · tinta */
  --bio-by-bioquimic:#271b14;   /* #f3ddd0 → 7.34:1 · relleno */
  --bio-by-tecnico:#2a301d;   /* #dfe9c8 → 13.01:1 · relleno */
  --btn:#643e35;   /* #cf6a50 → 23.20:1 · relleno */
  --btn-all:#444e55;   /* #2b3841 → 20.58:1 · relleno */
  --c-bd-03:#34382d;   /* #cfd7c2 → 12.97:1 · relleno */
  --c-bd-04:#25271f;   /* #dfe4d4 → 7.54:1 · relleno */
  --c-bd-06:#243830;   /* #bfe3d5 → 15.90:1 · relleno */
  --c-bd-07:#232c2c;   /* #cfe0e0 → 10.23:1 · relleno */
  --c-bd-08:#3d2323;   /* #e7b7b7 → 15.37:1 · relleno */
  --c-bd-09:#341717;   /* #f3c0c0 → 15.49:1 · relleno */
  --c-bd-10:#3c311c;   /* #f0dcb6 → 13.32:1 · relleno */
  --c-bd-13:#675332;   /* #e0b878 → 25.21:1 · relleno */
  --c-bd-14:#241f17;   /* #eee5d5 → 5.02:1 · relleno */
  --c-bd-15:#15191a;   /* #e3ebec → 5.35:1 · relleno */
  --c-bd-17:#6a532f;   /* #e0a955 → 25.98:1 · relleno */
  --c-bd-28:#685f31;   /* #d9c14a → 28.87:1 · relleno */
  --c-bd-30:#1b2632;   /* #c3d8ee → 12.65:1 · relleno */
  --c-bg-02:#2c6d6d;   /* #16a3a3 → 32.92:1 · relleno */
  --c-bg-03:#375b62;   /* #13343a → 26.29:1 · relleno */
  --c-bg-04:#693c30;   /* #e07a5f → 24.52:1 · relleno */
  --c-bg-09:#6c522d;   /* #b9791c → 26.31:1 · relleno */
  --c-tx-01:#454e54;   /* #36454f → 20.38:1 · relleno */
  --c-tx-02:#d7594c;   /* #c0392b → 4.52:1 · tinta */
  --c-tx-10:#998766;   /* #8a7a5c → 4.58:1 · tinta */
  --c-tx-12:#db9393;   /* #8c2f2f → 4.53:1 · tinta */
  --c-tx-14:#b5735f;   /* #b06a55 → 4.65:1 · tinta */
  --c-tx-15:#dc9494;   /* #b53b3b → 4.58:1 · tinta */
  --c-tx-20:#8b8173;   /* #3a3630 → 4.57:1 · tinta */
  --c-tx-21:#71868c;   /* #3a4548 → 4.58:1 · tinta */
  --c-tx-25:#7a895e;   /* #75835a → 4.64:1 · tinta */
  --c-tx-27:#6a888a;   /* #2e3b3c → 4.58:1 · tinta */
  --c-tx-33:#d25e5e;   /* #7a2222 → 4.59:1 · tinta */
  --c-tx-37:#83837a;   /* #7b7b73 → 4.58:1 · tinta */
  --c-tx-44:#c26969;   /* #b64c4c → 4.60:1 · tinta */
  --c-tx-49:#828294;   /* #667 → 4.64:1 · tinta */
  --c-tx-50:#849d55;   /* #5a6b3a → 4.51:1 · tinta */
  --c-tx-51:#cc6b44;   /* #9a4a2a → 4.59:1 · tinta */
  --c-x-01:#828282;   /* #000 → 4.55:1 · tinta */
  --chip-micro:#6a512a;   /* #f0c27a → 26.06:1 · relleno */
  --ec-sena:#8b76cf;   /* #5b3fb5 → 4.66:1 · tinta */
  --eq-alerta:#6a582f;   /* #e0b34a → 27.16:1 · relleno */
  --gram-x:#4e2d2d;   /* #e0a3a3 → 19.11:1 · relleno */
  --hi-bg:#1e170c;   /* #FAEEDA → 4.21:1 · relleno */
  --hi-tx:#c77610;   /* #854F0B → 4.59:1 · tinta */
  --hoy-bajo:#2a85e0;   /* #185fa5 → 4.61:1 · tinta */
  --hoy-bajo-wash:#091015;   /* #e6f1fb → 6.70:1 · relleno */
  --hoy-bajo-wash-2:#071218;   /* #f4fbff → 8.12:1 · relleno */
  --hoy-bajo-wash-3:#0e1719;   /* #e1f0f5 → 7.07:1 · relleno */
  --hoy-brand:#be7110;   /* #854f0b → 4.63:1 · tinta */
  --hoy-brand-wash:#1a1208;   /* #fff3e0 → 3.29:1 · relleno */
  --hoy-brand-wash-2:#1f1a0b;   /* #fdf3d7 → 5.60:1 · relleno */
  --hoy-brand-wash-3:#19160a;   /* #fbf6e0 → 3.39:1 · relleno */
  --hoy-brand-wash-4:#2a2418;   /* #efe4cd → 7.42:1 · relleno */
  --hoy-crit:#db5640;   /* #a5321f → 4.51:1 · tinta */
  --hoy-crit-wash:#160808;   /* #fdecec → 6.56:1 · relleno */
  --hoy-crit-wash-2:#160909;   /* #fce4e4 → 6.27:1 · relleno */
  --hoy-ok:#159676;   /* #0f6e56 → 4.71:1 · tinta */
  --hoy-ok-wash:#0c1212;   /* #eef7f7 → 4.84:1 · relleno */
  --hoy-ok-wash-2:#0e1916;   /* #e1f5ee → 7.75:1 · relleno */
  --hoy-ok-wash-3:#0d1515;   /* #e6f6f6 → 5.92:1 · relleno */
  --lm-none:#ba7000;   /* #b06a00 → 4.50:1 · tinta */
  --lo-bg:#091015;   /* #E6F1FB → 6.70:1 · relleno */
  --lo-tx:#2a85e0;   /* #185FA5 → 4.61:1 · tinta */
  --mint:#1a1b15;   /* #EAEDE1 → 3.96:1 · relleno */
  --mol:#976fc6;   /* #6b3fa0 → 4.50:1 · tinta */
  --mol-line:#39234d;   /* #c9a0ee → 24.40:1 · relleno */
  --mol-wash:#0b0718;   /* #efeaff → 11.45:1 · relleno */
  --muted:#91897b;   /* #8C8475 → 4.62:1 · tinta */
  --nm-bg:#0e1916;   /* #E1F5EE → 7.75:1 · relleno */
  --nm-tx:#159676;   /* #0F6E56 → 4.71:1 · tinta */
  --of-field:#673832;   /* #e0857a → 24.43:1 · relleno */
  --of-sec:#129494;   /* #0f7d7d → 4.74:1 · tinta */
  --pill:#070c18;   /* #eaf0ff → 9.55:1 · relleno */
  --pm-cond-h:#b37500;   /* #8a5a00 → 4.55:1 · tinta */
  --pm-cond-proc:#9c8049;   /* #5a4a2a → 4.66:1 · tinta */
  --pr-tag:#a67b4d;   /* #8a6640 → 4.63:1 · tinta */
  --rt-mes:#e85a50;   /* #b42318 → 4.64:1 · tinta */
  --rt-temp:#222222;   /* #ddd → 5.85:1 · relleno */
  --sicobio-pop:#e0670b;   /* #b45309 → 4.66:1 · tinta */
  --track:#111313;   /* #ECEEEE → 3.59:1 · relleno */
  --vc-card:#6c522d;   /* #d98c1f → 26.31:1 · relleno */
  --vh-alts:#4f4026;   /* #eacf9f → 18.45:1 · relleno */
  --vres:#273749;   /* #a8c6e6 → 17.72:1 · relleno */
  --warn:#c76954;   /* #C25B45 → 4.65:1 · tinta */
  --wh-fig:#89816f;   /* #6a6456 → 4.53:1 · tinta */
  --wl-p:#0f0a15;   /* #f4eefb → 8.90:1 · relleno */
  --zone:#2d5145;   /* #9FE1CB → 24.15:1 · relleno */
  --btn-env:#a49c8d;   /* sirve igual · 5.08:1 · tinta */
  --c-sh-01:#d69a3e;   /* sirve igual · 7.13:1 · tinta */
  --c-sh-02:#6c9bd2;   /* sirve igual · 6.05:1 · tinta */
  --c-tx-07:#9a9388;   /* sirve igual · 5.75:1 · tinta */
  --c-tx-09:#1f9d57;   /* sirve igual · 5.02:1 · tinta */
  --c-tx-23:#6b8a8f;   /* sirve igual · 4.71:1 · tinta */
  --c-tx-43:#8a7ba8;   /* sirve igual · 4.57:1 · tinta */
  --nav-group:#9da890;   /* sirve igual · 7.03:1 · tinta */
  --sidebar:#bec7b1;   /* sirve igual · 9.99:1 · tinta */
  --vprev:#c4bdb0;   /* sirve igual · 9.38:1 · tinta */
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS TRES PIELES · el contrato de tokens

   «La misma pantalla, tres pieles. El marcado HTML es idéntico en las tres: lo
   único que cambia es la capa de tokens.» Eso obliga a que la piel sea un
   contrato CERRADO —estos 40 nombres y ningún otro— y a que ninguna regla de
   componente traiga un color propio.

     · mesada  — papel cálido, sombras chicas, densidad alta. La de trabajo.
     · cristal — vidrio esmerilado, más aire, radios grandes.
     · bio     — fondo profundo y acento bio-lumínico. Guardia nocturna.

   Va AL FINAL y con `html[data-skin]` (0-1-1) para ganarle al `:root` de arriba
   y al bloque derivado de piel_oscura.py, que queda debajo como piso de los
   ~90 tokens viejos que todavía no entraron al contrato.

   🚨 Esta capa mueve --brand de ámbar (#8A5206) a VERDE. Es un cambio de
   identidad, no de tono: viene del prototipo de tres pieles y está decidido
   arriba, no acá. Si se vuelve atrás, se vuelve atrás en este bloque y en
   ningún otro lado — que es justo para lo que sirve tener una capa.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-skin="mesada"], :root{
  --paper:#FBFAF8; --surface:#FFFFFF; --surface-2:#F3F1EB; --surface-3:#EAE7DE;
  --panel-bg:#FFFFFF; --panel-blur:none; --panel-border:1px solid #E2DED4;
  --hairline:#E2DED4; --border-control:#8B846F;
  --ink:#161A14; --ink-2:#565C50; --ink-3:#606758;
  --brand:#4A5D3A; --brand-hi:#5E7549; --brand-wash:#EDF1E6; --on-brand:#FFF;
  --alto:#A24A06; --alto-wash:#FDF1E4;
  --bajo:#0B5C93; --bajo-wash:#E8F2FA;
  --crit:#A31712; --crit-wash:#FCECEA;
  --ok:#1F6B4A;   --ok-wash:#E7F4EE;
  --focus:#0B5C93;
  /* La Regla: franja de referencia neutra, carril y punto. El punto es TINTA
     —no toma color del estado— porque lo que informa es la POSICIÓN; el color
     del estado ya está en el número. */
  --gauge-band:#D4D0C2; --gauge-track:#EDEAE1; --gauge-dot:#161A14; --gauge-edge:#8B846F;
  --e1:0 1px 2px rgba(60,52,32,.06);
  --e2:0 2px 6px rgba(60,52,32,.08);
  --e3:0 12px 32px rgba(60,52,32,.13);
  --r-ctl:5px; --r-card:9px; --r-panel:14px;
  --rowh:46px; --gap:16px;
  --numsize:15px; --numweight:560;
  --glow:none;
  --field-bg:var(--surface); --field-border:1px solid var(--border-control);
  --skin-name:'Mesada';
}

html[data-skin="cristal"]{
  color-scheme: light;
  --paper:#EEF1F0; --surface:rgba(255,255,255,.72);
  --surface-2:rgba(255,255,255,.44); --surface-3:rgba(255,255,255,.30);
  --panel-bg:rgba(255,255,255,.60); --panel-blur:saturate(180%) blur(28px);
  --panel-border:1px solid rgba(255,255,255,.65);
  --hairline:rgba(28,42,38,.10); --border-control:rgba(28,42,38,.50);
  --ink:#0E1A17; --ink-2:#3F514C; --ink-3:#4C5D58;
  --brand:#1F6B54; --brand-hi:#2A8468; --brand-wash:rgba(31,107,84,.11); --on-brand:#FFF;
  --alto:#9A4405; --alto-wash:rgba(196,110,32,.16);
  --bajo:#0A5286; --bajo-wash:rgba(20,110,180,.15);
  --crit:#9B1410; --crit-wash:rgba(190,45,38,.15);
  --ok:#146349;   --ok-wash:rgba(24,130,95,.15);
  --focus:#0A5286;
  --gauge-band:rgba(28,42,38,.20); --gauge-track:rgba(28,42,38,.09); --gauge-dot:#0E1A17; --gauge-edge:rgba(28,42,38,.52);
  --e1:0 2px 8px rgba(20,45,40,.06);
  --e2:0 10px 28px rgba(20,45,40,.10);
  --e3:0 32px 72px rgba(20,45,40,.18);
  --r-ctl:11px; --r-card:18px; --r-panel:24px;
  --rowh:56px; --gap:22px;
  --numsize:17px; --numweight:520;
  --glow:none;
  --field-bg:rgba(255,255,255,.55); --field-border:1px solid rgba(255,255,255,.75);
  --skin-name:'Cristal';
}

/* `guardia` viaja con `bio`: es el nombre viejo de la piel nocturna y hay sesiones
   con ese valor guardado. Un usuario que vuelve no tiene por qué encontrar la app
   en claro porque le cambiamos el nombre a una piel. */
html[data-skin="bio"], html[data-skin="guardia"]{
  color-scheme: dark;
  --paper:#04100D; --surface:rgba(12,32,28,.55);
  --surface-2:rgba(16,42,36,.50); --surface-3:rgba(20,52,45,.55);
  --panel-bg:rgba(8,26,23,.52); --panel-blur:saturate(140%) blur(18px);
  --panel-border:1px solid rgba(110,255,214,.14);
  --hairline:rgba(110,255,214,.10); --border-control:rgba(110,255,214,.37);
  --ink:#E6FFF6; --ink-2:#9DC4B8; --ink-3:#7FA79B;
  --brand:#4BE3A8; --brand-hi:#78F0C2; --brand-wash:rgba(75,227,168,.12); --on-brand:#03150F;
  --alto:#FFB74A; --alto-wash:rgba(255,183,74,.13);
  --bajo:#5FC8FF; --bajo-wash:rgba(95,200,255,.13);
  --crit:#FF7A85; --crit-wash:rgba(255,122,133,.14);
  --ok:#4BE3A8;   --ok-wash:rgba(75,227,168,.13);
  --focus:#5FC8FF;
  --gauge-band:rgba(110,255,214,.16); --gauge-track:rgba(110,255,214,.06); --gauge-dot:#E6FFF6; --gauge-edge:rgba(110,255,214,.38);
  --e1:0 1px 3px rgba(0,0,0,.5);
  --e2:0 8px 26px rgba(0,0,0,.55);
  --e3:0 30px 70px rgba(0,0,0,.7);
  --r-ctl:9px; --r-card:16px; --r-panel:20px;
  --rowh:54px; --gap:18px;
  --numsize:19px; --numweight:400;
  --glow:0 0 16px currentColor;
  --field-bg:rgba(110,255,214,.05); --field-border:1px solid rgba(110,255,214,.20);
  --skin-name:'Fluorescencia';
}

/* Puentes hacia los nombres que el LIS ya usa en 500 reglas. No se renombra nada
   a mano: el token viejo APUNTA al nuevo y sigue funcionando. Cuando una regla se
   toque por otro motivo, se pasa al nombre del contrato. */
html[data-skin], :root{
  --ink-on-fill: var(--on-brand);
  --sombra-1: var(--e1);
  --sombra-2: var(--e2);
  --sombra-3: var(--e3);
}