/* Sistema de diseño accesible de ICI — tokens compartidos (color-blind safe, Okabe-Ito).
 * Fundado en el ticket "design tokens" tras la auditoría holística (docs/auditoria_holistica.md).
 *
 * REGLA (CLAUDE.md §14): el color NUNCA es el único portador de significado. Acompaña SIEMPRE el
 * color con texto, signo (+ − =) o ícono/forma (✓ ⚠ ✗ ↑ ↓). Estos tokens dan el color accesible;
 * la forma/el texto los pone cada pantalla.
 *
 * Paleta Okabe-Ito (segura para las 3 formas de daltonismo). Para ESTADO usamos verde-azulado vs
 * bermellón (NO verde vs rojo): son inequívocos entre sí para un daltónico.
 */
:root{
  /* Paleta base Okabe-Ito */
  --ok-azul:        #0072B2;   /* blue */
  --ok-bermellon:   #D55E00;   /* vermillion */
  --ok-naranja:     #E69F00;   /* orange */
  --ok-verdeazul:   #009E73;   /* bluish green */
  --ok-amarillo:    #F0E442;   /* yellow */
  --ok-cielo:       #56B4E9;   /* sky blue */
  --ok-purpura:     #CC79A7;   /* reddish purple */
  --ok-negro:       #1a1a2e;

  /* Semánticos (texto sobre fondo claro → alto contraste) */
  --c-ok:        #0a6e52;   /* positivo / dentro de rango — verde-azulado oscuro legible */
  --c-ok-bg:     #e3f5ef;
  --c-alerta:    #9a6a00;   /* advertencia / cerca del límite — ámbar oscuro legible */
  --c-alerta-bg: #fdf0d8;
  --c-error:     #9c3d00;   /* negativo / fuera de rango — bermellón oscuro legible */
  --c-error-bg:  #fbe7d8;
  --c-acento:    #0072B2;   /* acento / info / enlaces de acción */
  --c-info:      #0a558c;
  --c-neutro:    #555;

  /* Roles de nómina (percepción/deducción/neto/patrón) — consistentes con MTZ */
  --c-perc:   #0072B2;   /* percepción (+) */
  --c-ded:    #D55E00;   /* deducción (−) */
  --c-neto:   #11233a;   /* neto (=) */
  --c-patron: #555;

  /* ── FASE 1 "Marca cian" RETIRADA (U-011, 2026-08-22): la capa legacy migró a los tokens v2 de
   *    abajo (--tinta/--acento*/--naranja*/…). Guardián grep-gate: scripts/smoke_tokens_legacy.py. ── */
}

/* Utilidades de estado: SIEMPRE usar con texto/ícono al lado (el color refuerza, no sustituye). */
.estado-ok    { color:var(--c-ok); }      .chip-ok    { background:var(--c-ok-bg);    color:var(--c-ok); }
.estado-alerta{ color:var(--c-alerta); }  .chip-alerta{ background:var(--c-alerta-bg);color:var(--c-alerta); }
.estado-error { color:var(--c-error); }   .chip-error { background:var(--c-error-bg); color:var(--c-error); }
.estado-info  { color:var(--c-info); }

/* P-155 · VISTA CLIENTE DISCRETA — indicador para el OPERADOR, invisible para la audiencia.
   Distinguible por FORMA + ESTADO (no solo color, Fernando es daltónico): un punto relleno (●)
   arriba-derecha del botón cuando el modo cliente está activo. Sin texto delator visible. */
.vc-toggle { position: relative; }
.vc-toggle.vc-on { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.vc-toggle.vc-on::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tinta); border: 1.5px solid #fff; box-sizing: content-box;
}


/* ══════════════════════════════════════════════════════════════════════
 * CAPA v2 — LA LEY DE DISEÑO v2 (paquete "Cabina/Puerto", U-001, 2026-08-21)
 * Fuente de verdad: docs/handoff_ici_v2/. Aditiva: los tokens viejos de arriba
 * conviven y siguen sirviendo a las pantallas actuales hasta que migren (U-002..U-005).
 * Activa el tema con <body data-tema="claro"> (default) o data-tema="puerto".
 * ══════════════════════════════════════════════════════════════════════ */
