/* TrailLab v386 · iconografía premium y jerarquía visual.
   Sustituye emojis funcionales por la familia SVG de TrailLab, libera la
   navegación rápida de El Refugio y convierte PRO en la pieza comercial. */

/* El acceso a grabar sigue siendo importante, pero no parece seleccionado
   permanentemente. La selección real continúa perteneciendo a la vista activa. */
html body aside.left>.nav-item.tl-activity-v381{
  border-color:rgba(72,199,171,.34)!important;
  background:linear-gradient(135deg,rgba(49,214,179,.10),rgba(166,232,44,.055))!important;
  color:#dcece7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 7px 19px rgba(0,0,0,.13)!important;
}
html body aside.left>.nav-item.tl-activity-v381>.ic{color:#67dec3!important}
html body aside.left>.nav-item.tl-activity-v381:hover,
html body aside.left>.nav-item.tl-activity-v381:focus-visible{
  border-color:rgba(166,232,44,.62)!important;
  background:linear-gradient(135deg,rgba(166,232,44,.18),rgba(49,214,179,.10))!important;
  color:#efffd0!important;
}
html body aside.left>.nav-item.tl-activity-v381.active,
html body aside.left>.nav-item.tl-activity-v381[aria-current="page"]{
  border-color:#baff35!important;
  background:linear-gradient(135deg,#baff35,#6ee7a8)!important;
  color:#0b2117!important;
  box-shadow:0 0 0 1px rgba(186,255,53,.16),0 10px 26px rgba(121,214,62,.23)!important;
}
html body aside.left>.nav-item.tl-activity-v381.active>.ic,
html body aside.left>.nav-item.tl-activity-v381[aria-current="page"]>.ic{color:#0b2117!important}

html[data-theme="light"] body aside.left>.nav-item.tl-activity-v381{
  border-color:rgba(20,128,108,.27)!important;
  background:linear-gradient(135deg,rgba(22,151,126,.08),rgba(131,193,35,.06))!important;
  color:#24443b!important;
}
html[data-theme="light"] body aside.left>.nav-item.tl-activity-v381>.ic{color:#167e6b!important}

/* Los accesos de El Refugio se desplazan con el contenido: ya no se quedan
   congelados ni tapan la ficha del club. */
html body .achv-qnav{
  position:relative!important;top:auto!important;z-index:1!important;
  padding:10px!important;margin:12px 0 16px!important;
  background:linear-gradient(135deg,rgba(17,48,49,.86),rgba(7,28,33,.82))!important;
  border-color:rgba(75,201,172,.27)!important;
  backdrop-filter:none!important;
}
html body .achv-qbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:35px;padding:8px 13px!important;
  border-color:rgba(87,203,177,.34)!important;
  background:linear-gradient(145deg,rgba(49,214,179,.09),rgba(255,255,255,.025))!important;
  color:#e3f2ed!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
html body .achv-qbtn .tl-icon{width:16px;height:16px;color:#74e5ca}
html body .achv-qbtn:hover,
html body .achv-qbtn:focus-visible{
  transform:translateY(-1px);
  border-color:#a6e82c!important;
  background:linear-gradient(135deg,rgba(166,232,44,.19),rgba(49,214,179,.11))!important;
  color:#efffd3!important;
}
html body .achv-qbtn:hover .tl-icon{color:#baff35}

/* Panel derecho: títulos y métricas usan una sola familia de iconos. */
html body aside.right .w-title>.tl-icon{
  width:18px;height:18px;padding:4px;box-sizing:content-box;
  border:1px solid rgba(82,207,177,.3);border-radius:8px;
  background:linear-gradient(145deg,rgba(49,214,179,.13),rgba(166,232,44,.06));
  color:#79e8cc;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
html body aside.right .widget-label{display:inline-flex;align-items:center;gap:7px;min-width:0}
html body aside.right .widget-label>.tl-icon{width:15px;height:15px;color:#a6e82c;stroke-width:2}
html body aside.right .race-links a{
  display:inline-flex;align-items:center;justify-content:center;gap:5px
}
html body aside.right .race-links a>.tl-icon{width:13px;height:13px;color:#48d8bd}
html body aside.right .race-links a.wk>.tl-icon{color:#efffd0}

/* La barra comercial es ahora una llamada visible, no una utilidad secundaria. */
@media (min-width:1101px){
  html body .topbar>.tb-pro-promo-v385{
    position:relative;isolation:isolate;overflow:hidden;
    min-width:300px;min-height:38px;padding:7px 15px 7px 12px;
    border:1px solid rgba(222,255,137,.82);border-radius:12px;
    background:linear-gradient(105deg,#baff35 0%,#94ec4b 46%,#42d7b8 100%);
    color:#0a2418;
    box-shadow:0 0 0 1px rgba(166,232,44,.12),0 10px 28px rgba(70,209,144,.26),inset 0 1px 0 rgba(255,255,255,.45);
  }
  html body .topbar>.tb-pro-promo-v385::after{
    content:"";position:absolute;z-index:-1;inset:-40% auto -40% -34%;width:34%;
    transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transition:left .42s ease;
  }
  html body .topbar>.tb-pro-promo-v385:hover::after{left:112%}
  html body .topbar>.tb-pro-promo-v385:hover{
    transform:translateY(-1px) scale(1.012);border-color:#efffbe;
    background:linear-gradient(105deg,#c8ff55 0%,#a7f35c 46%,#55e2c5 100%);
    box-shadow:0 0 0 1px rgba(186,255,53,.19),0 13px 34px rgba(70,209,144,.34),inset 0 1px 0 rgba(255,255,255,.55);
  }
  .tb-pro-promo-v385 .tl-icon{width:19px;height:19px;color:#173714!important;stroke-width:2.2}
  .tb-pro-copy-v385{gap:10px}
  .tb-pro-copy-v385 strong{font-size:var(--tl-type-kicker, 12px);letter-spacing:.09em}
  .tb-pro-copy-v385 small{color:#28583f!important;font-size:var(--tl-type-kicker, 12px)}
  .tb-pro-arrow-v385{margin-left:auto;color:#173714!important;font-size:var(--tl-type-card-title, 16px);font-weight:900}
}

html[data-theme="light"] body .achv-qnav{
  background:linear-gradient(135deg,rgba(239,250,246,.96),rgba(249,253,251,.96))!important
}
html[data-theme="light"] body .achv-qbtn{color:#24463d!important}
html[data-theme="light"] body aside.right .w-title>.tl-icon{color:#167e6b}

/* Tour legible: la guía puede oscurecer, pero nunca desenfocar la interfaz que
   está explicando. El marco conserva el foco sin alterar el contenido real. */
html body #tourDim.on{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:transparent!important;
}
html body #tourDim.on.full{background:rgba(2,12,15,.64)!important}
html body #tourSpot.on{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:transparent!important;
  box-shadow:0 0 0 3px rgba(166,232,44,.28),0 0 30px rgba(106,220,116,.32),0 0 0 9999px rgba(2,12,15,.54)!important;
}

@media (prefers-reduced-motion:reduce){
  .tb-pro-promo-v385::after{display:none!important}
  .tb-pro-promo-v385,.achv-qbtn{transition:none!important}
}