From 264c38a7ce20a1ea3170928ddbd9bd769773a2e3 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Sun, 7 Jun 2026 16:30:58 +0000
Subject: [PATCH] =?UTF-8?q?Aplica=20container=20queries=20e=20limites=20r?=
 =?UTF-8?q?=C3=ADgidos=20de=20dimens=C3=B5es=20aos=208=20formatos=20de=20c?=
 =?UTF-8?q?artazes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js    | 32 +++++++++++++++++++------
 public/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/public/app.js b/public/app.js
index 185cbf5..36fdfe2 100644
--- a/public/app.js
+++ b/public/app.js
@@ -6999,10 +6999,23 @@ document.addEventListener('DOMContentLoaded', () => {
     cartazPrintableArea.style.color = text;
     cartazPrintableArea.style.fontFamily = font;
 
+    const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
+
+    const FORMAT_SIZES = {
+      'A4': { retrato: 380, paisagem: 537 },
+      'A3': { retrato: 480, paisagem: 679 },
+      'A2': { retrato: 580, paisagem: 820 },
+      'A1': { retrato: 680, paisagem: 962 }
+    };
+
+    const maxW = FORMAT_SIZES[tamanho]?.[orientacao] || FORMAT_SIZES['A4']['retrato'];
+
+    cartazPrintableArea.style.width = '100%';
+    cartazPrintableArea.style.maxWidth = `${maxW}px`;
+    cartazPrintableArea.style.aspectRatio = orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414';
+    cartazPrintableArea.style.height = 'auto';
+
     if (orientacao === 'paisagem') {
-      cartazPrintableArea.style.maxWidth = '800px';
-      cartazPrintableArea.style.aspectRatio = '1.414 / 1';
-      cartazPrintableArea.style.height = 'auto';
       cartazPreviewContent.style.flexDirection = 'row';
       cartazPreviewContent.style.flexWrap = 'wrap';
       cartazPreviewContent.style.justifyContent = 'center';
@@ -7021,9 +7034,6 @@ document.addEventListener('DOMContentLoaded', () => {
         });
       }, 0);
     } else {
-      cartazPrintableArea.style.maxWidth = '500px';
-      cartazPrintableArea.style.aspectRatio = '1 / 1.414';
-      cartazPrintableArea.style.height = 'auto';
       cartazPreviewContent.style.flexDirection = 'column';
       cartazPreviewContent.style.flexWrap = 'nowrap';
       cartazPreviewContent.style.justifyContent = 'flex-start';
@@ -7053,7 +7063,15 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  [cartazBgColor, cartazTextColor, cartazFontSelect, cartazBorderSelect, cartazTituloInput, document.getElementById('cartazOrientacaoSelect')].forEach(elem => {
+  [
+    cartazBgColor, 
+    cartazTextColor, 
+    cartazFontSelect, 
+    cartazBorderSelect, 
+    cartazTituloInput, 
+    document.getElementById('cartazOrientacaoSelect'),
+    document.getElementById('cartazTamanhoSelect')
+  ].forEach(elem => {
     if (elem) elem.addEventListener('input', updateLivePreview);
     if (elem && elem.tagName === 'SELECT') elem.addEventListener('change', updateLivePreview);
   });
diff --git a/public/style.css b/public/style.css
index 9dc33f2..1798241 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3623,6 +3623,68 @@ code {
   100% { border-color: var(--border-light, #262626); }
 }
 
+/* Estilos para o Preview do Cartaz (Estúdio de Cartazes PedaGog) */
+#cartazPrintableArea {
+  container-type: inline-size;
+  box-sizing: border-box;
+  overflow: hidden !important; /* STRICT LIMIT: nothing overflows the paper! */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Garante que o conteúdo de texto se ajuste */
+#cartazPreviewContent {
+  font-size: 3.5cqw !important;
+  line-height: 1.4 !important;
+  flex: 1;
+  display: flex;
+  gap: 3cqw;
+  overflow: hidden;
+}
+
+#cartazPreviewContent > div, 
+#cartazPreviewContent > p, 
+#cartazPreviewContent > ul {
+  box-sizing: border-box !important;
+  padding: 3.5cqw !important;
+  border-radius: 2cqw !important;
+  font-size: 3cqw !important;
+  margin: 0 !important;
+}
+
+#cartazPreviewContent h2,
+#cartazPreviewContent h3 {
+  font-size: 4.5cqw !important;
+  margin-top: 0 !important;
+  margin-bottom: 2cqw !important;
+}
+
+#cartazPreviewContent li {
+  font-size: 2.8cqw !important;
+  margin-bottom: 1.5cqw !important;
+}
+
+/* Título principal do cartaz */
+#cartazPreviewTitle {
+  font-size: 7cqw !important;
+  border-bottom-width: 0.5cqw !important;
+  padding-bottom: 2cqw !important;
+  margin-bottom: 4cqw !important;
+  margin-top: 0 !important;
+}
+
+/* Imagem ilustrativa */
+#cartazPreviewImageContainer {
+  margin-bottom: 3cqw !important;
+  border-radius: 2cqw !important;
+  max-height: 35% !important;
+}
+
+#cartazPreviewImage {
+  max-height: 100% !important;
+}
+