/* L2Liberty - Fase 1.3.1
   Ajuste final del encabezado unificado para PC, tablet y celular.
   Solo contiene overrides visuales: no altera consultas, rankings ni sistemas. */

/* ================================================================
   BASE GLOBAL: bloque superior independiente, estable y sin solapes
   ================================================================ */
.header{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:74px!important;
  z-index:1000!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#787878 0%,#4d4d4d 58%,#1f1f1f 100%)!important;
  border-bottom:1px solid rgba(218,174,77,.72)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.48)!important;
}
.header::after{
  inset:0!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  transform:none!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.36!important;
}
.header-container.container{
  width:min(calc(100% - 32px),1120px)!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:0!important;
}
.header-body{
  min-height:74px!important;
  height:74px!important;
  position:relative!important;
}
.header-flex{
  min-width:0!important;
  gap:28px!important;
}
.header-logo{
  width:54px!important;
  max-width:54px!important;
  flex:0 0 54px!important;
}
.header-logo img{
  display:block!important;
  width:54px!important;
  max-width:54px!important;
  height:auto!important;
}
.nav-list{
  gap:27px!important;
  min-width:0!important;
}
.nav-link{
  gap:8px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.nav-link>img{
  display:block!important;
  width:22px!important;
  max-width:22px!important;
  height:22px!important;
  max-height:22px!important;
  object-fit:contain!important;
  flex:0 0 22px!important;
}
.nav-link:hover>img,
.nav-link.liberty-servers-trigger[aria-expanded="true"]>img{
  transform:translateY(-1px) scale(1.04)!important;
}
.header-aside{gap:10px!important}
.header-cta{
  min-width:120px!important;
  min-height:42px!important;
  font-size:11px!important;
}

/* Rankings: CTA ocultos y navegación centrada, sin agrandar iconos. */
body.liberty-ranking-active .header-body{
  justify-content:center!important;
}
body.liberty-ranking-active .header-aside{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}
body.liberty-ranking-active .header-cta{
  display:none!important;
}

/* ================================================================
   TABLET Y MENÚ COLAPSADO
   ================================================================ */
@media (max-width:1239px){
  .header{
    min-height:68px!important;
    overflow:hidden!important;
  }
  .header-container.container{
    width:calc(100% - 28px)!important;
    max-width:none!important;
  }
  .header-body{
    min-height:68px!important;
    height:68px!important;
  }
  .header-flex{
    width:100%!important;
    justify-content:space-between!important;
    gap:12px!important;
  }
  .header-logo,
  .header-logo img{
    width:56px!important;
    max-width:56px!important;
  }
  .header-logo{flex-basis:56px!important}
  .header-aside{
    position:static!important;
    margin-left:auto!important;
    transform:none!important;
  }
  .header-cta{
    min-width:34px!important;
    min-height:34px!important;
    width:34px!important;
    height:34px!important;
  }
  .header-menu{
    display:flex!important;
    width:30px!important;
    height:21px!important;
    flex:0 0 30px!important;
    z-index:1002!important;
  }
  .header-menu-line{
    height:3px!important;
    border-radius:3px!important;
  }

  /* Cerrado: totalmente fuera, invisible y sin restos encima del header. */
  .nav{
    position:fixed!important;
    top:68px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - 68px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-24px)!important;
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s!important;
    z-index:1001!important;
  }
  .nav.nav--active{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
    transition:opacity .25s ease,transform .25s ease!important;
  }
  .nav-list{
    width:100%!important;
    box-sizing:border-box!important;
    padding:18px 20px 22px!important;
    gap:0!important;
  }
  .nav-link{
    width:100%!important;
    min-height:46px!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    font-size:13px!important;
  }
  .nav-link>img{
    width:20px!important;
    max-width:20px!important;
    height:20px!important;
    max-height:20px!important;
    flex-basis:20px!important;
  }
  body.liberty-ranking-active .header-aside{
    position:static!important;
    transform:none!important;
  }
}

/* ================================================================
   CELULAR
   ================================================================ */
@media (max-width:760px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .header{
    min-height:64px!important;
    height:64px!important;
  }
  .header-container.container{
    width:calc(100% - 24px)!important;
  }
  .header-body{
    min-height:64px!important;
    height:64px!important;
  }
  .header-logo,
  .header-logo img{
    width:62px!important;
    max-width:62px!important;
  }
  .header-logo{flex-basis:62px!important}
  .header-aside{gap:9px!important}
  .header-menu{
    width:31px!important;
    height:22px!important;
    flex-basis:31px!important;
  }
  .nav{
    top:64px!important;
    max-height:calc(100dvh - 64px)!important;
    background:rgba(229,225,226,.92)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .nav-list{padding:14px 18px 20px!important}
  .nav-link{
    min-height:44px!important;
    font-size:13px!important;
  }
  .nav-close{
    right:16px!important;
    top:15px!important;
  }
  body.liberty-ranking-active .header-cta{display:none!important}

  /* El banner empieza debajo del header y conserva márgenes reales. */
  body.liberty-ranking-active .liberty-ranking-shell{
    padding-top:0!important;
  }
  body.liberty-ranking-active .liberty-ranking-header{
    margin-top:18px!important;
  }
}

@media (max-width:390px){
  .header-container.container{width:calc(100% - 18px)!important}
  .header-logo,
  .header-logo img{
    width:56px!important;
    max-width:56px!important;
  }
  .header-logo{flex-basis:56px!important}
}