@media (max-width: 767px), (max-width: 1024px) and (max-height: 600px), (max-width: 1024px) and (orientation: portrait) {
    #mesa-modal .modal {
        padding: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    #mesa-modal .modal-content {
        margin: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #F8FAFC; /* Slate 50 */
    }

    #mesa-modal .modal-header {
        border-radius: 0;
        flex-shrink: 0;
        padding: 12px 16px;
        background: #FFFFFF;
        border-bottom: 1px solid #E2E8F0;
        position: relative;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    #mesa-modal .modal-header h2 {
        color: var(--text-color);
    }

    #mesa-modal .mesa-header-info {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex: 1 1 auto;
        min-width: 0;
    }

    #mesa-modal .mesa-header-info h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    #mesa-modal .mesa-mobile-status-chip {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        background: rgba(76, 175, 80, 0.12);
        color: var(--success-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    #mesa-modal .mesa-mobile-status-chip.ocupada {
        background: rgba(229, 115, 115, 0.12);
        color: var(--danger-color);
    }

    #mesa-modal .modal-header .close {
        background: #F1F5F9;
        color: #64748B;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 1.4rem;
    }

    #mesa-modal .modal-header .close:hover {
        background: #E2E8F0;
        color: var(--primary-color);
    }

    #mesa-modal .modal-body {
        flex: 1;
        padding: 0;
        gap: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background: #F8FAFC;
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 120px);
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    #mesa-modal .modal-body-grid {
        display: block;
    }

    #mesa-modal .modal-column-pedido {
        display: none;
    }

    #mesa-modal .modal-body::-webkit-scrollbar {
        display: none;
    }

    /* Barra de búsqueda y etiqueta */
    #mesa-modal .top-controls {
        display: flex;
        gap: 8px;
        padding: 12px;
        background: #FFFFFF;
        border-bottom: 1px solid #E2E8F0;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 40;
    }

    #mesa-modal .search-container {
        flex: 1;
        position: relative;
    }

    #mesa-modal #buscador-articulos {
        width: 100%;
        padding: 10px 36px 10px 36px;
        background: #FFFFFF;
        border: 1px solid #CBD5E1;
        border-radius: 8px;
        color: var(--text-color);
        font-size: 0.9rem;
    }

    #mesa-modal #buscador-articulos::placeholder {
        color: #94A3B8;
    }

    #mesa-modal .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #94A3B8;
        font-size: 1rem;
    }

    #mesa-modal .search-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: none;
        background: #F1F5F9;
        color: #64748B;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    #mesa-modal #buscador-articulos:placeholder-shown ~ .search-clear {
        opacity: 0;
        pointer-events: none;
    }

    #mesa-modal .search-clear:hover {
        background: #E2E8F0;
        color: #334155;
    }

    #mesa-modal .tag-button {
        width: 44px;
        height: 44px;
        background: #FFFFFF;
        border: 1px solid #CBD5E1;
        border-radius: 8px;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    #mesa-modal .tag-button:hover {
        background: #F1F5F9;
    }
}