/* Botão de revelar senha — um único componente para todo o sistema.

   Antes cada tela tinha o seu: umas com o texto "Mostrar/Ocultar", outras com
   os caracteres ◉/◌. O texto mudava de largura ao alternar e empurrava o campo,
   que é o que fazia o botão "quebrar". Agora é só o ícone de olho, em caixa
   quadrada de tamanho fixo — o estado vive em aria-pressed e o CSS troca o
   desenho, sem o JavaScript mexer no conteúdo do botão. */
.password-toggle{
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8b9aa8;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.password-toggle:hover{background:#eef2f6;color:#41505e}
.password-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.password-toggle .app-icon{width:19px;height:19px;pointer-events:none}
/* Fechado mostra o olho aberto (a ação é "mostrar"); aberto mostra o olho
   cortado (a ação passa a ser "ocultar"). */
.password-toggle .app-icon:last-child{display:none}
.password-toggle[aria-pressed="true"]{color:var(--brand-secondary,#008fd3)}
.password-toggle[aria-pressed="true"] .app-icon:first-child{display:none}
.password-toggle[aria-pressed="true"] .app-icon:last-child{display:block}

/* O invólucro precisa ser a referência do absolute e o campo precisa de espaço
   à direita para o ícone não cobrir o texto digitado. */
.password-wrap,.login-password,.member-password{position:relative;display:block}
.password-wrap>input,.login-password>input,.member-password>input{padding-right:52px!important}