:root{
  --bg:#EDF1EF; --surface:#FFFFFF; --surface-2:#F5F8F6; --ink:#15201B; --muted:#56655F; --line:#D3DCD8;
  --accent:#0D6B58; --accent-ink:#FFFFFF; --accent-soft:#DCEFE9;
  --ok:#1C7A48; --ok-bg:#E3F3EA; --warn:#9A5A00; --warn-bg:#FFF1D6; --crit:#B3261E; --crit-bg:#FCE9E7;
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif; --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1512; --surface:#171F1B; --surface-2:#1D2722; --ink:#E4ECE8; --muted:#97A7A0; --line:#2B3832;
  --accent:#43B89C; --accent-ink:#06241C; --accent-soft:#18372F;
  --ok:#5CC88C; --ok-bg:#132E20; --warn:#E6A442; --warn-bg:#382810; --crit:#F2766C; --crit-bg:#3A1714;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);padding-inline:16px;padding-block:0 48px}
a{color:var(--accent)}
.wrap{max-width:1200px;margin:0 auto}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.01em}
h2{font-size:22px} h3{font-size:16px}
.mono{font-family:var(--f-mono);font-size:13px}
.muted,.note{color:var(--muted)} .note{font-size:13px}
.n{text-align:right;font-variant-numeric:tabular-nums}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:16px 8px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-size:24px}
.brand span{font:500 12px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.user{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a{padding:10px 14px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--ink)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{justify-content:space-between}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tile .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.tile .val{font:700 28px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.tile.warn .val{color:var(--warn)} .tile.crit .val{color:var(--crit)}
.pill{display:inline-block;font:600 11px/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:99px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)} .pill.acc{background:var(--accent-soft);color:var(--accent)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;text-align:left;background:var(--surface-2)}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td.wrapc{white-space:normal;min-width:220px}
tr.hecho{opacity:.55}
[hidden]{display:none !important}   /* gana a .panel/.stack/.fields, que traen su propio display */
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover{background:var(--surface-2)}
tr.err td{background:var(--crit-bg)} tr.wrn td{background:var(--warn-bg)}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-weight:500}
input,select,textarea{font:15px var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;min-width:0}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.full{grid-column:1/-1}
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--f-body);padding:9px 14px;border-radius:7px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--crit)}
/* Un boton con trabajo esperando. Entre diez botones iguales, el que tiene algo que
   hacer tiene que saltar: el dueño pidio justo esto despues de no hallar cual de todos
   traia la orden nueva. Se apaga solo en cuanto no queda nada pendiente, porque un
   letrero que esta prendido siempre deja de verse a los dos dias. */
