body.pos :is(#vista-venta, #vista-botonera) { --ancho-accesos: 96px; --bw: 156px; --bh: 80px; --fs: .82rem; --tk: 22px; --esc: 1; --hueco: 8px; flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(520px, 36%) minmax(0, 1fr) var(--ancho-accesos); grid-template-rows: minmax(0, 1fr); gap: var(--ex-sp-12); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="chico"] { --bw: 136px; --bh: 70px; --fs: .72rem; --tk: 20px; }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] { --bw: 176px; --bh: 92px; --fs: .92rem; --tk: 24px; }
body.pos #productos { display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; }

body.pos .chip-c {
  min-height: var(--tap); min-width: 0; padding: 0 var(--ex-sp-4); border-radius: var(--ex-r-chip);
  border: var(--ex-bd); background: var(--ex-surface); color: var(--ex-ink);
  font-family: var(--ex-mono); font-weight: 700; font-size: var(--ex-fs-base);
}
body.pos .chip-c.on { background: var(--ex-marca); border-color: var(--ex-marca); color: var(--ex-on-marca); }

body.pos .fila-solapas { display: flex; align-items: flex-end; gap: var(--ex-sp-4); min-width: 0; min-height: 40px; flex: none; position: relative; z-index: 1; margin-bottom: -1px; }
body.pos .fila-solapas:not(:has(#cats:not([hidden]))) { margin-bottom: var(--ex-sp-8); }
body.pos #cats { display: flex; align-items: flex-end; gap: 5px; overflow-x: auto; overflow-y: hidden; flex: 1 1 0; min-width: 0; padding: 0 var(--ex-sp-2); scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
body.pos #cats::-webkit-scrollbar { display: none; }
body.pos .cats-flecha { flex: none; width: 26px; height: 34px; margin-bottom: 3px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ex-r-btn); background: transparent; color: var(--ex-ink-2); font-size: var(--ex-fs-2xl); cursor: pointer; }
body.pos .cats-flecha:hover { background: var(--ex-marca-soft); color: var(--ex-marca-hi); }
body.pos .cat {
  flex: 0 0 auto; min-width: 0; height: 40px; padding: 0 18px; display: flex; align-items: center; gap: var(--ex-sp-8);
  text-align: center; font-weight: 600; line-height: 1.1; color: var(--ex-ink-2); white-space: nowrap; scroll-snap-align: start;
  border: 0; border-bottom: 3px solid transparent; border-radius: var(--ex-r-btn) var(--ex-r-btn) 0 0; background: transparent;
}
body.pos .cat:hover { color: var(--ex-ink); background: color-mix(in srgb, var(--ex-marca) 8%, transparent); }
body.pos .cat[aria-selected="true"] { background: var(--ex-surface); border-bottom-color: var(--ex-marca); color: var(--ex-marca-hi); font-weight: 800; position: relative; z-index: 1; }

body.pos #botonera {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content;
  gap: var(--ex-sp-10); align-content: start; padding: var(--ex-sp-10);
  border: var(--ex-bd); border-radius: 0 var(--ex-r-card) var(--ex-r-card) var(--ex-r-card); background: var(--ex-surface);
}
body.pos #productos:has(#cats[hidden]) #botonera, body.pos #productos:has(#cats:empty) #botonera { border-radius: var(--ex-r-card); }
body.pos #botonera > .vacio, body.pos #botonera > .pos-cargando, body.pos #botonera > .btn { grid-column: 1 / -1; justify-self: center; }
body.pos .prod {
  --cat: var(--ex-marca);
  position: relative; min-width: 0; min-height: 96px; padding: var(--ex-sp-10) var(--ex-sp-12); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ex-sp-6);
  text-align: left; color: var(--ex-ink);
  border-radius: var(--ex-r-card); border: var(--ex-bd); border-left: 6px solid var(--cat); background: var(--ex-raised);
}
body.pos .prod:hover:not(:disabled) { background: color-mix(in srgb, var(--cat) 14%, var(--ex-raised)); }
body.pos .prod .nom { font-weight: 700; line-height: 1.15; overflow-wrap: break-word; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pos .prod .foto { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: var(--ex-r-btn); background: var(--ex-ground); flex: none; }
body.pos .prod .pie { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: var(--ex-sp-6); min-width: 0; }
body.pos .prod .stock { font-family: var(--ex-mono); font-size: var(--ex-fs-xs); color: var(--ex-warn); }
body.pos .prod .stock.agotado { color: var(--ex-danger); font-weight: 700; }
body.pos .prod:disabled { opacity: .55; }
body.pos .tag18 {
  position: static; flex: none; margin-left: auto; font-family: var(--ex-mono); font-size: var(--ex-fs-xs); font-weight: 700; color: var(--ex-danger);
  border: 1px solid var(--ex-danger-line); background: var(--ex-danger-soft); border-radius: var(--ex-r-chip); padding: 1px 7px;
}
body.pos .prod.hueco {
  align-items: center; justify-content: center; text-align: center; gap: var(--ex-sp-2); cursor: default;
  border-style: dashed; border-left-width: 1px; border-color: var(--ex-line); background: transparent; color: var(--ex-ink-3);
}
body.pos .prod.hueco:hover { background: transparent; }
body.pos .prod.hueco .nom { font-size: var(--ex-fs-sm); font-weight: 600; -webkit-line-clamp: 1; }
body.pos .prod.no-disp { border-left-color: var(--ex-warn); border-style: dashed; cursor: pointer; }
body.pos .prod .tecla {
  position: static; flex: none; box-sizing: border-box; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 var(--ex-sp-2);
  font-family: var(--ex-mono); font-size: var(--ex-fs-sm); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--ex-ink);
  background: var(--ex-raised); border: var(--ex-bd); border-bottom-width: 3px; border-radius: var(--ex-r-sm);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ex-ink) 18%, transparent);
}
body.pos .prod .tecla.vacia { opacity: .3; }
body.pos .prod .precio { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--ex-fs-md); font-weight: 700; color: var(--ex-ink); }
body.pos .prod.sin-stock { background: color-mix(in srgb, var(--ex-ink) 5%, var(--ex-raised)); border-color: color-mix(in srgb, var(--ex-ink) 12%, var(--ex-line)); }
body.pos .prod.sin-stock .nom { color: var(--ex-ink-2); }
body.pos .prod[data-tono="0"] { --h: 265; --s: 65%; }
body.pos .prod[data-tono="1"] { --h: 175; --s: 60%; }
body.pos .prod[data-tono="2"] { --h: 12; --s: 80%; }
body.pos .prod[data-tono="3"] { --h: 330; --s: 70%; }
body.pos .prod[data-tono="4"] { --h: 215; --s: 70%; }
body.pos .prod[data-tono="5"] { --h: 135; --s: 55%; }
body.pos .prod[data-tono="6"] { --h: 40; --s: 90%; }
body.pos .prod[data-tono="7"] { --h: 220; --s: 10%; }
body.pos .prod[data-tono] {
  --t-bg: light-dark(hsl(var(--h) var(--s) 94%), hsl(var(--h) calc(var(--s) * .5) 20%));
  --t-bd: light-dark(hsl(var(--h) calc(var(--s) * .6) 70%), hsl(var(--h) calc(var(--s) * .5) 42%));
  --t-tx: light-dark(hsl(var(--h) calc(var(--s) * .8) 24%), hsl(var(--h) calc(var(--s) * .9) 88%));
  --cat: light-dark(hsl(var(--h) calc(var(--s) * .85) 52%), hsl(var(--h) calc(var(--s) * .85) 60%));
}
body.pos .prod[data-tono="c"] {
  --t-bg: light-dark(color-mix(in srgb, var(--tc) 13%, white), color-mix(in srgb, var(--tc) 24%, #15131b));
  --t-bd: light-dark(color-mix(in srgb, var(--tc) 50%, white), color-mix(in srgb, var(--tc) 50%, #15131b));
  --t-tx: light-dark(color-mix(in srgb, var(--tc) 40%, black), color-mix(in srgb, var(--tc) 30%, white));
  --cat: var(--tc);
}
body.pos .prod[data-tono]:not(.sin-stock):not(.sel) { background: var(--t-bg); border-color: var(--t-bd); border-left-color: var(--cat); color: var(--t-tx); }
body.pos .prod[data-tono]:not(.sin-stock):not(.sel):hover:not(:disabled) { background: color-mix(in srgb, var(--cat) 18%, var(--t-bg)); }
body.pos .prod[data-tono] .precio { color: inherit; }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="chico"] #botonera:not(.grilla) { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ex-sp-8); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="chico"] .prod { min-height: 64px; padding: var(--ex-sp-6) var(--ex-sp-10); gap: var(--ex-sp-4); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="chico"] .prod .nom { font-size: var(--ex-fs-sm); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="chico"] .prod .foto { height: 48px; }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] #botonera:not(.grilla) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ex-sp-12); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] .prod { min-height: 120px; padding: var(--ex-sp-14) var(--ex-sp-16); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] .prod .nom { font-size: var(--ex-fs-lg); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] .prod .pie { font-size: var(--ex-fs-lg); }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] .prod .foto { height: 120px; }
body.pos :is(#vista-venta, #vista-botonera)[data-boton="grande"] .prod .precio { font-size: var(--ex-fs-lg); }
body.pos #botonera.grilla { grid-template-columns: repeat(var(--cols), calc(var(--bw) * var(--esc))); grid-template-rows: repeat(var(--filas), calc(var(--bh) * var(--esc))); grid-auto-rows: calc(var(--bh) * var(--esc)); gap: var(--hueco); justify-content: start; align-content: start; overflow: hidden; }
body.pos #botonera.grilla .prod { box-sizing: border-box; width: calc(var(--bw) * var(--esc)); height: calc(var(--bh) * var(--esc)); min-width: 0; min-height: 0; padding: var(--ex-sp-4) var(--ex-sp-6) var(--ex-sp-4) var(--ex-sp-8); gap: var(--ex-sp-2); overflow: hidden; }
body.pos #botonera.grilla .prod .foto { display: none; }
body.pos #botonera.grilla .prod .nom { display: block; flex: none; font-size: calc(var(--fs) * var(--esc)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: clip; }
body.pos #botonera.grilla .prod .pie { flex: none; font-size: calc(.72rem * var(--esc)); }
body.pos #botonera.grilla .prod .tecla { width: calc(var(--tk) * var(--esc)); height: calc(var(--tk) * var(--esc)); font-size: calc(.8rem * var(--esc)); }
body.pos #botonera.grilla .prod .precio { font-size: calc(var(--fs) * 1.15 * var(--esc)); }
body.pos #botonera.grilla .tag18 { font-size: var(--ex-fs-2xs); padding: 0 var(--ex-sp-4); }
body.pos .tecla-inline { margin-left: var(--ex-sp-8); padding: var(--ex-sp-2) var(--ex-sp-6); font-size: var(--ex-fs-xs); }

body.pos #pedido { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ex-surface); border: var(--ex-bd); border-radius: var(--ex-r-card); overflow: hidden; }
body.pos #vista-venta #pedido { background: none; border: 0; border-radius: 0; overflow: visible; gap: var(--ex-sp-10); }
body.pos .ped-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-sp-8); flex-wrap: wrap; padding: var(--ex-sp-6) var(--ex-sp-10); border-bottom: var(--ex-bd-soft); }
body.pos .ped-dest { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ex-sp-8); min-width: 0; flex: 1 1 140px; }
body.pos .ped-dest strong { font-size: var(--ex-fs-base); font-weight: 700; overflow-wrap: anywhere; }
body.pos .ped-tiempos { flex: 1 0 100%; color: var(--ex-ink-2); font-size: var(--ex-fs-sm); overflow-wrap: anywhere; }
body.pos .ped-card { min-width: 0; background: var(--ex-surface); border: var(--ex-bd); border-radius: var(--ex-r-card); }
body.pos .ped-venta { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.pos .ped-lineas { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; list-style: none; padding: 0 var(--ex-sp-10); margin: 0; }
body.pos .linea { margin: 0; background: none; border: 0; border-bottom: var(--ex-bd); cursor: pointer; }
body.pos .linea.sel { background: var(--ex-marca-soft); box-shadow: var(--ex-sel-lado); }
body.pos .linea.sel .l-fila { padding-left: var(--ex-sp-10); }
body.pos .linea:last-child { border-bottom: 0; }
body.pos .l-fila { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ex-sp-8); padding: var(--ex-sp-4) var(--ex-sp-2); }
body.pos .l-izq { min-width: 0; display: flex; flex-direction: column; gap: 0; }
body.pos .l-nom { min-width: 0; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
body.pos .l-unit { color: var(--ex-ink-3); font-size: var(--ex-fs-sm); line-height: 1.15; }
body.pos .l-cant-n { color: var(--ex-ink); font-weight: 700; }
body.pos .l-precio { text-align: right; white-space: nowrap; font-weight: 700; }
body.pos .l-fuera { display: block; color: var(--ex-warn); font-size: var(--ex-fs-xs); font-weight: 700; }
body.pos .l-sin { display: block; color: var(--ex-ink-2); font-size: var(--ex-fs-xs); font-weight: 700; }
body.pos .linea.sin-stock { background: color-mix(in srgb, var(--ex-ink) 5%, var(--ex-raised)); }
body.pos .ped-pie { display: flex; flex-direction: column; gap: var(--ex-sp-8); padding: var(--ex-sp-10) var(--ex-sp-12); border-top: var(--ex-bd); }
body.pos .tot-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ex-sp-8); min-width: 0; }
body.pos .tot-monto { display: inline-flex; align-items: baseline; gap: var(--ex-sp-8); }
body.pos .total { font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.05; }
body.pos .ped-unid { color: var(--ex-ink-2); font-size: var(--ex-fs-md); }
body.pos .sub-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ex-sp-4) var(--ex-sp-8); color: var(--ex-ink-2); font-size: var(--ex-fs-md); }
body.pos .ped-mando { flex: none; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--ex-sp-8); padding: var(--ex-sp-8); }
body.pos .ped-mando-izq { min-width: 0; display: flex; flex-direction: column; gap: var(--ex-sp-6); }
body.pos .ped-mando-der { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--ex-sp-6); }
body.pos .ped-teclado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ex-sp-6); }
body.pos .ped-teclado .btn { min-height: 46px; max-height: none; height: 46px; padding: 0; font-family: var(--ex-mono); font-size: var(--ex-fs-xl); }
body.pos .ped-teclado .btn.op { font-size: var(--ex-fs-2xl); }
body.pos .ped-teclado .btn.op small { font-size: var(--ex-fs-sm); font-weight: 800; }
body.pos .ped-teclado .btn.op.activa { background: var(--ex-marca); border-color: var(--ex-marca); color: var(--ex-on-marca); }
body.pos .ped-teclado .btn.doble { grid-column: span 2; }
body.pos .ped-teclado .btn:disabled { background: var(--ex-surface); border-color: var(--ex-line-soft); color: var(--ex-ink-3); opacity: .6; }
body.pos .ped-acc { display: flex; flex-direction: column; gap: var(--ex-sp-6); }
body.pos .ped-acc .btn { padding: 0 var(--ex-sp-8); white-space: nowrap; }
body.pos .ped-pagar { flex: none; width: 100%; height: 98px; min-height: 98px; max-height: none; font-size: var(--ex-fs-2xl); letter-spacing: .1em; }
@media (max-height: 640px) { body.pos .ped-lineas { min-height: 72px; } }
@media (max-height: 760px) {
  body.pos .ped-teclado .btn { min-height: 38px; height: 38px; font-size: var(--ex-fs-base); }
  body.pos .ped-pagar { height: 82px; min-height: 82px; }
  body.pos .ped-mando { gap: var(--ex-sp-6); padding: var(--ex-sp-6); }
}

