/* --- Estilos para el menú lateral unificado --- */

.sidebar {
    width: 280px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: var(--bg);
    box-shadow: 8px 0 16px var(--shadow-dark);
    padding: 1.5rem;
    transition: left 0.3s ease-in-out;
}

.main-content {
    margin-left: 280px;
    transition: margin-left 0.3s ease-in-out;
}

/* Ajustes para vista móvil */
@media (max-width: 991.98px) {
    .sidebar {
        left: -280px; /* Oculto por defecto */
        z-index: 1050; /* Se superpone al contenido */
    }
    .sidebar.active {
        left: 0; /* Muestra el menú */
    }
    .main-content {
        margin-left: 0; /* Sin margen en móvil */
    }
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1040; /* Debajo del menú, sobre el contenido */
    }
}

.sidebar .navbar-brand {
    color: var(--primary);
    margin-bottom: 2rem;
    text-align: center;
    /* Estos estilos vienen de menu.css pero son necesarios aquí */
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    color: var(--text-light);
    font-weight: 500;
    transition: all 0.3s ease;
}

.sidebar .nav-link i { /* Estilo para los iconos FontAwesome */
    width: 20px;
}

.sidebar .nav-link:hover {
    background: var(--card-bg);
    color: var(--primary);
}

.sidebar .nav-link.active {
    background-color: var(--card-bg);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

.sidebar .logout-link {
    position: absolute;
    bottom: 2rem;
    width: calc(100% - 3rem);
}

/* --- Theme Switcher (copiado de menu.css para mantenerlo autocontenido) --- */
.sidebar .theme-switch-wrapper { display: flex; align-items: center; margin-top: 2rem; }
.theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; }
.theme-switch input { display: none; }
.slider { background: var(--card-bg); box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: var(--transition); border-radius: 34px; }
.slider:before { background: var(--primary); bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: var(--transition); width: 26px; border-radius: 50%; }
input:checked + .slider { background: var(--primary); }
input:checked + .slider:before { transform: translateX(26px); background: var(--white-color); }
.slider i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text); }
.slider .fa-sun { left: 8px; }
.slider .fa-moon { right: 8px; color: var(--dark-text); }
.dark-mode .slider .fa-moon { color: var(--text); }