/*
 * AS TELAS DE ACESSO (login e troca de senha) no visual do sistema (20/10/2026).
 *
 * As peças são as de dentro: os tokens de `tema.css` (claro e escuro), o fundo
 * de rede animado de `.fs-view` (flowspec-base.css + o ajuste de `tema.css`),
 * o painel `.fs-panel`, a receita da faixa `ff-faixa` e a logo da Blind de cada tema.
 * Aqui só o arranjo: a caixa centrada, os campos e o botão de tema.
 */
html, body { margin: 0; min-height: 100%; background: var(--fs-background); }

.acesso.fs-view {
  display: block;
  min-height: 100vh;
}

.acesso-centro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 16px;
}

.acesso-caixa.fs-panel {
  width: 100%;
  max-width: 400px;
  padding: 34px 32px 30px;
}

.acesso-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.acesso-logo img { height: 46px; width: auto; display: block; }
.acesso-logo .logo-claro { display: none; }
:root[data-tema="claro"] .acesso-logo .logo-escuro { display: none; }
:root[data-tema="claro"] .acesso-logo .logo-claro { display: block; }

.acesso-titulo {
  margin: 0;
  text-align: center;
  color: var(--fs-neutral);
  font-size: calc(var(--fs-r) * 1.2);
  font-weight: 700;
}
.acesso-sub {
  margin: 4px 0 22px;
  text-align: center;
  color: var(--fs-muted);
  font-size: calc(var(--fs-r) * 0.76);
}

/* Os avisos do servidor (senha errada, troca obrigatória): a faixa do feed
   (`ff-faixa`), com a cor do tipo de aviso. */
.acesso-aviso {
  margin-bottom: 16px;
  padding: 9px 12px;
  background: #004dfd14;
  border: 1px solid #004dfd33;
  border-radius: 2px;
  color: rgb(var(--fs-ink-rgb) / 0.8);
  font-size: calc(var(--fs-r) * 0.74);
  line-height: 1.5;
}
.acesso-aviso-warning { background: #df9a2212; border-color: #df9a2238; color: var(--fs-orange); }
.acesso-aviso-danger { background: #a51d2714; border-color: #a51d2740; color: var(--fs-red); }
.acesso-aviso-success { background: #2f9e4414; border-color: #2f9e4440; color: var(--fs-green); }

.acesso-rotulo {
  display: block;
  margin: 0 0 6px;
  color: var(--fs-faint);
  font-size: calc(var(--fs-r) * 0.62);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.acesso-campo {
  display: block;
  width: 100%;
  height: 40px;
  margin-bottom: 16px;
  padding: 0 12px;
  background: var(--fs-background);
  border: 1px solid rgb(var(--fs-ink-rgb) / 0.15);
  border-radius: 2px;
  color: var(--fs-neutral);
  font-family: inherit;
  font-size: calc(var(--fs-r) * 0.85);
}
/* Os avisos de cada campo enquanto se digita (troca de senha). O campo perde
   a margem de baixo quando tem aviso logo abaixo. */
.acesso-campo + .acesso-dica { margin-top: -10px; }
.acesso-dica {
  min-height: 1.4em;
  margin-bottom: 8px;
  color: var(--fs-muted);
  font-size: calc(var(--fs-r) * 0.7);
}
.acesso-dica-erro { color: var(--fs-red); }
.acesso-dica-ok { color: var(--fs-green); }
.acesso-campo::placeholder { color: rgb(var(--fs-ink-rgb) / 0.35); }
.acesso-campo:focus { outline: none; border-color: var(--fs-primary); }

.acesso-botao {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--fs-primary);
  border: 1px solid var(--fs-primary);
  border-radius: 2px;
  color: #fff;
  font-family: inherit;
  font-size: calc(var(--fs-r) * 0.76);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.acesso-botao:hover { filter: brightness(1.12); }

.acesso-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: var(--fs-muted);
  font-size: calc(var(--fs-r) * 0.72);
  text-decoration: none;
}
.acesso-link:hover { color: var(--fs-neutral); }

.acesso-rodape {
  margin: 0;
  color: var(--fs-faint);
  font-size: calc(var(--fs-r) * 0.62);
  letter-spacing: 0.1em;
}

/* O botão de tema, no canto (o mesmo que o menu do usuário faz lá dentro). */
.acesso-tema {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-banner);
  border: 1px solid rgb(var(--fs-ink-rgb) / 0.15);
  border-radius: 2px;
  color: var(--fs-muted);
  cursor: pointer;
}
.acesso-tema:hover { color: var(--fs-neutral); border-color: rgb(var(--fs-ink-rgb) / 0.3); }