From 6885ea8b2fe8ab1fbda3c8aaed12a434cf1b1971 Mon Sep 17 00:00:00 2001
From: Cristiano Hoshikawa <hoshikawa@uol.com.br>
Date: Sat, 23 Aug 2025 18:26:51 -0300
Subject: [PATCH] Adjustments

---
 files/app_select_ai.py | 122 ++++++++++++++++++++++-------------------
 1 file changed, 66 insertions(+), 56 deletions(-)

diff --git a/files/app_select_ai.py b/files/app_select_ai.py
index 63350bd..e99931f 100644
--- a/files/app_select_ai.py
+++ b/files/app_select_ai.py
@@ -67,63 +67,73 @@ PAGE = """
 <!-- Export Excel (browser) -->
 <script src="https://cdn.jsdelivr.net/npm/xlsx-populate/browser/xlsx-populate.min.js"></script>
 <style>
-  :root { --bg:#0f1115; --card:#141826; --border:#22283a; --muted:#9aa4af; --text:#e5e7eb; --brand:#4f46e5; }
-  *{box-sizing:border-box}
-  body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
-
-  /* Layout de coluna: topo = histórico, base = input */
-  .page { min-height: 100vh; display:flex; flex-direction:column; }
-  .wrap { max-width:1200px; width:100%; margin:0 auto; padding:16px; flex:1; display:flex; flex-direction:column; gap:12px; }
-  .header{ display:flex; align-items:center; gap:10px; }
-  .logo{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#4f46e5,#06b6d4); display:flex; align-items:center; justify-content:center; font-weight:800; }
-  .title{ font-size:18px; font-weight:700 }
-  .muted{ color:var(--muted); font-size:12px; }
-
-  .card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
-  .kpi{ display:flex; gap:8px; flex-wrap:wrap; }
-  .pill{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; }
-
-  /* Histórico vertical com rolagem; cada item contém gráfico e/ou tabela */
-  #history { flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; max-height: 68vh; }
-  .item { background:#0f1424; border:1px solid var(--border); border-radius:10px; padding:12px; }
-  .sql { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; color:#cbd5e1; background:#0b0f19; border:1px solid var(--border); border-radius:8px; padding:8px; overflow:auto; }
-  .block { margin-top:8px; }
-
-  table{ width:100%; border-collapse:collapse; font-size:14px; }
-  th,td{ padding:8px; border-bottom:1px solid var(--border); text-align:left; }
-  th{ background:#0f1524; position:sticky; top:0; }
-
-  /* Área de input sempre embaixo */
-  .footer { position: sticky; bottom: 0; background:var(--bg); padding:12px 16px; border-top:1px solid var(--border); }
-  .ask { display:flex; gap:8px; flex-wrap:wrap; }
-  input[type="text"]{ flex:1; min-width:280px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0c0f19; color:var(--text); }
-  button{ background:var(--brand); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; }
-  button:hover{ filter:brightness(1.1) }
-
-    .chart-box{
-      height: 220px;         /* altura final do gráfico */
-      width: 100%;
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      background: #0b0f19;
-      padding: 8px;
+    :root{
+      --bg:#ffffff;           /* fundo página */
+      --card:#f9fafb;         /* cartões/itens */
+      --border:#e5e7eb;       /* linhas/bordas */
+      --muted:#6b7280;        /* textos fracos */
+      --text:#111827;         /* texto principal */
+      --brand:#0d6efd;        /* botões/realces */
     }
-    @media (max-width: 640px){
-      .chart-box{ height: 180px; } /* menor em telas pequenas */
-    }  
-    .item { max-width: 100%; }         /* já está */
-    .hist .item { max-width: 520px; }  /* se usar histórico horizontal */    
-
-  .toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 6px; }
-  .pill{ background:#0e1420; border:1px solid var(--border); color:#cbd5e1;
-         padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; }
-  .pill:hover{ border-color:#3a4258; }
-  .chart-box{
-    height: 220px; width: 100%;
-    border:1px solid var(--border); border-radius:10px;
-    background:#0b0f19; padding:8px;
-  }
-  @media (max-width:640px){ .chart-box{ height:180px; } }    
+    
+    *{box-sizing:border-box}
+    body{
+      margin:0;
+      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
+      background:var(--bg);
+      color:var(--text);
+    }
+    
+    /* Layout */
+    .page{ min-height:100vh; display:flex; flex-direction:column; }
+    .wrap{ max-width:1200px; width:100%; margin:0 auto; padding:16px; flex:1; display:flex; flex-direction:column; gap:12px; }
+    .header{ display:flex; align-items:center; gap:10px; }
+    .logo{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#60a5fa,#22d3ee); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
+    .title{ font-size:18px; font-weight:700 }
+    .muted{ color:var(--muted); font-size:12px; }
+    
+    .card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
+    .kpi{ display:flex; gap:8px; flex-wrap:wrap; }
+    .pill{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; background:#fff; color:var(--text); }
+    
+    /* Histórico */
+    #history{ flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; max-height:68vh; }
+    .item{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; }
+    .sql{
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+      font-size:12px; color:#1f2937; background:#ffffff; border:1px solid var(--border);
+      border-radius:8px; padding:8px; overflow:auto;
+    }
+    .block{ margin-top:8px; }
+    
+    table{ width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
+    th,td{ padding:8px; border-bottom:1px solid var(--border); text-align:left; }
+    th{ background:#f3f4f6; position:sticky; top:0; }
+    
+    /* Rodapé/input */
+    .footer{ position:sticky; bottom:0; background:var(--bg); padding:12px 16px; border-top:1px solid var(--border); }
+    .ask{ display:flex; gap:8px; flex-wrap:wrap; }
+    input[type="text"]{
+      flex:1; min-width:280px; padding:10px 12px; border-radius:10px;
+      border:1px solid var(--border); background:#ffffff; color:var(--text);
+    }
+    button{
+      background:var(--brand); color:#fff; border:none; border-radius:10px;
+      padding:10px 14px; font-weight:600; cursor:pointer;
+    }
+    button:hover{ filter:brightness(1.05) }
+    
+    /* Gráficos */
+    .toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 6px; }
+    .pill{ background:#ffffff; border:1px solid var(--border); color:#374151; }
+    .pill:hover{ border-color:#cbd5e1; }
+    
+    .chart-box{
+      height:220px; width:100%;
+      border:1px solid var(--border); border-radius:10px;
+      background:#ffffff; padding:8px;
+    }
+    @media (max-width:640px){ .chart-box{ height:180px; } }
 </style>
 </head>
 <body>