Aplica container queries e limites rígidos de dimensões aos 8 formatos de cartazes

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);
   });