/* Estilos globales, parte 11 de 12: Mesas.
   Antes vivían en style.css. Las páginas cargan las 12 partes seguidas y
   en orden (la lista está al inicio de style.css): no cambies ese orden. */

/* ============================================================
   MESAS — IDENTIDAD EDITORIAL XTRYDE
   Scope: .mesas-editorial (vista) y .mesas-modal-editorial (overlays).
   Toda la decoracion vive aqui; el JS solo agrega clases y kickers.
   ============================================================ */

/* --- Vista principal --- */
.mesas-editorial .pos-tabs { gap: 0.4rem; }

/* Plano del salon: fondo crema + greca xicalcoliuhqui muy sutil */
.mesas-editorial .plano-shell {
    position: relative;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line);
    border-radius: 16px;
    padding: 0.85rem 1rem 1.1rem;
    overflow: hidden;
}
.mesas-editorial .plano-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 12px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 28px 14px;
    opacity: 0.55;
    pointer-events: none;
}
.mesas-editorial .plano-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.65rem;
}
.mesas-editorial .plano-meta-lede {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-editorial .plano-leyenda {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    align-items: center;
}
.mesas-editorial .plano-leyenda span.dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.mesas-editorial .plano-leyenda-item {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-carbon);
    opacity: 0.78;
}
.mesas-editorial .plano-leyenda .dot-libre    { background: rgba(0,137,123,0.12); border: 1.5px solid var(--xt-jade); }
.mesas-editorial .plano-leyenda .dot-ocupada  { background: var(--xt-terracota); }
.mesas-editorial .plano-leyenda .dot-listo    { background: var(--xt-carbon); }

.mesas-editorial .plano-superficie {
    background-color: var(--xt-crema-2);
    background-image:
        var(--xt-greca-soft),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(42,54,61,0.05) 39px, rgba(42,54,61,0.05) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(42,54,61,0.05) 39px, rgba(42,54,61,0.05) 40px);
    background-repeat: repeat-x, repeat, repeat;
    background-size: 28px 14px, auto, auto;
    background-position: 0 0, 0 0, 0 0;
    border-radius: 12px;
    border: 1px solid var(--xt-line);
}
.mesas-editorial .plano-superficie.is-edit {
    background-color: #FFF5EC;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat;
    background-size: 28px 14px;
    border: 2px dashed var(--xt-terracota);
}

/* --- Mesa tile editorial --- */
.mesas-editorial .mesa-tile {
    position: absolute;
    border-radius: 12px;
    width: 96px;
    min-height: 78px;
    padding: 0.55rem 0.45rem 0.5rem;
    box-sizing: border-box;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line-strong);
    box-shadow: 0 1px 0 rgba(42,54,61,0.06), 0 8px 16px -12px rgba(42,54,61,0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    color: var(--xt-carbon);
    overflow: hidden;
}
.mesas-editorial .mesa-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(42,54,61,0.08), 0 12px 22px -12px rgba(42,54,61,0.28);
}
/* Sin franja de color arriba: el estado ya se lee en el relleno y el borde
   de la mesa (libre en jade, ocupada en terracota, lista en carbón). */
.mesas-editorial .mesa-tile.is-libre {
    background: var(--xt-crema);
    border-color: var(--xt-jade);
}
.mesas-editorial .mesa-tile.is-ocupada {
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    border-color: var(--xt-terracota-dark);
}
/* Pedido listo para servir: carbón, el tercer estado de la paleta (libre en
   jade, ocupada en terracota). Antes era dorado, fuera de la paleta. */
.mesas-editorial .mesa-tile.is-listo {
    background: var(--xt-carbon);
    border-color: var(--xt-carbon);
    color: var(--xt-crema);
}
/* La etiqueta de reserva es carbón: sobre la mesa lista va en terracota. */
.mesas-editorial .mesa-tile.is-listo .mesa-reserva { background: var(--xt-terracota-dark); }
.mesas-editorial .mesa-tile.is-edit {
    border-style: dashed;
    cursor: grab;
}
.mesas-editorial .mesa-tile .mesa-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
    margin-top: 0.25rem;
}
.mesas-editorial .mesa-tile .mesa-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.78;
    margin-top: 0.15rem;
}
.mesas-editorial .mesa-tile .mesa-val {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    margin-top: 0.2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mesas-editorial .mesa-tile .mesa-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.72;
    margin-top: 0.18rem;
}
.mesas-editorial .mesa-tile .mesa-reserva {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--xt-carbon);
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--ficha-radius, 4px);
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* --- Empty state editorial --- */
.mesas-editorial .empty-editorial,
.mesas-modal-editorial .empty-editorial {
    text-align: center;
    padding: 2.4rem 1.6rem;
}
.mesas-editorial .empty-editorial .sello-num,
.mesas-modal-editorial .empty-editorial .sello-num {
    margin-bottom: 0.85rem;
}
.mesas-editorial .empty-editorial .empty-titulo,
.mesas-modal-editorial .empty-editorial .empty-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.mesas-editorial .empty-editorial .empty-lede,
.mesas-modal-editorial .empty-editorial .empty-lede {
    color: var(--xt-muted);
    font-size: 0.92rem;
    max-width: 28rem;
    margin: 0 auto 1.2rem;
    line-height: 1.55;
}

