feat: Reposicionamento vertical dos controles de luminosidade e enquadrar abaixo do card de giro no Visualizador 3D

src/components/viewer3d/ModelViewer3D.tsx

@@ -1225,54 +1225,11 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
           </button>
         </div>
 
-        {/* Barra de Ferramentas Flutuante Rápida: Luminosidade + Enquadrar + Rotação 90° & Cadeado */}
+        {/* Card de Ajuste e Travamento de Rotação 3D (Tombamento 90° + Cadeado Memorizável) */}
-        <div className="flex items-center gap-2 pointer-events-auto">
+        <div
-          {/* Card de Luminosidade */}
+          className="flex items-center gap-1.5 p-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
-          <div
+          style={{ minWidth: '130px' }}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50"
+        >
-            title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
-          >
-            <button
-              type="button"
-              onClick={() => setBrightness(100)}
-              title="Clique para resetar luminosidade em 100%"
-              className="hover:scale-110 active:scale-95 transition-transform"
-            >
-              <SunMedium className="w-3.5 h-3.5 text-amber-500 shrink-0" />
-            </button>
-            <input
-              type="range"
-              min="40"
-              max="220"
-              step="5"
-              value={brightness}
-              onChange={(e) => setBrightness(Number(e.target.value))}
-              className="w-16 sm:w-20 h-1.5 bg-slate-300 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
-            />
-            <span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[28px] text-right">
-              {brightness}%
-            </span>
-          </div>
-
-          {/* Botão Enquadrar / Centralizar Estrutura (Fit to Screen) */}
-          <button
-            onClick={() => fitModelToView(modelGroupRef.current)}
-            disabled={!modelData}
-            className={`flex items-center justify-center p-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
-              modelData
-                ? 'text-slate-700 hover:text-cyan-600 dark:text-slate-200 dark:hover:text-cyan-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer'
-                : 'text-slate-400 dark:text-slate-600 opacity-40 cursor-not-allowed'
-            }`}
-            title="Centralizar e Enquadrar Estrutura na Janela (Fit to Screen)"
-          >
-            <Focus className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
-          </button>
-
-          {/* Card de Ajuste e Travamento de Rotação 3D (Tombamento 90° + Cadeado Memorizável) */}
-          <div
-            className="flex items-center gap-1.5 p-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 pointer-events-auto"
-            style={{ minWidth: '130px' }}
-          >
           {/* Botão Rotacionar / Tombar 90° */}
           <button
             onClick={handleRotate90X}
@@ -1314,7 +1271,50 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
               <Unlock className="w-4 h-4 text-amber-600 dark:text-amber-400" />
             )}
           </button>
+        </div>
+
+        {/* Barra de Ferramentas: Luminosidade e Enquadrar (Abaixo de Girar 90°, alinhado com o cubo) */}
+        <div className="flex items-center gap-1.5 pointer-events-auto">
+          {/* Card de Luminosidade */}
+          <div
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50"
+            title="Ajuste de Luminosidade da Estrutura (arraste para clarear ou suavizar sombras das peças)"
+          >
+            <button
+              type="button"
+              onClick={() => setBrightness(100)}
+              title="Clique para resetar luminosidade em 100%"
+              className="hover:scale-110 active:scale-95 transition-transform"
+            >
+              <SunMedium className="w-3.5 h-3.5 text-amber-500 shrink-0" />
+            </button>
+            <input
+              type="range"
+              min="40"
+              max="220"
+              step="5"
+              value={brightness}
+              onChange={(e) => setBrightness(Number(e.target.value))}
+              className="w-16 sm:w-20 h-1.5 bg-slate-300 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
+            />
+            <span className="text-[10px] font-mono font-bold text-slate-600 dark:text-slate-300 min-w-[28px] text-right">
+              {brightness}%
+            </span>
           </div>
+
+          {/* Botão Enquadrar / Centralizar Estrutura (Fit to Screen) */}
+          <button
+            onClick={() => fitModelToView(modelGroupRef.current)}
+            disabled={!modelData}
+            className={`flex items-center justify-center p-2 rounded-2xl bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border border-slate-300 dark:border-slate-700 shadow-lg shadow-slate-300/30 dark:shadow-slate-950/50 transition-all duration-150 active:scale-95 ${
+              modelData
+                ? 'text-slate-700 hover:text-cyan-600 dark:text-slate-200 dark:hover:text-cyan-400 hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer'
+                : 'text-slate-400 dark:text-slate-600 opacity-40 cursor-not-allowed'
+            }`}
+            title="Centralizar e Enquadrar Estrutura na Janela (Fit to Screen)"
+          >
+            <Focus className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
+          </button>
         </div>
       </div>