/* Hero App — Design System v1
 * Hero Fight Club · derivado del logo real (design/assets/hero-logo.jpg)
 * © 2026 SAICODE · Víctor Alejandro Saico Justo
 * Regla: ningún mockup escribe hex crudo. Todo por var(--hero-*).
 */

:root {
  /* --- Superficies (navy del logo) --- */
  --hero-ink:        #04121F;
  --hero-ink-deep:   #020A12;
  --hero-surface:    #0A1E31;
  --hero-surface-2:  #122C45;
  --hero-line:       #1C3D5C;
  --hero-line-soft:  rgba(127, 182, 230, 0.14);

  /* --- Azul del león --- */
  --hero-blue:        #0F5A92;
  --hero-blue-bright: #1B72BF;   /* relleno de CTA: blanco encima = 4.99:1 */
  --hero-blue-hover:  #175FA0;   /* hover/press oscurece; blanco encima = 6.6:1 */
  --hero-blue-soft:   #7FB6E6;
  --hero-blue-wash:   rgba(27, 114, 191, 0.14);

  /* --- Texto --- */
  --hero-text:   #F2F7FB;
  --hero-text-2: #9FB6CB;
  --hero-text-3: #8099AE;        /* sobre superficie = 5.70:1 */

  /* --- Estado --- */
  --hero-ok:     #35C08A;
  --hero-warn:   #F2A93B;
  --hero-danger: #EC5A50;        /* sobre superficie = 4.94:1 */
  /* --- Brasa: SOLO gamificación de nivel Club (rachas, insignias, subida de grado).
   *     NUNCA es un color de estado. El rojo de estado sigue siendo --hero-danger y solo ese.
   *     Se distingue del danger porque siempre aparece en degradado con núcleo amarillo,
   *     en movimiento, y jamás dentro de un chip de estado. Ver ADR-014.
   *     --hero-ember-deep es relleno de degradado: no pasa AA como texto (4.21 sobre surface).
   */
  --hero-ember-core: #FFD24A;   /* núcleo de la llama · 11.72 sobre surface */
  --hero-ember:      #FF8A3D;   /* texto e iconos de brasa · 7.20 sobre surface */
  --hero-ember-hot:  #FF6A2B;   /* 5.91 sobre surface */
  --hero-ember-deep: #E8412F;   /* SOLO relleno de degradado, nunca texto */
  --hero-ember-wash: rgba(255, 138, 61, 0.14);
  --hero-ember-glow: 0 0 0 1px rgba(255, 138, 61, .34), 0 6px 22px rgba(232, 65, 47, .42);

  --hero-ok-wash:     rgba(53, 192, 138, 0.14);
  --hero-warn-wash:   rgba(242, 169, 59, 0.14);
  --hero-danger-wash: rgba(236, 90, 80, 0.15);
  --hero-danger-line: rgba(236, 90, 80, 0.30); /* borde de alerta: --hero-danger al 30% */

  /* --- Tipografía --- */
  --hero-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --hero-font-ui:      'Inter', system-ui, -apple-system, sans-serif;

  --hero-t-display: clamp(30px, 8.2vw, 38px);
  --hero-t-h1:      clamp(24px, 6.4vw, 28px);
  --hero-t-h2:      clamp(18px, 4.8vw, 21px);
  --hero-t-body:    16px;
  --hero-t-sm:      14px;
  --hero-t-xs:      12px;

  /* --- Espacio y forma (escala de 4) --- */
  --hero-s1: 4px;  --hero-s2: 8px;  --hero-s3: 12px; --hero-s4: 16px;
  --hero-s5: 20px; --hero-s6: 24px; --hero-s8: 32px; --hero-s10: 40px;

  --hero-r-sm: 8px;
  --hero-r-md: 14px;
  --hero-r-lg: 20px;   /* tarjeta: interior 14 + padding 6 */
  --hero-r-xl: 28px;
  --hero-r-pill: 999px;

  --hero-tap: 44px;    /* touch target mínimo */
  --hero-app-max: 440px; /* la app del alumno no se estira en desktop */

  /* --- Profundidad: sombras por capas, no bordes duros --- */
  --hero-shadow-1: 0 1px 2px rgba(2, 10, 18, .40), 0 2px 6px rgba(2, 10, 18, .28);
  --hero-shadow-2: 0 2px 4px rgba(2, 10, 18, .44), 0 8px 20px rgba(2, 10, 18, .34);
  --hero-glow:     0 0 0 1px rgba(27, 114, 191, .38), 0 8px 24px rgba(15, 90, 146, .38);

  /* --- Movimiento --- */
  /* Game-feel (solo Club): parpadeo de llama y subida de grado */
  --hero-flame:   2.4s;
  --hero-pop:     560ms;
  --hero-ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  --hero-fast: 140ms;
  --hero-base: 220ms;
  --hero-slow: 320ms;
  --hero-ease: cubic-bezier(.22, .61, .36, 1);

  /* ─────────────────────────────────────────────────────────────────────────
   * DS v2 (ADR-042 · 2026-09-24) — SOLO ADITIVO, no renombrar lo de arriba
   * ───────────────────────────────────────────────────────────────────────── */

  /* --- Ámbar Club (píldora NIVEL CLUB y texto de nivel) --- */
  /* Contraste: #E8A020 sobre --hero-surface #0A1E31 = 7.63:1 ✓ AA, AAA */
  /* Contraste: #E8A020 sobre --hero-ink     #04121F = 8.53:1 ✓ AA, AAA */
  --hero-club:      #E8A020;
  --hero-club-wash: rgba(232, 160, 32, 0.15);   /* fondo de la píldora NIVEL CLUB */
  --hero-club-line: rgba(232, 160, 32, 0.38);   /* borde de la píldora NIVEL CLUB */

  /* --- Glow de nodo activo y validado (DS v2) --- */
  /* Box-shadow por capas: anillo sólido + halo suave + aureola difusa */
  --hero-node-glow:   0 0 0 2px rgba(27, 114, 191, .52), 0 0 18px rgba(27, 114, 191, .56), 0 0 40px rgba(15, 90, 146, .30);
  --hero-glow-bright: 0 0 0 1px rgba(27, 114, 191, .56), 0 4px 24px rgba(27, 114, 191, .52), 0 0 48px rgba(15, 90, 146, .32);

  /* --- Superficies adicionales v2 --- */
  --hero-surface-dim:  #060F1A;   /* superficie hundida (fondo del segmentado) · no se usa como texto */
  --hero-node-locked:  #0D2438;   /* relleno del nodo bloqueado */
  /* Contraste: --hero-blue-soft #7FB6E6 sobre --hero-node-locked #0D2438 = 7.34:1 ✓ AA, AAA */
  --hero-node-locked-line: rgba(127, 182, 230, 0.30);  /* borde punteado del nodo bloqueado */

  /* --- Botón danger (ADR-050 · 2026-09-24; corregido QA 4.º pase) ---
   * Contraste calculado con --hero-text #F2F7FB (no con #FFF puro).
   * --hero-danger-strong: relleno en reposo. --hero-text encima = 5.09:1 ✓ AA
   * --hero-danger-hover:  relleno en pressed/hover. --hero-text encima = 6.28:1 ✓ AA
   * --hero-danger (#EC5A50) queda para texto/icono sobre fondo oscuro (3.17:1 → sólo large text ≥3).
   */
  --hero-danger-strong: #C03830;  /* danger button resting fill; --hero-text encima = 5.09:1 ✓ AA */
  --hero-danger-hover:  #A83028;  /* danger button pressed;      --hero-text encima = 6.28:1 ✓ AA */

  /* --- Superficies de credencial vencida (gradiente oscuro danger) --- */
  /* Contraste: --hero-danger #EC5A50 como borde visible sobre ambas = ✓ */
  --hero-danger-surface:      #3D1818;  /* gradiente inicio (tarjeta credencial vencida) */
  --hero-danger-surface-deep: #2A1010;  /* gradiente fin   (tarjeta credencial vencida) */

  /* --- Colores de simulación de chrome del sistema operativo ---
   * Usados SOLO en 11-tutorial.html para simular el share-sheet de iOS/Android.
   * No son colores de marca Hero. */
  --hero-sys-chrome:       #1A1D21;  /* barra superior del browser (chrome oscuro) */
  --hero-sys-chrome-2:     #22262B;  /* menú del share-sheet */
  --hero-sys-chrome-input: #2A2E33;  /* campo URL / input del chrome */
  --hero-sys-chrome-text:  #C9CED6;  /* texto y íconos del chrome (gris claro) */
  --hero-sys-chrome-text-b:#F4F5F7;  /* texto del menú activo del chrome (casi blanco) */
  --hero-sys-chrome-text-s:#9BA2AC;  /* subtítulo del permiso del chrome (gris medio) */
  --hero-sys-chrome-blue:  #5AA9F0;  /* botones de acción del chrome (azul iOS) */

  /* --- Gradiente de fondo de pantalla Compartir (superficie profunda) --- */
  --hero-surface-deep: #0D2A44;  /* punto medio gradiente en pantalla compartir */

  /* --- WhatsApp brand color (botón de compartir por WA) --- */
  /* Ref: https://developers.facebook.com/docs/whatsapp/brand */
  --hero-wa-green: #25D366;

  /* --- Colores de marca Facebook e Instagram (botones de compartir) ---
   * Logos: assets/images/social/ (Simple Icons, CC0). Facebook: azul de marca.
   * Instagram: degradado del glifo, de abajo-izquierda a arriba-derecha. */
  --hero-fb-blue:  #1877F2;
  --hero-ig-yellow: #FEDA77;
  --hero-ig-orange: #F58529;
  --hero-ig-pink:   #DD2A7B;
  --hero-ig-purple: #8134AF;
  --hero-ig-blue:   #515BD4;

  /* --- Colores de marca Google Sign-In (requeridos por Google Brand Guidelines) ---
   * https://developers.google.com/identity/branding-guidelines
   * No modificar: Google prohíbe alterar estos colores en su botón de autenticación. */
  --hero-google-text:      #202124;   /* texto oscuro en botón light */
  --hero-google-bg:        #ffffff;   /* fondo del botón light */
  --hero-google-bg-hover:  #f8f8f8;   /* hover del botón light */
  --hero-google-text-dk:   #E3E3E3;   /* texto claro en botón dark */
  --hero-google-bg-dk:     #131314;   /* fondo del botón dark */
  --hero-google-bg-dk-h:   #1c1c1e;   /* hover del botón dark */
  --hero-google-border-dk: #8E918F;   /* borde del botón dark */
  /* Colores del logotipo G (no modificar) */
  --hero-google-blue:      #4285F4;
  --hero-google-green:     #34A853;
  --hero-google-yellow:    #FBBC05;
  --hero-google-red:       #EA4335;

  /* --- Radios concéntricos v2 --- */
  /* Principio: radio exterior = radio interior + padding. */
  --hero-r-chip:   10px;  /* chip numerado bajo cada nodo */
  --hero-r-seg:    18px;  /* radio exterior del control segmentado */
  --hero-r-seg-in: 14px;  /* radio interior del tab activo (r-seg − 4 px de padding) */

  /* --- Bordes semánticos (partner de los *-wash, mismo patrón que danger-line) --- */
  --hero-ok-line:       rgba(53, 192, 138, .30);
  --hero-warn-line:     rgba(242, 169, 59, .30);
  --hero-blue-line:     rgba(127, 182, 230, .30);

  /* --- Utilidades de overlay --- */
  --hero-overlay:       rgba(2, 10, 18, .72);   /* backdrop de modales */
  --hero-sidebar-scrim: rgba(2, 10, 18, .70);   /* scrim lateral móvil */
  --hero-neutral-wash:  rgba(127, 182, 230, .08); /* fondo badge neutral */
  --hero-focus-ring:    rgba(27, 114, 191, .18); /* ring de foco en inputs */
  --hero-line-hatch:    rgba(28, 61, 92, .18);   /* trama vacía en celdas de horario */
}

/*
 * DS v2 · Gradientes — NO incluidos en hero_tokens.dart (build_tokens.dart no entiende linear-gradient).
 * Para Flutter, usar los colores base en code: LinearGradient(colors: [warn, danger]).
 * Ver DEL-848 para la implementación Flutter.
 */
:root {
  /* Gradiente cálido de racha e insignia: ámbar → rojo, sin magenta nuevo (ADR-042 §4) */
  --hero-streak-gradient:      linear-gradient(135deg, var(--hero-warn) 0%, var(--hero-danger) 100%);
  /* Variante con núcleo ember para el interior de la llama (solo tarjeta de racha) */
  --hero-streak-gradient-full: linear-gradient(160deg, var(--hero-ember-core) 0%, var(--hero-ember) 42%, var(--hero-danger) 100%);
}

/* Números de datos siempre alineados */
.hero-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* El spinner indica progreso esencial (WCAG 2.3.3) — sigue girando con reduced-motion */
  .spinner {
    animation-duration: 700ms !important;
    animation-iteration-count: infinite !important;
  }
}