/* ══════════════════════════════════════════════════════════════════════════
   form-auth.css — formulário dos fluxos de acesso (login, 1º acesso, senha)
   Carregado por: area-cliente.html, recuperar-senha.html

   POR QUE ESTE ARQUIVO EXISTE:
   Estas classes (.form-input, .form-group, .input-password, .btn-submit…)
   viviam APENAS num <style> inline do area-cliente.html. `login.css` e
   `styles.css` não as definem.

   Consequência real: a recuperar-senha.html reusou os NOMES das classes sem os
   estilos. O resultado foi um formulário cru — campo virando caixinha sem
   borda, rótulo colado no input, e o botão do olho voando para a borda da tela,
   porque `.toggle-password` é `position:absolute` e `.input-password` (o
   `position:relative` que o ancora) não existia.

   Regra: qualquer tela nova dos fluxos de acesso carrega ESTE arquivo. Não
   copiar o bloco inline para outra página — foi a duplicação que criou o
   problema.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho do painel branco ─────────────────────────────────────────── */
.login-form-header h1 { font-size: 28px; font-weight: 800; color: #243b7a;
  margin: 0 0 6px; letter-spacing: -.01em; }
.login-form-header p { font-size: 14px; color: #64748b; margin: 0 0 24px; }

/* ── Campos ─────────────────────────────────────────────────────────────── */
.login-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: #334155; }
.form-input { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1;
  border-radius: 10px; font-size: 15px; font-family: inherit; color: #243b7a;
  background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.form-input:focus { border-color: #246bb5; box-shadow: 0 0 0 3px rgba(36,107,181,.15); }

/* O `position:relative` daqui é o que ancora o botão do olho. Sem ele o botão
   escapa para a borda da janela — era o defeito visível no print. */
.input-password { position: relative; }
.input-password .form-input { padding-right: 44px; }
.toggle-password { position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); color: #94a3b8; padding: 4px;
  background: none; border: none; cursor: pointer; display: flex;
  align-items: center; }
.toggle-password:hover { color: #243b7a; }

/* ── Botão principal ────────────────────────────────────────────────────── */
.btn-submit { display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; padding: 14px; margin-top: 6px; border-radius: 10px;
  background: #243b7a; color: #fff; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: opacity .2s; border: none; }
.btn-submit:hover { opacity: .9; }
.btn-submit[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Entrar com Microsoft, divisor, rodapé, caixa de informação ─────────── */
.btn-microsoft { display: flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%; padding: 13px 24px; background: #fff;
  border: 1px solid #d5dce5; border-radius: 10px; font-size: 15px;
  font-weight: 600; color: #243b7a; cursor: pointer; transition: all .25s;
  font-family: inherit; }
.btn-microsoft:hover { background: #f4f7fb; border-color: #246bb5; }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: #94a3b8; font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px;
  background: #e2e8f0; }
.login-divider span { white-space: nowrap; }

.login-footer-text { display: flex; justify-content: space-between; gap: 12px;
  margin-top: 18px; font-size: 13px; }
.login-footer-text a { color: #246bb5; text-decoration: none; }
.login-footer-text a:hover { text-decoration: underline; }

.login-info-box { display: flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 12px; border-radius: 10px; background: #f4f7fb; color: #64748b;
  font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   REGRAS DE SENHA — a lista que acende conforme se digita
   Vive aqui, e não na página, porque o 1º acesso e a redefinição mostram a
   mesma lista e ela tem de acender igual nos dois.
   ══════════════════════════════════════════════════════════════════════════ */
.senha-regras { list-style: none; padding: 0; margin: .5rem 0 0;
  display: grid; gap: .3rem; }
.senha-regras li { font-size: 12.5px; color: #94a3b8; display: flex;
  align-items: center; gap: .45rem; transition: color .2s; }
.senha-regras li.ok { color: #0f9d58; font-weight: 600; }
.senha-regras .marca { width: 14px; display: inline-block; text-align: center;
  font-weight: 700; }

/* ── Caixas de estado (link inválido, sucesso, erro do formulário) ──────── */
.estado-box { padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
  line-height: 1.55; display: flex; gap: .7rem; align-items: flex-start;
  margin-bottom: 18px; }
.estado-box--erro { background: #fef2f2; border: 1px solid #fecaca; color: #b42318; }
.estado-box--ok   { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.estado-box--info { background: #f4f7fb; border: 1px solid #dbe4f0; color: #475569; }

/* Identificação da conta a que o link pertence */
.conta-alvo { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12.5px;
  color: #246bb5; background: #f4f7fb; border: 1px solid #dbe4f0;
  border-radius: 8px; padding: .55rem .7rem; margin-bottom: 18px;
  word-break: break-all; }

.carregando { color: #94a3b8; font-size: 13.5px; }