/*
============================================================================
BAQUEANO ECOSYSTEM - NAVBAR HORIZONTAL PRIMER NIVEL v10-FINAL
============================================================================
🎯 POR QUE: Navbar horizontal limpio que NUNCA muestra hamburguesa en desktop.
⚙️ COMO: 3 zonas flex, mega-panel dropdown centrado, hamburguesa solo en movil 768px.
📦 QUE: #mainNavbar, .exact-nav-menu, .global-more-dropdown, .exact-nav-actions
============================================================================
*/

.bq-global-navbar { display: none !important; }
body { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Scroll del documento: condición para que el header sticky funcione ──
   🎯 POR QUÉ: en 9 páginas (index, historia, perfil, nosotros, términos,
      privacidad, ambiental, BAQUI, 404) el header se iba con el scroll.
      Sus hojas propias ponen `body { overflow-x: hidden }` mientras
      baqueano-identity.css pone `html { overflow-x: clip }`. Con <html> sin
      overflow visible, el overflow del <body> ya no se traslada al viewport:
      el <body> se vuelve su propio contenedor de scroll y `position: sticky`
      se pega a un elemento que nunca se desplaza.
   ⚙️ CÓMO: el <body> nunca recorta con hidden/auto; `clip` evita el scroll
      lateral sin crear contenedor de scroll. `visible` va primero como
      respaldo para navegadores sin `clip`. El bloqueo de scroll del cajón
      móvil se aplica al <html>, que es quien realmente desplaza la página.
   📦 QUÉ: header visible en todas las páginas durante el scroll. */
html { overflow-x: hidden; overflow-x: clip; }
html body,
html body[class] { overflow-x: visible !important; overflow-x: clip !important; }
/* Bloqueo de scroll (cajón móvil y modales que ponen body.style.overflow =
   'hidden'): se aplica al <html>, el elemento que realmente se desplaza. */
html.nav-drawer-open,
html:has(> body.nav-drawer-open),
html:has(> body[style*="overflow: hidden"]),
html:has(> body[style*="overflow:hidden"]) { overflow: hidden !important; }

#mainNavbar {
  position: sticky !important; top: 0 !important;
  left: 0 !important; right: 0 !important;
  z-index: 9900 !important; width: 100% !important;
  height: 68px !important; min-height: 68px !important; max-height: 68px !important;
  margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important; overflow: visible !important;
  background: rgba(10, 32, 53, 0.93) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(22, 93, 111, 0.35) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.38) !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

#mainNavbar.scrolled {
  background: rgba(8, 24, 40, 0.98) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.58), 0 2px 8px rgba(22, 93, 111, 0.32) !important;
  border-bottom-color: rgba(246, 94, 1, 0.3) !important;
}

#mainNavbar .exact-container,
#mainNavbar .nav-inner {
  width: 100% !important; max-width: 1440px !important; height: 68px !important;
  margin: 0 auto !important; padding: 0 28px !important;
  box-sizing: border-box !important; display: flex !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 0 !important; position: relative !important; overflow: visible !important;
}

#mainNavbar .exact-nav-brand,
#mainNavbar .navbar-brand-pill {
  display: inline-flex !important; align-items: center !important;
  gap: 10px !important; text-decoration: none !important; color: #fff !important;
  flex-shrink: 0 !important; margin-right: 24px !important;
  outline: none !important; cursor: pointer !important;
  background: transparent !important; border: none !important; padding: 0 !important;
  transition: opacity 0.2s ease !important;
}

#mainNavbar .exact-nav-brand:focus-visible,
#mainNavbar .navbar-brand-pill:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
}

#mainNavbar .exact-nav-logo,
#mainNavbar .navbar-brand-logo {
  width: 36px !important; height: 36px !important; object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important;
}

#mainNavbar .exact-nav-brand:hover .exact-nav-logo { transform: scale(1.08) !important; }

#mainNavbar .exact-nav-brand-text,
#mainNavbar .navbar-brand-text {
  display: flex !important; flex-direction: column !important; line-height: 1 !important;
}

#mainNavbar .exact-nav-title,
#mainNavbar .navbar-brand-title {
  font-family: Montserrat, sans-serif !important; font-weight: 900 !important;
  font-size: 1.08rem !important; letter-spacing: 0.1em !important; color: #fff !important;
  margin: 0 !important; white-space: nowrap !important;
}

#mainNavbar .exact-nav-tagline,
#mainNavbar .navbar-brand-sub {
  font-family: Montserrat, sans-serif !important; font-weight: 700 !important;
  font-size: 0.46rem !important; letter-spacing: 0.22em !important; color: #F4E6C1 !important;
  text-transform: uppercase !important; margin-top: 3px !important;
  opacity: 0.9 !important; white-space: nowrap !important;
}

/* ---- MENU HORIZONTAL CENTRO (Patrón 21st MCP: Navigation Menu) ---- */
#mainNavbar .exact-nav-menu,
#mainNavbar .nav-links-menu {
  display: flex !important; align-items: center !important;
  gap: 3px !important; flex: 1 !important; height: 68px !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  overflow: visible !important; position: static !important;
  justify-content: center !important;
}

#mainNavbar .exact-nav-link,
#mainNavbar .nav-link-item,
#mainNavbar .nav-links-menu > a {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; padding: 7px 15px !important; height: 38px !important;
  color: rgba(255, 255, 255, 0.82) !important; text-decoration: none !important;
  font-family: Inter, sans-serif !important; font-size: 0.88rem !important;
  font-weight: 600 !important; white-space: nowrap !important; border-radius: 8px !important;
  border: none !important; background: transparent !important; outline: none !important;
  line-height: 1 !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

#mainNavbar .exact-nav-link:focus-visible,
#mainNavbar .nav-link-item:focus-visible,
#mainNavbar .nav-links-menu > a:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
  color: #fff !important;
}

#mainNavbar .exact-nav-link:hover,
#mainNavbar .nav-link-item:hover,
#mainNavbar .nav-links-menu > a:hover {
  background: rgba(22, 93, 111, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#mainNavbar .exact-nav-link.active,
#mainNavbar .nav-link-item.active,
#mainNavbar .nav-links-menu > a.active {
  color: #fff !important; font-weight: 700 !important;
  background: rgba(22, 93, 111, 0.35) !important;
  box-shadow: inset 0 -2px 0 #F65E01, 0 2px 8px rgba(246, 94, 1, 0.2) !important;
}

/* ---- DROPDOWN MAS (Patrón 21st MCP: Mega Menu Navbar) ---- */
#mainNavbar .nav-dropdown,
#mainNavbar .global-more-dropdown {
  position: relative !important; display: inline-flex !important;
  align-items: center !important; height: 68px !important;
}

#mainNavbar .exact-nav-dropdown-btn,
#mainNavbar .nav-dropdown-trigger {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  padding: 7px 15px !important; height: 38px !important;
  color: rgba(255, 255, 255, 0.82) !important; background: transparent !important;
  border: none !important; border-radius: 8px !important;
  font-family: Inter, sans-serif !important; font-size: 0.88rem !important;
  font-weight: 600 !important; cursor: pointer !important; outline: none !important;
  white-space: nowrap !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#mainNavbar .exact-nav-dropdown-btn:focus-visible,
#mainNavbar .nav-dropdown-trigger:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
}

#mainNavbar .exact-nav-dropdown-btn:hover,
#mainNavbar .global-more-dropdown.is-open .exact-nav-dropdown-btn {
  background: rgba(22, 93, 111, 0.25) !important; color: #fff !important;
  transform: translateY(-1px) !important;
}

#mainNavbar .exact-nav-dropdown-btn i {
  font-size: 0.72rem !important; color: #F65E01 !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#mainNavbar .global-more-dropdown.is-open .exact-nav-dropdown-btn i {
  transform: rotate(180deg) !important;
}

