/**
 * Fiweex MDI Shell — sidebar + topbar unificados (todos los módulos)
 */

.panel-mdi-shell {
    /* bootstrap.min.css define html{font-size:62.5%} (1rem = 10px, no 16px) y
       ese root se comparte con sidebar/topbar/otras pantallas _mdi.css — no lo
       tocamos acá (revertido: normalizarlo globalmente rompía sidebar/topbar/etc.
       ver historial). Estos tokens compensan el 62.5% con calc() para que el
       valor real en pantalla sea la escala compacta elegida:
       lg 20px / md 15px / base 13px / sm 12px / xs 12px. */
    --font-lg: calc(1.25rem / 0.625);
    --font-md: calc(0.9375rem / 0.625);
    --font-base: calc(0.8125rem / 0.625);
    --font-sm: calc(0.75rem / 0.625);
    --font-xs: calc(0.75rem / 0.625);
    --mdi-topbar-h: 6rem;
    /* IMPORTANTE: mantener sincronizado con el critical CSS inline de
       mdi_shell_assets.php — su selector #container.panel-mdi-shell tiene
       mayor especificidad y pisa estos tokens si difieren. */
    --mdi-sidebar-w: 25.5rem;
    --mdi-sidebar-w-mobile: min(27rem, 92vw);
    --mdi-sidebar-bg: #f5f3ff;
    --mdi-sidebar-px: 0.625rem;
    --mdi-sidebar-menu-gutter: 0.375rem;
    --mdi-sidebar-item-px: 0.375rem;
    --mdi-sidebar-link-px: 0.875rem;
    --mdi-sidebar-nav-icon: 1.625rem;
    --mdi-sidebar-nav-gap: 0.625rem;
    --mdi-sidebar-content-inset: calc(
        var(--mdi-sidebar-px) + var(--mdi-sidebar-menu-gutter) +
        var(--mdi-sidebar-item-px) + var(--mdi-sidebar-link-px)
    );
    --mdi-sidebar-text-inset: calc(
        var(--mdi-sidebar-content-inset) + var(--mdi-sidebar-nav-icon) + var(--mdi-sidebar-nav-gap)
    );
    --mdi-sidebar-hover-bg: #fff;
    --mdi-sidebar-active-bg: rgba(149, 122, 251, 0.14);
    --mdi-sidebar-active-color: #957afb;
    --mdi-sidebar-branch-bg: rgba(149, 122, 251, 0.08);
    --mdi-sidebar-subguide-w: 1px;
    --mdi-sidebar-subguide-gap: 5px;
    --mdi-sidebar-subguide-color: #d4d4d8;
    --mdi-sidebar-subguide-inset: calc(
        0.875rem + (var(--mdi-sidebar-nav-icon) / 2)
    );
    --mdi-sidebar-nav-pr: var(--mdi-sidebar-link-px);
    --mdi-sidebar-nav-pr-parent: 2rem;
}
:root {
    --font-kpi-value: clamp(1.875rem, 4vw, 2.5rem);
    --font-kpi-inline: 1.25rem;
}

/* Reemplazan las clases text-xs/sm/base/lg/xl/2xl/4xl de Tailwind (escala propia,
   desconectada de --font-*) para que todo el copy responda a los mismos tokens. */
.fx-text-xs {
    font-size: var(--font-xs);
}

.fx-text-sm {
    font-size: var(--font-sm);
}

.fx-text-base {
    font-size: var(--font-base);
}

.fx-text-md {
    font-size: var(--font-md);
}

.fx-text-lg {
    font-size: var(--font-lg);
}

.fx-text-kpi-inline {
    font-size: var(--font-kpi-inline);
}

.fx-text-kpi-value {
    font-size: var(--font-kpi-value);
}

.panel-mdi-topbar-inner {
    box-sizing: border-box;
    padding: 0 1rem;
    border-bottom: 1px solid #e4e4e7;
    background: #fff;
}
.panel-mdi-topbar-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.panel-mdi-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}
.panel-mdi-hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.panel-mdi-hamburger-btn:hover {
    background: #fafafa;
}
.panel-mdi-hamburger-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #3f3f46;
    stroke-width: 2;
}
@media (max-width: 767px) {
    .panel-mdi-shell {
        --mdi-topbar-control-h: 3.5rem;
    }
    .panel-mdi-hamburger-btn {
        display: inline-flex;
        width: var(--mdi-topbar-control-h);
        height: var(--mdi-topbar-control-h);
    }
}
/* ── Panel MDI shell: sidebar light + topbar + drawer mobile ── */
.panel-mdi-shell > header.panel-mdi-topbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto;
    min-height: 0;
    padding: 0;
    z-index: 1002;
}
.panel-mdi-shell .panel-mdi-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--mdi-topbar-h);
    min-height: var(--mdi-topbar-h);
}
@media (min-width: 768px) {
    .panel-mdi-shell > header.panel-mdi-topbar {
        margin-left: var(--mdi-sidebar-w, 27rem);
        width: calc(100% - var(--mdi-sidebar-w, 27rem));
    }
}
@media (max-width: 767px) {
    .panel-mdi-shell > header.panel-mdi-topbar {
        margin-left: 0 !important;
        width: 100%;
    }
}
.panel-mdi-shell .panel-mdi-topbar-right {
    margin-left: auto;
}
.panel-mdi-shell .panel-mdi-topbar-right .top-nav {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.pl-topbar-pro-slot) {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-width: 0;
    margin-left: 1rem;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.pl-topbar-pro-slot) .top-nav {
    width: 100% !important;
    min-width: 0;
    justify-content: space-between;
    gap: 1rem;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.pl-topbar-pro-slot) .panel-mdi-topbar-menu {
    margin-left: auto !important;
    flex-shrink: 0;
}
.panel-mdi-shell .top-nav #select_locales,
.panel-mdi-shell .top-nav #select_meses,
.header .top-menu #select_locales,
.header .top-menu #select_meses {
    margin-bottom: 0 !important;
}
.panel-mdi-shell .top-nav .form-group,
.header .top-menu .form-group {
    margin-bottom: 0;
}

