From 6e16a168673ab36d93ec70d13ce8b6ec36a9212d Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Fri, 5 Jun 2026 18:22:09 +0000
Subject: [PATCH] =?UTF-8?q?UI/UX:=20unifica=C3=A7=C3=A3o=20das=20cores=20e?=
 =?UTF-8?q?=20estilos=20dos=20bot=C3=B5es=20das=20ferramentas=20para=20com?=
 =?UTF-8?q?binar=20com=20suas=20identidades=20visuais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  6 +++---
 public/style.css  | 54 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4d45729..737d347 100644
--- a/public/index.html
+++ b/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;">
diff --git a/public/style.css b/public/style.css
index ec55747..5311d1d 100644
--- a/public/style.css
+++ b/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);