body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden; /* Prevenir scroll horizontal */
    padding: 0;
    margin: 0;
}

html {
    height: -webkit-fill-available;
    overflow-x: hidden; /* Prevenir scroll horizontal */
}

main {
    overflow-y: auto;
    padding-bottom: 60px; /* Espacio para el footer si lo hay */
}

.sidebar {
    width: 280px; /* Ancho fijo para el sidebar */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030; /* Encima del contenido normal */
    transition: all 0.3s;
    overflow-y: auto; /* Permitir scroll en el sidebar si es necesario */
}

.main-content {
    margin-left: 280px; /* Mismo ancho que el sidebar */
    padding-top: 56px; /* Altura de la topbar (ajustar si cambia) */
    transition: margin-left 0.3s;
    min-height: 100vh; /* Usar min-height en lugar de height */
}

.topbar {
    height: 56px; /* Altura fija para la topbar */
    position: fixed;
    top: 0;
    left: 280px; /* Empieza después del sidebar */
    right: 0;
    z-index: 1020; /* Debajo del sidebar pero encima del contenido */
    transition: left 0.3s;
}

/* Responsividad: Ocultar sidebar y ajustar márgenes en pantallas pequeñas */
@media (max-width: 991.98px) {
    .sidebar {
        left: -280px; /* Ocultar fuera de la pantalla */
    }

        .sidebar.active {
            left: 0; /* Mostrar cuando esté activo */
        }

    .main-content {
        margin-left: 0; /* Ocupar todo el ancho */
    }

    .topbar {
        left: 0; /* Ocupar todo el ancho */
    }
    /* Botón para mostrar/ocultar sidebar en modo móvil */
    .sidebar-toggle {
        display: block !important;
    }
}

/* Estilos para el selector de centros */
#centroPicker {
    transition: all 0.2s ease;
    cursor: pointer;
}

#centroPicker:hover {
    background-color: #495057 !important;
    border-color: #6c757d !important;
}

#centroPicker:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
}