/* Filtro Tablero / locales — estilo Shadcn en topbar */
.panel-mdi-tablero-filter {
    list-style: none;
}
.panel-mdi-tablero-filter-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.panel-mdi-tablero-filter-label {
    font-size: var(--font-base);
    font-weight: 500;
    color: #52525b;
    white-space: nowrap;
    margin: 0;
    line-height: 1.25;
}
.panel-mdi-select-shadcn,
.header .top-menu #select_locales.panel-mdi-select-shadcn,
.panel-mdi-shell .top-nav #select_locales.panel-mdi-select-shadcn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: auto;
    min-width: 8.5rem;
    max-width: 12.5rem;
    min-height: 2.25rem;
    margin: 0 !important;
    padding: 0.4375rem 2rem 0.4375rem 0.75rem;
    font-size: var(--font-base);
    font-weight: 500;
    line-height: 1.35;
    color: #27272a;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.panel-mdi-select-shadcn:hover {
    border-color: #d4d4d8;
}
.panel-mdi-select-shadcn:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Botón Aplicar filtro tablero — estilo Shadcn */
.panel-mdi-btn-aplicar,
.header .top-menu #aplicar_filtro.panel-mdi-btn-aplicar,
.panel-mdi-shell .top-nav #aplicar_filtro.panel-mdi-btn-aplicar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.4375rem 1rem;
    font-size: var(--font-base);
    font-weight: 600;
    line-height: 1.35;
    color: #a1a1aa;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: not-allowed;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.panel-mdi-btn-aplicar:not(:disabled),
.header .top-menu #aplicar_filtro.panel-mdi-btn-aplicar:not(:disabled),
.panel-mdi-shell .top-nav #aplicar_filtro.panel-mdi-btn-aplicar:not(:disabled),
.panel-mdi-btn-aplicar.panel-mdi-btn-aplicar--active {
    color: #fff;
    background: #957AFB;
    border-color: #957AFB;
    cursor: pointer;
}
.panel-mdi-btn-aplicar:not(:disabled):hover,
.panel-mdi-btn-aplicar.panel-mdi-btn-aplicar--active:hover {
    background: #4338ca;
    border-color: #4338ca;
}
.panel-mdi-btn-aplicar:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.header .top-menu #select_meses.panel-mdi-select-shadcn,
.panel-mdi-shell .top-nav #select_meses.panel-mdi-select-shadcn {
    min-width: 9.5rem;
    max-width: 13rem;
}
@media (min-width: 768px) {
    .panel-mdi-btn-aplicar,
    .header .top-menu #aplicar_filtro.panel-mdi-btn-aplicar,
    .panel-mdi-shell .top-nav #aplicar_filtro.panel-mdi-btn-aplicar {
        height: 3.5rem;
        min-height: 3.5rem;
        padding: 0 1.125rem;
        font-size: var(--font-base);
    }
    .header .top-menu #select_meses.panel-mdi-select-shadcn,
    .panel-mdi-shell .top-nav #select_meses.panel-mdi-select-shadcn {
        height: 3.5rem;
        min-height: 3.5rem;
        font-size: var(--font-base);
    }
}

/* Desktop: filtro Tablero — misma altura que iconos y dropdown usuario (3.5rem) */
@media (min-width: 768px) {
    .panel-mdi-tablero-filter-inner {
        min-height: 3.5rem;
    }
    .panel-mdi-tablero-filter-label {
        font-size: var(--font-base);
        font-weight: 500;
        line-height: 1.25;
    }
    .panel-mdi-select-shadcn,
    .header .top-menu #select_locales.panel-mdi-select-shadcn,
    .panel-mdi-shell .top-nav #select_locales.panel-mdi-select-shadcn {
        height: 3.5rem;
        min-height: 3.5rem;
        font-size: var(--font-base);
        line-height: 1.25;
        padding: 0 2.25rem 0 0.875rem;
        background-size: 1.125rem;
        background-position: right 0.75rem center;
        box-sizing: border-box;
    }
}

/* Top menu legacy header (vistas sin panel-mdi-shell) */
.header .top-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    float: none !important;
    margin-top: 0 !important;
    padding: 0;
}
.header .top-menu > li {
    float: none !important;
    margin-left: 0 !important;
    width: auto !important;
}
.header .top-menu > li.panel-mdi-tablero-filter {
    margin-right: 0.25rem;
}

@media (max-width: 767px) {
    .header .top-menu,
    .panel-mdi-shell .top-nav ul.top-menu {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.375rem;
        max-width: 100%;
    }
    .header .top-menu > li.panel-mdi-tablero-filter,
    .panel-mdi-shell .top-nav ul.top-menu > li.panel-mdi-tablero-filter {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        margin-right: 0;
    }
    .panel-mdi-tablero-filter-inner {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        align-items: center;
        min-height: var(--mdi-topbar-control-h, 3.5rem);
    }
    .panel-mdi-tablero-filter-label {
        font-size: var(--font-base);
        font-weight: 500;
        line-height: 1.25;
        flex-shrink: 0;
    }
    .panel-mdi-select-shadcn,
    .header .top-menu #select_locales.panel-mdi-select-shadcn,
    .panel-mdi-shell .top-nav #select_locales.panel-mdi-select-shadcn {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 11rem;
        height: var(--mdi-topbar-control-h, 3.5rem);
        min-height: var(--mdi-topbar-control-h, 3.5rem);
        font-size: var(--font-base);
        font-weight: 500;
        line-height: 1.25;
        padding: 0 2rem 0 0.75rem;
        background-size: 1.125rem;
        background-position: right 0.625rem center;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
}
/* Tablero WiFi (Datos de Conexión / Mi Público) en mobile: demasiados
   controles (pills de navegación + 2 selects + Aplicar + Dashboard + avatar)
   para una fila fija — en vez de achicar/superponer, el .top-nav completo
   scrollea horizontal y sus hijos NO se achican (se pisan las reglas
   genéricas de arriba, que sí achican para el caso de un único filtro
   "Tablero" en hoteles/portal_links/mdi genérico). */
