/* ============================================================
   LOGÍSTICA ELEMENTO — Design System v2 (20/09/2026)
   ------------------------------------------------------------
   Los NOMBRES de los componentes son los del kit original (.card, .toolbar,
   .btn, .kpi, .chip, .tag, .field, .snack…, ver _kit/LEEME-integracion.md).
   Los VALORES —fuentes, tamaños, colores, la forma de los botones— son los de
   la maqueta que eligió el usuario (preview-interfaz-wms.html): Barlow, barra
   con degradé, botones planos en mayúscula, chips en píldora, tabla de celdas
   centradas. «Replicar esa simpleza.»

   El marco (barra de arriba + menú lateral) NO está acá: vive en marco.css,
   que no pisa nada global y se puede enlazar en cualquier módulo. Esto sí
   pisa reglas globales (body, button, input): se enlaza sólo en un módulo que
   se migra, y ANTES de su <style>.

   Tema: claro por defecto; oscuro con <html data-theme="dark"> (lo pone el
   botón de la barra, menu-lateral.js). [data-tema] es el botón «Tema» propio
   del celular de Inventario, y donde está, manda.
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root{
  box-sizing:border-box;

  --primary:#414b68;
  --primary-dark:#343d57;
  --positive:#15803d;
  --negative:#b91c1c;
  --warning:#a16207;

  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-alt:#f6f7f9;
  --row:#f3f5fa;
  --text:#1f2430;
  --text-2:#6b7385;
  --line:#e1e4ea;

  --chip-ok-bg:#dcfce7;  --chip-ok-tx:#15803d;
  --chip-dif-bg:#fee2e2; --chip-dif-tx:#b91c1c;
  --chip-pend-bg:#fef3c7;--chip-pend-tx:#a16207;
  --chip-info-bg:#e8ecf7;--chip-info-tx:#414b68;

  --shadow:0 1px 4px rgba(20,28,50,.14),0 2px 10px rgba(20,28,50,.06);
  --radius:6px;
  --fd:'Barlow Condensed',sans-serif;
  --fb:'Barlow',-apple-system,"Segoe UI",system-ui,sans-serif;
}
:root[data-theme="dark"]:not([data-tema="claro"]),
:root[data-tema="oscuro"]{
  --primary:#f01100;
  --primary-dark:#c40e00;
  --positive:#22c55e;
  --negative:#f87171;
  --warning:#f5a623;

  --bg:#0e1117; --surface:#161b23; --surface-alt:#1e2530; --row:#1a202a;
  --text:#e2e8f0; --text-2:#94a3b8; --line:#2a3342;

  --chip-ok-bg:rgba(34,197,94,.14);  --chip-ok-tx:#22c55e;
  --chip-dif-bg:rgba(248,113,113,.14);--chip-dif-tx:#f87171;
  --chip-pend-bg:rgba(245,166,35,.14);--chip-pend-tx:#f5a623;
  --chip-info-bg:#1f0d10;            --chip-info-tx:#e2e8f0;

  --shadow:0 0 0 1px #2a3342;
}

/* ── 2. Base ──────────────────────────────────────────────── */
html,body{height:100%}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--fb);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }

/* ── 3. Contenido (el marco está en marco.css) ────────────── */
.content{padding:14px 16px 24px;width:100%;min-width:0}
.crumb{color:var(--text-2);font-size:12.5px;margin-bottom:12px}
.crumb b{color:var(--text);font-weight:600}
@media (max-width:820px){ .content{padding:12px} }

/* ── 4. KPIs ──────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px 16px;border-left:4px solid var(--line)}
.kpi .v{font-family:var(--fd);font-size:30px;font-weight:800;line-height:1.05;letter-spacing:.5px}
.kpi .l{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2);margin-top:2px}
.kpi.k-primary{border-left-color:var(--primary)}
.kpi.k-ok{border-left-color:var(--positive)}
.kpi.k-dif{border-left-color:var(--negative)}
.kpi.k-warn{border-left-color:var(--warning)}
.progress{height:5px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--positive);width:0%;transition:width .3s ease}

/* ── 5. Tarjetas y barras de acciones ─────────────────────── */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card + .card{margin-top:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.toolbar h2{font-family:var(--fd);font-size:1.25rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin:0;flex:1 1 auto}

.search{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text-2)}
.search:focus-within{border-color:var(--primary)}
.search svg{width:18px;height:18px;flex:0 0 auto}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);padding:0}
select.filter{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;outline:none}

/* ── 6. Botones ───────────────────────────────────────────────
   Planos, en mayúscula, todos del mismo alto. Sólo el principal (.btn a
   secas) va relleno; los demás son texto sobre la superficie. Agrupados en un
   .grupo-btn comparten una sola sombra, como en la maqueta. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;
  border:0;border-radius:6px;background:var(--primary);color:#fff;box-shadow:var(--shadow);
  font-weight:700;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.btn:hover{filter:brightness(1.12)}
.btn.flat,.btn.outline,.btn.positive,.btn.negative{background:var(--surface);color:var(--text)}
.btn.flat:hover,.btn.outline:hover,.btn.positive:hover,.btn.negative:hover{background:var(--row);filter:none}
.btn.positive{color:var(--positive)}
.btn.negative{color:var(--negative)}
.btn.sm{height:30px;padding:0 10px;font-size:.72rem}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:none}
.grupo-btn{display:inline-flex;flex-wrap:wrap;border-radius:6px;box-shadow:var(--shadow);background:var(--surface)}
.grupo-btn .btn{box-shadow:none}
.icon-btn{width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--primary);display:grid;place-items:center}
.icon-btn:hover{background:var(--row)}
.icon-btn svg{width:20px;height:20px;fill:currentColor}

/* ── 7. Tablas ────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;min-width:700px}
.table-wrap th,.table-wrap td{padding:0 12px;height:46px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.table-wrap th:last-child,.table-wrap td:last-child{border-right:0}
.table-wrap th{font-size:.78rem;font-weight:700;letter-spacing:.3px}
.table-wrap tbody tr:hover{background:var(--row)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.cell-main{font-weight:600;text-align:left}
.cell-main small{display:block;color:var(--text-2);font-weight:400;font-size:12px;white-space:normal}
.tfoot{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  color:var(--text-2);font-size:12.5px;flex-wrap:wrap;gap:8px}
.empty{padding:36px 16px;text-align:center;color:var(--text-2)}

/* ── 8. Chips y etiquetas ─────────────────────────────────── */
.chip{display:inline-block;border-radius:20px;padding:2px 9px;font-size:.7rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.chip.ok{background:var(--chip-ok-bg);color:var(--chip-ok-tx)}
.chip.dif{background:var(--chip-dif-bg);color:var(--chip-dif-tx)}
.chip.pend{background:var(--chip-pend-bg);color:var(--chip-pend-tx)}
.chip.info{background:var(--chip-info-bg);color:var(--chip-info-tx)}

.tag{border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.68rem;font-weight:700;color:var(--text-2)}
.abc{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:700;color:#fff}
.abc.A{background:var(--primary)} .abc.B{background:#7a8ca0} .abc.C{background:#b6c2ce;color:#3a4653}
.dif-val.pos{color:var(--positive);font-weight:700}
.dif-val.neg{color:var(--negative);font-weight:700}

/* ── 9. Formularios ───────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-2);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;height:38px;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:0 11px;outline:none}
.field textarea{height:auto;padding:9px 11px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.qty{width:100%;font-family:var(--fd);font-size:30px;font-weight:800;text-align:center;
  border:1.5px solid var(--line);border-radius:8px;padding:8px;outline:none;background:var(--surface)}
.qty:focus{border-color:var(--primary)}

/* ── 10. Diálogos ─────────────────────────────────────────── */
dialog{border:0;border-radius:10px;padding:0;background:var(--surface);color:var(--text);
  width:min(92vw,380px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(15,23,33,.55)}
.dlg-head{background:linear-gradient(90deg,#414b68,#5b6890);color:#fff;padding:13px 18px;
  font-family:var(--fd);font-weight:800;font-size:1.15rem;letter-spacing:.8px;text-transform:uppercase}
:root[data-theme="dark"]:not([data-tema="claro"]) .dlg-head,
:root[data-tema="oscuro"] .dlg-head{background:var(--surface-alt);border-bottom:1px solid var(--line)}
.dlg-body{padding:16px 18px 4px}
.dlg-actions{display:flex;justify-content:flex-end;gap:6px;padding:12px 12px 14px}

/* ── 11. Aviso ────────────────────────────────────────────── */
.snack{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  translate:-50% 20px;background:#1f2430;color:#fff;border-radius:8px;padding:10px 16px;
  box-shadow:0 6px 22px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.18s ease;
  font-weight:600;font-size:.85rem;z-index:60;max-width:calc(100vw - 32px)}
.snack.show{opacity:1;translate:-50% 0}

/* ── 12. Esqueleto de carga ───────────────────────────────── */
.skeleton{position:relative;overflow:hidden;background:var(--line);border-radius:6px;min-height:14px}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sk 1.2s infinite}
@keyframes sk{from{translate:-100% 0}to{translate:100% 0}}

/* ── 13. Paginado ─────────────────────────────────────────── */
.paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:14px}
.paginas .total{margin-right:8px;color:var(--text-2);font-weight:600}
.paginas button{min-width:30px;height:30px;padding:0 8px;border:0;border-radius:5px;background:none;color:var(--text);font-weight:700}
.paginas button:hover:not(:disabled){background:var(--row)}
.paginas button.actual{background:var(--text);color:var(--surface)}
.paginas button:disabled{opacity:.3;cursor:default}

@media (max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .toolbar h2{flex-basis:100%}
  .search{flex:1 1 100%}
}