/* ══ Tokens ICI v2 — dos temas seleccionables por el usuario ══
 * Uso: <body data-tema="claro"> (default) o <body data-tema="puerto">.
 * Los componentes se escriben UNA vez contra estas variables; el tema solo las redefine.
 * Regla dura: texto blanco solo sobre --tinta o --acento; NUNCA sobre --marca (#29abe2)
 * ni sobre --destacado (ámbar) — ahí siempre texto --tinta. Contraste AA mínimo.
 * El color nunca es el único portador: siempre signo (▲ ○ ▼ ✓) o palabra al lado.
 */

:root, [data-tema="claro"]{
  /* capas de fondo */
  --pagina:#f7f8f9; --superficie:#ffffff; --capa2:#f1f3f5;
  /* texto */
  --tinta:#16191d; --cuerpo:#2b3036; --secundario:#5f666e; --apoyo:#6b727a; --tenue:#8b9299;
  /* líneas y controles */
  --hairline:#e7e9ec; --hairline2:#f1f3f5; --control:#cfd4d9;
  /* navegación (barra superior oscura 52px + submenú claro 40px) */
  --nav:#ffffff; --nav-txt:#5f666e; --nav-activo-bg:#f1f3f5; --nav-activo-txt:#16191d;
  /* marca: SOLO punto/regla decorativa, nunca texto encima */
  --marca:#29abe2;
  /* acento funcional: links, tabs activos, hover de fila */
  --acento:#0072B2; --acento-tinte:#eef5fb;
  /* U-011: hover/banda del acento (sin equivalente v2 previo; hex EXACTO del legacy Marca cian) */
  --acento-oscuro:#005c90; --acento-banda:#cfe3f2;
  /* U-011: naranja Marca cian — distinto a propósito de --alerta/--destacado; preservación exacta */
  --naranja:#c66a1e; --naranja-oscuro:#a3540f; --naranja-tinte:#fdf6ee; --naranja-banda:#f2ddc8;
  /* cifra protagonista (una por pantalla, 32px máx, con texto que la explique) */
  --protagonista:#b07600;
  /* estados (siempre con signo/palabra) */
  --alerta:#855b00;  --alerta-bg:#fdf0d8;  --alerta-bd:#e8d3a0;   /* ▲ */
  --caida:#9c3d00;   --caida-bg:#fbe7d8;   --caida-bd:#edc4a4;    /* ▼ */
  --ok:#0a6e52;      --ok-bg:#e3f5ef;                             /* ✓ ▲+ */
  --info:#5c666e;    --info-bg:#eef0f3;                           /* ○ */
  /* chip sólido de énfasis (texto tinta encima) */
  --destacado:#E69F00; --destacado-suave:#eef0f3;
  /* rampa de fases del kanban/cartera (Okabe-Ito, con número y nombre siempre) */
  --fase-1:#0072B2; --fase-2:#56B4E9; --fase-3:#009E73; --fase-4:#CC79A7; --fase-vacia:#8a939b;
  --radio:8px;
}

[data-tema="puerto"]{
  --pagina:#f6f4ef; --superficie:#fffdf9; --capa2:#efebe2;
  --tinta:#12333b; --cuerpo:#38393a; --secundario:#5a564c; --apoyo:#7a756a; --tenue:#a09a8d;
  --hairline:#e6e1d6; --hairline2:#efebe2; --control:#c2bcae;
  --nav:#fffdf9; --nav-txt:#5a564c; --nav-activo-bg:#efebe2; --nav-activo-txt:#12333b;
  --marca:#29abe2;
  --acento:#0e5f6b; --acento-tinte:#e9f2f1;
  --protagonista:#12333b; /* sobre bloque --destacado */
  --alerta:#6b4600;  --alerta-bg:#e9c979;  --alerta-bd:#d9a02b;
  --caida:#7c3f12;   --caida-bg:#f3dccb;   --caida-bd:#c98a5c;   /* bloque sólido, texto blanco */
  --ok:#0a6e52;      --ok-bg:#e3f0ea;
  --info:#5a564c;    --info-bg:#eae5da;
  --destacado:#e9c979; --destacado-suave:#eae5da;
  /* fases por RAMPA DE LUMINOSIDAD de un solo tono (segura por valor) */
  --fase-1:#12333b; --fase-2:#2e5a5c; --fase-3:#6f9693; --fase-4:#e8e3d7; --fase-vacia:#e8e3d7;
  --radio:0px;
  --acento-oscuro:#0a4a54;
  --acento-banda:#cfe3e0;
}