body.pos .medio-p { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ex-sp-2); min-width: 0; min-height: 60px; padding: var(--ex-sp-14) var(--ex-sp-4) var(--ex-sp-6); text-align: center; font-family: inherit; border-radius: var(--ex-r-btn); border: var(--ex-bd); background: var(--ex-raised); color: var(--ex-ink); font-weight: 700; cursor: pointer; }
body.pos .medio-p .mdi { font-size: var(--ex-fs-2xl); line-height: 1; }
body.pos .medio-p .m-nom { max-width: 100%; font-size: var(--ex-fs-sm); line-height: 1.1; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pos .medio-p .m-logo { flex: none; width: 22px; height: 22px; object-fit: contain; border-radius: var(--ex-r-sm); }
body.pos .medio-p .tecla-m { position: absolute; top: 4px; right: 4px; padding: 1px var(--ex-sp-4); font-size: var(--ex-fs-2xs); }
body.pos .medio-p:disabled { cursor: default; }
body.pos .medio-p:disabled .m-logo { filter: grayscale(1); opacity: .7; }
body.pos .medios-pago-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ex-sp-10); }
body.pos .medios-pago-grilla .medio-p { aspect-ratio: 1 / 1; min-height: 0; padding: var(--ex-sp-10) var(--ex-sp-6); gap: var(--ex-sp-8); }
body.pos .medios-pago-grilla .medio-p .mdi { font-size: var(--ex-fs-6xl); }
body.pos .medios-pago-grilla .medio-p .m-logo { width: 44px; height: 44px; }
body.pos .medios-pago-grilla .medio-p .m-nom { font-size: var(--ex-fs-md); }
body.pos .medios-pago-grilla .medio-p .tecla-m { top: 6px; right: auto; left: 6px; font-size: var(--ex-fs-2xs); }

body.pos .cu-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ex-sp-8); margin-bottom: var(--ex-sp-14); }
body.pos .cu-modos .chip-c { font-family: inherit; font-size: var(--ex-fs-base); }
body.pos .cu-modos .chip-c:disabled { opacity: .5; }
body.pos .cu-buscar { display: flex; align-items: flex-end; gap: var(--ex-sp-8); margin-top: var(--ex-sp-12); }
body.pos .cu-buscar-campo { flex: 1 1 auto; min-width: 0; }
body.pos .cu-elegido { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-sp-8); margin-top: var(--ex-sp-12); padding: var(--ex-sp-8) var(--ex-sp-12); border-radius: var(--ex-r-input); border: 1px solid var(--ex-marca-line); background: var(--ex-marca-soft); overflow-wrap: anywhere; }
body.pos .ab-filtro { margin-bottom: var(--ex-sp-12); }
body.pos .modal-dialog.pos-modal-abiertas { width: min(900px, 96vw); max-width: min(900px, 96vw) !important; }
body.pos .pos-modal-abiertas .ab-grilla { height: min(58vh, 560px); overflow: auto; outline: 0; }
body.pos #tableAbiertas tbody tr { cursor: pointer; }
body.pos #tableAbiertas tbody tr.fila-sel > td { box-shadow: inset 0 0 0 9999px var(--ex-marca-soft); }

