/* ==========================================================================
   Agenda · Campo de senha e o recado de senha esquecida (herdado do Seiva)
   --------------------------------------------------------------------------
   Folha propria porque vale nas TRES telas com senha (entrar, primeiro
   acesso, trocar a senha) e anda junto do senha.js. Carregada por ULTIMO no
   base.html: usa os tokens var(--nt-*) e precisa da palavra final sobre a
   margem do input.
   ========================================================================== */

/* .campo-senha e o berco do botao. BLOCO, nunca inline: caixa em elemento
   inline corta o conteudo. */
.campo-senha { position: relative; display: block; margin-top: 6px; }
.campo-senha input { display: block; margin-top: 0; }
.entrar-campos .campo-senha { margin-top: 7px; }

/* O botao so existe quando o JavaScript esta de pe: o senha.js marca a
   caixa com `com-olho`. Sem JS ninguem ve um olho que nao funciona. */
.campo-senha .ver-senha { display: none; }
.campo-senha.com-olho input { padding-right: 48px; }
.campo-senha.com-olho .ver-senha {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 44px; min-height: 40px; padding: 0;          /* alvo de toque */
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0 11px 11px 0;
  box-shadow: none; filter: none; transform: none;
  color: var(--nt-muted); cursor: pointer;
}
.campo-senha.com-olho .ver-senha:hover { background: none; color: var(--nt-brand-text); }
.campo-senha.com-olho .ver-senha:focus-visible {
  outline: 2px solid var(--nt-brand); outline-offset: -3px;
  border-radius: 10px; color: var(--nt-brand-text);
}

/* Um icone de cada vez: olho aberto = senha escondida; olho cortado = a mostra. */
.campo-senha .ver-senha .olho-fechado { display: none; }
.campo-senha .ver-senha.mostrando .olho-aberto { display: none; }
.campo-senha .ver-senha.mostrando .olho-fechado { display: block; }

/* "Esqueceu a senha?" — nao ha recuperacao por e-mail, de proposito: quem
   devolve o acesso e o medico, pela tela de Usuarios. */
.entrar-esqueci {
  margin: 10px 0 0; text-align: center;
  font: 500 12px 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--nt-muted);
}