/* Financeiro Grupo Nimbus (Dash) — Tarefa 03 do projeto financeiro-grupo-nimbus.

   Isolamento: mesmo padrão de contabilidade_style.css / parceiros_tax_style.css /
   faturamento_style.css — o arquivo inteiro vive dentro de @scope (.fgn-app), então nenhuma regra
   daqui vaza pra outra página, e o fundo/tipografia ficam no :scope (a div raiz do relatório,
   className="fgn-app" em pages/relatorio_financeiro_nimbus.py) em vez de :root/body.

   Identidade visual: própria deste relatório, extraída do "Relatório Financeiro Grupo Nimbus.pbix"
   (ver 01/02_APROVADO). Não é a marca de cliente usada em Contabilidade/Parceiros-Tax nem o design
   system do painel interno usado no Faturamento. Paleta de 5 cores do .pbix, aplicada nos mesmos
   papéis do original: dourado como cor principal (título, marca, resultado), azul petróleo como
   fundo, teal como secundário, verde/vermelho como indicadores de sinal.

   Layout corrigido em 17/09/2026 contra o print real da tela (ver arquivo 02): saíram os 3
   gráficos de área e os filtros de Categoria/Departamento; entraram a mini linha de tendência no
   fundo dos cards de KPI e um bloco único "Análise Temporal".

   Fontes: declaradas como Rubik/Inter igual aos outros relatórios deste domínio. O analytics não
   carrega webfont em nenhum relatório hoje (só declara a família), então aqui também não há
   @import — acrescentar um mudaria a aparência das outras páginas sem ninguém ter pedido. */
@scope (.fgn-app) {

:scope {
    /* Paleta do .pbix */
    --fgn-dourado: #FFBC5A;
    --fgn-petroleo: #2A4E5D;
    --fgn-teal: #50A5A0;
    --fgn-verde: #72D567;
    --fgn-vermelho: #E3464E;

    /* Derivados: fundo em degradê e as superfícies translúcidas sobre ele */
    --fgn-fundo-topo: #1B3542;
    --fgn-bloco-bg: rgba(244, 252, 255, 0.055);
    --fgn-bloco-borda: rgba(244, 252, 255, 0.14);
    --fgn-card-bg: rgba(244, 252, 255, 0.05);
    /* O TEXTO É DOURADO (Tarefa 34). Pedido do usuário olhando a tela pronta: "no Power BI já é
       assim, é tudo aquele dourado; aqui está meio misturado". E o `.pbix` concorda: lá o texto
       de moldura é #FFBC5A em todo lugar que declara cor, do rótulo de eixo ao item de slicer.

       São estas DUAS variáveis, e é por isso que elas existem: o relatório inteiro sai daqui, e
       trocar a cor do texto é trocar duas linhas em vez de trinta e cinco regras.

       O TOM FRACO SUBIU DE 58% PARA 86%, e é medido, não gosto. O dourado é mais escuro que o
       branco, então a 58% ele cai de 3,70:1 para 2,56:1 contra a superfície dos blocos, abaixo
       do piso de 3:1 até para texto grande. A 86% volta a 3,84:1, que é o primeiro passo acima
       da régua de hoje. A hierarquia de forte e fraco continua existindo, agora entre 100% e
       86% em vez de 100% e 58%. */
    --fgn-texto: var(--fgn-dourado);
    --fgn-texto-fraco: rgba(255, 188, 90, 0.86);

    /* A FAIXA DE ABAS é a exceção, e é do usuário: "ali em cima, onde você clica para
       selecionar as abas, elas têm aquela cor que elas estão, e quando clica vira dourado. Isso
       pode continuar como está." Faz sentido além do gosto: a aba selecionada JÁ é dourada, e
       se as outras também fossem, a seleção perderia o sinal mais forte que ela tem.

       Por isso o branco antigo continua existindo, com nome próprio e usado em dois lugares só
       (ver .fgn-abas-item). Sem isto ele viraria número solto no meio do arquivo. */
    --fgn-abas-texto: #F4FCFF;
    --fgn-abas-texto-fraco: rgba(244, 252, 255, 0.58);

    /* Fundo OPACO do cabeçalho fixo de tabela. Tem de ser opaco, e não a superfície translúcida
       dos blocos, porque as linhas passam por baixo dele enquanto se rola. */
    --fgn-cabecalho-fixo: #27495A;

    /* Quanto a página gasta ACIMA e ABAIXO de uma tabela que rola por dentro (Tarefa 15). Não é
       número chutado: é a soma da caixa que já está neste arquivo, medida na tela renderizada.
         acima  = 22 do respiro do topo + 58 do cabeçalho com logo + 49 da faixa de abas
                  + 102 do bloco de filtros + 14 do respiro interno do bloco  = 245
         abaixo = 10 + 14 do bloco + ~16 da linha de rodapé + 34 do respiro de baixo = 74
       O que importa é que o limite vem de 100vh: em tela de notebook e em tela grande a tabela
       ocupa o que sobra, sem número fixo de altura. */
    --fgn-acima-da-tabela: 320px;

    /* Tarefa 19: o que fica ACIMA da aba de Fluxo e Rankings (respiro do topo, cabeçalho com
       logo, faixa de abas, bloco de filtros e os dois seletores da página), mais o rodapé e o
       respiro de baixo. É o desconto que faz a aba inteira caber numa tela, sem a página rolar.
       Medido na tela renderizada, não chutado. */
    --fgn-acima-do-fluxo: 372px;

    /* Quanto o bloco de filtros está gastando AGORA com os campos De/Até (Tarefas 21 e 22).
       Zero quando eles estão escondidos, 41px quando o período é "Personalizado" e eles
       aparecem. Medido na tela: a aba de Fluxo começa em y=328 com eles fechados e em y=369
       com eles abertos.

       Esta é a ÚNICA linha que sabe o tamanho deles. As três telas de altura fixa deste
       relatório (a tabela de Departamentos, a aba de Fluxo e a de Rentáveis / Eficientes)
       apenas subtraem esta variável do desconto próprio delas, então uma quarta tela de altura
       fixa herda o conserto só por usar o mesmo padrão. Quem liga e desliga é a classe
       fgn-com-datas na raiz, posta pelo callback que mostra os campos. */
    --fgn-campos-de-data: 0px;

    /* Tarefa 16: o mesmo desconto, para a aba de Rentáveis / Eficientes. É menor que o da
       aba de Fluxo porque esta página não tem seletores próprios nem linha de rodapé: só o
       respiro do topo, o cabeçalho com logo, a faixa de abas, o bloco de filtros e o
       respiro de baixo. Medido na tela renderizada, não chutado: a aba começa em y=230 e o
       respiro de baixo é de 34px, que é o padding do corpo. */
    --fgn-acima-da-rentabilidade: 264px;

    /* Tarefa 24: o que a janela NÃO tem, ou seja o respiro do corpo em cima e embaixo.
       Medido na tela: a janela começa em y=22 e sobram 44px abaixo dela. */
    --fgn-fora-da-janela: 66px;

    /* Tarefa 31: o mesmo desconto, para a aba de Fluxo de Caixa. Ela gasta acima o mesmo que a
       aba de Fluxo e Rankings (respiro do topo, cabeçalho com logo, faixa de abas, bloco de
       filtros e o seletor da página) e abaixo a linha de rodapé mais o respiro do corpo.
       Medido na tela renderizada, não chutado: com 372 a página passava 9px da tela nas quatro
       janelas, e esses 9px são a diferença entre esta aba e a de Fluxo e Rankings, que não tem
       título de bloco em cima da tabela. */
    --fgn-acima-do-fluxo-de-caixa: 381px;

    /* Tarefa 33: o mesmo desconto, para a aba de Justificativa. Ela gasta acima e abaixo o
       mesmo que a de Faturado / Recebido, e o número nasce igual ao dela. Medido na tela
       renderizada, não chutado. */
    --fgn-acima-da-justificativa: 320px;

    /* Tarefa 32: o mesmo desconto, para a aba de Faturado / Recebido. Ela gasta acima o
       mesmo que a Visão Geral (respiro do topo, cabeçalho com logo, faixa de abas e bloco de
       filtros) e abaixo a linha de rodapé mais o respiro do corpo, e por isso o número nasce
       igual ao dela. Medido na tela renderizada, não chutado. */
    --fgn-acima-do-faturado: 320px;

    /* Tarefa 29: o mesmo desconto, agora para a Visão Geral, que era a última aba que ainda
       rolava. Ela gasta acima o mesmo que a tabela de Departamentos (respiro do topo, cabeçalho
       com logo, faixa de abas e bloco de filtros) e abaixo a linha de rodapé mais o respiro do
       corpo. Medido na tela renderizada, não chutado. */
    --fgn-acima-da-geral: 320px;

    /* ver --fgn-campos-de-data: com os campos abertos, as três telas de altura fixa
       descontam 41px a mais, cada uma do desconto próprio dela. */

    display: block;
    min-height: 100vh;
    padding: 22px 20px 34px;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--fgn-fundo-topo) 0%, var(--fgn-petroleo) 55%, #24445270 100%),
                var(--fgn-petroleo);
    color: var(--fgn-texto);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

/* Tarefa 22: a chave que liga o desconto dos campos De/Até, na RAIZ do relatório, para as três
   telas de altura fixa enxergarem. Antes (Tarefa 21) ela ficava no painel de Fluxo e por isso
   só valia lá. */
:scope.fgn-com-datas {
    --fgn-campos-de-data: 41px;
}

/* A janela do relatório. Os 1.400px vinham de quando ele tinha uma aba só e nada dependia de
   largura, e sobrava tela: 100px de cada lado a 1600, 260 a 1920 e 580 no monitor de 2560, que
   é 45% da tela sem uso. A Tarefa 28 sobe para 1920, que é a tela que o usuário chama de
   padrão, e ali o conteúdo passa a ser 1.880px, 34% a mais.

   Não é "sem limite" de propósito: acima de 1920 a tela para de crescer e fica numa largura já
   medida, em vez de esticar para território que ninguém conferiu. Cartão de KPI com um número
   só esticado em 2.400px fica ruim, e gráfico de 8 empresas em 2.400px fica ralo. Se um dia o
   monitor grande também tiver de encher, é este mesmo número, maior.

   O notebook a 1366 não se move: ele já usava a largura inteira. */
.fgn-janela {
    max-width: 1920px;
    margin: 0 auto;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────────── */
.fgn-cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fgn-marca {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 16px;
    border-right: 1px solid var(--fgn-bloco-borda);
}

/* Arte original do .pbix (2401x1024, fundo transparente). Altura fixa e largura automática
   preservam a proporção do lockup; a arte já vem no dourado da marca, então nada de filtro. */
.fgn-marca-logo {
    height: 30px;
    width: auto;
    display: block;
}

/* O título do .pbix original é dourado — mantido. */
/* Tarefa 40: o carimbo de atualização, encostado na direita do cabeçalho.

   O LUGAR É DECISÃO MEDIDA, e não estética. As sete telas de altura fixa deste relatório
   descontam de 100vh tudo que está acima delas, e o bloco de filtros tem 91px que alimentam a
   variável --fgn-campos-de-data: uma linha de texto nova dentro do conteúdo poria seis abas
   para rolar. Aqui o texto é menor que o próprio título e o cabeçalho continua com a altura que
   o logo e o título já davam.

   O `flex: 1 1 0` é o que impede o cabeçalho de crescer, e ele foi MEDIDO: o cabeçalho tem
   `flex-wrap: wrap`, então com o tamanho natural do texto o navegador QUEBRAVA o carimbo para
   uma segunda linha em vez de encolhê-lo. Medido no pior caso (carimbo de duas fontes mais o
   aviso com três empresas nomeadas): o cabeçalho ia de 30px para 63px e cinco abas passavam a
   rolar 32px em 1600x900 e no notebook.

   Com a base zero o item nunca força a quebra: ele cresce para o espaço que sobrar e, quando o
   texto não cabe, aparecem as reticências. A lista inteira fica na dica ao passar o mouse. */
.fgn-carimbo {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--fgn-texto-fraco);
}

/* Com empresa atrasada o carimbo fica dourado cheio, que é o destaque que o relatório usa. Não
   é vermelho de propósito: vermelho aqui é Despesa, e o aviso não é um erro, é um atraso. */
.fgn-carimbo-atencao {
    color: var(--fgn-dourado);
    font-weight: 600;
}

.fgn-titulo {
    margin: 0;
    font-family: Rubik, Inter, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.2px;
    color: var(--fgn-dourado);
}

/* ── Filtros: só Empresa e Data ────────────────────────────────────────────── */
.fgn-filtros {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--fgn-bloco-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 16px;
}

/* No portal sobra um filtro só (o de Data, ou o de Período na aba de Fluxo de Caixa): sem
   isto ele herdaria a coluna de 3fr e ficaria esticado na largura toda. */
.fgn-filtros-so-data {
    grid-template-columns: minmax(0, 320px);
}

.fgn-filtro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.fgn-filtro-rotulo {
    font-family: Rubik, Inter, sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--fgn-texto-fraco);
}

