/* ── Avatar de perfil ── */
.profile-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(26,42,92,0.06);
  border: 1.5px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--navy);
  margin: 0 auto 20px;
}

/* ── Stats ── */
.stat-card { text-align: center; padding: 28px 20px; }
.stat-number { font-family: var(--font-display); font-size: 40px; color: var(--navy); display: block; }
.stat-label  { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; font-family: var(--font-body); }

/* ── Historial de quizzes ── */
.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.history-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(26,42,92,0.14);
}

/* ── Chips de perfume en historial ── */
.perfume-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, background 0.18s;
  min-width: 140px;
}
.perfume-chip:hover {
  border-color: var(--navy);
  background: white;
}

/* ── Input de login ── */
.login-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input:focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(42,76,155,0.08);
}
.login-input::placeholder { color: var(--text-muted); }

/* ── Error de auth ── */
.auth-error {
  background: rgba(180,30,30,0.07);
  border: 1px solid rgba(180,30,30,0.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: #9b2020;
  font-family: var(--font-body);
  display: none;
}

/* ── Responsivo perfil ── */
@media (max-width: 768px) {
  /* Dashboard: reduce padding lateral */
  [style*="padding:calc(68px + 64px) 20px 100px"],
  [style*="padding: calc(68px + 64px) 20px 100px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
@media (max-width: 600px) {
  .profile-avatar { width: 80px; height: 80px; font-size: 32px; }
  .stat-number    { font-size: 32px; }
  .history-card   { padding: 18px 16px; }
  .perfume-chip   { min-width: 110px; }
}

/* ── Modo oscuro ── */
[data-theme="dark"] .login-input {
  background: var(--surface);
  border-color: var(--border-mid);
  color: var(--navy);
}
[data-theme="dark"] .login-input:focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(150, 176, 232, 0.12);
}
[data-theme="dark"] .perfume-chip {
  background: var(--surface);
  border-color: var(--border-mid);
}
[data-theme="dark"] .perfume-chip:hover {
  background: rgba(197, 212, 245, 0.07);
  border-color: var(--navy);
}
[data-theme="dark"] .history-card { border-color: var(--border); }
[data-theme="dark"] .history-card:hover { border-color: var(--border-mid); }