/* V124.11 · Ranking Nacional inspirado en referencia visual.
   Alcance exclusivo: #rankingHub. No modifica tipografia global, navegacion ni otros modulos.
   Todo acento equivalente al rosa de la referencia usa el color de cuenta (var(--primario)).
   #2 conserva plata y #3 conserva bronce. */

#rankingHub{
  --ranking-silver:#aeb7c5;
  --ranking-silver-dark:#798595;
  --ranking-bronze:#c77a55;
  --ranking-bronze-dark:#9d5537;
  --ranking-gold:#f3b42f;
  --ranking-gold-dark:#c8810a;
}

#rankingHub .ranking-perfil-compacto{
  width:min(100%,780px)!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
}

#rankingHub .ranking-cabecera{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:0 0 14px!important;
  padding:2px 1px 0!important;
  border:0!important;
}
#rankingHub .ranking-cabecera>div:first-child{min-width:0;padding-top:5px}
#rankingHub .ranking-cabecera b{
  color:var(--text)!important;
  font-size:clamp(1.55rem,5vw,2.05rem)!important;
  font-weight:950!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
}
#rankingHub .ranking-actualizar{
  flex:0 0 auto!important;
  width:68px!important;
  min-width:68px!important;
  height:68px!important;
  min-height:68px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:7px 5px!important;
  border:1px solid color-mix(in srgb,var(--primario) 11%,var(--borde))!important;
  border-radius:19px!important;
  background:var(--card)!important;
  color:var(--text)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.08)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  line-height:1!important;
}
#rankingHub .ranking-actualizar .solar-slot{
  width:26px!important;
  height:26px!important;
  color:var(--textoAcento)!important;
}
#rankingHub .ranking-actualizar:active{transform:scale(.98)!important}

#rankingHub .ranking-filtros{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 14px;
}
#rankingHub .ranking-scope,
#rankingHub .ranking-top10-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  box-sizing:border-box;
  border-radius:999px;
  font-weight:900;
  white-space:nowrap;
}
#rankingHub .ranking-scope{
  padding:8px 15px;
  border:1px solid color-mix(in srgb,var(--primario) 28%,var(--borde));
  background:var(--primario);
  color:var(--sobrePrimario);
  box-shadow:0 6px 18px color-mix(in srgb,var(--primario) 18%,transparent);
}
#rankingHub .ranking-scope .solar-slot{width:18px;height:18px;color:currentColor!important}
#rankingHub .ranking-top10-chip{
  padding:8px 14px;
  border:1px solid color-mix(in srgb,var(--primario) 12%,var(--borde));
  background:color-mix(in srgb,var(--primario) 4%,var(--card));
  color:var(--textoAcento);
  font-size:.76rem;
}
#rankingHub .ranking-top10-chip .solar-slot{width:17px;height:17px;color:currentColor!important}

/* Resumen grande: todo lo que en la referencia es rosa adopta el acento de la cuenta. */
#rankingHub .ranking-resumen{
  position:relative!important;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:88px auto 1px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:15px!important;
  min-height:126px!important;
  box-sizing:border-box!important;
  margin:0 0 16px!important;
  padding:18px 22px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--primario) 74%,transparent)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.21),transparent 28%),
    linear-gradient(120deg,var(--primario),var(--primario2))!important;
  color:var(--sobrePrimario)!important;
  box-shadow:0 14px 32px color-mix(in srgb,var(--primario) 26%,transparent)!important;
}
#rankingHub .ranking-resumen::before{
  content:"★"!important;
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  grid-column:1!important;
  grid-row:1 / span 2!important;
  display:grid!important;
  place-items:center!important;
  width:72px!important;
  height:72px!important;
  border:10px solid rgba(255,255,255,.14)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.88)!important;
  color:var(--primario)!important;
  box-shadow:0 0 0 9px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.72)!important;
  font-size:28px!important;
  line-height:1!important;
}
#rankingHub .ranking-perfil-compacto .ranking-resumen::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  display:block!important;
  width:170px!important;
  height:170px!important;
  right:-48px!important;
  top:-78px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:-92px 144px 0 -48px rgba(255,255,255,.06)!important;
}
#rankingHub .ranking-resumen>small:first-of-type{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  margin:0 0 5px!important;
  color:var(--sobrePrimario)!important;
  opacity:.92!important;
  font-size:.76rem!important;
  font-weight:850!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#rankingHub .ranking-resumen #rankingMiPosicion{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  margin:0!important;
  color:var(--sobrePrimario)!important;
  font-size:clamp(2.6rem,9vw,3.55rem)!important;
  font-weight:950!important;
  line-height:.9!important;
  letter-spacing:-.065em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.08)!important;
}
#rankingHub .ranking-resumen .ranking-divider{
  grid-column:3;
  grid-row:1 / span 2;
  align-self:stretch;
  width:1px;
  min-height:68px;
  margin-block:7px;
  background:rgba(255,255,255,.35);
}
#rankingHub .ranking-total{
  grid-column:4;
  grid-row:1 / span 2;
  justify-self:start!important;
  margin:0!important;
  color:var(--sobrePrimario)!important;
  opacity:.96!important;
  font-size:clamp(.82rem,2.9vw,1rem)!important;
  font-weight:850!important;
  line-height:1.35!important;
  white-space:normal!important;
}
#rankingHub .ranking-total::before{content:"de ";}
#rankingHub .ranking-total::after{
  content:"Ranking nacional · Top 10";
  display:block;
  margin-top:5px;
  color:var(--sobrePrimario);
  opacity:.82;
  font-size:.72em;
  font-weight:750;
}