/* Filtro de EMPRESA: lista que abre e fecha, com rolagem (Tarefa 06). Caixas em linha não
   escalavam quando o grupo cresce. O padrão visual imita o seletor de entidades do
   Faturamento-KW24 (.abi-entidades-lista do app.kw24.com.br): caixa com borda, cantos
   arredondados e rolagem própria. O abrir/fechar é <details>/<summary>, sem JavaScript nosso. */
.fgn-selecao {
    background: var(--fgn-card-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 10px;
}

.fgn-selecao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px;
    cursor: pointer;
    color: var(--fgn-texto);
    font-size: 12.5px;
    list-style: none;
    user-select: none;
}

/* O triângulo padrão do <summary> some e volta como uma seta nossa, que gira ao abrir. */
.fgn-selecao-cabecalho::-webkit-details-marker {
    display: none;
}

.fgn-selecao-cabecalho::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--fgn-texto-fraco);
    border-bottom: 1.5px solid var(--fgn-texto-fraco);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
    flex: none;
}

.fgn-selecao[open] .fgn-selecao-cabecalho::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.fgn-selecao-resumo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Sem isto as reticências não acontecem: um item de flex não encolhe abaixo do tamanho do
       conteúdo dele, então o texto empurraria a caixa em vez de ser cortado. É o que garante
       UMA LINHA SÓ agora que o resumo lista os nomes das empresas (Tarefa 37), e uma linha só é
       o que mantém a altura do bloco de filtros, da qual seis abas dependem para não rolar. */
    min-width: 0;
}

.fgn-selecao-lista {
    max-height: 170px;
    overflow-y: auto;
    border-top: 1px solid var(--fgn-bloco-borda);
    padding: 6px 4px 6px 0;
}

.fgn-selecao-checklist {
    display: flex;
    flex-direction: column;
}

/* Clique direto em qualquer ponto da linha marca e desmarca, sem segurar Ctrl. */
.fgn-selecao-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 11px;
    cursor: pointer;
    color: var(--fgn-texto);
    font-size: 12.5px;
    border-radius: 6px;
}

.fgn-selecao-item:hover {
    background: rgba(255, 188, 90, 0.10);
}

.fgn-selecao-checkbox {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--fgn-texto-fraco);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex: none;
}

.fgn-selecao-checkbox:checked {
    background: var(--fgn-dourado);
    border-color: var(--fgn-dourado);
}

/* O "v" do marcado, desenhado com borda, sem depender de fonte de ícone. */
.fgn-selecao-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--fgn-petroleo);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Tarefa 39: a árvore de ano do filtro de Período ────────────────────────
   A lista corrida de 25 meses virou uma árvore: os anos, e dentro de cada um os meses dele. A
   razão é de negócio e está no código da página: a janela do fluxo de caixa começa em 2025 e
   não tem fim, então a lista corrida crescia para sempre.

   A CAIXINHA DO ANO FICA FORA DO <summary>, e essa é a decisão de desenho que faz o resto
   funcionar sem nenhum JavaScript: clique dentro de um <summary> abre e fecha o <details>, e
   uma caixa de marcar ali dentro faria as duas coisas no mesmo clique. Aqui a linha do ano é
   uma fileira com a caixinha à esquerda e o <details> ao lado, então marcar o ano inteiro e
   expandir o ano são dois alvos separados. */
.fgn-arvore-grupo {
    border-radius: 6px;
}

.fgn-arvore-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

/* A caixinha do ano: um checklist de uma opção só, com rótulo vazio. O respiro da esquerda é o
   mesmo do item comum, para as caixas do ano e dos meses ficarem na mesma coluna. */
.fgn-arvore-marca {
    flex: none;
    padding-left: 11px;
    padding-top: 7px;
}

.fgn-arvore-marca .fgn-selecao-item {
    padding: 0;
    gap: 0;
}

.fgn-arvore-marca .fgn-selecao-item:hover {
    background: transparent;
}

/* O <details> do ano ocupa o resto da linha, e é ele que cresce para baixo com os meses. */
.fgn-arvore-abre {
    flex: 1 1 auto;
    min-width: 0;
}

/* O nome do ano, que é o que se clica para expandir. A seta é a mesma das duas tabelas
   hierárquicas do relatório, para não existir um terceiro desenho de "abre e fecha". */
.fgn-arvore-nome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    cursor: pointer;
    list-style: none;
    color: var(--fgn-texto);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
}

.fgn-arvore-nome::-webkit-details-marker {
    display: none;
}

.fgn-arvore-nome::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--fgn-texto-fraco);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.12s ease;
    flex: none;
}

.fgn-arvore-abre[open] > .fgn-arvore-nome::before {
    transform: rotate(90deg);
}

.fgn-arvore-nome:hover {
    background: rgba(255, 188, 90, 0.10);
}

/* Os meses, recuados sob o ano. O recuo é o da caixinha do ano mais a seta, para o mês nascer
   embaixo do nome e não embaixo da marca. */
.fgn-arvore-itens .fgn-selecao-item {
    padding-left: 23px;
}


/* Filtro de DATA: lista de período pronto; os campos De/Até só aparecem em "Personalizado". */
.fgn-periodo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fgn-periodo-dropdown .Select-control {
    background: var(--fgn-card-bg);
    border-color: var(--fgn-bloco-borda);
    border-radius: 10px;
    color: var(--fgn-texto);
    min-height: 36px;
}