/* PANEL MEGA MENU — CENTRADO ABSOLUTO CON GLASSMORPHISM Y BORDES BAQUEANO */
#mainNavbar .global-mega-menu,
#mainNavbar .exact-dropdown-menu,
#globalMegaMenu,
.global-mega-menu {
  display: none; position: fixed !important;
  top: 72px !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important; margin: 0 auto !important;
  width: min(1080px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  background: linear-gradient(150deg, rgba(12, 41, 65, 0.98) 0%, rgba(8, 26, 44, 0.99) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(244, 230, 193, 0.24) !important; border-radius: 20px !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.75), 0 0 36px rgba(22, 93, 111, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 26px 30px !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important; z-index: 100050 !important; box-sizing: border-box !important;
}

#mainNavbar .global-more-dropdown.is-open .global-mega-menu,
#mainNavbar .global-more-dropdown.is-open .exact-dropdown-menu,
#globalMegaMenu.is-open,
.global-mega-menu.is-open {
  display: grid !important;
  animation: bqnPanelIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes bqnPanelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

#mainNavbar .global-mega-column {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
}

#mainNavbar .global-mega-column h2 {
  font-family: Montserrat, sans-serif !important; font-size: 0.72rem !important;
  font-weight: 800 !important; color: #F4E6C1 !important;
  text-transform: uppercase !important; letter-spacing: 0.12em !important;
  margin: 0 0 12px 0 !important; padding-bottom: 8px !important;
  border-bottom: 2px solid #F65E01 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}

#mainNavbar .global-mega-column h2 i { color: #F65E01 !important; font-size: 0.82rem !important; }

#mainNavbar .global-mega-column a {
  color: #9AB2C8 !important; font-family: Inter, sans-serif !important;
  font-size: 0.85rem !important; font-weight: 500 !important;
  text-decoration: none !important; padding: 6px 8px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  border-radius: 8px !important;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

#mainNavbar .global-mega-column a:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 1px !important;
  color: #fff !important;
}

#mainNavbar .global-mega-column a i {
  width: 18px !important; text-align: center !important; color: #5B7A98 !important;
  font-size: 0.82rem !important; transition: color 0.18s ease, transform 0.18s ease !important; flex-shrink: 0 !important;
}

#mainNavbar .global-mega-column a:hover {
  color: #fff !important; background: rgba(22, 93, 111, 0.28) !important;
  transform: translateX(4px) !important;
}

#mainNavbar .global-mega-column a:hover i {
  color: #F65E01 !important;
  transform: scale(1.12) !important;
}

#mainNavbar a.global-admin-link {
  margin-top: 10px !important; padding: 8px 12px !important;
  background: rgba(22, 93, 111, 0.22) !important;
  border: 1px solid rgba(22, 93, 111, 0.45) !important; border-radius: 10px !important;
  color: #F4E6C1 !important; font-weight: 700 !important; font-size: 0.78rem !important;
  flex-direction: column !important; align-items: flex-start !important;
  gap: 2px !important; transform: none !important;
}

#mainNavbar a.global-admin-link:hover {
  background: #165D6F !important; color: #fff !important; transform: none !important;
  box-shadow: 0 4px 14px rgba(22, 93, 111, 0.4) !important;
}
#mainNavbar a.global-admin-link small { color: #7B9AB6 !important; font-size: 0.65rem !important; font-weight: 400 !important; }

/* ---- ACCIONES DERECHA (Patrón 21st MCP: Utility Actions & Badges) ---- */
#mainNavbar .exact-nav-actions,
#mainNavbar .global-nav-actions {
  display: flex !important; align-items: center !important;
  gap: 9px !important; flex-shrink: 0 !important; margin-left: 20px !important;
}

#mainNavbar .global-search,
#mainNavbar .global-favs,
#mainNavbar .navbar-search-btn,
#mainNavbar .navbar-favs-btn {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; text-decoration: none !important;
  font-size: 0.82rem !important; cursor: pointer !important;
  outline: none !important; flex-shrink: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

#mainNavbar .global-search:focus-visible,
#mainNavbar .global-favs:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
}

#mainNavbar .global-search:hover { background: #165D6F !important; border-color: #165D6F !important; transform: scale(1.05) !important; }
#mainNavbar .global-favs:hover { background: rgba(246, 94, 1, 0.2) !important; border-color: #F65E01 !important; color: #F65E01 !important; transform: scale(1.05) !important; }

#mainNavbar .sos-quick-btn,
#mainNavbar .navbar-sos-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; padding: 0 15px !important; height: 36px !important;
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 18px !important;
  font-family: Montserrat, sans-serif !important; font-size: 0.8rem !important;
  font-weight: 800 !important; cursor: pointer !important; outline: none !important;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.42) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}

#mainNavbar .sos-quick-btn:focus-visible,
#mainNavbar .navbar-sos-btn:focus-visible {
  outline: 2px solid #F4E6C1 !important;
  outline-offset: 2px !important;
}

#mainNavbar .sos-quick-btn:hover {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-1px) !important;
}

#mainNavbar .sos-quick-btn i {
  animation: bqnSosPulse 2s infinite ease-in-out !important;
}

@keyframes bqnSosPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.85; }
}

#mainNavbar .exact-nav-btn-login,
#mainNavbar .global-session,
#mainNavbar .navbar-login-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 7px !important; padding: 0 17px !important; height: 36px !important;
  background: linear-gradient(135deg, #165D6F 0%, #0F4553 100%) !important; color: #fff !important;
  border: 1px solid rgba(244, 230, 193, 0.25) !important; border-radius: 18px !important;
  font-family: Montserrat, sans-serif !important; font-size: 0.82rem !important;
  font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important;
  outline: none !important; box-shadow: 0 2px 12px rgba(22, 93, 111, 0.38) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}

#mainNavbar .exact-nav-btn-login:focus-visible,
#mainNavbar .global-session:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
}

#mainNavbar .exact-nav-btn-login:hover {
  background: linear-gradient(135deg, #1C748B 0%, #165D6F 100%) !important;
  box-shadow: 0 4px 18px rgba(22, 93, 111, 0.55) !important;
  transform: translateY(-1px) !important;
}

#mainNavbar .global-language,
#mainNavbar .navbar-lang-pill {
  display: inline-flex !important; align-items: center !important;
  gap: 4px !important; padding: 0 11px !important; height: 32px !important;
  background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(244, 230, 193, 0.2) !important;
  border-radius: 16px !important; color: #F4E6C1 !important;
  font-family: Inter, sans-serif !important; font-size: 0.78rem !important;
  font-weight: 600 !important; cursor: pointer !important; outline: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important; flex-shrink: 0 !important;
}

#mainNavbar .global-language:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
}

#mainNavbar .global-language:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(244, 230, 193, 0.4) !important;
}

/* SUPRIMIR OBSOLETOS */
#mainNavbar .global-weather, #mainNavbar .navbar-weather-pill,
#mainNavbar .global-theme, #mainNavbar .navbar-theme-pill,
#mainNavbar .nav-vertical-divider, #mainNavbar .nav-pill-indicator,
.nav-drawer-header, .nav-ops-group-title, .nav-drawer-footer { display: none !important; }

/* HAMBURGUESA: OCULTA EN DESKTOP Y TABLET */
#mainNavbar .exact-nav-mobile-toggle,
#mainNavbar .mobile-nav-toggle {
  display: none !important; width: 40px !important; height: 40px !important;
  border-radius: 10px !important; background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important;
  align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important; cursor: pointer !important; outline: none !important;
  flex-shrink: 0 !important; transition: background 0.2s ease, transform 0.2s ease !important;
}

#mainNavbar .exact-nav-mobile-toggle:focus-visible,
#mainNavbar .mobile-nav-toggle:focus-visible {
  outline: 2px solid #F65E01 !important;
  outline-offset: 2px !important;
}
/* PANTALLA INTERMEDIA (961px a 1000px): comprimir espaciado sin romper el menú horizontal.
   Por debajo de 961px el menú pasa al cajón con hamburguesa (mismo corte que styles.css),
   así nunca queda una franja de anchos sin menú visible ni botón para abrirlo. */
@media (max-width: 1000px) and (min-width: 961px) {
  #mainNavbar .exact-container, #mainNavbar .nav-inner { padding: 0 16px !important; }
  #mainNavbar .exact-nav-brand { margin-right: 12px !important; }
  #mainNavbar .exact-nav-link, #mainNavbar .nav-links-menu > a,
  #mainNavbar .exact-nav-dropdown-btn { padding: 6px 10px !important; font-size: 0.82rem !important; }
  #mainNavbar .global-language, #mainNavbar .navbar-lang-pill { display: none !important; }
  #mainNavbar .exact-nav-btn-login span { display: none !important; }
  #mainNavbar .exact-nav-btn-login, #mainNavbar .global-session {
    width: 36px !important; height: 36px !important;
    padding: 0 !important; border-radius: 50% !important; justify-content: center !important;
  }
}

