feat: adiciona gerenciador dinamico de personagens para a Fabrica de Quadrinhos com nomes e tipos customizados

public/app.js

@@ -3515,12 +3515,61 @@ const initApp = () => {
     });
   });
 
-  // Toggle ativo personagens principais
-  document.querySelectorAll('.btn-comics-char').forEach(btn => {
-    btn.addEventListener('click', () => {
-      btn.classList.toggle('active');
+  // Gerenciador dinâmico de personagens
+  const comicsCharListContainer = document.getElementById('comicsCharListContainer');
+  const btnAddHumanChar = document.getElementById('btnAddHumanChar');
+  const btnAddAnimalChar = document.getElementById('btnAddAnimalChar');
+
+  const addCharacterRow = (type = '', name = '', isAnimal = false) => {
+    const row = document.createElement('div');
+    row.className = 'comic-char-row';
+    row.style.cssText = 'display: flex; gap: 8px; align-items: center; background: var(--bg-primary); padding: 8px; border-radius: 8px; border: 1px solid var(--border-light);';
+
+    const emoji = document.createElement('span');
+    emoji.style.fontSize = '1.1rem';
+    emoji.textContent = isAnimal ? '🐾' : '🧒';
+    row.appendChild(emoji);
+
+    const typeInput = document.createElement('input');
+    typeInput.type = 'text';
+    typeInput.className = 'obs-input char-type-input';
+    typeInput.placeholder = isAnimal ? 'Tipo (ex: Gatinho, Leão)' : 'Tipo (ex: Menino, Menina)';
+    typeInput.value = type;
+    typeInput.style.cssText = 'flex: 1; padding: 6px 10px; font-size: 0.85rem; margin: 0;';
+    row.appendChild(typeInput);
+
+    const nameInput = document.createElement('input');
+    nameInput.type = 'text';
+    nameInput.className = 'obs-input char-name-input';
+    nameInput.placeholder = 'Nome';
+    nameInput.value = name;
+    nameInput.style.cssText = 'flex: 1; padding: 6px 10px; font-size: 0.85rem; margin: 0;';
+    row.appendChild(nameInput);
+
+    const deleteBtn = document.createElement('button');
+    deleteBtn.type = 'button';
+    deleteBtn.className = 'btn-delete-char';
+    deleteBtn.innerHTML = '×';
+    deleteBtn.style.cssText = 'background: none; border: none; color: #ef4444; font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1;';
+    deleteBtn.addEventListener('click', () => {
+      row.remove();
     });
-  });
+    row.appendChild(deleteBtn);
+
+    comicsCharListContainer.appendChild(row);
+  };
+
+  if (btnAddHumanChar) {
+    btnAddHumanChar.addEventListener('click', () => {
+      addCharacterRow('', '', false);
+    });
+  }
+
+  if (btnAddAnimalChar) {
+    btnAddAnimalChar.addEventListener('click', () => {
+      addCharacterRow('', '', true);
+    });
+  }
 
   // Exibir/ocultar cenário personalizado
   if (comicsCenarioSelect) {
@@ -3543,6 +3592,11 @@ const initApp = () => {
     comicsVideoLoader.style.display = 'none';
     btnGenerateComics.disabled = false;
     comicsLoaderProgress.style.width = '0%';
+    
+    // Inicializar lista de personagens com padrão se estiver vazia
+    comicsCharListContainer.innerHTML = '';
+    addCharacterRow("Menino", "Lucas", false);
+    addCharacterRow("Menina", "Mariana", false);
   };
 
   if (barBtnComics) {
@@ -3591,14 +3645,18 @@ const initApp = () => {
         return;
       }
 
-      // Reunir personagens selecionados
+      // Reunir personagens dinamicamente
       const personagens = [];
-      document.querySelectorAll('.btn-comics-char.active').forEach(b => {
-        personagens.push(b.textContent.trim());
+      document.querySelectorAll('.comic-char-row').forEach(row => {
+        const type = row.querySelector('.char-type-input').value.trim();
+        const name = row.querySelector('.char-name-input').value.trim();
+        if (type && name) {
+          personagens.push(`${type} chamado(a) ${name}`);
+        }
       });
 
       if (personagens.length === 0) {
-        alert('Selecione pelo menos um personagem principal.');
+        alert('Adicione e preencha pelo menos um personagem principal.');
         return;
       }