/* Mismo sistema que el mapa de pistas impreso: papel cálido, tinta, y el color
   reservado para el grado de la pista. Nada más lleva color. */
:root{
  --papel:#f2ead9; --papel2:#f8f2e5; --tinta:#23201c; --suave:#6f6558;
  --linea:#ddd0b6; --linea2:#cbbfa6;
  --verde:#2f7d4d; --azul:#2a6ba8; --rojo:#bd3b28; --negro:#2b2622; --travesia:#8a3ea8;
  --tipo:"Avenir Next","Helvetica Neue",-apple-system,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font:16px/1.5 var(--tipo);
  padding:0 clamp(16px,3vw,42px) 40px}

header{padding:clamp(26px,4vw,46px) 0 20px;border-bottom:3px solid var(--tinta);
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
h1{font-size:clamp(30px,5.2vw,52px);line-height:.94;letter-spacing:-1.4px;font-weight:800;
  text-transform:uppercase}
h1 em{display:block;font:400 clamp(11px,1.3vw,15px)/1.4 var(--tipo);letter-spacing:4.6px;
  font-style:normal;margin-top:11px;color:var(--suave);text-transform:uppercase}
.entrada{max-width:38ch;font-size:14px;color:var(--suave);line-height:1.55}

main{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(330px,.85fr);
  gap:clamp(20px,2.6vw,36px);align-items:start;margin-top:24px}

/* ---------- mapa ---------- */
#lienzo{position:sticky;top:18px;background:#e7dcc6;border:1px solid var(--linea2);
  border-radius:6px;overflow:hidden;aspect-ratio:4/3.05}
#mapa{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#mapa.arrastra{cursor:grabbing}
#mapa .fondo{opacity:.96}
#mapa .red{fill:none;stroke:#5d5346;stroke-width:1;opacity:.3;vector-effect:non-scaling-stroke}
#mapa .halo{fill:none;stroke:#fbf6ec;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
#mapa .via{fill:none;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;
  vector-effect:non-scaling-stroke;transition:opacity .18s}
#mapa .via.apagada,#mapa .halo.apagada{opacity:.13}
#mapa text{paint-order:stroke;stroke:var(--papel);stroke-width:5px;stroke-linejoin:round}
#mapa .rotBase{font:600 12.5px var(--tipo);fill:var(--tinta)}
#mapa .rotAncla{font:700 10.5px var(--tipo);letter-spacing:2.1px;fill:#6b512b}
#mapa .rotSector{font:700 14px var(--tipo);letter-spacing:4.4px;fill:#3a342c;text-anchor:middle}
#mapa .num{font:700 14px var(--tipo);fill:#fff;stroke:none;text-anchor:middle;
  pointer-events:none}
#mapa .km{font:700 12px var(--tipo);stroke:none;text-anchor:middle;pointer-events:none}

#leyenda{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}
#leyenda button{display:flex;align-items:center;gap:7px;background:rgba(248,242,229,.92);
  border:1px solid var(--linea);border-radius:7px;padding:6px 10px;font:600 12px var(--tipo);
  color:var(--tinta);cursor:pointer;backdrop-filter:blur(3px)}
#leyenda button em{font-style:normal;color:var(--suave);font-weight:400;font-size:11px}
#leyenda button i{width:16px;height:5px;border-radius:3px;flex:none}
#leyenda .verde i{background:var(--verde)} #leyenda .azul i{background:var(--azul)}
#leyenda .rojo i{background:var(--rojo)} #leyenda .negro i{background:var(--negro)}
#leyenda button.off{opacity:.42}
#reencuadra{position:absolute;right:12px;top:12px;background:rgba(248,242,229,.94);
  border:1px solid var(--linea);border-radius:7px;padding:7px 12px;font:600 12.5px var(--tipo);
  cursor:pointer;color:var(--tinta)}

