/* ═══ RUSSO WMS — "CONSOLE" skin overlay (mockup layer) ═══
   Tokens copied verbatim from sucursales ui.css.php v4 (Chargetrip-derived).
   Radius hierarchy: bar 22 · card 14 · panel 11 · btn 10 · input 9 · pill 999 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
  --red:#F03A3E; --red-dark:#D42A2E; --red-soft:rgba(240,58,62,.16); --on-red:#fff;
  --bg:#0E1116; --panel:#12161C; --bp:#191F27; --bs:#1C222B; --bt:#232B36;
  --ct:#E9EDF2; --cs:#8A93A0; --cf:#656E7B;
  --ok:#3FB98C; --ok-bg:rgba(63,185,140,.13); --dng:#FF6B6E; --dng-bg:rgba(255,107,110,.13);
  --inf:#5B9DFF; --inf-bg:rgba(91,157,255,.13); --wrn:#E8A13C; --wrn-bg:rgba(232,161,60,.13);
  --wo:#A98BFA; --wo-bg:rgba(169,139,250,.14);
  --border:#262C36; --hair:#1E242C;
  --sh-card:0 1px 3px rgba(0,0,0,.28); --sh-float:0 6px 24px rgba(0,0,0,.32);
  --r-bar:22px; --r-card:14px; --r-panel:11px; --r-btn:10px; --r-in:9px; --r-pill:999px;
}

[data-theme="light"]{
  --red:#D7282B; --red-dark:#B81F22; --red-soft:rgba(215,40,43,.10); --on-red:#fff;
  --bg:#EEF0F3; --panel:#F4F6F8; --bp:#FFFFFF; --bs:#F7F8FA; --bt:#E9EBEF;
  --ct:#141920; --cs:#5B6472; --cf:#98A0AD;
  --ok:#0B9A57; --ok-bg:#E2F5EC; --dng:#C43539; --dng-bg:#FBE7E7;
  --inf:#2E6FE0; --inf-bg:#E6EEFC; --wrn:#9A6608; --wrn-bg:#F8EFDA;
  --wo:#6D45D8; --wo-bg:#ECE6FA;
  --border:#E1E4E9; --hair:#EAECF0;
  --sh-card:0 1px 3px rgba(20,25,32,.06); --sh-float:0 8px 28px rgba(20,25,32,.12);
}
/* printing is ALWAYS light — paper is white */
@media print{
  :root,[data-theme="dark"]{
    --bg:#fff; --panel:#fff; --bp:#fff; --bs:#fff; --bt:#fff;
    --ct:#141920; --cs:#5B6472; --cf:#98A0AD; --border:#D8DCE2; --hair:#E5E8ED;
    --sh-card:none; --sh-float:none;
  }
  body{background:#fff!important;color:#141920!important}
}
/* theme toggle chip */
.themebtn{background:var(--bt);border:1px solid var(--border);color:var(--cs);border-radius:999px;
  padding:7px 13px;font-family:'Inter',sans-serif;font-weight:600;font-size:.8rem;cursor:pointer}

body{background:var(--bg)!important;color:var(--ct)!important;
  font-family:'Inter',system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}

/* ── dropship pages (ds_head markup) ── */
.top{background:color-mix(in srgb, var(--bg) 80%, transparent)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair)!important;box-shadow:none!important;position:sticky;top:0}
.top h1{color:var(--ct)!important;font-family:'Inter',sans-serif!important;font-weight:700!important;letter-spacing:-.02em}
.top p{color:var(--cs)!important}
.out button{background:var(--bt)!important;color:var(--ct)!important;border:1px solid var(--border)!important;
  border-radius:var(--r-btn)!important;font-family:'Inter',sans-serif!important}
.wrap .btn, .btn{background:var(--bp)!important;border:1px solid var(--border)!important;color:var(--ct)!important;
  border-radius:var(--r-card)!important;box-shadow:var(--sh-card)!important;font-family:'Inter',sans-serif!important}
.btn b{color:var(--ct)!important}.btn span{color:var(--cs)!important}
.btn:hover{border-color:var(--red)!important}
.card{background:var(--bp)!important;border:1px solid var(--border)!important;color:var(--ct)!important;
  border-radius:var(--r-card)!important;box-shadow:var(--sh-card)!important}
.meta{color:var(--cs)!important}
.kpi{background:var(--bp)!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;
  box-shadow:var(--sh-card)!important}
.kpi b{font-family:'JetBrains Mono',monospace!important;font-variant-numeric:tabular-nums;color:var(--ct)}
.kpi span{color:var(--cf)!important;letter-spacing:.05em}
.panel{background:var(--bp)!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;
  box-shadow:var(--sh-card)!important}
.panel h3{color:var(--ct)!important;font-family:'Inter',sans-serif!important}
.fbtn{background:var(--bt)!important;border:1px solid var(--border)!important;color:var(--cs)!important;
  border-radius:var(--r-pill)!important;font-family:'Inter',sans-serif!important}
.fbtn.on{background:var(--red)!important;border-color:var(--red)!important;color:var(--on-red)!important}
.srch{background:var(--bt)!important;border:1px solid var(--border)!important;color:var(--ct)!important;
  border-radius:var(--r-in)!important;font-family:'Inter',sans-serif!important}
.srch:focus{outline:2px solid var(--red);border-color:var(--red)!important}
table{color:var(--ct)!important}
thead tr, #tbl thead tr{background:var(--panel)!important}
#tbl thead th, thead th{color:var(--cf)!important;font-size:.66rem!important;letter-spacing:.06em!important;
  text-transform:uppercase;font-family:'Inter',sans-serif!important;background:var(--panel)!important}
#tbl tbody tr{background:var(--bp)!important;border-top:1px solid var(--hair)!important}
#tbl td{border-color:var(--hair)!important;color:var(--ct)!important}
#tbl td b, td[style*="tabular"]{font-family:'JetBrains Mono',monospace!important}
.st{border-radius:var(--r-pill)!important;font-family:'Inter',sans-serif!important;
  background:var(--bt)!important;color:var(--cs)!important}
.st.inv{background:var(--ok-bg)!important;color:var(--ok)!important}
.st.new{background:var(--inf-bg)!important;color:var(--inf)!important}
.go{background:var(--red)!important;color:var(--on-red)!important;border-radius:var(--r-btn)!important;
  box-shadow:0 2px 10px var(--red-soft)!important;font-family:'Inter',sans-serif!important;border:0!important}
.mini{background:var(--bt)!important;border:1px solid var(--border)!important;color:var(--ct)!important;
  border-radius:var(--r-btn)!important;font-family:'Inter',sans-serif!important}
.drop{border:2px dashed var(--border)!important;color:var(--cf)!important;border-radius:var(--r-panel)!important;background:var(--panel)!important}
.lblrow{border-bottom:1px solid var(--hair)!important;color:var(--ct)!important}
.scan{background:var(--bt)!important;border:1px solid var(--border)!important;color:var(--ct)!important;border-radius:var(--r-in)!important}
.phase{color:var(--inf)!important;font-family:'Inter',sans-serif!important}
.count{color:var(--ok)!important;font-family:'JetBrains Mono',monospace!important}
a{color:var(--inf)}

/* ── PIN page ── */
.pinwrap,.pin-card{background:var(--bp)!important;border:1px solid var(--border)!important;
  border-radius:var(--r-card)!important;box-shadow:var(--sh-float)!important}
.pinpad button,.key{background:var(--bt)!important;color:var(--ct)!important;border:1px solid var(--border)!important;
  border-radius:var(--r-btn)!important;font-family:'JetBrains Mono',monospace!important}
