.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:70px;
    height:100vh;
    background:#eef5f5;
    transition:width .25s;
    z-index:20;
    overflow-y:scroll;;
    overflow-x:hidden;
    scrollbar-width: none;
}

.sidebar-mobile-close{
    display:none;
}

/* sidebar expandido */
.sidebar.expand{
    width:240px;
}

/* hover expande cuando no está bloqueado */
.sidebar:not(.pinned):hover{
    width:240px;
}

/* contenido */

.main-content{
    margin-left:70px;
    transition:margin-left .25s;
    margin-bottom: 24px;
}

.sidebar.expand ~ .main-content{
    margin-left:240px;
}

.sidebar:not(.pinned):hover ~ .main-content{
    margin-left:240px;
}

/* menu */

.sidebar ul{
    list-style:none;
    padding:10px;
    margin:0;
}

.sidebar li{
    position:relative;
    border-radius: 10px;
    margin-bottom: 8px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 16px;
    color:#001524;
    text-decoration:none;
    border-radius: 10px;
}

.sidebar i{
    width:21px;
    text-align:center;
    font-size:20px;
    color: #16223a;
}
[data-bs-theme="dark"] .sidebar i {
    color: #fff;
}

/* texto */
.sidebar .text{
    opacity:0;
    transition:.2s;
    white-space:nowrap;
    font-size: 15px;
}

.sidebar.expand .text,
.sidebar:not(.pinned):hover .text{
    opacity:1;
}

.sidebar li.active > a > i {
    color: #fff;
}
.sidebar li.active > a > span {
    color: #fff;
}


.has-sub a.open {
    background-color: #d5e8e8;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}


/* flecha submenu */
.arrow{
    margin-left:auto;
    font-size:12px;
    opacity:0;
}

.sidebar.expand .arrow,
.sidebar:not(.pinned):hover .arrow{
    opacity:1;
    font-size: 13px;
}

/* submenu */
.submenu{
    display:none;
    background:#D5E8E8;
    border-radius: 0px 0px 10px 10px
}

.submenu li{
    padding: 0px;
}


.submenu a{
    padding: 5px 10px;
    font-size: 14px;
    gap: 5px;
}

.submenu a:hover{
    background: #fff;
    padding: 5px 10px;
}

.submenu a:before{
    content: "";
    /*background: #08233a;*/
    border: 1px solid #08233a;
    width: 7px;
    height: 7px;
    border-radius: 50px;
}
.submenu li.active a:before{
    border: 1px solid #fff;
}
/* item activo */
.sidebar li.active > a{
    background:#084f5e;
}

.submenu li.active a{
    background:#063b45;
    color: #fff;
}


/* MOBILE */
.sidebar-overlay{
    display:none;
}

.topbarlinks {
    background-color: transparent;
    border: 1px solid #020617;
    border-radius: 5px;
    padding: 0px 8px;
    color: #0c7286;
    font-size: 22px;
}

.topbar-shortcuts {
    gap: .4rem;
}

.topbar-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 36px;
    height: 36px;
    padding: 0 .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    color: var(--bs-primary);
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.topbar-shortcut > i {
    font-size: 1.1rem;
}

.topbar-shortcut:hover {
    color: #ffffff;
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}

.topbar-shortcuts-mobile__menu {
    min-width: 205px;
    padding: .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .65rem 1.5rem rgba(0, 0, 0, .18);
}

.topbar-shortcuts-mobile__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 40px;
    border-radius: .45rem;
    color: var(--bs-body-color);
    font-weight: 600;
}

.topbar-shortcuts-mobile__menu .dropdown-item i {
    color: var(--bs-primary);
    font-size: 1.1rem;
}

[data-bs-theme="dark"] .topbarlinks {
    background-color: transparent;
    color: #fff;
    border: 1px solid #2d394c;
}
[data-bs-theme="dark"] .topbarlinks:hover {
    background-color: #1D293D;
}

[data-bs-theme="dark"] .topbar-shortcut {
    color: #d8e8ff;
    border-color: #2d476f;
    background: #0b1936;
}

[data-bs-theme="dark"] .topbar-shortcut:hover {
    color: #ffffff;
    border-color: #1683ff;
    background: #0758b8;
}

