/* ═══════════════════════════════════════════════════════════
   menu-mobile.css — Agregar DESPUÉS de menu.css
   Rediseño completo mobile: filtros como bottom drawer + cards compactas
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   MOBILE FIRST — todo lo de abajo aplica a < 1024px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* ── Layout base ──────────────────────────────────────── */
    .menu-page {
        padding: calc(72px + 1rem) 0 6rem;
        /* espacio para FAB */
        max-width: 100%;
    }

    .menu-layout {
        flex-direction: column;
        gap: 0;
    }

    /* ── Sidebar: oculto en mobile, se muestra como drawer ── */
    .menu-sidebar {
        display: none;
        /* reemplazado por el drawer */
    }

    /* ── Barra superior de búsqueda + filtro ─────────────── */
    .menu-mobile-bar {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .75rem 1rem;
        position: sticky;
        top: 72px;
        z-index: 40;
        background: rgba(10, 10, 10, .95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(212, 175, 55, .1);
    }

    .menu-mobile-search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: .5rem;
        background: rgba(212, 175, 55, .07);
        border: 1px solid rgba(212, 175, 55, .15);
        border-radius: .6rem;
        padding: .65rem .9rem;
    }

    .menu-mobile-search .material-symbols-outlined {
        color: #D4AF37;
        font-size: 1.1rem;
        opacity: .7;
        flex-shrink: 0;
    }

    .menu-mobile-search input {
        background: none;
        border: none;
        outline: none;
        color: #fff;
        font-size: .875rem;
        width: 100%;
    }

    .menu-mobile-search input::placeholder {
        color: rgba(255, 255, 255, .3);
    }

    /* Botón filtros con badge */
    .menu-filter-fab {
        position: relative;
        width: 42px;
        height: 42px;
        border-radius: .6rem;
        background: rgba(212, 175, 55, .1);
        border: 1px solid rgba(212, 175, 55, .25);
        color: #D4AF37;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .2s;
    }

    .menu-filter-fab:hover,
    .menu-filter-fab.has-filters {
        background: rgba(212, 175, 55, .2);
    }

    .menu-filter-fab .material-symbols-outlined {
        font-size: 1.2rem;
    }

    .filter-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #D4AF37;
        color: #000;
        font-size: .55rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .menu-filter-fab.has-filters .filter-badge {
        display: flex;
    }

    /* Chips de categorías scrollables */
    .menu-cat-chips {
        display: flex;
        gap: .4rem;
        padding: .6rem 1rem;
        overflow-x: auto;
        scrollbar-width: none;
        background: rgba(10, 10, 10, .9);
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .menu-cat-chips::-webkit-scrollbar {
        display: none;
    }

    .cat-chip {
        flex-shrink: 0;
        padding: .4rem .9rem;
        border-radius: 999px;
        border: 1px solid rgba(212, 175, 55, .2);
        background: rgba(212, 175, 55, .05);
        color: rgba(255, 255, 255, .6);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap;
    }

    .cat-chip.active {
        background: #D4AF37;
        border-color: #D4AF37;
        color: #000;
    }

    .cat-chip:hover:not(.active) {
        border-color: rgba(212, 175, 55, .5);
        color: #fff;
    }

    /* ── Main área ────────────────────────────────────────── */
    .menu-main {
        padding: .75rem 1rem 1rem;
    }

    .menu-main-header {
        margin-bottom: 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .menu-main-title {
        font-size: 1.1rem;
    }

    .menu-main-subtitle {
        font-size: .75rem;
    }

    /* ── Grid compacto en mobile ──────────────────────────── */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .75rem !important;
    }

    /* ── Card compacta ────────────────────────────────────── */
    .menu-item {
        border-radius: .75rem;
        overflow: hidden;
        background: #111;
        border: 1px solid rgba(212, 175, 55, .08);
    }

    .menu-item-img-wrap {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
    }

    .menu-item-body {
        padding: .65rem .75rem .75rem !important;
    }

    .menu-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        margin-bottom: .3rem;
    }

    .menu-item-header h3 {
        font-size: .82rem !important;
        line-height: 1.25;
        /* Nombre en 2 líneas máximo */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .menu-item-price {
        font-size: .8rem !important;
        color: #D4AF37;
    }

    .menu-item-desc {
        font-size: .7rem !important;
        -webkit-line-clamp: 2;
        margin-bottom: .5rem !important;
        color: rgba(255, 255, 255, .45);
    }

    .menu-item-footer {
        padding-top: .5rem !important;
        border-top: 1px solid rgba(212, 175, 55, .08) !important;
    }

    .menu-item-rating {
        font-size: .65rem !important;
    }

    .menu-item-rating .material-symbols-outlined {
        font-size: .85rem !important;
    }

    .menu-add-btn {
        width: 1.9rem !important;
        height: 1.9rem !important;
        border-radius: .4rem !important;
    }

    .menu-add-btn .material-symbols-outlined {
        font-size: 15px !important;
    }

    /* Badges más pequeños en mobile */
    .menu-badge,
    .menu-badge-left {
        top: .45rem !important;
        right: .45rem !important;
        left: auto;
    }

    .menu-badge-left {
        left: .45rem !important;
        right: auto !important;
    }

    .badge-outline {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    /* ── List view en mobile ──────────────────────────────── */
    .menu-grid.list-view {
        grid-template-columns: 1fr !important;
    }

    .menu-grid.list-view .menu-item {
        flex-direction: row;
        height: 90px;
    }

    .menu-grid.list-view .menu-item-img-wrap {
        width: 90px !important;
        flex-shrink: 0;
        aspect-ratio: 1 !important;
        border-radius: 0;
    }

    .menu-grid.list-view .menu-item-body {
        padding: .6rem .75rem !important;
        justify-content: center;
    }

    .menu-grid.list-view .menu-item-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .menu-grid.list-view .menu-item-desc {
        -webkit-line-clamp: 1;
        margin-bottom: .3rem !important;
    }

    /* ── Paginación mobile ────────────────────────────────── */
    .menu-pagination {
        margin-top: 1.5rem;
        gap: .35rem;
    }

    .page-btn {
        width: 2rem;
        height: 2rem;
        font-size: .75rem;
    }

}

/* end @media max-width: 1023px */


/* ══════════════════════════════════════════════════════════
   BOTTOM SHEET DRAWER — filtros
   ══════════════════════════════════════════════════════════ */
.filter-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 100;
    opacity: 0;
    transition: opacity .3s;
}

.filter-drawer-backdrop.open {
    display: block;
    opacity: 1;
}

.filter-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: #111;
    border-top: 1px solid rgba(212, 175, 55, .2);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0 1.25rem 2rem;
    max-height: 82svh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.23, 1, .32, 1);
    will-change: transform;
}

.filter-drawer.open {
    transform: translateY(0);
}

/* Handle */
.filter-drawer-handle {
    width: 2.5rem;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .15);
    margin: .8rem auto 1.2rem;
}

.filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.filter-drawer-header h3 {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #D4AF37;
}

.filter-drawer-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.filter-drawer-close .material-symbols-outlined {
    font-size: 1.3rem;
}

.filter-drawer-section {
    margin-bottom: 1.5rem;
}

.filter-drawer-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, .6);
    margin-bottom: .75rem;
    display: block;
}

/* Categorías en grid 2 col dentro del drawer */
.drawer-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.drawer-cat-btn {
    padding: .65rem .75rem;
    border-radius: .5rem;
    background: rgba(212, 175, 55, .05);
    border: 1px solid rgba(212, 175, 55, .12);
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-cat-btn.active {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #000;
    font-weight: 800;
}

.drawer-cat-btn .material-symbols-outlined {
    font-size: .9rem;
    opacity: 0;
}

.drawer-cat-btn.active .material-symbols-outlined {
    opacity: 1;
}

/* Precio dentro del drawer */
.drawer-price-slider {
    width: 100%;
    accent-color: #D4AF37;
}

.drawer-price-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
}

.drawer-price-label {
    font-size: .7rem;
    font-weight: 700;
    color: #D4AF37;
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .2);
    padding: .2rem .5rem;
    border-radius: .3rem;
}

/* Botones apply/clear */
.filter-drawer-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
}

.drawer-apply-btn {
    flex: 1;
    padding: .9rem;
    background: linear-gradient(135deg, #D4AF37, #F1D279);
    color: #000;
    border: none;
    border-radius: .6rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .2s;
}

.drawer-apply-btn:hover {
    filter: brightness(1.1);
}

.drawer-clear-btn {
    padding: .9rem 1.2rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    border-radius: .6rem;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}

.drawer-clear-btn:hover {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

/* ── Ocultar barra mobile en desktop ──────────────────────── */
@media (min-width: 1024px) {

    .menu-mobile-bar,
    .menu-cat-chips,
    .filter-drawer-backdrop,
    .filter-drawer {
        display: none !important;
    }
}