feat: Melhorias visuais no header e suporte a ngrok

- Melhora estilo do box de metadados (contraste e legibilidade)
- Formata total de consultores com separador de milhares
- Adiciona allowedHosts para acesso via ngrok

frontend/src/components/Header.css

@@ -41,12 +41,14 @@
   align-items: center;
   gap: 0.5rem;
   margin-top: 0.6rem;
-  padding: 0.4rem 0.75rem;
+  padding: 0.45rem 0.85rem;
-  background: rgba(255,255,255,0.08);
+  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid var(--stroke);
+  border: 1px solid rgba(255,255,255,0.28);
   border-radius: 999px;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
-  color: var(--muted);
+  font-weight: 600;
+  color: #f4f7ff;
+  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
 }
 
 .criteria-box {

frontend/src/components/Header.jsx

@@ -3,6 +3,9 @@ import './Header.css';
 
 const Header = ({ total }) => {
   const dataGeracao = new Date().toLocaleDateString('pt-BR');
+  const totalFormatado = new Intl.NumberFormat('pt-BR', {
+    maximumFractionDigits: 0,
+  }).format(Number(total) || 0);
 
   return (
     <header className="header">
@@ -13,7 +16,7 @@ const Header = ({ total }) => {
           4 Componentes: Coordenação CAPES + PPG + Consultoria + Premiações
         </p>
         <div className="meta">
-          Gerado em {dataGeracao} | Total: {total} consultores
+          Gerado em {dataGeracao} | Total: {totalFormatado} consultores
         </div>
 
         <div className="criteria-box">

frontend/vite.config.js

@@ -1,11 +1,12 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
   server: {
     host: '0.0.0.0',
     port: 5173,
+    allowedHosts: ['.ngrok-free.app', 'localhost', '127.0.0.1'],
     proxy: {
       '/api': {
         target: 'http://backend:8000',
@@ -13,4 +14,4 @@ export default defineConfig({
       },
     },
   },
-})
+});