:root { --bg: #F7F7F9; --sidebar: #FBFBFC; --surface: #FFFFFF; --surface2: #FAFAFB; --surface3: #F1F1F4; --line: #EBEBF0; --line_forte: #D4D5DE; --text: #5D5776; --dim: #77738A; --fraco: #9996A5; --primaria: #4360EE; --primaria_forte: #3653DF; --primaria_suave: #EEF1FF; --primaria_clara: #B9C6FA; --sobre_primaria: #FFFFFF; --menta: #2A9231; --ambar: #B98A1E; --coral: #EE4162; --menta_bg: #E9F5EC; --ambar_bg: #FBF4E2; --coral_bg: #FBEDEF; --ciano: #43BCEE; --violeta: #2B4BD8; --sombra: 0 2px 8px rgba(25,25,45,.045); --sombra_sm: 0 5px 14px rgba(25,25,45,.065); --sombra_forte: 0 12px 40px rgba(0,0,30,.13); --grade: #F0F0F4; --grade_forte: #EBEBF0; --primaria_graf: #4360EE; --primaria_clara_graf: #B9C6FA; --apoio_graf: #43BCEE; --neutro_graf: #77738A; --menta_graf: #2A9231; --ambar_graf: #EDC240; --coral_graf: #EE4162; --ciano_graf: #43BCEE; --violeta_graf: #2B4BD8; --dim_graf: #9996A5; --fundo_graf: #FFFFFF; --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --raio-xs: 4px; --raio-sm: 5px; --raio: 6px; --raio-lg: 10px; --altura-controle: 34px; } html[data-theme="escuro"] { --bg: #0F1218; --sidebar: #12161D; --surface: #161A22; --surface2: #1B2029; --surface3: #222834; --line: #262D39; --line_forte: #333C4B; --text: #E9EAEF; --dim: #A6A6B0; --fraco: #71717C; --primaria: #7C93FA; --primaria_forte: #93A6FB; --primaria_suave: #17203F; --primaria_clara: #33479E; --sobre_primaria: #0F1218; --menta: #35A34C; --ambar: #E0B13C; --coral: #EE6C80; --menta_bg: #12291B; --ambar_bg: #2A2414; --coral_bg: #2C171B; --ciano: #7FC4EF; --violeta: #8FA6F8; --sombra: 0 1px 2px rgba(0,0,0,.35); --sombra_sm: 0 2px 8px rgba(0,0,0,.40); --sombra_forte: 0 8px 24px rgba(0,0,0,.45); --grade: #222834; --grade_forte: #2E3644; --primaria_graf: #7C93FA; --primaria_clara_graf: #33479E; --apoio_graf: #7FC4EF; --neutro_graf: #8A8A96; --menta_graf: #35A34C; --ambar_graf: #E0B13C; --coral_graf: #EE6C80; --ciano_graf: #7FC4EF; --violeta_graf: #8FA6F8; --dim_graf: #8A8A96; --fundo_graf: #0F1218; } html { background: var(--bg); } /* O tamanho-base fica no `body`, não no `html`: o Mantine mede tudo em `rem`, e mexer no `rem` do documento encolheria a sidebar, o cabeçalho e os controles junto — 216 px viravam 189 px. */ body { background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 14px; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; } /* A troca de tema não deve piscar: transição curta nas superfícies. */ body, .cartao, .painel, th, td { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } @media (prefers-reduced-motion: reduce) { body, .cartao, .painel, th, td { transition: none; } } /* Todo número é tabular: sem isto as colunas dançam. */ .num, .num * { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* String técnica (token de API, URL de webhook): mono é informação aqui. */ .mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; } /* --- Tipografia ------------------------------------------------------- */ /* Label pequena e neutra. Sem caixa-alta: o guia pede leitura, não banner. */ .rotulo { font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--fraco); line-height: 1.35; } /* --- Superfícies ------------------------------------------------------ */ .cartao, .painel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); box-shadow: var(--sombra); } .cartao { padding: 16px; } /* --- Marca ------------------------------------------------------------ */ /* O logo tem duas versões porque o "Native" dele é azul-marinho: no tema escuro ele sumiria. Uma fica escondida; o atributo `data-theme` no troca qual aparece — sem ida ao servidor. */ .logo { display: block; height: 24px; width: auto; } html[data-theme="claro"] .logo-escuro { display: none; } .logo-escuro { display: block; } html[data-theme="escuro"] .logo-claro { display: none; } html[data-theme="escuro"] .logo-escuro { display: block; } a { color: var(--primaria); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: var(--raio-xs); } /* --- Navegação -------------------------------------------------------- */ .nav-item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: var(--raio-sm); font-size: 12.5px; font-weight: 500; color: var(--dim); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; } .nav-item:hover { background: var(--surface3); color: var(--text); } .nav-item.ativo { background: var(--primaria_suave); color: var(--primaria); font-weight: 600; } .nav-item.ativo:hover { background: var(--primaria_suave); color: var(--primaria); } /* Etiqueta de seção na sidebar (Configuração, por exemplo). */ .nav-secao { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--fraco); padding: 16px 12px 5px; } /* --- Configuração (integrações) --------------------------------------- */ .logo-fonte { width: 22px; height: 22px; display: block; flex: none; } .int-card .dica-campo { font-size: 10.5px; color: var(--fraco); line-height: 1.4; margin-top: 4px; } .int-card .filtro { min-width: 190px; flex: 1 1 190px; } .passos > div { font-size: 12px; color: var(--dim); line-height: 1.55; padding-left: 2px; } .msg-int { font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: var(--raio-sm); border: 1px solid var(--line); } .msg-int.ok { color: var(--menta); background: var(--menta_bg, var(--surface2)); } .msg-int.erro { color: var(--coral); background: var(--coral_bg, var(--surface2)); } /* Traço dos ícones. O `dash_iconify` 0.1.2 não expõe `stroke-width`, e a Lucide desenha com 2 por atributo de apresentação — que perde para qualquer regra CSS. O seletor é escopado na moldura de propósito: um `svg *` global alcançaria os gráficos do Plotly e trocaria a espessura das séries. */ .nav-item svg *, .mantine-AppShellHeader svg * { stroke-width: 1.7; } /* --- KPI -------------------------------------------------------------- */ /* No design system o KPI é um cartão branco compacto (~64 px): rótulo de 10 px, valor de 18 px em peso alto, ícone ⓘ de contexto no canto. O estado vive na cor tipográfica — verde só onde "ser alto" é o significado do número. */ .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; } /* Variante do design system: rótulo pequeno, valor 18 px, sem enfeite. */ .kpi-ref { min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; } .kpi-ref .rotulo { font-size: 11px; } .kpi-ref-valor { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; } .kpi-info { color: var(--dim); display: inline-flex; vertical-align: middle; } .kpi-ref.positivo .kpi-ref-valor, .kpi-ref.positivo .rotulo { color: var(--menta); } .kpi-ref.positivo .kpi-info { color: var(--menta); } /* Grade assimétrica do design system: Receita dominante, ROAS estreito. Empilha em 2 colunas no tablet e 1 no celular, como manda o §27. */ .grade-kpi { display: grid; grid-template-columns: 1.35fr 1fr .65fr 1fr; gap: 18px; } @media (max-width: 1100px) { .grade-kpi { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grade-kpi { grid-template-columns: 1fr; } } .kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kpi-rotulo { display: flex; align-items: center; gap: 6px; } .kpi-ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; } .kpi-valor { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--text); line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; } /* Número de eficiência (ROAS, Lucro): o verde assina o valor, como no referencial — só onde "ser alto" é o significado da métrica. */ .valor-bom { color: var(--menta); } .kpi-faixa { font-size: 10.5px; color: var(--fraco); margin-top: 8px; } .kpi-mini-valor { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; } /* --- Badges ----------------------------------------------------------- */ .delta { font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: var(--raio-xs); white-space: nowrap; line-height: 1.2; } .delta-bom { background: var(--menta_bg); color: var(--menta); } .delta-ruim { background: var(--coral_bg); color: var(--coral); } .delta-neutro { background: var(--surface3); color: var(--dim); } .selo { font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: var(--raio-xs); white-space: nowrap; line-height: 1.2; } .selo-dia { display: inline-block; min-width: 54px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .01em; border-radius: var(--raio-xs); padding: 4px 10px; } .selo-demo { font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--ambar); background: var(--ambar_bg); padding: 3px 8px; border-radius: var(--raio-xs); text-transform: uppercase; } /* --- Assinatura: o trilho dos 3 dias --------------------------------- */ .trilho { display: flex; gap: 4px; align-items: stretch; height: 30px; } .trilho .passo { flex: 1; border-radius: 5px; position: relative; background: var(--surface3); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--fraco); transition: background 160ms ease, color 160ms ease; } .trilho .passo.feito { background: var(--menta_bg); color: var(--menta); } .trilho .passo.atual { background: var(--primaria); color: #fff; } .trilho .passo.atual.bom { background: var(--menta); color: #fff; } .trilho .passo.atual.ruim { background: var(--coral); color: #fff; } .trilho .passo.futuro { opacity: .5; } /* Barra de pacing do orçamento */ .pacing { height: 5px; border-radius: 3px; background: var(--surface3); overflow: hidden; } .pacing > span { display: block; height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.22,1,.36,1); } /* Relógio PDT */ .relogio { font-size: 12px; font-weight: 500; color: var(--dim); display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; } .pulso { width: 6px; height: 6px; border-radius: 50%; animation: pulsar 2.4s ease-in-out infinite; } @keyframes pulsar { 0%,100% { opacity: 1 } 50% { opacity: .35 } } /* --- Tabela ----------------------------------------------------------- */ .tabela-operacao { width: 100%; border-collapse: collapse; } .tabela-operacao th { font-size: 11px; font-weight: 500; color: var(--dim); text-align: right; padding: 0 12px; height: 38px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; } .tabela-operacao th:first-child, .tabela-operacao td:first-child { text-align: left; } .tabela-operacao td { font-size: 12px; text-align: right; padding: 0 12px; height: 42px; border-bottom: 1px solid var(--line); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .tabela-operacao tbody tr:last-child td { border-bottom: 0; } .tabela-operacao tbody tr:hover td { background: var(--surface2); } .tabela-operacao td.nome { font-weight: 500; } .tabela-operacao td.fraca { color: var(--dim); } /* Linha de totais no rodapé — a referência fecha a tabela com o somatório. */ .tabela-operacao tfoot td { font-weight: 700; color: var(--text); border-bottom: 0; height: 40px; border-top: 1px solid var(--line_forte); background: var(--surface); } /* --- Card Resumo com filtros ------------------------------------------ */ .resumo-titulo { font-size: 12px; font-weight: 600; color: var(--text); } .resumo-atualizado { font-size: 11px; color: var(--fraco); } .resumo-divisor { height: 1px; background: var(--line); margin: 12px 0 14px; } .filtro { min-width: 150px; flex: 1 1 150px; } .filtro .rotulo { margin-bottom: 5px; font-size: 11px; } /* --- Estado vazio ----------------------------------------------------- */ .vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 20px; text-align: center; border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface2); color: var(--dim); } .vazio-titulo { font-size: 12.5px; font-weight: 600; color: var(--text); } .vazio-texto { font-size: 12px; color: var(--dim); max-width: 46ch; line-height: 1.5; } /* --- Esqueleto de carregamento --------------------------------------- */ @keyframes brilho { 0% { background-position: -320px 0 } 100% { background-position: 320px 0 } } .esqueleto { background: linear-gradient(90deg, var(--surface3) 0%, var(--surface2) 50%, var(--surface3) 100%); background-size: 320px 100%; animation: brilho 1.4s linear infinite; border-radius: 5px; } /* --- Movimento -------------------------------------------------------- */ /* Cascata curta na entrada. O guia pede microinteração, não espetáculo. */ @keyframes subir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .entra { animation: subir .34s cubic-bezier(.22,1,.36,1) both; } @keyframes trocou { from { color: var(--primaria) } to { color: inherit } } .trocou { animation: trocou .9s ease-out; } @media (prefers-reduced-motion: reduce) { .pulso, .entra, .esqueleto, .trocou { animation: none; } .pacing > span { transition: none; } } /* --- Scrollbar -------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line_forte); border-radius: 8px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--fraco); } /* --- Login ------------------------------------------------------------ */ .tela-login { min-height: 100vh; display: grid; place-items: center; background: var(--bg); } .cartao-login { width: min(430px, 92vw); } .marca { font-family: var(--ui); font-weight: 700; letter-spacing: -.03em; } .marca .ds { color: var(--primaria); } /* --- Telas estreitas -------------------------------------------------- */ /* O cabeçalho tem quatro informações competindo por ~400 px. Em vez de deixar tudo amassado, some o que é acessório no celular: o selo de demonstração (que também aparece na página Dados) e o relógio PDT. Ficam a marca, o botão de tema e o menu do usuário. */ @media (max-width: 780px) { .selo-demo, .relogio { display: none; } .logo { height: 20px; } /* Seis opções de período: no celular o seletor ocupa a linha toda e o rótulo encolhe, em vez de vazar do cartão. */ .mantine-SegmentedControl-root { width: 100%; } .mantine-SegmentedControl-label { padding: 0 6px; font-size: 11px; } /* Tabela larga rola na horizontal, como pede o guia, em vez de espremer coluna até o número quebrar linha. */ .tabela-operacao { min-width: 540px; } }