.pinpad button:active{transform:translateY(1px)}
.enter,button[type=submit].enter{background:var(--red)!important;color:#fff!important;box-shadow:0 2px 10px var(--red-soft)!important}
.dots span{border-color:var(--cs)!important}.dots span.on{background:var(--red)!important;border-color:var(--red)!important}
.brand,.logo{color:var(--ct)!important}

/* ── count sheet (lib.php SHEET) ── */
.sheet{background:var(--bg)!important;color:var(--ct)!important}
.sheet header .brand{color:var(--ct)!important}.sheet header .brand b{color:var(--red)!important}
.sheet .title,.sheet .date,.sheet .addr{color:var(--cs)!important;font-family:'Inter',sans-serif!important}
.toolbar{background:color-mix(in srgb, var(--bg) 82%, transparent)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair)!important}
.toolbar .btn{background:var(--bt)!important;color:var(--ct)!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important}
.toolbar .btn.finish{background:var(--red)!important;color:#fff!important;border:0!important}
.toolbar .btn.save{background:var(--ok-bg)!important;color:var(--ok)!important;border:1px solid var(--ok)!important}
.sheet table{background:transparent!important}
.sheet thead th{background:var(--panel)!important;color:var(--cf)!important;font-size:.66rem!important;
  letter-spacing:.06em!important;text-transform:uppercase}
.sheet tbody td{background:var(--bp)!important;border-color:var(--hair)!important;color:var(--ct)!important}
.sheet .desc,.sheet .part{color:var(--ct)!important}
.sheet input[type=text],.sheet input{background:var(--bt)!important;color:var(--ct)!important;
  border:1px solid var(--border)!important;border-radius:var(--r-in)!important;
  font-family:'JetBrains Mono',monospace!important}
/* …but the count boxes carry MEANING: green = counted right, red = off. The blanket rule above is
   !important, so the page's own .match/.diff (plain rules) lost and every box went grey. Restate
   them here at higher specificity + !important, in theme tokens so both light and dark stay legible.
   Applies to the tire cells AND the cross-populated supply cells — both use .match/.diff. */
.sheet .count-input.match{background:var(--ok-bg)!important;border-color:var(--ok)!important;
  color:var(--ok)!important;font-weight:800!important}
.sheet .count-input.diff{background:var(--dng-bg)!important;border-color:var(--dng)!important;
  color:var(--dng)!important;font-weight:800!important}
.zone,.zoneband{background:var(--panel)!important;color:var(--cs)!important;border-radius:var(--r-panel)!important}
.fbtn.active{background:var(--red)!important;color:#fff!important}
.hint{color:var(--cf)!important}
.savechip{background:var(--ok-bg)!important;color:var(--ok)!important;border-radius:var(--r-pill)!important}
.pd-pad{background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important}
.pd-pad-title{color:var(--wo)!important}
.pd-addbtn{background:var(--wo)!important;border-radius:var(--r-btn)!important}
.pd-item{background:var(--bp)!important;border:1px solid var(--border)!important;color:var(--ct)!important;border-radius:var(--r-panel)!important}

/* ── PIN page (approved mock, exact Sucursales pinbox recipe) ── */
body.pinpage{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.pinbox2{background:var(--bp)!important;border:1px solid var(--border)!important;border-radius:20px!important;
  padding:36px 34px 34px!important;width:356px!important;max-width:100%;text-align:center;box-shadow:var(--sh-float)!important}
.pinbox2 .applogo{width:56px;height:56px;border-radius:14px;margin:0 auto 14px;display:block}
.pinbox2 h2{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;color:var(--ct)}
.pinbox2 h2 .r{color:var(--red)}
.pinbox2 .sub2{color:var(--cs);font-size:.88rem;margin-bottom:24px}
.pinbox2 .dots2{display:flex;gap:13px;justify-content:center;margin-bottom:26px;min-height:12px}
.pinbox2 .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--cf);display:inline-block;background:transparent}
.pinbox2 .dot.on{background:var(--red);border-color:var(--red);box-shadow:0 0 10px var(--red-soft)}
.pinbox2 .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.pinbox2 .key{height:58px;font-family:'JetBrains Mono',monospace!important;font-size:1.22rem;font-weight:500;color:var(--ct)!important;
  background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:12px!important;cursor:pointer;box-shadow:none!important}
.pinbox2 .key:hover{border-color:var(--cs)!important}
.pinbox2 .key:active{background:var(--bt)!important;transform:translateY(1px)}
.pinbox2 .key.kclear{font-size:.82rem;letter-spacing:.08em;color:var(--cs)!important;font-family:'Inter',sans-serif!important;font-weight:600}
.pinbox2 .key.kok{color:var(--red)!important;font-size:1.35rem}
.pinbox2 .langpill{display:flex;justify-content:center;margin-top:26px}
.pinbox2 .langpill>div{display:flex;background:var(--panel);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.pinbox2 .langbtn{padding:9px 20px!important;font-family:'Inter',sans-serif!important;font-size:.82rem!important;font-weight:600!important;
  color:var(--cs)!important;background:none!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
.pinbox2 .langbtn.active,.pinbox2 .langbtn.on{background:var(--red)!important;color:#fff!important}
.pinbox2 .err2{color:var(--dng);font-size:.85rem;margin-top:14px}
/* sheet fixes: hint card + tight column heads */
.sheet .hint{background:var(--panel)!important;color:var(--cs)!important;border:1px solid var(--border)!important;border-radius:var(--r-panel)!important}
.sheet .hint b{color:var(--ct)!important}
.sheet thead th{font-size:.58rem!important;letter-spacing:.03em!important;padding-left:2px!important;padding-right:2px!important}
.sheet .lockbanner{background:var(--wrn-bg)!important;color:var(--wrn)!important;border:1px solid var(--wrn)!important;border-radius:var(--r-panel)!important}
.sheet .modal-box,.case-sheet,.txn-sheet{background:var(--bp)!important;color:var(--ct)!important;border:1px solid var(--border)!important}
/* ── OWNER PASS 2: unified lang pill + headers + sheet button colors + zone inversion ── */
/* one lang-pill language for the WHOLE app (all PINs) */
.langtoggle,.langpill>div{display:inline-flex!important;background:var(--panel)!important;border:1px solid var(--border)!important;
  border-radius:999px!important;overflow:hidden;box-shadow:none!important}
.langbtn{padding:8px 18px!important;font-family:'Inter',sans-serif!important;font-size:.8rem!important;font-weight:600!important;
  color:var(--cs)!important;background:none!important;border:0!important;border-radius:999px!important;box-shadow:none!important;text-transform:uppercase}
.langbtn.active,.langbtn.on{background:var(--red)!important;color:#fff!important}
.themebtn{margin-right:8px}
/* headers match everywhere: same surface + brand treatment */
.sheet header,.brand-hdr,.top{background:color-mix(in srgb, var(--bg) 82%, transparent)!important}
.sheet header .brand,.brand .n{font-family:'Inter',sans-serif!important;font-weight:700!important;color:var(--ct)!important;letter-spacing:-.02em}
.sheet header .brand b,.brand .n b{color:var(--red)!important}
/* count-sheet toolbar buttons get their colors back (both themes) */
.toolbar .btn{background:var(--bt)!important;color:var(--ct)!important;border:1px solid var(--border)!important;border-radius:var(--r-btn)!important}
.toolbar .btn.secondary{color:var(--cs)!important}
.toolbar .btn.save{background:var(--ok-bg)!important;color:var(--ok)!important;border-color:var(--ok)!important}
.toolbar .btn.finish{background:var(--red)!important;color:#fff!important;border:0!important;box-shadow:0 2px 10px var(--red-soft)!important}
.toolbar .btn:not(.save):not(.finish):not(.secondary){background:var(--inf-bg)!important;color:var(--inf)!important;border-color:var(--inf)!important}
.clearbtn{background:var(--dng-bg)!important;color:var(--dng)!important;border:1px solid var(--dng)!important;border-radius:var(--r-btn)!important}
/* zone bands INVERT vs the page: light theme = dark band/white text, dark theme = light band/dark text */
.zone-row,.zone-row td{background:var(--ct)!important;color:var(--bg)!important}
.zone-row .zone-name{color:var(--bg)!important;font-weight:700}
.zone-row .zone-prog{color:var(--ok)!important}
[data-theme="light"] .zone-row .zone-prog{color:#7CF0BD!important}
/* zone bands: force the inversion over the template's own colors */
.sheet tr.zone-row th,.sheet tr.zone-row td,.sheet .zone-row{background:var(--ct)!important;color:var(--bg)!important}
.sheet .zone-row *{color:var(--bg)!important;opacity:1!important}
.sheet .zone-row .zone-prog,.sheet .zone-row .zone-prog *{color:#3FB98C!important}
/* ── MASTER FIX: remap every legacy page-variable onto the Console tokens, so ALL old
   components (launcher cards, accordions, supplies rows…) follow the theme automatically ── */
:root,[data-theme="light"],[data-theme="dark"]{
  --ink:var(--ct); --ink-2:var(--bs); --muted:var(--cs); --muted-2:var(--cf);
  --surface:var(--bp); --surface-2:var(--panel);
  --line:var(--hair); --line-2:var(--border);
  --green:var(--ok); --green-soft:var(--ok-bg); --green-d:var(--ok);
  --amber:var(--wrn); --amber-soft:var(--wrn-bg);
}
/* legacy dark-navy header bands: keep readable in both themes */
.brand{background:var(--bs)!important}
.brand .n{color:var(--ct)!important}.brand .s{color:var(--cs)!important}
/* launcher day cards */
.rlist .card{background:var(--bp)!important;border-color:var(--hair)!important}
.rlist .card .card-name{color:var(--ct)!important}
.rlist .card .card-bot,.rlist .card .card-when{color:var(--cs)!important}
/* ── OWNER PASS 3 ── */
/* unified header brand on all dropship pages */
.top .bn{font-family:'Inter',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ct);line-height:1.15}
.top .bn .br{color:var(--red)}
.top .bsub{color:var(--cs)!important;font-size:.8rem!important;margin:0!important}
.pinbox2 h2,.brand .n,.sheet header .brand{font-weight:800!important}
/* scanner: keep width, cap height */
#cam{min-height:0!important;height:200px!important;max-height:200px!important;overflow:hidden!important}
#cam video{width:100%!important;height:200px!important;object-fit:cover!important}
/* green flash on every good scan */
.scanflash{position:fixed;inset:0;z-index:99;pointer-events:none;background:rgba(63,185,140,.45);
  animation:scfl .26s ease-out forwards}
@keyframes scfl{0%{opacity:1}100%{opacity:0}}
/* ── EXACT Sucursales control set: iconbtn + lang pill + svg icons ── */
.tools{display:flex;gap:9px;align-items:center}
.iconbtn{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--cs);border:1px solid var(--border)!important;background:var(--bs)!important;cursor:pointer;
  transition:border-color .14s,color .14s;box-shadow:none!important;padding:0!important}
.iconbtn:hover{border-color:var(--cs)!important;color:var(--ct)}
.icon{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lang{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bs);align-self:center}
.lang .langbtn{color:var(--cs)!important;padding:7px 13px!important;min-height:38px;font-weight:600!important;font-size:.78rem!important;background:none!important;border:0!important;border-radius:0!important}
.lang .langbtn.on,.lang .langbtn.active{background:var(--red)!important;color:var(--on-red)!important}
.ico-moon{display:none}
[data-theme="dark"] .ico-moon{display:block}
[data-theme="dark"] .ico-sun{display:none}
/* ── EXACT Sucursales canvas + tablecard on the dropship board ── */
/* WIDTH (owner 2026-08-19: "make the whole website wider, I hate side scrolling"). 1340px was
   set when the dropship board had fewer columns; it is an !important cap, so a page could not
   opt out of it — the board's own max-width was being overridden and its 11-column table spilled
   past the screen. Now the canvas takes the window: a real ceiling for huge monitors, 98vw
   everywhere else, and slimmer gutters so the table gets the pixels instead of the margins. */
.wrap{max-width:min(1900px,98vw)!important;padding:30px 16px 100px!important;margin:0 auto}
.kpi{padding:20px 22px!important;text-align:left!important}
.kpi b{font-size:2.1rem!important;font-weight:700!important;letter-spacing:-.03em;line-height:1.08;display:block}
.kpi span{font-size:.7rem!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase;margin-top:6px;display:block}
.tablecard{background:var(--bp)!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;
  padding:7px!important;margin-bottom:18px;box-shadow:var(--sh-card)!important}
.scrollx{overflow-x:auto;overflow-y:hidden;background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:var(--r-panel)!important}
.tbl{width:100%;border-collapse:collapse!important;font-size:.9rem!important}
.tbl th{background:transparent!important;color:var(--cf)!important;text-align:left;font-size:.66rem!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.05em!important;padding:11px 10px!important;white-space:nowrap;border:0!important;border-bottom:1px solid var(--hair)!important}
.tbl td{padding:12px 10px!important;border:0!important;border-top:1px solid var(--hair)!important;vertical-align:middle;background:transparent!important;color:var(--ct)!important}
/* A NARROWER WINDOW TIGHTENS THE TABLE instead of pushing it off-screen. Eleven columns of
   13px padding cannot fit a laptop; the same eleven columns at 6px and .78rem can. Nothing is
   hidden — the crew needs every column — it just gets denser as the window shrinks. */
@media (max-width:1500px){
  .tbl{font-size:.82rem!important}
  .tbl th{padding:9px 7px!important;font-size:.62rem!important}
  .tbl td{padding:9px 7px!important}
}
@media (max-width:1200px){
  .tbl{font-size:.76rem!important}
  .tbl th{padding:8px 5px!important}
  .tbl td{padding:8px 5px!important}
}
.tbl tbody tr{background:transparent!important}
.tbl tbody tr:first-child td{border-top:none!important}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--ct) 4%,transparent)!important}
.tbl td b,.tbl td[style*="tabular"],.tbl td a{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:-.02em}
.st{font-size:.68rem!important;font-weight:600!important;padding:4px 11px!important;border:1px solid transparent!important}
.st.inv{border-color:color-mix(in srgb, var(--ok) 26%, transparent)!important}
.st.new{border-color:color-mix(in srgb, var(--inf) 26%, transparent)!important}
/* button hierarchy: ONE red primary, the rest quiet ghosts (Sucursales .btn recipe) */
.go{min-height:44px}
.go.primary{background:var(--red)!important;color:var(--on-red)!important;box-shadow:0 2px 10px var(--red-soft)!important;border:0!important}
.go.primary:hover{background:var(--red-dark)!important}
.go.ghost{background:var(--bs)!important;color:var(--ct)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.go.ghost:hover{border-color:var(--cs)!important}
/* ── POLISH PASS: labels inbox + catalog get the full Sucursales tablecard language ── */
.panel{padding:7px!important;margin-bottom:18px}
.panel h3{padding:13px 15px 12px!important;margin:0!important;font-size:.95rem!important;font-weight:600!important;letter-spacing:-.01em}
.panel>div:not(#lbls):not(#confl){padding:0 15px 10px}
#lbls,#confl{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-panel);margin:0 8px 8px;overflow:hidden}
#lbls:empty,#confl:empty{display:none}
.lblrow{padding:12px 15px!important;border-bottom:0!important;border-top:1px solid var(--hair)!important;gap:12px!important;font-size:.9rem!important}
.lblrow:first-child{border-top:0!important}
.lblrow:hover{background:color-mix(in srgb,var(--ct) 4%,transparent)}
.lblrow>span:first-child{font-weight:600}
.lblrow a{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:-.02em}
.drop{padding:26px 16px!important;margin:4px 8px 10px!important;font-size:.9rem!important;border-radius:var(--r-panel)!important;
  transition:border-color .14s;cursor:pointer}
.drop:hover{border-color:var(--cs)!important}
.mini{min-height:34px!important;padding:6px 13px!important;font-size:.75rem!important;font-weight:600!important;
  font-family:'Inter',sans-serif!important;background:var(--bs)!important;border-radius:999px!important;color:var(--cs)!important}
.mini:hover{border-color:var(--cs)!important;color:var(--ct)!important}
.srch{min-height:42px!important;font-size:.94rem!important}
select.fbtn{min-height:38px;padding:7px 13px!important;cursor:pointer}
.fbtn{min-height:38px;padding:7px 13px!important;font-size:.78rem!important;font-weight:600!important}
.kpis{gap:14px!important;margin-bottom:6px}
/* section rhythm like Sucursales (18px blocks) */
.wrap>.flt{margin-top:18px}
/* file input inside catalog panel */
.panel input[type="file"]{color:var(--cs);font-size:.85rem}
/* ── action row: 5 buttons, one line on PC, Sucursales pill palette ── */
.actrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
@media(min-width:1020px){.actrow{flex-wrap:nowrap}.actrow .go{flex:1 1 0;max-width:none!important;white-space:nowrap}}
.go.c-ok{background:var(--ok-bg)!important;color:var(--ok)!important;border:1px solid color-mix(in srgb, var(--ok) 26%, transparent)!important;box-shadow:none!important}
.go.c-wrn{background:var(--wrn-bg)!important;color:var(--wrn)!important;border:1px solid color-mix(in srgb, var(--wrn) 26%, transparent)!important;box-shadow:none!important}
.go.c-inf{background:var(--inf-bg)!important;color:var(--inf)!important;border:1px solid color-mix(in srgb, var(--inf) 26%, transparent)!important;box-shadow:none!important}
.go.c-ok:hover{border-color:var(--ok)!important}.go.c-wrn:hover{border-color:var(--wrn)!important}.go.c-inf:hover{border-color:var(--inf)!important}
/* ── tablecard header (title + search + filters) + clickable pills ── */
.tchead{display:flex;align-items:center;gap:10px;padding:13px 15px 12px;flex-wrap:wrap}
.tct{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin-right:4px}
.srchwrap{display:flex;gap:8px;flex:1;min-width:260px;align-items:center}
.srch{flex:1!important;max-width:none!important;min-height:46px!important;font-size:1rem!important;
  border:1.5px solid color-mix(in srgb, var(--red) 45%, var(--border))!important}
.srch:focus{border-color:var(--red)!important;outline:2px solid var(--red-soft)}
.srchbtn{width:auto!important;min-height:46px;padding:0 18px!important;max-width:none!important;flex:0 0 auto!important;margin:0!important;
  background:var(--dng-bg)!important;color:var(--red)!important;border:1px solid color-mix(in srgb, var(--red) 30%, transparent)!important;
  border-radius:var(--r-btn)!important;font-weight:700!important;font-size:.8rem!important;box-shadow:none!important;cursor:pointer}
.srchbtn:hover{border-color:var(--red)!important}
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.8rem;letter-spacing:-.02em;
  padding:5px 12px;border-radius:999px;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.pill-trk{background:var(--inf-bg)!important;color:var(--inf)!important;border:1px solid color-mix(in srgb, var(--inf) 26%, transparent)!important}
.pill-trk:hover{border-color:var(--inf)!important}
.pill-po{background:var(--ok-bg)!important;color:var(--ok)!important;border:1px solid color-mix(in srgb, var(--ok) 26%, transparent)!important}
.pill-po:hover{border-color:var(--ok)!important}
/* launcher header tools = same set as everywhere; CONTEOS relocated to the body */
.brand .tools{margin-left:auto}
.brand .iconbtn{background:var(--bs)!important}
#countsBtn.hbtn{background:var(--red)!important;border:0!important;color:#fff!important;border-radius:999px!important;
  padding:10px 26px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:.85rem!important;
  letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 10px var(--red-soft)!important;cursor:pointer}
.brand{display:flex;align-items:center;gap:12px}
/* dropship Menu link matches the ghost pill language */
.menubtn{background:var(--bs)!important;border:1px solid var(--border)!important;color:var(--cs)!important;
  border-radius:10px!important;min-height:40px;display:inline-flex;align-items:center;padding:0 14px!important;
  font-weight:600!important;font-size:.8rem!important;text-decoration:none!important}
.menubtn:hover{border-color:var(--cs)!important;color:var(--ct)!important}
/* launcher header on phones: brand stays readable, tools compress */
.brand .brand-txt{min-width:0}
.brand .n{white-space:nowrap}
@media(max-width:520px){
  .brand{gap:8px}
  .brand .s{display:none}
  .brand .n{font-size:.95rem}
  .brand .logo{width:40px!important;height:40px!important}
  .tools{gap:6px}
  .lang .langbtn,.langtoggle .langbtn{padding:7px 9px!important;min-height:34px}
  .iconbtn{width:34px;height:34px}
  .brand{padding-left:14px!important;padding-right:14px!important}
}
/* ── unified search bar, centered in the top bar (board) ── */
.searchbar{display:flex;flex:1;max-width:560px;min-width:220px;margin:0 6px}
.searchbar .srch{flex:1!important;min-height:44px!important;border-radius:10px 0 0 10px!important;
  border:1.5px solid color-mix(in srgb, var(--red) 45%, var(--border))!important;border-right:0!important;font-size:.95rem!important;max-width:none!important}
.searchbar .srch:focus{outline:none!important;border-color:var(--red)!important}
.searchbar .srchbtn{width:auto!important;min-height:44px;padding:0 16px!important;margin:0!important;flex:0 0 auto!important;
  background:var(--dng-bg)!important;color:var(--red)!important;font-weight:700!important;font-size:.78rem!important;
  border:1.5px solid color-mix(in srgb, var(--red) 45%, var(--border))!important;border-left:0!important;
  border-radius:0 10px 10px 0!important;cursor:pointer;box-shadow:none!important}
.searchbar .srchbtn:hover{background:var(--red)!important;color:#fff!important}
@media(max-width:760px){.searchbar{order:9;flex-basis:100%;max-width:none;margin:6px 0 0}}

/* ── FINAL CONSISTENCY PASS ── */
/* capsule lang pill EVERYWHERE (kills the red-circle look): container clips, buttons square inside */
.langtoggle{display:inline-flex!important;background:var(--bs)!important;border:1px solid var(--border)!important;
  border-radius:999px!important;overflow:hidden!important;box-shadow:none!important}
.langtoggle .langbtn,.lang .langbtn,.langpill>div .langbtn{border-radius:0!important;padding:8px 16px!important;min-height:38px!important;
  font-size:.78rem!important;font-weight:600!important}
.langbtn{border-radius:0!important}
/* search bar truly CENTERED in the top bar */
.top>div{justify-content:space-between}
.searchbar{margin:0 auto!important}
/* filters centered in the tablecard header */
.tchead{justify-content:center;position:relative}
.tchead .tct{position:absolute;left:15px}
@media(max-width:900px){.tchead{justify-content:flex-start}.tchead .tct{position:static}}
/* launcher mobile: brand must never clip */
@media(max-width:520px){
  .brand .n{font-size:.95rem!important}
  .brand .logo{width:36px!important;height:36px!important;flex:none}
  .langtoggle .langbtn{padding:7px 11px!important;min-height:34px!important}
}
/* ═══ PREMIUM MOTION LAYER — Sucursales spring (.2,.7,.3,1), reduced-motion safe ═══ */
:root{--mo:cubic-bezier(.2,.7,.3,1)}
@keyframes wFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wPopIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes wSheetUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes wOverlay{from{opacity:0}to{opacity:1}}
@keyframes wRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* screens breathe in */
/* PAGE CONTAINERS MUST NEVER ANIMATE TRANSFORM: a transform-animated ancestor becomes the
   containing block for position:fixed descendants, so the count sheet's case pad / modals /
   toasts (fixed, inside .sheet/.wrap) stop sticking to the screen and render at the BOTTOM
   OF THE DOCUMENT — off-screen, user sees only the dim backdrop (the iPhone "pad not
   working" bug, 2026-07-17). Opacity-only entrance is safe: opacity never creates a
   containing block. No fill-mode either, so a non-running animation can't hide the page. */
@keyframes wPageIn{from{opacity:0}to{opacity:1}}
.wrap,.sheet,.pinbox2,body>.card{animation:wPageIn .32s ease-out}
/* dashboard cards stagger */
.kpi{animation:wPopIn .38s var(--mo) both}
.kpis .kpi:nth-child(1){animation-delay:.02s}.kpis .kpi:nth-child(2){animation-delay:.06s}
.kpis .kpi:nth-child(3){animation-delay:.10s}.kpis .kpi:nth-child(4){animation-delay:.14s}
.kpis .kpi:nth-child(5){animation-delay:.18s}.kpis .kpi:nth-child(6){animation-delay:.22s}
.tablecard,.panel{animation:wFadeUp .4s var(--mo) both;animation-delay:.08s}
.actrow{animation:wFadeUp .4s var(--mo) both;animation-delay:.14s}
/* rows slide in softly (first paint only — JS repaints re-trigger cheaply) */
#tbl tbody tr,.lblrow{animation:wRowIn .3s var(--mo) both}
#tbl tbody tr:nth-child(-n+12){animation-delay:calc(var(--i,0)*0s)}
/* interactive feel: everything eases */
.go,.btn,.iconbtn,.mini,.fbtn,.langbtn,.pill,.st,.key,.srchbtn,.menubtn,.hbtn,.themebtn{
  transition:transform .16s var(--mo),box-shadow .16s var(--mo),background .16s var(--mo),
    border-color .16s var(--mo),color .16s var(--mo)!important}
.go:hover,.btn:hover,.hbtn:hover{transform:translateY(-1px)}
.go:active,.btn:active,.iconbtn:active,.mini:active,.fbtn:active,.key:active,.srchbtn:active,.hbtn:active{transform:translateY(1px) scale(.985)}
.pill:hover,.st:hover{transform:translateY(-1px) scale(1.03)}
.iconbtn:hover{transform:translateY(-1px)}
.iconbtn:hover .icon{transform:rotate(12deg)}
.iconbtn .icon{transition:transform .2s var(--mo)}
.kpi{transition:transform .18s var(--mo),box-shadow .18s var(--mo)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-float)}
.card{transition:transform .18s var(--mo),box-shadow .18s var(--mo),border-color .18s var(--mo)}
.rlist .card:hover{transform:translateX(2px)}
/* inputs: soft focus ring bloom */
.srch,.scan,.inp,input[type=text],input[type=date],select{transition:border-color .16s var(--mo),box-shadow .16s var(--mo)!important}
.srch:focus,.scan:focus,input[type=text]:focus{box-shadow:0 0 0 4px var(--red-soft)!important}
/* modals & sheets: backdrop fades, dialog springs, bottom-sheets slide.
   CRITICAL: entrance animations must use NO 'both' fill-mode. iOS Safari does not always
   restart an animation when a display:none→flex ancestor un-hides; with 'both' the sheet
   then stays pinned at its 0% frame (opacity:0, translateY 100% = off-screen) and you get a
   dim backdrop with an INVISIBLE pad — that was the "count por-caja pad not working" bug.
   Without 'both' a non-running animation simply falls back to the element's natural CSS,
   which is fully visible. The pad entrances are also scoped to .show so the class toggle
   itself starts the animation (the reliable-restart pattern on iOS). */
.modal,#finishModal,.txnmodal,.bigbad{animation:wOverlay .18s ease-out}
.casepad.show{animation:wOverlay .18s ease-out}
.modal-box{animation:wPopIn .26s var(--mo)}
.casepad.show .case-sheet,.txnmodal.show .txn-sheet,.case-sheet,.txn-sheet{animation:wSheetUp .3s var(--mo)}
.bigbad>div,.bigbad h2,.bigbad p,.bigbad .dismiss{animation:wPopIn .3s var(--mo)}
.toast{transition:opacity .2s var(--mo),transform .2s var(--mo)}
/* dropdown/accordion rows in the launcher */
.countspanel{animation:wFadeUp .26s var(--mo) both}
/* zone bands settle in on the count sheet */
.zone-row td{transition:background .2s var(--mo)}
/* smooth page scrolling + theme cross-fade */
html{scroll-behavior:smooth}
body{transition:background .24s ease,color .24s ease}
.top{transition:background .24s ease,border-color .24s ease}
/* ── OWNER PASS 4 ── */
/* 1. launcher brand: logo must never overlap the name; title never clips */
.brand{display:flex!important;align-items:center!important;gap:12px!important;text-align:left!important}
.brand .logo{margin:0!important;flex:none!important}
.brand .brand-txt{flex:1 1 auto;min-width:0}
.brand .n{white-space:normal!important;overflow:visible!important;font-size:1.25rem}
.brand .s{display:block}
@media(max-width:520px){.brand .n{font-size:1rem!important}.brand .s{display:none}}
/* 2+3. count-sheet toolbar: Guardar BLUE, PDF RED; filters full-width, no enclosure, punchy */
.toolbar .btn.save{background:var(--inf-bg)!important;color:var(--inf)!important;border:1.5px solid var(--inf)!important}
.toolbar .btn.save svg{stroke:var(--inf)}
.toolbar .btn:not(.save):not(.finish):not(.secondary){background:var(--dng-bg)!important;color:var(--red)!important;border:1.5px solid var(--red)!important}
.toolbar .btn:not(.save):not(.finish):not(.secondary) svg{stroke:var(--red)}
.sheet .filters{display:flex!important;gap:10px!important;border:0!important;background:none!important;padding:0!important;margin-top:10px}
.sheet .filters .fbtn{flex:1 1 0!important;min-height:44px;border-radius:999px!important;
  background:var(--bt)!important;border:1px solid var(--border)!important;color:var(--ct)!important;
  font-weight:700!important;font-size:.88rem!important;text-align:center;justify-content:center}
.sheet .filters .fbtn.active{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important;
  box-shadow:0 2px 10px var(--red-soft)!important}
/* 4. theme chip breathing room next to every ES/EN pill */
.langrow{display:flex;justify-content:center;align-items:center;gap:10px!important}
.langpill{gap:10px!important}
.langpill .iconbtn,.langrow .iconbtn{margin-right:0!important}
.themebtn{margin-right:0}
.tools{gap:9px!important}
/* ── MORE PREMIUM MOTION ── */
@keyframes wPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wGlow{from{box-shadow:0 2px 10px var(--red-soft)}to{box-shadow:0 6px 22px var(--red-soft)}}
@keyframes wDotPop{from{transform:scale(.4)}to{transform:scale(1)}}
#ts:empty,#ts{transition:opacity .2s}
.meta{transition:opacity .25s var(--mo)}
.go.primary:hover{animation:wGlow .5s var(--mo) both}
#countsBtn.hbtn:hover{animation:wGlow .5s var(--mo) both;transform:translateY(-1px)}
.pinbox2 .dot.on,.dots2 .dot.on{animation:wDotPop .18s var(--mo)}
#cam{transition:box-shadow .3s var(--mo)}
#cam:not(:empty){box-shadow:0 0 0 3px var(--ok-bg)}
input[type="checkbox"]{transition:transform .14s var(--mo);accent-color:var(--red)}
input[type="checkbox"]:checked{transform:scale(1.15)}
.ckwo{cursor:pointer}
#tbl tbody tr{transition:background .14s var(--mo),transform .14s var(--mo)}
#tbl tbody tr:hover{transform:translateX(2px)}
.lblrow{transition:background .14s var(--mo),transform .14s var(--mo)}
.lblrow:hover{transform:translateX(2px)}
.pd-btn,.bd-btn{transition:transform .14s var(--mo),background .14s var(--mo)!important}
.pd-btn:active,.bd-btn:active{transform:scale(.92)!important}
.zone-row td{animation:wRowIn .3s var(--mo) both}
a{transition:color .14s var(--mo)}
.savechip{transition:opacity .3s var(--mo),transform .3s var(--mo)}
select{cursor:pointer}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--cs)}
@view-transition{navigation:auto}
/* launcher phones: tools wrap to their own line so the brand NEVER clips */
@media(max-width:520px){
  .brand{flex-wrap:wrap!important;row-gap:10px}
  .brand .brand-txt{flex:1 1 auto;min-width:140px}
  .brand .n{white-space:nowrap!important;font-size:1.05rem!important}
  .brand .tools{flex-basis:100%;justify-content:flex-end;margin-left:0!important}
  .brand .logo{display:none!important}
}
/* ── BIG-FINGER PIN PAD: taller keys, bigger digits, full-width card on phones ── */
.pinbox2{width:400px!important;padding:34px 26px 30px!important}
.pinbox2 .pad{gap:13px!important}
.pinbox2 .key{height:72px!important;font-size:1.75rem!important;border-radius:14px!important}
.pinbox2 .key.kclear{font-size:1rem!important}
.pinbox2 .key.kok{font-size:1.9rem!important}
.pinbox2 .dots2{gap:16px!important}
.pinbox2 .dot{width:15px!important;height:15px!important}
@media(max-width:430px){
  body.pinpage{padding:10px!important}
  .pinbox2{width:100%!important}
  .pinbox2 .key{height:78px!important;font-size:1.9rem!important}
  .pinbox2 .key.kok{font-size:2.1rem!important}
}
/* ── BRAND: "RUSSO TIRES" is ALWAYS weight-800, everywhere ── */
.brand .n,.brand-txt .n,.top .bn,.pinbox2 h2,.sheet header .brand,.ph-brand,
.brand .n b,.top .bn .br,.sheet header .brand b{
  font-weight:800!important;letter-spacing:-.02em}
/* ── OWNER PASS 5 ── */
/* 1. bin text: bolder + bigger */
.bin-input{font-weight:800!important}
/* 2. launcher mobile: kill ANY logo/img in the brand row; name owns line one */
@media(max-width:560px){
  .brand img,.brand .logo,.brand [class*="logo"]{display:none!important}
  .brand .brand-txt{order:-1;flex-basis:100%}
}
/* 3. sticky top bar always ABOVE animated content */
.top{z-index:120!important}
.sheet header{position:relative;z-index:5}
/* 4a. Menu button: same family as the icon chips */
.menubtn{min-height:40px!important;height:40px;padding:0 14px!important;border-radius:10px!important;
  background:var(--bs)!important;border:1px solid var(--border)!important;color:var(--cs)!important;
  font-weight:600!important;font-size:.8rem!important;display:inline-flex!important;align-items:center;
  text-decoration:none!important;box-shadow:none!important}
.menubtn:hover{border-color:var(--cs)!important;color:var(--ct)!important;transform:translateY(-1px)}
/* 4b. search bar DEAD CENTER of the top bar (desktop), full-width row on phones */
@media(min-width:900px){
  .top>div{position:relative}
  .searchbar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(42%,560px);margin:0!important}
}
/* ── PIN PAD = ZERO-LATENCY ZONE: no animations, no transitions, instant press feedback ── */
body.pinpage,body.pinpage *{animation:none!important;transition:none!important}
.pinbox2 .key{touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;will-change:auto}
.pinbox2 .key:active{background:var(--bt)!important;border-color:var(--cs)!important;transform:none!important}
.pinbox2 .dot,.pinbox2 .dot.on{animation:none!important;transition:none!important}
/* ── OWNER PASS 6 ── */
/* launcher portrait: the logo is .brand::before (absolute at left) — hide IT on phones */
@media(max-width:560px){
  .brand::before{display:none!important;content:none!important}
  .brand{padding-left:16px!important}
  .brand .brand-txt{order:0;flex:1 1 auto}
}
@media(min-width:561px){
  .brand{padding-left:64px!important}   /* reserve the ::before logo space on bigger screens */
}
/* bins: BOLDER + bigger (Outfit 800 exists; 19px) */
/* ── BIN BOX ─────────────────────────────────────────────────────────────────
   ONE size on every row (owner 2026-08-07: "text size consistency for bins is a must
   have"). 15px is measured: two bins fit the 120px inner width, three cannot, so a
   third can never join a line. The box grows in lines; the type never shrinks.
   Dark mode was white-box/white-text — invisible — because the box hard-coded #fff
   while the skin set a light --ct on top. Both ends now come from the theme. */
.bin-input{font-weight:800!important;font-size:17px!important;letter-spacing:0!important;
  background:var(--bp)!important;color:var(--ct)!important;border-color:var(--border)!important}
[data-theme="light"] .bin-input{background:#fff!important;color:#141920!important;border-color:#D8DCE2!important}
.c-bin.changed .bin-input{background:rgba(232,161,60,.16)!important;color:#E8A13C!important;border-color:#E8A13C!important}
[data-theme="light"] .c-bin.changed .bin-input{background:#FEF7E7!important;color:#92590A!important;border-color:#FCD34D!important}
.bin-input::placeholder{color:var(--cf)!important}

/* ══ v7/v8 CARD SHEET (2026-08-13) — console skin for the redesigned count sheet.
   Four semantic colours only: green cuadrado · red revisar · violet DOT · amber
   pendiente. Every value comes from the skin tokens so light and dark stay a set. ══ */
.hd-store{color:var(--cs)!important}
.hd-sep{color:var(--cf)!important}
header .title{color:var(--ct)!important}
header .date{color:var(--cf)!important}
.hd-bar{background:var(--bp)!important;border-color:var(--border)!important}
.hd-fill{background:var(--ok)!important}
.hd-plbl .a{color:var(--ok)!important} .hd-plbl .b{color:var(--cf)!important}
.savechip{background:var(--ok-bg)!important;color:var(--ok)!important;border-color:var(--ok)!important}
.savechip.warn{background:rgba(232,161,60,.13)!important;color:#E8A13C!important;border-color:#E8A13C!important}
.lockbanner{background:rgba(232,161,60,.13)!important;color:#E8A13C!important;border-color:#E8A13C!important}
.clearbtn{background:var(--bp)!important;color:var(--cs)!important;border-color:var(--border)!important}
.toolbar .btn.save{background:var(--ok)!important;color:#0E1116!important;border:0!important;box-shadow:none!important}
.toolbar .btn.finish{background:var(--bp)!important;color:var(--ok)!important;box-shadow:inset 0 0 0 1.5px var(--ok)!important}
.toolbar .btn.secondary,.toolbar .btn:not(.save):not(.finish){background:var(--bp)!important;color:var(--cs)!important;box-shadow:inset 0 0 0 1px var(--border)!important}
.filters{background:var(--bp)!important;border-color:var(--border)!important}
.filters .fbtn{color:var(--cs)!important}
.filters .fbtn.active{background:var(--bs)!important;color:var(--ct)!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important}
.pcard{background:var(--bs)!important;border-color:var(--border)!important;border-left-color:var(--border)!important}
.pcard.ok{border-left-color:var(--ok)!important}
.pcard.bad{border-left-color:#FF5C5C!important}
.pcard.pend{border-left-color:#E8A13C!important}
.pc-ttl{color:var(--ct)!important}
.pc-ids{color:var(--cs)!important}
.pc-why{color:var(--cf)!important}
.pc-ar.up{color:var(--ok)!important} .pc-ar.dn{color:#FF5C5C!important}
.pc-of{color:var(--cf)!important} .pc-of.bad{color:#FF5C5C!important}
.tile{background:var(--bp)!important;border-color:var(--border)!important}
.tile.bad{border-color:#FF5C5C!important} .tile.pend{border-color:#E8A13C!important}
.tile-nm{color:var(--ct)!important;border-bottom-color:var(--cf)!important}
.tile-hd .pen,.tile-exp{color:var(--cf)!important}
.tile-exp.bad{color:#FF5C5C!important}
.tile-hd .pp-btn{color:var(--cf)!important}
.tile-hd .pp-btn.on{color:var(--ok)!important}
.cube-input{background:var(--bs)!important;color:var(--ct)!important;border-color:var(--border)!important}
.cube-input.match{background:rgba(52,199,123,.14)!important;color:var(--ok)!important;border-color:var(--ok)!important}
.cube-input.diff{background:rgba(255,92,92,.13)!important;color:#FF5C5C!important;border-color:#FF5C5C!important}
.dot-btn{background:var(--bs)!important;color:var(--cs)!important;border-color:var(--border)!important}
.dot-btn.set{background:rgba(167,139,250,.12)!important;color:#A78BFA!important;border-color:#A78BFA!important}
[data-theme="light"] .pcard{background:#fff!important;border-color:#E1E4E9!important}
[data-theme="light"] .tile{background:#F7F8FA!important}
[data-theme="light"] .cube-input{background:#fff!important;color:#141920!important}
[data-theme="light"] .dot-btn.set{background:#F5F3FF!important;color:#6D28D9!important;border-color:#7C3AED!important}

/* ── per-cube reconciliation strip (2026-08-11) — theme-aware like the bin box ── */
.cube-cell{background:var(--bs)!important;border-color:var(--border)!important}
.cube-name{color:var(--cs)!important}
.cube-input{background:var(--bp)!important;color:var(--ct)!important;border-color:var(--border)!important}
[data-theme="light"] .cube-input{background:#fff!important;color:#141920!important;border-color:#D8DCE2!important}
.cube-input.match{background:rgba(52,199,123,.14)!important;color:#34C77B!important;border-color:#34C77B!important}
.cube-input.diff{background:rgba(255,92,92,.13)!important;color:#FF5C5C!important;border-color:#FF5C5C!important}
[data-theme="light"] .cube-input.match{background:#E6F7ED!important;color:#15803D!important;border-color:#16A34A!important}
[data-theme="light"] .cube-input.diff{background:#FDECEA!important;color:#991B1B!important;border-color:#B91C1C!important}
.dot-btn{background:var(--bp)!important;color:var(--cs)!important;border-color:var(--border)!important}
.dot-btn.set{color:#A78BFA!important;border-color:#A78BFA!important;background:rgba(167,139,250,.10)!important}
[data-theme="light"] .dot-btn.set{color:#7C3AED!important;border-color:#7C3AED!important;background:rgba(124,58,237,.07)!important}
.pp-btn{background:var(--bp)!important;color:var(--cs)!important;border-color:var(--border)!important}
.pp-btn.on{color:#34C77B!important;border-color:#34C77B!important;background:rgba(52,199,123,.12)!important}
.dotpad{background:var(--bs)!important}
.dotpad h4{color:var(--ct)!important}
.dotpad .dp-val{color:var(--ct)!important;border-color:var(--border)!important}
.dotpad .dp-grid button{background:var(--bp)!important;color:var(--ct)!important}
.dotpad .dp-x{background:var(--bp)!important;color:var(--ct)!important}

@media print{
  .bin-input,[data-theme="light"] .bin-input{background:#fff!important;color:#141920!important;border-color:#999!important}
  .cube-row,.dotpad-ov{display:none!important}
}
/* ── portrait header = landscape look, compact: logo + name + subtitle, controls beneath right ── */
@media(max-width:560px){
  .brand::before{display:block!important;content:''!important;width:36px!important;height:36px!important;
    left:16px!important;top:24px!important;transform:none!important;border-radius:10px!important}
  .brand{padding-left:62px!important;padding-top:14px!important}
  .brand .brand-txt{order:0!important;flex:1 1 auto!important;flex-basis:auto!important;min-width:0}
  .brand .n{font-size:1.05rem!important;white-space:nowrap!important}
  .brand .s{display:block!important;font-size:9px!important;letter-spacing:1.2px!important;margin-top:2px}
  .brand .tools{flex-basis:100%;justify-content:flex-end;margin-top:6px}
}
/* ── portrait header FINAL: everything on ONE row, exactly like landscape ── */
@media(max-width:560px){
  .brand{flex-wrap:nowrap!important;padding:12px 12px 12px 56px!important;align-items:center!important}
  .brand::before{width:32px!important;height:32px!important;left:14px!important;top:50%!important;
    transform:translateY(-50%)!important;border-radius:9px!important}
  .brand .brand-txt{flex:1 1 auto!important;min-width:0}
  .brand .n{font-size:.98rem!important}
  .brand .s{font-size:8px!important;letter-spacing:1px!important;white-space:normal!important;max-width:120px;line-height:1.5}
  .brand .tools{flex:0 0 auto!important;flex-basis:auto!important;margin:0 0 0 auto!important;gap:5px!important}
  .brand .iconbtn{width:32px!important;height:32px!important;border-radius:9px!important}
  .brand .icon{width:15px;height:15px}
  .brand .langtoggle .langbtn{padding:6px 9px!important;min-height:30px!important;font-size:.7rem!important}
}
/* supplies launcher: same header + CONTEOS pill as the manager launcher */
#archBtn.hbtn{background:var(--red)!important;border:0!important;color:#fff!important;border-radius:999px!important;
  padding:10px 26px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:.85rem!important;
  letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 10px var(--red-soft)!important;cursor:pointer}
/* date inputs: never overflow their card (border-box + clamp), calm focus ring */
input[type="date"]{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
input[type="date"]:focus{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-soft)!important;outline:none!important}
/* iOS Safari date-input hardening: flex/min-width overflow guard */
input[type="date"]{min-width:0!important;display:block}
/* iOS Safari: date inputs ignore width:100% until appearance is stripped (native picker still opens) */
input[type="date"]{-webkit-appearance:none!important;appearance:none!important}
input[type="date"]::-webkit-date-and-time-value{text-align:center}

/* ── DROPSHIP SCAN SCREENS v8 (Buscando + Dispatch redesign 2026-07-29) ─────────
   Step wizard, next-action banner, progress, in-flight state. Uses the skin tokens
   so both themes work; every class namespaced ds- to stay out of the skin's way. */
.ds-wiz{display:flex;gap:6px;margin-top:12px}
.ds-wiz-step{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:12px;
  background:var(--panel,#F4F6F8);border:1.5px solid var(--border,#E1E4E9);color:var(--cf,#98A0AD);
  font-family:'Outfit',sans-serif;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  transition:all .18s ease}
.ds-wiz-step .n{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--bt,#E9EBEF);color:var(--cs,#5B6472);font-size:11.5px;flex:none}
.ds-wiz-step.cur{background:var(--inf-bg,#E6EEFC);border-color:var(--inf,#2E6FE0);color:var(--inf,#2E6FE0);
  box-shadow:0 0 0 3px var(--inf-bg,#E6EEFC);animation:dswizpulse 1.6s ease-in-out infinite}
.ds-wiz-step.cur .n{background:var(--inf,#2E6FE0);color:#fff}
.ds-wiz-step.done{background:var(--ok-bg,#E2F5EC);border-color:var(--ok,#0B9A57);color:var(--ok,#0B9A57)}
.ds-wiz-step.done .n{background:var(--ok,#0B9A57);color:#fff}
@keyframes dswizpulse{0%,100%{box-shadow:0 0 0 3px var(--inf-bg,#E6EEFC)}50%{box-shadow:0 0 0 6px transparent}}
@media(max-width:400px){.ds-wiz-step{font-size:10.5px;gap:5px}}

.ds-next{margin-top:12px;border-radius:14px;padding:16px 16px;border:2px solid var(--inf,#2E6FE0);
  background:var(--inf-bg,#E6EEFC);color:var(--inf,#2E6FE0);
  font-family:'Outfit',sans-serif;font-weight:800;font-size:21px;line-height:1.25;letter-spacing:.01em}
.ds-next.ok{border-color:var(--ok,#0B9A57);background:var(--ok-bg,#E2F5EC);color:var(--ok,#0B9A57)}
.ds-next.warn{border-color:var(--wrn,#9A6608);background:var(--wrn-bg,#F8EFDA);color:var(--wrn,#9A6608)}
.ds-next.bad{border-color:var(--dng,#C43539);background:var(--dng-bg,#FBE7E7);color:var(--dng,#C43539)}

.ds-orderstrip{position:sticky;top:0;z-index:30;margin-top:12px;border-radius:12px;padding:10px 13px;
  background:var(--bp,#fff);border:1.5px solid var(--border,#E1E4E9);box-shadow:var(--sh-card,0 1px 3px rgba(20,25,32,.06));
  font-family:'Outfit',sans-serif;font-weight:800;font-size:14px;color:var(--ct,#141920);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ds-orderstrip .sub{font-family:'Work Sans',sans-serif;font-weight:600;font-size:12px;color:var(--cs,#5B6472)}
.ds-progseg{display:flex;gap:3px;flex:1;min-width:90px;height:10px}
.ds-progseg span{flex:1;border-radius:999px;background:var(--bt,#E9EBEF)}
.ds-progseg span.on{background:var(--ok,#0B9A57)}
.ds-labelchip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:11px;letter-spacing:.03em;
  background:var(--bt,#E9EBEF);color:var(--cs,#5B6472)}
.ds-labelchip.done{background:var(--ok-bg,#E2F5EC);color:var(--ok,#0B9A57)}
.ds-labelchip.cur{background:var(--inf-bg,#E6EEFC);color:var(--inf,#2E6FE0)}

.ds-bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bp,#fff);border-top:2px solid var(--border,#E1E4E9);box-shadow:var(--sh-float,0 8px 28px rgba(20,25,32,.12));
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));cursor:pointer}
.ds-bottombar .bar-line{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;font-size:14.5px;color:var(--ct,#141920)}
.ds-bottombar .bar-line .spacer{flex:1}
.ds-bottombar .bar-detail{display:none;max-height:38vh;overflow:auto;padding-top:8px}
.ds-bottombar.open .bar-detail{display:block}
.ds-bottombar .miss-row{padding:7px 2px;border-top:1px solid var(--hair,#EAECF0);font-weight:700;font-size:13px;color:var(--dng,#C43539);font-family:'Work Sans',sans-serif}
.ds-bodypad{padding-bottom:96px}

.ds-bigstep{display:flex;align-items:flex-start;gap:10px;margin:7px auto;max-width:340px;text-align:left;font-size:16px;line-height:1.4}
.ds-bigstep .bn{width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:14px;flex:none}

/* gun-idle #cam (owner 2026-07-29: "4× smaller"): camIdle() adds .idle — the 200px video
   well collapses to the one-line gun bar; startCam() removes it and the well comes back */
#cam.idle{height:auto!important;max-height:none!important;min-height:0!important}


/* ══ COUNT SHEET v8 — FINAL OVERRIDES (2026-08-13) ═══════════════════════════
   Two collisions with the app-header skin, fixed at the source:
   1) `.btn span{color:var(--cs)}` coloured every button LABEL grey — on the green
      Guardar that read as illegible. Labels/icons now inherit the button's colour.
   2) `.brand{background:var(--bs)}` + its flex/::before-logo padding belong to the
      dropship/supplies header block; the count sheet's wordmark is `.hd-wm` now, so
      it can never inherit them again.
   Specificity is deliberately raised with `.sheet` — the skin's own toolbar rules
   carry (0,5,0) via three :not()s and would otherwise win.  ══════════════════ */
.sheet .toolbar .btn span,.sheet .toolbar .btn b{color:inherit!important}
.sheet .toolbar .btn svg{stroke:currentColor!important}
.sheet .toolbar .btn.save,.sheet .toolbar .btn.save:not(.secondary){
  background:var(--ok)!important;color:#fff!important;border:0!important;box-shadow:none!important}
.sheet .toolbar .btn.save svg{stroke:#fff!important}
.sheet .toolbar .btn.finish,.sheet .toolbar .btn.finish:not(.secondary){
  background:var(--ok-bg)!important;color:var(--ok)!important;border:1.5px solid var(--ok)!important;
  border-radius:var(--r-pill)!important;box-shadow:none!important}
.sheet .toolbar .btn:not(.save):not(.finish):not(.pdf),
.sheet .toolbar .btn:not(.save):not(.finish):not(.secondary):not(.pdf){
  background:transparent!important;color:var(--cs)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.sheet .toolbar .btn:not(.save):not(.finish):not(.secondary):not(.pdf) svg{stroke:currentColor!important}
.sheet header .hd-wm{background:none!important;padding:0!important;color:var(--ct)!important;
  font-family:'Inter',sans-serif!important;font-weight:900!important;letter-spacing:.08em!important;display:inline!important}
.sheet header .hd-wm b{color:var(--red)!important;font-weight:900!important}
.sheet header .hd-brand{display:flex!important;align-items:center!important;gap:7px!important;
  background:none!important;padding:0!important}
.sheet header .hd-store{color:var(--cs)!important}
.sheet header .hd-sep{color:var(--cf)!important}

/* zone bands → caption lines (mockup v8): the skin's white band no longer applies to the
   count sheet — the caption reads like the card grid's own furniture, not a header bar */
.sheet tr.zone-row td,.sheet .zone-row,.sheet tr.zone-row{background:transparent!important;color:var(--cf)!important;border:0!important}
.sheet .zone-row *{color:var(--cf)!important}
.sheet .zone-row .zone-name{color:var(--cf)!important;font-weight:800!important}
.sheet .zone-row .zone-prog,.sheet .zone-row.zone-done .zone-prog{color:var(--ok)!important}
/* filters → segmented slider (mockup v8): kill the skin's pill styling (red active) */
.sheet .filters{background:var(--bp)!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:3px!important;gap:3px!important;display:flex!important}
.sheet .filters .fbtn,.sheet .filters .fbtn:first-child{background:transparent!important;border:0!important;color:var(--cs)!important;border-radius:9px!important}
.sheet .filters .fbtn.active{background:var(--bs)!important;color:var(--ct)!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important}
.sheet .filters .fn{color:var(--cf)!important}

/* the sheet is a transparent rail now — header + toolbar are their own cards */
.sheet{background:transparent!important;box-shadow:none!important}
.sheet header{background:var(--bs)!important;border:1px solid var(--border)!important;border-radius:16px!important}
.sheet .toolbar{background:var(--bs)!important;border:1px solid var(--border)!important;border-radius:16px!important}

/* the CARD is the only painted surface — the td/tr rectangles behind it must be glass.
   (.sheet tbody td at line ~114 painted every cell --bp; the lighter rectangle showed
   around the rounded corners and in the row gaps = the "bleed" on the phone) */
.sheet tbody tr,.sheet tbody td,.sheet tbody td.pc-cell{background:transparent!important;border:0!important}

/* filter slider: blue selection + full card width; Guardar blue; PDF red (owner 2026-08-13) */
.sheet .filters{flex:1 1 100%!important;width:100%!important}
.sheet .fthumb{background:var(--inf)!important;opacity:.18!important;border-color:var(--inf)!important}
.sheet .filters .fbtn.active{background:transparent!important;color:var(--inf)!important;box-shadow:none!important}
.sheet .filters .fbtn.active .fn{color:var(--inf)!important;opacity:.8}
.sheet .toolbar .btn.save,.sheet .toolbar .btn.save:not(.secondary){
  background:var(--inf)!important;color:#fff!important;border:0!important;box-shadow:none!important}
.sheet .toolbar .btn.save svg{stroke:#fff!important}
.sheet .toolbar .btn.pdf,.sheet .toolbar .btn.pdf:not(.secondary){
  background:var(--dng-bg)!important;color:var(--dng)!important;border:1px solid var(--dng)!important;box-shadow:none!important}
.sheet .toolbar .btn.pdf svg{stroke:var(--dng)!important}

/* ══ LAUNCHER HIERARCHY (owner 2026-08-13: "dropdowns and date look too flat") ═══════
   The home screen's controls get the same language as the count sheet: BLUE marks what
   you interact with, the section rails carry their state colour, red stays for the one
   true CTA (Generar). Light and dark both resolve from tokens. ══════════════════════ */
/* the three resume dropdowns: a coloured rail matching their badge */
.resume{border-left:4px solid var(--wrn)!important}
.resume.finished{border-left:4px solid var(--ok)!important}
#supDrop{border-left:4px solid var(--ok)!important}
.resume>summary:active{background:var(--bt)!important}
.resume>summary::after{border-color:var(--inf)!important}
/* selects + date: raised field, blue focus (was red), visible chevron */
select,input[type=date]{background-color:var(--bp)!important;border:1.5px solid var(--border)!important;color:var(--ct)!important}
select:focus,input[type=date]:focus{border-color:var(--inf)!important;box-shadow:0 0 0 4px var(--inf-bg)!important}
/* route selection: blue = selected (consistent with the sheet's slider) */
.mode{background:var(--bp)!important;border-color:var(--border)!important}
.mode.sel{border-color:var(--inf)!important;background:var(--inf-bg)!important;box-shadow:0 0 0 3px var(--inf-bg)!important}
.mode.sel b{color:var(--inf)!important}
/* CONTEOS toggle: interactive-blue outline, so the red CTA below stands alone */
#countsBtn{background:var(--inf-bg)!important;color:var(--inf)!important;border:1.5px solid var(--inf)!important}

/* counts drawer: near-black well so the three dropdowns pop (owner 2026-08-13) */
.cp-in{background:#07090D!important;border-bottom:1px solid var(--hair)!important}
[data-theme="light"] .cp-in{background:#E2E5EA!important;border-bottom-color:#D5D9DF!important}

/* Finish matches the "Synced from another device" chip (owner 2026-08-13) — styled at
   the v8 final-overrides block above; only the gated dim lives here */
.sheet .toolbar .btn.finish.gated{opacity:.45!important}