/* ============================================================
   TEMA v2 · 40 · PEDIDO  ·  terminal POS
   Terracota + crema. Productos como teclas grandes con volumen,
   el pedido como ticket de papel con el total en bloque oscuro.
   ============================================================ */

/* cabecera de la mesa */
.pedido-head { background: var(--hdr); color: var(--hdr-ink); border-radius: 24px; padding: 12px 20px; gap: 12px; margin-bottom: 12px; box-shadow: var(--shadow-md); }
.pedido-head h2 { font-family: var(--font-num); font-size: 38px; letter-spacing: .03em; text-transform: uppercase; font-weight: 700; line-height: 1; color: var(--hdr-ink); }
.pedido-head .icon-btn { background: rgba(255, 255, 255, .14); border: 0; color: var(--hdr-ink); }
.pedido-head .icon-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.pedido-head .badge { background: rgba(255, 255, 255, .16); color: var(--hdr-ink); border-color: rgba(255, 255, 255, .22); }
.pedido-head .mozo-chip:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .26); }
.pedido-head .personas-step { background: rgba(0, 0, 0, .22); border: 0; }
.pedido-head .personas-step .ps-btn { color: var(--hdr-ink); }
.pedido-head .personas-step .ps-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); color: #fff; }
.pedido-head .personas-step .ps-val { font-family: var(--font-num); font-size: 21px; color: var(--hdr-ink); }
.pedido-head .personas-step .ps-val .ico { color: var(--hdr-mute); }

.pedido-layout { grid-template-columns: 1fr 400px; gap: 22px; }

/* Categorías siempre visibles: el contenido se reparte en filas y no requiere scroll horizontal. */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 2px 9px; margin-bottom: 4px; overflow: visible; }
.cat-tab { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 16px; min-height: 46px; display: inline-flex; align-items: center; font-size: 15.5px; background: var(--surface); box-shadow: 0 3px 0 var(--border-strong); }
.cat-tab.on { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent-solid) 60%, #000), 0 8px 16px color-mix(in srgb, var(--accent-solid) 30%, transparent); }
.pedido-sticky .stk-total[role="button"] { cursor: pointer; touch-action: manipulation; }
.pedido-sticky .stk-total[role="button"]:focus-visible { outline: 2px solid #f2c46d; outline-offset: 3px; border-radius: 8px; }
.cat-subtabs { margin-top: -4px; }
@media (max-width: 640px) {
  .cat-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 2px 0 10px; }
  .cat-tab { width: 100%; min-height: 44px; padding: 4px 5px; font-size: clamp(11px, 3.2vw, 13px); line-height: 1.15; white-space: normal; text-align: center; }
}

/* productos: teclas */
.prod-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.prod {
  --tile: var(--accent-solid); position: relative; overflow: hidden; min-height: 124px; padding: 22px 16px 14px; border: 0; border-radius: 20px;
  background: var(--surface); box-shadow: 0 5px 0 var(--border-strong), 0 12px 20px rgba(48, 32, 20, .1);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.prod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--tile); }
.prod:nth-child(4n+2) { --tile: #d29a2e; }
.prod:nth-child(4n+3) { --tile: #8e2c3a; }
.prod:nth-child(4n+4) { --tile: #6b7a2a; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--border-strong), 0 18px 26px rgba(48, 32, 20, .16); border: 0; }
.prod:active { transform: translateY(5px); box-shadow: 0 0 0 var(--border-strong), 0 3px 6px rgba(48, 32, 20, .12); }
.prod b { font-size: 16.5px; font-weight: 750; line-height: 1.22; }
.prod .p-price { align-self: flex-start; margin-top: auto; padding: 1px 12px 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-num); font-size: 23px; font-weight: 700; letter-spacing: .01em; }
.prod.no-disp { opacity: .42; }
.pedido-opciones-directas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.pedido-opcion-directa { display: grid; align-content: center; justify-items: start; gap: 5px; min-width: 0; min-height: 62px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; touch-action: manipulation; }
.pedido-opcion-directa:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.pedido-opcion-directa:disabled { opacity: .6; }
.pedido-opcion-directa b { font-weight: 750; }
.pedido-opcion-directa span { color: var(--text-muted); font-size: 13px; }

/* el pedido: ticket */
.pedido-panel { border: 0; border-radius: 26px 26px 20px 20px; box-shadow: var(--lift); background: var(--surface); overflow: hidden; }
.pp-head { background: #2b1d17; color: #f6eee2; padding: 16px 20px; border-bottom: 0; font-family: var(--font-num); font-size: 21px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.pp-head .pp-count { font-family: var(--font-num); font-size: 16px; min-width: 28px; height: 28px; background: var(--accent-solid); }
.pp-items { padding: 6px 16px; max-height: 44vh; }
.pi { padding: 14px 2px; border-bottom: 1.5px dashed var(--border-strong); }
.pi-name { font-size: 15.5px; font-weight: 700; }
.pi-qty { background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 2px; }
.pi-qty button { width: 36px; height: 36px; border-radius: 50%; }
.pi-qty button:hover { background: var(--accent-solid); color: #fff; }
.pi-qty .n { font-family: var(--font-num); font-size: 21px; min-width: 28px; }
.pi-price { font-family: var(--font-num); font-size: 21px; font-weight: 700; min-width: 74px; }
.pi-obs { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 3px 9px; display: inline-block; font-weight: 600; }
.pi-auto { border-radius: 12px; background: var(--surface-2); }
.pp-empty { padding: 44px 16px; }
.pp-foot { padding: 18px 20px 20px; gap: 11px; background: var(--surface-2); border-top: 2px dashed var(--border-strong); }
.pp-total.pp-total-sec { font-size: 13px; }
.pp-total:not(.pp-total-sec) { background: #2b1d17; color: #f6eee2; border-radius: 18px; padding: 14px 20px; margin: 4px 0; align-items: center; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 700; }
.pp-total:not(.pp-total-sec) b { font-family: var(--font-num); font-size: 46px; font-weight: 700; color: #f2c46d; letter-spacing: 0; line-height: 1; }
.pp-foot .btn { min-height: 54px; }
.pp-print, #cobrar { font-size: 17px; min-height: 60px; }
.pp-cancelar { box-shadow: none; }

/* comandas ya enviadas de esa mesa: mini tickets */
.cz-head { font-family: var(--font-num); font-size: 21px; letter-spacing: .06em; text-transform: uppercase; margin-top: 26px; }
.cz-head span { font-family: var(--font); letter-spacing: 0; background: var(--accent-solid); color: #fff; }
.comanda-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.comanda-card { border: 0; border-top: 6px solid var(--text-soft); border-radius: 6px 6px 16px 16px; box-shadow: var(--shadow-md); }
.comanda-card.est-pendiente { border-top-color: var(--warn); } .comanda-card.est-salio { border-top-color: var(--info); } .comanda-card.est-servido { border-top-color: var(--ok); }
.cc-head { background: var(--surface-2); padding: 11px 14px; font-size: 13px; }
.comanda-card .cc-head { flex-wrap: wrap; }   /* la hora «SACAR» + ajustar no se sale de la tarjeta en pantallas angostas */
.cc-num { font-family: var(--font-num); font-size: 21px; letter-spacing: .04em; }
.cc-items { padding: 12px 14px; font-size: 14px; }
.pedido-consulta > .hint { margin: 0 0 14px; }
.consulta-comanda { border-top: 4px solid var(--accent-solid); }
.consulta-comanda .cc-head { flex-wrap: wrap; }
.consulta-comanda .cc-estado { margin-left: auto; }
.hist { border-radius: 18px; border-width: 1.5px; }
.quick-chip { padding: 10px 16px; }
.pay-row { grid-template-columns: 1fr 140px auto; }
.cuenta-editar-list { display: grid; gap: 8px; max-height: min(58vh, 560px); overflow: auto; }
.ce-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ce-row small { display: block; color: var(--text-muted); margin-top: 3px; }
.ce-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--hdr); color: var(--hdr-ink); }
.cobro-total { background: #2b1d17; color: #f6eee2; border-radius: 18px; padding: 16px 20px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
.cobro-total b { font-family: var(--font-num); font-size: 44px; color: #f2c46d; letter-spacing: 0; }

/* barra fija de acciones (celular / tablet) */
@media (max-width: 1100px) {
  .pedido-sticky { background: #2b1d17; color: #f6eee2; border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .3); }
  .pedido-sticky .stk-total small { color: rgba(246, 238, 226, .7); letter-spacing: .1em; }
  .pedido-sticky .stk-total b { font-family: var(--font-num); font-size: 32px; color: #f2c46d; letter-spacing: 0; }
}

/* personas que comen carne (aparece solo si el pedido tiene un producto de carne) */
.carne-step { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent-solid); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.carne-step.falta { border-left-color: var(--warn); background: var(--warn-soft); }
.carne-step .cs-txt { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.carne-step .cs-txt b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.carne-step .cs-txt span { font-size: 13px; color: var(--text-muted); line-height: 1.3; }
.carne-step.falta .cs-txt span { color: var(--text); font-weight: 600; }

/* ---------- bebidas: circuito propio (migración 64) ---------- */
.pp-bebidas-head { margin-top: 10px; padding: 8px 12px; font-family: var(--font-num); letter-spacing: .08em; text-transform: uppercase; font-size: 15px; background: color-mix(in srgb, #2a7fa8 16%, var(--surface-2)); border-left: 5px solid #2a7fa8; border-radius: 6px; }
.pi-bebida .pi-tag { background: #2a7fa8; color: #fff; }
.comanda-card.tipo-bebida { border-top-color: #2a7fa8; }
.comanda-card.est-preparando { border-top-color: #e07a2e; }
.comanda-card.est-entregada { border-top-color: var(--ok); }
.cc-menu-btn { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; padding: 2px 8px; cursor: pointer; color: var(--text-muted); }
.cc-actions .btn-bad { color: #b3261e; }
.comanda-card .cc-actions { flex-wrap: wrap; }   /* en 320 px los botones pasan a otra línea en vez de salirse de la tarjeta */

/* ---------- Parrilla libre: consumo del grupo (migración 81) ---------- */
.pl-wrap { display: grid; gap: 12px; }
.pl-head { font-size: 15px; }
.pl-list { display: grid; gap: 8px; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pl-row.cambio { border-color: var(--accent-solid); }
.pl-name { display: grid; gap: 2px; min-width: 0; }
.pl-sub { font-size: 12px; color: var(--text-muted); }
.pl-step { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pl-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-btn:disabled { opacity: .35; cursor: not-allowed; }
.pl-delta { min-width: 38px; text-align: center; font-weight: 700; font-size: 18px; }
.pl-delta.mas { color: var(--ok); }
.pl-delta.menos { color: var(--warn); }
.pl-hist { font-size: 13px; }
.pl-hist summary { cursor: pointer; color: var(--text-muted); padding: 4px 0; }
.pl-h { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.pl-h.menos { color: var(--warn); }
.pl-h em { color: var(--text-muted); font-style: normal; margin-left: 6px; }
.pl-h-q { color: var(--text-muted); white-space: nowrap; }

/* ---------- hora de salida (SACAR) de la comanda y su ajuste manual (migración 84) ---------- */
.cc-sacar { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.cc-sacar b { font-size: 14px; }
.cc-sacar.manual { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--text); }
.cc-sacar-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.cc-sacar-btn:hover { background: var(--accent-soft); color: var(--accent); }
.cc-sacar-btn .ico { width: 15px; height: 15px; }
.sacar-rapido { display: flex; flex-wrap: wrap; gap: 8px; }
.sacar-rapido .btn { min-height: 46px; flex: 1 1 90px; }
.sacar-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.cuenta-quitar-opciones { display: grid; gap: 12px; min-width: min(420px, 80vw); }
.cuenta-quitar-opciones > p { margin: 0; }
.cuenta-quitar-opciones > .btn { min-height: 48px; white-space: normal; }
.pedido-stock-alerta { margin: 0; padding: 8px 4px; text-align: center; font-size: 17px; line-height: 1.45; }
@media (max-width: 520px) { .pedido-stock-alerta { font-size: 16px; } }

/* ---------- personalización de pedidos: verduras de sándwiches y ensalada, salsa de pastas ---------- */
.pi-obs { white-space: pre-line; }
.pz { display: grid; gap: 16px; }
.pz-sec { display: grid; gap: 8px; }
.pz-sec[hidden] { display: none; }
.pz-sec h4 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pz-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 18px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.pz-chip span { font-size: 20px; line-height: 1; }
.pz-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pz-chip.on::after { content: "✓"; font-weight: 900; }
.pz-chip-solo { border-style: dashed; }
.pz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.pz-opt.on { border: 2px solid var(--accent); background: var(--accent-soft); }
.pz-opt.on b::after { content: " ✓"; color: var(--accent); }
.pz-ayuda { margin: 0; font-size: 13px; color: var(--text-muted); }
.pz-resumen { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 700; font-size: 14px; }


/* Vinos: tarjeta con botella y copa */
.p-price-vino { display: inline-block; line-height: 1.35; text-align: left; white-space: normal; }

/* Producto especial (fuera del menú) */
.pi-tag-otros { background: #6b4e9b; color: #fff; }
.pe { display: grid; gap: 12px; }
.pe .field input, .pe .field textarea { min-height: 48px; font-size: 16px; }
.pe-precio { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pe-precio input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 700; color: inherit; }
.pe-precio input:focus { outline: none; }
.pe-precio:focus-within { border-color: var(--primary, currentColor); }
.pe-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.pe-fila > span { font-weight: 600; }
.pe .pi-qty button { width: 52px; height: 52px; }
.pe .pi-qty .n { min-width: 44px; font-size: 20px; text-align: center; }
.pe-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: var(--hdr); color: var(--hdr-ink); font-size: 18px; }
.pe .hint { margin: 0; min-height: 1.2em; }

/* Hay / No hay: producto no disponible (visible, bloqueado) */
.prod.no-disp { opacity: .55; cursor: not-allowed; }
.prod.no-disp > b { text-decoration: line-through; text-decoration-thickness: 1px; }
.p-nodisp { display: block; margin-top: 4px; font-style: normal; font-weight: 800; letter-spacing: .04em; font-size: 12px; color: #b3261e; }
.pi-qty button[disabled] { opacity: .35; cursor: not-allowed; }

/* Verduras: HAY / NO HAY (una verdura en NO HAY no se puede elegir) */
.pz-chip-txt { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; font-weight: 800; line-height: 1.1; }
.pz-chip-txt small { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted, #6b7280); }
.pz-chip.on .pz-chip-txt small { color: inherit; }
.pz-chip.pz-chip-nohay, .pz-chip[disabled] { opacity: .55; cursor: not-allowed; border-style: dashed; background: var(--bg-subtle, #f3f4f6); }
.pz-chip.pz-chip-nohay .pz-chip-txt { text-decoration: line-through; text-decoration-thickness: 1px; }
.pz-chip.pz-chip-nohay .pz-chip-txt small { color: #b3261e; text-decoration: none; display: inline-block; }
.pz-sin-verduras { color: #b3261e; font-weight: 700; }

/* ---- BEBIDAS de la mesa: pendientes de entrega / entregadas (sin comanda impresa) ---- */
.bz { margin: 14px 0; }
.bz-sub { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.bz-card { border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface, #fff); }
.bz-card.pend { border-left: 5px solid #e0a800; }
.bz-card.ent { border-left: 5px solid #2e8b57; opacity: .92; }
.bz-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.bz-line.anulado .bz-q { text-decoration: line-through; opacity: .6; }
.bz-q { font-size: 16px; overflow-wrap: anywhere; }
.bz-ctl { display: inline-flex; gap: 6px; flex: none; }
.bz-ctl button { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line, #d1d5db); background: transparent; color: inherit; }
.bz-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.bz-ok { flex: 1; min-height: 44px; font-weight: 700; }
.bz-badge { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: #2e8b57; }

/* Etapa 9: menú en ocho grupos (js/menu-grupos.js) */
.prod-grid .prod-seccion { grid-column: 1 / -1; margin: 10px 2px 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.prod-grid .prod-seccion:first-child { margin-top: 0; }
.cat-flecha { margin-left: 4px; font-size: .85em; }
.prod-copa { border-style: dashed; }

/* Etapa 12: bebidas con imagen de marca (solo visual; ver MenuGrupos.fondoBebida). La imagen ocupa la parte de arriba y el nombre y el precio van en una franja
   oscura SOLIDA debajo: así la marca se ve completa y el texto se lee siempre, con imágenes claras u oscuras. */
.prod.prod-img { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; background: #fff; min-height: 156px; border: 1px solid rgba(0, 0, 0, .18); }
.prod.prod-img::before { content: ""; display: block; position: static; flex: 1 1 auto; width: 100%; min-height: 86px; height: auto; background-color: #fff; background-image: var(--fondo); background-position: center; background-size: cover; background-repeat: no-repeat; }
.prod.prod-img.prod-foto::before { background-size: contain; }
/* Fernet: el vaso ocupa casi toda la altura de la foto; se ancla arriba para no cortar la espuma en botones bajos (sin deformar ni recortar el archivo) */
.prod.prod-img.foto-arriba::before { background-position: center 6%; }
.prod.prod-img b { display: block; margin: 0; padding: 8px 8px 0 10px; background: #201512; color: #fff; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
@media (max-width: 400px) { .prod.prod-img b { font-size: 12.5px; padding: 8px 6px 0 8px; } }
.prod.prod-img .p-price { align-self: stretch; margin-top: 0; padding: 2px 10px 8px; border-radius: 0; background: #201512; color: #ffd98a; font-size: 22px; }
.prod.prod-img .p-nodisp { color: #ffb4ab; }
.prod.prod-img.no-disp { opacity: .6; filter: grayscale(.85); }
.prod.prod-img:focus-visible { outline: 3px solid var(--accent-solid); outline-offset: 2px; }

/* Etapa 12 · fotos en los botones internos: verduras (ensalada y sándwiches) y salsas. Foto arriba, nombre y estado en franja oscura sólida; seleccionado = franja bordó + tilde. */
.pz-chips:has(.pz-chip-foto) { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pz-chips:has(.pz-chip-foto) .pz-chip-solo { grid-column: 1 / -1; justify-content: center; }
.pz-chip.pz-chip-foto { position: relative; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; overflow: hidden; border-radius: 14px; background: #201512; color: #fff; border: 2px solid var(--border-strong, #d8cdbd); }
.pz-chip.pz-chip-foto::before { content: ""; display: block; width: 100%; aspect-ratio: 3 / 2; background-color: #fff; background-image: var(--foto); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pz-chip.pz-chip-foto > span { display: none; }
.pz-chip.pz-chip-foto .pz-chip-txt { width: 100%; box-sizing: border-box; padding: 6px 10px 8px; background: #201512; color: #fff; font-size: 15px; }
.pz-chip.pz-chip-foto .pz-chip-txt small { color: #ffd98a; }
.pz-chip.pz-chip-foto.on { background: #201512; color: #fff; border-color: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 45%, transparent); }
.pz-chip.pz-chip-foto.on .pz-chip-txt { background: var(--accent-solid); }
.pz-chip.pz-chip-foto.on .pz-chip-txt small { color: #fff; }
.pz-chip.pz-chip-foto.on::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-solid); color: #fff; font-weight: 900; border: 2px solid #fff; }
.pz-chip.pz-chip-foto.pz-chip-nohay, .pz-chip.pz-chip-foto[disabled] { opacity: .65; filter: grayscale(.85); border-style: dashed; background: #201512; }
.pz-chip.pz-chip-foto.pz-chip-nohay .pz-chip-txt small { color: #ffb4ab; }
.pedido-opcion-directa.pedido-opcion-foto { display: flex; flex-direction: column; align-items: stretch; justify-items: initial; gap: 0; padding: 0; overflow: hidden; background: #201512; color: #fff; border-color: var(--border-strong, #d8cdbd); }
.pedido-opcion-foto::before { content: ""; display: block; width: 100%; aspect-ratio: 3 / 2; background-color: #fff; background-image: var(--foto); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pedido-opcion-foto b { display: block; padding: 8px 12px 0; color: #fff; }
.pedido-opcion-foto span { display: block; padding: 0 12px 10px; color: #ffd98a; }
.pedido-opcion-directa.pedido-opcion-foto:hover:not(:disabled) { background: #201512; border-color: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 45%, transparent); }
.pedido-opcion-directa.pedido-opcion-foto:disabled { opacity: .65; filter: grayscale(.85); }
.pz-chip.pz-chip-foto:focus-visible, .pedido-opcion-foto:focus-visible { outline: 3px solid var(--accent-solid); outline-offset: 2px; }
.pedido-opciones-directas:has(.pedido-opcion-foto) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pedido-opciones-directas:has(.pedido-opcion-foto) > .pedido-opcion-directa:not(.pedido-opcion-foto) { grid-column: 1 / -1; }
.pedido-opcion-foto b { font-size: 15px; overflow-wrap: anywhere; }

/* Etapa 15 · botón Panera: «Panera adicional» arriba y el precio completo en UNA línea (se reduce si el importe crece; no cambia el tamaño del botón). */
.prod-otro .p-sub { display: block; font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; opacity: .9; }
.prod-otro .p-monto { display: block; white-space: nowrap; font-size: clamp(16px, 7vw, 22px); line-height: 1.15; }

/* Etapa 17 · selector de guarniciones del sándwich: mismas tarjetas con foto que salsas y verduras; el elegido se destaca con borde bordó y tilde. */
.pz-opt.pedido-opcion-foto { background: #201512; color: #fff; border: 2px solid var(--border-strong, #d8cdbd); }
.pz-opt.pedido-opcion-foto.on { background: #201512; border-color: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 45%, transparent); }
.pz-opt.pedido-opcion-foto.on b { background: var(--accent-solid); margin-top: 8px; }
.pz-opt.pedido-opcion-foto.on b::after { color: #fff; }
.pz-opt.pedido-opcion-foto b { padding-bottom: 6px; }
.pz-opts:has(.pedido-opcion-foto) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-opts:has(.pedido-opcion-foto) > .pz-opt:not(.pedido-opcion-foto) { grid-column: 1 / -1; }

/* Etapa 18 · «AGREGAR A PARRILLA LIBRE» arriba: la tarjeta va justo bajo el encabezado de la mesa y queda pegada al borde superior mientras se recorre el pedido
   (solo existe en mesas con Parrilla libre). En celulares se muestra compacta: el botón siempre a mano, sin tapar productos. */
.pl-zona:empty { display: none; }
.pl-zona { position: sticky; top: var(--pl-top, 0px); z-index: 6; margin-bottom: 8px; }
/* Botón único «PARRILLA LIBRE 👤 n»: marrón crema (la identidad de Parrilla libre); con el menú sin costo abierto queda marrón oscuro y muestra «Salir». */
.pl-boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 6px 20px; border-radius: 14px; border: 2px solid #8a6a43; background: #eadcc8; color: #2b1d12; font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .07em; cursor: pointer; touch-action: manipulation; box-shadow: 0 3px 0 #8a6a43, 0 8px 16px rgba(48, 32, 20, .14); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease); }
.pl-boton:hover:not(:disabled) { transform: translateY(-1px); background: #f1e5d3; box-shadow: 0 4px 0 #8a6a43, 0 10px 18px rgba(48, 32, 20, .18); }
.pl-boton:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a43; }
.pl-boton:focus-visible { outline: 3px solid #2b1d12; outline-offset: 3px; }
.pl-boton:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.pl-boton-n { display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 2px 9px; border-radius: 999px; background: #2b1d12; color: #f6eee2; }
.pl-boton-n svg { width: 17px; height: 17px; flex: none; }
.pl-boton-n b { font-family: var(--font-num); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: 0; }
.pl-boton-salir { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; letter-spacing: .03em; opacity: .9; }
.pl-boton-salir svg { width: 15px; height: 15px; }
.pl-boton.on { background: #8a6a43; color: #fff6e8; border-color: #5c4326; box-shadow: 0 3px 0 #5c4326, 0 8px 16px rgba(48, 32, 20, .22); }
.pl-boton.on:hover:not(:disabled) { background: #7d5f3b; }
.pl-boton.on .pl-boton-n { background: #eadcc8; color: #2b1d12; }
.pl-boton.on:focus-visible { outline-color: #2b1d12; }
@media (max-width: 700px) {
  .pl-zona { --pl-top: 56px; }
  .pl-boton { width: 100%; min-height: 46px; font-size: 14.5px; gap: 10px; }
}

/* Etapa 20 · encabezado del pedido con nombre temporal de la mesa: nombre y, debajo, «Mesa N». */
.pedido-head h2 .mesa-titulo-num { display: block; margin-top: 3px; font-family: var(--font-ui, inherit); font-size: 14px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.pedido-head h2 { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 700px) { .pedido-head h2:has(.mesa-titulo-num) { font-size: 26px; } }

/* ---- Modo PARRILLA LIBRE (INGRESAR PRODUCTOS SIN COSTO): el MISMO menú, solo cambia el color a marrón crema claro y el aviso. Al salir se quita la clase .modo-pl. ---- */
.pl-sin-costo { display: flex; align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 6px; padding: 5px 12px; border-radius: 12px; border: 2px solid #8a6a43; background: #eadcc8; color: #2b1d12; text-align: center; }
.pl-sin-costo b { font-size: 14px; letter-spacing: .06em; }
.pl-sin-costo span { font-size: 12px; font-weight: 600; }
.modo-pl .prod { --tile: #8a6a43; background: #eadcc8; color: #2b1d12; border: 1px solid #b89a73; box-shadow: 0 5px 0 #b89a73, 0 12px 20px rgba(48, 32, 20, .1); }
.modo-pl .prod:nth-child(n) { --tile: #8a6a43; }
.modo-pl .prod b { color: #2b1d12; }
.modo-pl .prod .p-price { background: #d9c3a3; color: #2b1d12; }
.modo-pl .prod.prod-img { background: #eadcc8; border: 1px solid #b89a73; }
.modo-pl .prod.prod-img::before { background-color: #eadcc8; background-image: linear-gradient(rgba(234, 220, 200, .62), rgba(234, 220, 200, .62)), var(--fondo); }
.modo-pl .prod.prod-img b { background: #eadcc8; color: #2b1d12; }
.modo-pl .prod.prod-img .p-price { background: #eadcc8; color: #5a3b17; font-weight: 800; }
.modo-pl .prod.prod-img .p-nodisp, .modo-pl .prod .p-nodisp { color: #9a2a1d; }
.modo-pl .prod.no-disp { opacity: .55; }
.modo-pl .prod.prod-img.no-disp { filter: grayscale(.85); }
.modo-pl .prod:disabled { cursor: not-allowed; }
.modo-pl .prod:focus-visible { outline: 3px solid #8a6a43; outline-offset: 2px; }
/* Categoría seleccionada en Parrilla libre: mismo marrón crema que los productos (no rojo); se distingue por un borde y una base marrón más oscuros. Solo dentro de .modo-pl. */
.modo-pl .cat-tab.on { background: #eadcc8; border: 2px solid #8a6a43; color: #2b1d12; box-shadow: 0 3px 0 #8a6a43, 0 8px 16px rgba(48, 32, 20, .14); }
.modo-pl .cat-tab:focus-visible { outline: 3px solid #8a6a43; outline-offset: 2px; }
.modo-pl .cat-tab:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Ajuste de la grilla de productos (Mesas, Parrilla libre y Venta al paso): MenuGrupos.ajustarGrilla fija --cols (columnas), --fila (alto) y data-tam (s/m/l) para que todos los
   productos entren en el espacio libre sin botones ilegibles. Solo presentación: sin esas variables (sin JS) la grilla queda como antes. ---- */
#view[data-route] .prod-grid.prod-grid-fit { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--sep, 12px); align-content: start; }
#view[data-route] .prod-grid.prod-grid-fit > .prod { height: var(--fila); min-height: 0; }
#view[data-route] .prod-grid.prod-grid-fit > .prod-seccion { margin: 6px 2px 0; }
.prod-grid.prod-grid-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 0 12px; margin-top: -4px; }
.prod-grid-fit .prod .p-price { overflow-wrap: anywhere; line-height: 1.1; }
.prod-grid-fit[data-tam="s"] > .prod { padding: 15px 9px 7px; border-radius: 16px; box-shadow: 0 4px 0 var(--border-strong), 0 8px 14px rgba(48, 32, 20, .1); }
.prod-grid-fit[data-tam="s"] > .prod:not(.prod-img)::before { height: 5px; }
.prod-grid-fit[data-tam="s"] .prod b { font-size: 13.5px; line-height: 1.18; }
.prod-grid-fit[data-tam="s"] .prod .p-price { font-size: 17px; padding: 0 8px; }
.prod-grid-fit[data-tam="m"] > .prod { padding: 19px 12px 9px; border-radius: 18px; }
.prod-grid-fit[data-tam="m"] .prod b { font-size: 15px; }
.prod-grid-fit[data-tam="m"] .prod .p-price { font-size: 20px; }
/* con foto: la imagen ocupa lo que sobra sobre el nombre y el precio */
#view[data-route] .prod-grid-fit > .prod.prod-img { padding: 0; }
.prod-grid-fit > .prod.prod-img::before { min-height: 0; }
.prod-grid-fit[data-tam="s"] > .prod.prod-img b { padding: 5px 6px 0 7px; font-size: 12.5px; }
.prod-grid-fit[data-tam="s"] > .prod.prod-img .p-price { padding: 1px 7px 5px; font-size: 16px; }
.prod-grid-fit[data-tam="m"] > .prod.prod-img b { padding: 6px 8px 0 9px; font-size: 14px; }
.prod-grid-fit[data-tam="m"] > .prod.prod-img .p-price { padding: 1px 9px 6px; font-size: 19px; }
.ce-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* NO HAY (Etapa 2 · Productos): el producto sigue visible y con su diseño normal, con una marca roja bien visible; no se puede agregar (el botón está bloqueado). Sin gris ni transparencia. */
#view .prod.no-disp, #view .prod.prod-img.no-disp, .modo-pl .prod.no-disp, .modo-pl .prod.prod-img.no-disp { opacity: 1; filter: none; position: relative; cursor: not-allowed; }
#view .prod.no-disp > b { text-decoration: none; }
#view .prod.no-disp .p-nodisp, .modo-pl .prod.no-disp .p-nodisp { position: absolute; top: 6px; right: 6px; z-index: 3; margin: 0; padding: 4px 10px; border-radius: 999px; background: #c62828; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: 13px; font-weight: 900; letter-spacing: .05em; line-height: 1.1; pointer-events: none; }

/* Postres pendientes (en la cuenta, sin preparar hasta «Enviar postres») */
.pp-postres { display: grid; gap: 6px; padding: 10px 12px; border: 2px dashed var(--warn, #c9821a); border-radius: 14px; background: color-mix(in srgb, var(--warn, #c9821a) 10%, var(--surface)); }
.pp-postres-tit { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.pp-postres-tit svg { width: 18px; height: 18px; }
.pp-postres-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 15px; }
.pp-postres-lista small { color: var(--text-muted); }
.pp-postres .btn { min-height: 52px; font-size: 16px; }

/* Advertencia al cobrar con postres pendientes */
.cobro-postres ul { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 2px; font-size: 16px; }

/* Venta al paso: recibido · vuelto · propina */
.paso-exc { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--accent-solid); border-radius: 14px; background: var(--accent-soft); }
.paso-exc[hidden], .paso-res[hidden], .paso-exc label[hidden] { display: none; }
.paso-exc-tit { font-weight: 800; font-size: 15px; }
.paso-exc-bot { display: flex; gap: 8px; flex-wrap: wrap; }
.paso-exc-bot .btn { flex: 1 1 140px; min-height: 46px; }
.paso-exc label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; color: var(--text-muted); }
.paso-exc input, .paso-exc select { min-height: 48px; font-size: 18px; }
.paso-res { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.paso-res > div { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.paso-res > div:last-of-type { border-top: 1px solid var(--border); padding-top: 4px; font-size: 17px; }
.paso-res.bad { border-color: var(--danger, #c62828); }
.paso-res .err { color: var(--danger, #c62828); margin: 4px 0 0; font-weight: 700; }

/* ===== PEDIDO · «Pedido y cuenta» desplegable en celular (en computadora todo queda como siempre) ===== */
.cuenta-toggle { display: none; }
.pr-inner { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 640px) {
  .pedido-head .cuenta-toggle { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .16); color: var(--hdr-ink); font: inherit; font-weight: 800; cursor: pointer; text-align: left; }
  .cuenta-toggle .ct-t { font-size: 15px; flex: none; }
  .cuenta-toggle .ct-r { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; opacity: .85; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cuenta-toggle .ct-flecha { flex: none; width: 20px; height: 20px; transition: transform .28s ease; }
  .cuenta-abierta .cuenta-toggle .ct-flecha { transform: rotate(180deg); }
  .pedido-layout { gap: 0; }
  .pedido-right { position: static; display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; visibility: hidden; transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease, visibility 0s linear .3s; }
  .pedido-right > .pr-inner { min-height: 0; overflow: hidden; }
  .cuenta-abierta .pedido-right { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-bottom: 14px; order: -1; transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .pedido-right, .cuenta-toggle .ct-flecha { transition: none !important; } }

/* ===== COMANDAS · entrega por producto: indicador ROJO (pendiente) / VERDE (entregado), entrega parcial y «Eliminar plato» desde el ⋮ ===== */
.ci-ent { flex: none; position: relative; display: inline-grid; place-items: center; grid-auto-flow: column; gap: 2px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; border: 2px solid var(--danger-solid, #c0262d); background: var(--danger-soft, #fbe3df); color: var(--danger-solid, #c0262d); cursor: pointer; touch-action: manipulation; }
.ci-ent .ico { width: 18px; height: 18px; stroke-width: 3; }
.ci-ent small { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ci-ent.parcial { border-style: dashed; }
.ci-ent.ok { border-color: var(--ok-solid, #1f7a4a); background: var(--ok-solid, #1f7a4a); color: #fff; }
.ci-ent:disabled { opacity: .6; cursor: wait; }
.ci-ent:focus-visible { outline: 3px solid var(--accent-solid); outline-offset: 2px; }
.cc-entrega { padding: 3px 9px; border-radius: 999px; background: var(--danger-soft, #fbe3df); color: var(--danger-solid, #c0262d); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.cc-entrega.ok { background: var(--ok-soft, #dff2e5); color: var(--ok, #197a41); }
.cmd-item .ci-ent { margin-left: auto; }
.ent-step { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; }
.ent-step button { width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 26px; font-weight: 800; cursor: pointer; }
.ent-step button:disabled { opacity: .4; }
.ent-step output { min-width: 110px; text-align: center; font-size: 18px; color: var(--text-muted); }
.ent-step output b { font-size: 34px; color: var(--text); font-variant-numeric: tabular-nums; }
.ent-rapido { display: flex; justify-content: center; gap: 8px; }
.elim-platos { display: grid; gap: 8px; }
.elim-plato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.elim-plato:hover { border-color: var(--danger-solid, #c0262d); background: var(--danger-soft, #fbe3df); }
.elim-plato .ep-q { font-weight: 800; font-variant-numeric: tabular-nums; }
.elim-plato .ep-n { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.elim-plato .ep-n small { display: block; font-weight: 500; color: var(--text-muted); }
.elim-plato .ep-p { font-variant-numeric: tabular-nums; color: var(--text-soft, var(--text-muted)); }

/* ===== MESA (celular) · contenido de «Pedido y cuenta» rediseñado: productos separados, cantidades y precios destacados, totales claros y acciones agrupadas (tanda 20).
   Solo presentación del mismo contenido y de los mismos botones; en computadora todo queda como antes. ===== */
@media (max-width: 640px) {
  .pedido-right > .pr-inner { transform: translateY(-10px); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .cuenta-abierta .pedido-right > .pr-inner { transform: none; }
  .pedido-right .pedido-panel { border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .08)); }
  .pedido-right .pp-head { padding: 12px 16px; background: var(--surface-2); font-size: 15px; letter-spacing: .01em; }
  .pedido-right .pp-items { display: grid; gap: 10px; padding: 12px; max-height: none; overflow: visible; align-content: start; }
  .pedido-right .pp-empty { padding: 22px 12px; }
  /* cada producto es una tarjeta: nombre + precio arriba, cantidad y quitar abajo */
  .pedido-right .pi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "qty del"; gap: 8px 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(30, 20, 10, .05); }
  .pedido-right .pi:last-child { border-bottom: 1px solid var(--border); }
  .pedido-right .pi-right { display: contents; }
  .pedido-right .pi-main { grid-area: main; display: grid; gap: 4px; }
  .pedido-right .pi-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
  .pedido-right .pi-obs { margin: 0; padding: 5px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
  .pedido-right .pi-obs-btn { justify-self: start; min-height: 32px; padding: 4px 2px; }
  .pedido-right .pi-price { grid-area: price; align-self: start; min-width: 0; font-size: 17px; font-weight: 800; }
  .pedido-right .pi-qty { grid-area: qty; justify-self: start; gap: 4px; padding: 3px; border-radius: 14px; background: var(--surface-2); }
  .pedido-right .pi-qty button { width: 44px; height: 44px; border-radius: 11px; background: var(--surface); box-shadow: 0 1px 2px rgba(30, 20, 10, .1); }
  .pedido-right .pi-qty button:disabled { opacity: .4; box-shadow: none; }
  .pedido-right .pi-qty .n { min-width: 40px; font-size: 20px; font-weight: 800; }
  .pedido-right .pi-del { grid-area: del; grid-column: 2; justify-self: end; align-self: center; width: 44px; height: 44px; border-radius: 12px; background: var(--danger-soft, #fbe3df); color: var(--danger, #c0262d); }
  .pedido-right .pi-del .ico { width: 20px; height: 20px; }
  .pedido-right .pi-auto { grid-template-areas: "main price"; grid-template-columns: minmax(0, 1fr) auto; margin: 0; border-style: dashed; background: var(--surface-2); }
  .pedido-right .pi-auto .pi-price { grid-area: price; }
  /* totales y acciones: dos columnas, agrupadas por orden lógico (cuenta → impresión → cobrar → cancelar) */
  .pedido-right .pp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .pedido-right .pp-foot > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  .pedido-right .pp-total { padding: 2px 4px; }
  .pedido-right .pp-total-sec { font-size: 13px; }
  .pedido-right #resumen-pedido { margin-top: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border-strong, var(--border)); }
  .pedido-right #resumen-pedido b { font-size: 28px; }
  .pedido-right .pp-foot .btn { min-height: 48px; padding: 10px 10px; font-size: 14.5px; line-height: 1.2; white-space: normal; }
  .pedido-right #descuento, .pedido-right #editar-cuenta { grid-column: span 1; order: 1; }
  .pedido-right .pp-postres { order: 2; }
  .pedido-right #imprimir, .pedido-right #imprimir-cuenta { grid-column: span 1; order: 3; font-size: 14.5px; padding: 10px; }
  .pedido-right #cobrar { order: 4; min-height: 56px; font-size: 17px; font-weight: 800; margin-top: 4px; }
  .pedido-right #cancelar-mesa { order: 5; min-height: 44px; margin-top: 2px; }
  .pedido-right #sincronizar { order: 0; }
  .pedido-right .hint { order: 0; }
}

/* ===== Bebidas · toques recibidos que todavía esperan al servidor (tanda 23): se ve al instante que el toque fue recibido ===== */
.prod[data-pend]::after { content: "+" attr(data-pend); position: absolute; top: 12px; right: 10px; min-width: 28px; padding: 1px 8px; border-radius: 999px; background: var(--accent-solid); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; pointer-events: none; }

/* ===== Zona de toque ampliada (tanda 24, auditoría final): el ⋮ de cada comanda medía 23×26 px. Se agranda SOLO el área que responde al toque (invisible); el botón no cambia de aspecto ni de lugar ===== */
.cc-menu-btn { position: relative; }
.cc-menu-btn::after { content: ""; position: absolute; inset: -4px; }
.cc-menu-btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0; }   /* v258 (A-03): botón ⋮ de al menos 40 × 40 px */

/* ===== PEDIDO · cabecera compacta en celular (en computadora los controles nuevos no existen: todo queda como siempre) ===== */
.ph-movil { display: none; }
.pm-caja { display: grid; gap: 10px; justify-items: center; padding: 6px 0 2px; }
.pm-box { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pm-btn { width: 64px; height: 64px; border-radius: 20px; border: 2px solid var(--border-strong); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.pm-btn:hover:not(:disabled) { border-color: var(--accent-solid); color: var(--accent); }
.pm-btn:disabled { opacity: .35; cursor: default; }
.pm-btn .ico { width: 26px; height: 26px; }
.pm-val { min-width: 84px; text-align: center; font-family: var(--font-num); font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-hint { margin: 0; text-align: center; }
@media (max-width: 640px) {
  .pedido-head { padding: 6px 8px; gap: 6px; margin-bottom: 6px; border-radius: 16px; flex-wrap: wrap; }
  .pedido-head .icon-btn { width: 40px; height: 40px; flex: none; }
  .pedido-head h2 { flex: 1; min-width: 0; font-size: 24px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pedido-head h2 .mesa-titulo-num { display: inline; margin: 0 0 0 8px; font-size: 12px; }
  .pedido-head #estado-badge.ph-abierta, .pedido-head #mozo-badge, .pedido-head #nombre-btn, .pedido-head .ph-spacer, .pedido-head #personas { display: none !important; }
  .pedido-head .ph-movil { display: inline-flex; }
  .pedido-head .ph-personas { align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .22); color: var(--hdr-ink); font: inherit; font-family: var(--font-num); font-size: 20px; cursor: pointer; touch-action: manipulation; }
  .pedido-head .ph-personas .ico { width: 16px; height: 16px; color: var(--hdr-mute); }
  .pedido-head .ph-mas { position: relative; }
  .pedido-head .ph-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
  .pedido-head .ph-menu[hidden] { display: none; }
  .pedido-head .ph-menu button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
  .pedido-head .ph-menu button:hover { background: var(--surface-2); }
  .pedido-head .ph-menu button span { display: grid; min-width: 0; }
  .pedido-head .ph-menu button small { font-weight: 500; font-size: .78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pedido-head .cuenta-toggle { order: 10; min-height: 38px; padding: 4px 10px; border-radius: 12px; }
  .pedido-head .cuenta-toggle .ct-t { font-size: 14px; }
  .cat-tabs { gap: 5px; padding: 0 0 5px; margin-bottom: 0; }
  .cat-tab { min-height: 40px; }
  .cat-subtabs { margin-top: 0; }
}

/* v259 · ¿A quién le corresponde la propina? (cobro de mesas, corrección de venta y Mesas cerradas). Botones grandes, ninguno marcado de antemano. */
.prop-dest-box { margin-top: 10px; }
.prop-dest-box[hidden], .prop-dest-aviso[hidden] { display: none; }
.prop-dest { border: 2px solid var(--accent-solid); border-radius: 14px; background: var(--surface); padding: 10px 12px 12px; margin: 0; min-width: 0; }
.prop-dest legend { font-weight: 800; font-size: 15px; padding: 0 6px; }
.prop-dest-ayuda { margin: 0 0 8px; }
.prop-dest-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.prop-dest-op { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 12px; text-align: left; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.prop-dest-op .pd-nombre { font-weight: 800; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.prop-dest-op .pd-rol { color: var(--text-muted); font-size: 12px; }
.prop-dest-op:hover { border-color: var(--accent-solid); }
.prop-dest-op.on { border-color: var(--accent-solid); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-solid); }
.prop-dest-op.on .pd-nombre::before { content: "✓ "; color: var(--accent-solid); }
.prop-dest-aviso { margin: 8px 0 0; color: var(--danger); font-weight: 700; font-size: 14px; }
.prop-dest-auto { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--ok-solid); border-radius: 12px; background: var(--ok-soft); font-size: 15px; }
.prop-dest-auto svg { flex: none; width: 20px; height: 20px; }
.cv-prop-dest { margin-top: 10px; }
.mh-prop-hist { margin: 6px 0 0; font-size: 13px; }
.mh-prop-hist ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }