/**
 * css/caja.css
 * Acceso Caja: apertura con base, mesas (mapa y lista), pantalla de pedido con productos y cuenta,
 * ventanas de pago, subcuentas, recibos. También estilos nuevos de Administra (fotos, opciones,
 * ingredientes de receta, permisos).
 */

/* ---- Administra: nuevos elementos ---- */
/* Miniaturas de productos y categorías en las tablas */
.pcell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pthumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.pthumb.ini {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
/* Etiqueta del tipo de ingrediente en recetas (insumo, producto, subreceta) */
.ing-t {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 8px;
  text-align: center;
  white-space: nowrap;
}
.ing-t.t-sup {
  background: var(--paper);
  color: var(--mute);
}
.ing-t.t-prod {
  background: var(--indbg);
  color: var(--indigo2);
}
.ing-t.t-sub {
  background: var(--warnbg);
  color: var(--warnfg);
}
.rec-row {
  grid-template-columns: auto 1fr 100px 54px auto;
}
.ing-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Filas de opciones del grupo de opciones */
.opt-row {
  display: grid;
  grid-template-columns: 1fr 130px auto;
  gap: 8px;
  margin-bottom: 8px;
}
/* Resultado del buscador de insumos y lista “¿Dónde se usa?” */
.find-res {
  padding: 12px 16px;
  background: var(--mintbg);
  color: var(--okfg);
  border-bottom: 1px solid var(--line);
}
.find-res .link {
  margin: 0 0 0 6px;
}
.use-btn {
  margin: 0;
  font-weight: 500;
  color: var(--indigo2);
}
.use-btn b {
  font-weight: 700;
}
.use-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.use-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.use-list > div b {
  flex: 1;
}
.use-list span {
  color: var(--mute);
  font-size: 13px;
}
/* Selector de accesos y permisos de usuarios */
.acc-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 14px;
}
.acc-pick .chk {
  margin: 8px 0 0;
}
.acc-pick .soon-tag {
  font-size: 11px;
  padding: 2px 7px;
}
.perm-box {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.chk small.help {
  display: block;
  margin-top: 1px;
}

/* ---- Caja: estructura ---- */
.picker-main.wide {
  max-width: 1560px;
}
/* Encabezado de la caja: ruta, turno y botones */
.cj-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cj-top .crumbs {
  margin: 0;
}
.cj-shift {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--mute);
}
.cj-shift b {
  color: var(--okfg);
}
.cj-hello {
  margin-bottom: 16px;
}
/* Tarjeta “Abrir mi caja” (pide la base) */
.base-card {
  max-width: 460px;
  margin: 40px auto 0;
}
.base-card h2 {
  font-size: 28px;
  letter-spacing: -0.6px;
}
.inp.big {
  font-size: 26px;
  font-weight: 700;
  padding: 14px 16px;
  font-family: 'Bricolage Grotesque';
}
/* Control segmentado (Mapa / Mesas, % / $) */
.seg {
  display: inline-flex;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.seg button {
  border: 0;
  background: 0;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--mute);
}
.seg button.on {
  background: var(--indigo);
  color: #fff;
}
.seg.sm button {
  padding: 7px 12px;
}
/* Barra de grupos de mesas y leyenda de estados */
.cj-tools {
  justify-content: space-between;
  align-items: center;
}
.cj-tools .pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px 0;
  font-size: 12.5px;
  color: var(--mute);
}
.lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--indigo2);
  background: var(--card);
}
.lg.ocup {
  background: var(--indigo);
  border-color: var(--indigo);
}
.lg.pend {
  background: var(--warnbg);
  border-color: var(--warn);
}

/* Mesas */
.cj-map .cj-t {
  cursor: pointer;
}
.cj-t {
  position: absolute;
}
.cj-t .tt {
  display: block;
  font-weight: 700;
  font-size: 13px;
}
.cj-t.st-ocup {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.cj-t.st-ocup small {
  color: #c9c8f0;
}
.cj-t.st-pend {
  background: var(--warnbg2);
  border-color: var(--warn);
}
.cj-t.barra.st-libre {
  background: var(--mintbg);
}
.pend-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--warn);
  border: 2px solid #fff;
}
.cj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
}
.cj-grid .cj-t {
  position: relative;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  border-radius: 14px;
}
.cj-grid .cj-t b {
  font-size: 15px;
}