.fgn-periodo-dropdown .Select-placeholder,
.fgn-periodo-dropdown .Select--single > .Select-control .Select-value,
.fgn-periodo-dropdown .Select-value-label {
    color: var(--fgn-texto) !important;
    line-height: 34px;
}

.fgn-periodo-dropdown .Select-menu-outer {
    background: #21404F;
    border-color: var(--fgn-bloco-borda);
    border-radius: 0 0 10px 10px;
    color: var(--fgn-texto);
    z-index: 30;
}

.fgn-periodo-dropdown .Select-option {
    background: transparent;
    color: var(--fgn-texto);
}

.fgn-periodo-dropdown .Select-option.is-focused,
.fgn-periodo-dropdown .Select-option.is-selected {
    background: rgba(255, 188, 90, 0.18);
}

.fgn-periodo-dropdown .Select-arrow {
    border-top-color: var(--fgn-texto-fraco);
}

/* <input type="date"> nativo: traz seletor de mês e ano e digitação confiável, que era o que
   faltava no componente anterior. */
.fgn-periodo-datas {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fgn-periodo-datas-entre {
    color: var(--fgn-texto-fraco);
    font-size: 12px;
    flex: none;
}

.fgn-periodo-campo {
    flex: 1;
    min-width: 0;
    background: var(--fgn-card-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 10px;
    color: var(--fgn-texto);
    font-family: Inter, sans-serif;
    font-size: 13px;
    padding: 7px 9px;
    outline: none;
}

.fgn-periodo-campo:focus {
    border-color: var(--fgn-dourado);
}

/* O ícone do calendário nativo é escuro por padrão e some no fundo petróleo. */
.fgn-periodo-campo::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

/* ── KPIs, com a mini linha de tendência ao fundo ──────────────────────────── */
.fgn-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

/* Tarefa 29: os três cartões afinam cerca de 25% de altura, para liberar espaço aos dois
   gráficos de baixo. Quem paga são o respiro interno e o corpo do número; o que NÃO muda é o
   arranjo: os três continuam lado a lado, um terço cada, com a mini linha de tendência atrás do
   número. O original põe Receita e Despesa em cima e Resultado numa faixa inteira embaixo, e
   isso é desvio deliberado nosso, de antes desta tarefa. */
.fgn-kpi {
    position: relative;
    overflow: hidden;
    padding: 8px 18px 10px;
    background: var(--fgn-bloco-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 16px;
}

/* A tendência é decoração: fica colada na base do card, atrás do texto, e não recebe clique. */
.fgn-kpi-spark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.55;
    pointer-events: none;
}

.fgn-kpi-texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* A entreletra é UMA regra só, aqui, e relativa ao corpo (Tarefa 29). Antes eram duas, 0,8px
   nesta e 0,05em na dos cartões da aba de Fluxo, e não havia motivo para serem diferentes.

   O que o usuário vê no par "AS" de "SAÍDAS" e "ENTRADAS", e ele está certo: o vão ali é maior
   que nos outros pares. Medido letra por letra, com a fonte que o navegador usa de fato, o vão
   de tinta do "AS" fica 1,43px acima da média dos outros pares do mesmo rótulo, e esse 1,43 NÃO
   muda com a entreletra nem com o ajuste de par: ele é da forma das letras, o S redondo que
   recolhe a curva na base e o A que alcança a borda com o pé.

   Ou seja, dá para encolher o vão todo, não para igualar esse par. Medido em "SAÍDAS":
       0,8px (o que estava aqui) -> vão do AS 1,10px
       0,05em (a da aba de Fluxo) -> 0,88px
       0,04em                     -> 0,76px
       0,03em                     -> 0,65px
       zero                       -> 0,30px
   Fica 0,03em, que corta 41% do vão e ainda deixa a caixa alta respirando. Zero cortaria mais,
   mas tira a folga que caixa alta pede para ser lida. */
.fgn-kpi-rotulo {
    font-family: Rubik, Inter, sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fgn-texto-fraco);
}

.fgn-kpi-valor {
    font-family: Rubik, Inter, sans-serif;
    font-weight: 700;
    font-size: 23px;
    letter-spacing: -0.3px;
}

/* ── Blocos de gráfico ─────────────────────────────────────────────────────── */
.fgn-bloco {
    padding: 14px 16px 10px;
    margin-bottom: 14px;
    background: var(--fgn-bloco-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 16px;
    min-width: 0;
}

.fgn-bloco-titulo {
    font-family: Rubik, Inter, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--fgn-texto);
    margin-bottom: 8px;
}

.fgn-grafico {
    width: 100%;
}

/* ── Avisos e rodapé ───────────────────────────────────────────────────────── */
.fgn-aviso {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--fgn-bloco-borda);
    background: var(--fgn-bloco-bg);
    color: var(--fgn-texto);
    font-size: 13.5px;
}

.fgn-aviso-erro {
    border-color: rgba(227, 70, 78, 0.5);
    background: rgba(227, 70, 78, 0.12);
}

.fgn-aviso-atencao {
    border-color: rgba(255, 188, 90, 0.5);
    background: rgba(255, 188, 90, 0.12);
    margin-bottom: 14px;
}

.fgn-aviso-vazio {
    color: var(--fgn-texto-fraco);
}

.fgn-rodape {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--fgn-texto-fraco);
}

/* O spinner do dcc.Loading fica sobre o fundo escuro. */
.fgn-conteudo {
    min-height: 200px;
}

/* ── Telas menores ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    /* Abaixo desta largura os dois filtros empilham, e o bloco deles cresce uma linha inteira.
       O desconto acompanha, senão a página voltaria a rolar justamente nas telas menores. */
    :scope {
        --fgn-acima-da-tabela: 384px;
        /* Os dois filtros empilham e o bloco deles cresce uma linha inteira: o desconto da aba
           de Fluxo acompanha, senão a página voltaria a rolar justamente nas telas menores. */
        --fgn-acima-do-fluxo: 446px;
        /* Mesma razão na aba de Rentáveis / Eficientes. */
        --fgn-acima-da-rentabilidade: 338px;
    }

    .fgn-filtros {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgn-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    :scope {
        padding: 16px 12px 26px;
    }

    /* Em tela de celular três colunas de ranking não cabem de jeito nenhum: elas empilham e a
       página volta a rolar. A tarefa é sobre a tela de quem apresenta, que é desktop; aqui o
       que importa é continuar legível. */
    .fgn-fluxo-tela {
        height: auto;
        min-height: 0;
    }

    /* Em celular, dois gráficos de coluna dentro de 100vh dariam uns 150px cada um, com 34
       departamentos no eixo. Mesma saída da aba de Fluxo: a altura fixa é liberada e a página
       volta a rolar, porque a regra de caber numa tela é sobre a tela de quem apresenta. */
    .fgn-rent-tela {
        height: auto;
        min-height: 0;
    }

    .fgn-rent-cima, .fgn-rent-baixo {
        min-height: 320px;
    }

    .fgn-rankings {
        flex-direction: column;
    }

    .fgn-fluxo-mensal, .fgn-ranking {
        min-height: 320px;
    }

    .fgn-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgn-marca {
        border-right: 0;
        padding-right: 0;
    }
}

/* ── Tarefa 08: aba "Categorias e Departamentos" ────────────────────────────────────────────
   Só existe no acesso interno (no portal a aba nem é montada, ver a página). Reaproveita a mesma
   caixa de seleção do filtro de Empresa da Tarefa 06, com dois acréscimos que 291 linhas exigem:
   busca e marcar/desmarcar. */
.fgn-abas {
    margin-bottom: 14px;
}

.fgn-abas-lista {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--fgn-bloco-borda);
}

/* A aba é um radio de verdade (acessível por teclado e leitor de tela); o círculo é que some. */
.fgn-abas-radio {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fgn-abas-item {
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* a exceção da Tarefa 34: aqui o texto continua branco, ver --fgn-abas-texto-fraco */
    color: var(--fgn-abas-texto-fraco);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.fgn-abas-item:hover {
    color: var(--fgn-abas-texto);
}

.fgn-abas-item:has(.fgn-abas-radio:checked) {
    color: var(--fgn-dourado);
    border-bottom-color: var(--fgn-dourado);
}

.fgn-abas-item:has(.fgn-abas-radio:focus-visible) {
    outline: 2px solid var(--fgn-dourado);
    outline-offset: 2px;
    border-radius: 6px 6px 0 0;
}

.fgn-ed-ultima {
    font-size: 12px;
    color: var(--fgn-texto-fraco);
    margin: 0 2px 14px;
}

/* Enquanto ninguém tiver editado, a linha de registro não tem o que dizer e some inteira, com
   margem e tudo: a div continua no layout porque o callback de salvar escreve nela depois, mas
   vazia ela não pode deixar um vão de 14px entre o aviso e as listas (Tarefa 11, B1). */
.fgn-ed-ultima:empty {
    display: none;
}

.fgn-ed-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fgn-ed-coluna {
    background: var(--fgn-bloco-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 16px;
    padding: 14px 16px 16px;
    min-width: 0;
}

.fgn-ed-coluna-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.fgn-ed-coluna-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--fgn-dourado);
    letter-spacing: 0.02em;
}

.fgn-ed-coluna-contagem {
    font-size: 11.5px;
    color: var(--fgn-texto-fraco);
}

.fgn-ed-busca {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid var(--fgn-bloco-borda);
    background: rgba(12, 28, 36, 0.45);
    color: var(--fgn-texto);
    font-size: 12.5px;
    font-family: inherit;
}

.fgn-ed-busca::placeholder {
    color: var(--fgn-texto-fraco);
}

.fgn-ed-busca:focus {
    outline: none;
    border-color: var(--fgn-dourado);
}

/* O "x" nativo do type=search sobre fundo escuro sai preto sobre preto. */
.fgn-ed-busca::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: 0.55;
    cursor: pointer;
}

