/* V124.22 - Ranking header: stronger visual hierarchy without changing ranking logic. */

#rankingHub{
  --ranking-head-gap:14px;
  --ranking-head-on:#fff;
  --ranking-head-soft:rgba(255,255,255,.76);
}

#rankingHub .ranking-perfil-compacto{
  position:relative!important;
  width:min(100%,740px)!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#rankingHub .ranking-perfil-compacto::before,
#rankingHub .ranking-perfil-compacto::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* Main title row */
#rankingHub .ranking-cabecera{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 var(--ranking-head-gap) 18px!important;
  padding:13px 13px 13px 15px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--primario) 22%,var(--borde))!important;
  border-radius:23px!important;
  background:
    radial-gradient(circle at 10% -28%,color-mix(in srgb,var(--primario) 24%,transparent) 0 34%,transparent 58%),
    linear-gradient(135deg,color-mix(in srgb,var(--card) 95%,var(--primario) 5%) 0%,var(--card) 68%)!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 74%,transparent),
    0 15px 34px rgba(15,23,42,.10)!important;
}
#rankingHub .ranking-cabecera::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0 auto 0 0!important;
  width:4px!important;
  border-radius:23px 0 0 23px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primario) 70%,#fff 30%),var(--primario))!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--primario) 35%,transparent)!important;
  pointer-events:none!important;
}
#rankingHub .ranking-cabecera::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:-54px!important;
  right:86px!important;
  width:132px!important;
  height:132px!important;
  border:1px solid color-mix(in srgb,var(--primario) 14%,transparent)!important;
  border-radius:50%!important;
  box-shadow:0 0 0 18px color-mix(in srgb,var(--primario) 4%,transparent)!important;
  opacity:.72!important;
  pointer-events:none!important;
}
#rankingHub .ranking-cabecera>div:first-child{min-width:0!important}
#rankingHub .ranking-titulo{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
#rankingHub .ranking-title-mark{
  position:relative!important;
  display:inline-flex!important;
  flex:0 0 50px!important;
  width:50px!important;
  height:50px!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primario) 76%,#fff 24%) 0%,var(--primario) 56%,color-mix(in srgb,var(--primario) 82%,#000 18%) 100%)!important;
  color:#fff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 22px color-mix(in srgb,var(--primario) 30%,transparent)!important;
}
#rankingHub .ranking-title-mark::after{
  content:""!important;
  position:absolute!important;
  right:5px!important;
  bottom:5px!important;
  width:6px!important;
  height:6px!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--primario) 62%,#fff 38%)!important;
  box-shadow:0 2px 7px rgba(15,23,42,.20)!important;
}
#rankingHub .ranking-title-mark .solar-slot{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  color:currentColor!important;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.16))!important;
}
#rankingHub .ranking-title-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
}
#rankingHub .ranking-title-copy>small{
  display:block!important;
  margin:0!important;
  color:var(--textoAcento)!important;
  font-size:.61rem!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  opacity:.82!important;
}
#rankingHub .ranking-cabecera b{
  display:block!important;
  margin:0!important;
  color:var(--text)!important;
  font-size:1.52rem!important;
  font-weight:900!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
}
#rankingHub .ranking-title-accent{
  position:relative!important;
  color:var(--textoAcento)!important;
}
#rankingHub .ranking-title-accent::after{
  content:""!important;
  position:absolute!important;
  left:1px!important;
  right:0!important;
  bottom:-4px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--primario),color-mix(in srgb,var(--primario) 18%,transparent))!important;
  opacity:.76!important;
}

#rankingHub .ranking-actualizar{
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
  padding:0 13px 0 8px!important;
  border:1px solid color-mix(in srgb,var(--primario) 26%,var(--borde))!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 93%,var(--primario) 7%),var(--card))!important;
  color:var(--textoAcento)!important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent),
    0 9px 20px rgba(15,23,42,.10)!important;
  font-size:.77rem!important;
  font-weight:850!important;
  line-height:1!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
#rankingHub .ranking-actualizar .solar-slot{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  box-sizing:border-box!important;
  padding:6px!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primario) 78%,#fff 22%),var(--primario))!important;
  color:#fff!important;
  box-shadow:0 6px 13px color-mix(in srgb,var(--primario) 28%,transparent)!important;
  transition:transform .28s ease!important;
}
@media(hover:hover) and (pointer:fine){
  #rankingHub .ranking-actualizar:hover{
    transform:translateY(-1px)!important;
    border-color:color-mix(in srgb,var(--primario) 42%,var(--borde))!important;
    box-shadow:0 12px 24px rgba(15,23,42,.13)!important;
  }
  #rankingHub .ranking-actualizar:hover .solar-slot{transform:rotate(24deg)!important}
}
#rankingHub .ranking-actualizar:active{transform:translateY(1px) scale(.985)!important}
#rankingHub .ranking-actualizar:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primario) 26%,transparent)!important;
  outline-offset:3px!important;
}

/* Legacy chips remain styled in case a previous build injects them. */
#rankingHub .ranking-filtros{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  width:auto!important;
  margin:0 var(--ranking-head-gap) 18px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#rankingHub .ranking-filtros::before{content:none!important;display:none!important}
#rankingHub .ranking-scope,
#rankingHub .ranking-top10-chip{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:auto!important;
  min-height:48px!important;
  box-sizing:border-box!important;
  padding:0 20px!important;
  border-radius:999px!important;
  font-size:.9rem!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
#rankingHub .ranking-scope{
  min-width:148px!important;
  border:1px solid color-mix(in srgb,var(--primario) 72%,#fff 28%)!important;
  background:var(--primario)!important;
  color:var(--ranking-head-on)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.84),0 10px 22px color-mix(in srgb,var(--primario) 22%,transparent)!important;
}
#rankingHub .ranking-top10-chip{
  min-width:116px!important;
  border:1px solid color-mix(in srgb,var(--primario) 28%,var(--borde))!important;
  background:var(--card)!important;
  color:var(--textoAcento)!important;
  box-shadow:0 9px 20px rgba(15,23,42,.09)!important;
}
#rankingHub .ranking-graphic-icon{
  display:inline-block!important;
  flex:0 0 auto!important;
  width:22px!important;
  height:22px!important;
  background:currentColor!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
}
#rankingHub .ranking-graphic-icon-national{
  -webkit-mask-image:url('../ranking/header-v12415/icon_nacional.svg?v=12420')!important;
  mask-image:url('../ranking/header-v12415/icon_nacional.svg?v=12420')!important;
}
#rankingHub .ranking-graphic-icon-top10{
  width:20px!important;
  height:20px!important;
  -webkit-mask-image:url('../ranking/header-v12415/icon_top10.svg?v=12420')!important;
  mask-image:url('../ranking/header-v12415/icon_top10.svg?v=12420')!important;
}

/* Position summary hero */
#rankingHub .ranking-resumen{
  position:relative!important;
  isolation:isolate!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:minmax(110px,.84fr) 1px minmax(0,1.16fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:14px!important;
  row-gap:2px!important;
  width:auto!important;
  min-height:136px!important;
  margin:0 var(--ranking-head-gap) 20px!important;
  padding:20px 22px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--primario) 72%,#fff 28%)!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 13% 2%,rgba(255,255,255,.22) 0 6%,transparent 27%),
    linear-gradient(132deg,color-mix(in srgb,var(--primario) 80%,#fff 20%) 0%,var(--primario) 52%,color-mix(in srgb,var(--primario) 82%,#000 18%) 100%)!important;
  color:var(--ranking-head-on)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 18px 36px color-mix(in srgb,var(--primario) 27%,transparent)!important;
}
#rankingHub .ranking-resumen::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:-48% 42% auto -18%!important;
  height:150%!important;
  transform:rotate(18deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent)!important;
  pointer-events:none!important;
}
#rankingHub .ranking-resumen::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:20px!important;
  right:20px!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)!important;
  opacity:.75!important;
  pointer-events:none!important;
}
#rankingHub .ranking-summary-emblem{display:none!important}
#rankingHub .ranking-medallion-globe{
  position:absolute!important;
  z-index:0!important;
  right:8px!important;
  bottom:-31px!important;
  display:block!important;
  width:132px!important;
  height:132px!important;
  opacity:.14!important;
  pointer-events:none!important;
  filter:none!important;
}
#rankingHub .ranking-medallion-globe svg{display:block!important;width:100%!important;height:100%!important}
#rankingHub .ranking-medallion-globe .medallion-globe{
  fill:none!important;
  stroke:var(--ranking-head-on)!important;
  stroke-width:2.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#rankingHub .ranking-resumen>small:first-of-type{
  position:relative!important;
  z-index:1!important;
  grid-column:1!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:start!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 8px!important;
  padding:5px 8px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  color:var(--ranking-head-on)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
  font-size:.66rem!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 8px rgba(0,0,0,.10)!important;
}
#rankingHub .ranking-resumen #rankingMiPosicion{
  position:relative!important;
  z-index:1!important;
  grid-column:1!important;
  grid-row:2!important;
  align-self:start!important;
  margin:0!important;
  color:var(--ranking-head-on)!important;
  font-size:3.45rem!important;
  font-weight:900!important;
  line-height:.80!important;
  letter-spacing:-.035em!important;
  text-shadow:0 4px 14px rgba(0,0,0,.14)!important;
}
#rankingHub .ranking-resumen .ranking-divider{
  position:relative!important;
  z-index:1!important;
  grid-column:2!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  width:1px!important;
  height:76px!important;
  min-height:76px!important;
  margin:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent)!important;
  box-shadow:none!important;
}
#rankingHub .ranking-total{
  position:relative!important;
  z-index:1!important;
  grid-column:3!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  justify-self:start!important;
  min-width:0!important;
  margin:0!important;
  color:var(--ranking-head-on)!important;
  font-size:1.02rem!important;
  font-weight:850!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  white-space:normal!important;
  text-shadow:0 2px 8px rgba(0,0,0,.11)!important;
}
#rankingHub .ranking-total::before{content:"de "!important}
#rankingHub .ranking-total::after{content:none!important;display:none!important}

html[data-theme="dark"] #rankingHub .ranking-cabecera{
  border-color:color-mix(in srgb,var(--primario) 31%,var(--borde))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 34px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] #rankingHub .ranking-top10-chip{background:var(--card)!important}
html[data-theme="dark"] #rankingHub .ranking-actualizar{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 9px 20px rgba(0,0,0,.22)!important}

@media(max-width:420px){
  #rankingHub .ranking-cabecera{gap:10px!important;padding:11px 11px 11px 12px!important;border-radius:21px!important}
  #rankingHub .ranking-titulo{gap:10px!important}
  #rankingHub .ranking-title-mark{flex-basis:44px!important;width:44px!important;height:44px!important;border-radius:14px!important}
  #rankingHub .ranking-title-mark .solar-slot{width:24px!important;height:24px!important;min-width:24px!important}
  #rankingHub .ranking-title-copy>small{font-size:.55rem!important;letter-spacing:.11em!important}
  #rankingHub .ranking-cabecera b{font-size:1.34rem!important}
  #rankingHub .ranking-actualizar{height:42px!important;min-height:42px!important;padding:0 10px 0 7px!important;font-size:.71rem!important;gap:7px!important}
  #rankingHub .ranking-actualizar .solar-slot{width:28px!important;height:28px!important;min-width:28px!important;padding:5px!important}
}

@media(max-width:380px){
  #rankingHub{--ranking-head-gap:11px}
  #rankingHub .ranking-cabecera{margin-bottom:15px!important}
  #rankingHub .ranking-cabecera::after{right:60px!important}
  #rankingHub .ranking-title-mark{flex-basis:42px!important;width:42px!important;height:42px!important}
  #rankingHub .ranking-title-copy>small{font-size:.52rem!important}
  #rankingHub .ranking-cabecera b{font-size:1.23rem!important}
  #rankingHub .ranking-actualizar{height:40px!important;min-height:40px!important;padding:0 9px 0 6px!important;font-size:.67rem!important}
  #rankingHub .ranking-actualizar .solar-slot{width:27px!important;height:27px!important;min-width:27px!important}
  #rankingHub .ranking-filtros{gap:10px!important;margin-bottom:15px!important}
  #rankingHub .ranking-scope{min-width:134px!important}
  #rankingHub .ranking-top10-chip{min-width:104px!important}
  #rankingHub .ranking-scope,#rankingHub .ranking-top10-chip{min-height:44px!important;padding-inline:15px!important;font-size:.84rem!important}
  #rankingHub .ranking-resumen{
    grid-template-columns:minmax(100px,.82fr) 1px minmax(0,1.18fr)!important;
    column-gap:10px!important;
    min-height:124px!important;
    padding:17px 16px!important;
    border-radius:22px!important;
  }
  #rankingHub .ranking-medallion-globe{right:5px!important;bottom:-25px!important;width:116px!important;height:116px!important}
  #rankingHub .ranking-resumen>small:first-of-type{font-size:.60rem!important;padding:4px 7px!important;margin-bottom:7px!important}
  #rankingHub .ranking-resumen #rankingMiPosicion{font-size:2.96rem!important}
  #rankingHub .ranking-resumen .ranking-divider{height:67px!important;min-height:67px!important}
  #rankingHub .ranking-total{font-size:.90rem!important}
}

@media(max-width:340px){
  #rankingHub .ranking-cabecera{padding-right:9px!important}
  #rankingHub .ranking-title-mark{flex-basis:40px!important;width:40px!important;height:40px!important;border-radius:13px!important}
  #rankingHub .ranking-title-copy>small{display:none!important}
  #rankingHub .ranking-cabecera b{font-size:1.18rem!important}
  #rankingHub .ranking-actualizar{width:40px!important;min-width:40px!important;padding:0!important;border-radius:13px!important}
  #rankingHub .ranking-actualizar-label{display:none!important}
  #rankingHub .ranking-scope{min-width:122px!important}
  #rankingHub .ranking-top10-chip{min-width:96px!important}
  #rankingHub .ranking-scope,#rankingHub .ranking-top10-chip{padding-inline:12px!important;font-size:.78rem!important}
  #rankingHub .ranking-resumen{
    grid-template-columns:minmax(88px,.8fr) 1px minmax(0,1.2fr)!important;
    column-gap:8px!important;
    min-height:114px!important;
    padding:15px 13px!important;
  }
  #rankingHub .ranking-medallion-globe{right:3px!important;bottom:-21px!important;width:102px!important;height:102px!important}
  #rankingHub .ranking-resumen>small:first-of-type{font-size:.55rem!important}
  #rankingHub .ranking-resumen #rankingMiPosicion{font-size:2.55rem!important}
  #rankingHub .ranking-resumen .ranking-divider{height:60px!important;min-height:60px!important}
  #rankingHub .ranking-total{font-size:.82rem!important}
}

@media(prefers-reduced-motion:reduce){
  #rankingHub .ranking-actualizar,
  #rankingHub .ranking-actualizar .solar-slot{transition:none!important}
}