/* Pantalla de pedido */
.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 18px;
  align-items: start;
}
.pos-search .inp {
  font-size: 16px;
}
.cat-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}
.cchip {
  --cc: var(--indigo);
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 99px;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  border-left: 5px solid var(--cc);
}
.cchip.on {
  background: var(--cc);
  color: #fff;
  border-color: var(--cc);
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding: 0 0 10px;
  transition: 0.12s;
}
.pcard:hover {
  border-color: var(--mint);
  box-shadow: 0 6px 18px #27245c14;
}
.pcard:active {
  transform: scale(0.98);
}
.pcard img,
.pcard .ph {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  font-family: 'Bricolage Grotesque';
}
.pcard b {
  padding: 8px 10px 0;
  font-size: 14px;
  line-height: 1.25;
}
.pcard .pr {
  padding: 2px 10px 0;
  color: var(--mute);
  font-size: 13px;
  font-weight: 600;
}
.pcard em {
  position: absolute;
  top: 8px;
  left: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  background: #ffffffe6;
  color: var(--indigo);
  border-radius: 99px;
  padding: 2px 8px;
}
.pcard em.out {
  left: auto;
  right: 8px;
  background: var(--badbg);
  color: var(--badfg);
}
/* Producto con incentivo (mesero o promotor): estrella dorada abajo de la foto para distinguirlo */
.pcard em.inc-tag {
  top: 70px;
  left: 8px;
  background: var(--warnbg);
  color: var(--warnfg);
}
.inc-tag {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  background: var(--warnbg);
  color: var(--warnfg);
  border-radius: 99px;
  padding: 2px 8px;
}
/* Promotor de una línea (solo en pantalla) */
.promo-l {
  color: var(--warnfg) !important;
}
.pos-ticket {
  position: sticky;
  top: 76px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 92px);
  overflow: hidden;
}
.tk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.tk-head b {
  display: block;
  font-family: 'Bricolage Grotesque';
  font-size: 20px;
}
.tk-head small {
  color: var(--mute);
  font-size: 12.5px;
}
.tk-lines {
  flex: 1;
  overflow: auto;
  min-height: 120px;
}
.tk-lines .empty {
  padding: 28px 16px;
}
.tk-line {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 10px 14px;
  cursor: pointer;
  align-items: start;
}
.tk-line:hover {
  background: var(--paper);
}
.tk-line .q {
  font-weight: 700;
  background: var(--paper);
  border-radius: 8px;
  text-align: center;
  padding: 2px 0;
}
.tk-line .n b {
  display: block;
  font-weight: 600;
}
.tk-line .n small {
  display: block;
  color: var(--mute);
  font-size: 12.5px;
}
.tk-line .n .note {
  font-style: italic;
}
.tk-line .v {
  font-weight: 600;
  text-align: right;
}
.tk-line .v em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--warnfg);
  background: var(--warnbg);
  border-radius: 99px;
  padding: 1px 7px;
  margin-top: 3px;
}
.tk-line.new {
  background: var(--warnbg2);
}
.sub-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--indigo);
  color: #fff;
  font-size: 13.5px;
}
.sub-h b {
  flex: 1;
}
.tk-tip {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.tk-tip > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
}
.tip-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tchip {
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 9px;
  padding: 6px 11px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
}
.tchip.on {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.var-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.var-row .inp {
  padding: 9px 12px;
}
.tk-tot {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.tk-tot > div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--mute);
}
.tk-tot .b {
  color: var(--ink);
  font-weight: 700;
  font-size: 20px;
  font-family: 'Bricolage Grotesque';
}
.tk-acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.tk-acts .btn {
  width: 100%;
  padding: 11px 12px;
}
.tk-acts .btn.sm {
  padding: 9px 8px;
}
.tk-acts .btn:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tk-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.tk-quick small {
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
}
.tk-quick div {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.tk-quick .btn {
  flex: 1;
}
.tk-pay {
  font-size: 17px;
  padding: 14px !important;
}
.btn.danger-solid {
  background: var(--bad);
}
.btn.danger-solid:hover {
  background: #b9334a;
}
.pill.sm {
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
}

/* Ventanas de caja */
/* Detalle del producto: grupos de opciones, cantidad con − / + y total */
fieldset.og {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 6px 14px 10px;
  margin-top: 14px;
}
fieldset.og legend {
  font-weight: 700;
  padding: 0 6px;
}
fieldset.og legend small {
  font-weight: 500;
  color: var(--mute);
}
fieldset.og .chk {
  margin: 8px 0 0;
}
.stepper {
  display: flex;
  gap: 6px;
  align-items: center;
}
.stepper .inp {
  width: 90px;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
}
.stepper .btn {
  padding: 10px 16px;
}
.stepper.sm .inp {
  width: 70px;
  padding: 7px;
  font-size: 15px;
}
.stepper.sm .btn {
  padding: 6px 10px;
}
.stepper.sm select.inp {
  width: auto;
  min-width: 150px;
  text-align: left;
  font-weight: 500;
}
.ld-total {
  margin: 14px 0 10px;
  font-weight: 700;
  color: var(--indigo);
}
/* Listas dentro de ventanas (mover productos, subcuentas, ventas, notas crédito) */
.mv-list {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.mv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.mv-row:first-child {
  border-top: 0;
}
.mv-row span b {
  display: block;
}
/* Barra de subcuentas con nombres editables */
.subs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  align-items: center;
}
.sb-chip {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--indigo);
  border-radius: 10px;
  padding: 2px 6px 2px 2px;
}
.sb-chip .inp {
  width: 140px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
}
.sb-chip .link {
  color: #fff;
  margin: 0;
  font-size: 18px;
  padding: 0 4px;
}
/* Tamaño de las ventanas modales */
dialog.wide-dlg {
  width: min(860px, 96vw);
}
dialog {
  max-height: 94vh;
}
dialog form {
  max-height: 94vh;
  overflow: auto;
}
#reasonDlg {
  width: min(480px, 94vw);
}
/* Ventana de pago: encabezado, columnas, formas de pago y totales */
.pay-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px;
  align-items: start;
}
.pay-items {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 6px;
}
.pay-items summary {
  cursor: pointer;
  font-weight: 600;
}
.pay-row {
  display: grid;
  grid-template-columns: 1fr 130px auto auto;
  gap: 8px;
  margin-bottom: 8px;
}
.pay-row .inp {
  padding: 10px 12px;
}
.pay-tot {
  background: var(--paper);
  border-radius: 14px;
  padding: 16px;
  position: sticky;
  top: 0;
  margin-top: 16px;
}
.pay-tot .rc-l {
  padding: 4px 0;
}
.pay-tot .big {
  font-weight: 700;
  font-size: 20px;
  font-family: 'Bricolage Grotesque';
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
}
.pay-tot hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 8px 0;
}
.pay-tot .warn {
  color: var(--bad);
  font-weight: 700;
}
.pay-tot .ok {
  color: var(--okfg);
  font-weight: 700;
}
.pay-tot .dsc {
  color: var(--okfg);
}
#pErr {
  margin-top: 10px;
}
/* Comprobantes dentro de la caja */
.rc-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rc-wrap .receipt {
  width: 100%;
  max-width: 320px;
}
.rc-c {
  margin: 4px 0;
  font-size: 12px;
}
.sub-sum {
  max-width: 320px;
  width: 100%;
  font-size: 13px;
}
/* Indicadores del cuadre de caja */
.cj-kpis {
  grid-template-columns: repeat(4, 1fr);
  margin: 10px 0 6px;
}
.cj-kpis .kpi {
  padding: 12px;
}
.cj-kpis .kpi strong {
  font-size: 20px;
}

/* Pantallas medianas: cuenta más angosta */
@media (max-width: 1100px) {
  .pos {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}
/* Tablet y celular: una columna */
@media (max-width: 900px) {
  .pos {
    grid-template-columns: 1fr;
  }
  .pos-ticket {
    position: static;
    max-height: none;
  }
  .pay-grid {
    grid-template-columns: 1fr;
  }
  .pay-tot {
    position: static;
  }
  .prod-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .rec-row {
    grid-template-columns: auto 1fr 80px auto;
  }
  .cj-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .pay-row {
    grid-template-columns: 1fr 110px auto;
  }
  .pay-row [data-pf] {
    display: none;
  }
  .cj-map {
    height: 380px;
  }
}
/* Ancho de la ventana de formularios */
#formDlg {
  width: min(660px, 94vw);
}
.grp-head > div:first-child {
  flex: 1;
  min-width: 240px;
}
/* La cuenta se desplaza completa si no cabe; las líneas nunca se aplastan */
.pos-ticket {
  overflow: auto;
}
.tk-lines {
  flex: 1 0 auto;
  overflow: visible;
}
.tk-quick .btn {
  font-size: 12.5px;
  line-height: 1.2;
}
/* Botón “Ver cuenta” que flota abajo en el celular */
.tk-jump {
  display: none;
}
@media (max-width: 900px) {
  .tk-jump {
    display: block;
    position: sticky;
    bottom: 12px;
    margin-top: 14px;
    text-align: center;
    background: var(--indigo);
    color: #fff;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 24px #1d1b3a44;
    z-index: 5;
  }
}
/* Selector desplegable de opciones del producto */
.msel {
  position: relative;
}
.msel-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.msel-btn i {
  font-style: normal;
  color: var(--mute);
}
.msel-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px #1d1b3a2e;
  padding: 10px;
}
.msel-list {
  max-height: 240px;
  overflow: auto;
  margin-top: 6px;
}
.msel-list .chk {
  margin: 0;
  padding: 8px 6px;
  border-radius: 8px;
}
.msel-list .chk:hover {
  background: var(--paper);
}
.msel-list .empty {
  padding: 16px;
}
.msel-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.chip-x {
  border: 0;
  background: 0;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: 0 0 0 4px;
}
#pgChips {
  margin-top: 8px;
}
/* Caja: categorías con imagen, resumen de la base y filas con 1, 2 o 3 botones según los parámetros */
.cchip.wimg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
}
.cchip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.tk-row.one,
.tk-row.n1 {
  grid-template-columns: 1fr;
}
.tk-row.n2 {
  grid-template-columns: 1fr 1fr;
}
.tk-row.n3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.base-sum {
  margin-top: 14px;
  background: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
}
.base-sum .rc-l {
  padding: 4px 0;
}
.base-sum .big {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
}
.x-close {
  font-size: 18px;
  line-height: 1;
  padding: 6px 11px;
}
.msel-pop {
  position: static;
  margin-top: 6px;
  box-shadow: 0 10px 24px #1d1b3a1f;
}
/* ---- Módulos de la caja: barra de módulos, notificaciones, meseros, domicilios, rastreo, créditos y gastos ---- */
.cj-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: -2px 0 18px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cj-nav button {
  border: 0;
  background: 0;
  padding: 9px 14px;
  border-radius: 9px;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  white-space: nowrap;
}
.cj-nav button:hover {
  background: var(--paper);
  color: var(--ink);
}
.cj-nav button.on {
  background: var(--indigo);
  color: #fff;
}
/* Contador de domicilios activos y campana de notificaciones */
.nbadge {
  background: var(--warn);
  color: #fff;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.bell {
  position: relative;
}
.bell em {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--bad);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.mv-row.unread {
  background: var(--warnbg2);
}
/* Círculos del mesero asignado y de abonos en las mesas */
.wdot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.cj-t .wdot {
  position: absolute;
  bottom: -8px;
  right: -8px;
  border: 2px solid #fff;
}
.ab-dot {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
/* Etiqueta “QR” en productos pedidos desde la carta QR */
.qr-tag {
  font-style: normal;
  font-size: 10.5px;
  background: var(--indbg);
  color: var(--indigo2);
  border-radius: 99px;
  padding: 1px 6px;
  font-weight: 700;
}
/* Encabezado de cada módulo de la caja */
.mod-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mod-head h1 {
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -1px;
}
.mod-head p {
  color: var(--mute);
  margin-top: 4px;
  max-width: 70ch;
}
/* Domicilios: tarjetas, cliente, total y acciones */
.dom-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
  padding: 14px;
}
.dom-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dom-card.st-camino {
  border-color: var(--indigo2);
}
.dom-card.st-entregado,
.dom-card.st-cancelado {
  opacity: 0.75;
}
.dom-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.dom-top b {
  font-family: 'Bricolage Grotesque';
  font-size: 18px;
  margin-right: 8px;
}
.dom-top .tag {
  margin-right: 4px;
}
.dom-c {
  margin-top: 4px;
  font-weight: 600;
}
.dom-c a {
  color: var(--indigo2);
}
.dom-tot {
  text-align: right;
}
.dom-tot b {
  font-size: 20px;
  font-family: 'Bricolage Grotesque';
}
.dom-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
/* Pasos de estado (domicilios y rastreo) */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  counter-reset: st;
}
.steps.three {
  grid-template-columns: repeat(3, 1fr);
  min-width: 300px;
  flex: 1;
}
.steps li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: center;
}
.steps button {
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 9px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--mute);
}
.steps li.done button {
  background: var(--mintbg);
  border-color: #bde9d9;
  color: var(--okfg);
}
.steps li.now button {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.steps small {
  font-size: 11px;
  color: var(--mute);
}
/* Buscador de clientes guardados y resultado del asistente IA */
.cust-res {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.cust-opt {
  text-align: left;
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.cust-opt:hover {
  border-color: var(--mint);
}
.cust-opt b {
  display: block;
}
.cust-opt small {
  color: var(--mute);
}
.ai-out {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid #e1dffb;
}
/* Rastreo: filas de pedidos y QR */
.trk-list {
  display: flex;
  flex-direction: column;
}
.trk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.trk:first-child {
  border-top: 0;
}
.trk > div:first-child {
  min-width: 180px;
}
.trk b {
  display: block;
}
.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.qr-box svg {
  width: 220px;
  height: 220px;
}
.rc-qr {
  margin-top: 8px;
}
.rc-qr svg {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto 2px;
}
/* Créditos: tarjetas con productos, abonos y saldo */
.cred-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.cred {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.cred.paid {
  opacity: 0.7;
}
.cred-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.cred-lines,
.cred-ab {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 13.5px;
}
/* Gastos: formulario en tres columnas */
.exp-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0 14px;
}
.exp-grid .row .btn {
  white-space: nowrap;
}
/* Lista de productos de la carta QR en Parámetros */
.qp-list {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px 12px;
}
.qp-cat {
  grid-column: 1/-1;
  margin-top: 10px;
  color: var(--indigo);
}
/* Tablet y celular para los módulos de la caja */
@media (max-width: 900px) {
  .dom-list {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .exp-grid {
    grid-template-columns: 1fr;
  }
}

/* Mosaico de categorías (Parámetros › Caja › Vista de categorías: mosaico). Se usa en la caja y en Mesero. */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ctile {
  --cc: var(--indigo);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-bottom: 5px solid var(--cc);
  border-radius: 16px;
  background: var(--card);
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ctile:hover {
  border-color: var(--cc);
}
.ctile:active {
  transform: scale(0.98);
}
.ctile img,
.ctile .ph {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}
.ctile b {
  padding: 0 12px;
  font-size: 16px;
}
.ctile small {
  padding: 0 12px;
  color: var(--mute);
}
[data-mz-dev='cel'] .cat-tiles {
  grid-template-columns: 1fr 1fr;
}
[data-mz-dev='cel'] .ctile b {
  font-size: 18px;
}

/* =====================================================================
   REDISEÑO VISUAL DE LA CAJA (v16)
   Todo va con la clase .cjx para no cambiar KDS, Mesero, Inventarios ni Marcaciones,
   que comparten .cj-top, .cj-nav y .cj-grid. Solo presentación: los botones conservan su data-act.
   ===================================================================== */
.ic {
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: -3px;
}
/* Botones con icono + texto corto */
.cjx .btn,
.cjx.cj-nav button,
.cjx .seg button,
.cj-tools .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cjx .btn:focus-visible,
.cjx.cj-nav button:focus-visible,
.cjx .seg button:focus-visible,
.cj-est button:focus-visible,
.cjx-card:focus-visible,
.cj-tools .pill:focus-visible,
.crumbs .link:focus-visible {
  outline: 3px solid var(--indigo2);
  outline-offset: 2px;
}
.cjx .btn:disabled,
.cjx.cj-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Encabezado ---- */
.cj-top.cjx {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px #1d1b3a0d, 0 6px 18px -12px #1d1b3a33;
  gap: 10px 16px;
}
.cj-top.cjx .crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cj-top.cjx .crumbs .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.cj-cur {
  font-weight: 700;
  color: var(--indigo2);
}
.cj-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 99px;
  background: var(--mintbg);
  color: var(--okfg);
  font-weight: 600;
  font-size: 13px;
}
.cj-state b {
  color: var(--okfg);
}
.cj-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px #22b48a33;
}
.cj-shift .btn.sm {
  min-height: 40px;
  padding-inline: 12px;
}
.cj-shift .btn.ghost:hover {
  background: var(--indbg);
  border-color: var(--indigo2);
}
.cj-shift .bell .ic {
  width: 20px;
  height: 20px;
}
/* Cerrar caja: acción crítica, destacada pero con el mismo evento */
.cj-close {
  background: var(--bad);
  border: 1.5px solid var(--bad);
  color: #fff;
}
.cj-close:hover {
  background: var(--badfg);
  border-color: var(--badfg);
}

/* ---- Menú desplegable de módulos (en el encabezado) ---- */
.cj-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.cj-modwrap {
  position: relative;
}
.cj-modbtn {
  min-height: 40px;
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.cj-modbtn:hover {
  background: var(--indigo2);
  border-color: var(--indigo2);
}
.cj-modbtn[aria-expanded='true'] .ic:last-child {
  transform: rotate(180deg);
}
.cj-modpanel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 260px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px #1d1b3a55;
}
.cj-modpanel[hidden] {
  display: none;
}
.cj-modpanel button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cj-modpanel button .ic {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--indigo2);
}
.cj-modpanel button:hover {
  background: var(--paper);
}
.cj-modpanel button:focus-visible {
  outline: 3px solid var(--indigo2);
  outline-offset: -2px;
}
.cj-modpanel button.on {
  background: var(--indbg);
  color: var(--indigo2);
  box-shadow: inset 3px 0 0 var(--indigo2);
}
.cj-modpanel button.on .ic {
  background: var(--indigo2);
  color: #fff;
}
.cj-modpanel .nbadge {
  margin-left: auto;
}
@media (max-width: 520px) {
  .cj-modpanel {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
  }
  .cj-shift .cj-state {
    flex: 1 1 100%;
  }
}
@media (max-width: 820px) {
  .cj-top.cjx {
    padding: 10px;
  }
  .cj-shift {
    width: 100%;
  }
  .cj-shift .cj-state {
    flex: 1 1 100%;
  }
}

/* ---- Filtros y herramientas ---- */
.cj-tools .seg button,
.cj-tools .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
}
.cj-tools .pill small {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--indbg);
  color: var(--indigo2);
  font-weight: 700;
  font-size: 11.5px;
}
.cj-tools .pill.on small {
  background: #ffffff2e;
  color: #fff;
}
.cjx .seg button {
  min-height: 40px;
}
.cjx .seg button.on {
  background: var(--indigo2);
}
.cj-est {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px 0;
}
.cj-est button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--mute);
  font-weight: 600;
  cursor: pointer;
}
.cj-est button:hover {
  border-color: var(--indigo2);
  color: var(--ink);
}
.cj-est button.on {
  background: var(--indbg);
  border-color: var(--indigo2);
  color: var(--indigo2);
}
.cj-est small {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--paper);
  text-align: center;
  font-weight: 700;
}
.cj-tools ~ .legend .lg {
  border-radius: 50%;
  border-color: var(--indigo2);
}
.cj-tools ~ .legend .lg.ocup {
  background: var(--mint);
  border-color: var(--mint);
}
.cj-tools ~ .legend .lg.pend {
  background: var(--warn);
  border-color: var(--warn);
}

