/* Campo contraseña con botón mostrar/ocultar — uso unificado en login, modales y formularios */

.password-field,
.password-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.password-field .form-control,
.password-input-wrapper .form-control {
    padding-right: 2.85rem !important;
    width: 100%;
}

.password-field__toggle,
.password-visibility-toggle,
.toggle-password,
.password-toggle.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.password-field__toggle i,
.password-visibility-toggle i,
.toggle-password i,
.password-toggle i {
    display: block;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.password-field__toggle:hover,
.password-visibility-toggle:hover,
.toggle-password:hover,
.password-toggle:hover {
    color: var(--dp-brand, #1f6f8b);
    background: rgba(31, 111, 139, 0.08);
}

.password-field__toggle:focus,
.password-visibility-toggle:focus,
.toggle-password:focus,
.password-toggle:focus {
    outline: none;
    color: var(--dp-brand, #1f6f8b);
}

.password-field__toggle:focus-visible,
.password-visibility-toggle:focus-visible,
.toggle-password:focus-visible,
.password-toggle:focus-visible {
    outline: 2px solid var(--dp-brand, #1f6f8b);
    outline-offset: 1px;
}

/* Register: input con icono izquierdo */
.input-wrapper .password-toggle,
.input-wrapper .password-visibility-toggle {
    right: 0.85rem;
}

.input-wrapper .form-control {
    padding-right: 3rem !important;
}

/* Legacy Bootstrap input-group — neutralizar estilos que desalinean el ícono */
.input-group.input-group-merge .password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
}

.input-group.input-group-merge {
    position: relative;
    flex-wrap: nowrap;
}

.input-group.input-group-merge > .form-control {
    border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
    padding-right: 2.85rem !important;
}

.input-group.input-group-merge > .password-visibility-toggle {
    position: absolute;
    inset: auto 0.65rem auto auto;
    top: 50%;
    transform: translateY(-50%);
}

.mandatory-password-modal .password-field .form-control,
.form-password-toggle .password-field .form-control {
    min-height: calc(1.5em + 0.94rem + 2px);
}