:root{
  --bg:#0a0e13; --side:#0c1118; --panel:#0f151d; --panel2:#151d27; --line:#1b2530; --line2:#243140; --txt:#e6edf3; --mut:#7d8b9a; --mut2:#a7b4c2;
  --ok:#3ddc97; --acc:#ffb020; --acc-t:#0a0e13; --warn:#ffb020; --bad:#ff5a4f; --azul:#5aa9ff; --lila:#a99bff; --gris:#4b5866;
  --r:14px; --fd:'Space Grotesk',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.45 var(--fb);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.01em}
.oculto{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px calc(24px + env(safe-area-inset-bottom))}
.sup{font:11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* estructura: menú lateral en pantallas grandes, barra arriba en celular */
.shell{min-height:100vh}
.top{background:var(--side);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.lat-in{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font:700 17px var(--fd)}
.logo i{width:30px;height:30px;border-radius:8px;background:var(--acc);display:grid;place-items:center}
.logo svg{width:18px;height:18px;stroke:var(--acc-t);fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.yo{flex:none;margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);min-width:0}
.quien{display:flex;align-items:center;gap:8px;min-width:0}
.yo b{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.rol{font:11px var(--fm);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:99px;border:1px solid var(--line2);color:var(--acc);white-space:nowrap}
.nav{display:flex;gap:6px;overflow-x:auto;padding:0;scrollbar-width:none;order:3;flex:1 0 100%}
.nav::-webkit-scrollbar{display:none}
.nav button{flex:none;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;border:0;background:transparent;color:var(--mut2);cursor:pointer;font-weight:500;font-size:14px}
.nav button .pt{width:6px;height:6px;border-radius:50%;background:var(--gris)}
.nav button:hover{background:var(--panel2)}
.nav button[aria-current=page]{background:var(--acc);color:var(--acc-t);font-weight:600}
.nav button[aria-current=page] .pt{background:var(--acc-t)}
@media (min-width:900px){
  .con-menu{display:grid;grid-template-columns:224px minmax(0,1fr)}
  .con-menu>.top{position:sticky;top:0;height:100vh;border-bottom:0;border-right:1px solid var(--line)}
  .con-menu .lat-in{flex-direction:column;align-items:stretch;gap:26px;padding:22px 16px;height:100%;flex-wrap:nowrap}
  .con-menu .logo{padding:0 6px}
  .con-menu .nav{flex-direction:column;gap:4px;order:0;flex:0 0 auto;overflow:visible}
  .con-menu .nav button{padding:10px 12px;width:100%}
  .con-menu .yo{margin:auto 0 0;flex-direction:column;align-items:stretch;padding:12px;border:1px solid var(--line);border-radius:10px;gap:10px}
  .con-menu .quien{flex-direction:column;align-items:flex-start;gap:6px}
  .con-menu .yo b{max-width:none}
  .con-menu>.wrap{max-width:none;margin:0;padding:26px 32px 32px;width:100%}
}

/* botones y formularios */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);font-weight:600;cursor:pointer}
.btn:hover{border-color:#3a4b5c}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.peligro{color:var(--bad);border-color:#5a2a2a}
.btn.chico{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.grande{min-height:64px;font:700 19px var(--fd);width:100%;border-radius:14px}
.btn[disabled]{opacity:.5;cursor:default}
label{display:block;font-size:11px;color:var(--mut);margin:0 0 5px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--fm)}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:9px;border:1px solid var(--line2);background:#0a0e13;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px #ffb02022}
.campo{margin-bottom:14px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>*{flex:1 1 150px}
.fila>.btn{flex:0 0 auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:16px}
.panel h2{font-size:18px;margin-bottom:12px}
.sub{color:var(--mut);font-size:13px}
.vacio{padding:28px 12px;text-align:center;color:var(--mut)}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:8px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login form{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 24px}
.login h1{font-size:26px;margin:14px 0 4px}
.login .logo i{width:44px;height:44px;border-radius:12px}.login .logo svg{width:26px;height:26px}

/* tablero */
.cab{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.cab h1{font-size:30px;font-weight:700;margin-top:2px}
.cab .campo{margin:0;flex:0 1 180px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi b{display:block;font:600 28px var(--fm);line-height:1.15}
.kpi span{font-size:12px;color:var(--mut);display:block;margin-top:4px;line-height:1.35}
.kpi.vivo b{color:var(--acc)}
.barra{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.barra .campo{margin:0;flex:0 1 190px}
.pulso{display:inline-flex;align-items:center;gap:8px;font:12px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--ok);margin-left:auto;padding:7px 12px;border:1px solid #1f3a2e;background:#0e1d17;border-radius:99px}
.pulso i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 #3ddc9788;animation:p 2s infinite}
.pulso.off{color:var(--warn);border-color:#3a2f12;background:#1c1606}
.pulso.off i{background:var(--warn);animation:none}
@keyframes p{70%{box-shadow:0 0 0 8px #3ddc9700}100%{box-shadow:0 0 0 0 #3ddc9700}}
.viajes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start;margin-top:20px}
.viaje{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.viaje>header{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.viaje h3{font-size:17px}
.viaje h3 .meta{font:400 12px var(--fm);margin-left:6px}
.viaje .meta{font-size:12.5px;color:var(--mut)}
.viaje .kg{margin-left:auto;font:600 16px var(--fm);text-align:right}
.viaje .kg small{display:block;font:400 11px var(--fb);color:var(--mut)}
.chip{font:11px var(--fm);padding:3px 10px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.chip.programado{color:var(--mut)}.chip.en_curso{color:var(--acc)}.chip.completado{color:var(--ok)}.chip.cancelado{color:var(--bad)}
.paradas{padding:4px 18px 8px}
.parada{display:grid;grid-template-columns:26px 1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid #151d27;align-items:start}
.parada:last-child{border-bottom:0}
.num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--fm);background:transparent;border:2px solid var(--gris);color:var(--mut)}
.parada.esperando .num{border-color:var(--azul);color:var(--azul);background:#5aa9ff22}
.parada.descargando .num{border-color:var(--acc);color:var(--acc);background:#ffb02033}
.parada.porsalir .num{border-color:var(--lila);color:var(--lila);background:#a99bff22}
.parada.completada .num{border-color:var(--ok);background:var(--ok);color:#04201c}
.parada .nom{font-weight:600;font-size:14.5px}
.est{font-size:12.5px;font-weight:500}
.est .crono{font-family:var(--fm)}
.est.pendiente{color:var(--mut)}.est.esperando{color:var(--azul)}.est.descargando{color:var(--acc)}.est.porsalir{color:var(--lila)}.est.completada{color:var(--ok)}
.tiempos{grid-column:2/4;display:flex;flex-wrap:wrap;gap:4px 16px;font:11.5px var(--fm);color:var(--mut);margin-top:4px}
.tiempos b{color:var(--mut2);font-weight:500}
.acciones{grid-column:2/4;margin-top:8px}

/* motorista / bodeguero */
.grande-lista{display:grid;gap:12px;margin-top:16px;max-width:760px}
.tarjeta{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.tarjeta h2{font-size:21px}
.tarjeta .estado-grande{font:700 18px var(--fd);margin:10px 0 14px}
.cronometro{font:600 36px var(--fm);color:var(--acc);letter-spacing:.02em}
.camion{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.camion span{font:12px var(--fm);padding:3px 10px;border-radius:99px;background:#0a0e13;border:1px solid var(--line2);color:var(--mut)}
.mini{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.mini .parada{padding:8px 0}

/* listas simples (equipo, viajes) */
.lista{display:grid;gap:8px}
.item{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#0c1118}
.item.inactivo{opacity:.55}
.item .info{flex:1 1 180px;min-width:0}
.item .info b{display:block}
.item .info small{color:var(--mut)}
.paradas-edit{display:grid;gap:6px;margin:8px 0}
.paradas-edit .item{padding:7px 10px}

/* mapa: lista de sucursales a un lado y mapa al otro */
.mapa-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);height:calc(100vh - 150px);min-height:560px}
.mapa-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:#0d131a}
.ml-cab{padding:18px 16px 12px}
.ml-cab h2{font-size:24px;margin:2px 0 14px}
.ml-items{flex:1;overflow:auto;padding:0 8px 12px}
.ml-it{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--txt);cursor:pointer;text-align:left;font-weight:500;font-size:14px}
.ml-it small{margin-left:auto;font:11px var(--fm);color:var(--mut)}
.ml-it:hover{background:var(--panel2)}
.ml-it[aria-pressed=true]{background:#1c1606;border-color:#3a2f12;color:var(--acc)}
.ml-vacio{padding:14px 10px;color:var(--mut);font-size:13px}
.mapa-area{position:relative;min-width:0;min-height:0}
#mapa{position:absolute;inset:0;background:#0b1219}
.leaflet-base-pane .leaflet-tile{filter:invert(1) hue-rotate(188deg) brightness(.82) contrast(.92) saturate(.55)}
.leaflet-container{font-family:var(--fb);background:#0b1219}
.m-card{position:absolute;left:16px;top:16px;z-index:500;max-width:min(330px,calc(100% - 32px));padding:16px 20px;border-radius:14px;background:#0a0e13ee;border:1px solid var(--line2)}
.resumen-ruta{display:block}
.resumen-ruta .t{font:600 44px var(--fm);line-height:1;color:var(--acc)}.resumen-ruta .t small{font:500 16px var(--fb);color:var(--mut2)}
.resumen-ruta .sub{line-height:1.5}
.nota{font-size:12px;color:var(--mut);margin:10px 0 0;line-height:1.45}
.etq{display:inline-block;font:11px var(--fm);letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid currentColor;margin-top:8px}
.etq.google{color:var(--acc);background:#1c1606}.etq.tomtom{color:var(--azul)}
@media (max-width:899px){.mapa-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,60vh);height:auto}.mapa-lista{border-right:0;border-bottom:1px solid var(--line)}.ml-items{max-height:190px}}

dialog{border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--txt);padding:22px;width:min(420px,92vw)}
dialog::backdrop{background:#000a}
dialog h3{font-size:19px;margin-bottom:8px}
dialog .fila{margin-top:16px;justify-content:flex-end}
#aviso{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;background:#151d27;border:1px solid var(--line2);padding:11px 18px;border-radius:12px;transition:.25s;z-index:600;max-width:92vw;text-align:center}
#aviso.ver{opacity:1;transform:translateX(-50%)}
#aviso.mal{background:#2b1414;border-color:#6a2d2d;color:#ffd0cc}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){.yo b{display:none}.resumen-ruta .t{font-size:38px}.cab h1{font-size:25px}}