/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/login.css — #/entrar, #/recuperar-senha, #/redefinir-senha, #/perfil (js/telas/login.js)
 * Só tokens de css/base.css e classes de css/componentes.css e css/layout.css (ver docs/contrato.md).
 * Prefixo: .login- (telas avulsas, "Minha conta" e o modal "Alterar senha").
 */

/* =========================================================================
   TELAS AVULSAS (entrar, recuperar e redefinir senha)
   Único layout centralizado do sistema (tarefa única, sem navegação), alinhado ao terço superior.
   ========================================================================= */
.login {
  display: flex; flex-direction: column; align-items: center;
  min-height: 100%; padding: clamp(var(--esp-8), 9vh, var(--esp-16)) var(--esp-6) var(--esp-12);
}
.login__moldura {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-8);
  width: 100%; max-width: var(--largura-login); min-width: 0;
}
.login__marca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); min-width: 0; }
.login__marca .marca__logotipo { height: auto; }

.login__principal { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.login__cab { display: flex; flex-direction: column; gap: var(--esp-1); }
.login__sub { color: var(--cor-texto-2); }
.login__atalho-demo { margin-top: var(--esp-1); font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); color: var(--cor-texto-3); }
.login__demo-titulo:focus { outline: none; }
.login__avisos:empty { display: none; }
.login__form { display: flex; flex-direction: column; gap: var(--esp-5); }
.login__form > .btn--primario { margin-top: var(--esp-1); }
.login__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.login__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.login__acoes > .btn { align-self: stretch; }
.login__voltar .icone { color: var(--cor-texto-2); }
.login__nota {
  display: flex; align-items: flex-start; gap: var(--esp-2); padding-top: var(--esp-4);
  border-top: var(--borda-largura) solid var(--cor-borda-sutil);
  font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3);
}
.login__nota .icone { flex: none; width: 16px; height: 16px; margin-top: 0; }
.login kbd, .login-modal kbd { color: var(--cor-texto); }

/* Campo de senha: botão "olho" de 48 px dentro do campo de 56 (telas avulsas). Sem ícone à esquerda: texto alinhado aos outros campos. */
.login-senha > .entrada { padding-left: var(--esp-3); }
.login-senha--toque > .entrada { padding-left: var(--esp-4); }
.login-senha .entrada-icone__acao:focus-visible { outline-offset: calc(-1 * var(--esp-1)); }
.login-senha--toque .entrada-icone__acao { width: var(--alvo-minimo); }
.login-senha--toque > .entrada { padding-right: var(--alvo-minimo); }
.login-caps .icone { width: 16px; height: 16px; }

/* Requisitos da nova senha (verificação ao vivo) */
.login-req { display: flex; flex-direction: column; gap: var(--esp-2); }
.login-req__titulo { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-2); }
.login-req__lista { display: grid; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.login-req__item { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.login-req__icone { display: inline-flex; flex: none; color: var(--cor-texto-3); }
.login-req__icone .icone { width: 16px; height: 16px; stroke-width: var(--traco-icone-status); }
.login-req__item--ok { color: var(--cor-texto); }
.login-req__item--ok .login-req__icone { color: var(--cor-sucesso-texto); }

/* Acesso demonstrativo (ao lado do formulário no desktop; abaixo, com divisória, no toque) */
.login__demo { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; padding-top: var(--esp-6); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }
.login__demo-cab { display: flex; flex-direction: column; gap: var(--esp-1); }
.login__demo-titulo { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); color: var(--cor-texto-3); }
.login__demo-texto { color: var(--cor-texto-2); }
.login__demo-lista { display: grid; gap: var(--intervalo-alvos); margin: 0; padding: 0; list-style: none; }
.login-demo {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: var(--altura-controle-toque);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); text-align: left;
  background: var(--cor-superficie-2); border: var(--borda-largura) solid var(--cor-borda-controle); border-radius: var(--raio-2); color: var(--cor-texto);
  transition: background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao);
}
.login-demo:hover { background: var(--cor-superficie-3); border-color: var(--cor-borda-controle-hover); }
.login-demo:active { background: var(--cor-borda); }
.login-demo:disabled { background: var(--cor-superficie-1); border-color: var(--cor-borda); color: var(--cor-texto-desabilitado); }
.login-demo:disabled .login-demo__pessoa, .login-demo:disabled .login-demo__desc { color: var(--cor-texto-desabilitado); }
.login-demo__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.login-demo__titulo { font-size: var(--fs-corpo); line-height: var(--lh-corpo); font-weight: var(--peso-forte); }
.login-demo__pessoa { display: flex; flex-direction: column; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.login-demo__email { color: var(--cor-texto-3); overflow-wrap: anywhere; min-width: 0; }
.login-demo__desc { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.login-demo__seta { display: inline-flex; flex: none; color: var(--cor-texto-2); }
.login-demo__seta .icone { width: 20px; height: 20px; }
.login__dicas { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.login__dicas li { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.login__dicas .icone { flex: none; width: 16px; height: 16px; color: var(--cor-texto-3); }
.login__dica-email { color: var(--cor-texto); overflow-wrap: anywhere; }

/* Resultado (recuperação enviada, link inválido) */
.login-resultado { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-4); background: var(--cor-superficie-1); border-left: var(--borda-marcador) solid var(--cor-neutro-borda); border-radius: var(--raio-2); }
.login-resultado__icone { display: inline-flex; flex: none; color: var(--cor-texto-2); }
.login-resultado__icone .icone { width: 24px; height: 24px; }
.login-resultado__texto { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; color: var(--cor-texto-2); }
.login-resultado__titulo { font-size: var(--fs-secao); line-height: var(--lh-secao); font-weight: var(--peso-forte); color: var(--cor-texto); }
.login-resultado__titulo:focus { outline: none; }
.login-resultado__email { font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); overflow-wrap: anywhere; }
.login-resultado__email span { color: var(--cor-texto-2); }
.login-resultado--perigo { border-left-color: var(--cor-perigo); }
.login-resultado--perigo .login-resultado__icone { color: var(--cor-perigo-texto); }
.login__outro { align-self: center; }
.login-demo-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-4);
  border: var(--borda-largura) dashed var(--cor-borda-controle); border-radius: var(--raio-2); color: var(--cor-texto-2);
}
.login-demo-link > .btn { align-self: stretch; height: auto; min-height: var(--altura-controle-toque); padding-block: var(--esp-3); white-space: normal; }
.login-demo-link > .btn > span { white-space: normal; text-align: center; }

