/* v5/css/app.css — tokens do design system (docs/design_system_portable.md) + componentes do portal v5.
   Regra: zero hex fora deste :root. Verde (--ok-*) só pra audit-grade (mês 🔒). Acento azul. */
:root {
  --ink-900:#09090b; --ink-700:#27272a; --ink-500:#52525b; --ink-400:#71717a; --ink-300:#a1a1aa; --ink-200:#d4d4d8;
  --paper-50:#fafafa; --paper-100:#f4f4f5; --paper-200:#e4e4e7; --paper-300:#d4d4d8; --paper-400:#a1a1aa;
  --bg-base:#ffffff; --bg-soft:#fafafa; --bg-mute:#f4f4f5; --border-hair:#e9e9ec; --border-soft:#f0f0f2; --border-strong:#d4d4d8;
  --accent-700:#1e3a8a; --accent-600:#1d4ed8; --accent-500:#2563eb; --accent-400:#3b82f6; --accent-200:#bfdbfe; --accent-100:#dbeafe; --accent-50:#eff6ff;
  --ok-700:#15803d; --ok-600:#16a34a; --ok-500:#22c55e; --ok-200:#bbf7d0; --ok-100:#dcfce7; --ok-50:#f0fdf4;
  --warn-700:#a16207; --warn-600:#ca8a04; --warn-200:#fde68a; --warn-100:#fef3c7; --warn-50:#fffbeb;
  --risk-700:#b91c1c; --risk-600:#dc2626; --risk-200:#fecaca; --risk-100:#fee2e2;
  --foco:#F5B800;   /* destaque do Onde focar (ADR 0007): barra do bloco-resumo, filete do cartão, aro das alavancas do caminho */
  --audit-ink:#0c0c0e; --chrome-bg:#0c0c0e; --chrome-hover:#232327; --chrome-text:#fafafa; --chrome-muted:#a1a1aa; --on-accent:#ffffff;
  --font-serif:"Source Serif 4", Georgia, serif; --font-sans:"Geist", "Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --t-display:40px; --t-title:32px; --t-section:18px; --t-body:15px; --t-body-sm:14px; --t-meta:13px; --t-mono-lg:15px; --t-mono:13px; --t-label:11px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.55; --ls-display:-0.022em; --ls-title:-0.018em; --ls-label:0.10em; --ls-mono:-0.01em;
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px; --r-pill:999px; --ease:cubic-bezier(.2,.7,.3,1); --dur-1:120ms; --dur-2:200ms;
  --cab-h:112px;   /* cabeçalho fixo = topo 64 + abas 48 (R4, Sérgio 13/10); o shell.js mede e atualiza (no celular o topo quebra em 2 linhas) */
}
* { box-sizing:border-box; } html, body { margin:0; padding:0; }
html { background:var(--bg-mute); color:var(--ink-700); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5; scroll-padding-top:var(--cab-h); }   /* mockup: fundo bg-mute, corpo 14px; scroll-padding: foco/rolagem automática não para atrás do cabeçalho fixo */
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a { color:inherit; }
.b-display{font-family:var(--font-serif);font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:400}
.b-title{font-family:var(--font-serif);font-size:var(--t-title);line-height:var(--lh-tight);letter-spacing:var(--ls-title);font-weight:400}
.b-section{font-size:var(--t-section);line-height:var(--lh-snug);letter-spacing:-0.01em;font-weight:600}
.b-body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-700)}
.b-meta{font-size:var(--t-meta);line-height:var(--lh-snug);color:var(--ink-500)}
.b-label{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);font-weight:500;color:var(--ink-500);text-transform:uppercase}
.b-mono{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);font-feature-settings:"tnum" 1}

/* layout — mockup Main/Estados (Sérgio 14/09): cabeçalho 64px, abas numa faixa branca; menu lateral extinto 17/09 */
/* Sérgio 13/10 (R4): topo + faixa das abas ficam fixos juntos ao rolar, em toda tela. Fundo opaco, sem sombra (o filete é a borda
   das abas). z-index 5: acima do conteúdo (títulos fixos da DRE = 4, grade da Conciliação ≤ 4), abaixo dos popups e painéis (≥ 30) */
.cabecalho { position:sticky; top:0; z-index:5; background:var(--bg-base); }
.topo { height:64px; display:flex; align-items:center; gap:12px; padding:0 32px; background:var(--bg-base); border-bottom:1px solid var(--border-hair); }
.topo .espaco { flex:1; }
.app { min-height:100vh; }   /* Sérgio 17/09: sem menu lateral — cabeçalho carrega home, seletor de empresa e conta */
.topo .sel-empresa-wrap, .topo .conta-wrap { position:relative; }
/* Sérgio 17/09 (noite): nome do cliente = link pra home (fora do seletor); o seletor é só o chip da empresa/unidade */
.topo .marca { display:flex; align-items:center; gap:10px; min-width:0; }
.topo .nome-cliente { font-family:var(--font-serif); font-size:20px; color:var(--ink-900); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
.topo .nome-cliente:hover { text-decoration:underline; text-underline-offset:4px; }
.topo .sel-empresa { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; font-size:13px; color:var(--ink-700); border:1px solid var(--border-strong); border-radius:var(--r-2); white-space:nowrap; max-width:34vw; }
.topo .sel-empresa:hover, .topo .sel-empresa[aria-expanded="true"] { background:var(--bg-mute); color:var(--ink-900); }
.topo .sel-empresa .ent { overflow:hidden; text-overflow:ellipsis; }
.topo .sel-empresa svg { color:var(--ink-500); flex:none; }
.topo .avatar { width:34px; height:34px; border-radius:50%; background:var(--ink-900); color:var(--chrome-text); font-size:12px; font-weight:600; letter-spacing:.02em; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; margin-left:4px; }
.topo .avatar img { width:100%; height:100%; object-fit:cover; }
.topo .avatar:hover, .topo .avatar[aria-expanded="true"] { box-shadow:0 0 0 3px var(--paper-200); }
.menu-pop { position:absolute; top:calc(100% + 8px); z-index:30; min-width:220px; max-height:70vh; overflow-y:auto; display:flex; flex-direction:column; padding:6px; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-3); box-shadow:0 8px 24px rgba(9,9,11,.12); font-size:13px; }
.menu-empresa { left:0; } .menu-conta { right:0; min-width:240px; }
.menu-pop .menu-secao { padding:8px 10px 4px; }
.menu-pop .menu-secao ~ .menu-secao { margin-top:6px; border-top:1px solid var(--border-hair); padding-top:10px; }
.menu-pop .menu-item { text-align:left; padding:8px 10px; border-radius:var(--r-2); color:var(--ink-700); display:flex; justify-content:space-between; gap:12px; white-space:nowrap; }
.menu-pop .menu-item:hover:not(:disabled) { background:var(--bg-mute); color:var(--ink-900); }
.menu-pop .menu-item.ativo { color:var(--ink-900); font-weight:500; background:var(--bg-mute); }
.menu-pop .menu-item:disabled { color:var(--ink-300); cursor:default; }
.menu-pop .menu-nota { color:var(--ink-400); font-size:11px; }
.menu-pop .menu-cab { padding:8px 10px 10px; margin-bottom:4px; border-bottom:1px solid var(--border-hair); }
.menu-pop .menu-nome { color:var(--ink-900); font-weight:500; }
.menu-pop .menu-email { color:var(--ink-500); font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.menu-pop .menu-sep { height:1px; background:var(--border-hair); margin:4px 0; }
/* Sérgio 14/09: o box inteiro abre o seletor — o padding mora no select (100% do label) e o chevron fica por cima sem capturar clique */
.topo .nota-rateio { font-size:11px; color:var(--warn-700); background:var(--warn-100); padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; cursor:help; }   /* eixo unidade: mês com % de rateio repetido (Sérgio 14/09) */
.topo .mes { position:relative; display:flex; align-items:center; gap:10px; font-size:14px; }
.topo .mes .seta { color:var(--ink-400); font-size:16px; line-height:1; padding:4px 2px; }
.topo .mes .seta:hover:not(:disabled) { color:var(--ink-900); }
.topo .mes .seta:disabled { opacity:.35; cursor:default; }
.topo .mes .nome { font-weight:500; color:var(--ink-900); padding:4px 8px; border-radius:var(--r-2); }
.topo .mes .nome:hover { background:var(--bg-mute); }
.selo { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-1); border:1px solid var(--border-strong); background:var(--bg-base); color:var(--ink-500); white-space:nowrap; }
.selo--warn { background:var(--warn-100); color:var(--warn-700); border-color:var(--warn-200); }
.selo--ok { background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200); }
.selo--risk { background:var(--risk-100); color:var(--risk-700); border-color:var(--risk-200); }
#shSelo { background:none; border-color:transparent; padding-left:0; padding-right:0; color:var(--ink-700); }   /* Sérgio 21/09: selo do mês sem fundo/borda, só o texto em cinza escuro */
.abas { display:flex; align-items:center; gap:4px; padding:0 32px; background:var(--bg-base); border-bottom:1px solid var(--border-hair); overflow-x:auto; }
/* Sérgio 17/09: pendência de base vira selo vermelho no fim da faixa das abas, centrado na altura da linha, em toda tela */
.abas .selo--pend { margin-left:auto; flex:none; text-decoration:none; }
.abas .selo--pend:hover { background:var(--risk-200); }
.abas button { padding:12px 14px; color:var(--ink-500); font-size:14px; border-bottom:2px solid transparent; white-space:nowrap; }
.abas button:hover { color:var(--ink-900); }
.abas button.ativa { color:var(--ink-900); border-bottom-color:var(--ink-900); font-weight:500; }
.conteudo { padding:20px 32px 60px; max-width:1440px; margin:0 auto; }
/* Sérgio 17/09: sem menu lateral, cabeçalho e abas alinham com a coluna do conteúdo (1440px centrada) — a faixa segue de ponta a ponta */
.topo, .abas { padding-left:max(32px, calc((100% - 1440px) / 2 + 32px)); padding-right:max(32px, calc((100% - 1440px) / 2 + 32px)); }

/* seletor de período (popover no nome do mês): atalhos à esquerda, calendário de meses à direita */
.periodo-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:30; display:grid; grid-template-columns:132px 236px; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-3); box-shadow:0 8px 24px rgba(9,9,11,.12); overflow:hidden; font-size:13px; }
.periodo-pop .atalhos { display:flex; flex-direction:column; gap:2px; padding:10px 8px; border-right:1px solid var(--border-hair); background:var(--bg-soft); }
.periodo-pop .atalhos button { text-align:left; padding:7px 10px; border-radius:var(--r-2); color:var(--ink-700); }
.periodo-pop .atalhos button:hover:not(:disabled) { background:var(--bg-mute); }
.periodo-pop .atalhos button.ativo { color:var(--bg-base); font-weight:500; background:var(--ink-900); }
.periodo-pop button:disabled { color:var(--ink-300); cursor:default; }
.periodo-pop .cal { padding:10px 12px 12px; }
.periodo-pop .cal-cab { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.periodo-pop .cal-cab .ano { font-weight:500; color:var(--ink-900); }
.periodo-pop .cal-cab .seta { width:28px; height:28px; border-radius:var(--r-2); color:var(--ink-500); font-size:16px; }
.periodo-pop .cal-cab .seta:hover:not(:disabled) { background:var(--bg-mute); color:var(--ink-900); }
.periodo-pop .meses { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.periodo-pop .meses button { padding:9px 0; border-radius:var(--r-2); color:var(--ink-700); border:1px solid transparent; }
.periodo-pop .meses button:hover:not(:disabled) { background:var(--bg-mute); }
.periodo-pop .meses button.ativo { background:var(--ink-900); color:var(--bg-base); font-weight:500; }
.periodo-pop .cal-rodape { margin-top:10px; font-size:11px; }

/* componentes */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:var(--r-2); font-size:12px; font-weight:500; line-height:1.5; white-space:nowrap; text-decoration:none; color:var(--ink-700); border:1px solid var(--border-strong); background:var(--bg-base); transition:background var(--dur-1) var(--ease); }   /* mockup: .btn / .btn.ghost */
.btn:hover { background:var(--bg-mute); }
.btn--primario { background:var(--ink-900); color:var(--chrome-text); border-color:var(--ink-900); }   /* Sérgio 14/09: principal preto (design system) */
.btn--primario:hover { background:var(--ink-700); border-color:var(--ink-700); }
.btn--link { border:0; padding:4px 0; color:var(--accent-600); font-weight:500; }
.btn:disabled { opacity:.5; cursor:default; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:var(--t-meta); font-weight:500; background:var(--bg-mute); color:var(--ink-700); }
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-400); }
.chip--ok { background:var(--ok-100); color:var(--ok-700); } .chip--ok::before { background:var(--ok-600); }
.chip--accent { background:var(--accent-100); color:var(--accent-700); } .chip--accent::before { background:var(--accent-600); }
.chip--warn { background:var(--warn-100); color:var(--warn-700); } .chip--warn::before { background:var(--warn-600); }
.card { background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-3); padding:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.kpi .valor { font-family:var(--font-serif); font-size:34px; letter-spacing:-0.02em; line-height:1.1; margin:10px 0 6px; }
.kpi .valor.nd { color:var(--ink-400); font-size:22px; font-family:var(--font-sans); }
.kpi .linha { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.delta { font-family:var(--font-mono); font-size:var(--t-mono); font-feature-settings:"tnum" 1; }
.delta.melhor { color:var(--ok-700); } .delta.pior { color:var(--risk-700); } .delta.neutro { color:var(--ink-500); }
.termina { font-size:var(--t-meta); color:var(--ink-500); margin-top:6px; }
.faixa { background:var(--warn-100); color:var(--warn-700); border-radius:var(--r-3); padding:10px 14px; margin-bottom:18px; font-size:var(--t-body-sm); display:flex; gap:10px; align-items:center; }
/* Caixa liberado por exceção (Sérgio 16/09): alerta vermelho no topo com o % de órfãos pendente de conciliação em destaque */
.faixa--risco { background:var(--risk-100); color:var(--risk-700); border:1px solid var(--risk-200); gap:14px; align-items:center; }
.faixa--risco .faixa-pct { font-size:22px; font-weight:700; line-height:1; white-space:nowrap; cursor:help; }
.faixa--risco > div { flex:1; min-width:0; } .faixa--risco .b-meta { color:var(--risk-700); opacity:.85; margin-top:2px; }
.faixa--risco .btn { white-space:nowrap; }
@media (max-width:640px) { .faixa--risco { flex-wrap:wrap; } .faixa--risco .btn { width:100%; text-align:center; } }
.faixa .btn { margin-left:auto; }
.faixa--ok { background:var(--ok-100); color:var(--ok-700); }   /* orçamento validado (carimbo REF1 = validação consumada) */
.pontos { display:flex; flex-direction:column; gap:14px; }
.pontos .ponto { display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:start; }
.pontos .ponto .dim { padding-top:2px; }
.nd { background:var(--bg-base); border:1px dashed var(--border-strong); border-radius:var(--r-3); padding:20px; color:var(--ink-700); display:flex; flex-direction:column; gap:8px; }   /* mockup Estados item 5 */
.nd .nd-rotulo { color:var(--ink-500); }
.nd .titulo { font-family:var(--font-serif); font-size:22px; line-height:1.3; color:var(--ink-900); font-weight:400; }
.nd .texto, .nd .destrava { font-size:14px; color:var(--ink-500); }
.nd ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-700); }
.nd > .btn { align-self:flex-start; margin-top:2px; }
table.lista { width:100%; border-collapse:collapse; font-size:var(--t-body-sm); }
table.lista th { text-align:left; padding:8px 10px; color:var(--ink-500); font-weight:500; font-size:var(--t-meta); border-bottom:1px solid var(--border-hair); }
table.lista td { padding:10px 10px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
table.lista td.num { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; white-space:nowrap; }
table.lista td.num.pior { color:var(--risk-700); } table.lista td.num.melhor { color:var(--ok-700); }
.acoes-lista { display:flex; gap:14px; margin-top:12px; }
.esqueleto { color:var(--ink-500); padding:40px 0; text-align:center; }
.erro { background:var(--risk-100); color:var(--risk-700); padding:12px 14px; border-radius:var(--r-3); font-size:var(--t-body-sm); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--chrome-bg); color:var(--chrome-text); padding:10px 16px; border-radius:var(--r-3); font-size:var(--t-body-sm); z-index:50; }
.termina strong { font-weight:500; color:var(--ink-900); }
/* gráfico do Resumo (S3) */
.grafico .cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.grafico svg { display:block; width:100%; height:auto; }
.seg-grupo { display:flex; gap:8px; }
.seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r-2); overflow:hidden; font-size:12px; }
.seg button { padding:5px 12px; color:var(--ink-500); }
.seg button.ativo { background:var(--ink-900); color:var(--chrome-text); font-weight:500; }
.legenda { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-500); margin-top:8px; }
:is(.legenda, .g-tip) i { display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:6px; border-radius:2px; }
.legenda--centro { justify-content:center; }
.legenda--direita { justify-content:flex-end; }
/* Sérgio 13/10 (R3): "entenda a projeção" — discreto, cinza, tamanho de meta, no canto direito da legenda do gráfico (entenda-projecao.js);
   na legenda centralizada (Saídas) os itens seguem no centro: o ::before e o link dividem a sobra */
