/* V125.51 · Ranking visual de nivel app.
   Solo apariencia: misma informacion, misma logica, sin funciones nuevas.
   Objetivo: retirar el acabado ornamental/jugueton y alinearlo al lenguaje visual
   limpio, tecnico y premium del resto de Academia Naval. */
#rankingHub{
  --ranking-gold:#d9a62e;
  --ranking-silver:#9aa8b7;
  --ranking-bronze:#ad7154;
  --ranking-line:color-mix(in srgb,var(--borde) 72%,transparent);
  --ranking-soft:color-mix(in srgb,var(--primario) 5%,var(--card));
}

#rankingHub .ranking-perfil-compacto{
  width:min(100%,720px)!important;
  padding:8px 0 28px!important;
}

/* Resumen compacto: mantiene el acento del usuario, pero deja de competir con todo el panel. */
#rankingHub .ranking-resumen.ranking-resumen-referencia{
  display:grid!important;
  grid-template-columns:minmax(150px,.92fr) minmax(170px,1.08fr)!important;
  grid-template-rows:auto 1fr auto!important;
  align-items:center!important;
  gap:0 18px!important;
  width:calc(100% - 28px)!important;
  max-width:680px!important;
  aspect-ratio:auto!important;
  min-height:158px!important;
  margin:8px auto 18px!important;
  padding:20px 24px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:
    linear-gradient(112deg,rgba(255,255,255,.095),transparent 30%),
    radial-gradient(circle at 94% 14%,rgba(255,255,255,.15),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--primario) 92%,#17222a),color-mix(in srgb,var(--primario2,var(--primario)) 78%,#12212b))!important;
  box-shadow:0 16px 38px color-mix(in srgb,var(--primario) 16%,transparent),0 2px 8px rgba(15,23,42,.07)!important;
}
#rankingHub .ranking-resumen.ranking-resumen-referencia::before{
  content:""!important;
  position:absolute!important;
  inset:auto auto -58% -5%!important;
  width:62%!important;
  height:115%!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:50%!important;
  background:transparent!important;
  transform:rotate(-13deg)!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
#rankingHub .ranking-resumen.ranking-resumen-referencia::after{
  content:""!important;
  position:absolute!important;
  inset:-62% -9% auto auto!important;
  width:58%!important;
  height:142%!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:50%!important;
  background:transparent!important;
  pointer-events:none!important;
}
#rankingHub .ranking-ref-wave{display:none!important}
#rankingHub .ranking-resumen.ranking-resumen-referencia > small.ranking-ref-label:first-of-type{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:start!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:5px 11px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.91)!important;
  color:color-mix(in srgb,var(--primario2,var(--primario)) 85%,#1c2730)!important;
  box-shadow:none!important;
  font-size:.68rem!important;
  font-weight:900!important;
  letter-spacing:.085em!important;
  line-height:1.1!important;
}
#rankingHub .ranking-resumen.ranking-resumen-referencia #rankingMiPosicion{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  align-self:center!important;
  justify-self:start!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(3.8rem,15vw,6.4rem)!important;
  font-weight:900!important;
  line-height:.82!important;
  letter-spacing:-.075em!important;
  text-shadow:none!important;
  filter:none!important;
}
#rankingHub .ranking-resumen.ranking-resumen-referencia .ranking-total{
  grid-column:2!important;
  grid-row:2!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
  color:rgba(255,255,255,.94)!important;
  font-size:clamp(.92rem,3.7vw,1.28rem)!important;
  font-weight:750!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  text-align:right!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
#rankingHub .ranking-ref-trophy{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  grid-column:2!important;
  grid-row:3!important;
  justify-self:end!important;
  width:min(100%,190px)!important;
  margin:0!important;
  color:rgba(255,255,255,.40)!important;
  opacity:1!important;
}
#rankingHub .ranking-ref-trophy svg{
  width:16px!important;
  height:16px!important;
  filter:none!important;
  stroke-width:1.55!important;
}
#rankingHub .ranking-ref-line{opacity:.48!important}

/* Un solo contenedor, sin marco ornamental fuerte. */
#rankingHub #listaRankingNacional{
  width:calc(100% - 28px)!important;
  max-width:680px!important;
  margin:0 auto!important;
  overflow:hidden!important;
  border:1px solid var(--ranking-line)!important;
  border-radius:24px!important;
  background:var(--card)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.065)!important;
}

/* Retira los recursos decorativos 3D/confeti: el podio queda construido por la propia UI. */
#rankingHub .ranking-premium-confetti,
#rankingHub .ranking-premium-podium-art,
#rankingHub .ranking-premium-crown,
#rankingHub .ranking-premium-frame{
  display:none!important;
}

