/* Paleta Crema & Coral de Aviva Prints (branding-aviva.md).
   El crema es el papel, el coral pinta, el petróleo escribe. */
:root {
  --bg: #F7F1E8;          /* crema — el lienzo */
  --surface: #FFFCF7;     /* crema claro — tarjetas y barras */
  --ink: #16292B;         /* tinta — texto largo */
  --muted: #6E7F80;       /* petróleo suave — texto secundario */
  --line: #E6DBC9;
  --accent: #E8624A;      /* coral Aviva — la marca */
  --accent-soft: #FBE3DA; /* coral muy claro — fondos de acento */
  --coral-tinta: #B8432E; /* el único coral legible sobre crema */
  --petroleo: #123B3F;
  --good: #2E7D74;        /* teal */
  --warn: #C2820C;
  --bad: #A32718;         /* más oscuro que el coral, para no confundirse con él */
  --ruta: #123B3F;
  --shadow: 0 1px 3px rgba(18, 59, 63, .08), 0 6px 18px rgba(18, 59, 63, .06);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.45;
}
h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.side {
  background: #123B3F; color: #F7F1E8; display: flex; flex-direction: column;
  padding: 16px 12px; position: sticky; top: 0; height: 100vh;
}
.side .brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 12px; flex: 0 0 auto; }
.side .logo { width: 42px; height: 42px; display: grid; place-items: center; background: #1B4F54; border-radius: 12px; }
.side .logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.side .brand h1 { font-size: 19px; letter-spacing: 1px; font-weight: 800; }
.side .brand p { margin: 0; font-size: 11.5px; color: #9FBCB9; letter-spacing: 2px; text-transform: uppercase; }

/* La lista ocupa el alto disponible y hace scroll propio (marca y pie quedan fijos). */
.side nav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.side nav::-webkit-scrollbar { width: 6px; }
.side nav::-webkit-scrollbar-thumb { background: #1E585E; border-radius: 3px; }
.side nav::-webkit-scrollbar-track { background: transparent; }
.side nav { scrollbar-width: thin; scrollbar-color: #1E585E transparent; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: #7FA5A2; padding: 11px 12px 4px; }
.side nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px;
  color: #D7E4E2; font-weight: 500; font-size: 14px; transition: background .12s, color .12s;
}
.side nav a span { font-size: 16px; width: 20px; text-align: center; }
.side nav a:hover { background: #1B4F54; color: #fff; }
.side nav a.on { background: var(--accent); color: #fff; }

.side-foot { margin-top: 10px; padding: 12px 10px 0; border-top: 1px solid #1E585E; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #9FBCB9; flex: 0 0 auto; }
.side-foot .fase { font-size: 11px; color: #7FA5A2; }

.content { display: flex; flex-direction: column; min-width: 0; }
.bar {
  display: flex; align-items: center; gap: 16px; padding: 14px 26px;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.bar h2 { font-size: 19px; font-weight: 700; }
.bar-kpi { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.bk { font-size: 13px; color: var(--muted); }
.bk b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.bk.good b { color: var(--good); }
.menu-btn { display: none; background: var(--accent-soft); color: var(--accent); font-size: 18px; padding: 4px 11px; }
.local-sel { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; max-width: 220px; cursor: pointer; }
.form-col { display: flex; flex-direction: column; gap: 12px; }
.form-col label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.form-col select, .form-col input { width: 100%; max-width: none; text-align: left; }
.chk { flex-direction: row !important; align-items: center; gap: 9px !important; color: var(--ink) !important; font-weight: 500 !important; cursor: pointer; }
.chk input { width: auto !important; max-width: none; }
#ventaFlags { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
td.ctr { text-align: center; }
tr.sel { background: var(--accent-soft); }

main { padding: 24px 26px 60px; max-width: 1200px; width: 100%; }

/* ---------- botones / inputs ---------- */
button { border: none; border-radius: 9px; padding: 8px 15px; font: inherit; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; transition: filter .12s; }
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: var(--accent-soft); color: var(--accent); }
.btn { display: inline-block; padding: 9px 15px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.del { background: transparent; color: var(--muted); padding: 3px 8px; }
.del:hover { color: var(--bad); background: var(--accent-soft); }
.del.sm { padding: 4px 7px; font-size: 13px; }
.edit { background: transparent; color: var(--muted); padding: 4px 7px; font-size: 13px; }
.edit:hover { color: var(--accent); background: var(--accent-soft); }
input, select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: #fff; color: var(--ink); font: inherit; }
input[type=number] { text-align: center; max-width: 90px; }

.head-acc { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.empty { color: var(--muted); text-align: center; padding: 26px; }

/* ---------- KPIs / panel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.kpi.good .n { color: var(--good); }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.panel-card h3 { font-size: 15px; margin-bottom: 12px; }
.panel-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.panel-card li { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 7px; }
.panel-card li:last-child { border: none; }
.panel-card.alert { border-color: #ffcc80; background: #fff8ef; }
.panel-card.ok { border-color: #bfe3cd; }
.quick { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- tablas ---------- */
.tabla-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td .u { color: var(--muted); font-size: 12px; margin-left: 8px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.stk { font-weight: 700; }
tr.low td.stk { color: var(--bad); }
tr.low { background: #fff6ec; }
td.acc { text-align: right; white-space: nowrap; }
td.acc input { max-width: 66px; margin-right: 5px; }
td.acc button { padding: 6px 10px; }
td.pos { color: var(--good); font-weight: 700; }
td.neg { color: var(--bad); font-weight: 700; }
.fc { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.fc.good { background: #e3f3e9; color: var(--good); }
.fc.warn { background: #fdf0d9; color: var(--warn); }
.fc.bad { background: #fbe4e0; color: var(--bad); }
.tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.t-venta { background: #fbe4e0; color: var(--bad); }
.t-compra { background: #e3f3e9; color: var(--good); }
.t-produccion { background: #e6eef7; color: #35618e; }

/* ---------- POS (Vender) ---------- */
.pos { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-prod {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 3px; text-align: left; color: var(--ink); box-shadow: var(--shadow);
}
.pos-prod:hover:not(:disabled) { border-color: var(--accent); }
.pos-prod .cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pos-prod .nom { font-weight: 700; font-size: 15px; }
.pos-prod .precio { font-size: 20px; font-weight: 800; }
.pos-prod .vend { font-size: 11.5px; color: var(--muted); }
.pos-prod .vend.zero { color: var(--bad); }

.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.ticket h3 { font-size: 15px; margin-bottom: 12px; }
.tick-lines { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.tick-line { display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.tl-top { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.tl-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tick-line .tn { font-weight: 500; }
.tick-line .tq { display: flex; align-items: center; gap: 7px; }
.tick-line .tq button { padding: 1px 9px; background: var(--accent-soft); color: var(--accent); font-size: 15px; }
.tick-line .tp { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tmods { font-size: 12px; color: var(--bad); font-weight: 500; }
.link { background: transparent; color: var(--accent); padding: 2px 4px; font-size: 12px; font-weight: 600; }
.link:hover { text-decoration: underline; }
.tick-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.tick-total b { font-size: 24px; font-weight: 800; }
.canal { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.canal select { width: 100%; }
.tk-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; margin: 10px 0 0; }
.tk-field input, .tk-field select { width: 100%; max-width: none; text-align: left; }
.tick-acc { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.tick-acc button:last-child { width: 100%; }

/* ---------- tablero de comandas (KDS) ---------- */
.head-acc { align-items: center; gap: 12px; }
.head-acc .u { margin-right: auto; }
.cmd-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.cmd-col { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.cmd-col h3 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cmd-col .cnt { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--muted); }
.cmd-col.prep { border-top: 3px solid var(--warn); }
.cmd-col.listo { border-top: 3px solid var(--good); }
.cmd-col.entreg { border-top: 3px solid var(--muted); }
.cmd-col.ruta { border-top: 3px solid var(--ruta); }
.cmd-list { display: flex; flex-direction: column; gap: 10px; }
.cmd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.cmd-head { display: flex; align-items: baseline; gap: 8px; }
.cmd-head .cmd-tot { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmd-cli { font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.cmd-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cmd-nota { font-size: 12.5px; margin-top: 6px; padding: 5px 8px; background: var(--accent-soft); border-radius: 8px; color: var(--ink); }
.cmd-items { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.cmd-items .cmods { color: var(--bad); font-size: 12.5px; }
.cmd-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.cmd-acc button { flex: 1 1 auto; padding: 8px; font-size: 13.5px; white-space: nowrap; }
.cmd-acc button.ghost { flex: 0 0 auto; }
/* Selector de reimpresión: botones grandes, uno por papel */
.imp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; font-size: 15px; }
.imp-opt small { font-size: 12px; font-weight: 500; opacity: .75; }
/* Estación de impresión */
.est-on { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Fondo de apertura por forma de pago */
.fondo-fila { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.mbody .fondo-fila select, .mbody .fondo-fila input { width: 100%; }
.pf-fiado { font-size: 13px; color: var(--muted); padding: 6px 0; }
.tag.fiado { background: #fff3cd; color: #7a5a00; }
.tag.editada { background: #fde2e2; color: #8a1c1c; }
.kpis.mini { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 6px 0 0; }
.kpis.mini .kpi { padding: 8px 10px; }
.kpis.mini .kpi .n { font-size: 17px; }
.canal-card { grid-column: span 1; }
.cmd-pagos { font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; line-height: 1.4; }
.cmd-pagos.pend { background: #fff8e6; border: 1px solid #f3dc9a; border-radius: 8px; padding: 6px 8px; color: var(--ink); }
.cmd-pagos .pv-pend b { color: #8a5a00; }
.cmd-pagos .pago-ver { margin-top: 4px; }
.pf-verif { margin-top: 4px; font-size: 12.5px; }
.pf-ref-in { width: 100%; margin: -4px 0 8px; }
/* Personalizar: Normal / ½ Poca / Sin por ingrediente */
.mod-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mod-row:last-child { border-bottom: 0; }
.mod-ops { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.mbody .mod-op, .mod-op { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); border-right: 1px solid var(--line); user-select: none; }
.mod-op:last-child { border-right: 0; }
.mod-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.mbody .mod-op.on, .mod-op.on { background: var(--accent); color: #fff; }
/* Personalizar un combo: un bloque por producto de adentro */
.combo-sub { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.combo-sub-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 2px; }
.combo-ud { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 6px; margin-bottom: 8px; }
.combo-ud summary { cursor: pointer; padding: 6px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; list-style: none; }
.combo-ud summary::before { content: '▸'; color: var(--muted); }
.combo-ud[open] summary::before { content: '▾'; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pager button { padding: 4px 12px; background: var(--surface); color: var(--accent); border: 1px solid var(--line); font-size: 16px; }
.pager button:disabled { opacity: .4; }
@media (max-width: 1100px) { .cmd-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .cmd-board { grid-template-columns: 1fr; } }
/* Bloque de reparto en la tarjeta de cocina (solo comandas de delivery) */
.cmd-deliv { font-size: 12.5px; margin-top: 6px; padding: 6px 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
.cmd-deliv a { color: var(--accent); }
.cmd-rep { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cmd-rep select { font-size: 12.5px; padding: 4px 6px; flex: 1; min-width: 0; }
.cmd-rep-txt { margin-top: 2px; }
/* El atributo hidden pierde contra el display de la clase: sin esto el badge vacio se pinta como un guion. */
.nav-badge[hidden] { display: none !important; }
.cmd-rep .cnt { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 11.5px; color: var(--muted); }
/* Panel del repartidor (pensado para el teléfono: tarjetas grandes, botones de dedo) */
.ent-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ent-card { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--muted); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.ent-card.en_preparacion { border-left-color: var(--warn); }
.ent-card.listo { border-left-color: var(--good); }
.ent-card.en_ruta { border-left-color: var(--ruta); }
.ent-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ent-head .cmd-tot { margin-left: auto; font-weight: 800; font-size: 15px; }
.ent-chip { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.ent-chip.prep { background: #fff3d6; color: #8a5a00; }
.ent-chip.listo { background: #dff5e6; color: #1b6b3a; }
.ent-chip.ruta { background: #dfeaff; color: #1d4f9e; }
.ent-cli { font-weight: 800; font-size: 16px; margin-top: 8px; }
.ent-dir { font-size: 14px; margin-top: 3px; }
.ent-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.ent-links .btn { padding: 8px 12px; font-size: 13.5px; }
.ent-cobro { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fff3d6; color: #8a5a00; font-size: 14px; }
.ent-cobro.ok { background: #dff5e6; color: #1b6b3a; }
.ent-acc { margin-top: 8px; }
.ent-btn { width: 100%; padding: 14px; font-size: 16px; font-weight: 800; }
.ent-btn.ok { background: var(--good); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(30, 22, 12, .5); display: grid; place-items: center; padding: 20px; z-index: 30; }
.modal[hidden] { display: none; }
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.mhead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.mhead h3 { font-size: 17px; }
.mhead .x { background: transparent; color: var(--muted); font-size: 16px; padding: 4px 8px; }
.mbody { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mbody label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mbody input, .mbody select { width: 100%; max-width: none; text-align: left; }
.mbody input[type=number] { text-align: left; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbody > button { margin-top: 4px; padding: 11px; font-size: 15px; }
.recetaBox { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rlabel { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rrow { display: flex; gap: 8px; align-items: center; }
.rrow .rc { flex: 1 1 auto; min-width: 0; }
.rrow .rq { flex: 0 0 84px; text-align: center; max-width: none; }
/* Unidad de la línea de receta. Ancho fijo: `.mbody select { width:100% }` la estiraría y se
   comería el selector de ingrediente. */
.rrow .ru { flex: 0 0 76px; width: auto !important; }
.rrow .ru:disabled { opacity: .5; cursor: default; }

/* Interruptor de "vender sin stock" en el ticket del punto de venta. Apagado es discreto;
   encendido tiene que cantar, porque deja el inventario en negativo sin volver a avisar. */

/* Producto sin inventario en el punto de venta: se puede tocar, pero se nota. Antes iba
   `disabled` y el mostrador se quedaba sin poder armar el ticket. */
.pos-prod.agotado { opacity: .62; border-style: dashed; }
.pos-prod.agotado:hover { opacity: 1; }
  color: #8a5a00; background: rgba(245, 181, 24, .16);
  border: 1px solid rgba(245, 181, 24, .5); border-radius: 8px; padding: 7px 9px;
}
/* En oscuro el ámbar quemado no se lee sobre fondo negro: se aclara el texto. */

.rrow .rquit-lbl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.rrow .rquit-lbl input { width: auto !important; }
.rrow .del { flex: 0 0 auto; }
.recetaBox .ghost { align-self: flex-start; font-size: 12.5px; }

/* ---------- caja ---------- */
.caja-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.caja-head label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.caja-head input[type=date] { max-width: none; }
.caja-head button { margin-left: auto; }
.sec-title { margin: 22px 0 12px; font-size: 15px; }
.tabla-wrap.mini table { font-size: 13px; }
.print-title { font-size: 20px; font-weight: 800; margin-bottom: 14px; }

/* ---------- estadísticas ---------- */
.stat-ctrl { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--surface); color: var(--muted); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.panel-card small { color: var(--muted); font-weight: 400; font-size: .72em; }

.chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 8px; overflow-x: auto; }
.chart .col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.chart .bar { width: 74%; max-width: 30px; background: linear-gradient(180deg, var(--accent), #e0a24e); border-radius: 4px 4px 0 0; min-height: 0; transition: height .2s; }
.chart .cl { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

.hbars { display: flex; flex-direction: column; gap: 9px; }
.hrow { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.hl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htrack { background: var(--accent-soft); border-radius: 999px; height: 12px; overflow: hidden; }
.hbar { height: 100%; background: var(--accent); border-radius: 999px; }
.hv { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #23282e; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; z-index: 40; max-width: 90vw; text-align: center; }
.toast.err { background: var(--bad); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: -260px; width: 236px; z-index: 20; transition: left .2s; }
  body.nav-open .side { left: 0; }
  .menu-btn { display: block; }
  .pos { grid-template-columns: 1fr; }
  .ticket { position: static; max-height: none; overflow: visible; }
  .panel-grid { grid-template-columns: 1fr; }
  .bar-kpi { display: none; }
}

/* ---------- impresión ---------- */
@media print {
  .side, .bar, .no-print { display: none !important; }
  .app { grid-template-columns: 1fr; }
  main { padding: 0; }
  .print-title { display: block !important; }
  .kpi, .panel-card, .tabla-wrap { box-shadow: none; break-inside: avoid; }
}

/* ---------- dark ---------- */


/* ---------- sesión / usuarios ---------- */
#sesionInfo { display: block; font-size: 12.5px; color: #D7E4E2; margin-bottom: 6px; }
#sesionInfo b { color: #fff; }
.logout { color: var(--accent); text-decoration: underline; cursor: pointer; }
.badge-low { display: inline-flex; align-items: center; background: #FBE3DA; color: var(--coral-tinta); border: 1px solid #F1C4B6; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }

/* ---------- login ---------- */
.login-screen { position: fixed; inset: 0; background: linear-gradient(160deg, #123B3F, #1B4F54); display: grid; place-items: center; z-index: 999; padding: 20px; }
.login-card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 30px; width: 100%; max-width: 440px; text-align: center; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; }
.login-brand .logo { width: 54px; height: 54px; display: grid; place-items: center; background: var(--accent-soft); border-radius: 14px; }
.login-brand .logo img { width: 38px; height: 38px; object-fit: contain; display: block; }
.login-brand h1 { font-size: 22px; letter-spacing: 1px; }
.login-users { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.login-user { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .12s, transform .05s; }
.login-user:hover { border-color: var(--accent); }
.login-user:active { transform: translateY(1px); }
.lu-ava { font-size: 30px; }
.lu-nom { font-weight: 700; font-size: 15px; }
.lu-rol { font-size: 12px; color: var(--muted); text-transform: capitalize; }

/* ---------- descuento POS ---------- */
.desc-box { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 6px 0; }
.desc-box summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.desc-box[open] summary { margin-bottom: 8px; }
.desc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.desc-row label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.desc-row input { width: 90px; }
.desc-box input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.desc-box #dNota { width: 100%; }
.tick-sub { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); padding: 2px 0; }
.tick-sub.desc { color: var(--bad); font-weight: 600; }

@media (max-width: 560px) { .login-users { grid-template-columns: 1fr; } }



/* login: PIN en línea */
.login-pin { width: 100%; text-align: center; font-size: 22px; letter-spacing: 6px; padding: 12px; margin-top: 12px; border: 1.5px solid var(--line); border-radius: 12px; }
.login-pin:focus { outline: none; border-color: var(--accent); }
.login-err { color: var(--bad); font-size: 13.5px; min-height: 18px; margin: 8px 0 0; font-weight: 600; }
.login-acc { display: flex; gap: 10px; margin-top: 14px; }
.login-acc button { flex: 1; }

/* buscador de tablas */
.buscador { flex: 1; min-width: 180px; max-width: 320px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14.5px; background: var(--surface); color: var(--ink); }
.buscador:focus { outline: none; border-color: var(--accent); }

/* cliente por cédula */
/* Arqueo: estado del turno y movimientos de efectivo. */
.arq-chip { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); }
.arq-chip.abierto { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.arq-chip.cerrado { color: var(--muted); }
.arq-chip.sin { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.arq-turnos { display: flex; gap: 6px; flex-wrap: wrap; }
.arq-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.arq-acc > * { flex: 1 1 auto; }
.arq-linea.total { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 15px; }
.num.pos, b.pos { color: var(--good); }
.num.neg, b.neg { color: var(--bad); }
.num.falta { color: var(--bad); font-weight: 700; }
.num.ok { color: var(--good); }
@media (max-width: 560px) { .arq-acc > * { flex: 1 1 100%; } }

.pos-prod.es-combo { border-color: var(--accent); background: var(--accent-soft); }
.pos-prod.es-combo .cat { color: var(--accent); font-weight: 700; }
.combo-trae { font-size: 11px; color: var(--muted); line-height: 1.25; margin: 2px 0; }

/* Arqueo de caja: el veredicto tiene que leerse de lejos, es lo que se firma al entregar turno. */
.arqueo-card { border-left: 4px solid var(--line); }
.arqueo-card.ok { border-left-color: var(--good); }
.arqueo-card.falta, .arqueo-card.sobra { border-left-color: var(--bad); }
.arq-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; }
.arq-linea + .arq-linea { border-top: 1px dashed var(--line); }
.arq-veredicto { margin-top: 8px; padding: 9px 11px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.arq-veredicto.ok { color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.arq-veredicto.falta, .arq-veredicto.sobra { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.arq-firma { font-size: 12px; margin-top: 6px; }
.arq-preview { margin-top: 8px; font-weight: 700; }
.arq-preview.ok { color: var(--good); }
.arq-preview.falta { color: var(--bad); }

/* Aviso de tasa en la caja: sin tasa los bolívares desaparecen y hay que decirlo, no callarlo. */
.tasa-aviso { padding: 9px 11px; border-radius: 10px; margin: 8px 0; font-size: 13px; line-height: 1.4; }
.tasa-aviso.mal { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
.tasa-aviso.vieja { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }

:root { --neg: #c0392b; }
/* Stock en negativo: se vendió algo que no estaba cargado. No es un error del sistema, es una
   compra sin registrar, y tiene que saltar a la vista para que alguien la cargue. */
tr.negativo { background: color-mix(in srgb, var(--bad) 8%, transparent); }
tr.negativo .stk { color: var(--bad); font-weight: 700; }
.neg-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; }

/* Pago dividido: una tarjeta por forma de pago, con cada campo rotulado. La rejilla se adapta
   sola (dos columnas si caben 150 px, si no una), así no hay un ancho intermedio donde se rompa. */
.pago-fila { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 8px 0; background: var(--bg); }
.pf-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); }
.pf-n { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .3px; text-transform: uppercase; }
.pf-tot { margin-left: auto; font-weight: 700; font-size: 14px; }
.pf-del { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; background: none; border: 1px solid var(--line);
  border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; }
.pf-del:hover { color: #fff; background: #c0392b; border-color: #c0392b; }

.pf-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; min-width: 0; }
/* En grid y en flex, los hijos NO se encogen por debajo de su contenido salvo que se les diga
   (min-width:auto es el valor por defecto). Sin estos `min-width: 0` un select largo o un botón
   que no parte palabras empuja la tarjeta entera fuera de la pantalla en el teléfono. */
.pf-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-campo > select, .pf-campo > input { min-width: 0; }
.pf-metodo { grid-column: 1 / -1; }      /* la forma de pago manda: ocupa toda la fila */
.pf-ref { grid-column: 1 / -1; }
.pf-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pf-auto { font-style: normal; font-weight: 500; opacity: .75; }
/* `input[type=number]` es de ancho fijo y centrado en todo el panel (regla global): aquí hay
   que anular las dos cosas o los montos quedan encajonados en 90 px. */
.pf-campo input, .pf-campo select { width: 100%; max-width: none; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 15px; box-sizing: border-box; }
.pf-campo input[type=number] { max-width: none; text-align: right; }
.pf-ref-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-ref-row input { width: 100%; min-width: 0; }
.pf-ref-row .btn-verif { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.pf-add { width: 100%; margin-top: 4px; font-size: 13.5px; padding: 10px; }

/* 16px evita que Safari haga zoom solo al tocar un campo y descuadre la caja. */
@media (max-width: 560px) {
  .pf-campo input, .pf-campo select { font-size: 16px; }
}

/* Estadísticas: rango de fechas personalizado */
.stat-rango { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.stat-rango label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-rango input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.stat-rango .u { padding-bottom: 8px; }
@media (max-width: 520px) { .stat-rango label { flex: 1 1 140px; } .stat-rango input { width: 100%; } }

.cli-hint { font-size: 12.5px; color: var(--muted); margin: -2px 0 2px; min-height: 15px; }
.cli-hint.ok { color: var(--good); font-weight: 600; }
.cli-hint.bloqueado { color: #8a1c1c; background: #fde2e2; border: 1px solid #f3b4b4; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; margin: 4px 0 6px; }
.tag.bloq { background: #fde2e2; color: #8a1c1c; }
.cmd-ci { font-size: 12px; color: var(--muted); }

/* fila cédula + botón traer nombre (modal cliente) */
.ced-row { display: flex; gap: 6px; width: 100%; }
.ced-row input { flex: 1 1 auto; min-width: 0; }
.ced-row button { flex: 0 0 auto; padding: 8px 12px; cursor: pointer; }
.ced-row button:active { transform: translateY(1px); }

/* direcciones del cliente */
.dirs-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0; }
.dirs-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.dir-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.dir-row .dir-et { flex: 0 0 92px; }
.dir-row .dir-txt { flex: 1; }
.dir-row input, .dir-row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.btn.sm, .ghost.sm { padding: 5px 9px; font-size: 12.5px; }
/* selector rápido de dirección en el POS */
.dir-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.dir-chip { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.dir-chip:hover { background: var(--accent); color: #fff; }

/* mapa (Leaflet) */
.map-overlay { position: fixed; inset: 0; background: rgba(20,15,8,.5); display: grid; place-items: center; z-index: 1000; padding: 14px; }
.map-card { background: var(--surface); border-radius: 14px; width: 100%; max-width: 640px; box-shadow: var(--shadow); overflow: hidden; }
.map-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.map-head .x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.map-search { display: flex; gap: 8px; padding: 10px 16px 6px; }
.map-search input { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.map-results { max-height: 120px; overflow: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 4px; }
.map-res { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.map-res:hover { border-color: var(--accent); }
#mapa { height: 340px; margin: 10px 16px; border-radius: 10px; }
.map-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 14px; }

/* POS: buscador + categorías */
.pos-main { display: flex; flex-direction: column; min-width: 0; }
.pos-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pos-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-cats .chip { padding: 5px 11px; font-size: 12.5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.pos-cats .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Ficha de cliente (detalle) */
.det-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.det-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; }
.det-chip a { color: var(--accent); }
.det-dirs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.det-dirs li { font-size: 13.5px; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.det-dirs a { color: var(--accent); font-size: 12.5px; }

/* login por usuario+contraseña */
.login-inp { width: 100%; padding: 11px 13px; margin-top: 10px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 15px; }
.login-inp:focus { outline: none; border-color: var(--accent); }
#loginBtn { width: 100%; margin-top: 14px; }
.chk-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }

/* filtros y bitácora (control) */
.flt { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.flt select, .flt input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.log-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.log-row { border-bottom: 1px solid var(--line); padding-bottom: 7px; font-size: 13.5px; }

/* ---- Órdenes entrantes ---- */
.nav-badge { display: inline-block; min-width: 18px; text-align: center; background: #fff; color: var(--accent); font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 6px; margin-left: auto; }
.side nav a.on .nav-badge { background: #fff; color: var(--accent); }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.ord-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 13px; box-shadow: var(--shadow); }
.ord-card.falta { border-left-color: var(--bad); }
.ord-head { display: flex; align-items: center; gap: 8px; }
.ord-head b { font-size: 15px; }
.ord-org { font-size: 11.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 20px; }
.ord-tot { margin-left: auto; font-weight: 800; color: var(--good); }
.ord-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ord-pago { font-size: 11px; }
.ord-pago.ok { color: var(--good); }
.ord-line { font-size: 13px; margin-top: 5px; }
.ord-line .cmd-ci { color: var(--muted); font-size: 12px; }
.ord-falta { font-size: 12.5px; margin-top: 7px; padding: 6px 8px; background: #fbe4e0; color: var(--bad); border-radius: 8px; }
.ord-acc { display: flex; gap: 6px; margin-top: 10px; }
.ord-acc .ord-ok { flex: 1; background: var(--good); }
.ord-acc .ord-ok:disabled { opacity: .5; }
.ord-acc button.ghost, .ord-acc button.del { flex: 0 0 auto; }
/* Formulario de registro manual */
.ord-form { display: flex; flex-direction: column; gap: 10px; }
.ord-picker { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--bg); }
.ord-prodlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 150px; overflow-y: auto; }
.ord-padd { background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: 12.5px; padding: 6px 9px; font-weight: 600; }
.ord-padd:hover { border-color: var(--accent); color: var(--accent); }
.ord-cart-wrap { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.ord-cart { margin: 6px 0; display: flex; flex-direction: column; gap: 5px; }
.ord-cline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ord-cline span:first-child { flex: 1; }
.ord-cline .tq { display: inline-flex; align-items: center; gap: 6px; }
.ord-cline .tq button { padding: 2px 9px; background: var(--accent-soft); color: var(--accent); }
.ord-cline .tp { font-weight: 700; min-width: 54px; text-align: right; }
.code-box { background: #2b2620; color: #f3e9d8; border-radius: 10px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre; margin-top: 8px; }

/* ---- Pago / verificación en órdenes ---- */
.ord-pagobox { margin-top: 9px; padding: 8px 9px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.ord-pagobox.verificado { background: #eaf6ee; border-color: #bfe3cc; }
.ord-pagobox.rechazado { background: #fbe9e6; border-color: #f0c9c1; }
.ord-pago-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pago-chip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.pago-chip.pend { background: #fdf0d8; color: #a56b12; }
.pago-chip.ok { background: #d8efe0; color: var(--good); }
.pago-chip.bad { background: #f7d9d3; color: var(--bad); }
.ord-pago-det { font-size: 12px; color: var(--muted); }
.ord-pago-por { font-size: 11.5px; margin-top: 3px; }
.ord-pago-acc { display: flex; gap: 6px; margin-top: 7px; }
.ord-pago-acc .pago-ver { background: var(--good); font-size: 12.5px; padding: 6px 10px; flex: 1; }
.ord-pago-acc .ghost.sm { font-size: 12.5px; padding: 6px 9px; }
.ord-pago-form { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.ord-pago-form summary { font-weight: 600; font-size: 13px; color: var(--accent); cursor: pointer; }
.ord-pago-form .row2 { margin-top: 8px; }

/* ---- Foto de producto (modal admin) ---- */
.fotoprod { margin: 6px 0 4px; }
.fotoprod-prev { width: 88px; height: 88px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; background: var(--bg); flex: 0 0 auto; }
.fotoprod-prev img { width: 100%; height: 100%; object-fit: cover; }
.fotoprod-acc { display: flex; flex-direction: column; gap: 6px; }
.fotoprod-acc .btn.sm { padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
/* Galería multi-foto del producto (panel) */
.fotoprod-gal { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fp-thumb { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-weight: 900; font-size: 12px; line-height: 1; cursor: pointer; border: none; }
.fp-cover { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; text-align: center; padding: 2px 0; font-weight: 700; letter-spacing: .3px; }

/* Cabecera de categoría en la tabla de productos */
.cat-row td { background: var(--bg); font-weight: 800; font-size: 13px; letter-spacing: .3px; padding-top: 14px; }
.cat-row .u { font-weight: 600; }
/* Gestor de categorías (modal) */
.cat-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; max-height: 46vh; overflow-y: auto; overflow-x: hidden; }
.cat-item, .cat-nueva { display: flex; align-items: center; gap: 8px; width: 100%; }
.cat-item input, .cat-nueva input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
/* flex-basis FIJO: gana al `width:100%` global de .mbody input (por eso antes el emoji se estiraba). */
.cat-emo { flex: 0 0 52px; width: 52px; text-align: center; padding-left: 4px; padding-right: 4px; }
.cat-item .cat-nom, .cat-nueva input:not(.cat-emo) { flex: 1 1 0; min-width: 0; width: auto; }
.cat-acc { display: flex; gap: 4px; flex: 0 0 auto; }
.cat-acc .sm { padding: 6px 8px; font-size: 13px; cursor: pointer; }
.cat-nueva { border-top: 1px solid var(--line); padding-top: 12px; }
/* Comprobante de pago en la tarjeta de orden */
.ord-comprob { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.ord-comprob img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ord-line a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ---- Config de pagos de la tienda (panel Web) ---- */
.pay-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .pay-cfg { grid-template-columns: 1fr; } }
.pay-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); }
.qr-box { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.qr-prev { width: 84px; height: 84px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.qr-prev img { width: 100%; height: 100%; object-fit: contain; }
.qr-acc { display: flex; flex-direction: column; gap: 6px; }
.qr-acc .btn.sm { padding: 6px 11px; font-size: 12.5px; cursor: pointer; }

/* ---- Método de pago en el POS ---- */
.pago-box { margin: 10px 0 4px; min-width: 0; }
.pago-box #pagoLista { min-width: 0; }
.pago-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pago-met { display: flex; flex-wrap: wrap; gap: 6px; }
.pago-met .pm { background: var(--surface); color: var(--muted); border: 1px solid var(--line); padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pago-met .pm.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Resumen del cobro: es lo último que mira el cajero antes de darle a Cobrar, así que se
   muestra como una barra y no como una línea suelta de texto. */
.vuelto { font-size: 14px; font-weight: 700; margin-top: 8px; line-height: 1.35; }
.vuelto:not(:empty) { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.vuelto.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.vuelto.falta { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
@media (max-width: 560px) { .vuelto { font-size: 15px; } }
.btn-verif { margin-top: 7px; width: 100%; font-size: 13px; padding: 7px 10px; cursor: pointer; }
.verif-out { font-size: 13px; font-weight: 600; margin-top: 5px; }
.verif-out.ok { color: var(--good); }
.verif-out.bad { color: var(--bad); }
.verif-out.warn { color: #a56b12; }
.verif-out.muted { color: var(--muted); }
/* ---- Resumen por método de pago en Caja ---- */
.pago-resumen { display: flex; gap: 10px; margin-bottom: 10px; }
.pago-resumen .pr { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pago-resumen .pr span { font-size: 12px; color: var(--muted); }
.pago-resumen .pr b { font-size: 17px; }
.pago-resumen .pr.efectivo { background: #d8efe0; border-color: #b6e0c7; }
.pago-resumen .pr.digital { background: #e5ecfb; border-color: #c9d8f5; }

/* ---------- 📋 Menú por QR (pestaña Web) ---------- */
.qr-menu { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.qr-menu-cod { flex: none; text-align: center; }
.qr-menu-cod canvas {
  width: 190px; height: 190px; display: block;
  background: #fff; border-radius: 10px; padding: 6px;
  border: 1px solid var(--linea, #e3e3e3);
}
.qr-menu-acc { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.qr-menu-cfg { flex: 1 1 260px; min-width: 240px; }

.carta-lista { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.carta-hoja {
  position: relative; width: 108px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--linea, #e3e3e3); background: #fff;
}
.carta-hoja img { width: 100%; height: 150px; object-fit: cover; object-position: top; display: block; }
.carta-num {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
}
.carta-acc { display: flex; border-top: 1px solid var(--linea, #e3e3e3); }
.carta-acc button {
  flex: 1; padding: 6px 0; border: 0; background: #fafafa;
  font-size: 13px; cursor: pointer; color: #333;
}
.carta-acc button + button { border-left: 1px solid var(--linea, #e3e3e3); }
.carta-acc button:hover:not(:disabled) { background: #f0f0f0; }
.carta-acc button:disabled { opacity: .3; cursor: default; }
.carta-acc button.del { color: #c4161c; }

/* ---------- 💱 Tasa Bs/$ y precios en bolívares ---------- */
/* El precio en Bs va SIEMPRE debajo del de dólares y más pequeño: el dólar manda, el bolívar
   acompaña. Si no hay tasa configurada no se pinta nada (mejor vacío que "Bs 0,00"). */
.bs {
  display: block;
  font-style: normal;
  font-size: .78em;
  font-weight: 600;
  opacity: .72;
  line-height: 1.25;
  margin-top: 1px;
}
#btnCobrar .bs { opacity: .85; font-size: .72em; }

.tasa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--linea, #e3e3e3);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}
button.tasa-chip { cursor: pointer; }
button.tasa-chip:hover { background: #f4f4f4; }
.tasa-chip.sin {
  background: #fff6e5;
  border-color: #f0c675;
  color: #8a5a00;
}
/* Tasa puesta a mano: se distingue de la del BCV para que se note que no se actualiza sola. */
.tasa-chip.manual { background: #f4f0ff; border-color: #cbbcf0; color: #4a3a86; }

tr.total td { border-top: 2px solid var(--line); }

/* ---------- AVIVA · liquidación ---------- */
.liq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.liq-nav { display: flex; gap: 6px; }
.kpi.liq-socio { background: var(--accent-soft); border-color: var(--accent); }
.kpi.liq-socio .n { color: var(--coral-tinta); }
.liq-acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.liq-ajuste { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.liq-ajuste input { flex: 1 1 190px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.liq-ajuste input[type="number"] { flex: 0 0 130px; }
.tbl td.neg, .tbl .neg { color: var(--bad); }
.tbl .r, th.r, td.r { text-align: right; }
.tbl .mut, .mut { color: var(--muted); font-size: 12.5px; }
.ok { color: var(--good); }
/* Lo que lleva ganado quien registra: va arriba del todo en la pantalla de venta. */
.liq-mi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; }
.liq-mi b { font-size: 22px; color: var(--coral-tinta); }

/* ---------- AVIVA · registrar venta ---------- */
.av-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.av-fila label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.av-fila label.av-ancho { flex: 1 1 220px; }
.av-fila input, .av-fila select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: var(--surface); color: var(--ink); }
.av-fila > select.av-ancho { flex: 1 1 220px; }
.av-receta, #avExtras { margin: 8px 0 14px; }
.av-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.av-rec span:first-child { flex: 1 1 180px; }
.av-rec select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.av-resumen { margin-bottom: 12px; }
.kpi.bad .n { color: var(--bad); }

/* ============================================================
   AVIVA 2026-10 · Interfaz para el taller (rediseño)
   App clara siempre: se usa de día, en el taller, desde el teléfono.
   Estándar de punto de venta (referencia: Loyverse) con la paleta
   Crema & Coral. Botón principal en coral tinta: el coral Aviva no
   llega a 4.5:1 con texto blanco, la tinta sí.
   ============================================================ */
:root {
  --accent: #B8432E;          /* acción: coral tinta (legible) */
  --coral: #E8624A;           /* marca: formas, franjas, selección */
  --accent-soft: #FBE7DF;
  --ink: #123B3F;             /* el petróleo escribe */
  --muted: #4F6467;
  --line: #E4D8C6;
  --surface: #FFFDF9;
  --tap: 48px;
  --r: 12px;
  --shadow: 0 1px 2px rgba(18,59,63,.06), 0 4px 14px rgba(18,59,63,.07);
  color-scheme: light;
}
body {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--coral); color: #fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--coral) 70%, transparent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #CDBFA9 transparent; }
table, .kpi .n, .precio, .tp, .num, td.r { font-variant-numeric: tabular-nums; }

.ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --- controles: grandes y claros --- */
button, .btn {
  min-height: var(--tap); padding: 10px 18px; border-radius: var(--r);
  font-size: 15px; font-weight: 700; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .15s, transform .08s, box-shadow .15s;
}
button:hover { filter: none; background: #A23A27; }
button:active { transform: translateY(1px); }
button.ghost, .btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
button.ghost:hover { background: var(--accent-soft); border-color: #E9C3B5; }
button.mini, button.sm, button.link, .ced-btn { min-height: 38px; padding: 6px 12px; font-size: 14px; }
button.link { background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { background: none; }
button.del { background: transparent; color: var(--muted); }
button.del:hover { background: var(--accent-soft); color: var(--accent); }
input, select, textarea {
  min-height: var(--tap); padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r);
  font-size: 16px; background: #fff; color: var(--ink); max-width: 100%; caret-color: var(--coral);
}
input[type=checkbox], input[type=radio] { min-height: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,98,74,.18); }
input::placeholder { color: #7A8B8D; }
select { appearance: none; padding-right: 40px; width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23123B3F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
input[type=number] { max-width: 120px; }
label { font-size: 14px; }
.mut, .u { color: var(--muted); }

/* --- tarjetas y tablas --- */
.panel-card, .tabla-wrap, .kpi, .ticket { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel-card { padding: 20px; }
.panel-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.panel-card + .panel-card { margin-top: 16px; }
.kpi .l { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }
th { font-size: 12.5px; letter-spacing: .02em; }
td, th { padding: 12px 14px; }
.tabla-wrap.plana { box-shadow: none; border-radius: 12px; }

/* --- barra lateral (escritorio) --- */
.side { background: var(--petroleo); }
.side .brand h1 { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 18px; }
.side nav a { min-height: 44px; font-size: 14.5px; gap: 12px; }
.side nav a .ico { width: 20px; height: 20px; opacity: .9; }
.side nav a.on { background: var(--coral); color: #fff; }
.side-close { display: none; }
.nav-sec { font-size: 12px; letter-spacing: .08em; color: #B9CFCC; }
.side .brand p, .side-foot, .side-foot .fase { color: #C9DAD8; font-size: 12px; }
header.bar { padding: 14px 26px; }
header.bar h2 { font-size: 20px; font-weight: 800; }
.bar-logo { display: none; }
.tabbar, .nav-velo, .ir-ticket { display: none; }
/* La barra de las gráficas comparte nombre con la cabecera (.bar): se le quita lo de cabecera. */
.chart .bar { padding: 0; position: static; border: 0; display: block; background: var(--coral); }

/* --- punto de venta --- */
.pos-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.pos-prod { border-radius: 14px; padding: 14px; min-height: 132px; text-align: left; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.pos-prod:hover:not(:disabled) { background: #fff; border-color: var(--coral); }
.pos-prod .nom { font-size: 15px; line-height: 1.3; }
.pos-prod .precio { color: var(--ink); margin-top: auto; }
.pos-prod .cat { font-size: 11.5px; letter-spacing: .04em; }
.pos-cats { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -16px; padding-left: 16px; padding-right: 16px; padding-bottom: 4px; scrollbar-width: none; }
.pos-cats::-webkit-scrollbar { display: none; }
.chip { min-height: 40px; padding: 8px 16px; font-size: 14px; white-space: nowrap; color: var(--ink); background: var(--surface); }
.chip:hover { background: var(--accent-soft); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.buscador { max-width: none; min-height: var(--tap); font-size: 16px; padding-left: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234F6467' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
.tick-line .tq button { min-height: 40px; min-width: 40px; padding: 0; }

/* --- cobro: lo opcional plegado (venta de mostrador = forma de pago + total) --- */
.mas-datos { border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; padding: 0 14px; margin: 10px 0; }
.mas-datos > summary { min-height: var(--tap); display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; }
.mas-datos > summary::-webkit-details-marker { display: none; }
.mas-datos > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
.mas-datos[open] > summary::after { transform: rotate(-135deg); }
.mas-datos[open] { padding-bottom: 12px; }
.mas-datos .tk-field, .mas-datos .canal { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* --- legibilidad y tamaño de toque (auditoría UI Pro Max, 23-oct) --- */
.pos-prod .cat, .pos-prod .vend { font-size: 13px; }
.pos-prod .bs, .pos-prod .precio-bs { font-size: 14px; }
.chip { min-height: 44px; }
.pago-ver, button.sm.pago-ver { min-height: 44px; }
#view td, #view th { font-size: max(13px, 1em); }

/* --- tablero de pedidos: botones de ícono --- */
.cmd-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.cmd-acc button.ghost { min-width: 44px; min-height: 44px; padding: 8px; }
.cmd-acc button.ghost .ico { width: 20px; height: 20px; }

/* --- pérdidas --- */
.pd-form { display: flex; flex-direction: column; gap: 14px; }
.pd-form > p { margin: -6px 0 0; }
.pd-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink); }
.pd-lbl { font-weight: 600; font-size: 14px; }
.pd-cant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pd-cant .pd-lbl { flex: 1 0 100%; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.stepper button { border: 0; border-radius: 0; min-width: var(--tap); font-size: 22px; background: transparent; color: var(--ink); }
.stepper button:hover { background: var(--accent-soft); }
.stepper input { border: 0; border-radius: 0; width: 76px; text-align: center; font-weight: 700; font-size: 18px; box-shadow: none; }
.pd-motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pd-mot { justify-content: flex-start; text-align: left; background: #fff; color: var(--ink); border: 1.5px solid var(--line); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.pd-mot:hover { background: var(--accent-soft); }
.pd-mot.on { background: var(--accent-soft); border-color: var(--coral); color: var(--accent); box-shadow: inset 0 0 0 1px var(--coral); }
.pd-guardar { width: 100%; min-height: 56px; font-size: 17px; margin-top: 4px; }
.pd-total { color: var(--accent); }
.av-rec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 6px; }
.av-rec span:first-child { flex: 1; }

/* --- login --- */
.login-screen { background: var(--petroleo); }
.login-card { max-width: 420px; padding: 28px 22px; }
.login-card input { width: 100%; }
.login-card button { width: 100%; }

/* --- toast --- */
.toast { background: var(--ink); border-radius: 14px; padding: 14px 20px; font-size: 15px; bottom: 24px; }

/* ============ teléfono ============ */
@media (max-width: 820px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .side { width: min(300px, 86vw); left: calc(-1 * min(300px, 86vw) - 20px); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  .side-close { display: inline-flex; margin-left: auto; background: transparent; color: #F7F1E8; min-height: 44px; padding: 8px; }
  .side-close:hover { background: rgba(255,255,255,.08); }
  body.nav-open .nav-velo { display: block; position: fixed; inset: 0; background: rgba(18,59,63,.45); z-index: 15; }
  .menu-btn { display: none !important; }
  header.bar { padding: 12px 16px; gap: 12px; }
  header.bar h2 { font-size: 19px; }
  .bar-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--petroleo); flex: 0 0 auto; }
  .bar-logo img { width: 22px; height: 22px; object-fit: contain; }
  main { padding: 16px 16px 28px; }
  .panel-card { padding: 16px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
    background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(18,59,63,.06);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 4px; border-radius: 12px; background: transparent; color: var(--muted);
    font-size: 12.5px; font-weight: 700; border: 0;
  }
  .tabbar .ico { width: 24px; height: 24px; }
  .tabbar a.on { color: var(--accent); background: var(--accent-soft); }
  .tabbar a.on .ico { stroke-width: 2.3; }
  .tabbar button:hover { background: transparent; }
  .pos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pos-prod { min-height: 120px; padding: 12px; }
  .pos-prod .precio { font-size: 19px; }
  .ir-ticket {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 11;
    min-height: 54px; font-size: 16px; border-radius: 14px; box-shadow: 0 8px 22px rgba(184,67,46,.35);
  }
  .ticket { scroll-margin-top: 70px; }
  .ir-ticket { transition: opacity .18s ease-out, transform .18s ease-out; }
  .ir-ticket.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }
  td, th { padding: 10px; }
  .panel-card > table, .panel-card > .tbl { display: block; overflow-x: auto; white-space: nowrap; } /* tablas sueltas: se deslizan dentro de su tarjeta */
  .pd-motivos { grid-template-columns: 1fr; }
  .tabla-wrap.inv th:nth-child(n+4), .tabla-wrap.inv td:nth-child(n+4) { display: none; } /* en el teléfono basta con cuánto hay */
  .head-acc { display: grid !important; grid-template-columns: 1fr 1fr; }
  .head-acc .badge-low { grid-column: 1 / -1; justify-content: center; }
  .head-acc button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }