/*
  V166 - O OLHO PARA VER A SENHA (o desenho)

  A caixa so existe para o botao poder ficar por cima do campo. Ela nao muda
  a largura nem o espaco que o campo ja ocupava - se mudasse, cada uma das
  cinco telas de senha ficaria um pouco diferente do que era.
*/
.olho-caixa {
  position: relative;
  display: block;
  width: 100%;
}

/* O texto digitado nao pode passar por baixo do botao. */
.olho-caixa > input[type="password"],
.olho-caixa > input[type="text"] {
  width: 100%;
  padding-right: 48px;
}

.olho-botao {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  /* 40x40: o minimo que um dedo acerta sem errar no celular. */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #7a7285;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background-color .15s ease;
}

.olho-botao:hover { color: #43395a; background: rgba(0, 0, 0, .05); }
.olho-botao:active { background: rgba(0, 0, 0, .09); }

/* Quem navega pelo teclado precisa ver onde esta. */
.olho-botao:focus-visible {
  outline: 2px solid #6f2aa8;
  outline-offset: 1px;
  color: #43395a;
}

/* Nas telas de fundo escuro o cinza sumiria. */
.auth-shell .olho-botao { color: #8b8299; }
.auth-shell .olho-botao:hover { color: #2b2337; }

@media (prefers-reduced-motion: reduce) {
  .olho-botao { transition: none; }
}