/* ── TERCER TEMA "ORQUÍDEA" (U-014, 2026-08-22) — rosas/morados sobre el eje Okabe-Ito
 *    reddish-purple (#CC79A7), por rampa de LUMINOSIDAD. Redefine el MISMO set completo de
 *    variables que 'claro' (ninguna sin valor). Todos los pares texto/fondo verificados AA
 *    (checker de contraste, U-014); --tenue queda en el nivel decorativo (~3.5, > claro/puerto).
 *    Ámbar (--alerta), bermellón (--caida) y verde-azulado (--ok) se CONSERVAN — no todo es rosa.
 *    Regla dura: blanco SOLO sobre --tinta/--acento/--nav-activo-bg; NUNCA sobre --marca ni
 *    --destacado (ahí texto --tinta). Nombre reversible (Fernando puede renombrar). ── */
[data-tema="orquidea"]{
  /* capas de fondo */
  --pagina:#faf7fa; --superficie:#ffffff; --capa2:#f4edf4;
  /* texto */
  --tinta:#3a2338; --cuerpo:#42353f; --secundario:#6a5566; --apoyo:#7d6678; --tenue:#9a7f95;
  /* líneas y controles */
  --hairline:#ece1ea; --hairline2:#f4edf4; --control:#c3aec0;
  /* navegación */
  --nav:#ffffff; --nav-txt:#6a5566; --nav-activo-bg:#f4edf4; --nav-activo-txt:#3a2338;
  /* marca: SOLO punto/regla decorativa, nunca texto encima */
  --marca:#CC79A7;
  /* acento funcional: links, tabs activos, hover de fila */
  --acento:#8a3d72; --acento-tinte:#faf1f6;
  --acento-oscuro:#6e2f5b; --acento-banda:#e6cfe0;
  /* naranja utilitario (banner dev, etc.) — distinto a propósito de --alerta; se conserva */
  --naranja:#c66a1e; --naranja-oscuro:#a3540f; --naranja-tinte:#fdf6ee; --naranja-banda:#f2ddc8;
  /* cifra protagonista */
  --protagonista:#7a2f5e;
  /* estados (ámbar/bermellón/verde-azulado se conservan; siempre con signo/palabra) */
  --alerta:#855b00;  --alerta-bg:#fdf0d8;  --alerta-bd:#e8d3a0;   /* ▲ */
  --caida:#9c3d00;   --caida-bg:#fbe7d8;   --caida-bd:#edc4a4;    /* ▼ */
  --ok:#0a6e52;      --ok-bg:#e3f5ef;                             /* ✓ */
  --info:#6a5566;    --info-bg:#f1e8f1;                           /* ○ */
  /* chip sólido de énfasis (texto tinta encima, NUNCA blanco) */
  --destacado:#e6b8d4; --destacado-suave:#f1e8f1;
  /* rampa de fases del kanban/cartera por LUMINOSIDAD de un tono (segura por valor) */
  --fase-1:#5a1f47; --fase-2:#8a3d72; --fase-3:#b874a0; --fase-4:#e6cfe0; --fase-vacia:#e6cfe0;
  --radio:8px;
}

/* ── CUARTO TEMA "FIUSHA" (U-018, 2026-08-25) — fiusha vivo sobre fondo BLANCO (pedido por
 *    Marlen: "fiusha con blanco, fuerte, vivo"). Suma un tema; Orquídea NO se toca. Redefine el
 *    MISMO set completo que 'claro' (ninguna variable sin valor). Pares texto/fondo AA.
 *    Ámbar (--alerta), bermellón (--caida) y verde-azulado (--ok) se CONSERVAN — no todo es rosa.
 *    Regla dura: --nav-activo-bg #E91E63 con blanco (~4.3:1) SOLO piezas grandes, JAMÁS texto chico;
 *    texto sobre rosas/fiusha siempre --tinta; blanco solo sobre --nav/--acento/--acento-oscuro. ── */
