/* ==========================================================================
   MyMenu · Correcciones responsive del panel (móvil/tablet)
   Archivo NUEVO y aditivo: no modifica admin.css. Se carga después.
   ========================================================================== */

/* Backdrop del menú lateral (móvil) */
.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
    -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-backdrop.active {
    display: block;
}
body.mobile-menu-open {
    overflow: hidden;
}

/* ---- Móvil y tablet (cajón lateral) ---- */
@media (max-width: 1024px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-panel { width: 100%; overflow-x: hidden; }

    .sidebar {
        width: min(84vw, 300px) !important;
        z-index: 1200 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.28s ease !important;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 50;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
    }
}

/* ---- Teléfonos ---- */
@media (max-width: 768px) {
    .content-wrapper { padding: 16px 14px; }

    .top-bar { padding: 0 14px; gap: 10px; }
    .top-bar-right { gap: 10px; min-width: 0; }
    .tenant-info {
        padding: 8px 12px;
        max-width: 58vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .stats-grid { grid-template-columns: 1fr !important; gap: 14px; margin-bottom: 20px; }
    .dashboard-actions { grid-template-columns: 1fr !important; gap: 14px; }
    .products-grid,
    .menu-products-grid { grid-template-columns: 1fr !important; }

    .stat-card { padding: 18px; }

    .page-header { flex-wrap: wrap; gap: 10px; }
    .page-header h1 { font-size: 20px; }
    .filters-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .search-box { min-width: 0 !important; width: 100%; }

    .menu-status-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .menu-status-actions { flex-wrap: wrap; }
    .menu-status-actions .btn { flex: 1; }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .toast-container { left: 14px !important; right: 14px !important; }
    .toast { min-width: 0 !important; width: 100%; }

    .modal-dialog { width: calc(100vw - 24px) !important; max-width: 100% !important; }
    .modal-header { padding: 18px; }
    .modal-header h3 { font-size: 19px; }
}

@media (max-width: 400px) {
    .content-wrapper { padding: 14px 10px; }
    .tenant-info span { display: none; }
    .sidebar { width: min(88vw, 280px) !important; }
}