/* V48.81 - Ranking final: leaderboard integrado a Academia Naval.
   Podio plano 2-1-3, Top 10, fotos reales y color de cuenta con contraste global.
   Conserva tipografia global y Solar Icons; no agrega emojis. */
#rankingHub .ranking-perfil-compacto{
  width:min(100%,720px)!important;
  overflow:visible!important;
  box-sizing:border-box;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:var(--text)!important;
  background:transparent!important;
  box-shadow:none!important;
}
#rankingHub .ranking-perfil-compacto::before,
#rankingHub .ranking-perfil-compacto::after,
#rankingHub .ranking-perfil-compacto .ranking-resumen::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
#rankingHub .ranking-perfil-compacto>*{position:relative;z-index:1}

#rankingHub .ranking-cabecera{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding:3px 2px 12px!important;
}
#rankingHub .ranking-cabecera b{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  color:var(--text)!important;
  font-size:1.18rem!important;
  font-weight:950!important;
  letter-spacing:-.025em;
}
#rankingHub .ranking-cabecera b>.solar-slot{
  width:1.12em;
  height:1.12em;
  color:var(--textoAcento)!important;
}
#rankingHub .ranking-actualizar{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:36px!important;
  padding:7px 12px!important;
  border:1px solid color-mix(in srgb,var(--primario) 18%,var(--borde))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--primario) 6%,var(--card))!important;
  color:var(--textoAcento)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  font-weight:900!important;
}
#rankingHub .ranking-actualizar:disabled{opacity:.52!important}

/* Tu posicion aparece una sola vez. El total sirve para comprobar la poblacion real del ranking. */
#rankingHub .ranking-resumen{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  box-sizing:border-box;
  margin:0 0 12px!important;
  padding:10px 12px!important;
  border:1px solid color-mix(in srgb,var(--primario) 15%,var(--borde))!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--primario) 5%,var(--card))!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
#rankingHub .ranking-resumen>small:first-child{
  margin:0!important;
  color:var(--muted)!important;
  opacity:1!important;
  font-weight:900!important;
  letter-spacing:.065em!important;
}
#rankingHub .ranking-resumen #rankingMiPosicion{
  color:var(--text)!important;
  font-size:1.42rem!important;
  font-weight:950!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums;
}
#rankingHub .ranking-total{
  margin-left:auto!important;
  color:var(--muted)!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:0!important;
  white-space:nowrap;
}

/* Un tablero acabado: zona de podio con tono de cuenta y rack blanco/oscuro debajo. */
#rankingHub #listaRankingNacional{
  display:block!important;
  overflow:hidden;
  box-sizing:border-box;
  margin:0!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--primario) 12%,var(--borde));
  border-radius:22px;
  background:var(--card);
  box-shadow:0 14px 36px rgba(15,23,42,.075);
}

/* Avatar comun. Solar profile queda como fallback cuando no existe foto. */
#rankingHub .ranking-avatar{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  width:40px;
  height:40px;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--primario) 24%,var(--borde));
  border-radius:50%;
  background:color-mix(in srgb,var(--primario) 7%,var(--card));
  color:var(--textoAcento);
  box-shadow:none;
}
#rankingHub .ranking-avatar-fallback{width:58%;height:58%}
#rankingHub .ranking-avatar img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
  background:var(--card);
}
#rankingHub .ranking-avatar-con-foto .ranking-avatar-fallback{visibility:hidden}

/* Podio simple como la referencia: foto, nombre, porcentaje y tres escalones 2-1-3. */
#rankingHub .ranking-podio{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  gap:6px;
  min-height:228px;
  box-sizing:border-box;
  padding:22px 14px 0;
  border-bottom:1px solid color-mix(in srgb,var(--primario) 9%,var(--borde));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--primario) 13%,var(--card)) 0%,
    color-mix(in srgb,var(--primario) 5%,var(--card)) 100%);
}
#rankingHub .ranking-podio-puesto{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  text-align:center;
}
#rankingHub .ranking-podio-puesto-1{grid-column:2;grid-row:1}
#rankingHub .ranking-podio-puesto-2{grid-column:1;grid-row:1}
#rankingHub .ranking-podio-puesto-3{grid-column:3;grid-row:1}
#rankingHub .ranking-podio-persona{
  display:flex;
  min-width:0;
  min-height:128px;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 3px 10px;
}
#rankingHub .ranking-podio-puesto-1 .ranking-avatar{
  width:70px;
  height:70px;
  border:3px solid var(--card);
  outline:2px solid color-mix(in srgb,var(--primario) 78%,transparent);
  outline-offset:1px;
}
#rankingHub .ranking-podio-puesto-2 .ranking-avatar,
#rankingHub .ranking-podio-puesto-3 .ranking-avatar{
  width:56px;
  height:56px;
  border:3px solid var(--card);
  outline:1px solid color-mix(in srgb,var(--primario) 38%,var(--borde));
  outline-offset:1px;
}
#rankingHub .ranking-podio-yo .ranking-avatar{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primario) 10%,transparent);
}
#rankingHub .ranking-podio-nombre{
  display:-webkit-box;
  max-width:100%;
  margin-top:8px;
  overflow:hidden;
  color:var(--text)!important;
  font-size:.78rem;
  font-weight:900!important;
  line-height:1.16;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.82rem}
