/*
  Pétala — formulários das páginas de conta (/redefinir-senha, /excluir-conta).

  Vem DEPOIS de /_legal.css: o cabeçalho, a tipografia e o rodapé são os das
  páginas legais; aqui ficam só o cartão, os campos e os botões.

  Contraste: o texto auxiliar usa --suave (#6B4570, ~7:1 sobre o fundo) e não o
  --muted das páginas legais (~3:1, abaixo do AA para texto pequeno). O botão é
  ameixa SÓLIDO com texto branco (~8:1) — o degradê rosado da landing deixaria
  o texto branco ilegível.
*/
:root {
  --suave: #6B4570;
  --erro: #9C2A66;
  --erro-fundo: #FDECF4;
  --ok: #2F6B27;
}

.wrap--estreito { max-width: 600px; }
.intro { color: var(--suave); margin: 0 0 24px; }

.cartao {
  background: #fff; border: 2px solid var(--soft); border-radius: 20px;
  padding: 24px 22px; margin: 0 0 22px;
  box-shadow: 0 2px 10px rgba(123, 45, 142, .07);
}
.cartao h2 { margin-top: 0; border-bottom: none; padding-bottom: 0; }
.cartao:focus { outline: none; }
.cartao:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: 14px; color: var(--deep); margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 13px 15px; border: 1px solid #A97BAE; border-radius: 12px;
  font-family: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
.campo input:focus { outline: 3px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.dica { font-size: 13px; color: var(--suave); margin: 6px 0 0; }

.senha-linha { display: flex; gap: 8px; }
.senha-linha input { flex: 1; min-width: 0; }
.mostrar {
  flex: none; padding: 0 14px; border: 1px solid #A97BAE; border-radius: 12px; background: #fff;
  color: var(--plum); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mostrar:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }

.botao {
  display: block; width: 100%; padding: 15px; border: none; border-radius: 999px;
  background: var(--plum); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; text-align: center; text-decoration: none; margin-top: 8px;
}
.botao:hover { background: var(--deep); }
.botao:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.botao:disabled { opacity: .55; cursor: default; }
.botao--perigo { background: var(--erro); }
.botao--perigo:hover { background: #7E1F51; }
.botao--vazado { background: #fff; color: var(--plum); border: 2px solid var(--lilac); }
.botao--vazado:hover { background: var(--blush); }

.alerta {
  font-size: 14px; border-radius: 12px; padding: 12px 15px; margin-bottom: 14px;
  background: var(--erro-fundo); color: var(--erro); border: 1px solid #F3C9DE;
}
.sucesso { color: var(--ok); font-weight: 600; }

.lista-limpa { padding-left: 20px; }
.lista-limpa li { margin-bottom: 8px; }

[hidden] { display: none !important; }

.girando { display: inline-block; animation: giro .9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}