.fgn-ed-atalhos {
    display: flex;
    gap: 8px;
    margin: 9px 0 4px;
}

.fgn-ed-atalho {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--fgn-bloco-borda);
    background: transparent;
    color: var(--fgn-texto-fraco);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
}

.fgn-ed-atalho:hover {
    color: var(--fgn-texto);
    border-color: var(--fgn-dourado);
}

.fgn-ed-lista {
    max-height: 340px;
    overflow-y: auto;
    border-top: 1px solid var(--fgn-bloco-borda);
    margin-top: 8px;
    padding: 6px 4px 6px 0;
}

.fgn-ed-check {
    display: flex;
    flex-direction: column;
}

.fgn-ed-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--fgn-texto);
    font-size: 12.5px;
    border-radius: 6px;
}

.fgn-ed-item:hover {
    background: rgba(255, 188, 90, 0.10);
}

/* Desde a Tarefa 10 o rótulo é só o nome do valor: saiu a contagem de lançamentos e saiu o selo
   de "fora da lista". O nome ocupa a linha inteira e ganha reticências quando não couber. */
.fgn-ed-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fgn-ed-caixa {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--fgn-texto-fraco);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex: none;
}

.fgn-ed-caixa:checked {
    background: var(--fgn-dourado);
    border-color: var(--fgn-dourado);
}

.fgn-ed-caixa:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--fgn-petroleo);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fgn-ed-rodape {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.fgn-ed-salvar {
    padding: 11px 22px;
    border-radius: 10px;
    border: 0;
    background: var(--fgn-dourado);
    color: var(--fgn-petroleo);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex: none;
}

.fgn-ed-salvar:hover:not(:disabled) {
    filter: brightness(1.07);
}

/* Apagado enquanto a tela é igual ao que está salvo: não há o que aplicar, e um botão dourado
   convidando ao clique nessa hora só serviria para gastar 16,5s gravando o que já estava lá. */
.fgn-ed-salvar:disabled {
    background: rgba(244, 252, 255, 0.10);
    color: var(--fgn-texto-fraco);
    cursor: default;
}

.fgn-ed-pendente {
    flex: none;
    color: var(--fgn-dourado);
    font-size: 12px;
    font-weight: 600;
}

.fgn-ed-pendente:not(:empty)::before {
    content: "●";
    margin-right: 6px;
    font-size: 10px;
    vertical-align: middle;
}

.fgn-ed-resultado {
    flex: 1;
    min-width: 260px;
}

.fgn-aviso-ok {
    border-color: rgba(114, 213, 103, 0.5);
    background: rgba(114, 213, 103, 0.12);
}

@media (max-width: 900px) {
    .fgn-ed-colunas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Tarefa 12: tabela hierárquica "Departamentos - Receita - Despesa - Resultado" ───────────
   Três níveis (Departamento > Grupo > Categoria) com <details>/<summary>, sem callback e sem
   JavaScript nosso, igual à lista de seleção da Tarefa 06. A cor da métrica fica no CABEÇALHO da
   coluna: o original não pinta célula por valor, e pintar aqui inventaria uma leitura que ele não
   tem. */
/* Padrão de tela do relatório (arquivo 02, "lista longa rola por dentro"): o bloco não cresce
   além do limite da página. Passou disso, a rolagem acontece AQUI dentro, e não na página, para o
   cabeçalho, as abas e os filtros não sumirem de vista. Quando a tabela cabe, nada disso aparece:
   max-height com overflow automático resolve os dois casos de uma vez, sem espaço vazio sobrando.

   overscroll-behavior evita que a roda do mouse, ao chegar ao fim da tabela, passe a rolar a
   página por baixo. */
.fgn-tab {
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
    max-height: calc(100vh - var(--fgn-acima-da-tabela) - var(--fgn-campos-de-data));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── O controle que abre e fecha, compartilhado ──────────────────────────────
   Estas regras eram da tabela de Departamentos (Tarefa 12) e passaram a valer para as DUAS
   tabelas hierárquicas do relatório quando a de Fluxo de Caixa ganhou o mesmo comportamento
   (Emenda 1 da Tarefa 31). Uma cópia para cada uma viraria, com o tempo, duas setas diferentes.

   É o <details>/<summary> do próprio HTML: abrir e fechar não custa callback nem JavaScript
   nosso. A seta nativa some e entra uma própria, que gira ao abrir. Ela mora na PRIMEIRA
   CÉLULA, e não no <summary>, porque o <summary> aqui é uma grade — um ::before nele viraria
   mais uma coluna e empurraria os valores.

   O que é de cada tabela (grade de colunas, recuo por nível, peso da fonte, coluna de nome
   fixa) continua nas classes dela. */
.fgn-cabeca {
    cursor: pointer;
    list-style: none;
}

.fgn-cabeca::-webkit-details-marker {
    display: none;
}

.fgn-cabeca > :first-child::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    vertical-align: middle;
    border-left: 5px solid var(--fgn-texto-fraco);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.12s ease;
}

.fgn-no[open] > .fgn-cabeca > :first-child::before {
    transform: rotate(90deg);
}

.fgn-cabeca:hover {
    background: rgba(255, 188, 90, 0.08);
}

.fgn-tab-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(110px, 150px));
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(244, 252, 255, 0.07);
}

.fgn-tab-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fgn-tab-valor {
    text-align: right;
}

/* Fica colado no topo da área rolável o tempo todo. O fundo é OPACO de propósito: com a
   superfície translúcida dos blocos, as linhas que passam por baixo apareciam através do
   cabeçalho e ele deixava de ser legível, que é justamente o que esta regra existe para evitar. */
.fgn-tab-cabecalho {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fgn-texto-fraco);
    border-bottom: 1px solid var(--fgn-bloco-borda);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--fgn-cabecalho-fixo);
}

/* As três cores de métrica desta tabela. Elas pintam o CABEÇALHO desde a Tarefa 12 e passaram a
   pintar também os VALORES na Tarefa 35, nos três níveis e na linha de total (ver _celulas). Na
   coluna de Resultado a cor passou a seguir o SINAL na Emenda 1: positivo verde, negativo
   vermelho, reusando a classe da Despesa, que é onde o vermelho mora.

   O CONTRASTE DELAS FOI MEDIDO E ACEITO PELO USUÁRIO, e o número fica aqui para ninguém
   "consertar" isto depois achando que passou despercebido. Medido em pixel de verdade, na tela
   de produção, lendo o miolo do traço da letra contra o fundo da linha:

       teal      #50A5A0 sobre rgb(51,86,100)   2,72:1
       vermelho  #E3464E sobre rgb(52,87,101)   1,95:1
       verde     #72D567 sobre rgb(52,87,101)   4,24:1
       (o dourado que estava aqui antes dava 4,96:1)

   O piso do WCAG AA é 4,5:1 para texto normal e 3:1 para texto grande, então teal e vermelho
   ficam abaixo dos dois e o verde passa só o de texto grande. O usuário viu, sabe o número e
   decidiu assim: são as cores da paleta da empresa, o relatório é interno e o critério dele é a
   tela. NÃO clareie estas cores para "resolver" o contraste; se um dia incomodar, a volta é
   tirar as classes de _celulas, que é a mesma linha. */
.fgn-tab-h-receita {
    color: var(--fgn-teal);
}

.fgn-tab-h-despesa {
    color: var(--fgn-vermelho);
}

.fgn-tab-h-resultado {
    color: var(--fgn-verde);
}

/* Nível 1 é o Departamento: o mais forte da hierarquia. */
.fgn-tab-n1 > .fgn-tab-cabeca {
    font-weight: 700;
    color: var(--fgn-texto);
}

/* Nível 2 é o Grupo, recuado e mais leve. */
.fgn-tab-n2 > .fgn-tab-cabeca {
    font-weight: 600;
}

.fgn-tab-n2 > .fgn-tab-cabeca .fgn-tab-nome {
    padding-left: 18px;
}

/* Nível 3 é a Categoria: folha, sem seta e mais recuada ainda. */
.fgn-tab-folha .fgn-tab-nome {
    padding-left: 49px;
    color: var(--fgn-texto-fraco);
}

.fgn-tab-total {
    margin-top: 6px;
    border-top: 1px solid var(--fgn-bloco-borda);
    border-bottom: 0;
    font-weight: 700;
    color: var(--fgn-dourado);
}

