/* ==================================================================== MARCA LINEX (2026-11-11)
   La misma identidad que las demás apps publicadas en Athena (Vela, Aira, Kairos, Prisma, Halko):
   azul noche, azul violeta, violeta, lavanda y lila, con Geist como tipografía. Antes la consola
   pintaba con el tenant «ultragroup» del sistema de diseño (Manrope, grises fríos, foco naranja) y
   la portada de Felix con otra paleta: la entrada y la app no parecían el mismo producto.

   Cómo se usa: se carga DESPUÉS de vendor/linex-ds/alias.css y componentes.css, y pisa los tokens
   de la app (--plano, --superficie, --texto, --acento…). La consola, el módulo de N1/N2, el triage
   y la portada cargan este mismo archivo: un solo lugar decide el color y la letra de todo.

   Tema: oscuro por defecto; el claro se elige con el botón «Tema». Ya no se sigue al sistema: cada
   página pone data-theme antes de pintar. El diseño (aurora, vidrio, riel, barra flotante) lo pone
   marca/cabina.css, que se carga después y ajusta los tokens de los DOS temas: aquí quedan la
   paleta, la fuente y los valores de respaldo.

   Los colores de estado (ok, aviso, serio, crítico) siguen saliendo del sistema de diseño. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("geist-variable-latin.woff2") format("woff2");
}

/* La paleta, con los nombres que usa la marca. No cambia con el tema. */
:root {
  --linex-azul-noche: #17153b;
  --linex-azul-violeta: #5b5cff;
  --linex-azul-violeta-hover: #4749e0;
  --linex-violeta: #6d28d9;
  --linex-lavanda: #dde1ff;
  --linex-lila: #e0b3ff;
  --linex-negro: #080808;
  --linex-fuente: "Geist", Calibri, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ claro (por defecto) */
:root,
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --plano: #f4f5ff;
  --superficie: #ffffff;
  --superficie-2: #f3f4fd;
  --borde: #e3e5f5;
  --borde-suave: #eceefa;
  --texto: var(--linex-azul-noche);
  --texto-2: #4a4b63;
  --texto-3: #6e6c8a;
  --acento: var(--linex-azul-violeta);
  --acento-tinta: var(--linex-azul-violeta-hover);
  --acento-suave: rgba(91, 92, 255, 0.28);
  --acento-fondo: #ededff;
  --sobre-acento: #ffffff;
  --gris-serie: #cfd2ea;
  --foco: var(--linex-azul-violeta);
  --sombra: 0 1px 2px rgba(23, 21, 59, 0.04), 0 6px 20px rgba(23, 21, 59, 0.05);
  --sombra-alta: 0 8px 24px -8px rgba(23, 21, 59, 0.18), 0 2px 6px rgba(23, 21, 59, 0.06);
  --fuente: var(--linex-fuente);

  /* El lateral es azul noche en los dos temas. */
  --lateral-fondo: var(--linex-azul-noche);
  --lateral-hover: #232055;
  --lateral-texto: #d7d6ee;
  --lateral-texto-suave: #8e8cb8;
  --lateral-linea: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------ oscuro (solo si se fija) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0d0c22;
  --superficie: #17153b;
  --superficie-2: #1f1d4a;
  --borde: rgba(255, 255, 255, 0.14);
  --borde-suave: rgba(255, 255, 255, 0.08);
  --texto: #f4f3ff;
  --texto-2: #c7c6e6;
  --texto-3: #9291b8;
  --acento: var(--linex-azul-violeta);
  --acento-tinta: #b7bbff;
  --acento-suave: rgba(91, 92, 255, 0.45);
  --acento-fondo: #262459;
  --sobre-acento: #ffffff;
  --gris-serie: #3b3970;
  --foco: #9c9eff;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --sombra-alta: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --fuente: var(--linex-fuente);

  --lateral-fondo: #131130;
  --lateral-hover: #232055;
  --lateral-texto: #d7d6ee;
  --lateral-texto-suave: #8e8cb8;
  --lateral-linea: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------ base de marca */
body { font-family: var(--fuente); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { letter-spacing: -0.02em; }
::selection { background: var(--acento-suave); }

/* Botón de acción: el azul violeta con su sombra, como en Halko y Kairos. */
button.primario, .btn.primario { box-shadow: 0 1px 2px rgba(23, 21, 59, 0.08); }
button.primario:hover, .btn.primario:hover { background: var(--linex-azul-violeta-hover); filter: none; }
button.primario:disabled, .btn.primario:disabled { background: var(--acento); }

/* ------------------------------------------------------------------ lateral azul noche
   La piel del lateral, compartida por la consola y por el módulo de N1/N2 cuando se abre suelto.
   Dentro, los tokens de la app se redefinen para fondo oscuro: lo que viva ahí (chips, íconos,
   el menú de cuenta) se pinta bien sin reglas aparte. */
.lateral {
  background: var(--lateral-fondo);
  color: var(--lateral-texto);
  border-right: 0;
  --superficie: var(--lateral-fondo);
  --superficie-2: var(--lateral-hover);
  --texto: #ffffff;
  --texto-2: var(--lateral-texto);
  --texto-3: var(--lateral-texto-suave);
  --borde: rgba(255, 255, 255, 0.16);
  --borde-suave: var(--lateral-linea);
  --acento-fondo: rgba(255, 255, 255, 0.08);
  --acento-tinta: #ffffff;
  --foco: #b7bbff;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.lateral .marca-txt strong { color: #ffffff; letter-spacing: -0.02em; }
.lateral .marca-txt small { color: var(--lateral-texto-suave); }
.lateral .logo { background: var(--linex-azul-violeta); color: #ffffff; }
.lateral nav .grupo { color: var(--lateral-texto-suave); }
.lateral nav a, .lateral nav button { color: var(--lateral-texto); border-radius: 8px; }
.lateral nav a:hover, .lateral nav button:hover { background: var(--lateral-hover); color: #ffffff; }
.lateral nav a.activa, .lateral nav button.activa {
  background: rgba(255, 255, 255, 0.08); color: #ffffff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--linex-azul-violeta);
}
.lateral .pie-lateral { border-top: 1px solid var(--lateral-linea); }
.lateral .solo-lectura { color: var(--lateral-texto-suave); border-color: rgba(255, 255, 255, 0.16); }
.lateral .btn.fantasma, .lateral button.fantasma { color: var(--lateral-texto); }
.lateral .btn.fantasma:hover, .lateral button.fantasma:hover { background: var(--lateral-hover); color: #ffffff; }