/* ==========================================================
   VARIABLES GLOBALES - MODO INTERMEDIO SUAVE
   ========================================================== */

:root {
    /* Fondo gris-azul suave intermedio */
    --bs-body-bg: #e8eaf0;
    --bs-body-color: #2d3748; 
    --bs-border-color: #cbd5e0;
    
    /* Colores Primarios */
    --primary-color-base: #4299e1; /* Azul medio vibrante */
    --primary-color-darker: #3182ce; 

    /* Componentes (Cards, Modal, etc.) */
    --card-bg: #f7fafc;
    --card-text-color: #2d3748;
    
    /* Navbar - Gris azulado medio */
    --navbar-bg: #2c89fa; 
    --navbar-text-color: #f7fafc;
}


/* ==========================================================
   APLICACIÓN GENERAL
   ========================================================== */

body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important; 
}

/* COMPONENTES BASE */
.card, .modal-content, .offcanvas, .dropdown-menu {
    background-color: var(--card-bg) !important;
    color: var(--card-text-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* TEXTO Y TÍTULOS */
.card-title, .card-text, .modal-header, .modal-body, .form-label, 
h1, h2, h3, h4, h5, h6 {
    color: var(--card-text-color) !important; 
}

.text-muted {
    color: #718096 !important;
}

/* INPUTS DE FORMULARIO */
.form-control {
    background-color: #ffffff !important;
    color: var(--card-text-color) !important;
    border-color: var(--bs-border-color) !important;
}

.form-control:focus {
    border-color: var(--primary-color-base) !important;
    box-shadow: 0 0 8px rgba(66, 153, 225, 0.3);
}


/* ==========================================================
   NAVBAR
   ========================================================== */

#main-navbar {
    background: var(--navbar-bg) !important;
}

#main-navbar .navbar-title,
#main-navbar .nav-link,
#main-navbar .navbar-brand,
#main-navbar .material-icons {
    color: var(--navbar-text-color) !important;
}


/* ==========================================================
   ÍCONOS
   ========================================================== */

.material-icons, i.fa, i.fas {
    color: var(--card-text-color) !important; 
}

.btn-primary .material-icons,
.btn-primary i.fa, 
.btn-primary i.fas {
    color: #fff !important; 
}


/* ==========================================================
   BOTONES
   ========================================================== */

.btn-outline-primary {
    color: var(--primary-color-base);
    border-color: var(--primary-color-base);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color-base) !important;
    color: #fff !important;
}

.btn-outline-primary:hover .material-icons {
    color: #fff !important;
}


/* ==========================================================
   ALERTAS
   ========================================================== */

.text-danger, .text-danger .material-icons {
    color: #e53e3e !important;
}