Estrutura Organizacional - Clina.ai</title㹎 <style> :root { --primary: #667eea; --primary-dark: #5a67d8; --secondary: #764ba2; --bg-dark: #0a0f1c; --bg-card: #1e293b; --bg-sidebar: #0f172a; --border: #334155; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --success: #10b981; --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); --radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; } .header { background: var(--bg-sidebar); border-bottom: 1px solid var(--border); padding: 0 24px; position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 1000; display: flex; align-items: center; } .header-inner { width: 100%; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-icon { width: 40px; height: 40px; background: var(--gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .brand-text { display: flex; flex-direction: column; } .brand-title { font-size: 18px; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .brand-sub { font-size: 11px; color: var(--text-muted); } .nav-menu { display: flex; align-items: center; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 8px; transition: all 0.2s; position: relative; } .nav-item:hover { background: rgba(102, 126, 234, 0.1); color: var(--primary); } .nav-item.active { background: rgba(102, 126, 234, 0.15); color: var(--primary); } .nav-item.active::after { content: ''; position: absolute; bottom: -17px; left: 16px; right: 16px; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; } .user-info { display: flex; align-items: center; gap: 16px; } .badge { padding: 4px 12px; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 20px; font-size: 12px; color: #fbbf24; font-weight: 500; } .btn-logout { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: all 0.2s; } .btn-logout:hover { background: rgba(239, 68, 68, 0.1); color: #fca5a5; } .main { padding-top: 64px; } .page-header { background: var(--bg-sidebar); border-bottom: 1px solid var(--border); padding: 24px; } .page-header-inner { max-width: 1600px; margin: 0 auto; } .page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; } .page-subtitle { font-size: 14px; color: var(--text-secondary); } .container { max-width: 1600px; margin: 0 auto; padding: 24px; } .org-chart { display: flex; flex-direction: column; align-items: center; gap: 40px; } .level { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .node { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; min-width: 180px; position: relative; } .node.ceo { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border-color: var(--primary); } .node-avatar { width: 60px; height: 60px; background: var(--gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 12px; } .node-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .node-role { font-size: 13px; color: var(--text-muted); } .level-title { text-align: center; font-size: 14px; color: var(--text-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; } .squad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; } .squad-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .squad-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .squad-members { display: flex; flex-wrap: wrap; gap: 8px; } .member-tag { padding: 4px 10px; background: var(--bg-dark); border-radius: 20px; font-size: 12px; } @media (max-width: 768px) { .nav-menu { display: none; } .page-title { font-size: 22px; } .node { min-width: 140px; padding: 16px; } } </style> </head> <body> <header class="header"> <div class="header-inner"> <a href="/index.html" class="brand"> <div class="brand-icon">🚀</div> <div class="brand-text"> <span class="brand-title">Clina.ai</span> <span class="brand-sub">Command Center</span> </div> </a> <nav class="nav-menu"> <a href="/executive.html" class="nav-item">🎯 Executive</a> <a href="/dashboard.html" class="nav-item">📊 Dashboard</a> <a href="/analytics.html" class="nav-item">📈 Analytics</a> <a href="/support.html" class="nav-item">🎧 Suporte</a> <a href="/agents.html" class="nav-item">🤖 Agentes</a> <a href="/infrastructure.html" class="nav-item">🖥️ Infra</a> <a href="/chat.html" class="nav-item">💬 Nexus</a> </nav> <div class="user-info"> <span class="badge">🧪 Homologação</span> <button class="btn-logout" onclick="logout()">Sair</button> </div> </div> </header> <main class="main"> <div class="page-header"> <div class="page-header-inner"> <h1 class="page-title">🏢 Estrutura Organizacional</h1> <p class="page-subtitle">Organograma completo dos 54 agentes em 7 squads</p> </div> </div> <div class="container">  <div class="org-chart"> <div> <div class="level-title">CEO</div> <div class="level"> <div class="node ceo"> <div class="node-avatar">🚀</div> <div class="node-name">Nexus</div> <div class="node-role">CEO</div> </div> </div> </div> <div> <div class="level-title">C-Level</div> <div class="level"> <div class="node"> <div class="node-avatar">📢</div> <div class="node-name">Vera</div> <div class="node-role">CMO</div> </div> <div class="node"> <div class="node-avatar">💻</div> <div class="node-name">Carlos</div> <div class="node-role">CTO</div> </div> <div class="node"> <div class="node-avatar">💰</div> <div class="node-name">Sefou</div> <div class="node-role">CFO</div> </div> <div class="node"> <div class="node-avatar">⚙️</div> <div class="node-name">Marina</div> <div class="node-role">COO</div> </div> </div> </div> <div> <div class="level-title">VP e Diretores</div> <div class="level"> <div class="node"> <div class="node-avatar">🤝</div> <div class="node-name">Roberto</div> <div class="node-role">VP Sales</div> </div> <div class="node"> <div class="node-avatar">⚖️</div> <div class="node-name">Dra. Jurídico</div> <div class="node-role">Legal</div> </div> </div> </div> </div>  <div class="squad-grid"> <div class="squad-card"> <div class="squad-title">📈 Growth (11 agentes)</div> <div class="squad-members"> <span class="member-tag">Leo</span> <span class="member-tag">Julia</span> <span class="member-tag">Lucas</span> <span class="member-tag">SeoBot</span> <span class="member-tag">+7</span> </div> </div> <div class="squad-card"> <div class="squad-title">💼 Sales (10 agentes)</div> <div class="squad-members"> <span class="member-tag">Pedro SDR</span> <span class="member-tag">Ana SDR</span> <span class="member-tag">Diego AE</span> <span class="member-tag">+7</span> </div> </div> <div class="squad-card"> <div class="squad-title">💻 Tech (10 agentes)</div> <div class="squad-members"> <span class="member-tag">Bruno N2</span> <span class="member-tag">QABot</span> <span class="member-tag">DevBot</span> <span class="member-tag">+7</span> </div> </div> <div class="squad-card"> <div class="squad-title">🎧 CS (10 agentes)</div> <div class="squad-members"> <span class="member-tag">Carla</span> <span class="member-tag">CSBot</span> <span class="member-tag">DocBot</span> <span class="member-tag">+7</span> </div> </div> <div class="squad-card"> <div class="squad-title">📊 Data (4 agentes)</div> <div class="squad-members"> <span class="member-tag">DataBot</span> <span class="member-tag">MLBot</span> <span class="member-tag">+2</span> </div> </div> <div class="squad-card"> <div class="squad-title">⚖️ Legal (2 agentes)</div> <div class="squad-members"> <span class="member-tag">ComplianceBot</span> <span class="member-tag">PrivBot</span> </div> </div> </div> </div> </main> <script> function logout() { fetch('/api/auth/logout', { method: 'POST' }) .then(() => window.location.href = '/login.html') .catch(() => window.location.href = '/login.html'); } </script> </body> </html>