/* =========================
   NAVBAR BASE
   ========================= */

:root{
  /* El bloque del medio va centrado exacto; dejalo en 0 */
  --center-offset: 0px;                 /* si querés microajuste, poné ±px */
  --nav-item-gap: 2rem;                 /* separación entre ítems del UL central */
  --group-gap: 1.25rem;                 /* separación entre grupos a cada lado de la línea */
  --divider-color: rgba(255,255,255,.18);
}

.custom-navbar {
  background: radial-gradient(circle at 20% 30%, var(--cuaternario), transparent 40%),
              radial-gradient(circle at 80% 20%, #5f3b21, transparent 40%),
              #000000;
  background-blend-mode: screen;
  color: #fff;
  padding: 0.5rem 1rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5vh;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border-radius: 0;
  z-index: 10;
}

/* Logo opcional */
.logo-navbar .logo-img {
  height: 60px; width: 60px; object-fit: cover; border-radius: 50%;
  transition: transform .8s ease-in-out;
  margin-left: 16.5rem; /* opcional */
}
.logo-navbar .logo-img:hover { transform: scale(1.05); }

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

/* Contenedores */
.navbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  display: flex; justify-content: space-between; align-items: center;
}
.navbar-left, .navbar-right { display:flex; align-items:center; }
.navbar-left  { justify-content:flex-start; }
.navbar-center{ flex:1; display:flex; justify-content:center; }
.navbar-right { justify-content:flex-end; gap:.8rem; flex-wrap:wrap; }

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

/* =========================
   ESCRITORIO: tres grupos en una sola fila
   ========================= */
@media (min-width: 769px){
  /* Grid 1fr | auto | 1fr para centrar el medio regardless de anchos */
  .navbar-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* izquierda | centro | derecha */
    align-items: center;
  }

  /* Acercamos los grupos al centro y dibujamos divisiones */
  .navbar-left{
    justify-self: end;                     /* Carrito pegado a la división */
    padding-right: var(--group-gap);
    border-right: 1px solid var(--divider-color);  /* ← división izquierda */
  }
  .navbar-center{
    justify-self: center;                   /* UL medio centrado exacto */
    transform: translateX(var(--center-offset));
  }
  .navbar-right{
    justify-self: start;                    /* Auth pegado a la división */
    padding-left: var(--group-gap);
    border-left: 1px solid var(--divider-color);   /* ← división derecha */
    gap: 1.25rem;                           /* Login y Registro uno al lado del otro */
  }

  /* Estilos de Auth (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(--secundario) !important;
  }
  .navbar-right .nav-register{
    color: rgb(148,148,148) !important;
    font-weight: 600;
  }
}

/* =========================
   HAMBURGUESA + DRAWER (móvil)
   ========================= */
.hamburger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; position: relative; padding: 0; z-index: 1200;
}
.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); }

/* Backdrop */
.backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 1090;
}
.backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* Drawer */
.drawer {
  position: fixed; top: 0; right: 0;
  width: min(86vw, 360px); height: 100dvh;
  background: radial-gradient(circle at 20% 30%, var(--cuaternario), transparent 40%),
              radial-gradient(circle at 80% 20%, #5f3b21, transparent 40%),
              #0b0b0b;
  background-blend-mode: screen;
  color: #fff;
  box-shadow: -12px 0 28px rgba(0,0,0,.55);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 1100;
  display: flex; flex-direction: column; overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}
.drawer.is-open { transform: translateX(0); }

.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem .95rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.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; }

/* Drawer: lista vertical + contraste */
.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: destacar "Iniciar sesión" */
.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); }

body.no-scroll { overflow: hidden; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 992px) {
  .custom-navbar { flex-direction: column; gap: .8rem; }
  .navbar-nav { flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
}

/* Móvil: ocultamos links de escritorio y mostramos hamburguesa */
@media (max-width: 768px) {
  .navbar-inner { flex-direction: row; gap: .5rem; }
  .navbar-left,
  .navbar-center,
  .navbar-right .nav-link { display: none !important; }

  .hamburger {
    display: inline-block;
    position: absolute;
    right: 12px; top: 50%; transform: translateY(-50%);
  }
}