#rankingHub .ranking-marca-yo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:5px;
  padding:2px 5px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primario) 11%,var(--card));
  color:var(--textoAcento);
  font-size:.6rem;
  font-weight:950;
  line-height:1.25;
  vertical-align:middle;
}
#rankingHub .ranking-podio-persona>.ranking-marca-yo{margin:3px 0 0}
#rankingHub .ranking-podio-puntos{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  margin-top:5px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--primario) 13%,var(--borde));
  border-radius:999px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  color:var(--textoAcento)!important;
  font-size:.72rem;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  text-shadow:none!important;
}
#rankingHub .ranking-podio-bloque{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  border:0;
  border-radius:14px 14px 0 0;
  background:color-mix(in srgb,var(--primario) 30%,var(--card));
  color:var(--text);
  box-shadow:none;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{
  min-height:88px;
  background:var(--primario);
  color:var(--sobrePrimario);
}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{
  min-height:66px;
  background:color-mix(in srgb,var(--primario) 54%,var(--card));
  color:var(--text);
}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{
  min-height:54px;
  background:color-mix(in srgb,var(--primario) 32%,var(--card));
  color:var(--text);
}
#rankingHub .ranking-podio-numero{
  font-size:1.52rem;
  font-weight:950;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-numero{font-size:1.85rem}

/* Rack continuo, solo 4 a 10: posicion + foto + nombre + porcentaje. */
#rankingHub .ranking-rack{
  box-sizing:border-box;
  padding:5px 14px 7px;
  background:var(--card);
}
#rankingHub .ranking-rack-fila{
  position:relative;
  display:grid;
  grid-template-columns:28px 42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:60px;
  box-sizing:border-box;
  padding:8px 2px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--primario) 8%,var(--borde));
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#rankingHub .ranking-rack-fila:last-child{border-bottom:0}
#rankingHub .ranking-rack-fila-yo{
  margin-inline:-6px;
  padding-inline:8px;
  border-radius:12px;
  background:color-mix(in srgb,var(--primario) 5%,var(--card));
}
#rankingHub .ranking-rack-fila-yo::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--primario);
}
#rankingHub .ranking-rack-posicion{
  color:var(--muted);
  font-size:.86rem;
  font-weight:900;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#rankingHub .ranking-rack-nombre{
  min-width:0;
  overflow:hidden;
  color:var(--text)!important;
  font-size:.84rem;
  font-weight:850!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#rankingHub .ranking-rack-puntos{
  min-width:47px;
  padding:5px 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primario) 7%,var(--card));
  color:var(--textoAcento)!important;
  font-size:.78rem;
  font-weight:950;
  text-align:center;
  font-variant-numeric:tabular-nums;
  text-shadow:none!important;
}
#rankingHub .ranking-vacio{
  margin:0!important;
  padding:34px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  text-align:center!important;
}
#rankingHub #rankingEstado{
  margin:0!important;
  padding:9px 3px 2px!important;
  color:var(--muted)!important;
  font-size:.72rem!important;
  text-align:left!important;
}
#rankingHub #rankingEstado:empty,
#rankingHub #rankingEstado[data-estado="ready"]{display:none!important}
#rankingHub #rankingEstado[data-estado="loading"]{color:var(--textoAcento)!important}
#rankingHub #rankingEstado[data-estado="error"]{color:#b42318!important}

