/* ==========================================================================
   GolPredict.com — main.css
   Scope: Variables globales, reset, tipografía, helpers de utilidad.
   Este archivo es la base de la cascada; se carga primero.
   Orden: layout.css → components.css → animations.css
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   Filosofía: todas las decisiones de diseño viven aquí.
   Para cambiar el tema completo, solo se modifica este bloque.
   ========================================================================== */

:root {

  /* ── Paleta base (Dark Mode premium deportivo) ──────────────────────── */
  /* Capas de profundidad: bg-deep → bg-base → bg-surface → bg-elevated    */
  --color-bg-deep:        #080810;   /* Fondo más oscuro (detrás del sidebar) */
  --color-bg-base:        #0d0d1a;   /* Fondo de la app principal             */
  --color-bg-surface:     #12122a;   /* Cards, paneles, inputs                */
  --color-bg-elevated:    #1a1a38;   /* Hover states, elementos flotantes     */
  --color-bg-overlay:     rgba(8, 8, 16, 0.85); /* Fondos de modales         */

  /* ── Colores de marca ───────────────────────────────────────────────── */
  /* Extraídos del logo oficial: "Gol" verde + "Predict" azul/negro        */
  --color-brand-green:    #27AE60;   /* Verde "Gol" — color primario de marca */
  --color-brand-green-l:  #2ecc71;   /* Verde más brillante (hover, glow)     */
  --color-brand-green-d:  #1e8449;   /* Verde oscuro (pressed state)          */
  --color-brand-navy:     #1c2e3e;   /* Azul marino "Predict"                 */
  --color-brand-dark:     #253545;   /* Casi negro de la tipografía del logo  */

  /* ── Acentos de feedback (DEFINIDOS EN EL REPORTE) ─────────────────── */
  /* CRÍTICO: estos 3 colores son el lenguaje visual del motor de puntos   */
  --accent-green:         #00d68f;   /* Acierto Semanal (exact + trend)       */
  --accent-green-glow:    rgba(0, 214, 143, 0.20);
  --accent-blue:          #2979ff;   /* Acierto Mundial                       */
  --accent-blue-glow:     rgba(41, 121, 255, 0.20);
  --accent-red:           #d32f2f;   /* Fallo, cero, no predijo               */
  --accent-red-glow:      rgba(211, 47, 47, 0.20);
  --accent-gold:          #f9a825;   /* Premio, podio, estrella               */
  --accent-gold-glow:     rgba(249, 168, 37, 0.20);
  --accent-silver:        #90a4ae;   /* 2do lugar, secondary highlights       */
  --accent-bronze:        #a1655a;   /* 3er lugar                             */

  /* ── Premium / Monetización ─────────────────────────────────────────── */
  --color-premium:        #f9a825;   /* Dorado Premium — botones, badges      */
  --color-premium-l:      #fbc02d;   /* Hover                                 */
  --color-premium-d:      #f57f17;   /* Pressed                               */
  --color-premium-glow:   rgba(249, 168, 37, 0.25);
  --color-ticket:         #7c4dff;   /* Violeta para botones de Ticket/Event  */
  --color-ticket-l:       #9c6ffe;
  --color-ticket-glow:    rgba(124, 77, 255, 0.25);

  /* ── Tipografía de texto ────────────────────────────────────────────── */
  --color-text-primary:   #f0f0f8;   /* Texto principal                       */
  --color-text-secondary: #9090b0;   /* Texto secundario, labels              */
  --color-text-muted:     #565678;   /* Texto deshabilitado, placeholders     */
  --color-text-inverse:   #0d0d1a;   /* Texto sobre fondos claros             */

  /* ── Bordes y separadores ──────────────────────────────────────────── */
  --color-border:         rgba(255, 255, 255, 0.07);
  --color-border-strong:  rgba(255, 255, 255, 0.14);
  --color-border-focus:   var(--color-brand-green);

  /* ── Sombras ────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-green: 0 0 20px var(--accent-green-glow);
  --shadow-gold:  0 0 20px var(--color-premium-glow);
  --shadow-blue:  0 0 20px var(--accent-blue-glow);

  /* ── Tipografía: Familias ───────────────────────────────────────────── */
  /* Bebas Neue: displays, números grandes, scores, títulos de impacto    */
  /* DM Sans: UI, labels, texto corrido, formularios                      */
  --font-display:  'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Tipografía: Escala modular (base 16px, ratio 1.25) ─────────────── */
  --text-xs:    0.700rem;   /*  11.2px */
  --text-sm:    0.813rem;   /*  13px   */
  --text-base:  1.000rem;   /*  16px   */
  --text-md:    1.125rem;   /*  18px   */
  --text-lg:    1.250rem;   /*  20px   */
  --text-xl:    1.500rem;   /*  24px   */
  --text-2xl:   1.875rem;   /*  30px   */
  --text-3xl:   2.250rem;   /*  36px   */
  --text-4xl:   3.000rem;   /*  48px   */
  --text-5xl:   4.000rem;   /*  64px   */
  --text-display: 5.5rem;   /*  88px — Bebas Neue en scores grandes        */

  /* ── Pesos tipográficos ─────────────────────────────────────────────── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Espaciado (múltiplos de 4px) ───────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px  */
  --space-2:   0.50rem;   /*  8px  */
  --space-3:   0.75rem;   /* 12px  */
  --space-4:   1.00rem;   /* 16px  */
  --space-5:   1.25rem;   /* 20px  */
  --space-6:   1.50rem;   /* 24px  */
  --space-8:   2.00rem;   /* 32px  */
  --space-10:  2.50rem;   /* 40px  */
  --space-12:  3.00rem;   /* 48px  */
  --space-16:  4.00rem;   /* 64px  */
  --space-20:  5.00rem;   /* 80px  */
  --space-24:  6.00rem;   /* 96px  */

  /* ── Radios de borde ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;  /* Píldoras, avatares circulares */

  /* ── Transiciones ───────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale (previene guerras de z-index) ────────────────────── */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sidebar:    300;
  --z-topbar:     400;
  --z-overlay:    500;
  --z-modal:      600;
  --z-toast:      700;
  --z-splash:     999;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-width:        240px;
  --sidebar-width-collapsed: 0px;
  --topbar-height:        60px;
  --content-max-width:    960px;

  /* ── Dimensiones de componentes ─────────────────────────────────────── */
  --card-fixture-width:   280px;
  --avatar-sm:            32px;
  --avatar-md:            40px;
  --avatar-lg:            72px;
  --avatar-xl:            96px;
  --crest-sm:             28px;
  --crest-md:             40px;
  --crest-lg:             56px;

  /* ── Input de predicción (los números de marcador) ──────────────────── */
  --score-input-size:     52px;
}


