:root{
  --bg:#EEF1F0; --card:#FFFFFF; --text:#13233A; --muted:#5B6878; --line:#CDD4DA; --edge:#13233A;
  --navy:#13233A; --on-navy:#FFFFFF; --signal:#FFC20E; --on-signal:#13233A;
  --go:#1F8A4C; --warn:#B4400B; --danger:#B42318; --soft:#FFF4D6;
  --font:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B121C; --card:#152131; --text:#E9EEF4; --muted:#9AA8B8; --line:#2A3A4E; --edge:#5C708A;
    --navy:#0F1B2B; --go:#3DBA72; --warn:#F08A4B; --danger:#F06A5E; --soft:#2B2410; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B121C; --card:#152131; --text:#E9EEF4; --muted:#9AA8B8; --line:#2A3A4E; --edge:#5C708A;
  --navy:#0F1B2B; --go:#3DBA72; --warn:#F08A4B; --danger:#F06A5E; --soft:#2B2410; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;min-height:100%}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.3}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
[hidden]{display:none!important}

/* Encabezado y pestañas */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:500;background:var(--navy);color:var(--on-navy)}
.top-row{display:flex;align-items:center;gap:12px;padding:10px 14px 6px}
.top h1{margin:0;font-size:26px;font-weight:800}
.summary{margin:0;flex:1;font-size:16px;color:var(--signal);font-weight:600;line-height:1.15}
.icon-btn{background:none;border:0;color:var(--on-navy);padding:8px;border-radius:8px;cursor:pointer}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:0 6px}
.tabs button{background:none;border:0;color:#B9C4D2;font-weight:700;font-size:17px;padding:10px 4px 9px;border-bottom:4px solid transparent;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--on-navy);border-bottom-color:var(--signal)}

.view{padding-bottom:110px}
.pad{padding:10px}
.map-wrap{position:relative}
.map{height:36vh;min-height:200px;border-bottom:3px solid var(--navy);z-index:1}
.map-toggle{position:absolute;right:10px;bottom:10px;z-index:400;background:var(--card);color:var(--text);border:2px solid var(--edge);border-radius:8px;padding:6px 10px;font-weight:700;font-size:15px;cursor:pointer}
.map-wrap.collapsed .map{display:none}
.map-wrap.collapsed .map-toggle{position:static;margin:10px 10px 0}
.pin-hint,.stale{margin:0;padding:10px 14px;font-weight:600}
.pin-hint{background:var(--signal);color:var(--on-signal)}
.pin-hint button{margin-left:8px;background:var(--navy);color:#fff;border:0;border-radius:6px;padding:4px 10px}
.stale{background:var(--soft);border-bottom:1px solid var(--signal)}

.empty{padding:22px 6px}
.empty h2{font-size:28px;margin:0 0 8px}
.empty p{color:var(--muted);margin:0 0 16px}
.notice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.notice h2{margin:0 0 6px;font-size:24px}
.notice p{margin:0 0 14px;color:var(--muted)}
.checks{margin:10px 10px 0;background:var(--soft);border:1.5px solid var(--signal);border-radius:10px;padding:10px 12px;font-size:16px}
.checks p{margin:0 0 4px}
.checks p:last-child{margin:0}
.checks strong{font-weight:800}

input:not([type=checkbox]),textarea,select{border:2px solid var(--line);border-radius:8px;padding:10px;font-size:18px;background:var(--card);width:100%}
.search{display:block;margin:4px 0 10px}

/* Tarjetas de parada */
.list{list-style:none;margin:0;padding:0}
.stop{display:grid;grid-template-columns:52px 1fr;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 12px 12px 6px;margin-bottom:8px}
.stop.next{border:2px solid var(--edge);box-shadow:inset 6px 0 0 var(--signal)}
.stop.done{opacity:.55}
.stop.done .addr{text-decoration:line-through}
.stop.fail{opacity:.8}
.stop.skip{opacity:.45}
.sign{width:38px;height:38px;margin:4px auto 0;background:var(--signal);color:var(--on-signal);border:2.5px solid var(--navy);border-radius:5px;transform:rotate(45deg);display:grid;place-items:center}
.sign span{transform:rotate(-45deg);font-weight:800;font-size:17px}
.stop.done .sign{background:var(--go);color:#fff}
.stop.fail .sign{background:var(--card);border-color:var(--danger);color:var(--danger)}
.stop.unseq .sign{background:var(--card);color:var(--text)}
.addr{margin:0;font-size:21px;font-weight:700;line-height:1.15}
.meta{margin:2px 0 0;color:var(--muted);font-size:16px}
.eta{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--muted)}
.flag{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--warn)}
.status{margin:6px 0 0;font-weight:700;font-size:15px}
.status.fail{color:var(--danger)}
.items{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.item{border-left:4px solid var(--signal);padding:2px 0 2px 10px}
.sg{display:block;font-size:22px;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.sg.doubt{color:var(--warn)}
.prod{display:block;font-size:15px;color:var(--muted);line-height:1.2}
.section-title{margin:18px 4px 8px;font-size:18px;color:var(--muted);list-style:none}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:8px;border:2px solid var(--edge);background:var(--card);color:var(--text);font-weight:700;text-decoration:none;cursor:pointer}
.btn.waze{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.ok{border-color:var(--go);color:var(--go)}
.btn.bad{border-color:var(--danger);color:var(--danger)}
.btn.small{min-height:40px;padding:0 12px;font-weight:600;border-width:1.5px}
.primary{background:var(--signal);color:var(--on-signal);border:2px solid var(--navy);border-radius:10px;min-height:54px;padding:0 18px;font-weight:800;font-size:20px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ghost{background:var(--card);color:var(--text);border:2px solid var(--edge);border-radius:10px;min-height:54px;padding:0 16px;font-weight:700;cursor:pointer}
.danger{background:var(--card);border:2px solid var(--danger);color:var(--danger);border-radius:10px;min-height:46px;padding:0 14px;font-weight:700;cursor:pointer;margin-right:auto}

/* Vista "Ahora" */
.now{padding:12px}
.now-progress{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 2px 10px;font-weight:700;color:var(--muted)}
.now-progress strong{color:var(--text);font-size:20px}
.bar-track{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:0 2px 14px}
.bar-fill{height:100%;background:var(--go)}
.now-card{background:var(--card);border:2px solid var(--edge);border-radius:14px;padding:16px;box-shadow:inset 0 6px 0 var(--signal)}
.now-head{display:flex;gap:14px;align-items:flex-start}
.now-head .sign{width:50px;height:50px;margin:8px 4px 0;flex:none}
.now-head .sign span{font-size:22px}
.now-addr{margin:0;font-size:30px;font-weight:800;line-height:1.05}
.now-sub{margin:4px 0 0;color:var(--muted);font-size:18px}
.now .items .sg{font-size:30px}
.now .items .prod{font-size:17px}
.now-acts{display:grid;gap:10px;margin-top:16px}
.now-acts .primary{min-height:64px;font-size:24px}
.now-acts .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.now-acts .btn{min-height:56px;font-size:19px}
.now-after{margin:14px 4px 0;color:var(--muted);font-size:17px}
.now-after strong{color:var(--text)}
.arrived{background:var(--signal);color:var(--on-signal);border-radius:8px;padding:6px 10px;font-weight:800;margin:0 0 10px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat b{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:15px}

/* Vista "Carga" */
.load-head{margin:2px 2px 10px;color:var(--muted)}
.load-head strong{color:var(--text)}
.load{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.load.on{opacity:.5}
.chk{width:48px;height:48px;border-radius:10px;border:2.5px solid var(--edge);background:var(--card);color:transparent;font-size:28px;font-weight:800;cursor:pointer;display:grid;place-items:center}
.load.on .chk{background:var(--go);border-color:var(--go);color:#fff}
.load-n{margin:0;font-weight:800;font-size:19px}
.load .sg{font-size:20px}

/* Vista "Historial" */
.month{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.month h2{margin:0;font-size:24px}
.month .btn{min-width:48px}
.money{font-variant-numeric:tabular-nums}
.hist-row{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.hist-row p{margin:0}
.hist-row .meta{font-size:15px}
.help{margin:0;color:var(--muted);font-size:15px}

/* Barra inferior */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:600;background:var(--card);border-top:3px solid var(--navy);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center}
.bar .grow{flex:1}
.bar-note{margin:0;font-size:15px;color:var(--muted);line-height:1.15}
.bar-note strong{display:block;color:var(--text);font-size:18px}

/* Diálogos */
dialog{border:0;border-radius:14px;padding:0;width:min(92vw,460px);background:var(--card);color:var(--text);max-height:90vh}
dialog::backdrop{background:rgba(11,18,28,.6)}
dialog form{padding:18px;display:flex;flex-direction:column;gap:12px}
dialog h2{margin:0;font-size:24px}
dialog h3{margin:8px 0 0;font-size:18px;color:var(--muted)}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:16px}
label.check{flex-direction:row;align-items:center;gap:10px}
label.check input{width:22px;height:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-acts .primary,.dlg-acts .ghost{min-height:46px;font-size:18px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--card);color:var(--text);border:2px solid var(--edge);border-radius:10px;padding:12px 14px;cursor:pointer}
.choice strong{font-size:20px}
.choice span{font-size:15px;color:var(--muted)}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.whoami{margin:0;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:15px}

/* Cuenta regresiva hacia Waze */
.go{position:fixed;inset:0;z-index:950;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:28px;gap:10px}
.go-label{margin:0;font-size:20px;color:var(--signal);font-weight:700}
.go-stop{margin:0;font-size:32px;font-weight:800;line-height:1.1}
.go-count{margin:0;font-size:96px;font-weight:800;color:var(--signal);font-variant-numeric:tabular-nums}
.go-acts{display:flex;gap:10px;margin-top:10px}
.go-acts .ghost{background:transparent;color:#fff;border-color:#fff;flex:1}
.go-acts .primary{flex:1}

.busy{position:fixed;inset:0;z-index:900;background:rgba(11,18,28,.72);display:grid;place-content:center;justify-items:center;color:#fff;gap:14px;font-weight:600;padding:20px;text-align:center}
.spinner{width:44px;height:44px;border:5px solid rgba(255,255,255,.3);border-top-color:var(--signal);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:960;background:var(--navy);color:#fff;padding:12px 14px;border-radius:10px;font-weight:600;
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;border:1px solid var(--edge)}
.toast.show{opacity:1;transform:none}
.toast.err{background:var(--danger);border-color:var(--danger)}
.toast.ok{background:#1F8A4C;border-color:#1F8A4C}

/* Marcadores del mapa */
.pin-wrap{background:none;border:0}
.pin{width:26px;height:26px;margin:2px;background:#FFC20E;border:2px solid #13233A;border-radius:4px;transform:rotate(45deg);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pin span{transform:rotate(-45deg);font:800 13px var(--font);color:#13233A}
.pin.done{background:#1F8A4C} .pin.done span{color:#fff}
.pin.aprox{background:#fff;border-style:dashed}

@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}.toast{transition:none}}
@media (min-width:900px){ .view,.top-row,.tabs{max-width:760px;margin-left:auto;margin-right:auto} .bar{max-width:760px;margin:0 auto} }