/* =================================================0
   ESTILO PERSONALIZADO TURQUESA - FUNDACIÓN AMAL
   ================================================== */

/* 1. ESTRUCTURA Y FONDO PRINCIPAL */
.main-sidebar {
    background: linear-gradient(180deg, #08111e 0%, #060d16 100%) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.1) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* 2. LOGO Y MARCA (Más aire y brillo) */
.brand-link {
    padding: 20px 15px !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1) !important;
    display: flex;
    align-items: center;
}

.brand-image {
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    border-radius: 50%;
    margin-left: 0.5rem !important;
}

.brand-text {
    color: #00e5ff !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 1.1rem !important;
}

/* 3. ENCABEZADOS DE SECCIÓN (Sutiles y elegantes) */
.nav-header {
    color: rgba(0, 229, 255, 0.6) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    padding: 1.5rem 1rem 0.5rem 1.5rem !important;
}

/* 4. ITEMS DEL MENÚ (Estado base) */
.nav-sidebar .nav-link {
    color: #cbd5e1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px !important;
    margin: 4px 12px !important;
    padding: 10px 15px !important;
}

/* Iconos inactivos */
.nav-sidebar .nav-link i {
    color: #00a8cc !important;
    width: 35px;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* 5. EFECTOS HOVER (Al pasar el mouse) */
.nav-sidebar .nav-link:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    color: #00e5ff !important;
}

.nav-sidebar .nav-link:hover i {
    color: #00e5ff !important;
    transform: translateX(3px) scale(1.1);
}

/* 6. ITEM ACTIVO (Resaltado Neón) */
.nav-sidebar .nav-item.menu-open > .nav-link,
.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.2) 0%, transparent 100%) !important;
    color: #00e5ff !important;
    border-left: 4px solid #00e5ff !important;
    font-weight: 700;
    box-shadow: -5px 0 15px rgba(0, 229, 255, 0.1);
}

.nav-sidebar .nav-link.active i {
    color: #00e5ff !important;
}

/* 7. SUBMENÚS (Árbol de navegación) */
.nav-treeview > .nav-item > .nav-link {
    padding-left: 2.5rem !important;
    font-size: 0.9rem !important;
    border-left: 1px solid rgba(0, 229, 255, 0.15);
    margin-left: 1.8rem !important;
    border-radius: 0 12px 12px 0 !important;
}

/* 8. SCROLLBAR (Estilo Minimalista) */
.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-track {
    background: #08111e;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 204, 0.3);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #00e5ff;
}

/* 9. FIX PARA EL BOTÓN DE HAMBURGUESA (Navbar superior) */
.nav-link[data-widget="pushmenu"] {
    color: #00e5ff !important;
}

/* Tarjetas del Dashboard Personalizadas */
.small-box {
    background: #0d1b2a !important; /* Azul un poco más claro que el sidebar */
    color: #fff !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 15px !important;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.small-box:hover {
    transform: translateY(-5px);
    border-color: #00e5ff !important;
    box-shadow: 0 10px 20px rgba(0, 229, 255, 0.2);
}

.small-box .icon > i {
    color: rgba(0, 229, 255, 0.3) !important; /* Icono grande de fondo sutil */
}

.small-box .inner h3 {
    color: #00e5ff !important; /* El número resalta en neón */
    font-weight: 800;
}

/* Botón "Más información" de la tarjeta */
.small-box-footer {
    background: rgba(0, 229, 255, 0.1) !important;
    color: #00e5ff !important;
}

/* =================================================
   ESTILO PARA CALENDARIO - CLARO Y PROFESIONAL
   ================================================== */