/* * Archivo: assets/css/estilos.css
 * Propósito: Sistema de diseño Glassmorphism premium (Deep Blue & Royal Blue).
 * Creado por Viktor para iGusstDesign.
 */

:root {
    /* Paleta de colores Premium */
    --primary-color: #3B82F6; /* Royal Blue */
    --primary-dark: #1E293B;  /* Deep Blue */
    --text-light: #F8FAFC;    /* Smoke White */
    --text-muted: #94A3B8;    /* Cool Gray */
    
    /* Variables Glassmorphism */
    --glass-bg: rgba(30, 41, 59, 0.7); /* Deep blue con transparencia */
    --glass-border: rgba(248, 250, 252, 0.15); /* Borde blanco muy suave */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Sombra de profundidad */
    --blur-effect: blur(12px);
    
    --border-radius: 16px;
}

body {
    /* Fondo con degradado elegante */
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    background-attachment: fixed;
    color: var(--text-light);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* --- CLASES UTILITARIAS GLASSMORPHISM --- */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius);
    padding: 2.5rem;
}

/* Inputs de texto minimalistas */
.glass-input {
    background: rgba(15, 23, 42, 0.5) !important; /* Fondo muy oscuro translúcido */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    color: var(--text-light) !important;
    transition: all 0.3s ease !important;
}

.glass-input::placeholder {
    color: var(--text-muted) !important;
}

.glass-input:focus {
    background: rgba(15, 23, 42, 0.8) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important; /* Resplandor azul */
    border-color: var(--primary-color) !important;
}

/* Botones con efecto de cristal */
.glass-btn {
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: var(--text-light);
    font-weight: 600;
    border-radius: 50px;
    padding: 12px 25px;
    transition: all 0.3s ease;
}

.glass-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

/* Textos obligatorios para que no se pierdan en fondos oscuros */
label.form-label, h3, p {
    color: var(--text-light) !important;
}

.text-white-50 {
    color: var(--text-muted) !important;
}

/* Scrollbar estilizado */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--primary-dark); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
```