/* ========= USER SIDE NAV v2 (tune final) ========= */

.u2-sidenav-wrap{
    padding-top: 16px;
    position: relative;
    z-index: 1;

    /* hace el bloque más ancho como la imagen */
    width: 280px;
    max-width: 100%;
}

.u2-sidenav-card{
    background: #fff;
    border: 1px solid #EEF2F7;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(17,24,39,.07);
    overflow: hidden;
    width: 280px;
}

.u2-sidenav-head{
    padding: 18px 18px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.u2-sidenav-scroll{
    padding: 4px 10px 12px; /* más aire dentro del card */
    max-height: calc(100vh - 160px);
    overflow: auto;
}

/* scrollbar light */
.u2-sidenav-scroll::-webkit-scrollbar{ width: 8px; }
.u2-sidenav-scroll::-webkit-scrollbar-track{ background: transparent; }
.u2-sidenav-scroll::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}

.u2-side-list{
    list-style: none;
    margin: 0;
    padding: 0; /* ahora lo maneja el scroll con padding */
}

.u2-side-item{ margin: 0; }

.u2-side-link{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;

    height: 46px;
    padding: 0 14px;
    border-radius: 10px;

    color: #111827;
    text-decoration: none;

    transition: background .15s ease, color .15s ease;
}

.u2-side-link:hover{
    background: #F6F8FB;
    color: #111827;
    text-decoration: none;
}

/* Active: fondo gris suave + barra naranja pegada al borde del item */
.u2-side-link.is-active{
    background: #F1F4F6;
}
.u2-side-link.is-active::before{
    content: "";
    position: absolute;
    left: -10px;   /* con el padding del scroll queda calcado al borde del card */
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: #FF6A1A;
}

.u2-side-icon{
    font-size: 18px;     /* un pelín más fino */
    color: #FF6A1A;
    line-height: 1;
    width: 22px;
    display: inline-flex;
    justify-content: center;
    transform: translateY(1px);
}

.u2-side-text{
    font-size: 13px;     /* más “fino” */
    font-weight: 500;    /* menos “gordo” que 600 */
    color: #111827;
    white-space: nowrap;
}

.u2-side-badge{
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
    background: #EEF2F7;
    border: 1px solid #E5EAF1;
    padding: 4px 8px;
    border-radius: 999px;
    line-height: 1;
}
.u2-side-badge--green{
    color: #065F46;
    background: #ECFDF5;
    border-color: #A7F3D0;
}

.u2-mobile-close{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.u2-mobile-close .btn{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #EEF2F7;
    box-shadow: 0 8px 24px rgba(17,24,39,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* responsive: en móvil no fuerces el ancho */
@media (max-width: 1199.98px){
    .u2-sidenav-wrap{ width: 100%; }
}