/* ══════════════════════════════════════════════════════════════
   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;

  /* ── Capa semántica ────────────────────────────────────────
     Los componentes consumen significado, no HEX. Resuelven a los tokens
     de marca de arriba; cada superficie, texto, borde y estado tiene un
     único dueño. En light mode chat-light.css redefine --noche, --tinta,
     --superficie y --linea, así que esta capa se adapta sin duplicarse. */
  --surface-base: var(--noche);
  --surface-raised: var(--superficie);
  --surface-overlay: var(--superficie-fuerte);
  --surface-hover: var(--superficie-hover);
  --text-primary: var(--tinta);
  --text-secondary: var(--tinta-3);
  --text-muted: var(--tinta-4);
  --border-default: var(--linea);
  --border-strong: var(--linea-2);
  --accent-primary: var(--acento);
  --accent-danger: var(--peligro);
  --status-success: var(--exito);
  --status-warning: var(--aviso);

  /* 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%);

  /* ── Acento principal: índigo azulado Kachai ────────────────
     La identidad cromática final es: NAVY (estructura/shell) + ÍNDIGO
     azulado (identidad/acciones) + NEUTROS (contenido) + ROJO (solo
     danger semántico). --accent-primary es el CTA sólido (texto blanco,
     AA en dark y light); --chat-accent es la variante clara del mismo
     índigo para texto/labels sobre navy oscuro. */
  --accent-primary: #5146E5;
  --accent-primary-hover: #6257F0;
  --accent-primary-soft: rgba(81, 70, 229, .15);

  /* Alias de compatibilidad: diálogo y chat consumen el mismo acento. */
  --dialog-accent: var(--accent-primary);
  --dialog-accent-hover: var(--accent-primary-hover);
  --dialog-accent-soft: var(--accent-primary-soft);
  --dialog-surface: var(--surface-overlay);
  --dialog-border: var(--border-default);
  --dialog-shadow: var(--sombra-3);

  /* ── Mensajes del chat ────────────────────────────────────
     La burbuja propia usa un índigo más profundo que el CTA para no
     confundirse con un botón; el texto es blanco (AA). */
  --chat-accent: #8B8BFF;
  --chat-accent-hover: #9F9FFF;
  --chat-accent-soft: var(--accent-primary-soft);
  --chat-user-bg: #3D36B0;
  --chat-user-bg-hover: #4338CA;
  --chat-user-border: color-mix(in srgb, var(--chat-user-bg) 58%, var(--noche-profunda));
  --chat-user-text: #FFFFFF;
  --chat-user-text-soft: rgba(255, 255, 255, .84);

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

  /* ── Tipografía ──────────────────────────────────────────── */
  --fuente: 'Geist', 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;
}