/* =============================================
   IDENTIDADE VISUAL — Páginas estáticas de autenticação
   (login, recuperação de senha)

   D-15 (Fase 10, Plano 10-04): a identidade visual definitiva (logo e
   paleta finais) ainda não existe. Este arquivo é a ÚNICA fonte de cor
   das páginas estáticas — quando a logo/paleta chegarem, troca-se só o
   bloco :root abaixo, nenhuma tela precisa ser refeita. Os valores atuais
   replicam os mesmos tokens já usados no tema Vaadin do restante do
   sistema (styles.css), para as páginas não parecerem um produto
   diferente do app logado.
   ============================================= */

:root {
  --cor-navy: #1a2236;
  --cor-azul-primario: #2563eb;
  --cor-fundo: #f0f4f8;
  --cor-branco: #ffffff;
  --cor-borda: #e5e7eb;
  --cor-erro: #dc2626;
  --cor-texto-secundario: #64748b;
  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --raio-borda: 8px;
  --sombra-card: 0 1px 4px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: var(--cor-fundo);
  font-family: var(--fonte-base);
  color: var(--cor-navy);
}

.card {
  width: 100%;
  max-width: 380px;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  padding: 32px 28px;
}

.card-titulo {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--cor-navy);
  text-align: center;
}

.card-subtitulo {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--cor-texto-secundario);
  text-align: center;
}

.card-texto {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
  text-align: center;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-navy);
}

.campo input[type="text"],
.campo input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--fonte-base);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  background-color: var(--cor-branco);
  color: var(--cor-navy);
}

.campo input[type="text"]:focus,
.campo input[type="password"]:focus {
  outline: none;
  border-color: var(--cor-azul-primario);
}

.campo-ajuda {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--cor-texto-secundario);
}

.botao-primario {
  display: block;
  width: 100%;
  padding: 11px 16px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fonte-base);
  text-align: center;
  text-decoration: none;
  color: var(--cor-branco);
  background-color: var(--cor-azul-primario);
  border: none;
  border-radius: var(--raio-borda);
  cursor: pointer;
  box-sizing: border-box;
}

.botao-primario:hover {
  opacity: 0.92;
}

/* Estado de envio em curso. A tela de recuperação segura a resposta por 2s de
   propósito (mitigação de timing); sem sinal visual o usuário clica de novo e
   gera um segundo token, que invalida o primeiro. */
.botao-primario:disabled {
  opacity: 0.6;
  cursor: default;
}

.link-secundario {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--cor-azul-primario);
  text-decoration: none;
}

.link-secundario:hover {
  text-decoration: underline;
}

.mensagem-erro {
  display: none;
  margin-bottom: 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-erro);
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-erro);
  border-radius: var(--raio-borda);
}

.mensagem-sucesso {
  display: none;
  margin-bottom: 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-azul-primario);
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-azul-primario);
  border-radius: var(--raio-borda);
}

.mensagem-titulo {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}