/* ---------- Tokens ---------- */
:root {
  --paper:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE6; --surface-3:#E6E3D9;
  --ink:#17150F; --ink-2:#565144; --ink-3:#8A8376;
  --line:#DFDBD0; --line-2:#C7C2B4;
  --gold:#E3AE14; --gold-ink:#7A5B00; --gold-soft:#FBF0CE;
  --out:#B5341F; --out-soft:#FBE7E2;
  --term:#1C5E78; --term-soft:#DFEDF3;
  --good:#2C7A51; --good-soft:#E1F0E7;
  --shadow:0 1px 2px rgba(23,21,15,.06), 0 6px 18px -12px rgba(23,21,15,.25);
  --r:10px; --r-lg:14px;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#13120E; --surface:#1C1A15; --surface-2:#232019; --surface-3:#2C2820;
    --ink:#F2EFE6; --ink-2:#B4AD9D; --ink-3:#847D6D;
    --line:#302C23; --line-2:#443E33;
    --gold:#F0C33C; --gold-ink:#F0C33C; --gold-soft:#3A3010;
    --out:#EE8B74; --out-soft:#3B1C15;
    --term:#7CBCD6; --term-soft:#112A35;
    --good:#73C092; --good-soft:#15291D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#13120E; --surface:#1C1A15; --surface-2:#232019; --surface-3:#2C2820;
  --ink:#F2EFE6; --ink-2:#B4AD9D; --ink-3:#847D6D;
  --line:#302C23; --line-2:#443E33;
  --gold:#F0C33C; --gold-ink:#F0C33C; --gold-soft:#3A3010;
  --out:#EE8B74; --out-soft:#3B1C15;
  --term:#7CBCD6; --term-soft:#112A35;
  --good:#73C092; --good-soft:#15291D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
h1, h2, h3 { font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.01em; }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2.5px solid var(--gold); outline-offset:2px; border-radius:4px; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.wrap { max-width:1180px; margin:0 auto; padding-inline:16px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ---------- Cabecera ---------- */
.top { background:var(--surface); border-bottom:1px solid var(--line); }
.top-in { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding-block:12px; }
.marca { display:flex; align-items:center; gap:10px; margin-right:auto; }
.sello {
  width:38px; height:38px; flex:none; border-radius:9px; background:var(--gold);
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  font-size:14px; color:#17150F; letter-spacing:-.02em;
}
.marca h1 { font-size:19px; font-weight:700; line-height:1.1; }
.marca p { margin:1px 0 0; font-size:12px; color:var(--ink-2); }
.kpis { display:flex; gap:8px; flex-wrap:wrap; }
.kpi {
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:7px 12px; min-width:104px;
}
.kpi span {
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.kpi strong {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:500; letter-spacing:-.02em;
}
.kpi.pos strong { color:var(--good); }
.kpi.neg strong { color:var(--out); }
.fecha-sel {
  display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r); padding:6px 10px;
}
.fecha-sel input { background:none; border:0; padding:0; width:auto; font-family:var(--mono); font-size:13px; }
.tema { border:0; background:var(--surface-2); width:34px; height:34px; border-radius:9px;
  cursor:pointer; font-size:15px; line-height:1; }

/* ---------- Carril de cajas ---------- */
.cajas { background:var(--surface-2); border-bottom:1px solid var(--line); }
.cajas-in { display:flex; align-items:stretch; gap:8px; padding-block:10px; overflow-x:auto; }
.caja-chip {
  flex:none; display:flex; flex-direction:column; gap:1px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 14px; min-width:140px; transition:border-color .12s, box-shadow .12s;
}
.caja-chip b { font-family:var(--display); font-size:14px; font-weight:600; }
.caja-chip .saldo {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:16px; letter-spacing:-.02em;
}
.caja-chip small { font-size:11px; color:var(--ink-3); }
.caja-chip:hover { border-color:var(--line-2); }
.caja-chip[aria-pressed="true"] {
  border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); background:var(--gold-soft);
}
.caja-chip[aria-pressed="true"] small { color:var(--gold-ink); }
.caja-chip.cerrada { opacity:.55; }
.add-caja {
  flex:none; border:1px dashed var(--line-2); background:none; border-radius:var(--r);
  padding:8px 16px; cursor:pointer; font-weight:600; font-size:13px; color:var(--ink-2);
}
.add-caja:hover { border-color:var(--gold); color:var(--gold-ink); }

/* ---------- Pestañas ---------- */
.tabs {
  display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--line);
  background:var(--paper); position:sticky; top:0; z-index:30;
}
.tab {
  flex:none; background:none; border:0; border-bottom:2.5px solid transparent;
  padding:12px 14px; cursor:pointer; font-family:var(--display); font-weight:600;
  font-size:14.5px; color:var(--ink-2); white-space:nowrap;
}
.tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--gold); }
.tab:hover { color:var(--ink); }

