/**
 * Mostrar e ocultar a senha (issue #212): olho dentro do campo.
 * Componente reutilizável, montado por assets/js/modules/senha-visivel.js
 * em todo input[data-senha-visivel].
 */
.animalart-senha {
    position: relative;
    display: block;
    width: 100%;
}

.animalart-senha > input:is([type="password"], [type="text"]) {
    width: 100%;
    padding-right: 52px;
}

/* O olho nativo do Edge duplicaria o nosso. */
.animalart-senha > input::-ms-reveal,
.animalart-senha > input::-ms-clear {
    display: none;
}

.animalart-senha__botao {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--animalart-ui-radius-control, 999px);
    background: transparent;
    color: var(--auth-muted, var(--animalart-muted, #666));
    cursor: pointer;
    transform: translateY(-50%);
}

.animalart-senha__botao:hover {
    color: var(--auth-foreground, var(--animalart-ink, #171717));
}

.animalart-senha__botao:focus-visible {
    outline: 2px solid var(--auth-accent, var(--animalart-focus, #171717));
    outline-offset: -2px;
}

/* Risco do olho: aparece com a senha visível (o clique oculta). */
.animalart-senha__risco {
    display: none;
}

.animalart-senha__botao.is-visivel .animalart-senha__risco {
    display: inline;
}