/* ========================================================================== FB CONSULT — Identidade Visual (padrão v2) -------------------------------------------------------------------------- Extraído dos valores computados reais de marketing.fbconsult.com.br (bundle /_next/static/css/2fb185ce7d6bcc6a.css), em 10/08/2026. Nenhum valor aqui foi estimado a partir de captura de tela. Uso: copiar este arquivo para o projeto e importar antes do CSS da app. Requer a fonte Manrope (ver bloco @import abaixo). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* --- Superfícies claras (a área de conteúdo) --- */ --bg: #fafaf9; /* fundo da área de conteúdo (off-white quente) */ --card: #ffffff; /* card, input, célula fixa de tabela */ --card-2: #f4f4f2; /* card recuado, trilho de barra, hover neutro */ --bg-soft: #ffffff; /* --- Traços --- */ --line: #ececeb; /* borda padrão de card e divisor de tabela */ --line-2: #dededb; /* borda de controle (input, chip, botão fantasma) */ /* --- Texto --- */ --text: #18181a; /* texto principal; também é o fundo dos tooltips */ --muted-2: #52525b; /* texto secundário, parágrafo de apoio */ --muted: #8a8a93; /* rótulo, legenda, estado vazio */ /* --- Verde da marca (ação e destaque) --- */ --verde: #16b364; /* verde vivo: foco, ícone ativo, preenchimento */ --verde-2: #0e8a49; /* verde texto/botão: passa contraste sobre branco */ --verde-3: #0b7a41; /* hover do botão */ /* --- Verde escuro (o casco: barra lateral e blocos de destaque) --- */ --escuro-1: #0d3b2a; --escuro-2: #10553a; --sobre-verde: #06301c; /* texto sobre preenchimento verde vivo */ /* --- Acento secundário (módulo Radar / editorial) --- */ --radar: #c2410c; --radar-forte: #9a3412; /* --- Semânticos --- */ --ok: #0e8a49; --atencao: #a1690b; --erro: #c0392b; /* --- Forma --- */ --radius: 14px; /* card */ --radius-sm: 9px; /* input, botão, ícone-botão */ --radius-lg: 18px; /* bloco de destaque escuro */ --radius-wrap: 22px; /* painel de conteúdo flutuante */ --lateral: 248px; /* largura da barra lateral */ /* --- Aliases legados: o app original chamou o verde de "gold". --- */ --gold: var(--verde); --gold-2: var(--verde-2); --green: var(--verde); } /* ========================================================================== 2. BASE -------------------------------------------------------------------------- O é verde escuro. A área de conteúdo é um painel claro arredondado que flutua sobre ele — é isso que dá o efeito de "aplicativo dentro de uma moldura", e não uma sombra. ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: clip; background: var(--escuro-1); color: var(--text); font-family: Manrope, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; /* algarismos de mesma largura: números de tabela e KPI ficam alinhados */ } a { color: inherit; text-decoration: none; } ::selection { background: rgba(22, 179, 100, .16); } /* ========================================================================== 3. BARRA LATERAL ========================================================================== */ .lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lateral); background: linear-gradient(170deg, var(--escuro-2), var(--escuro-1) 62%); padding: 26px 16px 18px; z-index: 30; display: flex; flex-direction: column; } .lateral-topo { display: flex; flex-direction: column; gap: 12px; padding: 0 8px 20px; } .lateral .logo { height: 21px; width: auto; align-self: flex-start; } .lateral-nome { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; } .lateral-nome small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .5); } .lateral-nav { flex: 1 1; overflow-y: auto; } .lateral-grupo { margin-bottom: 22px; } .lateral-grupo-t { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .38); padding: 0 10px; margin-bottom: 7px; } .lateral-nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin-bottom: 2px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .72); transition: .13s; } .lateral-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; } .lateral-nav a.on { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 700; } /* O item ativo se anuncia pelo ícone verde, não por barra lateral colorida. */ .lateral-icone { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .82); transition: .13s; } .lateral-nav a.on .lateral-icone { background: var(--verde); color: var(--sobre-verde); } .lateral-ajuda { margin-top: auto; padding: 0 14px 10px; } .lateral-ajuda a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .62); transition: .15s; } .lateral-ajuda a:hover, .lateral-ajuda a.on { color: #fff; background: rgba(255, 255, 255, .08); } .lateral-pe { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); } .lateral-conta { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; } .lateral-conta .avatar { border-color: rgba(255, 255, 255, .22); } .lateral-conta .avatar.iniciais { background: rgba(255, 255, 255, .12); color: #fff; } .lateral-conta-txt { min-width: 0; } .lateral-conta-txt b { display: block; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral-conta-txt small { display: block; font-size: 11px; color: rgba(255, 255, 255, .5); } .lateral .linkbtn { color: rgba(255, 255, 255, .6); } .lateral .linkbtn:hover { color: #fff; background: rgba(255, 255, 255, .09); } /* ========================================================================== 4. PAINEL DE CONTEÚDO ========================================================================== */ .wrap { margin: 14px 14px 14px calc(var(--lateral) + 14px); padding: 4px 38px 46px; background: var(--bg); border-radius: var(--radius-wrap); min-height: calc(100vh - 28px); } .page-head { margin: 36px 0 24px; } .page-head h1 { font-size: clamp(26px, 3.4vw, 33px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; } .page-head p { margin-top: 9px; max-width: 72ch; font-size: 15px; line-height: 1.6; color: var(--muted-2); } /* Rótulo de seção: caixa alta pequena, nunca um

