/* SincroPOS — tema claro táctil.
   Pensado para el salón de un restaurante: hay luz, el cajero lee de reojo y
   necesita distinguir el botón correcto en un segundo. Por eso el fondo es un
   gris azulado (no blanco puro, que encandila bajo luz directa), las tarjetas
   son blancas para que "floten", y el azul del acento es lo bastante oscuro
   para leerse en blanco encima. */
:root {
  --bg: #eef2f8;
  --panel: #ffffff;
  --panel-2: #e7edf6;
  --border: #d2dcea;
  --text: #0f2540;
  --muted: #5b7189;
  --accent: #0b6bd3;
  --accent-dark: #0854a8;
  --accent-suave: #e3edfb;      /* fondo tenue del acento, para estados activos */
  --green: #0f8a56;
  --green-dark: #0b6e45;
  --red: #d92d20;
  --amber: #b45309;             /* avisos EN TEXTO: oscuro para leerse en claro */
  --warn-bg: #fdba24;           /* avisos COMO FONDO: vivo, con texto oscuro */
  --warn-fg: #3a2400;
  --sombra: 0 1px 2px rgba(15, 37, 64, .06), 0 4px 12px rgba(15, 37, 64, .07);
  --sombra-alta: 0 10px 30px rgba(15, 37, 64, .16);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
input, textarea, select { user-select: text; }

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--panel-2);
  transition: filter .1s, transform .05s;
}
/* En claro el feedback del toque es OSCURECER, no aclarar: sobre fondo blanco
   subir el brillo lava el botón y parece que se desactivó. */
button:active { transform: scale(.97); filter: brightness(.94); }
button:disabled { opacity: .4; pointer-events: none; }

input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

.btn { padding: 14px 20px; font-size: 16px; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-green { background: var(--green-dark); color: #fff; }
.btn-red { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-ghost { background: transparent; border: 1px solid var(--border); }

.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- Login ---------- */
.login-wrap {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(11, 107, 211, .16) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(6, 182, 212, .12) 0%, transparent 70%),
    var(--bg);
}
.login-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px; width: 380px; max-width: 92vw; box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; gap: 16px;
}
.login-card h1 { font-size: 26px; text-align: center; }
.login-card h1 span { color: var(--accent); }
.login-card .error { color: var(--red); font-size: 14px; text-align: center; min-height: 18px; }

/* ---------- Layout caja ---------- */
.caja {
  display: grid;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  overflow: hidden;
}
.topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 0 14px;
}
.topbar .brand { font-weight: 700; font-size: 18px; white-space: nowrap; }
.topbar .brand span { color: var(--accent); }
.topbar .spacer { flex: 1; }
.chip {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap;
}
.chip.ok { border-color: var(--green); color: var(--green); }
.chip.warn { border-color: var(--amber); color: var(--amber); }
.badge {
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: 12px; padding: 1px 8px; margin-left: 6px; font-weight: 700;
}

.main {
  display: grid;
  grid-template-columns: 1fr 470px;
  overflow: hidden;
}
/* En pantallas chicas (tablet) el catálogo necesita el espacio */
@media (max-width: 1100px) { .main { grid-template-columns: 1fr 370px; } }

/* ---------- Panel catálogo ---------- */
.catalogo { display: flex; flex-direction: column; overflow: hidden; padding: 12px; gap: 10px; }
.cat-header { display: flex; align-items: center; gap: 10px; }
.cat-header h2 { font-size: 18px; flex: 1; text-align: center; }
.btn-volver { padding: 12px 22px; font-size: 16px; background: var(--warn-bg); color: var(--warn-fg); font-weight: 700; }
.grid-botones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  overflow-y: auto;
  align-content: start;
  padding-bottom: 20px;
}
.btn-cat, .btn-prod {
  min-height: 86px; padding: 10px; font-size: 16px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  box-shadow: var(--sombra);
  text-transform: uppercase;
}
.btn-cat { border-left: 5px solid var(--accent); font-size: 17px; }
/* ★ FAVORITOS: primera del grid y visualmente distinta (como en Restofy) */
.btn-cat-fav { border-left-color: var(--amber); color: var(--amber); }
.btn-prod { position: relative; }
.btn-prod .precio { color: var(--accent); font-size: 15px; font-weight: 600; }
/* Estrella para marcar favorito sin salir de la pantalla de venta. El área
   táctil es generosa a propósito: se toca con el pulgar sin abrir el producto. */
.btn-prod .fav-btn {
  position: absolute; top: 0; right: 0; width: 36px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: var(--muted); opacity: .55;
}
.btn-prod .fav-btn.on { color: var(--amber); opacity: 1; }
.btn-prod .fav-btn:active { transform: scale(1.25); }

/* ---------- Panel pedido ---------- */
.pedido {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border-left: 1px solid var(--border);
}
/* La cabecera se mantiene lo más baja posible: cada píxel que gasta aquí es
   una línea menos de pedido visible, que es lo que el cajero necesita leer. */