/* MOVIL (Patrón 21st MCP: Off-Canvas Drawer con Backdrop Blur & Touch Ergonomics) */
@media (max-width: 960px) {
  #mainNavbar .exact-nav-mobile-toggle,
  #mainNavbar .mobile-nav-toggle { display: inline-flex !important; }

  #mainNavbar .exact-nav-menu,
  #mainNavbar .nav-links-menu { display: none !important; }

  #mainNavbar .exact-nav-menu.mobile-open,
  #mainNavbar .nav-links-menu.mobile-open {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 68px !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(8, 24, 40, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 22px 18px !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
    z-index: 9800 !important;
    border-top: 1px solid rgba(22, 93, 111, 0.4) !important;
    gap: 8px !important; align-items: stretch !important; justify-content: flex-start !important;
    animation: bqnMobileDrawerIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  @keyframes bqnMobileDrawerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #mainNavbar .exact-nav-menu.mobile-open .exact-nav-link,
  #mainNavbar .nav-links-menu.mobile-open > a {
    width: 100% !important; padding: 14px 18px !important; min-height: 48px !important;
    font-size: 1rem !important; justify-content: flex-start !important;
    border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
  }

  #mainNavbar .exact-nav-menu.mobile-open .exact-nav-link:hover,
  #mainNavbar .exact-nav-menu.mobile-open .exact-nav-link.active {
    background: rgba(22, 93, 111, 0.35) !important;
    border-color: rgba(246, 94, 1, 0.5) !important;
  }

  #mainNavbar .global-more-dropdown {
    width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important;
  }

  #mainNavbar .exact-nav-dropdown-btn {
    width: 100% !important; padding: 14px 18px !important; min-height: 48px !important;
    font-size: 1rem !important; justify-content: space-between !important;
    border-radius: 12px !important; background: rgba(22, 93, 111, 0.2) !important;
    border: 1px solid rgba(22, 93, 111, 0.4) !important;
  }

  #mainNavbar .global-more-dropdown.is-open .global-mega-menu,
  #mainNavbar .global-more-dropdown.is-open .exact-dropdown-menu {
    position: static !important; transform: none !important;
    width: 100% !important; grid-template-columns: 1fr !important;
    gap: 18px !important; padding: 16px 0 8px 0 !important;
    background: transparent !important; box-shadow: none !important;
    border: none !important; border-radius: 0 !important; animation: none !important;
  }

  #mainNavbar .global-mega-column {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    padding: 14px 14px !important;
  }

  #mainNavbar .global-mega-column a {
    padding: 10px 10px !important; min-height: 44px !important;
    font-size: 0.92rem !important;
  }

  #mainNavbar .exact-nav-tagline, #mainNavbar .navbar-brand-sub { display: none !important; }
  #mainNavbar .global-language { display: none !important; }
  #mainNavbar .exact-nav-btn-login span { display: none !important; }
  #mainNavbar .exact-nav-btn-login, #mainNavbar .global-session {
    width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 50% !important; justify-content: center !important;
  }
  #mainNavbar .exact-nav-actions, #mainNavbar .global-nav-actions { gap: 8px !important; margin-left: 8px !important; }

  .nav-drawer-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 9750; border: none; cursor: pointer;
  }
  body.nav-drawer-open .nav-drawer-backdrop { display: block !important; }
  body.nav-drawer-open { overflow: hidden !important; }
}

@media (max-width: 480px) {
  #mainNavbar { height: 62px !important; min-height: 62px !important; max-height: 62px !important; }
  #mainNavbar .exact-container, #mainNavbar .nav-inner { height: 62px !important; padding: 0 14px !important; }
  #mainNavbar .exact-nav-menu.mobile-open,
  #mainNavbar .nav-links-menu.mobile-open { top: 62px !important; }

  /*
   * 🎯 POR QUÉ: En anchos móviles extremos, las acciones secundarias excedían
   * el viewport y empujaban la hamburguesa fuera de pantalla.
   * ⚙️ CÓMO: Se priorizan marca y navegación; búsqueda, idioma, sesión y SOS
   * continúan disponibles dentro del menú desplegable global.
   * 📦 QUÉ: Barra compacta, estable y sin desplazamiento horizontal hasta 320 px.
   */
  #mainNavbar .global-search,
  #mainNavbar .navbar-search-btn,
  #mainNavbar .sos-quick-btn,
  #mainNavbar .navbar-sos-btn,
  #mainNavbar .global-language,
  #mainNavbar .navbar-lang-pill,
  #mainNavbar .exact-nav-btn-login,
  #mainNavbar .global-session,
  #mainNavbar .navbar-login-btn { display: none !important; }

  #mainNavbar .exact-nav-actions,
  #mainNavbar .global-nav-actions {
    margin-left: auto !important;
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* ============================================================================
   REFINAMIENTO VISUAL v11 — CÁPSULA TERRITORIAL
   🎯 POR QUÉ: dar jerarquía, aire y una presencia distintiva sin saturar.
   ⚙️ CÓMO: cápsula flotante, brillo ambiental sobrio, foco accesible y panel
      editorial con columnas claramente delimitadas.
   📦 QUÉ: acabado de escritorio, transición compacta y drawer móvil táctil.
   ============================================================================ */
@media (min-width: 961px) {
  #mainNavbar {
    top: 12px !important;
    width: min(1400px, calc(100% - 32px)) !important;
    height: 64px !important; min-height: 64px !important; max-height: 64px !important;
    margin: 0 auto 12px !important;
    border: 1px solid rgba(244,230,193,0.14) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 12% -80%, rgba(246,94,1,0.22), transparent 34%),
      linear-gradient(118deg, rgba(8,31,49,0.97), rgba(11,42,58,0.96) 54%, rgba(8,31,49,0.98)) !important;
    box-shadow:
      0 18px 50px rgba(15,23,42,0.28),
      0 4px 14px rgba(15,23,42,0.18),
      inset 0 1px 0 rgba(255,255,255,0.09) !important;
    isolation: isolate !important;
  }

  #mainNavbar::before {
    content: "" !important; display: block !important;
    position: absolute !important; inset: 0 !important; z-index: -1 !important;
    border-radius: inherit !important; pointer-events: none !important;
    background: linear-gradient(90deg, rgba(246,94,1,0.09), transparent 24%, transparent 76%, rgba(22,93,111,0.16)) !important;
  }

  #mainNavbar.scrolled {
    top: 8px !important;
    background: rgba(7,29,45,0.985) !important;
    box-shadow: 0 22px 58px rgba(15,23,42,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }

  #mainNavbar .exact-container,
  #mainNavbar .nav-inner { height: 64px !important; padding: 0 18px 0 20px !important; }

  #mainNavbar .exact-nav-brand,
  #mainNavbar .navbar-brand-pill {
    margin-right: 20px !important; padding-right: 18px !important;
    border-right: 1px solid rgba(244,230,193,0.13) !important;
  }

  #mainNavbar .exact-nav-logo,
  #mainNavbar .navbar-brand-logo { width: 38px !important; height: 38px !important; }

  #mainNavbar .exact-nav-menu,
  #mainNavbar .nav-links-menu { height: 64px !important; gap: 3px !important; }

  #mainNavbar .nav-dropdown,
  #mainNavbar .global-more-dropdown { height: 64px !important; }

  #mainNavbar .exact-nav-link,
  #mainNavbar .nav-link-item,
  #mainNavbar .nav-links-menu > a,
  #mainNavbar .exact-nav-dropdown-btn,
  #mainNavbar .nav-dropdown-trigger {
    position: relative !important; height: 40px !important; border-radius: 13px !important;
    padding-inline: 13px !important; color: rgba(255,255,255,0.76) !important;
  }

  #mainNavbar .exact-nav-link::after,
  #mainNavbar .nav-links-menu > a::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 2px; border-radius: 999px;
    background: #F65E01; transform: translateX(-50%);
    transition: width 180ms ease;
  }

  #mainNavbar .exact-nav-link:hover::after,
  #mainNavbar .exact-nav-link.active::after,
  #mainNavbar .nav-links-menu > a:hover::after,
  #mainNavbar .nav-links-menu > a.active::after { width: 22px; }

  #mainNavbar .exact-nav-link.active,
  #mainNavbar .nav-link-item.active,
  #mainNavbar .nav-links-menu > a.active {
    background: linear-gradient(180deg, rgba(22,93,111,0.5), rgba(22,93,111,0.22)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 7px 18px rgba(0,0,0,0.16) !important;
  }

  #mainNavbar .global-mega-menu,
  #mainNavbar .exact-dropdown-menu {
    top: 88px !important; width: min(1040px, calc(100vw - 48px)) !important;
    padding: 18px !important; gap: 10px !important; border-radius: 24px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(246,94,1,0.12), transparent 32%),
      linear-gradient(150deg, rgba(12,44,62,0.985), rgba(6,27,43,0.99)) !important;
    border-color: rgba(244,230,193,0.16) !important;
    box-shadow: 0 32px 84px rgba(3,12,22,0.7), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }

  #mainNavbar .global-mega-column {
    padding: 16px !important; gap: 5px !important; border-radius: 16px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
  }

  #mainNavbar .global-mega-column:hover {
    background: rgba(22,93,111,0.11) !important;
    border-color: rgba(244,230,193,0.11) !important;
  }

  #mainNavbar .global-mega-column h2 {
    min-height: 31px !important; margin-bottom: 7px !important;
    border-bottom-color: rgba(246,94,1,0.65) !important;
  }

  #mainNavbar .global-mega-column a { min-height: 32px !important; padding: 7px 8px !important; }

  #mainNavbar .exact-nav-actions,
  #mainNavbar .global-nav-actions {
    gap: 7px !important; margin-left: 16px !important; padding-left: 15px !important;
    border-left: 1px solid rgba(244,230,193,0.13) !important;
  }

  #mainNavbar .global-search,
  #mainNavbar .global-favs,
  #mainNavbar .navbar-search-btn,
  #mainNavbar .navbar-favs-btn,
  #mainNavbar .global-language,
  #mainNavbar .navbar-lang-pill {
    background: rgba(255,255,255,0.055) !important;
    border-color: rgba(244,230,193,0.13) !important;
  }

  #mainNavbar .exact-nav-btn-login,
  #mainNavbar .global-session,
  #mainNavbar .navbar-login-btn {
    height: 38px !important; border-radius: 13px !important;
    background: linear-gradient(135deg, #0F8F6E, #4A7A5A) !important;
    box-shadow: 0 9px 22px rgba(16,185,129,0.22), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  }

  #mainNavbar .sos-quick-btn,
  #mainNavbar .navbar-sos-btn {
    height: 38px !important; border-radius: 13px !important;
    background: linear-gradient(135deg, #C81E32, #EF3340) !important;
    box-shadow: 0 9px 22px rgba(220,38,38,0.2), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }
}

