/* Plataforma de Inventarios CCV — Fiavco IT Industrial Services */
:root{
  --navy:#032654; --blue:#2565a8; --sky:#0d88d3; --green:#8dc221; --green-d:#6c9a14;
  --bg:#f2f5f9; --card:#fff; --tx:#16202e; --mut:#5d6b7e; --line:#dbe2ec;
  --ok:#1f9d55; --warn:#d98a00; --err:#d64545; --r:14px;
  --sh:0 1px 2px rgba(3,38,84,.06),0 4px 14px rgba(3,38,84,.07);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--tx);font-size:16px;line-height:1.4;overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
.hidden{display:none!important}

/* ---------- barra superior */
.top{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:8px 14px;min-height:60px}
.top .logo{height:36px;width:auto}
.top .ttl{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.top .ttl b{color:var(--navy);font-size:15px;white-space:nowrap}
.top .ttl small{color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:#fff;font-size:14px;cursor:pointer;white-space:nowrap}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.chip.off .dot{background:var(--err)}
.chip.sync .dot{background:var(--warn)}
.badge{background:var(--navy);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}

/* ---------- navegación inferior (tablet/móvil) */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:flex;padding-bottom:var(--safe-b)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 9px;color:var(--mut);text-decoration:none;font-size:12px;font-weight:600}
.nav a svg{width:26px;height:26px}
.nav a.on{color:var(--navy)}
.nav a.on svg{color:var(--blue)}
.nav a.scan{color:#fff}
.nav a.scan span.ic{background:var(--navy);border-radius:16px;padding:6px 18px;margin-top:-2px;display:flex}
.nav a.scan svg{color:#fff}
main{padding:16px 16px calc(96px + var(--safe-b));max-width:1180px;margin:0 auto}

/* ---------- elementos */
h1{font-size:24px;margin:4px 0 14px;color:var(--navy)}
h2{font-size:18px;margin:18px 0 10px;color:var(--navy)}
.mut{color:var(--mut)} .small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:6px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.kpi b{display:block;font-size:28px;color:var(--navy);line-height:1.1}
.kpi span{color:var(--mut);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer;user-select:none;text-decoration:none;color:var(--tx)}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.go{background:var(--green);border-color:var(--green);color:#0e2a00}
.btn.dan{background:#fff;border-color:#f0c2c2;color:var(--err)}
.btn.sm{min-height:38px;padding:6px 12px;font-size:14px;border-radius:10px}
.btn.xl{min-height:64px;font-size:19px;padding:14px 22px;border-radius:16px}
.btn.blk{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.ib{width:48px;height:48px;padding:0;flex:none}
label.f{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:12px 0 5px}
.inp,select.inp,textarea.inp{width:100%;min-height:48px;border:1px solid #c9d3e0;border-radius:12px;padding:10px 14px;background:#fff;font-size:17px}
textarea.inp{min-height:84px;resize:vertical}
.inp:focus{outline:3px solid rgba(13,136,211,.25);border-color:var(--sky)}
.withmic{display:flex;gap:8px}
.withmic .inp{flex:1}
.seg{display:flex;background:#e6ecf3;border-radius:14px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{flex:1;min-height:46px;border:0;background:transparent;border-radius:11px;font-weight:700;color:var(--mut);cursor:pointer;min-width:88px}
.seg button.on{background:#fff;color:var(--navy);box-shadow:var(--sh)}
.seg button.on.e{color:var(--ok)} .seg button.on.s{color:var(--err)} .seg button.on.t{color:var(--blue)} .seg button.on.a{color:var(--warn)}
.tog{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;user-select:none}
.tog input{display:none}
.tog .sw{width:56px;height:32px;border-radius:999px;background:#c9d3e0;position:relative;transition:.15s}
.tog .sw:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
.tog input:checked+.sw{background:var(--green)}
.tog input:checked+.sw:after{left:27px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#e9eef5;color:var(--mut)}
.pill.ok{background:#e3f5ea;color:var(--ok)} .pill.warn{background:#fff3dc;color:#a66900} .pill.err{background:#fde8e8;color:var(--err)} .pill.blue{background:#e5f0fb;color:var(--blue)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:16px 0 0;overflow-x:auto}
.tabs button{border:0;background:none;padding:12px 16px;font-weight:700;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;min-height:48px}
.tabs button.on{color:var(--navy);border-color:var(--blue)}

/* ---------- tablas responsivas */
.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);padding:10px;border-bottom:1px solid var(--line);background:#f8fafc}
.tbl td{padding:12px 10px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap}
.tbl tr.click{cursor:pointer}
.tblw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
@media (max-width:640px){
  .tbl.resp thead{display:none}
  .tbl.resp tr{display:block;border-bottom:1px solid var(--line);padding:8px 4px}
  .tbl.resp td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 10px}
  .tbl.resp td:before{content:attr(data-l);font-size:12px;color:var(--mut);font-weight:600}
  .tbl.resp td.n{text-align:right}
}

/* ---------- contenedores */
.cont{cursor:pointer;display:flex;flex-direction:column;gap:6px;position:relative}
.cont .cod{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:.5px}
.cont .iso{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--blue);font-weight:700}
.cont .nums{display:flex;gap:14px;margin-top:4px}
.cont .nums b{font-size:20px;color:var(--tx)}
.cont input.sel{position:absolute;top:14px;right:14px;width:24px;height:24px}

/* ---------- área de escaneo */
.ws-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ws-head .cod{font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.scanbox{margin-top:14px;background:var(--navy);border-radius:18px;padding:14px;color:#fff}
.scanbox .row{flex-wrap:nowrap}
.scanbox .inp{background:#fff;color:var(--tx);font-size:20px;min-height:58px;border:0;font-family:ui-monospace,Menlo,Consolas,monospace}
.scanbox .btn{min-height:58px;border:0}
.scanbox .hint{font-size:13px;opacity:.85;margin-top:8px}
.last{margin-top:12px;border-radius:16px;padding:14px 16px;display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);min-height:78px}
.last.ok{border-color:var(--ok);background:#f2fbf5} .last.err{border-color:var(--err);background:#fff5f5} .last.warn{border-color:var(--warn);background:#fffaf0}
.last .big{font-size:30px;font-weight:800;min-width:82px;text-align:center}
.last.ok .big{color:var(--ok)} .last.err .big{color:var(--err)}
.last .desc{font-weight:700;font-size:17px}
.flash{animation:fl .5s}
@keyframes fl{0%{transform:scale(1.03)}100%{transform:scale(1)}}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#eef2f7;flex:none}

/* ---------- inicio de sesión */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#fff 0%,#eef4fb 60%,#e3edf8 100%)}
.login .box{width:100%;max-width:760px;text-align:center}
.login img{height:84px;margin-bottom:10px}
.login h1{font-size:26px;margin:6px 0}
.login .ex{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;letter-spacing:.3px;margin:4px 0 22px}
.users{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;text-align:left}
.user{background:#fff;border:2px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:84px;box-shadow:var(--sh)}
.user:hover,.user:focus{border-color:var(--sky);outline:none}
.user .av{width:48px;height:48px;border-radius:50%;background:#e5f0fb;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none}
.user.adm .av{background:var(--navy);color:#fff}
.user b{display:block}
.user small{color:var(--mut)}
.demo-note{margin-top:20px;font-size:13px;color:var(--mut)}

/* ---------- modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,20,35,.55);display:flex;align-items:flex-end;justify-content:center}
.modal .sheet{background:#fff;width:100%;max-width:680px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 18px calc(18px + var(--safe-b));animation:up .18s ease-out}
@media (min-width:760px){.modal{align-items:center}.modal .sheet{border-radius:20px;max-height:88vh}}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 4px;font-size:20px;color:var(--navy)}
.sheet .foot{display:flex;gap:10px;margin-top:18px;position:sticky;bottom:-18px;background:#fff;padding:10px 0 4px}
.sheet .foot .btn{flex:1}
.qty{display:flex;align-items:center;gap:10px}
.qty .inp{text-align:center;font-size:30px;font-weight:800;min-height:64px}
.qty .btn{min-height:64px;min-width:64px;font-size:28px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.cols2{grid-template-columns:1fr}}
video.cam{width:100%;border-radius:14px;background:#000;max-height:55vh}

/* ---------- avisos */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe-b));z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,520px)}
.toast{background:#111c2b;color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-weight:600;animation:up .15s}
.toast.ok{background:#16753f} .toast.err{background:#b23434} .toast.warn{background:#9a6400}
.empty{text-align:center;padding:36px 16px;color:var(--mut)}
.empty svg{width:56px;height:56px;color:#b7c3d3}
.foot-brand{text-align:center;color:var(--mut);font-size:12px;margin:28px 0 0}
.spin{width:22px;height:22px;border:3px solid #c9d3e0;border-top-color:var(--blue);border-radius:50%;animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- escritorio */
@media (min-width:1000px){
  .nav{top:60px;bottom:auto;left:0;right:auto;width:96px;height:calc(100vh - 60px);flex-direction:column;border-top:0;border-right:1px solid var(--line);padding-top:10px}
  .nav a{flex:none;padding:14px 4px}
  main{margin-left:96px;padding-bottom:40px}
  #toasts{bottom:24px}
}
@media print{.top,.nav,#toasts{display:none!important}main{margin:0;padding:0}}

.chip .ui{display:none}
@media (max-width:560px){
  .top{gap:8px;padding:8px 10px}.top .logo{height:30px}.top .ttl small{display:none}
  .chip .un{display:none}.chip .ui{display:inline}.chip{padding:6px 10px}
  #synctxt{display:none}
  h1{font-size:21px}
  .ws-head .cod{font-size:26px}
}
@media (max-width:560px){.hide-s{display:none}.seg button{min-width:72px}}