/* ==========================================================================
   2. RESET MODERNO
   Basado en "A Modern CSS Reset" de Andy Bell, adaptado para dark UI.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Previene overflow horizontal accidental en mobile */
html {
  overflow-x: hidden;
  /* Scroll suave para navegación interna */
  scroll-behavior: smooth;
  /* Tamaño de fuente base, respeta preferencias del usuario */
  font-size: 16px;
  /* Altura de línea confortable */
  line-height: 1.5;
  /* Mejora el renderizado de fuentes en webkit */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tap color personalizado para mobile */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  min-height: 100dvh;  /* dvh para mobile correctness */
  overflow-x: hidden;
}

/* Reset para elementos de lista cuando se usan como UI */
ul, ol {
  list-style: none;
}

/* Links sin decoración por defecto */
a {
  color: inherit;
  text-decoration: none;
}

/* Imágenes y medios responsivos */
img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* Herencia de fuente para formularios (no heredan por defecto) */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Botones sin estilos de navegador */
button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
  /* Evita text-select accidental en botones */
  user-select: none;
}

/* Tablas semánticas */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Normaliza HR */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* Details/Summary consistente */
details > summary {
  cursor: pointer;
  user-select: none;
}

/* Previene saltos de layout con placeholder vacío */
input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Foco accesible pero no feo en dark mode */
:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reducir movimiento para usuarios con sensibilidad vestibular */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   3. TIPOGRAFÍA BASE
   ========================================================================== */

