@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ========================================================================== Design Tokens & Themes ("Datagente" Premium Enterprise Design System) ========================================================================== */ /* ⚠️ :root NEUTRO — 07/09/2026 (bug real, print do Pedro: a tela do Balancete "muito transparente", com os botões da sidebar em branco sobre branco). O seletor de tema tem TRÊS estados: "Claro" e "Escuro" carimbam data-theme no , e "Auto" (o PADRÃO) REMOVE o atributo. Este arquivo definia as 51 variáveis SÓ dentro de [data-theme="dark"] e [data-theme="light"] — então, em Auto, nenhuma delas existia: o `linear-gradient(var(--violet)…)` do .btn-primary virava declaração inválida, o fundo sumia e sobrava o `color:#FFFFFF !important`, deixando texto branco sobre a sidebar branca. O mesmo valia para superfícies e bordas — daí a tela inteira parecer lavada. É exatamente a regra que o CLAUDE.md já registra: NUNCA dar a uma cor sua única definição dentro de um bloco de media ou [data-theme]. A paleta CLARA fica aqui como base (mesmo padrão do app.css), o @media abaixo cobre quem usa Auto com o sistema no escuro, e os blocos [data-theme] continuam vencendo quando o usuário escolhe explicitamente. Travado por tests/test_css_variaveis_definidas.py. */ :root { --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0; --surface-card: #FFFFFF; --border: #E2E8F0; --border-soft: #EEF2F6; --border-focus: #6366F1; --text: #0F172A; --text-muted: #384252; --text-dim: #64748B; --violet: #6366F1; --violet-hover: #4F46E5; --violet-bg: #EEF2FF; --teal: #059669; --teal-bg: #ECFDF5; --amber: #D97706; --amber-bg: #FFFBEB; --red: #DC2626; --red-bg: #FEF2F2; --green: #059669; --green-bg: #ECFDF5; --topbar-bg: rgba(248, 250, 252, 0.85); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(226, 232, 240, 0.8); --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 18px -2px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 36px -4px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 20px -4px rgba(99, 102, 241, 0.2); --surface-highlight: none; /* Aliases de compatibilidade */ --card-bg: var(--surface); --card: var(--surface); --muted: var(--text-muted); --chip-bg: var(--surface-2); --chip-text: var(--text); --chip-border: var(--border-soft); --tag-bg: var(--surface-2); --tag-text: var(--text-muted); --danger: var(--red); --danger-text: var(--red); --danger-bg: var(--red-bg); --ok-text: var(--green); --ok-bg: var(--green-bg); --navy: var(--violet); --gold: var(--amber); } /* Auto + sistema escuro: mesma paleta do [data-theme="dark"]. Sem isto, quem usa Auto no escuro veria a paleta clara. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #090D14; --surface: #101722; --surface-2: #16202E; --surface-3: #1E2B3E; --surface-card: #101722; --border: #233147; --border-soft: #182333; --border-focus: #8B5CF6; --text: #F1F5F9; --text-muted: #94A3B8; --text-dim: #64748B; --violet: #8B5CF6; --violet-hover: #7C3AED; --violet-bg: rgba(139, 92, 246, 0.14); --teal: #10B981; --teal-bg: rgba(16, 185, 129, 0.14); --amber: #F59E0B; --amber-bg: rgba(245, 158, 11, 0.14); --red: #EF4444; --red-bg: rgba(239, 68, 68, 0.14); --green: #10B981; --green-bg: rgba(16, 185, 129, 0.14); --topbar-bg: rgba(9, 13, 20, 0.82); --glass-bg: rgba(16, 23, 34, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 20px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 36px -4px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px -4px rgba(139, 92, 246, 0.25); --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* Aliases de compatibilidade */ --card-bg: var(--surface); --card: var(--surface); --muted: var(--text-muted); --chip-bg: var(--surface-2); --chip-text: var(--text); --chip-border: var(--border-soft); --tag-bg: var(--surface-2); --tag-text: var(--text-muted); --danger: var(--red); --danger-text: var(--red); --danger-bg: var(--red-bg); --ok-text: var(--green); --ok-bg: var(--green-bg); --navy: var(--violet); --gold: var(--amber); } } /* DARK MODE (Slate Deep & Luminescent Accents) */ html[data-theme="dark"], :root[data-theme="dark"] { --bg: #090D14; --surface: #101722; --surface-2: #16202E; --surface-3: #1E2B3E; --surface-card: #101722; --border: #233147; --border-soft: #182333; --border-focus: #8B5CF6; --text: #F1F5F9; --text-muted: #94A3B8; --text-dim: #64748B; --violet: #8B5CF6; --violet-hover: #7C3AED; --violet-bg: rgba(139, 92, 246, 0.14); --teal: #10B981; --teal-bg: rgba(16, 185, 129, 0.14); --amber: #F59E0B; --amber-bg: rgba(245, 158, 11, 0.14); --red: #EF4444; --red-bg: rgba(239, 68, 68, 0.14); --green: #10B981; --green-bg: rgba(16, 185, 129, 0.14); --topbar-bg: rgba(9, 13, 20, 0.82); --glass-bg: rgba(16, 23, 34, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 20px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 36px -4px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px -4px rgba(139, 92, 246, 0.25); --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* Aliases de compatibilidade */ --card-bg: var(--surface); --card: var(--surface); --muted: var(--text-muted); --chip-bg: var(--surface-2); --chip-text: var(--text); --chip-border: var(--border-soft); --tag-bg: var(--surface-2); --tag-text: var(--text-muted); --danger: var(--red); --danger-text: var(--red); --danger-bg: var(--red-bg); --ok-text: var(--green); --ok-bg: var(--green-bg); --navy: var(--violet); --gold: var(--amber); } /* LIGHT MODE (SaaS Platinum & Vibrant Accents) */ html[data-theme="light"], :root[data-theme="light"] { --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0; --surface-card: #FFFFFF; --border: #E2E8F0; --border-soft: #EEF2F6; --border-focus: #6366F1; --text: #0F172A; --text-muted: #384252; --text-dim: #64748B; --violet: #6366F1; --violet-hover: #4F46E5; --violet-bg: #EEF2FF; --teal: #059669; --teal-bg: #ECFDF5; --amber: #D97706; --amber-bg: #FFFBEB; --red: #DC2626; --red-bg: #FEF2F2; --green: #059669; --green-bg: #ECFDF5; --topbar-bg: rgba(248, 250, 252, 0.85); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(226, 232, 240, 0.8); --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 18px -2px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 36px -4px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 20px -4px rgba(99, 102, 241, 0.2); --surface-highlight: none; /* Aliases de compatibilidade */ --card-bg: var(--surface); --card: var(--surface); --muted: var(--text-muted); --chip-bg: var(--surface-2); --chip-text: var(--text); --chip-border: var(--border-soft); --tag-bg: var(--surface-2); --tag-text: var(--text-muted); --danger: var(--red); --danger-text: var(--red); --danger-bg: var(--red-bg); --ok-text: var(--green); --ok-bg: var(--green-bg); --navy: var(--violet); --gold: var(--amber); } /* ============ Light Mode Contrast Fixes ============ */ html[data-theme="light"] .card, :root[data-theme="light"] .card { border-color: #D5DCE6; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07); } html[data-theme="light"] .card:hover, :root[data-theme="light"] .card:hover { border-color: #B0BCCF; } html[data-theme="light"] .btn-ghost, :root[data-theme="light"] .btn-ghost { border-color: #CBD5E1; background: #F8FAFC; color: #334155; } html[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .btn-ghost:hover { background: #E2E8F0; border-color: #94A3B8; } html[data-theme="light"] .btn-secondary, :root[data-theme="light"] .btn-secondary { border-color: #CBD5E1; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .segmented-control, :root[data-theme="light"] .segmented-control { background: #E2E8F0; border-color: #CBD5E1; } html[data-theme="light"] .segmented-item, :root[data-theme="light"] .segmented-item { color: #475569; } html[data-theme="light"] .segmented-item.active, :root[data-theme="light"] .segmented-item.active { background: #FFFFFF; border-color: #CBD5E1; color: #0F172A; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); } html[data-theme="light"] .view-mode-tabs, :root[data-theme="light"] .view-mode-tabs { background: #E2E8F0 !important; border-color: #CBD5E1 !important; } html[data-theme="light"] .theme-opt, :root[data-theme="light"] .theme-opt, html[data-theme="light"] .theme-btn, :root[data-theme="light"] .theme-btn { color: #475569 !important; } html[data-theme="light"] .theme-opt.active, :root[data-theme="light"] .theme-opt.active, html[data-theme="light"] .theme-btn.active, :root[data-theme="light"] .theme-btn.active { background: #FFFFFF !important; border-color: #CBD5E1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important; font-weight: 700; } /* Barras de filtro opacas sem sangramento ou borrões */ html[data-theme="light"] .bi-filter-bar, html[data-theme="light"] .cm-filter-bar, html[data-theme="light"] .bal-filter-bar, html[data-theme="light"] .reg-filter-bar, :root[data-theme="light"] .bi-filter-bar, :root[data-theme="light"] .cm-filter-bar, :root[data-theme="light"] .bal-filter-bar, :root[data-theme="light"] .reg-filter-bar { border-color: #CBD5E1 !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .bi-select, html[data-theme="light"] .cm-select, html[data-theme="light"] .bal-select, html[data-theme="light"] .reg-select, :root[data-theme="light"] .bi-select, :root[data-theme="light"] .cm-select, :root[data-theme="light"] .bal-select, :root[data-theme="light"] .reg-select { border-color: #CBD5E1 !important; background: #FFFFFF !important; color: #0F172A !important; font-weight: 500; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } html[data-theme="light"] .side-actions .btn-primary, :root[data-theme="light"] .side-actions .btn-primary { background: #4F46E5 !important; color: #FFFFFF !important; border: 1px solid #4338CA !important; box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important; } html[data-theme="light"] .side-actions .btn-primary:hover, :root[data-theme="light"] .side-actions .btn-primary:hover { background: #4338CA !important; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35) !important; } html[data-theme="light"] .meta-gauge-track, :root[data-theme="light"] .meta-gauge-track { background: #CBD5E1 !important; border: 1px solid #94A3B8; height: 8px; } html[data-theme="light"] .meta-gauge-fill-time, :root[data-theme="light"] .meta-gauge-fill-time { background: #818CF8 !important; opacity: 0.55 !important; } html[data-theme="light"] .meta-gauge-fill-real, :root[data-theme="light"] .meta-gauge-fill-real { background: linear-gradient(90deg, #059669 0%, #10B981 100%) !important; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.35) !important; } html[data-theme="light"] .meta-gauge-marker, :root[data-theme="light"] .meta-gauge-marker { background: #0F172A !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important; } html[data-theme="light"] th, :root[data-theme="light"] th { border-bottom-color: #CBD5E1; } html[data-theme="light"] .role-note, :root[data-theme="light"] .role-note { border-color: #CBD5E1; } html[data-theme="light"] .tb-sync-badge, :root[data-theme="light"] .tb-sync-badge { border-color: #CBD5E1; } html[data-theme="light"] .bell, :root[data-theme="light"] .bell { border-color: #CBD5E1; } /* ========================================================================== Base Resets & Typography ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; min-height: 100vh; transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } a { color: inherit; text-decoration: none; } button { font-family: 'Inter', sans-serif; cursor: pointer; } input[type="checkbox"] { accent-color: var(--violet); width: 15px; height: 15px; cursor: pointer; } ::selection { background: var(--violet); color: #FFFFFF; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } /* ========================================================================== Sidebar (Menu Lateral) ========================================================================== */ .sidebar { width: 280px; flex-shrink: 0; background: var(--surface) !important; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; height: 100vh; max-height: 100vh; position: sticky; top: 0; z-index: 50; overflow: hidden; padding: 0 !important; transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--surface-highlight); } .sidebar :focus-visible { outline-color: var(--teal); } .sidebar-toggle-btn { position: absolute; top: 18px; right: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); z-index: 101; padding: 0; transition: all 0.15s ease; } .sidebar-toggle-btn:hover { color: var(--text); border-color: var(--violet); transform: scale(1.08); } .sidebar-toggle-btn svg { transition: transform 0.2s ease; } html.sidebar-collapsed .sidebar-toggle-btn svg { transform: scaleX(-1); } /* Estado recolhido (Collapsed) */ html.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed, 68px); padding-left: 6px; padding-right: 6px; } html.sidebar-collapsed .side-brand { padding: 12px 4px; } html.sidebar-collapsed .side-brand .brand-logo { width: 34px; height: 34px; margin-bottom: 0; } html.sidebar-collapsed .side-brand .brand-title, html.sidebar-collapsed .side-brand .brand-sub { display: none; } html.sidebar-collapsed .sb-group-label { display: none; } html.sidebar-collapsed .sidebar .side-nav a, html.sidebar-collapsed .sidebar .side-nav a.sb-item { width: 44px; height: 44px; padding: 0; justify-content: center; margin: 4px auto; border-radius: 10px; } html.sidebar-collapsed .sidebar .side-nav a .nav-label { display: none; } html.sidebar-collapsed .side-actions { display: none; } html.sidebar-collapsed .side-user .who { display: none; } html.sidebar-collapsed .side-user .r span { display: none; } html.sidebar-collapsed .side-user { padding: 10px 4px; justify-content: center; } html.sidebar-collapsed .theme-switcher { flex-direction: column; gap: 4px; margin: 4px 6px; } html.sidebar-collapsed .theme-switcher .theme-btn { padding: 6px 0; } html.sidebar-collapsed .theme-switcher .theme-btn .nav-label { display: none; } /* Tooltip flutuante no modo recolhido */ html.sidebar-collapsed .sidebar .side-nav a[title]::after { content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-md); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } html.sidebar-collapsed .sidebar .side-nav a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } .side-brand, .sb-logo { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border-soft); text-decoration: none; position: relative; } .side-brand .brand-logo, .sb-logo .mark { width: 44px; height: 44px; display: block; transition: all 0.15s ease; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } .side-brand:hover .brand-logo { transform: scale(1.04); } .side-brand .brand-title, .sb-logo .name { color: var(--text) !important; font-family: 'Space Grotesk', -apple-system, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; } .side-brand .brand-title .gold { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .side-brand .brand-sub { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-dim) !important; } .sidebar .side-nav, .sb-nav { flex: 1 1 0px !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px 16px !important; margin: 0 !important; scrollbar-width: thin; scrollbar-color: var(--border-soft) transparent; } .sidebar .side-nav::-webkit-scrollbar, .sb-nav::-webkit-scrollbar { width: 5px; } .sidebar .side-nav::-webkit-scrollbar-track, .sb-nav::-webkit-scrollbar-track { background: transparent; } .sidebar .side-nav::-webkit-scrollbar-thumb, .sb-nav::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; } .sidebar .side-nav::-webkit-scrollbar-thumb:hover, .sb-nav::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } .sb-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim) !important; padding: 14px 10px 4px; } .sidebar .side-nav a, .sidebar .side-nav a.sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--text-muted) !important; font-size: 13.5px; font-weight: 500; margin-bottom: 3px; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent !important; background: transparent !important; text-decoration: none; position: relative; } .sidebar .side-nav a svg, .sidebar .side-nav a.sb-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-dim); transition: color 0.15s ease, transform 0.15s ease; } .sidebar .side-nav a:hover, .sidebar .side-nav a.sb-item:hover { background: var(--surface-2) !important; color: var(--text) !important; transform: translateX(2px); } .sidebar .side-nav a:hover svg, .sidebar .side-nav a.sb-item:hover svg { color: var(--violet); } .sidebar .side-nav a.active, .sidebar .side-nav a.nav-active, .sidebar .side-nav a.sb-item.active, .sidebar .side-nav a.sb-item.nav-active { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-soft) !important; font-weight: 600; box-shadow: var(--shadow-xs); } .sidebar .side-nav a.active::before, .sidebar .side-nav a.nav-active::before, .sidebar .side-nav a.sb-item.active::before, .sidebar .side-nav a.sb-item.nav-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3.5px; border-radius: 4px; background: var(--violet); } .sidebar .side-nav a.active svg, .sidebar .side-nav a.nav-active svg, .sidebar .side-nav a.sb-item.active svg, .sidebar .side-nav a.sb-item.nav-active svg { color: var(--violet) !important; } /* Theme Switcher no Rodapé */ .theme-switch, .theme-switcher { display: flex; gap: 3px; margin: 6px 14px 10px; background: var(--surface-2) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius); padding: 3px; } .theme-opt, .theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; background: transparent !important; border: 1px solid transparent !important; border-radius: 6px; color: var(--text-muted) !important; font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.12s ease; } .theme-opt svg, .theme-btn svg { width: 13px; height: 13px; } .theme-opt:hover, .theme-btn:hover { color: var(--text) !important; } .theme-opt.active, .theme-btn.active { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-xs) !important; font-weight: 700; } .theme-opt.active svg, .theme-btn.active svg { color: var(--violet) !important; } /* Rodapé Fixo da Sidebar (sb-footer-area) */ .sb-footer-area { flex-shrink: 0 !important; margin-top: auto !important; background: var(--surface) !important; border-top: 1px solid var(--border-soft) !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04); z-index: 20 !important; position: relative; width: 100%; } .side-actions { padding: 10px 14px 6px !important; background: var(--surface) !important; } .side-actions .btn { width: 100% !important; text-align: center; font-weight: 600; display: block; } .side-actions .btn-primary { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25) !important; } .side-actions a { display: block; margin-top: 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-dim) !important; text-decoration: none; transition: color 0.15s ease; } .side-actions a:hover { color: var(--violet) !important; } .side-user, .sb-footer { padding: 10px 14px 12px !important; border-top: 1px solid var(--border-soft) !important; font-size: 12.5px; background: var(--surface) !important; } .side-user .who, .sb-footer .u { font-weight: 600; font-size: 12px; color: var(--text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-user .r, .sb-footer .r { color: var(--text-dim) !important; display: flex; align-items: center; justify-content: space-between; margin-top: 3px; font-size: 11.5px; } .side-user a, .sb-footer .logout-link { color: var(--red) !important; font-weight: 600; text-decoration: none; transition: opacity 0.15s ease; } .side-user a:hover, .sb-footer .logout-link:hover { opacity: 0.8; text-decoration: underline; } /* ========================================================================== Main & Command Header (Topbar) ========================================================================== */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 64px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--topbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 15; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } .tb-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; } /* Badges Executivos do Header */ .tb-sync-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); padding: 4px 10px; border-radius: 100px; } @keyframes pulse-dot { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .pulse-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #10B981; animation: pulse-dot 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1); } .tb-right { display: flex; align-items: center; gap: 12px; } /* Sino Interativo de Alertas */ .bell { position: relative; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); transition: all 0.15s ease; cursor: pointer; } .bell:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .bell svg { width: 17px; height: 17px; } .bell .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--surface); } /* Popover do Sino de Alertas */ .popover-container { position: relative; } .popover-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 150; padding: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .popover-panel.show { display: block; animation: popoverFade 0.16s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes popoverFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .popover-head h4 { font-size: 13px; margin: 0; font-weight: 700; color: var(--text); } .notif-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--surface-2); margin-bottom: 8px; font-size: 12.5px; border: 1px solid var(--border-soft); } .notif-item:last-child { margin-bottom: 0; } .notif-icon { flex-shrink: 0; margin-top: 2px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--violet-bg); color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; border: 1px solid var(--border-soft); box-shadow: var(--shadow-xs); } .btn-mobile-nav { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); cursor: pointer; } /* ========================================================================== Content Area & Cockpit Layout ========================================================================== */ .content { padding: 28px 32px 64px; max-width: 1440px; width: 100%; margin: 0 auto; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: 24px; margin-bottom: 6px; letter-spacing: -0.02em; } .page-head p { color: var(--text-muted); font-size: 13.5px; max-width: 720px; } .role-note { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 100px; padding: 5px 12px; margin-top: 10px; } .role-note .d { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } /* ========================================================================== Grids & Cards (Layered Elevation & Ambient Occlusion) ========================================================================== */ .grid { display: grid; gap: 18px; } .g4 { grid-template-columns: repeat(4, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g2 { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); position: relative; transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; box-shadow: var(--surface-highlight), var(--shadow-sm); } .card h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .card h3 .sub { font-size: 12px; color: var(--text-muted); font-weight: 500; font-family: 'Inter', sans-serif; } /* KPI Cards com Acabamento Executivo */ .kpi { padding: 20px 22px; border-radius: var(--radius-lg); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background 0.2s ease; } .kpi:hover::before { background: var(--violet); } .kpi.clickable:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: var(--shadow-md); } .kpi .lbl { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.04em; } .kpi .lbl svg { width: 17px; height: 17px; color: var(--text-dim); } .kpi .num { font-family: 'Space Grotesk', -apple-system, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; } .kpi .delta { font-size: 11.5px; font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 6px; } .up { color: var(--teal); } .down { color: var(--red); } .flat { color: var(--text-muted); } /* Régua Visual de Meta Biométrica */ .meta-gauge-track { background: var(--surface-3); height: 7px; border-radius: 99px; overflow: visible; position: relative; margin: 8px 0 4px; } .meta-gauge-fill-time { height: 100%; background: var(--violet); opacity: 0.35; border-radius: 99px; position: absolute; left: 0; top: 0; } .meta-gauge-fill-real { height: 100%; background: linear-gradient(90deg, var(--teal) 0%, #34D399 100%); border-radius: 99px; position: absolute; left: 0; top: 0; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); } .meta-gauge-marker { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--text); border-radius: 2px; transform: translateX(-50%); z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* ========================================================================== Tabelas & Tree-Guides (Árvore Negócio / Unidade) ========================================================================== */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--text); font-weight: 600; font-size: 11.5px; padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; letter-spacing: 0.04em; background: var(--surface); } td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; } tr:last-child td { border-bottom: none; } td.strong { color: var(--text); font-weight: 600; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } tr.clickable { cursor: pointer; transition: background 0.12s ease; } tr.clickable:hover td { color: var(--text); background: var(--surface-2); } /* Guias Visuais Conectoras de Árvore (Tree Guides) */ #table-tree-negocios th, #table-tree-negocios td { padding: 8px 8px; } .unit-count-tag { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; padding: 0 5px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-soft); margin-left: 5px; vertical-align: middle; } tr.row-negocio { border-top: 1px solid var(--border); background: var(--surface); user-select: none; } tr.row-negocio td { padding: 9px 8px; font-weight: 600; } tr.row-negocio .negocio-toggle-chevron { display: inline-block; width: 14px; font-size: 10px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-dim); } tr.row-negocio.expanded .negocio-toggle-chevron { transform: rotate(90deg); color: var(--violet); } tr.row-unidade { display: none; background: var(--surface-2); } tr.row-unidade.is-open { display: table-row !important; } tr.row-unidade td.unit-name-cell { position: relative; padding-left: 36px !important; font-size: 12.5px; } .tree-branch-guide { position: absolute; left: 18px; top: 0; bottom: 50%; width: 10px; border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); border-bottom-left-radius: 4px; } /* Células Numéricas com Tabular Nums */ .unit-num-cell { text-align: right; font-size: 12.5px; font-weight: 600; font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; } /* Bullet Chart Inline para % Meta */ .bullet-chart-inline { display: inline-flex; align-items: center; gap: 8px; min-width: 90px; justify-content: center; } .bullet-bar-track { width: 48px; height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; position: relative; } .bullet-bar-fill { height: 100%; border-radius: 99px; } .bullet-bar-fill.ok { background: linear-gradient(90deg, #10B981, #34D399); } .bullet-bar-fill.warn { background: linear-gradient(90deg, #F59E0B, #FBBF24); } .bullet-bar-fill.err { background: linear-gradient(90deg, #EF4444, #F87171); } /* ========================================================================== Badges, Pills & Buttons ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; } .badge.ok { background: var(--green-bg); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.2); } .badge.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.2); } .badge.err { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.2); } .badge.info { background: var(--violet-bg); color: var(--violet); border: 1px solid rgba(139, 92, 246, 0.2); } .badge.tealb { background: var(--teal-bg); color: var(--teal); } .badge.off { background: var(--surface-3); color: var(--text-dim); } .badge .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .status-ok, .pill-ok { color: var(--ok-text); background: var(--ok-bg); } .status-off, .pill-off { color: var(--text-dim); background: var(--surface-3); } .pill-error { color: var(--danger-text); background: var(--danger-bg); } .status-ok, .status-off { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11.5px; } .tag { font-size: 11.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-soft); padding: 3px 9px; border-radius: 100px; display: inline-block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; text-decoration: none; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-primary { background: linear-gradient(135deg, var(--violet) 0%, var(--violet-hover) 100%); color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25); } .btn-primary:hover { box-shadow: 0 4px 14px rgba(139, 92, 246, 0.38); opacity: 0.96; } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-muted); } .btn-ghost { border-color: var(--border-soft); color: var(--text); background: transparent; } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border); } .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); } .btn-danger:hover { background: var(--red); color: #FFFFFF; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); } .btn-mini { padding: 3px 8px; font-size: 11px; border-radius: 5px; } .btn-link { background: transparent; border: none; color: var(--violet); font-size: 12.5px; font-weight: 600; padding: 6px 0; cursor: pointer; } /* ========================================================================== Segmented Controls & Tabs ========================================================================== */ .segmented-control { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); padding: 3px; border-radius: var(--radius); gap: 2px; } .segmented-item { padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 7px; color: var(--text-muted); border: 1px solid transparent; background: transparent; cursor: pointer; transition: all 0.12s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .segmented-item:hover { color: var(--text); } .segmented-item.active { background: var(--surface); color: var(--text); border-color: var(--border-soft); box-shadow: var(--shadow-xs); } .divider { border: none; border-top: 1px solid var(--border-soft); margin: 18px 0; } /* ========================================================================== Formulários & Inputs ========================================================================== */ label { display: block; font-size: 12.5px; font-weight: 600; margin: 12px 0 5px; color: var(--text-muted); } input[type=text], input[type=email], input[type=number], input[type=password], select, textarea, input.f, select.f { width: 100%; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); box-sizing: border-box; font-size: 13.5px; background: var(--surface-2); color: var(--text); font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus, input.f:focus, select.f:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); background: var(--surface); } textarea.f { font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 12.5px; min-height: 96px; } /* ========================================================================== Power BI Embed Frame, Fullscreen & Floating Toolbar ========================================================================== */ .report-frame-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); position: relative; } .report-frame-wrap iframe, #pbi-container { display: block; width: 100%; height: calc(100vh - 200px); border: 0; } #pbi-container iframe { border: 0; } /* Modo Apresentação (Fullscreen) */ html.bi-fullscreen .sidebar, html.bi-fullscreen .topbar { display: none !important; } html.bi-fullscreen .main { margin-left: 0 !important; } html.bi-fullscreen .content { padding: 8px 12px !important; max-width: none !important; } html.bi-fullscreen .report-frame-wrap iframe, html.bi-fullscreen #pbi-container { height: calc(100vh - 64px) !important; } .bi-toolbar-glass { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 8px 14px; box-shadow: var(--shadow-xs); } .bi-zoom-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.12s ease; } .bi-zoom-btn:hover { background: var(--surface-3); border-color: var(--border); } .bi-zoom-pct { font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 44px; text-align: center; } /* Shimmer Skeleton Loader */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-shimmer { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.8s infinite; border-radius: var(--radius); } /* ========================================================================== Chat IA (Modern Conversational Workspace) ========================================================================== */ .chat-tab-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .chat-tab-btn:hover { color: var(--text); background: var(--surface-2); } .chat-tab-btn.active { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-xs); } .suggestion-chip { font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 100px; padding: 6px 12px; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 5px; } .suggestion-chip:hover { color: var(--text); border-color: var(--violet); background: var(--surface-3); transform: translateY(-1px); } .chat-shell { display: flex; flex-direction: column; height: 560px; } .chat-msgs { flex: 1; overflow-y: auto; padding: 12px 6px; display: flex; flex-direction: column; gap: 14px; } .msg { max-width: 80%; padding: 13px 16px; border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.6; box-shadow: var(--shadow-xs); } .msg.bot { background: var(--surface); border: 1px solid var(--border-soft); align-self: flex-start; color: var(--text); } .msg.user { background: var(--violet); color: #FFFFFF; align-self: flex-end; border-bottom-right-radius: 4px; } .msg.user a { color: #FFFFFF; text-decoration: underline; } /* ========================================================================== Modais & Toasts (Acessíveis) ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; z-index: 200; padding: 64px 20px; overflow-y: auto; } .modal-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); max-width: 620px; width: 100%; padding: 26px 28px; box-shadow: var(--shadow-lg); } .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .mhead h2 { font-size: 19px; } .modal-close { background: transparent; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; } .modal-close:hover { color: var(--text); background: var(--surface-2); } .modal-body { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--text); box-shadow: var(--shadow-lg); z-index: 300; opacity: 0; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Custom scrollbars */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ========================================================================== Responsividade Mobile & Tablet ========================================================================== */ @media (max-width: 1120px) and (min-width: 901px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g2 { grid-template-columns: 1fr; } } @media (max-width: 900px) { body { flex-direction: column; } .btn-mobile-nav { display: inline-flex; } .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: 280px !important; height: 100vh !important; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1000; box-shadow: var(--shadow-lg); border-right: 1px solid var(--border); } html.mobile-drawer-open .sidebar { transform: translateX(0) !important; } .mobile-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; } html.mobile-drawer-open .mobile-drawer-backdrop { display: block; } .topbar { padding: 0 16px; } .content { padding: 18px 16px 48px; } .g4, .g3, .g2 { grid-template-columns: 1fr; } .checklist { grid-template-columns: 1fr; } .table-wrap table { box-shadow: inset -12px 0 10px -10px rgba(0, 0, 0, 0.18); } }