@media (min-width: 1024px) {
  .login__moldura--dupla {
    max-width: calc(var(--largura-login) * 2 + var(--esp-12) * 2 + var(--borda-largura));
    grid-template-columns: minmax(0, var(--largura-login)) minmax(0, var(--largura-login));
    column-gap: var(--esp-12); row-gap: var(--esp-10); align-items: start;
  }
  .login__moldura--dupla > .login__marca { grid-column: 1 / -1; }
  .login__moldura--dupla > .login__demo { padding: 0 0 0 var(--esp-12); border-top: 0; border-left: var(--borda-largura) solid var(--cor-borda-sutil); align-self: stretch; }
}

@media (max-width: 1023px) {
  .login__nota, .login__dicas li, .login-demo__pessoa, .login-demo__desc, .login-resultado__email, .login-req__titulo {
    font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque);
  }
  .login-req__item { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .login-demo__titulo { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .login-resultado__titulo { font-size: var(--fs-secao-toque); line-height: var(--lh-secao-toque); }
  .login-senha .entrada-icone__acao { width: var(--alvo-minimo); }
  .login-senha > .entrada { padding-left: var(--esp-4); padding-right: var(--alvo-minimo); }
  .login__moldura--dupla .login__nota { padding-top: 0; border-top: 0; }   /* a divisória do acesso demonstrativo logo abaixo já separa */
}
@media (max-width: 767px) {
  .login { padding: var(--esp-6) var(--margem-pagina-celular) var(--esp-10); }
  .login__moldura { gap: var(--esp-6); }
  .login__marca .selo-demo { display: none; }   /* no celular a faixa "Dados demonstrativos" (moldura) já faz o papel do selo */
}

/* =========================================================================
   MINHA CONTA (#/perfil)
   ========================================================================= */
.login-conta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); padding: var(--esp-4); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil); }
.login-conta__avatar { display: inline-flex; flex: none; }
.login-conta__avatar .avatar { width: 56px; height: 56px; font-size: var(--fs-secao); }
.login-conta__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.login-conta__nome { font-size: var(--fs-secao); line-height: var(--lh-secao); font-weight: var(--peso-forte); overflow-wrap: anywhere; }
.login-conta__cargo { color: var(--cor-texto-2); }
.login-conta__rodape { justify-content: space-between; }
.login-conta__nota { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-2); }
.login-conta__nota .icone { flex: none; width: 16px; height: 16px; color: var(--cor-texto-3); }

.login-linhas { margin: 0; padding: 0; list-style: none; }
.login-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-6);
  padding: var(--esp-4); border-top: var(--borda-largura) solid var(--cor-borda-sutil);
}
.login-linha:first-child { border-top: 0; }
.login-linha__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.login-linha__titulo { font-weight: var(--peso-forte); }
.login-linha__desc { font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }
.login-linha__acao { display: flex; flex: none; max-width: 100%; }

.login-previa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.login-previa__amostra { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.login-previa__rotulo { font-size: var(--fs-legenda); line-height: var(--lh-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-3); }
.login-previa__amostra--uso .login-previa__rotulo { color: var(--cor-texto); }
.login-previa__tela {
  display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3);
  background: var(--cor-fundo); color: var(--cor-texto); border: var(--borda-largura) solid var(--cor-borda); border-radius: var(--raio-2);
}
.login-previa__pergunta { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); }

.login-modal__avisos:empty { display: none; }
.login-modal__nota { display: flex; align-items: flex-start; gap: var(--esp-2); }
.login-modal__nota .icone { flex: none; width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .login-linha__desc, .login-conta__nota { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .login-conta__nome { font-size: var(--fs-secao-toque); line-height: var(--lh-secao-toque); }
}
@media (max-width: 767px) {
  .login-perfil .pagina-cab__acoes { display: none; }   /* "Sair" vai para o fim da página no celular */
  .login-linha__acao { width: 100%; }
  .login-linha__acao > .btn { width: 100%; }
  .login-previa { grid-template-columns: minmax(0, 1fr); }
}

/* Esqueci minha senha: passos com o administrador */
.login-passos { margin: 0; padding-left: 20px; display: grid; gap: var(--esp-3); color: var(--cor-texto); line-height: var(--lh-corpo); }
.login-passos li::marker { color: var(--cor-texto-2); font-variant-numeric: tabular-nums; }