/* ==========================================================================
BILBO DESIGN SYSTEM — v1.0
Extraído do redesign do Relatório Financeiro (fintech premium).
Fonte: Inter (Google Fonts) — importar no :
REGRA DE OURO: --brand é identidade (logo, links, gráficos, foco).
--critical / --attention / --positive são semânticos (sempre crítico/atenção/positivo,
nunca usados por preferência estética). Nunca misturar os dois papéis.
========================================================================== */
:root{
/* Neutros */
--ink:#0F1115; /* texto primário — nunca #000 puro */
--ink-secondary:#5B5F6B; /* texto de apoio, legendas */
--ink-tertiary:#9296A0; /* texto terciário, valores "mês anterior" */
--bg:#F3F4F7; /* fundo de página */
--surface:#FFFFFF; /* cards, tabelas */
--border:#E7E8EC; /* bordas sutis */
/* Marca — identidade, não usar para status */
--brand:#4338CA;
--brand-light:#7C6EF2;
/* Status semântico — sempre com este significado, em qualquer página */
--critical:#DC2626; --critical-soft:#FDF0EF; --critical-border:#F3B7B2;
--attention:#B45309; --attention-soft:#FFF8EC; --attention-border:#F3D699;
--positive:#047857; --positive-soft:#ECFAF4; --positive-border:#A7E4CB;
/* Escala de espaçamento (múltiplos de 4px) */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
/* Raio */
--radius-lg:18px; --radius-md:12px; --radius-sm:8px;
/* Sombra — só dois níveis, não inventar um terceiro */
--shadow-sm:0 1px 2px rgba(15,17,21,.05);
--shadow-md:0 12px 28px rgba(15,17,21,.07);
}
/* ==========================================================================
BASE
========================================================================== */
*{box-sizing:border-box;}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:'Inter',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
}
.page{max-width:1080px;margin:0 auto;padding:32px 24px 64px;}
/* Barra de acento de marca — sempre no topo de qualquer página do produto */
.accent-bar{height:4px;background:linear-gradient(90deg,var(--brand) 0%,var(--brand-light) 45%,transparent 100%);}
/* ==========================================================================
HEADER / BRAND
========================================================================== */
/* gap explícito é essencial aqui: .nav cresce (flex:1) e consome todo o espaço
sobrando do header, então justify-content:space-between por si só não deixa
respiro nenhum entre a logo e o primeiro item — eles colam/sobrepõem. */
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{
width:32px;height:32px;border-radius:9px;
background:linear-gradient(135deg,var(--brand),var(--brand-light));
display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-sm);
}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-0.01em;}
.nav-toggle{display:none;}
/* Pill de metadado (ex: período, status de conexão, tag de ambiente).
inline-block + nowrap: sem isso, um span inline com border-radius que quebra
em 2 linhas desenha a borda arredondada em cada fragmento e sobrepõe as formas
(bug visto em rótulos de conta com 2+ palavras, ex. "Amortização de empréstimo"). */
.pill{
display:inline-block;white-space:nowrap;
font-size:12.5px;font-weight:600;color:var(--ink-secondary);
background:var(--surface);border:1px solid var(--border);
padding:6px 14px;border-radius:999px;
}
/* ==========================================================================
TIPOGRAFIA / TÍTULOS
========================================================================== */
.title-block{margin-bottom:24px;}
.title-block h1{font-size:26px;font-weight:800;margin:0 0 4px;letter-spacing:-0.01em;}
.title-block .subtitle{font-size:14px;color:var(--ink-secondary);margin:0;}
.section-title{font-size:16px;font-weight:700;margin:0 0 14px;letter-spacing:-0.01em;}
section.block{margin-bottom:32px;}
/* Eyebrow — rótulo pequeno em uppercase, sempre com ponto colorido antes.
Usar as variantes .critical/.attention/.positive quando o eyebrow indicar status. */
.eyebrow{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
margin-bottom:12px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;}
.eyebrow.critical{color:var(--critical);} .eyebrow.critical::before{background:var(--critical);}
.eyebrow.attention{color:var(--attention);} .eyebrow.attention::before{background:var(--attention);}
.eyebrow.positive{color:var(--positive);} .eyebrow.positive::before{background:var(--positive);}
/* ==========================================================================
HERO — banner de status/resumo no topo de uma página.
Use quando a página precisa comunicar "estado geral" antes de qualquer detalhe.
Variantes .critical / .attention / .positive mudam a cor da borda.
========================================================================== */
.hero{
display:flex;background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
margin-bottom:20px;
}
.hero.critical{border-color:var(--critical-border);}
.hero.attention{border-color:var(--attention-border);}
.hero.positive{border-color:var(--positive-border);}
.hero-left{flex:1.5;padding:28px;border-right:1px solid var(--border);}
.hero-left h2{font-size:20px;font-weight:700;line-height:1.4;margin:0;max-width:540px;}
/* Painel de destaque dentro do hero — para UM número-chave que merece
ocupar mais espaço visual do que os outros (ex: runway, NPS, SLA). */
.hero-gauge{flex:1;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;min-width:250px;}
.hero-gauge.critical{background:var(--critical-soft);}
.hero-gauge.attention{background:var(--attention-soft);}
.hero-gauge.positive{background:var(--positive-soft);}
.gauge-label{font-size:12px;font-weight:600;color:var(--ink-secondary);margin-bottom:6px;}
.gauge-value{font-size:32px;font-weight:800;line-height:1;margin-bottom:14px;}
.hero-gauge.critical .gauge-value{color:var(--critical);}
.hero-gauge.attention .gauge-value{color:var(--attention);}
.hero-gauge.positive .gauge-value{color:var(--positive);}
.gauge-bar{position:relative;height:8px;border-radius:999px;background:rgba(0,0,0,.08);margin-top:4px;}
.gauge-fill{position:absolute;top:0;left:0;height:100%;border-radius:999px;}
.hero-gauge.critical .gauge-fill{background:var(--critical);}
.hero-gauge.attention .gauge-fill{background:var(--attention);}
.hero-gauge.positive .gauge-fill{background:var(--positive);}
.gauge-marks{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--ink-tertiary);font-weight:600;}
/* ==========================================================================
KPI CARD — métrica de destaque com delta vs. período anterior.
Grid recomendado: 3 ou 4 colunas (.kpi-row), nunca mais que 4 num único row.
========================================================================== */
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;}
.kpi-row.cols-4{grid-template-columns:repeat(4,1fr);}
.kpi-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
padding:18px 18px 16px;box-shadow:var(--shadow-sm);
}
/* .alert = a métrica está em estado crítico neste momento (dinâmico, não fixo por card) */
.kpi-card.alert{border:2px solid var(--critical);background:var(--critical-soft);}
.kpi-label{font-size:12.5px;font-weight:600;color:var(--ink-secondary);margin-bottom:8px;}
.kpi-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;}
.kpi-value{font-size:22px;font-weight:800;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.kpi-card.alert .kpi-value{color:var(--critical);}
.kpi-spark{flex-shrink:0;}
/* Chip de variação — SEMPRE usar cor + seta + texto juntos (nunca só cor, por acessibilidade) */
.kpi-delta{
display:inline-flex;align-items:center;gap:4px;margin-top:10px;
font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;
background:#F1F2F4;color:var(--ink-tertiary); /* estado neutro/sem variação */
}
.kpi-delta.down{color:var(--critical);background:var(--critical-soft);}
.kpi-delta.up{color:var(--positive);background:var(--positive-soft);}
.kpi-delta-note{color:var(--ink-tertiary);font-weight:500;margin-left:2px;}
/* Nota abaixo do valor quando o indicador não tem dado suficiente — o valor
principal vira "—" (mesmo peso/alinhamento dos outros cards) e o motivo
fica pequeno aqui embaixo, sem competir visualmente com o número. */
.kpi-nota{font-size:11px;color:var(--ink-tertiary);margin-top:10px;}
/* ==========================================================================
TABLE CARD — tabela de dados (comparativos, listas, DRE, etc.)
========================================================================== */
.table-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);overflow:hidden;
}
.table-card table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table-card thead th{
text-align:right;font-size:11.5px;font-weight:700;color:var(--ink-tertiary);
text-transform:uppercase;letter-spacing:.04em;
padding:12px 16px;border-bottom:1px solid var(--border);
}
.table-card thead th:first-child{text-align:left;}
.table-card tbody td{
padding:11px 16px;text-align:right;font-variant-numeric:tabular-nums;
color:var(--ink);border-bottom:1px solid var(--border);
}
.table-card tbody .row-label{text-align:left;color:var(--ink-secondary);font-variant-numeric:normal;}
.table-card tbody tr:last-child td{border-bottom:none;}
.table-card tbody tr.total td{font-weight:700;color:var(--ink);background:#FAFAFB;}
/* Utilitários de texto — usar SEMPRE estes, nunca hardcodar cor inline numa célula */
.muted{color:var(--ink-tertiary);}
.muted.small{font-size:11px;}
.neg{color:var(--critical);}
.pos{color:var(--positive);}
.var-cell{display:inline-flex;align-items:center;gap:4px;font-weight:700;}
/* ==========================================================================
CHART CARD — invólucro padrão para qualquer gráfico (Chart.js, D3, etc.)
========================================================================== */
.chart-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);padding:20px;
}
.chart-card canvas{max-height:230px;}
/* Grid padrão para "gráfico + tabela lado a lado" */
.split-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:stretch;}
/* ==========================================================================
INSIGHT CARD — padrão "diagnóstico + ação". Reutilizável fora de relatórios
financeiros: alertas de sistema, checklists de onboarding, revisões de PR etc.
========================================================================== */
.insight-card{
background:var(--surface);border:1px solid var(--border);border-left-width:4px;
border-radius:var(--radius-md);padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.insight-card.critical{border-left-color:var(--critical);}
.insight-card.attention{border-left-color:var(--attention);}
.insight-card.positive{border-left-color:var(--positive);}
/* Cabeçalho do card: tag de severidade (curta, uppercase) + título da
situação (frase, sentence case) — uppercase em frase longa vira ilegível. */
.insight-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-bottom:6px;}
.insight-title{font-size:14px;font-weight:700;color:var(--ink);}
.insight-tag{
font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:6px;
}
.insight-tag .dot{width:7px;height:7px;border-radius:50%;}
.insight-tag.critical{color:var(--critical);} .insight-tag.critical .dot{background:var(--critical);}
.insight-tag.attention{color:var(--attention);} .insight-tag.attention .dot{background:var(--attention);}
.insight-tag.positive{color:var(--positive);} .insight-tag.positive .dot{background:var(--positive);}
.insight-card p{font-size:13.5px;line-height:1.6;color:var(--ink-secondary);margin:0 0 10px;}
.action-line{
font-size:13px;line-height:1.5;background:var(--bg);border-radius:var(--radius-sm);
padding:10px 14px;color:var(--ink);
}
/* ==========================================================================
BOTÕES — para páginas que precisam de ação (fora do escopo do relatório
original, adicionado para cobrir telas com formulário/CTA)
========================================================================== */
.btn{
display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;
padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;
cursor:pointer;text-decoration:none;
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border);}
.btn-danger{background:var(--critical);color:#fff;}
/* ==========================================================================
BADGE DE CONFIANÇA — usar em qualquer página com dado calculado/automático
========================================================================== */
.trust-badge{
display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--positive);
background:var(--positive-soft);border:1px solid var(--positive-border);
padding:5px 10px;border-radius:999px;font-size:11.5px;
}
/* ==========================================================================
FOOTER
========================================================================== */
footer{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--ink-tertiary);}
/* ==========================================================================
RESPONSIVO — breakpoint único em 720px, mobile-first não obrigatório
Tabela comparativa (ex.: DRE, receita por linha do relatório) vs. tabela
operacional (ex.: fila de envios, grid de auditoria) precisam de
comportamento diferente em mobile — não são o mesmo componente:
- .table-card.comparativa: esconde as colunas de comparação (mês anterior,
variação) e mantém só o rótulo + valor do período atual. Aceitável aqui
porque a coluna escondida é contexto, não o dado principal.
- .table-card (sem a classe acima): vira uma lista de cards empilhados,
um por registro, com todos os campos visíveis via rótulo (data-label no
) — porque nessas tabelas as colunas escondidas SÃO o conteúdo
principal (status, valor, categoria...).
========================================================================== */
@media (max-width:720px){
.kpi-row{grid-template-columns:1fr;}
.split-grid{grid-template-columns:1fr;}
.hero{flex-direction:column;}
.hero-left{border-right:none;border-bottom:1px solid var(--border);}
.page{padding:20px 16px 48px;}
/* header nowrap deixa a nav estourar a viewport quando os itens não cabem
ao lado da logo — fallback de segurança mesmo com o menu compacto (D3)
abaixo, caso o JS do toggle falhe por algum motivo. */
header{flex-wrap:wrap;}
/* Menu compacto (D3) — botão em si mora aqui; o toggle mostra/esconde
.nav é definido em styles.css (que já é dono de .nav e carrega DEPOIS
deste arquivo — um .nav{display:flex} sem media query lá venceria
um .nav{display:none} daqui por ordem de cascata, mesma especificidade). */
.nav-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;font-size:18px;line-height:1;
border:1px solid var(--border);border-radius:var(--radius-sm);
background:var(--surface);color:var(--ink);cursor:pointer;
}
/* Tabela comparativa — mesmo comportamento de antes, agora opt-in */
.table-card.comparativa thead th:not(:first-child){display:none;}
.table-card.comparativa tbody td:not(.row-label){display:none;}
/* Qualquer outra tabela sem tratamento específico: nunca clipar dado —
rola horizontalmente em vez de esconder coluna. */
.table-card{overflow-x:auto;}
/* Tabela operacional — cards empilhados, um registro por bloco */
.table-card.operacional table,
.table-card.operacional thead,
.table-card.operacional tbody,
.table-card.operacional tr,
.table-card.operacional td{display:block;width:100%;}
.table-card.operacional thead{display:none;}
.table-card.operacional tr{border-bottom:1px solid var(--border);padding:12px 14px;}
.table-card.operacional tr:last-child{border-bottom:none;}
/* Rótulo empilhado ACIMA do valor (não lado a lado): um
/::before dentro
de display:flex vira dois flex items, e o texto real do
some em
alguns casos (item de texto anônimo some ao lado do ::before). Empilhar
em display:block evita o problema de vez e é mais robusto. */
.table-card.operacional td{
border-bottom:none;padding:4px 0 4px;text-align:left;display:block;
}
.table-card.operacional td:empty{display:none;}
.table-card.operacional td::before{
content:attr(data-label);display:block;font-weight:600;color:var(--ink-tertiary);
font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;
}
.table-card.operacional td:not([data-label])::before{content:none;}
.table-card.operacional td.row-label{
font-weight:700;color:var(--ink);font-size:14.5px;padding-top:0;
}
}