From 327911c81bac688da9ade6765cbe367922724a99 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Tue, 26 May 2026 21:20:40 +0200
Subject: [PATCH] style: compactacao de layout e espacos verticais no
 dashboard, conexoes e clinicas

---
 dental-server/public/admin-clinics.css  |  6 +--
 dental-server/public/admin-clinics.html | 47 +++++++-----------------
 dental-server/public/clients.html       | 49 +++++++++++++------------
 dental-server/public/index.html         | 28 ++++++--------
 dental-server/public/style.css          |  4 +-
 5 files changed, 54 insertions(+), 80 deletions(-)

diff --git a/dental-server/public/admin-clinics.css b/dental-server/public/admin-clinics.css
index f827c71..a8a00da 100644
--- a/dental-server/public/admin-clinics.css
+++ b/dental-server/public/admin-clinics.css
@@ -177,7 +177,7 @@ body {
 /* Main Content */
 .main-content {
   flex: 1;
-  padding: 32px 40px;
+  padding: 20px 24px;
   overflow-y: auto;
 }
 
@@ -185,7 +185,7 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
   animation: fadeIn 0.5s ease-out;
 }
 
@@ -335,7 +335,7 @@ body {
 }
 
 .modern-table td {
-  padding: 16px;
+  padding: 10px 16px;
   background: rgba(255, 255, 255, 0.02);
 }
 
diff --git a/dental-server/public/admin-clinics.html b/dental-server/public/admin-clinics.html
index 0348bd5..6600624 100644
--- a/dental-server/public/admin-clinics.html
+++ b/dental-server/public/admin-clinics.html
@@ -38,7 +38,7 @@
       <div class="logo-icon">
         <i class="fa-solid fa-tooth"></i>
       </div>
-      <h2>RF Dental</h2>
+      <h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
     </div>
     
     <nav class="sidebar-nav">
@@ -83,7 +83,6 @@
       <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
         <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
       </button>
-      <div class="system-version">v2.1.0</div>
     </div>
   </aside>
 
@@ -92,8 +91,18 @@
     
     <header class="top-header">
       <div class="header-title">
-        <h1>Dispositivos e Clínicas</h1>
-        <p>Gerencie o acesso do Aplicativo Desktop aos computadores das clínicas.</p>
+        <h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0;">
+          Dispositivos e Clínicas
+          <span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary); font-weight: 600;">
+            Total: <span id="totalDevices">0</span>
+          </span>
+          <span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
+            Ativos: <span id="activeDevices">0</span>
+          </span>
+          <span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(239, 68, 68, 0.15); color: var(--danger); font-weight: 600;">
+            Bloqueados: <span id="blockedDevices">0</span>
+          </span>
+        </h1>
       </div>
       <div class="header-actions">
         <button id="addClinicBtn" class="primary-btn pulse-animation">
@@ -102,36 +111,6 @@
       </div>
     </header>
 
-    <div class="dashboard-stats">
-      <div class="stat-card glass-card">
-        <div class="stat-icon bg-blue">
-          <i class="fa-solid fa-desktop"></i>
-        </div>
-        <div class="stat-info">
-          <h3>Total de Dispositivos</h3>
-          <p id="totalDevices">0</p>
-        </div>
-      </div>
-      <div class="stat-card glass-card">
-        <div class="stat-icon bg-green">
-          <i class="fa-solid fa-check-circle"></i>
-        </div>
-        <div class="stat-info">
-          <h3>Ativos</h3>
-          <p id="activeDevices">0</p>
-        </div>
-      </div>
-      <div class="stat-card glass-card">
-        <div class="stat-icon bg-red">
-          <i class="fa-solid fa-ban"></i>
-        </div>
-        <div class="stat-info">
-          <h3>Bloqueados</h3>
-          <p id="blockedDevices">0</p>
-        </div>
-      </div>
-    </div>
-
     <section class="data-section glass-card">
       <div class="table-container">
         <table class="modern-table">
diff --git a/dental-server/public/clients.html b/dental-server/public/clients.html
index 94a8f13..8bb9c8b 100644
--- a/dental-server/public/clients.html
+++ b/dental-server/public/clients.html
@@ -191,7 +191,6 @@
             });
         }
     </script>
-</head>
 <body class="app-container">
     <!-- Sidebar -->
     <aside class="sidebar">
@@ -199,7 +198,7 @@
             <div class="logo-icon">
                 <i class="fa-solid fa-tooth"></i>
             </div>
-            <h2>RF Dental</h2>
+            <h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
         </div>
         
         <nav class="sidebar-nav">
@@ -244,7 +243,6 @@
             <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
                 <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
             </button>
-            <div class="system-version">v2.1.0</div>
         </div>
     </aside>
 
