/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE MARCA — SentinelIQ / SeguriCloud
   Fuente única de color, tipografía y ritmo. Lo consumen el brochure, el panel
   y los informes PDF. Un token que no esté aquí no existe.

   LA REGLA, y de ella sale todo lo demás:

       La interfaz es blanco y negro. El color es un dato medido.

   No es una preferencia estética, es la misma promesa que hace el producto por
   dentro y que ningún competidor hace: no pintar un verde que no se puede
   demostrar. «Sin datos ≠ 0 %» en el SLA, «sin comprobar» ≠ «no resuelve» en el
   gobierno de dominios, «presente» ≠ «funcionando» en los controles de
   seguridad. Si la pantalla fuera de colores decorativos, el color perdería su
   significado justo donde hace falta que lo tenga.

   De ahí las tres reservas, que no se rompen:
     · Los NEUTROS visten todo: texto, fondos, bordes, botones, iconos, marca.
     · Los colores de ESTADO (--bien/--aviso/--serio/--critico) solo dicen en
       qué estado está algo medido, y nunca van solos: siempre con etiqueta o
       icono, porque el 8 % de los hombres no distingue el rojo del verde.
     · Los colores de SERIE (--serie-1..8) solo pintan datos en una gráfica, en
       orden fijo. Nunca se reciclan ni se generan al vuelo: una serie 9 se
       pliega en «Otros», no estrena color.
   Lo NO medido nunca lleva color: gris punteado (--sin-datos), como los
   servicios en pausa del mapa de red.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Papel y tinta ──────────────────────────────────────────────────────
     Neutros de verdad (sin azul dentro). El tema anterior tiraba a marino
     (#0c1220): sobre un fondo así, un gris frío ya parece "un color" y la
     regla de arriba se cae sola. */
  --papel:        #0b0b0c;   /* fondo base */
  --papel-2:      #141416;   /* tarjetas */
  --papel-3:      #1c1c1f;   /* elevado, hover */
  --papel-4:      #26262a;   /* controles */

  --tinta-alta:   #ffffff;   /* titulares y el acento de la marca */
  --tinta:        #ededee;   /* texto normal */
  --tinta-2:      #a8a8ad;   /* secundario */
  --tinta-3:      #74747b;   /* apoyo, unidades, marcas de tiempo */
  --tinta-4:      #4a4a51;   /* deshabilitado */

  --linea:        rgba(255,255,255,.10);
  --linea-fuerte: rgba(255,255,255,.24);
  --linea-viva:   rgba(255,255,255,.55);

  /* Lo que no se ha medido. Gris y punteado en todas partes: un nodo, una
     barra o una fila sin dato no se pintan de rojo — rojo es "medido y mal". */
  --sin-datos:    #5a5a61;

  /* ── Estado ─────────────────────────────────────────────────────────────
     Reservados. No se usan como serie de gráfica ni como adorno. */
  --bien:         #3fb950;
  --aviso:        #d29922;
  --serio:        #db6d28;
  --critico:      #f85149;
  --bien-tenue:   rgba(63,185,80,.14);
  --aviso-tenue:  rgba(210,153,34,.14);
  --serio-tenue:  rgba(219,109,40,.14);
  --critico-tenue:rgba(248,81,73,.14);

  /* ── Series de gráfica ──────────────────────────────────────────────────
     Orden fijo. Validado con scripts/validate_palette.js contra este papel
     (#0b0b0c): banda de luminosidad, croma, separación para daltonismo
     (peor par adyacente ΔE 8,4 protan) y contraste ≥3:1 — las cinco pasan.
     No tocar un hex sin volver a pasar el validador. */
  --serie-1: #3987e5;  /* azul    */
  --serie-2: #d95926;  /* naranja */
  --serie-3: #199e70;  /* verde azulado */
  --serie-4: #c98500;  /* ámbar   */
  --serie-5: #d55181;  /* magenta */
  --serie-6: #008300;  /* verde   */
  --serie-7: #9085e9;  /* violeta */
  --serie-8: #e66767;  /* rojo    */
  /* Dispersión, burbujas y mapas de calor comparan TODOS los pares entre sí,
     no solo los vecinos: ahí solo las tres primeras aguantan. Con más de tres
     series, agrupar en «Otros» o partir en gráficas pequeñas. */
  --series-max-todos-los-pares: 3;

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Tres papeles, y cada uno se gana el suyo:
       · Archivo — grotesca de asta estrecha, aguanta el titular grande sin
         inflarse y las mayúsculas pequeñas de los antetítulos.
       · JetBrains Mono — todo lo que es una MEDIDA: cifras, horas, nombres de
         host, identificadores CVE, huellas. Cifras de ancho fijo, así que una
         columna de números se lee como una columna. No es nostalgia de
         terminal: es la razón por la que existe la mono.
       · La de sistema como red de seguridad. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dato:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica — razón 1,25 desde 16 px. */
  --t-xs: .6875rem;  --t-sm: .8125rem;  --t-base: 1rem;
  --t-md: 1.25rem;   --t-lg: 1.5625rem; --t-xl: 1.953rem;
  --t-2xl: 2.441rem; --t-3xl: 3.052rem; --t-4xl: 3.815rem;

  /* Ritmo — todo múltiplo de 4. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  --radio:    4px;   /* Casi recto: esto es instrumental, no una app de ocio. */
  --radio-lg: 8px;

  /* ── Marca del cliente ──────────────────────────────────────────────────
     El panel de cada inquilino se sirve con estos tres valores sobreescritos
     desde su configuración (ver app/api/branding.py). El acento por defecto es
     blanco porque la marca base NO tiene color: así, el día que un cliente pone
     el suyo, es lo único con color en el marco de la pantalla y se lee como
     suyo. Los colores de estado y de serie NUNCA se personalizan: significan
     algo, y un cliente no puede redefinir qué es "crítico". */
  --acento:        var(--tinta-alta);
  --acento-tinta:  var(--papel);      /* texto sobre el acento */
  --marca-logo:    none;
}

