/* ERP Despachos — demo navegable
   Replica el design system del sistema real: brand teal, navy en headers de tabla,
   StatusPill con barrita, densidad media-alta, locale es-PY. */

/* ---------- tokens ---------- */
:root {
  --brand-50:#ecfdf9;  --brand-100:#d1faf0; --brand-500:#14b8a6; --brand-600:#0d9488; --brand-700:#0f766e;
  --navy-50:#f1f5f9;   --navy-100:#e2e8f0; --navy-500:#64748b;  --navy-700:#334155;  --navy-800:#1e293b; --navy-900:#0f172a;

  --bg:#f6f8fa;
  --card:#ffffff;
  --border:#e5e9ef;
  --text:#111827;
  --text-2:#4b5563;
  --text-3:#9ca3af;
  --thead-bg:var(--navy-50);
  --row-alt:rgba(241,245,249,.55);
  --row-hover:#eff6ff;
  --sidebar-bg:#ffffff;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);

  --emerald:#059669; --emerald-bg:#d1fae5;
  --amber:#b45309;   --amber-bg:#fef3c7;
  --blue:#1d4ed8;    --blue-bg:#dbeafe;
  --rose:#be123c;    --rose-bg:#ffe4e6;
  --violet:#6d28d9;  --violet-bg:#ede9fe;
  --zinc:#52525b;    --zinc-bg:#e4e4e7;
  --teal:#0f766e;    --teal-bg:#ccfbf1;
  --indigo:#4338ca;  --indigo-bg:#e0e7ff;
  --slate:#475569;   --slate-bg:#e2e8f0;
  --orange:#c2410c;  --orange-bg:#ffedd5;
  --yellow:#a16207;  --yellow-bg:#fef9c3;
}
[data-theme="dark"] {
  --bg:#0b1120;
  --card:#111827;
  --border:#1f2937;
  --text:#f3f4f6;
  --text-2:#9ca3af;
  --text-3:#6b7280;
  --thead-bg:#0f172a;
  --row-alt:rgba(30,41,59,.4);
  --row-hover:#1e293b;
  --sidebar-bg:#0f172a;
  --navy-50:#1e293b;
  --brand-50:rgba(20,184,166,.14);

  --emerald-bg:rgba(5,150,105,.18);  --emerald:#34d399;
  --amber-bg:rgba(180,83,9,.18);     --amber:#fbbf24;
  --blue-bg:rgba(29,78,216,.2);      --blue:#60a5fa;
  --rose-bg:rgba(190,18,60,.18);     --rose:#fb7185;
  --violet-bg:rgba(109,40,217,.2);   --violet:#a78bfa;
  --zinc-bg:rgba(82,82,91,.25);      --zinc:#a1a1aa;
  --teal-bg:rgba(15,118,110,.22);    --teal:#2dd4bf;
  --indigo-bg:rgba(67,56,202,.2);    --indigo:#818cf8;
  --slate-bg:rgba(71,85,105,.25);    --slate:#94a3b8;
  --orange-bg:rgba(194,65,12,.18);   --orange:#fb923c;
  --yellow-bg:rgba(161,98,7,.18);    --yellow:#facc15;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,'JetBrains Mono',monospace}
.num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{
  width:262px;flex:none;background:var(--sidebar-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;
  transition:width .2s ease;
}
.sidebar-head{padding:16px 14px 10px;display:flex;align-items:center;gap:10px}
.sidebar-head .logo{font-size:19px;font-weight:700;letter-spacing:-.02em}
.sidebar-head .sub{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-600);font-weight:600;margin-top:2px}
.sidebar-search{padding:0 14px 12px}
.sidebar-search input{
  width:100%;border:1px solid var(--border);background:var(--navy-50);border-radius:999px;
  padding:7px 12px;font-size:12.5px;color:var(--text);outline:none;
}
.sidebar-search input:focus{border-color:var(--brand-500)}
.sidebar-nav{flex:1;overflow-y:auto;padding:0 8px 16px}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.grp{margin-top:6px}
.grp-btn{
  width:100%;display:flex;align-items:center;gap:8px;padding:7px 8px;border:0;background:none;
  font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);cursor:pointer;border-radius:6px;
}
.grp-btn:hover{background:var(--navy-50)}
.grp-btn svg{width:15px;height:15px;flex:none;stroke-width:1.8}
.grp-btn .chev{margin-left:auto;transition:transform .15s ease}
.grp[data-open="false"] .chev{transform:rotate(-90deg)}
.grp[data-open="false"] .grp-body{display:none}
.subgrp{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:10px 10px 4px}

.nav-item{
  position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;
  font-size:13px;color:var(--text-2);cursor:pointer;
}
.nav-item:hover{background:var(--navy-50);color:var(--text)}
.nav-item svg{width:16px;height:16px;flex:none;stroke-width:1.8}
.nav-item.active{background:var(--brand-50);color:var(--brand-700);font-weight:500}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand-500)}
.nav-item.dim{opacity:.55;cursor:default}
.nav-item.dim:hover{background:none;color:var(--text-2)}

.sidebar-foot{border-top:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none}
.sidebar-foot .who{min-width:0;flex:1}
.sidebar-foot .who b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot .who span{display:block;font-size:10.5px;color:var(--text-3)}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--border);
  padding:14px 26px;display:flex;align-items:center;gap:14px;
}
.topbar h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em}
.topbar .sub{font-size:12.5px;color:var(--text-3);margin-top:1px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);
  background:none;border-radius:8px;color:var(--text-2);cursor:pointer;position:relative;
}
.icon-btn:hover{background:var(--navy-50);color:var(--text)}
.bell-badge{position:absolute;top:-5px;right:-5px;background:#e11d48;color:#fff;font-size:9px;font-weight:600;border-radius:999px;padding:1px 4px;min-width:17px;text-align:center}
.user-chip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:999px}
.user-chip .avatar{width:26px;height:26px;font-size:10px}
.user-chip b{font-size:12.5px;font-weight:500;display:block}
.user-chip span{font-size:10.5px;color:var(--text-3);display:block}

.content{padding:22px 26px 40px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-head h2{margin:0;font-size:14.5px;font-weight:600}
.card-body{padding:18px}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:15px 17px;position:relative;overflow:hidden;display:block}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kpi-c,var(--brand-500))}
.kpi:hover{box-shadow:var(--shadow);border-color:var(--kpi-c,var(--brand-500))}
.kpi .lbl{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1.1}
.kpi .sub{font-size:11.5px;color:var(--text-3);margin-top:4px}
.kpi.blue{--kpi-c:#3b82f6} .kpi.amber{--kpi-c:#f59e0b} .kpi.indigo{--kpi-c:#6366f1} .kpi.teal{--kpi-c:var(--brand-500)}

/* ---------- tabla ---------- */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{
  background:var(--thead-bg);color:var(--navy-500);text-align:left;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 11px;white-space:nowrap;border-bottom:1px solid var(--border);
}
/* segunda fila de header con filtros embebidos — la firma visual del sistema */
thead tr.filters th{background:var(--card);padding:6px 8px;text-transform:none;letter-spacing:0}
thead tr.filters input,thead tr.filters select{
  width:100%;min-width:70px;border:1px solid var(--border);border-radius:5px;
  padding:4px 7px;font-size:11px;color:var(--text);background:var(--card);outline:none;font-family:inherit;
}
thead tr.filters input:focus,thead tr.filters select:focus{border-color:var(--brand-500)}
tbody td{padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover{background:var(--row-hover)}
[data-theme="dark"] tbody tr:hover{background:var(--row-hover)}
.two-line b{display:block;font-size:12.5px;font-weight:500}
.two-line span{display:block;font-size:10px;color:var(--text-3);margin-top:1px}
tfoot td{padding:9px 11px;font-weight:600;background:var(--thead-bg);border-top:1px solid var(--border)}

/* ---------- StatusPill (variante bar del sistema real) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:5px;
  font-size:10.5px;font-weight:600;white-space:nowrap;
  background:var(--p-bg);color:var(--p-fg);
}
.pill::before{content:"";width:3px;height:11px;border-radius:2px;background:currentColor;flex:none}
.pill.round{border-radius:999px;padding:3px 10px}
.pill.round::before{display:none}
.p-emerald{--p-bg:var(--emerald-bg);--p-fg:var(--emerald)}
.p-amber{--p-bg:var(--amber-bg);--p-fg:var(--amber)}
.p-blue{--p-bg:var(--blue-bg);--p-fg:var(--blue)}
.p-rose{--p-bg:var(--rose-bg);--p-fg:var(--rose)}
.p-violet{--p-bg:var(--violet-bg);--p-fg:var(--violet)}
.p-zinc{--p-bg:var(--zinc-bg);--p-fg:var(--zinc)}
.p-teal{--p-bg:var(--teal-bg);--p-fg:var(--teal)}
.p-indigo{--p-bg:var(--indigo-bg);--p-fg:var(--indigo)}
.p-slate{--p-bg:var(--slate-bg);--p-fg:var(--slate)}
.p-orange{--p-bg:var(--orange-bg);--p-fg:var(--orange)}
.p-yellow{--p-bg:var(--yellow-bg);--p-fg:var(--yellow)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--navy-50)}
.btn svg{width:14px;height:14px;stroke-width:2}
.btn-brand{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn-brand:hover{background:var(--brand-700)}
.btn-navy{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-900)}
.btn-excel{color:#047857;border-color:#a7f3d0;background:#ecfdf5}
[data-theme="dark"] .btn-excel{background:rgba(5,150,105,.15);border-color:rgba(5,150,105,.4);color:#34d399}
.btn-sm{padding:5px 10px;font-size:11.5px}

.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--border)}
.toolbar .lbl{font-size:11.5px;color:var(--text-3);font-weight:500}
.toolbar input[type="date"],.toolbar select,.toolbar input[type="text"]{
  border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:12px;
  color:var(--text);background:var(--card);outline:none;font-family:inherit;
}
.toolbar input:focus,.toolbar select:focus{border-color:var(--brand-500)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--card);padding:6px 12px;font:inherit;font-size:11.5px;font-weight:500;color:var(--text-2);cursor:pointer}
.seg button+button{border-left:1px solid var(--border)}
.seg button.on{background:var(--brand-600);color:#fff}

/* ---------- paginación ---------- */
.pager{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}
.pager .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pager select{border:1px solid var(--border);border-radius:6px;padding:4px 7px;font-size:11.5px;background:var(--card);color:var(--text)}

/* ---------- grid utils ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- banner de demo ---------- */
.demo-bar{
  background:var(--navy-900);color:#e5e7eb;font-size:11.5px;
  padding:7px 26px;display:flex;align-items:center;gap:10px;
}
.demo-bar b{color:var(--brand-500);font-weight:600}
.demo-bar a{margin-left:auto;color:var(--brand-500);font-weight:500}
.demo-bar a:hover{text-decoration:underline}