fix: correcao de peso fabricado para pecas soltas, barras de processo concluidas em verde e legenda de cores

src/components/painel-industrial/OFCardOptimized.tsx

@@ -185,9 +185,17 @@ export const OFCardOptimized: React.FC<OFCardOptimizedProps> = ({ ofData }) => {
 
         {/* Resumo Comparativo dos Processos - Layout Responsivo com espaçamento reduzido */}
         <div className="space-y-2">
-          <h3 className="text-base sm:text-lg font-semibold text-foreground border-b border-border pb-1" style={{ fontSize: 'clamp(1rem, 2.5vw, 1.125rem)' }}>
-            Resumo Comparativo dos Processos
-          </h3>
+          <div className="flex items-center justify-between border-b border-border pb-1">
+            <h3 className="text-base sm:text-lg font-semibold text-foreground" style={{ fontSize: 'clamp(1rem, 2.5vw, 1.125rem)' }}>
+              Resumo Comparativo dos Processos
+            </h3>
+            <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground" title="Legenda: Azul = Adiantado | Verde = No Prazo/Concluído | Amarelo = Atenção | Vermelho = Atrasado">
+              <span className="w-2 h-2 rounded-full bg-blue-500" />
+              <span className="w-2 h-2 rounded-full bg-emerald-500" />
+              <span className="w-2 h-2 rounded-full bg-amber-500" />
+              <span className="w-2 h-2 rounded-full bg-rose-500" />
+            </div>
+          </div>
           {/* Grid responsivo: 1 coluna em mobile, 2 colunas em telas maiores */}
           <div className="
             grid grid-cols-1 

src/components/painel-industrial/PainelHeader.tsx

@@ -1,7 +1,6 @@
-
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { X, ChevronLeft, ChevronRight, Play, Pause } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Play, Pause, Info } from 'lucide-react';
 
 interface PainelHeaderProps {
   totalPages: number;
@@ -23,58 +22,94 @@ export const PainelHeader: React.FC<PainelHeaderProps> = ({
   onClose
 }) => {
   return (
-    <div className="flex justify-between items-center">
-      <div>
-        <h1 className="text-4xl font-bold text-foreground mb-2">Painel Industrial</h1>
-        <p className="text-lg text-muted-foreground">
-          Acompanhamento comparativo em tempo real dos contratos.
-        </p>
-      </div>
-      
-      <div className="flex items-center gap-4">
-        {totalPages > 1 && (
-          <>
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={onToggleAutoRotate}
-              className="flex items-center gap-2"
-            >
-              {autoRotate ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
-              {autoRotate ? 'Pausar' : 'Auto'}
-            </Button>
-            
-            <Button
-              variant="outline" 
-              size="lg"
-              onClick={onPrevPage}
-            >
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-            
-            <span className="text-lg font-medium text-foreground">
-              {currentPage + 1} de {totalPages}
-            </span>
-            
-            <Button
-              variant="outline"
-              size="lg" 
-              onClick={onNextPage}
-            >
-              <ChevronRight className="h-5 w-5" />
-            </Button>
-          </>
-        )}
+    <div className="mb-4 sm:mb-6">
+      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+        <div>
+          <h1 className="text-3xl sm:text-4xl font-black text-foreground tracking-tight">Painel Industrial</h1>
+          <p className="text-sm sm:text-base text-muted-foreground mt-0.5">
+            Acompanhamento comparativo em tempo real dos contratos e processos de fabricação.
+          </p>
+        </div>
         
-        <Button
-          variant="destructive"
-          size="lg"
-          onClick={onClose}
-          className="flex items-center gap-2"
-        >
-          <X className="h-5 w-5" />
-          Fechar
-        </Button>
+        <div className="flex items-center gap-2 sm:gap-3 self-stretch lg:self-auto justify-between lg:justify-end">
+          {totalPages > 1 && (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onToggleAutoRotate}
+                className="flex items-center gap-2"
+              >
+                {autoRotate ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                {autoRotate ? 'Pausar' : 'Auto'}
+              </Button>
+              
+              <Button
+                variant="outline" 
+                size="sm"
+                onClick={onPrevPage}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              
+              <span className="text-sm font-medium text-foreground px-1">
+                {currentPage + 1} de {totalPages}
+              </span>
+              
+              <Button
+                variant="outline" 
+                size="sm" 
+                onClick={onNextPage}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+          
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onClose}
+            className="flex items-center gap-2"
+          >
+            <X className="h-4 w-4" />
+            Fechar
+          </Button>
+        </div>
+      </div>
+
+      {/* Barra de Legendas de Cores dos Processos */}
+      <div className="mt-3 py-2 px-3.5 bg-card border border-border/80 rounded-lg shadow-sm flex flex-wrap items-center justify-between gap-y-2 gap-x-4 text-xs sm:text-sm">
+        <div className="flex items-center gap-2 text-foreground font-semibold">
+          <Info className="h-4 w-4 text-primary shrink-0" />
+          <span>Legenda das Cores dos Processos:</span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-4 sm:gap-x-6 gap-y-1.5">
+          <div className="flex items-center gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-sm inline-block" />
+            <span className="font-semibold text-blue-500 dark:text-blue-400">Azul:</span>
+            <span className="text-muted-foreground text-xs">Adiantado (ritmo acima do cronograma)</span>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm inline-block" />
+            <span className="font-semibold text-emerald-600 dark:text-emerald-400">Verde:</span>
+            <span className="text-muted-foreground text-xs">No Prazo / Concluído (100%)</span>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-sm inline-block" />
+            <span className="font-semibold text-amber-500 dark:text-amber-400">Amarelo:</span>
+            <span className="text-muted-foreground text-xs">Atenção (60% a 80% do ritmo planejado)</span>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-sm inline-block" />
+            <span className="font-semibold text-rose-500 dark:text-rose-400">Vermelho:</span>
+            <span className="text-muted-foreground text-xs">Atrasado (&lt;60% ou prazo do processo expirado)</span>
+          </div>
+        </div>
       </div>
     </div>
   );