@media (max-width: 760px) {
    .fgn-tab-linha {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(88px, 110px));
        font-size: 11.5px;
        gap: 6px;
    }

    .fgn-tab-folha .fgn-tab-nome {
        padding-left: 30px;
    }
}

/* ── Tarefa 13: página "Fluxo e Rankings" ───────────────────────────────────────────────────
   Dois seletores no topo (Movimento e Agrupar por) e visuais que mudam com a combinação. No
   original são seis páginas; aqui são dois cliques, e o título do cabeçalho acompanha. */
.fgn-seletores {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--fgn-bloco-bg);
    border: 1px solid var(--fgn-bloco-borda);
    border-radius: 16px;
}

.fgn-seletor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.fgn-seletor-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Rádio de verdade, acessível por teclado; o círculo é que some, como na faixa de abas. */
.fgn-seletor-radio {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fgn-seletor-item {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--fgn-bloco-borda);
    cursor: pointer;
    font-size: 12.5px;
    color: var(--fgn-texto-fraco);
    white-space: nowrap;
}

.fgn-seletor-item:hover {
    color: var(--fgn-texto);
}

.fgn-seletor-item:has(.fgn-seletor-radio:checked) {
    background: var(--fgn-dourado);
    border-color: var(--fgn-dourado);
    color: var(--fgn-petroleo);
    font-weight: 600;
}

.fgn-seletor-item:has(.fgn-seletor-radio:focus-visible) {
    outline: 2px solid var(--fgn-dourado);
    outline-offset: 2px;
}

/* Padrão de tela do relatório: visual alto rola por dentro em vez de esticar a página. Mesma
   regra da tabela de Departamentos, com o desconto próprio desta aba, que tem os seletores, os
   cartões de KPI e o gráfico mensal acima do ranking. */
/* A aba inteira numa tela só: altura fixa vinda da JANELA e três faixas na proporção do
   original (cartões 9%, fluxo mensal 32%, rankings 59%). Os números do flex SÃO as proporções,
   com flex-basis 0 para elas valerem sobre o espaço todo, e min-height 0 em cada faixa porque
   sem isso um filho que não cabe empurra o flex e a página volta a rolar. */
/* Grade de quatro faixas, e não flex, de propósito: com `fr` a proporção entre o gráfico de
   fluxo e a faixa de rankings é exata, enquanto o flex-grow cede quando um filho tem conteúdo
   maior que a fatia dele (foi medido: 39/61 em vez de 32/59). O `minmax(0, Nfr)` é o que impede
   a faixa de crescer por causa do conteúdo.

   Os cartões e o rodapé entram como `auto`, ou seja, com a altura natural deles. No original os
   cartões são 9% de 600px, uns 54px; com a nossa tipografia (número de 24px) o cartão pede 98px,
   e espremê-lo nos 9% cortaria o valor. O que fica fiel, e é o que se vê, é a proporção entre os
   dois visuais. */
.fgn-fluxo-tela {
    display: grid;
    grid-template-rows: auto minmax(0, 32fr) minmax(0, 59fr) auto;
    /* A coluna precisa ser minmax(0, 1fr) e os filhos precisam de min-width 0: sem isso o item
       de grid assume a largura MÍNIMA DO CONTEÚDO (os rótulos longos do ranking), a faixa fica
       mais larga que a página e aparece rolagem horizontal. Medido: 2.230px de faixa dentro de
       uma página de 1.400px. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--fgn-acima-do-fluxo) - var(--fgn-campos-de-data));
    /* Abaixo disto não dá para espremer mais sem deixar ilegível: aí sim a página rola, que é
       melhor do que mostrar três gráficos de 40px de altura. */
    min-height: 380px;
}

/* Modo único (Entradas ou Saídas): um ranking a menos, e o gráfico de fluxo fica com o espaço
   que sobra. São as proporções do original para essas quatro páginas (287/285). */
.fgn-fluxo-unico {
    grid-template-rows: auto minmax(0, 46fr) minmax(0, 45fr) auto;
}

/* Dois cartões dividem a largura e um cartão ocupa tudo, como no original (640+640 e 1280);
   o auto-fit faz isso sozinho, sem a página precisar saber quantos são. */
.fgn-fluxo-cartoes {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    min-width: 0;
    margin-bottom: 0;
}

.fgn-rankings {
    display: flex;
    gap: 14px;
    min-height: 0;
    min-width: 0;
}

/* Cada ranking é uma coluna igual às outras: com dois, meio a meio; com um, largura inteira.
   É isto que redistribui o espaço no portal, onde o ranking por Empresa não é montado. */
.fgn-ranking {
    flex: 1 1 0;
    min-width: 0;
}

/* Os blocos da aba viram caixas de altura definida: o título em cima e o visual ocupando o
   resto. Sem isto o gráfico não tem contra o que medir 100%. */