#rankingHub #listaRankingNacional{
  position:relative;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--primario) 8%,var(--borde))!important;
  border-radius:24px!important;
  background:var(--card)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
}

/* Podio 2-1-3 con confeti sutil. */
#rankingHub .ranking-podio{
  position:relative;
  isolation:isolate;
  min-height:296px!important;
  gap:8px!important;
  padding:42px 20px 0!important;
  overflow:hidden;
  border-bottom:1px solid color-mix(in srgb,var(--primario) 7%,var(--borde))!important;
  background:
    radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--primario) 58%,transparent) 0 3px,transparent 4px),
    radial-gradient(circle at 87% 24%,color-mix(in srgb,var(--primario) 42%,transparent) 0 3px,transparent 4px),
    radial-gradient(circle at 20% 58%,color-mix(in srgb,var(--primario) 34%,transparent) 0 2px,transparent 3px),
    radial-gradient(circle at 77% 56%,rgba(243,180,47,.55) 0 2px,transparent 3px),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 3%,var(--card)),var(--card) 76%)!important;
}
#rankingHub .ranking-podio-persona{
  position:relative;
  min-height:166px!important;
  padding:0 3px 12px!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-persona::before{
  content:"♛";
  position:absolute;
  z-index:4;
  top:-26px;
  left:50%;
  transform:translateX(-50%);
  color:var(--ranking-gold);
  font-size:29px;
  line-height:1;
  filter:drop-shadow(0 3px 4px rgba(200,129,10,.22));
}
#rankingHub .ranking-podio-puesto-1 .ranking-avatar{
  width:86px!important;
  height:86px!important;
  border:5px solid var(--card)!important;
  outline:3px solid var(--primario)!important;
  outline-offset:1px!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--primario) 18%,transparent)!important;
}
#rankingHub .ranking-podio-puesto-2 .ranking-avatar{
  width:66px!important;
  height:66px!important;
  border:4px solid var(--card)!important;
  outline:2px solid var(--ranking-silver)!important;
  box-shadow:0 7px 16px rgba(121,133,149,.16)!important;
}
#rankingHub .ranking-podio-puesto-3 .ranking-avatar{
  width:66px!important;
  height:66px!important;
  border:4px solid var(--card)!important;
  outline:2px solid var(--ranking-bronze)!important;
  box-shadow:0 7px 16px rgba(157,85,55,.14)!important;
}
#rankingHub .ranking-podio-nombre{
  margin-top:10px!important;
  color:var(--text)!important;
  font-size:.87rem!important;
  font-weight:950!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.96rem!important}
