/* duxels-shared · user-menu.css — botón de cuenta con sesión, avatar y menú con varias cuentas (Clerk multisesión).
   Nació como tramo de public/mundo/mundo.css de DuxelsPage (PR #117, commit 3dd0e87c); desde la v0.4.0 es de duxels-shared.
   Usa las variables y reglas base de ../chrome/chrome.css (--bc, --fg, .top .ico). */
/* Account button when mundo.js sees a Clerk session cookie (is-signed-in): filled user icon + a small green dot; nothing flashy, the label says «Mi cuenta» */
.top .nav-login { position: relative; }
.top .nav-login.is-signed-in svg circle { fill: currentColor; }
.top .nav-login.is-signed-in::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bc); box-shadow: 0 0 0 2px #0b1020;
}
/* With the user's profile (mundo.js, from Clerk's Frontend API): their photo, or their initials, in place of the icon; no dot. The button opens .nav-user-menu */
.top nav { position: relative; }
.nav-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px;
  overflow: hidden; border-radius: 50%; background: #2f4fa8; color: #fff; font-size: .68rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
}
.nav-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top .nav-login.has-avatar > svg { display: none; }
.top .nav-login.has-avatar::after { content: none; }
.top .nav-login.has-avatar { padding-left: 5px; }
.top .nav-login[aria-expanded="true"] { background: rgba(32, 44, 84, 0.95); color: #fff; border-color: rgba(120, 170, 255, 0.6); }
.nav-user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 270px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow-y: auto; padding: 6px;
  border: 1px solid rgba(170,183,220,.24); border-radius: 14px; background: rgba(16,23,43,.98);
  box-shadow: 0 14px 42px rgba(0,0,0,.45); color: var(--fg); font-size: .9rem;
}
.nav-user-menu[hidden] { display: none; }
.nav-user-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(170,183,220,.16); }
.nav-user-head .nav-avatar { width: 36px; height: 36px; font-size: .9rem; }
.nav-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Varias cuentas: nombre y correo de cada una; «Cambiar de cuenta» con las otras abiertas, «Agregar cuenta» y una línea antes de administrar y cerrar sesión */
.nav-user-who { display: flex; flex-direction: column; min-width: 0; }
.nav-user-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: #a4adc8; }
.nav-user-email[hidden] { display: none; }
.nav-user-label { padding: 6px 12px 4px; font-size: .75rem; color: #a4adc8; text-transform: uppercase; letter-spacing: .04em; }
.nav-user-menu .nav-user-other { gap: 11px; }
.nav-user-other .nav-user-name { font-weight: 500; }
.nav-user-sep { height: 1px; margin: 4px 0; background: rgba(170,183,220,.16); }
.top nav .nav-user-menu a, .nav-user-menu button {
  display: flex; align-items: center; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; text-align: left;
  font: inherit; color: inherit; text-decoration: none; background: transparent; cursor: pointer;
}
.top nav .nav-user-menu a:hover, .nav-user-menu a:focus-visible, .nav-user-menu button:hover, .nav-user-menu button:focus-visible { background: rgba(105,135,220,.14); color: var(--fg); outline: none; }
@media (max-width: 1000px) { .top .nav-login.has-avatar { padding-left: 0; } }