How can I change the color of a object inside a symbol?

Hello!

I'm working on this study and I need to change the color of an object inside a symbol when I click another object.

The object is called "bola", wich is inside the symbol "ponto" and the clicking object are the colored pencils (each pencil should change the color of the symbol's object, giving the impression you'd selecting a different pencil to draw).

I think it's simple to understand what I mean when you see the files.

I already tried this line on click event of the pencils, but it didn't work:

sym.getSymbol("ponto").$("bola").css("color","#123456");

Anyone knows how to make that work?

I would like to improve the experience of drawing as well. I made it with the "mousedown" event. Is that a better way to get a similar effect?

My files

Thanks a lot,

Clayton F.