.legenda .entenda-proj { margin-left:auto; align-self:center; font-size:var(--t-meta); color:var(--ink-400); text-decoration:none; white-space:nowrap; }
.legenda .entenda-proj:hover { color:var(--ink-700); text-decoration:underline; text-underline-offset:3px; }
.legenda--centro:has(> .entenda-proj)::before { content:''; flex:1; }
.legenda--centro > .entenda-proj { flex:1; text-align:right; }
:is(.legenda, .g-tip) .lg-real { background:var(--accent-700); } :is(.legenda, .g-tip) .lg-bar { background:var(--accent-200); opacity:.8; }
:is(.legenda, .g-tip) .lg-proj { background:repeating-linear-gradient(135deg, var(--accent-100) 0 2px, var(--accent-200) 2px 3px); border:1px dashed var(--accent-200); box-sizing:border-box; }
:is(.legenda, .g-tip) .lg-orc, :is(.legenda, .g-tip) .lg-ant, :is(.legenda, .g-tip) .lg-acum { width:18px; height:0; border-radius:0; }
:is(.legenda, .g-tip) .lg-orc { border-top:1.5px solid var(--risk-600); } :is(.legenda, .g-tip) .lg-ant { border-top:1.5px dashed var(--warn-600); } :is(.legenda, .g-tip) .lg-acum { border-top:2.5px solid var(--accent-600); }
/* popup no hover dos gráficos barra-linha (Sérgio 17/09; grafico-tip.js): faixa invisível por período no SVG + os valores
   daquele mês/dia com o MESMO símbolo da legenda (linha vermelha = orçamento…). */
.grafico svg rect.hit { fill:var(--ink-900); fill-opacity:0; }
.grafico svg rect.hit:hover { fill-opacity:.04; }
.g-tip { position:fixed; z-index:60; pointer-events:none; width:max-content; max-width:300px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--r-2); padding:8px 10px; font-size:12px; box-shadow:0 6px 20px rgba(9,9,11,.12); }
.g-tip .g-tip-nome { font-weight:600; color:var(--ink-900); margin-bottom:2px; }
.g-tip .g-tip-linha { display:flex; align-items:center; gap:10px; line-height:1.7; color:var(--ink-500); }
.g-tip .g-tip-linha .r { flex:1; min-width:0; }
.g-tip .g-tip-linha .v { font-family:var(--font-mono); font-weight:500; color:var(--ink-900); white-space:nowrap; }
.rodape-fontes { margin-top:28px; color:var(--ink-400); font-size:var(--t-meta); }
.rodape-fontes summary { cursor:pointer; }

/* S4 — DRE · Margens · Caixa */
.grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.controles { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:18px 0 12px; }
.controles .sel { font:inherit; font-size:var(--t-body-sm); padding:7px 10px; border:1px solid var(--border-strong); border-radius:var(--r-3); background:var(--bg-base); }
.tabela-dre { overflow-x:auto; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-4); }
table.dre { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-body-sm); min-width:860px; }
table.dre th { position:sticky; top:0; background:var(--bg-base); z-index:2; text-align:left; padding:8px 10px; color:var(--ink-500); font-weight:500; font-size:var(--t-meta); border-bottom:1px solid var(--border-hair); white-space:nowrap; }
table.dre thead tr.grupos th { text-align:center; color:var(--ink-900); font-weight:600; border-bottom:0; padding-top:12px; }
table.dre thead tr.grupos th:not(:first-child) { border-left:1px solid var(--border-hair); }
table.dre th.num, table.dre td.num { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; white-space:nowrap; }
table.dre td { padding:7px 10px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
table.dre td:first-child, table.dre th:first-child { position:sticky; left:0; background:var(--bg-base); z-index:1; min-width:260px; }
table.dre tr.macro td { font-weight:600; color:var(--ink-900); }
table.dre tr.sintese td { font-weight:600; background:var(--bg-soft); }
table.dre tr.grupo.n0 td:first-child { font-weight:600; }
table.dre tr.contraparte td { color:var(--ink-500); font-size:var(--t-meta); }
table.dre tr.pct td { color:var(--ink-400); font-size:var(--t-meta); padding-top:2px; padding-bottom:6px; border-bottom:0; }
table.dre td.delta.melhor { color:var(--ok-700); } table.dre td.delta.pior { color:var(--risk-700); } table.dre td.neutro { color:var(--ink-400); }
table.dre td.nao-proj { color:var(--ink-400); }
table.dre td.ajustavel { cursor:pointer; text-decoration:underline dotted var(--accent-400); text-underline-offset:3px; }
table.dre td.ajustavel:hover { background:var(--accent-50); }
table.dre td.ajustado { color:var(--warn-700); }
table.dre td.ajustado .b-meta { font-family:var(--font-sans); font-size:11px; white-space:normal; text-align:left; max-width:220px; }
.chip--sm { padding:2px 8px; font-size:10px; }
button.tog { width:16px; height:16px; border:1px solid var(--border-strong); border-radius:3px; margin-right:8px; line-height:12px; font-size:12px; color:var(--ink-700); text-align:center; vertical-align:middle; font-family:var(--font-mono); }
tr.drill td { background:var(--bg-soft); padding:12px 16px; }
table.lanc td { padding:6px 8px; }
tr.form-ajuste td { background:var(--warn-100); padding:14px 16px; }
.ajuste-form .linha-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:10px 0; }
.ajuste-form label { display:flex; flex-direction:column; gap:4px; font-size:var(--t-meta); color:var(--ink-500); }
.ajuste-form input { font:inherit; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--r-2); background:var(--bg-base); min-width:160px; }
.ajuste-form input:focus { outline:0; border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100); }
.ajuste-form .estado.erro { color:var(--risk-700); }
/* Saídas · bloco das oportunidades (Sérgio 13/10, R13): a cascata ocupa a largura toda, em barras horizontais — o histórico
   e a leitura dos desvios que ficavam à direita (mockup Margens.dc.html, 14/09) saíram */
