/* ============================================================
   Miss Paula ERP - Password Toggle
   Botón del ojo dentro de un campo de contraseña.
   Ver assets/password-toggle.js para el marcado.

   Los colores llevan valor de respaldo porque login.php y
   verify.php no cargan estilos.css (ni sus variables).
   ============================================================ */

.mp-password-wrapper {
    position: relative;
}

.mp-password-wrapper > input {
    padding-right: 42px;
}

/* Dentro de un .input-group (campo + botones), el campo ocupa el espacio libre */
.input-group .mp-password-wrapper {
    flex: 1;
}

.mp-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--mp-text-muted, #64748B);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.mp-password-toggle:hover {
    color: var(--mp-blue, #2563EB);
}

/* Desactivado por la vista cuando no hay nada que mostrar (p. ej. editar_alumno.js) */
.mp-password-toggle:disabled,
.mp-password-toggle:disabled:hover {
    color: var(--mp-text-muted, #64748B);
    opacity: 0.35;
    cursor: not-allowed;
}

.mp-password-toggle:focus-visible {
    outline: 2px solid var(--mp-blue, #2563EB);
    outline-offset: 1px;
}