/* Jerarquía de headings — Bebas Neue para display, DM Sans para texto */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);  /* Bebas Neue es inherentemente bold */
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Tamaños de heading */
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Links interactivos en texto corrido */
.link {
  color: var(--color-brand-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.link:hover {
  color: var(--color-brand-green-l);
}

/* Link pequeño discreto */
.link-sm {
  color: var(--color-brand-green);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}
.link-sm:hover {
  color: var(--color-brand-green-l);
  text-decoration: underline;
}

/* Código inline */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--accent-green);
}

/* Strong semántico */
strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}


/* ==========================================================================
   4. LOGO — Tipografía del brand
   Se usa en sidebar, splash y modal de auth. Sin imagen = carga instantánea.
   ========================================================================== */

.logo-gol {
  font-family: var(--font-display);
  font-size: inherit;
  color: var(--color-brand-green);
  letter-spacing: 0.01em;
}

.logo-predict {
  font-family: var(--font-display);
  font-size: inherit;
  /* En dark mode, el oscuro del logo se convierte en blanco para contraste */
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

/* Tamaño por contexto */
.sidebar__logo .logo-gol,
.sidebar__logo .logo-predict {
  font-size: var(--text-3xl);
}

.modal-logo .logo-gol,
.modal-logo .logo-predict {
  font-size: var(--text-4xl);
}

.splash__logo .logo-gol,
.splash__logo .logo-predict {
  font-size: var(--text-5xl);
}


/* ==========================================================================
   5. SISTEMA DE BOTONES
   Jerarquía: Primary → Secondary → Ghost → Icon
   Variantes de color: default (green) → premium (gold) → ticket (purple) → danger (red)
   ========================================================================== */

/* Base compartida por todos los botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 44px;                    /* Touch target mínimo 44px (WCAG) */
  min-width: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
  /* Evita selección accidental al hacer doble clic */
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

/* Estado activo: micro press effect */
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Estado deshabilitado global */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Ripple effect preparado para JS (opcional) */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transition-fast);
  border-radius: inherit;
}
.btn:hover::after {
  background: rgba(255, 255, 255, 0.05);
}

/* ── btn--primary: Verde principal ───────────────────────────────────── */
.btn--primary {
  background: var(--color-brand-green);
  color: var(--color-text-inverse);
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-brand-green-l);
  box-shadow: var(--shadow-green);
}
.btn--primary:active:not(:disabled) {
  background: var(--color-brand-green-d);
}

/* ── btn--secondary: Contorno sutil ──────────────────────────────────── */
.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: var(--color-brand-green);
  color: var(--color-brand-green);
}

/* ── btn--ghost: Completamente transparente ──────────────────────────── */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
}
.btn--ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
}

/* ── btn--premium: Dorado para CTAs de monetización ─────────────────── */
.btn--premium {
  background: linear-gradient(135deg, var(--color-premium), var(--color-premium-d));
  color: var(--color-text-inverse);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 16px var(--color-premium-glow);
}
.btn--premium:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-premium-l), var(--color-premium));
  box-shadow: 0 6px 24px var(--color-premium-glow);
  transform: translateY(-1px);
}
.btn--premium:active:not(:disabled) {
  transform: scale(0.97) translateY(0);
}

/* ── btn--ticket: Violeta para compra de tickets ─────────────────────── */
.btn--ticket {
  background: linear-gradient(135deg, var(--color-ticket), #6200ea);
  color: #fff;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 16px var(--color-ticket-glow);
}
.btn--ticket:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-ticket-l), var(--color-ticket));
  box-shadow: 0 6px 24px var(--color-ticket-glow);
  transform: translateY(-1px);
}

/* ── btn--danger: Rojo para acciones destructivas ────────────────────── */
.btn--danger {
  background: var(--accent-red);
  color: #fff;
}
.btn--danger:hover:not(:disabled) {
  background: #e53935;
  box-shadow: var(--shadow-green);
}

