/*
  login.css — Propensiq: tela de login (tela 1, especificação funcional
  4.7 / ADR-050). Tela autônoma, sem sidebar/app-shell — o usuário ainda
  não está autenticado, não há tenant/navegação para mostrar aqui (ver
  especificação: "não deve permitir selecionar tenant manualmente").
  Consome tokens.css.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--color-navy);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-white);
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: 0 24px 48px rgba(13, 27, 42, 0.35);
  text-align: center;
}

.login-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.login-card__wordmark {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.login-card__wordmark-accent {
  color: var(--color-teal);
}

.login-card__tagline {
  font-size: 14px;
  color: var(--color-slate);
  margin: 0 0 28px;
  line-height: 1.5;
}

.login-card__notice {
  /* ADR-074 (resolve a PEND-027) - so aparece quando o redirecionamento
     pra login veio de sessao expirada de verdade (?motivo=sessao_expirada),
     nunca em primeira visita/logout deliberado. Mesma paleta de aviso
     ja usada em .historical-banner (base.css) - teal, nao vermelho,
     nao e um erro do usuario. */
  background: rgba(20, 184, 166, 0.1);
  border-left: 3px solid var(--color-teal);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--color-navy);
  text-align: left;
}

.login-card__cta {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  /* ADR-087: passou a ser um <button type="submit"> (login/troca de
     senha), nao mais um <a> - zera o estilo default do botao. */
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.login-card__cta[disabled] {
  /* ADR-148, adenda de 14/10/2026 (A1): enquanto a tela conta a espera ou aguarda o servidor */
  opacity: 0.6;
  cursor: wait;
}

.login-card__cta:hover {
  filter: brightness(0.92);
}

/* ADR-087: tom de erro na tela de login/troca de senha (credencial
   incorreta, senha fraca, senhas nao coincidem). login.html/trocar_senha.html
   nao carregam base.css - mesmo vermelho de .form-message (#B42318,
   base.css), so replicado aqui. Mesmo espirito de .login-card__notice
   (que espelha .historical-banner). */
.login-card__error {
  background: rgba(180, 35, 24, 0.08);
  border-left: 3px solid #B42318;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 13px;
  color: #7a1811;
  text-align: left;
}

.login-form {
  text-align: left;
  margin-top: 4px;
}

.login-field {
  margin-bottom: 16px;
}

.login-field__label {
  display: block;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-navy);
  margin-bottom: 5px;
}

.login-field__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-white);
}

.login-field__input:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 0;
  border-color: transparent;
}

.login-card__footnote {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--color-light-slate);
  line-height: 1.5;
}