/* TrailLab v271 · progresión que se mueve, nodos que explican de dónde salen, e icono nuevo.
   Archivo nuevo (misma razón que en v268–v270: los estáticos van cache-first y los nombres
   existentes no cambian entre versiones — deuda documentada en v253). */

/* ------------------------------------------------ nodos de progresión */
/* El nodo pasa de ser un `div` a un `button`: hay que devolverle el aspecto, porque el navegador
   le pone fondo, borde y fuente propios. */
.prog-node{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.prog-node:hover .prog-circ{ transform:scale(1.06); }
.prog-node:focus-visible{ outline:2px solid var(--lime, #a6e82c); outline-offset:4px; border-radius:10px; }
.prog-circ{ position:relative; transition:transform .15s ease; }

/* El anillo va por detrás del icono y marca el progreso REAL, sin redondear al escalón. Es lo que
   arregla el «casi no se mueve»: entre 41 y 58 puntos el escalón no cambia, pero el anillo sí. */
.prog-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.prog-pct{
  font-size:.7rem;
  font-weight:700;
  color:var(--bc, var(--lime, #a6e82c));
  letter-spacing:.02em;
  margin-top:1px;
}
.prog-node.off .prog-pct{ opacity:.75; }

/* ------------------------------------------------ ficha del nodo */
.prog-info-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0 6px;
}
.prog-info-tiles > div{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 6px;
  text-align:center;
}
.prog-info-tiles b{ display:block; font-size:1.15rem; line-height:1.2; }
.prog-info-tiles span{ font-size:.72rem; color:var(--muted); }

/* ------------------------------------------------ icono de la cabecera */
.trail-runner-mark .ridge-back{
  fill:var(--tl-teal, #35c4e0);
  opacity:.14;
  stroke:none;
}
.trail-runner-mark .ridge-front{
  fill:var(--tl-teal, #35c4e0);
  opacity:.24;
  stroke:none;
}
.trail-runner-mark .runner-ground{
  fill:none;
  stroke:var(--tl-gold, #f2c14e);
  stroke-width:2.5;
  stroke-linecap:round;
  opacity:.5;
}