/**
 * Dropdown usuario header — SSOT (marketplace + admin F3).
 * Tokens: --vh-admin-* (vh-admin-tokens.css). Sin literales de color/radius/spacing.
 * No usar utilidades Tailwind de color en markup (Metronic redefine .text-gray-600).
 */

.vh-header-user-menu-wrap {
  position: relative;
}

.vh-header-user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--vh-admin-space-2));
  min-width: var(--vh-admin-dropdown-panel-min-width);
  width: var(--vh-admin-dropdown-panel-min-width);
  background: var(--vh-admin-color-panel);
  border: 1px solid var(--vh-admin-color-border);
  border-radius: var(--vh-admin-radius-5);
  box-shadow: var(--vh-admin-shadow-menu);
  z-index: var(--vh-admin-z-dropdown-panel);
}

.vh-header-user-menu-panel.hidden {
  display: none;
}

.vh-header-user-menu-panel__body {
  padding: var(--vh-admin-space-2);
}

.vh-header-user-menu-panel__identity {
  display: flex;
  align-items: center;
  gap: var(--vh-admin-space-2);
  padding: var(--vh-admin-space-2) var(--vh-admin-space-3);
  font-family: var(--vh-admin-font-family);
  font-size: var(--vh-admin-font-size-2);
  line-height: var(--vh-admin-line-height-2);
  background: var(--vh-admin-color-hover-nav);
  border-radius: var(--vh-admin-radius-5);
}

.vh-header-user-menu-panel__identity-avatar {
  flex-shrink: 0;
  width: var(--vh-admin-space-6);
  height: var(--vh-admin-space-6);
  border-radius: var(--vh-admin-radius-full);
  overflow: hidden;
  object-fit: cover;
}

.vh-header-user-menu-panel__identity-initial {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vh-admin-space-6);
  height: var(--vh-admin-space-6);
  border-radius: var(--vh-admin-radius-full);
  background: var(--vh-admin-color-primary-soft);
  color: var(--vh-admin-color-primary-text);
  font-family: var(--vh-admin-font-family);
  font-size: var(--vh-admin-font-size-2);
  font-weight: var(--vh-admin-font-weight-bold);
  line-height: var(--vh-admin-line-height-2);
}

.vh-header-user-menu-panel__identity-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.vh-header-user-menu-panel__identity-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--vh-admin-font-weight-medium);
  color: var(--vh-admin-color-text);
}

.vh-header-user-menu-panel__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--vh-admin-space-2) var(--vh-admin-space-2);
  font-family: var(--vh-admin-font-family);
  font-size: var(--vh-admin-font-size-2);
  line-height: var(--vh-admin-line-height-2);
  font-weight: var(--vh-admin-font-weight-medium);
  color: var(--vh-admin-color-text);
}

.vh-header-user-menu-panel .vh-header-user-menu-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: var(--vh-admin-space-2);
  border-radius: var(--vh-admin-radius-2);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: var(--vh-admin-color-text);
  text-decoration: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.vh-header-user-menu-panel .vh-header-user-menu-link:hover,
.vh-header-user-menu-panel .vh-header-user-menu-link:focus {
  color: var(--vh-admin-color-text);
  background-color: var(--vh-admin-color-hover-subtle);
  text-decoration: none;
}

.vh-header-user-menu-panel .vh-header-user-menu-link--logout {
  color: var(--vh-admin-color-danger-soft-text);
}

.vh-header-user-menu-panel .vh-header-user-menu-link--logout:hover,
.vh-header-user-menu-panel .vh-header-user-menu-link--logout:focus {
  color: var(--vh-admin-color-danger-soft-text);
  background-color: var(--vh-admin-color-danger-soft);
}

.vh-header-user-menu-panel .vh-header-user-menu-link.vh-admin-locale-option {
  gap: var(--vh-admin-space-2);
}

.vh-header-user-menu-panel .vh-admin-locale-option img {
  flex-shrink: 0;
  width: var(--vh-admin-space-5);
  height: var(--vh-admin-space-5);
  border-radius: var(--vh-admin-radius-1);
}

.vh-header-user-menu-divider--section {
  border-top: 1px solid var(--vh-admin-color-border-subtle);
  margin-top: var(--vh-admin-space-2);
  margin-bottom: var(--vh-admin-space-2);
  padding: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

.vh-header-user-menu-locale-item {
  list-style: none;
}

.vh-header-user-menu-locale-row {
  display: flex;
  align-items: stretch;
  gap: var(--vh-admin-space-2);
}

.vh-header-user-menu-locale-row .vh-admin-locale-option {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.vh-header-user-menu-locale-row .vh-admin-locale-option--active {
  color: var(--vh-admin-color-text);
  background-color: var(--vh-admin-color-hover-subtle);
}

.vh-header-user-menu-divider {
  border-top: 1px solid var(--vh-admin-color-border-subtle);
  padding-top: var(--vh-admin-space-2);
  margin-top: var(--vh-admin-space-2);
}