fix: corrige proporcoes de imagem nos PDFs retrato e paisagem, unifica as bordas e dobra o tamanho do texto

public/app.js

@@ -3801,13 +3801,9 @@ const initApp = () => {
           const panel = generatedPanelsData[i];
           if (i > 0) doc.addPage();
 
-          // Título e Borda
+          // Título centralizado
-          doc.setDrawColor(30, 41, 59);
-          doc.setLineWidth(2);
-          doc.rect(20, 20, 555, 802);
-
           doc.setFont('helvetica', 'bold');
-          doc.setFontSize(16);
+          doc.setFontSize(18);
           doc.setTextColor(30, 41, 59);
           doc.text(title, 297, 50, { align: 'center' });
 
@@ -3817,26 +3813,49 @@ const initApp = () => {
           const imgHeight = selectedComicsRatio === '16:9' ? 290 : 386;
           doc.addImage(base64Img, 'JPEG', 40, 80, imgWidth, imgHeight);
 
-          // Caixa de diálogo
+          // Altura esticada para a caixa de diálogo (160pt de altura - aprox dobro)
-          if (panel.dialogue) {
+          const textHeight = 160;
-            const textY = 100 + imgHeight;
+          const textY = 80 + imgHeight;
-            doc.setFillColor(248, 250, 252);
-            doc.setDrawColor(226, 232, 240);
-            doc.rect(40, textY, 515, 80, 'FD');
 
+          // Caixa de diálogo com fundo cinza claro e borda integrada
+          doc.setFillColor(248, 250, 252);
+          doc.rect(40, textY, imgWidth, textHeight, 'F');
+
+          // Moldura unificada ao redor de toda a imagem + texto
+          doc.setDrawColor(30, 41, 59);
+          doc.setLineWidth(2);
+          doc.rect(40, 80, imgWidth, imgHeight + textHeight, 'D');
+
+          // Linha divisória entre a imagem e a caixa de texto
+          doc.line(40, textY, 555, textY);
+
+          // Texto maior e mais legível (dobro do tamanho relativo - 15pt)
+          if (panel.dialogue) {
             doc.setFont('helvetica', 'normal');
-            doc.setFontSize(12);
+            doc.setFontSize(15);
             doc.setTextColor(15, 23, 42);
             
-            const splitText = doc.splitTextToSize(panel.dialogue, 495);
+            const splitText = doc.splitTextToSize(panel.dialogue, imgWidth - 40);
-            doc.text(splitText, 50, textY + 25);
+            doc.text(splitText, 60, textY + 35);
           }
 
+          // Círculo discreto com o número do quadrinho no canto superior esquerdo da imagem
+          doc.setFillColor(254, 240, 138);
+          doc.circle(65, 105, 12, 'F');
+          doc.setDrawColor(30, 41, 59);
+          doc.setLineWidth(1.5);
+          doc.circle(65, 105, 12, 'D');
+          
+          doc.setFont('helvetica', 'bold');
+          doc.setFontSize(10);
+          doc.setTextColor(30, 41, 59);
+          doc.text(String(panel.panel_number), 65, 109, { align: 'center' });
+
           // Rodapé
           doc.setFont('helvetica', 'italic');
-          doc.setFontSize(10);
+          doc.setFontSize(9);
-          doc.setTextColor(100, 116, 139);
+          doc.setTextColor(148, 163, 184);
-          doc.text(`Criado com Camila AI - Quadro ${panel.panel_number} de ${generatedPanelsData.length}`, 297, 810, { align: 'center' });
+          doc.text(`Criado com Camila AI - Quadro ${panel.panel_number} de ${generatedPanelsData.length}`, 297, 815, { align: 'center' });
         }
 
         doc.save(`quadrinhos_${title.replace(/\s+/g, '_').toLowerCase()}.pdf`);
@@ -3868,14 +3887,9 @@ const initApp = () => {
         for (let page = 0; page < totalPages; page++) {
           if (page > 0) doc.addPage();
 
-          // Desenhar moldura da página
+          // Título centralizado no topo da página paisagem
-          doc.setDrawColor(30, 41, 59);
-          doc.setLineWidth(2);
-          doc.rect(20, 20, 802, 555);
-
-          // Título
           doc.setFont('helvetica', 'bold');
-          doc.setFontSize(16);
+          doc.setFontSize(18);
           doc.setTextColor(30, 41, 59);
           doc.text(`${title} - Página ${page + 1} de ${totalPages}`, 421, 45, { align: 'center' });
 
@@ -3887,41 +3901,49 @@ const initApp = () => {
             const panel = generatedPanelsData[index];
             const startX = col === 0 ? 40 : 426;
             const cardWidth = 376;
+            
+            // Proporções exatas mantidas
             const imgHeight = selectedComicsRatio === '16:9' ? 211 : 282;
+            const textHeight = 140; // Dobro de tamanho (antes era 65)
 
             // Imagem do quadrinho
             const base64Img = await getBase64Image(panel.imageUrl);
             doc.addImage(base64Img, 'JPEG', startX, 70, cardWidth, imgHeight);
 
-            // Borda do quadrinho
+            // Fundo da caixa de texto
-            doc.setDrawColor(30, 41, 59);
+            const textY = 70 + imgHeight;
-            doc.setLineWidth(1.5);
-            doc.rect(startX, 70, cardWidth, imgHeight);
-
-            // Legenda abaixo da imagem
-            if (panel.dialogue) {
-              const textY = 85 + imgHeight;
             doc.setFillColor(248, 250, 252);
-              doc.setDrawColor(203, 213, 225);
+            doc.rect(startX, textY, cardWidth, textHeight, 'F');
-              doc.rect(startX, textY, cardWidth, 65, 'FD');
 
+            // Moldura unificada ao redor do quadro (imagem + texto)
+            doc.setDrawColor(30, 41, 59);
+            doc.setLineWidth(2);
+            doc.rect(startX, 70, cardWidth, imgHeight + textHeight, 'D');
+
+            // Linha separando a imagem da caixa de texto
+            doc.line(startX, textY, startX + cardWidth, textY);
+
+            // Legenda formatada em tamanho maior (13pt)
+            if (panel.dialogue) {
               doc.setFont('helvetica', 'normal');
-              doc.setFontSize(10);
+              doc.setFontSize(13);
               doc.setTextColor(15, 23, 42);
               
-              const splitText = doc.splitTextToSize(panel.dialogue, cardWidth - 20);
+              const splitText = doc.splitTextToSize(panel.dialogue, cardWidth - 30);
-              doc.text(splitText, startX + 10, textY + 18);
+              doc.text(splitText, startX + 15, textY + 30);
             }
 
-            // Etiqueta do número
+            // Círculo discreto com o numeral do quadro no canto superior esquerdo da imagem
             doc.setFillColor(254, 240, 138);
-            doc.rect(startX + 10, 80, 50, 20, 'F');
+            doc.circle(startX + 20, 90, 11, 'F');
             doc.setDrawColor(30, 41, 59);
-            doc.rect(startX + 10, 80, 50, 20);
+            doc.setLineWidth(1.5);
+            doc.circle(startX + 20, 90, 11, 'D');
+            
             doc.setFont('helvetica', 'bold');
             doc.setFontSize(9);
             doc.setTextColor(30, 41, 59);
-            doc.text(`Quadro ${panel.panel_number}`, startX + 35, 93, { align: 'center' });
+            doc.text(String(panel.panel_number), startX + 20, 93, { align: 'center' });
           }
         }