/* ============================================================
   TEMAS VISUALES — 15 paletas completas
   Cada tema redefine TODAS las variables del sistema.
   ============================================================ */

/* ============================================================
   TEMA POR DEFECTO — CLÁSICO OSCURO
   ============================================================ */
:root {
  --bg-0: #0a0e14;
  --bg-1: #131820;
  --bg-2: #1c2330;
  --bg-3: #252d3d;
  --accent: #d4a574;
  --accent-2: #80e0ff;
  --gold: #ffcc44;
  --red: #ff5566;
  --green: #40d090;
  --blue: #5080ff;
  --purple: #bb88ff;
  --text: #e0e8f0;
  --text-dim: #7a8a9a;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.2);
  --topbar-h: 56px;
  --glow-accent: rgba(128,224,255,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.4);
}

/* ============================================================
   WOOD — Madera cálida
   ============================================================ */
[data-theme="wood"] {
  --bg-0: #1a1208;
  --bg-1: #2a1e12;
  --bg-2: #3a2818;
  --bg-3: #4a3420;
  --accent: #d4a574;
  --accent-2: #e8c896;
  --gold: #ffb84d;
  --red: #d05050;
  --green: #8fb87a;
  --blue: #7a9ac4;
  --purple: #b89898;
  --text: #f0e6d8;
  --text-dim: #9a8878;
  --border: rgba(212,165,116,0.15);
  --border-strong: rgba(212,165,116,0.4);
  --glow-accent: rgba(212,165,116,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="wood"] body {
  background-image:
    radial-gradient(ellipse at top, rgba(212,165,116,0.05) 0%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(212,165,116,0.02) 2px, rgba(212,165,116,0.02) 4px);
}

/* ============================================================
   MARBLE — Mármol claro y elegante
   ============================================================ */
[data-theme="marble"] {
  --bg-0: #e8e8f0;
  --bg-1: #f5f5fa;
  --bg-2: #ffffff;
  --bg-3: #e0e0ea;
  --accent: #4a5a7a;
  --accent-2: #7080a8;
  --gold: #c8a028;
  --red: #c04048;
  --green: #3a8870;
  --blue: #4a6aa0;
  --purple: #8060a0;
  --text: #2a2a3a;
  --text-dim: #707080;
  --border: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.25);
  --glow-accent: rgba(112,128,168,0.4);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.15);
}
[data-theme="marble"] body {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(200,210,230,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(220,220,240,0.3) 0%, transparent 50%);
}
[data-theme="marble"] .topbar,
[data-theme="marble"] .login-card,
[data-theme="marble"] .modal-card {
  border-color: rgba(0,0,0,0.15);
}
[data-theme="marble"] .login-card,
[data-theme="marble"] .modal-card {
  background: rgba(255,255,255,0.95);
  color: var(--text);
}
[data-theme="marble"] .modal-card input,
[data-theme="marble"] .modal-card select,
[data-theme="marble"] .modal-card textarea,
[data-theme="marble"] .form input {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

/* ============================================================
   NEON — Cyberpunk azul eléctrico
   ============================================================ */
[data-theme="neon"] {
  --bg-0: #050510;
  --bg-1: #0a0a1a;
  --bg-2: #12122a;
  --bg-3: #1a1a3a;
  --accent: #00e0ff;
  --accent-2: #ff00c8;
  --gold: #ffd166;
  --red: #ff3a5a;
  --green: #00ff88;
  --blue: #00a8ff;
  --purple: #c060ff;
  --text: #e0f0ff;
  --text-dim: #6070a0;
  --border: rgba(0,224,255,0.15);
  --border-strong: rgba(0,224,255,0.5);
  --glow-accent: rgba(0,224,255,0.7);
  --shadow-card: 0 8px 32px rgba(0,224,255,0.15);
}
[data-theme="neon"] body {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(0,224,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,0,200,0.06) 0%, transparent 50%);
}
[data-theme="neon"] .menu-card:hover,
[data-theme="neon"] .btn.primary {
  box-shadow: 0 0 20px rgba(0,224,255,0.5), 0 0 40px rgba(0,224,255,0.2);
}

/* ============================================================
   GLASS — Cristal translúcido
   ============================================================ */
