/* =========================================================
   NAVBAR — Avante Optics
   Requiere las variables de :root definidas en tokens.css / index.css
   (--white, --line, --ink, --grey, --blue-600, --blue-700, --blue-50,
   --serif, --ease)
   ========================================================= */
.promo-bar{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  padding:9px 20px;
  background:var(--blue-600);
  color:var(--white);
}
.promo-bar p{
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.promo-icon{ width:17px; height:17px; flex-shrink:0; }
.promo-cta{
  padding:6px 16px; border-radius:100px;
  background:var(--white); color:var(--blue-600);
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.promo-cta:hover{ background:var(--blue-50); transform:translateY(-1px); }
@media (max-width:640px){
  .promo-bar{ padding:8px 14px; gap:8px; }
  .promo-bar p{ font-size:11px; white-space:normal; text-align:center; }
  .promo-cta{ padding:5px 12px; font-size:10px; flex-shrink:0; }
}

.header-outer{
  position:sticky; top:0; z-index:80;
  display:flex; justify-content:center;
  padding:18px 24px 0;
  background:transparent;
}
header{
  width:100%; max-width:1180px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:14px 22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 10px 30px -18px rgba(4,28,255,.16);
}
@media (max-width:900px){ header{ padding:12px 18px; } }
@media (max-width:720px){ .header-outer{ padding:14px 14px 0; } }

.nav-side{ display:flex; align-items:center; gap:30px; }
.nav-side.nav-right{ justify-content:flex-end; }

.mark{ display:flex; align-items:center; gap:10px; justify-self:center; }
.mark-logo{ height:52px; width:auto; max-width:none; object-fit:contain; flex-shrink:0; }
@media (max-width:720px){ .mark-logo{ height:44px; } }
.mark-icon{ width:28px; height:12px; flex-shrink:0; color:var(--blue-600); }
.mark-word{
  font-family:var(--serif);
  font-weight:500;
  font-size:19px;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
}
.mark-word span{ color:var(--blue-600); }

nav{ display:flex; gap:30px; }
.nav-left nav{ gap:22px; }
nav a{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--grey);
  position:relative;
  padding-bottom:2px;
  transition:color .2s var(--ease);
}
nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--blue-600); transition:width .3s var(--ease);
}
nav a:hover, nav a.active{ color:var(--ink); }
nav a.active::after, nav a:hover::after{ width:100%; }

.head-actions{ display:flex; align-items:center; gap:10px; }
.head-icons{ display:flex; align-items:center; gap:10px; }
.head-icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--ink);
  position:relative;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:100px;
  background:var(--blue-600); color:var(--white);
  font-size:10px; font-weight:700; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px var(--white);
}
.cart-badge-bump{ animation:cartBadgeBump .45s var(--ease); }
@keyframes cartBadgeBump{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.5); }
  60%{ transform:scale(0.85); }
  100%{ transform:scale(1); }
}
.head-icon-btn svg{ width:17px; height:17px; }
.head-icon-btn:hover{ background:var(--blue-600); border-color:var(--blue-600); color:var(--white); transform:translateY(-2px); }
.head-icon-btn:active{ transform:translateY(0) scale(0.94); }

.head-auth{ display:flex; align-items:center; gap:10px; margin-right:2px; }
.head-auth-login{
  padding:8px 19px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); border:1.5px solid var(--line); border-radius:100px; white-space:nowrap;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
