/* ══════════════════════════════════════════════════════════════
   KACHAI · Sistema de diseño unificado

   La PORTADA es la fuente de verdad estética. Estos tokens replican la
   paleta de landing.css —profundidad azul-noche con los acentos de la
   bandera de Chile— para que el chat y el grafo hereden exactamente la
   misma identidad.

   Si cambia la portada, se cambia aquí y el resto sigue.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Bandera de Chile sobre fondo oscuro ─────────────────────
     El azul y el rojo se aclaran respecto del pantone plano para
     sostener contraste AA sobre la noche, sin perder el matiz. */
  --cl-azul: #1E5BD6;
  --cl-azul-claro: #4E8CF0;
  --cl-azul-brillante: #6BA3FF;
  --cl-azul-bandera: #0033A0;
  --cl-azul-tenue: rgba(78, 140, 240, .14);
  --cl-rojo: #C8102E;
  --cl-rojo-claro: #E8657A;
  --cl-rojo-tenue: rgba(232, 101, 122, .14);
  --cl-blanco: #FFFFFF;

  /* ── Profundidad: fondo y superficies (portada) ──────────── */
  --noche: #020713;
  --noche-profunda: #01040c;
  --noche-hero: #020814;
  --superficie: rgba(9, 19, 38, .72);
  --superficie-fuerte: rgba(10, 22, 44, .9);
  --superficie-hover: rgba(78, 140, 240, .10);

  /* Alias de compatibilidad: el chat nombraba papel/tinta cuando era
     claro. Ahora apuntan a la profundidad de la portada. */
  --papel: var(--noche);
  --papel-2: var(--noche-profunda);
  --papel-3: #0b1830;

  /* ── Tinta (texto) ──────────────────────────────────────── */
  --tinta: #F4F7FF;
  --tinta-2: #DBE8F8;
  --tinta-3: #9BAAC4;
  --tinta-4: #6F84A4;

  --linea: rgba(157, 193, 245, .14);
  --linea-2: rgba(157, 193, 245, .24);
  --linea-fuerte: rgba(200, 16, 46, .30);

  /* ── Acentos semánticos ──────────────────────────────────── */
  --acento: var(--cl-azul-claro);
  --acento-suave: var(--cl-azul-tenue);
  --peligro: var(--cl-rojo-claro);
  --peligro-suave: var(--cl-rojo-tenue);
  --exito: #3EE6A0;
  --aviso: #FBBF24;

  /* Degradado tricolor de marca, igual que en la portada. */
  --grad-marca: linear-gradient(102deg, var(--cl-azul-brillante) 0%, var(--cl-azul-bandera) 42%, #FFFFFF 62%, var(--cl-rojo) 100%);

  /* ── Código ──────────────────────────────────────────────── */
  --code-fondo: #01040c;
  --code-tinta: #DBE8F8;
  --code-linea: rgba(157, 193, 245, .14);
  --tok-kw: #FF8FA3;
  --tok-string: #7EE8B0;
  --tok-number: #F0C674;
  --tok-comment: #6F84A4;
  --tok-fn: #6BA3FF;
  --tok-tag: #FF8FA3;
  --tok-attr: #F0C674;

  /* ── Tipografía ──────────────────────────────────────────── */
  --fuente: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* ── Radios, sombras y ritmo ─────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 12px 40px rgba(0, 0, 0, .28);
  --sombra-3: 0 24px 70px rgba(0, 0, 0, .38);

  --franja-alto: 3px;
  --transicion: .16s cubic-bezier(.4, 0, .2, 1);
}

/* ── Franja tricolor: firma visual de la marca ─────────────── */
.franja {
  display: flex;
  height: var(--franja-alto);
  flex: 0 0 auto;
}
.franja__azul { flex: 1; background: var(--cl-azul-bandera); }
.franja__blanco { flex: 1; background: var(--cl-blanco); }
.franja__rojo { flex: 1; background: var(--cl-rojo); }

/* ── Accesibilidad transversal ─────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}