/* =========================
   multi-nav.css
   Navegacion superior unica (topbar + nav de 4 enlaces) compartida por
   public/multi/*.html y public/perfil/index-usuario.html.
   Antes estaba duplicada: en multi-overrides.css y en un <style> inline de
   perfil. Consolidada aqui = un solo sitio que editar.
   IMPORTANTE: en las paginas multi cargar SIEMPRE despues de
   multi-overrides.css para preservar la cascada (las @media de la nav deben
   ganar a la regla @media(max-width:520px) .multi-topbar que queda alli).
   ========================= */

/* ---- Topbar base + nav de 4 enlaces ---- */
.multi-topbar{
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 20px;
  padding-top: env(safe-area-inset-top);
  margin: 0 0 10px 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-sizing: border-box;
}

/* Marca / logo a la izquierda */
.multi-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  flex: 0 0 auto;
}
.multi-brand__icon{
  font-size: 22px;
  color: var(--lux-gold, #d1b06b);
}

/* Nav única (4 enlaces) */
.multi-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}
.multi-nav__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text-secondary, #555);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
  transition: background .15s ease, color .15s ease;
}
/* Icono oculto por defecto: >340px muestra SOLO texto. Solo se muestra a ≤340px. */
.multi-nav__link i{ font-size: 18px; display: none; }
.multi-nav__link:hover{
  background: rgba(0,0,0,.05);
  color: var(--color-text-primary, #111);
}
.multi-nav__link.is-active{
  background: var(--lux-gold, #d1b06b);
  color: #1a1410;
}

/* ---- Enlace "Inicio" estilo back (hook SSO .multi-topbar-back).
       Debe ir DESPUES de .multi-nav__link para conservar la cascada. ---- */
.multi-topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.multi-topbar-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--color-text-secondary, #666);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.multi-topbar-back:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary, #111);
}

.multi-topbar-back i { font-size: 15px; }

.multi-topbar-sep {
  color: #ccc;
  user-select: none;
}

/* Nav única en móvil: sigue ARRIBA, 4 enlaces en una fila */
@media (max-width: 768px) {
  .multi-topbar {
    gap: 8px;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top);
    min-height: 60px;
    flex-wrap: nowrap;
  }
  /* marca compacta: solo icono */
  .multi-brand__text { display: none; }
  .multi-brand__icon { font-size: 26px; }

  .multi-nav {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 2px;
    min-width: 0;
  }
  .multi-nav__link {
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    font-size: 13px;
    border-radius: 12px;
    color: #777;
  }
  .multi-nav__link i { font-size: 21px; }
  .multi-nav__link span { font-size: 13px; }
  .multi-nav__link:hover { background: transparent; }
  .multi-nav__link.is-active {
    background: transparent;
    color: var(--lux-gold, #d1b06b);
  }
}

/* En pantallas muy estrechas ocultamos la marca para que quepan los 4 enlaces */
@media (max-width: 480px) {
  .multi-brand { display: none; }
}

/* ≤360px: fuente y padding más compactos, gap mínimo garantizado entre items */
@media (max-width: 360px) {
  .multi-topbar { padding: 0 6px; padding-top: env(safe-area-inset-top); }
  .multi-nav { gap: 6px; }
  .multi-nav__link {
    padding: 4px 1px;
    gap: 2px;
    font-size: 12px;
  }
  .multi-nav__link i { font-size: 20px; }
  .multi-nav__link span { font-size: 12px; }
}

/* ≤340px (cubre 320px): solo icono, el texto queda en aria-label */
@media (max-width: 340px) {
  .multi-nav { gap: 4px; }
  .multi-nav__link span { display: none; }
  .multi-nav__link i { display: block; font-size: 24px; }
  .multi-nav__link { min-height: 44px; }
}