/* ============================================================
   APP MENU BAR — estilo macOS
   ============================================================ */

.app-menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  z-index: var(--z-header);
}

html.dark .app-menu-bar {
  background: rgba(0, 0, 0, 0.72);
}

.account-menu { position: relative; }

.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.25rem;
  padding: 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

.account-menu__trigger:hover,
.account-menu.open .account-menu__trigger,
.account-menu:focus-within .account-menu__trigger { border-color: var(--border-color); background: var(--bg-secondary); }
.account-menu__trigger > svg { width: 0.75rem; height: 0.75rem; color: var(--text-tertiary); }
.account-menu__avatar { display: inline-flex; width: 1.125rem; height: 1.125rem; color: var(--accent); }
.account-menu__avatar svg { width: 100%; height: 100%; }
.account-menu__name { max-width: 10rem; overflow: hidden; font-weight: var(--font-medium); text-overflow: ellipsis; white-space: nowrap; }

.account-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: calc(var(--z-header) + 1);
  display: none;
  width: 14rem;
  padding: var(--space-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.account-menu:hover .account-menu__dropdown,
.account-menu:focus-within .account-menu__dropdown,
.account-menu.open .account-menu__dropdown { display: block; }
.account-menu__identity { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border-color); }
.account-menu__identity strong,
.account-menu__identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__identity span { color: var(--text-secondary); font-size: var(--text-xs); }
.account-menu__dropdown > button { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); color: var(--text-primary); font-size: var(--text-sm); text-align: left; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; }
.account-menu__dropdown > button:hover { background: var(--bg-secondary); }
.account-menu__dropdown > button svg { width: 1rem; height: 1rem; color: var(--accent); }
.account-menu__dropdown > .account-menu__logout { color: var(--danger); }
.account-menu__dropdown > .account-menu__logout svg { color: var(--danger); }

.pwa-platform-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.pwa-platform-options > button { display: flex; align-items: center; flex-direction: column; gap: var(--space-2); min-height: 8rem; padding: var(--space-4); color: var(--text-primary); text-align: center; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-secondary); cursor: pointer; }
.pwa-platform-options > button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary)); }
.pwa-platform-options > button > svg { width: 1.75rem; height: 1.75rem; color: var(--accent); }
.pwa-platform-options > button > span { display: flex; flex-direction: column; gap: var(--space-1); }
.pwa-platform-options small { color: var(--text-secondary); line-height: 1.3; }
.pwa-install-steps { display: grid; gap: var(--space-3); padding-left: 1.25rem; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 720px) {
  .account-menu__name,
  .account-menu__trigger > svg { display: none; }
  .account-menu__trigger { padding: 0 var(--space-2); }
  .pwa-platform-options { grid-template-columns: 1fr; }
  .pwa-platform-options > button { align-items: center; flex-direction: row; min-height: 0; text-align: left; }
}

@media (max-width: 767px) {
  .app-menu-bar { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); height: 3.25rem; padding: 0 var(--space-3); }
  .app-menu-bar__brand { min-width: 0; gap: var(--space-1); }
  .app-menu-bar__brand-logo { width: 2.25rem; height: 2rem; object-fit: contain; }
  .app-menu-bar__brand-copy { overflow: hidden; }
  .app-menu-bar__brand-name { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
  .app-menu-bar__actions { gap: var(--space-1); }
  .app-menu-bar__actions .btn-icon { width: 1.875rem; height: 1.875rem; }
  .account-menu__trigger { width: 1.875rem; height: 1.875rem; padding: 0; justify-content: center; }
}

@media (max-width: 420px) { .app-menu-bar__brand-name { display: none; } }

/* Login mock */
.session-locked { overflow: hidden; }

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 35%),
    var(--bg-secondary);
}

.login-card {
  width: min(100%, 26rem);
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.login-card__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-color);
}

.login-card__brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
html.dark .login-card__brand img { filter: invert(1); }
.login-card__brand > div { display: flex; flex-direction: column; }
.login-card__brand span { color: var(--text-secondary); font-size: var(--text-xs); }
.login-card__heading { margin-bottom: var(--space-5); }
.login-card__heading h1 { font-size: var(--text-2xl); }
.login-card__heading p { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.login-card__submit { width: 100%; margin-top: var(--space-2); }
.login-card__error { padding: var(--space-2) var(--space-3); color: var(--danger); font-size: var(--text-sm); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.login-card__error[hidden] { display: none; }
.login-card__notice { margin-top: var(--space-4); color: var(--text-tertiary); font-size: var(--text-xs); text-align: center; }

.app-menu-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  flex-shrink: 0;
  justify-self: start;
}

.app-menu-bar__brand svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
}

.app-menu-bar__brand-logo {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
}

.app-menu-bar__brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}

.app-menu-bar__brand-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.app-menu-bar__clock {
  color: var(--text-secondary);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-medium);
  letter-spacing: 0.025em;
  white-space: nowrap;
}

/* El isotipo es negro sólido sobre fondo transparente: en modo oscuro se
   invierte a blanco para que no desaparezca sobre el header oscuro. */
html.dark .app-menu-bar__brand-logo {
  filter: invert(1);
}

.app-menu-bar__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  justify-self: center;
}

@media (min-width: 1024px) {
  .app-menu-bar__nav {
    display: flex;
  }
}

.app-menu-item {
  position: relative;
}

.app-menu-item > button,
.app-menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.625rem;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.app-menu-item > button:hover,
.app-menu-item > a:hover {
  background: var(--bg-tertiary);
  text-decoration: none;
}

.app-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 11rem;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
}

.app-menu-item:hover .app-submenu,
.app-menu-item:focus-within .app-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.app-submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.app-submenu a:hover {
  background: var(--bg-secondary);
  text-decoration: none;
}

.app-submenu a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--font-medium);
}

.app-menu-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  justify-self: end;
}

/* Mobile menu toggle */
.app-menu-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .app-menu-bar__toggle {
    display: none;
  }
}

/* Mobile nav drawer */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 18rem;
  height: 100%;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-modal) + 1);
}

.mobile-nav-overlay.open + .mobile-nav,
.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.mobile-nav__section {
  padding: var(--space-2) var(--space-4);
}

.mobile-nav__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
}

.mobile-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
}

.mobile-nav__link:hover,
.mobile-nav__link.active {
  background: var(--bg-tertiary);
  text-decoration: none;
}

.mobile-nav__link.active {
  color: var(--accent);
  font-weight: var(--font-medium);
}