@media (max-width: 767px) {
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.25rem;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav::-webkit-scrollbar {
        height: 4px;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav::-webkit-scrollbar-thumb {
        background: #d4d4d8;
        border-radius: 999px;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav > .fx-tablero-wifi-topbar-slot,
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav > ul.top-menu.panel-mdi-topbar-menu {
        flex-shrink: 0;
        max-width: none;
    }
    .panel-mdi-shell .fx-tablero-wifi-topbar-slot .navbar-brand {
        white-space: nowrap;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav ul.top-menu > li.panel-mdi-tablero-filter {
        flex: 0 0 auto;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .panel-mdi-tablero-filter-inner {
        width: auto;
        justify-content: flex-start;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav #select_locales.panel-mdi-select-shadcn,
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav #select_meses.panel-mdi-select-shadcn {
        flex: 0 0 auto;
        width: auto;
        min-width: 9rem;
        max-width: 11rem;
        text-overflow: ellipsis;
    }
    .panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav #aplicar_filtro.panel-mdi-btn-aplicar {
        flex-shrink: 0;
    }
}
.panel-mdi-shell .panel-mdi-topbar-right .top-nav > .mx-auto.order-0 {
    display: none;
}
.panel-mdi-shell .panel-mdi-topbar-right .top-nav > .mx-auto.order-0.fx-tablero-wifi-topbar-slot {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0 1rem 0 0 !important;
    flex-shrink: 0;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 1rem;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-end;
    gap: 1rem;
}
.panel-mdi-shell .fx-tablero-wifi-topbar-slot .navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin: 0 !important;
    padding: 0.75rem 1.375rem !important;
    border-radius: 0.65rem !important;
    border: 1px solid rgba(149, 122, 251, 0.28) !important;
    background: #fff !important;
    color: #957afb !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    box-shadow: none !important;
    float: none !important;
}
.panel-mdi-shell .fx-tablero-wifi-topbar-slot .navbar-brand.is-active {
    background: #957afb !important;
    border-color: #957afb !important;
    color: #fff !important;
}
.panel-mdi-shell .panel-mdi-topbar-right:has(.fx-tablero-wifi-topbar-slot) .top-nav > ul.top-menu.panel-mdi-topbar-menu {
    flex-shrink: 0;
    margin-left: auto !important;
}
.panel-mdi-shell .panel-mdi-topbar-right .top-nav > .mx-auto.order-0.pl-topbar-pro-slot {
    display: flex !important;
    align-items: center;
    min-width: 0;
    margin: 0 1rem 0 0 !important;
}
.panel-mdi-shell .pl-topbar-pro-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.panel-mdi-shell .pl-topbar-pro-btn,
.panel-mdi-shell .pl-topbar-pro-btn.navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    min-height: 2.75rem;
    margin: 0 !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    border: 1px solid #e4e4e7 !important;
    background: #fff !important;
    color: #3f3f46 !important;
    font-size: var(--font-base) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.panel-mdi-shell .pl-topbar-pro-btn:hover,
.panel-mdi-shell .pl-topbar-pro-btn:focus {
    background: #fafafa !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
}
.panel-mdi-shell .pl-topbar-pro-btn i {
    position: static !important;
    margin: 0 !important;
    font-size: var(--font-md) !important;
    line-height: 1;
}
.panel-mdi-shell .pl-topbar-pro-btn--primary,
.panel-mdi-shell .pl-topbar-pro-btn--primary.navbar-brand {
    border-color: #957afb !important;
    background: #957afb !important;
    color: #fff !important;
}
.panel-mdi-shell .pl-topbar-pro-btn--primary:hover,
.panel-mdi-shell .pl-topbar-pro-btn--primary:focus {
    background: #8367ef !important;
    border-color: #8367ef !important;
    color: #fff !important;
}
.panel-mdi-shell .pl-topbar-pro-btn--outline,
.panel-mdi-shell .pl-topbar-pro-btn--outline.navbar-brand {
    border-color: rgba(149, 122, 251, 0.32) !important;
    background: #fff !important;
    color: #957afb !important;
}
.panel-mdi-shell .pl-topbar-pro-btn--outline i {
    color: #957afb !important;
}
.panel-mdi-shell .pl-topbar-pro-btn--active,
.panel-mdi-shell .pl-topbar-pro-btn--active.navbar-brand {
    border-color: rgba(149, 122, 251, 0.24) !important;
    background: #f7f5ff !important;
    color: #18181b !important;
}
.panel-mdi-shell .pl-topbar-pro-status {
    color: #957afb;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}
.panel-mdi-shell .pl-topbar-pro-btn--active i {
    color: #957afb !important;
    font-size: var(--font-lg) !important;
}
@media (max-width: 1199px) {
    .panel-mdi-shell .panel-mdi-topbar-right .top-nav > .mx-auto.order-0.pl-topbar-pro-slot {
        margin-right: 0.5rem !important;
    }
    .panel-mdi-shell .pl-topbar-pro-actions {
        gap: 0.5rem;
    }
    .panel-mdi-shell .pl-topbar-pro-btn,
    .panel-mdi-shell .pl-topbar-pro-btn.navbar-brand {
        height: 2.5rem;
        min-height: 2.5rem;
        padding: 0 0.75rem !important;
        font-size: var(--font-base) !important;
    }
    .panel-mdi-shell .pl-topbar-pro-title {
        display: none;
    }
}
@media (max-width: 767px) {
    .panel-mdi-shell .panel-mdi-topbar-right .top-nav > .mx-auto.order-0.pl-topbar-pro-slot {
        display: flex !important;
        margin-right: 0.375rem !important;
    }
    .panel-mdi-shell .pl-topbar-pro-btn,
    .panel-mdi-shell .pl-topbar-pro-btn.navbar-brand {
        width: 2.5rem;
        min-width: 2.5rem;
        padding: 0 !important;
    }
    .panel-mdi-shell .pl-topbar-pro-btn span {
        display: none;
    }
}
.panel-mdi-shell .panel-mdi-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 40;
}
.panel-mdi-shell.panel-mdi-sidebar-open .panel-mdi-sidebar-backdrop {
    display: block;
}
@media (min-width: 768px) {
    .panel-mdi-shell .panel-mdi-sidebar-backdrop {
        display: none !important;
    }
}
.panel-mdi-shell .brand,
#container:has(.panel-mdi-brand-logo) .brand {
    background: var(--mdi-sidebar-bg) !important;
    width: var(--mdi-sidebar-w, 27rem) !important;
    min-width: var(--mdi-sidebar-w, 27rem) !important;
    max-width: var(--mdi-sidebar-w, 27rem) !important;
    height: var(--mdi-topbar-h);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    border-right: 1px solid #e4e4e7;
    border-bottom: 1px solid #e4e4e7;
    float: none !important;
    display: flex;
    align-items: center;
    padding: 0 var(--mdi-sidebar-px) 0 var(--mdi-sidebar-text-inset);
    box-sizing: border-box;
}
.panel-mdi-shell #sidebar,
#container:has(.panel-mdi-brand-logo) #sidebar {
    background: var(--mdi-sidebar-bg) !important;
    border-right: 1px solid #e4e4e7;
    width: var(--mdi-sidebar-w, 27rem) !important;
    min-width: var(--mdi-sidebar-w, 27rem) !important;
    max-width: var(--mdi-sidebar-w, 27rem) !important;
    top: var(--mdi-topbar-h);
    height: calc(100vh - var(--mdi-topbar-h));
    z-index: 1000;
    overflow-x: visible;
    overflow-y: hidden;
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.panel-mdi-shell #sidebar .leftside-navigation,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation {
    width: 100%;
    min-width: 100%;
    height: calc(100vh - var(--mdi-topbar-h));
    padding: 0 var(--mdi-sidebar-px) 1.25rem;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* Solo Firefox: en Chromium, scrollbar-width/scrollbar-color NO-auto hacen
   que el navegador IGNORE los ::-webkit-scrollbar-* de abajo (Chrome 121+). */
@supports not selector(::-webkit-scrollbar) {
    .panel-mdi-shell #sidebar .leftside-navigation,
    #container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation {
        scrollbar-width: thin;
        scrollbar-color: rgba(149, 122, 251, 0.42) transparent;
    }
}
.panel-mdi-shell #sidebar .nicescroll-rails,
#container:has(.panel-mdi-brand-logo) #sidebar .nicescroll-rails,
.panel-mdi-shell #sidebar .nicescroll-cursors,
#container:has(.panel-mdi-brand-logo) #sidebar .nicescroll-cursors {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Patrón overlay (estilo VS Code): zona de agarre de 8px, thumb visual de
   2px vía borde transparente + background-clip; al hover/drag se ensancha. */