/* ── Modificadores de tamaño ─────────────────────────────────────────── */
.btn--sm {
  height: 34px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--large {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

/* ── Modificador de ancho completo ───────────────────────────────────── */
.btn--full {
  width: 100%;
}

/* ── Spinner dentro del botón (para estados de carga) ───────────────── */
.btn__spinner {
  display: inline-flex;
  align-items: center;
}

/* ── Botón solo icono ────────────────────────────────────────────────── */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.btn-icon-sm:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
}

/* Botón de volver (back) */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
  margin-bottom: var(--space-4);
}
.btn-back:hover {
  color: var(--color-brand-green);
}

/* Botón especial del sidebar premium */
.btn--premium-sidebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
    rgba(249, 168, 37, 0.15),
    rgba(245, 127, 23, 0.10));
  border: 1px solid rgba(249, 168, 37, 0.30);
  color: var(--color-premium);
  text-align: left;
  transition: all var(--transition-base);
}
.btn--premium-sidebar i {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.btn--premium-sidebar div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.btn--premium-sidebar strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-premium);
}
.btn--premium-sidebar span {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
}
.btn--premium-sidebar:hover {
  background: linear-gradient(135deg,
    rgba(249, 168, 37, 0.25),
    rgba(245, 127, 23, 0.18));
  border-color: rgba(249, 168, 37, 0.50);
  box-shadow: var(--shadow-gold);
}


/* ==========================================================================
   6. SISTEMA DE FORMULARIOS
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

/* Input base */
.form-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  /* Autocomplete background en chrome: elimina el fondo amarillo */
  caret-color: var(--color-brand-green);
}

.form-input:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
  background: var(--color-bg-surface);
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Fix para autofill de Chrome en dark mode */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-elevated) inset;
  -webkit-text-fill-color: var(--color-text-primary);
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--color-text-primary);
}

/* Input con estado de error */
.form-input--error {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px var(--accent-red-glow);
}

/* Input para búsqueda (con ícono interno) */
.search-input-wrap {
  position: relative;
  flex: 1;
}
.search-input {
  padding-left: var(--space-10);
}
.search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  pointer-events: none;
}

/* Input para contraseña con botón de visibilidad */
.input-password-wrap {
  position: relative;
}
.input-password-wrap .form-input {
  padding-right: 44px;
}
.btn-toggle-pw {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  padding: var(--space-1);
  transition: color var(--transition-fast);
}
.btn-toggle-pw:hover {
  color: var(--color-text-secondary);
}

