/* Menú de la cuenta del usuario (BRAND-CLIOR-02, agente 2). Estilos .acct-
   Dos botones (pie del menú lateral y barra superior) abren el mismo menú (#acct-menu), que cuenta-menu.js lleva a
   <body> y ubica con position: fixed junto al botón usado. El espacio y el separador alrededor de .account (pie) son
   del agente 1 (clior.css); aquí solo lo de adentro. */

/* ── Botón del pie del menú lateral ───────────────────────────────────────────── */
.acct-side { align-items: center; }
.acct-side .acct-trigger {
  display: flex; flex: 1; align-items: center; gap: .6rem; min-width: 0;
  margin: 0 -.35rem; padding: .4rem .45rem; border-radius: 12px;
  color: #fff; text-decoration: none;
  transition: background var(--motion-control, 200ms) var(--motion-ease, ease);
}
.acct-side .acct-trigger:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.acct-side .acct-trigger.is-active { background: rgba(255, 255, 255, .13); }
.acct-side .acct-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); border-radius: 12px; }
.acct-side .acct-who { flex: 1; }
.acct-side .acct-who strong, .acct-side .acct-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-side .acct-chevron { color: rgba(255, 255, 255, .7); }
.acct-noscript { display: flex; margin: 0; }

.acct-chevron { flex: none; width: 1rem; height: 1rem; transition: rotate var(--motion-menu, 220ms) var(--motion-ease, ease); }
.acct-trigger.is-active .acct-chevron { rotate: 180deg; }

/* Menú encogido: solo el avatar, centrado. */
@media (min-width: 761px) {
  .app.slim .acct-side .acct-trigger { flex: none; justify-content: center; margin: 0; padding: .3rem; border-radius: 50%; }
  .app.slim .acct-side .acct-trigger:focus-visible { border-radius: 50%; }
  .app.slim .acct-side .acct-chevron { display: none; }
}
/* Entre 761 y 900 px el menú lateral es una barra arriba: el pie muestra solo el avatar y el indicador. */
@media (max-width: 900px) and (min-width: 761px) {
  .acct-side .acct-trigger { flex: none; margin: 0; }
}

/* Teléfono: el pie aparece dentro del menú desplegado (tres rayas), con espacio para nombre y rol. */
@media (max-width: 760px) {
  .app.nav-open .acct-side .acct-who { display: grid; }
}

/* ── Identificación compacta de la barra superior ─────────────────────────────── */
.acct-top { gap: .55rem; padding-right: .55rem; min-width: 0; }
.acct-top .acct-who { min-width: 0; max-width: 13rem; }
.acct-top .acct-who strong, .acct-top .acct-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-top .acct-chevron { color: var(--muted); }
.topbar-user.acct-top.is-active { background: var(--surface); border-color: var(--line); }
.topbar-user.acct-top:focus-visible { border-radius: 999px; }
@media (max-width: 900px) {
  /* Bajo 900 px se ocultan nombre y rol (sistema.css); el avatar y el indicador quedan. */
  .topbar-user.acct-top { padding: .2rem .4rem .2rem .2rem; gap: .3rem; }
  .topbar-user.acct-top > .avatar { display: grid; }
}

/* ── El menú ──────────────────────────────────────────────────────────────────── */
.acct-menu {
  position: fixed; z-index: 90; top: 0; left: 0;
  box-sizing: border-box; min-width: 15rem; max-width: min(20rem, calc(100vw - 16px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: .35rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface, #fff); color: var(--ink);
  box-shadow: 0 16px 36px -12px rgba(16, 24, 40, .22), 0 2px 6px -2px rgba(16, 24, 40, .06);
  font-size: .88rem; line-height: 1.3; text-align: left;
  opacity: 0; translate: 0 6px;
  transition: opacity var(--motion-menu, 220ms) var(--motion-ease, ease), translate var(--motion-menu, 220ms) var(--motion-ease, ease);
}
.acct-menu[hidden] { display: none !important; }
.acct-menu[data-side="below"] { translate: 0 -6px; }
.acct-menu[data-side="right"] { translate: -6px 0; }
.acct-menu.is-open { opacity: 1; translate: 0 0; }

.acct-head { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem .6rem; }
.acct-head .avatar { width: 2.4rem; height: 2.4rem; border: 0; background: var(--brand-soft); color: var(--brand-deep); font-size: .8rem; font-weight: 650; }
.acct-id { display: grid; min-width: 0; gap: .05rem; }
.acct-id strong, .acct-id small, .acct-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-id strong { font-size: .9rem; font-weight: 620; color: var(--ink); }
.acct-id small { font-size: .76rem; color: var(--muted); }
.acct-role { justify-self: start; max-width: 100%; margin-top: .25rem; padding: .08rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--slate); font-size: .72rem; font-weight: 560; }

.acct-sep { height: 1px; margin: .3rem .25rem; background: var(--line); }

.acct-logout { display: block; margin: 0; }
.acct-menu .acct-item {
  display: flex; align-items: center; justify-content: flex-start; gap: .7rem; width: 100%; box-sizing: border-box;
  margin: 0; padding: .55rem .6rem; border: 0; border-radius: 8px;
  background: none; color: var(--ink); box-shadow: none;
  font: inherit; font-weight: 520; text-align: left; white-space: normal; text-decoration: none; cursor: pointer;
  transition: background var(--motion-hover, 160ms) var(--motion-ease, ease), color var(--motion-hover, 160ms) var(--motion-ease, ease);
}
.acct-menu .acct-item svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--muted); }
.acct-menu .acct-item span { display: grid; min-width: 0; }
.acct-menu .acct-item small { color: var(--muted); font-size: .74rem; font-weight: 450; }
.acct-menu .acct-item:hover, .acct-menu .acct-item:focus-visible { background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; box-shadow: none; translate: none; }
.acct-menu .acct-item:hover svg, .acct-menu .acct-item:focus-visible svg { color: var(--brand); }
.acct-menu .acct-item:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: -2px; }
.acct-menu .acct-item:focus:not(:focus-visible) { outline: none; }
.acct-menu .acct-item:active { translate: none; }

/* Cerrar sesión: rojo discreto, sin relleno. */
.acct-menu .acct-danger, .acct-menu .acct-danger svg { color: var(--red); }
.acct-menu .acct-danger:hover, .acct-menu .acct-danger:focus-visible { background: var(--red-soft); color: var(--red); }
.acct-menu .acct-danger:hover svg, .acct-menu .acct-danger:focus-visible svg { color: var(--red); }

/* Reducir movimiento: aparece y desaparece sin transición. */
.mo-reduced .acct-menu, .mo-reduced .acct-chevron { transition: none; }
@media (prefers-reduced-motion: reduce) { .acct-menu, .acct-chevron { transition: none; } }
@media print { .acct-menu { display: none !important; } }
.acct-trigger:not([aria-haspopup]) .acct-chevron { display: none; } /* sin JavaScript no hay menú: el botón es solo el enlace a Mi cuenta */