/* --- Cuenta: header dash-chrome reusado, ajustes y banner --- */
.mesas-editorial .mesa-banner-listo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--xt-crema-3);
    border: 1px solid var(--xt-carbon);
    border-radius: var(--ficha-radius, 4px);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}
.mesas-editorial .mesa-banner-listo .b-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-editorial .mesa-banner-listo .b-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--xt-carbon);
}

/* Persona tabs */
.mesas-editorial .persona-tabs {
    margin-bottom: 0.85rem;
}
.mesas-editorial .persona-tabs .p-lab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.45rem;
    display: block;
}
.mesas-editorial .persona-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    min-height: 44px;   /* dedo en tableta y celular */
    border-radius: 4px; /* sin pastillas: es una acción */
    border: 1px solid var(--xt-line-strong);
    background: var(--xt-crema);
    color: var(--xt-carbon);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mesas-editorial .persona-chip:hover { background: var(--xt-crema-3); }
.mesas-editorial .persona-chip.is-active {
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    border-color: var(--xt-terracota);
}
.mesas-editorial .persona-chip.is-active.is-general {
    background: var(--xt-carbon);
    border-color: var(--xt-carbon);
}
.mesas-editorial .persona-chip .p-val {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* Subtotal cuenta */
.mesas-editorial .cuenta-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--xt-line);
}
.mesas-editorial .cuenta-subtotal .cs-lab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-editorial .cuenta-subtotal .cs-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--xt-terracota);
    font-variant-numeric: tabular-nums;
}

/* Filas de items: mantener look limpio editorial */
.mesas-editorial .mesa-item-row { border-bottom: 1px solid var(--xt-line); }
.mesas-editorial .mesa-item-row:last-child { border-bottom: 0; }

/* Lista de productos panel derecho */
.mesas-editorial .mesa-prod-row {
    border-bottom: 1px solid var(--xt-line);
    transition: background 0.12s ease;
}
.mesas-editorial .mesa-prod-row:hover { background: var(--xt-crema-3); }
.mesas-editorial .mesa-prod-row .prod-precio {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-terracota-texto);
    font-variant-numeric: tabular-nums;
}

/* --- MODALES editoriales (overlay con scope) --- */
.mesas-modal-editorial .modal-contenido {
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: var(--ficha-radius, 4px) !important;   /* hoja, como .xt-hoja */
    box-shadow: 0 30px 60px -25px rgba(42,54,61,0.45) !important;
    position: relative;
    overflow: hidden;
}
.mesas-modal-editorial .modal-contenido::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 26px 12px;
    opacity: 0.6;
    pointer-events: none;
}
.mesas-modal-editorial .modal-contenido > * { position: relative; z-index: 1; }
.mesas-modal-editorial .modal-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.mesas-modal-editorial .modal-lede {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.25rem;
}
.mesas-modal-editorial .modal-cerrar {
    width: 44px;
    height: 44px;
    border-radius: var(--ficha-radius, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(42,54,61,0.06);
    color: var(--xt-carbon);
    font-size: 1.1rem;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mesas-modal-editorial .modal-cerrar:hover { background: rgba(42,54,61,0.14); }

/* Resumen de cobro: panel editorial con cifra Fraunces */
.mesas-modal-editorial .cobro-resumen {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}
.mesas-modal-editorial .cobro-resumen .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
}
.mesas-modal-editorial .cobro-resumen .row .lab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-modal-editorial .cobro-resumen .row .val {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
}
.mesas-modal-editorial .cobro-resumen .row.total {
    padding-top: 0.55rem;
    margin-top: 0.45rem;
    border-top: 1px solid var(--xt-line);
}
.mesas-modal-editorial .cobro-resumen .row.total .lab {
    color: var(--xt-carbon);
    font-size: 0.75rem;
}
.mesas-modal-editorial .cobro-resumen .row.total .val {
    font-size: 1.85rem;
    color: var(--xt-terracota);
    font-weight: 700;
}

/* Pills editoriales para propina / metodo de pago */
.mesas-modal-editorial .pill-grupo {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.mesas-modal-editorial .pill-mesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    min-height: 44px;   /* dedo en tableta y celular */
    border-radius: 4px; /* sin pastillas: es una acción */
    border: 1px solid var(--xt-line-strong);
    background: var(--xt-crema);
    color: var(--xt-carbon);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mesas-modal-editorial .pill-mesa:hover { background: var(--xt-crema-3); }
.mesas-modal-editorial .pill-mesa.is-active {
    background: var(--xt-terracota-dark, #BF360C);
    color: var(--xt-crema);
    border-color: var(--xt-terracota);
}
.mesas-modal-editorial .pill-mesa.is-active.is-carbon {
    background: var(--xt-carbon);
    border-color: var(--xt-carbon);
}

/* Bloque seccion mono dentro de modal */
.mesas-modal-editorial .modal-mini-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.55rem;
    display: block;
}

/* Lista compacta de espacios en modal de gestion */
.mesas-modal-editorial .espacio-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--xt-line);
}
.mesas-modal-editorial .espacio-row:last-child { border-bottom: 0; }