.oport { margin-bottom:20px; }
.oport .card { display:flex; flex-direction:column; gap:10px; min-width:0; }
.oport .mono { font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.oport .down { color:var(--risk-700); }
.cascata .pilulas { display:flex; gap:6px; flex-wrap:wrap; }
.cascata .sel { position:relative; display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:var(--r-2); background:var(--bg-base); color:var(--ink-700); cursor:pointer; }
.cascata .sel b { font-weight:500; } .cascata .sel svg { width:12px; height:12px; color:var(--ink-500); }
.cascata .sel select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit; }
.cascata .sel:focus-within { border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-100); }
.cascata .sel--off, .cascata .sel--off select { cursor:default; }
.cascata .sel-dre { white-space:nowrap; }   /* Comparar com = componente da DRE */
.cascata .faixa-ll { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:10px 12px; background:var(--bg-soft); border:1px solid var(--border-hair); border-radius:var(--r-2); font-size:var(--t-meta); }
.cascata .faixa-ll .seta, .cascata .faixa-ll .det { color:var(--ink-400); }
.cascata .faixa-ll > span:first-child, .cascata .faixa-ll strong, .cascata .faixa-ll .det { white-space:nowrap; }
.cascata .bc { font-size:12px; color:var(--ink-500); } .cascata .bc span { color:var(--ink-300); } .cascata .bc .atual { color:var(--ink-900); font-weight:500; }
.cascata .bc .link { color:var(--accent-600); text-decoration:underline; text-underline-offset:2px; } .cascata .bc .abrir-dre { margin-left:10px; }
.oport .legenda-cv { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-500); justify-content:center; margin-top:auto; }
.oport .lay { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.oport .lay--risk { background:color-mix(in srgb, var(--risk-700) 26%, transparent); border:1px solid color-mix(in srgb, var(--risk-700) 60%, transparent); }
.oport .lay--pos { background:color-mix(in srgb, var(--ink-400) 26%, transparent); border:1px solid color-mix(in srgb, var(--ink-400) 60%, transparent); }
/* cascata de oportunidades em COLUNAS (cascata-oportunidades.js; Sérgio 13/10, R13): mesma pele da cascata de Entradas e da ponte da
   DRE — referência hachurada, degraus translúcidos com contorno fino, período escuro, pontilhado entre patamares, valor colado na
   coluna e rótulo embaixo. Posição em fração da escala (--a/--b = barra, --de/--ate = patamares, --z = zero, por célula), então o
   texto não escala com a largura (os valores abaixo de .cc/.cc-col são só o padrão; o style da célula manda). Verde só audit-grade: o que construiu resultado vai em cinza neutro. */
.cc { --cc-n:1; --cc-h:280px; --cc-bw:min(56px, 62%); display:grid; grid-template-columns:repeat(var(--cc-n), minmax(0, 1fr)); align-items:start; font-size:var(--t-meta); }
.cc-col { --a:0; --b:0; --de:0; --ate:0; --z:0; display:grid; grid-template-rows:var(--cc-h) auto auto; grid-template-areas:"tri" "rot" "pp"; min-width:0; text-align:center; }
.cc-tri { grid-area:tri; position:relative; }
.cc-esc { position:absolute; inset:22px 0; }
.cc-rot { grid-area:rot; padding:8px 4px 0; font-size:11.5px; line-height:1.3; color:var(--ink-500); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow-wrap:anywhere; hyphens:auto; }
.cc-pp { grid-area:pp; padding:2px 4px 0; font-family:var(--font-mono); font-size:10.5px; line-height:1.3; color:var(--ink-400); }
.cc-zero { position:absolute; left:0; right:0; bottom:calc(var(--z) * 100%); border-top:1px solid var(--border-strong); }
.cc-barra { position:absolute; left:calc(50% - var(--cc-bw) / 2); width:var(--cc-bw); bottom:calc(var(--a) * 100%); height:max(1.5px, calc((var(--b) - var(--a)) * 100%)); border-radius:1.5px; }
.cc-liga { position:absolute; border:0 dotted var(--ink-300); }
.cc-liga--sai { left:calc(50% + var(--cc-bw) / 2); width:calc(100% - var(--cc-bw)); bottom:calc(var(--ate) * 100%); border-top-width:1px; }
.cc-liga--chega { display:none; }
.cc-val { position:absolute; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; font-weight:500; white-space:nowrap; font-feature-settings:"tnum" 1; }
.cc-val--cima { bottom:calc(var(--b) * 100% + 4px); } .cc-val--baixo { top:calc((1 - var(--a)) * 100% + 4px); }
.cc-ref .cc-barra { background:repeating-linear-gradient(-45deg, var(--ink-400) 0 1px, var(--bg-base) 1px 5px); border:1px solid var(--ink-400); }
.cc-per .cc-barra { background:var(--ink-700); opacity:.82; }
.cc-neg .cc-barra { background:color-mix(in srgb, var(--risk-700) 26%, transparent); border:1px solid color-mix(in srgb, var(--risk-700) 60%, transparent); }
.cc-pos .cc-barra { background:color-mix(in srgb, var(--ink-400) 26%, transparent); border:1px solid color-mix(in srgb, var(--ink-400) 60%, transparent); }
.cc-total .cc-rot { color:var(--ink-900); font-weight:500; } .cc-total .cc-val { color:var(--ink-900); font-weight:600; }
.cc-neg .cc-val, .cc-neg .cc-pp { color:var(--risk-700); } .cc-pos .cc-val { color:var(--ink-500); }
.cc-clic { cursor:pointer; } .cc-clic:focus-visible { outline:2px solid var(--accent-500); outline-offset:-2px; border-radius:var(--r-1); }
@media (max-width: 860px) {   /* tablet e celular: 12 colunas não cabem sem rolar de lado — as mesmas células viram linhas com barra horizontal */
  .cc { --cc-bh:16px; --cc-folga:44px; grid-template-columns:minmax(0, 1fr); font-size:12px; }
  .cc-col { grid-template-rows:none; grid-template-columns:minmax(0, 38%) minmax(0, 1fr); grid-template-areas:"rot tri" "pp tri"; column-gap:10px; min-height:36px; text-align:right; border-bottom:1px solid var(--border-soft); }
  .cc-tri { align-self:stretch; }
  .cc-esc { inset:0 var(--cc-folga) 0 0; }
  .cc-rot { padding:6px 0 0; font-size:12px; -webkit-line-clamp:2; }
  .cc-pp { padding:0 0 6px; align-self:start; }
  .cc-zero { left:calc(var(--z) * 100%); right:auto; top:-1px; bottom:-1px; border-top:0; border-left:1px solid var(--ink-400); }
  .cc-barra { left:calc(var(--a) * 100%); width:max(1.5px, calc((var(--b) - var(--a)) * 100%)); top:50%; bottom:auto; height:var(--cc-bh); transform:translateY(-50%); }
  .cc-liga--sai, .cc-liga--chega { display:block; width:0; border-top-width:0; border-left-width:1px; height:calc(50% - var(--cc-bh) / 2); }
  .cc-liga--sai { left:calc(var(--ate) * 100%); bottom:-1px; height:calc(50% - var(--cc-bh) / 2 + 1px); }
  .cc-liga--chega { left:calc(var(--de) * 100%); top:0; }
  .cc-val--cima, .cc-val--baixo { left:calc(var(--b) * 100% + 6px); top:50%; bottom:auto; transform:translateY(-50%); }
}
.painel-fundo { position:fixed; inset:0; background:rgba(9,9,11,.45); z-index:40; display:flex; justify-content:flex-end; }
.painel { width:min(72vw, 1100px); background:var(--bg-base); height:100%; overflow:auto; padding:20px 24px; box-shadow:-8px 0 24px rgba(9,9,11,.12); }
.painel .cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.painel th.mes { cursor:pointer; } .painel th.mes:hover { color:var(--accent-700); }
table.caixa { min-width:1080px; } table.caixa td:first-child { min-width:220px; }
@media (max-width: 860px) { .grid-4 { grid-template-columns:1fr 1fr; } .painel { width:100vw; } }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login .card { width:min(420px, 100%); }
.login h1 { font-family:var(--font-serif); font-weight:400; font-size:28px; letter-spacing:-0.018em; margin:0 0 4px; }
.login label { display:block; font-size:var(--t-meta); color:var(--ink-500); margin:14px 0 6px; }
.login input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--r-3); }
.login input:focus { outline:0; border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-100); }
.login .acoes { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.login .ou { text-align:center; color:var(--ink-400); font-size:var(--t-meta); }

/* celular */
@media (max-width: 860px) {
  .topo { height:auto; flex-wrap:wrap; padding:10px 14px; } .topo .espaco { flex:1; } .topo .nome-cliente { font-size:17px; max-width:60vw; } .topo .sel-empresa { font-size:12px; } .abas { padding:0 14px; } .periodo-pop { right:auto; left:0; }
  .conteudo { padding:16px 14px 48px; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .kpi .valor { font-size:28px; }
  .pontos .ponto { grid-template-columns:1fr; gap:4px; }
}

/* ---- S4b · Regras e base única de lançamentos (SPEC §9) ---- */
.filtros { display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:10px 12px; align-items:end; margin:14px 0 12px; }
.filtros label { display:flex; flex-direction:column; gap:4px; font-size:var(--t-meta); color:var(--ink-500); }
.filtros input, .filtros select { font:inherit; font-size:var(--t-body-sm); padding:7px 10px; border:1px solid var(--border-strong); border-radius:var(--r-2); background:var(--bg-base); color:var(--ink-900); min-width:0; }
.filtros input:focus, .filtros select:focus { outline:0; border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100); }
.filtros .acoes { grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
table.regras td .b-meta { display:block; margin-top:3px; max-width:560px; }
table.regras td.num, table.lista td.centro { white-space:nowrap; }
table.arvore td:first-child { white-space:nowrap; }
table.arvore tr.n0 td { font-weight:600; }
.painel .filtro-local { margin:0 0 10px; }
.painel table.lista td { font-size:var(--t-meta); }
.hist-pendente { color:var(--warn-700); }
/* Sérgio 17/09: Contexto — base única de lançamentos no topo, linha destacada */
table.regras tr.destaque td { background:var(--bg-mute); }
table.regras td { vertical-align:middle; }   /* Sérgio 17/09: tudo centrado na vertical */
table.regras td.acao { text-align:right; white-space:nowrap; }
/* Sérgio 17/09: base única — filtros numa linha, botões abaixo à direita; tabela compacta; descrição rolável na horizontal */
.filtros.filtros--linha { display:block; }
.filtros--linha .campos { display:grid; grid-template-columns:minmax(110px, .8fr) minmax(120px, .9fr) minmax(180px, 1.5fr) minmax(140px, 1.1fr) minmax(140px, 1.1fr) minmax(140px, 1fr); gap:10px; align-items:end; }
.filtros--linha input, .filtros--linha select { height:34px; box-sizing:border-box; padding-top:0; padding-bottom:0; }
.filtros--linha .acoes { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:10px; }
.filtros--linha .acoes #blInfo { margin-right:auto; }
.filtros .busca { position:relative; display:block; }
.filtros .busca input { width:100%; box-sizing:border-box; }
.filtros .busca-opcoes { position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:100%; max-width:420px; max-height:260px; overflow-y:auto; margin:0; padding:4px; list-style:none; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-2); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.filtros .busca-opcoes li { padding:6px 8px; border-radius:var(--r-1); font-size:var(--t-meta); color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.filtros .busca-opcoes li:hover, .filtros .busca-opcoes li.ativo { background:var(--bg-mute); color:var(--ink-900); }
table.base-lanc th, table.base-lanc td { font-size:var(--t-meta); color:var(--ink-500); }
table.base-lanc td { padding:5px 8px; }
table.base-lanc td.nw { white-space:nowrap; }
/* Sérgio 22/09: a tabela cabe na largura da tela (sem rolar pro lado — a barra só aparecia no pé dos 50 lançamentos); larguras no
   <colgroup>, descrição e fonte rolam dentro da célula, o resto quebra linha */
table.base-lanc { table-layout:fixed; width:100%; min-width:720px; }
table.base-lanc td { overflow-wrap:anywhere; }
table.base-lanc td.nw { overflow-wrap:normal; }
table.base-lanc td.desc .rolavel, table.base-lanc td.fonte .rolavel { white-space:nowrap; overflow-x:auto; scrollbar-width:thin; }
@media (max-width: 1100px) { .filtros--linha .campos { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .filtros--linha .campos { grid-template-columns:1fr 1fr; } }

/* ---- S4c · Receita (SPEC §5): 5 cards · blocos de 4 partes · cohort em mapa de calor ---- */
.grid-5 { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-bottom:20px; }   /* minmax(0): título largo (CAC · últimos 3 meses) não rouba largura dos outros cards (Sérgio 15/09, subtítulo em 2 linhas) */
.kpi .sec { margin-top:8px; }
/* Sérgio 21/09: Análise MRR e Preço × Volume × Mix lado a lado, metade da tela cada, com o respiro vertical entre as duas */
.receita .analises { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px; margin-bottom:20px; align-items:start; }
.receita .analises > .receita-bloco { margin:0; min-width:0; }
.receita-bloco .rc-cascata svg { display:block; width:100%; height:auto; }
.receita-bloco .rc-cascata rect.hit { fill:var(--ink-900); fill-opacity:0; } .receita-bloco .rc-cascata rect.hit:hover { fill-opacity:.04; }
/* tabela quem tirou · quem trouxe: fonte, tamanho e altura de linha da DRE (.dre-card table.dre); cor só na coluna da diferença */
.receita-bloco .rc-filtro { margin:18px 0 12px; padding-top:14px; border-top:1px solid var(--border-hair); }
.receita-bloco .rc-filtro .seg { flex-wrap:wrap; }
table.rc-tab { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
table.rc-tab th { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:3px 6px; border-bottom:1px solid var(--border-hair); text-align:left; white-space:nowrap; }
table.rc-tab td { padding:3px 6px; color:var(--ink-700); vertical-align:middle; }
table.rc-tab th:first-child, table.rc-tab td:first-child { padding-left:0; }
table.rc-tab td:first-child { max-width:0; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.rc-tab th.num, table.rc-tab td.num { text-align:right; white-space:nowrap; width:1%; padding-left:14px; }
table.rc-tab td.dif { font-weight:500; } table.rc-tab td.dif.melhor { color:var(--ok-700); } table.rc-tab td.dif.pior { color:var(--risk-700); } table.rc-tab td.dif.neutro { color:var(--ink-400); }
table.rc-tab tr.outros td:not(.dif) { color:var(--ink-400); }
table.rc-tab tr.vira td { border-top:1px solid var(--border-hair); }
table.rc-tab td.vazio { color:var(--ink-400); }
table.rc-tab tbody tr:hover > td { background-color:var(--bg-mute); }
table.rc-tab th[title] { text-decoration:underline dotted var(--ink-300); text-underline-offset:3px; cursor:help; }
.receita-bloco .cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
/* legenda curta do bloco (o que ele mede); a explicação longa fica no hover */
.receita-bloco .rc-nota { margin-top:4px; font-size:12px; color:var(--ink-400); }
.receita-bloco .rc-nota.crit, .receita-bloco .b-section.crit { cursor:help; text-decoration:underline dotted var(--border-strong); text-underline-offset:3px; }
.receita-bloco .rc-limitado { display:inline-block; margin:10px 0 2px; white-space:normal; line-height:1.5; }   /* = selo "parcial até dia N" do topo */
.receita-bloco .rc-conta { margin:8px 0 0; font-family:var(--font-mono); font-size:11px; color:var(--ink-400); }
.receita .rc-segs { display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
/* popup do degrau da cascata: valor · tendência 3 meses e 3 semanas (mini-colunas) · clientes de maior impacto */
.g-tip.rc-tip { width:356px; max-width:356px; }
.g-tip.rc-tip .rc-tip-cab .g-tip-nome { flex:1; margin:0; }
.g-tip.rc-tip .rc-tip-sec { border-top:1px solid var(--border-soft); margin-top:6px; padding-top:4px; }
.g-tip.rc-tip .rc-tip-sub { font-size:11px; color:var(--ink-400); }
.g-tip.rc-tip .rc-tip-mini svg { display:block; margin:2px auto 0; }
.g-tip.rc-tip .g-tip-linha .r { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-tip.rc-tip .v.melhor { color:var(--ok-700); } .g-tip.rc-tip .v.pior { color:var(--risk-700); } .g-tip.rc-tip .v.neutro { color:var(--ink-500); }
.tabela-cohort { overflow-x:auto; }
table.cohort th.num, table.cohort td.num { text-align:center; font-family:var(--font-mono); font-feature-settings:"tnum" 1; padding:6px 6px; min-width:44px; }
table.cohort td.heat-0 { color:var(--ink-300); }
table.cohort td.heat-1 { background:var(--risk-100); color:var(--risk-700); }
table.cohort td.heat-2 { background:var(--warn-100); color:var(--warn-700); }
table.cohort td.heat-3 { background:var(--accent-50); color:var(--accent-700); }
table.cohort td.heat-4 { background:var(--accent-100); color:var(--accent-700); }
table.cohort td.heat-5 { background:var(--accent-200); color:var(--accent-700); font-weight:500; }
@media (max-width: 1100px) { .grid-5 { grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 860px) { .grid-5 { grid-template-columns:1fr 1fr; } .receita .analises { grid-template-columns:1fr; gap:20px; } }

/* ---- S5 · Arquivos da Bucck pra você (SPEC §8): lista com ícone · rótulo · meta · Baixar ---- */
ul.arquivos { list-style:none; margin:0; padding:0; }
ul.arquivos .arquivo { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
ul.arquivos .arquivo:last-child { border-bottom:0; }
ul.arquivos .ico { font-size:20px; line-height:1; width:28px; text-align:center; flex:0 0 auto; }
ul.arquivos .txt { min-width:0; flex:1 1 auto; }
ul.arquivos .nome { font-weight:500; }
ul.arquivos .b-meta { margin-top:2px; overflow-wrap:anywhere; }
ul.arquivos .btn { flex:0 0 auto; }
@media (max-width: 860px) { ul.arquivos .arquivo { flex-wrap:wrap; } ul.arquivos .btn { margin-left:40px; } }

/* ---- Resumo = mockup Main.dc.html (Sérgio 14/09: "exatamente igual"; gráfico acumulado não muda) ---- */
.resumo { display:flex; flex-direction:column; gap:16px; }
.resumo .g3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.resumo .g5 { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }   /* dec. 104: 5 degraus da DRE */
.resumo .g4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }   /* Sérgio 08/10: Pulso sem o Saldo bancos = 4 cards numa linha */
@media (max-width: 1180px) { .resumo .g5 { grid-template-columns:repeat(3, minmax(0, 1fr)); } .resumo .g4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.resumo .g2, .receita .g2 { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:16px; }   /* gráfico 60% · leitura 40% (Sérgio 15/09); Receita = mesmo bloco */
.resumo .g2 > .card, .receita .g2 > .card { min-width:0; margin:0; }
.receita .g2 { margin-bottom:20px; }   /* a Receita não é flex com gap: mantém os 20px entre blocos do grid-2 que ela substitui */
.resumo .kpi-card { display:flex; flex-direction:column; gap:6px; }
.resumo .hero { font-family:var(--font-serif); font-size:44px; line-height:1; color:var(--ink-900); letter-spacing:-0.022em; font-weight:400; }
.resumo .kpi-card .termina { font-size:14px; color:var(--ink-700); margin:0; }
.resumo .kpi-card .termina strong { font-weight:600; color:var(--ink-900); }
.resumo .kpi-card .comp { font-size:12px; color:var(--ink-500); }
.resumo .mono { font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.resumo .up { color:var(--ok-700); } .resumo .down { color:var(--risk-700); }
.resumo .kpi-nd .titulo { font-size:22px; }
.resumo .lista-bul, .receita .lista-bul, .caixa .lista-bul { display:flex; flex-direction:column; gap:12px; }
.resumo .bul, .receita .bul, .caixa .bul { display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink-700); }
.resumo .bul i, .receita .bul i, .caixa .bul i { width:6px; height:6px; border-radius:var(--r-pill); background:var(--accent-500); margin-top:9px; flex:none; }
.resumo .bul i.pior, .receita .bul i.pior, .caixa .bul i.pior { background:var(--risk-700); }
.resumo .g2 .lista-bul .bul, .receita .g2 .lista-bul .bul, .caixa .cx-graf-linha .lista-bul .bul { font-size:13px; } .resumo .g2 .lista-bul .bul i, .receita .g2 .lista-bul .bul i, .caixa .cx-graf-linha .lista-bul .bul i { margin-top:7px; }   /* leitura menor ao lado do gráfico (Sérgio 15/09) */
.resumo .bul strong, .receita .bul strong, .caixa .bul strong { font-weight:600; color:var(--ink-900); }
.caixa .lista-bul .bul.sub { margin-top:-6px; padding-left:16px; } .caixa .lista-bul .bul.sub i { width:4px; height:4px; }   /* faixas sob "Dias críticos" (Sérgio 10/10) */
table.tabela-mock { border-collapse:collapse; width:100%; }
table.tabela-mock th { text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:8px 0; border-bottom:1px solid var(--border-hair); }
table.tabela-mock td { padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:14px; color:var(--ink-700); }
table.tabela-mock td.n, table.tabela-mock th.n { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
table.tabela-mock tr.outros td { color:var(--ink-400); font-size:13px; }
@media (min-width: 861px) { .resumo .g2 > .lista-bul, .receita .g2 > .lista-bul { contain:size; overflow-y:auto; } }   /* Sérgio 16/09: gráfico 25% mais baixo — a leitura acompanha a altura do gráfico e rola se passar */
@media (max-width: 860px) { .resumo .g3, .resumo .g2, .receita .g2 { grid-template-columns:1fr; } .resumo .g5, .resumo .g4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .resumo .hero { font-size:36px; } }
@media (max-width: 480px) { .resumo .g5, .resumo .g4 { grid-template-columns:1fr; } }
/* ── Caixa (Sérgio 14/09 · bugs 4–6 · mockup Caixa.dc.html): 20px entre cards, tabela igual ao mockup, ponte com leitura à direita ── */
.caixa { display:flex; flex-direction:column; gap:20px;
  /* Sérgio 15/09: entradas verdes e saídas vermelhas, suaves (lançado mais forte, estimado mais claro) — barras e legenda */
  --cx-rec-l:color-mix(in srgb, var(--ok-500) 75%, var(--bg-base)); --cx-rec-e:color-mix(in srgb, var(--ok-500) 35%, var(--bg-base));
  --cx-pag-l:color-mix(in srgb, var(--risk-600) 60%, var(--bg-base)); --cx-pag-e:color-mix(in srgb, var(--risk-600) 25%, var(--bg-base)); }
.caixa > .card, .caixa > .grid-2 { margin:0; }
.caixa-tabela { overflow-x:auto; margin-top:16px; display:flex; justify-content:center; }   /* Sérgio 10/10: tabela na largura do conteúdo, centralizada */
.caixa .cx-leg { margin:0; row-gap:4px; }
.caixa .cx-pe { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 24px; margin-top:12px; }   /* Sérgio 10/10: rodapé do mínimo à esquerda · legenda à direita, mesma linha */
.caixa .cx-pe .cx-rodape { margin-top:0; min-width:0; margin-left:7.917%; } .caixa .cx-pe .cx-leg { margin-left:auto; }   /* Sérgio 10/10: o texto começa no x da área do gráfico (76/960 do viewBox) */
.caixa .cx-pe .cx-rodape .b-meta, .caixa .cx-pe .cx-rodape .b-meta.crit { font-size:11px; line-height:inherit; color:var(--ink-500); text-decoration:none; }   /* mesma formatação da legenda ao lado (a dica segue no hover/toque) */
@media (max-width: 860px) { .caixa .cx-pe { flex-direction:column; align-items:stretch; } .caixa .cx-pe .cx-rodape { margin-left:0; } .caixa .cx-pe .cx-rodape .b-meta { font-size:var(--t-meta); } }   /* celular: legenda em linha própria, embaixo do texto */
/* anexo do Sérgio 15/09: tabela por semana, tudo em mono; barras de entradas/saídas na mesma escala */
table.caixa-proj { border-collapse:collapse; width:90%; font-family:var(--font-mono); font-feature-settings:"tnum" 1; }   /* Sérgio 10/10: 90% do box, centralizada */
table.caixa-proj th { text-align:left; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:0 0 8px 54px; border-bottom:1px solid var(--border-strong); white-space:nowrap; }
table.caixa-proj td { padding:4px 0 4px 54px; border-bottom:1px solid var(--border-soft); font-size:13px; color:var(--ink-900); white-space:nowrap; }
table.caixa-proj th:first-child, table.caixa-proj td:first-child { padding-left:0; }   /* Sérgio 10/10: o MESMO respiro (54px) antes de toda coluna */
table.caixa-proj tbody tr:first-child td { padding-top:8px; }
table.caixa-proj .n { text-align:right; }
table.caixa-proj td.sem span { color:var(--ink-400); font-size:11px; margin-left:6px; }
table.caixa-proj td.barra { width:50%; }   /* as duas colunas de barra dividem a sobra; texto e números na largura do conteúdo */
table.caixa-proj td.barra, table.caixa-proj th.cx-th-leg { padding-left:8px; }   /* Sérgio 10/10: a barra cola no seu valor (8px); os 54px ficam ENTRE as colunas */
table.caixa-proj th:not(.cx-th-leg), table.caixa-proj td:not(.barra) { width:1%; }
.caixa-proj .trilho { width:100%; min-width:60px; cursor:pointer; }   /* Sérgio 10/10: as barras crescem pra preencher a tabela (90% do box) */ .caixa-proj .trilho:hover { outline:1px solid var(--border-strong); outline-offset:2px; }   /* clicável: abre a semana */
table.caixa-proj td.neg { color:var(--risk-600); }
.caixa-proj .trilho { display:flex; height:10px; background:var(--bg-soft); }
.caixa-proj .trilho i { display:block; height:100%; }
.caixa-proj .trilho.rec .lanc { background:var(--cx-rec-l); } .caixa-proj .trilho.rec .est { background:var(--cx-rec-e); }
.caixa-proj .trilho.pag .lanc { background:var(--cx-pag-l); } .caixa-proj .trilho.pag .est { background:var(--cx-pag-e); }
.caixa-proj .folga { display:inline-block; padding:1px 8px; border-radius:3px; background:var(--bg-soft); color:var(--ink-500); }
.caixa-proj .folga.neg { background:var(--risk-100); color:var(--risk-600); }
.caixa-grafico .cx-banda { transition:opacity .12s; }
/* 08/10 (Sérgio): cores de entradas/saídas no cabeçalho da tabela, ao lado do título; faixa das contas fora do saldo curta */
table.caixa-proj .cx-minileg { display:inline-flex; gap:10px; text-transform:none; letter-spacing:0; font-size:10.5px; color:var(--ink-400); font-weight:400; vertical-align:middle; }
table.caixa-proj .cx-minileg i { display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:middle; border-radius:2px; }
/* gráfico 3/4 + caixa de leitura 1/4 (Sérgio 10/10); no celular, a leitura vai embaixo */
.caixa .cx-graf-linha { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 1fr); gap:16px; align-items:start; }   /* boxes como o .g2 do Pulso */
.caixa .cx-graf-linha > .card { min-width:0; margin:0; }
.caixa .cx-semanas .caixa-tabela { margin-top:0; }
@media (max-width: 860px) { .caixa .cx-graf-linha { grid-template-columns:minmax(0, 1fr); } }
.caixa .cx-graf-linha.cx-sim-aberto { grid-template-columns:minmax(0, 1fr); } .caixa .cx-graf-linha > .lista-bul[hidden] { display:none; }   /* simulador aberto: gráfico + painel na linha toda, leitura escondida (Sérgio 10/10) */
@media (max-width: 860px) { .caixa .cx-graf-card { display:flex; flex-direction:column; } .caixa .cx-graf-card > .cab { order:0; } .caixa .cx-graf-card > .cx-box, .caixa .cx-graf-card > div:not(.cab):not(.sim-painel):not(.cx-pe) { order:1; } .caixa .cx-graf-card > .cx-pe { order:2; } .caixa .cx-graf-card > .sim-painel { order:3; margin-top:12px; } }   /* celular: o simulador abre embaixo do gráfico */
.caixa .lista-bul .bul.clicavel { cursor:pointer; } .caixa .lista-bul .bul.clicavel:hover strong { text-decoration:underline; text-underline-offset:3px; }   /* "Saldo inicial incompleto" abre a lista das contas */
.painel--fora table.lista tr.total td { font-weight:600; color:var(--ink-900); border-top:1px solid var(--border-strong); }
.painel--fora table.lista tr.subtotal td { color:var(--ink-900); border-top:1px solid var(--border-strong); }
.painel--fora table.lista .cat-cel { display:none; }
.painel--fora table.lista tr.agrupado td { color:var(--ink-500); }   /* linhas agrupadas pela esteira (outros, vencidos) */
@media (max-width: 520px) {   /* celular: a categoria vai pra baixo do nome (sem rolagem lateral no painel) */
  .painel--fora table.lista .cat { width:0; max-width:0; padding:0 !important; font-size:0; overflow:hidden; }   /* coluna fica (o total usa colspan), mas sem largura */
  .painel--fora table.lista .cat-cel { display:block; font-size:11.5px; color:var(--ink-400); }
  .painel--fora table.lista td.nome { white-space:normal; } .painel--fora table.lista td.rot-tot { white-space:normal; }
}
table.caixa-proj .cx-th-txt.crit { cursor:help; text-decoration:underline dotted var(--border-strong); text-underline-offset:3px; }   /* hover das colunas (Sérgio 09/10) */
.caixa .cx-leg-tab { display:none; }
@media (max-width: 520px) {   /* celular (Sérgio 10/10): a tabela cabe na tela — barras encolhem, data da semana no hover, legenda das cores numa linha acima */
  table.caixa-proj { min-width:0; width:100%; }
  table.caixa-proj th, table.caixa-proj td { padding-left:6px; font-size:10.5px; } table.caixa-proj th { font-size:9.5px; letter-spacing:0.06em; white-space:normal; }
  table.caixa-proj th:first-child, table.caixa-proj td:first-child { padding-left:0; }
  table.caixa-proj td.sem span { display:none; }
  table.caixa-proj td.barra { width:auto; } table.caixa-proj .trilho { width:22px; min-width:0; }
  table.caixa-proj .cx-minileg { display:none; }
  .caixa .cx-leg-tab { display:block; margin:12px 0 0; font-size:11px; }
}
.caixa-grafico .cx-banda.on { opacity:.05; }
.cx-box { position:relative; }
.caixa-grafico { touch-action:pan-y; }
/* hover do gráfico do Caixa (Sérgio 15/09): data · dois saldos · mínimo do dia */
.cx-tip { position:absolute; z-index:5; pointer-events:none; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--r-2); padding:8px 10px; font-family:var(--font-mono); font-size:12px; min-width:180px; }
.cx-tip > div { display:flex; justify-content:space-between; gap:16px; line-height:1.7; color:var(--ink-500); }
.cx-tip b { font-weight:500; color:var(--ink-900); }
.cx-tip .cx-tip-data { color:var(--ink-400); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; }
.cx-tip .abaixo b { color:var(--risk-600); }   /* Sérgio 10/10: a linha "Mínimo" do hover fica neutra */
/* ponto do saldo inicial (Sérgio 09/10): tabela Data · Saldo · Banco · Conta · Empresa das contas incluídas + total; âmbar = extrato que não
   cobre até a data do saldo. Celular: cada conta em 2 linhas (banco · conta · empresa / data · saldo) */
.cx-tip--contas { max-width:min(560px, calc(100vw - 16px)); }
.cx-tip-tab { border-collapse:collapse; margin-top:2px; }
.cx-tip-tab th { font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-400); font-weight:500; text-align:left; padding:2px 0 3px 16px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.cx-tip-tab td { padding:2px 0 2px 16px; line-height:1.6; color:var(--ink-700); vertical-align:baseline; white-space:nowrap; }
.cx-tip-tab th:first-child, .cx-tip-tab td:first-child { padding-left:0; }
.cx-tip-tab .n { text-align:right; } .cx-tip-tab td.sd { color:var(--ink-900); font-weight:500; }
.cx-tip-tab td.dt { color:var(--ink-500); } .cx-tip-tab td.em { white-space:normal; max-width:190px; }
.cx-tip-tab tr.defasada td { color:var(--warn-700); }
.cx-tip-tab tr.total td { border-top:1px solid var(--border-strong); padding-top:4px; color:var(--ink-900); }
.cx-tip .cx-tip-nota { display:block; margin-top:6px; font-size:11px; color:var(--ink-400); line-height:1.4; }
.cx-tip .difere span, .cx-tip .difere b { color:var(--warn-700); }   /* Σ das contas ≠ saldo inicial */
@media (max-width: 520px) {
  .cx-tip-tab { width:100%; } .cx-tip-tab thead { display:none; }
  .cx-tip-tab tr { display:grid; grid-template-columns:auto auto 1fr auto; grid-template-areas:"bc ct em em" "dt dt dt sd"; column-gap:8px; padding:3px 0; border-bottom:1px solid var(--border-soft); }
  .cx-tip-tab td { padding:0; } .cx-tip-tab td.bc { grid-area:bc; } .cx-tip-tab td.ct { grid-area:ct; } .cx-tip-tab td.em { grid-area:em; max-width:none; }
  .cx-tip-tab td.dt { grid-area:dt; } .cx-tip-tab td.sd { grid-area:sd; }
  .cx-tip-tab tr.total { border-bottom:0; border-top:1px solid var(--border-strong); grid-template-areas:"dt dt dt sd"; } .cx-tip-tab tr.total td { border-top:0; } .cx-tip-tab tr.total td.bc { display:none; }
}
/* contas fora do saldo inicial acima do gráfico (Sérgio 09/10): Ver contas + selo vermelho (componente do "Envie dados pendentes") */
.caixa .cx-fora { align-self:flex-start; display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; }   /* só arranjo: botão + selo do tamanho do conteúdo, na borda esquerda do card */
.selo--g { font-size:13.2px; padding:6px 12px; }   /* selo 20% maior (Sérgio 10/10: aviso das contas fora do saldo na aba Caixa) */
.caixa .cx-fora-bt { cursor:pointer; } .caixa .cx-fora-bt:hover { background:var(--risk-200); }   /* o aviso abre a lista (como o selo de pendências) */
.caixa .cx-fora span.selo[tabindex] { cursor:help; }   /* F51g: aviso só da carteira cortada — a explicação no hover/foco */
.caixa .nd .cx-tambem { width:fit-content; max-width:100%; cursor:help; text-decoration:underline dotted var(--border-strong); text-underline-offset:3px; }   /* F51g: outro motivo no card travado ("Também: …"), explicação no hover */
.painel--fora .cx-fora-outro { margin:14px 0 0; max-width:620px; } .painel--fora .cx-fora-outro b { color:var(--warn-700); font-weight:600; }   /* F51g: o outro motivo do aviso único embaixo da lista */
.caixa .cx-rodape { margin-top:12px; display:grid; gap:4px; }   /* rodapé de nota (Sérgio 09/10, F10/F11): só o racional do saldo mínimo, texto do payload */
.caixa .cx-rodape .b-meta { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* uma linha no desktop (Sérgio 09/10) */
.caixa .cx-rodape .b-meta.crit { width:fit-content; max-width:100%; cursor:help; text-decoration:underline dotted var(--border-strong); text-underline-offset:3px; }   /* a regra inteira na dica (Sérgio 10/10) */
@media (max-width: 860px) { .caixa .cx-rodape .b-meta { white-space:normal; } }   /* celular: pode quebrar */
.painel--lanc.painel--fora { width:min(680px, 100vw); }   /* dupla classe: .painel--lanc vem depois no arquivo */
.painel--fora table.lista td.conta { font-family:var(--font-mono); font-size:12px; white-space:nowrap; }
.painel--fora table.lista td.data { font-family:var(--font-mono); font-size:12px; }
.painel--fora table.lista td.pendente { cursor:help; color:var(--ink-400); }
/* simulador (Sérgio 21/09): frase de entrada · três porções (lançamentos · cabe? · pra viabilizar) — clean: fundo suave, sem caixas */
.caixa .grafico .cab--esq { justify-content:flex-start; gap:16px; }
.caixa .grafico .cab-dir { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.caixa .grafico .b-section .leve { font-weight:400; color:var(--ink-500); }
.caixa .grafico .cx-saldo { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }   /* 07/10: data do saldo dos bancos + contas fora */
.caixa .grafico .cx-saldo .chip { cursor:help; }
.sim-painel { background:var(--bg-soft); border-radius:var(--r-3); padding:14px 16px; margin-bottom:16px; }
.sim-frase { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--t-body-sm); color:var(--ink-500); }
.sim-frase input, .sim-frase select { font:inherit; font-size:var(--t-body-sm); height:34px; box-sizing:border-box; padding:0 10px; border:1px solid var(--border-strong); border-radius:var(--r-2); background:var(--bg-base); color:var(--ink-900); min-width:0; }
.sim-frase input:focus, .sim-frase select:focus { outline:0; border-color:var(--accent-600); box-shadow:0 0 0 3px var(--accent-100); }
.sim-frase input[name=valor] { width:170px; font-family:var(--font-mono); } .sim-frase input[name=n] { width:64px; } .sim-frase input[name=desc] { width:180px; }
.sim-frase .btn { height:34px; } .sim-frase .mais-nome { padding:0 4px; }
.sim-erro { margin:6px 0 0; font-size:var(--t-meta); color:var(--risk-600); } .sim-erro:empty { display:none; }
/* Sérgio 22/09: três porções separadas por uma linha vertical simples; cada lançamento é uma linha própria com o × no fim */
.sim-tres { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:16px; padding-top:14px; border-top:1px solid var(--border-hair); }
.sim-porcao { min-width:0; display:flex; flex-direction:column; gap:8px; padding:0 24px; border-left:1px solid var(--border-strong); }
.sim-porcao:first-child { padding-left:0; border-left:0; } .sim-porcao:last-child { padding-right:0; }
@media (max-width: 860px) { .sim-tres { grid-template-columns:1fr; gap:16px; } .sim-porcao { padding:0; border-left:0; } }
.sim-porcao > .b-label { margin-bottom:2px; }
.sim-itens { display:flex; flex-direction:column; } .sim-itens .vazio { margin:0; }
.sim-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border-hair); font-size:var(--t-body-sm); color:var(--ink-900); }
.sim-item:last-child { border-bottom:0; }
.sim-item:hover { background:var(--bg-mute); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:var(--r-1); }   /* Sérgio 22/09: hover bem sutil na linha */
.sim-item button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
.sim-item .liga { flex:1; min-width:0; text-align:left; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.sim-item .liga b { font-family:var(--font-mono); font-weight:500; } .sim-item .como { color:var(--ink-500); font-size:var(--t-meta); }
.sim-item .x { flex:none; width:22px; height:22px; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1; color:var(--ink-400); }
.sim-item .x:hover { background:var(--risk-100); color:var(--risk-600); }
.sim-item.off { color:var(--ink-400); } .sim-item.off .liga { text-decoration:line-through; } .sim-item.off .como { color:var(--ink-400); }
.sim-veredito { font-size:var(--t-body-sm); line-height:1.5; color:var(--ink-900); }
.sim-veredito b { font-weight:600; } .sim-veredito b.nao { color:var(--risk-600); }
.sim-caminhos { display:flex; flex-direction:column; gap:6px; }
.sim-caminho { display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:left; font:inherit; font-size:var(--t-body-sm); line-height:1.4; color:var(--ink-900); background:none; border:0; padding:0; cursor:pointer; }
.sim-caminho:hover span { text-decoration:underline; } .sim-caminho i { font-style:normal; font-size:var(--t-meta); color:var(--accent-600); white-space:nowrap; }
.cx-box--sim .caixa-grafico { cursor:crosshair; }
/* extrato atrasado (Sérgio 21/09): faixa amarela com o que é estimado e o que ficou fora do saldo — a tela abre, o aviso declara */
.caixa .est { color:var(--warn-700); }
.cx-tip .sim b, .cx-tip .sim span { color:var(--accent-600); } .cx-tip .sim.abaixo b { color:var(--risk-600); }
table.caixa-proj th.sim, table.caixa-proj td.sim, .caixa-proj .folga.sim:not(.neg) { color:var(--accent-600); }
/* ── DRE igual ao mockup (Sérgio 14/09 · bugs 7–9 · DRE.dc.html / DREHistorico.dc.html); tudo escopado em .dre-card e nos painéis ── */
.dre-card { display:flex; flex-direction:column; gap:12px; }
.dre-card .barra { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.dre-card .barra .esq, .dre-card .barra .dir { position:relative; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.dre-card .barra .dir { gap:8px; }
.sel-dre { position:relative; display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:var(--r-2); background:var(--bg-base); color:var(--ink-700); cursor:pointer; }
.sel-dre b { font-weight:500; color:var(--ink-900); }
.sel-dre svg { color:var(--ink-500); pointer-events:none; }
.sel-dre:disabled { cursor:default; }
.sel-dre select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:12px; }
.sel-dre:focus-within { border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-100); }
.dre-card .tabela-dre { border:0; border-radius:0; }
/* Sérgio 15/09: padding mínimo em todas as colunas (leitura boa, menos branco) */
.dre-card table.dre { border-collapse:separate; border-spacing:0; font-size:13px; width:auto; min-width:100%; }
.dre-card table.dre th { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:3px 6px; border-bottom:1px solid var(--border-hair); background:var(--bg-base); vertical-align:bottom; }
.dre-card table.dre th .sub { display:block; font-size:10px; letter-spacing:0.02em; text-transform:none; color:var(--ink-400); }
/* Sérgio 15/09: sem linha horizontal entre as contas — só as linhas destacadas (tr.t: receita líquida, EBITDA, lucro líquido…) têm */
.dre-card table.dre td { padding:3px 6px; color:var(--ink-700); vertical-align:middle; border-bottom:0; }   /* anula o table.dre td genérico */
/* coluna das contas na largura do maior nome (a divisória encosta nela) e congelada ao rolar pro lado */
.dre-card table.dre th:first-child, .dre-card table.dre td:first-child { position:sticky; left:0; z-index:2; background:var(--bg-base); padding-left:0; padding-right:12px; width:1%; white-space:nowrap; box-shadow:inset -1px 0 0 var(--border-strong); }
.dre-card table.dre .bl { border-left:1px solid var(--border-strong); }
/* Sérgio 15/09: valores centralizados em todas as colunas de valor (e a evolução no meio da coluna) */
.dre-card table.dre th.num, .dre-card table.dre td.num, .dre-card table.dre th.col-evo, .dre-card table.dre td.evo { text-align:center; }
/* Sérgio 15/09: valor e comparativo mais estreitos — o título quebra em 2 linhas, o número não quebra */
.dre-card table.dre th.col-v, .dre-card table.dre th.col-c { white-space:normal; width:52px; line-height:1.25; }
.dre-card table.dre thead tr.grupos th { border-bottom:0; padding-top:2px; padding-bottom:2px; text-align:center; color:var(--ink-700); letter-spacing:0.1em; } .dre-card table.dre td.evo, .dre-card table.dre th.col-evo { padding-left:6px; padding-right:6px; }   /* Sérgio 15/09: coluna na metade da largura */
.dre-card table.dre tr.g td { font-weight:600; color:var(--ink-900); }
.dre-card table.dre tr.t td { font-weight:600; color:var(--ink-900); background:var(--bg-soft); border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair); }
.dre-card table.dre tr.s td:first-child { border-left:2px solid var(--border-hair); }
/* F43 (14/10/2026): linha de canal = abertura da conta pelo canal do cliente — nome em cinza (não é conta), números como a conta */
.dre-card table.dre tr.canal td:first-child { color:var(--ink-500); }
/* faturamento → recebido acima da Receita Bruta: informativo (cinza, sem negrito) e separado da DRE por um tracejado (06/10) */
.dre-card table.dre tr.competencia td { color:var(--ink-500); font-weight:400; }
.dre-card table.dre tr.competencia.g td:first-child { color:var(--ink-700); font-weight:500; }
.dre-card table.dre tr.competencia.fecha td { border-bottom:1px dashed var(--border-strong); }
/* inadimplência (07/10/2026): hover no nome/valor → aging por faixa de atraso */
.inad-pop { width:420px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.inad-pop .inad-cab { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--ink-900); }
.inad-pop .inad-cab b { font-weight:600; } .inad-pop .inad-cab span { font-size:11.5px; color:var(--ink-400); white-space:nowrap; }
.inad-pop .inad-nota { margin:0; font-size:12px; line-height:1.45; color:var(--ink-500); }
.inad-pop table.inad-tab { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--ink-700); }
.inad-pop table.inad-tab th { font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-400); text-align:left; padding:4px 0; border-bottom:1px solid var(--border-hair); }
.inad-pop table.inad-tab td { padding:3px 0; } .inad-pop table.inad-tab .num { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; padding-left:12px; }
.inad-pop table.inad-tab tfoot td { border-top:1px solid var(--border-hair); font-weight:600; color:var(--ink-900); padding-top:5px; }
.inad-pop table.inad-top { table-layout:fixed; } .inad-pop table.inad-top th:nth-child(2) { width:104px; } .inad-pop table.inad-top th:nth-child(3) { width:58px; }
.inad-pop table.inad-tab td.cli { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inad-pop table.inad-tab tr.outros td { color:var(--ink-400); }
.inad-pop table.inad-resumo tr.destaque td { font-weight:600; color:var(--ink-900); }
.dre-card table.dre tr.pct td { color:var(--ink-400); font-size:12px; font-weight:400; padding-top:0; padding-bottom:3px; }
.dre-card table.dre td.delta.melhor { color:var(--ok-700); font-weight:500; }
.dre-card table.dre td.delta.pior { color:var(--risk-700); font-weight:500; }
/* Sérgio 15/09: a linha sob o mouse ganha um cinza sutil (inclusive a coluna congelada e as linhas destacadas) */
.dre-card table.dre tbody tr:hover > td { background-color:var(--bg-mute); }
.dre-card table.dre tbody tr > td.ajustavel:hover { background:var(--accent-50); }
/* evolução (7 meses, mês da tela no meio; realizado contínuo · projeção tracejada): cinza por padrão, verde/vermelho SÓ em tendência aguda.
   ui/sparkline.js — na DRE (coluna Evolução) e nos cards de Margens (ao lado do número, Sérgio 15/09) */
.spark { display:block; margin:0 auto; color:var(--ink-300); overflow:visible; }   /* cinza sutil */
.spark .proj { opacity:0.75; }
.spark.melhor { color:var(--ok-700); } .spark.pior { color:var(--risk-700); }
/* Jan–Dez: mês projetado (e o parcial, pelo "termina em") com o fundo das barras de projeção dos gráficos; background-image pra o hover da linha somar */
.dre-card table.dre tr th.proj, .dre-card table.dre tr td.proj { background-image:repeating-linear-gradient(135deg, var(--accent-50) 0 4px, var(--accent-100) 4px 5px); }
.dre-card table.dre th.mes { cursor:pointer; } .dre-card table.dre th.mes:hover { color:var(--accent-600); }
.dre-card .dre-nota { margin:6px 0 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dre-card .dre-nota i { display:inline-block; width:16px; height:10px; border:1px dashed var(--accent-200); background:repeating-linear-gradient(135deg, var(--accent-50) 0 2px, var(--accent-200) 2px 3px); }
/* Sérgio 15/09: seta › fechada que gira pra ⌄ aberta, no lugar do [+]/[−] */
.dre-card .ob.seta { border:0; background:transparent; color:var(--ink-500); }
.dre-card .ob.seta svg { transition:transform .12s ease; } .dre-card .ob.seta.aberto svg { transform:rotate(90deg); }
.dre-card button.ob.seta:hover { color:var(--ink-900); }
/* popup dos lançamentos da conta (Sérgio 15/09): valor · % conta · contraparte · empresa · data · descrição · referência */
.painel--lanc.painel--conta table.lista td { padding:4px 14px 4px 0; }
/* 08/10 (Sérgio): popup dos lançamentos com título grande (mês · conta · valor no formato dos cards); todo número da DRE é clicável */
.painel--conta .cab-conta .titulo-mes { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); }
.painel--conta .cab-conta .titulo-conta { font-family:var(--font-serif); font-size:26px; line-height:1.15; color:var(--ink-900); margin:4px 0 2px; }
.painel--conta .cab-conta .titulo-valor { font-family:var(--font-serif); font-size:34px; letter-spacing:-0.02em; line-height:1.1; color:var(--ink-900); }
.painel--conta .cab-conta .sub { font-size:12px; color:var(--ink-500); margin-top:4px; }
.painel--lanc.painel--conta table.lista td.rateio.provisorio { color:var(--warn-600); }
table.dre td.num.clicavel { cursor:pointer; }
.painel--proj .proj-descricao { font-size:13px; color:var(--ink-700); margin:0 0 12px; max-width:720px; }
.painel--proj table.memoria { width:auto; min-width:420px; margin-bottom:14px; }
.painel--proj table.memoria td { padding:5px 18px 5px 0; vertical-align:top; }
.painel--proj table.memoria td.num { white-space:normal; max-width:460px; font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.painel--proj table.memoria td:first-child { min-width:220px; }
.painel--proj table.memoria { max-width:100%; }
.painel--proj .b-label { margin-bottom:4px; }
.painel--proj .acoes-lista { display:flex; gap:8px; margin-top:6px; }
.painel--proj .inad-pop { width:auto; max-width:560px; padding:0; margin-top:14px; }
table.dre td.num.clicavel:hover { color:var(--accent-600); }
   /* .painel--lanc vem depois no arquivo: dupla classe pra vencer */
.painel--lanc.painel--conta table.lista th.num, .painel--lanc.painel--conta table.lista td.num { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; white-space:nowrap; }
.painel--lanc.painel--conta table.lista td.desc { min-width:220px; }
.painel--lanc.painel--conta table.lista td.categoria { min-width:150px; max-width:260px; color:var(--ink-900); }   /* categoria do ERP (Sérgio 16/10) */
/* unidade rateada (mig 36): valor = parte da unidade + selo; provisório = % repetido de mês anterior */
.painel--conta .selo-rateio { margin-left:6px; padding:0 6px; border:1px solid var(--border-strong); border-radius:var(--r-pill); font-family:var(--font-sans); font-size:11px; color:var(--ink-500); }
.painel--conta .selo-rateio.provisorio { border-style:dashed; }
.ob { display:inline-flex; width:14px; height:14px; border:1px solid var(--ink-300); border-radius:2px; align-items:center; justify-content:center; font-size:11px; line-height:1; color:var(--ink-700); margin-right:8px; background:var(--bg-base); font-family:var(--font-mono); vertical-align:-2px; padding:0; }
button.ob { cursor:pointer; } button.ob:hover { border-color:var(--ink-700); color:var(--ink-900); }
.painel-fundo--leve { background:rgba(9,9,11,.28); }
.painel--hist, .painel--lanc { padding:24px 28px; box-shadow:-16px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:14px; }
.painel--hist { width:min(1060px, 100vw); }
.painel--lanc { width:min(960px, 100vw); }
.painel--hist .cab, .painel--lanc .cab { margin:0; align-items:center; }
.painel .cab .sub { font-size:12px; color:var(--ink-400); margin-top:4px; }
.painel--hist table.dre th.parcial, .painel--hist table.dre td.parcial { background:var(--warn-50); }
.painel--lanc table.lista th { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:8px 10px 8px 0; }
.painel--lanc table.lista th.num { text-align:right; }
.painel--lanc table.lista td { font-size:13px; padding:9px 10px 9px 0; color:var(--ink-700); }
.painel--lanc table.lista td.data { white-space:nowrap; color:var(--ink-500); }
.painel--lanc table.lista td.origem { font-size:12px; color:var(--ink-400); }
/* Sérgio 14/09 + 15/09: as duas linhas de título ficam fixas ao rolar a página, logo abaixo do cabeçalho fixo (topo + abas, --cab-h). Em tela estreita a tabela rola
   na horizontal dentro da caixa (coluna das contas congelada) — e com overflow-x o sticky do título grudaria na caixa, não na
   página: o dre-tab.js desloca o thead pela rolagem da página (transform), acima das linhas. */
.dre-card .tabela-dre { overflow-x:auto; overflow-y:hidden; }
.dre-card table.dre thead { position:relative; z-index:4; }   /* acima das linhas (coluna congelada = 2), abaixo do cabeçalho fixo (5) */
.dre-card table.dre thead th:first-child { z-index:3; }
/* Orçamento (Sérgio 15/09, menu Relatórios): mesma tabela da DRE; alavancas/premissas como filhas da conta (formato próprio, nunca em mil),
   cabeçalho do subgrupo em mono, mês 🔒 hachurado (.proj) só em "Com realizado". Sem hover (Sérgio 13/10, R17): o critério de projeção vai
   pro painel de detalhamento */
.orc-card table.dre tr.premissa td { color:var(--ink-500); font-size:12px; font-weight:400; }
.orc-card table.dre tr.premissa td:first-child { font-style:italic; }
.orc-card table.dre tr.subgrupo td { padding-top:6px; }
.orc-card table.dre tr.subgrupo td:first-child { font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-400); font-style:normal; }
/* alavanca que o cliente ainda não mede: só a marca curta na linha (06/10 — texto longo esticava a coluna) */
.orc-card table.dre td:first-child .nm-tag { font-family:var(--font-sans); font-style:normal; font-size:11px; color:var(--ink-400); margin-left:10px; }
/* descrição do canal na linha: curta; se passar do limite, corta com "…" */
.orc-card table.dre td:first-child .sg-desc { display:inline-block; max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.orc-card .nota-entidade { padding:4px 0; }
/* canal: "① AQUISIÇÃO  quantos entram × a que preço" · linha Σ fecha o canal (negrito, fundo suave) — visual do Sérgio 15/09 */
.orc-card table.dre tr.subgrupo td:first-child .sg-desc { font-family:var(--font-sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--ink-400); margin-left:10px; }
.orc-card table.dre tr.premissa.total td { font-weight:600; color:var(--ink-900); background:var(--bg-soft); font-style:normal; }
/* canal recolhível ("agrupe como na planilha", Sérgio 15/09): nome mono em caixa alta + descrição, valores = Σ do canal */
.orc-card table.dre tr.canal td { color:var(--ink-700); font-size:12px; }
.orc-card table.dre tr.canal td:first-child { font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); }
.orc-card table.dre tr.canal td:first-child .sg-desc { font-family:var(--font-sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--ink-400); margin-left:10px; }
.orc-card table.dre tr.premissa.total td:first-child { font-family:var(--font-mono); font-style:normal; }
/* tela em dois blocos (Sérgio 13/10): a operação do mês (Venda do mês → canal → alavancas) acima da DRE, fechada por um tracejado
   (o mesmo do Faturamento → Recebido da DRE); a Receita Bruta leva o nome da ponte ("Venda → caixa") ao lado, em cinza */
.orc-card table.dre tr.operacao.fecha td { border-bottom:1px dashed var(--border-strong); }
.orc-card table.dre tr.g td:first-child .sg-desc { font-family:var(--font-sans); font-size:12px; font-weight:400; color:var(--ink-400); margin-left:10px; }
/* árvore da tela Orçamento (Sérgio 16/09): mesmo desenho do Onde agir (regras :is(.resumo, .orc-card) acima); canal em mono caixa alta,
   chip +N / − do nó recolhível, sem popup no hover (R17) e sem "abrir na DRE" */
.orc-card .orc-arvore { gap:8px; }
.orc-card .orc-arvore .oa-corpo-v { gap:6px; }
.orc-card .orc-arvore .oa-controles > .oa-nota-impacto:nth-child(2) { margin:0 0 0 auto; }   /* só raiz + nota: nota encostada à direita (especificidade acima da regra :is() do Onde agir) */
.orc-card .orc-arvore .oa-graf g.no[data-tipo="canal"] text.rot { font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; }
.orc-card .orc-arvore .oa-graf g.no.clicavel:hover text.chip { fill:var(--ink-900); }
.orc-card .orc-arvore .oa-graf g.no[data-tipo="premissa"] rect { stroke-dasharray:none; }
/* dica visível (tooltip.js): caixa escura presa ao body, abaixo do elemento (Caixa, Receita, Conciliação; a tela Orçamento ficou sem hover em 13/10) */
.tip { position:fixed; z-index:60; max-width:340px; padding:8px 10px; background:var(--chrome-bg); color:var(--chrome-text); font-size:12px; line-height:1.4; border-radius:var(--r-2); box-shadow:0 6px 20px rgba(9,9,11,.18); pointer-events:none; white-space:normal; }

/* QA3 (REL07): período com release em troca — "Atualizando dados", sem número (nd-block variante atualizando) */
.nd--atualizando { border-style:solid; }

/* Margens · "O que importa nas margens" no padrão do Resumo (Sérgio 14/09) */
.mg-oqi { display:flex; flex-direction:column; gap:12px; }
.mg-oqi .bul { display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink-700); }
.mg-oqi .bul i { width:6px; height:6px; border-radius:var(--r-pill); background:var(--accent-500); margin-top:9px; flex:none; }
.mg-oqi .bul i.pior { background:var(--risk-700); }
.mg-oqi .bul strong { font-weight:600; color:var(--ink-900); }

.painel--lanc table.lista td.num { font-family:var(--font-mono); font-feature-settings:"tnum" 1; text-align:right; white-space:nowrap; }

/* Card de número único do portal (Sérgio 14–15/09): compacto — título cinza · número grande sans · subtítulo opcional ·
   rodapé com o selo da variação à esquerda e o período à direita */
.card.kc { display:flex; flex-direction:column; gap:2px; padding:16px 18px; }
.kc .kc-topo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 8px; }
/* Sérgio 15/09: fontes do mockup Main — título mono em caixa alta (.lbl), número serif (.hero), subtítulo sans 14px, faróis mono */
.kc .kc-cab { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; }   /* título · período no topo direito (Sérgio 15/09) */
.kc .kc-rotulo { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:500; line-height:1.3; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc .kc-valor { font-family:var(--font-serif); font-size:34px; font-weight:400; line-height:1.1; letter-spacing:-0.022em; color:var(--ink-900); margin:8px 0 0; font-feature-settings:"tnum" 1; white-space:nowrap; }
.kc .kc-valor.nd { font-size:15px; font-weight:400; color:var(--ink-400); letter-spacing:0; white-space:normal; }
.kc .kc-valor-linha { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }   /* número · linha evolutiva (Margens, Sérgio 15/09) */
.kc .kc-evo { flex:none; display:inline-flex; margin-top:8px; }   /* mesmo margin-top do número, pra alinhar no meio dele */
.kc .kc-evo .spark { margin:0; }
.kc .kc-extra { margin:4px 0 0; font-size:14px; line-height:1.4; color:var(--ink-700); }
.kc .kc-extra strong { font-weight:600; color:var(--ink-900); }
.kc .kc-formula { font-size:12.5px; line-height:1.35; color:var(--ink-500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }   /* conta do indicador, ≤ 2 linhas (Receita, Sérgio 15/09) */
.kc .kc-formula strong { font-weight:500; color:var(--ink-700); }
.kc .kc-rodape { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:auto; padding-top:12px; }
.kc .kc-selo { display:inline-flex; align-items:center; font-family:var(--font-mono); font-feature-settings:"tnum" 1; font-size:11px; font-weight:500; line-height:1.3; padding:3px 6px; border-radius:var(--r-2); background:var(--bg-soft); color:var(--ink-500); white-space:nowrap; }
.kc .kc-selo.melhor { background:var(--ok-50); color:var(--ok-700); }
.kc .kc-selo.pior { background:var(--risk-100); color:var(--risk-700); }
.kc .kc-per { flex:none; font-size:12px; color:var(--ink-400); white-space:nowrap; }
.card.kc.kc-nd .kc-nd-corpo { flex:1; display:flex; align-items:center; justify-content:center; padding:14px 0 4px; }   /* Saldo bancos sem extrato: título + botão (Sérgio 15/09) */
@media (max-width: 860px) { .kc .kc-valor { font-size:28px; } }

/* ── árvore SVG (.oa-arvore) — hoje só a árvore da tela Orçamento (orcamento-arvore.js); o Onde agir do Pulso virou "Onde focar" (.of, abaixo) em 30/09 (ADR 0007) ── */
.seg button:disabled { color:var(--ink-300); cursor:default; }
:is(.resumo, .orc-card) .oa-arvore { display:flex; flex-direction:column; gap:12px; }
:is(.resumo, .orc-card) .oa-arvore .oa-cab { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
:is(.resumo, .orc-card) .oa-arvore .oa-cab .titulo { display:flex; flex-direction:column; gap:2px; min-width:0; }
:is(.resumo, .orc-card) .oa-arvore .oa-controles { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
:is(.resumo, .orc-card) .oa-arvore .oa-controles > :nth-child(2) { margin:0 auto; }
:is(.resumo, .orc-card) .oa-arvore .oa-corpo-v { display:flex; flex-direction:column; gap:10px; min-width:0; margin:0; }
:is(.resumo, .orc-card) .oa-arvore .oa-graf { overflow-x:auto; } :is(.resumo, .orc-card) .oa-arvore .oa-graf svg { display:block; height:auto; }   /* árvore no tamanho natural (max-width 100%) */
:is(.resumo, .orc-card) .oa-arvore .oa-graf g.no.clicavel { cursor:pointer; }
:is(.resumo, .orc-card) .oa-arvore .oa-graf g.no.clicavel:hover rect { stroke:var(--ink-900); }
/* ícone ⊕/⊖ de recolher/expandir (Sérgio 16/09): destaque no hover do próprio ícone */
:is(.resumo, .orc-card) .oa-arvore .oa-graf g.chip { cursor:pointer; }
:is(.resumo, .orc-card) .oa-arvore .oa-graf g.chip:hover circle { fill:var(--accent-100); stroke:var(--accent-700); }
:is(.resumo, .orc-card) .oa-arvore .oa-graf g.chip:hover path { stroke:var(--accent-700); }
:is(.resumo, .orc-card) .oa-arvore .texto-vazio { font-size:14px; color:var(--ink-500); }
:is(.resumo, .orc-card) .oa-arvore .oa-nota { font-size:11px; color:var(--ink-400); }
:is(.resumo, .orc-card) .oa-arvore .oa-nota-impacto { align-self:flex-end; font-size:11px; color:var(--ink-500); margin-bottom:-4px; }
@media (max-width: 1100px) { :is(.resumo, .orc-card) .oa-arvore .oa-controles { flex-direction:column; align-items:stretch; } :is(.resumo, .orc-card) .oa-arvore .oa-controles > :nth-child(2) { margin:0; } }

/* ── "Onde focar" (ADR 0007, Sérgio 30/09; mockup onde-focar-3b): faixa (bloco-resumo + cartões) · painel da alavanca · mapa em acordeão.
   Cores pelos tokens: tinta = ink-900 · perda = risk-700 (sobre tinta: risk-200) · referência = accent-600 · zero = ink-400 · destaque = --foco.
   .of--neutro (orçamento provisório): a perda fica em tinta, sem vermelho ── */
.of { display:flex; flex-direction:column; border:1px solid var(--border-hair); border-radius:var(--r-3); overflow:hidden; background:var(--bg-soft); }
.of-faixa { background:var(--bg-mute); padding:18px 24px 16px; border-bottom:1px solid var(--border-hair); }
.of-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.of-cab-esq, .of-cab-dir { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.of-cab-titulo { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--ink-900); }
.of-cab-sub { font-size:12px; color:var(--ink-500); }
.of-cab-dica, .of-cab-rot { font-size:11px; color:var(--ink-400); }
.of .seg { background:var(--bg-base); font-size:11.5px; } .of .seg button { padding:4px 10px; }
.of-aviso { margin-top:10px; font-size:12px; color:var(--warn-700); background:var(--warn-100); border-radius:var(--r-2); padding:6px 10px; }
.of-grid { display:grid; grid-template-columns:200px repeat(5, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.of-resumo { display:block; width:100%; text-align:left; background:var(--ink-900); color:var(--chrome-text); border:1.5px solid var(--ink-900); border-radius:var(--r-3); padding:10px 14px; min-height:96px; cursor:pointer; transition:border-color var(--dur-1); }
.of-resumo:hover, .of-resumo.sel { border-color:var(--foco); }   /* 6ª rodada: o totalizador abre o painel das 5 */
.of-resumo-val { font-family:var(--font-mono); font-size:20px; font-weight:500; color:var(--risk-200); white-space:nowrap; }
.of-resumo-barra { display:flex; align-items:center; gap:8px; margin-top:6px; }
.of-resumo-barra .trilho { flex:1; height:3px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden; }
.of-resumo-barra .cheio { height:3px; background:var(--foco); }
.of-resumo-barra .pct { font-family:var(--font-mono); font-size:12px; }
.of-resumo-leg { font-size:10.5px; color:var(--chrome-muted); margin-top:5px; line-height:1.35; }
.of-cartao { display:block; text-align:left; width:100%; background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-3); box-shadow:inset 3px 0 0 var(--foco); padding:10px 12px 10px 14px; min-width:0; cursor:pointer; transition:border-color var(--dur-1); }
.of-cartao:hover, .of-cartao.sel { border-color:var(--ink-900); }
.of-cartao-tit { font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink-900); }
.of-cartao-cam { font-size:10px; color:var(--ink-500); line-height:1.35; margin-top:3px; height:27px; overflow:hidden; }
.of-cartao-val { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--risk-700); white-space:nowrap; margin-top:10px; }
.of-cartao-linha { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; align-items:center; }
.of-cartao-linha .trilho { height:3px; background:var(--paper-200); border-radius:2px; overflow:hidden; } .of-cartao-linha .cheio { height:3px; background:var(--ink-900); }
.of-cartao-linha .pct { font-family:var(--font-mono); font-size:11px; color:var(--ink-500); white-space:nowrap; } .of-cartao-linha .pct span { font-family:var(--font-sans); font-size:10px; }
/* painel da alavanca (dentro da faixa) */
.of-painel { position:relative; margin-top:12px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--r-4); box-shadow:0 8px 24px rgba(9,9,11,.08); padding:18px 22px 16px; }
.of-x { position:absolute; right:10px; top:10px; width:22px; height:22px; border-radius:50%; font-size:16px; line-height:1; color:var(--ink-500); display:flex; align-items:center; justify-content:center; }
.of-x:hover { background:var(--bg-mute); color:var(--ink-900); }
.of-painel-grid { display:grid; grid-template-columns:260px minmax(0, 1fr) 300px; gap:32px; }
.of-painel-c1 { display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-width:0; }
.of-painel-titulo { font-size:16px; font-weight:600; color:var(--ink-900); line-height:1.25; }
.of-painel-caminho { font-size:11px; color:var(--ink-500); margin-top:2px; }
.of-linhas { display:flex; flex-direction:column; }
.of-linha { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-height:30px; border-bottom:1px solid var(--border-soft); font-size:12px; color:var(--ink-500); }
.of-linha:last-child { border-bottom:0; }
.of-linha .v { font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--ink-900); white-space:nowrap; }
.of-linha.perda .v { color:var(--risk-700); } .of-linha.zero .v { color:var(--ink-400); } .of-linha.ref .v { color:var(--accent-600); } .of-linha.ganho .v { color:var(--ink-700); }
.of-painel-c1 .of-linha.perda { min-height:38px; } .of-painel-c1 .of-linha.perda .v { font-size:20px; }
/* tabela do painel (Sérgio 30/09, 5ª e 6ª rodadas): até dia N · projeção × Real · referência · Δ — títulos e valores centrados, Real e referência em tinta */
.of-tab { width:100%; border-collapse:collapse; font-size:12px; }
.of-tab th { font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; color:var(--ink-500); text-align:center; padding:0 6px 6px; border-bottom:1px solid var(--border-soft); line-height:1.25; vertical-align:bottom; }
.of-tab th:first-child { text-align:left; padding-left:0; }
.of-tab td { padding:8px 6px; border-bottom:1px solid var(--border-soft); font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--ink-900); text-align:center; white-space:nowrap; }
.of-tab td.r { font-family:var(--font-sans); font-weight:400; font-size:12px; color:var(--ink-500); text-align:left; padding-left:0; white-space:normal; }
.of-tab td.perda { color:var(--risk-700); } .of-tab td.ganho { color:var(--ink-700); } .of-tab td.zero { color:var(--ink-400); }
.of-tab tr:last-child td { border-bottom:0; } .of-tab-meta { margin-top:6px; }
.of--neutro .of-tab td.perda { color:var(--ink-700); }
.of-painel-c3 { border-left:1px solid var(--border-soft); padding-left:24px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
.of-leitura-rot { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--ink-900); display:flex; align-items:center; gap:6px; }
.of-leitura-rot::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-600); }
.of-leitura-txt { font-size:13px; line-height:1.55; color:var(--ink-900); margin-top:6px; }
.of-det-bt { align-self:flex-start; border:1.5px solid var(--ink-900); font-weight:500; } .of-det-bt:hover { background:var(--ink-900); color:var(--chrome-text); }
.of-vazio { font-size:12px; color:var(--ink-400); }
/* histórico em oportunidade (painel e popup) */
.of-hist-cab { display:flex; justify-content:space-between; gap:12px; font-size:10.5px; color:var(--ink-500); }
.of-hist-area { display:flex; align-items:flex-end; gap:4px; border-bottom:1.5px solid var(--border-strong); margin-top:6px; margin-bottom:18px; }
.of-hist-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.of-hist-val { font-family:var(--font-mono); font-size:9px; color:var(--ink-500); white-space:nowrap; }
.of-hist-bar { width:100%; max-width:26px; background:var(--paper-300); border-radius:2px 2px 0 0; margin-top:2px; }
.of-hist-bar.ult { background:var(--risk-700); } .of-hist-col:hover .of-hist-bar { background:var(--ink-900); }
.of-hist-rot { font-family:var(--font-mono); font-size:9px; color:var(--ink-400); margin-top:4px; height:12px; position:relative; top:14px; }
.of-hist-rot { top:14px; }
/* embasamento */
.of-det { border-top:1px solid var(--border-hair); margin-top:16px; padding-top:12px; }
.of-det-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.of-det-racional { font-size:12.5px; line-height:1.55; color:var(--ink-700); max-width:820px; margin-top:4px; }
.of-det-tab { width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; }
.of-det-tab th { background:var(--bg-mute); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:500; color:var(--ink-500); text-align:left; padding:6px 12px; }
.of-det-tab td { padding:7px 12px; border-bottom:1px solid var(--border-soft); }
.of-det-tab tr:hover td { background:var(--bg-soft); }
.of-det-tab th.num, .of-det-tab td.num { text-align:right; font-family:var(--font-mono); } .of-det-tab td.neg { color:var(--risk-700); }
/* mapa */
.of-mapa { position:relative; overflow:auto; padding:30px 36px 34px; background:var(--bg-soft); }
.of-mapa-area { position:relative; }
.of-ligacoes { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.of-ligacoes .lig { fill:none; stroke:var(--border-strong); stroke-width:1.5; } .of-ligacoes .lig.quente { stroke:var(--ink-900); stroke-width:2.5; }
.of-no { position:absolute; width:164px; height:72px; box-sizing:border-box; padding:8px 10px; border-radius:7px; background:var(--bg-base); border:1.5px solid var(--border-strong); color:var(--ink-900); cursor:pointer; text-align:left; }
.of-no:hover { filter:brightness(.97); } .of-no.sel { border-color:var(--ink-900); }
.of-no--raiz { background:var(--ink-900); border-color:var(--ink-900); color:var(--chrome-text); }
/* Sérgio 30/09: todas as caixas iguais (branco + borda), só a raiz é preta; o caminho preto escurece a borda */
.of-no.caminho:not(.of-no--raiz) { border-color:var(--ink-900); }
.of-no.sem-medida { border-style:dashed; border-color:var(--border-strong); }
.of-no.destaque { box-shadow:0 0 0 2px var(--foco); }
.of-no-rot { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; padding-right:14px; }
.of-no--raiz .of-no-rot { font-size:14px; font-weight:600; }
.of-no-val { font-family:var(--font-mono); font-size:13px; font-weight:500; margin-top:2px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Sérgio 13/10 (R7): 2 linhas discretas abaixo da oportunidade — "total X" (soma sem compensar) e "projeção · referência · Δ%" */
.of-no-meta { font-size:10.5px; line-height:13px; color:var(--ink-500); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.of-no-val + .of-no-meta { margin-top:1px; } .of-no--raiz .of-no-meta { color:var(--chrome-muted); }
.of-no-val.perda { color:var(--risk-700); } .of-no-val.ganho { color:var(--ink-900); } .of-no-val.zero { color:var(--ink-400); } .of-no-val.sem-medida { color:var(--ink-400); font-family:var(--font-sans); font-size:11px; }
/* raiz: o número na mesma cor do bloco preto do cabeçalho (Sérgio 30/09), nunca o vermelho escuro sobre preto */
.of-no--raiz .of-no-val, .of-no--raiz .of-no-val.perda { font-size:15px; color:var(--risk-200); } .of-no--raiz .of-no-val.ganho { color:var(--chrome-text); } .of-no--raiz .of-no-val.zero { color:var(--chrome-muted); }
.of-chip { position:absolute; right:-12px; top:50%; transform:translateY(-50%); height:20px; padding:0 7px; border-radius:10px; background:var(--bg-base); border:1.5px solid var(--ink-900); color:var(--ink-900); font-family:var(--font-mono); font-size:10.5px; line-height:1; white-space:nowrap; font-weight:500; cursor:pointer; }
.of-chip:hover { background:var(--bg-mute); } .of-chip.foco { background:var(--foco); border-color:var(--foco); }
.of-op { position:absolute; width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; line-height:1; font-weight:500; color:var(--ink-900); }
/* O-CM2 (14/10): caixa MÉDIA (conversão por fonte) — sem operador entre as filhas; legenda curta acima da 1ª, a fórmula no hover */
.of-media { position:absolute; width:164px; height:13px; font-family:var(--font-mono); font-size:10px; line-height:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:help; }
/* popup da caixa */
.of-pop.esq { box-shadow:-8px 8px 24px rgba(9,9,11,.12); }   /* aberto à esquerda da caixa (não coube à direita na tela) */
.of-pop { position:absolute; z-index:5; width:340px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--r-4); box-shadow:0 8px 24px rgba(9,9,11,.12); padding:14px 16px 12px; cursor:default; }
.of-pop-cab { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; padding-right:22px; }
.of-pop-titulo { font-size:14px; font-weight:600; color:var(--ink-900); line-height:1.25; }
.of-pop-caminho { font-size:10.5px; color:var(--ink-500); margin-top:2px; }
.of-pop-expl { font-size:11.5px; color:var(--ink-500); line-height:1.4; margin-top:6px; }   /* Sérgio 13/10 (R9a): o que a caixa é */
.of-pop .of-linhas { margin-top:14px; } .of-pop .of-linha { min-height:28px; } .of-pop .of-linha .v { font-size:13px; } .of-pop .of-linha.op .v { font-size:16px; }   /* R5a: a oportunidade em destaque, com sinal */
.of-pop-tab { margin-top:12px; } .of-pop-tab td { padding:6px 4px; font-size:12px; } .of-pop-tab th { padding:0 4px 6px; }   /* R5b: a tabela do painel no popup */
.of-pop .of-hist { margin-top:18px; } .of-pop .of-leitura { margin-top:18px; } .of-pop .of-leitura-txt { font-size:12px; }   /* 6ª rodada: blocos mais espaçados */
.of-pop-etiqueta { display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-500); border:1px dashed var(--border-strong); border-radius:var(--r-1); padding:2px 6px; }
.of-pop-desc { font-size:11.5px; color:var(--ink-500); line-height:1.45; margin-top:10px; }
.of-pop-link { display:inline-block; margin-top:10px; font-size:12px; color:var(--accent-600); font-weight:500; }
/* Sérgio 13/10 (R5c/R5d + F33): botão "Detalhamento" do popup e o painel lateral do Onde focar — números | leitura + memória,
   gráficos 50/50 (histórico da oportunidade | as linhas que geram a oportunidade, pontilhada na projeção), listas pra agir com CSV */
.of-pop-det { margin-top:14px; }
.painel--lanc.painel--of { width:min(1040px, 100vw); }
.painel--of .cab-conta .titulo-valor.perda { color:var(--risk-700); }
.painel--of .cab-conta .titulo-valor .rot { font-family:var(--font-sans); font-size:12px; letter-spacing:0; color:var(--ink-500); margin-left:8px; }
.painel--of .of-lat-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; padding-top:14px; border-top:1px solid var(--border-hair); }
.painel--of .of-lat-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.painel--of .of-linha.op .v { font-size:16px; } .painel--of .of-linha.extra .v { font-size:13px; }
.painel--of .of-leitura-txt.vazio { color:var(--ink-400); font-size:12px; }
.of-mem .b-label { margin-bottom:6px; }
.of-mem-formula { font-family:var(--font-mono); font-size:12.5px; line-height:1.45; color:var(--ink-900); background:var(--bg-mute); border-radius:var(--r-2); padding:6px 10px; }
.painel--of table.memoria { width:100%; margin-top:6px; }
.painel--lanc.painel--of table.memoria td { font-size:12.5px; padding:5px 12px 5px 0; border-bottom:1px solid var(--border-soft); color:var(--ink-700); }
.painel--lanc.painel--of table.memoria td.num { text-align:right; font-family:var(--font-mono); white-space:nowrap; padding-right:0; color:var(--ink-900); }
.of-serie-leg { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11px; color:var(--ink-500); margin-top:4px; }
.of-serie-leg i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.of-serie-leg i.proj { width:16px; height:0; border-radius:0; border-top:2px dotted var(--ink-500); vertical-align:3px; }
.of-serie-svg svg { display:block; width:100%; height:auto; margin-top:4px; overflow:visible; }
.of-serie-svg .grade { stroke:var(--border-soft); stroke-width:1; } .of-serie-svg .zero { stroke:var(--border-strong); stroke-width:1; }
.of-serie-svg .eixo { font-family:var(--font-mono); font-size:10px; fill:var(--ink-400); }
.of-serie-svg .linha { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .of-serie-svg .linha.proj { stroke-dasharray:1 5; }
.of-serie-svg .fim { stroke:var(--bg-base); stroke-width:2; }
.of-serie-svg .valor { font-family:var(--font-mono); font-size:10.5px; font-weight:500; fill:var(--ink-700); }
.of-serie-svg rect.hit { fill:var(--ink-900); fill-opacity:0; } .of-serie-svg rect.hit:hover { fill-opacity:.04; }
.of-lat-lista { padding-top:14px; border-top:1px solid var(--border-hair); }
.of-lat-lista-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.of-lat-lista-cab .b-label .n { color:var(--ink-400); }
.of-lat-lista-cab .btn { padding:3px 10px; font-size:11.5px; }
.of-lat-rolo { overflow-x:auto; }
/* Sérgio 19/10: o título da lista desce com a rolagem do painel (onde-focar-detalhe.js → titulosAcompanham), acima das linhas */
.painel--of table.lista thead { position:relative; z-index:1; } .painel--of table.lista th { background:var(--bg-base); }
.painel--of table.lista thead[style*="translate"] th { box-shadow:inset 0 -1px 0 var(--border-hair); }   /* com border-collapse a borda fica pra trás: a linha vai junto */
.painel--lanc.painel--of table.lista td { padding:6px 14px 6px 0; }
.painel--lanc.painel--of table.lista th.num, .painel--lanc.painel--of table.lista td.num { text-align:right; }
.painel--of table.lista td.neg { color:var(--risk-700); }
.of--neutro .cab-conta .titulo-valor.perda, .of--neutro table.lista td.neg { color:var(--ink-700); }
@media (max-width: 860px) { .painel--of .of-lat-2 { grid-template-columns:1fr; gap:16px; } }
/* provisório: sem vermelho (dec. 9 do plano orçamento ↔ árvore) */
.of--neutro :is(.of-cartao-val, .of-no-val.perda, .of-linha.perda .v) { color:var(--ink-700); }
.of--neutro :is(.of-resumo-val, .of-no--raiz .of-no-val, .of-no--raiz .of-no-val.perda) { color:var(--chrome-text); }
.of--neutro .of-hist-bar.ult { background:var(--ink-700); }
@media (max-width: 1100px) { .of-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .of-painel-grid { grid-template-columns:1fr; gap:16px; } .of-painel-c3 { border-left:0; padding-left:0; } }
@media (max-width: 640px) { .of-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .of-faixa { padding:14px 16px; } .of-mapa { padding:20px 16px; } }


/* Agentes (ex-Automações, Sérgio 15/09): cards placeholder — nome, título serif, o que faz, 6 passos numerados, CTA */
.agentes-cab { margin-bottom:20px; } .agentes-cab .b-title { margin-top:4px; max-width:820px; }
.agentes-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.agente { display:flex; flex-direction:column; gap:10px; }
.agente-topo { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.agente-titulo { font-family:var(--font-serif); font-size:20px; line-height:var(--lh-snug); color:var(--ink-900); font-weight:600; margin:0; }   /* Sérgio 15/09: só o título em negrito */
.agente-desc { margin:0; }
.agente-passos { list-style:none; margin:4px 0 0; padding:12px 0 0; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:6px; font-size:var(--t-meta); color:var(--ink-700); }
.agente-passos li { display:flex; gap:10px; align-items:baseline; }
.agente-passos .b-mono { color:var(--accent-600); font-size:var(--t-label); }
.agente-cta { margin-top:auto; padding-top:8px; }
@media (max-width: 1100px) { .agentes-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .agentes-grid { grid-template-columns:1fr; } }

/* Em breve (Sérgio 15/09): placeholder de Release · Vendas e Mkt · Operação — cabeçalho + card com as seções que vão existir */
.embreve-cab { margin-bottom:20px; } .embreve-cab .b-title { margin-top:4px; max-width:820px; }
.embreve-card { display:flex; flex-direction:column; gap:10px; max-width:820px; }
.embreve-topo { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.embreve-desc { margin:0; }
.embreve-secoes { list-style:none; margin:4px 0 0; padding:12px 0 0; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:10px; }
.embreve-secoes li { display:flex; gap:12px; align-items:baseline; }
.embreve-secoes .b-mono { color:var(--accent-600); font-size:var(--t-label); }
.embreve-secao-titulo { font-family:var(--font-serif); font-size:18px; line-height:var(--lh-snug); color:var(--ink-900); }

/* ---- Tela Dados = mockup Dados.dc.html (Sérgio 17/09): caixa de upload cinza · últimos envios no lugar dos
   "Arquivos da Bucck pra você" · bases do mês e "portal completo" na mesma tabela compacta, 20px entre os boxes ---- */
.dados { display:flex; flex-direction:column; gap:20px; }
.dados > .grid-2 { gap:20px; margin-bottom:0; align-items:stretch; }
.dados .card { display:flex; flex-direction:column; gap:10px; }
.dados .ajuda { margin:0; font-size:12px; color:var(--ink-500); }
.dados .drop { display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px; text-align:center; cursor:pointer; color:var(--ink-500);
  border:2px dashed var(--paper-400); border-radius:var(--r-3); background:var(--bg-soft); transition:background var(--dur-1) var(--ease); }
.dados .drop:hover:not(.drop--travado) { background:var(--bg-mute); }   /* Sérgio 21/09: hover escurece de leve o cinza */
.dados .drop.sobre, .dados .drop.sobre:hover { background:var(--accent-50); border-color:var(--accent-400); }   /* arrastar segue azul (17/09) */
.dados .drop .forte { font-weight:500; color:var(--ink-700); }
.dados .drop .fmt { font-size:12px; }
.dados .drop--travado { cursor:default; font-size:13px; }
.dados .envio-lista { margin:0; padding-left:18px; }
.dados .envio-lista:empty { display:none; }
/* linhas o mais baixas possível (Sérgio 17/09): cabeçalho mono, td 3px, botão claro e menor.
   Todas as colunas de texto na mesma formatação (a da coluna Empresa). */
table.bases th { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:6px 8px; }
table.bases td { padding:3px 8px; font-size:13px; line-height:1.35; vertical-align:middle; color:var(--ink-500); }
/* Sérgio 17/09: tudo centrado (vertical e horizontal) menos Base e Observação; Empresa com o dobro da
   largura e Base +30% — a Observação absorve a diferença */
table.bases th.acao, table.bases td.acao, table.bases th.sit, table.bases td.sit,
table.bases th.quando, table.bases td.quando, table.bases th.meses, table.bases td.meses, table.bases th.ate, table.bases td.ate,
table.bases th.empresa, table.bases td.empresa { text-align:center; white-space:nowrap; }
table.bases th.acao, table.bases td.acao { width:1%; }
table.bases td.acao .btn + .btn { margin-left:6px; }   /* Enviar/Reenviar + Modelo (Sérgio 24/09) */
table.bases td.acao .btn-modelo { font-weight:400; }   /* Modelo sem negrito (Sérgio 30/09) */
/* painel Modelo da base (Sérgio 24/09): cabeçalho esperado + 1 linha de exemplo; rola na horizontal com muitas colunas */
.painel--modelo .modelo-corpo { display:flex; flex-direction:column; gap:28px; }   /* 4 blocos espaçados */
.painel--modelo .modelo-bloco { display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--paper-200); }
.painel--modelo .modelo-bloco:first-child { padding-top:0; border-top:0; }
.painel--modelo .modelo-desc { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; font-size:14px; }
.painel--modelo .modelo-desc dt { color:var(--ink-400); }
.painel--modelo .modelo-desc dd { margin:0; color:var(--ink-900); }
.painel--modelo .modelo-texto { margin:0; font-size:14px; color:var(--ink-700); line-height:1.5; }
.painel--modelo table.modelo-arquivos td.arq { font-family:var(--font-mono); white-space:normal; word-break:break-all; }
.painel--modelo table.modelo-arquivos { width:100%; }
.painel--modelo table.modelo-arquivos td.baixar { width:1%; text-align:right; }
.painel--modelo .modelo-tabela { overflow-x:auto; border:1px solid var(--border-strong); border-radius:var(--r-2); }
.painel--modelo table.lista { border-collapse:collapse; width:max-content; min-width:100%; }
.painel--modelo table.lista th { background:var(--paper-100); white-space:nowrap; padding:8px 12px; text-align:left; }
.painel--modelo table.lista td { white-space:nowrap; padding:8px 12px; font-family:var(--font-mono); color:var(--ink-700); }
.painel--modelo .b-meta { margin:0; }
table.bases th.sit, table.bases td.sit { width:118px; }
table.bases th.quando, table.bases td.quando { width:84px; }
table.bases th.meses, table.bases td.meses { width:118px; }
table.bases th.ate, table.bases td.ate { width:150px; }   /* Atualizado até: data ou tag da situação (Sérgio 30/09) */
table.bases td.ate .ate-data { margin-left:6px; }
table.bases th.empresa, table.bases td.empresa { width:150px; }
table.bases th.base, table.bases td.base { width:28%; text-align:left; }
table.bases th.obs, table.bases td.obs { text-align:left; min-width:240px; }
table.bases th.baixar, table.bases td.baixar { width:1%; text-align:right; }
table.bases td.arq { overflow-wrap:anywhere; }
table.bases tr.grp td { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-500); font-weight:500; padding-top:14px; }
table.bases .btn { padding:3px 10px; }
/* pílula de situação: não enviado · fora do padrão · em análise · concluído · opcional */
.st { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; padding:2px 8px; border-radius:var(--r-1); white-space:nowrap; border:1px solid transparent; }
.st--ok { background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200); }
.st--warn { background:var(--warn-100); color:var(--warn-700); border-color:var(--warn-200); }
.st--risk { background:var(--risk-100); color:var(--risk-700); border-color:var(--risk-200); }
.st--accent { background:var(--accent-50); color:var(--accent-700); border-color:var(--accent-200); }
.st--opt { background:var(--bg-soft); color:var(--ink-400); border-color:var(--paper-200); }
.acoes-centro { display:flex; justify-content:center; margin-top:auto; padding-top:6px; }
@media (max-width: 860px) { .dados > .grid-2 { grid-template-columns:1fr; } }

/* ---- Contexto · "Como projetamos cada conta da DRE" (Sérgio 17–18/09): tabela dos modelos (1ª linha e 1ª coluna em cinza)
   + a árvore da aba DRE com o modelo de cada conta — pele, hover e seta de abrir/fechar vêm do .dre-card ---- */
/* Sérgio 13/10 (R3): destino do "entenda a projeção" dos gráficos (#/dados/regras/projecao) — o bloco para abaixo do topo fixo (+ abas) */
.proj-bloco { scroll-margin-top:128px; }
.proj-bloco table.proj-modelos { margin:16px 0 4px; border:1px solid var(--border-hair); border-collapse:separate; border-spacing:0; border-radius:var(--r-2); overflow:hidden; }
.proj-bloco table.proj-modelos thead th { background:var(--bg-mute); color:var(--ink-700); font-weight:600; }
.proj-bloco table.proj-modelos td.modelo { background:var(--bg-mute); width:170px; }
.proj-bloco table.proj-modelos td { vertical-align:top; }
.proj-bloco table.proj-modelos tbody tr:last-child td { border-bottom:0; }
.proj-bloco table.proj-modelos td.ex { font-style:italic; }
.proj-bloco .proj-barra { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 8px; }
.proj-bloco .proj-dre table.dre { min-width:0; width:100%; }
.proj-bloco .proj-dre table.dre th:first-child, .proj-bloco .proj-dre table.dre td:first-child { width:auto; }
.proj-bloco .proj-dre table.dre td { padding-top:4px; padding-bottom:4px; }
.proj-bloco .proj-dre table.dre th.col-mod, .proj-bloco .proj-dre table.dre td.mod { width:360px; padding-left:14px; white-space:nowrap; }
.proj-bloco .proj-dre table.dre td.mod.soma { color:var(--ink-400); font-weight:400; font-size:12px; }
.proj-bloco .proj-dre .sel-modelo { font:inherit; font-size:12px; padding:2px 6px; border:1px solid var(--border-hair); border-radius:var(--r-2);
  background:var(--bg-base); color:var(--ink-700); max-width:220px; }
.proj-bloco .proj-dre .sel-modelo:hover { border-color:var(--border-strong); }
.proj-bloco .proj-dre .btn--sm { padding:2px 10px; font-size:12px; margin-left:8px; }
.proj-bloco .proj-dre td.mod .chip, .proj-bloco .proj-dre td.mod .estado { margin-left:8px; }
@media (max-width: 760px) { .proj-bloco .proj-barra { flex-direction:column; align-items:flex-start; } }
/* ── DRE · cartões de hover (Sérgio 21/09; ui/cartao-hover.js abre à direita do alvo, com folga) ── */
.cartao-hover { position:fixed; z-index:45; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--r-3); box-shadow:0 12px 36px rgba(9,9,11,.16); }
/* "entenda esta linha": símbolo ao lado do nome da conta macro (ou o Δ) → frase da linha no topo · cascata · leitura à direita */
.dre-card .ob-ponte { border:0; background:transparent; padding:2px; margin-left:8px; color:var(--ink-300); cursor:pointer; vertical-align:-1px; line-height:0; border-radius:2px; }
.dre-card tr:hover .ob-ponte, .dre-card .ob-ponte:hover, .dre-card .ob-ponte:focus-visible { color:var(--accent-700); }
.dre-card table.dre td.abre-ponte, .dre-card table.dre td.abre-evo { cursor:help; }
.dre-card table.dre td.abre-ponte:hover { text-decoration:underline dotted; text-underline-offset:3px; }
.ponte-pop { width:860px; padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.ponte-pop.so-grafico { width:500px; }
.ponte-pop .pt-topo { margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-700); }
.ponte-pop .pt-topo b { font-weight:600; color:var(--ink-900); } .ponte-pop .pt-topo b.pior { color:var(--risk-700); } .ponte-pop .pt-topo b.melhor { color:var(--ok-700); }
.ponte-pop .pt-corpo { display:grid; grid-template-columns:minmax(0, 460px) minmax(0, 1fr); gap:18px; align-items:start; }
.ponte-pop.so-grafico .pt-corpo { grid-template-columns:1fr; }
.ponte-pop .pt-item:hover rect { opacity:.8; }
.ponte-pop .pt-leitura { list-style:none; margin:0; padding:2px 0 2px 14px; border-left:2px solid var(--border-hair); display:flex; flex-direction:column; gap:10px; }
.ponte-pop .pt-leitura li { position:relative; padding-left:14px; font-size:12.5px; line-height:1.5; color:var(--ink-700); }
.ponte-pop .pt-leitura li i { position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--ink-400); }
.ponte-pop .pt-leitura li i.pior { background:var(--risk-700); } .ponte-pop .pt-leitura li i.melhor { background:var(--ok-700); } .ponte-pop .pt-leitura li i.alerta { background:var(--warn-700); }
.ponte-pop .pt-leitura li b { font-weight:600; color:var(--ink-900); }
.ponte-pop .pt-leitura li.tendencia b { color:var(--warn-700); }
@media (max-width: 900px) { .ponte-pop { width:500px; } .ponte-pop .pt-corpo { grid-template-columns:1fr; } .ponte-pop .pt-leitura { border-left:0; padding-left:0; } }
/* evolução da linha: hover na mini-linha → gráfico + tabela mês a mês */
.evo-pop { width:600px; padding:14px 16px 14px; display:flex; flex-direction:column; gap:6px; }
.evo-pop .evo-cab { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--ink-900); }
.evo-pop .evo-cab b { font-weight:600; }
.evo-pop .evo-leg { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-400); white-space:nowrap; }
.evo-pop .evo-leg i { display:inline-block; width:16px; height:0; border-top:1.5px solid var(--ink-900); margin-left:8px; } .evo-pop .evo-leg i.proj { border-top:1.5px dashed var(--ink-400); }
.evo-pop table.evo-tab { width:100%; border-collapse:collapse; table-layout:fixed; font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.evo-pop table.evo-tab th { font-size:10px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-400); padding:4px 0 2px; text-align:center; border-top:1px solid var(--border-hair); }
.evo-pop table.evo-tab td { font-size:12px; color:var(--ink-700); padding:2px 0; text-align:center; white-space:nowrap; }
.evo-pop table.evo-tab .proj { color:var(--ink-400); }
.evo-pop table.evo-tab .tela { color:var(--accent-700); font-weight:600; }

