/* Mostrar/ocultar senha (parts/campo-senha.js). O botão de 32px fica dentro do campo, à direita; o JS acerta o top pelo
   centro do campo, porque o label envolve o campo e o botão fica fora do label.
   Os !important vencem o button do main.css (largura 100%, padding e fundo), os campos e botões da casca do painel
   (seletores com #header) e o <style> das páginas de subconta. */
.campo-senha {
    display: block;
    position: relative;
}
.campo-senha input {
    padding-right: 44px !important;             /* o texto não passa por baixo do botão */
}
/* Troca de senha do painel: o campo .inputmedio tem 200px de conteúdo (content-box); o conteúdo cede o que o padding
   ganhou (44 - 12) e a largura total fica a de antes */
.campo-senha > .inputmedio > input {
    width: 168px !important;
}
.campo-senha__botao {
    position: absolute;
    top: 50%;
    right: 4px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 32px !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%);
    cursor: pointer;
}
.campo-senha__botao[hidden] {
    display: none !important;
}
.campo-senha__botao:hover {
    background: #e8f0fc !important;             /* ícone #0857c3: 5,79:1 */
}
.campo-senha__botao:focus-visible {
    outline: 2px solid #0856c3 !important;      /* 6,37:1 sobre o #f9f9f9 do campo */
    outline-offset: -2px !important;
}
.campo-senha__botao img {
    display: block;
    width: 20px;
    height: 20px;
}