@@ -252,30 +250,33 @@
         <div class="clients-container">
             <div class="clients-header">
                 <div>
-                    <h1>🖥️ Clientes Conectados</h1>
-                <p style="color: var(--text-secondary); margin-top: 5px; font-size: 1rem; font-weight: 500;">Monitoramento em tempo real dos clientes Socket.IO</p>
-            </div>
-            <div class="header-actions">
-                <a href="/" class="btn btn-secondary">← Voltar</a>
-                <button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
-                <button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
-            </div>
-        </div>
-        
-        <div class="stats" id="stats">
-            <!-- Stats serão carregados aqui -->
-        </div>
-        
-        <div class="clients-list-card">
-            <div id="clientsList">
-                <div class="empty-state">
-                    <div class="spinner" style="margin: 0 auto 16px auto;"></div>
-                    Carregando...
+                    <h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+                        🖥️ Clientes Conectados
+                        <span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary-color); font-weight: 600;">
+                            Conexões: <span id="stat-total">0</span>
+                        </span>
+                        <span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success-color); font-weight: 600;">
+                            Identificados: <span id="stat-identified">0</span>
+                        </span>
+                    </h1>
+                </div>
+                <div class="header-actions">
+                    <a href="/" class="btn btn-secondary">← Voltar</a>
+                    <button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
+                    <button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
                 </div>
             </div>
-            <div class="timestamp" id="timestamp"></div>
+            
+            <div class="clients-list-card" style="margin-top: 24px;">
+                <div id="clientsList">
+                    <div class="empty-state">
+                        <div class="spinner" style="margin: 0 auto 16px auto;"></div>
+                        Carregando...
+                    </div>
+                </div>
+                <div class="timestamp" id="timestamp"></div>
+            </div>
         </div>
-    </div>
     
     <script src="/socket.io/socket.io.js"></script>
     <script>
diff --git a/dental-server/public/index.html b/dental-server/public/index.html
index ad4dfa7..44bb86d 100644
--- a/dental-server/public/index.html
+++ b/dental-server/public/index.html
@@ -17,7 +17,7 @@
                 <div class="logo-icon">
                     <i class="fa-solid fa-tooth"></i>
                 </div>
-                <h2>RF Dental</h2>
+                <h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
             </div>
             
             <nav class="sidebar-nav">
@@ -62,7 +62,6 @@
                 <button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
                     <i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
                 </button>
-                <div class="system-version">v2.1.0</div>
             </div>
         </aside>
 
@@ -78,13 +77,22 @@
                         <h1 id="mainTitle">Galeria de Imagens</h1>
                     </div>
                     <div class="header-actions">
+                        <!-- Filtro de Clientes -->
+                        <select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 180px; cursor: pointer; height: 42px;">
+                            <option value="">📋 Todos os Clientes</option>
+                        </select>
+                        <!-- Mostrar Ocultas -->
+                        <button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); height: 42px;">
+                            👁️ <span id="toggleText">Ocultas</span>
+                        </button>
                         <input
                             type="search"
                             id="searchInput"
                             class="search-input"
                             placeholder="🔍 Pesquisar paciente..."
+                            style="height: 42px; min-width: 200px;"
                         >
-                        <button class="btn btn-secondary" onclick="loadClientsList()">
+                        <button class="btn btn-secondary" onclick="loadClientsList()" style="height: 42px; display: flex; align-items: center; justify-content: center; padding: 10px 16px;">
                             <span class="icon">🔄</span>
                         </button>
                     </div>
@@ -101,20 +109,6 @@
 
         <!-- Scrollable content area -->
         <div class="content-scroll">
-            
-            <!-- Toolbar de Filtros e Ações Rápidas -->
-            <div class="toolbar glass-card" style="margin-bottom: 24px; padding: 16px; display: flex; gap: 16px; align-items: center; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: var(--shadow-sm);">
-                <div class="toolbar-left" style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-                    <!-- Filtro de Clientes -->
-                    <select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 200px; cursor: pointer;">
-                        <option value="">📋 Todos os Clientes</option>
-                    </select>
-                    <!-- Mostrar Ocultas -->
-                    <button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);">
-                        👁️ <span id="toggleText">Ocultas</span>
-                    </button>
-                </div>
-            </div>
 
             <!-- Loading State -->
             <div id="loadingState" class="loading">
diff --git a/dental-server/public/style.css b/dental-server/public/style.css
index 4358b34..3ed14b5 100644
--- a/dental-server/public/style.css
+++ b/dental-server/public/style.css
@@ -244,7 +244,7 @@ body {
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border-bottom: 1px solid var(--glass-border);
-    padding: 16px 32px;
+    padding: 10px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -297,7 +297,7 @@ body {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 32px;
+    padding: 20px;
 }
 
 /* ================================================================