/* V124.13 · Ranking con recursos graficos premium.
   Solo #rankingHub. Los PNG/WebP rosados se recolorean en runtime al --primario de la cuenta.
   El contenido (nombres, fotos, porcentajes, Top 10) sigue siendo HTML/datos reales. */
#rankingHub{
  --ranking-gold:#f4b83a;
  --ranking-silver:#aeb7c5;
  --ranking-bronze:#c77a55;
}
#rankingHub #listaRankingNacional{
  overflow:hidden!important;
  border-radius:24px!important;
  background:var(--card)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.08)!important;
}
#rankingHub .ranking-podio{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
#rankingHub .ranking-premium-confetti,
#rankingHub .ranking-premium-podium-art,
#rankingHub .ranking-premium-crown,
#rankingHub .ranking-premium-frame{
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
#rankingHub .ranking-premium-confetti{
  position:absolute!important;
  z-index:0!important;
  inset:3px 0 auto!important;
  width:100%!important;
  height:78%!important;
  object-fit:cover!important;
  object-position:center top!important;
  opacity:.58!important;
}
#rankingHub .ranking-podio.ranking-podio-con-assets{
  display:block!important;
  min-height:330px!important;
  padding:0!important;
  background:
    radial-gradient(circle at 50% 9%,color-mix(in srgb,var(--primario) 7%,transparent),transparent 32%),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 2.5%,var(--card)),var(--card) 84%)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-premium-podium-art{
  position:absolute!important;
  z-index:1!important;
  left:50%!important;
  bottom:-68px!important;
  width:min(100%,760px)!important;
  height:auto!important;
  transform:translateX(-50%)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 13px 18px rgba(15,23,42,.08));
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto{
  position:static!important;
  display:block!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-bloque{
  display:none!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-persona{
  position:absolute!important;
  z-index:4!important;
  display:flex!important;
  min-width:0!important;
  min-height:0!important;
  width:33.3333%!important;
  box-sizing:border-box!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 6px!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-persona{
  left:33.3333%!important;
  top:19px!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-podio-persona{
  left:0!important;
  top:88px!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-podio-persona{
  left:66.6666%!important;
  top:100px!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-persona::before{
  content:none!important;
  display:none!important;
}
#rankingHub .ranking-premium-crown{
  position:absolute!important;
  z-index:7!important;
  top:-34px!important;
  left:50%!important;
  width:52px!important;
  height:52px!important;
  transform:translateX(-50%)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 7px rgba(170,111,13,.16));
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar{
  position:relative!important;
  z-index:5!important;
  width:88px!important;
  height:88px!important;
  overflow:visible!important;
  border:0!important;
  outline:0!important;
  background:color-mix(in srgb,var(--primario) 5%,var(--card))!important;
  box-shadow:0 9px 22px color-mix(in srgb,var(--primario) 18%,transparent)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar>img:not(.ranking-premium-frame){
  position:absolute!important;
  z-index:2!important;
  inset:4px!important;
  width:calc(100% - 8px)!important;
  height:calc(100% - 8px)!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar>.ranking-avatar-fallback{
  position:relative!important;
  z-index:1!important;
}
#rankingHub .ranking-premium-frame{
  position:absolute!important;
  z-index:6!important;
  left:50%!important;
  top:50%!important;
  width:116px!important;
  height:116px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:0!important;
  object-fit:contain!important;
  background:transparent!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-avatar{
  width:64px!important;
  height:64px!important;
  border:4px solid var(--card)!important;
  outline:2px solid #b5beca!important;
  box-shadow:0 8px 18px rgba(103,116,134,.15)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar{
  width:64px!important;
  height:64px!important;
  border:4px solid var(--card)!important;
  outline:2px solid #c27a57!important;
  box-shadow:0 8px 18px rgba(147,84,52,.14)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-nombre{
  max-width:100%!important;
  margin-top:9px!important;
  color:var(--text)!important;
  font-size:.82rem!important;
  font-weight:950!important;
  line-height:1.15!important;
  text-shadow:0 1px 0 var(--card)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-nombre{
  margin-top:10px!important;
  font-size:.94rem!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puntos{
  min-width:50px!important;
  margin-top:6px!important;
  padding:5px 10px!important;
  border:1px solid color-mix(in srgb,var(--primario) 12%,var(--borde))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--card) 96%,transparent)!important;
  color:var(--textoAcento)!important;
  box-shadow:0 5px 15px rgba(15,23,42,.06)!important;
  font-size:.78rem!important;
  backdrop-filter:blur(8px);
}
#rankingHub .ranking-podio-con-assets .ranking-marca-yo{
  margin-top:4px!important;
  background:color-mix(in srgb,var(--primario) 12%,var(--card))!important;
  color:var(--textoAcento)!important;
  border-color:color-mix(in srgb,var(--primario) 18%,var(--borde))!important;
}
#rankingHub .ranking-rack{
  position:relative!important;
  z-index:5!important;
  padding:5px 18px 10px!important;
  background:var(--card)!important;
}
#rankingHub .ranking-rack-fila{
  min-height:66px!important;
  padding:9px 3px!important;
  border-bottom:1px solid color-mix(in srgb,var(--borde) 52%,transparent)!important;
}
#rankingHub .ranking-rack-fila:last-child{border-bottom:0!important}
#rankingHub .ranking-rack-posicion{font-size:.94rem!important}
#rankingHub .ranking-rack-nombre{font-size:.9rem!important}
#rankingHub .ranking-rack-puntos{
  min-width:52px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--primario) 8%,var(--card))!important;
  color:var(--textoAcento)!important;
}
html[data-theme="dark"] #rankingHub .ranking-podio.ranking-podio-con-assets{
  background:
    radial-gradient(circle at 50% 9%,color-mix(in srgb,var(--primario) 12%,transparent),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 4%,var(--card)),var(--card) 84%)!important;
}
html[data-theme="dark"] #rankingHub .ranking-premium-confetti{opacity:.46!important}
html[data-theme="dark"] #rankingHub .ranking-premium-podium-art{filter:drop-shadow(0 15px 21px rgba(0,0,0,.18))}

@media(max-width:520px){
  #rankingHub .ranking-podio.ranking-podio-con-assets{min-height:302px!important}
  #rankingHub .ranking-podio-con-assets .ranking-premium-podium-art{bottom:-59px!important;width:104%!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-persona{top:16px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-podio-persona{top:77px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-podio-persona{top:87px!important}
  #rankingHub .ranking-premium-crown{top:-29px!important;width:46px!important;height:46px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar{width:78px!important;height:78px!important}
  #rankingHub .ranking-premium-frame{width:104px!important;height:104px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar{width:58px!important;height:58px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-nombre{font-size:.74rem!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.83rem!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puntos{min-width:45px!important;padding:4px 8px!important;font-size:.7rem!important}
  #rankingHub .ranking-rack{padding-inline:10px!important}
  #rankingHub .ranking-rack-fila{min-height:61px!important}
}
@media(max-width:380px){
  #rankingHub .ranking-podio.ranking-podio-con-assets{min-height:286px!important}
  #rankingHub .ranking-podio-con-assets .ranking-premium-podium-art{bottom:-52px!important;width:108%!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-persona{top:15px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-podio-persona{top:72px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-podio-persona{top:81px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar{width:72px!important;height:72px!important}
  #rankingHub .ranking-premium-frame{width:96px!important;height:96px!important}
  #rankingHub .ranking-premium-crown{top:-27px!important;width:43px!important;height:43px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar{width:54px!important;height:54px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-nombre{font-size:.69rem!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.78rem!important}
}
@media(prefers-reduced-motion:reduce){
  #rankingHub .ranking-premium-confetti{display:none!important}
}