/* public/assets/css/style.css */
/* VERSIÓN VERIFICADA Y LIMPIA */

body {
    overflow-x: hidden; 
}

#wrapper {
    display: flex; /* <-- ESTA ES LA LÍNEA MÁGICA */
}

/* --- Sidebar --- */
#sidebar-wrapper {
    min-height: 100vh;
    width: 250px;
    background-color: #2c3e50;
    transition: margin 0.25s ease-out;
    /* Corrección para que el sidebar no se "caiga" en pantallas súper pequeñas */
    /* antes de que el JS lo oculte */
    margin-left: 0; 
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #34495e;
    color: #ffffff;
}

#sidebar-wrapper .list-group {
    width: 250px;
}

#sidebar-wrapper .list-group-item {
    background-color: #2c3e50;
    color: #ecf0f1;
    border: none;
}

#sidebar-wrapper .list-group-item.active {
    background-color: #c0392b;
    color: #ffffff;
    border: none;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: #34495e;
    color: #ffffff;
}

#sidebar-wrapper .text-muted {
    color: #95a5a6 !important;
    font-weight: bold;
    font-size: 0.9em;
}

/* --- Contenido Principal --- */
#page-content-wrapper {
    flex: 1; /* Ocupa el resto del espacio */
    min-width: 0; /* Soluciona problemas de "overflow" */
}

/* --- Estado "Toggled" (Oculto) --- */
/* Cuando el sidebar está oculto */
#wrapper.toggled #sidebar-wrapper {
    margin-left: -250px; /* Oculta el sidebar hacia la izquierda */
}

/* Ajustes para Responsivo */
@media (max-width: 767.98px) {
    /* En móvil, empezamos con el sidebar oculto */
    #sidebar-wrapper {
        margin-left: -250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0; /* Lo mostramos */
    }
}

@media (min-width: 768px) {
    /* En pantallas grandes, el sidebar siempre está visible */
    #sidebar-wrapper {
        margin-left: 0;
    }
    
    /* Ocultamos el botón de toggle en pantallas grandes */
    #sidebarToggle {
        display: none;
    }

    /* Estado Toggled en pantallas grandes (si se quiere implementar) */
    #wrapper.toggled #sidebar-wrapper {
        margin-left: -250px; 
    }
}