/* Corrección del scroll del sidebar */
.sidebar-wrapper {
    height: 100vh !important;
    overflow: hidden !important; /* Sin scroll en el wrapper */
    position: fixed !important;
}

/* Asegurar que el contenido del sidebar tenga scroll cuando sea necesario */
.sidebar-wrapper .sidebar-menu {
    max-height: calc(100vh - 120px) !important; /* Restar altura del header */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 20px;
}

/* Mejorar la experiencia de scroll en el sidebar */
.sidebar-wrapper .sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar-wrapper .sidebar-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Para navegadores Firefox */
.sidebar-wrapper .sidebar-menu {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Asegurar que en pantallas pequeñas el sidebar mantenga su scroll */
@media screen and (max-width: 1199px) {
    .sidebar-wrapper {
        height: 100vh !important;
        overflow: hidden !important; /* Sin scroll en el wrapper */
    }
    
    .sidebar-wrapper .sidebar-menu {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
}

/* Ajuste específico para cuando el sidebar está activo en móvil */
@media screen and (max-width: 767px) {
    #sidebar.active .sidebar-wrapper {
        height: 100vh !important;
        overflow: hidden !important; /* Sin scroll en el wrapper */
    }
    
    #sidebar.active .sidebar-wrapper .sidebar-menu {
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }
}

/* Mejoras visuales adicionales */
.sidebar-wrapper .sidebar-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
    border-bottom: 1px solid #f0f1f5;
    margin-bottom: 10px;
}

/* Asegurar que el contenido principal mantenga su propio scroll independiente */
#main {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#main .page-content {
    min-height: calc(100vh - 200px);
}