#mainNavbar :is(a,button):focus-visible {
  outline: 3px solid rgba(244,230,193,0.9) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1100px) and (min-width: 961px) {
  #mainNavbar { width: calc(100% - 20px) !important; }
  #mainNavbar .exact-container, #mainNavbar .nav-inner { padding-inline: 12px !important; }
  #mainNavbar .exact-nav-brand { margin-right: 8px !important; padding-right: 10px !important; }
  #mainNavbar .exact-nav-tagline { display: none !important; }
  #mainNavbar .exact-nav-link, #mainNavbar .nav-links-menu > a,
  #mainNavbar .exact-nav-dropdown-btn { padding-inline: 8px !important; font-size: 0.76rem !important; }
  #mainNavbar .exact-nav-actions, #mainNavbar .global-nav-actions { margin-left: 8px !important; padding-left: 8px !important; gap: 5px !important; }
  #mainNavbar .global-favs, #mainNavbar .navbar-favs-btn { display: none !important; }
}

@media (max-width: 960px) {
  #mainNavbar {
    background: linear-gradient(135deg, #09253A, #0C3444) !important;
    border-bottom-color: rgba(244,230,193,0.12) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,0.3) !important;
  }
  #mainNavbar .exact-nav-menu.mobile-open,
  #mainNavbar .nav-links-menu.mobile-open {
    width: min(92vw, 420px) !important; left: auto !important;
    height: calc(100dvh - 68px) !important; min-height: 0 !important; max-height: none !important;
    flex: none !important;
    padding: 18px !important; gap: 8px !important;
    background: linear-gradient(160deg, rgba(9,37,58,0.995), rgba(8,28,44,0.995)) !important;
    border-left: 1px solid rgba(244,230,193,0.12) !important;
    box-shadow: -24px 0 60px rgba(0,0,0,0.42) !important;
  }
  #mainNavbar .exact-nav-menu.mobile-open .exact-nav-link,
  #mainNavbar .nav-links-menu.mobile-open > a,
  #mainNavbar .exact-nav-dropdown-btn {
    min-height: 48px !important; padding: 13px 15px !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    background: rgba(255,255,255,0.035) !important;
  }
  #mainNavbar .global-more-dropdown,
  #mainNavbar .exact-nav-dropdown-btn { width: 100% !important; }
  #mainNavbar .exact-nav-dropdown-btn { justify-content: flex-start !important; }
  #mainNavbar .global-mega-column {
    padding: 12px !important; border-radius: 14px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
  }
  #mainNavbar .exact-nav-mobile-toggle,
  #mainNavbar .mobile-nav-toggle {
    border-radius: 12px !important; background: rgba(246,94,1,0.13) !important;
    border-color: rgba(246,94,1,0.32) !important;
  }
}

@media (max-width: 520px) {
  #mainNavbar .exact-container,
  #mainNavbar .nav-inner { padding-inline: 10px !important; }
  #mainNavbar .exact-nav-brand,
  #mainNavbar .navbar-brand-pill { margin-right: 4px !important; }
  #mainNavbar .exact-nav-actions,
  #mainNavbar .global-nav-actions { gap: 4px !important; margin-left: 4px !important; }
  #mainNavbar .global-search,
  #mainNavbar .global-favs,
  #mainNavbar .navbar-search-btn,
  #mainNavbar .navbar-favs-btn { display: none !important; }
  #mainNavbar .sos-quick-btn,
  #mainNavbar .navbar-sos-btn,
  #mainNavbar .exact-nav-btn-login,
  #mainNavbar .global-session,
  #mainNavbar .navbar-login-btn,
  #mainNavbar .exact-nav-mobile-toggle,
  #mainNavbar .mobile-nav-toggle {
    width: 36px !important; min-width: 36px !important; height: 36px !important;
    padding: 0 !important; justify-content: center !important; border-radius: 12px !important;
  }
  #mainNavbar .sos-quick-btn span,
  #mainNavbar .navbar-sos-btn span { display: none !important; }
}

@media (max-width: 480px) {
  #mainNavbar .exact-nav-menu.mobile-open,
  #mainNavbar .nav-links-menu.mobile-open { height: calc(100dvh - 62px) !important; }
}

@media (max-width: 350px) {
  #mainNavbar .exact-nav-title,
  #mainNavbar .navbar-brand-title { font-size: 0.92rem !important; letter-spacing: 0.06em !important; }
  #mainNavbar .exact-nav-logo,
  #mainNavbar .navbar-brand-logo { width: 32px !important; height: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #mainNavbar, #mainNavbar *, #mainNavbar *::before, #mainNavbar *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   🧭 BAQUEANO — ESTILOS CLIMA DE NICARAGUA (WIDGET DE ALTA GAMA)
   Paleta: #165D6F (Teal) | #F65E01 (Fuego) | #F4E6C1 (Arena) | #0F172A (Noche)
   ============================================================================ */
#mainNavbar .navbar-weather-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  height: 34px !important;
  background: rgba(22, 93, 111, 0.28) !important;
  border: 1px solid rgba(244, 230, 193, 0.25) !important;
  border-radius: 17px !important;
  color: #F4E6C1 !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  outline: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

#mainNavbar .navbar-weather-pill:hover,
#mainNavbar .navbar-weather-pill:focus-visible {
  background: rgba(22, 93, 111, 0.55) !important;
  border-color: #F65E01 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(246, 94, 1, 0.3) !important;
}

#mainNavbar .navbar-weather-pill i {
  font-size: 0.95rem !important;
  transition: transform 0.3s ease !important;
}

#mainNavbar .navbar-weather-pill:hover i {
  transform: rotate(15deg) scale(1.15) !important;
}

#mainNavbar .navbar-weather-pill .weather-temp {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

#mainNavbar .navbar-weather-pill .weather-label {
  color: #F4E6C1 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

@media (max-width: 900px) {
  #mainNavbar .navbar-weather-pill .weather-label {
    display: none !important;
  }
}

@media (max-width: 580px) {
  #mainNavbar .navbar-weather-pill {
    padding: 0 8px !important;
    gap: 4px !important;
  }
}