.btn.pendiente{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.btn.pendiente:hover{border-color:var(--warn);filter:brightness(.97)}
.btn.pendiente .cuantos{display:inline-block;margin-left:6px;min-width:19px;padding:1px 6px;
  border-radius:99px;background:var(--warn);color:var(--surface);font-size:12px;
  font-weight:700;text-align:center;line-height:17px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.msgs{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.msgs li{padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.msgs .success{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.msgs .error{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.msgs .warning{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.errlist{color:var(--crit);font-size:13px;margin:4px 0 0;padding-left:16px}
.pcard{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;background:var(--surface-2)}
.kv{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:6px;font-size:14px}
.picker{position:relative}
.picker input{font-family:var(--f-mono);font-size:16px;padding:11px 12px}
.sug{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.08);max-height:320px;overflow:auto}
.sug li{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;gap:10px}
.sug li:hover,.sug li.act{background:var(--surface-2)}
.sug .mono{color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg label{flex-direction:row;padding:9px 16px;cursor:pointer;color:var(--muted);font-size:14px;border-left:1px solid var(--line)}
.seg label:first-child{border-left:0}
.seg input{display:none}
.seg label:has(input:checked){background:var(--accent);color:var(--accent-ink)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:14px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.login{max-width:380px;margin:12vh auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{.tabs,.top .user,.no-print{display:none}}

/* Barras del presupuesto: disponible de fondo, ejercido y comprometido encima */
.bars{display:grid;gap:10px}
.pbar{display:grid;grid-template-columns:minmax(120px,1fr) 3fr minmax(150px,auto);gap:10px;align-items:center;font-size:13px}
.pbar .t{position:relative;height:16px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.pbar .t span{position:absolute;top:0;height:100%}
.pbar .d{left:0;background:var(--accent-soft)}
.pbar .e{left:0;background:var(--accent)}
.pbar .e.over{background:var(--crit)}
.pbar .c{background:var(--warn)}
.pbar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:12px 14px;font-size:14px}
.grid-in input{width:100%;text-align:right}

/* Separador "o" de la pantalla de acceso */
.o{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.o::before,.o::after{content:"";flex:1;height:1px;background:var(--line)}

/* ------------------------------------------------ grafica de como va el dinero */
.grafica{border:1px solid var(--line);border-radius:12px;padding:18px 16px 12px;background:var(--surface)}
.grafica .barras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
/* Filas fijas para que las tres barras arranquen y terminen parejas, aunque
   sus notas midan distinto. Si no, se leen como si una fuera mas alta. */
.grafica .barra{display:grid;grid-template-rows:auto 150px auto 1fr;gap:6px;
  justify-items:center;text-align:center}
.grafica .monto{font-weight:700;font-size:18px;font-family:var(--f-display,inherit);align-self:end}
.grafica .tallo{width:100%;max-width:120px;display:flex;align-items:flex-end;
  background:var(--surface-2, #f1f3f2);border-radius:8px;overflow:hidden}
.grafica .relleno{width:100%;border-radius:8px 8px 0 0;min-height:3px;background:var(--accent, #0D6B58)}
.grafica .barra.aviso .relleno{background:var(--warn, #9A5A00)}
.grafica .barra.bien .relleno{background:var(--ok, #1C7A48)}
.grafica .pie{font-weight:600;font-size:13px}
.grafica .barra .note{font-size:12px;line-height:1.35}
@media (max-width:600px){
  .grafica .barras{gap:10px}
  .grafica .barra{grid-template-rows:auto 110px auto 1fr}
  .grafica .monto{font-size:15px}
  .grafica .pie{font-size:12px}
}

/* ------------------------------------------------ el logo */
.brand .marca-liga{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo-mostrador{height:34px;width:auto;align-self:center;object-fit:contain;display:block;flex:none}
.brand .marca-nombre{display:flex;flex-direction:column;line-height:1.15}
.brand .marca-nombre b{font:700 19px var(--f-display);color:var(--ink)}
.brand .marca-nombre>span{font-size:11px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}

/* ------------------------------------------------ la pantalla de entrar */
.acceso{display:grid;grid-template-columns:1.05fr .95fr;max-width:940px;margin:6vh auto;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:0 2px 4px rgba(12,32,25,.07),0 14px 40px -28px rgba(12,32,25,.5)}
.acceso-marca{background:linear-gradient(150deg,#123A6B,#0E2E56);color:#fff;padding:38px 36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.acceso-logo{width:190px;max-width:100%;height:auto;align-self:flex-start;object-fit:contain;display:block}
.acceso-frase{font-family:var(--f-display,inherit);font-weight:600;font-size:19px;line-height:1.35;
  margin:24px 0 0;color:#fff}
.acceso-datos{font-size:13.5px;color:#BBD0EA;line-height:1.9}
.acceso-datos b{color:#fff}
.acceso-datos a{color:#fff;font-weight:600}
.acceso-forma{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
.acceso-forma h2{margin:0 0 3px}
/* El ojito para ver la contrasena: en el celular se agradece mucho. */
.con-ojo{position:relative;display:block}
.con-ojo input{width:100%;padding-right:74px}
.ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--accent);font:600 13px inherit;cursor:pointer;padding:6px 10px;border-radius:7px}
.ojo:hover{background:var(--accent-soft)}
@media (max-width:760px){
  .acceso{grid-template-columns:1fr;margin:3vh auto}
  .acceso-marca{padding:26px 24px;gap:18px}
  .acceso-logo{width:150px}
  .acceso-frase{font-size:17px;margin-top:16px}
  .acceso-forma{padding:26px 24px}
}

/* ------------------------------------------------------- fotos de producto en el mostrador
   Van «contain» y sobre blanco, no «cover»: un producto largo —un marcador, una regla— con
   cover se ve cortado por la mitad y no se reconoce. Mejor que sobre un poco de blanco. */
.foto-art{background:#fff;border:1px solid var(--line);border-radius:8px;object-fit:contain;
  width:88px;height:88px;padding:3px}
.foto-art.chica{width:72px;height:72px}
@media (max-width:760px){.foto-art{width:64px;height:64px}}

/* el buscador del almacén de la tienda */
.buscador-almacen{margin-block:16px;padding:14px 16px}
.buscador-almacen label{font-size:13px}
.buscador-almacen input,.buscador-almacen select{margin-top:4px}