/* Piezas propias del punto de venta.
   Se apoyan en los mismos tokens de base.css: papel, tinta y dorado.
   Lo único que cambia frente al portal es el tamaño: acá se trabaja con el
   dedo, de pie y con prisa, así que los objetivos táctiles son más grandes. */

/* ================================================================= SALÓN */

.salon { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.salon-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.salon-lienzo { overflow-y: auto; padding: 20px 20px 40px; flex: 1; }

.conteos { display: flex; gap: 16px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.conteo { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.conteo b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.conteo i { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.conteo.libre i { background: var(--ok); }
.conteo.ocupada i { background: var(--accent); }
.conteo.cuenta i { background: var(--info); }

.area-t { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.area-t h3 { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.area-t .regla { flex: 1; height: 1px; background: var(--line); }
.area-t .n { font-size: 12px; color: var(--ink-3); }
.area-bloque + .area-bloque { margin-top: 26px; }

/* --- Tarjeta de mesa ---------------------------------------------------
   La metáfora del papel, llevada al salón: la mesa libre es el escritorio
   vacío (hundido, sin sombra); la mesa atendida es una hoja levantada sobre
   él. El estado no se grita con una franja de color: se lee en el relieve,
   en un punto pequeño y en la jerarquía de las cifras.                    */

.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; }

.mesa {
  position: relative; display: flex; flex-direction: column; min-height: 136px;
  padding: 14px 15px 13px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mesa::after {                       /* filo superior de color, del ancho justo */
  content: ''; position: absolute; left: 15px; top: -1px; width: 26px; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--estado, transparent);
}
.mesa:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 10px 22px -12px rgba(26, 24, 20, .38), var(--shadow); }
.mesa:active { transform: translateY(0); }
.mesa:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.mesa[data-estado="OCUPADA"] { --estado: var(--accent); }
.mesa[data-estado="CUENTA"] { --estado: var(--info); border-color: rgba(27, 84, 160, .28); }
.mesa[data-estado="BLOQUEADA"] { --estado: var(--line-2); }

/* Libre: hoja en blanco, hundida en el escritorio. */
.mesa[data-estado="LIBRE"] { background: var(--mesa-libre); box-shadow: none; min-height: 118px; }
.mesa[data-estado="LIBRE"]:hover { background: var(--surface); box-shadow: var(--shadow); }
:root { --mesa-libre: #f3f1ea; }
:root[data-tema="oscuro"] { --mesa-libre: #17150f; }

/* La mesa que atiende quien mira: un hilo de latón en el canto izquierdo. */
.mesa.mia { box-shadow: var(--shadow), inset 2px 0 0 var(--accent); }

.mesa-cab { display: flex; align-items: baseline; gap: 8px; }
.mesa-codigo { font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.mesa-cap { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mesa-cap svg { vertical-align: -2px; margin-right: 3px; opacity: .7; }

.mesa-sep { height: 1px; background: var(--line); margin: 11px 0 10px; }

.mesa-quien { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mesa-quien .ini {
  width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--mute-bg); color: var(--ink-2);
}
.mesa.mia .mesa-quien .ini { background: var(--accent-soft); color: var(--accent); }
.mesa-quien b { font-size: 12.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-det { margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }

.mesa-pie { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2px 10px; }
.mesa-total { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.025em; white-space: nowrap; line-height: 1.1; }
.mesa-total small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-right: 3px; }
.mesa-tiempo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mesa-tiempo svg { flex: none; opacity: .8; }
.mesa-tiempo[data-calor="tibio"] { color: var(--warn); font-weight: 500; }
.mesa-tiempo[data-calor="caliente"] { color: var(--bad); font-weight: 600; }

/* Estado en texto: pequeño, en versalitas, sin gritar. */
.mesa-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.mesa-estado i { width: 6px; height: 6px; border-radius: 50%; background: var(--estado, var(--line-2)); flex: none; }
.mesa-estado.ancho { flex: 1 0 100%; white-space: nowrap; margin-bottom: 2px; }
.mesa[data-estado="LIBRE"] .mesa-estado i { background: var(--ok); opacity: .55; }
.mesa[data-estado="CUENTA"] .mesa-estado { color: var(--info); }

.mesa-aguja {
  position: absolute; top: 11px; right: 13px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 20px; background: var(--obs); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--surface);
}

/* Lo que ya espera en la ventanilla. Va debajo de la aguja de "sin enviar":
   son dos avisos distintos y el mesero tiene que poder verlos juntos. */
.mesa-listo {
  position: absolute; top: 33px; right: 13px; height: 18px; padding: 0 6px; gap: 3px;
  border-radius: 20px; background: var(--ok); color: #fff;
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--surface);
}

/* El cliente llamó desde su celular (módulo Carta QR). Es la única señal de la
   tarjeta que viene de la mesa y no del sistema, así que ocupa su propia franja
   en vez de competir por la esquina con las otras agujas. */
.mesa-llamado {
  display: flex; align-items: center; gap: 5px;
  margin: 9px 0 0; padding: 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.mesa-llamado[data-calor="tibio"] { background: var(--warn-bg); color: var(--warn); }
.mesa-llamado[data-calor="caliente"] {
  background: var(--obs-solid); color: #fff;
  animation: qr-latir 1.6s ease-in-out infinite;
}
@keyframes qr-latir { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mesa-llamado[data-calor="caliente"] { animation: none; } }

/* ================================================================= COMANDA */

.orden { display: grid; grid-template-columns: minmax(0, 1fr) 380px; flex: 1; min-height: 0; }

.carta { display: flex; flex-direction: column; min-height: 0; }
.carta-barra { display: flex; gap: 10px; align-items: center; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.carta-tabs { padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.productos { flex: 1; overflow-y: auto; padding: 16px 20px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; align-content: start; }

.producto {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 12px 13px;
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); transition: border-color .12s, transform .12s;
}
.producto:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.producto:disabled { opacity: .55; cursor: default; transform: none; }
.producto .nom { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.producto .pie { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.producto .precio { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.producto .dest { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.producto.puesto { border-color: var(--accent); }
.producto .cuenta {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 20px;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
:root[data-tema="oscuro"] .producto .cuenta { background: var(--accent); color: #1a1814; }
@keyframes toque { from { box-shadow: 0 0 0 0 var(--ring); } to { box-shadow: 0 0 0 9px transparent; } }
.producto.recien { animation: toque .4s ease-out; }

/* --- panel de la comanda --- */

.comanda { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.comanda-cab { flex: none; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.comanda-cab .l1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.comanda-mesa { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.comanda-cab .lugar { font-size: 12.5px; color: var(--ink-3); }
.comanda-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.comanda-meta span { display: inline-flex; align-items: center; gap: 5px; }
.comanda-meta svg { color: var(--ink-3); }
.comanda-meta .tocable { cursor: pointer; border-bottom: 1px dashed var(--line-2); }

/*
   `min-height: 0` es lo que hace que esto funcione, y su ausencia fue un error
   real: un hijo de flex no baja de la altura de su contenido salvo que se le
   diga, así que `overflow-y: auto` no llegaba a actuar nunca. La lista crecía
   con cada producto, empujaba al pie fuera de la caja de la comanda y el botón
   de Enviar terminaba por debajo del borde de la pantalla. En un teléfono de
   640 px de alto quedaba 84 px fuera: el mesero no podía mandar la comanda.
*/
.comanda-items { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 12px; }
.grupo-t {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.grupo-t .regla { flex: 1; height: 1px; background: var(--line); }
.grupo.nuevo .grupo-t { color: var(--accent); }
.grupo.nuevo .grupo-t .regla { background: var(--accent-soft); }

.com-linea {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.com-linea:last-child { border-bottom: 0; }
.com-linea .c { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--accent); }
.com-linea .n { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.com-linea .nota { font-size: 12px; color: var(--info); margin-top: 2px; }
.com-linea .uni { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; }
.com-linea .i { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.com-linea .acc { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px; }
.com-linea.anulada .n, .com-linea.anulada .i { text-decoration: line-through; color: var(--ink-3); }
.com-linea.anulada .c { color: var(--ink-3); }
.com-linea .motivo { font-size: 11.5px; color: var(--bad); margin-top: 2px; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.stepper button { width: 32px; height: 30px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
.stepper button:hover { background: var(--surface-2); color: var(--ink); }
.stepper span { min-width: 28px; text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 600; }

/* El pie no encoge ni se va: es donde esta el boton de Enviar. */
.comanda-pie { flex: none; border-top: 1px solid var(--line); padding: 14px 20px 18px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.comanda-pie .acciones { display: flex; flex-direction: column; gap: 8px; }
.comanda-pie .fila { display: flex; gap: 8px; }
.comanda-pie .fila > * { flex: 1; }

/* ================================================================= CAJA */

.caja { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.caja-cinta { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: stretch; flex-wrap: wrap; }
.caja-cinta .datos { display: flex; flex: 1; flex-wrap: wrap; }
.caja-cinta .d { padding: 11px 20px; border-right: 1px solid var(--line); min-width: 132px; }
.caja-cinta .d small { display: block; color: var(--ink-3); font-size: 11.5px; }
.caja-cinta .d b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.caja-cinta .d b.acento { color: var(--accent); }
.caja-cinta .d .mono { font-size: 14px; }
.caja-cinta .acciones { display: flex; align-items: center; gap: 8px; padding: 10px 20px; margin-left: auto; }

.caja-cuerpo { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1; min-height: 0; }

.cola { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.cola-cab { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.cola-cab h2 { font-size: 14.5px; }
.cola-lista { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.cola-t { padding: 14px 18px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.cuenta-fila {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%;
  padding: 12px 18px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.cuenta-fila:hover { background: var(--surface-2); }
.cuenta-fila[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.cuenta-fila .cod { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.cuenta-fila .qui { min-width: 0; }
.cuenta-fila .qui b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-fila .qui small { display: block; color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-fila .mto { text-align: right; }
.cuenta-fila .mto b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuenta-fila .mto small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cuenta-fila .mto small[data-calor="tibio"] { color: var(--warn); font-weight: 500; }
.cuenta-fila .mto small[data-calor="caliente"] { color: var(--bad); font-weight: 600; }
.cuenta-fila .parcial { grid-column: 2 / -1; font-size: 11.5px; color: var(--obs); }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
.cuenta-fila.nueva { animation: entra .22s ease; }

/* --- cobro --- */

.cobro { display: grid; grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); min-height: 0; }
.cobro-cuenta { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.cobro-cab { display: flex; align-items: flex-start; gap: 10px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line); }
.cobro-cab .tit { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.cobro-cab .sub { font-size: 12px; color: var(--ink-3); }
.cobro-items { flex: 1; overflow-y: auto; padding: 8px 18px; }
.cobro-items .l { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; font-size: 13px; }
.cobro-items .l .c { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.cobro-items .l .i { font-variant-numeric: tabular-nums; font-weight: 500; }
.cobro-pie { border-top: 1px solid var(--line); padding: 14px 18px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }

.cobro-panel { display: flex; flex-direction: column; min-height: 0; }
.cobro-total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.cobro-total small { display: block; color: var(--ink-3); font-size: 12px; }
.cobro-total .saldo b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cobro-total .prop { text-align: right; }
.cobro-total .prop b { font-size: 20px; font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.cobro-form { flex: 1; overflow-y: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.cobro-acciones { border-top: 1px solid var(--line); background: var(--surface); padding: 14px 22px; display: flex; flex-direction: column; gap: 8px; }

.metodos { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.metodo {
  min-height: 50px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-size: 13.5px; font-weight: 500; transition: border-color .12s, background .12s;
}
.metodo:hover { border-color: var(--ink-3); background: var(--surface-2); }
.metodo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.metodo small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.rapidos { display: flex; flex-wrap: wrap; gap: 7px; }
.rapido {
  height: 36px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.rapido:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.rapido.texto { font-family: var(--sans); }

.vuelto {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 18px; border-radius: var(--r); border: 1px solid #c3e0cd; background: var(--ok-bg);
}
.vuelto small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.vuelto p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.vuelto b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
.vuelto.falta { background: var(--bad-bg); border-color: #efc5c5; }
.vuelto.falta small, .vuelto.falta b { color: var(--bad); }
:root[data-tema="oscuro"] .vuelto { border-color: var(--ok); }
:root[data-tema="oscuro"] .vuelto.falta { border-color: var(--bad); }

.pagos-puestos { display: flex; flex-direction: column; gap: 7px; }
.pago-puesto {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.pago-puesto .n { flex: 1; font-weight: 500; }
.pago-puesto .ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.pago-puesto .m { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================================================================= ARQUEO */

.arqueo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.arq-fila { display: grid; grid-template-columns: 1fr 78px 86px; gap: 10px; align-items: center; font-size: 13px; }
.arq-fila .in { height: 32px; }
.arq-fila .sub { text-align: right; font-family: var(--mono); color: var(--ink-3); font-size: 12.5px; }

.dif {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2);
}
.dif small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dif p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.dif b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dif[data-signo="cuadra"] { background: var(--ok-bg); border-color: #c3e0cd; }
.dif[data-signo="cuadra"] small, .dif[data-signo="cuadra"] b { color: var(--ok); }
.dif[data-signo="falta"] { background: var(--bad-bg); border-color: #efc5c5; }
.dif[data-signo="falta"] small, .dif[data-signo="falta"] b { color: var(--bad); }
.dif[data-signo="sobra"] { background: var(--warn-bg); border-color: #efd9a8; }
.dif[data-signo="sobra"] small, .dif[data-signo="sobra"] b { color: var(--warn); }

/* ================================================================= RESPONSIVO */

@media (max-width: 1180px) {
  .orden { grid-template-columns: minmax(0, 1fr) 330px; }
  .caja-cuerpo { grid-template-columns: 300px minmax(0, 1fr); }
  .cobro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cobro-cuenta { border-right: 0; border-bottom: 1px solid var(--line); max-height: 32vh; }
}
@media (max-width: 860px) {
  /*
     EN EL CELULAR LA PANTALLA ES UNA SOLA, Y SE DESLIZA ENTERA.

     Dos columnas convertidas en dos cajas apiladas, cada una con su propio
     scroll, es lo que no funcionaba. En un teléfono de 375x812 el reparto
     quedaba así: catálogo 185 px (con 1140 de productos dentro), cabecera de
     la comanda 129, lista del pedido 112 (con 145 dentro) y pie 230. O sea
     359 px congelados — casi la mitad de la pantalla — para mostrar una fila
     de productos y un renglón del pedido. Y el mesero no podía bajar el marco
     para ver más, porque el marco era justamente lo fijo.

     Dos scrolls peleando por 763 px no se arreglan repartiéndolos mejor: en un
     teléfono sobra uno. Ahora hay una sola tira que baja — carta, pedido,
     total y botones — y lo único clavado arriba es la cinta de pestañas, que
     es lo que el mesero usa para saltar de categoría mientras marca.
  */
  .orden { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /*
     `contents` y no `block`: la columna de la carta desaparece como caja y sus
     tres piezas pasan a colgar de `.orden`. No es un adorno. Un elemento
     `sticky` solo se pega mientras su caja contenedora está a la vista, y con
     la columna de por medio las pestañas se iban con ella apenas el catálogo
     terminaba: bajabas al pedido y ya no estaban. Colgando de la tira que se
     desliza, se quedan arriba de punta a punta.
  */
  .carta { display: contents; }
  .carta-tabs { position: sticky; top: 0; z-index: 3; }
  .productos {
    overflow: visible; flex: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 14px;
  }
  .comanda {
    border-left: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -14px rgba(26, 24, 20, .3);
  }
  /* La lista del pedido ya no tiene techo ni scroll propio: se estira con lo
     que haya y la página la acompaña. Un pedido de veinte productos se lee
     bajando, como cualquier cosa en un teléfono. */
  .comanda-items { overflow: visible; flex: none; }

  /* El dibujo y el párrafo de «sin productos» sobran en un teléfono: ocupan
     una pantalla entera para decir algo que el mesero ya sabe. */
  .comanda-items .empty { padding: 18px 16px; gap: 6px; }
  .comanda-items .empty svg { display: none; }
  .comanda-items .empty p { display: none; }
  .salon-lienzo { padding: 14px 14px 32px; }
  .mesas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .caja-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .caja-cuerpo.eligiendo .cola { display: none; }
  .arqueo-grid { grid-template-columns: 1fr; }
  /* La cinta del turno se vuelve una rejilla compacta: en el celular importan
     el dinero y el botón de cierre, no el detalle administrativo. */
  .caja-cinta .datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
  .caja-cinta .d { padding: 8px 14px; min-width: 0; border-bottom: 1px solid var(--line); }
  .caja-cinta .d:nth-child(even) { border-right: 0; }
  .caja-cinta .d:nth-child(2), .caja-cinta .d:nth-child(3), .caja-cinta .d:nth-child(5) { display: none; }
  .caja-cinta .acciones { width: 100%; padding: 10px 14px; }
  .caja-cinta .acciones .btn { flex: 1; }
}

/*
   Teléfonos bajos: la mayoría de los Android que lleva un mesero en el bolsillo.
   Ya no hay panel que recortar —la pantalla se desliza entera—, pero el marco
   de la comanda sigue valiendo apretarlo: cada píxel que no gasta la cabecera
   es un píxel de pedido que se ve sin bajar.
*/
@media (max-width: 860px) and (max-height: 760px) {
  .comanda-cab { padding: 10px 16px 8px; }
  .comanda-mesa { font-size: 19px; }
  .comanda-meta { margin-top: 6px; gap: 2px 12px; }
  .comanda-pie { padding: 10px 16px 12px; gap: 8px; }
  .comanda-pie .money-box .l { padding: 5px 0; }
  .comanda-items { padding: 2px 16px 8px; }
}

/* ================================================================= RESERVAS */

.franja {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.franja .regla { flex: 1; height: 1px; background: var(--line); }
.franja .n { font-weight: 500; letter-spacing: 0; }

.reserva {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%;
  padding: 11px 18px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.reserva:hover { background: var(--surface-2); }
.reserva[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.reserva .hora { font-family: var(--mono); }
.reserva .hora b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.reserva .hora small { display: block; font-size: 10.5px; color: var(--ink-3); }
.reserva[data-alerta="tolerancia"] .hora small { color: var(--warn); font-weight: 600; }
.reserva[data-alerta="vencida"] .hora small { color: var(--bad); font-weight: 600; }
.reserva[data-alerta="vencida"] { border-left-color: var(--bad); }
.reserva .quien { min-width: 0; }
.reserva .quien b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reserva .quien small { color: var(--ink-3); font-size: 12px; }
.reserva .marcas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reserva[data-estado="CANCELADA"] .quien b, .reserva[data-estado="NO_SHOW"] .quien b { text-decoration: line-through; color: var(--ink-3); }

/* Aviso de reserva dentro de la tarjeta de mesa del salón. */
.mesa-reserva {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 8px;
  border-radius: var(--r-sm); background: var(--info-bg); color: var(--info);
  font-size: 11px; font-weight: 600;
}
.mesa-reserva svg { flex: none; }
.mesa-reserva span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
:root[data-tema="oscuro"] .mesa-reserva { background: var(--info-bg); }

@media (max-width: 860px) {
  .reserva { grid-template-columns: 52px minmax(0, 1fr); }
  .reserva .marcas { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Compromiso de la reserva dentro de la comanda: el mesero ve cuánto falta
   para el mínimo mientras el grupo sigue pidiendo. */
.reserva-banner {
  margin: 0 20px 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--info);
  border-radius: var(--r-sm); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.reserva-banner .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.reserva-banner .l1 .mono { color: var(--ink-3); font-size: 11.5px; }
.reserva-banner .l1 b { font-weight: 600; }
.reserva-banner .barra { height: 5px; border-radius: 5px; background: var(--mute-bg); overflow: hidden; }
.reserva-banner .barra i { display: block; height: 100%; background: var(--obs); border-radius: 5px; transition: width .2s; }
.reserva-banner .barra i.ok { background: var(--ok); }
.reserva-banner .l2 { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================ CONFIGURACIÓN */

.cfg { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; align-items: start; }

.cfg-menu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.cfg-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--r-sm); background: none;
  text-align: left; color: var(--ink-2); font-weight: 500; font-size: 13.5px;
}
.cfg-menu button:hover { background: var(--surface-2); color: var(--ink); }
.cfg-menu button.on { background: var(--accent-soft); color: var(--ink); }
.cfg-menu button.on svg { color: var(--accent); }

.cfg-panel { min-width: 0; }

.cfg-grupo {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.cfg-grupo:first-child { margin-top: 0; }
.cfg-grupo .regla { flex: 1; height: 1px; background: var(--line); }
.cfg-grupo .n { font-weight: 500; letter-spacing: 0; text-transform: none; }

.cfg-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cfg-mesa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); text-align: left;
  transition: border-color .12s, background .12s;
}
.cfg-mesa:hover { border-color: var(--ink-3); background: var(--surface-2); }
.cfg-mesa b { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.cfg-mesa small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cfg-mesa[data-estado="LIBRE"] { border-left-color: var(--ok); }
.cfg-mesa[data-estado="OCUPADA"], .cfg-mesa[data-estado="CUENTA"] { border-left-color: var(--accent); }
.cfg-mesa[data-estado="BLOQUEADA"] { border-left-color: var(--warn); }
.cfg-mesa[data-estado="INACTIVA"] { border-left-color: var(--line-2); opacity: .6; }

.cfg-permisos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px;
  max-height: 46vh; overflow-y: auto; padding: 4px 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px;
}
.cfg-permisos-t {
  grid-column: 1 / -1; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.cfg-permisos-t:first-child { margin-top: 0; }
.cfg-permisos .check { align-items: flex-start; font-size: 13px; }
.cfg-permisos .hint { font-size: 10.5px; }

@media (max-width: 980px) {
  .cfg { grid-template-columns: 1fr; }
  .cfg-menu { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; scrollbar-width: none; }
  .cfg-menu::-webkit-scrollbar { display: none; }
  .cfg-menu button { width: auto; white-space: nowrap; }
}

/* ============================================================ FACTURACIÓN */
/* Prefijo .fac- a propósito: las clases genéricas (.fila, .lista) ya chocaron
   una vez entre módulos y se acordó que cada pantalla nombre lo suyo. */

.fac { gap: 16px; }
/* .pagina es una columna flex: sin esto los hijos se comprimen y la barra de
   pestanas queda de un pixel de alto. */
.fac > * { flex: none; }
.fac .tabs { margin-bottom: 2px; }

.fac-sec { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.fac-sec h2 { font-size: 15px; }
.fac-sec > .muted { margin: -6px 0 0; }

.fac-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.fac-lista:empty { display: none; }

.fac-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.fac-fila:last-child { border-bottom: 0; }
.fac-fila:hover { background: var(--surface-2); }
.fac-fila > div:first-of-type { flex: 1; min-width: 0; }
.fac-fila b { font-size: 13.5px; font-weight: 600; }
.fac-fila .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.fac-fila.anulado { opacity: .62; }
.fac-fila.anulado b { text-decoration: line-through; }

.fac-datos { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.fac-datos .fac-fila { border: 0; padding: 4px 0; background: none; justify-content: space-between; }
.fac-datos .fac-fila:hover { background: none; }

.fac-items {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 34vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
}
.fac-items .l { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.fac-items .l > div { flex: 1; min-width: 0; }
.fac-items .c { font-family: var(--mono); color: var(--ink-3); min-width: 26px; }
.fac-items .i { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.fac-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.fac-log {
  margin: 0; padding: 10px 12px; max-height: 160px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-all; color: var(--ink-2);
}

/* --- el comprobante dentro de la pantalla de cobro --- */

.cobro-doc { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 4px; }
.cobro-doc .metodos.docs { grid-template-columns: repeat(3, 1fr); }
.cobro-doc .metodo small { text-transform: none; letter-spacing: 0; }
.doc-cliente { display: flex; flex-direction: column; gap: 10px; }
.doc-cliente .hint:empty { display: none; }

@media (max-width: 720px) {
  .fac-par { grid-template-columns: 1fr; }
  .fac-fila { flex-wrap: wrap; }
}

/* ========================================================== BARRA Y COCINA */
/* Pantalla fija en la estación: se mira de lejos y se toca con la mano ocupada.
   Todo es más grande que en el resto del sistema, a propósito. */

.bar { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 14px; padding: 18px 20px 20px; }
.bar-cab { display: flex; flex-direction: column; gap: 12px; flex: none; }
.bar-tit { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bar-tit h1 { font-size: 22px; }

.bar-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bar-tabs button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.bar-tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.bar-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--pri-ink); }

.bar-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bar-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- las tres columnas --- */

.bar-pizarra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; min-height: 0; }
.bar-col {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.bar-col > header {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.bar-col > header b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bar-col > header .cuenta {
  margin-left: auto; min-width: 24px; text-align: center; padding: 1px 7px; border-radius: 999px;
  background: var(--ink); color: var(--pri-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.bar-col.listos > header { color: var(--ok); }
.bar-col.listos > header .cuenta { background: var(--ok); }
.bar-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.bar-lista .empty { padding: 28px 12px; }

/* --- la comanda --- */

.bar-card {
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 12px; display: flex; flex-direction: column; gap: 9px;
}
.bar-card.tarde { border-left-color: var(--warn); }
.bar-card.ardiendo { border-left-color: var(--bad); background: var(--bad-bg); }
.bar-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bar-card-h b { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

.bar-tiempo { text-align: right; flex: none; }
.bar-tiempo b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-tiempo small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar-card.tarde .bar-tiempo b { color: var(--warn); }
.bar-card.ardiendo .bar-tiempo b { color: var(--bad); }

.bar-nota {
  display: flex; gap: 6px; align-items: flex-start;
  padding: 6px 8px; border-radius: var(--r-sm); background: var(--info-bg); color: #173f73; font-size: 12.5px;
}

.bar-items { display: flex; flex-direction: column; gap: 3px; }
.bar-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.bar-item:hover { background: var(--surface-2); }
.bar-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.bar-item > div { flex: 1; min-width: 0; }
.bar-item .cant {
  flex: none; min-width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.bar-item .nom { font-size: 15px; font-weight: 500; line-height: 1.3; }
.bar-item-nota { font-size: 12px; color: var(--obs); font-weight: 500; }
.bar-item.curso .cant { background: var(--warn-bg); border-color: #efd9a8; color: var(--warn); }
.bar-item.hecho .cant { background: var(--ok-bg); border-color: #c3e0cd; color: var(--ok); }
.bar-item.hecho .nom { color: var(--ink-3); text-decoration: line-through; }

.bar-card-p { display: flex; gap: 8px; }
.bar-card-p .btn.primary { min-height: 44px; font-size: 15px; }

/* --- modales del módulo --- */

.bar-historial, .bar-estaciones { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.bar-historial .fila, .bar-estaciones .fila {
  display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.bar-historial .fila:last-child, .bar-estaciones .fila:last-child { border-bottom: 0; }
.bar-historial .fila > div, .bar-estaciones .fila > div { flex: 1; min-width: 0; }
.bar-historial .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bar-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* El parpadeo que avisa una comanda nueva: en una discoteca nadie oye nada. */
body.bar-flash .bar-col.pendientes { animation: bar-aviso .9s ease-out; }
@keyframes bar-aviso {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--accent); }
}

/* Pantalla angosta (una tablet de pie, o el navegador del mesero): las tres
   columnas se apilan y el desplazamiento pasa a ser el de la pagina entera. */
@media (max-width: 1100px) {
  .bar { min-height: auto; flex: none; }
  .bar-pizarra { grid-template-columns: 1fr; flex: none; min-height: auto; }
  .bar-col { min-height: auto; }
  .bar-lista { overflow: visible; flex: none; }
}
@media (max-width: 720px) {
  .bar { padding: 14px; }
  .bar-par { grid-template-columns: 1fr; }
}

/* El estado de producción dentro de la comanda del mesero. */
.com-prod {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.com-prod.curso { color: var(--warn); }
.com-prod.listo { color: var(--ok); }
.com-prod.servido { color: var(--ink-3); font-weight: 500; }

/* ============================================================== INVENTARIO */

.inv { gap: 16px; }
.inv > * { flex: none; }

.inv-sec { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.inv-sec h2 { font-size: 15px; }
.inv-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inv-sec-h p { margin: 2px 0 0; }

.inv-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.inv-lista:empty { display: none; }

.inv-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.inv-fila:last-child { border-bottom: 0; }
.inv-fila:hover { background: var(--surface-2); }
.inv-fila > div:first-of-type { flex: 1; min-width: 0; }
.inv-fila b { font-size: 13.5px; font-weight: 600; }
.inv-fila .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-fila.bajo { border-left: 3px solid var(--warn); }
.inv-fila.sin { border-left: 3px solid var(--line-2); }
.inv-fila .chip.conc { background: var(--obs-bg); color: var(--obs); }
.inv-fila .chip.neg { color: var(--bad); }

.inv-stock { text-align: right; min-width: 66px; }
.inv-stock b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-stock small { font-size: 11px; color: var(--ink-3); }

.inv-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- rejillas de captura (ingreso, receta, liquidación, conteo) --- */

.inv-ingreso { display: flex; flex-direction: column; gap: 8px; }
.inv-ingreso-l { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr auto; gap: 8px; align-items: center; }
.inv-ingreso-l.c2 { grid-template-columns: minmax(0, 2fr) 1fr auto; }
.inv-ingreso-l.c4 { grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr; }
.inv-ingreso-h {
  display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr auto; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.inv-ingreso-h.c2 { grid-template-columns: minmax(0, 2fr) 1fr auto; }
.inv-ingreso-h.c4 { grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr; }

/* Costos y margen: la hoja de costos de la carta. */
.inv-costos { display: flex; flex-direction: column; gap: 14px; }
.inv-costos .filters { align-items: stretch; }
.inv-costos .filters .in[type="search"] { min-width: 190px; flex: 1 1 190px; }
.inv-costos .tbl td.num, .inv-costos .tbl th.right { font-variant-numeric: tabular-nums; }
.inv-costos .in.num { width: 76px; text-align: right; }
/* El veredicto de lo que todavia no se sabe: gris, no verde. Un hueco no es
   una buena noticia, y pintarlo del color del exito es como empieza el engano. */
.chip.gris { background: var(--surface-2); color: var(--ink-3); }

/* El pie del recetario: lo que cuesta, lo que se cobra y lo que queda. */
.inv-receta-pie {
  margin-top: 4px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.inv-receta-pie .l { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.inv-receta-pie .num { font-variant-numeric: tabular-nums; }
.inv-receta-pie p { margin: 6px 0 0; }
/*
 * La ultima linea manda. Antes el pie daba tres cifras del mismo tamano y la
 * que el dueno se llevaba a casa --"te deja 80 %"-- ni siquiera era la suya:
 * descontaba solo los ingredientes. Ahora la cadena se lee de arriba abajo y
 * aterriza en una sola cifra, separada por un filete doble.
 */
.inv-receta-pie .l.fin {
  margin-top: 8px; padding-top: 10px; font-size: 17px; font-weight: 650;
  border-top: 3px double var(--line); align-items: baseline;
}

/* Los gastos del mes: siete numeros, ninguno obligatorio. */
.inv-gastos { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.inv-gasto-l {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; align-items: center;
}
.inv-gasto-l .t-sub { color: var(--ink-3); font-size: 12px; }
@media (max-width: 560px) { .inv-gasto-l { grid-template-columns: 1fr; } }
.aviso { color: var(--bad); }

.inv-liq, .inv-cnt { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.inv-liq-h, .inv-liq-l {
  display: grid; grid-template-columns: minmax(0, 2fr) 64px 72px 92px 64px 96px;
  gap: 8px; align-items: center;
}
.inv-cnt-h, .inv-cnt-l { display: grid; grid-template-columns: 62px minmax(0, 1fr) 80px 110px; gap: 10px; align-items: center; }
.inv-liq-h, .inv-cnt-h {
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.inv-liq-l, .inv-cnt-l { padding: 8px 0; border-bottom: 1px solid var(--line); }
.inv-liq-l:last-child, .inv-cnt-l:last-child { border-bottom: 0; }
.inv-liq-l .mono, .inv-cnt-l .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
/* Lo que salió del estante y el sistema nunca cobró: es el número que se discute. */
.inv-liq-l .inv-falta { color: var(--bad); font-weight: 700; }

@media (max-width: 860px) {
  .inv-par, .inv-ingreso-l, .inv-ingreso-l.c2, .inv-ingreso-l.c4 { grid-template-columns: 1fr; }
  .inv-ingreso-h { display: none; }
  /* La rejilla se apila y cada celda muestra su etiqueta: sin eso quedan
     numeros sueltos sin decir cual es cual. */
  .inv-liq-h, .inv-cnt-h { display: none; }
  .inv-liq-l { grid-template-columns: 1fr 1fr; row-gap: 4px; padding: 12px 0; }
  .inv-liq-l > div:first-child { grid-column: 1 / -1; }
  .inv-liq-l [data-et]::before,
  .inv-cnt-l [data-et]::before {
    content: attr(data-et) ' ';
    font-family: var(--sans); font-size: 10.5px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  }
  .inv-liq-l .mono, .inv-liq-l .inv-dev { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; }
  .inv-cnt-l { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .inv-cnt-l > div { grid-column: 1 / -1; }
  .inv-cnt-l > .chip { grid-column: 1 / -1; justify-self: start; }
  .inv-fila { flex-wrap: wrap; }
}

/* --- Lector de código de barras --------------------------------------- */

.esc-barra { padding: 12px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.esc-barra.plana { background: none; border: 0; box-shadow: none; padding: 0 0 2px; }

.esc-caja {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px;
  padding: 0 12px; border: 2px dashed var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-3);
}
/* Enfocada se ve viva: es la señal de que el lector va a entrar ahí. */
.esc-caja:focus-within { border-color: var(--accent); border-style: solid; background: var(--surface); color: var(--accent); }
.esc-campo { border: 0 !important; background: none !important; box-shadow: none !important; height: 44px; font-size: 15px; letter-spacing: .04em; }
.esc-campo:focus { outline: none; }

.esc-ultimo { display: flex; align-items: center; gap: 16px; min-width: 260px; }
.esc-ultimo > div:first-child { flex: 1; min-width: 0; }
.esc-cifra { text-align: right; }
.esc-cifra b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.esc-cifra small { font-size: 11.5px; font-weight: 600; }
.esc-cifra small.ok { color: var(--ok); }
.esc-cifra small.falta { color: var(--bad); }
.esc-cifra small.sobra { color: var(--obs); }

/* La fila que acaba de sonar se enciende un instante: con el lector en la mano
   nadie mira el número, mira dónde pasó algo. */
@keyframes esc-latido {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}
.esc-toque { animation: esc-latido 1s ease-out; }

.esc-codigos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.esc-cod {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
}
.esc-sin { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--warn); }

.esc-editor { display: flex; flex-direction: column; gap: 12px; }
.esc-lista { display: flex; flex-direction: column; max-height: 30vh; overflow-y: auto; }
.esc-fila {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.esc-fila:last-child { border-bottom: 0; }
.esc-fila > :first-child { flex: none; }
.esc-fila .muted { flex: 1; min-width: 0; }
.esc-fila .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .esc-barra { flex-direction: column; align-items: stretch; }
  .esc-ultimo { min-width: 0; }
}

/* --- La cámara del celular como lector ---------------------------------- */

.cam {
  position: fixed; inset: 0; z-index: 90; background: #000;
  display: flex; flex-direction: column;
}
.cam-marco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El recuadro dice dónde mirar: sin él, la gente apunta al aire. */
.cam-marca {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(78vw, 420px); height: min(34vh, 180px);
  border: 3px solid rgba(255, 255, 255, .9); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  transition: border-color .15s, box-shadow .15s;
}
.cam-marca::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: var(--accent); opacity: .85;
}
.cam-marca.leido { border-color: #46a06b; }
.cam-marca.leido::after { background: #46a06b; }

.cam-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: #111; color: #fff;
}
.cam-barra b { display: block; font-size: 15px; }
.cam-aviso { font-size: 12.5px; color: rgba(255, 255, 255, .7); }

.cam-btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.cam-btn:hover { background: rgba(255, 255, 255, .18); }
.cam-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cam-btn.cerrar { background: rgba(255, 255, 255, .16); }

/* Lo último leído, sobre el vídeo: se lee sin bajar el teléfono. */
.cam-historial {
  position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.cam-linea {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(20, 60, 38, .92); color: #fff; font-size: 13.5px; font-weight: 500;
}
.cam-linea.mal { background: rgba(92, 24, 24, .94); }
.cam-linea svg { flex: none; }

@media (min-width: 900px) {
  /* En un equipo de escritorio con webcam no tiene por qué ocupar todo. */
  .cam { inset: 5vh 50% auto 50%; transform: translateX(-50%); width: min(94vw, 620px); height: 82vh;
    border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
}

/* En una pantalla táctil la cámara es la forma natural de escanear: el lector
   USB y el teclado siguen ahí, pero dejan de ser lo primero que se ve. */
@media (pointer: coarse) {
  .esc-barra .btn { flex: 1; min-height: 44px; }
  .esc-barra.plana { flex-direction: column; align-items: stretch; }
}

/* ================================================================ REPORTES */

.rep { gap: 14px; }
.rep > * { flex: none; }

.rep-rango { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-preset {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.rep-preset:hover { border-color: var(--ink-3); color: var(--ink); }
.rep-preset.on { background: var(--ink); border-color: var(--ink); color: var(--pri-ink); }
.rep-fechas { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rep-fechas .in { width: auto; height: 34px; }

.rep-rotulo { margin: 0; font-size: 12.5px; color: var(--ink-3); }

.rep-sec { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.rep-sec h2 { font-size: 15px; }
.rep-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rep-sec-h p { margin: 3px 0 0; max-width: 68ch; }

/* La variación va pegada al número que califica, nunca sola. */
.rep-var { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 600; }
.rep-var.sube { color: var(--ok); }
.rep-var.baja { color: var(--bad); }
.rep-var.baja svg { transform: rotate(90deg); }
.rep-var.sube svg { transform: rotate(-90deg); }

.rep-mix { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.rep-clase b { font-size: 26px; }
.rep-clase span { font-size: 12px; line-height: 1.4; }
.rep-clase.ok b { color: var(--ok); }
.rep-clase.info b { color: var(--info); }
.rep-clase.warn b { color: var(--warn); }
.rep-clase.bad b { color: var(--bad); }

/* --- gráficos ---------------------------------------------------------- */
/* Una sola serie: el dato va en el dorado del sistema y el texto en tinta.
   Nada de una escala de colores donde no hay categorías que distinguir. */

.graf { position: relative; }
.graf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf-barra { fill: var(--accent); }
.graf-linea { stroke: var(--line); stroke-width: 1; }
.graf-eje { fill: var(--ink-3); font-size: 10.5px; font-family: var(--mono); }
.graf-valor { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--mono); }
.graf-zona { fill: transparent; cursor: default; }
.graf-zona:hover { fill: var(--accent); fill-opacity: .07; }

.graf-globo {
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 7px 10px; border-radius: var(--r-sm); pointer-events: none;
  background: var(--ink); color: var(--pri-ink); font-size: 12px; white-space: nowrap;
  display: flex; flex-direction: column; gap: 1px; z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.graf-globo b { font-size: 12.5px; }
.graf-globo small { opacity: .75; }

.graf-prop { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.graf-prop i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

@media (max-width: 720px) {
  .rep-fechas { margin-left: 0; width: 100%; }
  .rep-sec-h { flex-direction: column; }
}

/* ============================================================ CARTA QR */
/* Pantalla del personal: atender los llamados de las mesas y fabricar los
   carteles. Lo que ve el cliente en su celular vive en carta.css, que es una
   página aparte. */

.qr { gap: 16px; }
.qr > * { flex: none; }
.qr .tabs { margin-bottom: 2px; }

.qr-sec { overflow: hidden; }
.qr-sec .card-h h2 { font-size: 15px; }

/* --- llamados ---------------------------------------------------------- */
/* Una fila alta por llamado y el botón grande a la derecha: se atiende de paso,
   con el celular en una mano y una bandeja en la otra. */

.qr-llamados { display: flex; flex-direction: column; }

.qr-llamado {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.qr-llamado:last-child { border-bottom: none; }
.qr-llamado[data-calor="tibio"] { border-left-color: var(--warn); background: var(--warn-bg); }
.qr-llamado[data-calor="caliente"] { border-left-color: var(--obs-solid); background: var(--obs-bg); }

.qr-llamado-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--info-bg); color: var(--info);
}
.qr-llamado-ico.oro { background: var(--accent-soft); color: var(--accent); }

.qr-llamado-t { flex: 1; min-width: 0; }
.qr-llamado-cab { display: flex; align-items: center; gap: 8px; }
.qr-llamado-cab b { font-size: 16px; font-weight: 600; }
.qr-llamado-que { font-size: 14px; font-weight: 500; margin: 1px 0; }

.qr-llamado-t2 {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.qr-llamado-btn { flex: none; display: flex; align-items: center; gap: 6px; }
.qr-llamado-btn .btn.primary { height: var(--toque); padding: 0 16px; }

/* --- carteles ---------------------------------------------------------- */

.qr-aviso .card-b { display: flex; flex-direction: column; gap: 8px; }
/* El veredicto de la direccion lleva palabra e icono, no solo color: es lo que
   decide si una tanda de carteles sirve o se tira. */
.qr-aviso.bien { border-color: var(--ok); }
.qr-aviso.mal { border-color: var(--bad); border-width: 2px; }
.qr-ok, .qr-mal { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.qr-ok { color: var(--ok); }
.qr-mal { color: var(--bad); }
.qr-aviso .btn.primary { align-self: flex-start; margin-top: 8px; }
.qr-url {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  word-break: break-all; margin-top: 3px;
}
.qr-aviso p { margin: 0; }

.qr-area + .qr-area { margin-top: 22px; }
.qr-area-t { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qr-area-t h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.qr-area-t .regla { flex: 1; height: 1px; background: var(--line); }

.qr-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.qr-mesa {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 10px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.qr-mesa b { font-family: var(--mono); font-size: 15px; font-weight: 600; margin-top: 4px; }
.qr-mesa small { font-size: 11.5px; }
.qr-mesa .btn { margin-top: 6px; }
/* El QR siempre sobre blanco, incluso en modo noche: invertido no lo lee nadie. */
.qr-lienzo { width: 100%; background: #fff; border-radius: var(--r-sm); padding: 5px; }
.qr-lienzo svg { display: block; width: 100%; height: auto; }

@media (max-width: 720px) {
  .qr-llamado { flex-wrap: wrap; }
  .qr-llamado-btn { width: 100%; }
  .qr-llamado-btn .btn { flex: 1; }
}

/* ============================================================ MULTI-LOCAL */
/* El local en el que está parada la pantalla. Va arriba del menú porque es lo
   que da contexto a todo lo demás: el mismo botón "Caja" significa una caja
   distinta según el local. */

.side-local {
  display: flex; align-items: center; gap: 7px;
  margin: 0 10px 10px; padding: 7px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-3);
}
.side-local.fijo { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
/* El desplegable de la barra no lleva marco propio: el marco es la caja de
   alrededor, que es la que dice dónde está parada la pantalla. */
.side-local .desp {
  flex: 1; min-width: 0; background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 600;
}
.side-local .desp:hover { border: none; color: var(--accent); }
.side-local .desp:focus-visible { box-shadow: none; border: none; }
.side-local:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }

/* La etiqueta del local junto a un dato: en el consolidado, saber de cuál es. */
.de-local {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

/* --- traslados --- */

.tras-lista { display: flex; flex-direction: column; }
.tras {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
}
.tras:last-child { border-bottom: none; }
.tras[data-estado="EN_CAMINO"] { border-left-color: var(--warn); background: var(--warn-bg); }
.tras[data-estado="RECIBIDO"] { border-left-color: var(--ok); }
.tras[data-estado="ANULADO"] { border-left-color: var(--line-2); opacity: .65; }
.tras-ruta { flex: 1; min-width: 0; }
.tras-ruta b { font-size: 14.5px; font-weight: 600; }
.tras-ruta .flecha { color: var(--ink-3); margin: 0 6px; }
.tras-n { font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tras-dif { color: var(--obs); font-weight: 600; }

/* Bloques genéricos de Configuración, usados por la sección de Locales. */
.cfg-bloque { display: flex; flex-direction: column; gap: 16px; }
.cfg-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cfg-t h2 { font-size: 17px; }
.cfg-t p { margin: 4px 0 0; max-width: 46rem; }
.cfg-forma { display: flex; flex-direction: column; gap: 12px; }
.cfg-campo { display: flex; flex-direction: column; gap: 5px; }
.cfg-campo > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cfg-campo small { line-height: 1.45; }
.cfg-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tbl .de-local { margin-left: 8px; }

/* --- pedidos que llegan del QR de la mesa --- */
/* Un llamado es alguien que espera atención; un pedido es alguien que ya
   eligió y espera que salga. Por eso pesa más en la pantalla. */

.qr-pedidos { display: flex; flex-direction: column; }
.qr-ped { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.qr-ped:last-child { border-bottom: 0; }
.qr-ped[data-calor="tibio"] { background: var(--warn-bg); }
.qr-ped[data-calor="caliente"] { background: var(--bad-bg); }

.qr-ped-cab { display: flex; align-items: center; gap: 11px; }
.qr-ped-mesa {
  font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.03em;
  background: var(--inv-bg); color: var(--inv-ink);
  padding: 4px 9px; border-radius: var(--r-sm); flex: none;
}
.qr-ped-cab > div { flex: 1; min-width: 0; }
.qr-ped-cab b { display: block; font-size: 13.5px; }
.qr-ped-cab small { display: block; font-size: 11.5px; color: var(--ink-3); }
.qr-ped-total { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

.qr-ped-lineas { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.qr-ped-lineas > div { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--ink-2); }
.qr-ped-lineas small { font-size: 11.5px; color: var(--ink-3); font-style: italic; }
.qr-ped-lineas b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.qr-ped-c { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 24px; }

.qr-ped-nota { margin: 9px 0 0; font-size: 12px; color: var(--ink-3); }
.qr-ped-pie { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.qr-ped-pie .btn.primary { flex: 1; min-width: 200px; }

/* La aguja en la tarjeta de la mesa. Va donde ya estaba la del llamado, pero
   un escalón más abajo: las dos pueden coincidir. */
.mesa-pedido {
  position: absolute; left: 15px; right: 13px; top: 55px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 20px;
  background: var(--accent); color: var(--pri-ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden;
}
.mesa-pedido[data-calor="tibio"] { background: var(--obs-solid); color: #fff; }
.mesa-pedido[data-calor="caliente"] { background: var(--bad-solid); color: #fff; }

/* El logo de la marca en Configuración: se ve sobre un tablero de ajedrez
   porque la mayoría son PNG con transparencia y sobre blanco no se nota si el
   fondo está limpio o es un recuadro. */
.cfg-logo-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-logo {
  width: 120px; height: 64px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px;
}
.cfg-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mesa-cliente { display: block; color: var(--ink-2); font-weight: 600; font-size: 12px; margin-bottom: 1px; }

/* ====================================================================
   EVENTOS
   La pantalla contesta "cuánto dejó esta noche", así que el número manda
   sobre todo lo demás: tipografía de cifra, nada de adornos alrededor.
   ==================================================================== */

/* El signo de un número es un dato, no decoración: una contribución negativa
   tiene que leerse como negativa antes de leer la cifra. Nunca va solo —al lado
   siempre está el importe con su menos—, así que no depende del color. */
.pos { color: var(--ok); }
.neg { color: var(--bad); }

/* `.pagina` es una columna flexible, así que sus hijos se encogen para caber y
   la barra de pestañas termina aplastada a un pixel. Cada sección pesa lo suyo
   y la página hace scroll: es la misma regla que ya tiene Reportes. */
.ev, .ev-ficha { gap: 14px; }
.ev > *, .ev-ficha > * { flex: none; }

/* --- agenda --- */
.ev-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 14px; }
.ev-card { text-align: left; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .12s, transform .12s; }
.ev-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ev-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ev-card-h b { font-size: 15px; line-height: 1.3; }
.ev-card-d { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-3); font-size: 12px; }
.ev-card-d span { display: inline-flex; align-items: center; gap: 5px; }
.ev-card-p { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ev-card-p span { display: flex; flex-direction: column; gap: 1px; }
.ev-card-p small { color: var(--ink-3); font-size: 11px; }
.ev-card-p b { font-family: var(--mono); font-size: 14px; }

/* --- ficha --- */
.ev-chips { gap: 6px; margin-top: 6px; }
.ev-ficha .page-head h1 { margin-top: 6px; }

/* La cascada en tabla, debajo del gráfico: el gráfico se entiende de un vistazo
   y la tabla es la que se puede auditar renglón por renglón. */
.ev-cascada td { font-size: 13.5px; }
.ev-cascada tr.resta td { color: var(--ink-2); }
.ev-cascada tr.subtotal td { border-top: 1px solid var(--line-2); background: var(--surface-2); }
.ev-cascada tr.total td { border-top: 2px solid var(--ink); background: var(--surface-2); font-size: 15px; }
.ev-cascada tr.total td b { font-size: 15px; }

.graf-casc-b.suma { fill: var(--accent); }
.graf-casc-b.resta { fill: var(--bad); }
.graf-casc-b.total { fill: var(--ink); }
.graf-cero { stroke: var(--line-2); stroke-width: 1.2; }
.graf-enlace { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.graf-eje.fuerte { fill: var(--ink); font-weight: 600; }
/* La cascada lleva diez columnas con nombre: la etiqueta baja un punto para que
   "Contribución" y "Alquileres" no se toquen cuando el gráfico se encoge. */
.graf-casc .graf-eje { font-size: 9.5px; }
.graf-casc .graf-valor { font-size: 10px; }

/* --- incremental --- */
.ev-inc { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; }
.ev-inc > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.ev-inc small { color: var(--ink-3); font-size: 11.5px; }
.ev-inc b { font-family: var(--mono); font-size: 16px; }
.ev-inc-final { background: var(--accent-soft) !important; }

/* --- equilibrio --- */
.ev-eq { display: grid; gap: 16px; grid-template-columns: 170px 1fr; align-items: start; margin-top: 12px; }
.ev-eq-n { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.ev-eq-n b { font-family: var(--mono); font-size: 34px; line-height: 1; color: var(--accent); }
.ev-eq-n small { color: var(--ink-2); font-size: 11.5px; text-align: center; }
.ev-eq p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.ev-sup { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.ev-detalle summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); }

/* --- por asistente --- */
.ev-cab { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 12px; }
.ev-cab-i { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.ev-cab-i small { color: var(--ink-3); font-size: 11.5px; }
.ev-cab-i b { font-family: var(--mono); font-size: 17px; }

/* --- tablas del módulo ---
   Son tablas de análisis: muchas columnas de cifras y una primera columna con
   nombre. En una pantalla angosta la envoltura ya hace scroll horizontal, así
   que la fila no debe partirse en cinco líneas para caber: se le pone un ancho
   mínimo y se deja correr. Leer "ORD-000002 · Salón · Michel" en vertical es
   peor que arrastrar la tabla. */
.ev-ficha .tbl, .ev .tbl { min-width: 620px; }
.ev-ficha .tbl td > div > .muted.small, .ev .tbl td > div > .muted.small { white-space: nowrap; }
.ev-rubro { gap: 7px; }
.ev-barra { gap: 8px; min-width: 150px; }
.ev-barra .num { min-width: 68px; text-align: right; }
.ev-modos { gap: 6px; }

@media (max-width: 760px) {
  .ev-eq { grid-template-columns: 1fr; }
  .ev-card-p { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- La carta propia, en Configuración ---------- */
.cfg-carta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cfg-carta-f {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  background: var(--surface-2);
}
.cfg-carta-ico {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
}
.cfg-carta-f b { display: block; font-size: 14px; word-break: break-all; }
/* El nombre se come el ancho y deja los botones a la derecha, en su sitio. */
.cfg-carta-f > div:nth-child(2) { flex: 1; min-width: 0; }
.cfg-carta-f .row { flex: none; }

/* La vista previa de una página. Entra a lo ancho del modal y se le pone techo
   en alto: una carta es alta y angosta, y sin tope el botón de cerrar acaba
   fuera de la pantalla. */
.cfg-vista-img,
.cfg-vista-pdf {
  display: block; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
/* La caja se ciñe a la hoja en vez de al modal: una carta es alta y angosta,
   y estirarla al ancho del diálogo la deja flotando en un marco vacío. */
.cfg-vista-img { max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.cfg-vista-pdf { width: 100%; height: 70vh; }

/* La lista de páginas. Sin hueco entre filas: se leen como las hojas
   apiladas que son, y el número de cada una basta para distinguirlas. */
.cfg-carta-paginas { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cfg-carta-paginas .cfg-carta-ico { font-family: var(--mono); font-size: 15px; }