/* ==========================================================================
   DICCIONARIO DE COLORES DINÁMICOS (MODO DÍA / NOCHE)
   * Este archivo es el "Cerebro" de la UI. Define las paletas base y los temas.
   * FIX: Variable --brand-electric restaurada para salvar los degradados premium.
   ========================================================================== */
:root {
    /* ==========================================
       MODO DÍA (Configuración por defecto)
       ========================================== */
    --bg-body: #f4f7f9; /* Color del fondo principal (detrás de las tarjetas) */
    --bg-surface: #ffffff; /* Color de las tarjetas, modales y paneles */
    --bg-surface-hover: #f1f5f9; /* Color al pasar el mouse sobre un elemento de la superficie */

    --text-main: #0f172a; /* Textos principales y títulos (Casi negro) */
    --text-muted: #64748b; /* Textos secundarios y descripciones (Gris) */
    --text-soft: #94a3b8; /* Textos de soporte o íconos inactivos (Gris claro) */

    --border-subtle: rgba(0,0,0,0.06); /* Bordes casi invisibles para separar secciones */
    --border-hard: #e2e8f0; /* Bordes notorios para inputs y tablas */

    --glass-bg: rgba(255, 255, 255, 0.75); /* Fondo para la Navbar (Efecto cristal) */
    --shadow-premium: 0 10px 40px -10px rgba(0,0,0,0.08); /* Sombra profunda y elegante */
    /* ==========================================
       VARIABLES SPARK DEFAULT (Tema inicial)
       ========================================== */
    --brand-primary: #7030A0; /* Color sólido principal */
    --brand-accent: #E487F5; /* Color brillante/neón para resaltar textos en modo oscuro */
    --brand-electric: #4F46E5; /* Tercer color usado para cerrar los degradados */
    --success-green: #10b981; /* Verde universal para validaciones correctas */
}

/* ==========================================
   MODO NOCHE (Activado inyectando la clase .dark-mode en el contenedor padre)
   ========================================== */
.dark-mode {
    --bg-body: #050810; /* OLED Verdadero */
    --bg-surface: #0f172a;
    --bg-surface-hover: #1e293b;
    /* 🔥 FIX: Textos mucho más brillantes y nítidos */
    --text-main: #ffffff; /* Blanco puro para máximo contraste */
    --text-muted: #cbd5e1; /* Gris claro metálico (antes muy oscuro) */
    --text-soft: #94a3b8; /* Texto de soporte legible (salva el texto de "Build Care") */
    /* 🔥 FIX: Bordes más definidos para que los botones (como Cerrar Sesión) resalten */
    --border-subtle: rgba(255,255,255,0.08); /* Líneas divisorias más claras */
    --border-hard: #475569; /* Contornos de botones e inputs más marcados */

    --glass-bg: rgba(15, 23, 42, 0.85);
    --shadow-premium: 0 15px 50px rgba(0,0,0,0.6);
}

/* ==========================================================================
   TUS 11 TEMAS (Cada clase sobreescribe las variables base al inyectarse en el layout)
   ========================================================================== */
.theme-pink {
    --brand-primary: #7030A0;
    --brand-accent: #E487F5;
    --brand-electric: #4F46E5;
}

.theme-blue {
    --brand-primary: #1e3a8a;
    --brand-accent: #3b82f6;
    --brand-electric: #14b8a6;
}

.theme-green {
    --brand-primary: #064e3b;
    --brand-accent: #10b981;
    --brand-electric: #0ea5e9;
}

.theme-red {
    --brand-primary: #7f1d1d;
    --brand-accent: #ef4444;
    --brand-electric: #f59e0b;
}

.theme-amber {
    --brand-primary: #78350f;
    --brand-accent: #f59e0b;
    --brand-electric: #f43f5e;
}

.theme-dental {
    --brand-primary: #0f766e;
    --brand-accent: #00b4d8;
    --brand-electric: #6366f1;
}

.theme-sunset {
    --brand-primary: #f43f5e;
    --brand-accent: #fb923c;
    --brand-electric: #e11d48;
}

.theme-ocean {
    --brand-primary: #0284c7;
    --brand-accent: #38bdf8;
    --brand-electric: #0ea5e9;
}

.theme-lavender {
    --brand-primary: #8b5cf6;
    --brand-accent: #d8b4fe;
    --brand-electric: #a855f7;
}

.theme-mint {
    --brand-primary: #0d9488;
    --brand-accent: #5eead4;
    --brand-electric: #14b8a6;
}

.theme-gold {
    --brand-primary: #d97706;
    --brand-accent: #fcd34d;
    --brand-electric: #f59e0b;
}

/* ==========================================
   REGLA GLOBAL DE ANIMACIÓN
   ========================================== */
/* Transición global suave para que el cambio entre temas/modo noche no lastime la vista */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.4s ease, color 0.4s ease;
}