/* =========================================
   CORE UI - DJS DE CHILE (DARK TECH SYSTEM) 
   Núcleo visual invulnerable
   ========================================= */

:root { 
    --bg-base: #040d13; 
    --bg-surface: rgba(14, 44, 64, 0.4); 
    --accent-teal: #148D8D; 
    --accent-sand: #EFBC75; 
    --text-white: #ffffff; 
    --text-muted: #9CA3AF; 
    --border-glass: rgba(255, 255, 255, 0.08); 
}

/* -----------------------------------------
   1. SISTEMA DE FORMULARIOS (Inputs Dark)
   ----------------------------------------- */
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="url"], 
textarea, 
select {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    padding: 15px !important;
    color: var(--text-white) !important;
    border-radius: 12px !important; /* Curvatura elegante */
    outline: none !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-teal) !important;
    background: rgba(20, 141, 141, 0.05) !important;
    box-shadow: 0 0 15px rgba(20, 141, 141, 0.3) !important;
}

/* -----------------------------------------
   2. SISTEMA DE BOTONES GLOBAL (Glassmorphism Puro)
   Reemplaza a: .btn-primary, .btn-glow, .admin-glass-btn, .btn-ghost-glass
   ----------------------------------------- */
.btn-glass, button[type="submit"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.0) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Efecto Hover General (Se levanta) */
.btn-glass:hover, button[type="submit"]:hover {
    transform: translateY(-2px) !important;
}

/* --- MODIFICADORES DE COLOR NEÓN --- */

/* Turquesa (Aprobar, Guardar, Entrar) */
.btn-teal { border-color: var(--accent-teal) !important; color: var(--accent-teal) !important; }
.btn-teal:hover { 
    background: linear-gradient(135deg, rgba(20, 141, 141, 0.15) 0%, rgba(20, 141, 141, 0.0) 100%) !important;
    color: #fff !important; 
    box-shadow: 0 0 20px rgba(20, 141, 141, 0.3) !important; 
}

/* Dorado / Arena (Verificar, Acciones Premium) */
.btn-sand { border-color: var(--accent-sand) !important; color: var(--accent-sand) !important; }
.btn-sand:hover { 
    background: linear-gradient(135deg, rgba(239, 188, 117, 0.15) 0%, rgba(239, 188, 117, 0.0) 100%) !important;
    color: #000 !important; 
    box-shadow: 0 0 20px rgba(239, 188, 117, 0.3) !important; 
}

/* Rojo (Borrar, Rechazar, Peligro) */
.btn-danger { border-color: #ff4d4d !important; color: #ff4d4d !important; }
.btn-danger:hover { 
    background: linear-gradient(135deg, rgba(255, 77, 77, 0.15) 0%, rgba(255, 77, 77, 0.0) 100%) !important;
    color: #fff !important; 
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.3) !important; 
}

/* Blanco / Neutro (Editar, Cancelar, Compartir) */
.btn-light { border-color: rgba(255,255,255,0.3) !important; color: rgba(255,255,255,0.8) !important; }
.btn-light:hover { 
    border-color: #fff !important; color: #fff !important; 
    background: rgba(255,255,255,0.1) !important; 
    box-shadow: 0 0 15px rgba(255,255,255,0.2) !important; 
}

/* -----------------------------------------
   3. SISTEMA DE PANELES DE CRISTAL GLOBAL
   ----------------------------------------- */
.glass-panel, .modal-bubble, .stat-card, .bento-card, .email-card {
    background: rgba(14, 44, 64, 0.2) !important; /* Más transparente */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}
/* -----------------------------------------
   4. CORRECCIONES NATIVAS (Dropdowns y Color Pickers)
   ----------------------------------------- */
/* Evitar opciones blancas sobre fondo blanco */
select option {
    background-color: #040d13 !important; 
    color: #ffffff !important;
    padding: 10px !important;
}

/* Devolverle la forma al input de color sin perder el estilo */
input[type="color"] {
    padding: 0 !important;
    height: 50px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 12px;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 12px;
}
/* =======================================================
 * BOTONES GLASSMORPHISM - PANEL DE ADMINISTRACIÓN
 * ======================================================= */
.btn-glass-admin {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Efecto al pasar el mouse general */
.btn-glass-admin:hover {
    transform: translateY(-2px);
}

/* Variante Turquesa (APROBAR / INFO) */
.btn-glass-teal { border-color: var(--accent-teal, #148D8D); color: var(--accent-teal, #148D8D); background: rgba(20, 141, 141, 0.05); }
.btn-glass-teal:hover { box-shadow: 0 0 15px rgba(20, 141, 141, 0.4); background: rgba(20, 141, 141, 0.15); color: #fff;}

/* Variante Dorada (VERIFICAR / EDITAR) */
.btn-glass-gold { border-color: var(--accent-sand, #EFBC75); color: var(--accent-sand, #EFBC75); background: rgba(239, 188, 117, 0.05); }
.btn-glass-gold:hover { box-shadow: 0 0 15px rgba(239, 188, 117, 0.4); background: rgba(239, 188, 117, 0.15); color: #000;}

/* Variante Roja (BORRAR / RECHAZAR) */
.btn-glass-danger { border-color: #ff4d4d; color: #ff4d4d; background: rgba(255, 77, 77, 0.05); }
.btn-glass-danger:hover { box-shadow: 0 0 15px rgba(255, 77, 77, 0.4); background: rgba(255, 77, 77, 0.15); color: #fff;}

/* Variante Neutra (EDITAR EVENTOS, ETC) */
.btn-glass-neutral { border-color: rgba(255,255,255,0.3); color: #ccc; }
.btn-glass-neutral:hover { border-color: #fff; color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.2); }