From b95c045aecc22ccb3ad5e1104adc12cb1c2ddf93 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Tue, 23 Jun 2026 00:42:10 +0000
Subject: [PATCH] =?UTF-8?q?Compacta=C3=A7=C3=A3o=20final=20do=20relatorio?=
 =?UTF-8?q?=20para=20folha=20A4=20e=20Correcao=20do=20PDF=20(DarkMode=20te?=
 =?UTF-8?q?xt)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ReportDisplay.tsx | 130 +++++++++++++++++------------------
 services/pdfService.ts       |   1 +
 2 files changed, 66 insertions(+), 65 deletions(-)

diff --git a/components/ReportDisplay.tsx b/components/ReportDisplay.tsx
index f97be7b..9ee7be7 100644
--- a/components/ReportDisplay.tsx
+++ b/components/ReportDisplay.tsx
@@ -33,36 +33,36 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
   const confidence = report?.confidence || 0;
 
   return (
-    <div className="animate-fade-in w-full max-w-[210mm] mx-auto bg-white dark:bg-slate-900 shadow-xl print:shadow-none print:m-0 print:p-[10mm_15mm] p-[10mm] sm:p-[16mm_20mm] relative flex flex-col justify-between text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 rounded-lg print:rounded-none min-h-[297mm]">
+    <div className="animate-fade-in w-full max-w-[210mm] mx-auto bg-white dark:bg-slate-900 shadow-xl print:shadow-none print:m-0 print:p-[8mm_12mm] p-[8mm] sm:p-[10mm_12mm] relative flex flex-col justify-between text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 rounded-lg print:rounded-none h-auto min-h-[297mm]">
       
       {/* Cabeçalho (Header) */}
-      <header className="border-b border-slate-100 dark:border-slate-800 pb-5">
-        <div className="flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-0">
-          <div>
+      <header className="border-b border-slate-100 dark:border-slate-800 pb-2.5">
+        <div className="flex flex-col sm:flex-row justify-between items-start gap-2 sm:gap-0 w-full">
+          <div className="flex-shrink-0">
             {/* Logo SteelCheck com visual geométrico */}
-            <div className="flex items-center gap-2">
-              <span className="bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-extrabold px-2.5 py-1 rounded text-base tracking-tight">STEEL CHECK</span>
-              <span className="text-[10px] uppercase font-bold tracking-widest text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700 px-1.5 py-0.5 rounded">IA Quality Report</span>
+            <div className="flex items-center gap-1.5">
+              <span className="bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-extrabold px-2 py-0.5 rounded text-[11px] tracking-tight">STEEL CHECK</span>
+              <span className="text-[8px] uppercase font-bold tracking-widest text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700 px-1 py-0.5 rounded">IA Quality Report</span>
             </div>
-            <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 mt-2.5">Relatório Técnico de Qualidade</h2>
-            <p className="text-xs text-slate-400 dark:text-slate-500">Análise de conformidade normativa assistida por inteligência artificial</p>
+            <h2 className="text-[11px] font-semibold text-slate-500 dark:text-slate-400 mt-1.5">Relatório Técnico de Qualidade</h2>
+            <p className="text-[9px] text-slate-400 dark:text-slate-500">Análise de conformidade normativa assistida por inteligência artificial</p>
           </div>
 
-          <div className="flex gap-4 w-full sm:w-auto justify-between sm:justify-end">
+          <div className="flex gap-3 w-full sm:w-auto justify-end flex-grow">
             {/* Status Global de Conformidade */}
             <div className="text-right flex flex-col items-end">
-              <span className="text-[9px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Status Geral</span>
-              <div className={`flex items-center gap-1.5 mt-1 px-3.5 py-1.5 rounded-full ${statusClass(compliance.status)}`}>
-                <span className={`w-2 h-2 rounded-full animate-pulse ${compliance.status === 'CONFORME' ? 'bg-emerald-500' : 'bg-red-500'}`}></span>
-                <span className="text-xs font-black tracking-wider">{compliance.status}</span>
+              <span className="text-[8px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Status Geral</span>
+              <div className={`flex items-center gap-1 mt-0.5 px-2.5 py-1 rounded-full ${statusClass(compliance.status)}`}>
+                <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${compliance.status === 'CONFORME' ? 'bg-emerald-500' : 'bg-red-500'}`}></span>
+                <span className="text-[10px] font-black tracking-wider">{compliance.status}</span>
               </div>
             </div>
 
             {/* Score de Confiança da IA */}
             <div className="text-right flex flex-col items-end">
-              <span className="text-[9px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Confiança da Análise</span>
-              <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-3 py-1.5 rounded-full text-xs font-bold">
-                {confidence}% <span className="text-[10px] text-slate-400 dark:text-slate-500 font-normal">IA-Score</span>
+              <span className="text-[8px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Confiança</span>
+              <div className="mt-0.5 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-2.5 py-1 rounded-full text-[10px] font-bold">
+                {confidence}% <span className="text-[8px] text-slate-400 dark:text-slate-500 font-normal">IA-Score</span>
               </div>
             </div>
           </div>
@@ -70,52 +70,52 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
       </header>
 
       {/* Conteúdo Principal */}
-      <main className="flex-grow my-4 flex flex-col justify-start">
+      <main className="flex-grow my-3 flex flex-col justify-start">
         
         {/* Seção 1: Dados de Identificação */}
-        <section className="mb-5">
-          <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
+        <section className="mb-4">
+          <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2 flex items-center gap-1.5">
             <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
             1. Identificação do Produto e Lote
           </h3>
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-slate-50/70 dark:bg-slate-800/30 rounded-xl p-3.5 border border-slate-100 dark:border-slate-800">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 bg-slate-50/70 dark:bg-slate-800/30 rounded-lg p-2.5 border border-slate-100 dark:border-slate-800">
             <div>
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Produto</span>
-              <span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.product || '-'}</span>
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Produto</span>
+              <span className="block text-[10px] font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.product || '-'}</span>
             </div>
             <div>
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Norma de Referência</span>
-              <span className="block text-xs font-bold text-slate-900 dark:text-white leading-tight">{identification.standards || '-'}</span>
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Norma de Referência</span>
+              <span className="block text-[10px] font-bold text-slate-900 dark:text-white leading-tight">{identification.standards || '-'}</span>
             </div>
             <div>
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Fabricante</span>
-              <span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.manufacturer || '-'}</span>
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Fabricante</span>
+              <span className="block text-[10px] font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.manufacturer || '-'}</span>
             </div>
             <div>
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Nº do Certificado</span>
-              <span className="block text-xs font-mono font-bold text-slate-800 dark:text-slate-200 leading-tight">#{identification.certificateNumber || '-'}</span>
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Nº do Certificado</span>
+              <span className="block text-[10px] font-mono font-bold text-slate-800 dark:text-slate-200 leading-tight">#{identification.certificateNumber || '-'}</span>
             </div>
-            <div className="pt-2 border-t border-slate-100 dark:border-slate-800">
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Data de Emissão</span>
-              <span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.certificateDate || '-'}</span>
+            <div className="pt-1.5 border-t border-slate-100 dark:border-slate-800">
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Data de Emissão</span>
+              <span className="block text-[10px] font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.certificateDate || '-'}</span>
             </div>
-            <div className="pt-2 border-t border-slate-100 dark:border-slate-800">
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Lote analisado</span>
-              <span className="block text-xs font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.batches || '-'}</span>
+            <div className="pt-1.5 border-t border-slate-100 dark:border-slate-800">
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Lote analisado</span>
+              <span className="block text-[10px] font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.batches || '-'}</span>
             </div>
-            <div className="pt-2 border-t border-slate-100 dark:border-slate-800">
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Corrida (Heat)</span>
-              <span className="block text-xs font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.heats || '-'}</span>
+            <div className="pt-1.5 border-t border-slate-100 dark:border-slate-800">
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Corrida (Heat)</span>
+              <span className="block text-[10px] font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.heats || '-'}</span>
             </div>
-            <div className="pt-2 border-t border-slate-100 dark:border-slate-800">
-              <span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Massa Total</span>
-              <span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.quantity || '-'}</span>
+            <div className="pt-1.5 border-t border-slate-100 dark:border-slate-800">
+              <span className="block text-[8px] text-slate-400 dark:text-slate-500 uppercase font-medium">Massa Total</span>
+              <span className="block text-[10px] font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.quantity || '-'}</span>
             </div>
           </div>
         </section>
 
-        {/* Seção 2: Verificação de Conformidade */}
-        <section className="grid grid-cols-1 md:grid-cols-12 gap-5 mb-5">
+        {/* Seções 2 e 3: Propriedades (Lado a Lado no Desktop) */}
+        <section className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-4 flex-grow">
           
           {/* Propriedades Mecânicas (Esquerda) */}
           <div className="col-span-1 md:col-span-6 flex flex-col">
@@ -123,15 +123,15 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               2. Propriedades Mecânicas
             </h3>
-            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-between">
+            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-between">
               <div className="overflow-hidden">
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
-                      <th className="py-3 px-3 w-[35%] truncate">Propriedade</th>
-                      <th className="py-3 px-1 w-[25%] truncate">Certificado</th>
-                      <th className="py-3 px-1 w-[15%] text-center truncate">% Rel.</th>
-                      <th className="py-3 px-3 w-[25%] text-right truncate">Status</th>
+                      <th className="py-1 px-1.5 w-[35%]">Propriedade</th>
+                      <th className="py-1 px-1 w-[25%]">Certificado</th>
+                      <th className="py-1 px-1 w-[15%] text-center">% Rel.</th>
+                      <th className="py-1 px-1 w-[25%] text-right">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
@@ -140,17 +140,17 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
                       const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
                       return (
                         <tr key={i}>
-                          <td className="py-3 px-3 truncate">
-                            <span className="font-semibold text-[11px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span>
+                          <td className="py-1 px-1.5">
+                            <span className="font-semibold text-[10px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span>
                           </td>
-                          <td className="py-3 px-1 font-mono font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
-                          <td className="py-3 px-1 text-center truncate">
+                          <td className="py-1 px-1 font-mono font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td>
+                          <td className="py-1 px-1 text-center">
                             {item.differencePercentage ? (
-                              <span className={`text-[10px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
+                              <span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
                             ) : <span className="text-slate-300 dark:text-slate-600">-</span>}
                           </td>
