/*
   Botao de mostrar/ocultar senha, injetado por js/toggle-senha.js.
   O JS embrulha o <input type="password"> neste .campo-senha para ter um
   contexto de posicionamento proprio: assim o botao cai no lugar certo tanto
   no login (Tailwind legado) quanto nos modais em Tabler, sem tocar no HTML
   de cada tela.
*/
.campo-senha {
    position: relative;
    display: block;
    width: 100%;
}

/* Espaco a direita para o botao nao cobrir o que esta sendo digitado. */
.campo-senha > input {
    padding-right: 2.5rem;
}

.campo-senha__botao {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    line-height: 1;
    cursor: pointer;
}

.campo-senha__botao:hover {
    color: #111827;
}

.campo-senha__botao:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 0.25rem;
    color: #111827;
}