Upload app.py

app.py

@@ -355,7 +355,8 @@ def render_html_table(pivot: pd.DataFrame, categoria: str) -> str:
 """
     for label, bg in zip(faixa_labels, faixa_header_bg):
         html += (f'      <th style="background:{bg};color:#ffffff !important;'
-                 f'text-align:center;min-width:90px;">'
+                 f'text-align:center;min-width:90px;padding:11px 16px;font-weight:700;'
+                 f'font-size:12px;text-transform:uppercase;letter-spacing:0.4px;">'
                  f'{label}<span class="sub-label">[uni]</span></th>\n')
 
     html += '      <th class="th-total">TOTAL</th>\n    </tr>\n  </thead>\n  <tbody>\n'
@@ -529,6 +530,8 @@ def atualizar_vista(categoria: str):
     return tabela_html, kpi_html
 
 # ── CSS global ────────────────────────────────────────────────────────────────
+# NOTA: No Hugging Face Spaces o CSS externo pode ser sobreposto pelo tema.
+# O header usa inline styles directamente no HTML para garantir cor branca.
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
@@ -541,29 +544,14 @@ body, .gradio-container {
     margin: 0 auto !important;
     padding: 0 !important;
 }
-.app-header {
-    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%);
-    padding: 28px 36px 22px;
-    border-radius: 0 0 16px 16px;
-    margin-bottom: 24px;
-    box-shadow: 0 4px 20px rgba(13,71,161,0.25);
-}
-.app-header * {
-    color: #ffffff !important;
-}
-.app-header h1 {
-    margin: 0 0 6px;
-    font-size: 26px;
-    font-weight: 800;
-    letter-spacing: -0.3px;
-    color: #ffffff !important;
-}
-.app-header p {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 400;
+/* Header — reforço via CSS (o inline style no HTML é a fonte primária) */
+.sla-header-wrap,
+.sla-header-wrap *,
+.sla-header-wrap h1,
+.sla-header-wrap p,
+.sla-header-wrap span {
     color: #ffffff !important;
-    opacity: 0.92;
+    -webkit-text-fill-color: #ffffff !important;
 }
 .cat-selector label {
     font-weight: 700 !important;
@@ -625,29 +613,62 @@ CATEGORIAS = ['EM CURSO', 'LICENCIAMENTO', 'FINALIZADO', 'GLOBAL']
 DATA_REF   = pd.Timestamp.today().strftime('%d/%m/%Y')
 N_TOTAL    = len(DF_GLOBAL)
 
+# ── Header HTML — cor branca garantida via 3 mecanismos simultâneos:
+#    1. style="" inline em cada elemento
+#    2. -webkit-text-fill-color (sobrepõe alguns temas WebKit/Blink)
+#    3. <font color> como fallback para parsers que removem style
+HEADER_HTML = f"""
+<style>
+  /* Especificidade máxima para o header — funciona no Hugging Face Spaces */
+  div.sla-header-wrap {{
+    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%) !important;
+    padding: 28px 36px 22px !important;
+    border-radius: 0 0 16px 16px !important;
+    margin-bottom: 24px !important;
+    box-shadow: 0 4px 20px rgba(13,71,161,0.25) !important;
+  }}
+  div.sla-header-wrap h1 {{
+    margin: 0 0 6px !important;
+    font-size: 26px !important;
+    font-weight: 800 !important;
+    letter-spacing: -0.3px !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
+  }}
+  div.sla-header-wrap p {{
+    margin: 0 !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+    opacity: 0.92 !important;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
+  }}
+</style>
+<div class="sla-header-wrap"
+     style="background:linear-gradient(135deg,#0D47A1 0%,#1565C0 50%,#1976D2 100%);
+            padding:28px 36px 22px;border-radius:0 0 16px 16px;
+            margin-bottom:24px;box-shadow:0 4px 20px rgba(13,71,161,0.25);">
+  <h1 style="margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-0.3px;
+             color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;
+             font-family:'Inter','Segoe UI',Arial,sans-serif;">
+    <font color="#ffffff">📊 Dashboard SLA — Acompanhamento de Tarefas</font>
+  </h1>
+  <p style="margin:0;font-size:13px;font-weight:400;opacity:0.92;
+            color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;
+            font-family:'Inter','Segoe UI',Arial,sans-serif;">
+    <font color="#ffffff">
+      Controlo SLA por tipo de tarefa &nbsp;·&nbsp; Distribuição por faixas de percentagem
+      &nbsp;·&nbsp; {N_TOTAL} registos &nbsp;·&nbsp; Referência: {DATA_REF}
+    </font>
+  </p>
+</div>
+"""
+
 with gr.Blocks(title="Dashboard SLA") as demo:
 
-    # ── Header — texto sempre branco via inline style ────────────────────────
-    gr.HTML(f"""
-    <div class="app-header" style="
-        background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%);
-        padding: 28px 36px 22px;
-        border-radius: 0 0 16px 16px;
-        margin-bottom: 24px;
-        box-shadow: 0 4px 20px rgba(13,71,161,0.25);
-    ">
-      <h1 style="margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-0.3px;
-                 color:#ffffff !important;font-family:'Inter','Segoe UI',Arial,sans-serif;">
-        📊 Dashboard SLA — Acompanhamento de Tarefas
-      </h1>
-      <p style="margin:0;font-size:13px;font-weight:400;
-                color:#ffffff !important;opacity:0.92;
-                font-family:'Inter','Segoe UI',Arial,sans-serif;">
-        Controlo SLA por tipo de tarefa &nbsp;·&nbsp; Distribuição por faixas de percentagem
-        &nbsp;·&nbsp; {N_TOTAL} registos &nbsp;·&nbsp; Referência: {DATA_REF}
-      </p>
-    </div>
-    """)
+    gr.HTML(HEADER_HTML)
 
     # ── Selector de categoria ────────────────────────────────────────────────
     with gr.Row():