@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
:root{
  --paper:#E8ECE7; --surface:#F9FAF7; --surface2:#EEF2EC; --ink:#15222A; --muted:#56666C; --line:#C8D1CB;
  --accent:#1D5876; --accent-ink:#FFFFFF; --ok:#2A7350; --ok-bg:#DDEEE3; --warn:#B87C00; --warn-bg:#FAEED0;
  --danger:#B0361D; --danger-bg:#F7E0D9; --finder:#0F1A20;
  --font:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10171B; --surface:#182228; --surface2:#1F2B32; --ink:#E4EBE7; --muted:#93A4A8; --line:#2D3C43;
    --accent:#62AED3; --accent-ink:#08171F; --ok:#5CBB8C; --ok-bg:#183126; --warn:#E6B23E; --warn-bg:#352A10;
    --danger:#E36D53; --danger-bg:#3A1C15; --finder:#060B0E; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#10171B; --surface:#182228; --surface2:#1F2B32; --ink:#E4EBE7; --muted:#93A4A8; --line:#2D3C43;
  --accent:#62AED3; --accent-ink:#08171F; --ok:#5CBB8C; --ok-bg:#183126; --warn:#E6B23E; --warn-bg:#352A10;
  --danger:#E36D53; --danger-bg:#3A1C15; --finder:#060B0E; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.45 var(--font);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:var(--cond);font-weight:600;letter-spacing:.01em;margin:0;line-height:1.1}
h2{font-size:1.6rem} h3{font-size:1.25rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:24px;padding:10px clamp(14px,3vw,28px)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.mark{width:34px;height:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border:2px solid var(--ink);border-radius:6px}
.mark i{background:var(--ink);border-radius:1px}.mark i:nth-child(2),.mark i:nth-child(4),.mark i:nth-child(9){background:transparent}
.brand strong{display:block;font-family:var(--cond);font-size:1.35rem;font-weight:700;line-height:1}
.brand small{color:var(--muted);font-size:.85rem}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:none;padding:9px 14px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px;position:relative}
.tabs button svg{width:20px;height:20px;flex:none}
.tabs button.on{color:var(--ink);background:var(--surface2)}
.tabs button.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-11px;height:3px;background:var(--accent);border-radius:3px 3px 0 0}
.badge{background:var(--danger);color:#fff;font-size:.75rem;font-weight:600;border-radius:999px;padding:0 7px;line-height:1.5}
.lowpill{border:1px solid var(--warn);background:var(--warn-bg);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer;font-weight:500;font-size:.9rem}

.note{margin:12px clamp(14px,3vw,28px) 0;padding:10px 14px;border-radius:8px;background:var(--warn-bg);border:1px solid var(--warn)}
main{padding:20px clamp(14px,3vw,28px) 40px;max-width:1240px;margin:0 auto}
.view{display:none}.view.on{display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2.5vw,24px);margin-bottom:18px}
.card > h3{margin-bottom:12px}
.sub{color:var(--muted);margin:4px 0 12px}
.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.between{justify-content:space-between}
.msg{min-height:1.2em;margin:8px 0;font-weight:500}
.msg.err{color:var(--danger)} .msg.ok{color:var(--ok)}

/* Buttons & fields */
.btn{border:1px solid var(--line);background:var(--surface);padding:10px 16px;border-radius:9px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.big{font-family:var(--cond);font-size:1.5rem;padding:16px 30px;border-radius:12px}
.btn.sm{padding:6px 11px;font-size:.88rem;border-radius:7px}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
label{display:flex;flex-direction:column;gap:5px;font-size:.88rem;font-weight:500;color:var(--muted)}
label .opt{font-weight:400}
input,select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 11px;min-width:0;width:100%;color:var(--ink);font-size:1rem}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.chk{flex-direction:row;align-items:center;gap:7px;color:var(--ink);font-size:.95rem;cursor:pointer}
.chk input{width:auto}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0}

