/**
 * perfil.css — tela "Meu perfil" (dados da conta, senha, troca de e-mail).
 * Desenhada dentro de #app-auth, como as telas de login/verificação.
 */
.perfil-screen {
  position: relative; z-index: 2;
  max-width: 560px; margin: 0 auto; padding: 28px 20px 72px;
}
.perfil-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;
}
.perfil-top h1 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 0.03em; margin: 0;
}

.perfil-card { margin-bottom: 16px; padding: 20px; }
.perfil-card h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: 0.03em;
  margin: 0 0 12px;
}
.perfil-card form { display: flex; flex-direction: column; gap: 8px; }
.perfil-card label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(23, 21, 18, 0.55); margin-top: 6px;
}
.perfil-card label:first-of-type { margin-top: 0; }
.perfil-card input {
  width: 100%; background: rgba(23, 21, 18, 0.06); border: 1px solid rgba(23, 21, 18, 0.18);
  color: var(--preto); border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; font-family: 'Inter', sans-serif;
}
.perfil-card input:focus { outline: 2px solid rgba(200, 123, 62, 0.4); outline-offset: 1px; }
.perfil-card .btn { align-self: flex-start; margin-top: 12px; }

.perfil-muted { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(23, 21, 18, 0.4); }
.perfil-hint { font-size: 0.8rem; line-height: 1.45; color: rgba(23, 21, 18, 0.55); margin: 4px 0 0; }
.perfil-current { font-size: 0.92rem; color: rgba(23, 21, 18, 0.75); margin: 0 0 12px; }
.perfil-pending {
  font-size: 0.85rem; line-height: 1.45; color: var(--preto);
  background: rgba(232, 185, 59, 0.16); border: 1px solid rgba(232, 185, 59, 0.5);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.perfil-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.perfil-row .btn { align-self: auto; margin-top: 0; }

.perfil-danger { border: 1px solid rgba(184, 74, 62, 0.35); }
.perfil-danger h2 { color: var(--vermelho); }
.btn-danger { color: var(--vermelho); border-color: rgba(184, 74, 62, 0.5); }
.btn-danger:hover { background: rgba(184, 74, 62, 0.08); }

.pf-ok, .pf-pend {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  border-radius: 5px; padding: 2px 6px; letter-spacing: 0.04em; vertical-align: middle;
}
.pf-ok   { background: rgba(35, 122, 71, 0.16); color: #1c6b3d; }
.pf-pend { background: rgba(232, 185, 59, 0.22); color: #8a6a12; }

.pf-passkey-list { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-passkey-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 0.9rem; color: var(--preto);
  background: rgba(35, 77, 53, 0.06); border: 1px solid rgba(35, 77, 53, 0.18);
  border-radius: 8px; padding: 8px 10px;
}
.pf-passkey-item .btn { margin: 0; }

@media (max-width: 560px) {
  .perfil-card .btn, .perfil-row .btn { align-self: stretch; width: 100%; text-align: center; }
  .pf-passkey-item .btn { width: auto; }
}