Feat: ferramenta Planejamento Mind Lab ganha modal próprio com faixas etárias, lista de jogos específicos e métodos metacognitivos

public/index.html

@@ -232,7 +232,7 @@
             <button type="button" class="btn-prompt-mode mode-text" id="barBtnBrincarAtivo" style="border-color: rgba(16, 163, 127, 0.4); color: #a7f3d0; background: rgba(16, 163, 127, 0.05);" title="Criar circuitos psicomotores e brincadeiras ativas">
               <span class="mode-icon">🏃‍♂️</span> BrincarAtivo
             </button>
-            <button type="button" class="btn-prompt-mode mode-mindlab" data-prompt="Crie um planejamento de aula inspirado no Mind Lab para trabalhar educação socioemocional e cooperação." style="border-color: rgba(139, 92, 246, 0.4); color: #a78bfa; background: rgba(139, 92, 246, 0.05);" title="Planejamento Mind Lab">
+            <button type="button" id="barBtnMindLab" class="btn-prompt-mode mode-mindlab" style="border-color: rgba(139, 92, 246, 0.4); color: #a78bfa; background: rgba(139, 92, 246, 0.05);" title="Planejamento Mind Lab">
               <span class="mode-icon">🧠</span> Planejamento Mind Lab
             </button>
             <button type="button" class="btn-prompt-mode mode-bncc" data-prompt="Crie um planejamento pedagógico de artes alinhado à BNCC para o campo 'Traços, sons, cores e formas'." style="border-color: rgba(234, 179, 8, 0.4); color: #fef08a; background: rgba(234, 179, 8, 0.05);" title="Atividade BNCC">
@@ -905,6 +905,87 @@
       <div id="historiaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;"></div>
     </div>
   </div>
+  <!-- Modal: Planejamento Mind Lab -->
+  <div id="mindLabModal" class="settings-modal" style="display: none;">
+    <div class="settings-modal-content" style="max-width: 700px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
+      <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
+        <h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🧠 Planejador de Aulas Mind Lab</h3>
+        <button id="btnCloseMindLabModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+      </div>
+      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
+        
+        <!-- FAIXA ETÁRIA -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">1. Faixa Etária (Ano Escolar)</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-option btn-mindlab-faixa active" data-faixa="infantil">🧸 Educação Infantil</button>
+            <button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund1_inicio">🎒 Fund I (1º ao 3º)</button>
+            <button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund1_fim">📚 Fund I (4º e 5º)</button>
+            <button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund2">🎓 Fund II (6º ao 9º)</button>
+          </div>
+        </div>
+
+        <!-- JOGO DE RACIOCÍNIO -->
+        <div class="settings-group">
+          <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;">
+            2. Jogo de Raciocínio Escolhido
+            <span style="font-size: 0.7rem; color: #8b5cf6;">(Atualizado conforme a faixa etária)</span>
+          </label>
+          <div id="mindLabGamesGrid" class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 4px;">
+            <!-- Preenchido via JavaScript -->
+          </div>
+          <input type="text" id="mindLabOutroJogoInput" placeholder="Ou digite outro jogo..." class="obs-input" style="width: 100%; margin-top: 8px; padding: 10px; display: none;">
+        </div>
+
+        <!-- MÉTODO METACOGNITIVO -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Método Metacognitivo</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-option btn-mindlab-metodo active" data-metodo="Semáforo">🚦 Semáforo</button>
+            <button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Árvore de Pensamentos">🌳 Árvore de Pensamentos</button>
+            <button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="A Lupa">🔍 A Lupa</button>
+            <button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Pássaro Migratório">🦅 Pássaro Migratório</button>
+            <button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Detetive">🕵️ Detetive</button>
+            <button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Balança">⚖️ Balança</button>
+          </div>
+        </div>
+
+        <!-- FOCO SOCIOEMOCIONAL -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">4. Foco Socioemocional (Transferência)</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-option btn-mindlab-foco active" data-foco="Lidar com a frustração (perder/ganhar)">😫 Lidar com a frustração</button>
+            <button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Trabalho em equipe e cooperação">🤝 Trabalho em equipe</button>
+            <button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Foco, atenção e evitar distrações">🎯 Foco e atenção</button>
+            <button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Resolução de conflitos">🕊️ Resolução de conflitos</button>
+            <button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Planejamento e visão de futuro">🗺️ Planejamento</button>
+            <button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Respeitar regras e combinados">📜 Respeito a regras</button>
+          </div>
+        </div>
+        
+        <!-- DETALHES ADICIONAIS -->
+        <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. Duração e Tema de Fundo</label>
+          <div style="display: flex; gap: 10px; margin-top: 4px;">
+            <select id="mindLabDuracaoSelect" class="obs-select" style="flex: 1;">
+              <option value="Curta (30 a 40 min)">Curta (30-40 min)</option>
+              <option value="Padrão (50 min)" selected>Padrão (50 min)</option>
+              <option value="Dupla (1h40)">Dupla (1h40)</option>
+            </select>
+            <input type="text" id="mindLabTemaLivreInput" placeholder="Ex: amizade, regras de convivência..." class="obs-input" style="flex: 2;">
+          </div>
+        </div>
+
+        <button type="button" id="btnGenerateMindLab" style="width: 100%; padding: 12px; background: #8b5cf6; 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(139, 92, 246, 0.3); transition: all 0.2s;">🧠 Criar Planejamento Mind Lab</button>
+        
+        <div id="mindLabGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 15px;">
+          <div class="spinner"></div>
+          <span style="color: var(--text-secondary); font-size: 0.9rem;">Elaborando metodologia e transferência...</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div id="poesiaModal" class="settings-modal" style="display: none;">
     <div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
       <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">