.head-auth-login:hover{ color:var(--blue-600); border-color:var(--blue-600); background:var(--blue-50); transform:translateY(-2px); }
.head-auth-register{
  padding:9px 20px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:var(--blue-600); color:var(--white); border-radius:100px; white-space:nowrap;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.head-auth-register:hover{ background:var(--blue-700); transform:translateY(-2px); }
@media (max-width:900px){ .head-auth{ display:none; } .head-icons{ display:none; } .userbar{ display:none; } }

/* ---------- Userbar (sesión de cliente activa) ---------- */
.userbar{ position:relative; margin-right:2px; }
.userbar-trigger{
  display:flex; align-items:center; gap:9px;
  padding:5px 14px 5px 5px;
  border:1px solid var(--line); border-radius:999px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.userbar-trigger:hover{ border-color:var(--blue-300, var(--blue-600)); box-shadow:0 6px 16px -8px rgba(4,28,255,.3); }
.userbar-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--blue-600); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}
.userbar-name{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.userbar-caret{ width:14px; height:14px; color:var(--grey); transition:transform .25s var(--ease); flex-shrink:0; }
.userbar.is-open .userbar-caret{ transform:rotate(180deg); }

.userbar-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:90;
  width:230px;
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 26px 48px -18px rgba(4,28,255,.22);
  padding:8px;
  opacity:0; transform:translateY(-8px) scale(.96); transform-origin:top right;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.userbar.is-open .userbar-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.userbar-menu-head{ display:flex; align-items:center; gap:11px; padding:10px 10px 14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.userbar-menu-head .userbar-avatar{ width:38px; height:38px; font-size:14px; }
.userbar-menu-head-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.userbar-menu-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 10px; border-radius:12px;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.userbar-menu-link svg{ width:16px; height:16px; color:var(--grey); flex-shrink:0; transition:color .18s var(--ease); }
.userbar-menu-link:hover{ background:var(--blue-50); color:var(--blue-700); }
.userbar-menu-link:hover svg{ color:var(--blue-600); }
.userbar-menu-divider{ height:1px; background:var(--line); margin:6px 4px; }
.userbar-menu-link.logout{ color:#c0392b; }
.userbar-menu-link.logout svg{ color:#c0392b; }
.userbar-menu-link.logout:hover{ background:#fdecea; }

/* ---------- Badge de admin en el navbar público (sesión avante_admin_session) ---------- */
.admin-nav-badge{ position:relative; }
.admin-nav-badge-trigger{
  display:flex; align-items:center; gap:9px;
  padding:5px 14px 5px 5px;
  border:1px solid #FFA8A8; border-radius:999px;
  background:#FFF4F4;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.admin-nav-badge-trigger:hover{ box-shadow:0 6px 16px -8px rgba(226,46,46,.35); }
.admin-nav-badge-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:#E22E2E; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}
.admin-nav-badge-label{ font-size:13px; font-weight:700; color:#A61B1B; white-space:nowrap; }
.admin-nav-badge .userbar-caret{ color:#A61B1B; }
.admin-nav-badge.is-open .userbar-caret{ transform:rotate(180deg); }

.admin-nav-badge-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:90;
  width:200px;
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 26px 48px -18px rgba(226,46,46,.25);
  padding:8px;
  opacity:0; transform:translateY(-8px) scale(.96); transform-origin:top right;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.admin-nav-badge.is-open .admin-nav-badge-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.admin-nav-badge-menu .userbar-menu-link:hover{ background:#FFF4F4; color:#A61B1B; }
.admin-nav-badge-menu .userbar-menu-link:hover svg{ color:#E22E2E; }
@media (max-width:900px){ .admin-nav-badge{ display:none; } }

.hamburger{ display:none; flex-direction:column; gap:5px; width:24px; }
.hamburger span{ height:1.6px; width:100%; background:var(--ink); transition:.3s var(--ease); }
.hamburger.active span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

#mainNav{ display:none; }

@media (max-width:900px){
  header{ grid-template-columns:auto 1fr auto; }
  .nav-side.nav-left{ display:none; }
  .nav-side.nav-right nav{ display:none; }
  #mainNav{
    display:flex;
    position:fixed; inset:88px 14px auto 14px; z-index:70;
    background:var(--white);
    border:1px solid var(--line); border-radius:20px;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:10px 22px 18px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    box-shadow:0 20px 40px -20px rgba(4,28,255,.2);
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  #mainNav.nav-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  #mainNav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .hamburger{ display:flex; }
}