.pedido-head { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.pedido-head .fila { display: flex; gap: 8px; align-items: center; }
.pedido-head input { padding: 9px 12px; }
.pedido-num { font-weight: 700; color: var(--amber); white-space: nowrap; font-size: 14px; }
.btn-mini {
  flex: 0 0 auto; width: 44px; height: 40px; font-size: 18px;
  border: 1px solid var(--border); border-radius: 10px;
}
.btn-mini.activo { background: var(--accent); color: #fff; border-color: var(--accent); }

.fila-puestos { display: flex; gap: 8px; align-items: flex-start; }
.puestos { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.puesto-chip {
  min-width: 50px; height: 42px; border-radius: 10px; font-size: 16px; font-weight: 700;
  border: 1px solid var(--border);
}
.puesto-chip.activo { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn-canal {
  flex: 0 0 auto; padding: 0 12px; height: 42px; font-size: 15px; font-weight: 700;
  background: transparent; border: 2px dashed var(--border); color: var(--muted);
  white-space: nowrap;
}
.btn-canal.activo {
  background: var(--warn-bg); color: var(--warn-fg); border: 2px solid var(--warn-bg); border-style: solid;
}

/* Lista del pedido: letra grande (el cajero la lee de lejos para repetir lo
   que pidió el cliente) pero filas bajas, para que quepan ~10-12 renglones. */
.items { flex: 1; overflow-y: auto; padding: 0 6px; scrollbar-width: thin; }
.items::-webkit-scrollbar { width: 10px; }
.items::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 8px; }
.item-row {
  display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px;
  align-items: center; padding: 5px 4px;
  border-bottom: 1px solid var(--border);
}
.item-row.sin-puestos { grid-template-columns: 1fr auto auto; }
.item-row .nota-btn {
  background: transparent; border: none; cursor: pointer; font-size: 15px;
  padding: 0 4px; opacity: .75; vertical-align: middle;
}
.item-row .nota-btn:active { transform: scale(.9); }
.item-row .nota-txt {
  display: block; font-size: 12.5px; color: var(--amber); font-weight: 600; margin-top: 2px;
}
.nota-rapidas { display: flex; flex-wrap: wrap; gap: 6px; }
.nota-chip {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: 999px; font-size: 14px;
}
#nota-texto { width: 100%; resize: vertical; }

.menu-vacio {
  grid-column: 1 / -1; text-align: center; padding: 48px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.menu-vacio p { font-size: 17px; }
.menu-vacio .btn { min-height: 54px; padding: 0 28px; }
.item-row .p-badge {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; text-align: center; padding: 6px 0; font-weight: 700; font-size: 13px;
}
.item-row .nombre { font-size: 17px; font-weight: 700; line-height: 1.15; }
.item-row .nombre .dom { color: var(--amber); font-weight: 700; }
.item-row .cant { display: flex; align-items: center; gap: 4px; }
.item-row .cant button {
  width: 34px; height: 34px; font-size: 18px; font-weight: 700; border-radius: 9px;
}
.item-row .total { font-weight: 700; text-align: right; min-width: 74px; font-size: 16px; }
.item-row .del { color: var(--red); background: transparent; font-size: 17px; width: 32px; height: 34px; }
.item-row.pendiente { background: rgba(14,165,233,.07); }
/* Barra verde = ya salió para la cocina (borrarlo pide confirmación) */
.item-row.comandado { box-shadow: inset 3px 0 0 var(--green); }
.items .vacio { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 15px; }

.pedido-footer { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.total-grande { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.total-grande > span:first-of-type { flex: 1; font-weight: 600; }
.total-grande .valor { font-size: 32px; font-weight: 800; color: var(--green); }
.btn-limpiar {
  flex: 0 0 auto; width: 38px; height: 38px; font-size: 16px; border-radius: 10px;
  background: transparent; border: 1px solid var(--red); color: var(--red);
}
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acciones .btn { min-height: 56px; font-size: 17px; }
.acciones .full { grid-column: 1 / -1; }

/* ---------- Modales ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(15, 37, 64, .45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  width: 560px; max-width: 94vw; max-height: 92vh; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.modal h3 { font-size: 20px; }
.modal .fila { display: flex; gap: 10px; align-items: center; }
.modal .fila > * { flex: 1; }
.modal-close { position: sticky; float: right; background: transparent; font-size: 22px; color: var(--muted); }

/* ---------- Tarjetas de total del panel admin ---------- */
.cards-fila {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.card.mini { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.card.mini span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card.mini b { font-size: 19px; }
/* Campo editable dentro de una tabla (nombre del mesero, documento). */
input.inline {
  width: 100%; padding: 5px 8px; font-size: 14px;
  border: 1px solid transparent; background: transparent; border-radius: 6px;
}
input.inline:hover { border-color: var(--border); }
input.inline:focus { border-color: var(--blue, #2563eb); background: var(--panel); }

/* Mesa que atiende varios pedidos a la vez ("Para llevar"): se distingue con un
   borde punteado — está disponible, pero no es un puesto como las demás. */
.mesa-card.multiple {
  border: 2px dashed rgba(255, 255, 255, .55);
}

/* Cortesía: consumo que no se cobra. Se marca en ámbar para que nadie la
   confunda con un cobro normal al pasar rápido por la pantalla. */
#cobro-cortesia-nota { display: flex; flex-direction: column; gap: 8px; }
.cortesia-aviso {
  border: 1px dashed var(--amber, #d9a441); border-radius: 10px;
  padding: 10px; color: var(--amber, #d9a441); font-size: 14px; line-height: 1.45;
}

/* ---------- Detalle de una factura ---------- */
.fd-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
}
.fd-dato { display: flex; flex-direction: column; gap: 1px; }
.fd-dato span { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fd-sub { font-size: 14px; margin: 6px 0 0; }
.fd-totales { display: flex; flex-direction: column; gap: 4px; }
.fd-totales > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.fd-totales span { color: var(--muted); }
.fd-totales b { font-variant-numeric: tabular-nums; }
.fd-total { padding-top: 6px; border-top: 2px solid var(--border); font-size: 16px !important; }
.fd-total b { font-size: 18px; }

/* ---------- Dividir la cuenta por cantidades ----------
   Un contador por renglón en vez de una casilla: de cuatro avenas en un mismo
   renglón, cada comensal se lleva la suya. */
.div-item {
  display: grid; grid-template-columns: 1fr auto 86px; gap: 10px;
  align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--border);
}
.div-item:last-child { border-bottom: none; }
.div-nom { font-size: 14px; line-height: 1.35; }
.div-cant { display: flex; align-items: center; gap: 8px; }
.div-cant button {
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.div-cant button:disabled { opacity: .35; cursor: default; }
.div-cant b { min-width: 22px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.div-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Pago dividido entre varios medios ---------- */
.pagos-lista { display: flex; flex-direction: column; gap: 6px; }
.pago-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px;
}
.pago-medio { font-weight: 600; }
.pago-monto { font-weight: 700; font-variant-numeric: tabular-nums; }
.pago-quitar {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--red, #9b3b2e); font-size: 14px; line-height: 1; cursor: pointer;
}
.pago-quitar:hover { border-color: var(--red, #9b3b2e); }
#cobro-dividido { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Dónde sale el papel ----------
   Barra discreta encima de los botones del pedido: en el caso normal se deja
   en Automático y no estorba; solo se toca cuando una impresora falla. */
.destino-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0 2px; flex-wrap: wrap;
}
.destino-rot {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 auto;
}
.destino-ops { display: flex; gap: 4px; flex: 1; min-width: 0; }
.destino-op {
  flex: 1; padding: 6px 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
.destino-op:hover { color: var(--text); }
.destino-op.activo {
  background: var(--green-dark, #2f6b4f); border-color: var(--green-dark, #2f6b4f);
  color: #fff;
}

/* ---------- Arqueo: esperado vs. contado ---------- */
.arqueo-caja {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
}
.arqueo-linea { display: flex; justify-content: space-between; align-items: baseline; }
.arqueo-linea span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.arqueo-dif {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 8px; border-top: 2px solid var(--border);
  font-weight: 700; color: var(--muted);
}
.arqueo-dif span:last-child { font-size: 18px; font-variant-numeric: tabular-nums; }
.arqueo-dif.cuadra { color: var(--green-dark, #2f6b4f); }
.arqueo-dif.falta  { color: var(--red, #9b3b2e); }
.arqueo-dif.sobra  { color: var(--amber, #8a5a12); }

/* Contar por denominación es opcional: va plegado para no estorbar a quien
   solo cuenta el fajo y escribe el total. */
details.card-denom > summary {
  cursor: pointer; font-weight: 700; padding: 4px 0; list-style: revert;
}
details.card-denom > summary::marker { color: var(--muted); }

/* ---------- Propinas por mesero, en vivo dentro del turno ----------
   Va de primero en el panel y con cifras grandes: es lo que el cajero
   consulta varias veces al día porque los meseros preguntan. */
.prop-bloque {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.prop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prop-head h3 { margin: 0; }
.btn-refrescar {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.btn-refrescar:hover { color: var(--text); border-color: var(--muted); }
ul.prop-lista { list-style: none; margin: 10px 0 0; padding: 0; }
ul.prop-lista li {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
ul.prop-lista li:last-child { border-bottom: none; }
.prop-nom { font-weight: 700; font-size: 16px; }
.prop-ventas { font-size: 12px; color: var(--muted); }
.prop-val { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.prop-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--border);
  font-weight: 700;
}
.prop-total span:last-child { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---------- Turno en pre-cierre ---------- */
.aviso-pausa {
  background: var(--amber-soft, rgba(217, 164, 65, .14));
  border: 1px solid var(--amber, #d9a441);
  border-left-width: 4px;
  border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5;
}

/* Casilla de "tiene factura electrónica" en el movimiento de caja. */
.check-fe { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.check-fe input { flex: 0 0 auto; width: auto; margin: 0; }

/* ---------- Reportes del día (ventas / gastos / cierres) ---------- */
.rep-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.rep-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 0;
}
.rep-tab:hover { color: var(--text); }
.rep-tab.activo { color: var(--text); border-bottom-color: var(--green-dark, #2f6b4f); }
.rep-cuerpo { max-height: 58vh; overflow-y: auto; }
.rep-cuerpo table.tabla { font-size: 13px; }
.rep-sub { font-size: 14px; margin: 16px 0 6px; }
.rep-totales {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.rep-totales > div {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.rep-totales span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rep-totales b { font-size: 16px; }

/* ---------- Aviso de licencia (demo / modo consulta) ---------- */
.lic-modal { width: 460px; text-align: center; gap: 0; padding: 28px 26px; }
.lic-kicker {
  align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  border-radius: 100px; padding: 5px 14px; margin-bottom: 16px;
}
.lic-kicker.gris { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.lic-kicker.rojo { background: var(--warn-bg); color: var(--warn-fg); }
.lic-dias { font-size: 54px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.lic-dias-lab { font-size: 13px; color: var(--muted); margin-top: 5px; margin-bottom: 18px; }
.lic-titulo { font-size: 19px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.lic-titulo .fecha { color: var(--accent); }
.lic-texto { font-size: 14px; color: var(--muted); line-height: 1.65; }
.lic-texto b { color: var(--text); font-weight: 700; }
.lic-barra { height: 7px; border-radius: 100px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin: 18px 0 8px; }
.lic-barra i { display: block; height: 100%; background: var(--accent); }
.lic-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.lic-btn { margin-top: 20px; min-height: 50px; font-size: 16px; font-weight: 700; background: var(--accent); color: #fff; }
.lic-btn:disabled { opacity: 1; background: var(--panel-2); color: var(--muted); pointer-events: none; }
/* cinta permanente cuando la empresa quedó en modo consulta */
.lic-cinta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 8px 14px; background: var(--warn-bg); color: var(--warn-fg);
  font-size: 13px; font-weight: 700; text-align: center;
}

.medios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-medio { min-height: 56px; font-size: 16px; font-weight: 700; border: 1px solid var(--border); }
.btn-medio.activo { background: var(--accent); color: #fff; }
.billetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.billetes button { min-height: 48px; font-weight: 700; }
.cambio-linea { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; }
.cambio-linea .ok { color: var(--green); }
.cambio-linea .falta { color: var(--red); }

.lista-abiertos { display: flex; flex-direction: column; gap: 8px; }
.pedido-abierto {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  text-align: left; padding: 14px; border: 1px solid var(--border);
}
.pedido-abierto .num { color: var(--amber); font-weight: 800; font-size: 17px; }
.pedido-abierto .tot { font-weight: 700; color: var(--green); }

table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th, table.tabla td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; }
table.tabla td.num, table.tabla th.num { text-align: right; }

/* ---------- Impresión 80mm ---------- */
#print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area {
    display: block !important;
    position: absolute; left: 0; top: 0;
    /* Una térmica de 80mm NO imprime los 80mm: el cabezal solo alcanza unos
       72mm centrales y el resto es zona muerta. Dejar que el contenido llegue
       al borde del papel es lo que hacía que se perdieran unos 3 caracteres
       por lado — "Fecha:" salía como "cha:" y la cantidad del producto, que va
       en la primera columna, desaparecía entera.

       Por eso el bloque ocupa el papel completo pero con 6mm de relleno a cada
       lado: la caja de contenido queda en 68mm, bien adentro de lo que el
       cabezal alcanza, con margen de sobra para cualquier driver.
       El margen del @page se pone en 0 para controlar el ancho desde aquí y no
       depender de lo que el driver decida. */
    width: 80mm;
    max-width: 100%;
    padding: 0 6mm;
    box-sizing: border-box;
    overflow: hidden;
    color: #000; background: #fff;
    font-family: 'Courier New', monospace;
    font-size: 11px;
  }
  /* Todo el tiquete en negrilla cuando la empresa lo pidió: en térmicas que
     imprimen claro, el peso normal casi no se lee y el papel además se
     decolora con el tiempo. */
  #print-area.negrilla, #print-area.negrilla * { font-weight: bold !important; }
  /* Ninguna tabla puede pasarse del papel y empujar el contenido fuera. */
  #print-area table { width: 100%; max-width: 100%; }
  #print-area td { overflow-wrap: anywhere; }
  @page { margin: 0; size: 80mm auto; }
}

/* Logo de la factura. Fuera del @media print a propósito: la vista previa
   de la caja usa el mismo #print-area en pantalla y tiene que verse igual.
   Ya viene en blanco y negro puro para la térmica, así que no se suaviza al
   escalar (quedaría gris y la impresora lo punteea). */
#print-area .logo-tiquete { display: block; width: 48mm; max-width: 100%; height: auto; margin: 0 auto 2mm; image-rendering: pixelated; }

/* ---------------------------------------------------------------------------
   Reportes del panel en hoja carta
   ---------------------------------------------------------------------------
   Conviven con la tirilla de 80mm en la misma página, así que se usa una página
   con nombre: la tirilla se queda con el @page por defecto y el reporte pide la
   suya. Sin esto, un reporte de gastos saldría en tiras de 80mm de ancho. */
#print-doc { display: none; }
@page reporte { size: letter portrait; margin: 14mm 12mm; }

@media print {
  body.imprimiendo-doc #print-area,
  body.imprimiendo-doc #print-area * { visibility: hidden !important; }
  body.imprimiendo-doc #print-doc,
  body.imprimiendo-doc #print-doc * { visibility: visible; }
  body.imprimiendo-doc #print-doc {
    display: block !important;
    position: absolute; left: 0; top: 0; width: 100%;
    page: reporte;
    color: #000; background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
    font-size: 10.5pt; line-height: 1.45;
  }

  /* Documento soporte: documento propio, no un reporte del panel. */
  #print-doc .ds-cab {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    border-bottom: 2px solid #000; padding-bottom: 8px;
  }
  #print-doc .ds-titulo { font-size: 15pt; font-weight: 700; line-height: 1.15; }
  #print-doc .ds-sub { font-size: 10pt; }
  #print-doc .ds-numero { text-align: right; white-space: nowrap; }
  #print-doc .ds-numero b { display: block; font-size: 16pt; }
  #print-doc .ds-numero span { font-size: 9pt; color: #444; }
  #print-doc .ds-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
  #print-doc .ds-parte { border: 1px solid #999; padding: 8px 10px; font-size: 9.5pt; }
  #print-doc .ds-parte h4 {
    font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em;
    color: #444; margin-bottom: 4px; font-weight: 700;
  }
  #print-doc table.ds-items { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 10px; }
  #print-doc table.ds-items th {
    text-align: left; border-bottom: 1.5px solid #000; padding: 5px 6px; font-size: 8.5pt;
    text-transform: uppercase; letter-spacing: .04em;
  }
  #print-doc table.ds-items td { border-bottom: 1px solid #ccc; padding: 5px 6px; }
  #print-doc table.ds-items .num, #print-doc table.ds-totales .num { text-align: right; }
  #print-doc table.ds-totales { margin-left: auto; width: 45%; border-collapse: collapse; font-size: 10pt; }
  #print-doc table.ds-totales td { padding: 3px 6px; }
  #print-doc table.ds-totales .ds-total td {
    border-top: 1.5px solid #000; font-weight: 700; font-size: 12pt; padding-top: 5px;
  }
  #print-doc .ds-pie {
    display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
    margin-top: 16px; border-top: 1px solid #999; padding-top: 8px;
  }
  #print-doc .ds-legal { font-size: 8.5pt; line-height: 1.45; flex: 1; }
  #print-doc .ds-cuds { word-break: break-all; margin-top: 3px; }
  #print-doc .ds-nota { color: #444; margin-top: 4px; }
  #print-doc .ds-qr img { width: 33mm; height: 33mm; }
  #print-doc .ds-qr .ds-url { font-size: 7.5pt; width: 40mm; word-break: break-all; color: #444; }
  #print-doc .ds-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 30mm; margin-top: 18mm; font-size: 9pt; }
  #print-doc .ds-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 3px; }

  #print-doc .doc-cab { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  #print-doc .doc-emp { display: flex; gap: 10px; align-items: baseline; font-size: 9.5pt; }
  #print-doc .doc-emp span { color: #444; }
  #print-doc h1 { font-size: 17pt; margin: 6px 0 4px; }
  #print-doc .doc-periodo { font-size: 10pt; font-weight: 600; }
  #print-doc .doc-pie-cab { font-size: 8.5pt; color: #555; margin-top: 4px; }

  /* Las tarjetas de la pantalla pierden el fondo: en papel solo estorban. */
  #print-doc .card,
  #print-doc .kpi,
  #print-doc .cards-fila > div,
  #print-doc .rep-totales > div {
    background: none !important; border: 1px solid #999 !important;
    border-radius: 0 !important; box-shadow: none !important; padding: 8px 10px !important;
  }
  #print-doc .kpis, #print-doc .cards-fila, #print-doc .rep-totales {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important;
  }
  #print-doc .doc-cuerpo { display: flex; flex-direction: column; gap: 12px; }

  #print-doc table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  #print-doc table.tabla th, #print-doc table.tabla td {
    border-bottom: 1px solid #bbb; padding: 4px 6px; text-align: left;
  }
  #print-doc table.tabla th { border-bottom: 1.5px solid #000; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; }
  #print-doc table.tabla td.num, #print-doc table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
  /* Que no parta una fila entre dos hojas, y que el encabezado se repita. */
  #print-doc thead { display: table-header-group; }
  #print-doc tr { break-inside: avoid; }
  #print-doc .tag { border: 1px solid #666; padding: 0 4px; font-size: 8pt; }

  /* Las gráficas del dashboard no se imprimen bien y ocupan media hoja. */
  #print-doc .chart-bars, #print-doc .mini-track { display: none !important; }
}
#print-area .t-center { text-align: center; }
#print-area .t-right { text-align: right; }
#print-area .t-bold { font-weight: bold; }
#print-area .t-grande { font-size: 14px; font-weight: bold; }
#print-area hr { border: none; border-top: 1px dashed #000; margin: 4px 0; }
#print-area table { width: 100%; border-collapse: collapse; font-size: 11px; }
#print-area td { padding: 1px 0; vertical-align: top; }
#print-area .puesto-titulo { font-weight: bold; margin-top: 4px; }

/* Prueba de ancho: monoespaciada y sin envolver, para que la regla mida de
   verdad y no se acomode sola al espacio disponible. */
#print-area .prueba-ancho {
  font-family: 'Courier New', monospace; font-size: 11px;
  white-space: pre; line-height: 1.35;
}
#print-area .prueba-ancho div { white-space: pre; }

/* ---------- Comanda de cocina: grande y en NEGRILLA ---------- */
#print-area .comanda { font-weight: bold; }
#print-area .comanda .cmd-titulo { text-align: center; font-size: 17px; font-weight: bold; }
#print-area .comanda .cmd-canal {
  text-align: center; font-size: 16px; font-weight: bold;
  border: 2px solid #000; padding: 3px; margin: 5px 0;
}
#print-area .comanda .cmd-adicion { text-align: center; font-size: 15px; font-weight: bold; margin: 4px 0; }
/* El localizador (mesa / nombre / referencia): lo más visible de la comanda */
#print-area .comanda .cmd-localizador {
  text-align: center; font-size: 30px; font-weight: bold; line-height: 1.1;
  border: 3px solid #000; padding: 8px 4px; margin: 7px 0; word-break: break-word;
}
#print-area .comanda .cmd-meta { font-size: 11px; font-weight: normal; margin: 2px 0; }
#print-area .comanda .cmd-domicilio {
  font-size: 14px; font-weight: bold; text-align: center;
  border: 2px solid #000; padding: 5px; margin: 5px 0;
}
#print-area .comanda .cmd-sep { border-top: 2px solid #000; margin: 6px 0; }
#print-area .comanda .cmd-puesto {
  font-size: 15px; font-weight: bold; margin: 8px 0 3px;
  border-bottom: 2px solid #000; padding-bottom: 2px;
}
#print-area .comanda .cmd-items { font-size: 20px; font-weight: bold; width: 100%; }
#print-area .comanda .cmd-items td { padding: 3px 0; line-height: 1.25; }
/* La cantidad es lo primero que lee la cocina y va en la columna de la
   izquierda, que es justo la que se pierde si el papel recorta ese borde.
   Ancho en ch (no en px) para que escale con la letra, y el nombre absorbe
   el resto del ancho disponible. */
#print-area .comanda .cmd-items .cmd-cant {
  width: 2.5ch; font-size: 22px; font-weight: bold; vertical-align: top;
  white-space: nowrap;
}
#print-area .comanda .cmd-items .cmd-nom { padding-left: 6px; }
#print-area .comanda .cmd-items .cmd-nota {
  font-size: 15px; font-weight: bold; padding-left: 6px; text-transform: uppercase;
}
/* Comanda de anulación: tiene que gritar, porque el papel de la comanda buena
   sigue colgado en la cocina y nadie lo va a ir a buscar. */
#print-area .comanda .cmd-anulada {
  text-align: center; font-size: 26px; font-weight: bold; letter-spacing: 2px;
  border: 4px solid #000; padding: 8px 4px; margin: 6px 0;
}

/* ---------- Vista previa de impresión (caja y administración) ----------
   El modal recibe el propio #print-area, no una copia: así lo que se ve en
   pantalla es exactamente lo que va a salir por la impresora. */
.vp-modal { width: 380px; gap: 12px; }
.vp-scroll {
  max-height: 62vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px;
}
.vp-hoja {
  width: 72mm; max-width: 100%; margin: 0 auto;
  background: #fff; color: #000;
  font-family: 'Courier New', monospace; font-size: 11px;
  padding: 4mm; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
/* Más específico que la regla `#print-area { display: none }` de arriba. */
.vp-hoja #print-area { display: block; }
.vp-ayuda { font-size: 12px; color: var(--muted); margin: 0; }
.vp-acciones { display: flex; gap: 10px; justify-content: flex-end; }
.vp-acciones .btn, .vp-acciones .btn-sec { flex: none; }
@media print {
  /* Durante la impresión el modal estorba: solo debe quedar el papel. */
  .vp-back { position: static; background: none; display: block; }
  .vp-modal, .vp-scroll, .vp-hoja {
    all: unset; display: block;
  }
  .vp-modal h3, .vp-ayuda, .vp-acciones { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Mapa de mesas y habitaciones (restaurante de hotel)
--------------------------------------------------------------------------- */
.vista-mesas {
  position: fixed; inset: 56px 0 0 0; z-index: 30;
  background: var(--bg); overflow-y: auto; padding: 16px 20px 28px;
}
.mesas-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mesas-top h2 { font-size: 20px; }
.zona-titulo {
  font-size: 13px; letter-spacing: 2px; color: var(--muted);
  margin: 16px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.mesas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.mesa-card {
  border-radius: 12px; padding: 10px 8px; min-height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid transparent; font-weight: 700; font-size: 15px;
  background: var(--green-dark); color: #fff;
}
.mesa-card .m-icono { font-size: 20px; }
.mesa-card .m-sub { font-size: 12px; font-weight: 500; opacity: .9; }
.mesa-card.ocupada { background: var(--red); }
.mesa-card.ocupada .m-sub { font-weight: 700; }
.mesa-card:active { transform: scale(.97); }

/* Aviso de cartera: barra superior, no bloquea la caja. */
.aviso-cartera {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--warn-fg);
  background: var(--warn-bg); color: var(--warn-fg);
}
.aviso-cartera.alerta { background: #fde2e0; color: #8a1c13; border-bottom-color: var(--red); }
.aviso-cartera .ac-cuerpo { flex: 1; min-width: 0; }
.aviso-cartera .ac-titulo { margin: 0; font-size: 15px; font-weight: 700; }
.aviso-cartera .ac-texto { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.aviso-cartera .ac-boton {
  flex: none; background: transparent; color: inherit; cursor: pointer;
  border: 1px solid currentColor; border-radius: 8px; padding: 7px 14px;
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.aviso-cartera .ac-boton:hover { background: rgba(0,0,0,.06); }
@media (max-width: 640px) {
  .aviso-cartera { flex-direction: column; align-items: stretch; }
}

/* Movimiento de caja anulado: se ve, tachado, con su motivo. No se borra
   porque un gasto que desaparece deja un cuadre que nadie puede explicar. */
.tabla tr.mov-anulado td { color: var(--muted); }
.tabla .tachado { text-decoration: line-through; }
.tabla tr.mov-anulado .mov-motivo { display: block; font-size: 12px; color: var(--red); }
.mesa-badge {
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
  border: 0; cursor: pointer; font-family: inherit;
}
.mesa-badge:hover { filter: brightness(1.1); }

/* Cambiar de mesa: el mismo mapa, en un modal. */
.modal-ancho { max-width: 720px; width: 100%; }
.cm-zonas { max-height: 60vh; overflow-y: auto; margin: 8px 0 12px; }
.mesa-card.actual { outline: 3px solid var(--accent); outline-offset: 2px; }
.mesa-card:disabled { cursor: not-allowed; opacity: .55; }
.mesa-card.actual:disabled { opacity: 1; }

/* Propina en el modal de cobro */
.propina-chips { display: flex; gap: 8px; align-items: center; }
.propina-chips .prop-chip {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 14px;
}
.propina-chips .prop-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.propina-chips input { width: 130px; }
.cambio-linea.total-pagar span:last-child { color: var(--green); }

/* Tiquete: banner de cortesía y precuenta */
#print-area .banner-doc {
  text-align: center; font-weight: bold; font-size: 13px;
  border: 2px solid #000; padding: 4px; margin: 5px 0;
}

/* Opción elegida de un ítem (ej. la bebida del desayuno) */
.item-row .opcion-txt {
  display: block; font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Vista móvil (celular del mesero) — réplica del flujo Restofy en el teléfono
--------------------------------------------------------------------------- */
/* Botón flotante del carrito y botón "volver al menú": solo existen en móvil */
.fab { display: none; }
.btn-cerrar-pedido { display: none; }

/* Aviso no bloqueante (toast) */
#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--green);
  border-radius: 12px; padding: 12px 18px; font-size: 14.5px; font-weight: 600;
  z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: 92vw; text-align: center;
}
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { border-color: var(--amber); color: var(--amber); }

@media (max-width: 700px) {
  /* Topbar en una sola fila con scroll horizontal (patrón app móvil) */
  .caja { grid-template-rows: 52px 1fr; }
  .topbar { overflow-x: auto; padding: 0 8px; gap: 6px; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar .brand { font-size: 15px; }
  .chip { padding: 6px 10px; font-size: 12.5px; flex: 0 0 auto; }

  .main { grid-template-columns: 1fr; }
  .catalogo { padding: 8px; }
  .cat-header h2 { font-size: 15px; }
  .btn-volver { padding: 10px 14px; font-size: 14px; }
  .grid-botones {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 8px; padding-bottom: 90px;   /* deja aire para el botón flotante */
  }
  .btn-cat, .btn-prod { min-height: 72px; font-size: 13.5px; padding: 8px 6px; }
  .btn-cat { font-size: 14.5px; }
  .btn-prod .precio { font-size: 13px; }

  /* El panel del pedido se vuelve una capa completa que entra desde la derecha */
  .pedido {
    position: fixed; inset: 0; z-index: 40; border-left: none;
    transform: translateX(102%); transition: transform .18s ease;
  }
  body.pedido-abierto .pedido { transform: translateX(0); }
  .btn-cerrar-pedido { display: block; font-size: 20px; }
  .item-row .nombre { font-size: 15px; }
  .item-row .total { min-width: 64px; font-size: 15px; }
  .total-grande .valor { font-size: 26px; }
  .acciones .btn { min-height: 52px; font-size: 15px; }

  .fab {
    display: flex; align-items: center; gap: 10px;
    position: fixed; right: 12px; bottom: 12px; z-index: 35;
    background: var(--green-dark); color: #fff;
    border-radius: 999px; padding: 14px 18px;
    font-size: 15px; font-weight: 800;
    box-shadow: var(--sombra-alta);
  }
  .fab .fab-n {
    background: rgba(255, 255, 255, .25); border-radius: 999px;
    padding: 2px 10px; font-size: 13px;
  }

  /* Mapa de mesas bajo la topbar compacta */
  .vista-mesas { inset: 52px 0 0 0; padding: 10px 12px 20px; }
  .mesas-top { flex-wrap: wrap; }
  .mesas-top h2 { font-size: 16px; }
  .mesas-top .btn { padding: 10px 12px; font-size: 13.5px; }
  .mesas-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .mesa-card { min-height: 72px; font-size: 13px; padding: 8px 6px; }
  .mesa-card .m-icono { font-size: 17px; }

  .modal { width: 100%; max-width: 96vw; padding: 14px; gap: 10px; }
  .medios-grid { grid-template-columns: 1fr; }
  .billetes { grid-template-columns: repeat(3, 1fr); }
}

/* Celular acostado (como usan Restofy en el video): dos columnas compactas */
@media (max-height: 500px) and (min-width: 701px) {
  .caja { grid-template-rows: 44px 1fr; }
  .topbar { overflow-x: auto; padding: 0 8px; gap: 6px; scrollbar-width: none; }
  .chip { padding: 5px 10px; font-size: 12px; flex: 0 0 auto; }
  .main { grid-template-columns: 1fr 300px; }
  .catalogo { padding: 8px; }
  .grid-botones { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .btn-cat, .btn-prod { min-height: 62px; font-size: 13px; padding: 6px; }
  .pedido-head { padding: 6px 8px; gap: 6px; }
  .item-row .nombre { font-size: 14px; }
  .total-grande .valor { font-size: 22px; }
  .acciones .btn { min-height: 44px; font-size: 14px; }
  .pedido-footer { padding: 6px 8px; gap: 6px; }
  .vista-mesas { inset: 44px 0 0 0; padding: 8px 12px 16px; }
  .mesas-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .mesa-card { min-height: 64px; font-size: 13px; }
}

/* Búsqueda de terceros en el cobro: el cajero escribe cédula o nombre y elige
   de la lista, sin salir de la pantalla de la factura. */
.sugerencias {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: var(--sombra-alta);
}
.sugerencias .sug {
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.sugerencias .sug:last-child { border-bottom: none; }
.sugerencias .sug:hover, .sugerencias .sug.activa { background: var(--panel-2); }
.sugerencias .sug .doc { font-size: 12px; opacity: .7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugerencias .vacio { padding: 10px 12px; opacity: .7; font-size: 13px; }

/* Conteo de efectivo por denominación en el arqueo. Dos columnas (billetes y
   monedas) para que quepa sin desplazarse: el cajero cuenta con una mano y
   digita con la otra, y hacer scroll con las manos ocupadas es un estorbo. */
.card-denom {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.card-denom h4 { font-size: 15px; margin-bottom: 2px; }
.denom-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.denom-tit { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.denom-fila { display: grid; grid-template-columns: 1fr 68px 1fr; gap: 6px; align-items: center; margin-bottom: 4px; }
.denom-val { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.denom-fila input { padding: 7px 8px; font-size: 15px; text-align: center; }
.denom-sub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .denom-cols { grid-template-columns: 1fr; } }