:root{--bg:#f1f5f9;--card:#fff;--ink:#0f172a;--muted:#64748b;--brand:#2563eb;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--line:#e2e8f0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.wrap{max-width:720px;margin:0 auto;padding:12px}
h1{font-size:1.4rem;margin:.4rem 0 .8rem}h2{font-size:1.1rem;margin:1rem 0 .5rem}
a{color:var(--brand)}
.card{background:var(--card);border-radius:14px;padding:14px;margin:10px 0;box-shadow:0 1px 3px #0001}
.map{height:46vh;min-height:280px;border-radius:14px;overflow:hidden;margin:10px 0}
label{display:block;font-weight:600;margin:10px 0 4px}
input,textarea,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
textarea{min-height:90px;font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 18px;border:0;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.block{display:flex;width:100%}.btn.ghost{background:#e2e8f0;color:var(--ink)}.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn.sm{padding:8px 12px;font-size:.9rem;border-radius:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.row>*{flex:1}
.muted{color:var(--muted);font-size:.9rem}
.flash{padding:10px 14px;border-radius:10px;margin:8px 0;background:#dcfce7}.flash.error{background:#fee2e2}
.errorlist{color:var(--bad);margin:4px 0;padding:0;list-style:none;font-size:.9rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#0f172a;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:1000}
.tabbar a{flex:1;text-align:center;color:#94a3b8;text-decoration:none;font-size:1.4rem;padding:4px;border-radius:14px;margin:0 3px}
.tabbar a span{display:block;font-size:.72rem}.tabbar a.on{background:var(--brand);color:#fff}

.badge{display:inline-block;min-width:34px;text-align:center;padding:2px 8px;border-radius:999px;color:#fff;font-weight:700}
.pill{font-size:.75rem;padding:2px 8px;border-radius:999px;background:#e2e8f0}.pill.warn{background:#fef3c7;color:#92400e}.pill.ok{background:#dcfce7;color:#166534}.pill.bad{background:#fee2e2;color:#991b1b}
.stop{display:flex;gap:12px;align-items:flex-start}
.stop .n{flex:0 0 40px;height:40px;border-radius:50%;color:#fff;font-weight:700;display:grid;place-items:center}
.stop .info{flex:1;min-width:0}.stop .name{font-weight:700}
.bigLabel{font-size:4.5rem;font-weight:800;text-align:center;line-height:1;padding:18px 0;border-radius:16px;color:#fff;letter-spacing:2px}
.pin{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;font-size:12px;border:2px solid #fff;box-shadow:0 1px 4px #0006;width:28px;height:28px}
.pin.depot{background:#0f172a;font-size:15px}
.scanbox{border:2px dashed var(--brand);border-radius:14px;padding:18px;text-align:center;background:#eff6ff}
progress{width:100%;height:10px}
.hidden{display:none}
.dayhead::first-letter{text-transform:uppercase}
.sched{margin:4px 0 8px;font-size:.9rem}.sched summary{cursor:pointer;color:var(--brand)}.sched form{margin-top:6px}
.map{position:relative}
.locbtn{position:absolute;right:10px;bottom:30px;z-index:1100;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 6px #0006;font-size:20px;line-height:1;cursor:pointer}.locbtn.off{opacity:.55}
.typebar{position:absolute;top:10px;right:10px;z-index:1100;display:flex;background:#fff;border-radius:12px;box-shadow:0 1px 6px #0006;overflow:hidden}
.typebar button{border:0;background:#fff;padding:5px 9px;min-width:54px;display:flex;flex-direction:column;align-items:center;font:inherit;color:#334155;cursor:pointer;line-height:1.1}
.typebar button span{font-size:19px}.typebar small{font-size:.62rem}
.typebar button.on{background:#dbeafe;color:#1d4ed8;font-weight:700}
.map{touch-action:none;overscroll-behavior:contain}
/* 📍 arriba a la izquierda: en Google esa esquina está libre; en Leaflet va debajo de sus botones +/- */
.locbtn{right:auto;bottom:auto;left:10px;top:10px}.locbtn.lf{top:84px}
table.sheet{width:100%;border-collapse:collapse}.sheet td{padding:7px 6px;border-top:1px solid var(--line);vertical-align:top}.sheet .ord{width:26px;color:var(--muted);font-weight:700}.sheet .no{width:54px;white-space:nowrap}.sheet .mk{width:46px;color:var(--muted);font-size:.85rem}.sheet tr.hit{background:#fef9c3}
/* Modo navegación: el mapa ocupa la ventana y abajo va la parada actual */
#navPanel{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:1200;max-width:720px;margin:0 auto;
  background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -3px 14px #0005;padding:12px 14px}
.navHead{display:flex;gap:10px;align-items:center}.navInfo{font-weight:800;font-size:1.25rem;margin:6px 0 2px}
#navPanel .row .btn{padding:12px}
#navPanel.arrived{box-shadow:0 -3px 14px #16a34aaa;border-top:4px solid #16a34a}
body.navmode .wrap > *:not(#map):not(#navPanel){display:none}
body.navmode #map{height:calc(100vh - 300px);min-height:200px;margin-top:0}
html.navpre .wrap > *:not(#map):not(#navPanel){display:none}
html.navpre #map{height:calc(100vh - 300px);min-height:200px;margin-top:0}

/* Pantalla "paquete guardado": todo cabe sin scroll */
.saved{display:flex;flex-direction:column;gap:6px;height:calc(100dvh - 76px - env(safe-area-inset-bottom) - 24px);min-height:420px}
.saved .bigLabel{font-size:3rem;padding:8px 0;border-radius:12px}
.saved .tip{text-align:center;margin:0;font-size:.8rem;line-height:1.25}
.saved .card{margin:0;padding:8px 12px;font-size:.9rem;line-height:1.3}
.saved .card .muted{font-size:.8rem}
.saved .flash{margin:0;padding:6px 10px;font-size:.85rem}
.saved .map{flex:1;height:auto;min-height:140px;margin:0}
.saved .row{margin-top:0;flex-wrap:nowrap}
.saved .btn{padding:11px 14px}
.saved .links{margin:0;text-align:center;font-size:.85rem}

/* Etiqueta con el número del paquete junto al marcador (Leaflet) */
.pintag{position:absolute;left:19px;top:-8px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;display:grid;place-items:center;background:#fff;border:2px solid currentColor;border-radius:9px;font:700 10px/1 Arial,sans-serif;box-shadow:0 1px 3px #0004}

/* Botones de cada paquete más compactos (ocupan menos pantalla en el celular) */
.card.stop .row{gap:5px;margin-top:5px}
.card.stop .row>*{min-width:0}
.card.stop .row .btn{padding:5px 6px;font-size:.78rem;line-height:1.2;border-radius:8px;gap:4px}
.card.stop .info>form .btn,.card.stop .info>.row+.row .btn{padding:6px 6px}

/* Botón 📍: muestra la precisión del GPS y se pone azul mientras el mapa te sigue */
.locbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.locbtn small{font-size:9px;line-height:1;font-weight:700;color:#475569}
.locbtn.on{background:#1a73e8}.locbtn.on small{color:#fff}

/* Paginación: « ‹ Página X de Y › » */
.pager{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:6px;align-items:center;margin:12px 0;text-align:center}
.pager .muted{font-size:.8rem;line-height:1.2}