/* ===========================================================================
   CAMPOS DE SENHA: olho, medidor de força e aviso de divergência
   ===========================================================================
   COMPARTILHADO entre o PORTAL e o SITE, e é de propósito.

   Este widget nasceu no portal e foi para o site quando o cadastro público
   ganhou os mesmos três campos. Duplicar as regras nas duas folhas era a saída
   fácil e a errada: são dois arquivos de mais de duas mil linhas cada, e a
   correção do `[hidden]` lá embaixo — que só a prova visual encontrou —
   passaria a ter de ser lembrada duas vezes.

   Por isso os seletores aqui NÃO citam classe de interface nenhuma:
   `.password-field input`, e não `.input` (portal) nem `.site-input` (site).
   Quem carrega decide a aparência de fora; este arquivo só desenha o widget.

   Desenhado por `js/shared/surfapp-password.js`, que envolve cada campo num
   `.password-field` e injeta os elementos. Sem JavaScript nada disto existe — e
   o formulário continua funcionando, porque quem valida é o servidor. Máscara e
   medidor são conforto, nunca camada de dados. */
.password-field {
    position: relative;
    display: block;
}

/* O campo abre espaço para o botão, para o texto digitado não passar por baixo
   dele nas senhas longas — que são justamente as que queremos incentivar. O
   valor acompanha a largura do alvo (2.25rem) mais a folga da direita. */
.password-field input {
    padding-right: 3rem;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   O BOTÃO DO OLHO
   ---------------------------------------------------------------------------
   Ele mora DENTRO do campo, encostado na direita. Fora dele — que foi como
   apareceu na tela de login enquanto esta folha não era carregada — vira um
   botão solto com borda, que a pessoa lê como uma segunda ação do formulário
   em vez de um detalhe do campo.

   Nada de fundo nem de borda no estado normal: o campo já é a caixa, e uma
   segunda caixa dentro dela polui. O que responde ao mouse e ao teclado é um
   halo suave, que aparece só quando há interação. */
/* O ÍCONE DE VALIDAÇÃO DO BOOTSTRAP SAI DE CIMA DO OLHO.

   No painel, `.is-invalid` desenha um "X" vermelho como `background-image` no
   canto direito do campo — exatamente onde o olho mora. Os dois se sobrepõem e
   viram um borrão que não é nem um nem outro.

   Some o ícone, e não o olho: a borda vermelha continua marcando o campo, e a
   mensagem escrita embaixo ("As senhas não são iguais") diz mais do que o "X"
   dizia. O que se perderia ao esconder o olho é a única forma de conferir o que
   se digitou — que é justamente o que resolve o erro sinalizado.

   Vale para as duas classes: `is-valid` desenha um tique no mesmo lugar. */
.password-field input.is-invalid,
.password-field input.is-valid,
.password-field input.is-invalido {
    background-image: none;
    padding-right: 3rem;
}

.password-eye {
    position: absolute;
    top: 50%;
    right: .375rem;
    transform: translateY(-50%);

    /* 2.25rem de alvo: menor que isto erra o dedo no celular, e maior começa a
       encostar no texto digitado. O ícone dentro tem 1.15rem — a diferença é
       área de toque, não desenho. */
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: #6b6560;
    transition: color .15s ease, background-color .15s ease;
}

.password-eye svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    /* O traço herda a cor do botão, e o botão herda o tom do texto de apoio de
       cada casa. Assim a mesma folha serve ao portal, ao site e ao painel sem
       nenhuma cor de marca escrita aqui. */
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-eye:hover {
    color: #1a828e;
    background: rgba(0, 0, 0, .05);
}

/* O foco NÃO é o mesmo do hover: quem chega por teclado precisa de um contorno
   que sobreviva a qualquer fundo, e não de uma mudança de tom que se perde. */
.password-eye:focus-visible {
    color: #1a828e;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Senha à mostra: o botão fica aceso, porque agora ele descreve um ESTADO
   ligado e não uma ação disponível. */
.password-eye[aria-pressed="true"] {
    color: #1a828e;
}

/* O traço que corta o olho só existe quando a senha está visível.

   A direção importa: risco presente = "está sendo visto, clique para
   esconder". O contrário — mostrar o risco enquanto a senha está oculta — é a
   leitura que parece óbvia e confunde na prática, porque desenha o estado
   atual num botão que promete a próxima ação. */
.password-eye__corte {
    opacity: 0;
    transition: opacity .15s ease;
}

.password-eye[aria-pressed="true"] .password-eye__corte {
    opacity: 1;
}

/* A pupila some junto: olho fechado com pupila no meio do risco vira rabisco. */
.password-eye[aria-pressed="true"] .password-eye__pupila {
    opacity: .35;
}

.password-meter {
    height: .28rem;
    margin-top: .4rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.password-meter__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: .25rem;
    background: #c0392b;
    transition: width .2s ease, background-color .2s ease;
}

/* Cores do vermelho ao verde. A escala é grosseira de propósito: a medida é uma
   dica, e quem recusa a senha é a regra do servidor. */
.password-meter__fill[data-level="1"] { background: #e67e22; }
.password-meter__fill[data-level="2"] { background: #d4a017; }
.password-meter__fill[data-level="3"] { background: #4aa5a6; }
.password-meter__fill[data-level="4"] { background: #1a828e; }

.password-meter__label {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: #6b6560;
}

.password-mismatch {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: #c0392b;
}

/* `display: block` acima VENCE o atributo `hidden`, que o navegador aplica com
   `display: none` na folha de estilo dele — regra de autor tem precedência
   sobre a do user agent. Sem esta linha o aviso "as senhas não são iguais"
   ficava visível para sempre, inclusive com as duas senhas idênticas, e o JS
   parecia certo: `el.hidden` era `true` o tempo todo.

   Só apareceu na prova visual. Vale para qualquer elemento que este projeto
   esconda por `hidden` e estilize com `display`. */
.password-mismatch[hidden] {
    display: none;
}