/* ====== PATCH SOLO PARA MESAS (RESPETA TU CSS) ====== */

.mesas-wrap {
    padding: 18px 14px;
}

.mesas-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mesas-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mesa-stat {
    background: color-mix(in srgb, var(--bg-1) 85%, transparent);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    padding: 14px 16px;
    min-width: 150px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

    .mesa-stat .lbl {
        font-size: .85rem;
        color: var(--muted);
        font-weight: 700;
    }

    .mesa-stat .val {
        font-size: 2rem;
        line-height: 1.05;
        color: var(--text);
        font-weight: 900;
    }

    .mesa-stat.is-libre {
        box-shadow: 0 0 0 2px rgba(34,197,94,.25) inset, 0 10px 30px rgba(0,0,0,.28);
    }

    .mesa-stat.is-ocupada {
        box-shadow: 0 0 0 2px rgba(245,158,11,.25) inset, 0 10px 30px rgba(0,0,0,.28);
    }

    .mesa-stat.is-reservada {
        box-shadow: 0 0 0 2px rgba(59,130,246,.25) inset, 0 10px 30px rgba(0,0,0,.28);
    }

.btn-mostrador {
    border-radius: 999px;
    padding: .6rem 1rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.mesas-section-title {
    color: var(--text);
    font-weight: 900;
    margin: 18px 0 10px;
    font-size: 1.05rem;
}

/* grid */
.mesas-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0,1fr)); /* móvil: 2 columnas */
}

@media (min-width: 576px) {
    .mesas-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width: 992px) {
    .mesas-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

@media (min-width: 1400px) {
    .mesas-grid {
        grid-template-columns: repeat(6, minmax(0,1fr));
    }
}

/* mesa card */
.mesa-card {
    border: 1px solid var(--stroke);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    padding: 16px;
    text-align: center;
    height: 100%;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .mesa-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--stroke) 60%, rgba(255,255,255,.12));
        box-shadow: 0 14px 40px rgba(0,0,0,.36);
    }

.mesa-num {
    font-size: 2.1rem;
    font-weight: 1000;
    color: var(--text);
    line-height: 1;
}

.mesa-estado {
    margin-top: 4px;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .2px;
}

.mesa-meta {
    margin-top: 10px;
    display: flex;
    gap: .9rem;
    justify-content: center;
    color: var(--muted);
    font-size: .9rem;
}

/* ====== COLORES POR ESTADO (BASE + HOVER) ====== */
/* Libre */
.mesa-card.is-libre {
    background: #031816;
    box-shadow: 0 0 0 2px rgba(34,197,94,.18) inset, 0 10px 30px rgba(0,0,0,.28);
}

    .mesa-card.is-libre:hover {
        background: #022b22;
    }

    .mesa-card.is-libre .mesa-estado {
        color: #22c55e;
    }

/* Ocupada */
.mesa-card.is-ocupada {
    background: #1c140a;
    box-shadow: 0 0 0 2px rgba(245,158,11,.18) inset, 0 10px 30px rgba(0,0,0,.28);
}

    .mesa-card.is-ocupada:hover {
        background: #352409;
    }

    .mesa-card.is-ocupada .mesa-estado {
        color: #f59e0b;
    }

/* Reservada */
.mesa-card.is-reservada {
    background: #071224;
    box-shadow: 0 0 0 2px rgba(59,130,246,.18) inset, 0 10px 30px rgba(0,0,0,.28);
}

    .mesa-card.is-reservada:hover {
        background: #0b1e3d;
    }

    .mesa-card.is-reservada .mesa-estado {
        color: #3b82f6;
    }

/* mobile: stats 2x2 + botón full-width */
@media (max-width: 575.98px) {
    .mesas-wrap {
        padding: 14px 12px;
    }

    .mesas-top {
        flex-direction: column;
        gap: 12px;
    }

    .mesas-stats {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 12px;
    }

    .mesa-stat {
        min-width: 0;
        padding: 12px 14px;
        border-radius: 16px;
    }

        .mesa-stat .val {
            font-size: 1.8rem;
        }

    .btn-mostrador {
        width: 100%;
        justify-content: center;
        padding: .75rem 1rem;
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(13,110,253,.18);
    }

    .mesas-grid {
        gap: 12px;
    }

    .mesa-card {
        padding: 14px;
    }

    .mesa-num {
        font-size: 1.9rem;
    }

    .mesa-meta {
        gap: .7rem;
        font-size: .88rem;
    }
}






@media (max-width: 575.98px) {
    #modalPagoEfectivo .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #modalPagoEfectivo .cash-total,
    #modalPagoEfectivo .cash-change {
        font-size: 1.7rem;
    }
}

@media (min-width: 992px) {
    #modalPagoEfectivo .modal-body > .modal-inner {
        max-width: 820px;
        margin: 0 auto;
    }
}

@media (min-width: 992px) {
    #modalPagoTarjeta .modal-body > .modal-inner {
        max-width: 820px;
        margin: 0 auto;
    }
}







.pmx-item.is-ready {
    border: 1px solid rgba(59,130,246,.30);
    background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.04));
}

.pmx-item.is-sent {
    border: 1px solid rgba(245,158,11,.30);
    background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
}

.pmx-item.is-done {
    border: 1px solid rgba(34,197,94,.30);
    background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
}

.pmx-item.is-rejected {
    border: 1px solid rgba(239,68,68,.30);
    background: linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.04));
}

.pmx-status-badge.is-ready {
    background: rgba(59,130,246,.18);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.30);
}

.pmx-status-badge.is-sent {
    background: rgba(245,158,11,.18);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,.30);
}

.pmx-status-badge.is-done {
    background: rgba(34,197,94,.18);
    color: #86efac;
    border: 1px solid rgba(34,197,94,.30);
}

.pmx-status-badge.is-rejected {
    background: rgba(239,68,68,.18);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.30);
}


/*MODAL ORDEN DETALLE COLORES*/
.pmx-ready,
.pmx-delivered,
.pmx-rejected {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border-radius: .7rem;
    font-size: .78rem;
    font-weight: 600;
}

.pmx-ready {
    background: rgba(59,130,246,.15);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.25);
}

.pmx-delivered {
    background: rgba(34,197,94,.15);
    color: #86efac;
    border: 1px solid rgba(34,197,94,.25);
}

.pmx-rejected {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.25);
}