/* ---------------------------------------------------------
   1. TEMA BÁSICO (Diurno - Original)
   --------------------------------------------------------- */
:root, [data-theme="basico"] {
    /* Fondos */
    --bg-sitio: #fef6e4;                      
    --bg-gradiente: linear-gradient(to right, #fef6e4, #e0f7fa);
    --bg-tarjeta: #ffffff;                  
    --bg-input: #f9f9f9;
    
    /* Textos */
    --texto-principal: #2E2E2E;               
    --texto-secundario: #6b7280;              
    --texto-blanco: #ffffff;                  
    
    /* Colores de Marca y Botones */
    --color-primario: #12345b;               
    --color-primario-hover: #1aa9d5;      
    --color-secundario: #d81b60;         
    --color-secundario-hover: #f48fb1;
    
    /* Colores Funcionales */
    --exito-verde: #4CAF50;
    --exito-verde-hover: #81C784;
    --alerta-naranja: #ff6f61;               
    --moneda-oro: #fbbf24;                  
    
    /* Bordes y Sombras */
    --borde-suave: #e5e7eb;
    --borde-fuerte: #ced4da;
    --sombra-tarjeta: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------
   2. MODO NOCHE (Oscuro)
   --------------------------------------------------------- */
[data-theme="oscuro"] {
    /* Fondos */
    --bg-sitio: #111827;                      /* Azul muy oscuro/casi negro */
    --bg-gradiente: linear-gradient(to right, #111827, #1f2937);
    --bg-tarjeta: #1f2937;                    /* Gris oscuro para destacar cajas */
    --bg-input: #374151;
    
    /* Textos */
    --texto-principal: #f9fafb;               /* Blanco roto (no cansa la vista) */
    --texto-secundario: #9ca3af;              /* Gris claro */
    --texto-blanco: #ffffff;
    
    /* Colores de Marca (Adaptados para no deslumbrar) */
    --color-primario: #3b82f6;                /* Azul más brillante para destacar en negro */
    --color-primario-hover: #60a5fa;
    --color-secundario: #ec4899;              /* Rosa neón suave */
    --color-secundario-hover: #f472b6;
    
    /* Colores Funcionales */
    --exito-verde: #10b981;
    --exito-verde-hover: #34d399;
    --alerta-naranja: #f87171;
    --moneda-oro: #f59e0b;
    
    /* Bordes y Sombras */
    --borde-suave: #374151;
    --borde-fuerte: #4b5563;
    --sombra-tarjeta: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------
   3. CYBER MATH (Neón)
   --------------------------------------------------------- */
[data-theme="neon"] {
    /* Fondos */
    --bg-sitio: #050505;                      /* Negro puro Matrix */
    --bg-gradiente: linear-gradient(to right, #000000, #0a0a0a);
    --bg-tarjeta: #0a0a0a;
    --bg-input: #111;
    
    /* Textos */
    --texto-principal: #00ffcc;               /* Cian neón */
    --texto-secundario: #a3e635;              /* Verde lima */
    --texto-blanco: #ffffff;
    
    /* Colores de Marca */
    --color-primario: #ff00ff;                /* Magenta puro */
    --color-primario-hover: #d900d9;
    --color-secundario: #00ffcc;
    --color-secundario-hover: #00e6b8;
    
    /* Colores Funcionales */
    --exito-verde: #39ff14;                   /* Verde radioactivo */
    --exito-verde-hover: #32e612;
    --alerta-naranja: #ff003c;
    --moneda-oro: #ffd700;
    
    /* Bordes y Sombras (Aquí el borde ES la sombra) */
    --borde-suave: #00ffcc;
    --borde-fuerte: #ff00ff;
    --sombra-tarjeta: 0 0 10px rgba(0, 255, 204, 0.2), inset 0 0 10px rgba(255, 0, 255, 0.1);
}

/* ---------------------------------------------------------
   4. MODO OCÉANO (Tonos turquesa y marinos)
   --------------------------------------------------------- */
[data-theme="oceano"] {
    /* Fondos */
    --bg-sitio: #e0f7fa;                      /* Cian muy claro */
    --bg-gradiente: linear-gradient(to right, #e0f7fa, #b2ebf2);
    --bg-tarjeta: #ffffff;                    
    --bg-input: #f1f8e9;
    
    /* Textos */
    --texto-principal: #004d40;               /* Verde marino muy oscuro */
    --texto-secundario: #00796b;              
    --texto-blanco: #ffffff;
    
    /* Colores de Marca y Botones */
    --color-primario: #00838f;                /* Cian oscuro */
    --color-primario-hover: #00bcd4;          
    --color-secundario: #0288d1;              /* Azul océano */
    --color-secundario-hover: #29b6f6;
    
    /* Colores Funcionales */
    --exito-verde: #43a047;
    --alerta-naranja: #ff7043;                /* Coral */
    --moneda-oro: #fbc02d;
    
    /* Bordes y Sombras */
    --borde-suave: #b2dfdb;
    --borde-fuerte: #80cbc4;
    --sombra-tarjeta: 0 4px 15px rgba(0, 77, 64, 0.1);
}