/* ── Shell de navegación común (issue #490) ──────────────────────────────
   PfAppShell (Components/Layout/Shell) reemplaza al MudDrawer de los 4 menús
   laterales. Móvil/escritorio lo decide este CSS (corte 960 px = Breakpoint.Md
   de MudBlazor), no el servidor ni MudBreakpointProvider, para que el primer
   pintado ya sea el correcto. Abrir/cerrar: wwwroot/js/pf-shell.js.
   ─────────────────────────────────────────────────────────────────────── */
.pf-shell {
    --pf-shell-w: 240px;
    --pf-shell-mini-w: 56px;
    --pf-shell-current-w: var(--pf-shell-w);
}

.pf-shell--collapsed {
    --pf-shell-current-w: var(--pf-shell-mini-w);
}

.pf-shell-drawer {
    position: fixed;
    top: var(--mud-appbar-height);
    left: 0;
    bottom: 0;
    width: var(--pf-shell-current-w);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
    border-right: 1px solid var(--mud-palette-lines-default);
    z-index: var(--mud-zindex-drawer);
}

/* .mud-main-content trae "transition: margin 225ms": sin anularla, cada carga o
   navegación animaría el contenido 0→240 px (auditoría L1). */
.pf-shell .pf-shell-main {
    padding-top: var(--mud-appbar-height);
    margin-left: var(--pf-shell-current-w);
    transition: none;
}

/* Solo mientras el usuario alterna (pf-shell.js pone la clase ~300 ms). */
.pf-shell--animating .pf-shell-drawer {
    transition: width 200ms ease, transform 200ms ease, visibility 200ms;
}

.pf-shell--animating .pf-shell-main {
    transition: margin-left 200ms ease;
}

.pf-shell-toggle {
    margin-inline-start: -12px;
}

.pf-shell-overlay,
.pf-shell-drawer-close {
    display: none;
}

/* Escritorio colapsado: solo íconos. */
@media (min-width: 960px) {
    .pf-shell--collapsed .pf-shell-label,
    .pf-shell--collapsed .pf-shell-drawer .mud-nav-link-text,
    .pf-shell--collapsed .pf-shell-drawer .mud-nav-link-expand-icon {
        display: none !important;
    }

    /* MudBlazor sangra los links anidados con padding-left 36/48/60 px por nivel; el reset que traía
       el Mini drawer (.mud-drawer-mini) ya no aplica y en 56 px los íconos quedaban recortados. Todos
       al mismo x que los de primer nivel. !important: esas reglas encadenan hasta ~14 clases. */
    .pf-shell--collapsed .pf-shell-drawer .mud-nav-link {
        padding-inline: 16px !important;
    }
}

/* Móvil: drawer fuera de pantalla, entra sobre el contenido con overlay. */
@media (max-width: 959.98px) {
    .pf-shell .pf-shell-main {
        margin-left: 0;
    }

    .pf-shell-drawer {
        top: 0;
        width: var(--pf-shell-w);
        transform: translateX(-100%);
        visibility: hidden;
        z-index: calc(var(--mud-zindex-appbar) + 2);
        box-shadow: var(--mud-elevation-8);
    }

    .pf-shell--mobile-open .pf-shell-drawer {
        transform: none;
        visibility: visible;
    }

    .pf-shell--mobile-open .pf-shell-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: var(--mud-palette-overlay-dark);
        z-index: calc(var(--mud-zindex-appbar) + 1);
    }

    .pf-shell-drawer-close {
        display: flex;
        justify-content: flex-end;
        padding: 4px;
    }
}