UI/UX: unificação das cores e estilos dos botões das ferramentas para combinar com suas identidades visuais

public/index.html

@@ -789,7 +789,7 @@
           <input type="text" id="musicaTemaInput" placeholder="Ex: amizade na escola, lavar as mãos, alfabeto..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
         </div>
 
-        <button type="button" id="btnGenerateMusica" class="btn-login" style="margin-top: 10px; padding: 14px; font-size: 1rem;">🎵 Compor Música</button>
+        <button type="button" id="btnGenerateMusica" style="width: 100%; padding: 12px; background: #a855f7; 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(168, 85, 247, 0.3); transition: all 0.2s;">🎵 Compor Música Pedagógica</button>
         
         <div id="musicaGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 15px;">
           <div class="spinner"></div>
@@ -875,7 +875,7 @@
           <input type="text" id="historiaTemaInput" placeholder="Ex: Uma fada que não sabia voar, a importância de dividir..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
         </div>
 
-        <button type="button" id="btnGenerateHistoria" class="btn-login" style="margin-top: 10px; padding: 14px; font-size: 1rem;">✍️ Inventar História</button>
+        <button type="button" id="btnGenerateHistoria" style="width: 100%; padding: 12px; background: #10a37f; 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, 163, 127, 0.3); transition: all 0.2s;">✍️ Inventar História</button>
         
         <div id="historiaGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 15px;">
           <div class="spinner"></div>
@@ -944,7 +944,7 @@
         </div>
 
         <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
-          <button id="btnGeneratePoesia" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);">
+          <button id="btnGeneratePoesia" style="width: 100%; padding: 12px; background: #eab308; color: #1e293b; 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(234, 179, 8, 0.3); transition: all 0.2s;">
             <span>📜 Criar Poesia Personalizada</span>
           </button>
           <div id="poesiaGenerateLoader" 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;">

public/style.css

@@ -3159,13 +3159,15 @@ code {
   gap: 6px;
 }
 
+/* Hover base */
 .btn-music-option:hover, .btn-music-rhythm:hover, .btn-music-duration:hover {
   background-color: var(--bg-tertiary);
   color: var(--text-primary);
-  border-color: rgba(168, 85, 247, 0.5);
+  border-color: rgba(168, 85, 247, 0.5); /* Default Purple */
   transform: translateY(-1px);
 }
 
+/* Active base (Purple - Musica Default) */
 .btn-music-option.active, .btn-music-rhythm.active, .btn-music-duration.active {
   background-color: rgba(168, 85, 247, 0.15);
   border-color: #a855f7;
@@ -3174,6 +3176,56 @@ code {
   box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
 }
 
+/* =========================================
+   CUSTOMIZACAO DE CORES DOS MODAIS
+   ========================================= */
+
+/* Estúdio de Poesias (Amarelo/Âmbar #eab308) */
+#poesiaModal .btn-music-option:hover, 
+#poesiaModal .btn-music-rhythm:hover {
+  border-color: rgba(234, 179, 8, 0.5);
+}
+#poesiaModal .btn-music-option.active, 
+#poesiaModal .btn-music-rhythm.active {
+  background-color: rgba(234, 179, 8, 0.15);
+  border-color: #eab308;
+  color: #facc15;
+  box-shadow: 0 0 8px rgba(234, 179, 8, 0.2);
+}
+#poesiaModal .settings-modal-header h3,
+#poesiaHistoryModal .settings-modal-header h3 {
+  color: #eab308;
+}
+
+/* Inventando Histórias (Verde #10a37f) */
+#historiaModal .btn-music-option:hover, 
+#historiaModal .btn-music-rhythm:hover {
+  border-color: rgba(16, 163, 127, 0.5);
+}
+#historiaModal .btn-music-option.active, 
+#historiaModal .btn-music-rhythm.active {
+  background-color: rgba(16, 163, 127, 0.15);
+  border-color: #10a37f;
+  color: #34d399;
+  box-shadow: 0 0 8px rgba(16, 163, 127, 0.2);
+}
+#historiaModal .settings-modal-header h3,
+#historiaHistoryModal .settings-modal-header h3 {
+  color: #10a37f;
+}
+
+/* Musicando Ideias (Roxo #a855f7) */
+#musicaModal .settings-modal-header h3,
+#musicaHistoryModal .settings-modal-header h3 {
+  color: #a855f7;
+}
+
+/* Fábrica de Quadrinhos (Rosa #db2777) */
+#fabricaQuadrinhosModal .settings-modal-header h3,
+#comicsHistoryModal .settings-modal-header h3 {
+  color: #db2777;
+}
+
 /* Customização para botões de tags ativos no estúdio */
 .btn-music-duration.active {
   background-color: rgba(16, 163, 127, 0.15);