/* ============================================================================
   █  1. TOKENS — PANEL DE CONTROL DEL DISEÑO
   ============================================================================
   👋 David: ESTE es el archivo principal para cambiar la apariencia.
   Casi todo (colores, tamaños de letra, redondeos, ancho del menú, alto de las
   barras…) se controla desde aquí. Cambia el valor, guarda y recarga la web.

   Los colores son EXACTAMENTE los del design system oficial shadcn/ui
   (tema "zinc"). Descargados de ui.shadcn.com — no son una imitación.

   ── CÓMO LEER LOS COLORES ────────────────────────────────────────────────
   Van en formato HSL con 3 números:   TONO  SATURACIÓN%  LUZ%
   Ejemplo:   --border: 240 5.9% 90%;
                        │    │     └── LUZ: 100% = blanco, 0% = negro
                        │    └──────── SATURACIÓN: 0% = gris puro
                        └───────────── TONO: 0-360 (240 = azulado frío)

   TRUCOS RÁPIDOS:
   · ¿Líneas demasiado marcadas?  →  sube la LUZ de --border (90% → 94%)
   · ¿Textos grises poco legibles? →  baja la LUZ de --muted-foreground
   · ¿Quieres todo más redondeado? →  sube --radius (0.5rem → 0.85rem)
   · ¿Menú con letra más grande?   →  sube --fs-nav
   · ¿Barras más juntas?           →  baja --lane-h y --bar-h

   Si algo se rompe, vuelve a poner el valor anterior. No se estropea nada. 🙂
   ============================================================================ */