body.pos .fila-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--ex-sp-10); align-items: baseline; padding: 11px 0; border-bottom: var(--ex-bd-soft); }
body.pos .fila-dato:last-child { border-bottom: 0; }
body.pos .fila-dato .cant { color: var(--ex-ink-3); font-size: var(--ex-fs-sm); white-space: nowrap; }
body.pos .fila-dato.total-fila { border-top: 2px solid var(--ex-line); font-weight: 700; }

body.pos #aviso {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); z-index: 1060;
  max-width: min(92vw, 520px); padding: var(--ex-sp-12) 18px; border-radius: var(--ex-r-input); background: var(--ex-raised); color: var(--ex-ink);
  border: 1px solid var(--ex-marca-line); box-shadow: var(--ex-sh-flotante); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
body.pos #aviso.on { opacity: 1; transform: translateX(-50%) translateY(0); }
body.pos #aviso.error { border-color: var(--ex-danger-line); }

body.pos .accesos { display: flex; flex-direction: column; gap: var(--ex-sp-8); min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
body.pos .acceso {
  position: relative; flex: 1 1 var(--ex-h-lg); min-height: var(--ex-h-lg); max-height: 64px; min-width: 0; padding: var(--ex-sp-4) var(--ex-sp-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ex-sp-2);
  text-decoration: none; text-align: center; line-height: 1.1; font-family: inherit; font-weight: 700; color: var(--ex-ink);
  border-radius: var(--ex-r-btn); border: var(--ex-bd); background: var(--ex-raised); cursor: pointer;
}
body.pos .acceso .mdi { font-size: var(--ex-fs-2xl); line-height: 1; }
body.pos .acceso span { max-width: 100%; font-size: var(--ex-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pos .acceso.on { border-color: var(--ex-marca); background: var(--ex-marca-soft); color: var(--ex-marca-hi); }
body.pos .acceso:is(:disabled, .apagado) { cursor: default; color: var(--ex-ink-3); border-color: var(--ex-line-soft); }
body.pos .acceso .tecla-inline { position: absolute; top: 3px; right: 3px; margin: 0; padding: 1px var(--ex-sp-4); font-size: var(--ex-fs-2xs); text-transform: uppercase; }
body.pos .acceso.primario { background: var(--ex-marca); border-color: var(--ex-marca); color: var(--ex-on-marca); }
body.pos .acceso.primario:hover:not(:disabled) { background: var(--ex-marca-hi); border-color: var(--ex-marca-hi); color: var(--ex-on-marca); }
body.pos .acceso.esqueleto { background: var(--ex-raised); border-color: var(--ex-line-soft); opacity: .55; cursor: default; pointer-events: none; }
body.pos #resumen-movil, body.pos #velo-pedido, body.pos .solo-movil, body.pos #barra-movil { display: none; }

body.pos .tabla-ingredientes-marco { overflow-x: auto; border: var(--ex-bd); border-radius: var(--ex-r-card); background: var(--ex-surface); }
body.pos .tabla-ingredientes { width: 100%; border-collapse: collapse; }
body.pos .tabla-ingredientes th, body.pos .tabla-ingredientes td { padding: var(--ex-sp-10) var(--ex-sp-12); text-align: left; border-bottom: var(--ex-bd-soft); vertical-align: middle; }
body.pos .tabla-ingredientes th { font-size: var(--ex-fs-sm); color: var(--ex-ink-2); font-weight: 700; background: var(--ex-raised); }
body.pos .tabla-ingredientes tbody tr:last-child td { border-bottom: 0; }
body.pos .tabla-ingredientes .num { text-align: right; font-family: var(--ex-mono); }
body.pos .tabla-ingredientes .cod { font-family: var(--ex-mono); color: var(--ex-ink-2); }
body.pos .tabla-ingredientes .acc { width: 1%; white-space: nowrap; text-align: right; }
body.pos .tabla-ingredientes .vacia td { text-align: center; color: var(--ex-ink-3); }
body.pos .pos-paso[data-campo].campo-invalido .tabla-ingredientes-marco { border-color: var(--ex-danger); }

body.pos .pos-modal-buscar .modal-body { padding: 0; }
body.pos .pos-modal-buscar #dlg-buscar { height: min(70vh, 640px); display: flex; flex-direction: column; }
body.pos .lector-cuerpo { display: flex; flex-direction: column; gap: var(--ex-sp-12); }
body.pos .bp-dos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
body.pos .bp-izq { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
body.pos .bp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ex-sp-10); padding: var(--ex-sp-12) var(--ex-sp-16); border-bottom: var(--ex-bd-soft); flex: none; }
body.pos .bp-texto-campo { flex: 1 1 260px; min-width: 0; }
body.pos .bp-filtros { display: flex; gap: var(--ex-sp-8); flex: none; }
body.pos .bp-filtros .nav-desplegable { max-height: 50vh; overflow-y: auto; min-width: 220px; z-index: 5; }
body.pos .bp-filtro { position: relative; display: flex; }
body.pos .bp-filtro .icono { width: var(--tap); height: var(--tap); border-radius: var(--ex-r-input); background: var(--ex-surface); }
body.pos .bp-filtro .icono.activa { border-color: var(--ex-marca); background: var(--ex-marca-soft); color: var(--ex-marca); }
body.pos .bp-filtro .nav-sec .bp-tilde { visibility: hidden; }
body.pos .bp-filtro .nav-sec.on .bp-tilde { visibility: visible; }
body.pos .bp-marco { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--ex-sp-12) var(--ex-sp-12); }
body.pos .cat-lista { display: flex; flex-direction: column; gap: var(--ex-sp-6); padding-top: var(--ex-sp-10); }
body.pos .cat-lista > .vacio { padding: 24px 0; text-align: center; color: var(--ex-ink-2); }
body.pos .cat-fila {
  --cat: var(--ex-marca);
  flex: none; display: flex; flex-direction: column; gap: var(--ex-sp-2); width: 100%; min-width: 0; padding: var(--ex-sp-6) var(--ex-sp-10); text-align: left; cursor: pointer; color: var(--ex-ink);
  border-radius: var(--ex-r-card); border: var(--ex-bd); border-left: 6px solid var(--cat); background: var(--ex-raised);
}
body.pos .cat-fila:hover { background: var(--ex-marca-soft); }
body.pos .cat-fila.on { border-color: var(--ex-marca); background: var(--ex-marca-soft); box-shadow: var(--ex-sel-aro); }
body.pos .cat-fila.sin-stock { background: color-mix(in srgb, var(--ex-ink) 5%, var(--ex-raised)); }
body.pos .cat-fila .fila-1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ex-sp-8); }
body.pos .cat-fila .fila-1 strong { min-width: 0; overflow-wrap: anywhere; }
body.pos .cat-fila .fila-1 .tag18 { margin-left: var(--ex-sp-8); }
body.pos .cat-fila .imp { font-weight: 700; }
body.pos .cat-fila .fila-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-sp-8); color: var(--ex-ink-2); font-size: var(--ex-fs-sm); }
body.pos .cat-fila .fila-2 .datos { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pos .cat-fila .fila-2 .agotado { color: var(--ex-danger); font-weight: 700; }
body.pos .cat-fila .fila-2 .bajo { color: var(--ex-warn); }
body.pos .cat-fila .fila-2 .lugar { flex: none; display: inline-flex; align-items: center; gap: var(--ex-sp-4); color: var(--ex-ink-3); }
body.pos .cat-fila.asignado .fila-2 .lugar { color: var(--ex-ok); }
body.pos .cat-fila .fila-2 .tecla-inline { text-transform: uppercase; }
body.pos .bp-stock { font-family: var(--ex-mono); font-size: var(--ex-fs-md); color: var(--ex-ink-2); white-space: nowrap; }
body.pos .bp-stock.bajo { color: var(--ex-warn); }
body.pos .bp-stock.agotado { color: var(--ex-danger); font-weight: 700; }
body.pos .bp-der { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ex-sp-14); padding: var(--ex-sp-16); border-left: var(--ex-bd-soft); }
body.pos .bp-sel { min-width: 0; overflow-wrap: anywhere; color: var(--ex-ink-2); }
body.pos .bp-sel-nom { display: block; font-size: var(--ex-fs-xl); color: var(--ex-ink); margin-bottom: var(--ex-sp-8); }
body.pos .bp-sel-nom .tag18 { margin-left: var(--ex-sp-8); }
body.pos .bp-sel-datos { display: grid; gap: var(--ex-sp-6); margin: 0; }
body.pos .bp-sel-datos > div { display: flex; justify-content: space-between; gap: var(--ex-sp-12); padding: var(--ex-sp-6) 0; border-bottom: var(--ex-bd-soft); }
body.pos .bp-sel-datos dt { color: var(--ex-ink-2); font-size: var(--ex-fs-sm); }
body.pos .bp-sel-datos dd { margin: 0; font-family: var(--ex-mono); font-weight: 700; color: var(--ex-ink); }
body.pos .bp-cant-campo { width: 100%; }
body.pos .bp-der .btn { width: 100%; }
body.pos .bp-enlace { min-height: var(--btn-h); background: none; border: 0; color: var(--ex-marca); font-weight: 700; text-decoration: underline; cursor: pointer; text-align: left; padding: 0; }