.fgn-fluxo-mensal, .fgn-ranking {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-fluxo-mensal > .fgn-bloco-titulo, .fgn-ranking > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

/* A rolagem que saiu da página fica aqui dentro, uma por ranking. */
.fgn-visual-rolagem {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 0;
}

/* O alvo do visual: `max(100%, Npx)` no style do elemento. Cabe na caixa, estica; não cabe,
   mantém o tamanho próprio e a caixa rola. */
.fgn-visual-alvo {
    width: 100%;
}

.fgn-fluxo-tela > .fgn-rodape {
    flex: 0 0 auto;
}

/* Tela baixa (notebook de 768px, por exemplo): o cartão fica compacto para não comer a altura
   dos visuais. É o mesmo cartão, com menos respiro e número um pouco menor. */
@media (max-height: 820px) {
    .fgn-fluxo-cartoes .fgn-kpi {
        padding: 10px 14px 12px;
    }

    .fgn-fluxo-cartoes .fgn-kpi-valor {
        font-size: 19px;
    }
}

@media (max-width: 1100px) {
    .fgn-seletores {
        gap: 14px;
    }
}


/* ── Tarefa 16: a aba "Departamentos Mais Rentáveis / Mais Eficientes" ──────── */
/* A página inteira numa tela só, e ela NÃO rola. Duas faixas na proporção do original: o
   gráfico de cima tem 256px de altura no .pbix e o de baixo 369px, o que dá 41% e 59% da
   altura útil. Mesma técnica da aba de Fluxo (Tarefa 19): `minmax(0, Nfr)` em vez de flex,
   porque com flex-grow a faixa cede quando o conteúdo pede mais do que a fatia dela, e a
   proporção deixa de ser a do arquivo.

   Os dois gráficos usam a largura inteira. No original o de cima tem 960 de 1280 porque os
   320px da direita são a faixa de slicers (Empresa, Período, Data), e no nosso relatório esses
   slicers já viraram a barra de filtros do topo. */
.fgn-rent-tela {
    display: grid;
    grid-template-rows: minmax(0, 41fr) minmax(0, 59fr);
    /* Sem isto o item de grid assume a largura mínima do conteúdo (os nomes do eixo) e aparece
       rolagem horizontal. Mesmo cuidado da faixa de rankings da Tarefa 19. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--fgn-acima-da-rentabilidade) - var(--fgn-campos-de-data));
    /* Abaixo disto os dois gráficos ficariam ilegíveis; aí sim a página rola. */
    min-height: 380px;
}

/* Cada bloco é uma caixa de altura definida: título em cima e o gráfico ocupando o resto. Sem
   isto o gráfico não tem contra o que medir 100%. */
.fgn-rent-cima, .fgn-rent-baixo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-rent-cima > .fgn-bloco-titulo, .fgn-rent-baixo > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

/* O gráfico ocupa o que sobra da caixa. Sem rolagem por dentro e sem crescer com o número de
   departamentos, que é o que a tarefa pede: com 34 a coluna fica fina, e isso está certo. */
.fgn-rent-visual {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}


/* ── Tarefa 31: a aba de Fluxo de Caixa ────────────────────────────────────── */
/* O arranjo do original, medido nas páginas 2 e 3: quatro cartões em cima e uma tabela embaixo
   ocupando quase tudo. Aqui a aba inteira cabe numa tela, pelo mesmo padrão das outras cinco, e
   quem rola é a TABELA, por dentro, com o cabeçalho fixo (o padrão do arquivo 02 desde a
   Tarefa 15).

   A rolagem aqui é nos DOIS sentidos, e isso é novidade nesta tela: a tabela é um pivot de
   `Tipo` por `Período`, e são 25 períodos no recorte cheio. Vinte e cinco colunas de valor não
   cabem em largura nenhuma, então elas rolam na horizontal dentro do bloco, com a coluna do
   nome fixa à esquerda para não se perder de vista. */
.fgn-fc-tela {
    display: grid;
    /* os cartões pedem a altura que têm, e a tabela fica com todo o resto */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    /* Esta é a ÚNICA das cinco telas de altura fixa que NÃO desconta --fgn-campos-de-data, e é
       da Emenda 1 da Tarefa 31: aqui o filtro de Data dá lugar ao de Período, então os campos
       De/Até não têm como aparecer nesta aba. Descontar 41px que ninguém está gastando tiraria
       uma linha da tabela à toa toda vez que o recorte personalizado estivesse escolhido em
       outra aba. */
    height: calc(100vh - var(--fgn-acima-do-fluxo-de-caixa));
    /* O piso é MENOR que os 380px das outras telas, e é medido: no notebook sobram 346px, e um
       piso de 380 faria a página rolar 34px justamente ali. Aqui isso é aceitável porque quem
       rola é a tabela, por dentro, e não o desenho: com 340px ainda ficam nove linhas visíveis
       mais o cabeçalho fixo. Nas outras telas o piso protege gráfico, que não tem rolagem
       própria e vira borrão quando encolhe. */
    min-height: 340px;
}

/* Os quatro cartões desta aba são os finos da aba de Fluxo: eles dividem a linha com mais um
   irmão que a Visão Geral não tem, e a altura que eles economizam vai para a tabela. */
.fgn-fc-cartoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.fgn-fc-cartoes .fgn-kpi {
    padding: 8px 18px 10px;
}

.fgn-fc-cartoes .fgn-kpi-valor {
    font-size: 20px;
}

.fgn-fc-bloco {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-fc-bloco > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

.fgn-fc-tabela {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    /* Mesma proteção da tabela de Departamentos: chegando ao fim, a roda do mouse não passa a
       rolar a página por baixo. */
    overscroll-behavior: contain;
    font-variant-numeric: tabular-nums;
}

.fgn-fc-linha {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(244, 252, 255, 0.07);
    /* a grade não encolhe com a rolagem horizontal: a linha é tão larga quanto as colunas */
    width: max-content;
    min-width: 100%;
}

/* O cabeçalho é opaco de propósito: as linhas passam POR BAIXO dele enquanto se rola, e a
   superfície translúcida dos blocos deixaria o texto de trás aparecer. */
.fgn-fc-cabecalho {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--fgn-cabecalho-fixo);
    font-weight: 600;
    color: var(--fgn-texto);
}

.fgn-fc-nome {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--fgn-cabecalho-fixo);
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fgn-fc-cabecalho .fgn-fc-nome {
    z-index: 4;
}

.fgn-fc-valor {
    text-align: right;
    white-space: nowrap;
}

.fgn-fc-empresa {
    font-weight: 600;
}

/* A linha da empresa é o <summary> que abre e fecha (Emenda 1 da Tarefa 31). O realce do
   .fgn-cabeca:hover pinta a linha inteira, MENOS a coluna de nome, que é fixa e tem fundo
   opaco próprio para as outras colunas não aparecerem através dela ao rolar. Sem esta regra o
   realce ficaria com um buraco justamente onde está o nome e a seta, que é onde a pessoa está
   olhando. A tinta entra por cima do fundo opaco, em camada, em vez de substituí-lo. */
.fgn-fc-cabeca:hover .fgn-fc-nome {
    background:
        linear-gradient(rgba(255, 188, 90, 0.08), rgba(255, 188, 90, 0.08)),
        var(--fgn-cabecalho-fixo);
}

.fgn-fc-tipo .fgn-fc-nome {
    padding-left: 18px;
    color: var(--fgn-texto-fraco);
    font-weight: 400;
}

.fgn-fc-total {
    font-weight: 700;
    border-top: 1px solid var(--fgn-bloco-borda);
}

.fgn-fc-total-coluna {
    color: var(--fgn-dourado);
}

/* ── Tarefa 33: a aba de Justificativa ─────────────────────────────────────── */
/* O arranjo da página 11 do original, medido nela: a tabela por empresa em cima, ocupando 952
   de 1280 de largura e 193px de altura, e os dois pivots embaixo, 640px cada um, lado a lado,
   com 377px. Aqui a tabela de cima usa a largura inteira, porque os 328px que sobravam lá eram
   os dois slicers, que na nossa tela já são a barra de filtros do topo.

   Da área útil daquela página (de y=94 a y=665), a tabela leva 193 e os pivots 377: é a divisão
   34/66 abaixo.

   As TRÊS tabelas rolam por dentro, com cabeçalho fixo e coluna de nome fixa, que é o padrão do
   relatório desde a Tarefa 15. Os dois pivots são hierárquicos de três níveis e nascem
   recolhidos, com o mesmo controle da tabela de Departamentos e da de Fluxo de Caixa (ver
   .fgn-no e .fgn-cabeca). */
.fgn-just-tela {
    display: grid;
    grid-template-rows: minmax(0, 34fr) minmax(0, 66fr);
    /* Sem isto o item de grid assume a largura mínima do conteúdo e aparece rolagem
       horizontal na página. Mesmo cuidado da faixa de rankings da Tarefa 19. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--fgn-acima-da-justificativa) - var(--fgn-campos-de-data));
    /* Abaixo disto as três tabelas ficariam com duas linhas visíveis cada uma; aí sim a página
       rola. É o piso da aba de Fluxo de Caixa, e pelo mesmo motivo: quem rola aqui são tabelas,
       não gráficos. */
    min-height: 340px;
}

/* Os dois pivots lado a lado, meio a meio, como no original (640 e 640). */
.fgn-just-pivots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-height: 0;
    min-width: 0;
}

/* Cada bloco é uma caixa de altura definida: o título em cima e a tabela ocupando o resto. */
.fgn-just-bloco {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-just-bloco > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

.fgn-just-tabela {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    /* Chegando ao fim, a roda do mouse não passa a rolar a página por baixo. */
    overscroll-behavior: contain;
    font-variant-numeric: tabular-nums;
}

.fgn-just-linha {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(244, 252, 255, 0.07);
    /* LARGURA DA CAIXA, e não `max-content` como na tabela de Fluxo de Caixa. A diferença é o
       número de colunas: lá são 25 períodos, que não cabem em largura nenhuma e por isso a
       linha é mais larga que o bloco e rola na horizontal; aqui são no máximo quatro colunas de
       valor, que cabem.

       E cada linha é um grid SEPARADO. Com `max-content`, cada uma resolvia as colunas pelo
       conteúdo dela, e como os rótulos do cabeçalho são bem mais largos que os números (são
       nomes de medida, tipo "Resultado Geral - Justificado"), o cabeçalho ficava mais largo que
       as linhas de dado e a tabela saía desalinhada, com 284px e 497px de rolagem lateral no
       notebook. Com a largura da caixa, as frações são as mesmas em todas as linhas e tudo
       alinha. Medido antes e depois. */
    width: 100%;
    /* O relatório não tem `box-sizing` global, então sem isto os 24px de respiro lateral
       entrariam POR FORA dos 100% e sobrava exatamente essa rolagem de 24px. Medido. */
    box-sizing: border-box;
}

/* O cabeçalho é opaco de propósito: as linhas passam POR BAIXO dele enquanto se rola, e a
   superfície translúcida dos blocos deixaria o texto de trás aparecer. */
.fgn-just-cabecalho {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--fgn-cabecalho-fixo);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fgn-texto-fraco);
}

.fgn-just-nome {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--fgn-cabecalho-fixo);
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fgn-just-cabecalho .fgn-just-nome {
    z-index: 4;
}

.fgn-just-valor {
    text-align: right;
    white-space: nowrap;
}

/* O RÓTULO do cabeçalho pode QUEBRAR EM DUAS LINHAS, e só ele. Os nomes das medidas aqui são
   longos ("Resultado Geral - Justificado", "Despesa - Justificada") e são do original, então
   encurtar não é opção. Numa linha só, o pivot de Despesa precisava de 103px a mais do que o
   bloco tem no notebook e a quarta coluna ficava fora da tela até alguém rolar na horizontal.
   Quebrando, as quatro colunas cabem. Medido nas quatro janelas.

   O valor continua sem quebrar: número partido em duas linhas seria pior que rolar. */
.fgn-just-cabecalho .fgn-just-valor {
    white-space: normal;
    line-height: 1.2;
}

/* Nível 1 é a Empresa: o mais forte da hierarquia, e nos três blocos. */
.fgn-just-empresa {
    font-weight: 600;
    color: var(--fgn-texto);
}

/* Nível 2 é o Departamento, recuado e mais leve. */
.fgn-just-dep .fgn-just-nome {
    padding-left: 18px;
    font-weight: 400;
}

/* Nível 3 é a Categoria: folha, sem seta e mais recuada ainda. */
.fgn-just-folha .fgn-just-nome {
    padding-left: 49px;
    color: var(--fgn-texto-fraco);
}

/* O realce do clique atravessa a coluna de nome fixa, que tem fundo opaco próprio. Mesmo
   cuidado da tabela de Fluxo de Caixa. */
.fgn-just-cabeca:hover .fgn-just-nome {
    background:
        linear-gradient(rgba(255, 188, 90, 0.08), rgba(255, 188, 90, 0.08)),
        var(--fgn-cabecalho-fixo);
}

/* TELA BAIXA (o notebook de 768px é o caso): a tabela de cima fica com uma fatia maior que a do
   original, pelo mesmo motivo que o combo da Tarefa 32 ficou. Com os 34% de lá ela mostra DUAS
   das oito empresas, e ela é a resposta da página: as seis colunas por empresa. Com 42% mostra
   quatro. Quem cede são os pivots, que passam de oito empresas visíveis para sete e continuam
   rolando por dentro como sempre. Medido nas quatro janelas. */
