/* Aventuras en Cada Paso · App de rutas */
:root{
  --bg:#02070f; --card:#0c1624; --card2:#111e30; --line:rgba(28,255,107,.14);
  --green:#1cff6b; --green2:#00e05a; --orange:#ff6f00; --red:#ff3b4e; --blue:#2d8cff;
  --tx:#e8eaf0; --tx2:#c8ccd8; --mut:#8a8fa0; --mut2:#5a6070;
  --head:'Orbitron',system-ui,sans-serif; --body:'Roboto',system-ui,-apple-system,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx2);font:15px/1.5 var(--body);}
body{min-height:100dvh;overscroll-behavior-y:none}
[hidden]{display:none!important}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
svg:not(.leaflet-zoom-animated){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a{color:var(--green)}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + var(--st)) 16px 10px;background:rgba(2,7,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:40px;width:auto}
.brand span{font:900 18px var(--head);letter-spacing:3px;color:var(--green)}
.top-r{display:flex;gap:8px;align-items:center}
.pill{font:700 9px var(--head);letter-spacing:1.2px;text-transform:uppercase;padding:6px 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.pill.on{color:var(--green);border-color:rgba(28,255,107,.35)}
.pill.off{color:#02070f;background:var(--orange);border-color:var(--orange)}
.pill-btn{background:var(--green);color:#02070f;border-color:var(--green)}
.top-sub{justify-content:flex-start}
.top-title{flex:1;font:700 11px var(--head);letter-spacing:2px;color:var(--mut);text-transform:uppercase}
.back{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--tx);background:var(--card)}

.hint{position:relative;margin:12px 16px 0;padding:12px 38px 12px 14px;border-radius:14px;background:var(--card2);border:1px solid var(--line);font-size:13.5px;color:var(--tx2)}
.hint b{color:var(--tx)}
.hint-x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:22px;color:var(--mut)}
.ico-share{display:inline-block;width:14px;height:16px;vertical-align:-2px;border:2px solid var(--blue);border-top:0;border-radius:0 0 3px 3px;position:relative}
.ico-share::before{content:'';position:absolute;left:3px;top:-7px;width:2px;height:11px;background:var(--blue)}

/* ---------- filtros ---------- */
.filters{padding:14px 16px 4px;display:grid;gap:10px}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 12px}
.search svg{width:18px;height:18px;color:var(--mut)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:12px 0;font-size:16px;color:var(--tx)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip,.tog{flex:none;padding:8px 13px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--tx2);font-size:13px;white-space:nowrap}
.chip.act,.tog.act{background:var(--green);color:#02070f;border-color:var(--green);font-weight:700}
.row-f{display:flex;gap:8px;flex-wrap:wrap}
.row-f select{flex:1 1 130px;min-width:0;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--tx2)}
.count{margin:6px 16px 0;font:700 9px var(--head);letter-spacing:1.5px;color:var(--mut2);text-transform:uppercase}