/* ---- Mapa: mesas con los colores de estado ---- */
.cj-map .cj-t {
  border-color: var(--indigo2);
  box-shadow: 0 2px 8px -4px #1d1b3a55;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cj-map .cj-t:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px #1d1b3a66;
}
.cj-map .cj-t.st-ocup {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.cj-map .cj-t.st-ocup small {
  color: #e9fbf5;
}
.cj-map .cj-t.st-pend {
  border-width: 2px;
}

/* ---- Tarjetas de mesa (vista Mesas) ---- */
.cj-grid.cjx {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
}
.cjx-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'i m g' 'i t g' 'x x x';
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 112px;
  padding: 14px;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--indigo2);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 1px 2px #1d1b3a0d, 0 8px 20px -14px #1d1b3a40;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.cj-grid.cjx .cjx-card {
  display: grid;
  flex-direction: unset;
  justify-content: initial;
  border-radius: 16px;
}
.cjx-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px #1d1b3a55;
  border-color: var(--indigo2);
}
.cjx-card:active {
  transform: translateY(0);
}
.ct-ico {
  grid-area: i;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--indbg);
  color: var(--indigo2);
}
.ct-ico .ic {
  width: 26px;
  height: 26px;
}
.ct-main {
  grid-area: m;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.cj-grid.cjx .cjx-card .ct-main b {
  font-size: 16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: var(--indbg);
  color: var(--indigo2);
}
.ct-badge .ic {
  width: 14px;
  height: 14px;
}
.cjx-card .tt {
  grid-area: t;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--okfg);
  font-family: 'Bricolage Grotesque', inherit;
}
.ct-meta {
  grid-area: x;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--mute);
}
.ct-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ct-meta .ic {
  width: 14px;
  height: 14px;
}
.ct-go {
  grid-area: g;
  color: var(--mute);
}
.cjx-card:hover .ct-go {
  color: var(--indigo2);
}
.cjx-card.st-ocup {
  background: var(--card);
  color: var(--ink);
  border-left-color: var(--mint);
}
.cjx-card.st-ocup .ct-ico {
  background: var(--mintbg);
  color: var(--okfg);
}
.cjx-card.st-ocup .ct-badge {
  background: var(--mintbg);
  color: var(--okfg);
}
.cjx-card.st-ocup small,
.cjx-card.st-ocup .ct-meta {
  color: var(--mute);
}
.cjx-card.st-pend {
  background: var(--warnbg2);
  border-color: var(--warn);
  border-left-color: var(--warn);
}
.cjx-card.st-pend .ct-ico,
.cjx-card.st-pend .ct-badge {
  background: var(--warnbg);
  color: var(--warnfg);
}
.cjx-card.st-pend .tt {
  color: var(--warnfg);
}
.cj-grid.cjx .cjx-card .pend-dot {
  top: -6px;
  right: -6px;
}
.cj-grid.cjx .cjx-card .ab-dot {
  top: -7px;
  left: -7px;
}
@media (max-width: 520px) {
  .cj-grid.cjx {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .cjx-card {
    min-height: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cjx-card,
  .cj-map .cj-t,
  .cj-nav.cjx-side button .ic {
    transition: none;
  }
  .cjx-card:hover {
    transform: none;
  }
}

/* ---- Pantalla de venta: categorías a la izquierda, productos al centro, cuenta a la derecha ---- */
.pos.cjx {
  grid-template-columns: 250px minmax(0, 1fr) 390px;
  height: var(--pos-h, auto);
  min-height: 360px;
  align-items: stretch;
}
.pos-cats {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 92px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px #1d1b3a0d, 0 6px 18px -12px #1d1b3a33;
  overflow: hidden;
}
.cs-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  color: var(--mute);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 8px 10px;
  overflow-y: auto;
}
.cs-item {
  --cc: var(--indigo2);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-radius: 11px;
  background: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cs-item:hover {
  background: var(--paper);
}
.cs-item:focus-visible {
  outline: 3px solid var(--indigo2);
  outline-offset: -2px;
}
.cs-ic,
.cs-img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
}
.cs-ic {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--cc);
}
.cs-ic .ic {
  width: 19px;
  height: 19px;
}
.cs-img {
  object-fit: cover;
}
.cs-n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-item small {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--mute);
  font-weight: 700;
  font-size: 11.5px;
  text-align: center;
}
.cs-item.on {
  background: var(--indbg);
  color: var(--indigo2);
  box-shadow: inset 3px 0 0 var(--indigo2);
}
.cs-item.on .cs-ic {
  background: var(--indigo2);
  color: #fff;
}
.cs-item.on small {
  background: var(--indigo2);
  color: #fff;
}
/* Tarjetas de producto */
.pos.cjx .prod-grid {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
}
.pos.cjx .pcard {
  border-radius: 16px;
  padding-bottom: 12px;
  box-shadow: 0 1px 2px #1d1b3a0d, 0 8px 20px -14px #1d1b3a40;
}
.pos.cjx .pcard:hover {
  transform: translateY(-2px);
  border-color: var(--indigo2);
  box-shadow: 0 10px 24px -12px #1d1b3a55;
}
.pos.cjx .pcard:focus-visible {
  outline: 3px solid var(--indigo2);
  outline-offset: 2px;
}
.pos.cjx .pcard img,
.pos.cjx .pcard .ph {
  height: auto;
  aspect-ratio: 4 / 3;
}
.pos.cjx .pcard b {
  padding: 10px 12px 0;
  font-size: 14.5px;
}
.pos.cjx .pcard .pr {
  padding: 3px 12px 0;
  color: var(--okfg);
  font-size: 15px;
  font-weight: 800;
}
.pos.cjx .pcard em.inc-tag {
  top: 38px;
}
.pos.cjx .pcard:has(em.out) img,
.pos.cjx .pcard:has(em.out) .ph {
  opacity: 0.55;
}
@media (max-width: 1280px) {
  .pos.cjx {
    grid-template-columns: 220px minmax(0, 1fr) 350px;
  }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .pos.cjx {
    grid-template-columns: 196px minmax(0, 1fr) 320px;
  }
}
/* Tablet vertical y celular: las categorías pasan arriba como una franja que se desliza */
@media (max-width: 900px) {
  .pos.cjx {
    grid-template-columns: 1fr;
  }
  .pos-cats {
    position: static;
    max-height: none;
    border-radius: 14px;
  }
  .cs-h {
    display: none;
  }
  .cs-list {
    flex-direction: row;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .cs-item {
    flex: none;
    min-height: 46px;
    padding: 5px 12px 5px 6px;
    box-shadow: none;
  }
  .cs-item.on {
    box-shadow: inset 0 -3px 0 var(--indigo2);
  }
  .cs-n {
    display: block;
    white-space: nowrap;
  }
}
.pos.cjx .pos-search {
  margin-bottom: 14px;
}
.pos.cjx .pcard img,
.pos.cjx .pcard .ph {
  aspect-ratio: 3 / 2;
}

/* ---- Venta: ajustes de lectura, productos sin foto y cuenta con el botón Pagar siempre a la vista (v16.2) ---- */
.pos-cats {
  position: static;
  max-height: none;
  height: 100%;
  min-height: 0;
}
.cs-list {
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}
.cs-item {
  align-items: center;
  min-height: 50px;
  font-size: 13.5px;
  line-height: 1.25;
}
.cs-n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  word-break: break-word;
}
.cs-item small {
  flex: none;
}
.cs-item.on {
  font-weight: 700;
}
/* Centro: la búsqueda queda fija y la lista de productos se desplaza sola */
.pos.cjx .pos-menu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.pos.cjx .pos-search {
  flex: none;
}
.pos.cjx #cjGrid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 4px 12px 2px;
  overscroll-behavior: contain;
}
/* Tarjetas: sin bloques de colores; altura uniforme, nombre en máximo dos líneas y precio abajo */
.pos.cjx .pcard {
  background: var(--card);
}
.pos.cjx .pcard .ph {
  background: var(--soft) !important;
  color: var(--indigo2);
  border-bottom: 1px solid var(--line);
}
.pos.cjx .pcard .ph .ic {
  width: 34px;
  height: 34px;
  opacity: 0.55;
}
.pos.cjx .pcard img,
.pos.cjx .pcard .ph {
  aspect-ratio: 16 / 10;
  height: auto;
}
.pos.cjx .pcard b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2.5em + 10px);
}
.pos.cjx .pcard .pr {
  margin-top: auto;
  padding-top: 4px;
}
.pos.cjx .pcard.in {
  border-color: var(--indigo2);
  box-shadow: 0 0 0 2px #3a37902e, 0 8px 20px -14px #1d1b3a40;
}
.pc-n {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--indigo2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}
/* Cuenta: encabezado y resumen fijos; solo la lista de productos se desplaza; Pagar anclado */
.pos.cjx .pos-ticket {
  position: static;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 1px 2px #1d1b3a0d, 0 6px 18px -12px #1d1b3a33;
}
.pos.cjx .tk-head,
.pos.cjx .tk-tip,
.pos.cjx .tk-tot,
.pos.cjx .pl-bar {
  flex: none;
}
.pos.cjx .tk-lines {
  flex: 1 1 0;
  min-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pos.cjx .tk-acts {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 6px;
  padding: 10px 14px 0;
}
.pos.cjx .tk-acts .btn {
  padding-block: 9px;
}
.pos.cjx .tk-quick .btn {
  min-height: 38px;
}
.pos.cjx .tk-pay {
  position: sticky;
  bottom: 0;
  flex: none;
  margin: 2px 0 0;
  padding: 14px !important;
  font-size: 18px;
  box-shadow: 0 -10px 14px -8px var(--soft);
}
.pos.cjx .tk-acts::after {
  content: '';
  flex: none;
  height: 10px;
}
.pos.cjx .tk-line {
  padding-block: 9px;
}
.pos.cjx .tk-tot .b {
  font-size: 22px;
}
/* Tablet vertical y celular: sin altura fija; la cuenta se muestra completa como antes */
@media (max-width: 900px) {
  .pos.cjx {
    height: auto;
    min-height: 0;
  }
  .pos-cats {
    height: auto;
  }
  .pos.cjx .pos-menu,
  .pos.cjx .pos-ticket {
    height: auto;
  }
  .pos.cjx #cjGrid {
    overflow: visible;
    padding: 0;
  }
  .pos.cjx .tk-lines {
    flex: none;
    overflow: visible;
  }
  .pos.cjx .tk-acts {
    overflow: visible;
  }
}
/* Pantallas de poca altura: la página se desplaza y la cuenta queda fija a la vista, con Pagar anclado */
@media (max-height: 760px) and (min-width: 901px) {
  .pos.cjx {
    height: auto;
    min-height: 0;
    align-items: start;
  }
  .pos-cats,
  .pos.cjx .pos-ticket {
    position: sticky;
    top: 8px;
    height: auto;
    max-height: calc(100dvh - 16px);
  }
  .pos.cjx .pos-menu {
    height: auto;
  }
  .pos.cjx #cjGrid {
    overflow: visible;
  }
  .pos.cjx .tk-lines {
    min-height: 80px;
  }
}
/* Pagar anclado: deshabilitado se ve apagado pero sin transparencia, para no dejar ver lo que pasa por detrás */
.pos.cjx .tk-pay:disabled {
  opacity: 1;
  background: #a8e0d0;
  background: color-mix(in srgb, var(--mint) 40%, var(--soft));
  color: #fff;
}