@media (max-height: 820px) {
    .fgn-just-tela {
        grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
    }
}

/* Em tela estreita os dois pivots não cabem lado a lado: eles empilham e a aba volta a rolar,
   que é o mesmo acordo das outras telas de duas colunas. */
@media (max-width: 760px) {
    .fgn-just-pivots {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgn-just-tela {
        height: auto;
        min-height: 0;
    }
}


/* ── Tarefa 32: a aba de Faturado / Recebido ───────────────────────────────── */
/* O arranjo é o da página 12 do original, medido nela: dois cartões em cima, o combo no meio
   ocupando a largura inteira, e dois gráficos de barras deitadas lado a lado embaixo.

   As proporções são as do arquivo, e não chute. Na área útil daquela página (de y=94 a y=719),
   os cartões ocupam 54px, o combo 240 e a faixa de barras 330. Tirando os cartões, que aqui
   pedem a altura que têm, sobra a divisão 240/330 entre o combo e as barras, ou seja 42 e 58.

   E a faixa de baixo não é meio a meio: no original o bloco de Faturamento tem 640px e o de
   Receita 520, de 1160. São 55 e 45.

   Quem rola aqui são os DOIS blocos de barras, por dentro, pelo mesmo mecanismo da faixa de
   rankings da Tarefa 19 (.fgn-visual-rolagem): são 28 departamentos e a lista não cabe em
   altura nenhuma. O combo não rola: ele encolhe, como na página de Rentáveis / Eficientes. */
.fgn-fat-tela {
    display: grid;
    /* Os cartões pedem a altura que têm; o resto é do combo e das barras, na proporção do
       original, 42 e 58.

       O PISO DE 215px NO COMBO é da Tarefa 36, e é a conta do que ele precisa para não cortar
       nada: 64px é o piso da área de plotagem do Plotly, uns 100px são os 33 nomes de
       departamento deitados a -45 graus, 34px são a faixa da legenda nova e o resto é respiro.
       Abaixo disso os nomes do eixo passam do rodapé do bloco e aparecem pela metade, que foi o
       defeito que a Tarefa 32 já tinha corrigido uma vez e que a legenda reabriu.

       O piso é melhor do que mudar a proporção: onde sobra altura (1920x1080 e 1920x945) a
       divisão do original continua valendo intacta, e onde falta (1600x900 e o notebook) o
       combo leva só o que precisa, em vez de uma fatia percentual que nas telas grandes seria
       exagero. Quem cede é a faixa de barras, e ela pode: os dois blocos de lá rolam por
       dentro, então perder altura custa uma barra visível, não informação. */
    grid-template-rows: auto minmax(215px, 42fr) minmax(0, 58fr);
    /* Sem isto o item de grid assume a largura mínima do conteúdo (os nomes do eixo) e aparece
       rolagem horizontal. Mesmo cuidado da faixa de rankings da Tarefa 19. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--fgn-acima-do-faturado) - var(--fgn-campos-de-data));
    /* Abaixo disto o combo e as barras ficariam ilegíveis; aí sim a página rola. É o mesmo piso
       das outras telas de gráfico, e não o de 340px da aba de Fluxo de Caixa, que pode ceder
       porque lá quem rola é uma tabela. */
    min-height: 380px;
}

/* São DOIS cartões, e não três: a página 12 tem só o Faturamento e as Entradas. Finos, no
   padrão das abas de Fluxo e de Fluxo de Caixa, porque a altura que eles economizam vai para o
   combo e para as barras. Sem mini linha de tendência: o original não tem, e ela pediria uma
   série temporal que esta página não usa em lugar nenhum. */
.fgn-fat-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

.fgn-fat-cartoes .fgn-kpi {
    padding: 8px 18px 10px;
}

.fgn-fat-cartoes .fgn-kpi-valor {
    font-size: 20px;
}

/* O combo é uma caixa de altura definida: título em cima e o gráfico ocupando o resto. Sem isto
   o gráfico não tem contra o que medir 100%. */
.fgn-fat-combo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-fat-combo > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

/* A faixa de baixo, com a divisão 55/45 do original. Os dois blocos usam .fgn-ranking, que já
   traz a caixa e a rolagem interna; o que esta regra faz é só dar a largura de cada um. */
.fgn-fat-barras {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 14px;
    min-height: 0;
    min-width: 0;
}

/* TELA BAIXA (o notebook de 768px é o caso): o combo fica com uma fatia maior que a do
   original, e isso é MEDIDO, não gosto.

   O eixo dele são 33 departamentos com o nome deitado a -45 graus, e esse texto ocupa altura.
   Com a proporção do original, o bloco fica com 148px no notebook; a área de plotagem do Plotly
   já está no piso dela, 64px, então o que sobra para o texto não cresce mais, e os nomes passam
   42px ALÉM do rodapé do bloco: 29 dos 33 aparecem pela metade. Medido assim, tick a tick,
   contra a borda do bloco.

   Quem cede é a faixa de barras, e ela pode: os dois blocos de lá rolam por dentro, então
   perder altura custa uma barra visível, não informação. O combo não tem essa saída.

   Os cartões também afinam aqui, pelo mesmo motivo e do mesmo jeito que na aba de Fluxo.

   A FATIA DE 54% SAIU NA TAREFA 36 e foi substituída pelo piso de 205px na regra de cima, que
   resolve o mesmo problema sem mexer na proporção do original: ver .fgn-fat-tela. O que sobrou
   aqui são os cartões, que continuam afinando em tela baixa. */
@media (max-height: 820px) {
    .fgn-fat-cartoes .fgn-kpi {
        padding: 6px 14px 8px;
    }

    .fgn-fat-cartoes .fgn-kpi-valor {
        font-size: 18px;
    }
}

/* Em tela estreita os dois blocos não cabem lado a lado: eles empilham e a aba volta a rolar,
   que é o mesmo acordo da faixa de rankings. A tarefa é sobre a tela de quem apresenta, que é
   desktop; aqui o que importa é continuar legível. */
@media (max-width: 760px) {
    .fgn-fat-barras {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgn-fat-tela {
        height: auto;
        min-height: 0;
    }
}


/* ── Tarefa 29: a Visão Geral numa tela só ─────────────────────────────────── */
/* Era a última aba que ainda rolava. As outras quatro pararam na Tarefa 19 e ela ficou de fora
   porque na época não estava em questão; agora está, e o padrão é o mesmo: a altura sai de 100vh
   menos o que a página gasta em volta, e o desconto dos campos De/Até entra sozinho por ser uma
   variável só (Tarefa 22). Uma quarta tela de altura fixa herda o conserto por usar o padrão, e
   era exatamente esse o desenho. */
.fgn-geral-tela {
    display: grid;
    /* os cartões pedem a altura que têm, e os dois gráficos ficam com todo o resto */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--fgn-acima-da-geral) - var(--fgn-campos-de-data));
    /* Abaixo disto os dois gráficos ficariam ilegíveis; aí sim a página rola. */
    min-height: 380px;
}

/* Os dois gráficos lado a lado, dois terços e um terço. A grade é a MESMA dos cartões, três
   colunas iguais com dois vãos, e a Análise Temporal ocupa duas delas. Com duas colunas de
   2fr e 1fr o resultado seria parecido mas não igual: uma grade de dois tem um vão só, e o
   bloco da direita começaria 5px antes do cartão de Resultado. A linha vertical limpa que o
   usuário pediu só sai com a mesma contagem de vãos. */
.fgn-geral-graficos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-height: 0;
}

.fgn-geral-graficos > .fgn-bloco:first-child:not(:only-child) {
    grid-column: span 2;
}

/* No PORTAL o gráfico por empresa não é montado (Tarefa 07), e aí a Análise Temporal fica
   sozinha na linha e ocupa a largura inteira, sem buraco de um terço à direita. É o mesmo
   comportamento da faixa de rankings da aba de Fluxo quando um bloco sai. */
.fgn-geral-graficos > .fgn-bloco:only-child {
    grid-column: 1 / -1;
}

/* Cada bloco é uma caixa de altura definida: título em cima e o gráfico ocupando o resto. Sem
   isto o gráfico não tem contra o que medir 100%. É a mesma peça da tela de Rentáveis. */