main { padding-block:20px 60px; display:flex; flex-direction:column; gap:22px; }

/* ---------- Avisos ---------- */
.aviso {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--line); border-left:3px solid var(--gold);
  background:var(--surface); border-radius:var(--r); font-size:13.5px; color:var(--ink-2);
}
.aviso b { color:var(--ink); }
.aviso .btn { margin-left:auto; }

/* ---------- Secciones y rejilla de productos ---------- */
.seccion { display:flex; flex-direction:column; gap:12px; }
.seccion-cab {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
.seccion-cab h2 { font-size:17px; font-weight:600; }
.seccion-cab p { margin:0; font-size:12.5px; color:var(--ink-3); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.prod {
  display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:13px 14px; transition:transform .1s, border-color .12s, box-shadow .12s;
}
.prod:hover { border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.prod-cab { display:flex; align-items:flex-start; gap:8px; }
.prod-cab b { font-family:var(--display); font-size:15.5px; font-weight:600; line-height:1.2; }
.prod-cab small {
  display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:2px;
}
.precio {
  margin-left:auto; flex:none; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:13px; padding:3px 8px; border-radius:6px;
  background:var(--gold-soft); color:var(--gold-ink);
}
.g-activa .precio { background:var(--term-soft); color:var(--term); }
.prod-pie { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chip {
  font-size:11px; font-weight:600; padding:2px 7px;
  border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2);
}
.chip.hoy { background:var(--gold); border-color:var(--gold); color:#17150F; }
.chip.stock { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.chip.bajo { background:var(--out-soft); border-color:var(--out); color:var(--out); }
.chip.term { background:var(--term-soft); border-color:transparent; color:var(--term); }
.chip.ok { background:var(--good-soft); border-color:transparent; color:var(--good); }

/* ---------- Paneles y tablas ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.panel-cab {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.panel-cab h3 { font-size:15.5px; font-weight:600; margin-right:auto; }
.panel-cuerpo { padding:14px; display:flex; flex-direction:column; gap:14px; }
.tabla-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th {
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:8px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
td.n, th.n {
  text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;
}
tbody tr:hover { background:var(--surface-2); }
tr.bloque td {
  background:var(--surface-2); font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
tr.bloque:hover td { background:var(--surface-2); }
tfoot td { font-weight:600; border-top:1px solid var(--line-2); border-bottom:0; }
.sub { display:block; font-size:12px; color:var(--ink-3); }
.pos { color:var(--good); }
.neg { color:var(--out); }
.vacio { padding:30px 16px; text-align:center; color:var(--ink-3); font-size:13.5px; }
.vacio b { display:block; color:var(--ink); font-family:var(--display); font-size:15px; margin-bottom:4px; }

/* ---------- Botones ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:var(--r); padding:9px 14px; font-weight:600; font-size:13.5px;
  transition:background .12s, border-color .12s;
}
.btn:hover { background:var(--surface-2); }
.btn-oro { background:var(--gold); border-color:var(--gold); color:#17150F; }
.btn-oro:hover { background:var(--gold); filter:brightness(1.06); }
.btn-rojo { background:var(--out); border-color:var(--out); color:#FFFFFF; }
.btn-rojo:hover { background:var(--out); filter:brightness(1.06); }
.btn-sm { padding:5px 10px; font-size:12.5px; border-radius:7px; }
.btn-txt {
  border:0; background:none; padding:4px 6px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px; font-size:12.5px; cursor:pointer;
}
.btn-txt:hover { color:var(--out); background:none; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.acciones { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Formularios ---------- */
.campo { display:flex; flex-direction:column; gap:5px; }
.campo label {
  font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
input[type=text], input[type=number], input[type=date], select, textarea {
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:9px 11px; width:100%;
}
input[type=number], input.money {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
textarea { font-family:var(--mono); font-size:12px; min-height:120px; resize:vertical; }
.fila { display:flex; gap:10px; flex-wrap:wrap; }
.fila > * { flex:1 1 150px; }

/* ---------- Hoja modal ---------- */
.velo {
  position:fixed; inset:0; background:rgba(23,21,15,.55); z-index:60;
  display:grid; place-items:end center;
}
.velo[hidden] { display:none; }
@media (min-width:640px) { .velo { place-items:center; padding:20px; } }
.hoja {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:100%; max-width:470px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow);
  animation:sube .16s ease-out;
}
@media (min-width:640px) { .hoja { border-radius:var(--r-lg); } }
@keyframes sube { from { transform:translateY(14px); opacity:.6; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .hoja { animation:none; }
  .prod:hover { transform:none; }
}
.hoja-cab {
  display:flex; align-items:flex-start; gap:10px; padding:14px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2;
}
.hoja-cab h3 { font-size:17px; font-weight:600; }
.hoja-cab p { margin:2px 0 0; font-size:12.5px; color:var(--ink-3); }
.hoja-cab .cerrar {
  margin-left:auto; border:0; background:var(--surface-2); cursor:pointer;
  width:30px; height:30px; flex:none; border-radius:8px; font-size:16px; line-height:1; color:var(--ink-2);
}
.hoja-cuerpo { padding:14px; display:flex; flex-direction:column; gap:14px; }
.hoja-pie {
  display:flex; gap:10px; padding:14px; border-top:1px solid var(--line);
  position:sticky; bottom:0; background:var(--surface);
}
.hoja-pie .btn { flex:1; padding:12px; font-size:15px; }

.contador { display:flex; align-items:center; gap:10px; }
.contador button {
  width:46px; height:46px; flex:none; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surface-2); font-size:22px; font-weight:600; cursor:pointer; line-height:1;
}
.contador input { text-align:center; font-size:22px; padding:10px; }
.rapidos { display:flex; gap:6px; flex-wrap:wrap; }
.rapidos .btn { flex:1 1 52px; }
.total-hoja {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  background:var(--surface-2); border-radius:var(--r); padding:11px 14px;
}
.total-hoja span {
  font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.total-hoja strong {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:26px; font-weight:600; letter-spacing:-.03em;
}
.alerta {
  font-size:12.5px; padding:9px 11px; border-radius:var(--r);
  background:var(--out-soft); color:var(--out);
}
.alerta.info { background:var(--term-soft); color:var(--term); }

/* ---------- Aviso flotante ---------- */
#tostadas {
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:max-content; max-width:calc(100% - 32px);
}
.tostada {
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:999px;
  font-size:13.5px; font-weight:500; box-shadow:var(--shadow); text-align:center;
}
.tostada.mal { background:var(--out); color:#FFFFFF; }

/* ---------- Resumen ---------- */
.mosaico { display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:10px; }
.celda { background:var(--surface-2); border-radius:var(--r); padding:12px 14px; }
.celda span {
  display:block; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px;
}
.celda strong {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:600; letter-spacing:-.03em;
}
.celda small { display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.barra { height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:7px; }
.barra i { display:block; height:100%; background:var(--gold); border-radius:3px; }

@media (max-width:460px) {
  .rejilla { grid-template-columns:1fr 1fr; gap:8px; }
  .prod { padding:11px; }
  .prod-cab { flex-direction:column; gap:3px; }
  .precio { margin-left:0; }
  .kpi { min-width:86px; padding:6px 10px; }
  .marca h1 { font-size:17px; }
}