/* ---------- lista ---------- */
.list{list-style:none;margin:8px 0 0;padding:0 16px calc(24px + var(--sb));display:grid;gap:10px}
.card{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;color:inherit;position:relative}
.card:active{background:var(--card2)}
.card.dim{opacity:.45}
.c-meta{display:flex;gap:6px;align-items:center;font:700 8.5px var(--head);letter-spacing:1.3px;text-transform:uppercase;color:var(--mut)}
.c-meta .isla{color:var(--green)}
.c-name{margin:6px 0 8px;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--tx);padding-right:26px}
.c-row{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.c-row b{color:var(--tx2);font-weight:500}
.c-ok{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.c-ok svg{width:14px;height:14px;stroke:#02070f;stroke-width:3}
.dif{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.dif-Fácil{background:#1cff6b}.dif-Media{background:#ffc400}.dif-Difícil{background:#ff6f00}.dif-Extrema{background:#ff3b4e}
.storage{margin:0 16px calc(28px + var(--sb));font-size:12px;color:var(--mut2);text-align:center}
.empty{padding:30px 10px;text-align:center;color:var(--mut)}

/* ---------- detalle ---------- */
.d-map{height:42vh;min-height:240px;background:#0a1320}
.d-body{padding:16px 16px calc(32px + var(--sb))}
.d-meta{margin:0;font:700 9px var(--head);letter-spacing:1.5px;text-transform:uppercase;color:var(--green)}
.d-name{margin:6px 0 14px;font:700 clamp(17px,5vw,22px)/1.3 var(--head);letter-spacing:.5px;color:var(--tx)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.stat b{display:block;font:700 15px var(--head);color:var(--orange)}
.stat span{font-size:11px;color:var(--mut)}
.dlbox{margin-bottom:12px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:14px;border:0;
  font:700 11px var(--head);letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;text-align:center}
.btn svg{width:18px;height:18px}
.btn-main{background:var(--green);color:#02070f}
.btn-main svg{fill:#02070f;stroke:none}
.btn-main:active{background:var(--green2)}
.btn-dl{background:rgba(28,255,107,.1);color:var(--green);border:1px solid rgba(28,255,107,.35)}
.btn-out{background:transparent;color:var(--tx2);border:1px solid var(--line)}
.btn[disabled]{opacity:.5}
.dl-ok{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(28,255,107,.08);border:1px solid rgba(28,255,107,.3);font-size:13.5px;color:var(--tx2)}
.dl-ok b{color:var(--green)}
.dl-ok button{margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--mut)}
.dl-note{margin:8px 2px 0;font-size:12.5px;color:var(--mut)}
.dl-warn{color:var(--orange)}
.bar{height:8px;border-radius:9px;background:var(--card2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:0;background:var(--green);transition:width .2s}
.rev{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:13px;color:var(--mut)}
.rev input{accent-color:var(--green);width:18px;height:18px}
.h2{margin:22px 0 8px;font:700 10px var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--green)}
.prof{display:block;width:100%;height:130px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.d-desc{margin:18px 0;color:var(--tx2);line-height:1.75}
.d-links{display:grid;gap:8px}
.legal{margin-top:18px;font-size:11.5px;color:var(--mut2)}
.legal a{color:var(--mut)}

/* ---------- navegación ---------- */
#v-nav{position:fixed;inset:0;z-index:50;background:#0a1320}
.n-map{position:absolute;inset:0}
.n-top{position:absolute;z-index:500;top:calc(10px + var(--st));left:10px;right:10px;display:flex;gap:8px;align-items:flex-start}
.rbtn{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
  background:rgba(2,7,15,.9);color:var(--tx);box-shadow:0 4px 14px rgba(0,0,0,.35);text-decoration:none}
.rbtn.act{color:var(--green);border-color:rgba(28,255,107,.5)}
.sos{font:900 11px var(--head);color:#fff;background:var(--red);border-color:var(--red)}
.banner{flex:1;min-width:0;min-height:46px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;
  background:rgba(2,7,15,.9);border:1px solid var(--line);color:var(--tx);font-size:13.5px;line-height:1.3;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.banner .arr{flex:none;width:30px;height:30px;display:grid;place-items:center}
.banner .arr svg{width:28px;height:28px;stroke-width:2.6}
.banner b{display:block;font:700 11px var(--head);letter-spacing:1px}
.banner.ok b{color:var(--green)}
.banner.go b{color:var(--blue)}
.banner.off{background:var(--red);border-color:var(--red);color:#fff;animation:pulse 1.2s ease-in-out infinite}
.banner.off b{color:#fff}
.banner.end{background:var(--green);color:#02070f;border-color:var(--green)}
.banner.end b{color:#02070f}
.banner.weak b{color:var(--orange)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,59,78,.35)}}
.n-side{position:absolute;z-index:500;right:10px;bottom:calc(206px + var(--sb));display:grid;gap:8px}
.sheet{position:absolute;z-index:500;left:0;right:0;bottom:0;padding:12px 14px calc(10px + var(--sb));background:rgba(2,7,15,.95);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0}
.n-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.n-stats b{display:block;font:700 17px var(--head);color:var(--tx)}
.n-stats span{font-size:10.5px;color:var(--mut)}
.prof-sm{height:70px;margin-top:10px}
.n-gps{margin:8px 0 0;font-size:11.5px;color:var(--mut);text-align:center}
.coords{position:absolute;z-index:600;left:10px;right:10px;top:calc(64px + var(--st));padding:16px;border-radius:16px;background:var(--card2);
  border:1px solid rgba(255,59,78,.5);color:var(--tx);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.coords h3{margin:0 0 6px;font:700 11px var(--head);letter-spacing:1.5px;color:var(--red)}
.coords .cv{font:700 16px ui-monospace,Menlo,monospace;color:var(--tx);margin:6px 0 12px;user-select:all}
.coords .btn{margin-top:8px}
.btn-red{background:var(--red);color:#fff}

/* marcadores */
.me{width:22px;height:22px;position:relative}
.me i{position:absolute;inset:3px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4)}
.me s{position:absolute;left:50%;top:50%;width:0;height:0;margin:-30px 0 0 -9px;border:9px solid transparent;border-bottom:24px solid rgba(45,140,255,.55);
  transform-origin:9px 30px;display:none}
.me.dir s{display:block}
.pin{width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.pin-s{background:var(--green)}.pin-e{background:var(--red)}

.toast{position:fixed;z-index:900;left:50%;bottom:calc(24px + var(--sb));transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 16px;
  border-radius:14px;background:var(--card2);border:1px solid var(--line);color:var(--tx);font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#v-nav:not([hidden]) ~ .toast{bottom:calc(220px + var(--sb))}

.leaflet-container{background:#0a1320;font-family:var(--body)}
.leaflet-control-attribution{font-size:9px!important;background:rgba(255,255,255,.7)!important}
.leaflet-bar a{background:rgba(2,7,15,.9);color:var(--tx);border-color:var(--line)}