:root {

  /* ══════════════════════════════════════════════════════════════════
     A) COLORES — tema oficial shadcn/ui "zinc"
     ══════════════════════════════════════════════════════════════════ */

  --background:           0 0% 100%;       /* Fondo de la zona principal (blanco) */
  --foreground:           240 10% 3.9%;    /* Texto principal (casi negro) */

  --card:                 0 0% 100%;       /* Fondo de tarjetas */
  --card-foreground:      240 10% 3.9%;    /* Texto dentro de tarjetas */

  --popover:              0 0% 100%;       /* Fondo de menús flotantes */
  --popover-foreground:   240 10% 3.9%;

  --primary:              240 5.9% 10%;    /* Color de acento: barra seleccionada, botón sólido */
  --primary-foreground:   0 0% 98%;        /* Texto sobre el color de acento */

  --secondary:            240 4.8% 95.9%;  /* Gris claro: fondo de las barras de estéticas */
  --secondary-foreground: 240 5.9% 10%;

  --muted:                240 4.8% 95.9%;  /* Gris claro para fondos suaves */
  --muted-foreground:     240 3.8% 46.1%;  /* Texto secundario (gris medio) */

  --accent:               240 4.8% 95.9%;  /* Fondo al pasar el ratón (hover) */
  --accent-foreground:    240 5.9% 10%;

  --destructive:          0 84.2% 60.2%;   /* Rojo de error */
  --destructive-foreground: 0 0% 98%;

  --bar-color:            240 3% 58%;      /* ⭐ Gris de TODAS las barras de estéticas (uniforme) */

  --border:               240 5.9% 90%;    /* ⭐ COLOR DE TODAS LAS LÍNEAS */
  --input:                240 5.9% 90%;    /* Borde de los campos de texto */
  --ring:                 240 5.9% 10%;    /* Color del halo de foco (accesibilidad) */

  /* ── Colores del MENÚ LATERAL (bloque "sidebar" oficial de shadcn) ── */
  --sidebar-background:        0 0% 98%;      /* Fondo del menú: blanco roto, separa sin línea dura */
  --sidebar-foreground:        240 5.3% 26.1%;/* Texto del menú */
  --sidebar-primary:           240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent:            240 4.8% 95.9%;/* Fondo del ítem activo / hover del menú */
  --sidebar-accent-foreground: 240 5.9% 10%;  /* Texto del ítem activo */
  --sidebar-border:            220 13% 91%;   /* (sin uso visible: look flotante sin líneas) */
  --sidebar-ring:              217.2 91.2% 59.8%;

  /* ⭐ Fondo de PÁGINA (detrás de los paneles flotantes) — gris muy claro */
  --page-background: 240 20% 98%;


  /* ══════════════════════════════════════════════════════════════════
     B) REDONDEO DE ESQUINAS
     Valor oficial de shadcn = 0.5rem. Súbelo para un look más suave.
     ══════════════════════════════════════════════════════════════════ */
  --radius: 0.5rem;


  /* ══════════════════════════════════════════════════════════════════
     C) SOMBRAS (las de Tailwind/shadcn).
     shadcn usa sombras MUY suaves en lugar de líneas duras: eso es lo
     que da el aspecto moderno. Si quieres aún menos, baja los 0.05/0.1.
     ══════════════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);


  /* ══════════════════════════════════════════════════════════════════
     D) TIPOGRAFÍA — única fuente permitida: Inter Tight
     Cambia SOLO los números. 1rem = 16px.
     ══════════════════════════════════════════════════════════════════ */
  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:    0.75rem;    /* 12px — etiquetas pequeñas, años, secciones en MAYÚSCULAS */
  --fs-sm:    0.875rem;   /* 14px — tamaño estándar de shadcn (botones, campos) */
  --fs-base:  1rem;       /* 16px — texto normal */
  --fs-nav:   1rem;       /* 16px — ⭐ TEXTO DEL MENÚ (súbelo a 1.0625rem si lo quieres mayor) */
  --fs-bar:   0.8125rem;  /* 13px — texto dentro de las barras de la timeline */
  --fs-lg:    1.125rem;   /* 18px — subtítulos */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px — título del panel de detalle */

  --lh-none:  1;
  --lh-tight: 1.25;
  --lh-snug:  1.375;
  --lh-normal:1.5;

  --tracking-tight: -0.01em;   /* letras un poco más juntas en títulos */
  --tracking-wide:  0.03em;    /* letras separadas en textos en MAYÚSCULAS */


  /* ══════════════════════════════════════════════════════════════════
     E) ESPACIADOS (escala de Tailwind: 1 unidad = 4px)
     ══════════════════════════════════════════════════════════════════ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;


  /* ══════════════════════════════════════════════════════════════════
     F) MEDIDAS DE LA PÁGINA
     ══════════════════════════════════════════════════════════════════ */
  --sidebar-w:   25vw;    /* Ancho del menú lateral (25% de la pantalla) */
  --sidebar-min: 300px;   /* Nunca más estrecho que esto */
  --sidebar-max: 400px;   /* ⭐ Nunca más ancho. SÚBELO si quieres el logo más grande */
  --panel-w:     380px;   /* Ancho del panel de detalle de la derecha */
  --tap:         40px;    /* Zona clicable mínima cómoda */

  --logo-max:    260px;   /* ⭐ ANCHO MÁXIMO DEL LOGO. Súbelo para un logo más grande */


  /* ══════════════════════════════════════════════════════════════════
     G) MEDIDAS DE LA TIMELINE  ⭐ (apilado de estéticas)
     · --lane-h : alto de cada fila → BÁJALO para apilar más compacto
     · --bar-h  : alto de cada barra
       (deja siempre --bar-h un poco menor que --lane-h)
     ══════════════════════════════════════════════════════════════════ */
  --lane-h: 24px;
  --bar-h:  22px;   /* casi = lane-h → barras casi pegadas, bloque compacto */
  --gap-outer: 16px; /* ⭐ separación entre los paneles flotantes y el borde de pantalla */
  --rail-h: 48px;   /* Alto de la franja de EVENTOS (arriba) */
  --axis-h: 36px;   /* Alto de la franja de AÑOS (abajo) */


  /* ══════════════════════════════════════════════════════════════════
     H) ANIMACIÓN
     ══════════════════════════════════════════════════════════════════ */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);   /* curva estándar de Tailwind */


  /* ══════════════════════════════════════════════════════════════════
     ⛔ ZONA TÉCNICA — no hace falta tocar nada de aquí abajo.
     Son atajos calculados a partir de los valores de arriba.
     ══════════════════════════════════════════════════════════════════ */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Accesibilidad: si el sistema pide menos animación, la desactivamos. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}