-                          <td className="py-3 px-3 text-right">
-                            <span className={`inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
+                          <td className="py-1 px-1 text-right">
+                            <span className={`inline-flex items-center gap-1 text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}>
                               {statusIcon(item.status)} {item.status}
                             </span>
                           </td>
@@ -177,25 +177,25 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               3. Composição Química (%)
             </h3>
-            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-start">
+            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-start">
               <div className="overflow-hidden">
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
-                      <th className="py-3 px-3 w-[15%] truncate">Elem.</th>
-                      <th className="py-3 px-1 w-[40%] truncate">Norma de Referência</th>
-                      <th className="py-3 px-1 w-[25%] truncate">Valor Certificado</th>
-                      <th className="py-3 px-3 w-[20%] text-right truncate">Status</th>
+                      <th className="py-1 px-1.5 w-[15%]">Elem.</th>
+                      <th className="py-1 px-1 w-[40%]">Norma de Referência</th>
+                      <th className="py-1 px-1 w-[25%]">Valor Certificado</th>
+                      <th className="py-1 px-1.5 w-[20%] text-right">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
                     {compliance.chemical.map((item, i) => (
                       <tr key={i}>
-                        <td className="py-3 px-3 font-sans font-semibold text-[11px] text-slate-700 dark:text-slate-300 truncate" title={item.element}>{item.element}</td>
-                        <td className="py-3 px-1 text-slate-500 dark:text-slate-400 text-[10px] leading-tight truncate" title={item.norm}>{item.norm}</td>
-                        <td className="py-3 px-1 font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
-                        <td className="py-3 px-3 text-right">
-                          <span className={`inline-flex items-center text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
+                        <td className="py-1 px-1.5 font-sans font-semibold text-[10px] text-slate-700 dark:text-slate-300" title={item.element}>{item.element}</td>
+                        <td className="py-1 px-1 text-slate-500 dark:text-slate-400 text-[9px] leading-tight break-words" title={item.norm}>{item.norm}</td>
+                        <td className="py-1 px-1 font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td>
+                        <td className="py-1 px-1.5 text-right">
+                          <span className={`inline-flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}>
                             {item.status}
                           </span>
                         </td>
diff --git a/services/pdfService.ts b/services/pdfService.ts
index 7925c42..db388e8 100644
--- a/services/pdfService.ts
+++ b/services/pdfService.ts
@@ -19,6 +19,7 @@ export const exportAsPdf = async (elementId: string, fileName: string, action: '
     const isDark = document.documentElement.classList.contains('dark');
     if (isDark) {
       document.documentElement.classList.remove('dark');
+      await new Promise(resolve => setTimeout(resolve, 100)); // Allow CSS to recompute
     }
 
     const pdf = new jsPDF({