/* Iconito de alerta editorial (para confirmaciones destructivas) */
.mesas-modal-editorial .icono-alerta {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(216,67,21,0.12);
    color: var(--xt-terracota);
    flex-shrink: 0;
}
.mesas-modal-editorial .aviso-rojo {
    background: rgba(216,67,21,0.08);
    border: 1px solid rgba(216,67,21,0.25);
    border-radius: var(--ficha-radius, 4px);
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--xt-carbon);
    font-size: 0.88rem;
}
.mesas-modal-editorial .aviso-info {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius, 4px);
}
/* Botones de cada renglón de "Resolver con cocina": compactos, 44 px. */
.mesas-modal-editorial .mesa-reso-btn {
    padding: 10px 14px;
    min-height: 44px;
    font-size: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--xt-carbon);
    font-size: 0.88rem;
}

/* Folios POS — anular numero decorativo en mesas (lo usaba ventas) */
.mesas-editorial .pos-folio { position: relative; }

/* Responsive: tile mas pequeno en moviles */
@media (max-width: 640px) {
    .mesas-editorial .mesa-tile {
        width: 82px;
        min-height: 70px;
        padding: 0.45rem 0.35rem;
    }
    .mesas-editorial .mesa-tile .mesa-num { font-size: 1.1rem; }
    .mesas-modal-editorial .cobro-resumen .row.total .val { font-size: 1.55rem; }
}

/* Buscador de platillos de la cuenta: angosto en escritorio, a todo lo
   ancho en el celular (antes lo hacía un [style*="width:200px"] global). */
.mesa-filtro-prods { max-width: 200px; }
@media (max-width: 639px) { .mesa-filtro-prods { max-width: none; width: 100%; } }

/* --- Para llevar y pedidos del QR de la mesa (cierre de los 73,
       restaurante-23 y restaurante-10: mesas_mover.js y mesas_qr.js) --- */
.mesas-editorial .mesa-llevar-lista,
.mesas-editorial .mesa-qr-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}
@media (min-width: 640px) {
    .mesas-editorial .mesa-llevar-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mesas-editorial .mesa-llevar-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mesas-editorial .mesa-qr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mesas-editorial .mesa-llevar-ficha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    text-align: left;
    background: #FFFFFF;
    color: var(--xt-carbon);
    border: 1px solid var(--xt-line-strong);
    border-radius: var(--ficha-radius, 4px);
    cursor: pointer;
}
.mesas-editorial .mesa-llevar-ficha:hover { border-color: var(--xt-terracota); }
.mesas-editorial .mesa-llevar-ficha:focus-visible {
    outline: 2px solid var(--xt-terracota);
    outline-offset: 2px;
}
.mesas-editorial .mesa-llevar-nombre,
.mesas-editorial .mesa-qr-mesa {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--xt-carbon);
}
.mesas-editorial .mesa-llevar-meta,
.mesas-editorial .mesa-qr-meta,
.mesas-editorial .mesa-qr-extra {
    font-size: 0.8rem;
    color: var(--xt-muted);
}
.mesas-editorial .mesa-llevar-listo {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xt-jade-dark);
}
.mesas-editorial .mesa-qr-ficha {
    padding: 0.8rem 0.9rem;
    background: #FFFFFF;
    border: 1px solid var(--xt-line-strong);
    border-radius: var(--ficha-radius, 4px);
}
.mesas-editorial .mesa-qr-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.mesas-editorial .mesa-qr-lineas {
    margin: 0.5rem 0;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.9rem;
    color: var(--xt-carbon);
}
.mesas-editorial .mesa-qr-extra { display: block; }
.mesas-editorial .mesa-qr-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.mesas-editorial .mesa-qr-acciones button { min-height: 44px; }