:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EAF1FC;
  --line:#D7E3F5;
  --ink:#0F2038;
  --ink-soft:#4C5F7D;
  --ink-faint:#8A99B3;
  --accent:#1257B0;       /* azul camino — modo a pie */
  --accent-ink:#FFFFFF;
  --accent-soft:#DCE9FB;
  --bici:#B8860B;          /* amarillo/dorado — modo bici */
  --bici-soft:#FBF0CE;
  --gold:#A8790C;          /* sello / credencial, familia amarilla */
  --gold-soft:#FCEFC9;
  --shadow: 0 1px 2px rgba(15,32,56,.05), 0 6px 20px -8px rgba(15,32,56,.16);
  --radius: 16px;
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1626;
    --surface:#101F35;
    --surface-2:#16283F;
    --line:#25405E;
    --ink:#EAF1FC;
    --ink-soft:#A9BCD6;
    --ink-faint:#75879F;
    --accent:#6FADF5;
    --accent-ink:#062042;
    --accent-soft:#1B3556;
    --bici:#F0C64B;
    --bici-soft:#3A2F0F;
    --gold:#F0C64B;
    --gold-soft:#3A2F0F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1626;
  --surface:#101F35;
  --surface-2:#16283F;
  --line:#25405E;
  --ink:#EAF1FC;
  --ink-soft:#A9BCD6;
  --ink-faint:#75879F;
  --accent:#6FADF5;
  --accent-ink:#062042;
  --accent-soft:#1B3556;
  --bici:#F0C64B;
  --bici-soft:#3A2F0F;
  --gold:#F0C64B;
  --gold-soft:#3A2F0F;
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
a{color:inherit}
button{font-family:inherit;color:inherit;cursor:pointer}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{max-width:640px;margin:0 auto;min-height:100vh;position:relative}

/* ---------- Header ---------- */
.top{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top)) 18px 0;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;padding-bottom:12px}
.brand img{height:38px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.brand-text span{font-size:.72rem;color:var(--ink-soft);letter-spacing:.02em}

.mode-switch{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:999px;margin-bottom:12px}
.mode-switch button{
  flex:1;border:none;background:transparent;padding:9px 10px;border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s ease, color .15s ease;
}
.mode-switch button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.mode-switch button[data-mode="andar"].active{color:var(--accent)}
.mode-switch button[data-mode="bici"].active{color:var(--bici)}
.mode-switch svg{width:16px;height:16px;flex:none}

.tabs{display:flex;gap:2px}
.tabs button{
  flex:1;background:none;border:none;padding:10px 4px 12px;font-size:.82rem;font-weight:600;
  color:var(--ink-faint);border-bottom:2px solid transparent;
}
.tabs button.active{color:var(--ink);border-color:var(--accent)}
body[data-mode="bici"] .tabs button.active{border-color:var(--bici)}

/* ---------- Summary strip ---------- */
.summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:14px 18px 4px;
}
.summary div{background:var(--surface);padding:10px 6px;text-align:center}
.summary b{display:block;font-family:var(--font-mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
.summary span{font-size:.68rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}

/* ---------- Views ---------- */
.view{display:none;padding:14px 18px 24px}
.view.active{display:block}

.searchbar{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;margin-bottom:14px;
}
.searchbar svg{width:16px;height:16px;color:var(--ink-faint);flex:none}
.searchbar input{border:none;background:none;font:inherit;flex:1;color:var(--ink);min-width:0}
.searchbar input:focus{outline:none}

/* route timeline */
.timeline{position:relative}
.stage-card{
  position:relative;display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow);
  text-align:left;width:100%;align-items:flex-start;
}
.stage-num{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.85rem;
}
body[data-mode="bici"] .stage-num{background:var(--bici-soft);color:var(--bici)}
.stage-body{flex:1;min-width:0}
.stage-route{font-weight:600;font-size:.95rem;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.stage-route .arrow{color:var(--ink-faint);font-weight:400}
.stage-meta{display:flex;gap:10px;margin-top:5px;flex-wrap:wrap}
.chip{
  font-size:.72rem;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.chip.km{color:var(--accent);background:var(--accent-soft)}
body[data-mode="bici"] .chip.km{color:var(--bici);background:var(--bici-soft)}
.chip.stamp{color:var(--gold);background:var(--gold-soft);font-family:var(--font-body)}
.stage-check{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);margin-top:2px;
  display:flex;align-items:center;justify-content:center;background:var(--surface);transition:.15s}
.stage-check svg{width:14px;height:14px;opacity:0;transition:.15s;stroke:white}
.stage-card.selected .stage-check{background:var(--accent);border-color:var(--accent)}
body[data-mode="bici"] .stage-card.selected .stage-check{background:var(--bici);border-color:var(--bici)}
.stage-card.selected .stage-check svg{opacity:1}
.stage-card.estimate .chip.km{opacity:.75}
.stage-card.estimate .chip.km::after{content:" ≈"}

/* ---------- Detail sheet ---------- */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(20,16,10,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:50;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--surface);
  border-radius:20px 20px 0 0;max-height:88vh;overflow-y:auto;transform:translateY(100%);
  transition:transform .25s cubic-bezier(.2,.8,.25,1);z-index:51;
  padding:10px 20px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--line);border-radius:99px;margin:6px auto 14px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.sheet-head h2{font-size:1.3rem}
.sheet-head .stage-num{width:30px;height:30px;font-size:.78rem;margin-top:2px}
.sheet-sub{color:var(--ink-soft);font-size:.85rem;margin-top:4px}
.sheet-stats{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.stat{background:var(--surface-2);border-radius:12px;padding:8px 12px;flex:1;min-width:90px}
.stat b{display:block;font-family:var(--font-mono);font-size:1.1rem}
.stat span{font-size:.68rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}

.section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
  margin:20px 0 8px;display:flex;align-items:center;gap:6px}
.section-label svg{width:14px;height:14px}

.town-list{display:flex;flex-direction:column}
.town-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.town-row:last-child{border-bottom:none}
.town-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
body[data-mode="bici"] .town-dot{background:var(--bici)}
.town-row.endpoint .town-dot{width:10px;height:10px;background:var(--ink)}
.town-name{flex:1}
.town-row.endpoint .town-name{font-weight:700}
.town-km{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.town-row.hl,.info-card.hl{background:var(--accent-soft);border-radius:10px;box-shadow:0 0 0 2px var(--accent) inset}
body[data-mode="bici"] .info-card.hl{box-shadow:0 0 0 2px var(--bici) inset}

.info-card{background:var(--surface-2);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:.86rem}
.info-card b{display:block;font-size:.88rem}
.info-card .info-meta{color:var(--ink-soft);font-size:.78rem;margin-top:2px}
.info-card .info-note{color:var(--ink-soft);font-size:.78rem;margin-top:3px;font-style:italic}
.info-card-pueblo{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:2px}
body[data-mode="bici"] .info-card-pueblo{color:var(--bici)}
.notes-text{font-size:.88rem;color:var(--ink-soft);line-height:1.55;background:var(--accent-soft);border-radius:12px;padding:12px 14px}
body[data-mode="bici"] .notes-text{background:var(--bici-soft)}

.track-link{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding:12px;border-radius:12px;
  background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;font-size:.88rem;
}
.track-link svg{width:16px;height:16px}

.plan-toggle{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:12px;border-radius:12px;
  border:1.5px solid var(--accent);color:var(--accent);font-weight:600;font-size:.88rem;background:none;width:100%;
}
.plan-toggle svg{width:15px;height:15px;flex:none}
body[data-mode="bici"] .plan-toggle{border-color:var(--bici);color:var(--bici)}
.plan-toggle.selected{background:var(--accent);color:var(--accent-ink)}
body[data-mode="bici"] .plan-toggle.selected{background:var(--bici);color:var(--accent-ink)}

/* ---------- Plan view ---------- */
.plan-empty{text-align:center;padding:40px 20px;color:var(--ink-soft)}
.plan-empty svg{width:40px;height:40px;margin-bottom:10px;opacity:.5}
.plan-empty p{font-size:.88rem;line-height:1.5}

.plan-config{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:16px;box-shadow:var(--shadow)}
.field{margin-bottom:12px}
.field:last-child{margin-bottom:0}
.field label{font-size:.75rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:5px}
.field input[type="date"],.field input[type="number"],.field input[type="text"]{
  width:100%;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:9px 10px;font:inherit;color:var(--ink);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.day-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.day-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.day-head b{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
body[data-mode="bici"] .day-head b{color:var(--bici)}
.day-head span{font-size:.78rem;color:var(--ink-faint);font-family:var(--font-mono)}
.day-stage{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;padding:4px 0}
.day-stage small{color:var(--ink-soft);font-family:var(--font-mono);flex:none}

.plan-actions{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;padding:12px;border-radius:12px;font-weight:600;font-size:.86rem;border:none;text-align:center}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}

.total-bar{
  display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--bg);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
}
.total-bar b{font-family:var(--font-mono);font-size:1.3rem}
.total-bar span{display:block;font-size:.68rem;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.total-bar .tb-item{text-align:center}

/* ---------- Map view ---------- */
.map-wrap{
  position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:14px;
}
.map-wrap svg{display:block;width:100%;height:auto}
.map-path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 7}
body[data-mode="bici"] .map-path{stroke:var(--bici)}
.map-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2;cursor:pointer;transition:r .12s ease}
body[data-mode="bici"] .map-dot{stroke:var(--bici)}
.map-dot.end{fill:var(--accent)}
body[data-mode="bici"] .map-dot.end{fill:var(--bici)}
.map-dot.active{stroke:var(--gold);fill:var(--gold);r:8}
.map-dot.dim{opacity:.22}
.map-label{font-family:var(--font-body);font-size:5.4px;fill:var(--ink-soft);pointer-events:none;font-weight:600}
.map-label.dim{opacity:.22}
.map-badge{
  position:absolute;top:10px;left:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:5px 10px;font-size:.68rem;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:5px;z-index:2;
}
.map-badge svg{width:13px;height:13px;flex:none}
.map-badge b{color:var(--accent)}
body[data-mode="bici"] .map-badge b{color:var(--bici)}
.map-hint{position:absolute;bottom:8px;right:10px;font-size:.64rem;color:var(--ink-faint);background:var(--surface);
  padding:3px 8px;border-radius:999px;border:1px solid var(--line)}

/* ---------- Mapa real (Leaflet + OpenStreetMap) ---------- */
#map-leaflet{width:100%;height:460px;background:var(--surface-2)}
.sheet-leaflet{width:100%;height:280px;background:var(--surface-2)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--ink);border-radius:12px}
.leaflet-popup-content-wrapper{box-shadow:0 10px 28px rgba(15,32,56,.22)}
.leaflet-container{font-family:var(--font-body);background:var(--surface-2)}
.leaflet-container a{color:var(--accent)}

/* atribución: discreta, en una esquina que no choca con los controles */
.leaflet-control-attribution{
  font-size:.62rem !important;background:var(--surface) !important;color:var(--ink-faint) !important;
  border-radius:8px !important;padding:2px 7px !important;box-shadow:var(--shadow);
}
.leaflet-control-attribution a{color:var(--ink-soft) !important}

/* zoom +/- y capas: tarjetas redondeadas a juego con el resto de la app */
.leaflet-bar{border:1px solid var(--line) !important;border-radius:12px !important;overflow:hidden;box-shadow:var(--shadow) !important}
.leaflet-bar a,.leaflet-bar a:hover{
  background:var(--surface) !important;color:var(--ink) !important;border-bottom:1px solid var(--line) !important;
  width:32px !important;height:32px !important;line-height:32px !important;font-size:1.05rem !important;
}
.leaflet-bar a:hover{background:var(--accent-soft) !important;color:var(--accent) !important}
body[data-mode="bici"] .leaflet-bar a:hover{color:var(--bici) !important}
.leaflet-bar a:last-child{border-bottom:none !important}
.leaflet-touch .leaflet-bar a{line-height:30px !important}

/* selector de tipo de mapa */
.leaflet-control-layers{
  border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:var(--shadow) !important;
  background:var(--surface) !important;
}
.leaflet-control-layers-toggle{
  width:32px !important;height:32px !important;background-color:var(--surface) !important;
  background-size:18px 18px !important;
}
.leaflet-control-layers-expanded{padding:10px 12px !important;color:var(--ink);font-size:.82rem}
.leaflet-control-layers-selector{margin-right:6px}
.leaflet-control-layers label{padding:3px 0;display:flex;align-items:center}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .leaflet-tile{filter:brightness(.82) saturate(.92) contrast(1.02)}
  :root:not([data-theme="light"]) .leaflet-control-layers-toggle{filter:invert(1) brightness(1.4)}
}
:root[data-theme="dark"] .leaflet-tile{filter:brightness(.82) saturate(.92) contrast(1.02)}
:root[data-theme="dark"] .leaflet-control-layers-toggle{filter:invert(1) brightness(1.4)}