/* ---- Conciliação dia × conta (ADR 0016, mockup v6 aprovado 12/10): 3 cards (Problemas à esquerda; Pendente e Conciliado à direita),
   grade dia × conta (verde bateu · vermelho sem par · âmbar corrigir · cinza sem extrato), popups com espelho BANCO | ERP ---- */
.conc-grade .cg-titulo { font-family:var(--font-serif); font-weight:400; font-size:var(--t-title); line-height:var(--lh-tight); letter-spacing:var(--ls-title); color:var(--ink-900); margin:0 0 16px; }
.conc-grade .cg-aviso { margin:0 0 12px; }
/* mês sem a grade (R14, Sérgio 13/10/2026): o aviso padrão (.nd) no meio do corpo da aba — rótulo · título curto · Enviar extratos */
.conc-sem-grade { display:flex; align-items:center; justify-content:center; min-height:40vh; padding:24px 0; }
.conc-sem-grade .nd { width:100%; max-width:520px; align-items:center; text-align:center; padding:24px; }
.conc-sem-grade .nd > .btn { align-self:center; }
.conc-sem-grade .nd .titulo.crit { cursor:help; text-decoration:underline dotted var(--border-strong); text-underline-offset:4px; text-decoration-thickness:1px; }
.cg-cab { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"prob pend" "prob conc"; gap:16px; margin-bottom:18px; }
.cg-cab .cg-prob { grid-area:prob; } .cg-cab .cg-pend { grid-area:pend; } .cg-cab .cg-conc { grid-area:conc; }
.cg-cab .card { min-width:0; }
.cg-vl { font-family:var(--font-serif); font-size:34px; letter-spacing:-0.02em; line-height:1.1; color:var(--ink-900); margin:8px 0 4px; white-space:nowrap; }
.cg-vl.r { color:var(--risk-700); }
.cg-imp { margin-top:6px; color:var(--ink-700); }   /* faixa "Pode mexer na DRE" (13/10); sem hover desde 14/10 (Sérgio) */
.cg-grp { font-size:11px; color:var(--ink-400); margin:12px 0 2px; }
.cg-row { display:grid; grid-template-columns:minmax(0,1fr) auto 12px; gap:10px; align-items:center; width:100%; text-align:left; padding:5px 6px; border-radius:var(--r-1); position:relative; }
.cg-row:hover { background:var(--bg-mute); }
.cg-row .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--t-body-sm); color:var(--ink-700); }
.cg-row .num { font-family:var(--font-mono); font-feature-settings:"tnum" 1; font-size:12px; color:var(--ink-500); white-space:nowrap; }
.cg-row .num b { font-weight:500; color:var(--ink-700); }
.cg-row .ch { color:var(--ink-300); }
.cg-row .bar { position:absolute; left:6px; bottom:1px; height:2px; border-radius:1px; }
.cg-row .bar--risk { background:var(--risk-600); } .cg-row .bar--warn { background:var(--warn-600); }
.cg-row .cg-link { font-family:var(--font-sans); color:var(--accent-600); font-weight:500; }
.conc-grade .dot, .painel--conc .dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:7px; vertical-align:1px; background:var(--ink-300); }
.conc-grade .dot--risk, .painel--conc .dot--risk { background:var(--risk-600); } .conc-grade .dot--warn, .painel--conc .dot--warn { background:var(--warn-600); }
.cg-vazio { font-size:var(--t-meta); color:var(--ok-700); margin-top:12px; }
.cg-fora { margin:10px 0 0; cursor:help; }
.cg-leg { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-500); margin:0 0 8px; }
.cg-leg i { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:6px; }
.cg-leg-ok { background:var(--ok-50); border:1px solid var(--ok-200); } .cg-leg-sp { background:var(--risk-100); } .cg-leg-cr { background:var(--warn-100); } .cg-leg-se { background:var(--paper-100); border:1px solid var(--border-hair); }
.cg-dica { font-size:11px; color:var(--ink-400); margin:0 0 6px; }
/* Sérgio 12/10: o cabeçalho trava e só os dias rolam — a grade rola dentro da caixa (altura da tela menos o cabeçalho fixo do portal,
   topo + abas = --cab-h desde 13/10, e o respiro do fim da página, ~60 px + folga: no fim da rolagem a caixa inteira fica visível abaixo
   dele). dvh: no celular a barra do navegador não come o pé da grade; nunca menos de 240 px (celular deitado) */
