/* Campo de senha com o "olhinho" (mostrar/ocultar).
   Marcação: <div class="campo-senha"><input type="password" class="form-control">
             <button type="button" class="campo-senha-btn">…</button></div>
   O comportamento fica em static/js/campo-senha.js (delegação de evento,
   uma implementação para todas as telas). Cores vêm das variáveis de tema
   do base.html, então o claro/escuro já sai certo sem regra extra. */
.campo-senha {
    position: relative;
}

/* Espaço à direita para o botão não cobrir o fim da senha digitada */
.campo-senha .form-control {
    padding-right: 2.75rem;
}

.campo-senha-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    /* Fica por cima do input, senão o Bootstrap põe o campo focado na frente */
    z-index: 5;
}

.campo-senha-btn:hover {
    color: var(--text-primary, #212529);
}

/* tabindex="-1" tira o botão do Tab, mas quem chega por outro caminho
   ainda enxerga o foco */
.campo-senha-btn:focus-visible {
    outline: 2px solid var(--link-active-bg, #465FFF);
    outline-offset: -2px;
    border-radius: 0.375rem;
}

.campo-senha-btn i,
.campo-senha-btn svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
}