/* Enmascaramiento de la contraseña accesible */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.password-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1em;
}

#password, #confirm-password {
    flex: 1;
}

#toggle-password1, #toggle-password2 {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.5em;
}

#toggle-password1:focus, #toggle-password2:focus {
    outline: 2px solid #660000;
}

.material-symbols-outlined {
    font-size: 24px;
    color: #990000;
}

#toggle-password1[aria-pressed="true"] .material-symbols-outlined,
#toggle-password2[aria-pressed="true"] .material-symbols-outlined {
    color: #660000;
}