feat: Layout dos botoes 3D - botao de ortogonalidade ao lado do cubo e expansao da luminosidade

src/components/viewer3d/ModelViewer3D.tsx

@@ -6,7 +6,7 @@ import { ViewCube } from './ViewCube';
 import { Viewer3DSidebar } from './Viewer3DSidebar';
 import { PieceHoverTooltip } from './PieceHoverTooltip';
 import { SelectionListModal, SelectedPieceItem } from './SelectionListModal';
-import { Trash2, FileSpreadsheet, RotateCcw, RotateCw, Lock, Unlock, Focus, SunMedium } from 'lucide-react';
+import { Trash2, FileSpreadsheet, RotateCcw, RotateCw, Lock, Unlock, Focus, SunMedium, Compass } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/components/ui/use-toast';
 
@@ -1167,9 +1167,45 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
         onBrightnessChange={setBrightness}
       />
 
-      {/* Top Right: ViewCube + Painel de Ações de Seleção de Peças */}
+      {/* Top Right: ViewCube + Controles Rápidos de Câmera + Painel de Ações de Seleção de Peças */}
       <div className="absolute top-4 right-4 z-20 flex flex-col items-end gap-2.5 pointer-events-auto">
-        <ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} />
+        <div className="flex items-start gap-2">
+          {/* Botões Rápidos de Navegação ao lado do Cubo (Ortogonalidade e Enquadrar) */}
+          <div className="flex flex-col gap-1.5 items-center justify-center pt-0.5">
+            {/* Botão Alternar Vista Ortogonal / Perspectiva */}
+            <button
+              onClick={handleToggleCamera}
+              className={`flex items-center justify-center p-2 rounded-2xl backdrop-blur-md border transition-all duration-150 active:scale-95 shadow-lg ${
+                isOrthographic
+                  ? 'bg-emerald-500 text-white border-emerald-400 shadow-emerald-500/30 dark:bg-emerald-600 dark:border-emerald-500'
+                  : 'bg-white/95 dark:bg-slate-900/95 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 shadow-slate-300/30 dark:shadow-slate-950/50'
+              }`}
+              title={
+                isOrthographic
+                  ? 'Câmera Ortogonal (Paralela Técnica) Ativa. Clique para mudar para Perspectiva.'
+                  : 'Câmera Perspectiva (3D Cônica) Ativa. Clique para mudar para Ortogonal.'
+              }
+            >
+              <Compass className={`w-4 h-4 ${isOrthographic ? 'text-white' : 'text-emerald-600 dark:text-emerald-400'}`} />
+            </button>
+
+            {/* 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>
+
+          <ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} />
+        </div>
 
         {/* Card de Controle de Seleção Flutuante Harmonizado Abaixo do Cubo */}
         <div
@@ -1273,48 +1309,32 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
           </button>
         </div>
 
-        {/* Barra de Ferramentas: Luminosidade e Enquadrar (Abaixo de Girar 90°, alinhado com o cubo) */}
+        {/* Card de Luminosidade Expandido (Alinhado com a largura dos cards acima) */}
-        <div className="flex items-center gap-1.5 pointer-events-auto">
+        <div
-          {/* Card de Luminosidade */}
+          className="flex items-center gap-2 px-2.5 py-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 pointer-events-auto"
-          <div
+          style={{ width: '100%', minWidth: '145px' }}
-            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)"
-            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)}
+            type="button"
-            disabled={!modelData}
+            onClick={() => setBrightness(100)}
-            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 ${
+            title="Clique para resetar luminosidade em 100%"
-              modelData
+            className="hover:scale-110 active:scale-95 transition-transform shrink-0 cursor-pointer"
-                ? '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" />
+            <SunMedium className="w-3.5 h-3.5 text-amber-500" />
           </button>
+          <input
+            type="range"
+            min="40"
+            max="220"
+            step="5"
+            value={brightness}
+            onChange={(e) => setBrightness(Number(e.target.value))}
+            className="flex-1 h-1.5 bg-slate-200 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-[30px] text-right shrink-0">
+            {brightness}%
+          </span>
         </div>
       </div>