/* Modal Emergente de Clima Territorial */
.bq-weather-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100050 !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
  padding: 20px !important;
}

.bq-weather-modal-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.bq-weather-card {
  position: relative !important;
  width: 100% !important;
  max-width: 540px !important;
  background: #0F172A !important;
  border: 1px solid rgba(244, 230, 193, 0.25) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(22, 93, 111, 0.3) !important;
  color: #FFFFFF !important;
  font-family: Montserrat, sans-serif !important;
  transform: translateY(20px) scale(0.96) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bq-weather-modal-backdrop.is-open .bq-weather-card {
  transform: translateY(0) scale(1) !important;
}

.bq-weather-close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  color: #F4E6C1 !important;
  font-size: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.bq-weather-close:hover {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border-color: #DC2626 !important;
}

.bq-weather-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.bq-weather-header .weather-header-icon {
  font-size: 2.4rem !important;
  color: #F65E01 !important;
  filter: drop-shadow(0 0 12px rgba(246, 94, 1, 0.4)) !important;
}

.bq-weather-header h3 {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #F4E6C1 !important;
}

.bq-weather-header p {
  margin: 4px 0 0 0 !important;
  font-size: 0.82rem !important;
  color: rgba(244, 230, 193, 0.75) !important;
}

.bq-weather-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 480px) {
  .bq-weather-grid {
    grid-template-columns: 1fr !important;
  }
}

.bq-weather-item {
  background: rgba(22, 93, 111, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.bq-weather-item:hover {
  background: rgba(22, 93, 111, 0.35) !important;
  border-color: rgba(246, 94, 1, 0.4) !important;
  transform: translateY(-2px) !important;
}

.bq-weather-item .city {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #F4E6C1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.bq-weather-item .city i {
  color: #F65E01 !important;
  font-size: 0.85rem !important;
}

.bq-weather-item .condition {
  font-size: 0.74rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.bq-weather-item .temp {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.bq-weather-footer {
  text-align: center !important;
  font-size: 0.78rem !important;
  color: rgba(244, 230, 193, 0.75) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 14px !important;
}

/* ============================================================================
   🧭 BUSCADOR INTELIGENTE DEL NAVBAR — Estilos v12
   🎯 POR QUÉ: Buscador real donde el usuario escribe, con sugerencias en vivo.
   ⚙️ CÓMO: Pill expandible con transición suave. Oculto en móvil (tiene hero search).
   📦 QUÉ: .navbar-search-wrapper, .navbar-search-form, .navbar-search-input
   ============================================================================ */

/* ── utilidad screen-reader ── */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ── contenedor del buscador ── */
#mainNavbar .navbar-search-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
  height: 40px !important;
}

/* ── formulario / pill ── */
#mainNavbar .navbar-search-form {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  height: 36px !important;
  width: 160px !important;
  min-width: 36px !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  padding: 0 10px 0 10px !important;
  transition:
    width 0.3s cubic-bezier(0.4,0,0.2,1),
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#mainNavbar .navbar-search-wrapper.is-focused .navbar-search-form,
#mainNavbar .navbar-search-form:focus-within {
  width: 240px !important;
  background: rgba(22,93,111,0.22) !important;
  border-color: rgba(244,230,193,0.28) !important;
  box-shadow: 0 0 0 3px rgba(22,93,111,0.18), 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* ── ícono lupa ── */
#mainNavbar .navbar-search-icon {
  color: rgba(244,230,193,0.65) !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  transition: color 0.2s !important;
  margin-right: 7px !important;
}

#mainNavbar .navbar-search-wrapper.is-focused .navbar-search-icon,
#mainNavbar .navbar-search-form:focus-within .navbar-search-icon {
  color: #F65E01 !important;
}

/* ── campo de texto ── */
#mainNavbar .navbar-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
  min-width: 0 !important;
  caret-color: #F65E01 !important;
}

#mainNavbar .navbar-search-input::placeholder {
  color: rgba(244,230,193,0.42) !important;
  font-weight: 400 !important;
}

/* Quitar UI nativa del tipo search */
#mainNavbar .navbar-search-input::-webkit-search-cancel-button,
#mainNavbar .navbar-search-input::-webkit-search-decoration { display: none !important; }

/* ── botón limpiar ── */
#mainNavbar .navbar-search-clear {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-left: 5px !important;
  transition: background 0.15s, color 0.15s !important;
}

#mainNavbar .navbar-search-clear:hover {
  background: #F65E01 !important;
  color: #fff !important;
}

/* ── ocultar buscador en tablet pequeña y móvil ── */
@media (max-width: 900px) {
  #mainNavbar .navbar-search-wrapper { display: none !important; }
}

/* ── en desktop, permitir expansión mayor ── */
@media (min-width: 1200px) {
  #mainNavbar .navbar-search-form { width: 180px !important; }
  #mainNavbar .navbar-search-wrapper.is-focused .navbar-search-form,
  #mainNavbar .navbar-search-form:focus-within { width: 280px !important; }
}

/* ============================================================================
   CUENTA EN EL HEADER GLOBAL + HERRAMIENTAS DEL CAJÓN MÓVIL (2026-10-03)
   🎯 POR QUÉ: con sesión el header solo mostraba "Cerrar sesión"; y en celular
      (≤480 px) idioma, SOS y sesión quedaban ocultos sin alternativa.
   ⚙️ CÓMO: .bq-account-* lo pinta user-session.js (avatar, nombre, menú con
      Ops Center solo para admin/super_admin). .bq-drawer-tools vive dentro del
      cajón y solo se muestra ≤960 px. Paleta oficial; foco visible.
   📦 QUÉ: INVITADO "Iniciar sesión" · USUARIO avatar+nombre · ADMIN/SUPERADMIN
      avatar+nombre + Ops Center; cuenta, idioma y SOS siempre accesibles.
   ============================================================================ */
#mainNavbar .bq-account-slot { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
#mainNavbar .bq-account-trigger {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  height: 38px !important; padding: 0 12px 0 4px !important; border-radius: 19px !important;
  background: rgba(255, 255, 255, 0.07) !important; color: #fff !important;
  border: 1px solid rgba(244, 230, 193, 0.22) !important; cursor: pointer !important;
  font: 700 0.8rem/1 Montserrat, sans-serif !important; white-space: nowrap !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
#mainNavbar .bq-account-trigger:hover,
#mainNavbar .bq-account-slot.is-open .bq-account-trigger {
  background: rgba(22, 93, 111, 0.45) !important; border-color: rgba(246, 94, 1, 0.55) !important;
}
#mainNavbar .bq-account-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
#mainNavbar .bq-account-caret { font-size: 0.65rem; opacity: 0.8; transition: transform 0.2s ease; }
#mainNavbar .bq-account-slot.is-open .bq-account-caret { transform: rotate(180deg); }
.bq-account-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: #F65E01; color: #fff;
  font: 800 0.85rem/1 Montserrat, sans-serif; box-shadow: 0 0 0 2px rgba(244, 230, 193, 0.35);
}
.bq-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mainNavbar .bq-account-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 100060;
  width: min(280px, calc(100vw - 20px)); padding: 8px; border-radius: 16px;
  background: rgba(9, 32, 50, 0.98); border: 1px solid rgba(244, 230, 193, 0.16);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: bqAccountIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#mainNavbar .bq-account-menu[hidden] { display: none !important; }