[data-theme="glass"] {
  --bg-0: #0a1828;
  --bg-1: rgba(20,40,70,0.5);
  --bg-2: rgba(30,55,90,0.5);
  --bg-3: rgba(40,70,110,0.5);
  --accent: #80e0ff;
  --accent-2: #b0f0ff;
  --gold: #ffdd88;
  --red: #ff6688;
  --green: #60e8b0;
  --blue: #80b8ff;
  --purple: #c0a8ff;
  --text: #f0f8ff;
  --text-dim: #88a8c8;
  --border: rgba(128,224,255,0.2);
  --border-strong: rgba(128,224,255,0.5);
  --glow-accent: rgba(128,224,255,0.6);
  --shadow-card: 0 8px 32px rgba(0,80,140,0.3);
}
[data-theme="glass"] body {
  background: linear-gradient(135deg, #051020 0%, #0a2848 50%, #051020 100%);
  background-attachment: fixed;
}
[data-theme="glass"] .menu-card,
[data-theme="glass"] .card,
[data-theme="glass"] .profile-card,
[data-theme="glass"] .hero-leaderboard {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   GOLD — Lujo dorado premium
   ============================================================ */
[data-theme="gold"] {
  --bg-0: #14100a;
  --bg-1: #1f1a10;
  --bg-2: #2a2418;
  --bg-3: #3a3020;
  --accent: #ffd166;
  --accent-2: #ffe8a0;
  --gold: #ffaa00;
  --red: #d04040;
  --green: #88c060;
  --blue: #8098c0;
  --purple: #b090d0;
  --text: #f8f0e0;
  --text-dim: #908070;
  --border: rgba(255,209,102,0.2);
  --border-strong: rgba(255,209,102,0.5);
  --glow-accent: rgba(255,209,102,0.6);
  --shadow-card: 0 8px 32px rgba(255,170,0,0.15);
}
[data-theme="gold"] body {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,209,102,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #14100a 0%, #0a0805 100%);
}
[data-theme="gold"] .menu-card:hover,
[data-theme="gold"] .btn.primary {
  box-shadow: 0 0 20px rgba(255,209,102,0.5), 0 0 40px rgba(255,170,0,0.2);
}
[data-theme="gold"] .logo-small,
[data-theme="gold"] .login-card .logo {
  background: linear-gradient(90deg, #ffd166, #ffaa00, #ffd166);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: goldShine 3s linear infinite;
}
@keyframes goldShine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   FOREST — Bosque verde
   ============================================================ */
[data-theme="forest"] {
  --bg-0: #0a1410;
  --bg-1: #122018;
  --bg-2: #1a2e22;
  --bg-3: #24402e;
  --accent: #88d498;
  --accent-2: #b0e8b8;
  --gold: #d4b060;
  --red: #d06060;
  --green: #60d080;
  --blue: #80a8c0;
  --purple: #a090c0;
  --text: #e0f0e0;
  --text-dim: #708870;
  --border: rgba(136,212,152,0.15);
  --border-strong: rgba(136,212,152,0.4);
  --glow-accent: rgba(136,212,152,0.5);
  --shadow-card: 0 8px 24px rgba(0,40,20,0.5);
}
[data-theme="forest"] body {
  background-image:
    radial-gradient(ellipse at 30% 100%, rgba(60,120,80,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(40,100,60,0.1) 0%, transparent 50%);
}

/* ============================================================
   SUNSET — Atardecer
   ============================================================ */
[data-theme="sunset"] {
  --bg-0: #1a0a14;
  --bg-1: #2a1420;
  --bg-2: #3a1e2c;
  --bg-3: #4a2838;
  --accent: #ff9060;
  --accent-2: #ffb88a;
  --gold: #ffcc66;
  --red: #e04858;
  --green: #88c880;
  --blue: #a080c0;
  --purple: #d080b8;
  --text: #ffe8e0;
  --text-dim: #a88898;
  --border: rgba(255,144,96,0.15);
  --border-strong: rgba(255,144,96,0.4);
  --glow-accent: rgba(255,144,96,0.5);
  --shadow-card: 0 8px 24px rgba(60,10,30,0.5);
}
[data-theme="sunset"] body {
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(255,144,96,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(160,80,140,0.1) 0%, transparent 50%);
}

/* ============================================================
   OCEAN — Océano profundo
   ============================================================ */
[data-theme="ocean"] {
  --bg-0: #041424;
  --bg-1: #082438;
  --bg-2: #0e3448;
  --bg-3: #144458;
  --accent: #48c8e8;
  --accent-2: #80e0f0;
  --gold: #d4c060;
  --red: #e06080;
  --green: #50d0a0;
  --blue: #4080c0;
  --purple: #9080d0;
  --text: #e0f4ff;
  --text-dim: #7090a8;
  --border: rgba(72,200,232,0.15);
  --border-strong: rgba(72,200,232,0.4);
  --glow-accent: rgba(72,200,232,0.5);
  --shadow-card: 0 8px 24px rgba(0,40,80,0.5);
}
[data-theme="ocean"] body {
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(72,200,232,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #041424 0%, #020810 100%);
}

/* ============================================================
   SAKURA — Cerezo rosa claro
   ============================================================ */
[data-theme="sakura"] {
  --bg-0: #fef0f4;
  --bg-1: #fff8fa;
  --bg-2: #ffffff;
  --bg-3: #f8e0e8;
  --accent: #c86088;
  --accent-2: #e088a8;
  --gold: #d4a858;
  --red: #d05878;
  --green: #78b878;
  --blue: #8098c8;
  --purple: #a880c0;
  --text: #3a2030;
  --text-dim: #907088;
  --border: rgba(200,96,136,0.15);
  --border-strong: rgba(200,96,136,0.4);
  --glow-accent: rgba(224,136,168,0.5);
  --shadow-card: 0 8px 24px rgba(200,96,136,0.15);
}
[data-theme="sakura"] body {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,200,220,0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,220,230,0.3) 0%, transparent 40%);
}
[data-theme="sakura"] .topbar { background: linear-gradient(180deg, #fff8fa, #fef0f4); }
[data-theme="sakura"] .login-card,
[data-theme="sakura"] .modal-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(200,96,136,0.25);
}
[data-theme="sakura"] .modal-card input,
[data-theme="sakura"] .modal-card select,
[data-theme="sakura"] .form input {
  background: rgba(0,0,0,0.03);
  color: var(--text);
}

/* ============================================================
   CYBERPUNK — Morado/cyan retro-futurista
   ============================================================ */
[data-theme="cyberpunk"] {
  --bg-0: #0a0014;
  --bg-1: #150022;
  --bg-2: #200030;
  --bg-3: #2a0040;
  --accent: #ff00ff;
  --accent-2: #00ffff;
  --gold: #ffff00;
  --red: #ff0055;
  --green: #00ff80;
  --blue: #0066ff;
  --purple: #cc00ff;
  --text: #f0e0ff;
  --text-dim: #806090;
  --border: rgba(255,0,255,0.2);
  --border-strong: rgba(255,0,255,0.5);
  --glow-accent: rgba(255,0,255,0.7);
  --shadow-card: 0 8px 32px rgba(255,0,255,0.2);
}
[data-theme="cyberpunk"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,255,255,0.03) 2px, rgba(0,255,255,0.03) 4px),
    radial-gradient(ellipse at 50% 100%, rgba(255,0,255,0.15) 0%, transparent 60%);
}

/* ============================================================
   HALLOWEEN — Naranja y negro festivo
   ============================================================ */
[data-theme="halloween"] {
  --bg-0: #0a0505;
  --bg-1: #150a08;
  --bg-2: #200f0a;
  --bg-3: #2a140e;
  --accent: #ff8c00;
  --accent-2: #ffb84d;
  --gold: #ffd166;
  --red: #cc2200;
  --green: #4a8a30;
  --blue: #6050a0;
  --purple: #a050c0;
  --text: #ffe8d0;
  --text-dim: #a07050;
  --border: rgba(255,140,0,0.2);
  --border-strong: rgba(255,140,0,0.5);
  --glow-accent: rgba(255,140,0,0.6);
  --shadow-card: 0 8px 24px rgba(255,140,0,0.15);
}
[data-theme="halloween"] body {
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(255,140,0,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0a0505 0%, #050202 100%);
}
[data-theme="halloween"] body::before {
  content: '🎃';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   CHRISTMAS — Rojo y verde navideño
   ============================================================ */
[data-theme="christmas"] {
  --bg-0: #0a1a0f;
  --bg-1: #0f2418;
  --bg-2: #153020;
  --bg-3: #1f4028;
  --accent: #e03040;
  --accent-2: #ff6060;
  --gold: #ffd166;
  --red: #e03040;
  --green: #40a060;
  --blue: #80a8d0;
  --purple: #c090d0;
  --text: #f0fff0;
  --text-dim: #708870;
  --border: rgba(224,48,64,0.2);
  --border-strong: rgba(224,48,64,0.5);
  --glow-accent: rgba(224,48,64,0.6);
  --shadow-card: 0 8px 24px rgba(224,48,64,0.15);
}
[data-theme="christmas"] body {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(224,48,64,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a1a0f 0%, #050a08 100%);
}
[data-theme="christmas"] body::before {
  content: '🎄';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
[data-theme="christmas"] body::after {
  content: '❄️';
  position: fixed;
  top: 20px;
  right: 70px;
  font-size: 26px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   VALENTINE — San Valentín
   ============================================================ */
[data-theme="valentine"] {
  --bg-0: #1a0810;
  --bg-1: #25101a;
  --bg-2: #301825;
  --bg-3: #402030;
  --accent: #ff4d7a;
  --accent-2: #ff80a0;
  --gold: #ffcc66;
  --red: #e03060;
  --green: #80b890;
  --blue: #b090d0;
  --purple: #d080b8;
  --text: #ffe8f0;
  --text-dim: #a07080;
  --border: rgba(255,77,122,0.2);
  --border-strong: rgba(255,77,122,0.5);
  --glow-accent: rgba(255,77,122,0.6);
  --shadow-card: 0 8px 24px rgba(255,77,122,0.15);
}
[data-theme="valentine"] body {
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(255,77,122,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #1a0810 0%, #0a0408 100%);
}
[data-theme="valentine"] body::before {
  content: '❤️';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   NEWYEAR -- Ano Nuevo
   ============================================================ */
[data-theme="newyear"] {
  --bg-0: #050508;
  --bg-1: #0a0a14;
  --bg-2: #101020;
  --bg-3: #18182a;
  --accent: #ffd700;
  --accent-2: #c0c0ff;
  --gold: #ffd700;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #fff8e0;
  --text-dim: #908880;
  --border: rgba(255,215,0,0.15);
  --border-strong: rgba(255,215,0,0.4);
  --glow-accent: rgba(255,215,0,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="newyear"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,215,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(192,192,255,0.06) 0%, transparent 50%);
}
[data-theme="newyear"] body::before {
  content: '\01F386';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   KINGS -- Dia de Reyes
   ============================================================ */
[data-theme="kings"] {
  --bg-0: #0f0a18;
  --bg-1: #1a0a2a;
  --bg-2: #201030;
  --bg-3: #281840;
  --accent: #ffd700;
  --accent-2: #c090ff;
  --gold: #ffd700;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #f8e8ff;
  --text-dim: #8a7a90;
  --border: rgba(255,215,0,0.15);
  --border-strong: rgba(255,215,0,0.4);
  --glow-accent: rgba(255,215,0,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="kings"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,215,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(192,144,255,0.06) 0%, transparent 50%);
}
[data-theme="kings"] body::before {
  content: '\01F451';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   WOMEN -- Dia de la Mujer
   ============================================================ */
[data-theme="women"] {
  --bg-0: #0f050c;
  --bg-1: #1a0818;
  --bg-2: #200c20;
  --bg-3: #28102a;
  --accent: #ff66aa;
  --accent-2: #cc88ff;
  --gold: #ff66aa;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #ffe8f4;
  --text-dim: #907088;
  --border: rgba(255,102,170,0.15);
  --border-strong: rgba(255,102,170,0.4);
  --glow-accent: rgba(255,102,170,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="women"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,102,170,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(204,136,255,0.06) 0%, transparent 50%);
}
[data-theme="women"] body::before {
  content: '\01F490';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   PATRICK -- San Patricio
   ============================================================ */
[data-theme="patrick"] {
  --bg-0: #050f05;
  --bg-1: #0a1a0a;
  --bg-2: #101f10;
  --bg-3: #182818;
  --accent: #40d060;
  --accent-2: #88ff88;
  --gold: #40d060;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #e0ffe0;
  --text-dim: #789078;
  --border: rgba(64,208,96,0.15);
  --border-strong: rgba(64,208,96,0.4);
  --glow-accent: rgba(64,208,96,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="patrick"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(64,208,96,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(136,255,136,0.06) 0%, transparent 50%);
}
[data-theme="patrick"] body::before {
  content: '\01F340';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   EASTER -- Pascua
   ============================================================ */
[data-theme="easter"] {
  --bg-0: #0f0e08;
  --bg-1: #1a1810;
  --bg-2: #201e18;
  --bg-3: #282620;
  --accent: #ffcc88;
  --accent-2: #a0e0ff;
  --gold: #ffcc88;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #fff8e8;
  --text-dim: #908878;
  --border: rgba(255,204,136,0.15);
  --border-strong: rgba(255,204,136,0.4);
  --glow-accent: rgba(255,204,136,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="easter"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,204,136,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(160,224,255,0.06) 0%, transparent 50%);
}
[data-theme="easter"] body::before {
  content: '\01F423';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   MOTHER -- Dia de la Madre
   ============================================================ */
[data-theme="mother"] {
  --bg-0: #0f0508;
  --bg-1: #1a0810;
  --bg-2: #200c18;
  --bg-3: #281020;
  --accent: #ff88aa;
  --accent-2: #ffccdd;
  --gold: #ff88aa;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #fff0f5;
  --text-dim: #907880;
  --border: rgba(255,136,170,0.15);
  --border-strong: rgba(255,136,170,0.4);
  --glow-accent: rgba(255,136,170,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="mother"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,136,170,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(255,204,221,0.06) 0%, transparent 50%);
}
[data-theme="mother"] body::before {
  content: '\01F490';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   FATHER -- Dia del Padre
   ============================================================ */
[data-theme="father"] {
  --bg-0: #050a0f;
  --bg-1: #08121a;
  --bg-2: #0e1820;
  --bg-3: #162028;
  --accent: #4090d0;
  --accent-2: #88c0ff;
  --gold: #4090d0;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #e8f4ff;
  --text-dim: #708090;
  --border: rgba(64,144,208,0.15);
  --border-strong: rgba(64,144,208,0.4);
  --glow-accent: rgba(64,144,208,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="father"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(64,144,208,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(136,192,255,0.06) 0%, transparent 50%);
}
[data-theme="father"] body::before {
  content: '\01F454';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   CUBA -- Dia de Cuba
   ============================================================ */
[data-theme="cuba"] {
  --bg-0: #05050a;
  --bg-1: #0a0a14;
  --bg-2: #10101e;
  --bg-3: #181828;
  --accent: #d02020;
  --accent-2: #3070d0;
  --gold: #d02020;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #f8f8f8;
  --text-dim: #808080;
  --border: rgba(208,32,32,0.15);
  --border-strong: rgba(208,32,32,0.4);
  --glow-accent: rgba(208,32,32,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="cuba"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(208,32,32,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(48,112,208,0.06) 0%, transparent 50%);
}
[data-theme="cuba"] body::before {
  content: '\01F1E8\01F1FA';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   CHILDREN -- Dia del Nino
   ============================================================ */
[data-theme="children"] {
  --bg-0: #0f0810;
  --bg-1: #1a1020;
  --bg-2: #201628;
  --bg-3: #281e30;
  --accent: #ffcc40;
  --accent-2: #40d0ff;
  --gold: #ffcc40;
  --red: #e04060;
  --green: #60d090;
  --blue: #80a0ff;
  --purple: #c090ff;
  --text: #fff8e8;
  --text-dim: #908878;
  --border: rgba(255,204,64,0.15);
  --border-strong: rgba(255,204,64,0.4);
  --glow-accent: rgba(255,204,64,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.6);
}
[data-theme="children"] body {
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,204,64,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(64,208,255,0.06) 0%, transparent 50%);
}
[data-theme="children"] body::before {
  content: '\01F388';
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
/* ============================================================
   RETRO — Arcade 80s
   ============================================================ */
[data-theme="retro"] {
  --bg-0: #0a0a0a;
  --bg-1: #121212;
  --bg-2: #1a1a1a;
  --bg-3: #2a2a2a;
  --accent: #ff0080;
  --accent-2: #00d4ff;
  --gold: #ffcc00;
  --red: #ff0040;
  --green: #00ff40;
  --blue: #0080ff;
  --purple: #cc00ff;
  --text: #e8e8e8;
  --text-dim: #707070;
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.3);
  --glow-accent: rgba(255,0,128,0.6);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.7);
}
[data-theme="retro"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,0,128,0.02) 3px, rgba(255,0,128,0.02) 6px),
    radial-gradient(ellipse at 50% 100%, rgba(255,0,128,0.1) 0%, transparent 60%);
}
[data-theme="retro"] .logo-small,
[data-theme="retro"] .login-card .logo {
  text-shadow: 2px 0 #00d4ff, -2px 0 #ff0080;
}

/* ============================================================
   TEMA FESTIVO AUTOMÁTICO (añadido por JS al arrancar)
   ============================================================ */
[data-theme-auto="true"] {
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* ============================================================
   TRANSICIONES SUAVES al cambiar de tema
   ============================================================ */
body,
.topbar,
.menu-card,
.card,
.profile-card,
.hero-leaderboard,
.btn,
.nav-btn,
input,
select,
textarea,
.modal-card {
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              color 0.4s ease;
}
/* ============================================================
   SELECTOR VISUAL DE TEMAS (Configuración)
   ============================================================ */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.theme-card:hover {
  border-color: var(--accent-2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.theme-card.active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(128,224,255,.25), 0 8px 24px rgba(128,224,255,.15);
}
.theme-card.locked {
  opacity: 0.65;
  cursor: not-allowed;
}
.theme-card.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

/* Preview mini de la UI */
.theme-card-preview {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.3);
}
.tcp-bar {
  height: 12px;
  width: 100%;
}
.tcp-body {
  flex: 1;
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.tcp-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tcp-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
}
.tcp-line {
  height: 5px;
  border-radius: 3px;
}

/* Info */
.theme-card-info {
  padding: 8px 4px 4px;
}
.theme-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.theme-card-desc {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Badge (Activo / Bloqueado / Disponible) */
.theme-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.theme-card-badge.active {
  background: var(--green);
  color: #04100a;
}
.theme-card-badge.locked {
  background: rgba(255,204,68,0.9);
  color: #1a1a1a;
}

/* ============================================================
   PREVIEW DE TEMA EN TIENDA
   ============================================================ */
.shop-theme-preview {
  width: 100%;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  position: relative;
  border: 1px solid rgba(0,0,0,0.4);
}
.stp-topbar {
  height: 14px;
  width: 100%;
}
.stp-body {
  flex: 1;
  padding: 8px;
  display: flex;
  gap: 6px;
}
.stp-card {
  flex: 1;
  border-radius: 6px;
  border: 1px solid;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.stp-line {
  height: 4px;
  border-radius: 2px;
}
.stp-swatch {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Ajuste del shop-item cuando tiene preview */
.shop-item .shop-theme-preview + .shop-item-name {
  margin-top: 4px;
}

@media (max-width: 700px) {
  .themes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .theme-card-preview { height: 70px; }
  .theme-card-name { font-size: 11px; }
  .theme-card-desc { display: none; }
}
/* ============================================================ */
/*  EMOJIS FLOTANTES FESTIVOS                                    */
/* ============================================================ */
.festivos-emojis {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}
.festivos-emojis .festivo-emoji {
  position: absolute;
  font-size: 46px;
  opacity: 0.22;
  animation-name: festivoFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
  user-select: none;
  pointer-events: none;
}
@keyframes festivoFloat {
  0%   { transform: translateY(0)     rotate(-6deg) scale(1);    }
  50%  { transform: translateY(-22px) rotate(3deg)  scale(1.08); }
  100% { transform: translateY(0)     rotate(-6deg) scale(1);    }
}
@media (max-width: 700px) {
  .festivos-emojis .festivo-emoji { font-size: 32px; opacity: 0.18; }
}