/* ==========================================================================
   Login, esqueci senha, trocar senha — GV Auditoria

   Sem campanha publicitária: painel azul-marinho com a ASSINATURA PRINCIPAL
   oficial (creme, versão negativa do manual) + slogan, e o formulário num
   cartão branco sobre o fundo creme. Desktop: duas colunas. Celular: faixa
   da marca no topo, cartão logo abaixo.
   ========================================================================== */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: start;
  gap: var(--e-5);
  padding: 0 var(--e-4) var(--e-5);
  background: var(--ground);
}

.login__hero {
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  margin: 0 calc(var(--e-4) * -1);
  padding: var(--e-6) var(--e-4) var(--e-5);
  background: var(--azul-900);
  color: var(--creme);
  text-align: center;
}
/* Assinatura principal ≥ 98px de largura (mínimo do manual); área livre
   garantida pelo padding do painel. */
.login__logo-horizontal { width: min(240px, 64vw); color: var(--creme); line-height: 0; }
.login__logo-horizontal svg { display: block; width: 100%; height: auto; }

/* Slogan oficial — creme sobre o azul-marinho, como no manual. */
.login__slogan { max-width: 22rem; font-size: var(--txt-sm); color: var(--creme); font-weight: 300; line-height: 1.5; }

.login__cartao {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--e-6) var(--e-5);
}

.login__marca {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

/* Só na troca de senha (sem painel da marca): símbolo direto, sem caixa. */
.login__sigla {
  display: block;
  width: 40px;
  flex: 0 0 auto;
  color: var(--azul-900);
  line-height: 0;
}
.login__sigla svg { width: 100%; height: auto; }

.login__titulo {
  font-size: var(--txt-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--azul-900);
}

.login__sub { margin-top: 2px; font-size: var(--txt-sm); color: var(--texto-3); }

@media (min-width: 960px) {
  .login {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: 0;
    gap: 0;
  }
  .login__hero {
    grid-row: 1 / -1;
    align-self: stretch;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: var(--e-7) clamp(2rem, 6vw, 6rem);
    text-align: left;
  }
  .login__logo-horizontal { width: min(320px, 70%); }
  .login__slogan { font-size: var(--txt-md); margin-top: var(--e-3); }
  .login__cartao { align-self: center; justify-self: center; margin: var(--e-6); }
  .login__rodape { grid-column: 2; padding-bottom: var(--e-5); }
}
.login__form { display: flex; flex-direction: column; gap: var(--e-4); }

.login__erro {
  padding: var(--e-3);
  border-radius: var(--raio);
  border-left: 3px solid var(--falta);
  background: color-mix(in srgb, var(--falta) 8%, var(--surface));
  color: var(--falta);
  font-size: var(--txt-sm);
}

.login__opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--txt-xs);
}

.login__lembrar {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--texto-2);
  cursor: pointer;
  user-select: none;
}

.login__link {
  color: var(--azul-700);
  font-weight: 600;
  text-decoration: none;
}
.login__link:hover,
.login__link:focus-visible { text-decoration: underline; }

.login__aviso {
  font-size: var(--txt-sm);
  color: var(--texto-2);
  line-height: 1.55;
  margin-bottom: var(--e-5);
}

.login__rodape { font-size: var(--txt-xs); color: var(--texto-3); text-align: center; }

/* Trocar senha não tem o painel da marca: uma coluna só, cartão centrado. */
.login:not(:has(.login__hero)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  padding-top: var(--e-5);
}
.login:not(:has(.login__hero)) .login__rodape { grid-column: 1; }