/* ============================================================================
   NEXUS · Sidebar overlay moderno
   ----------------------------------------------------------------------------
   Overlay sobre el sidebar del template (clases `.app-sidebar`, `.menu-*`).
   No toca HTML ni SCSS source — sólo redefine variables del template y
   agrega refinos puntuales con la paleta Nexa adoptada.
   ----------------------------------------------------------------------------
   Orden de carga: vendor → app → nexus-modern-theme → liquid-glass → nexus-sidebar → nexus-brand
   Paleta:
     #136a9f  azul Nexa     (rail del active)
     #1e91ae  cyan Nexa     (hover, top de gradient)
     #f9a637  naranja Nexa  (ÍCONO del active — signature warm focal point)
     #0d4a6e  navy Nexa     (texto sobre tinted bg)
   ============================================================================ */

:root {
    --app-sidebar-border-color: rgba(15, 23, 42, 0.06);
    --app-sidebar-menu-link-color: #475569;
    --app-sidebar-menu-link-hover-bg: rgba(30, 145, 174, 0.07);
    --app-sidebar-menu-link-active-bg: rgba(19, 106, 159, 0.10);
    --app-sidebar-menu-link-active-color: var(--bs-primary, #136a9f);
    --app-sidebar-menu-header-color: #94a3b8;
}

/* ----------------------------------------------------------------------------
   Sidebar container — tinte Nexa sutil (azul muy lavado) con blur
   ---------------------------------------------------------------------------- */
.app-sidebar {
    background: rgba(232, 240, 246, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid var(--app-sidebar-border-color);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-sidebar { background: #ffffff; }
}

@media (prefers-reduced-transparency: reduce) {
    .app-sidebar {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ----------------------------------------------------------------------------
   Items del menú
   ---------------------------------------------------------------------------- */
.app-sidebar .menu .menu-item .menu-link {
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--app-sidebar-menu-link-color);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition:
        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.18s ease;
}

/* Caret más sutil */
.app-sidebar .menu .menu-item .menu-link .menu-caret {
    margin-left: auto;
    opacity: 0.45;
    font-size: 0.7rem;
    color: inherit;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-caret {
    opacity: 0.75;
}

.app-sidebar .menu .menu-item .menu-link .menu-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Hover: glass pill cyan→azul Nexa */
.app-sidebar .menu .menu-item .menu-link:hover {
    background: linear-gradient(180deg,
        rgba(30, 145, 174, 0.18) 0%,
        rgba(19, 106, 159, 0.08) 100%);
    color: #136a9f;
    box-shadow:
        0 0 0 1px rgba(30, 145, 174, 0.25) inset,
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 2px 8px -3px rgba(19, 106, 159, 0.18);
}

/* Active: glass pill premium con paleta Nexa */
.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link {
    background: linear-gradient(180deg,
        rgba(30, 145, 174, 0.30) 0%,
        rgba(19, 106, 159, 0.14) 100%);
    color: #0d4a6e;
    font-weight: 600;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(19, 106, 159, 0.38) inset,
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(19, 106, 159, 0.12) inset,
        0 6px 18px -4px rgba(19, 106, 159, 0.38),
        0 2px 4px -1px rgba(30, 145, 174, 0.18);
}

/* Rail del item activo: AFUERA del menu-link, en el gutter del menu-item.
   El template setea --bs-app-sidebar-menu-item-padding-x:0.625rem, así que
   el menu-link está inset 10px de su parent. Rail a left:-0.625rem cae en
   el borde izquierdo del menu-item (NO en negativo del container scroll),
   por lo tanto NO se clipea por overflow:hidden. */
#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link::before {
    content: "";
    position: absolute;
    left: -0.625rem;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: #136a9f;
    box-shadow:
        0 0 10px rgba(19, 106, 159, 0.6),
        2px 0 10px -2px rgba(19, 106, 159, 0.5);
    animation: nx-rail-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* ÍCONO del item activo: naranja Nexa.
   USAMOS #sidebar (ID) para subir specificity a 1,4,2 — gana al template, gana
   a cualquier rule que pretenda heredar color desde .menu-link via inherit.
   Cubrimos .menu-icon Y el <i> interno explícitamente porque FA no aplica
   color: inherit por default en .fa: usa currentColor en glyphs solid pero
   algunos browsers no lo respetan si hay un color: ... más cerca en el árbol. */
#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon,
#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon i,
#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon i.fa,
#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon i[class*="fa-"] {
    color: #f9a637 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 3px rgba(249, 166, 55, 0.45));
}

#sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon {
    transform: scale(1.05);
}

#sidebar.app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon,
#sidebar.app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon i,
#sidebar.app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon i.fa,
#sidebar.app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon i[class*="fa-"] {
    color: #f9a637 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 3px rgba(249, 166, 55, 0.45));
}

@keyframes nx-rail-in {
    from { opacity: 0; transform: scaleY(0.5); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* Parent activo (tiene hijos): bg tinted suave + texto azul + ícono naranja */
.app-sidebar .menu .menu-item.has-sub.active > .menu-link {
    background: linear-gradient(180deg,
        rgba(30, 145, 174, 0.18) 0%,
        rgba(19, 106, 159, 0.08) 100%);
    color: #0d4a6e;
    font-weight: 600;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(19, 106, 159, 0.25) inset,
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

#sidebar.app-sidebar .menu .menu-item.has-sub.active > .menu-link::before {
    content: "";
    position: absolute;
    left: -0.625rem;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: #136a9f;
    box-shadow:
        0 0 10px rgba(19, 106, 159, 0.6),
        2px 0 10px -2px rgba(19, 106, 159, 0.5);
    animation: nx-rail-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* ----------------------------------------------------------------------------
   Iconos
   ----------------------------------------------------------------------------
   El sidebar.json usa clases `fas fa-lg fa-fw me-2` en los <i>. Las
   neutralizamos acá para que el ícono sea consistente con Nexa (chico, slate,
   sin margin extra del me-2 que descalabra el alineado).
   ---------------------------------------------------------------------------- */
.app-sidebar .menu .menu-item .menu-link .menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem !important;
    color: #475569;
    opacity: 0.9;
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

/* Override fa-lg + me-2 dentro del sidebar — fa-lg fuerza 1.33em y me-2
   agrega 0.5rem margin-end que rompe el alineado con .menu-text */
.app-sidebar .menu .menu-item .menu-link .menu-icon > i.fa,
.app-sidebar .menu .menu-item .menu-link .menu-icon > i[class*="fa-"] {
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 0 !important;        /* mata me-2 / me-1 / etc. */
    vertical-align: middle;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-icon {
    opacity: 1;
    transform: scale(1.05);
    color: #136a9f;
}

.app-sidebar .menu .menu-item .menu-link:hover .menu-icon > i {
    color: inherit;
}

.app-sidebar .menu .menu-item.active > .menu-link .menu-icon {
    opacity: 1;
}

/* Badge sobre el ícono */
.app-sidebar .menu .menu-item .menu-link .menu-icon .menu-icon-label {
    background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    font-weight: 700;
    letter-spacing: 0;
}

/* ----------------------------------------------------------------------------
   Headers de sección
   ---------------------------------------------------------------------------- */
.app-sidebar .menu .menu-header {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--app-sidebar-menu-header-color);
    margin: 1rem 1.25rem 0.4rem;
    padding-top: 0.4rem;
}

.app-sidebar .menu .menu-divider,
.app-sidebar .menu > hr,
.app-sidebar .menu hr {
    background: var(--app-sidebar-border-color);
    border: 0;
    height: 1px;
    margin: 0.85rem 1rem;
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   Submenú — línea vertical guía de jerarquía
   ---------------------------------------------------------------------------- */
.app-sidebar .menu .menu-item.has-sub .menu-submenu {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 0.15rem;
}

.app-sidebar .menu .menu-item.has-sub .menu-submenu::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0.3rem;
    bottom: 0.5rem;
    width: 1.5px;
    background: var(--app-sidebar-border-color);
    border-radius: 1.5px;
}

.app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item .menu-link {
    padding: 0.35rem 0.625rem;
    font-size: 0.875rem;
    color: #64748b;
}

.app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item .menu-link:hover {
    color: var(--bs-primary, #136a9f);
    background: var(--app-sidebar-menu-link-hover-bg);
}

.app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item.active .menu-link {
    color: var(--bs-primary, #136a9f);
    font-weight: 600;
    background: var(--app-sidebar-menu-link-active-bg);
}

/* Marker en submenú activo — punto a la izquierda en lugar de rail */
.app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item.active .menu-link::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-primary, #136a9f);
    box-shadow: 0 0 0 3px rgba(19, 106, 159, 0.18);
}

/* Caret rota cuando el parent está activo/expandido */
.app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-caret {
    opacity: 0.85;
    transform: rotate(-180deg);
}

/* ----------------------------------------------------------------------------
   Scrollbar interno
   ---------------------------------------------------------------------------- */
.app-sidebar .app-sidebar-content {
    padding: 0.5rem 0.25rem;
}

/* ----------------------------------------------------------------------------
   Modo "minified" (sidebar colapsado)
   ---------------------------------------------------------------------------- */
#sidebar.app-sidebar.app-sidebar-minified .menu .menu-item.active:not(.has-sub) > .menu-link::before,
.app-sidebar-minified #sidebar.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link::before {
    left: -0.5rem;
    top: 30%;
    bottom: 30%;
}

.app-sidebar-minified .app-sidebar .menu .menu-item .menu-link {
    border-radius: 10px;
}