diff --git a/src/components/ViewerControls.tsx b/src/components/ViewerControls.tsx
index 359eee6..07563c0 100644
--- a/src/components/ViewerControls.tsx
+++ b/src/components/ViewerControls.tsx
@@ -20,6 +20,16 @@ const WIRE_COLORS = [
   { label: 'Branco', value: '#e2e8f0' },
 ];
 
+const colorClassMap: Record<string, string> = {
+  '#8899aa': 'bg-[#8899aa]',
+  '#ef4444': 'bg-red-500',
+  '#22c55e': 'bg-green-500',
+  '#3b82f6': 'bg-blue-500',
+  '#eab308': 'bg-yellow-500',
+  '#f97316': 'bg-orange-500',
+  '#e2e8f0': 'bg-slate-200',
+};
+
 export function ViewerControls() {
   const {
     opacity, setOpacity, renderMode, setRenderMode,
@@ -128,7 +138,7 @@ export function ViewerControls() {
           <PopoverTrigger asChild>
             <Button variant="outline" size="sm" className="gap-2 h-9">
               <Palette className="h-3.5 w-3.5" />
-              <div className="h-3 w-3 rounded-full border border-muted-foreground/30" style={{ backgroundColor: wireframeColor }} />
+              <div className={`h-3 w-3 rounded-full border border-muted-foreground/30 ${colorClassMap[wireframeColor] || 'bg-[#8899aa]'}`} />
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-56 space-y-3" side="top" align="start">
@@ -138,8 +148,7 @@ export function ViewerControls() {
                 {WIRE_COLORS.map((c) => (
                   <button
                     key={c.value}
-                    className={`h-6 w-6 rounded-full border-2 transition-all ${wireframeColor === c.value ? 'border-primary scale-110' : 'border-muted-foreground/30'}`}
-                    style={{ backgroundColor: c.value }}
+                    className={`h-6 w-6 rounded-full border-2 transition-all ${colorClassMap[c.value] || 'bg-[#8899aa]'} ${wireframeColor === c.value ? 'border-primary scale-110' : 'border-muted-foreground/30'}`}
                     onClick={() => setWireframeColor(c.value)}
                     title={c.label}
                   />
diff --git a/src/components/three/ModelViewer.tsx b/src/components/three/ModelViewer.tsx
index 1ad921e..5bf2e23 100644
--- a/src/components/three/ModelViewer.tsx
+++ b/src/components/three/ModelViewer.tsx
@@ -1415,7 +1415,7 @@ export function ModelViewerCanvas({ url }: ModelViewerProps) {
       )}
 
       {/* Compartilhar botões ocultos para WebRTC e HUD de fora */}
-      <div style={{ display: 'none' }}>
+      <div className="hidden">
         <ShareButton
           onHandleChange={(h) => setLiveCode(h?.code ?? null)}
           onViewerCountChange={setLiveViewers}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c6dfc87..3056990 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -204,6 +204,8 @@ const Index = () => {
         type="file"
         accept={ACCEPTED_EXTENSIONS}
         className="hidden"
+        title="Importar arquivo de modelo 3D"
+        aria-label="Importar arquivo de modelo 3D"
         onChange={handleFileUpload} />
 
 
diff --git a/src/pages/Viewer.tsx b/src/pages/Viewer.tsx
index b33da93..14010dd 100644
--- a/src/pages/Viewer.tsx
+++ b/src/pages/Viewer.tsx
@@ -110,6 +110,8 @@ const Viewer = () => {
         type="file"
         accept={ACCEPTED_EXTENSIONS}
         className="hidden"
+        title="Adicionar arquivo de modelo 3D"
+        aria-label="Adicionar arquivo de modelo 3D"
         onChange={handleFileUpload}
       />