.panel-mdi-shell #sidebar .leftside-navigation::-webkit-scrollbar,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation::-webkit-scrollbar {
    width: 8px;
}
.panel-mdi-shell #sidebar .leftside-navigation::-webkit-scrollbar-track,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation::-webkit-scrollbar-track {
    background: transparent;
}
.panel-mdi-shell #sidebar .leftside-navigation::-webkit-scrollbar-thumb,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation::-webkit-scrollbar-thumb {
    background-color: rgba(149, 122, 251, 0.35);
    border-radius: 9999px;
    /* Borde asimétrico: los 2px visibles quedan pegados al borde derecho */
    border: 0 solid transparent;
    border-left-width: 6px;
    background-clip: content-box;
}
.panel-mdi-shell #sidebar .leftside-navigation::-webkit-scrollbar-thumb:hover,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation::-webkit-scrollbar-thumb:hover {
    background-color: rgba(149, 122, 251, 0.58);
    border-left-width: 2px;
}
.panel-mdi-shell #sidebar .leftside-navigation::-webkit-scrollbar-thumb:active,
#container:has(.panel-mdi-brand-logo) #sidebar .leftside-navigation::-webkit-scrollbar-thumb:active {
    background-color: rgba(149, 122, 251, 0.7);
    border-left-width: 2px;
}
.panel-mdi-shell .brand a.logo {
    float: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #09090b;
    font-weight: 700;
    text-transform: none;
}
.panel-mdi-shell .brand a.logo img.panel-mdi-brand-logo {
    height: 3.75rem !important;
    width: auto !important;
    max-height: calc(var(--mdi-topbar-h) - 1rem);
    object-fit: contain;
    filter: none;
}
.panel-mdi-shell .brand .sidebar-toggle-box {
    display: none !important;
}
.panel-mdi-shell .brand .flag-wrapper {
    position: relative;
    top: 7px;
    right: auto;
    flex-shrink: 0;
}
.panel-mdi-shell .brand a.logo img.flag-img {
    width: 1.5rem !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 2px;
    border: 1px solid #e4e4e7;
    object-fit: contain;
}
.panel-mdi-shell #sidebar,
#container:has(.panel-mdi-brand-logo) #sidebar {
    background: var(--mdi-sidebar-bg) !important;
    border-right: 1px solid #e4e4e7;
    width: var(--mdi-sidebar-w, 27rem) !important;
    min-width: var(--mdi-sidebar-w, 27rem) !important;
    max-width: var(--mdi-sidebar-w, 27rem) !important;
    top: var(--mdi-topbar-h);
    height: calc(100vh - var(--mdi-topbar-h));
    z-index: 1000;
    overflow-x: visible;
    overflow-y: hidden;
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu,
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu ul.sub,
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu li,
.panel-mdi-shell ul.sidebar-menu,
.panel-mdi-shell ul.sidebar-menu ul.sub,
.panel-mdi-shell ul.sidebar-menu li {
    list-style: none !important;
    list-style-type: none !important;
}
.panel-mdi-shell ul.sidebar-menu {
    padding: 1.25rem var(--mdi-sidebar-menu-gutter) 1.5rem !important;
    margin-top: 0 !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub {
    margin: 0 !important;
    padding: 0 !important;
    border-left: none !important;
}
/* Submenú expandido: banda de fondo única que agrupa los niveles 2 y 3.
   Los negative margins compensan el padding interno de la banda para que
   los ítems de nivel 2 queden EXACTAMENTE alineados con los de nivel 1. */
.panel-mdi-shell ul.sidebar-menu a.active + ul.sub,
.panel-mdi-shell ul.sidebar-menu ul.sub.panel-mdi-sub-expanded {
    position: relative;
    background: var(--mdi-sidebar-branch-bg);
    border-radius: 0.625rem;
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
    margin-top: 0.375rem !important;
    margin-bottom: 0.125rem !important;
    padding: 0.25rem !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
    overflow: visible;
}
/* Nivel 3: sin banda propia (la de nivel 2 ya agrupa todo, evita fondos
   superpuestos); solo una leve indentación hacia la derecha. */
.panel-mdi-shell ul.sidebar-menu ul.sub a.active + ul.sub,
.panel-mdi-shell ul.sidebar-menu ul.sub ul.sub.panel-mdi-sub-expanded {
    background: transparent;
    border-radius: 0;
    margin-left: var(--mdi-sidebar-subguide-inset) !important;
    margin-right: 0 !important;
    padding: 0 !important;
}
.panel-mdi-shell ul.sidebar-menu ul.sub.panel-mdi-sub-expanded > li {
    margin-bottom: 0.75rem;
}
.panel-mdi-shell ul.sidebar-menu ul.sub.panel-mdi-sub-expanded > li:last-child {
    margin-bottom: 0;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub > li {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li ul.sub > li {
    padding-left: 0;
    padding-right: 0;
}
.panel-mdi-shell ul.sidebar-menu li.sub-menu {
    line-height: normal !important;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent + ul.sub,
.panel-mdi-shell ul.sidebar-menu li.sub-menu > ul.sub {
    margin-top: 0.375rem !important;
    padding-top: 0.25rem !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub > li:first-child {
    margin-top: 0.125rem;
}
.panel-mdi-shell ul.sidebar-menu li {
    border-bottom: none !important;
    padding: 0 0 0 var(--mdi-sidebar-item-px);
    margin-bottom: 0.75rem;
}
.panel-mdi-shell ul.sidebar-menu li a,
.panel-mdi-shell ul.sidebar-menu li a span {
    color: #52525b !important;
    font-size: var(--font-base) !important;
    line-height: 1.875rem !important;
    font-weight: 500 !important;
}
.panel-mdi-shell ul.sidebar-menu li a span:not(.panel-mdi-active-badge-wrap) {
    display: inline !important;
    background: transparent !important;
}
.panel-mdi-shell ul.sidebar-menu li a {
    display: flex !important;
    align-items: center;
    gap: var(--mdi-sidebar-nav-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.9375rem var(--mdi-sidebar-nav-pr) !important;
    border-radius: 0.625rem;
    position: relative;
    -webkit-transition: background 0.2s ease, color 0.2s ease;
    transition: background 0.2s ease, color 0.2s ease;
}
.panel-mdi-shell ul.sidebar-menu li a:hover:not(.active),
.panel-mdi-shell ul.sidebar-menu li a:focus:not(.active) {
    background: var(--mdi-sidebar-hover-bg) !important;
    color: #52525b !important;
}
.panel-mdi-shell ul.sidebar-menu li a:hover:not(.active) span,
.panel-mdi-shell ul.sidebar-menu li a:focus:not(.active) span {
    background: transparent !important;
    color: inherit !important;
}
.panel-mdi-shell ul.sidebar-menu li a:hover:not(.active) .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a:focus:not(.active) .panel-mdi-nav-icon {
    color: #52525b !important;
}
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:hover,
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:focus {
    background: var(--mdi-sidebar-hover-bg) !important;
    color: #dc2626 !important;
}
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:hover span,
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:focus span {
    background: transparent !important;
    color: #dc2626 !important;
}
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:hover .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:focus .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:hover svg.panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a[href="/logout"]:focus svg.panel-mdi-nav-icon {
    color: #dc2626 !important;
    stroke: #dc2626;
}
.panel-mdi-shell ul.sidebar-menu li a.active {
    background: var(--mdi-sidebar-active-bg) !important;
    color: var(--mdi-sidebar-active-color) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(149, 122, 251, 0.12);
}
.panel-mdi-shell ul.sidebar-menu li a.active span {
    background: transparent !important;
    color: var(--mdi-sidebar-active-color) !important;
    font-weight: 600 !important;
}
.panel-mdi-shell ul.sidebar-menu li a.active .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a.active svg.panel-mdi-nav-icon {
    color: var(--mdi-sidebar-active-color) !important;
    stroke: var(--mdi-sidebar-active-color);
}
.panel-mdi-shell ul.sidebar-menu li a.active::after {
    content: none;
    display: none;
}
.panel-mdi-shell ul.sidebar-menu li a.active:hover,
.panel-mdi-shell ul.sidebar-menu li a.active:focus {
    background: rgba(149, 122, 251, 0.18) !important;
    color: var(--mdi-sidebar-active-color) !important;
    box-shadow: inset 0 0 0 1px rgba(149, 122, 251, 0.16);
}
.panel-mdi-shell ul.sidebar-menu li a.active:hover span,
.panel-mdi-shell ul.sidebar-menu li a.active:focus span {
    background: transparent !important;
    color: var(--mdi-sidebar-active-color) !important;
}
.panel-mdi-shell ul.sidebar-menu li a > span:not(.dcjq-icon):not(.panel-mdi-submenu-caret):not(.panel-mdi-active-badge-wrap):not(:has(.fa-thumbs-up)):not(:has(.panel-mdi-active-badge)),
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu li a > span:not(.dcjq-icon):not(.panel-mdi-submenu-caret):not(.panel-mdi-active-badge-wrap):not(:has(.fa-thumbs-up)):not(:has(.panel-mdi-active-badge)) {
    flex: 1 1 auto;
    min-width: 0;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a > span:not(.dcjq-icon):not(.panel-mdi-submenu-caret):not(.panel-mdi-active-badge-wrap):not(:has(.fa-thumbs-up)):not(:has(.panel-mdi-active-badge)),
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu li ul.sub li a > span:not(.dcjq-icon):not(.panel-mdi-submenu-caret):not(.panel-mdi-active-badge-wrap):not(:has(.fa-thumbs-up)):not(:has(.panel-mdi-active-badge)) {
    white-space: normal;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.35 !important;
}
.panel-mdi-shell ul.sidebar-menu li a .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a i.panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li a svg.panel-mdi-nav-icon {
    color: inherit !important;
    flex-shrink: 0;
    width: 1.625rem !important;
    height: 1.625rem !important;
    min-width: 1.625rem !important;
    min-height: 1.625rem !important;
    stroke-width: 2;
}
.panel-mdi-shell ul.sidebar-menu li a i.fa {
    display: none !important;
}
/* El label no debe crecer cuando hay badge: así el check queda pegado al texto */
.panel-mdi-shell ul.sidebar-menu li a > span:has(+ .panel-mdi-active-badge-wrap),
.panel-mdi-shell ul.sidebar-menu li a > span:has(+ .panel-mdi-active-badge-wrap.is-on),
#container:has(.panel-mdi-brand-logo) ul.sidebar-menu li a > span:has(+ .panel-mdi-active-badge-wrap) {
    flex: 0 1 auto !important;
}
.panel-mdi-shell ul.sidebar-menu li a .panel-mdi-active-badge-wrap,
.panel-mdi-shell ul.sidebar-menu li a span.panel-mdi-active-badge-wrap {
    display: none !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem !important;
    margin-right: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    vertical-align: middle;
}
.panel-mdi-shell ul.sidebar-menu li a .panel-mdi-active-badge-wrap.is-on,
.panel-mdi-shell ul.sidebar-menu li a span.panel-mdi-active-badge-wrap.is-on {
    display: inline-flex !important;
    position: relative;
}
.panel-mdi-shell ul.sidebar-menu li a .panel-mdi-active-badge,
.panel-mdi-shell ul.sidebar-menu li a svg.panel-mdi-active-badge {
    flex-shrink: 0;
    width: 1.65rem !important;
    height: 1.65rem !important;
    min-width: 1.65rem !important;
    min-height: 1.65rem !important;
    color: #22c55e !important;
    stroke: #22c55e !important;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.7)) drop-shadow(0 0 12px rgba(34, 197, 94, 0.3));
    animation: panel-mdi-badge-pulse 1.5s ease-in-out infinite;
}
@keyframes panel-mdi-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-3deg); }
    50% { opacity: 0.9; transform: scale(1.2) rotate(0deg); }
    75% { transform: scale(1.15) rotate(3deg); }
}
.panel-mdi-shell ul.sidebar-menu li a .panel-mdi-active-badge-wrap.is-on::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.08) 60%, transparent 100%);
    pointer-events: none;
    animation: panel-mdi-badge-glow 1.5s ease-in-out infinite;
}
@keyframes panel-mdi-badge-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
}
.panel-mdi-shell ul.sidebar-menu li a.active .panel-mdi-active-badge,
.panel-mdi-shell ul.sidebar-menu li a.active svg.panel-mdi-active-badge {
    color: var(--mdi-sidebar-active-color, #957afb) !important;
    stroke: var(--mdi-sidebar-active-color, #957afb) !important;
}
.panel-mdi-shell ul.sidebar-menu li.hover-lila,
.panel-mdi-shell ul.sidebar-menu li ul.sub li {
    background: transparent !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a,
.panel-mdi-shell ul.sidebar-menu li ul.sub li a span,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a span {
    color: #52525b !important;
    font-size: var(--font-sm) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}
/* Enterprise: iguala font-size con Portal de Links (1rem) */
.panel-mdi-shell ul.sidebar-menu li.hover-lila.fx-ent-menu-size a,
.panel-mdi-shell ul.sidebar-menu li.hover-lila.fx-ent-menu-size a span {
    font-size: 1.3rem !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li ul.sub li a,
.panel-mdi-shell ul.sidebar-menu li ul.sub li ul.sub li a span {
    font-size: var(--font-sm) !important;
    line-height: 1.35 !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li {
    margin-bottom: 0.625rem;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li.sub-menu.dcjq-parent-li {
    margin-top: 0.125rem;
    margin-bottom: 0.625rem;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a {
    align-items: flex-start;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-left: var(--mdi-sidebar-link-px) !important;
    padding-right: var(--mdi-sidebar-nav-pr) !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li ul.sub li a svg.panel-mdi-nav-icon {
    width: 1.375rem !important;
    height: 1.375rem !important;
    min-width: 1.375rem !important;
    min-height: 1.375rem !important;
    margin-top: 0.125rem;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li ul.sub li a .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li ul.sub li ul.sub li a svg.panel-mdi-nav-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
}
.panel-mdi-shell ul.sidebar-menu ul.sub li a[style*="padding-left"] {
    padding-left: var(--mdi-sidebar-link-px) !important;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent {
    padding-right: var(--mdi-sidebar-nav-pr-parent) !important;
}
/* Submenús anidados: el padding reducido de ul.sub li a pisaba el espacio del caret */
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.dcjq-parent {
    padding-right: var(--mdi-sidebar-nav-pr-parent) !important;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent > span:not(.dcjq-icon):not(.panel-mdi-submenu-caret):not(.panel-mdi-active-badge-wrap):not(:has(.fa-thumbs-up)):not(:has(.panel-mdi-active-badge)) {
    padding-right: 0.25rem;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a:hover:not(.active),
.panel-mdi-shell ul.sidebar-menu li.hover-lila a:hover:not(.active),
.panel-mdi-shell ul.sidebar-menu li.hover-lila a:focus:not(.active) {
    background: var(--mdi-sidebar-hover-bg) !important;
    color: #52525b !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a:hover:not(.active) span,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a:hover:not(.active) span,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a:focus:not(.active) span {
    background: transparent !important;
    color: inherit !important;
}
/* Dentro de la banda el hover es blanco translúcido: el blanco sólido queda
   reservado para el ítem activo (pill elevado). */
.panel-mdi-shell ul.sidebar-menu li ul.sub li a:hover:not(.active) {
    background: rgba(255, 255, 255, 0.55) !important;
}
/* Activo dentro de la banda: pill blanco elevado (no tinte + borde, que se
   leía como caja dentro de caja sobre el fondo de la banda). */
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.active,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a.active,
.panel-mdi-shell ul.sidebar-menu li ul.sub li.active a {
    background: #fff !important;
    color: var(--mdi-sidebar-active-color) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(63, 63, 70, 0.1);
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.active span,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a.active span,
.panel-mdi-shell ul.sidebar-menu li ul.sub li.active a span {
    background: transparent !important;
    color: var(--mdi-sidebar-active-color) !important;
    font-weight: 600 !important;
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.active .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a.active .panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.active svg.panel-mdi-nav-icon,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a.active svg.panel-mdi-nav-icon {
    color: var(--mdi-sidebar-active-color) !important;
    stroke: var(--mdi-sidebar-active-color);
}
.panel-mdi-shell ul.sidebar-menu li ul.sub li a.active::after,
.panel-mdi-shell ul.sidebar-menu li.hover-lila a.active::after {
    content: none;
    display: none;
}
.panel-mdi-shell .dcjq-icon {
    display: none !important;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent .panel-mdi-submenu-caret {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 1.125rem !important;
    min-height: 1.125rem !important;
    flex-shrink: 0;
    color: #71717a;
    stroke-width: 2;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent.active .panel-mdi-submenu-caret,
.panel-mdi-shell ul.sidebar-menu li.active > a.dcjq-parent .panel-mdi-submenu-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--mdi-sidebar-active-color, #957afb);
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent:hover .panel-mdi-submenu-caret,
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent:focus .panel-mdi-submenu-caret {
    color: #52525b;
}
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent.active .panel-mdi-submenu-caret,
.panel-mdi-shell ul.sidebar-menu a.dcjq-parent.active:hover .panel-mdi-submenu-caret {
    color: var(--mdi-sidebar-active-color, #957afb);
}
.panel-mdi-shell ul.sidebar-menu li a svg.panel-mdi-nav-icon-whatsapp {
    fill: currentColor;
    stroke: none;
}
.panel-mdi-shell #main-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
}
@media (min-width: 768px) {
    .panel-mdi-shell #main-content {
        margin-left: var(--mdi-sidebar-w, 27rem) !important;
        padding-top: var(--mdi-topbar-h);
    }
}
.panel-mdi-shell #main-content.merge-left {
    margin-left: 0 !important;
}
@media (min-width: 768px) {
    .panel-mdi-shell #main-content.merge-left {
        margin-left: var(--mdi-sidebar-w, 27rem) !important;
    }
}
@media (max-width: 767px) {
    /* Anular style-responsive.css (body/header/brand/sidebar legacy en móvil) */
    body:has(.panel-mdi-shell) {
        margin-top: 0 !important;
    }
    .panel-mdi-shell > header.panel-mdi-topbar,
    .panel-mdi-shell > header.header {
        position: fixed !important;
        top: 0 !important;
        margin-top: 0 !important;
    }
    .panel-mdi-shell .brand {
        width: var(--mdi-sidebar-w-mobile) !important;
        float: none !important;
        position: fixed !important;
        top: 0 !important;
        transform: translateX(-100%);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    }
    .panel-mdi-shell #sidebar {
        position: fixed !important;
        left: 0;
        top: var(--mdi-topbar-h) !important;
        width: var(--mdi-sidebar-w-mobile);
        z-index: 50;
        margin-left: 0 !important;
        margin-top: 0 !important;
        transform: translateX(-100%);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    }
    .panel-mdi-shell ul.sidebar-menu {
        margin-top: 0 !important;
    }
    .panel-mdi-shell .top-nav {
        margin-bottom: 0 !important;
    }
    .panel-mdi-shell #sidebar.hide-left-bar {
        margin-left: 0 !important;
        transform: translateX(-100%);
    }
    .panel-mdi-shell.panel-mdi-sidebar-open .brand,
    .panel-mdi-shell.panel-mdi-sidebar-open #sidebar {
        transform: translateX(0);
        z-index: 1003;
    }
    .panel-mdi-shell.panel-mdi-sidebar-open #sidebar.hide-left-bar {
        transform: translateX(0);
    }
    .panel-mdi-shell #main-content > .wrapper {
        margin-top: 60px !important;
    }
}
.panel-mdi-shell .top-nav ul.top-menu,
.header .top-nav ul.top-menu.panel-mdi-topbar-menu,
#container .top-nav ul.top-menu.panel-mdi-topbar-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    float: none !important;
    margin: 0 0 0 auto !important;
    padding: 0;
    list-style: none;
}
.panel-mdi-shell .top-nav ul.top-menu > li.panel-mdi-topbar-utils,
.header .top-nav ul.top-menu > li.panel-mdi-topbar-utils,
#container .top-nav ul.top-menu > li.panel-mdi-topbar-utils {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.panel-mdi-shell .panel-mdi-topbar-dashboard-link,
.header .panel-mdi-topbar-dashboard-link,
#container .panel-mdi-topbar-dashboard-link {
    font-size: var(--font-lg, 1.25rem);
}
.panel-mdi-shell .top-nav ul.top-menu[style] {
    margin-top: 0 !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown {
    margin-left: 0 !important;
}
.panel-mdi-shell .top-nav ul.top-menu .panel-mdi-ghost-btn,
.header .top-nav ul.top-menu .panel-mdi-ghost-btn,
#container .top-nav ul.top-menu .panel-mdi-ghost-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    min-width: 3rem;
    padding: 0.75rem !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0.75rem !important;
    color: #71717a !important;
    cursor: pointer;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.panel-mdi-shell .top-nav ul.top-menu .panel-mdi-ghost-btn:hover,
.header .top-nav ul.top-menu .panel-mdi-ghost-btn:hover,
#container .top-nav ul.top-menu .panel-mdi-ghost-btn:hover {
    color: #18181b !important;
    background: #f4f4f5 !important;
}
.panel-mdi-shell .top-nav ul.top-menu .panel-mdi-ghost-btn span,
.header .top-nav ul.top-menu .panel-mdi-ghost-btn span,
#container .top-nav ul.top-menu .panel-mdi-ghost-btn span {
    font-weight: 600;
    font-size: var(--font-base);
    line-height: 1.5rem;
    color: #27272a;
}
.panel-mdi-shell .top-nav ul.top-menu .panel-mdi-topbar-icon,
.header .top-nav ul.top-menu .panel-mdi-topbar-icon,
#container .top-nav ul.top-menu .panel-mdi-topbar-icon,
.panel-mdi-shell .top-nav ul.top-menu svg.panel-mdi-topbar-icon,
.header .top-nav ul.top-menu svg.panel-mdi-topbar-icon,
#container .top-nav ul.top-menu svg.panel-mdi-topbar-icon {
    width: 1.625rem !important;
    height: 1.625rem !important;
    color: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
    display: block;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle,
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.panel-mdi-user-trigger,
.header .top-menu > li.dropdown > a.dropdown-toggle,
.header .top-menu > li.dropdown > a.panel-mdi-user-trigger,
#container .top-menu > li.dropdown > a.dropdown-toggle,
#container .top-menu > li.dropdown > a.panel-mdi-user-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 0.875rem;
    height: auto !important;
    min-height: 3rem !important;
    line-height: 1.35 !important;
    padding: 0.625rem 0.875rem !important;
    margin: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    border-radius: 0.75rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle:hover,
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.panel-mdi-user-trigger:hover,
.header .top-menu > li.dropdown > a.dropdown-toggle:hover,
.header .top-menu > li.dropdown > a.panel-mdi-user-trigger:hover,
#container .top-menu > li.dropdown > a.dropdown-toggle:hover,
#container .top-menu > li.dropdown > a.panel-mdi-user-trigger:hover {
    background: #fafafa !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-img,
.header .top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-img,
#container .top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-img {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    max-width: 2.75rem !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    border: 1px solid #e4e4e7 !important;
    margin: 0 !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-fallback,
.header .top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-fallback,
#container .top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-fallback {
    display: none !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-user-avatar-icon,
.header .top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-user-avatar-icon,
#container .top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-user-avatar-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    color: #52525b;
    flex-shrink: 0;
    stroke-width: 1.75;
}
@media (min-width: 768px) {
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .username,
    .header .top-menu > li.dropdown > a.dropdown-toggle .username,
    #container .top-menu > li.dropdown > a.dropdown-toggle .username {
        display: inline !important;
        vertical-align: middle !important;
        position: relative !important;
        top: 0 !important;
        font-size: var(--font-base) !important;
        font-weight: 600 !important;
        color: #27272a !important;
        letter-spacing: -0.025em;
        line-height: 1.35 !important;
        margin-left: 0 !important;
    }
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle b.caret,
.header .top-menu > li.dropdown > a.dropdown-toggle b.caret,
#container .top-menu > li.dropdown > a.dropdown-toggle b.caret {
    display: none !important;
}
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-caret-icon,
.header .top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-caret-icon,
#container .top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-caret-icon,
.panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle svg.panel-mdi-caret-icon,
.header .top-menu > li.dropdown > a.dropdown-toggle svg.panel-mdi-caret-icon,
#container .top-menu > li.dropdown > a.dropdown-toggle svg.panel-mdi-caret-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    color: #a1a1aa !important;
    stroke: #a1a1aa !important;
    flex-shrink: 0;
    display: block;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu {
    width: auto !important;
    min-width: 18.5rem !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 1rem !important;
    background: #fff !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
    padding: 0.625rem !important;
    margin-top: 0.75rem !important;
    list-style: none;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li {
    list-style: none;
    margin-bottom: 0.25rem;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li:last-child,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li:last-child {
    margin-bottom: 0;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li.panel-mdi-menu-divider,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li.panel-mdi-menu-divider {
    height: 1px;
    margin: 0.625rem 0.75rem;
    padding: 0;
    background: #e4e4e7;
    overflow: hidden;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a {
    display: flex !important;
    align-items: center;
    gap: 0.875rem;
    border-radius: 0.5625rem;
    font-size: var(--font-base);
    font-weight: 500;
    color: #3f3f46 !important;
    padding: 0.875rem 1.125rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a:hover,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a:hover,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a:focus,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a:focus {
    background: #f4f4f5 !important;
    color: #18181b !important;
    text-decoration: none;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a.panel-mdi-menu-logout,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a.panel-mdi-menu-logout {
    color: #dc2626 !important;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a.panel-mdi-menu-logout:hover,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a.panel-mdi-menu-logout:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a .panel-mdi-dropdown-icon,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a .panel-mdi-dropdown-icon,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a svg.panel-mdi-dropdown-icon,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a svg.panel-mdi-dropdown-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    min-height: 1.75rem !important;
    flex-shrink: 0;
    color: #71717a;
    stroke-width: 2;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a:hover .panel-mdi-dropdown-icon,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a:hover .panel-mdi-dropdown-icon {
    color: #52525b;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a.panel-mdi-menu-logout .panel-mdi-dropdown-icon,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a.panel-mdi-menu-logout .panel-mdi-dropdown-icon {
    color: #ef4444;
}
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.extended.logout li a i.fa,
.panel-mdi-shell .top-nav ul.top-menu .dropdown-menu.panel-mdi-user-menu li a i.fa {
    display: none !important;
}

/* Mobile: topbar — altura unificada + usuario solo avatar (al final para ganar cascada) */
@media (max-width: 767px) {
    .panel-mdi-shell .top-nav ul.top-menu .panel-mdi-ghost-btn,
    .header .top-nav ul.top-menu .panel-mdi-ghost-btn,
    #container .top-nav ul.top-menu .panel-mdi-ghost-btn {
        width: var(--mdi-topbar-control-h, 3.5rem);
        height: var(--mdi-topbar-control-h, 3.5rem);
        min-width: var(--mdi-topbar-control-h, 3.5rem);
        min-height: var(--mdi-topbar-control-h, 3.5rem);
        padding: 0.5rem !important;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .panel-mdi-shell .top-nav ul.top-menu .panel-mdi-ghost-btn span,
    .header .top-nav ul.top-menu .panel-mdi-ghost-btn span,
    #container .top-nav ul.top-menu .panel-mdi-ghost-btn span {
        display: none !important;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.panel-mdi-topbar-utils,
    .header .top-nav ul.top-menu > li.panel-mdi-topbar-utils,
    #container .top-nav ul.top-menu > li.panel-mdi-topbar-utils {
        flex-shrink: 0;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown,
    .header .top-nav ul.top-menu > li.dropdown,
    #container .top-nav ul.top-menu > li.dropdown {
        flex-shrink: 0;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .username,
    .header .top-menu > li.dropdown > a.dropdown-toggle .username,
    #container .top-menu > li.dropdown > a.dropdown-toggle .username {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle,
    .header .top-menu > li.dropdown > a.dropdown-toggle,
    #container .top-menu > li.dropdown > a.dropdown-toggle {
        padding: 0.375rem !important;
        gap: 0 !important;
        height: var(--mdi-topbar-control-h, 3.5rem) !important;
        min-height: var(--mdi-topbar-control-h, 3.5rem) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle img.panel-mdi-user-avatar-img,
    .header .top-menu > li.dropdown > a.dropdown-toggle img,
    #container .top-menu > li.dropdown > a.dropdown-toggle img {
        width: calc(var(--mdi-topbar-control-h, 3.5rem) - 0.75rem) !important;
        height: calc(var(--mdi-topbar-control-h, 3.5rem) - 0.75rem) !important;
        max-width: calc(var(--mdi-topbar-control-h, 3.5rem) - 0.75rem) !important;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-user-avatar-icon {
        width: calc(var(--mdi-topbar-control-h, 3.5rem) - 0.75rem) !important;
        height: calc(var(--mdi-topbar-control-h, 3.5rem) - 0.75rem) !important;
    }
    .panel-mdi-shell .top-nav ul.top-menu > li.dropdown > a.dropdown-toggle .panel-mdi-caret-icon {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
}