.cg-wrap { overflow:auto; max-height:max(240px, calc(100vh - var(--cab-h) - 76px)); max-height:max(240px, calc(100dvh - var(--cab-h) - 76px)); background:var(--bg-base); border:1px solid var(--border-hair); border-radius:var(--r-3); padding:0 8px; }
table.cg-grade { border-collapse:separate; border-spacing:0; font-size:12px; width:100%; }
table.cg-grade th { font-weight:500; font-size:11px; color:var(--ink-500); text-align:center; padding:10px 3px 8px; line-height:1.3; background:var(--bg-base); vertical-align:bottom; min-width:72px; white-space:nowrap; position:sticky; top:0; z-index:3; }
table.cg-grade th .sub { font-weight:400; color:var(--ink-400); }
table.cg-grade td { height:26px; padding:1px 3px; text-align:center; }
table.cg-grade .d { position:sticky; left:0; z-index:2; background:var(--bg-base); text-align:left; min-width:52px; width:52px; color:var(--ink-500); font-size:11px; white-space:nowrap; }
table.cg-grade .gc { position:sticky; left:52px; z-index:2; background:var(--bg-base); box-shadow:1px 0 0 var(--border-hair); min-width:76px; }
table.cg-grade th.d, table.cg-grade th.gc { z-index:4; }
table.cg-grade th.cg-emp, table.cg-grade th.cg-sx { cursor:pointer; color:var(--ink-700); border-radius:var(--r-1); }
table.cg-grade th.cg-erp { cursor:help; }
table.cg-grade th.cg-nc { color:var(--warn-700); font-weight:600; }
table.cg-grade .sub-col { background:var(--bg-soft); }
table.cg-grade th.sub-col { font-weight:400; color:var(--ink-400); }
.cg-c { border-radius:var(--r-1); height:22px; line-height:22px; cursor:pointer; font-family:var(--font-mono); font-feature-settings:"tnum" 1; font-size:11px; padding:0 4px; white-space:nowrap; overflow:hidden; border-left:3px solid transparent; }
.cg-c.ok { background:var(--ok-50); color:var(--ok-700); }
.cg-c.sp { background:var(--risk-100); color:var(--risk-700); font-weight:500; }
.cg-c.cr { background:var(--warn-100); color:var(--warn-700); }
.cg-c.se { background:var(--paper-100); color:var(--ink-400); font-family:var(--font-sans); font-size:10.5px; }
.cg-c.sel { border-left-color:var(--ink-900); }
/* linha Total (Sérgio 12/10): fixa embaixo da caixa, como o cabeçalho em cima — só os dias rolam */
table.cg-grade tr.cg-tot td { position:sticky; bottom:0; z-index:3; background:var(--bg-base); border-top:1px solid var(--border-strong); padding:4px 3px 8px; height:auto; }
table.cg-grade tr.cg-tot td.d, table.cg-grade tr.cg-tot td.gc { z-index:4; }
table.cg-grade tr.cg-tot td.d { color:var(--ink-700); font-weight:500; }
table.cg-grade tr.cg-tot .cg-c { cursor:default; font-weight:600; }
/* moldura da empresa aberta (Sérgio 12/10): caixa cinza-escura na coluna da empresa; as contas dela fecham embaixo e à direita */
table.cg-grade .grp-tot { border-left:1px solid var(--ink-500); border-right:1px solid var(--ink-500); }
table.cg-grade th.grp-tot { border-top:1px solid var(--ink-500); border-top-left-radius:var(--r-1); border-top-right-radius:var(--r-1); }
table.cg-grade .grp-fim { border-right:1px solid var(--ink-500); }
table.cg-grade tr.cg-tot td.grp-tot, table.cg-grade tr.cg-tot td.grp-sub { border-bottom:1px solid var(--ink-500); }
table.cg-grade tr.cg-mk td { border-top:2px solid var(--ok-200); color:var(--ok-700); font-size:11px; text-align:left; padding:3px 4px 6px; height:auto; }
/* popups (dia · motivo · falta de extrato) */
.painel--lanc.painel--conc { width:min(720px, 100vw); }
.painel--conc .cab { align-items:flex-start; padding-bottom:10px; border-bottom:1px solid var(--border-hair); }
.painel--conc .cg-ptit { font-family:var(--font-serif); font-size:22px; line-height:1.2; color:var(--ink-900); margin:4px 0 2px; }
.painel--conc .cg-rs { font-size:var(--t-meta); color:var(--ink-500); }
.painel--conc .cg-rs .r { color:var(--risk-700); font-weight:500; } .painel--conc .cg-rs .a { color:var(--warn-700); font-weight:500; } .painel--conc .cg-rs .k { color:var(--ok-700); font-weight:500; }
.painel--conc .cg-pextra:empty { display:none; }
.painel--conc .cg-bts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cg-hd, .cg-par { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px; }
.cg-hd { position:sticky; top:-24px; z-index:2; background:var(--bg-base); margin-top:2px; }
.cg-hd > div { padding:6px 10px; display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink-900); }
.cg-hd > .cg-hd-b { background:var(--paper-50); }
.cg-hd > .x { border-bottom-color:transparent; padding:0; }
.cg-hd .t { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:500; color:var(--ink-900); }
.cg-hd .s { font-size:11px; color:var(--ink-400); }
.cg-sec { font-size:12px; font-weight:500; color:var(--ink-500); margin:16px 0 0; display:flex; align-items:center; }
.cg-item { border-bottom:1px solid var(--border-soft); padding:2px 0 4px; position:relative; }
.cg-onde { font-size:11px; color:var(--ink-400); margin:8px 0 3px; padding:0 2px; }
.cg-lado { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:6px 10px; font-size:var(--t-meta); color:var(--ink-700); min-width:0; }
.cg-lado.b { background:var(--paper-50); }
.cg-lado.cor { margin:4px 6px; border:1px dashed var(--warn-200); background:var(--warn-100); border-radius:var(--r-2); padding:4px 8px; }
.cg-lado .tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-lado .v { text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; font-size:12px; white-space:nowrap; }
.cg-lado .doc { grid-column:1/-1; margin-top:-2px; font-size:11px; color:var(--ink-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-lado.cor .doc b { color:var(--warn-700); font-weight:500; }
.cg-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-500); border:1px solid var(--border-strong); border-radius:3px; padding:0 3px; margin-right:5px; }
.cg-falta { margin:4px 6px; border:1px dashed var(--risk-200); border-radius:var(--r-2); background:var(--risk-100); color:var(--risk-700); font-size:12px; display:flex; align-items:center; justify-content:center; padding:4px 6px; text-align:center; }
.cg-falta.nc { border-color:var(--border-hair); background:var(--paper-50); color:var(--ink-500); }
.cg-falta.dec { border-style:solid; border-color:var(--border-hair); background:var(--paper-50); color:var(--ink-500); font-size:11px; }   /* declarado na config (tesouraria · não é receita): explicação, não falta */
.cg-eq { display:flex; align-items:center; justify-content:center; }
.cg-eq span { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; background:var(--bg-mute); color:var(--ink-500); }
.cg-eq span.dif { background:var(--warn-100); color:var(--warn-700); font-weight:500; } .cg-eq span.no { background:var(--risk-100); color:var(--risk-700); }
.cg-item.bt .cg-lado { color:var(--ink-500); padding-top:4px; padding-bottom:4px; }
.cg-iac { display:flex; align-items:center; justify-content:center; }
.cg-ia { width:22px; height:22px; border-radius:50%; background:var(--accent-50); color:var(--accent-600); border:1px solid var(--accent-100); font-size:12px; line-height:20px; text-align:center; cursor:help; }
.cg-ia:hover, .cg-ia:focus { background:var(--accent-100); outline:0; }
.cg-mais { margin-top:8px; }
table.cg-falta-tab td.num { font-family:var(--font-mono); font-feature-settings:"tnum" 1; text-align:right; } table.cg-falta-tab th.num { text-align:right; }
table.cg-falta-tab tr.cg-falta-emp td { font-size:11px; color:var(--ink-400); padding-top:14px; border-bottom:0; }
table.cg-falta-tab td.cg-nenhum { color:var(--risk-700); }
@media (max-width: 600px) {
  .cg-cab { grid-template-columns:1fr 1fr; grid-template-areas:"pend conc" "prob prob"; gap:10px; }
  .cg-vl { font-size:24px; }
  .conc-grade .cg-titulo { font-size:26px; }
  .cg-hd { display:none; } .cg-par { grid-template-columns:1fr; } .cg-eq { display:none; }
  .cg-lado { grid-template-columns:44px minmax(0,1fr) auto; padding:5px 8px; }
  .cg-lado::before, .cg-falta::before { content:attr(data-l); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-500); font-weight:500; }
  .cg-lado .doc { grid-column:2/-1; }
  .cg-falta { justify-content:flex-start; gap:12px; }
  .cg-iac { position:absolute; right:2px; top:2px; }
  .cg-item.tem-ia .cg-onde { padding-right:30px; }
  .painel--conc .cab { flex-direction:column; }
}