[data-bs-theme="dark"] .topbar-shortcuts-mobile__menu {
    border-color: #294878;
    background: #07132d;
    box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .48);
}

[data-bs-theme="dark"] .topbar-shortcuts-mobile__menu .dropdown-item {
    color: #e7efff;
}

[data-bs-theme="dark"] .topbar-shortcuts-mobile__menu .dropdown-item:hover,
[data-bs-theme="dark"] .topbar-shortcuts-mobile__menu .dropdown-item:focus {
    color: #ffffff;
    background: #102247;
}

.topbar-sucursal-movil {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    color: var(--bs-primary);
    font-size: 19px;
}

.offcanvas.offcanvas-bottom.topbar-offcanvas-sucursal {
    --bs-offcanvas-height: min(46vh, 350px);
    height: var(--bs-offcanvas-height);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

@supports (height: 100dvh) {
    .offcanvas.offcanvas-bottom.topbar-offcanvas-sucursal {
        --bs-offcanvas-height: min(46dvh, 350px);
    }
}

.topbar-offcanvas-sucursal .offcanvas-header {
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.topbar-offcanvas-sucursal .offcanvas-body {
    overflow-y: auto;
    padding: 1.25rem 1rem max(1rem, env(safe-area-inset-bottom));
}

.topbar-offcanvas-sucursal .offcanvas-body > p:first-child {
    margin-top: .15rem;
}

.topbar-sucursales-movil {
    display: grid;
    gap: .65rem;
}

.topbar-sucursales-movil button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 56px;
    padding: .7rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    text-align: left;
}

.topbar-sucursales-movil button > span,
.topbar-cuenta-movil > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .55rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .13);
    font-size: 1.15rem;
}

.topbar-sucursales-movil button.active {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .13);
}

.topbar-sucursales-movil button.active > span {
    color: #ffffff;
    background: var(--bs-primary);
}

.topbar-sucursales-movil button.active > i {
    color: var(--bs-success);
    font-size: 1.2rem;
}

.topbar-cuenta-movil {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.topbar-cuenta-movil > div {
    display: grid;
    gap: .15rem;
}

.topbar-cuenta-movil small {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .topbar-sucursal-movil {
    border-color: #2d394c;
    color: #ffffff;
}

[data-bs-theme="dark"] .topbar-offcanvas-sucursal,
[data-bs-theme="dark"] .topbar-offcanvas-cuenta {
    color: #e7efff;
    background: #07132d;
}

[data-bs-theme="dark"] .topbar-sucursales-movil button,
[data-bs-theme="dark"] .topbar-cuenta-movil {
    border-color: #294878;
    color: #e7efff;
    background: #102247;
}

[data-bs-theme="dark"] .topbar-sucursales-movil button.active {
    border-color: #1683ff;
    background: #0758b8;
    box-shadow: 0 0 0 .14rem rgba(22, 131, 255, .16);
}

[data-bs-theme="dark"] .topbar-sucursales-movil button.active > span {
    color: #c5e9ff;
    background: rgba(1, 13, 38, .32);
}

[data-bs-theme="dark"] .topbar-offcanvas-sucursal .offcanvas-header {
    border-color: #20345e;
}

/* Resumen de plan: escritorio (dropdown) y móvil (panel de cuenta). */
.topbar-plan__menu {
    width: min(370px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 13px;
    background: var(--bs-body-bg);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22);
}

.topbar-plan__loading,
.topbar-plan__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 130px;
    padding: 1rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    text-align: center;
}

.topbar-plan__error { color: #dc2626; }

.topbar-plan__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.topbar-plan__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0f9f6e);
    font-size: 1.35rem;
}