/* ---------- panel ---------- */
#filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
#filtros button{background:none;border:1px solid var(--linea2);border-radius:20px;
  padding:7px 14px;font:600 13px var(--tipo);color:var(--suave);cursor:pointer}
#filtros button.on{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

.grupo{font:700 10.5px var(--tipo);letter-spacing:3.4px;text-transform:uppercase;
  color:var(--suave);border-top:1px solid var(--linea2);padding:14px 0 9px;margin-top:6px}
.grupo:first-child{border-top:none;margin-top:0;padding-top:0}

.tarjeta{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;
  width:100%;text-align:left;background:var(--papel2);border:1px solid var(--linea);
  border-radius:10px;padding:11px 13px;margin-bottom:8px;cursor:pointer;
  font:inherit;color:inherit;transition:border-color .15s,transform .12s}
.tarjeta:hover,.tarjeta.activa{border-color:var(--tinta)}
.tarjeta.activa{background:#fff}
.tarjeta .disco{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:13.5px}
.tarjeta .disco.sinnum{font-size:15px}
.tarjeta b{display:block;font-size:16px;letter-spacing:-.2px;line-height:1.25}
.tarjeta small{display:block;color:var(--suave);font-size:12px;margin-top:2px}
.tarjeta .cifra{text-align:right;font-size:12px;color:var(--suave);white-space:nowrap}
.tarjeta .cifra b{font-size:17px;color:var(--tinta);letter-spacing:-.4px}
.tarjeta.oculta{display:none}

/* ---------- detalle ---------- */
#detalle{position:fixed;right:0;top:0;bottom:0;width:min(430px,92vw);background:var(--papel2);
  border-left:1px solid var(--linea2);box-shadow:-14px 0 40px rgba(35,32,28,.14);
  padding:26px 24px 34px;overflow-y:auto;z-index:20;animation:entra .22s ease}
@keyframes entra{from{transform:translateX(28px);opacity:0}}
#cierra{position:absolute;right:16px;top:14px;background:none;border:none;font-size:19px;
  color:var(--suave);cursor:pointer;line-height:1}
#detalle h2{font-size:27px;letter-spacing:-.8px;line-height:1.08;padding-right:26px}
#detalle .grado{display:inline-flex;align-items:center;gap:7px;margin:12px 0 4px;
  font:700 11px var(--tipo);letter-spacing:2.4px;text-transform:uppercase}
#detalle .grado i{width:26px;height:7px;border-radius:4px}
#detalle .gancho{color:var(--suave);font-size:14px;line-height:1.6;margin:10px 0 18px}
#detalle .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  border-top:2px solid var(--tinta);border-bottom:1px solid var(--linea2);padding:13px 0}
#detalle .datos b{display:block;font-size:23px;letter-spacing:-.8px;line-height:1}
#detalle .datos span{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--suave)}
#detalle h3{font:700 10.5px var(--tipo);letter-spacing:3.2px;text-transform:uppercase;
  color:var(--suave);margin:20px 0 8px}
#detalle .perfil{width:100%;height:110px;display:block;background:#ece2ce;border-radius:6px}
#detalle .senderos{font-size:14px;line-height:1.75}
#detalle .senderos b{font-weight:600}
#detalle .baja{display:inline-block;margin-top:18px;background:var(--tinta);color:var(--papel);
  text-decoration:none;border-radius:8px;padding:11px 17px;font:600 14px var(--tipo)}
#detalle .pie{font-size:12.5px;color:var(--suave);line-height:1.6;margin-top:16px;
  border-top:1px solid var(--linea2);padding-top:12px}

footer{margin-top:34px;border-top:1px solid var(--linea2);padding-top:14px;
  font-size:11.5px;letter-spacing:.4px;color:#a2988a;max-width:70ch}

@media (max-width:900px){
  main{grid-template-columns:1fr}
  #lienzo{position:relative;top:0}
  #detalle{width:100%;border-left:none}
  header{padding-bottom:16px}
}