/* =========================================================
   HEADER COMÚN ITHub.es
   Se incluye en las páginas con:
   <link rel="stylesheet" href="/assets/css/header.css">
   y el HTML de /includes/header.html
   ========================================================= */

/* Barra superior */
header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(15,19,32,.9),rgba(15,19,32,.6));
  border-bottom:1px solid rgba(62,78,138,.85);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.nav{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.brand img.site-logo{
  height:42px;
  width:auto;
  display:block;
}

/* Menú principal */
nav.menu{
  display:flex;
  gap:12px;
  color:var(--muted);
  font-weight:800;
  align-items:center;
  text-transform:uppercase;
}

nav.menu .link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  min-height:44px;
  height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:900;
  letter-spacing:.8px;
  background:none;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  text-decoration:none;
  line-height:1;
}

nav.menu .link-btn:hover{
  border-color:#2a3150;
  color:var(--ink);
}

/* Zona login / perfil */
.authwrap{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--pill-bg);
  border:1px solid var(--pill-ring);
  border-radius:999px;
  padding:4px;
  box-shadow:0 6px 18px rgba(5,10,30,.35);
  max-height:44px;
}

.hello{
  display:flex;
  align-items:center;
  gap:6px;
  color:#cbd3ff;
  font-weight:800;
  padding:4px 8px;
  font-size:12px;
}

/* Botones tipo píldora (LOGIN / SIGNUP / PERFIL / LOGOUT) */
.pill-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:44px;
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid #3b2fff44;
  background:var(--pill-btn-bg);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:transform .08s, background .12s;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.pill-btn:hover{
  background:var(--pill-btn-bg-hover);
  transform:translateY(-1px);
}

/* Botón neutro (no principal) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:transparent;
  color:var(--ink);
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.btn:hover{
  border-color:#3a4580;
}

.btn.small{
  min-height:36px;
  height:34px;
  padding:0 10px;
  font-size:.85rem;
  border-radius:10px;
}

/* ─────────────────────────────────────────────
   NAV DESPLEGABLE
   ──────────────────────────────────────────── */

.menu-has-sub{ gap:6px; }
.menu-group{ position:relative; display:flex; align-items:center; }

.has-sub-trigger{ position:relative; padding-right:18px; }
.has-sub-trigger .caret{ font-size:.7rem; opacity:.7; margin-left:4px; }

.menu-group .submenu{
  position:absolute;
  top:110%;
  left:0;
  min-width:220px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg,#141b3a,#101631);
  box-shadow:0 14px 28px rgba(5,10,30,0.55);
  display:none;
  flex-direction:column;
  gap:4px;
  z-index:60;
}

.menu-group .submenu a,
.menu-group .submenu .submenu-title{
  text-transform:uppercase;
}

/* Enlaces dentro del submenu */
.menu-group .submenu a{
  display:block;
  padding:4px 8px;
  font-size:0.8rem;
  font-weight:700;
  color:var(--muted);
  letter-spacing:0.06em;
}

.menu-group .submenu a:hover{
  background:rgba(108,139,255,0.18);
  color:var(--ink);
  border-radius:8px;
}

.menu-group .submenu a.submenu-mainlink{
  margin-top:4px;
  margin-bottom:2px;
  padding:6px 8px;
  font-size:0.82rem;
  font-weight:900;
  color:var(--ink);
  border-radius:8px;
  background:
    radial-gradient(circle at 0% 0%,rgba(108,139,255,.35),transparent 55%),
    linear-gradient(180deg,#151b31,#11172b);
  box-shadow:0 6px 16px rgba(5,10,30,.45);
}

.menu-group .submenu a.submenu-mainlink:hover{
  background:
    radial-gradient(circle at 0% 0%,rgba(108,139,255,.5),transparent 60%),
    linear-gradient(180deg,#1a2140,#131a33);
  color:#fff;
}

.menu-group .submenu a.submenu-child{
  padding-left:22px;
  font-size:0.78rem;
  opacity:0.9;
}

.submenu-title{
  margin-top:6px;
  margin-bottom:2px;
  padding:2px 8px;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:#cfe1ff;
  opacity:0.7;
}

.submenu.open{ display:flex; }

/* Primer item: CATALOGO GLOBAL un poco separado */
.menu-group .submenu a.submenu-global{
  margin-bottom:6px;
}

/* Ítem inferior: RANKING GLOBAL con icono y separador arriba */
.menu-group .submenu a.submenu-bottom{
  margin-top:6px;
  padding:6px 8px;
  font-size:0.8rem;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  opacity:0.95;
}

.submenu-bottom-icon{
  font-size:1rem;
  display:inline-block;
  transform:translateY(0.5px);
}

/* Hover en escritorio: abrir al pasar el ratón */
@media (min-width:721px){
  .menu-group:hover > .submenu,
  .menu-group:focus-within > .submenu{
    display:flex;
  }
}

/* ─────────────────────────────────────────────
   AJUSTES MÓVIL
   ──────────────────────────────────────────── */

@media (max-width:720px){
  /* Apilar header: logo arriba, menú debajo, auth a la derecha */
  .nav{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
    padding:6px 0 10px;
  }

  .brand{
    order:1;
  }

  nav.menu{
    order:2;
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }

  nav.menu .link-btn{
    min-width:90px;
    height:34px;
    padding:0 10px;
    font-size:.75rem;
  }

  .authwrap{
    order:3;
    align-self:flex-end;
    gap:4px;
    padding:3px 4px;
  }

  .pill-btn{
    min-width:80px;
    height:32px;
    padding:0 8px;
    font-size:.7rem;
  }

  .btn{
    height:36px;
  }

  .hello{
    display:none;
  }

  /* Submenús en móvil: se muestran en columna al pulsar */
  .menu{
    flex-wrap:wrap;
  }

  .menu-group{
    flex-direction:column;
    align-items:flex-start;
  }

  .menu-group .submenu{
    position:static;
    margin-top:4px;
    width:100%;
    box-shadow:0 6px 16px rgba(5,10,30,.35);
    display:none;
  }

  .menu-group .submenu.open{
    display:flex;
  }
}