/* ═══════════════════════════════════════════════════════════════════════════
   calut-tokens.css — ÚNICA fuente de color de Calut GRC (tema-claro, ISS pendiente)
   ═══════════════════════════════════════════════════════════════════════════

   Por qué existe este archivo
   ────────────────────────────
   Antes de este cambio el color vivía en CUATRO lugares que no se hablaban entre sí:
     1. `tailwind.config.js` (raíz)         — calut-navy #002C5E (la guía de marca, ISS-0652)
     2. `calut-design-system.css` (:root)   — --color-navy #2D4A3E (un verde sin decisión,
                                               que el propio ISS-0652 ya había marcado como
                                               error, pero que seguía vivo en este archivo)
     3. `base.html` (<style> inline)        — --calut-navy #2D4A3E (UN TERCER valor, también
                                               el verde "equivocado")
     4. `frontend/autopilot/src/tokens.js`  — paleta oscura independiente, en JS, inyectada
                                               por `inyectarTokens()` como estilos inline en
                                               `:root`. No comparte ni un solo valor con 1-3.
   Y por fuera de las cuatro, `topbar.html` y `sidebar.html` tenían sus colores escritos
   como literales hex sueltos en atributos `style=""` y en un `<style>` propio — ninguno de
   los dos leía ninguna de las cuatro fuentes de arriba.

   Este archivo reemplaza las CUATRO fuentes. Jinja/HTMX (DESK) lo consume vía `<link>` en
   `base.html` (variables CSS + clases que ya existían); React (Autopilot) lo consume con un
   `@import` de este mismo archivo (no una copia) desde `frontend/autopilot/src/index.css`.
   Cambiar un color para el diseñador es editar UNA línea acá — Tailwind, las clases de
   `calut-design-system.css` y los componentes de Autopilot lo heredan solos.

   Mecanismo claro/oscuro
   ───────────────────────
   `:root` trae el tema CLARO (el default, ISS pendiente "tema-claro"). El oscuro (que es
   exactamente el que estaba en producción hasta hoy — no se inventó nada nuevo) vive bajo
   `[data-theme="dark"]` y bajo `@media (prefers-color-scheme: dark)` para cuando exista un
   selector de tema. Hoy `<html data-theme="light">` en `base.html` fuerza el claro para
   TODOS (mismo mecanismo que antes forzaba `<html class="dark">`, invertido) — así la
   revisión de Renato no depende de el SO de quien mire la pantalla.

   Colores de estado: PROVISIONAL, a confirmar con el diseñador (encargo de Renato,
   2026-10-02). Dos de los cuatro necesitaron un ajuste de oscurecido para pasar AA 4.5:1
   sobre #FFFFFF — ver la nota en cada uno.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta de marca (Mensaje 1 de Renato, literal) ──────────────────────── */
  --brand-white-clean: #F2F2F2;
  --brand-tech-gray:   #D8D8D8;
  --brand-deep-blue:   #16273A;
  --brand-black:       #161616;

  /* ── Roles semánticos — TEMA CLARO (default) ─────────────────────────────── */
  --app-bg:         var(--brand-white-clean);
  --surface-card:   #FFFFFF;
  --text-primary:   var(--brand-deep-blue);
  --text-secondary: #5A6672;
  /* Ajustado de #8A929C (pedido de Renato) a #6B747E: el original daba 3.15:1 sobre
     blanco y no pasaba AA (4.5:1) como texto. Mismo matiz gris, más oscuro. */
  --text-tenue:     #6B747E;
  --border-default: var(--brand-tech-gray);

  /* ── Acento / interacción ─────────────────────────────────────────────────
     Antes el acento de UI era el cian/teal del producto (#3AA7A3, o #3A75BF en
     "modo operaciones" — ver `[data-ui-mode]` más abajo, mecanismo aparte que no
     toca este encargo). Renato pidió el acento = deep-blue; el teal queda como
     acento del tema OSCURO para no perder look-and-feel de lo ya desplegado. */
  --acento:       var(--brand-deep-blue);
  --acento-hover: #1F3A56; /* derivado: deep-blue + ~12% de luminancia, solo para :hover */
  --acento-text:  #FFFFFF;

  /* ── Estados — PROVISIONAL, a confirmar con el diseñador ─────────────────── */
  --estado-critico:     #A42B21; /* 7.13:1 sobre #FFFFFF — pasa AA sin ajuste */
  --estado-critico-bg:  rgba(164, 43, 33, 0.10);
  /* Texto encima de un fondo --estado-critico (p. ej. "Pausar al equipo" cuando está en
     pausa). Blanco da 7.13:1 sobre este rojo. */
  --estado-critico-text: #FFFFFF;
  /* Ajustado de #B57A1F (pedido de Renato) a #9A6417: el original daba 3.64:1 sobre
     blanco y no pasaba AA. Mismo ámbar, oscurecido hasta 4.99:1. */
  --estado-atencion:    #9A6417;
  --estado-atencion-bg: rgba(154, 100, 23, 0.10);
  --estado-ok:          #2E7D5B; /* 5.00:1 sobre #FFFFFF — pasa AA sin ajuste */
  --estado-ok-bg:       rgba(46, 125, 91, 0.10);
  /* Texto ENCIMA de un fondo --estado-ok (p. ej. el botón "Aprobar" de Autopilot). Blanco
     da 5.00:1 sobre este verde; un texto oscuro solo daría 3.78:1 y no pasa AA. */
  --estado-ok-text:     #FFFFFF;

  /* Quinto color, fuera de los 4 que pidió Renato — NO es nuevo, es el que ya existía
     (ISS-1123): el score de Autopilot tiene 4 tramos (verde/ámbar/naranja/rojo), no 3.
     Colapsar "naranja" sobre --estado-atencion reintroduciría el bug que ISS-1123
     corrigió (un 45 y un 70 se veían del mismo color). Derivado de la misma paleta,
     entre --estado-critico y --estado-atencion; 5.48:1 sobre #FFFFFF. */
  --estado-riesgo:    #A3540D;
  --estado-riesgo-bg: rgba(163, 84, 13, 0.10);
  /* Severidad «Baja»: gris NEUTRO, no verde (el verde = «bien/cumplido»). 5.9:1 sobre blanco. */
  --severidad-baja-fg:     var(--text-secondary);
  --severidad-baja-bg:     rgba(90, 102, 114, 0.10);
  --severidad-baja-borde:  rgba(90, 102, 114, 0.35);

  /* ── Categorías de negocio (familia CATEGÓRICA, no de estado) ─────────────────
     Marcan A QUÉ CLASE de cosa pertenece algo, no si está bien o mal: no se mezclan con
     --estado-*. Nombres por significado y no por color (hoy son violeta; si el diseñador
     los cambia, se edita acá y los consumidores no se enteran). Cada categoría trae
     texto / fondo / borde: el texto da 8.0:1 sobre el fondo (AA) y el borde 3.8:1 contra
     él (3:1 de componente no textual). Decisión de Renato 2026-10-05: el violeta NO es
     color de tema; antes vivía como literales (#8957e5, #bc8cff, #d2a8ff, #1d1229/#1e1433,
     #3b2063) y en el tema claro dejaba cajas oscuras ilegibles.
       sgsi       cambio que afecta el SGSI (ISO 27001 cl. 6.3)
       normativo  clasificación de datos / «normativo» (origen regulatorio)
       origen     de dónde nace una tarea (la NC, el riesgo, la vulnerabilidad que la pidió)
     CIS grupo 3 (`frontend/cis`) usa el mismo violeta; migrará cuando se trabaje ese módulo. */
  --categoria-sgsi-fg:         #5B2A9E;
  --categoria-sgsi-bg:         #F3ECFC;
  --categoria-sgsi-borde:      #8E63CC;
  --categoria-normativo-fg:    #5B2A9E;
  --categoria-normativo-bg:    #F3ECFC;
  --categoria-normativo-borde: #8E63CC;
  --categoria-origen-fg:       #5B2A9E;
  --categoria-origen-bg:       #F3ECFC;
  --categoria-origen-borde:    #8E63CC;
  /* ISS-1322 (Lote C de ISS-1319, D5): el resto de las categorías violeta que vivían como
     literales (#bc8cff, #a371f7, #7c3aed, #8b5cf6, #d2a8ff, #2d1f3d, rgba(188,140,255,..)).
       ia         contenido o acción de IA (Borrador IA, Generar con Lyra, agentes de Auror)
       identidad  identidades / certificados de firma de código / aprobación delegada
       marco      marco o ley como categoría (Ley 21.663, CIS grupo 3, NIST Govern, BCP regulador,
                  KPI «morado» de liderazgo / objetivos / auditorías, evento de auditoría)
       tercero    queda a la espera de un tercero (proveedor, "Esperando cliente")
       tecnico    clase técnica (pentest inalámbrico, activo tipo aplicación)
     Mismos valores que sgsi/normativo/origen: texto 8.0:1 sobre su fondo y 7.4:1 sobre
     --bg/--surface blanco (AA); el borde cumple 3:1 de componente. Test:
     tests/test_iss1322_categoria_contraste.py. */
  --categoria-ia-fg:          #5B2A9E;
  --categoria-ia-bg:          #F3ECFC;
  --categoria-ia-borde:       #8E63CC;
  --categoria-identidad-fg:   #5B2A9E;
  --categoria-identidad-bg:   #F3ECFC;
  --categoria-identidad-borde:#8E63CC;
  --categoria-marco-fg:       #5B2A9E;
  --categoria-marco-bg:       #F3ECFC;
  --categoria-marco-borde:    #8E63CC;
  --categoria-tercero-fg:     #5B2A9E;
  --categoria-tercero-bg:     #F3ECFC;
  --categoria-tercero-borde:  #8E63CC;
  --categoria-tecnico-fg:     #5B2A9E;
  --categoria-tecnico-bg:     #F3ECFC;
  --categoria-tecnico-borde:  #8E63CC;
  /* Violeta de Auror: su «color de persona» (el halo y el anillo del avatar del chat).
     No es un color de estado ni de marca y NUNCA se usa como color de texto (4.3:1 sobre
     blanco): solo bordes, anillos y halos. Vive acá porque el chat es el mismo componente
     en el Desk y en Autopilot y no puede traer un hex propio. */
  --auror-violeta:    #7C6BD6;

  /* Velo detrás de un modal o del tour de onboarding (L3, decisión D6): deep-blue/negro de
     marca translúcido. Nombre por significado: lo consumen `dialog::backdrop` y el scrim del
     tour. El tooltip global es CLARO (D6, Lote C de ISS-1319): usa --surface-card /
     --text-primary / --border-default. */
  --overlay-scrim:    color-mix(in srgb, var(--brand-black) 62%, transparent);
  /* Texto sobre --estado-atencion (blanco: 4.99:1). */
  --estado-atencion-text: #FFFFFF;
  /* Acento del «modo operaciones» (vista de DESK, no un tema): azul medio. */
  --acento-operaciones: #3A75BF;

  /* ── Barra superior (topbar) — fondo deep-blue, texto blanco ─────────────── */
  --topbar-bg:                var(--brand-deep-blue);
  --topbar-text:              #FFFFFF;
  --topbar-text-muted:        rgba(255, 255, 255, 0.68);
  --topbar-border:            rgba(255, 255, 255, 0.14);
  --topbar-hover-bg:          rgba(255, 255, 255, 0.10);
  --topbar-divider:           rgba(255, 255, 255, 0.18);
  --topbar-pill-track-bg:     rgba(255, 255, 255, 0.14);
  --topbar-pill-track-border: rgba(255, 255, 255, 0.28);
  --topbar-pill-active-bg:    #FFFFFF;
  --topbar-pill-active-text:  var(--brand-deep-blue);

  /* ── Sidebar — mismo tratamiento que el topbar ────────────────────────────── */
  --sidebar-bg:            var(--brand-deep-blue);
  --sidebar-text:          rgba(255, 255, 255, 0.72);
  --sidebar-text-active:   #FFFFFF;
  --sidebar-active-bg:     rgba(255, 255, 255, 0.12);
  --sidebar-border:        rgba(255, 255, 255, 0.14);
  --sidebar-hover-bg:      rgba(255, 255, 255, 0.08);
  --sidebar-accent:        #FFFFFF; /* barra lateral del item activo */
  --sidebar-text-tenue:    rgba(255, 255, 255, 0.45);
  --sidebar-badge-bg:      var(--estado-critico);
  --sidebar-env-bg:        var(--estado-atencion);
  --sidebar-env-text:      #FFFFFF;

  /* ── Compat: nombres usados hoy en calut-design-system.css y en ~90 pantallas
     de DESK vía Tailwind (`ink`, `line`, `bg-soft`, `brand-900/700`, `calut-navy`,
     `calut-cyan`...). Se dejan como ALIAS de los tokens de arriba en vez de tocar
     cada plantilla: cambiar el valor acá los mueve a todos a la vez. ────────── */
  --ink:      var(--text-primary);
  --ink-2:    var(--text-secondary);
  --ink-3:    var(--text-tenue);
  --line:     var(--border-default);
  --bg-soft:  var(--app-bg);
  --bg-soft-2: #ECECEC;

  --calut-navy:  var(--brand-deep-blue);
  --calut-blue:  var(--acento-hover);
  --calut-cyan:  var(--acento); /* antes #3AA7A3 (teal) — ver nota de acento arriba */
  --calut-gray:  var(--brand-tech-gray);
  --calut-mint:  #E8F1EF;

  --color-navy:     var(--brand-deep-blue);
  --color-midblue:  var(--acento);

  --color-critico:        var(--estado-critico);
  --color-critico-bg:     var(--estado-critico-bg);
  --color-critico-border: rgba(164, 43, 33, 0.35);
  /* DESK tiene 4 niveles de severidad (crítico/alto/medio/bajo) y el encargo trajo 3
     estados (crítico/atención/ok). Alto y medio colapsan sobre --estado-atencion: no
     hay un cuarto color en la paleta pedida y subdividir "atención" en dos tonos sin
     que el diseñador lo haya pedido es inventar un color que nadie definió. */
  --color-alto:           var(--estado-atencion);
  --color-alto-bg:        var(--estado-atencion-bg);
  --color-alto-border:    rgba(154, 100, 23, 0.35);
  --color-medio:          var(--estado-atencion);
  --color-medio-bg:       var(--estado-atencion-bg);
  --color-medio-border:   rgba(154, 100, 23, 0.35);
  --color-bajo:           var(--severidad-baja-fg);
  --color-bajo-bg:        var(--severidad-baja-bg);
  --color-bajo-border:    var(--severidad-baja-borde);

  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted:     var(--text-tenue);

  --color-bg-page:  var(--app-bg);
  --color-bg-card:  var(--surface-card);
  --color-bg-input: #FFFFFF;
  --color-border:   var(--border-default);

  --color-sidebar-bg:           var(--sidebar-bg);
  --color-sidebar-text:         var(--sidebar-text);
  --color-sidebar-text-active:  var(--sidebar-text-active);
  --color-sidebar-active-bg:    var(--sidebar-active-bg);
  --color-sidebar-border:       var(--sidebar-border);
  --color-sidebar-separator:    var(--sidebar-border);

  --color-topbar-bg:     var(--topbar-bg);
  --color-topbar-border: var(--topbar-border);

  --color-text-primary-custom:   var(--text-primary);
  --color-text-secondary-custom: var(--text-secondary);
  --color-border-focus:          var(--acento);

  --shadow-card:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-dropdown:   0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
}