html[data-theme="dark"] #rankingHub #listaRankingNacional{
  box-shadow:0 14px 36px rgba(0,0,0,.16);
}
html[data-theme="dark"] #rankingHub .ranking-podio{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--primario) 16%,var(--card)) 0%,
    color-mix(in srgb,var(--primario) 7%,var(--card)) 100%);
}
html[data-theme="dark"] #rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{
  background:color-mix(in srgb,var(--primario) 38%,var(--card));
}
html[data-theme="dark"] #rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{
  background:color-mix(in srgb,var(--primario) 24%,var(--card));
}
html[data-theme="dark"] #rankingHub #rankingEstado[data-estado="error"]{color:#ffb4ab!important}

@media(max-width:520px){
  #rankingHub .ranking-cabecera{padding:2px 1px 10px!important}
  #rankingHub .ranking-cabecera b{font-size:1.08rem!important}
  #rankingHub .ranking-actualizar{min-height:34px!important;padding:6px 10px!important}
  #rankingHub .ranking-resumen{margin-bottom:10px!important;padding:9px 10px!important}
  #rankingHub .ranking-total{font-size:.66rem!important}
  #rankingHub #listaRankingNacional{border-radius:20px}
  #rankingHub .ranking-podio{gap:4px;min-height:214px;padding:18px 10px 0}
  #rankingHub .ranking-podio-persona{min-height:121px;padding-inline:2px;padding-bottom:9px}
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:64px;height:64px}
  #rankingHub .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-3 .ranking-avatar{width:52px;height:52px}
  #rankingHub .ranking-podio-nombre{font-size:.7rem}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.76rem}
  #rankingHub .ranking-podio-puntos{font-size:.68rem;padding:3px 7px}
  #rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{min-height:82px}
  #rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{min-height:62px}
  #rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{min-height:51px}
  #rankingHub .ranking-rack{padding-inline:10px}
  #rankingHub .ranking-rack-fila{grid-template-columns:26px 38px minmax(0,1fr) auto;gap:8px;min-height:56px;padding:7px 1px}
  #rankingHub .ranking-rack-fila .ranking-avatar{width:38px;height:38px}
  #rankingHub .ranking-rack-nombre{font-size:.79rem}
  #rankingHub .ranking-rack-puntos{min-width:43px;font-size:.73rem;padding-inline:6px}
}

@media(max-width:360px){
  #rankingHub .ranking-actualizar{font-size:.73rem!important}
  #rankingHub .ranking-podio{padding-inline:7px}
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:60px;height:60px}
  #rankingHub .ranking-podio-puesto-2 .ranking-avatar,
  #rankingHub .ranking-podio-puesto-3 .ranking-avatar{width:48px;height:48px}
  #rankingHub .ranking-podio-nombre{font-size:.66rem}
  #rankingHub .ranking-podio-puntos{font-size:.64rem}
  #rankingHub .ranking-rack{padding-inline:8px}
  #rankingHub .ranking-rack-fila{grid-template-columns:24px 36px minmax(0,1fr) auto;gap:7px}
  #rankingHub .ranking-rack-fila .ranking-avatar{width:36px;height:36px}
}

