/* =========================================================
   MENÚ DE USUARIO (header móvil)  ·  assets/css/essays-user-menu.css
   Usa las variables --sc-* de tu archivo main (temas light/sepia/dark).
   ========================================================= */

.nm-user {
  --nm-user-bleed: 3.5rem;   /* cuánto sobresale el panel a la derecha del avatar (ajusta si el panel se desalinea) */
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;      /* separación con la hamburguesa */
}

/* ---------- 1. BOTÓN (avatar) ---------- */
.nm-user .nm-user__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  color: var(--sc-heading);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: 50%;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nm-user .nm-user__btn:hover,
.nm-user .nm-user__btn:focus-visible,
.nm-user.is-open .nm-user__btn {
  background: var(--sc-surface);
  border-color: var(--sc-accent);
}
.nm-user.is-open .nm-user__btn { box-shadow: 0 0 0 3px rgba(140, 109, 70, 0.25); }
.nm-user .nm-user__btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.nm-user__icon { width: 22px; height: 22px; color: var(--sc-muted); }
.nm-user__initial {
  font: 600 1.05rem/1 var(--sc-font-serif);
  color: var(--sc-heading);
}
/* La foto va encima de la inicial: si no carga, se ve la inicial */
.nm-user__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- 2. PANEL DESPLEGABLE ---------- */
.nm-user__panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: calc(-1 * var(--nm-user-bleed));
  z-index: 100;
  width: min(18rem, calc(100vw - 2rem));
  padding: 1.25rem;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nm-user.is-open .nm-user__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Flechita que apunta al avatar */
.nm-user__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: calc(var(--nm-user-bleed) + 14px);
  width: 12px;
  height: 12px;
  background: var(--sc-surface);
  border-top: 1px solid var(--sc-border);
  border-left: 1px solid var(--sc-border);
  transform: rotate(45deg);
}

/* ---------- 3. CONTENIDO: INVITADO ---------- */
.nm-user__eyebrow {
  margin: 0 0 0.35rem;
  font: 700 0.7rem/1 var(--sc-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
}
.nm-user__title {
  margin: 0 0 0.4rem;
  font: 600 1.45rem/1.2 var(--sc-font-serif);
  letter-spacing: -0.015em;
  color: var(--sc-heading);
}
.nm-user__text {
  margin: 0 0 1.1rem;
  font: 400 0.85rem/1.55 var(--sc-font-sans);
  color: var(--sc-muted);
}
.nm-user__actions { display: flex; flex-direction: column; gap: 0.6rem; }

.nm-user .nm-user__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  font: 600 0.9rem/1 var(--sc-font-sans);
  letter-spacing: 0.02em;
  color: var(--sc-btn-text);
  background: var(--sc-btn-bg);
  border: 1px solid var(--sc-btn-bg);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nm-user .nm-user__cta:hover { color: var(--sc-btn-text); background: var(--sc-accent); border-color: var(--sc-accent); }
.nm-user .nm-user__cta--ghost { color: var(--sc-heading); background: transparent; border-color: var(--sc-border); }
.nm-user .nm-user__cta--ghost:hover { color: var(--sc-accent); background: transparent; border-color: var(--sc-accent); }

/* ---------- 4. CONTENIDO: MIEMBRO ---------- */
.nm-user__name {
  margin: 0;
  font: 600 1.25rem/1.25 var(--sc-font-serif);
  letter-spacing: -0.01em;
  color: var(--sc-heading);
  overflow-wrap: anywhere;
}
.nm-user__mail {
  margin: 0.15rem 0 0.9rem;
  font: 400 0.78rem/1.4 var(--sc-font-sans);
  color: var(--sc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-user__links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sc-border); }
.nm-user__links li { margin: 0; border-bottom: 1px solid var(--sc-border); }
.nm-user__links li:last-child { border-bottom: 0; }
.nm-user .nm-user__links a {
  display: block;
  padding: 0.75rem 0;
  font: 500 0.9rem/1.2 var(--sc-font-sans);
  color: var(--sc-text);
  text-decoration: none;
}
.nm-user .nm-user__links a:hover { color: var(--sc-accent); }

/* ---------- 5. ACCESIBILIDAD ---------- */
.nm-user a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 0.25rem; }
@media (prefers-reduced-motion: reduce) {
  .nm-user__panel, .nm-user .nm-user__btn { transition: none; }
}