#rankingHub .ranking-marca-yo{
  background:color-mix(in srgb,var(--primario) 12%,var(--card))!important;
  color:var(--textoAcento)!important;
  border:1px solid color-mix(in srgb,var(--primario) 13%,transparent)!important;
}
#rankingHub .ranking-podio-puntos{
  min-width:52px!important;
  margin-top:7px!important;
  padding:5px 10px!important;
  border:1px solid color-mix(in srgb,var(--primario) 13%,var(--borde))!important;
  background:var(--card)!important;
  color:var(--textoAcento)!important;
  font-size:.79rem!important;
  box-shadow:0 4px 11px rgba(15,23,42,.045)!important;
}
#rankingHub .ranking-podio-bloque{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32)!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{
  min-height:116px!important;
  background:linear-gradient(160deg,color-mix(in srgb,var(--primario) 88%,white),var(--primario2))!important;
  color:var(--sobrePrimario)!important;
}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{
  min-height:86px!important;
  background:linear-gradient(160deg,#e8ebf0,var(--ranking-silver-dark))!important;
  color:#1d2630!important;
}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{
  min-height:72px!important;
  background:linear-gradient(160deg,#dda07f,var(--ranking-bronze-dark))!important;
  color:#fff!important;
}
#rankingHub .ranking-podio-numero{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  color:#28313c;
  box-shadow:0 5px 12px rgba(15,23,42,.15),inset 0 0 0 3px rgba(255,255,255,.5);
  font-size:1.35rem!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-numero{
  width:58px;
  height:58px;
  background:linear-gradient(145deg,#ffe79b,var(--ranking-gold));
  color:#8b5602;
  box-shadow:0 7px 15px rgba(200,129,10,.22),inset 0 0 0 4px rgba(255,255,255,.38);
  font-size:1.75rem!important;
}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-numero{background:linear-gradient(145deg,#f5f7fa,#c3cad4);color:#5c6776}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-numero{background:linear-gradient(145deg,#efbd9f,#bd6c49);color:#fff}

/* Puestos 4-10. */
#rankingHub .ranking-rack{
  padding:8px 18px 10px!important;
  background:var(--card)!important;
}
#rankingHub .ranking-rack-fila{
  grid-template-columns:34px 46px minmax(0,1fr) auto!important;
  gap:11px!important;
  min-height:68px!important;
  padding:9px 2px!important;
  border-bottom:1px solid color-mix(in srgb,var(--primario) 6%,var(--borde))!important;
}
#rankingHub .ranking-rack-fila .ranking-avatar{
  width:44px!important;
  height:44px!important;
  border-color:color-mix(in srgb,var(--primario) 17%,var(--borde))!important;
  background:color-mix(in srgb,var(--primario) 5%,var(--card))!important;
}
#rankingHub .ranking-rack-posicion{
  color:var(--text)!important;
  font-size:.96rem!important;
  font-weight:950!important;
}
#rankingHub .ranking-rack-nombre{
  font-size:.91rem!important;
  font-weight:900!important;
}
#rankingHub .ranking-rack-puntos{
  min-width:52px!important;
  padding:6px 9px!important;
  border:1px solid color-mix(in srgb,var(--primario) 7%,var(--borde));
  background:color-mix(in srgb,var(--primario) 8%,var(--card))!important;
  color:var(--textoAcento)!important;
  font-size:.82rem!important;
}
#rankingHub .ranking-rack-fila-yo{
  background:linear-gradient(90deg,color-mix(in srgb,var(--primario) 10%,var(--card)),color-mix(in srgb,var(--primario) 3%,var(--card)))!important;
}
#rankingHub .ranking-rack-fila-yo::before{background:var(--primario)!important}

html[data-theme="dark"] #rankingHub .ranking-actualizar,
html[data-theme="dark"] #rankingHub #listaRankingNacional{
  box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] #rankingHub .ranking-podio{
  background:
    radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--primario) 58%,transparent) 0 3px,transparent 4px),
    radial-gradient(circle at 87% 24%,color-mix(in srgb,var(--primario) 42%,transparent) 0 3px,transparent 4px),
    radial-gradient(circle at 20% 58%,color-mix(in srgb,var(--primario) 34%,transparent) 0 2px,transparent 3px),
    radial-gradient(circle at 77% 56%,rgba(243,180,47,.48) 0 2px,transparent 3px),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 8%,var(--card)),var(--card) 76%)!important;
}
html[data-theme="dark"] #rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{background:linear-gradient(160deg,#788392,#505b69)!important;color:#fff!important}
html[data-theme="dark"] #rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{background:linear-gradient(160deg,#a96446,#79402b)!important}