/* Scan */
.scan-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.finder{position:relative;aspect-ratio:4/3;background:var(--finder);border-radius:16px;overflow:hidden;display:grid;place-items:center}
.finder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finder .idle{position:relative;text-align:center;color:#E9F0EC;padding:20px;z-index:2}
.finder .idle p{margin:14px 0 0;color:#A9BAB6}
.corner{position:absolute;width:44px;height:44px;border:4px solid #F2C14E;z-index:3;pointer-events:none}
.corner.tl{top:16%;left:22%;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.corner.tr{top:16%;right:22%;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.corner.bl{bottom:16%;left:22%;border-right:0;border-top:0;border-radius:0 0 0 8px}
.corner.br{bottom:16%;right:22%;border-left:0;border-top:0;border-radius:0 0 8px 0}
.finder.live .corner{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.finder.live .corner{animation:none}}
.stopbtn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.4)}
.alt{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.alt .file{display:inline-flex;flex-direction:row;color:var(--ink);font-size:1rem}
.manual{display:flex;gap:8px;flex:1;min-width:230px}
.consume{border:2px solid var(--accent)}
.consume-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}
.consume-head h2{font-size:1.9rem}
.code{font-family:var(--cond);font-size:1.05rem;color:var(--muted);margin:4px 0 0;letter-spacing:.04em}
.stockbig{text-align:right;font-family:var(--cond);line-height:1}
.stockbig span{font-size:2.6rem;font-weight:700}
.stockbig small{font-size:1.1rem;margin-left:4px;color:var(--muted)}
.stockbig em{display:block;font-style:normal;font-family:var(--font);font-size:.8rem;color:var(--muted);margin-top:4px}
#cQty{font-family:var(--cond);font-size:2rem;font-weight:600;padding:8px 12px}
.consume form{display:grid;gap:12px}
.consume .row{justify-content:flex-end}

/* Lists */
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mlist li:first-child{border-top:0}
.mlist .q{font-family:var(--cond);font-size:1.25rem;font-weight:600;white-space:nowrap}
.mlist .meta{color:var(--muted);font-size:.85rem}
.empty{color:var(--muted);padding:14px 0}

/* Ingreso lines */
.lines-head,.line{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:10px;align-items:center}
.lines-head{font-size:.82rem;color:var(--muted);font-weight:500;padding:0 0 6px}
.line{padding:8px 0;border-top:1px solid var(--line)}
.line .sub-t{font-family:var(--cond);font-size:1.15rem;text-align:right;font-weight:600}
.line .rm{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1.4rem;line-height:1}
.line .hint-avg{grid-column:1/-1;font-size:.8rem;color:var(--muted);margin-top:-4px}
.total-row{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:12px;padding-top:12px}
.total-row strong{font-family:var(--cond);font-size:1.8rem}
#pasteBox{margin-top:10px;display:grid;gap:8px}
#pasteBox .btn{justify-self:start}
.ing{border-top:1px solid var(--line);padding:12px 0}
.ing:first-child{border-top:0}
.ing-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ing-h b{font-family:var(--cond);font-size:1.15rem}
.ing ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem}

/* Materials */
.matform{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--surface2);border-radius:12px;padding:16px;margin:14px 0}
.matform .row{grid-column:1/-1;justify-content:flex-end}
.filters{margin:14px 0 6px}
.filters input[type=search]{max-width:340px}
.matlist{list-style:none;margin:0;padding:0}
.mat{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,.9fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.mat:first-child{border-top:0}
.mat .nm{font-weight:600}
.mat .cd{font-family:var(--cond);color:var(--muted);letter-spacing:.04em}
.level{display:grid;gap:6px}
.level .nums{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.level .st{font-family:var(--cond);font-size:1.5rem;font-weight:700;line-height:1}
.level .st small{font-size:.95rem;color:var(--muted);font-weight:500;margin-left:3px}
.level .mn{font-size:.82rem;color:var(--muted)}
.gauge{position:relative;height:10px;background:var(--surface2);border:1px solid var(--line);border-radius:5px;overflow:visible}
.gauge b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--ok)}
.gauge i{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);left:50%}
.mat.warn .gauge b{background:var(--warn)} .mat.out .gauge b{background:var(--danger)}
.tag{display:inline-block;font-size:.75rem;font-weight:600;border-radius:5px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.tag.warn{background:var(--warn-bg);color:var(--warn)} .tag.out{background:var(--danger-bg);color:var(--danger)}
.val{font-size:.88rem;color:var(--muted)} .val b{display:block;color:var(--ink);font-family:var(--cond);font-size:1.15rem}
.acts{display:flex;gap:6px}
.buy{border-color:var(--warn);background:linear-gradient(var(--warn-bg),var(--warn-bg)) top/100% 6px no-repeat,var(--surface)}

/* Tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th{text-align:left;font-weight:600;color:var(--muted);font-size:.8rem;padding:8px 10px;border-bottom:2px solid var(--ink);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.anul td{color:var(--muted);text-decoration:line-through}
tr.anul td:last-child{text-decoration:none}
tfoot td{font-weight:700;border-bottom:0;border-top:2px solid var(--ink)}
.t-in{color:var(--ok);font-weight:600}.t-out{color:var(--accent);font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:6px}
.kpi{border-left:4px solid var(--line);padding:4px 0 4px 14px}
.kpi.in{border-color:var(--ok)}.kpi.out{border-color:var(--accent)}.kpi.inv{border-color:var(--ink)}
.kpi span{display:block;font-size:.85rem;color:var(--muted)}
.kpi b{display:block;font-family:var(--cond);font-size:1.9rem;line-height:1.1}
.kpi small{color:var(--muted)}

/* Dialog & toast */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:22px;max-width:min(560px,92vw)}
dialog::backdrop{background:rgba(5,12,16,.55)}
#qrPrev{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:10px;font-weight:500;z-index:40;transition:.25s;max-width:90vw;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width: 900px){
  .scan-grid{grid-template-columns:1fr}
  .mat{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px}
  .mat .val{grid-column:1}
  .mat .acts{justify-content:flex-end}
}
@media (max-width: 759px){
  .top{gap:10px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);
    border-top:1px solid var(--line);padding:4px 4px env(safe-area-inset-bottom,0px)}
  .tabs button{flex-direction:column;gap:2px;font-size:.78rem;padding:7px 0;border-radius:8px}
  .tabs button.on::after{display:none}
  .tabs .badge{position:absolute;top:2px;left:calc(50% + 6px)}
  main{padding-bottom:96px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .lines-head{display:none}
  .line{grid-template-columns:1fr 1fr 40px}
  .line select{grid-column:1/-1}
  .line .sub-t{grid-column:1/3;text-align:left}
  .line .rm{grid-column:3;grid-row:3}
  .finder{aspect-ratio:1/1}
  .brand small{display:none}
}

/* ---- Standalone: login, usuario, sincronización ---- */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}
.login .card{width:min(400px,100%);margin:0}
.login .brand{margin:0 0 20px}
.login form{display:grid;gap:14px}
.login .btn{width:100%}
.userbox{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.userbox b{color:var(--ink);font-weight:600}
.sync{border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.82rem;font-weight:600;background:var(--surface2);cursor:pointer;white-space:nowrap}
.sync.off{border-color:var(--warn);background:var(--warn-bg)}
.sync.err{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.pend{color:var(--warn);font-weight:600}
.qitem{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.qitem:first-child{border-top:0}
.qitem .e{color:var(--danger);font-size:.85rem}
.update{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));z-index:45;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:10px 18px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer}
.refresh{margin-left:auto}
@media (max-width: 759px){ .userbox .nm{display:none} .lowpill{display:none} }