.topbar-plan__header small,
.topbar-plan__modulos > small {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.topbar-plan__header strong,
.topbar-plan__header span:not(.topbar-plan__icon) {
    display: block;
}

.topbar-plan__header strong { margin: .08rem 0; font-size: .9rem; }
.topbar-plan__header span:not(.topbar-plan__icon) { color: var(--bs-secondary-color); font-size: .7rem; }
.topbar-plan__body { display: grid; gap: .75rem; padding: .85rem .9rem .95rem; }

.topbar-plan__periodo,
.topbar-plan__uso-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.topbar-plan__periodo {
    padding: .55rem .6rem;
    border-radius: 8px;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    font-size: .72rem;
}

.topbar-plan__periodo i { color: var(--color-primary); font-size: 1rem; }
.topbar-plan__periodo span { margin-right: auto; }
.topbar-plan__periodo strong { color: var(--bs-body-color); font-size: .7rem; }
.topbar-plan__uso-head { margin-bottom: .32rem; font-size: .78rem; }
.topbar-plan__uso-head span { display: inline-flex; align-items: center; gap: .32rem; font-weight: 800; }
.topbar-plan__uso-head i { color: var(--color-primary); font-size: .95rem; }
.topbar-plan__uso-head strong { color: var(--bs-body-color); font-size: .74rem; }
.topbar-plan__uso .progress { height: 6px; background: var(--bs-tertiary-bg); }
.topbar-plan__uso > small { display: block; margin-top: .25rem; color: var(--bs-secondary-color); font-size: .66rem; }
.topbar-plan__modulos { padding-top: .1rem; }
.topbar-plan__modulos > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.topbar-plan__modulos span { padding: .22rem .43rem; border-radius: 5px; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); font-size: .65rem; font-weight: 800; }
.topbar-plan-movil { border-top: 1px solid var(--bs-border-color); padding-top: 1rem; }
.topbar-plan-movil .topbar-plan__header { border: 1px solid var(--bs-border-color); border-radius: .75rem .75rem 0 0; }
.topbar-plan-movil .topbar-plan__body { border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 .75rem .75rem; }

[data-bs-theme="dark"] .topbar-plan__menu {
    border-color: #23345d;
    background: #08132c;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
}

[data-bs-theme="dark"] .topbar-plan__header,
[data-bs-theme="dark"] .topbar-plan__periodo {
    border-color: #23345d;
    background: #102247;
}

[data-bs-theme="dark"] .topbar-plan-movil { border-color: #20345e; }
[data-bs-theme="dark"] .topbar-plan-movil .topbar-plan__header,
[data-bs-theme="dark"] .topbar-plan-movil .topbar-plan__body { border-color: #294878; }
[data-bs-theme="dark"] .topbar-plan__uso .progress { background: #172b57; }
[data-bs-theme="dark"] .topbar-plan__modulos span { color: #b9ddff; background: #15386d; }
[data-bs-theme="dark"] .topbar-plan__error { color: #fda4af; }

@media(max-width:992px){
    
    .sidebar{
        left:-240px;
        width:240px;
        height:100dvh;
        max-height:100dvh;
        padding-bottom:max(1rem, env(safe-area-inset-bottom));
        z-index:1080;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:contain;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
    }

    .sidebar > ul{
        min-height:100%;
        padding-top:3.75rem;
        padding-bottom:calc(2rem + env(safe-area-inset-bottom));
    }

    .sidebar-mobile-close{
        position:sticky;
        z-index:2;
        top:.7rem;
        float:right;
        display:grid;
        width:38px;
        height:38px;
        margin:.7rem .7rem -3.05rem 0;
        place-items:center;
        border:1px solid var(--bs-border-color);
        border-radius:.6rem;
        color:var(--bs-body-color);
        background:var(--bs-body-bg);
        box-shadow:0 .45rem 1rem rgba(0,0,0,.16);
    }

    .sidebar-mobile-close i{
        width:auto;
        color:inherit;
        font-size:1.25rem;
    }

    .sidebar.expand{
        left:0;
    }

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

    .sidebar-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.5);
        z-index:1070;
    }

    .sidebar-overlay.show{
        display:block;
    }

    .sidebar.expand ~ .main-content{
        margin-left:0px;
    }

    .sidebar:not(.pinned):hover ~ .main-content{
        margin-left:0px;
    }

    .topbarlinks{
        font-size: 20px;
    }
    .btn-sm-2 {
        padding: 1px 8px;
    }
}

@media(max-width:767.98px){
    .navbar {
        padding: .65rem .75rem !important;
    }

    [data-bs-theme="dark"] .sidebar-mobile-close{
        border-color:#294878;
        color:#e7efff;
        background:#0b1936;
    }

    .topbar-actions {
        gap: .45rem !important;
    }

    .topbarlinks {
        min-width: 36px;
        min-height: 36px;
        padding: 0 7px;
    }
}