/* dicode.ai — página /relatar-erro ("Achou um erro? Conte pra gente"; templates/relatar-erro.html).
   Só esta página baixa este CSS. Campos do design system (.campo, .entrada, .selecao, .aviso,
   .erro, .botao); mobile primeiro: no celular, o botão ocupa a largura toda. */
.relato-lead { max-width: 760px; margin-top: 32px; }
.relato-form { display: grid; gap: 28px; max-width: 760px; }
.relato-texto { min-height: 96px; resize: vertical; }
.relato-ajuda, .relato-contador { margin: 0; }
.relato-transferencia { font-size: 15px; line-height: 1.5; color: var(--cinza); }
.relato-transferencia p { margin: 0; }
.relato-transferencia a { color: var(--preto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Lugar do Turnstile, reservado desde o começo (ele só carrega no primeiro gesto no formulário):
   300 × 65, ou o compacto 150 × 140 quando a caixa tem menos de 300 px (celular de 320 px). */
.relato-captcha { min-height: 65px; }
@media (max-width: 339px) { .relato-captcha { min-height: 140px; } }
.relato-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.relato-estado { margin: 0; }
.relato-estado:empty { display: none; }
.relato-recebido { display: grid; gap: 16px; max-width: 760px; padding: 32px; border: 1px solid var(--preto); }
.relato-recebido p { margin: 0; }
.relato-recebido:focus { outline: none; }
.relato-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) {
  .relato-acao .botao, .relato-acoes .botao { width: 100%; justify-content: center; }
  .relato-recebido { padding: 20px; }
}