/* V107 · Ranking Nacional: pulido sobrio, mantiene podio 2-1-3 y Top 10. */
#rankingHub .ranking-perfil-compacto{width:min(100%,740px)!important}
#rankingHub .ranking-cabecera{
  padding:4px 2px 14px!important;
  border-bottom:1px solid color-mix(in srgb,var(--borde) 44%,transparent);
  margin-bottom:12px!important;
}
#rankingHub .ranking-cabecera b{font-size:1.2rem!important;font-weight:950!important}
#rankingHub .ranking-actualizar{
  min-height:38px!important;
  padding:7px 13px!important;
  border-color:color-mix(in srgb,var(--primario) 16%,var(--borde))!important;
  background:color-mix(in srgb,var(--primario) 5%,var(--card))!important;
  box-shadow:none!important;
}
#rankingHub .ranking-actualizar:active{transform:translateY(1px)}
#rankingHub .ranking-resumen{
  position:relative;
  min-height:58px;
  gap:10px!important;
  margin:0 0 13px!important;
  padding:11px 13px 11px 16px!important;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--primario) 14%,var(--borde))!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--primario) 7%,var(--card)),var(--card) 68%)!important;
}
#rankingHub .ranking-resumen::before{
  content:"";
  position:absolute;
  left:0;top:10px;bottom:10px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:var(--primario);
}
#rankingHub .ranking-resumen>small:first-child{font-size:.7rem!important;letter-spacing:.08em!important}
#rankingHub .ranking-resumen #rankingMiPosicion{font-size:1.55rem!important;letter-spacing:-.04em}
#rankingHub .ranking-total{font-size:.73rem!important}
#rankingHub #listaRankingNacional{
  border-color:color-mix(in srgb,var(--borde) 70%,transparent);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
}
#rankingHub .ranking-podio{
  min-height:232px;
  gap:8px;
  padding:24px 15px 0;
  border-bottom-color:color-mix(in srgb,var(--borde) 50%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--primario) 9%,var(--card)) 0%,color-mix(in srgb,var(--primario) 3%,var(--card)) 100%);
}
#rankingHub .ranking-podio-persona{min-height:130px;padding-bottom:11px}
#rankingHub .ranking-podio-puesto-1 .ranking-avatar{
  width:72px;height:72px;
  outline:2px solid color-mix(in srgb,var(--primario) 72%,transparent);
  outline-offset:2px;
}
#rankingHub .ranking-podio-puesto-2 .ranking-avatar,
#rankingHub .ranking-podio-puesto-3 .ranking-avatar{
  outline-color:color-mix(in srgb,var(--primario) 28%,var(--borde));
}
#rankingHub .ranking-podio-nombre{margin-top:9px;font-size:.8rem;font-weight:950!important}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-nombre{font-size:.85rem}
#rankingHub .ranking-podio-puntos{
  margin-top:6px;
  padding:4px 9px;
  border-color:color-mix(in srgb,var(--primario) 12%,var(--borde));
  background:color-mix(in srgb,var(--card) 94%,transparent);
  font-size:.73rem;
}
#rankingHub .ranking-podio-bloque{border-radius:12px 12px 0 0}
#rankingHub .ranking-podio-puesto-1 .ranking-podio-bloque{min-height:90px;background:var(--primario);color:var(--sobrePrimario)}
#rankingHub .ranking-podio-puesto-2 .ranking-podio-bloque{background:color-mix(in srgb,var(--primario) 54%,var(--card))}
#rankingHub .ranking-podio-puesto-3 .ranking-podio-bloque{background:color-mix(in srgb,var(--primario) 32%,var(--card))}
#rankingHub .ranking-rack{padding:6px 14px 8px}
#rankingHub .ranking-rack-fila{
  min-height:62px;
  padding:9px 3px;
  border-bottom-color:color-mix(in srgb,var(--borde) 46%,transparent);
  transition:background-color .12s ease;
}
#rankingHub .ranking-rack-fila:active{background:color-mix(in srgb,var(--primario) 4%,var(--card))}
#rankingHub .ranking-rack-fila-yo{
  margin-inline:-7px;
  padding-inline:10px;
  border-radius:13px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--primario) 8%,var(--card)),color-mix(in srgb,var(--primario) 3%,var(--card)));
}
#rankingHub .ranking-rack-fila-yo::before{top:10px;bottom:10px;width:3px}
#rankingHub .ranking-rack-posicion{font-size:.88rem}
#rankingHub .ranking-rack-nombre{font-size:.86rem;font-weight:900!important}
#rankingHub .ranking-rack-puntos{background:color-mix(in srgb,var(--primario) 6%,var(--card));font-size:.78rem}
@media(hover:hover) and (pointer:fine){
  #rankingHub .ranking-rack-fila:hover{background:color-mix(in srgb,var(--primario) 3%,var(--card))}
  #rankingHub .ranking-rack-fila-yo:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--primario) 9%,var(--card)),color-mix(in srgb,var(--primario) 4%,var(--card)))}
}
html[data-theme="dark"] #rankingHub #listaRankingNacional{box-shadow:0 8px 24px rgba(0,0,0,.14)}
html[data-theme="dark"] #rankingHub .ranking-podio{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primario) 12%,var(--card)) 0%,color-mix(in srgb,var(--primario) 5%,var(--card)) 100%);
}
@media(max-width:520px){
  #rankingHub .ranking-cabecera{padding-bottom:11px!important;margin-bottom:10px!important}
  #rankingHub .ranking-resumen{min-height:54px;padding:10px 11px 10px 14px!important}
  #rankingHub #listaRankingNacional{border-radius:18px}
  #rankingHub .ranking-podio{min-height:218px;gap:5px;padding:19px 10px 0}
  #rankingHub .ranking-podio-puesto-1 .ranking-avatar{width:66px;height:66px}
  #rankingHub .ranking-rack{padding-inline:10px}
  #rankingHub .ranking-rack-fila{min-height:58px}
}
@media(prefers-reduced-motion:reduce){
  #rankingHub .ranking-rack-fila{transition:none}
}