/* ==========================================================================
   VALIDAÇÃO DE FORMULÁRIO

   Estado de erro dos campos e a mensagem inline que o public/js/ui.js cria.

   Carregado pelos dois layouts: views/layouts/painel.njk e
   views/layouts/auth.njk (login e solicitação de cadastro). Por isso as
   variáveis têm valor de reserva — a identidade pública usa outro conjunto de
   tokens, e sem o fallback a borda de erro sairia sem cor lá.
   ========================================================================== */


.form-input.is-invalido {
  border-color: var(--danger, #f2564b);
}

.form-input.is-invalido:focus {
  border-color: var(--danger, #f2564b);
  box-shadow: 0 0 0 3px var(--danger-wash, rgba(242, 86, 75, 0.12));
}

.form-erro {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.77rem;
  line-height: 1.4;
  color: #ff9a92;
  text-align: left;
}

/* Marcador redondo: distingue a mensagem de erro de um texto de ajuda */
.form-erro::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* Enquanto o POST está em voo, para não enviar o formulário duas vezes */
.is-enviando {
  opacity: 0.6;
  cursor: progress;
}