/* Tema claro — lo usan los informes PDF y el que lo prefiera. Se redefine solo
   lo que cambia; los tokens siempre nacen en :root para que nada dependa de
   estar dentro de una media query. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --papel: #ffffff; --papel-2: #f6f6f7; --papel-3: #ededef; --papel-4: #e2e2e5;
    --tinta-alta: #0b0b0c; --tinta: #1c1c1f; --tinta-2: #55555c;
    --tinta-3: #74747b; --tinta-4: #a8a8ad;
    --linea: rgba(0,0,0,.12); --linea-fuerte: rgba(0,0,0,.26);
    --linea-viva: rgba(0,0,0,.62);
    --sin-datos: #9a9aa1;
    --bien: #1a7f37; --aviso: #9a6700; --serio: #bc4c00; --critico: #cf222e;
    /* Series steppeadas para papel blanco (mismos ocho tonos, otro escalón).
       Aviso del validador: verde azulado, ámbar y magenta quedan por debajo de
       3:1 sobre blanco — en claro esas series van SIEMPRE con etiqueta directa
       o con la tabla de datos al lado. No es opcional. */
    --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
    --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948;
    --acento-tinta: #ffffff;
  }
}
[data-tema="claro"] {
  --papel: #ffffff; --papel-2: #f6f6f7; --papel-3: #ededef; --papel-4: #e2e2e5;
  --tinta-alta: #0b0b0c; --tinta: #1c1c1f; --tinta-2: #55555c;
  --tinta-3: #74747b; --tinta-4: #a8a8ad;
  --linea: rgba(0,0,0,.12); --linea-fuerte: rgba(0,0,0,.26);
  --linea-viva: rgba(0,0,0,.62);
  --sin-datos: #9a9aa1;
  --bien: #1a7f37; --aviso: #9a6700; --serio: #bc4c00; --critico: #cf222e;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948;
  --acento-tinta: #ffffff;
}

/* ── Piezas compartidas ──────────────────────────────────────────────────── */

/* El antetítulo. Mayúsculas pequeñas en mono, con una regla delante: es la
   etiqueta de un instrumento, no un adorno. */
.marca-eyebrow{
  font-family:var(--dato); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
  display:flex; align-items:center; gap:var(--e-3);
}
.marca-eyebrow::before{
  content:""; width:24px; height:1px; background:var(--linea-fuerte); flex:none;
}

/* Toda cifra es una medida: mono, tabular, y su unidad en tinta de apoyo. */
.dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; }
.dato .unidad{ color:var(--tinta-3); font-size:.8em; margin-left:.15em; }

/* La firma de la casa: la marca de evidencia. Un dato que se afirma lleva al
   lado de dónde salió. Es la promesa del producto convertida en tipografía —
   y es lo que hace que el blanco y negro no sea sosería, sino la afirmación
   de que aquí nada se pinta de color sin haberlo medido. */
.evidencia{
  font-family:var(--dato); font-size:var(--t-xs); color:var(--tinta-3);
  border-left:1px solid var(--linea-fuerte); padding-left:var(--e-3);
  line-height:1.5;
}
.evidencia b{ color:var(--tinta-2); font-weight:500; }

/* Estado: color + palabra, nunca color solo. */
.estado{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--dato); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.08em; padding:2px var(--e-2); border-radius:var(--radio);
  border:1px solid currentColor;
}
.estado::before{ content:""; width:6px; height:6px; border-radius:50%;
                 background:currentColor; flex:none; }
.estado--bien{ color:var(--bien); }
.estado--aviso{ color:var(--aviso); }
.estado--serio{ color:var(--serio); }
.estado--critico{ color:var(--critico); }
/* Sin medir: gris y punteado. No es un estado bueno ni malo, es la ausencia
   de medida, y el borde discontinuo lo dice sin necesidad de leerlo. */
.estado--sin-datos{ color:var(--sin-datos); border-style:dashed; }
.estado--sin-datos::before{ background:none; box-shadow:inset 0 0 0 1px currentColor; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}