/* "?" discreto ao lado de um título (Sérgio 14/10/2026): clique abre o racional curto do bloco (ui/ajuda.js) */
.ajuda-bt { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px; padding:0; vertical-align:2px;
  border:1px solid var(--ink-300); border-radius:50%; background:transparent; color:var(--ink-400); font-size:10px; font-weight:600; line-height:1; cursor:pointer; }
.ajuda-bt:hover, .ajuda-bt[aria-expanded="true"] { color:var(--ink-700); border-color:var(--ink-500); }
.ajuda-quadro { position:absolute; z-index:45; width:340px; max-width:calc(100vw - 32px); background:var(--bg-base); border:1px solid var(--border-strong);
  border-radius:var(--r-4); box-shadow:0 8px 24px rgba(9,9,11,.12); padding:12px 14px; text-transform:none; letter-spacing:normal; font-family:var(--font-sans, inherit); }
.ajuda-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.ajuda-titulo { font-size:13px; font-weight:600; color:var(--ink-900); }
.ajuda-x { border:0; background:transparent; color:var(--ink-400); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.ajuda-lista { margin:8px 0 0; padding-left:16px; }
.ajuda-lista li { font-size:12px; line-height:1.45; color:var(--ink-700); margin:0 0 4px; }
.receita-bloco { position:relative; }   /* âncora do quadro do "?" (ui/ajuda.js) */
/* ── Onde focar · visão Tabela (Sérgio 14/10/2026; mockup docs/portal-v5/mockups/pulso_tabela_v11.html): a tabela da tela Orçamento
   (.dre-card/.orc-card) com Oportunidade · Projeção do mês · Até dia N. Dentro do bloco as 3 colunas têm largura fixa e ficam juntas
   no meio (.esp = margem vazia de cada lado, segura a largura do bloco). Top 5: pontilhado só na célula da Oportunidade + posição no
   canto. Cor: perda = risk-700, ganho = tinta, zero = ink-400 (sem verde); as regras ficam acima das de linha do Orçamento ── */
.of-tabela { padding:20px 24px 24px; background:var(--bg-soft); }
.of-tabela .card { padding:12px 16px 14px; }
.of-tabela table.dre th.num, .of-tabela table.dre td.num { min-width:74px; }
.of-tabela .orc-card table.dre .col-d { width:84px; min-width:84px; max-width:84px; padding-left:4px; padding-right:4px; }
.of-tabela .orc-card table.dre .esp { width:5%; min-width:12px; padding:0; }
.of-tabela .orc-card table.dre .col-op { width:13%; }
.of-tabela .orc-card table.dre tr > td.perda { color:var(--risk-700); }
.of-tabela .orc-card table.dre tr > td.ganho { color:var(--ink-700); }
.of-tabela .orc-card table.dre tr > td.zero { color:var(--ink-400); }
.of-tabela .orc-card table.dre tr > td.op { font-weight:600; }
.of-tabela .orc-card table.dre tr.premissa > td.op { font-weight:500; }
.of-tabela .orc-card table.dre tr > td.col-op.clicavel { cursor:pointer; }
.of-tabela .orc-card table.dre tr > td.col-op.clicavel:hover { text-decoration:underline dotted; text-underline-offset:3px; }
.of-tabela .orc-card table.dre tr:is(.sel, .pop) > td { background-color:var(--bg-mute); }
.of-tabela .orc-card table.dre tr.sel > td:first-child { box-shadow:inset 3px 0 0 var(--foco), inset -1px 0 0 var(--border-strong); }
.of-tabela .orc-card table.dre tr.top5 > td.col-op { position:relative; border-top:2px dotted var(--foco); border-left:2px dotted var(--foco); border-right:2px dotted var(--foco); }
.of-tabela .orc-card table.dre tr.top5.fim > td.col-op { border-bottom:2px dotted var(--foco); }
.of-tabela .of-top { position:absolute; left:6px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-style:normal; font-size:10px; font-weight:500; line-height:1; color:var(--ink-500); }
.of-tabela .dre-nota { color:var(--ink-400); font-size:11px; margin:10px 0 0; }
.of--neutro .of-tabela .orc-card table.dre tr > td.perda { color:var(--ink-700); }   /* orçamento provisório: sem vermelho, como no mapa */
/* "Comparar com" com o texto fora da caixa (ui/seletor-comparar.js · rotuloFora; por enquanto só no Onde focar) */
.sel-fora { display:inline-flex; align-items:center; gap:8px; }
.sel-fora-rot { font-size:12px; color:var(--ink-500); white-space:nowrap; }