/* ============================================================
   Melhor Passagem · CRM — Camada SENHA (aditiva)
   ------------------------------------------------------------
   O botão de mostrar/esconder senha. Existe porque o CRM tinha
   20 campos de senha e nenhum jeito de conferir o que se
   digitou — inclusive nos dois "Repita a nova senha", que só
   existem POR CAUSA disso, e na senha de aplicativo do Gmail
   (16 letras), onde errar um caractere devolve um "Invalid
   credentials" que não diz o que está errado.

   Isto é FUNÇÃO, não estética: vale no tema claro, no escuro e
   com ou sem o `ds-advanced`. Por isso nada aqui é opt-in.

   Cor: `currentColor` de propósito (a lição do ds-kbd). O botão
   fica sobre fundo branco num tema e escuro no outro; herdando
   a cor do container ele acerta nos dois sem tabela de tokens.

   Reversão: tirar este <link> e o do ds-senha.js do console.html
   e do portal.html. Sem eles os campos voltam a ser <input>
   comuns dentro de um <span> inerte — nada quebra.
   ============================================================ */

/* O envelope que o ds-senha.js põe em volta do campo. `display:block`
   e largura cheia para o input continuar ocupando a linha inteira
   como ocupava solto. */
.ds-senha-campo {
  position: relative;
  display: block;
  width: 100%;
}

/* Abre espaço para o botão não cobrir o que a pessoa digita.
   `!important` é obrigatório aqui, não preguiça: o ds-forms.css
   fixa `padding: 0 14px` num seletor com dois :not() que ganha de
   qualquer classe (ver a cascata do ds-forms). Só o lado direito
   muda; o resto do padding continua sendo o do tema. */
.ds-senha-campo > input {
  padding-right: 40px !important;
}

.ds-senha-olho {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;      /* herda do card/modal: certo no claro e no escuro */
  opacity: .5;
  transition: opacity .15s;
  -webkit-appearance: none;
  appearance: none;
}

.ds-senha-olho:hover,
.ds-senha-olho:focus-visible {
  opacity: 1;
}

/* O foco tem que aparecer: quem chega aqui pelo Tab não vê o hover. */
.ds-senha-olho:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.ds-senha-olho svg {
  width: 17px;
  height: 17px;
  display: block;
  pointer-events: none;  /* o clique é sempre do botão, nunca do ícone */
}

/* Enquanto a senha está à mostra o botão fica aceso, para o estado
   ser visível sem precisar olhar o campo. */
.ds-senha-olho[aria-pressed="true"] {
  opacity: .95;
}

/* No celular o dedo precisa de mais alvo que o ponteiro do mouse. A altura
   nao pode crescer (ela e a do proprio campo), mas a largura pode. */
@media (pointer: coarse) {
  .ds-senha-olho { width: 44px; }
  .ds-senha-campo > input { padding-right: 46px !important; }
}

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