/*
 * Botón "ojo" para mostrar/ocultar contraseñas.
 *
 * No se escribe el botón en cada formulario: password-toggle.js lo inyecta en
 * cada .pw-field. Aquí solo va el posicionamiento. Va DESPUÉS de style.css.
 *
 * La caja .pw-field es el .form-floating de Bootstrap, que ya es
 * position:relative, así que el botón se ancla a él.
 */

.pw-field {
    position: relative;
}

/* Deja sitio al botón para que el texto no quede debajo del icono. */
.pw-field .form-control {
    padding-right: 46px;
}

.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7e7e7e;
    font-size: 1rem;
    cursor: pointer;
    /* Por encima del input y de su label flotante para poder pulsarlo. */
    z-index: 5;
    transition: color .15s ease;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
    color: var(--theme-color);
    outline: none;
}

.pw-toggle:focus-visible {
    /* Foco visible por teclado sin recuadro cuadrado feo. */
    box-shadow: 0 0 0 2px rgba(var(--theme-color-rgb), .35);
    border-radius: 6px;
}

/* Cuando Bootstrap marca el campo inválido pinta su propio icono de fondo a la
   derecha; con el ojo encima se solapaban. Se quita ese icono en estos campos. */
.pw-field .form-control.is-invalid {
    background-image: none;
}