/* Olhinho do campo de senha (mostrar/ocultar).
 *
 * Vale para toda tela com senha — clube, público, login e torneio —,
 * por isso não mora em `css/telas/` nem em `componentes.css` (o login e
 * o primeiro acesso não carregam o tema inteiro). O HTML é sempre
 * `<div class="campo-senha"><input type="password">` + `_olhinho.html`;
 * o comportamento está em `js/senha.js`.
 *
 * O botão fica ABSOLUTO em cima do canto direito do campo, e o campo
 * ganha padding à direita para o texto digitado não passar por baixo
 * dele. As telas de login desenham `button{width:100%}` para o botão
 * de entrar: por isso as declarações aqui são explícitas e com
 * seletor mais forte, senão o olhinho viraria uma barra azul.
 */
.campo-senha{position:relative;width:100%}
.campo-senha>input{padding-right:42px}
.campo-senha>.olho{
  position:absolute;top:0;right:0;bottom:0;
  width:40px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:0 var(--raio-p) var(--raio-p) 0;
  color:var(--n-500);cursor:pointer;box-shadow:none;
}
.campo-senha>.olho:hover,.campo-senha>.olho:focus-visible{
  background:transparent;color:var(--tinta);
}
.campo-senha>.olho svg{width:18px;height:18px;display:block}
/* Os dois ícones vêm no HTML; o `aria-pressed` escolhe qual aparece. */
.campo-senha>.olho .olho-fechado{display:none}
.campo-senha>.olho[aria-pressed="true"] .olho-aberto{display:none}
.campo-senha>.olho[aria-pressed="true"] .olho-fechado{display:block}
/* Campo travado (chave que vem do .env) não tem o que mostrar. */
.campo-senha>input:disabled+.olho{display:none}

/* Botão "Sugerir senha forte" (js/senha.js gera e copia).
 *
 * Mora aqui, e não no tema, pelo mesmo motivo do olhinho: aparece no
 * primeiro acesso e na senha por link, que não carregam componentes.css
 * e desenham `button{width:100%}` para o botão principal. Por isso o
 * seletor é `button.sugerir-senha` — mais forte que o `button` dessas
 * telas — e as declarações são completas. Dentro do sistema o botão
 * também leva `.botao.claro`, cujo fundo e cor (mais específicos)
 * vencem com os mesmos tokens: fica igual nos dois mundos.
 */
button.sugerir-senha{
  display:inline-flex;align-items:center;gap:6px;
  width:auto;margin:0;padding:6px 12px;
  background:var(--n-0);color:var(--tinta);
  border:1px solid var(--tinta);border-radius:var(--raio-p);
  font-family:inherit;font-size:.8rem;font-weight:600;line-height:1.35;
  cursor:pointer;
}
button.sugerir-senha:hover,button.sugerir-senha:focus-visible{
  background:var(--info-fundo);color:var(--tinta);
}
/* Os 2 s de "copiada": verde de confirmação, sem trocar de tamanho. */
button.sugerir-senha[data-estado="copiada"]{
  background:var(--ok-fundo);color:var(--ok-texto);border-color:var(--ok-borda);
}
/* A linha que segura o botão embaixo do campo, nas telas sem `.campos`. */
.sugerir-senha-linha{margin:-4px 0 14px}