/*
 * static/css/main.css
 * Esquema de color: Dark Mode (Ultra Profundo) | Estilo: Glassmorphism / Neon
 */

/* ========== FUENTES Y VARIABLES DE COLOR ========== */
:root {
    /* Paleta de colores unificada (Valkyrie - Ultra Dark) */
    --clr-primary: #8a2be2;      /* Violeta neón principal (Electric Violet) */
    --clr-secondary: #00bcd4;   /* Cian neón (Aqua) */
    
    --clr-bg-main: #060614;     /* Fondo principal (Casi negro, profundo) */
    --clr-bg-card: #0c0c20;     /* Fondo de tarjetas (Más oscuro que el fondo) */
    --clr-bg-glass: rgba(12, 12, 32, 0.7); /* Base Glass (Opacidad baja) */
    
    --clr-border: rgba(138, 43, 226, 0.3); /* Borde sutil púrpura */
    --clr-border-active: rgba(0, 188, 212, 0.7); /* Borde Cian/Azul al pasar el ratón */
    --clr-shadow-neon: 0 0 15px rgba(138, 43, 226, 0.4); /* Sombra suave para el Glass */
    
    --clr-text-main: #ffffff;
    --clr-text-muted: #888aa0;
}

/* Aplicación de variables al cuerpo */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--clr-bg-main);
    color: var(--clr-text-main);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    letter-spacing: -0.01em;
}

/* Ocultar scrollbar si la pantalla lo permite para un look más limpio */
body.no-scroll {
    overflow: hidden;
}

/* ========== FONDOS Y ORBES (Mejoras de mezcla) ========== */

/* Fondo de orbes flotantes */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Se eliminan los gradientes estáticos para usar solo los orbes */
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px); /* Más borroso = más suave */
    opacity: 0.35; /* Un poco más de brillo para el neón */
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen; /* Efecto de brillo y superposición */
    transition: background 20s ease-in-out; /* Para transiciones sutiles si cambias el color de fondo */
}
.orb-1 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, var(--clr-secondary) 0%, transparent 70%);
    top: -250px; left: -250px;
    animation: float 30s ease-in-out infinite;
}
.orb-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--clr-primary) 0%, transparent 70%);
    bottom: -250px; right: -250px;
    animation: float 25s ease-in-out infinite reverse;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(50px, -70px) scale(1.05); }
    66% { transform: translate(-30px, 40px) scale(0.95); }
}

/* ========== EFECTO "GLASS" VALKYRIE (Pronunciado) ========== */
.glass {
    background: var(--clr-bg-glass);
    backdrop-filter: blur(28px) saturate(160%); /* Más desenfoque */
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--clr-border);
    box-shadow: var(--clr-shadow-neon), 0 10px 40px rgba(0, 0, 0, 0.6); /* Combinar sombra Glass y Neón */
}
.glass-card {
    @apply glass rounded-2xl p-6 transition-all duration-300;
    /* Se añade una ligera sombra interior para simular profundidad */
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.glass-card:hover {
    border-color: var(--clr-border-active);
    transform: translateY(-5px); /* Movimiento más notorio */
    box-shadow: var(--clr-shadow-neon), 0 15px 50px rgba(0, 0, 0, 0.7);
}

/* Tarjetas Estáticas (Stats, etc.) - Asegurar que el fondo es oscuro */
.stat-card {
    background-color: var(--clr-bg-card); /* Fondo sólido más oscuro para contraste */
    border: 1px solid var(--clr-border);
    @apply rounded-xl p-5 transition-all duration-300;
}
.stat-card:hover {
    border-color: var(--clr-border-active);
    transform: scale(1.03); /* Efecto de pop más suave */
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.2);
}

/* ========== COMPONENTES DE UI ========== */

/* Botones */
.btn-glass {
    @apply rounded-lg px-5 py-2.5 text-sm font-medium text-val-text shadow-lg transition-all duration-300 hover:scale-105 active:scale-95;
    background: rgba(255, 255, 255, 0.05); /* Base sutil */
    border: 1px solid var(--clr-border);
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--clr-secondary);
}

.btn-primary {
    @apply rounded-lg px-5 py-2.5 text-sm font-medium text-white transition-all duration-300 hover:scale-105 active:scale-95;
    background: linear-gradient(135deg, var(--clr-secondary) 0%, var(--clr-primary) 100%);
    /* Sombra con brillo neón */
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5), 0 4px 20px rgba(138, 43, 226, 0.4);
}
.btn-primary:hover {
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.7), 0 8px 30px rgba(138, 43, 226, 0.7);
}


/* Campos de Input */
.input-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--clr-border);
    @apply w-full rounded-lg text-white placeholder-val-text-muted transition-all duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-val-border-hover focus:border-val-border-hover;
    padding: 12px 16px;
}

/* Scrollbar (Neón) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--clr-bg-main); border-radius: 4px; }
::-webkit-scrollbar-thumb { 
    background: linear-gradient(to bottom, var(--clr-secondary), var(--clr-primary)); 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #4dffff, #b18cff); }

/* Animación Ripple (Asegurar que se mezcla bien) */
@keyframes ripple {
    to { transform: scale(2); opacity: 0; }
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
    mix-blend-mode: soft-light; /* Mezcla más suave */
}

/* Toast / Notificaciones (Coherencia Visual) */
#toast-container { @apply fixed bottom-5 right-5 z-[9999] space-y-3; }
.toast {
    background: var(--clr-bg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--clr-border);
    @apply max-w-sm p-4 flex items-center space-x-3 rounded-2xl opacity-100 transition-all duration-300;
    /* La animación se maneja mejor con clases JS (como en tu app.js) */
}
.toast-icon { 
    @apply w-10 h-10 rounded-xl flex items-center justify-center shadow-lg; 
    /* Añadir un ligero brillo al icono */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Colores de iconos más específicos para el neón */
.toast.success .toast-icon { background: linear-gradient(135deg, #10b981, #066645); }
.toast.error .toast-icon { background: linear-gradient(135deg, #ef4444, #9a2b2b); }
.toast.info .toast-icon { background: linear-gradient(135deg, var(--clr-secondary), #007788); }

/* Overlay de Carga */
#loading-overlay {
    @apply hidden fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm;
    background-color: rgba(6, 6, 20, 0.9); /* Usar el fondo principal con alta opacidad */
}
.loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--clr-border);
    border-top-color: var(--clr-secondary); /* Color neón */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}