/**
 * 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;
}