From ae8a675e52f366e6b746bef0ad111f7231ca7b0b Mon Sep 17 00:00:00 2001
From: root <root@devAI.cassel>
Date: Sun, 8 Feb 2026 13:59:30 -0500
Subject: [PATCH] fix: ajusta UI do header - logo com fundo branco e
 alinhamento

- Adiciona fundo branco com bordas arredondadas na logo
- Header content alinhado com body (max-width: 1600px)
- Adiciona wrapper header-inner para controle de largura

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/ui-template.js | 50 +++++++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/ui-template.js b/src/ui-template.js
index e059071..9e1a7ff 100644
--- a/src/ui-template.js
+++ b/src/ui-template.js
@@ -45,11 +45,6 @@ const headerCSS = `
   .app-header {
     background: linear-gradient(135deg, var(--header-color) 0%, var(--header-dark) 100%);
     color: white;
-    padding: 0 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 64px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
   .app-header.admin {
@@ -60,6 +55,15 @@ const headerCSS = `
     --header-color: var(--primary);
     --header-dark: var(--primary-dark);
   }
+  .header-inner {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+  }
 
   .header-brand {
     display: flex;
@@ -69,6 +73,9 @@ const headerCSS = `
   .header-brand .logo {
     height: 36px;
     width: auto;
+    background: white;
+    padding: 6px 12px;
+    border-radius: 8px;
   }
   .header-brand .app-name {
     display: flex;
@@ -187,12 +194,11 @@ const headerCSS = `
 
   /* Responsive */
   @media (max-width: 768px) {
-    .app-header {
-      padding: 0 20px;
+    .header-inner {
+      padding: 16px 20px;
       height: auto;
       flex-direction: column;
       gap: 12px;
-      padding: 16px 20px;
     }
     .header-nav {
       width: 100%;
@@ -247,21 +253,23 @@ function buildHeader(options = {}) {
 
   return `
     <header class="app-header ${headerClass}">
-      <div class="header-brand">
-        <img src="/public/logo.png" alt="CambioReal" class="logo">
-        <div class="app-name">
-          <span class="app-name-badge">BI - CCC</span>
-          <span class="app-subtitle">Central Command Center</span>
+      <div class="header-inner">
+        <div class="header-brand">
+          <img src="/public/logo.png" alt="CambioReal" class="logo">
+          <div class="app-name">
+            <span class="app-name-badge">BI - CCC</span>
+            <span class="app-subtitle">Central Command Center</span>
+          </div>
         </div>
-      </div>
-      ${showNav ? (isAdmin ? adminNav : agentNav) : ''}
-      <div class="header-user">
-        <div class="user-info">
-          <span class="user-avatar">${initials}</span>
-          <span>${userName}</span>
-          <span class="user-role">${isAdmin ? 'Admin' : 'Agente'}</span>
+        ${showNav ? (isAdmin ? adminNav : agentNav) : ''}
+        <div class="header-user">
+          <div class="user-info">
+            <span class="user-avatar">${initials}</span>
+            <span>${userName}</span>
+            <span class="user-role">${isAdmin ? 'Admin' : 'Agente'}</span>
+          </div>
+          <a href="/logout" class="btn-logout">Sair</a>
         </div>
-        <a href="/logout" class="btn-logout">Sair</a>
       </div>
     </header>
   `;