@keyframes bqAccountIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bq-account-head { display: grid; gap: 3px; padding: 10px 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 6px; }
.bq-account-head strong { color: #fff; font: 800 0.9rem/1.25 Montserrat, sans-serif; overflow-wrap: anywhere; }
.bq-account-head span { color: #94A3B8; font-size: 0.74rem; overflow-wrap: anywhere; }
.bq-account-role {
  justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 99px;
  background: rgba(22, 93, 111, 0.35); color: #F4E6C1 !important; font-weight: 700; font-size: 0.68rem !important;
}
.bq-account-role.is-admin { background: rgba(246, 94, 1, 0.2); color: #FDBA74 !important; }
#mainNavbar .bq-account-item {
  display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important;
  min-height: 42px !important; padding: 9px 12px !important; border-radius: 10px !important;
  color: #E2E8F0 !important; background: transparent !important; border: 0 !important;
  font: 600 0.86rem/1.2 Inter, system-ui, sans-serif !important; text-decoration: none !important;
  text-align: left !important; cursor: pointer !important; box-sizing: border-box !important;
}
#mainNavbar .bq-account-item i { width: 18px; text-align: center; color: #F4E6C1; }
#mainNavbar .bq-account-item:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.07) !important; }
#mainNavbar .bq-account-item.is-ops i { color: #F65E01; }
#mainNavbar .bq-account-item.is-ops { color: #FDBA74 !important; }
#mainNavbar .bq-account-item.is-logout { color: #FCA5A5 !important; }
#mainNavbar .bq-account-item.is-logout i { color: #FCA5A5; }
#mainNavbar .bq-account-item[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
#mainNavbar .bq-account-item.is-primary {
  justify-content: center !important; background: linear-gradient(135deg, #165D6F, #0F4553) !important;
  color: #fff !important; font-weight: 700 !important; border: 1px solid rgba(244, 230, 193, 0.22) !important;
}

/* Herramientas del cajón: solo dentro del cajón móvil */
#mainNavbar .bq-drawer-tools { display: none !important; }
@media (max-width: 960px) {
  #mainNavbar .nav-links-menu.mobile-open .bq-drawer-tools,
  #mainNavbar .exact-nav-menu.mobile-open .bq-drawer-tools {
    display: grid !important; gap: 8px; margin-top: auto; padding-top: 14px;
    border-top: 1px solid rgba(244, 230, 193, 0.12);
  }
  #mainNavbar .bq-drawer-account { display: grid; gap: 4px; }
  #mainNavbar .bq-drawer-identity { display: flex; align-items: center; gap: 10px; padding: 6px 4px 8px; }
  #mainNavbar .bq-drawer-identity-text { display: grid; gap: 2px; min-width: 0; }
  #mainNavbar .bq-drawer-identity-text strong { color: #fff; font: 800 0.92rem/1.2 Montserrat, sans-serif; overflow-wrap: anywhere; }
  #mainNavbar .bq-drawer-identity-text small { color: #F4E6C1; font-size: 0.74rem; }
  #mainNavbar .bq-drawer-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  #mainNavbar .bq-drawer-tools .global-language.bq-drawer-lang {
    display: inline-flex !important; height: 44px !important; padding: 0 14px !important; gap: 8px !important;
    border-radius: 12px !important; justify-content: center !important;
  }
  #mainNavbar .bq-drawer-sos {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
    border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.45); background: rgba(200, 30, 50, 0.22);
    color: #FECACA; font: 800 0.85rem/1 Montserrat, sans-serif; cursor: pointer;
  }
  /* En la barra superior basta el avatar; el nombre va en el menú. */
  #mainNavbar .bq-account-trigger { padding: 0 4px !important; width: 40px !important; justify-content: center !important; }
  #mainNavbar .bq-account-trigger .bq-account-name,
  #mainNavbar .bq-account-trigger .bq-account-caret { display: none !important; }
  #mainNavbar .bq-account-menu { position: fixed; top: 74px; right: 10px; }
  /* Cajón: margen inferior para la barra de pulgar y el área segura del iPhone. */
  #mainNavbar .exact-nav-menu.mobile-open,
  #mainNavbar .nav-links-menu.mobile-open {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain;
  }
}
@media (max-width: 480px) {
  /* Cuenta e idioma pasan al cajón: la barra queda con marca + hamburguesa.
     Selector más específico que el que inyecta global-language.js, que forzaba
     el idioma visible y empujaba la hamburguesa fuera de pantalla a 320 px. */
  #mainNavbar .bq-account-slot,
  #mainNavbar .global-nav-actions > .global-language { display: none !important; }
}
/* Respeta el notch del iPhone en horizontal sin cortar marca ni hamburguesa. */
@media (max-width: 960px) {
  @supports (padding: max(0px)) {
    #mainNavbar .exact-container,
    #mainNavbar .nav-inner {
      padding-left: max(10px, env(safe-area-inset-left)) !important;
      padding-right: max(10px, env(safe-area-inset-right)) !important;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #mainNavbar .bq-account-menu { animation: none; }
}

/* ---- "MÁS" SIEMPRE DENTRO DE LA VENTANA (escritorio) ----
   🎯 POR QUÉ: el panel "Más" es position:fixed centrado en la ventana, pero
      #navLinksMenu tenía backdrop-filter, y un ancestro con backdrop-filter
      (o transform/filter) pasa a ser el bloque contenedor de los fixed. El
      panel se centraba sobre el menú y a 1024 px salía 19 px por la izquierda.
   ⚙️ CÓMO: en escritorio el menú es transparente sobre el header opaco (el
      desenfoque no se veía), así que se le quitan backdrop-filter, transform
      y filter. Dos IDs para ganar a las reglas heredadas de styles.css,
      layout.css y baqueano-system.css.
   📦 QUÉ: panel "Más" centrado en la ventana en todos los anchos de
      escritorio, sin cambio visual. El cajón móvil (≤ 960 px) no cambia. */
@media (min-width: 961px) {
  #mainNavbar #navLinksMenu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
  }
}

/* ============================================================================
   MENÚ GLOBAL v2 — 5 GRUPOS (Inicio · Explorar · Cultura · Comunidad · Cuenta)
   🎯 POR QUÉ: el propietario pide un header limpio con cinco grupos, cada uno
      con su propio desplegable en escritorio, y en celular un panel lateral
      izquierdo con acordeón donde NINGUNA opción quede cortada. El cajón
      anterior se cortaba por causas de arquitectura (no de estilo):
        1. el header tiene backdrop-filter → era bloque contenedor del panel
           position:fixed: con la página desplazada el cajón quedaba fuera de
           pantalla (perfil/mapa: top −1438 px);
        2. una regla heredada dejaba el "Más" como acordeón cerrado
           (max-height:0, overflow:hidden, pointer-events:none);
        3. en un contenedor flex, un hijo con z-index (20) se pintaba sobre la
           zona fija; y la barra inferior (z 11990) tapaba el final del cajón.
   ⚙️ CÓMO: clases nuevas `bq-menu-*` (sin chocar con las reglas heredadas de
      "Más"). Enfoque mobile-first para el contenido del menú: la base es el
      acordeón del panel y `@media (min-width: 961px)` lo vuelve desplegables.
      El contenedor #navLinksMenu (panel) usa 100dvh, scroll propio,
      overscroll-behavior: contain y margen inferior para la barra de pulgar.
      Mientras el panel está abierto el header pierde backdrop-filter.
   📦 QUÉ: mismo HTML (js/navigation.js → bqRenderGlobalMenu) para escritorio
      y celular; escritorio con paneles anclados a su botón (desplazados en
      JS si tocarían el borde); celular con secciones plegables.
   ============================================================================ */

/* ---------- Base (celular / panel lateral): acordeón ---------- */
#mainNavbar .bq-menu-group { display: block; width: 100%; }
#mainNavbar .bq-menu-trigger,
#mainNavbar #navLinksMenu > a.bq-menu-home {
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: auto !important; min-height: 50px !important; height: auto !important;
  margin: 2px 12px !important; padding: 10px 14px !important; box-sizing: border-box !important;
  border: 1px solid transparent !important; border-radius: 12px !important;
  background: transparent !important; box-shadow: none !important;
  color: #FFFFFF !important; text-align: left !important; text-decoration: none !important;
  font: 700 0.98rem/1.2 Montserrat, sans-serif !important; letter-spacing: 0 !important;
  cursor: pointer; transform: none !important;
}
#mainNavbar .bq-menu-trigger { width: calc(100% - 24px) !important; }
#mainNavbar .bq-menu-trigger-icon {
  width: 20px; flex: 0 0 20px; text-align: center; color: #7FB8C4; font-size: 0.98rem;
}
#mainNavbar .bq-menu-caret {
  margin-left: auto; color: #F65E01; font-size: 0.72rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#mainNavbar .bq-menu-group.is-open > .bq-menu-trigger .bq-menu-caret { transform: rotate(180deg); }
#mainNavbar .bq-menu-label-short { display: none; }
#mainNavbar .bq-menu-trigger:hover,
#mainNavbar #navLinksMenu > a.bq-menu-home:hover,
#mainNavbar .bq-menu-group.is-open > .bq-menu-trigger { background: rgba(22, 93, 111, 0.28) !important; }
#mainNavbar .bq-menu-trigger.active,
#mainNavbar #navLinksMenu > a.bq-menu-home.active {
  box-shadow: inset 3px 0 0 #F65E01 !important; background: rgba(22, 93, 111, 0.34) !important;
}
#mainNavbar .bq-menu-trigger.active .bq-menu-trigger-icon,
#mainNavbar #navLinksMenu > a.bq-menu-home.active .bq-menu-trigger-icon { color: #F65E01; }
#mainNavbar .bq-menu-trigger:focus-visible,
#mainNavbar .bq-menu-item:focus-visible,
#mainNavbar #navLinksMenu > a.bq-menu-home:focus-visible { outline: 2px solid #F65E01 !important; outline-offset: 2px !important; }