/* ---- Cuenta: acciones de pago arriba (fijas), productos y totales abajo (v16.3) ---- */
.pos.cjx .tk-acts {
  flex: none;
  overflow: visible;
  gap: 7px;
  padding: 10px 14px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.pos.cjx .tk-acts::after {
  display: none;
}
.pos.cjx .tk-pay {
  position: static;
  box-shadow: none;
  margin: 0;
}
.pos.cjx .tk-acts .btn,
.tk-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pos.cjx .tk-lines {
  flex: 1 1 0;
  min-height: 80px;
  border-bottom: 1px solid var(--line);
}
.pos.cjx .tk-tip {
  padding: 8px 14px;
}
.tk-sec {
  flex: none;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.tk-sec .btn {
  width: 100%;
}
/* Pagos rápidos: botones compactos con el icono del medio de pago configurado */
.tq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 5px;
}
.tk-quick .tq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.tk-quick .tq .ic {
  width: 20px;
  height: 20px;
  color: var(--indigo2);
}
.tk-quick .tq:hover:not(:disabled) {
  border-color: var(--mint);
  background: var(--mintbg);
}
.tk-quick .tq:hover:not(:disabled) .ic {
  color: var(--okfg);
}
.tk-quick .tq span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .pos.cjx .tk-lines {
    flex: none;
  }
}

