Upload 3 files

app.py

@@ -1370,14 +1370,21 @@ def criar_interface():
             elem_classes="section-accordion"
         ) as accordion_secao_9:
             with gr.Group(elem_classes="section-content") as conteudo_secao_9:
-                # Botões "Adotar" (5 fixos, visibilidade controlada)
-                gr.Markdown("*Adote uma das sugestões da busca ou configure manualmente:*")
-                with gr.Row():
-                    btn_adotar_1 = gr.Button("Adotar #1", visible=False, elem_classes="btn-adotar", size="sm")
-                    btn_adotar_2 = gr.Button("Adotar #2", visible=False, elem_classes="btn-adotar", size="sm")
-                    btn_adotar_3 = gr.Button("Adotar #3", visible=False, elem_classes="btn-adotar", size="sm")
-                    btn_adotar_4 = gr.Button("Adotar #4", visible=False, elem_classes="btn-adotar", size="sm")
-                    btn_adotar_5 = gr.Button("Adotar #5", visible=False, elem_classes="btn-adotar", size="sm")
+                # Área destacada para botões de adoção
+                gr.HTML("""
+                    <div class="adotar-header">
+                        <span class="adotar-emoji">📊</span>
+                        <span class="adotar-titulo">Adote uma sugestão da busca automática</span>
+                    </div>
+                """)
+                with gr.Row(elem_classes="adotar-row"):
+                    btn_adotar_1 = gr.Button("✓ Adotar #1", visible=False, elem_classes="btn-adotar", variant="primary")
+                    btn_adotar_2 = gr.Button("✓ Adotar #2", visible=False, elem_classes="btn-adotar", variant="primary")
+                    btn_adotar_3 = gr.Button("✓ Adotar #3", visible=False, elem_classes="btn-adotar", variant="primary")
+                    btn_adotar_4 = gr.Button("✓ Adotar #4", visible=False, elem_classes="btn-adotar", variant="primary")
+                    btn_adotar_5 = gr.Button("✓ Adotar #5", visible=False, elem_classes="btn-adotar", variant="primary")
+
+                gr.HTML("<div class='adotar-separator'><span>ou configure manualmente</span></div>")
 
                 with gr.Row():
                     transformacao_y = gr.Dropdown(

styles.css

@@ -119,16 +119,88 @@
     font-style: italic;
 }
 
+/* Área de adoção de sugestões */
+.adotar-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px 16px;
+    margin: 0 0 12px 0;
+    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+    border: 2px solid #66bb6a;
+    border-radius: 10px;
+}
+
+.adotar-emoji {
+    font-size: 24px;
+}
+
+.adotar-titulo {
+    font-size: 15px;
+    font-weight: 600;
+    color: #2e7d32;
+    letter-spacing: 0.3px;
+}
+
+.adotar-row {
+    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
+    border: 2px dashed #8bc34a;
+    border-radius: 10px;
+    padding: 16px !important;
+    margin: 0 0 16px 0 !important;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+}
+
+.adotar-separator {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin: 8px 0 16px 0;
+    color: #9e9e9e;
+    font-size: 13px;
+}
+
+.adotar-separator::before,
+.adotar-separator::after {
+    content: '';
+    flex: 1;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.adotar-separator span {
+    padding: 0 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+
 /* Botões de adotar transformação */
 .btn-adotar {
-    background: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
-    border-color: #28a745 !important;
+    background: linear-gradient(180deg, #4caf50 0%, #43a047 100%) !important;
+    border: 2px solid #388e3c !important;
     color: white !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.4) !important;
+    transition: all 0.2s ease !important;
+    min-width: 100px !important;
 }
 
 .btn-adotar:hover {
-    background: linear-gradient(180deg, #218838 0%, #1e7e34 100%) !important;
-    border-color: #1e7e34 !important;
+    background: linear-gradient(180deg, #43a047 0%, #388e3c 100%) !important;
+    border-color: #2e7d32 !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.5) !important;
+}
+
+.btn-adotar:active {
+    transform: translateY(0) !important;
+    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
 }
 
 /* Checkbox para marcar/desmarcar todos */