/*!
 * Mostrar/ocultar contraseña — estilos del botón.
 * El JS (password-toggle.js) envuelve cada input y le agrega el botón.
 */

.pwd-toggle-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* El texto no debe pasar por debajo del botón */
.pwd-toggle-wrap > input[type="password"],
.pwd-toggle-wrap > input[type="text"] {
    padding-right: 46px !important;
}

.pwd-toggle-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
    line-height: 0;
    transition: color .2s ease, background-color .2s ease;
    z-index: 3;
}

.pwd-toggle-btn:hover {
    color: #2563EB;
    background: rgba(37, 99, 235, .08);
}

.pwd-toggle-btn:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 1px;
}

.pwd-toggle-btn svg {
    pointer-events: none;
}

/* Dentro de un input-group de Bootstrap el botón se corre para no pisar el addon */
.input-group .pwd-toggle-wrap {
    flex: 1 1 auto;
    width: 1%;
}

/* Edge y IE muestran su propio ojo: se oculta para no duplicarlo */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}