grande. / .secao { margin: 34px 0 14px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; } .sub { font-size: 13px; line-height: 1.55; color: var(--muted); } .note { font-size: 13.5px; line-height: 1.7; color: var(--muted-2); } .note b { color: var(--text); } .foot { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--muted); } .foot a { color: var(--muted-2); text-decoration: underline; } / ========================================================================== 5. CARD -------------------------------------------------------------------------- Regra do sistema: card se separa do fundo por BORDA, nunca por sombra. Sombra fica reservada a coisas que flutuam de verdade (toast, tooltip). ========================================================================== / .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); } .card-pad { padding: 22px 24px; } .empty { text-align: center; padding: 44px 20px; font-size: 14px; color: var(--muted); } .bloco-titulo { margin-bottom: 14px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } / ========================================================================== 6. GRADES ========================================================================== / .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 12px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin: 0 0 12px; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } / Filho de grade precisa de min-width:0, senão texto longo estoura a coluna. / .grid-3 > , .kpi-grid > , .stat-grid > , .panel-grid > , .insight-grid > { min-width: 0; } .row { display: flex; gap: 10px; flex-wrap: wrap; } .grow { flex: 1 1; min-width: 230px; } /* ========================================================================== 7. NÚMEROS (KPI / stat / insight) ========================================================================== / .kpi { padding: 16px 16px 14px; } .kpi-n { font-size: 27px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; } .kpi-n.txt { font-size: 17px; letter-spacing: -.02em; } .kpi-l { margin-top: 6px; display: flex; align-items: flex-start; gap: 2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); } / Um único KPI por tela pode receber .forte. Mais de um e o destaque some. / .kpi.forte { border-color: rgba(22, 179, 100, .45); background: rgba(22, 179, 100, .045); } .kpi.forte .kpi-n { color: var(--verde-2); } .stat { padding: 18px 20px; } .stat .big { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; } .stat .big.verde { color: var(--verde-2); } .stat .lbl { margin-top: 6px; font-size: 12px; color: var(--muted); } .delta { margin-top: 8px; font-size: 11.5px; font-weight: 700; } .delta.up { color: var(--verde-2); } .delta.down { color: var(--erro); } .delta.neutro { color: var(--muted); font-weight: 600; } .delta span { color: var(--muted); font-weight: 500; } .insight { padding: 20px 22px; } .ins-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .ins-big { margin: 9px 0 5px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } .ins-sub { font-size: 13px; line-height: 1.5; color: var(--muted-2); } / ========================================================================== 8. BLOCO DE DESTAQUE (o número da tela, sobre verde escuro) -------------------------------------------------------------------------- Um por página, sempre no topo. É o eco da barra lateral dentro do conteúdo. ========================================================================== / .destaque { display: flex; align-items: center; gap: 32px; padding: 26px 30px; margin-bottom: 12px; border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--escuro-2), var(--escuro-1) 78%); color: #fff; } .destaque-esq { flex: 1 1; min-width: 0; } .destaque-dir { flex: none; } .destaque-rot { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: rgba(255, 255, 255, .55); } .destaque-linha { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 6px; } .destaque-n { font-size: 58px; font-weight: 800; letter-spacing: -.05em; line-height: 1; } .destaque-frase { max-width: 52ch; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); } .destaque-cresc { padding: 5px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; } .destaque-cresc.sobe { background: rgba(143, 227, 182, .2); color: #8fe3b6; } .destaque-cresc.cai { background: rgba(255, 160, 150, .18); color: #ffb0a6; } .destaque-cresc.igual { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); } @media (max-width: 860px) { .destaque { flex-direction: column; align-items: flex-start; gap: 18px; } .destaque-n { font-size: 46px; } } / ========================================================================== 9. BOTÕES E CONTROLES ========================================================================== / .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--verde-2); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: .12s; white-space: nowrap; } .btn:hover { background: var(--verde-3); } .btn:disabled { opacity: .38; cursor: not-allowed; } .btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--card-2); } .btn-sm { padding: 7px 12px; font-size: 13px; } .linkbtn { padding: 7px 10px; border: none; background: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .12s; } .linkbtn:hover { color: var(--text); background: var(--card-2); } .icon-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); color: var(--muted); font-size: 13px; cursor: pointer; transition: .12s; } .icon-btn:hover { color: var(--text); border-color: var(--muted); } .icon-btn.danger:hover { color: var(--erro); border-color: rgba(192, 57, 43, .4); } / --- Campos --- / .field-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; color: var(--muted-2); } .field-label small { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; } input[type=text], input[type=password], input[type=date], input[type=url], input[type=email], input[type=search], input[type=tel], input[type=number], select, textarea { width: 100%; padding: 11px 14px; font-family: inherit; font-size: 14.5px; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); outline: none; transition: .15s; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } input::placeholder, textarea::placeholder { color: #b4b4bb; } input:focus, select:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(22, 179, 100, .13); } .busca { flex: 1 1; min-width: 230px; } .err { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--erro); } / --- Abas de período: pílulas; a ativa é PRETA, não verde. --- / .periods { display: flex; align-items: center; gap: 4px; margin: 0 0 22px; flex-wrap: wrap; } .periods a { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); transition: .12s; } .periods a:hover { background: var(--card-2); color: var(--text); } .periods a.on { background: var(--text); color: #fff; } .periods a.csv { margin-left: auto; border: 1px solid var(--line-2); color: var(--muted-2); } .periods a.csv:hover { background: var(--card); border-color: var(--muted); } / --- Chip de filtro (multisseleção) --- / .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted-2); cursor: pointer; transition: .12s; } .chip:hover { border-color: var(--muted); color: var(--text); } .chip.on { border-color: var(--verde); background: rgba(22, 179, 100, .09); color: var(--verde-2); } .chip.on::before { content: "✓ "; font-weight: 800; } / ========================================================================== 10. ETIQUETAS E ESTADOS ========================================================================== / .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 2px; } .tag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: rgba(22, 179, 100, .11); color: var(--verde-2); } .tag-soft { background: var(--card-2); color: var(--muted-2); } .tag-mute { background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-weight: 600; } .tag-paid { background: rgba(224, 154, 30, .15); color: var(--atencao); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--card-2); color: var(--muted-2); } .pill.warn { background: rgba(22, 179, 100, .1); color: var(--verde-2); } / Semáforo: verde / amarelo / vermelho / cinza (= sem dado ainda). / .semaforo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; } .semaforo i { font-style: normal; font-size: 9px; } .semaforo b { font-weight: 800; } .semaforo > span { font-weight: 600; opacity: .85; } .semaforo.compacto { padding: 3px 9px; font-size: 11.5px; } .semaforo.verde { background: rgba(22, 179, 100, .14); color: var(--verde-3); } .semaforo.amarelo { background: rgba(224, 154, 30, .17); color: #96610a; } .semaforo.vermelho { background: rgba(200, 60, 45, .13); color: #b03a2b; } .semaforo.cinza { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; } / Sobre o bloco escuro o semáforo clareia, senão desaparece. / .destaque .semaforo.verde { background: rgba(143, 227, 182, .22); color: #a9edc6; } .destaque .semaforo.amarelo { background: rgba(255, 214, 130, .2); color: #ffdb96; } .destaque .semaforo.vermelho { background: rgba(255, 160, 150, .2); color: #ffb5ab; } .destaque .semaforo.cinza { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .66); } .veredito { display: inline-flex !important; align-items: center; margin-top: 7px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .veredito.forte { background: rgba(22, 179, 100, .13); color: var(--verde-2); } .veredito.normal { background: var(--card-2); color: var(--muted-2); } .veredito.fraco { background: rgba(224, 154, 30, .16); color: var(--atencao); } .veredito.cedo { border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; } .warn-inline { font-style: normal; font-weight: 600; color: var(--atencao); } .avatar { border-radius: 50%; object-fit: cover; display: block; flex: none; border: 1px solid var(--line); } .avatar.iniciais { display: grid; place-items: center; background: var(--card-2); color: var(--muted-2); font-weight: 800; letter-spacing: -.02em; border: 1px solid var(--line-2); } / ========================================================================== 11. TABELA ========================================================================== / .tablewrap { overflow-x: auto; } table.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.matrix th, table.matrix td { padding: 11px 13px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; } table.matrix thead th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } table.matrix thead th em { font-style: normal; font-size: 10px; color: var(--verde-2); } / Primeira coluna gruda ao rolar horizontalmente. / table.matrix th.rowhead, table.matrix thead th:first-child { position: sticky; left: 0; text-align: left; font-weight: 700; color: var(--text); background: var(--card); } table.matrix thead th:first-child { color: var(--muted); } table.matrix td b { font-size: 14.5px; font-weight: 700; } table.matrix td i { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(22, 179, 100, .13); color: var(--verde-2); font-size: 11.5px; font-weight: 700; } table.matrix td.nil { color: #cfcfcc; } / ausência de dado tem cor própria: "—" cinza claro / table.matrix tr.sumrow td, table.matrix tr.sumrow th { border-top: 1px solid var(--line-2); border-bottom: none; background: var(--card-2); } table.matrix td.tot, table.matrix th.tot { background: var(--card-2); font-weight: 700; } / Variante lista de registros: alinha à esquerda e usa linha dupla na célula. / table.matrix.leads th, table.matrix.leads td { text-align: left; } table.matrix.leads td small { display: block; font-size: 11.5px; color: var(--muted); } table.matrix.leads td.nowrap { color: var(--muted-2); } / ========================================================================== 12. GRÁFICOS -------------------------------------------------------------------------- Escala verde ordenada do claro (menos) ao escuro (mais). ========================================================================== / .graf { margin-top: 14px; } .graf-legenda { display: flex; gap: 18px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); } .graf-legenda span { display: flex; align-items: center; gap: 7px; } .marca { display: inline-block; border-radius: 2px; } .marca.linha { width: 14px; height: 3px; } .marca.ponto { width: 9px; height: 9px; border-radius: 50%; } .graf-area { position: relative; } .graf-svg { width: 100%; height: 250px; display: block; overflow: visible; } .graf-tick { font-size: 11px; fill: var(--muted); font-family: inherit; font-weight: 600; } .graf-eixo { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 16px 0 40px; font-size: 11.5px; font-weight: 600; color: var(--muted); } .graf-tip { position: absolute; top: 0; transform: translateX(-50%); margin-left: 40px; z-index: 20; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--text); color: #fff; font-size: 12px; line-height: 1.6; white-space: nowrap; pointer-events: none; } .graf-tip b { display: block; margin-bottom: 3px; } .graf-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } / --- Barra horizontal com rótulo em cima (não dentro) --- / .barras { display: flex; flex-direction: column; gap: 14px; } .barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .barra-nome { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra-valor { font-size: 14px; font-weight: 800; white-space: nowrap; flex: none; } .barra-valor em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--muted); margin-left: 7px; } .barra-trilho { height: 7px; border-radius: 4px; background: var(--card-2); overflow: hidden; } .barra-preenche { height: 100%; border-radius: 4px; background: #a8ddc2; } .barra-preenche.forte { background: var(--verde-2); } / --- Funil: faixa proporcional com o número dentro --- / .funil-g { display: flex; flex-direction: column; gap: 5px; } .funil-degrau { display: flex; align-items: center; gap: 18px; } .funil-faixa { display: flex; align-items: center; height: 50px; min-width: 84px; max-width: 56%; flex: none; padding-left: 15px; border-radius: 8px; } .funil-faixa.d1 { background: #8fd3b0; } / topo do funil / .funil-faixa.d2 { background: #3fae76; } .funil-faixa.d3 { background: #0f9a52; } / fundo do funil / .funil-n { font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--sobre-verde); } .funil-rot { min-width: 0; } .funil-rot b { display: block; font-size: 14px; font-weight: 700; } .funil-rot > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } .funil-rot em { font-style: normal; font-weight: 600; color: var(--muted-2); } .funil-nota { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } / --- Barras por dia --- / .daychart { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin-top: 16px; } .daychart.alto { height: 165px; } .daycol { flex: 1 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; } .daybar { width: 100%; min-height: 2px; background: #a8ddc2; border-radius: 3px 3px 0 0; position: relative; } / --- Medidor (rosca) --- / .medidor { width: 168px; text-align: center; } .medidor svg { width: 100%; display: block; } .medidor-n { margin-top: -6px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--text); } .medidor-rot { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--muted); } .medidor.claro .medidor-n { color: #fff; } .medidor.claro .medidor-rot { color: rgba(255, 255, 255, .6); } / Sobre o bloco escuro: trilho rgba(255,255,255,.22), arco #8fe3b6, traço 13px. / .faisca { display: flex; align-items: flex-end; gap: 2px; width: 100%; } .faisca span { flex: 1 1; min-width: 2px; border-radius: 2px 2px 0 0; } / ========================================================================== 13. EXPLICAÇÃO SOB DEMANDA (a bolinha "?") -------------------------------------------------------------------------- O racional não fica escrito na tela. Ele mora aqui dentro, a um hover. ========================================================================== / .info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; } .info-bolinha { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 9.5px; font-weight: 800; line-height: 1; cursor: help; } .info:hover .info-bolinha { background: var(--verde); border-color: var(--verde); color: #fff; } .info-balao { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 250px; padding: 11px 13px; border-radius: 10px; background: var(--text); color: #f4f4f2; font-size: 12.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transition: opacity .14s, visibility .14s; z-index: 40; } .info-balao::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 6px solid var(--text); } .info:hover .info-balao { opacity: 1; visibility: visible; } / ========================================================================== 14. AVISOS (toast) ========================================================================== / .avisos { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 300px; } .aviso { padding: 13px 15px; border-radius: var(--radius); background: var(--text); color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .24); animation: aviso-entra .28s ease-out; } @keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } / ========================================================================== 15. RESPONSIVO ========================================================================== / @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .lateral { position: static; width: auto; bottom: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 14px 16px; } .lateral-nav { overflow-x: auto; } .wrap { margin: 0; border-radius: 0; min-height: auto; } } @media (max-width: 640px) { .wrap { padding: 0 14px 40px; } .page-head h1 { font-size: 26px; line-height: 1.15; } .page-head p { font-size: 14px; } .grid-3, .insight-grid, .kpi-grid, .leitura, .panel-grid, .stat-grid { grid-template-columns: 1fr !important; gap: 10px; } .destaque { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px 18px; } .destaque-n { font-size: 44px; } .kpi-n, .big { font-size: 30px; } .btn, .btn-ghost { min-height: 46px; } / alvo de toque / .daychart { height: 96px; } .funil-faixa { height: 40px; max-width: 100%; } / Tabela de registros vira lista empilhada. / .matrix.leads thead { display: none; } .matrix.leads, .matrix.leads tbody, .matrix.leads tr, .matrix.leads td { display: block; width: auto; } .matrix.leads tr { border-bottom: 1px solid var(--line); padding: 14px 4px; } .matrix.leads tr:last-child { border-bottom: none; } .matrix.leads td { border: none; padding: 3px 0; } / No celular o balão vira barra fixa no rodapé e abre no toque. */ .info-balao { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: none; transform: none; font-size: 13px; padding: 14px 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); } .info-balao::after { display: none; } .info:active .info-balao, .info:focus-within .info-balao { opacity: 1; visibility: visible; } }