/* ============================================
   MICRO INTERACCIONES — Botones
   Scale | Glow | Shadow | Transiciones suaves
   ============================================ */

.btn,
.toggle-password,
.tp-notify__close,
.profile-avatar {
    will-change: transform;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        filter 0.3s ease,
        background 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* Hover: scale + brillo */
.btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05) saturate(1.06);
}

/* Press: hundir */
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
    transition-duration: 120ms;
    filter: brightness(0.97);
}

/* Focus: leve escala */
.btn:focus-visible {
    transform: scale(1.02);
}

/* Glow + shadow por variante */
.btn-primary:hover:not(:disabled),
.btn--primary:hover:not(:disabled) {
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 0.18),
        0 16px 40px rgba(16, 185, 129, 0.32),
        0 0 30px rgba(52, 211, 153, 0.28);
}

.btn-danger:hover:not(:disabled),
.btn--danger:hover:not(:disabled) {
    box-shadow:
        0 0 0 1px rgba(244, 63, 94, 0.18),
        0 16px 40px rgba(244, 63, 94, 0.32),
        0 0 30px rgba(244, 63, 94, 0.26);
}

.btn-outline:hover:not(:disabled),
.btn--outline:hover:not(:disabled) {
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 0.14),
        0 12px 30px rgba(2, 6, 23, 0.35),
        0 0 26px rgba(52, 211, 153, 0.16);
}

.btn-secondary:hover:not(:disabled),
.btn--secondary:hover:not(:disabled) {
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.16),
        0 14px 32px rgba(2, 6, 23, 0.32),
        0 0 26px rgba(96, 165, 250, 0.18);
}

.btn-google:hover:not(:disabled),
.btn--google:hover:not(:disabled) {
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.14),
        0 14px 32px rgba(2, 6, 23, 0.28),
        0 0 26px rgba(248, 250, 252, 0.12);
}

/* Toggle password (ojo) */
.toggle-password:hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.22);
}

.toggle-password:active {
    transform: scale(0.94);
    transition-duration: 120ms;
}

/* Cerrar notificación */
.tp-notify__close:hover {
    transform: scale(1.1);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.25);
}

.tp-notify__close:active {
    transform: scale(0.9);
    transition-duration: 120ms;
}

/* Avatar de perfil */
.profile-avatar:hover {
    box-shadow:
        0 0 0 4px rgba(2, 6, 23, 0.55),
        0 0 40px rgba(52, 211, 153, 0.4);
}

.profile-avatar:active {
    transform: scale(0.95);
    transition-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .toggle-password,
    .tp-notify__close,
    .profile-avatar {
        transition: none !important;
    }

    .btn:hover:not(:disabled),
    .btn:active:not(:disabled),
    .toggle-password:hover,
    .toggle-password:active,
    .tp-notify__close:hover,
    .tp-notify__close:active,
    .profile-avatar:active {
        transform: none;
        filter: none;
    }
}