/* Sabora · pantallas del POS recreadas en HTML (datos de ejemplo de una soda ficticia).
   Basadas en las pantallas reales: plano del salón, toma de pedido, cocina por estación, receta e inventario, cierre de caja. */
.px{container-type:inline-size;font-family:var(--sab-fuente-texto);color:var(--sab-verde-noche);background:var(--sab-hueso);
  height:100%;width:100%;overflow:hidden;line-height:1.3;text-align:left}
.px *{box-sizing:border-box}
.px{font-size:clamp(13.5px,2.3cqw,15.5px)}
.px-barra{display:flex;align-items:center;justify-content:space-between;gap:.6em;background:var(--sab-verde-noche);color:var(--sab-hueso);padding:.55em .9em}
.px-barra b{font-family:var(--sab-fuente-titulos);font-weight:700;font-size:1.05em}
.px-barra .px-chip{background:rgba(196,238,74,.18);color:var(--sab-lima);border-radius:999px;padding:.15em .7em;font-weight:600;font-size:.9em;white-space:nowrap}
.px-cuerpo{padding:.8em}
.px-pill{display:inline-block;border-radius:999px;padding:.12em .65em;font-weight:600;font-size:.88em;white-space:nowrap}
.px-ok{background:#E4F3C4;color:#2F4F0E}.px-warn{background:#FCEBC4;color:#7A5200}.px-late{background:#F7D9D6;color:#8C1D15}
.px-lima{background:var(--sab-lima);color:var(--sab-verde-noche)}
.px-btn{display:inline-block;border-radius:.6em;padding:.55em .9em;font-weight:700;font-family:var(--sab-fuente-titulos);text-align:center}
.px-btn.prim{background:var(--sab-verde-noche);color:var(--sab-lima)}
.px-btn.sec{background:#fff;border:1px solid rgba(63,94,75,.3)}
.px-muted{color:var(--sab-musgo)}
.px-num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* (b) Toma de pedido */
.px-pedido .px-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:.7em;padding:.7em;height:calc(100% - 2.6em)}
.px-cats{display:flex;gap:.35em;flex-wrap:wrap;margin-bottom:.6em}
.px-cat{border:1.5px solid rgba(63,94,75,.35);border-radius:999px;padding:.2em .7em;font-weight:600;font-size:.9em;background:#fff}
.px-cat.on{background:var(--sab-verde-noche);color:var(--sab-hueso);border-color:var(--sab-verde-noche)}
.px-prods{display:grid;grid-template-columns:repeat(2,1fr);gap:.45em}
.px-prod{background:#fff;border-radius:.6em;padding:.55em .6em;border:1px solid rgba(63,94,75,.18);display:flex;flex-direction:column;gap:.15em}
.px-prod b{font-weight:600;font-size:.95em}.px-prod span{color:var(--sab-musgo);font-size:.9em}
.px-prod.tap{outline:2.5px solid var(--sab-lima-profundo);background:#F6FBE6}
.px-cuenta{background:#fff;border-radius:.8em;border:1px solid rgba(63,94,75,.2);display:flex;flex-direction:column;padding:.7em}
.px-cuenta .px-tit{margin:0 0 .3em;font-family:var(--sab-fuente-titulos);font-size:1.05em}
.px-linea{display:flex;justify-content:space-between;gap:.5em;padding:.35em 0;border-bottom:1px dashed rgba(63,94,75,.25);font-size:.95em}
.px-linea small{display:block;color:var(--sab-musgo);font-size:.85em}
.px-tot{margin-top:auto;padding-top:.4em;font-size:.92em}
.px-tot p{display:flex;justify-content:space-between;margin:.12em 0}
.px-tot .grande{font-family:var(--sab-fuente-titulos);font-weight:900;font-size:1.25em;margin-top:.25em}
.px-acciones{display:flex;gap:.4em;margin-top:.5em}.px-acciones .px-btn{flex:1}
.px-enviado{display:none}
@container (max-width:420px){
  .px-pedido .px-grid{grid-template-columns:1fr;height:auto}
  .px-prods{grid-template-columns:repeat(3,1fr)}
}

/* (a) Plano de mesas */
.px-plano .px-cuerpo{padding:.8em}
.px-resumen{display:flex;gap:.4em;margin-bottom:.7em;flex-wrap:wrap}
.px-zona{font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--sab-musgo);font-weight:700;margin:.5em 0 .35em}
.px-mesas{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.px-mesa{border-radius:.8em;padding:.55em .6em;background:#fff;border:2px solid var(--sab-lima-profundo);position:relative}
.px-mesa b{font-family:var(--sab-fuente-titulos);font-size:1.25em;display:block}
.px-mesa span{font-size:.85em;color:var(--sab-musgo)}
.px-mesa.ocu{background:var(--sab-verde-noche);border-color:var(--sab-verde-noche);color:var(--sab-hueso)}
.px-mesa.ocu span{color:#C9D3CB}
.px-mesa.ocu i{position:absolute;top:.55em;right:.55em;width:.6em;height:.6em;border-radius:50%;background:var(--sab-lima)}

/* (c) Cocina por estación */
.px-kds{background:#123A2E;color:var(--sab-hueso)}
.px-kds .px-barra{background:#071E17}
.px-comandas{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:.7em}
.px-comanda{background:var(--sab-hueso);color:var(--sab-verde-noche);border-radius:.7em;overflow:hidden;display:flex;flex-direction:column}
.px-comanda header{display:flex;justify-content:space-between;align-items:center;padding:.45em .6em;background:#fff;border-bottom:3px solid var(--sab-lima-profundo)}
.px-comanda header b{font-family:var(--sab-fuente-titulos)}
.px-comanda.warn header{border-color:#E0A526}.px-comanda.late header{border-color:#B3261E}
.px-comanda.llevar header{background:#E4F3C4}
.px-comanda ul{list-style:none;margin:0;padding:.45em .6em;display:grid;gap:.3em}
.px-comanda li b{font-family:var(--sab-fuente-titulos);margin-right:.3em}
.px-comanda li small{display:block;color:#8C1D15;font-weight:600}
.px-comanda footer{margin-top:auto;padding:.45em .6em}
.px-comanda footer .px-btn{width:100%;padding:.35em}
@container (max-width:420px){ .px-comandas{grid-template-columns:1fr 1fr} .px-comanda:nth-child(3){display:none} }

/* (d) Receta e inventario */
.px-inv .px-grid2{display:grid;grid-template-columns:1fr 1.15fr;gap:.7em;padding:.7em}
.px-tarjeta{background:#fff;border-radius:.8em;border:1px solid rgba(63,94,75,.2);padding:.7em}
.px-tarjeta .px-tit{margin:0 0 .4em;font-family:var(--sab-fuente-titulos);font-size:1.05em}
.px-rec{display:flex;justify-content:space-between;padding:.28em 0;border-bottom:1px dashed rgba(63,94,75,.22);font-size:.95em}
.px-stock{display:grid;grid-template-columns:2em 1fr auto;align-items:center;gap:.5em;padding:.32em 0}
.px-stock img{width:2em;height:2em;object-fit:contain}
.px-stock .ico{width:2em;height:2em;border-radius:50%;background:#E4F3C4}
.px-barra-stock{height:.55em;background:#E7E9DF;border-radius:999px;overflow:hidden;margin-top:.2em}
.px-barra-stock i{display:block;height:100%;background:var(--sab-musgo);border-radius:999px;width:var(--fin)}
.px-stock .baja{color:#8C1D15;font-weight:700}
.px-menos{color:#8C1D15;font-weight:700;font-size:.9em}
@container (max-width:420px){ .px-inv .px-grid2{grid-template-columns:1fr} }

/* Cierre de caja */
.px-cierre table{width:100%;border-collapse:collapse;font-size:.95em;background:#fff;border-radius:.6em;overflow:hidden}
.px-cierre th,.px-cierre td{padding:.45em .55em;border-bottom:1px solid rgba(63,94,75,.15);text-align:right;border-left:0;border-right:0;border-top:0;vertical-align:middle}
.px-cierre th{background:var(--sab-verde-noche);color:var(--sab-hueso);font-size:.9em;font-family:var(--sab-fuente-titulos)}
.px-cierre th:first-child,.px-cierre td:first-child{text-align:left}
.px-cuadra{display:flex;align-items:center;gap:.6em;margin-top:.7em;background:var(--sab-verde-noche);color:var(--sab-hueso);border-radius:.8em;padding:.6em .8em}
.px-cuadra .check{width:2.1em;height:2.1em;border-radius:50%;background:var(--sab-lima);color:var(--sab-verde-noche);display:grid;place-items:center;font-weight:900;font-size:1.1em;flex:none}
.px-cuadra b{font-family:var(--sab-fuente-titulos);font-size:1.1em;display:block}

/* Celular: resumen del día */
.px-movil{background:#E9EEE3}
.px-movil .px-barra{padding:.7em .9em}
.px-burbuja{background:#fff;border-radius:1em 1em 1em .3em;margin:.8em;padding:.8em .9em;box-shadow:0 2px 6px rgba(11,43,34,.08);font-size:1.05em}
.px-burbuja .px-tit{margin:0 0 .4em;font-family:var(--sab-fuente-titulos);font-size:1.05em}
.px-burbuja p{display:flex;justify-content:space-between;gap:.6em;margin:.25em 0}
.px-burbuja .ok{color:#2F4F0E;font-weight:700}

/* ===== Marcos de dispositivo ===== */
.disp{position:relative;margin:0}
.disp-tableta{background:#06190F;border-radius:clamp(16px,3vw,30px);padding:clamp(8px,1.4vw,14px);box-shadow:0 0 0 2px #1d4a3b,0 30px 60px rgba(11,43,34,.35)}
.disp-tableta .pant{border-radius:clamp(8px,1.4vw,14px);overflow:hidden;aspect-ratio:4/3;background:var(--sab-hueso)}
.disp-monitor .marco{background:#06190F;border-radius:14px;padding:10px;box-shadow:0 30px 60px rgba(11,43,34,.35)}
.disp-monitor .pant{border-radius:6px;overflow:hidden;aspect-ratio:16/9}
.disp-monitor .pie-mon{width:22%;height:16px;margin:0 auto;background:#1d4a3b;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.disp-movil{background:#06190F;border-radius:34px;padding:10px;box-shadow:0 0 0 2px #1d4a3b,0 30px 60px rgba(11,43,34,.35);max-width:320px;margin:0 auto}
.disp-movil .pant{border-radius:26px;overflow:hidden;aspect-ratio:9/18.5;background:var(--sab-hueso);position:relative}
.disp-movil .pant::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:16px;margin-left:-15%;background:#06190F;border-radius:999px;z-index:2}
.disp-movil .px-barra{padding-top:2.2em}
.disp-pie{font-size:1rem;color:var(--sab-musgo);margin-top:.7em;text-align:center}
.oscuro .disp-pie{color:#C9D3CB}
.disp-wrap{margin:0}
/* La pantalla toma la altura de su contenido (nada se corta) */
.disp-tableta .pant,.disp-movil .pant{aspect-ratio:auto}
.disp-movil .pant{min-height:0;padding-bottom:1.2em}
.disp-monitor .pant{aspect-ratio:auto}
.px{height:auto}
.px-pedido .px-grid{height:auto}
.px-burbuja p{flex-wrap:wrap}
.px-burbuja p{display:block;margin:.45em 0}
.px-burbuja p span{display:block;color:var(--sab-musgo);font-size:.9em}
.px-burbuja p b{display:block}
/* v3: el contenido nunca se corta dentro de la pantalla */
.px-pedido .px-grid>*{min-width:0}
.px-prod b,.px-linea div,.px-comanda li{overflow-wrap:anywhere}
.px-cierre table{table-layout:fixed}
.px-cierre th,.px-cierre td{padding:.45em .35em}
.px-cierre th:first-child,.px-cierre td:first-child{width:30%}
@container (max-width:520px){ .px-cierre th:last-child,.px-cierre td:last-child{width:16%} .px-cierre{font-size:clamp(12.5px,3.2cqw,15px)} }
.px-prod b{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}

/* v4 · auditoría final (04-11-2026) */
.px .px-tit{font-weight:700;line-height:1.2}
.px-btn{white-space:nowrap}
.px-barra{flex-wrap:wrap;row-gap:.35em}
.px-barra b{white-space:nowrap}
@media (max-width:767px){
  .px{font-size:15.5px}
  .px-btn{padding:.55em .6em}
  .px-cat,.px-pill,.px-barra .px-chip,.px-prod span,.px-linea small,.px-mesa span,.px-zona,.px-menos,.px-cierre th{font-size:.92em}
}
.px-acciones{flex-wrap:wrap}
.px small,.px-pill,.px-cat,.px-zona{font-size:max(.88em,13.5px)}