🚀 Auto-deploy: BrainWind atualizado em 28/07/2026 10:42:07

app/src/components/Warehouse3D.tsx

@@ -141,6 +141,9 @@ export function WarehouseModel() {
   const roofHeight = (width / 2) * Math.tan((roofPitch * Math.PI) / 180);
   const theta = (roofPitch * Math.PI) / 180;
   const widthSlope = width / 2 / Math.cos(theta);
+  const maxDim = Math.max(width, length, height);
+  const titleFontSize = Math.max(0.65, Math.min(1.25, maxDim / 14));
+  const zoneFontSize = Math.max(0.45, Math.min(0.85, maxDim / 18));
 
   const wallAColor = useMemo(() => pressureColor(wallCpe.A, cpi), [wallCpe.A, cpi]);
   const wallBColor = useMemo(() => pressureColor(wallCpe.B, cpi), [wallCpe.B, cpi]);
@@ -378,15 +381,104 @@ export function WarehouseModel() {
         </mesh>
         <PressureArrow center={[0, 0.04, 3 * length / 8]} normal={[0, 1, 0]} p={(isParallel ? roofCpe.H : roofCpe.E) - cpi} />
 
+        {/* Linhas de Divisão das Zonas no Telhado */}
+        <mesh position={[0, 0.05, -length / 4]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[0, 0.05, 0]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[0, 0.05, length / 4]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[-widthSlope * 0.35, 0.05, 0]}>
+          <boxGeometry args={[0.06, 0.02, length]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+
+        {/* Rótulo e Título da Água */}
         <Text
-          position={[0, 0.6, 0]}
+          position={[0, 0.95, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
-          fontSize={Math.max(0.3, Math.min(0.6, width / 20))}
-          color="#ffffff"
+          fontSize={titleFontSize}
+          color="#000000"
+          outlineWidth={0.04}
+          outlineColor="#ffffff"
+          fontWeight={700}
           anchorX="center"
           anchorY="middle"
         >
-          {isParallel ? 'Telhado (Zonas E/F/G/H)' : 'Telhado E/F (Barlavento)'}
+          {isParallel ? 'Telhado (Zonas E/F/G/H)' : 'Água Barlavento (Zonas E, F, J)'}
+        </Text>
+
+        {/* Marcações Individuais das Zonas */}
+        <Text
+          position={[0, 0.35, -3 * length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona E (${roofCpe.E})` : `Zona F (${roofCpe.F})`}
+        </Text>
+        <Text
+          position={[0, 0.35, -length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona F (${roofCpe.F})` : `Zona E (${roofCpe.E})`}
+        </Text>
+        <Text
+          position={[0, 0.35, length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona G (${roofCpe.G})` : `Zona E (${roofCpe.E})`}
+        </Text>
+        <Text
+          position={[0, 0.35, 3 * length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona H (${roofCpe.H})` : `Zona F (${roofCpe.F})`}
+        </Text>
+        <Text
+          position={[-widthSlope * 0.38, 0.35, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {`Zona J (Borda: ${roofCpe.J})`}
         </Text>
       </group>
 
@@ -420,15 +512,104 @@ export function WarehouseModel() {
         </mesh>
         <PressureArrow center={[0, 0.04, 3 * length / 8]} normal={[0, 1, 0]} p={(isParallel ? roofCpe.H : roofCpe.G) - cpi} />
 
+        {/* Linhas de Divisão das Zonas no Telhado */}
+        <mesh position={[0, 0.05, -length / 4]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[0, 0.05, 0]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[0, 0.05, length / 4]}>
+          <boxGeometry args={[widthSlope, 0.02, 0.06]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+        <mesh position={[widthSlope * 0.35, 0.05, 0]}>
+          <boxGeometry args={[0.06, 0.02, length]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.5} />
+        </mesh>
+
+        {/* Rótulo e Título da Água */}
         <Text
-          position={[0, 0.6, 0]}
+          position={[0, 0.95, 0]}
           rotation={[-Math.PI / 2, 0, 0]}
-          fontSize={Math.max(0.3, Math.min(0.6, width / 20))}
-          color="#ffffff"
+          fontSize={titleFontSize}
+          color="#000000"
+          outlineWidth={0.04}
+          outlineColor="#ffffff"
+          fontWeight={700}
           anchorX="center"
           anchorY="middle"
         >
-          {isParallel ? 'Telhado (Zonas E/F/G/H)' : 'Telhado G/H (Sotavento)'}
+          {isParallel ? 'Telhado (Zonas E/F/G/H)' : 'Água Sotavento (Zonas G, H, I)'}
+        </Text>
+
+        {/* Marcações Individuais das Zonas */}
+        <Text
+          position={[0, 0.35, -3 * length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona E (${roofCpe.E})` : `Zona H (${roofCpe.H})`}
+        </Text>
+        <Text
+          position={[0, 0.35, -length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona F (${roofCpe.F})` : `Zona G (${roofCpe.G})`}
+        </Text>
+        <Text
+          position={[0, 0.35, length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona G (${roofCpe.G})` : `Zona G (${roofCpe.G})`}
+        </Text>
+        <Text
+          position={[0, 0.35, 3 * length / 8]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {isParallel ? `Zona H (${roofCpe.H})` : `Zona H (${roofCpe.H})`}
+        </Text>
+        <Text
+          position={[widthSlope * 0.38, 0.35, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+          fontSize={zoneFontSize}
+          color="#000000"
+          outlineWidth={0.035}
+          outlineColor="#ffffff"
+          fontWeight={700}
+          anchorX="center"
+          anchorY="middle"
+        >
+          {`Zona I (Borda: ${roofCpe.I})`}
         </Text>
       </group>
 
@@ -453,9 +634,12 @@ export function WarehouseModel() {
         <group>
           {/* Rótulo Parede Frontal */}
           <Text
-            position={[0, height / 2, length / 2 + 1.0]}
-            fontSize={Math.max(0.3, Math.min(0.6, width / 20))}
-            color={isDark ? "#cbd5e1" : "#1a202c"}
+            position={[0, height / 2, length / 2 + 1.2]}
+            fontSize={titleFontSize}
+            color="#000000"
+            outlineWidth={0.04}
+            outlineColor="#ffffff"
+            fontWeight={700}
             anchorX="center"
             anchorY="middle"
           >
@@ -464,10 +648,13 @@ export function WarehouseModel() {
 
           {/* Rótulo Parede Traseira */}
           <Text
-            position={[0, height / 2, -length / 2 - 1.0]}
+            position={[0, height / 2, -length / 2 - 1.2]}
             rotation={[0, Math.PI, 0]}
-            fontSize={Math.max(0.3, Math.min(0.6, width / 20))}
-            color={isDark ? "#cbd5e1" : "#1a202c"}
+            fontSize={titleFontSize}
+            color="#000000"
+            outlineWidth={0.04}
+            outlineColor="#ffffff"
+            fontWeight={700}
             anchorX="center"
             anchorY="middle"
           >
@@ -476,10 +663,13 @@ export function WarehouseModel() {
 
           {/* Rótulo Parede Esquerda */}
           <Text
-            position={[-width / 2 - 1.0, height / 2, 0]}
+            position={[-width / 2 - 1.2, height / 2, 0]}
             rotation={[0, -Math.PI / 2, 0]}
-            fontSize={Math.max(0.3, Math.min(0.6, length / 20))}
-            color={isDark ? "#cbd5e1" : "#1a202c"}
+            fontSize={titleFontSize}
+            color="#000000"
+            outlineWidth={0.04}
+            outlineColor="#ffffff"
+            fontWeight={700}
             anchorX="center"
             anchorY="middle"
           >
@@ -488,10 +678,13 @@ export function WarehouseModel() {
 
           {/* Rótulo Parede Direita */}
           <Text
-            position={[width / 2 + 1.0, height / 2, 0]}
+            position={[width / 2 + 1.2, height / 2, 0]}
             rotation={[0, Math.PI / 2, 0]}
-            fontSize={Math.max(0.3, Math.min(0.6, length / 20))}
-            color={isDark ? "#cbd5e1" : "#1a202c"}
+            fontSize={titleFontSize}
+            color="#000000"
+            outlineWidth={0.04}
+            outlineColor="#ffffff"
+            fontWeight={700}
             anchorX="center"
             anchorY="middle"
           >

app/src/pages/ShelterModule.tsx

@@ -337,7 +337,7 @@ const ShelterModule: React.FC = () => {
   };
 
   return (
-    <div className="h-[calc(100vh-4rem)] flex flex-col lg:flex-row gap-4 p-4 overflow-hidden">
+    <div className="flex flex-col lg:flex-row h-full w-full gap-4 p-4 lg:p-6 bg-muted/30">
       {/* Coluna Esquerda: Controles do Abrigo */}
       <div className="w-full lg:w-80 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
         <Card className="shadow-sm border-border">