/* Mensaje de error del formulario */
.form-error {
  background: var(--accent-red-glow);
  border: 1px solid rgba(211, 47, 47, 0.35);
  border-radius: var(--radius-sm);
  color: #ff6b6b;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Input numérico de marcador (predicciones) */
.score-input {
  width: var(--score-input-size);
  height: var(--score-input-size);
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  caret-color: var(--color-brand-green);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Ocultar flechas del input numérico */
  -moz-appearance: textfield;
  appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.score-input:focus {
  outline: none;
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.20);
}
/* Estado: predicción ya guardada (readonly visual) */
.score-input--saved {
  border-color: var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}
/* Estado: acierto exacto */
.score-input--exact {
  border-color: var(--accent-green);
  background: var(--accent-green-glow);
  color: var(--accent-green);
}
/* Estado: tendencia correcta */
.score-input--trend {
  border-color: var(--accent-blue);
  background: var(--accent-blue-glow);
  color: var(--accent-blue);
}
/* Estado: fallo */
.score-input--miss {
  border-color: var(--accent-red);
  background: var(--accent-red-glow);
  color: var(--accent-red);
}
/* Estado: bloqueado (FOMO para usuarios Free en el Mundial) */
.score-input--locked,
.fomo-locked .score-input {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   7. SISTEMA DE BADGES / CHIPS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badge Premium (dorado) */
.badge--premium {
  background: linear-gradient(135deg, var(--color-premium), var(--color-premium-d));
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px var(--color-premium-glow);
}

/* Badge Free */
.badge--free {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Badge de torneo (para el título del modal paywall) */
.badge--tournament {
  background: linear-gradient(135deg, var(--color-ticket), #6200ea);
  color: #fff;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  box-shadow: 0 4px 16px var(--color-ticket-glow);
}

/* Badge de insignia de torneo en perfil */
.badge--trophy {
  background: linear-gradient(135deg, var(--accent-gold), #e65100);
  color: #fff;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  box-shadow: 0 2px 8px var(--accent-gold-glow);
}

/* Badget de rango en el ranking */
.badge--rank-1 { background: var(--accent-gold);   color: #000; }
.badge--rank-2 { background: var(--accent-silver);  color: #000; }
.badge--rank-3 { background: var(--accent-bronze);  color: #fff; }

/* Badge de nav (notificación de predicciones pendientes) */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.nav-badge--pending {
  background: var(--accent-gold);
  color: #000;
  animation: badge-pulse 2s ease-in-out infinite;
}

/* Badge de partido "Estrella x2" */
.star-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, var(--accent-gold), #ff8f00);
  color: #000;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px var(--accent-gold-glow);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* ==========================================================================
   8. AVATARES Y ESCUDOS
   ========================================================================== */

/* Avatar con iniciales (cuando no hay foto de perfil) */
.user-avatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  /* Cada usuario tiene su propio color de avatar según su uid hash */
  /* JS aplica el color dinámicamente via style="--avatar-hue: X" */
}
.user-avatar[style*="--avatar-hue"] {
  background: hsl(var(--avatar-hue, 145), 50%, 30%);
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tamaños de avatar */
.user-avatar--sm  { width: var(--avatar-sm);  height: var(--avatar-sm);  font-size: var(--text-sm); }
.user-avatar--lg  { width: var(--avatar-lg);  height: var(--avatar-lg);  font-size: var(--text-2xl); }
.user-avatar--xl  { width: var(--avatar-xl);  height: var(--avatar-xl);  font-size: var(--text-3xl); }

/* Escudo de equipo — fondo circular blanco (requerido por el reporte) */
.team-crest {
  width: var(--crest-md);
  height: var(--crest-md);
  border-radius: var(--radius-full);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.team-crest img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
/* Fallback cuando la imagen no carga */
.team-crest--fallback {
  background: var(--color-bg-elevated);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Tamaños de escudo */
.team-crest--sm  { width: var(--crest-sm);  height: var(--crest-sm);  }
.team-crest--lg  { width: var(--crest-lg);  height: var(--crest-lg);  }

/* Bandera de selección (via flagcdn ISO) */
.team-flag {
  width: 32px;
  height: 22px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.team-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   9. TOASTS (NOTIFICACIONES NO BLOQUEANTES)
   Posicionados abajo-derecha. ui-helpers.js los inyecta y elimina.
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none; /* No bloquea clicks en el resto de la UI */
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  /* Animación controlada por animations.css */
  animation: toast-enter var(--transition-slow) forwards;
}

.toast--success {
  border-left: 3px solid var(--accent-green);
  border-color: rgba(0, 214, 143, 0.20);
}
.toast--error {
  border-left: 3px solid var(--accent-red);
  border-color: rgba(211, 47, 47, 0.20);
}
.toast--info {
  border-left: 3px solid var(--accent-blue);
  border-color: rgba(41, 121, 255, 0.20);
}
.toast--premium {
  border-left: 3px solid var(--accent-gold);
  border-color: rgba(249, 168, 37, 0.20);
  background: linear-gradient(135deg, var(--color-bg-elevated), rgba(249, 168, 37, 0.05));
}

.toast__icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}
.toast__icon--success { color: var(--accent-green); }
.toast__icon--error   { color: var(--accent-red);   }
.toast__icon--info    { color: var(--accent-blue);   }
.toast__icon--premium { color: var(--accent-gold);   }

.toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toast__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.toast__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.toast__close {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.toast__close:hover {
  color: var(--color-text-primary);
}

.toast--exiting {
  animation: toast-exit var(--transition-base) forwards;
}

/* Mobile: toasts centrados en la parte inferior */
@media (max-width: 480px) {
  .toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .toast {
    max-width: 100%;
  }
}


/* ==========================================================================
   10. SPLASH SCREEN
   ========================================================================== */

.splash {
  position: fixed;
  inset: 0;
  background: var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-splash);
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.splash.splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.splash__logo {
  line-height: 1;
  animation: fade-up 0.6s var(--transition-bounce) forwards;
}

.splash__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-up 0.6s var(--transition-bounce) 0.2s both;
}

.spinner-ring {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand-green);
  animation: spin 0.8s linear infinite;
}


/* ==========================================================================
   11. OVERLAY GLOBAL (para modales y sidebar mobile)
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  /* Backdrop blur para efecto premium */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay.overlay--active {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   12. SKELETON LOADING (placeholders de carga)
   ========================================================================== */

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-surface) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-surface) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-wave 1.5s ease-in-out infinite;
  /* Las dimensiones las define el contexto donde se usa */
}

/* Altura por defecto para skeletons de cards de fixtures */
.fixtures-grid .loading-skeleton {
  min-height: 220px;
}

/* Altura para skeletons de filas de leaderboard */
.leaderboard-table .loading-skeleton,
.leagues-list .loading-skeleton {
  height: 60px;
  margin-bottom: var(--space-2);
}


/* ==========================================================================
   13. ESTADO VACÍO (Empty States)
   ========================================================================== */

.fixtures-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-3);
  color: var(--color-text-muted);
  grid-column: 1 / -1;  /* Ocupa todas las columnas del grid */
}
.fixtures-empty i {
  font-size: 3rem;
  opacity: 0.4;
}
.fixtures-empty p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin: 0;
}
.fixtures-empty__sub {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted) !important;
}


/* ==========================================================================
   14. ESTADÍSTICAS — Bloques de stat (usados en perfil y leaderboard)
   ========================================================================== */

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: 1;
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Stat grande para el perfil */
.stat-block--large {
  padding: var(--space-4) var(--space-5);
}
.stat-block--large .stat-value {
  font-size: var(--text-4xl);
}

/* Score badge en el header de vista */
.score-badge-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  text-align: center;
}
.score-badge-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-brand-green);
  display: block;
  text-align: center;
  line-height: 1;
}


