/* ============================================================================
   HAYESHI · Tokens del sistema de diseño
   ============================================================================

   ESTE ARCHIVO ES EL ÚNICO LUGAR DONDE HAY UN COLOR LITERAL.
   El resto de la hoja de estilos usa `var(--…)`. Si aparece un `#hex` en
   base.css, layout.css o components.css, es un bug.

   ── POR QUÉ EXISTE ────────────────────────────────────────────────────────
   Django tiene TRES sistemas de diseño sin coordinar, y no son variantes del
   mismo: son paletas incompatibles que se pisan por orden de carga.

     1. static/css/main.css:8-104   — crema claro (#faf6ee) + azul marino
                                      (#3e62a7). Es la landing: lo que el dueño
                                      y los estudiantes ven a diario.
     2. static/css/instructor.css:6-40 — oscuro (#0a0a0a) + rojo (#E53935).
     3. una tercera paleta oscura escrita inline en las pantallas de pagos y
        reservas.

   Y el choque es literal: templates/dashboard/base.html:18-19 carga
   instructor.css y encima dashboard.css. Los dos declaran `:root`, así que el
   dashboard hereda la paleta OSCURA — mientras el resto del producto es claro.
   Peor: dashboard.css escribe `border-bottom: 1px solid #222` (líneas 108, 205,
   …) suponiendo fondo negro. Sobre crema esos bordes son barras casi negras.

   Se consolida en UNO, partiendo de main.css (regla del issue #84: gana la
   paleta que el dueño ve a diario).

   ── LO QUE HUBO QUE INVENTAR ──────────────────────────────────────────────
   main.css NO tiene colores de estado (success / warning / error): esos solo
   existían en instructor.css, calibrados para texto sobre #0a0a0a. Copiarlos
   tal cual sobre crema es ilegible — #25D366 sobre #faf6ee da ~1.6:1 de
   contraste, por debajo de cualquier umbral. Así que los de estado se
   recalcularon para fondo claro y se dan en TRÍO:

       --color-<estado>            texto e íconos      (≥ 4.5:1 sobre --color-bg)
       --color-<estado>-surface    relleno del chip    (tinte muy claro)
       --color-<estado>-border     borde del chip

   Nunca usar `--color-success` como fondo con texto blanco encima sin verificar
   el contraste: estos tonos están calibrados como TEXTO.

   Contraste medido sobre el chip correspondiente (el peor caso de los tres
   fondos posibles: chip, crema y blanco). AA para texto normal pide 4.5:1 y un
   chip de 12px en negrita NO califica como texto grande —eso empieza en 18.66px
   en negrita—, así que 4.5 es el piso de verdad:

       success sobre success-surface   5.77:1
       warning sobre warning-surface   5.68:1
       danger  sobre danger-surface    5.61:1
       primary sobre primary-soft      5.19:1
       neutral sobre neutral-surface   4.62:1

   Y los dos niveles de texto sobre las dos superficies:

       text            sobre bg       14.09:1
       text-secondary  sobre bg        5.06:1
       text-secondary  sobre surface   5.46:1

   ── ALIASES QUE NO SE PORTAN ──────────────────────────────────────────────
   main.css arrastra ocho aliases marcados «deprecated» (--color-text-muted,
   --color-bg-elevated, --color-bg-card, --color-accent, --color-secondary…).
   Acá no están: son el mecanismo por el que dos nombres distintos apuntan al
   mismo color hasta que alguien cambia uno solo. Un token, un nombre.
   -------------------------------------------------------------------------- */