#rankingHub .ranking-podio.ranking-podio-con-assets,
#rankingHub .ranking-podio{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:end!important;
  gap:10px!important;
  min-height:0!important;
  padding:30px 16px 18px!important;
  overflow:visible!important;
  border-bottom:1px solid var(--ranking-line)!important;
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--primario) 9%,transparent),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 2.2%,var(--card)),var(--card))!important;
}
#rankingHub .ranking-podio-puesto{
  position:relative!important;
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
}
#rankingHub .ranking-podio-puesto-2{order:1!important}
#rankingHub .ranking-podio-puesto-1{order:2!important}
#rankingHub .ranking-podio-puesto-3{order:3!important}
#rankingHub .ranking-podio-con-assets .ranking-podio-persona,
#rankingHub .ranking-podio-persona{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  display:flex!important;
  width:100%!important;
  min-height:0!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:0 3px 12px!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar,
#rankingHub .ranking-podio-puesto-1 .ranking-avatar{
  width:78px!important;
  height:78px!important;
  overflow:hidden!important;
  border:3px solid var(--card)!important;
  outline:2px solid var(--ranking-gold)!important;
  outline-offset:1px!important;
  background:color-mix(in srgb,var(--primario) 7%,var(--card))!important;
  box-shadow:0 10px 22px rgba(128,94,24,.13)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-avatar,
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar,
#rankingHub .ranking-podio-puesto-2 .ranking-avatar,
#rankingHub .ranking-podio-puesto-3 .ranking-avatar{
  width:61px!important;
  height:61px!important;
  border:3px solid var(--card)!important;
  outline:1.5px solid var(--ranking-silver)!important;
  outline-offset:1px!important;
  box-shadow:0 8px 18px rgba(15,23,42,.085)!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar,
#rankingHub .ranking-podio-puesto-3 .ranking-avatar{outline-color:var(--ranking-bronze)!important}
#rankingHub .ranking-podio .ranking-avatar>img:not(.ranking-premium-frame){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
#rankingHub .ranking-podio-con-assets .ranking-podio-nombre,
#rankingHub .ranking-podio-nombre{
  max-width:100%!important;
  margin-top:10px!important;
  color:var(--text)!important;
  font-size:.80rem!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:-.012em!important;
  text-align:center!important;
  text-shadow:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.88rem!important}
#rankingHub .ranking-podio-con-assets .ranking-podio-puntos,
#rankingHub .ranking-podio-puntos{
  min-width:0!important;
  margin-top:5px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--textoAcento)!important;
  box-shadow:none!important;
  font-size:.74rem!important;
  font-weight:900!important;
}
#rankingHub .ranking-marca-yo{
  margin-top:5px!important;
  padding:3px 8px!important;
  border:1px solid color-mix(in srgb,var(--primario) 20%,var(--borde))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--primario) 8%,var(--card))!important;
  color:var(--textoAcento)!important;
  box-shadow:none!important;
  font-size:.61rem!important;
  font-weight:900!important;
}

/* Plataforma propia del podio: limpia, sin ilustracion 3D. */
#rankingHub .ranking-podio-bloque{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--ranking-line)!important;
  border-radius:15px 15px 7px 7px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{
  height:80px!important;
  border-color:color-mix(in srgb,var(--ranking-gold) 42%,var(--borde))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ranking-gold) 17%,var(--card)),color-mix(in srgb,var(--ranking-gold) 7%,var(--card)))!important;
}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{
  height:58px!important;
  border-color:color-mix(in srgb,var(--ranking-silver) 34%,var(--borde))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ranking-silver) 13%,var(--card)),color-mix(in srgb,var(--ranking-silver) 5%,var(--card)))!important;
}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{
  height:50px!important;
  border-color:color-mix(in srgb,var(--ranking-bronze) 34%,var(--borde))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ranking-bronze) 13%,var(--card)),color-mix(in srgb,var(--ranking-bronze) 5%,var(--card)))!important;
}
#rankingHub .ranking-podio-numero{
  color:var(--muted)!important;
  font-size:1.55rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  text-shadow:none!important;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-numero{color:color-mix(in srgb,var(--ranking-gold) 86%,var(--text))!important;font-size:2rem!important}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-numero{color:color-mix(in srgb,var(--ranking-silver) 80%,var(--text))!important}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-numero{color:color-mix(in srgb,var(--ranking-bronze) 82%,var(--text))!important}

/* Puestos 4-10: una sola lista editorial, sin exceso de cajas y pildoras. */
#rankingHub .ranking-rack{
  display:block!important;
  padding:7px 14px 10px!important;
  background:var(--card)!important;
}
#rankingHub .ranking-rack-fila{
  display:grid!important;
  grid-template-columns:32px 42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:60px!important;
  margin:0!important;
  padding:8px 4px!important;
  border:0!important;
  border-bottom:1px solid var(--ranking-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .16s ease!important;
}
#rankingHub .ranking-rack-fila:nth-child(even){background:transparent!important}
#rankingHub .ranking-rack-fila:last-child{border-bottom:0!important}
#rankingHub .ranking-rack-fila-yo{
  margin:4px 0!important;
  padding:8px 9px!important;
  border:1px solid color-mix(in srgb,var(--primario) 18%,var(--borde))!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--primario) 6%,var(--card))!important;
  box-shadow:none!important;
}
#rankingHub .ranking-rack-posicion{
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:.76rem!important;
  font-weight:900!important;
  text-align:center!important;
}
#rankingHub .ranking-rack-fila-yo .ranking-rack-posicion{color:var(--textoAcento)!important}
#rankingHub .ranking-rack .ranking-avatar{
  width:40px!important;
  height:40px!important;
  border:2px solid var(--card)!important;
  outline:1px solid color-mix(in srgb,var(--primario) 14%,var(--borde))!important;
  box-shadow:none!important;
}
#rankingHub .ranking-rack-nombre{
  min-width:0!important;
  color:var(--text)!important;
  font-size:.84rem!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#rankingHub .ranking-rack-nombre .ranking-marca-yo{margin:0 0 0 7px!important;vertical-align:middle!important}
