:root{
  --ground:#F5F7F9; --surface:#FFFFFF; --ink:#152029; --mut:#5C6B78;
  --line:#E3E8ED; --accent:#0E7C86; --accent-d:#0B646C;
  --green:#1F9D57; --amber:#C0841A; --blue:#2563A8; --slate:#64748B; --red:#C0392B;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
h1{font-size:20px; letter-spacing:-.01em; margin:0 0 2px}
h2{font-size:15px; margin:18px 0 8px; color:var(--mut); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:11.5px}

/* Top bar */
.topbar{position:sticky; top:0; z-index:10; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; padding:11px 16px; gap:12px}
.brand{font-weight:700; font-size:15px}
.brand .k{color:var(--accent); letter-spacing:.02em}
.topbar nav{display:flex; gap:4px; align-items:center}
.topbar nav a{padding:6px 10px; border-radius:8px; color:var(--mut); font-size:13.5px; font-weight:600}
.topbar nav a.on{background:#E8F1F2; color:var(--accent-d)}
.topbar nav a.salir{color:var(--slate)}

.wrap{max-width:760px; margin:0 auto; padding:16px 14px 56px}
.sub{color:var(--mut); font-size:13.5px; margin:0 0 16px}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 10px}
.stat .v{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1}
.stat .l{font-size:11px; color:var(--mut); margin-top:5px}
.stat.ok .v{color:var(--green)} .stat.pend .v{color:var(--amber)} .stat.serv .v{color:var(--slate)}

/* Filtros */
.filtros{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.filtros a{padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--mut); font-size:12.5px; font-weight:600}
.filtros a.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* Cards */
.card{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--slate);
  border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 2px rgba(20,32,41,.03)}
.card.s-amber{border-left-color:var(--amber)} .card.s-blue{border-left-color:var(--blue)}
.card.s-green{border-left-color:var(--green)} .card.s-red{border-left-color:var(--red)}
.card-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.card-h .ff{font-weight:700; font-size:16px}
.card-h .prov{color:var(--mut); font-size:12.5px; margin-top:1px}
.meta{display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--mut); font-size:12.5px;
  margin:10px 0 4px; font-variant-numeric:tabular-nums}
.meta b{color:var(--ink); font-weight:600} .meta .tot{margin-left:auto}
.card a.abrir{display:inline-block; margin-top:8px; font-weight:600; font-size:13px}

/* Pills & chips */
.pill{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap;
  background:#EEF1F4; color:var(--slate)}
.p-amber{background:#FBF0DC; color:#8A5B08} .p-blue{background:#E5EEF8; color:#1E4C82}
.p-green{background:#E2F3E9; color:#137A41} .p-red{background:#F8E4E1; color:#9B2C1E}
.p-slate{background:#EDF0F2; color:#556}
.chip{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px}
.c-green{background:#E2F3E9; color:#137A41} .c-amber{background:#FBF0DC; color:#8A5B08}
.c-slate{background:#EDF0F2; color:#556}

/* Tables */
.tw{overflow-x:auto; margin-top:8px}
table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:520px}
th{text-align:left; font-weight:600; color:var(--mut); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--line)}
td{padding:8px; border-bottom:1px solid #F0F3F5; vertical-align:top}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; white-space:nowrap}
td.desc{color:var(--mut)}

/* Partida pendiente (bloque de confirmación) */
.pend-block{border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; background:#FFFDF8}
.pend-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline}
.pend-head .sku{font-family:ui-monospace,Menlo,monospace; font-weight:700}
.pend-head .d{color:var(--mut); font-size:12.5px}
.cand{display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:9px 10px; border:1px solid var(--line); border-radius:9px; margin-top:8px; background:var(--surface)}
.cand .info{min-width:0}
.cand .id{font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:12.5px}
.cand .dsc{color:var(--mut); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.buscar{display:flex; gap:8px; margin-top:10px}
.buscar input{flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:14px}

/* Botones */
.btn{display:inline-block; border:0; border-radius:9px; padding:9px 14px; font-size:13.5px;
  font-weight:700; cursor:pointer; font-family:inherit}
.btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent-d)}
.btn-green{background:var(--green); color:#fff}
.btn-ghost{background:var(--surface); border:1px solid var(--line); color:var(--ink)}
.btn-sm{padding:7px 12px; font-size:12.5px}
.btn:focus-visible{outline:3px solid #9FD0D6; outline-offset:1px}

/* Aviso */
.aviso{padding:10px 12px; border-radius:9px; font-size:13px; margin:12px 0}
.aviso.ok{background:#E2F3E9; color:#137A41} .aviso.err{background:#F8E4E1; color:#9B2C1E}
.empty{color:var(--mut); text-align:center; padding:40px 0}

/* Login */
.login-wrap{max-width:340px; margin:12vh auto; padding:0 18px}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px}
.login-card h1{text-align:center; margin-bottom:4px}
.login-card p{text-align:center; color:var(--mut); font-size:13px; margin:0 0 20px}
.login-card input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:16px; margin-bottom:12px}
.login-card .btn{width:100%}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}