/* ── TEMA OSCURO — exactamente el que estaba en producción hasta hoy ─────────
   No se inventó ningún valor acá: son los hex que ya vivían sueltos en
   `topbar.html`, `sidebar.html`, `calut-design-system.css` y
   `frontend/autopilot/src/tokens.js` antes de este cambio.

   Se activa de dos formas, sin anidar @media dentro de un selector (evita
   depender de CSS Nesting en navegadores viejos):
     1. `[data-theme="dark"]` explícito — listo para cuando exista un selector de
        tema real.
     2. `prefers-color-scheme: dark` del SO, PERO solo si nadie fijó `data-theme`
        a "light" — así el `<html data-theme="light">` que pone `base.html` hoy
        gana siempre, y la revisión de Renato se ve clara sin importar el SO de
        quien mire la pantalla. */
:root[data-theme="dark"] {
  --app-bg:         #0D1117;
  --surface-card:   #161B22;
  --text-primary:   #E6EDF3;
  --text-secondary: #8B949E;
  --text-tenue:     #6E7681;
  --border-default: #30363D;

  --acento:       #3AA7A3;
  --acento-hover: #5BC5C1;
  --acento-text:  #08121A;

  --estado-critico:     #E46258;
  --estado-critico-bg:  rgba(228, 98, 88, 0.12);
  --estado-critico-text: #08121A;
  --estado-atencion:    #E7AA40;
  --estado-atencion-bg: rgba(231, 170, 64, 0.12);
  --estado-ok:          #3AA7A3;
  --estado-ok-bg:       rgba(58, 167, 163, 0.12);
  --estado-ok-text:     #08121A;
  --estado-riesgo:      #D98040;
  --estado-riesgo-bg:   rgba(217, 128, 64, 0.12);
  --severidad-baja-fg:     var(--text-secondary);
  --severidad-baja-bg:     rgba(139, 148, 158, 0.12);
  --severidad-baja-borde:  rgba(139, 148, 158, 0.35);
  --categoria-sgsi-fg: #D2A8FF; --categoria-sgsi-bg: #1D1229; --categoria-sgsi-borde: #8957E5;
  --categoria-normativo-fg: #D2A8FF; --categoria-normativo-bg: #1E1433; --categoria-normativo-borde: #3B2063;
  --categoria-origen-fg: #D2A8FF; --categoria-origen-bg: #1E1433; --categoria-origen-borde: #3B2063;
  --categoria-ia-fg: #D2A8FF; --categoria-ia-bg: #1E1433; --categoria-ia-borde: #3B2063;
  --categoria-identidad-fg: #D2A8FF; --categoria-identidad-bg: #1E1433; --categoria-identidad-borde: #3B2063;
  --categoria-marco-fg: #D2A8FF; --categoria-marco-bg: #1E1433; --categoria-marco-borde: #3B2063;
  --categoria-tercero-fg: #D2A8FF; --categoria-tercero-bg: #1E1433; --categoria-tercero-borde: #3B2063;
  --categoria-tecnico-fg: #D2A8FF; --categoria-tecnico-bg: #1E1433; --categoria-tecnico-borde: #3B2063;

  --topbar-bg:                #161B22;
  --topbar-text:              #E6EDF3;
  --topbar-text-muted:        #8B949E;
  --topbar-border:            #21262D;
  --topbar-hover-bg:          #21262D;
  --topbar-divider:           #21262D;
  --topbar-pill-track-bg:     #2D333B;
  --topbar-pill-track-border: #444C56;
  --topbar-pill-active-bg:    #1F6FEB;
  --topbar-pill-active-text:  #FFFFFF;

  --sidebar-bg:          #0D1117;
  --sidebar-text:        #C9D1D9;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg:   #1F2630;
  --sidebar-border:      #21262D;
  --sidebar-hover-bg:    #161B22;
  --sidebar-accent:      #3AA7A3;
  --sidebar-text-tenue:  #6E7681;
  --sidebar-env-bg:      #F59E0B;
  --sidebar-env-text:    #000000;

  --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-tenue);
  --line: var(--border-default); --bg-soft: #21262D; --bg-soft-2: #161B22;
  --calut-navy: #2D4A3E; --calut-blue: #1F3A2E; --calut-cyan: #3AA7A3; --calut-gray: #CCCCCC;
  --color-navy: #2D4A3E; --color-midblue: #3A75BF;
  --color-bg-page: var(--app-bg); --color-bg-card: var(--surface-card);
  --color-bg-input: #21262D; --color-border: var(--border-default);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --app-bg:         #0D1117;
    --surface-card:   #161B22;
    --text-primary:   #E6EDF3;
    --text-secondary: #8B949E;
    --text-tenue:     #6E7681;
    --border-default: #30363D;

    --acento:       #3AA7A3;
    --acento-hover: #5BC5C1;
    --acento-text:  #08121A;

    --estado-critico:     #E46258;
    --estado-critico-bg:  rgba(228, 98, 88, 0.12);
    /* Bug preexistente encontrado de paso: texto blanco sobre este rojo (más claro, para
       leerse bien como TEXTO) da solo 3.39:1 como fondo de botón. 5.56:1 con texto
       oscuro. No estaba en el alcance de este encargo, se corrige igual por ser gratis. */
    --estado-critico-text: #08121A;
    --estado-atencion:    #E7AA40;
    --estado-atencion-bg: rgba(231, 170, 64, 0.12);
    --estado-ok:          #3AA7A3;
    --estado-ok-bg:       rgba(58, 167, 163, 0.12);
    --estado-ok-text:     #08121A;
    --estado-riesgo:      #D98040;
    --estado-riesgo-bg:   rgba(217, 128, 64, 0.12);
    --severidad-baja-fg:     var(--text-secondary);
    --severidad-baja-bg:     rgba(139, 148, 158, 0.12);
    --severidad-baja-borde:  rgba(139, 148, 158, 0.35);
    --categoria-sgsi-fg: #D2A8FF; --categoria-sgsi-bg: #1D1229; --categoria-sgsi-borde: #8957E5;
    --categoria-normativo-fg: #D2A8FF; --categoria-normativo-bg: #1E1433; --categoria-normativo-borde: #3B2063;
    --categoria-origen-fg: #D2A8FF; --categoria-origen-bg: #1E1433; --categoria-origen-borde: #3B2063;
    --categoria-ia-fg: #D2A8FF; --categoria-ia-bg: #1E1433; --categoria-ia-borde: #3B2063;
    --categoria-identidad-fg: #D2A8FF; --categoria-identidad-bg: #1E1433; --categoria-identidad-borde: #3B2063;
    --categoria-marco-fg: #D2A8FF; --categoria-marco-bg: #1E1433; --categoria-marco-borde: #3B2063;
    --categoria-tercero-fg: #D2A8FF; --categoria-tercero-bg: #1E1433; --categoria-tercero-borde: #3B2063;
    --categoria-tecnico-fg: #D2A8FF; --categoria-tecnico-bg: #1E1433; --categoria-tecnico-borde: #3B2063;

    --topbar-bg:                #161B22;
    --topbar-text:              #E6EDF3;
    --topbar-text-muted:        #8B949E;
    --topbar-border:            #21262D;
    --topbar-hover-bg:          #21262D;
    --topbar-divider:           #21262D;
    --topbar-pill-track-bg:     #2D333B;
    --topbar-pill-track-border: #444C56;
    --topbar-pill-active-bg:    #1F6FEB;
    --topbar-pill-active-text:  #FFFFFF;

    --sidebar-bg:          #0D1117;
    --sidebar-text:        #C9D1D9;
    --sidebar-text-active: #FFFFFF;
    --sidebar-active-bg:   #1F2630;
    --sidebar-border:      #21262D;
    --sidebar-hover-bg:    #161B22;
    --sidebar-accent:      #3AA7A3;
    --sidebar-text-tenue:  #6E7681;
    --sidebar-env-bg:      #F59E0B;
    --sidebar-env-text:    #000000;

    --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-tenue);
    --line: var(--border-default); --bg-soft: #21262D; --bg-soft-2: #161B22;
    --calut-navy: #2D4A3E; --calut-blue: #1F3A2E; --calut-cyan: #3AA7A3; --calut-gray: #CCCCCC;
    --color-navy: #2D4A3E; --color-midblue: #3A75BF;
    --color-bg-page: var(--app-bg); --color-bg-card: var(--surface-card);
    --color-bg-input: #21262D; --color-border: var(--border-default);
  }
}