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

public/index.html

@@ -786,12 +786,17 @@
 
         <!-- PERSONAGENS -->
         <div class="settings-group">
-          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">5. Personagens Principais</label>
-          <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
-            <button type="button" class="btn-music-option btn-comics-char active" data-char="lucas" style="flex: 1; min-width: 120px;">🧒 Lucas (Criança)</button>
-            <button type="button" class="btn-music-option btn-comics-char" data-char="mariana" style="flex: 1; min-width: 120px;">👧 Mariana (Criança)</button>
-            <button type="button" class="btn-music-option btn-comics-char" data-char="animais" style="flex: 1; min-width: 120px;">🐾 Animais da Floresta</button>
-            <button type="button" class="btn-music-option btn-comics-char" data-char="professor" style="flex: 1; min-width: 120px;">👩‍🏫 Professora Camila</button>
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center;">
+            <span>5. Personagens da História</span>
+            <div style="display: flex; gap: 8px;">
+              <button type="button" id="btnAddHumanChar" class="btn-music-option" style="padding: 3px 8px; font-size: 0.72rem; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); margin: 0;">+ 🧒 Humano</button>
+              <button type="button" id="btnAddAnimalChar" class="btn-music-option" style="padding: 3px 8px; font-size: 0.72rem; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); margin: 0;">+ 🐾 Animal</button>
+            </div>
+          </label>
+          
+          <!-- Lista Dinâmica de Personagens -->
+          <div id="comicsCharListContainer" style="display: flex; flex-direction: column; gap: 8px; margin-top: 6px;">
+            <!-- Itens adicionados dinamicamente por JavaScript -->
           </div>
         </div>