[data-tema="fiusha"]{
  /* capas de fondo */
  --pagina:#ffffff; --superficie:#ffffff; --capa2:#fbf3f7;
  /* texto */
  --tinta:#2A1E26; --cuerpo:#3A3038; --secundario:#6b5a63; --apoyo:#7d6873; --tenue:#a08f99;
  /* líneas y controles */
  --hairline:#f0e4ea; --hairline2:#f7eef2; --control:#CDB4C1;
  /* navegación */
  --nav:#ffffff; --nav-txt:#6b5a63; --nav-activo-bg:#fdf0f5; --nav-activo-txt:#ad1457;
  /* marca: SOLO punto/regla decorativa, nunca texto encima */
  --marca:#F06292;
  /* acento funcional: links, tabs activos, hover de fila */
  --acento:#C2185B; --acento-tinte:#FDF0F5;
  --acento-oscuro:#AD1457; --acento-banda:#F3D3E1;
  /* naranja utilitario (banner dev, etc.) — distinto a propósito de --alerta; se conserva */
  --naranja:#c66a1e; --naranja-oscuro:#a3540f; --naranja-tinte:#fdf6ee; --naranja-banda:#f2ddc8;
  /* cifra protagonista */
  --protagonista:#AD1457;
  /* estados (ámbar/bermellón/verde-azulado se conservan; siempre con signo/palabra) */
  --alerta:#855b00;  --alerta-bg:#fdf0d8;  --alerta-bd:#e8d3a0;   /* ▲ */
  --caida:#9c3d00;   --caida-bg:#fbe7d8;   --caida-bd:#edc4a4;    /* ▼ */
  --ok:#0a6e52;      --ok-bg:#e3f5ef;                             /* ✓ */
  --info:#6b5a63;    --info-bg:#FBF3F7;                           /* ○ */
  /* chip sólido de énfasis (texto tinta encima, NUNCA blanco) */
  --destacado:#F06292; --destacado-suave:#F4EAEF;
  /* rampa de fases del kanban/cartera por LUMINOSIDAD de un tono (segura por valor) */
  --fase-1:#59103F; --fase-2:#AD1457; --fase-3:#E38FB8; --fase-4:#F6E3ED; --fase-vacia:#F6E3ED;
  --radio:8px;
}

/* ── MAPA DE COLOR DE ESQUEMA (U-032) — rampa de LUMINOSIDAD de UN solo tono (el --acento del
 *    tema), NUNCA verde-vs-rojo (§7 daltonismo). Texto SIEMPRE --tinta (nunca blanco sobre ámbar).
 *    Definido con color-mix sobre --acento/--superficie → se adapta SOLO a los 4 temas (claro/
 *    puerto/orquidea/fiusha) sin redefinir por tema. Fuente única: la calculadora y la propuesta
 *    (U-030) pueden reusar --esq-*. El nombre del esquema va SIEMPRE en texto (color no es único
 *    portador). Reversible. */
:root{
  --esq-100:       color-mix(in srgb, var(--acento)  8%, var(--superficie));
  --esq-411:       color-mix(in srgb, var(--acento) 16%, var(--superficie));
  --esq-vales:     color-mix(in srgb, var(--acento) 24%, var(--superficie));
  --esq-vales-100: color-mix(in srgb, var(--acento) 32%, var(--superficie));
  --esq-pension:   color-mix(in srgb, var(--acento) 40%, var(--superficie));
  --esq-txt: var(--tinta);
}

/* tipografía */
:root{
  /* Línea B «mesa limpia» (U-130, 22-oct-2026): UNA familia (Public Sans) para títulos y cuerpo;
     Plex Mono SOLO para números, códigos (COT-…, U-…) y datos tabulares. */
  --font-titulo:'Public Sans',Helvetica,Arial,sans-serif;  /* títulos peso 700, -0.01em */
  --font-sans:'Public Sans',Helvetica,Arial,sans-serif;    /* cuerpo 13-13.5px; etiquetas en minúscula */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;      /* números, códigos, datos tabulares */
}
/* números siempre tabulares */
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }