:root{--ink:#17161B;--ground:#F5F2ED;--card:#fff;--line:#D8D3CC;--line2:#ECE8E2;--muted:#5E5850;--accent:#B8431A;--accent2:#8F3212;--dark:#141317;--ok:#1F6B3A;--bad:#8A2414;--amb:#FFF1C7;--ambt:#5C3F00;--tg:#1D5C8C}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;font:15px/1.4 Archivo,system-ui,sans-serif;color:var(--ink);background:var(--ground)}
.mono{font-family:'IBM Plex Mono',monospace}
h1,h2,h3{font-family:'Archivo Narrow',sans-serif;margin:0}
h1{font-size:28px}h2{font-size:20px}
.marca{font:700 18px 'Archivo Narrow',sans-serif;letter-spacing:.06em;white-space:nowrap}.marca span{color:#F26B2B}
.top{height:60px;background:var(--dark);color:var(--ground);display:flex;align-items:center;gap:24px;padding:0 24px;position:sticky;top:0;z-index:5}
.top nav{display:flex;gap:4px;flex-grow:1;overflow-x:auto}
.top nav a{color:#C9C3BA;text-decoration:none;font-weight:600;padding:9px 14px;border-radius:6px;white-space:nowrap}
.top nav a.on{background:#2F2D35;color:#fff}
.quien{font-size:13px;color:#C9C3BA;white-space:nowrap}
.lnk{background:none;border:0;color:#F26B2B;font:600 13px Archivo,sans-serif;cursor:pointer}
main{padding:22px 24px;max-width:1500px;margin:0 auto}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card+.card{margin-top:14px}
.dark{background:var(--ink);color:var(--ground);border-color:var(--ink)}
label{display:block;font-size:13px;font-weight:600;color:#4A4540}
input,select,textarea{display:block;width:100%;margin-top:5px;height:42px;border:1px solid #C9C3BA;border-radius:8px;background:#fff;padding:0 11px;font:500 15px Archivo,sans-serif;color:var(--ink)}
textarea{height:80px;padding:10px 11px;resize:vertical}
input:disabled{background:#ECE8E2;color:var(--muted)}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.f4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.seg button{height:42px;padding:0 14px;border:1px solid #C9C3BA;background:#fff;font:600 14px Archivo,sans-serif;color:var(--ink);border-radius:8px;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chk{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;font-weight:500;color:var(--ink)}
.chk input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.chk input.cant{width:70px;height:32px;margin:0 0 0 auto}
.chk .p{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.btn{height:46px;padding:0 18px;border:0;border-radius:8px;font:700 15px Archivo,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn.prim{background:var(--accent);color:#fff}.btn.prim:hover{background:var(--accent2)}
.btn.neg{background:var(--ink);color:#fff}
.btn.ok{background:var(--ok);color:#fff}
.btn.bad{background:#fff;color:var(--bad);border:2px solid var(--bad)}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.btn.sm{height:34px;padding:0 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ln{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:14px}
.ln span:last-child{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px}.tot b:last-child{font:600 28px 'IBM Plex Mono',monospace}
.muted{color:var(--muted);font-size:13px}
.aviso{background:var(--amb);color:var(--ambt);border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600}
.pend{background:var(--amb);border:1px dashed #B7791F;color:var(--ambt);border-radius:4px;padding:1px 6px;font-weight:600;font-size:12px}
.err{color:var(--bad);font-weight:600;font-size:14px;min-height:18px}
.folio{font:600 38px 'IBM Plex Mono',monospace;letter-spacing:.02em}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.kpi b{display:block;font:700 30px 'Archivo Narrow',sans-serif}.kpi span{font-size:13px;color:var(--muted);font-weight:600}
table.t{width:100%;border-collapse:collapse}
table.t th{font-size:12px;color:var(--muted);text-align:left;font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);letter-spacing:.03em}
table.t td{font-size:14px;padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr.clic{cursor:pointer}table.t tr.clic:hover td{background:#FAF8F5}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.e-creado,.e-asignado{background:var(--amb);color:var(--ambt)}.e-aceptado,.e-en_camino{background:#DCE8F5;color:#1B3F66}
.e-en_sitio,.e-cargado{background:#E8E0F3;color:#45296B}.e-en_traslado,.e-en_destino{background:#DCE8F5;color:#1B3F66}.e-concluido{background:#E3ECE4;color:#1E4D2B}
.e-rechazado{background:#F7DCD6;color:var(--bad)}.e-cancelado{background:#E6E3DF;color:#4A464F}
.pago-no{color:var(--bad);font-weight:600}.pago-ok{color:#1E4D2B;font-weight:600}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:16px}
.tl div{position:relative;padding:4px 0 10px;font-size:14px}
.tl div::before{content:'';position:absolute;left:-22px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
dialog{border:0;border-radius:14px;padding:0;max-width:760px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(20,19,23,.45)}
#dlgBody{padding:22px 24px;max-height:85vh;overflow:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;z-index:20;max-width:90vw}
.toast.bad{background:var(--bad)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--dark);padding:16px}
.login-card{background:#fff;border-radius:14px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login-card .marca{color:var(--ink)}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;font:600 14px Archivo,sans-serif;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tg{color:var(--tg);font-weight:600}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.f3,.f4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){main{padding:14px}.f2,.f3,.f4{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.top{gap:12px;padding:0 12px}.top .marca{display:none}}
