/* ---------------------------------------------------------------------------
   O olhinho da senha — .senha
   ---------------------------------------------------------------------------
   O botão mora DENTRO da borda do campo, encostado à direita. A caixa ganha
   espaço à direita para o texto nunca correr por baixo do olho.

   ÁREA DE TOQUE ≠ TAMANHO VISUAL (a regra que o refino do aparelho pagou caro
   para aprender): o desenho tem 20px, e a área clicável tem 44 — sem esticar o
   campo, sem empurrar o formulário.
   --------------------------------------------------------------------------- */

.senha { position: relative; display: flex; align-items: center; min-width: 0; }

.senha .campo__controle { padding-right: 42px; }

/* O Edge e o IE desenham um "revelar senha" próprio dentro do campo; com o
   nosso botão ali, viram dois olhos em cima um do outro. */
.senha .campo__controle::-ms-reveal,
.senha .campo__controle::-ms-clear { display: none; }

.senha__olho {
  position: absolute;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-height: 36px;
  padding: 0;
  color: var(--cor-texto-fraco);
  background: transparent;
  border: 0;
  border-radius: var(--raio-sm);
  cursor: pointer;
  transition: color var(--transicao-rapida);
}

/* A área de toque chega a 44px sem o botão crescer na tela. */
.senha__olho::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
}

.senha__olho:hover { color: var(--cor-texto); }
.senha__olho:focus-visible {
  outline: 2px solid var(--cor-acao);
  outline-offset: -2px;
  color: var(--cor-texto);
}

/* Um ícone por estado, e só um deles na tela: o botão troca de desenho quando
   a senha aparece, que é o retorno visual de que o toque fez alguma coisa. */
.senha__icone--esconder { display: none; }
.senha--visivel .senha__icone--ver { display: none; }
.senha--visivel .senha__icone--esconder { display: block; }
.senha--visivel .senha__olho { color: var(--cor-acao); }