/* ==========================================================================
   15. UTILIDADES
   ========================================================================== */

/* Visibilidad */
.u-hidden   { display: none !important; }
.u-visible  { display: block !important; }
.u-sr-only  {   /* Visible solo para screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Truncado de texto */
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Separador de sección */
.profile-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
}

/* Texto de color por tipo de resultado */
.text-exact   { color: var(--accent-green) !important; }
.text-trend   { color: var(--accent-blue)  !important; }
.text-miss    { color: var(--accent-red)   !important; }
.text-muted   { color: var(--color-text-muted)    !important; }
.text-premium { color: var(--color-premium) !important; }
.text-primary { color: var(--color-text-primary) !important; }

/* Fondo de resultado */
.bg-exact  { background: var(--accent-green-glow); }
.bg-trend  { background: var(--accent-blue-glow);  }
.bg-miss   { background: var(--accent-red-glow);   }

/* Alineación de texto */
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Flex shortcuts */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Colores de texto de premios */
.prize-gold   { color: var(--accent-gold);   }
.prize-silver { color: var(--accent-silver); }
.prize-bronze { color: var(--accent-bronze); }


/* ==========================================================================
   16. KEYFRAMES — (los grandes se desarrollan en animations.css,
   pero los usados en main.css se definen aquí para evitar dependencias)
   ========================================================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-wave {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-exit {
  from { opacity: 1; transform: translateX(0);    max-height: 100px; }
  to   { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; margin: 0; }
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-gold-glow); }
  50%       { box-shadow: 0 0 0 5px transparent; }
}


/* ==========================================================================
   FIX GLOBAL — atributo [hidden] debe ganar sobre cualquier display CSS
   El bug original: .app-shell { display:grid } sobrescribía hidden,
   y .form-error mostraba el rectángulo rojo vacío.
   ========================================================================== */
[hidden] {
  display: none !important;
}