/* =====================================================================
   STOKEA · Estilos de autenticación y menú de cuenta
   Integrado con los tokens de styles.css (tema claro/oscuro).
   ===================================================================== */

.account-area {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  flex: none;
}

/* ---------- Botón "Iniciar sesión con Google" ---------- */
.account-signin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--border2);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: .84rem;
  white-space: nowrap;
  transition: border-color .18s, box-shadow .2s, color .18s, transform .12s;
}
.account-signin:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.account-signin:active:not(:disabled) { transform: scale(.98); }
.account-signin:disabled { opacity: .75; cursor: progress; }
.account-signin .google-g { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.account-signin .google-g svg { width: 18px; height: 18px; display: block; }

.account-spinner {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--primary);
  animation: account-spin .8s linear infinite;
}
@keyframes account-spin { to { transform: rotate(360deg); } }

/* ---------- Usuario y menú desplegable ---------- */
.account-wrap { position: relative; }

.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .18s, box-shadow .2s, transform .12s;
}
.account-trigger:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.account-trigger:active { transform: scale(.985); }

.account-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
}
.account-avatar.lg { width: 42px; height: 42px; font-size: 1rem; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: .86rem;
}
.account-chevron { width: 16px; height: 16px; display: grid; place-items: center; color: var(--muted); flex: none; }
.account-chevron svg { width: 16px; height: 16px; }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  min-width: 270px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  animation: account-pop .18s cubic-bezier(.2,.8,.2,1) both;
}
.account-menu[hidden] { display: none !important; }
@keyframes account-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.account-menu-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; }
.account-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-menu-id strong {
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-id > span {
  font-size: .77rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-provider {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--muted) !important;
  font-size: .7rem !important;
}
.account-provider > span {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: #4285f4;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .6rem;
}

.account-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text);
  font-size: .86rem;
  text-align: left;
  transition: background .15s, color .15s;
}
.account-menu-item svg { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color .15s; }
.account-menu-item:hover { background: var(--primary-soft); color: var(--primary); }
.account-menu-item:hover svg { color: var(--primary); }
.account-menu-item.danger { color: var(--danger); }
.account-menu-item.danger svg { color: var(--danger); }
.account-menu-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .account-name { max-width: 110px; }
}
@media (max-width: 900px) {
  .account-menu { right: -2px; }
  .account-name { display: none; }
  .account-trigger { padding: 4px; }
}
@media (max-width: 560px) {
  .account-area { min-height: 34px; }
  .account-signin { padding: 8px; }
  .account-signin-text { display: none; }
  .account-menu { right: -42px; }
  .account-avatar { width: 28px; height: 28px; }
  .account-trigger { padding: 3px; }
}