/* ---- Plano único del restaurante: todas las zonas en un solo mapa ---- */
.map.map-uni {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  overflow: hidden;
  touch-action: auto;
  background: var(--soft);
}
.zone {
  position: relative;
  height: 340px;
  background:
    repeating-linear-gradient(0deg, #0000 0 31px, var(--line) 31px 32px),
    repeating-linear-gradient(90deg, #0000 0 31px, var(--line) 31px 32px);
  border-right: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
}
.zone-t {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 1;
  margin: 0;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--indbg);
  color: var(--indigo2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.map-uni .tbl {
  cursor: pointer;
  touch-action: manipulation;
}
@media (max-width: 560px) {
  .zone {
    height: 340px;
  }
  .map-uni .tbl {
    min-width: 66px;
    padding: 6px 7px;
  }
  .map-uni .tbl.barra {
    min-width: 120px;
  }
}

/* ---- Cierre de caja: base informativa y comprobantes del cierre ciego ---- */
.cl-base {
  padding: 8px 12px;
  margin: 4px 0 10px;
  border-radius: 10px;
  background: var(--indbg);
  color: var(--indigo2);
}
.cl-base small {
  color: inherit;
}
.tag.t-pendiente {
  background: var(--warnbg);
  color: var(--warnfg);
}
.cmp-box {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.cmp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.cmp-tot {
  font-weight: 700;
  color: var(--okfg);
  font-size: 13px;
}
.cmp-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.cmp-th {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.cmp-gal .cmp-th {
  cursor: zoom-in;
}
.cmp-gal figure:has(.big) {
  flex-basis: 100%;
}
.cmp-gal .cmp-th.big {
  width: min(100%, 460px);
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  cursor: zoom-out;
}
.cmp-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.cmp-help {
  display: block;
  margin-top: 6px;
}
.cmp-view {
  margin-top: 10px;
}
.cmp-gal {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cmp-gal figure {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
}
.cmp-gal .cmp-th {
  width: 84px;
  height: 84px;
}

/* ---- Cuenta compacta: más espacio para la lista de productos (v16.3) ---- */
.pos.cjx .tk-acts {
  gap: 6px;
  padding: 8px 12px 10px;
}
.pos.cjx .tk-acts .btn {
  padding-block: 7px;
  font-size: 13.5px;
  white-space: nowrap;
}
.pos.cjx .tk-confirm {
  padding-block: 9px;
}
.pos.cjx .tk-quick small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pos.cjx .tq-grid {
  margin-top: 0;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}
.pos.cjx .tk-quick .tq {
  min-height: 42px;
  padding: 4px 2px;
  gap: 2px;
  font-size: 11.5px;
}
.pos.cjx .tk-quick .tq .ic {
  width: 18px;
  height: 18px;
}
.pos.cjx .tk-pay {
  padding: 11px !important;
  font-size: 17px;
}
.pos.cjx .tk-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.pos.cjx .tk-tip .tip-chips {
  margin-top: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.pos.cjx .tk-tip .tchip {
  padding: 4px 9px;
  font-size: 12.5px;
  white-space: nowrap;
}
.pos.cjx .tk-tot {
  padding: 5px 14px;
}
.pos.cjx .tk-tot > div {
  padding: 1px 0;
  font-size: 13px;
}
.pos.cjx .tk-tot .b {
  font-size: 19px;
}
.pos.cjx .tk-sec {
  padding: 6px 12px 8px;
}
.pos.cjx .tk-sec .tk-row {
  display: flex;
  gap: 6px;
}
.pos.cjx .tk-sec .btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 12px;
}

/* ---- «Volver a mesas»: icono de mesa y color propio para distinguirlo de las demás acciones ---- */
.pos.cjx .tk-back.tk-mesas {
  background: var(--indbg, #ecebff);
  border-color: var(--indigo2);
  color: var(--indigo2);
  font-weight: 700;
}
.pos.cjx .tk-back.tk-mesas .ic {
  color: var(--indigo2);
}
.pos.cjx .tk-back.tk-mesas:hover:not(:disabled) {
  background: var(--indigo2);
  color: #fff;
}
.pos.cjx .tk-back.tk-mesas:hover:not(:disabled) .ic {
  color: #fff;
}

/* ---- v16.6 · Propina/descuento variable: % y $ son botones independientes y nada se desborda ---- */
.var-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.vm-btns {
  display: flex;
  gap: 8px;
}
.vm {
  min-width: 46px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 1px 2px #1d1b3a14;
}
.vm.on {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.vm:focus-visible {
  outline: 2px solid var(--indigo2);
  outline-offset: 2px;
}
.var-row .inp {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 340px) {
  .var-row {
    grid-template-columns: 1fr;
  }
}
/* La propina se acomoda en varias líneas: ni los botones ni el campo salen de la cuenta */
.pos.cjx > * {
  min-width: 0;
}
.pos.cjx .tk-tip {
  flex-wrap: wrap;
  align-items: flex-start;
}
.pos.cjx .tk-tip > span {
  flex: 0 0 100%;
}
.pos.cjx .tk-tip > div {
  flex: 1 1 100%;
  min-width: 0;
}
.pos.cjx .tk-tip .tip-chips {
  flex-wrap: wrap;
  overflow: visible;
}
.pos.cjx .tk-tot > div > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- v16.6 · Ancla de mesa y mover todo ---- */
.tk-head-b {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: none;
}
.pos.cjx .tk-pin {
  gap: 5px;
}
.pos.cjx .tk-pin .ic {
  width: 15px;
  height: 15px;
}
.pos.cjx .tk-pin.on {
  background: var(--amber, #f5a623);
  border-color: var(--amber, #f5a623);
  color: #1d1b3a;
  font-weight: 700;
}
.mv-all {
  margin: 4px 0 10px;
}
.mv-all .btn {
  width: 100%;
  justify-content: center;
}

/* ---- v16.6 · Categorías desplegables en celular y tablet vertical ---- */
.cs-tg {
  display: none;
}
@media (max-width: 900px) {
  .pos-cats {
    height: auto;
  }
  .cs-tg {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 6px 14px 6px 10px;
    border: 0;
    border-radius: 14px;
    background: var(--card);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .cs-tg-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--indbg, #ecebff);
    color: var(--indigo2);
  }
  .cs-tg-t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .cs-tg-t small {
    color: var(--mute);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .cs-tg-t b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
  }
  .cs-tg > .ic {
    flex: none;
    transition: transform 0.15s;
  }
  .pos-cats.open .cs-tg > .ic {
    transform: rotate(180deg);
  }
  /* Plegada solo se ve el botón; desplegada, las categorías en columna con su propio desplazamiento */
  .pos-cats .cs-list {
    display: none;
  }
  .pos-cats.open .cs-list {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 46vh;
    padding: 4px 8px 10px;
    border-top: 1px solid var(--line);
  }
  .pos-cats.open .cs-item {
    flex: none;
    width: 100%;
  }
  .pos-cats.open .cs-item.on {
    box-shadow: none;
    background: var(--indbg, #ecebff);
  }
}

/* ---- v16.6 · Stock informativo de la caja ---- */
.pcard em.cq {
  left: auto;
  right: 8px;
  background: var(--okbg, #e3f6ec);
  color: var(--okfg, #146c43);
}
.st-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
}
.st-out input {
  width: 18px;
  height: 18px;
}

/* v16.6 · Nombres de mesa completos en las tarjetas de celular: se acomodan en dos líneas en vez de cortarse con «…» */
.cj-grid.cjx .cjx-card .ct-main b {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}