@media (max-width: 767px), (max-width: 1024px) and (max-height: 600px), (max-width: 1024px) and (orientation: portrait) {
    /* Categorías */
    #mesa-modal .categorias-section {
        padding: 8px 12px;
        background: #F8FAFC;
        flex-shrink: 0;
        position: sticky;
        top: 72px;
        z-index: 30;
    }

    #mesa-modal .categorias-container {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 0;
        scrollbar-width: none;
    }

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

    .category-button {
        flex: 0 0 auto;
        min-width: 110px;
        min-height: 44px;
        padding: 8px 14px;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 999px;
        color: #64748B;
        font-size: 0.85rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s;
        text-transform: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .category-button:hover {
        background: #F1F5F9;
        transform: translateY(-1px);
    }

    .category-button.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #FFFFFF;
        box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.25);
    }

    .category-button .icon {
        display: none;
    }

    /* Artículos */
    #mesa-modal .articulos-section {
        flex: 1 1 auto;
        padding: 8px 12px 20px;
        background: #F8FAFC;
        display: flex;
        flex-direction: column;
    }

    #mesa-modal .articulos-container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        background: transparent;
        border: none;
        max-height: none;
    }

    .articulo-btn {
        position: relative;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 86px;
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        padding: 14px 16px;
    }

    .articulo-btn:hover {
        background: #FFFFFF;
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }

    .articulo-btn-leading {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: #F1F5F9;
        color: #64748B;
        font-weight: 700;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .articulo-btn-body {
        gap: 4px;
        align-items: flex-start;
        text-align: left;
    }

    .articulo-nombre {
        font-size: 0.95rem;
        color: var(--text-color);
    }

    .articulo-meta {
        font-size: 0.75rem;
        color: #94A3B8;
    }

    .articulo-btn-side {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        min-width: 74px;
    }

    .articulo-btn-price {
        background: #F8FAFC;
        color: var(--primary-color);
        font-size: 0.9rem;
        align-self: center;
        padding: 6px 10px;
        font-weight: 700;
        border-radius: 10px;
    }

    .articulo-add-control {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--primary-color);
        color: #ffffff;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 8px 16px -6px rgba(var(--primary-rgb), 0.35);
        cursor: pointer;
    }

    .articulo-add-control:active {
        transform: scale(0.97);
    }

    .articulo-option-icon {
        top: 12px;
        right: 12px;
        font-size: 0.9rem;
        opacity: 0.5;
        color: #94A3B8;
    }
}