#mainNavbar .bq-menu-panel { margin: 2px 12px 8px 30px; padding: 2px 0 6px 12px; border-left: 1px solid rgba(244, 230, 193, 0.12); }
#mainNavbar .bq-menu-panel[hidden] { display: none !important; }
#mainNavbar .bq-menu-group.is-open > .bq-menu-panel { animation: bqMenuAccordionIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bqMenuAccordionIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

#mainNavbar .bq-menu-section + .bq-menu-section { margin-top: 6px; }
#mainNavbar .bq-menu-section-title {
  margin: 10px 4px 4px; padding: 0;
  color: rgba(244, 230, 193, 0.68); font: 800 0.66rem/1.2 Montserrat, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}
#mainNavbar .bq-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#mainNavbar .bq-menu-list li { margin: 0; padding: 0; }
#mainNavbar .bq-menu-item {
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 7px 10px; border-radius: 12px; border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
#mainNavbar .bq-menu-item[hidden] { display: none !important; }
#mainNavbar .bq-menu-item-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(22, 93, 111, 0.32); color: #9FD3DD; font-size: 0.9rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
#mainNavbar .bq-menu-item-text { display: grid; gap: 2px; min-width: 0; }
#mainNavbar .bq-menu-item-text strong { color: inherit; font: 700 0.92rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; }
#mainNavbar .bq-menu-item-text small { color: rgba(203, 213, 225, 0.78); font: 500 0.74rem/1.3 "Plus Jakarta Sans", Inter, sans-serif; }
#mainNavbar .bq-menu-item:hover { background: rgba(22, 93, 111, 0.26); color: #FFFFFF; }
#mainNavbar .bq-menu-item:hover .bq-menu-item-icon { background: rgba(246, 94, 1, 0.2); color: #FDBA74; }
#mainNavbar .bq-menu-item.active { background: rgba(22, 93, 111, 0.38); border-color: rgba(246, 94, 1, 0.45); color: #FFFFFF; }
#mainNavbar .bq-menu-item.active .bq-menu-item-icon { background: #F65E01; color: #FFFFFF; }
#mainNavbar .bq-menu-admin { margin-top: 8px; border-top: 1px dashed rgba(244, 230, 193, 0.18); border-radius: 0 0 12px 12px; padding-top: 10px; }
#mainNavbar .bq-menu-admin .bq-menu-item-icon { background: rgba(246, 94, 1, 0.18); color: #FDBA74; }

/* ---------- Panel lateral (≤ 960 px) ---------- */
@media (max-width: 960px) {
  /* Causa 1: el header no puede ser bloque contenedor del panel fijo. */
  html.nav-drawer-open #mainNavbar {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    transform: none !important; filter: none !important;
  }

  #mainNavbar #navLinksMenu {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; justify-content: flex-start !important;
    position: fixed !important; top: 0 !important; bottom: auto !important;
    left: 0 !important; right: auto !important;
    width: min(88vw, 360px) !important; max-width: none !important; min-height: 0 !important;
    height: 100vh !important; height: 100dvh !important;
    max-height: 100vh !important; max-height: 100dvh !important; flex: none !important;
    margin: 0 !important; gap: 0 !important;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #0B2335 0%, #081A2A 100%) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important; border-right: 1px solid rgba(244, 230, 193, 0.12) !important;
    border-radius: 0 !important; box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45) !important;
    transform: translateX(-105%) !important; visibility: hidden !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s !important;
    animation: none !important; z-index: 5 !important;
  }
  #mainNavbar #navLinksMenu.mobile-open {
    transform: translateX(0) !important; visibility: visible !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s !important;
  }
  /* Causa 3: en flex, un z-index en un hijo crea capa aunque sea static. */
  #mainNavbar #navLinksMenu > * { flex-shrink: 0 !important; z-index: auto !important; }

  #mainNavbar #navLinksMenu .bq-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 10 !important;
    margin-bottom: 8px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px;
    background: #0B2335 !important; border-bottom: 1px solid rgba(244, 230, 193, 0.1);
  }
  #mainNavbar #navLinksMenu .bq-drawer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
  #mainNavbar #navLinksMenu .bq-drawer-brand img { width: 36px; height: auto; flex-shrink: 0; }
  #mainNavbar #navLinksMenu .bq-drawer-brand span { display: grid; gap: 2px; min-width: 0; }
  #mainNavbar #navLinksMenu .bq-drawer-brand strong { color: #FFFFFF; font: 900 1rem/1 Montserrat, sans-serif; letter-spacing: 0.08em; }
  #mainNavbar #navLinksMenu .bq-drawer-brand small { color: #F4E6C1; font: 700 0.6rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: 0.12em; }
  #mainNavbar #navLinksMenu .bq-drawer-close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    color: #FFFFFF; font-size: 1.1rem;
    background: rgba(246, 94, 1, 0.14); border: 1px solid rgba(246, 94, 1, 0.38);
  }
  #mainNavbar #navLinksMenu .bq-drawer-close:focus-visible { outline: 2px solid #F65E01; outline-offset: 2px; }

  /* Sesión, idioma y SOS al final (la barra superior ya los muestra). */
  #mainNavbar #navLinksMenu .bq-drawer-tools {
    display: grid !important; gap: 8px; position: static !important;
    margin: 14px 12px 0 !important; padding: 12px 4px 0 !important;
    background: none !important; border-top: 1px solid rgba(244, 230, 193, 0.12) !important;
  }
  #mainNavbar #navLinksMenu .bq-drawer-tools .bq-menu-section-title { margin: 0 4px 2px; }

  /* Fondo oscuro sobre la página, también en tablet. */
  html.nav-drawer-open .nav-drawer-backdrop { display: block !important; }

  /* Barra superior móvil: BAQUEANO + SOS + Usuario + ES + ☰ en todos los
     anchos (antes cuenta e idioma se ocultaban a ≤ 480 px). */
  #mainNavbar .global-nav-actions > .bq-account-slot { display: inline-flex !important; }
  #mainNavbar .global-nav-actions > .global-language.navbar-lang-pill {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 40px !important; height: 36px !important; padding: 0 8px !important;
    border-radius: 12px !important; gap: 3px !important; font-size: 0.76rem !important;
  }
  #mainNavbar .global-nav-actions > .global-language.navbar-lang-pill i { display: none !important; }
}

@media (max-width: 400px) {
  #mainNavbar .global-nav-actions { gap: 4px !important; margin-left: 4px !important; padding-left: 0 !important; }
  #mainNavbar .global-nav-actions > :is(.sos-quick-btn, .navbar-sos-btn, .exact-nav-mobile-toggle, .mobile-nav-toggle),
  #mainNavbar .global-nav-actions > .bq-account-slot > :is(a, button) {
    width: 34px !important; min-width: 34px !important; height: 34px !important;
  }
  #mainNavbar .global-nav-actions > .global-language.navbar-lang-pill { min-width: 36px !important; height: 34px !important; padding: 0 6px !important; }
}

/* Pantallas bajas: descripciones fuera para que entren más opciones. */
@media (max-width: 960px) and (max-height: 560px) {
  #mainNavbar #navLinksMenu .bq-menu-item-text small { display: none; }
  #mainNavbar #navLinksMenu .bq-menu-item { min-height: 42px; }
}

