Feature: Estudio de Cartazes profissional com templates BNCC/Educacao Infantil/MindLab, integracao de turma, live editor e exportacao PDF/PNG

public/app.js

@@ -7368,16 +7368,25 @@ document.addEventListener('DOMContentLoaded', () => {
   const panelCartazesHistorico = document.getElementById('panelCartazesHistorico');
 
   const cartazTituloInput = document.getElementById('cartazTituloInput');
-  const cartazTemaInput = document.getElementById('cartazTemaInput');
+  const cartazSubtituloInput = document.getElementById('cartazSubtituloInput');
-  const cartazLayoutSelect = document.getElementById('cartazLayoutSelect');
+  const cartazCardsInput = document.getElementById('cartazCardsInput');
+  const cartazRodapeInput = document.getElementById('cartazRodapeInput');
+  const cartazTemplateSelect = document.getElementById('cartazTemplateSelect');
+  const cartazTurmaSelect = document.getElementById('cartazTurmaSelect');
+  const btnCartazResetTemplate = document.getElementById('btnCartazResetTemplate');
+
   const cartazBgColor = document.getElementById('cartazBgColor');
   const cartazTextColor = document.getElementById('cartazTextColor');
   const cartazFontSelect = document.getElementById('cartazFontSelect');
   const cartazBorderSelect = document.getElementById('cartazBorderSelect');
   const cartazPromptImagem = document.getElementById('cartazPromptImagem');
+  const btnGenerateCartazImage = document.getElementById('btnGenerateCartazImage');
+  const btnRemoveCartazImage = document.getElementById('btnRemoveCartazImage');
   const btnGenerateCartaz = document.getElementById('btnGenerateCartaz');
   const cartazGenerateLoader = document.getElementById('cartazGenerateLoader');
 
+  const btnExportCartazPNG = document.getElementById('btnExportCartazPNG');
+  const btnExportCartazPDF = document.getElementById('btnExportCartazPDF');
   const btnEditCartazToggle = document.getElementById('btnEditCartazToggle');
   const btnPrintCartaz = document.getElementById('btnPrintCartaz');
   const cartazEditArea = document.getElementById('cartazEditArea');
@@ -7395,31 +7404,206 @@ document.addEventListener('DOMContentLoaded', () => {
 
   let activeCartazData = null;
 
-  // Toggle Modal
+  // DICIONÁRIO DE TEMPLATES PEDAGÓGICOS PRÉ-CONFIGURADOS
-  if (barBtnCartazes) {
+  const CARTAZ_TEMPLATES = {
-    barBtnCartazes.addEventListener('click', () => {
+    combinados: {
-      cartazesModal.style.display = 'flex';
+      titulo: "🌟 Combinados da Nossa Turma",
-      switchCartazTab('criar');
+      subtitulo: "Educação Infantil • Convivência e Respeito",
-    });
+      cards: [
-  }
+        "🤝 Cuidamos dos nossos amigos com carinho",
-
+        "🧸 Guardamos os brinquedos nos cantos certos",
-  if (btnCloseCartazesModal) {
+        "🤫 Falamos baixinho na roda de conversa",
-    btnCloseCartazesModal.addEventListener('click', () => {
+        "🧼 Lavamos as mãos antes do lanche",
-      if (canvasModeActive) {
+        "👂 Ouvimos a professora e os colegas com atenção"
-        exitCanvasMode();
+      ],
-      }
+      rodape: "Educando com afeto, empatia e respeito mútuo",
-      cartazesModal.style.display = 'none';
+      bg: "#fff9eb",
-    });
+      text: "#2d3748",
-  }
+      font: "'Fredoka', sans-serif",
-
+      prompt: "Children holding hands happily in a colorful kindergarten classroom, cute 3D Pixar illustration, bright warm colors, no text"
-  cartazesModal.addEventListener('click', (e) => {
+    },
-    if (e.target === cartazesModal) {
+    rotina: {
-      if (canvasModeActive) {
+      titulo: "🍏 Rotina Diária & Lanche Saudável",
-        exitCanvasMode();
+      subtitulo: "Desenvolvimento de Autonomia e Hábitos Saudáveis",
-      }
+      cards: [
-      cartazesModal.style.display = 'none';
+        "🌅 Roda de Acolhida e Canções do Bom Dia",
+        "🧼 Higiene e Lavagem Cuidadosa das Mãos",
+        "🍎 Hora do Lanche: Servir-se sem desperdícios",
+        "🌳 Vivências no Parque, Areia e Natureza",
+        "😴 Roda de Histórias, Livros e Relaxamento"
+      ],
+      rodape: "Promovendo a autonomia e o autocuidado no cotidiano",
+      bg: "#f0fdf4",
+      text: "#166534",
+      font: "'Fredoka', sans-serif",
+      prompt: "Cute children having healthy fruit snack at kindergarten table, friendly cartoon vector style, bright colors, no text"
+    },
+    aniversarios: {
+      titulo: "🎂 Mural dos Aniversariantes",
+      subtitulo: "Celebrando a vida e o crescimento das nossas crianças!",
+      cards: [
+        "🎈 Que cada dia seja repleto de brincadeiras!",
+        "🎉 Parabéns aos aniversariantes do mês!",
+        "🌟 Muita saúde, descobertas e sorrisos!"
+      ],
+      rodape: "Com todo carinho da Professora e dos Colegas",
+      bg: "#fdf2f8",
+      text: "#9d174d",
+      font: "'Fredoka', sans-serif",
+      prompt: "Festive colorful birthday balloons and confetti with smiling animal mascots, cute 3D Pixar illustration, no text"
+    },
+    brinquedos: {
+      titulo: "🧸 Organização dos Brinquedos e Cantos",
+      subtitulo: "Nosso espaço escolar é de todos nós!",
+      cards: [
+        "🧩 Blocos de montar: Caixa Azul",
+        "🚗 Carrinhos e transportes: Caixa Verde",
+        "📚 Livros de histórias: Estante Baixa",
+        "🎨 Tintas e massinhas: Armário de Artes"
+      ],
+      rodape: "Cuidar dos materiais é um ato de carinho e respeito",
+      bg: "#eff6ff",
+      text: "#1e40af",
+      font: "'Fredoka', sans-serif",
+      prompt: "Cute organized classroom toy shelf with colorful wooden blocks and teddy bears, cartoon style, no text"
+    },
+    bncc_eu_outro: {
+      titulo: "🤝 O Eu, o Outro e o Nós",
+      subtitulo: "Campo de Experiência BNCC • EI02EO / EI03EO",
+      cards: [
+        "🌟 Reconhecer e valorizar suas próprias qualidades",
+        "💖 Desenvolver empatia e respeito aos sentimentos alheios",
+        "🗣️ Resolver pequenos conflitos através do diálogo",
+        "🎨 Compartilhar materiais e respeitar a vez dos amigos"
+      ],
+      rodape: "BNCC Educação Infantil • Identidade, Autonomia e Convivência",
+      bg: "#eff6ff",
+      text: "#1e40af",
+      font: "'Outfit', sans-serif",
+      prompt: "Children of diverse backgrounds smiling together and sharing toys, gentle watercolor illustration, no text"
+    },
+    bncc_corpo: {
+      titulo: "🏃 Corpo, Gestos e Movimentos",
+      subtitulo: "Campo de Experiência BNCC • EI02CG / EI03CG",
+      cards: [
+        "🤸 Circuitos motores, equilíbrio, saltos e giros",
+        "🎶 Cantigas de roda e expressão corporal rítmica",
+        "🚲 Deslocamentos espaciais e controle corporal",
+        "⚽ Gincanas cooperativas e respeito a regras"
+      ],
+      rodape: "BNCC Educação Infantil • Corporeidade, Saúde e Movimento",
+      bg: "#fdf2f8",
+      text: "#9d174d",
+      font: "'Fredoka', sans-serif",
+      prompt: "Cute children running, jumping, and playing ring around the rosie outdoors, lively vibrant illustration, no text"
+    },
+    bncc_tracos: {
+      titulo: "🎨 Traços, Sons, Cores e Formas",
+      subtitulo: "Campo de Experiência BNCC • EI02TS / EI03TS",
+      cards: [
+        "🖌️ Pinturas com texturas e tintas naturais",
+        "🥁 Exploração de instrumentos musicais e ritmos",
+        "🖍️ Desenhos livres de observação e imaginação",
+        "🎭 Esculturas com massinha, argila e sucatas"
+      ],
+      rodape: "BNCC Educação Infantil • Sensibilidade, Expressão e Arte",
+      bg: "#fff9eb",
+      text: "#b45309",
+      font: "'Caveat', cursive",
+      prompt: "Children happily painting on big canvases with colorful paint splashes, cute art studio, no text"
+    },
+    bncc_escuta: {
+      titulo: "📖 Escuta, Fala, Pensamento e Imaginação",
+      subtitulo: "Campo de Experiência BNCC • EI02EF / EI03EF",
+      cards: [
+        "📚 Roda de contação e manuseio de livros infantis",
+        "🗣️ Expressão oral de ideias, sentimentos e histórias",
+        "🎵 Cantigas, parlendas, rimas e trava-línguas",
+        "✍️ Contato lúdico com a função social da escrita"
+      ],
+      rodape: "BNCC Educação Infantil • Linguagem e Letramento Inicial",
+      bg: "#f0fdf4",
+      text: "#15803d",
+      font: "'Fredoka', sans-serif",
+      prompt: "Teacher reading an open fairy tale storybook to cozy circle of children, magical soft glow, Pixar 3D, no text"
+    },
+    bncc_espacos: {
+      titulo: "🔍 Espaços, Tempos, Quantidades e Relações",
+      subtitulo: "Campo de Experiência BNCC • EI02ET / EI03ET",
+      cards: [
+        "🌱 Observação do plantio na horta e natureza",
+        "🔢 Contagem lúdica com elementos concretos",
+        "📐 Identificação de formas geométricas no ambiente",
+        "⏳ Noções de tempo: ontem, hoje, amanhã e rotina"
+      ],
+      rodape: "BNCC Educação Infantil • Curiosidade e Investigação Científica",
+      bg: "#eff6ff",
+      text: "#1e3a8a",
+      font: "'Outfit', sans-serif",
+      prompt: "Kids exploring green garden with magnifying glass and planting flowers, vibrant clean illustration, no text"
+    },
+    mindlab_regras: {
+      titulo: "♟️ Cantinho dos Jogos Mind Lab",
+      subtitulo: "Metodologia de Jogos & Desenvolvimento Socioemocional",
+      cards: [
+        "🎯 Pensar antes de agir e planejar sua jogada",
+        "🤝 Saber ganhar e saber perder com elegância",
+        "⏳ Aguardar a sua vez com calma e autocontrole",
+        "💡 Aprender com as tentativas e criar novas estratégias"
+      ],
+      rodape: "Mind Lab Brasil • Jogos Pedagógicos e Habilidades do Século XXI",
+      bg: "#f8fafc",
+      text: "#1e293b",
+      font: "'Outfit', sans-serif",
+      prompt: "Children happily playing a wooden tabletop board game together, focus and teamwork, 3D Pixar, no text"
+    },
+    mindlab_cooperacao: {
+      titulo: "🧩 Desafios de Raciocínio & Cooperação",
+      subtitulo: "Metodologia Mind Lab • Resolução de Problemas",
+      cards: [
+        "👥 O trabalho em equipe nos leva mais longe",
+        "🔍 Escuta atenta das ideias dos colegas",
+        "🚀 Cada desafio é uma oportunidade de aprender"
+      ],
+      rodape: "Desenvolvendo liderança, empatia e tomada de decisão",
+      bg: "#f0fdf4",
+      text: "#166534",
+      font: "'Fredoka', sans-serif",
+      prompt: "Children putting together giant colorful puzzle pieces together, cooperation, joyful 3D illustration, no text"
+    },
+    aviso_pais: {
+      titulo: "📌 Recado Importante para as Famílias",
+      subtitulo: "Comunicação Escola & Comunidade Escolar",
+      cards: [
+        "📅 Próxima Reunião Pedagógica: Sexta-feira às 17h",
+        "🎒 Trazer uma muda de roupa extra identificada",
+        "👟 Uso de calçado confortável para o dia de parque",
+        "💧 Manter a garrafinha de água individual na mochila"
+      ],
+      rodape: "A parceria entre escola e família é fundamental para o sucesso das crianças!",
+      bg: "#fff9eb",
+      text: "#1e293b",
+      font: "'Outfit', sans-serif",
+      prompt: "Friendly cartoon school bulletin board with colorful notes and cheerful mascot, clean vector, no text"
+    },
+    mostra_cultural: {
+      titulo: "🎉 Convite: Mostra Pedagógica & Cultural",
+      subtitulo: "Venha prestigiar as produções e vivências dos nossos pequenos!",
+      cards: [
+        "🎨 Exposição dos Painéis de Arte e Garatujas",
+        "📸 Linha do Tempo das Descobertas do Semestre",
+        "🎶 Apresentação Musical e Parlendas da Turma",
+        "🌿 Visitação guiada à Horta e Projetos Coletivos"
+      ],
+      rodape: "Contamos com a presença de todas as famílias!",
+      bg: "#fdf2f8",
+      text: "#831843",
+      font: "'Playfair Display', serif",
+      prompt: "Joyful school festival decoration with colorful bunting banners and children artworks, vibrant light, no text"
     }
-  });
+  };
+
+
 
   // Switch Tab
   function switchCartazTab(tab) {
@@ -7428,7 +7612,6 @@ document.addEventListener('DOMContentLoaded', () => {
       tabCartazesHistorico.classList.remove('active');
       panelCartazesCriar.style.display = 'flex';
       panelCartazesHistorico.style.display = 'none';
-      
       tabCartazesCriar.style.color = 'var(--text-primary)';
       tabCartazesHistorico.style.color = 'var(--text-secondary)';
     } else {
@@ -7436,7 +7619,6 @@ document.addEventListener('DOMContentLoaded', () => {
       tabCartazesHistorico.classList.add('active');
       panelCartazesCriar.style.display = 'none';
       panelCartazesHistorico.style.display = 'flex';
-      
       tabCartazesCriar.style.color = 'var(--text-secondary)';
       tabCartazesHistorico.style.color = 'var(--text-primary)';
       loadCartazesHistory();
@@ -7446,6 +7628,39 @@ document.addEventListener('DOMContentLoaded', () => {
   if (tabCartazesCriar) tabCartazesCriar.addEventListener('click', () => switchCartazTab('criar'));
   if (tabCartazesHistorico) tabCartazesHistorico.addEventListener('click', () => switchCartazTab('historico'));
 
+  // RENDERIZAR CONTEÚDO DO CARTAZ EM TEMPO REAL
+  function renderCartazContentFromInputs() {
+    const rawCards = (cartazCardsInput?.value || '').split('\n').map(l => l.trim()).filter(l => l.length > 0);
+    const subtitulo = (cartazSubtituloInput?.value || '').trim();
+    const rodape = (cartazRodapeInput?.value || '').trim();
+
+    let html = '';
+    if (subtitulo) {
+      html += `<div style="text-align: center; font-size: 1.15rem; font-weight: 600; opacity: 0.9; margin-bottom: 12px; letter-spacing: 0.3px;">${subtitulo}</div>`;
+    }
+
+    if (rawCards.length > 0) {
+      html += `<div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">`;
+      rawCards.forEach((line) => {
+        html += `
+          <div style="background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); border: 2px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 12px 16px; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);">
+            <span>${line}</span>
+          </div>
+        `;
+      });
+      html += `</div>`;
+    } else {
+      html += `<p style="text-align: center; color: rgba(0,0,0,0.4); font-style: italic; padding: 20px 0;">Digite os destaques ou escolha um modelo ao lado.</p>`;
+    }
+
+    if (rodape) {
+      html += `<div style="margin-top: auto; padding-top: 14px; text-align: center; font-size: 0.85rem; font-weight: 600; opacity: 0.75; border-top: 1px dashed rgba(0,0,0,0.15);">${rodape}</div>`;
+    }
+
+    cartazPreviewContent.innerHTML = html;
+    if (cartazHtmlEditor) cartazHtmlEditor.value = html;
+  }
+
   // Live Style Updates
   function updateLivePreview() {
     const bg = cartazBgColor.value;
@@ -7459,60 +7674,11 @@ 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.maxWidth = orientacao === 'paisagem' ? '680px' : '480px';
     cartazPrintableArea.style.aspectRatio = orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414';
     cartazPrintableArea.style.height = 'auto';
 
-    if (orientacao === 'paisagem') {
-      cartazPreviewContent.style.flexDirection = 'row';
-      cartazPreviewContent.style.flexWrap = 'wrap';
-      cartazPreviewContent.style.justifyContent = 'center';
-      cartazPreviewContent.style.alignContent = 'flex-start';
-      cartazPreviewContent.style.gap = '12px';
-
-      setTimeout(() => {
-        Array.from(cartazPreviewContent.children).forEach(child => {
-          child.style.flex = '1 1 calc(50% - 12px)';
-          child.style.boxSizing = 'border-box';
-          child.style.margin = '0';
-          child.style.background = 'rgba(255,255,255,0.25)';
-          child.style.padding = '12px';
-          child.style.borderRadius = '8px';
-          child.style.border = '1px solid rgba(0,0,0,0.05)';
-        });
-      }, 0);
-    } else {
-      cartazPreviewContent.style.flexDirection = 'column';
-      cartazPreviewContent.style.flexWrap = 'nowrap';
-      cartazPreviewContent.style.justifyContent = 'flex-start';
-      cartazPreviewContent.style.gap = '12px';
-
-      setTimeout(() => {
-        Array.from(cartazPreviewContent.children).forEach(child => {
-          child.style.flex = '0 0 auto';
-          child.style.width = '100%';
-          child.style.boxSizing = 'border-box';
-          child.style.margin = '0';
-          child.style.background = 'rgba(255,255,255,0.25)';
-          child.style.padding = '12px';
-          child.style.borderRadius = '8px';
-          child.style.border = '1px solid rgba(0,0,0,0.05)';
-        });
-      }, 0);
-    }
-
     cartazPreviewTitle.textContent = title;
     cartazPreviewTitle.style.borderColor = text;
 
@@ -7523,14 +7689,27 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // Event Listeners para inputs em tempo real
+  [
+    cartazTituloInput,
+    cartazSubtituloInput,
+    cartazCardsInput,
+    cartazRodapeInput
+  ].forEach(elem => {
+    if (elem) {
+      elem.addEventListener('input', () => {
+        renderCartazContentFromInputs();
+        updateLivePreview();
+      });
+    }
+  });
+
   [
     cartazBgColor, 
     cartazTextColor, 
     cartazFontSelect, 
     cartazBorderSelect, 
-    cartazTituloInput, 
+    document.getElementById('cartazOrientacaoSelect')
-    document.getElementById('cartazOrientacaoSelect'),
-    document.getElementById('cartazTamanhoSelect')
   ].forEach(elem => {
     if (elem) elem.addEventListener('input', updateLivePreview);
     if (elem && elem.tagName === 'SELECT') elem.addEventListener('change', updateLivePreview);
@@ -7539,67 +7718,96 @@ document.addEventListener('DOMContentLoaded', () => {
   // Preset Palettes
   document.querySelectorAll('.btn-palette-preset').forEach(btn => {
     btn.addEventListener('click', (e) => {
-      const bg = e.target.dataset.bg;
+      const bg = btn.dataset.bg;
-      const text = e.target.dataset.text;
+      const text = btn.dataset.text;
       cartazBgColor.value = bg;
       cartazTextColor.value = text;
       updateLivePreview();
     });
   });
 
-  // Toggle HTML Editor
+  // Gerar Ilustração com IA (MiniMax T2I)
-  if (btnEditCartazToggle) {
+  if (btnGenerateCartazImage) {
-    btnEditCartazToggle.addEventListener('click', () => {
+    btnGenerateCartazImage.addEventListener('click', async () => {
-      if (cartazEditArea.style.display === 'none') {
+      const prompt = (cartazPromptImagem?.value || '').trim();
-        cartazEditArea.style.display = 'flex';
+      if (!prompt) {
-        btnEditCartazToggle.textContent = '👁️ Ocultar Editor';
+        await showCustomAlert('Aviso', 'Digite uma descrição para a ilustração no campo acima.');
-      } else {
+        return;
-        cartazEditArea.style.display = 'none';
+      }
-        btnEditCartazToggle.textContent = '✏️ Editar Conteúdo';
+
+      try {
+        btnGenerateCartazImage.disabled = true;
+        btnGenerateCartazImage.textContent = '⏳ Gerando com IA...';
+
+        const fullPrompt = `${prompt}, high resolution children book illustration, cute Pixar 3D, colorful, no text, clean vector`;
+
+        const resp = await fetch('/api/comics/generate-frame', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ prompt: fullPrompt })
+        });
+
+        if (!resp.ok) {
+          const err = await resp.json();
+          throw new Error(err.error || 'Falha ao gerar ilustração');
+        }
+
+        const data = await resp.json();
+        if (data.imageUrl) {
+          cartazPreviewImage.src = data.imageUrl;
+          cartazPreviewImageContainer.style.display = 'block';
+          updateLivePreview();
+          await showCustomAlert('Ilustração Pronta!', 'A imagem foi gerada e adicionada ao cartaz com sucesso.');
+        }
+      } catch (err) {
+        console.error('Erro ao gerar ilustração do cartaz:', err);
+        await showCustomAlert('Erro', 'Não foi possível gerar a ilustração: ' + err.message);
+      } finally {
+        btnGenerateCartazImage.disabled = false;
+        btnGenerateCartazImage.innerHTML = '<span>🪄 Gerar Ilustração com IA</span>';
       }
     });
   }
 
-  // Update from Editor
+  if (btnRemoveCartazImage) {
-  if (btnUpdateCartazPreview) {
+    btnRemoveCartazImage.addEventListener('click', () => {
-    btnUpdateCartazPreview.addEventListener('click', () => {
+      cartazPreviewImage.src = '';
-      cartazPreviewContent.innerHTML = cartazHtmlEditor.value;
+      cartazPreviewImageContainer.style.display = 'none';
+      if (cartazPromptImagem) cartazPromptImagem.value = '';
+      updateLivePreview();
     });
   }
 
-  // Generate Poster
+  // --- GERAR CONTEÚDO COM PEDAGOGIA (IA) ---
   if (btnGenerateCartaz) {
     btnGenerateCartaz.addEventListener('click', async () => {
-      const titulo = cartazTituloInput.value.trim();
+      const titulo = (cartazTituloInput?.value || '').trim();
-      const tema = cartazTemaInput.value.trim();
+      const subtitulo = (cartazSubtituloInput?.value || '').trim();
-      const layout = cartazLayoutSelect.value;
+      const promptImagem = (cartazPromptImagem?.value || '').trim();
-      const promptImagem = cartazPromptImagem.value.trim();
+      const orientacao = document.getElementById('cartazOrientacaoSelect')?.value || 'retrato';
-      const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
-      const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato';
 
-      if (!titulo || !tema) {
+      if (!titulo) {
-        showToast('Por favor, defina o Título e o Tema do Cartaz.', 'error');
+        await showCustomAlert('Aviso', 'Por favor, informe ao menos o Título Principal do Cartaz.');
         return;
       }
 
       btnGenerateCartaz.disabled = true;
-      cartazGenerateLoader.style.display = 'flex';
+      if (cartazGenerateLoader) cartazGenerateLoader.style.display = 'flex';
 
       try {
         const res = await fetch('/api/cartazes/generate', {
           method: 'POST',
           headers: { 
-            'Content-Type': 'application/json',
+            'Content-Type': 'application/json'
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
           },
           body: JSON.stringify({
             titulo,
-            tema,
+            tema: subtitulo || titulo,
-            corFundo: cartazBgColor.value,
+            corFundo: cartazBgColor?.value || '#fff9eb',
-            corTexto: cartazTextColor.value,
+            corTexto: cartazTextColor?.value || '#2d3748',
-            layout,
+            layout: 'educativo',
             promptImagem,
-            tamanho,
+            tamanho: 'A4',
             orientacao
           })
         });
@@ -7608,28 +7816,111 @@ document.addEventListener('DOMContentLoaded', () => {
         if (res.ok) {
           activeCartazData = data;
           
-          // Preencher Preview
+          if (data.conteudo) {
-          cartazPreviewContent.innerHTML = data.conteudo;
+            // Extrair texto limpo de tópicos/cards para o input editável
-          cartazHtmlEditor.value = data.conteudo;
+            const tempDiv = document.createElement('div');
-          
+            tempDiv.innerHTML = data.conteudo;
+            const items = Array.from(tempDiv.querySelectorAll('li, p, div')).map(el => el.textContent.trim()).filter(t => t.length > 5 && !t.toLowerCase().includes(titulo.toLowerCase()));
+            
+            if (items.length > 0) {
+              cartazCardsInput.value = items.slice(0, 6).join('\n');
+            } else {
+              cartazCardsInput.value = tempDiv.textContent.trim();
+            }
+          }
+
           if (data.imagemUrl) {
             cartazPreviewImage.src = data.imagemUrl;
             cartazPreviewImageContainer.style.display = 'block';
-          } else {
-            cartazPreviewImageContainer.style.display = 'none';
           }
 
+          renderCartazContentFromInputs();
           updateLivePreview();
-          showToast('Cartaz criado e salvo com sucesso!', 'success');
+          showToast('Cartaz diagramado pela PedagogIA com sucesso!', 'success');
         } else {
-          showToast(data.error || 'Erro ao gerar cartaz.', 'error');
+          await showCustomAlert('Erro', data.error || 'Erro ao gerar cartaz com IA.');
         }
       } catch (err) {
-        console.error(err);
+        console.error('Erro ao gerar cartaz:', err);
-        showToast('Erro ao se conectar com o servidor.', 'error');
+        await showCustomAlert('Erro', 'Não foi possível conectar ao assistente: ' + err.message);
       } finally {
         btnGenerateCartaz.disabled = false;
-        cartazGenerateLoader.style.display = 'none';
+        if (cartazGenerateLoader) cartazGenerateLoader.style.display = 'none';
+      }
+    });
+  }
+
+  // --- EXPORTAR PNG EM ALTA RESOLUÇÃO ---
+  if (btnExportCartazPNG) {
+    btnExportCartazPNG.addEventListener('click', async () => {
+      try {
+        btnExportCartazPNG.disabled = true;
+        btnExportCartazPNG.textContent = '⏳ Gerando PNG...';
+
+        if (typeof html2canvas === 'undefined') {
+          throw new Error('Biblioteca html2canvas não disponível.');
+        }
+
+        const canvas = await html2canvas(cartazPrintableArea, {
+          scale: 3, // Alta resolução 300 DPI equivalente
+          useCORS: true,
+          logging: false,
+          backgroundColor: cartazBgColor.value || '#fff9eb'
+        });
+
+        const title = (cartazTituloInput.value || 'cartaz_pedagog').replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase();
+        const link = document.createElement('a');
+        link.download = `${title}.png`;
+        link.href = canvas.toDataURL('image/png');
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+
+      } catch (err) {
+        console.error('Erro ao exportar PNG:', err);
+        await showCustomAlert('Erro', 'Não foi possível gerar o PNG: ' + err.message);
+      } finally {
+        btnExportCartazPNG.disabled = false;
+        btnExportCartazPNG.textContent = '🖼️ Baixar PNG';
+      }
+    });
+  }
+
+  // --- EXPORTAR PDF IMPRIMÍVEL ---
+  if (btnExportCartazPDF) {
+    btnExportCartazPDF.addEventListener('click', async () => {
+      try {
+        btnExportCartazPDF.disabled = true;
+        btnExportCartazPDF.textContent = '⏳ Criando PDF...';
+
+        if (typeof html2canvas === 'undefined' || typeof window.jspdf === 'undefined') {
+          throw new Error('Bibliotecas de PDF necessárias não disponíveis.');
+        }
+
+        const orientacao = document.getElementById('cartazOrientacaoSelect')?.value === 'paisagem' ? 'l' : 'p';
+        const canvas = await html2canvas(cartazPrintableArea, {
+          scale: 3,
+          useCORS: true,
+          logging: false,
+          backgroundColor: cartazBgColor.value || '#fff9eb'
+        });
+
+        const imgData = canvas.toDataURL('image/jpeg', 0.95);
+        const { jsPDF } = window.jspdf;
+        const pdf = new jsPDF(orientacao, 'pt', 'a4');
+        const pdfWidth = orientacao === 'l' ? 842 : 595;
+        const pdfHeight = orientacao === 'l' ? 595 : 842;
+
+        pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+        const title = (cartazTituloInput.value || 'cartaz_pedagog').replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase();
+        pdf.save(`${title}.pdf`);
+
+      } catch (err) {
+        console.error('Erro ao exportar PDF:', err);
+        await showCustomAlert('Erro', 'Não foi possível gerar o PDF: ' + err.message);
+      } finally {
+        btnExportCartazPDF.disabled = false;
+        btnExportCartazPDF.textContent = '📄 Baixar PDF';
       }
     });
   }

public/index.html

@@ -1797,107 +1797,141 @@
       <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column;">
         
         <!-- Conteúdo 1: Criador -->
-        <div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 24px; height: 100%; flex-wrap: wrap;">
+        <div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 20px; height: 100%; flex-wrap: wrap;">
           
-          <!-- Lado Esquerdo: Configurações -->
+          <!-- Lado Esquerdo: Configurações e Templates -->
-          <div id="cartazLeftConfigPanel" style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px;">
+          <div id="cartazLeftConfigPanel" style="flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 14px;">
-            <h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">1. Definições do Cartaz</h4>
             
-            <div class="settings-group">
+            <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Título do Cartaz</label>
+              <h4 style="margin: 0; color: var(--text-primary);">📋 1. Modelo & Conteúdo</h4>
-              <input type="text" id="cartazTituloInput" placeholder="Ex: Regras da Nossa Sala" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
+              <button type="button" id="btnCartazResetTemplate" class="btn-music-option" style="padding: 2px 8px; font-size: 0.72rem; margin: 0;">Limpar</button>
             </div>
-
+            
+            <!-- SELETOR DE TEMPLATES PRÉ-CONFIGURADOS -->
             <div class="settings-group">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Tema / Objetivo Pedagógico</label>
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Modelos Rápidos (Templates)</label>
-              <input type="text" id="cartazTemaInput" placeholder="Ex: Combinados positivos de convivência" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
+              <select id="cartazTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; font-weight: 600; color: var(--brand-pink, #db2777);">
-            </div>
+                <option value="">✨ Escolha um modelo pedagógico...</option>
-
+                <optgroup label="🌟 Educação Infantil (0 a 5 anos)">
-            <div class="settings-group">
+                  <option value="combinados">🌟 Combinados & Convivência da Turma</option>
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Layout Visual</label>
+                  <option value="rotina">🍏 Rotina Diária & Lanche Saudável</option>
-              <select id="cartazLayoutSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
+                  <option value="aniversarios">🎂 Mural dos Aniversariantes</option>
-                <option value="educativo">📚 Educativos e Pedagógicos (Alfabeto, regras, mapas)</option>
+                  <option value="brinquedos">🧸 Organização dos Brinquedos e Cantos</option>
-                <option value="informativo">📌 Informativos e Institucionais (Avisos, recados, datas)</option>
+                </optgroup>
-                <option value="conscientizacao">🌱 Conscientização e Campanhas (Saúde, bem-estar, bullying)</option>
+                <optgroup label="📚 Campos de Experiência (BNCC)">
-                <option value="cultural">🎨 Culturais e Esportivos (Feiras, campeonatos, teatros)</option>
+                  <option value="bncc_eu_outro">🤝 O Eu, o Outro e o Nós (EI02EO / EI03EO)</option>
+                  <option value="bncc_corpo">🏃 Corpo, Gestos e Movimentos (EI02CG / EI03CG)</option>
+                  <option value="bncc_tracos">🎨 Traços, Sons, Cores e Formas (EI02TS / EI03TS)</option>
+                  <option value="bncc_escuta">📖 Escuta, Fala e Imaginação (EI02EF / EI03EF)</option>
+                  <option value="bncc_espacos">🔍 Espaços, Tempos e Relações (EI02ET / EI03ET)</option>
+                </optgroup>
+                <optgroup label="🧠 Metodologia Mind Lab">
+                  <option value="mindlab_regras">♟️ Cantinho dos Jogos & Pensamento Estratégico</option>
+                  <option value="mindlab_cooperacao">🧩 Desafios de Raciocínio & Trabalho em Equipe</option>
+                </optgroup>
+                <optgroup label="📢 Avisos & Famílias">
+                  <option value="aviso_pais">📌 Recado Importante para as Famílias</option>
+                  <option value="mostra_cultural">🎉 Convite para Mostra Pedagógica & Cultural</option>
+                </optgroup>
               </select>
             </div>
 
-            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+            <!-- VINCULAR TURMA -->
+            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
               <div class="settings-group" style="flex: 1; min-width: 140px;">
-                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Tamanho do Papel</label>
+                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Vincular à Turma</label>
-                <select id="cartazTamanhoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
+                <select id="cartazTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
-                  <option value="A4" selected>A4 (21 x 29,7 cm)</option>
+                  <option value="">-- Selecionar Turma --</option>
-                  <option value="A3">A3 (29,7 x 42 cm)</option>
-                  <option value="A2">A2 (42 x 59,4 cm)</option>
-                  <option value="A1">A1 (59,4 x 84,1 cm)</option>
                 </select>
               </div>
               <div class="settings-group" style="flex: 1; min-width: 140px;">
                 <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Orientação</label>
                 <select id="cartazOrientacaoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
-                  <option value="retrato">Retrato (Vertical)</option>
+                  <option value="retrato" selected>📄 Retrato (Vertical A4)</option>
-                  <option value="paisagem">Paisagem (Horizontal)</option>
+                  <option value="paisagem">📃 Paisagem (Horizontal A4)</option>
                 </select>
               </div>
             </div>
 
-            <h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px; margin-top: 8px;">2. Estilo e Cores</h4>
+            <!-- CAMPOS EDITÁVEIS EM TEMPO REAL -->
-            
+            <div class="settings-group">
-            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Título Principal</label>
-              <div class="settings-group" style="flex: 1; min-width: 140px;">
+              <input type="text" id="cartazTituloInput" placeholder="Ex: Combinados da Nossa Turma" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
-                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Cor de Fundo</label>
-                <input type="color" id="cartazBgColor" value="#fff9eb" style="width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; margin-top: 4px;">
-              </div>
-              <div class="settings-group" style="flex: 1; min-width: 140px;">
-                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Cor do Texto</label>
-                <input type="color" id="cartazTextColor" value="#2d3748" style="width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; margin-top: 4px;">
-              </div>
             </div>
 
             <div class="settings-group">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Paletas Rápidas</label>
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Subtítulo / Faixa Etária</label>
-              <div style="display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;">
+              <input type="text" id="cartazSubtituloInput" placeholder="Ex: Educação Infantil • Professora Camila" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
-                <button type="button" class="btn-palette-preset" data-bg="#fff9eb" data-text="#2d3748" style="background: #fff9eb; color: #2d3748; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Tons Pastéis</button>
-                <button type="button" class="btn-palette-preset" data-bg="#e6fffa" data-text="#004d40" style="background: #e6fffa; color: #004d40; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Jardim Fresco</button>
-                <button type="button" class="btn-palette-preset" data-bg="#ebf8ff" data-text="#2b6cb0" style="background: #ebf8ff; color: #2b6cb0; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Céu Azul</button>
-                <button type="button" class="btn-palette-preset" data-bg="#1a202c" data-text="#f7fafc" style="background: #1a202c; color: #f7fafc; padding: 6px; border: 1px solid #444; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Lousa Escura</button>
-              </div>
             </div>
 
-            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+            <div class="settings-group">
-              <div class="settings-group" style="flex: 1; min-width: 140px;">
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Conteúdo / Destaques do Cartaz</label>
-                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Fonte do Cartaz</label>
+              <textarea id="cartazCardsInput" placeholder="Digite os itens ou mensagens do cartaz (um por linha)..." class="obs-input" style="width: 100%; min-height: 80px; padding: 8px; margin-top: 4px; font-size: 0.82rem; resize: vertical;"></textarea>
+            </div>
+
+            <div class="settings-group">
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Rodapé / Mensagem de Apoio</label>
+              <input type="text" id="cartazRodapeInput" placeholder="Ex: EMEI São Bernardo do Campo • Projeto 2026" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
+            </div>
+
+            <!-- ESTILO, CORES E FONTES -->
+            <h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px; margin-top: 4px;">🎨 2. Estilo e Cores</h4>
+            
+            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+              <div class="settings-group" style="flex: 1; min-width: 130px;">
+                <label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Fonte Lúdica</label>
                 <select id="cartazFontSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
                   <option value="'Fredoka', sans-serif" selected>🎈 Fredoka (Fofa/Infantil)</option>
+                  <option value="'Outfit', sans-serif">⚡ Outfit (Moderna)</option>
                   <option value="'Caveat', cursive">✍️ Caveat (Manuscrita)</option>
                   <option value="'Playfair Display', serif">📖 Playfair (Clássica)</option>
-                  <option value="'Outfit', sans-serif">⚡ Outfit (Moderna)</option>
                 </select>
               </div>
-              <div class="settings-group" style="flex: 1; min-width: 140px;">
+              <div class="settings-group" style="flex: 1; min-width: 130px;">
-                <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Estilo de Borda</label>
+                <label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Moldura / Borda</label>
                 <select id="cartazBorderSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
                   <option value="none">Nenhuma</option>
-                  <option value="8px dashed">Pontilhada Colorida</option>
+                  <option value="6px dashed" selected>Pontilhada Colorida</option>
-                  <option value="8px double">Linha Dupla Clássica</option>
+                  <option value="6px double">Linha Dupla Clássica</option>
-                  <option value="12px solid">Borda Larga Colorida</option>
+                  <option value="8px solid">Moldura de Gibi</option>
                 </select>
               </div>
             </div>
 
+            <!-- PALETAS RÁPIDAS -->
             <div class="settings-group">
-              <label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Ilustração por IA (Opcional)</label>
+              <label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Paletas Pedagógicas</label>
-              <textarea id="cartazPromptImagem" placeholder="Ex: Desenho fofo de brinquedos sorridentes na caixa de brinquedos, aquarela, cores suaves..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; margin-top: 4px; font-size: 0.85rem; resize: vertical;"></textarea>
+              <div style="display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;">
+                <button type="button" class="btn-palette-preset" data-bg="#fff9eb" data-text="#2d3748" data-card="#ffffff" style="background: #fff9eb; color: #2d3748; padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Tons Pastéis</button>
+                <button type="button" class="btn-palette-preset" data-bg="#f0fdf4" data-text="#166534" data-card="#ffffff" style="background: #f0fdf4; color: #166534; padding: 4px 8px; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Jardim Verde</button>
+                <button type="button" class="btn-palette-preset" data-bg="#eff6ff" data-text="#1e40af" data-card="#ffffff" style="background: #eff6ff; color: #1e40af; padding: 4px 8px; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Céu Azul</button>
+                <button type="button" class="btn-palette-preset" data-bg="#fdf2f8" data-text="#9d174d" data-card="#ffffff" style="background: #fdf2f8; color: #9d174d; padding: 4px 8px; border: 1px solid #fbcfe8; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Rosa Lúdico</button>
+                <button type="button" class="btn-palette-preset" data-bg="#1e293b" data-text="#f8fafc" data-card="#334155" style="background: #1e293b; color: #f8fafc; padding: 4px 8px; border: 1px solid #475569; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Lousa Escura</button>
+              </div>
             </div>
 
-            <button type="button" id="btnGenerateCartaz" style="width: 100%; padding: 12px; background: #10b981; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.2s; margin-top: 8px;">
+            <!-- ILUSTRAÇÃO POR IA -->
-              <span>🪄 Criar Cartaz Pedagógico</span>
+            <div class="settings-group">
+              <label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Ilustração por IA (MiniMax T2I)</label>
+              <textarea id="cartazPromptImagem" placeholder="Ex: Ilustração 3D Pixar de crianças felizes brincando juntas na escola, cores vivas..." class="obs-input" style="width: 100%; min-height: 50px; padding: 6px; margin-top: 4px; font-size: 0.78rem; resize: vertical;"></textarea>
+              <div style="display: flex; gap: 8px; margin-top: 6px;">
+                <button type="button" id="btnGenerateCartazImage" class="btn-music-option" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.1); font-weight: 600; padding: 5px 10px; font-size: 0.78rem;">
+                  <span>🪄 Gerar Ilustração com IA</span>
+                </button>
+                <button type="button" id="btnRemoveCartazImage" class="btn-music-option" style="color: var(--text-muted); font-size: 0.78rem; padding: 5px 10px;">
+                  Remover Imagem
+                </button>
+              </div>
+            </div>
+
+            <!-- BOTÃO GERAR NOVO CARTAZ COM IA COMPLETA -->
+            <button type="button" id="btnGenerateCartaz" style="width: 100%; padding: 11px; background: #10b981; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.2s; margin-top: 4px;">
+              <span>🤖 Redigir Conteúdo com PedagogIA</span>
             </button>
 
-            <div id="cartazGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
+            <div id="cartazGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.85rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
-              <div class="record-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
+              <div class="media-spinner" style="width: 18px; height: 18px; border-width: 2px; border-top-color: #10b981;"></div>
-              <span id="cartazLoaderText">Montando e diagramando cartaz...</span>
+              <span id="cartazLoaderText">Diagramando cartaz pedagógico...</span>
             </div>
           </div>
 
@@ -1963,12 +1997,14 @@
 
           <!-- Lado Direito: Preview & Editor de Código -->
           <div class="cartaz-preview-panel" style="flex: 1.3; min-width: 360px; display: flex; flex-direction: column; gap: 14px;">
-            <div class="cartaz-header-container" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
+            <div class="cartaz-header-container" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px; flex-wrap: wrap; gap: 8px;">
-              <h4 style="margin: 0; color: var(--text-primary);">👁️ Visualização do Cartaz</h4>
+              <h4 style="margin: 0; color: var(--text-primary);">👁️ Visualização em Tempo Real</h4>
-              <div class="cartaz-header-actions" style="display: flex; gap: 8px;">
+              <div class="cartaz-header-actions" style="display: flex; gap: 6px; flex-wrap: wrap;">
-                <button id="btnCanvasModeToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; font-size: 0.75rem;">🎨 Design Canvas</button>
+                <button type="button" id="btnExportCartazPNG" class="btn-save-settings" style="background: #10b981; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;" title="Baixar imagem PNG de alta resolução">🖼️ Baixar PNG</button>
-                <button id="btnEditCartazToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; font-size: 0.75rem;">✏️ Editar HTML</button>
+                <button type="button" id="btnExportCartazPDF" class="btn-save-settings" style="background: #8b5cf6; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;" title="Baixar documento PDF pronto para impressão">📄 Baixar PDF</button>
-                <button id="btnPrintCartaz" class="btn-save-settings" style="background: #3b82f6; border: none; color: white; padding: 5px 12px; font-size: 0.75rem; font-weight: bold; border-radius: 6px;">🖨️ Imprimir Cartaz</button>
+                <button type="button" id="btnPrintCartaz" class="btn-save-settings" style="background: #3b82f6; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;">🖨️ Imprimir</button>
+                <button type="button" id="btnCanvasModeToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 8px; font-size: 0.75rem;">🎨 Canvas</button>
+                <button type="button" id="btnEditCartazToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 8px; font-size: 0.75rem;">✏️ HTML</button>
               </div>
             </div>
 
@@ -2090,7 +2126,8 @@
     </div>
   </div>
 
-  <!-- Bibliotecas externas para renderizar markdown, PDFs e compactação ZIP -->
+  <!-- Bibliotecas externas para renderizar markdown, PDFs, imagens e compactação ZIP -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>