:root {
  /* ── Marca ──────────────────────────────────────────────────────────────
     main.css:10-12. El azul marino es el color de la marca; el terracota es
     la acción secundaria de la landing y acá se reserva para acciones
     destacadas que no son el submit principal. */
  --color-primary: #3e62a7;
  --color-primary-hover: #2f4d8a;
  --color-primary-soft: #eaeff8;      /* fondo de estado activo en la navegación */
  --color-on-primary: #ffffff;        /* texto sobre --color-primary */

  --color-accent: #dc6739;            /* main.css:29 — terracota */
  --color-accent-hover: #c2562b;

  /* ── Texto ──────────────────────────────────────────────────────────────
     Dos niveles, no tres. main.css declara --color-text-muted como alias de
     --color-text-secondary; un alias que apunta al mismo valor no es un nivel
     jerárquico, es deuda. */
  --color-text: #1a2540;              /* main.css:11 */
  --color-text-secondary: #5d6b7a;    /* main.css:12 — 4.6:1 sobre --color-bg */

  /* ── Superficies ────────────────────────────────────────────────────────
     main.css:16-22. `bg` es el lienzo crema; `surface` son las tarjetas y la
     tabla, que ganan por contraste de luminosidad, no por sombra pesada. */
  --color-bg: #faf6ee;
  --color-surface: #ffffff;
  --color-surface-hover: #f5f0e6;     /* main.css:20 */
  --color-surface-sunken: #f2ede3;    /* cabecera de tabla, celdas de resumen */
  --color-border: #e8e6e0;            /* main.css:21 */
  --color-border-strong: #d3cfc4;     /* separadores que deben leerse de lejos */

  /* ── Estados ────────────────────────────────────────────────────────────
     Recalculados para fondo claro. Entre paréntesis, el valor de
     instructor.css que reemplazan y por qué no servía.

     El color NUNCA es el único portador de significado: cada chip lleva
     también su texto (`Activa`, `Vencida`, `Pendiente`). Es requisito de
     accesibilidad y además es lo que hace legible una captura en blanco y
     negro por WhatsApp, que es como el dueño comparte estas pantallas. */

  /* (instructor.css: #25D366, el verde de WhatsApp — 1.6:1 sobre crema) */
  --color-success: #166b40;
  --color-success-surface: #e6f4ec;
  --color-success-border: #b7ddc8;

  /* (instructor.css: #FFA726, ámbar claro — 1.8:1 sobre crema) */
  --color-warning: #8a5200;
  --color-warning-surface: #fdf0dd;
  --color-warning-border: #eccfa1;

  /* (instructor.css: #E53935 — 3.9:1 sobre crema, por debajo de 4.5) */
  --color-danger: #b3261e;
  --color-danger-surface: #fbeae8;
  --color-danger-border: #eec3bf;

  --color-info: var(--color-primary);
  --color-info-surface: var(--color-primary-soft);
  --color-info-border: #c5d3ec;

  /* Neutro: para chips sin carga (`Cancelada`, `Sin membresía`). */
  --color-neutral: #5d6b7a;
  --color-neutral-surface: #efece5;
  --color-neutral-border: #ddd8cc;

  /* ── Foco ───────────────────────────────────────────────────────────────
     Un token propio y no `--color-primary`: el anillo de foco tiene que
     verse también encima de un botón primario azul. */
  --color-focus: #1a2540;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* ── Tipografía ─────────────────────────────────────────────────────────
     UNA familia. main.css declara Montserrat para títulos e Inter para
     cuerpo, pero templates/dashboard/base.html:11 solo carga Inter: en el
     dashboard Montserrat nunca existió y los títulos ya caían al sans-serif
     del sistema. Un sistema de diseño con una fuente que no se carga no es un
     sistema, es una intención. Si algún día se quiere Montserrat en los
     títulos, se autoaloja y se agrega el token acá — no antes.

     La pila de respaldo es de fuentes del sistema para que la página sea
     legible mientras Inter viaja (font-display: swap). */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Escala de tamaños. Distinta de la de main.css a propósito: allá `h1` llega
     a 4.5rem (main.css:180-184), que es escala de portada. Un panel de trabajo
     con tablas necesita títulos que quepan al lado de un botón en un celular. */
  --text-xs: 0.75rem;      /* 12px — etiquetas de columna, chips */
  --text-sm: 0.875rem;     /* 14px — texto de tabla, metadatos */
  --text-base: 1rem;       /* 16px — cuerpo. Mínimo en campos de formulario:
                              por debajo, iOS Safari hace zoom al enfocarlos. */
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;     /* título de página. dashboard.css:11 usa 1.75rem. */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ── Espaciado ──────────────────────────────────────────────────────────
     Idéntica a main.css:60-73. Se conserva la escala para que portar la
     landing más adelante sea copiar y pegar. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Layout ─────────────────────────────────────────────────────────────
     main.css:76-77. */
  --container-max: 1200px;
  --container-padding: var(--space-4);

  /* Altura mínima de cualquier cosa que se pueda tocar. El dueño consulta esto
     desde el celular en la academia, muchas veces con una mano. 44px es el
     mínimo de las guías de Apple; 48 el de Material. Se toma el mayor. */
  --tap-target: 48px;

  /* ── Radios y sombras ───────────────────────────────────────────────────
     main.css:80-91. Las sombras son azuladas (rgba del navy) y no negras: sobre
     crema, una sombra negra se ve gris sucio. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(26, 37, 64, 0.06);
  --shadow-md: 0 4px 6px rgba(26, 37, 64, 0.08);
  --shadow-lg: 0 10px 15px rgba(26, 37, 64, 0.1);

  /* ── Movimiento ─────────────────────────────────────────────────────────
     main.css:94-96. Se anulan enteras bajo prefers-reduced-motion (base.css). */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Capas ──────────────────────────────────────────────────────────────
     main.css:99-105 tiene cinco niveles incluido uno dedicado al botón de
     WhatsApp. En el dashboard hay dos cosas que se superponen: la cabecera
     pegajosa y los mensajes flash que van justo debajo. */
  --z-header: 200;
  --z-flash: 300;
}

@media (min-width: 768px) {
  :root {
    /* main.css:107-111 */
    --container-padding: var(--space-8);
  }
}