/* L2Liberty - Fase 1.3.0
   Encabezado independiente + afinado responsive + seguridad visual Boss Jewels.
   Este archivo solo agrega overrides; no reemplaza sistemas existentes. */

/* ================================================================
   1) ENCABEZADO GLOBAL EN BLOQUE PROPIO
   La navegación deja de superponerse sobre banners y contenido.
   ================================================================ */
.header{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  width:100%!important;
  min-height:var(--header-h);
  z-index:50!important;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(102,102,102,.98) 0%,rgba(66,66,66,.98) 58%,rgba(28,28,28,.99) 100%);
  border-bottom:1px solid rgba(213,170,75,.72);
  box-shadow:0 7px 24px rgba(0,0,0,.52),inset 0 -1px rgba(255,222,139,.08);
  overflow:visible;
}
.header::after{
  height:100%!important;
  min-width:0!important;
  left:0!important;
  transform:none!important;
  background-size:cover!important;
  background-position:center top!important;
  opacity:.48;
}
.header-container.container{
  position:relative;
  z-index:2;
  width:min(100% - 32px,1480px)!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box;
}
.header-body{min-width:0}
.header-flex{min-width:0}
.nav{min-width:0}
.nav-list{min-width:0}

/* El contenido empieza después del bloque del encabezado. */
main{position:relative;z-index:1}

/* En rankings se ocultan Login/Register sin alterar el ancho del menú. */
body.liberty-ranking-active .header-cta{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.liberty-ranking-active .header-aside{flex:0 0 auto!important}

/* Protege tamaño y proporción de los iconos de navegación. */
.header-logo img{display:block;width:100%;height:auto}
.nav-link>img{width:auto!important;height:auto!important;max-width:26px!important;flex:0 0 auto}

/* ================================================================
   2) BOSS JEWELS: CONTENIDO COMPLETO Y ROBUSTO
   ================================================================ */
.liberty-jewel-card{visibility:visible!important;opacity:1!important}
.liberty-jewel-card>*{visibility:visible!important;opacity:1!important}
.liberty-jewel-icon,.liberty-jewel-info{display:flex!important}
.liberty-jewel-icon{align-items:center!important;justify-content:center!important}
.liberty-jewel-info{flex-direction:column!important;justify-content:center!important}
.liberty-jewel-icon img{display:block!important}
.liberty-jewel-info h2,.liberty-jewel-info p{display:block}
.liberty-jewel-info p:not(.liberty-jewel-kind){display:flex!important}

/* ================================================================
   3) TABLET
   ================================================================ */
@media(max-width:1239px){
  .header{min-height:76px}
  .header-body{min-height:76px!important}
  .header-container.container{width:calc(100% - 28px)!important}
  .header-logo{max-width:58px!important;flex:0 0 58px}
  .header-aside{gap:10px!important}
  .header-menu{flex:0 0 30px;width:30px!important;height:22px!important}
  .nav{
    top:76px!important;
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.liberty-ranking-active .header-cta{display:none!important}
}

@media(min-width:761px) and (max-width:1239px){
  .liberty-jewels-board{width:calc(100% - 32px)!important}
  .liberty-jewels-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .liberty-jewel-card{grid-template-columns:44px 68px minmax(0,1fr)!important}
}

/* ================================================================
   4) CELULAR
   ================================================================ */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  .header{min-height:68px!important}
  .header-body{min-height:68px!important}
  .header-container.container{width:calc(100% - 22px)!important}
  .header-logo{max-width:68px!important;flex:0 0 68px!important}
  .header-flex{gap:10px!important}
  .header-aside{margin-left:auto!important}
  .header-menu{display:flex!important;width:31px!important;height:22px!important}
  .header-menu-line{height:3px!important;border-radius:3px}
  .nav{top:68px!important;max-height:calc(100dvh - 68px)!important}
  .nav-list{padding:18px 16px 22px!important;gap:0!important}
  .nav-link{
    width:100%!important;
    min-height:48px;
    padding:0 4px!important;
    box-sizing:border-box;
    font-size:14px!important;
  }
  .nav-link>img{max-width:22px!important}

  /* Banner de ranking limpio, sin logo o texto desbordado. */
  body.liberty-ranking-active .liberty-ranking-header{
    margin-top:14px!important;
    min-height:250px!important;
    padding:30px 24px!important;
    background-size:cover!important;
    background-position:center!important;
    overflow:hidden!important;
  }
  body.liberty-ranking-active .liberty-ranking-header h1{
    max-width:100%!important;
    font-size:clamp(38px,12vw,64px)!important;
    line-height:.96!important;
    overflow-wrap:anywhere;
  }
  body.liberty-ranking-active .liberty-ranking-header p{max-width:100%!important;font-size:15px!important}

  .liberty-jewels-board{width:calc(100% - 20px)!important;margin-left:10px!important;margin-right:10px!important}
  .liberty-jewels-grid{grid-template-columns:1fr!important}
  .liberty-jewel-card{
    width:100%!important;
    min-height:116px!important;
    grid-template-columns:38px 62px minmax(0,1fr)!important;
    padding:10px 9px!important;
  }
  .liberty-jewel-info{min-width:0!important;padding-left:7px!important}
  .liberty-jewel-info h2{font-size:12px!important}
  .liberty-jewel-info p:not(.liberty-jewel-kind){font-size:9px!important}
}

@media(max-width:390px){
  .header-container.container{width:calc(100% - 16px)!important}
  .header-logo{max-width:60px!important;flex-basis:60px!important}
  .liberty-jewel-card{grid-template-columns:30px 54px minmax(0,1fr)!important}
  .liberty-jewel-icon img{width:48px!important;height:48px!important}
}