/* ---------- Escritorio (≥ 961 px): desplegables independientes ---------- */
@media (min-width: 961px) {
  #mainNavbar .bq-drawer-head,
  #mainNavbar .bq-drawer-tools,
  #mainNavbar .bq-menu-trigger-icon { display: none !important; }

  #mainNavbar #navLinksMenu { gap: 2px !important; }
  #mainNavbar .bq-menu-group { position: relative; display: inline-flex; align-items: center; width: auto; height: 100%; }

  #mainNavbar .bq-menu-trigger,
  #mainNavbar #navLinksMenu > a.bq-menu-home {
    width: auto !important; min-height: 0 !important; height: 38px !important;
    margin: 0 !important; padding: 7px clamp(8px, 1vw, 15px) !important; gap: 6px !important;
    border: 0 !important; border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.84) !important; white-space: nowrap !important;
    font: 600 clamp(0.8rem, 0.72rem + 0.18vw, 0.9rem)/1 Inter, "Plus Jakarta Sans", sans-serif !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
  }
  #mainNavbar .bq-menu-caret { margin-left: 2px; font-size: 0.66rem; }
  #mainNavbar .bq-menu-trigger:hover,
  #mainNavbar #navLinksMenu > a.bq-menu-home:hover,
  #mainNavbar .bq-menu-group.is-open > .bq-menu-trigger { background: rgba(22, 93, 111, 0.3) !important; color: #FFFFFF !important; }
  #mainNavbar .bq-menu-trigger.active,
  #mainNavbar #navLinksMenu > a.bq-menu-home.active {
    background: rgba(22, 93, 111, 0.22) !important; color: #FFFFFF !important;
    box-shadow: inset 0 -2px 0 #F65E01 !important;
  }

  /* Panel bajo su botón; JS lo desplaza (--bq-panel-shift) si tocaría el borde. */
  #mainNavbar .bq-menu-panel {
    position: absolute; top: calc(100% + 10px); left: 50%;
    translate: calc(-50% + var(--bq-panel-shift, 0px)) 0;
    width: 340px; max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 12px; box-sizing: border-box;
    border: 1px solid rgba(244, 230, 193, 0.18); border-left: 1px solid rgba(244, 230, 193, 0.18);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(12, 41, 65, 0.985) 0%, rgba(8, 26, 44, 0.99) 100%);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    z-index: 100060;
  }
  /* Puente invisible: el mouse cruza el espacio entre botón y panel sin cerrarlo. */
  #mainNavbar .bq-menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  #mainNavbar .bq-menu-group.is-open > .bq-menu-panel { animation: bqMenuDropIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes bqMenuDropIn { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }

  #mainNavbar .bq-menu-group[data-group="explore"] > .bq-menu-panel,
  #mainNavbar .bq-menu-group.is-wide > .bq-menu-panel {
    width: 600px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px;
  }
  #mainNavbar .bq-menu-group[data-group="explore"] > .bq-menu-panel[hidden],
  #mainNavbar .bq-menu-group.is-wide > .bq-menu-panel[hidden] { display: none !important; }
  #mainNavbar .bq-menu-group.is-wide > .bq-menu-panel .bq-menu-admin { grid-column: 1 / -1; }
  #mainNavbar .bq-menu-panel .bq-menu-section + .bq-menu-section { margin-top: 0; }
  #mainNavbar .bq-menu-panel .bq-menu-section-title { margin: 4px 10px 6px; }
  #mainNavbar .bq-menu-item:hover { transform: translateX(2px); }

  /* Laptops estrechas: "Cuenta" corto y sin nombre junto al avatar. */
  @media (max-width: 1240px) {
    #mainNavbar .bq-menu-label-full { display: none; }
    #mainNavbar .bq-menu-label-short { display: inline; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #mainNavbar #navLinksMenu,
  #mainNavbar #navLinksMenu.mobile-open { transition: none !important; }
  #mainNavbar .bq-menu-panel,
  #mainNavbar .bq-menu-group.is-open > .bq-menu-panel { animation: none !important; }
  #mainNavbar .bq-menu-item:hover { transform: none; }
}

/* ---------- Barra superior móvil: BAQUEANO + SOS + Usuario + ES + ☰ ----------
   🎯 POR QUÉ: tres reglas heredadas para ≤ 480 px fijaban el contenedor de
      acciones en 36 px, ocultaban SOS y la cuenta: al mostrar el idioma, ☰
      quedaba fuera de la pantalla.
   ⚙️ CÓMO: selectores con un nivel más de especificidad (.nav-inner >) para
      que el contenedor mida lo que contiene; botones cuadrados de 36 px
      (34 px a ≤ 400 px); a ≤ 359 px la marca queda solo con el logo
      (baqueano-identity.css).
   📦 QUÉ: los cinco controles visibles y dentro de la pantalla desde 320 px. */
@media (max-width: 960px) {
  #mainNavbar .nav-inner > .global-nav-actions,
  #mainNavbar .exact-container > .global-nav-actions {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    gap: 6px !important; margin-left: auto !important; padding-left: 0 !important;
  }
  #mainNavbar .nav-inner > .global-nav-actions > .sos-quick-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 12px !important;
  }
  #mainNavbar .nav-inner > .global-nav-actions > .sos-quick-btn span { display: none !important; }
  #mainNavbar .nav-inner > .global-nav-actions > .bq-account-slot { display: inline-flex !important; width: auto !important; }
  #mainNavbar .nav-inner > .global-nav-actions > .bq-account-slot > :is(a, button) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 12px !important;
  }
  #mainNavbar .nav-inner > .global-nav-actions > .bq-account-slot > :is(a, button) > span:not(.bq-account-avatar) { display: none !important; }
}
@media (max-width: 400px) {
  #mainNavbar .nav-inner > .global-nav-actions { gap: 4px !important; }
  #mainNavbar .nav-inner > .global-nav-actions > :is(.sos-quick-btn, .exact-nav-mobile-toggle, .mobile-nav-toggle),
  #mainNavbar .nav-inner > .global-nav-actions > .bq-account-slot > :is(a, button) {
    width: 34px !important; min-width: 34px !important; height: 34px !important;
  }
}

/* ---------- Ítems del panel: imponerse a reglas heredadas de "Más" ----------
   Las reglas antiguas (#mainNavbar .nav-links-menu.mobile-open a {… !important})
   alineaban el texto a la derecha y pintaban cada enlace como tarjeta. */
#mainNavbar #navLinksMenu .bq-menu-item {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 12px !important; width: auto !important; min-height: 46px !important; height: auto !important;
  margin: 0 !important; padding: 7px 10px !important; box-sizing: border-box !important;
  border: 1px solid transparent !important; border-radius: 12px !important;
  background: transparent !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88) !important; text-align: left !important;
  font-size: inherit !important; text-decoration: none !important;
}
#mainNavbar #navLinksMenu .bq-menu-item[hidden] { display: none !important; }
#mainNavbar #navLinksMenu .bq-menu-item:hover { background: rgba(22, 93, 111, 0.26) !important; color: #FFFFFF !important; }
#mainNavbar #navLinksMenu .bq-menu-item.active {
  background: rgba(22, 93, 111, 0.38) !important; border-color: rgba(246, 94, 1, 0.45) !important; color: #FFFFFF !important;
}
#mainNavbar #navLinksMenu .bq-menu-admin { margin-top: 8px !important; border-top: 1px dashed rgba(244, 230, 193, 0.18) !important; padding-top: 10px !important; }
#mainNavbar #navLinksMenu .bq-drawer-brand {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important;
}
@media (max-width: 960px) {
  /* Con el panel abierto solo hay un cierre (el del panel): las acciones de
     la barra quedan detrás del fondo oscuro. */
  html.nav-drawer-open #mainNavbar .nav-inner > .global-nav-actions { visibility: hidden !important; }
}

/* ---------- Buscador global en el menú ----------
   Escritorio: lupa junto a SOS. Celular: campo en el panel lateral (la barra
   superior móvil queda BAQUEANO + SOS + Usuario + ES + ☰, como pidió el
   propietario). Ambos abren js/global-search.js ("/" o Ctrl+K también). */
#mainNavbar .bq-search-trigger {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#mainNavbar .bq-search-trigger:hover { background: rgba(22, 93, 111, 0.45); border-color: rgba(244, 230, 193, 0.35); }
#mainNavbar .bq-search-trigger:focus-visible,
#mainNavbar .bq-drawer-search:focus-visible { outline: 2px solid #F65E01; outline-offset: 2px; }
#mainNavbar #navLinksMenu > .bq-drawer-search { display: none !important; }
@media (max-width: 960px) {
  #mainNavbar .nav-inner > .global-nav-actions > .bq-search-trigger { display: none !important; }
  #mainNavbar #navLinksMenu > .bq-drawer-search {
    display: flex !important; align-items: center; gap: 10px;
    margin: 0 12px 10px !important; padding: 0 14px !important; min-height: 46px;
    border-radius: 14px; border: 1px solid rgba(244, 230, 193, 0.2); background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.85); font: 600 0.9rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; text-align: left; cursor: pointer;
  }
  #mainNavbar #navLinksMenu > .bq-drawer-search i { color: #F4E6C1; }
}