#rankingHub .ranking-rack-puntos{
  min-width:0!important;
  padding:4px 8px!important;
  border:1px solid color-mix(in srgb,var(--primario) 10%,var(--borde))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--primario) 5%,var(--card))!important;
  color:var(--textoAcento)!important;
  font-size:.71rem!important;
  font-weight:900!important;
  box-shadow:none!important;
}
#rankingHub #rankingEstado{
  min-height:18px!important;
  margin-top:8px!important;
  color:var(--muted)!important;
  font-size:.7rem!important;
  text-align:center!important;
}

html[data-theme="dark"] #rankingHub #listaRankingNacional,
body.dark #rankingHub #listaRankingNacional{
  border-color:color-mix(in srgb,var(--primario) 13%,var(--borde))!important;
  background:var(--card)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] #rankingHub .ranking-podio,
body.dark #rankingHub .ranking-podio{
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--primario) 10%,transparent),transparent 36%),
    linear-gradient(180deg,color-mix(in srgb,var(--primario) 3%,var(--card)),var(--card))!important;
}

@media (hover:hover) and (pointer:fine){
  #rankingHub .ranking-rack-fila:not(.ranking-rack-fila-yo):hover{
    background:color-mix(in srgb,var(--primario) 3.5%,var(--card))!important;
  }
}

@media(max-width:520px){
  #rankingHub .ranking-perfil-compacto{padding-top:4px!important}
  #rankingHub .ranking-resumen.ranking-resumen-referencia{
    width:calc(100% - 22px)!important;
    min-height:144px!important;
    margin:5px auto 15px!important;
    padding:17px 18px!important;
    grid-template-columns:minmax(130px,.9fr) minmax(145px,1.1fr)!important;
    gap:0 12px!important;
    border-radius:21px!important;
  }
  #rankingHub .ranking-resumen.ranking-resumen-referencia #rankingMiPosicion{font-size:clamp(3.55rem,16vw,5rem)!important}
  #rankingHub .ranking-resumen.ranking-resumen-referencia .ranking-total{font-size:.90rem!important}
  #rankingHub #listaRankingNacional{width:calc(100% - 22px)!important;border-radius:21px!important}
  #rankingHub .ranking-podio.ranking-podio-con-assets,
  #rankingHub .ranking-podio{gap:8px!important;padding:25px 11px 14px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-1 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:70px!important;height:70px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-con-assets .ranking-podio-puesto-3 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-3 .ranking-avatar{width:55px!important;height:55px!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{height:72px!important}
  #rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{height:53px!important}
  #rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{height:47px!important}
  #rankingHub .ranking-podio-con-assets .ranking-podio-nombre,
  #rankingHub .ranking-podio-nombre{font-size:.72rem!important}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.80rem!important}
  #rankingHub .ranking-rack{padding:6px 10px 9px!important}
  #rankingHub .ranking-rack-fila{grid-template-columns:28px 38px minmax(0,1fr) auto!important;gap:8px!important;min-height:56px!important;padding:7px 3px!important}
  #rankingHub .ranking-rack-fila-yo{padding:7px 7px!important}
  #rankingHub .ranking-rack .ranking-avatar{width:37px!important;height:37px!important}
  #rankingHub .ranking-rack-nombre{font-size:.80rem!important}
  #rankingHub .ranking-rack-puntos{font-size:.68rem!important;padding:4px 7px!important}
}

@media(max-width:360px){
  #rankingHub .ranking-resumen.ranking-resumen-referencia{grid-template-columns:minmax(112px,.88fr) minmax(126px,1.12fr)!important;padding-inline:15px!important}
  #rankingHub .ranking-resumen.ranking-resumen-referencia > small.ranking-ref-label:first-of-type{font-size:.61rem!important;padding:4px 8px!important}
  #rankingHub .ranking-resumen.ranking-resumen-referencia .ranking-total{font-size:.82rem!important}
  #rankingHub .ranking-ref-trophy{width:145px!important}
  #rankingHub .ranking-podio.ranking-podio-con-assets,#rankingHub .ranking-podio{padding-inline:8px!important;gap:6px!important}
  #rankingHub .ranking-rack-fila{grid-template-columns:25px 36px minmax(0,1fr) auto!important;gap:7px!important}
}

@media(prefers-reduced-motion:reduce){
  #rankingHub .ranking-rack-fila{transition:none!important}
}