@media(max-width:520px){
  #rankingHub .ranking-cabecera{margin-bottom:12px!important}
  #rankingHub .ranking-cabecera b{font-size:1.55rem!important}
  #rankingHub .ranking-actualizar{width:62px!important;min-width:62px!important;height:62px!important;min-height:62px!important;border-radius:17px!important;font-size:.62rem!important}
  #rankingHub .ranking-actualizar .solar-slot{width:23px!important;height:23px!important}
  #rankingHub .ranking-filtros{margin-bottom:12px}
  #rankingHub .ranking-scope,#rankingHub .ranking-top10-chip{min-height:35px;padding:7px 12px;font-size:.72rem}
  #rankingHub .ranking-resumen{
    grid-template-columns:64px auto 1px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:100px!important;
    margin-bottom:13px!important;
    padding:14px 14px!important;
    border-radius:18px!important;
  }
  #rankingHub .ranking-resumen::before{width:50px!important;height:50px!important;border-width:7px!important;box-shadow:0 0 0 6px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.72)!important;font-size:21px!important}
  #rankingHub .ranking-resumen>small:first-of-type{margin-bottom:4px!important;font-size:.64rem!important}
  #rankingHub .ranking-resumen #rankingMiPosicion{margin:0!important;font-size:2.55rem!important}
  #rankingHub .ranking-total{font-size:.72rem!important}
  #rankingHub .ranking-total::after{font-size:.68em}
  #rankingHub #listaRankingNacional{border-radius:20px!important}
  #rankingHub .ranking-podio{min-height:250px!important;gap:5px!important;padding:34px 9px 0!important}
  #rankingHub .ranking-podio-persona{min-height:145px!important;padding-inline:1px!important;padding-bottom:9px!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-persona::before{top:-22px;font-size:26px}
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:72px!important;height:72px!important;border-width:4px!important}
  #rankingHub .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-3 .ranking-avatar{width:58px!important;height:58px!important;border-width:3px!important}
  #rankingHub .ranking-podio-nombre{font-size:.76rem!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.82rem!important}
  #rankingHub .ranking-podio-puntos{min-width:44px!important;margin-top:5px!important;padding:4px 7px!important;font-size:.7rem!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{min-height:94px!important}
  #rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{min-height:72px!important}
  #rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{min-height:61px!important}
  #rankingHub .ranking-podio-numero{width:40px;height:40px;font-size:1.18rem!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-numero{width:50px;height:50px;font-size:1.52rem!important}
  #rankingHub .ranking-rack{padding:6px 10px 8px!important}
  #rankingHub .ranking-rack-fila{grid-template-columns:28px 40px minmax(0,1fr) auto!important;gap:8px!important;min-height:61px!important;padding:8px 1px!important}
  #rankingHub .ranking-rack-fila .ranking-avatar{width:38px!important;height:38px!important}
  #rankingHub .ranking-rack-posicion{font-size:.88rem!important}
  #rankingHub .ranking-rack-nombre{font-size:.82rem!important}
  #rankingHub .ranking-rack-puntos{min-width:45px!important;padding:5px 7px!important;font-size:.74rem!important}
}

@media(max-width:360px){
  #rankingHub .ranking-resumen{grid-template-columns:56px auto 1px minmax(0,1fr)!important;padding-inline:11px!important}
  #rankingHub .ranking-resumen::before{width:44px!important;height:44px!important}
  #rankingHub .ranking-total{font-size:.66rem!important}
  #rankingHub .ranking-podio{padding-inline:6px!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:66px!important;height:66px!important}
  #rankingHub .ranking-podio-puesto-2 .ranking-avatar,#rankingHub .ranking-podio-puesto-3 .ranking-avatar{width:52px!important;height:52px!important}
  #rankingHub .ranking-rack-fila{grid-template-columns:25px 36px minmax(0,1fr) auto!important;gap:7px!important}
  #rankingHub .ranking-rack-fila .ranking-avatar{width:35px!important;height:35px!important}
}

@media(prefers-reduced-motion:reduce){
  #rankingHub .ranking-actualizar:active{transform:none!important}
}