#precuenta-impresion { display: none; }
#qr-carta-impresion { display: none; }
@media print {
  @page cartel { size: A4 portrait; margin: 15mm; }
  html:has(body.imprimiendo-qr), body.imprimiendo-qr { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  body.imprimiendo-qr > *:not(#qr-carta-impresion) { display: none !important; }
  body.imprimiendo-qr #qr-carta-impresion { page: cartel; display: flex; flex-direction: column; align-items: center; gap: 10mm; padding-top: 20mm; text-align: center; background: #fff; color: #000; }
  #qr-carta-impresion .tk-qr-acceso { width: 120mm; padding: 0; }
  #qr-carta-impresion .eq-datos { display: flex; flex-direction: column; align-items: center; gap: 4mm; }
  #qr-carta-impresion .eq-dato { display: flex; flex-direction: column; align-items: center; }
  #qr-carta-impresion .eq-dato .etq { font-size: 10pt; letter-spacing: .09em; text-transform: uppercase; }
  #qr-carta-impresion .eq-dato strong { font-size: 22pt; }
  #qr-carta-impresion .eq-vence { font-size: 14pt; color: #000; }
}
@media print {
  @page { size: 80mm auto; margin: 0; }
  html:has(body.imprimiendo-cuenta), body.imprimiendo-cuenta { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  body.imprimiendo-cuenta > *:not(#precuenta-impresion) { display: none !important; }
  body.imprimiendo-cuenta #precuenta-impresion {
    display: block; width: 72mm; margin: 0 auto; padding: 3mm 0; background: #fff; color: #000;
    font-family: ui-monospace, 'Courier New', monospace; font-size: 11px; line-height: 1.3;
  }
  #precuenta-impresion .pc-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: 4px; border-bottom: 1px dashed #000; }
  #precuenta-impresion .pc-logo { max-width: 40mm; max-height: 18mm; object-fit: contain; filter: grayscale(1); }
  #precuenta-impresion .pc-comercio { font-size: 13px; }
  #precuenta-impresion .pc-dest { margin-top: 4px; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
  #precuenta-impresion .pc-fecha { padding-bottom: 6px; border-bottom: 1px dashed #000; }
  #precuenta-impresion .pc-lineas { padding: 6px 0; border-bottom: 1px dashed #000; }
  #precuenta-impresion .pc-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px; padding: 1px 0; }
  #precuenta-impresion .pc-cant { white-space: nowrap; }
  #precuenta-impresion .pc-nom { min-width: 0; overflow-wrap: anywhere; }
  #precuenta-impresion .pc-imp { text-align: right; white-space: nowrap; }
  #precuenta-impresion .pc-total { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; font-weight: 700; }
  #precuenta-impresion .pc-pie { margin: 6px 0 0; text-align: center; font-weight: 700; }
}

@media (max-width: 1023px) {
  body.pos :is(#vista-venta, #vista-botonera) { --esc: .92; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  body.pos :is(#vista-venta, #vista-botonera) { grid-template-columns: minmax(380px, 38%) minmax(0, 1fr) var(--ancho-accesos); }
}
@media (max-width: 999px) {
  body.pos :is(#vista-venta, #vista-botonera) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  body.pos :is(#vista-venta, #vista-botonera) > .accesos { grid-row: 1; grid-column: 1; flex-direction: row; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  body.pos :is(#vista-venta, #vista-botonera) > #productos { grid-row: 2; grid-column: 1; }
  body.pos .acceso { flex: none; min-height: 52px; max-height: none; }
  body.pos .acceso span { font-size: var(--ex-fs-2xs); }
}
@media (min-width: 700px) and (max-width: 999px) {
  body.pos :is(#vista-venta, #vista-botonera) > #pedido { grid-row: 3; grid-column: 1; max-height: 52vh; overflow-y: auto; }
}
@media (max-width: 760px) {
  body.pos .bp-dos { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  body.pos .bp-der { border-left: 0; border-top: var(--ex-bd-soft); max-height: 45%; padding: var(--ex-sp-12) var(--ex-sp-16); }
}
@media (max-width: 699px) {
  body.pos :is(#vista-venta, #vista-botonera) { --esc: .85; }
  body.pos #vista-venta { display: flex; flex-direction: column; gap: var(--ex-sp-8); }
  body.pos #productos { flex: 1; }
  body.pos #pedido { display: none; }
  body.pos #vista-venta #pedido.abierto { background: var(--ex-ground); padding: var(--ex-sp-10) var(--ex-sp-10) calc(var(--ex-sp-10) + env(safe-area-inset-bottom, 0px)); }
  body.pos #pedido.abierto {
    display: flex; position: fixed; z-index: 1040; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + var(--barra-alto));
    border-radius: var(--ex-r-hoja) var(--ex-r-hoja) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.pos #velo-pedido.on { display: block; position: fixed; inset: 0; z-index: 1035; background: var(--ex-scrim); }
  body.pos #resumen-movil {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ex-sp-10); flex: none; min-height: var(--ex-h-lg); padding: 0 18px;
    border-radius: var(--ex-r-input); border: 1px solid var(--ex-marca); background: var(--ex-marca); color: var(--ex-on-marca); font-weight: 700;
  }
  body.pos #resumen-movil .imp { font-size: var(--ex-fs-lg); }
  body.pos .solo-movil, body.pos .icono.solo-movil { display: inline-flex; }
  body.pos #aviso { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.pos .cat { height: 44px; padding: 0 var(--ex-sp-14); }
  body.pos .prod { min-height: 84px; }
  body.pos .prod .foto { height: 64px; }
  body.pos :is(#vista-venta, #vista-botonera) > .accesos { order: -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.pos .acceso { min-height: var(--ex-h-item); }
  body.pos .acceso span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.pos .acceso .tecla-inline { display: none; }
  body.pos #barra-movil { display: flex; align-items: stretch; gap: var(--ex-sp-8); flex: none; }
  body.pos #barra-movil #resumen-movil { flex: 1 1 auto; min-width: 0; }
  body.pos #pagar-movil { flex: none; min-height: var(--ex-h-lg); max-height: none; padding: 0 22px; font-size: var(--ex-fs-lg); letter-spacing: .08em; }
  body.pos #vista-venta #botonera.grilla { overflow-y: auto; overflow-x: hidden; }
}
@media (max-width: 575px) {
  body.pos .pos-modal-buscar #dlg-buscar { height: calc(100vh - 120px); }
  body.pos .modal-dialog.pos-modal-abiertas { width: auto; max-width: none !important; }
  body.pos .pos-modal-abiertas .ab-grilla { height: calc(100dvh - 260px); }
}
@media (max-width: 480px) {
  body.pos #botonera { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}