/* Menú desplegable del header (chatter + VA). Reemplaza los links sueltos que
   "apenas se apreciaban". Botón claro (nombre + ▾) que abre un panel con las
   opciones (links externos y acciones). Funciona con TAP, no solo hover.
   Cada página define sus --nx-menu-* para casar con su paleta. */
.nx-menu { position: relative; display: inline-flex; }

.nx-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  background: var(--nx-menu-btn-bg, rgba(255,255,255,.05));
  border: 1px solid var(--nx-menu-border, rgba(255,255,255,.16));
  border-radius: 10px;
  color: var(--nx-menu-text, #f5ecec);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nx-menu-btn:hover,
.nx-menu-btn[aria-expanded="true"] { border-color: var(--nx-menu-accent, #ec4899); }
.nx-menu-btn .nx-menu-glyph { font-size: 14px; line-height: 1; }
.nx-menu-btn .nx-menu-name {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nx-menu-btn .nx-caret { font-size: 10px; opacity: .8; transition: transform .15s ease; }
.nx-menu-btn[aria-expanded="true"] .nx-caret { transform: rotate(180deg); }

.nx-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 210px; max-width: min(280px, calc(100vw - 28px));
  background: var(--nx-menu-panel-bg, #1b1718);
  border: 1px solid var(--nx-menu-border, rgba(255,255,255,.16));
  border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
  z-index: 200; display: none;
}
.nx-menu.open .nx-menu-panel { display: block; }

.nx-menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 10px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--nx-menu-text, #f5ecec);
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nx-menu-item:hover,
.nx-menu-item:focus-visible { background: var(--nx-menu-item-hover, rgba(255,255,255,.06)); outline: none; }
.nx-menu-item .nx-ico { width: 22px; text-align: center; flex-shrink: 0; font-size: 15px; }
.nx-menu-item.danger { color: var(--nx-menu-danger, #f87171); }

.nx-menu-sep { height: 1px; margin: 5px 8px; background: var(--nx-menu-border, rgba(255,255,255,.14)); }