/* ==========================================================================
   THEME.CSS - La Única Fuente de Verdad para el Diseño de la App
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

   :root {
       /* --- PALETA DE COLORES "NEÓN DE ENFOQUE" (MODO OSCURO POR DEFECTO) --- */
       
       /* Fondos */
       --bg-main: #111827;       /* Azul noche muy oscuro (para el body) */
       --bg-surface: #1F2937;    /* Gris azulado oscuro (para main, header, footer) */
       --bg-card: #374151;       /* Gris más claro (para tarjetas, modales, inputs) */
       
       /* Acentos */
       --primary-accent: #8B5CF6; /* Púrpura vibrante (para botones, enlaces, puntajes altos) */
       --primary-accent-hover: #7C3AED; /* Versión más oscura para hover */
       --secondary-accent: #34D399; /* Verde esmeralda (para éxito, respuestas correctas) */
       
       /* Colores de Estado */
       --success-color: var(--secondary-accent);
       --warning-color: #FBBF24; /* Ámbar */
       --danger-color: #F87171;  /* Rojo suave */
       --info-color: #3B82F6; /* Azul brillante */
       
       /* Texto */
       --text-primary: #F9FAFB;   /* Blanco roto (para títulos y texto principal) */
       --text-secondary: #9CA3AF; /* Gris claro (para subtítulos, placeholders) */
       --text-on-accent: #FFFFFF; /* Texto blanco para usar sobre botones púrpuras */
   
       /* --- MÉTRICAS DE DISEÑO --- */
       --font-family-base: 'Poppins', sans-serif;
       --border-radius: 8px;
       --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       --transition-speed: 0.2s ease-in-out;
   }