/* ============================================================
   Capa responsive para móviles (compartida por las páginas admin).
   En escritorio NO cambia nada: todo vive dentro de @media (max-width:767px).
   - El sidebar (#sidebarNav) se convierte en un cajón deslizable con hamburguesa.
   - Las tablas se vuelven desplazables en horizontal.
   - Se reducen paddings grandes y los modales ocupan el ancho disponible.
   ============================================================ */

/* Botón hamburguesa: oculto en escritorio. */
#mobileNavToggle { display: none; }

@media (max-width: 767px) {
    /* Hamburguesa flotante fija arriba a la izquierda (sobre el header). */
    #mobileNavToggle {
        display: inline-flex;
        position: fixed;
        top: 1.1rem; left: 1rem;
        z-index: 75;
    }

    /* El sidebar pasa a ser un cajón fijo fuera de pantalla. */
    #sidebarNav {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        height: 100% !important;
        width: 16rem !important;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 70;
    }

    /* Dentro del cajón mostramos las etiquetas aunque tenga 'nav-collapsed'. */
    #sidebarNav.nav-collapsed { width: 16rem !important; }
    #sidebarNav.nav-collapsed .nav-label {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        overflow: visible !important;
    }
    #sidebarNav.nav-collapsed .nav-logo-text { display: inline !important; }

    body.mobile-nav-open #sidebarNav { transform: translateX(0); }

    /* Fondo oscuro al abrir el cajón. */
    #mobileNavBackdrop {
        position: fixed; inset: 0;
        background: rgba(2, 6, 23, 0.5);
        z-index: 65; display: none;
    }
    body.mobile-nav-open #mobileNavBackdrop { display: block; }

    /* Ajuste de paddings grandes en el contenido. Reservamos espacio a la
       izquierda del header para que el contenido no quede bajo la hamburguesa. */
    #mainContent > header { padding-left: 4.25rem !important; padding-right: 1rem !important; }
    #mainContent .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    #mainContent .p-8, #mainContent .p-10 { padding: 1rem !important; }

    /* Las tablas se desplazan horizontalmente en vez de romper el layout. */
    #mainContent table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Los modales / tarjetas anchas ocupan el ancho disponible. */
    .max-w-xl, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl { max-width: 100% !important; }
}