.leaflet-tooltip{font-size:.72rem;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px}

.map-scalebar line{stroke:var(--ink-soft);stroke-width:1.2}
.map-scalebar text{font-family:var(--font-body);font-size:6px;fill:var(--ink-soft);text-anchor:middle;font-weight:600}
.map-compass path{fill:var(--ink-soft)}
.map-compass text{font-family:var(--font-body);font-size:6.5px;fill:var(--ink-soft);font-weight:700}

.sheet-map{margin:14px 0 0}
.sheet-map svg{max-height:220px}
.sheet-map-info{padding:8px 12px;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
.sheet-map-info b{color:var(--ink);font-size:.84rem}
.sheet-map-info span{color:var(--ink-faint);font-family:var(--font-mono)}

.map-info{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:14px}
.map-info-empty{text-align:center;color:var(--ink-faint);font-size:.86rem;padding:10px 4px}
.map-info-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.map-info-head h3{font-size:1.05rem}
.map-info-head .chip{margin-top:4px}
.map-info-row{display:flex;gap:16px;margin:10px 0;flex-wrap:wrap}
.map-info-row .stat{flex:1;min-width:80px}
.map-info-cuno{font-size:.82rem;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.map-info-cuno b{color:var(--ink)}
.map-info-cuno svg{width:13px;height:13px;vertical-align:-2px;flex:none}
.map-info a.ext-btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--accent);
  text-decoration:none;
}
.map-info a.ext-btn svg{width:15px;height:15px;flex:none}
body[data-mode="bici"] .map-info a.ext-btn{color:var(--bici)}

/* ---------- Info view ---------- */
.info-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.info-block h3{font-size:1rem;margin-bottom:8px}
.info-block p{font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.info-block a.ext{color:var(--accent);font-weight:600;text-decoration:none}
.install-steps{list-style:none;margin:10px 0 0;padding:0;font-size:.84rem;color:var(--ink-soft)}
.install-steps li{display:flex;gap:8px;padding:5px 0}
.install-steps li b{flex:none;width:18px;color:var(--ink);font-family:var(--font-mono)}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--surface);
  border-top:1px solid var(--line);display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav button{
  flex:1;background:none;border:none;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-faint);font-size:.66rem;font-weight:600;
}
.bottom-nav button svg{width:20px;height:20px}
.bottom-nav button.active{color:var(--accent)}
body[data-mode="bici"] .bottom-nav button.active{color:var(--bici)}
.badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--accent);color:var(--accent-ink);
  font-size:.6rem;min-width:15px;height:15px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
body[data-mode="bici"] .badge{background:var(--bici)}

.toast{
  position:fixed;left:50%;bottom:76px;transform:translate(-50%,10px);background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:99px;font-size:.82rem;font-weight:600;opacity:0;pointer-events:none;
  transition:.2s;z-index:60;box-shadow:var(--shadow);white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}