/* public/assets/css/components/password-toggle.css
   Componente: mostrar/ocultar contraseña, inyectado por
   components/password-toggle.js en cualquier input[type=password] de la
   app (login, formularios futuros...), sin marcado adicional en cada vista.
   Debe cargarse el ultimo de todos los CSS (ver APP/views/layouts/main.php)
   para ganar siempre a los estilos de padding propios de cada formulario
   (p. ej. .auth-form .form-group input o .app-form-group input). */

.app-password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.app-password-wrapper input[type="password"],
.app-password-wrapper input[type="text"] { width: 100% !important; padding-right: var(--app-space-xl) !important; }
.app-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--app-text-soft);
    cursor: pointer;
    border-radius: var(--app-radius-sm);
    transition: color .15s ease, background .15s ease;
}
.app-password-toggle svg { display: block; }
.app-password-toggle:hover { color: var(--app-primary); background: rgba(var(--app-primary-rgb), 0.08); }
.app-password-toggle:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }