:root {
    --navbar-height: 56px;
    --sidebar-width: 250px;
}

body {
    min-width: 360px
}

.sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
}

.mobileSidebar {
    --bs-offcanvas-width: var(--sidebar-width);
}

.main-content {
    padding: 1.5rem;
}

.main-content-sesion {
    margin-left: var(--sidebar-width);
    padding: 1.5rem;
}

.sidebar .nav-link {
    color: #212529;
    transition: all 0.2s ease;
}

    .sidebar .nav-link:hover {
        background-color: #e9ecef;
        color: #0d6efd;
    }

@media (max-width: 991.98px) {

    .main-content-sesion {
        margin-left: 0;
    }
}

.nav-pills .nav-link.active {
    background-color: var(--color-principal);
    color: white;
}

    .nav-pills .nav-link.active:hover {
        background-color: var(--color-principal-hover);
    }

.nav-link:hover {
    background-color: #e9ecef;
    color: #343a40;
}

.progress-bar-act {
    background-color: #393840;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    color: var(--color-principal)
}

    .loading-overlay .spinner-border {
        color: var(--color-principal);
        width: 4rem;
        height: 4rem;
        --bs-spinner-border-width: .45rem;
    }