/* =========================
   NAVBAR (drop-in)
   ========================= */
:root{
  --center-offset: 0px;              /* microajuste horizontal del bloque central */
  --nav-item-gap: 2rem;              /* separación entre items del centro */
  --group-gap: 1.25rem;              /* separación entre grupos a cada lado */
  --divider-color: rgba(255,255,255,.18);

  /* Colores base (usa tu paleta existente si querés) */
  --nav-bg: #3D2B1F;
  --nav-link: rgb(205,205,205);
  --nav-link-muted: rgb(148,148,148);
  --nav-link-hover: var(--secundario, #e6c093);
}

/* Barra */
.custom-navbar{
  background:
    radial-gradient(circle at 0% 100%, var(--cuaternario, transparent), transparent 0%),
    radial-gradient(circle at 10% 90%, var(--cuaternario, transparent), transparent 0%),
    var(--nav-bg);
  background-blend-mode: screen;
  color:#fff;
  padding: .5rem 1rem;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center; /* ✅ el contenedor interno va centrado */
  min-height: 56px;
  border-radius: 0;
  z-index: 1000; /* debajo del drawer, pero encima del resto */
}

/* Contenedor interno centrado y limitado */
.navbar-inner{
  width:100%;
  max-width: 1200px;
  margin:0 auto;
  padding:0 1rem;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda | centro | derecha */
  align-items:center;
}

/* Grupos */
.navbar-left,
.navbar-right{ display:flex; align-items:center; }
.navbar-left{ justify-self:end; padding-right: var(--group-gap); border-right:1px solid var(--divider-color); }
.navbar-center{ justify-self:center; transform: translateX(var(--center-offset)); }
.navbar-right{ justify-self:start; padding-left: var(--group-gap); border-left:1px solid var(--divider-color); gap:1.25rem; }

/* Lista central */
.navbar-nav{
  list-style:none;
  display:flex; align-items:center;
  gap: var(--nav-item-gap);
  margin:0; padding:0;
}

/* Links */
.navbar .nav-link{
  color: var(--nav-link-muted) !important;
  font-weight:600;
  font-size:1.1rem;
  text-decoration:none;
  position:relative;
  padding:.5rem 1rem;
  transition: color .25s ease;
}
.nav-hover:hover{ color: var(--nav-link-hover) !important; }
.nav-hover::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background: var(--nav-link-hover); opacity:0; transition: opacity .25s ease;
}
.nav-hover:hover::after{ opacity:1; }

/* Logo (sin offsets que rompan el centrado) */
.logo-navbar .logo-img{
  height: 48px; width: 48px; object-fit: cover; border-radius: 50%;
  transition: transform .3s ease; margin-left: 0; display:block;
}
.logo-navbar .logo-img:hover{ transform: scale(1.04); }

/* Estado de auth destacado en escritorio */
.navbar-right .nav-login{ color: var(--primario) !important; font-weight:800; text-shadow:0 1px 1px rgba(0,0,0,.18); }
.navbar-right .nav-login:hover{ color: var(--nav-link-hover) !important; }
.navbar-right .nav-register{ color: var(--nav-link-muted) !important; font-weight:600; }

/* =========================
   HAMBURGUESA + DRAWER (móvil)
   ========================= */
.hamburger{
  display:none;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:absolute;
  right:12px; top:50%; transform: translateY(-50%);
  z-index: 1001; /* por encima de la barra */
}
.hamburger span{
  position:absolute; left:8px; right:8px; height:2px; background:#fff; border-radius:2px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:21px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:21px; transform: rotate(-45deg); }

/* Capa oscura */
.backdrop{
  position: fixed; inset:0;
  background: rgba(0,0,0,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 99998; /* ✅ debajo del drawer, encima de todo */
}
.backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* Drawer (menú móvil) */
.drawer{
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 360px);
  height: 100dvh;
  background:
    radial-gradient(circle at 0% 100%, var(--cuaternario, transparent), transparent 0%),
    radial-gradient(circle at 10% 90%, var(--cuaternario, transparent), transparent 0%),
    var(--nav-bg);
  background-blend-mode: screen;
  color:#fff;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 99999;             /* ✅ por arriba de TODO */
  display:flex; flex-direction:column;
  overflow-y:auto;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open{ transform: translateX(0); }

/* Header del drawer pegado arriba siempre visible */
.drawer-header{
  position: sticky; top: 0;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(8px + env(safe-area-inset-top)) .95rem .75rem;
  background: inherit;
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index: 1;
}
.drawer-title{ color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:.2px; margin:0; }
.drawer-close{ width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1; }

/* Lista vertical */
.drawer-nav ul{
  display:flex; flex-direction:column; gap:0;
  list-style:none; margin:.25rem 0 1rem 0; padding:0;
}
.drawer-nav li{ border-bottom:1px solid rgba(255,255,255,.08); }
.drawer-nav a,
.drawer-nav button[type="submit"]{
  display:block; width:100%; text-align:left;
  padding:1rem 1.1rem;
  color: rgba(255,255,255,.95);
  text-decoration:none; font-weight:700; font-size:1.05rem; letter-spacing:.2px;
  background:transparent; border:0; cursor:pointer;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
.drawer-nav a:hover,
.drawer-nav button[type="submit"]:hover{ color:#fff; background: rgba(255,255,255,.06); }
.drawer-nav a:focus-visible,
.drawer-nav button[type="submit"]:focus-visible{ outline:2px solid var(--secundario); outline-offset:2px; border-radius:6px; }
.drawer-nav a.login-primary{ color: var(--primario) !important; font-weight:800; text-shadow:0 1px 1px rgba(0,0,0,.22); }
.drawer-nav a.login-primary:hover{ background: rgba(255,255,255,.08); }

/* Evitar scroll del body cuando el drawer está abierto */
body.no-scroll{ overflow:hidden; }

/* =========================
   RESPONSIVE
   ========================= */
/* Tablet/desktop: layout en 3 columnas y UL central verdaderamente centrado */
@media (min-width: 769px){
  .hamburger{ display:none; }
  .navbar-left,
  .navbar-center,
  .navbar-right{ display:flex !important; }
}

/* Tablet y móvil: barra puede apilar, pero mantenemos centrado general */
@media (max-width: 992px){
  .navbar-inner{ grid-template-columns: 1fr auto 1fr; }
}

/* Móvil: ocultar grupos de escritorio y usar hamburguesa */
@media (max-width: 768px){
  .navbar-inner{ display:flex; align-items:center; justify-content:center; }
  .navbar-left, .navbar-center, .navbar-right{ display:none !important; }
  .hamburger{ display:inline-block; }
}