/* wwwroot/ui/shared/css/account-menu.css */
/* Base (desde el demo) + mejoras que ya acordamos */
.menu-wrap { position: relative; display: inline-block; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  cursor: pointer;
}
.muted { opacity: .72; font-size: 12px; line-height: 1.2; }
.chev {
  width: 10px; height: 10px; display: inline-block;
  border-right: 2px solid rgba(15,23,42,.55);
  border-bottom: 2px solid rgba(15,23,42,.55);
  transform: rotate(45deg);
  margin-left: 2px;
}

/* Backdrop para cerrar al click fuera */
.menu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }

/* Dropdown más ancho para evitar wrap */
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 50;
  min-width: 320px;
  max-width: 92vw;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  padding: 8px;
  display: none;
}
.menu.open { display: block; }

.item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
}
/* Hover bien visible */
.item:hover { background: rgba(15,23,42,.10); }
.item strong { font-size: 13px; font-weight: 800; white-space: nowrap; }
.item > div > div { line-height: 1.15; }

.sep { height: 1px; background: rgba(15,23,42,.10); margin: 8px 6px; }

/* Iconos (Material Symbols) */
.icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  color: rgba(15,23,42,.75);
  flex: 0 0 auto;
}
.icon-btn {
  font-size: 22px;
  line-height: 22px;
  color: rgba(15,23,42,.75);
}

/* Hover: icono se “enciende” */
.item:hover .icon,
.pill:hover .icon-btn {
  color: #0ea5e9;
}

/* Danger rojo real */
.danger { color: #b91c1c; }
.danger .muted { color: rgba(185,28,28,.85); }
.danger .icon { color: #b91c1c; }


/* Backdrop global (fuera del header) para capturar click-outside en toda la página */
.ud-account-global-backdrop { position: fixed; inset: 0; z-index: 9000; background: transparent; }

/* Cuando el menú está abierto elevamos el header por sobre el backdrop global */
.ud-header-zmenu { z-index: 9010; }