/* Responsive stylesheet intentionally reserved for layout breakpoints. */

/* =========================
   SIDEBAR RESPONSIVE
   El sidebar solo se colapsa en escritorio (> 980px).
   En 980px o menos funciona como menú móvil off-canvas.
========================= */
@media (max-width: 980px){
    .app-shell,
    .app-shell.is-collapsed{
        grid-template-columns: minmax(0, 1fr);
    }

    .main-area{
        grid-column: 1;
        padding: 16px;
    }

    .sidebar{
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-w), calc(100vw - 48px));
        max-width: 320px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform var(--transition);
    }

    body.sidebar-open .sidebar{
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .collapse-btn{
        display: none;
    }

    .mobile-menu-btn,
    .mobile-close{
        display: grid;
    }
}

@media (min-width: 981px){
    .mobile-menu-btn,
    .mobile-close{
        display: none;
    }
}