/* ============================================================
   THEMES.CSS — SISTEMA DE TEMAS Y VARIABLES GLOBALES
   Estándar de diseño: Dark Glassmorphism (Referencia: Minivoley)
   ============================================================ */

/* ===== VARIABLES GLOBALES (ESTÁNDAR MINIVOLEY) ===== */
:root {
  /* Paleta de colores estándar Minivoley */
  --c-local:          #ff4757;
  --c-local-glow:     rgba(255, 71, 87, 0.35);
  --c-visitor:        #1e90ff;
  --c-visitor-glow:   rgba(30, 144, 255, 0.35);
  --c-gold:           #ffd700;
  --c-gold-dim:       rgba(255, 215, 0, 0.15);
  --c-glass:          rgba(255, 255, 255, 0.05);
  --c-glass-b:        rgba(255, 255, 255, 0.09);
  --c-glass-border:   rgba(255, 255, 255, 0.11);
  --c-text:           #f0f4ff;
  --c-muted:          rgba(240, 244, 255, 0.5);
  --c-muted2:         rgba(240, 244, 255, 0.25);

  /* Tipografías del sistema unificado */
  --font-display:     'Bebas Neue', 'Segoe UI', sans-serif;
  --font-body:        'Outfit', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Compatibilidad con marcadores legacy */
  --primary-color:    #1e90ff;
  --secondary-color:  #ff4757;
  --accent-color:     #ffd700;
  --dark-color:       #0d0a28;
  --light-color:      #f0f4ff;
  --success-color:    #27ae60;
  --warning-color:    #f39c12;
  --error-color:      #e74c3c;
  --info-color:       #3498db;
  --shadow:           0 4px 24px rgba(0, 0, 0, 0.35);
  --transition:       all 0.25s ease;

  /* Fondo por defecto */
  --theme-halo-1:     rgba(106, 17, 203, 0.3);
  --theme-halo-2:     rgba(37, 117, 252, 0.22);
  --theme-halo-3:     rgba(155, 89, 182, 0.1);
  --theme-bg-base:    linear-gradient(160deg, #07091c 0%, #0d0a28 40%, #100c30 100%);
}

/* ===== APLICACIÓN GLOBAL AL BODY ===== */
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, var(--theme-halo-1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 85%, var(--theme-halo-2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, var(--theme-halo-3) 0%, transparent 60%),
    var(--theme-bg-base) !important;
  background-attachment: fixed !important;
}

/* ===== TEMAS ESPECÍFICOS DE DEPORTES Y JUEGOS =====
   Todos los temas respetan la base Dark Glassmorphism de Minivoley,
   aportando matices atmosféricos de halo sin romper la coherencia visual. */

/* Tema Minivoley (Referencia Oro) */
body.theme-minivoley {
  --theme-halo-1: rgba(106, 17, 203, 0.3);
  --theme-halo-2: rgba(37, 117, 252, 0.22);
  --theme-halo-3: rgba(155, 89, 182, 0.1);
}

/* Tema Voleibol */
body.theme-voleibol {
  --theme-halo-1: rgba(106, 17, 203, 0.3);
  --theme-halo-2: rgba(37, 117, 252, 0.22);
  --theme-halo-3: rgba(155, 89, 182, 0.1);
}

/* Tema Baloncesto & Baloncesto 3x3 */
body.theme-baloncesto,
body.theme-baloncesto-3x3 {
  --theme-halo-1: rgba(230, 126, 34, 0.25);
  --theme-halo-2: rgba(30, 144, 255, 0.2);
  --theme-halo-3: rgba(243, 156, 18, 0.1);
}

/* Tema Fútbol, Fútbol Sala, Fútbol 7 */
body.theme-futbol,
body.theme-futbol-sala,
body.theme-futbol-siete {
  --theme-halo-1: rgba(39, 174, 96, 0.25);
  --theme-halo-2: rgba(30, 144, 255, 0.2);
  --theme-halo-3: rgba(46, 204, 113, 0.1);
}

/* Tema Pádel & Tenis */
body.theme-padel,
body.theme-tenis,
body.theme-tenis-parejas {
  --theme-halo-1: rgba(241, 196, 15, 0.2);
  --theme-halo-2: rgba(37, 117, 252, 0.22);
  --theme-halo-3: rgba(52, 152, 219, 0.12);
}

/* Tema Balonmano */
body.theme-balonmano {
  --theme-halo-1: rgba(230, 126, 34, 0.25);
  --theme-halo-2: rgba(41, 128, 185, 0.25);
  --theme-halo-3: rgba(211, 84, 0, 0.1);
}

/* Tema Dominó & Chinchón */
body.theme-domino,
body.theme-chinchon {
  --theme-halo-1: rgba(39, 174, 96, 0.25);
  --theme-halo-2: rgba(142, 68, 173, 0.2);
  --theme-halo-3: rgba(243, 156, 18, 0.1);
}

/* Tema Ajedrez */
body.theme-ajedrez {
  --theme-halo-1: rgba(52, 73, 94, 0.35);
  --theme-halo-2: rgba(41, 128, 185, 0.22);
  --theme-halo-3: rgba(241, 196, 15, 0.1);
}

/* Tema Dados, Cubilete, Yahtzee */
body.theme-dados,
body.theme-cubilete,
body.theme-yahtzee {
  --theme-halo-1: rgba(142, 68, 173, 0.28);
  --theme-halo-2: rgba(230, 126, 34, 0.2);
  --theme-halo-3: rgba(46, 204, 113, 0.1);
}

/* Tema Dardos */
body.theme-dardos {
  --theme-halo-1: rgba(231, 76, 60, 0.25);
  --theme-halo-2: rgba(39, 174, 96, 0.2);
  --theme-halo-3: rgba(241, 196, 15, 0.1);
}

/* Tema Jugger */
body.theme-jugger {
  --theme-halo-1: rgba(52, 73, 94, 0.3);
  --theme-halo-2: rgba(231, 76, 60, 0.22);
  --theme-halo-3: rgba(243, 156, 18, 0.1);
}

/* Tema Moneda, Impostor, Conecta Cuatro, Hundir la Flota, Piedra Papel Tijera */
body.theme-moneda,
body.theme-impostor,
body.theme-conecta-cuatro,
body.theme-hundir-la-flota,
body.theme-piedra-papel-tijera,
body.theme-quien-es-quien {
  --theme-halo-1: rgba(142, 68, 173, 0.3);
  --theme-halo-2: rgba(37, 117, 252, 0.25);
  --theme-halo-3: rgba(255, 64, 129, 0.15);
}

/* Tema Principal (Home) */
body.theme-main {
  --theme-halo-1: rgba(106, 17, 203, 0.3);
  --theme-halo-2: rgba(37, 117, 252, 0.25);
  --theme-halo-3: rgba(39, 174, 96, 0.12);
}

/* ===== MODO CLARO (LIGHT MODE UNIFICADO Y ACCESIBLE) ===== */
body.light-mode {
  --c-text:           #0f172a;
  --c-muted:          #475569;
  --c-muted2:         #64748b;
  --c-glass:          rgba(255, 255, 255, 0.88);
  --c-glass-b:        rgba(255, 255, 255, 0.96);
  --c-glass-border:   rgba(0, 0, 0, 0.08);
  --dark-color:       #ffffff;
  --light-color:      #0f172a;
  --shadow:           0 4px 20px rgba(0, 0, 0, 0.08);

  /* Sistema de halos Minivoley en modo claro */
  --theme-halo-1:     rgba(106, 17, 203, 0.08);
  --theme-halo-2:     rgba(37, 117, 252, 0.08);
  --theme-halo-3:     rgba(155, 89, 182, 0.05);
  --theme-bg-base:    linear-gradient(160deg, #f8fafc 0%, #eef2f6 50%, #e2e8f0 100%);
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, var(--theme-halo-1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 85%, var(--theme-halo-2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, var(--theme-halo-3) 0%, transparent 60%),
    var(--theme-bg-base) !important;
  background-attachment: fixed !important;
  color: #0f172a;
}

body.light-mode h1:not(.app-header h1),
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
  color: #0f172a;
}

/* Botones flotantes en modo claro */
body.light-mode .floating-home-btn,
body.light-mode .floating-help-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .floating-home-btn:hover,
body.light-mode .floating-help-btn:hover {
  background: #ffffff !important;
  color: #2575fc !important;
  box-shadow: 0 8px 24px rgba(37, 117, 252, 0.25) !important;
}

/* Footer en modo claro */
body.light-mode footer {
  color: #64748b;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode footer a {
  color: #475569;
}

body.light-mode footer a:hover {
  color: #2575fc;
}

body.light-mode #footer-theme-btn {
  color: #475569 !important;
}

body.light-mode #footer-theme-btn:hover {
  color: #0f172a !important;
}