.fgn-geral-graficos > .fgn-bloco {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.fgn-geral-graficos > .fgn-bloco > .fgn-bloco-titulo {
    flex: 0 0 auto;
}

.fgn-visual-estica {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

/* ── Tarefa 24: o arranjo da aba de Fluxo, com os filtros à direita ────────── */
/* O original põe os slicers na COLUNA DA DIREITA em todas as páginas (x=960 nesta), e a barra
   no topo é invenção nossa. Ela custa caro: 91px fechada e 132px aberta, mais 16px de margem,
   num canvas em que o original tem 625px úteis e um notebook nos dá 504.

   Nesta aba, e só nela, a barra deixa de ficar no topo e passa a ser a coluna à direita do
   gráfico. O bloco de filtros NÃO muda de lugar no DOM: quem muda é a grade. A janela inteira
   vira uma grade de duas colunas e sete faixas, e o painel de Fluxo some da contagem com
   `display: contents`, para os filhos dele (cartões, gráfico, rankings, rodapé) entrarem na
   grade da janela lado a lado com o bloco de filtros. Sem isso os dois estariam em caixas
   diferentes e não teriam como dividir a mesma faixa.

   A coluna tem a MESMA largura nos dois modos, 25%, que é a do modo combinado no original
   (960 de 1280). No modo único o original usa 16%, e aqui é desvio deliberado: trocar de
   Movimento não pode fazer o filtro pular de lugar.

   A coluna ocupa as DUAS faixas (Emenda 1 da Tarefa 24), e não só a do gráfico como no
   original. A fidelidade do desenho foi trocada, de olhos abertos, pelo filtro de data
   funcionando: só na faixa do gráfico ela CORTA os campos De/Até, e filtro cortado sai do
   alcance de quem usa.

   A Tarefa 25 tentou devolvê-la à altura do gráfico e a conta não fechou, mesmo com os 48px
   que o item 2 liberou. Medido com a coluna baixa: a caixa fica com 244px em 1920x1080, 181 em
   1600x900 e 135 no notebook, contra 161px de conteúdo com o período fechado e 202 com ele
   aberto. Cabe em três dos seis casos e corta nos outros três: faltam 21px a 1600x900 com o
   período aberto, 26 no notebook fechado e 67 no notebook aberto. Os 48px do item 2 encolheram
   essa falta, que era de 38, 43 e 84px, mas não a fecharam.

   EMENDA 1 DA TAREFA 25: a coluna continuou comprida e afinou para 200px, para devolver
   largura aos rankings. Durou um dia.

   TAREFA 26, que é o desenho de hoje: a coluna SOBE para a linha dos cartões e termina na base
   do gráfico, que é onde o original a põe. Quem paga a largura dela agora são os cartões, que
   encolhem e param onde o gráfico para, e não mais os rankings, que passam a ter a linha
   inteira. Como a largura da coluna deixou de custar aos rankings, ela volta aos 25% (350px):
   com 350 os campos De/Até cabem lado a lado de novo e o conteúdo dela cai de 269 para 202px,
   que é o que faz a coluna curta finalmente caber. Medido: a caixa fica com 318px em 1920x1080,
   270 em 1920x945, 254 em 1600x900 e 208 no notebook, contra 161px de conteúdo com o período
   fechado e 202 com ele aberto. Cabe nas quatro, e a folga é de 116, 68, 52 e 6px. O notebook
   com o período aberto é o caso justo, e é onde uma mudança de fonte ou de corpo aqui volta a
   apertar: qualquer coisa que engorde a coluna em mais de 6px precisa de medida nova. */
.fgn-em-fluxo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25%);
    /* cabeçalho, abas, seletores, cartões, gráfico, rankings, rodapé */
    grid-template-rows: auto auto auto auto minmax(0, 32fr) minmax(0, 59fr) auto;
    gap: 14px;
    height: calc(100vh - var(--fgn-fora-da-janela));
    min-height: 380px;
}

/* Modo único: um ranking a menos, e o gráfico fica com o que sobra. Mesmas proporções do
   original para aquelas quatro páginas (287/285). */
.fgn-em-fluxo-unico {
    grid-template-rows: auto auto auto auto minmax(0, 46fr) minmax(0, 45fr) auto;
}

/* Cada peça na sua faixa. A ordem no DOM não importa: o bloco de filtros vem antes do painel e
   mesmo assim cai na faixa do gráfico, na coluna da direita. */
.fgn-em-fluxo > .fgn-cabecalho { grid-area: 1 / 1 / 2 / -1; }
.fgn-em-fluxo > .fgn-abas { grid-area: 2 / 1 / 3 / -1; }
.fgn-em-fluxo .fgn-seletores { grid-area: 3 / 1 / 4 / -1; }
.fgn-em-fluxo .fgn-fluxo-cartoes { grid-area: 4 / 1 / 5 / 2; }
.fgn-em-fluxo .fgn-fluxo-mensal { grid-area: 5 / 1 / 6 / 2; }
.fgn-em-fluxo > #fgn-filtros-bloco { grid-area: 4 / 2 / 6 / -1; }
.fgn-em-fluxo .fgn-rankings { grid-area: 6 / 1 / 7 / -1; }
.fgn-em-fluxo .fgn-fluxo-tela > .fgn-rodape { grid-area: 7 / 1 / 8 / -1; }

/* O painel e os invólucros somem da grade para os filhos subirem. As duas camadas sem classe
   são do dcc.Loading, que embrulha o conteúdo por conta própria; por isso o `:not`, que evita
   dissolver junto os seletores de Movimento e Agrupar por, que são irmãos delas e TÊM de
   continuar sendo uma caixa só. (O painel em si recebe `display: contents` pelo estilo em
   linha do callback da aba, porque estilo em linha vence folha de estilo.) */
.fgn-em-fluxo > #fgn-painel-fluxo > div:not(.fgn-seletores),
.fgn-em-fluxo > #fgn-painel-fluxo > div:not(.fgn-seletores) > div,
.fgn-em-fluxo #fgn-fluxo-conteudo,
.fgn-em-fluxo .fgn-fluxo-tela {
    display: contents;
}

/* A coluna de filtros: os dois empilhados, ocupando a linha dos cartões mais a do gráfico.

   O `overflow` é VISÍVEL, e isso é da Tarefa 26. Enquanto a coluna era comprida, `hidden`
   servia de rede: ela tinha 400px de sobra e nada passava dela. Curta, ela passou a cortar o
   MENU do seletor de período, que abre para baixo com 202px e nasce a meio caminho da coluna.
   Medido: o menu passava 30px da base em 1920x1080 e 140px no notebook, e ali o clique na
   opção caía no título do ranking que está atrás. Ou seja, `hidden` deixava de proteger o
   desenho e passava a impedir a escolha do período.

   Quem segura o tamanho da coluna é `min-height: 0` mais as faixas da grade, não o overflow: a
   contribuição dela para a linha automática dos cartões continua sendo zero, e a faixa do
   gráfico é fr. O menu é `position: absolute`, então também não entra na altura da página. Se
   um dia o conteúdo não couber, ele vaza por cima do gráfico em vez de sumir, o que é o aviso
   visível que a gente quer, e continua sendo caso de medir e reportar. */
.fgn-em-fluxo > #fgn-filtros-bloco {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    margin-bottom: 0;
    min-height: 0;
    overflow: visible;
}

/* Tarefa 25, item 2: os três blocos do topo têm margem própria SOMADA ao gap de 14px da
   grade, enquanto o gráfico e os rankings só têm o gap. Isso fazia o cabeçalho valer 32px de
   respiro abaixo dele, as abas 28 e os seletores 30, contra os 14 que separam o gráfico dos
   rankings. A régua é essa separação de baixo, que é a que o usuário aprovou. Zerar as três
   aqui devolve exatamente 48px, e eles vão para a altura do gráfico. Vale só nesta aba. */
.fgn-em-fluxo > .fgn-cabecalho,
.fgn-em-fluxo > .fgn-abas,
.fgn-em-fluxo .fgn-seletores {
    margin-bottom: 0;
}

/* Os cartões afinam para a proporção do original, 54 de 720, e ficam com a mesma cara dos
   seletores de Movimento e Agrupar por, que já eram finos. */
.fgn-em-fluxo .fgn-fluxo-cartoes .fgn-kpi {
    padding: 7px 14px 8px;
}

.fgn-em-fluxo .fgn-fluxo-cartoes .fgn-kpi-texto {
    gap: 1px;
}

/* A entreletra saiu daqui na Tarefa 29 e virou uma regra só, na base, relativa ao corpo. Aqui
   sobra o que é mesmo desta aba: o corpo menor do cartão fino. */
.fgn-em-fluxo .fgn-fluxo-cartoes .fgn-kpi-rotulo {
    font-size: 10.5px;
}

.fgn-em-fluxo .fgn-fluxo-cartoes .fgn-kpi-valor {
    font-size: 18px;
}

/* Em tela estreita a grade de duas colunas deixa de fazer sentido: os filtros voltam para
   cima, em faixa própria, e o gráfico usa a largura inteira. */
@media (max-width: 900px) {
    .fgn-em-fluxo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto minmax(0, 32fr) minmax(0, 59fr) auto;
    }

    .fgn-em-fluxo-unico {
        grid-template-rows: auto auto auto auto auto minmax(0, 46fr) minmax(0, 45fr) auto;
    }

    .fgn-em-fluxo > #fgn-filtros-bloco { grid-area: 3 / 1 / 4 / -1; }
    .fgn-em-fluxo .fgn-seletores { grid-area: 4 / 1 / 5 / -1; }
    .fgn-em-fluxo .fgn-fluxo-cartoes { grid-area: 5 / 1 / 6 / -1; }
    .fgn-em-fluxo .fgn-fluxo-mensal { grid-area: 6 / 1 / 7 / -1; }
    .fgn-em-fluxo .fgn-rankings { grid-area: 7 / 1 / 8 / -1; }
    .fgn-em-fluxo .fgn-fluxo-tela > .fgn-rodape { grid-area: 8 / 1 / 9 / -1; }
}

}