/* =====================================================================
   GRÁFICOS DO ZEN — tokens de DADO e as marcas do SVG do servidor.

   Folha própria, e não mais um bloco no layout: o layout é de todos, e os
   gráficos são de quem os desenha. Servida pelo app (`style-src 'self'`).

   ⚠️ COR EM CLASSE, GEOMETRIA EM ATRIBUTO. Nenhum `style=` no HTML: o SVG
   leva `x`, `y`, `d` como atributo de apresentação, e a cor vem daqui. É o que
   deixa o tema trocar sem redesenhar.

   ⚠️ OS TOKENS DE DADO NÃO SÃO OS DE TEXTO. `--zen-receita` (#0b6b6b) tem
   croma 0,079 — legível como texto, mas numa área lê como cinza. As marcas
   usam o degrau "de dado" da mesma família, validado em deuteranopia (ΔE 16,5
   no claro, 17,9 no escuro; ver 03-dataviz/01-proposta.md §0.1).

   ⚠️ OS DOIS BLOCOS ESCUROS SÃO IDÊNTICOS (sistema e escolha), como no layout.
   Trocar um, trocar o outro.
   ===================================================================== */
:root {
    /* Calendário de vencimentos (§3.3): divergente, 3 degraus por braço. */
    --cal-e1: #b8e2f4;
    --cal-e2: #63bfe1;
    --cal-e3: #027797;
    --cal-neutro: #efebe0;
    --cal-s1: #ffcfbc;
    --cal-s2: #fd9a73;
    --cal-s3: #ae532d;
    --viz-entrada: #00789a;
    --viz-saida: #c55123;
    --viz-saldo: #08263e;
    --viz-contexto: #8a969c;
    --viz-faixa: rgba(8, 38, 62, 0.12);
    --viz-grade: #ece8de;
    --viz-eixo: #cfc8b8;
    --viz-eixo-forte: #8a969c;
    --viz-negativo: rgba(181, 67, 42, 0.07);
    /* Categórica da DRE (CorDaLinha): azul, ocre, violeta — sem vermelho,
       verde nem rosa. Validada com `--pairs all` (ver CorDaLinha.php). */
    --viz-cat-0: #2a78d6;
    --viz-cat-1: #eda100;
    --viz-cat-2: #4a3aa7;
    /* Rampas ordinais de atraso (proposta §0.1, `--ordinal` ✔): mais escuro =
       mais velho. No escuro a âncora inverte (mais claro = mais velho). */
    --viz-rec-0: #63bfe1;
    --viz-rec-1: #3c9abb;
    --viz-rec-2: #027797;
    --viz-rec-3: #005674;
    --viz-pag-0: #fd9a73;
    --viz-pag-1: #d57650;
    --viz-pag-2: #ae532d;
    --viz-pag-3: #893102;
    /* A tinta do rótulo DENTRO do segmento: escura nos dois degraus claros,
       branca nos dois escuros — e o contrário no tema escuro. */
    --viz-txt-faixa-0: #08263e;
    --viz-txt-faixa-1: #08263e;
    --viz-txt-faixa-2: #ffffff;
    --viz-txt-faixa-3: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) {
        --cal-e1: #104355;
        --cal-e2: #2286a7;
        --cal-e3: #7dd9fc;
        --cal-neutro: #1a2b39;
        --cal-s1: #5b2f1e;
        --cal-s2: #bf623d;
        --cal-s3: #ffad86;
        --viz-entrada: #1e9dc0;
        --viz-saida: #e0703e;
        --viz-saldo: #a8c5b0;
        --viz-contexto: #6b7d88;
        --viz-faixa: rgba(168, 197, 176, 0.18);
        --viz-grade: #1f303d;
        --viz-eixo: #2f4252;
        --viz-eixo-forte: #6b7d88;
        --viz-negativo: rgba(255, 148, 102, 0.08);
        --viz-cat-0: #256abf;
        --viz-cat-1: #c98500;
        --viz-cat-2: #9085e9;
        --viz-rec-0: #00607f;
        --viz-rec-1: #2286a7;
        --viz-rec-2: #52afd0;
        --viz-rec-3: #7dd9fc;
        --viz-pag-0: #973e16;
        --viz-pag-1: #bf623d;
        --viz-pag-2: #e88761;
        --viz-pag-3: #ffad86;
        --viz-txt-faixa-0: #ffffff;
        --viz-txt-faixa-1: #ffffff;
        --viz-txt-faixa-2: #0b1620;
        --viz-txt-faixa-3: #0b1620;
    }
}

:root[data-tema='escuro'] {
    --cal-e1: #104355;
    --cal-e2: #2286a7;
    --cal-e3: #7dd9fc;
    --cal-neutro: #1a2b39;
    --cal-s1: #5b2f1e;
    --cal-s2: #bf623d;
    --cal-s3: #ffad86;
    --viz-entrada: #1e9dc0;
    --viz-saida: #e0703e;
    --viz-saldo: #a8c5b0;
    --viz-contexto: #6b7d88;
    --viz-faixa: rgba(168, 197, 176, 0.18);
    --viz-grade: #1f303d;
    --viz-eixo: #2f4252;
    --viz-eixo-forte: #6b7d88;
    --viz-negativo: rgba(255, 148, 102, 0.08);
    --viz-cat-0: #256abf;
    --viz-cat-1: #c98500;
    --viz-cat-2: #9085e9;
    --viz-rec-0: #00607f;
    --viz-rec-1: #2286a7;
    --viz-rec-2: #52afd0;
    --viz-rec-3: #7dd9fc;
    --viz-pag-0: #973e16;
    --viz-pag-1: #bf623d;
    --viz-pag-2: #e88761;
    --viz-pag-3: #ffad86;
    --viz-txt-faixa-0: #ffffff;
    --viz-txt-faixa-1: #ffffff;
    --viz-txt-faixa-2: #0b1620;
    --viz-txt-faixa-3: #0b1620;
}

/* ---- o cartão da projeção ---------------------------------------- */
.painel-projecao,
.painel-indicadores {
    margin-bottom: 1.5rem;
}

.pergunta {
    font-size: var(--fs-destaque, 1.0625rem);
    margin: 0 0 0.4rem;
}

.painel-indicadores > .pergunta {
    margin-bottom: 0.75rem;
}

.heroi-linha {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.4rem 0;
}

.heroi-rotulo {
    display: block;
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.heroi {
    display: block;
    font-size: var(--fs-heroi, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
}

.dia-escolhido {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.dia-escolhido input {
    width: auto;
}

.figura {
    margin: 0;
    position: relative;
}

.figura .resposta {
    margin: 0 0 0.9rem;
    max-width: 78ch;
}

.selo {
    display: inline-block;
    font-size: var(--fs-micro, 0.75rem);
    font-weight: 600;
    padding: 0.05rem 0.55rem;
    border-radius: var(--raio-pilula, 999px);
    margin-right: 0.35rem;
}

.selo-alerta {
    background: var(--zen-despesa-bg);
    color: var(--zen-despesa);
}

.nota {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
    margin: 0.35rem 0 0.6rem;
}

/* ---- legenda ------------------------------------------------------ */
.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
    margin: 0 0 0.4rem;
    align-items: center;
}

.legenda i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.k-linha {
    width: 18px;
    height: 2px;
    background: var(--viz-saldo);
}

.k-cons {
    width: 18px;
    height: 0;
    border-top: 1.5px solid var(--viz-contexto);
}

.k-faixa {
    width: 14px;
    height: 10px;
    background: var(--viz-faixa);
    border-radius: 2px;
}

.k-menor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--viz-saldo);
    box-shadow:
        0 0 0 2px var(--zen-surface),
        0 0 0 3px var(--viz-saldo);
}

/* ---- o SVG -------------------------------------------------------- */
svg.grafico {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--fonte-numeros, inherit);
}

svg.grafico.colunas {
    margin-top: 0.25rem;
}

.viz-grade {
    stroke: var(--viz-grade);
    stroke-width: 1;
}

.eixo {
    stroke: var(--viz-eixo);
    stroke-width: 1;
}

.eixo.forte {
    stroke: var(--viz-eixo-forte);
}

.eixo-txt {
    fill: var(--zen-text-soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.eixo-txt.forte {
    fill: var(--zen-text-main);
    font-weight: 600;
}

.rotulo {
    fill: var(--zen-text-main);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.rotulo.suave {
    fill: var(--zen-text-soft);
    font-size: 11.5px;
}

.rotulo.forte {
    font-weight: 600;
}

.zona-negativa {
    fill: var(--viz-negativo);
}

.linha-saldo {
    fill: none;
    stroke: var(--viz-saldo);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.linha-cons {
    fill: none;
    stroke: var(--viz-contexto);
    stroke-width: 1.5;
}

.faixa {
    fill: var(--viz-faixa);
}

.regua-hoje {
    stroke: var(--zen-text-main);
    stroke-width: 1;
}

.regua-dia {
    stroke: var(--viz-contexto);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.ponto-saldo {
    fill: var(--viz-saldo);
    stroke: var(--zen-surface);
    stroke-width: 2;
}

.ponto-cons {
    fill: var(--viz-contexto);
    stroke: var(--zen-surface);
    stroke-width: 2;
}

/* O pior dia: ponto com ANEL, para não ser confundido com o do dia escolhido. */
.ponto-menor {
    fill: var(--zen-surface);
    stroke: var(--viz-saldo);
    stroke-width: 2.5;
}

.alvos rect {
    fill: transparent;
}

.alvos rect:hover {
    fill: var(--viz-faixa);
}

.cruz line {
    stroke: var(--zen-text-soft);
    stroke-width: 1;
    visibility: hidden;
}

.cruz.ativa line {
    visibility: visible;
}

.col-entrada {
    fill: var(--viz-entrada);
}

.col-saida {
    fill: var(--viz-saida);
}

/* ---- a dica da régua (graficos.js) -------------------------------- */
.dica {
    position: absolute;
    pointer-events: none;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-radius: var(--raio-p, 6px);
    padding: 0.5rem 0.65rem;
    font-size: var(--fs-pequeno, 0.8125rem);
    box-shadow: var(--sombra-2);
    min-width: 13rem;
    z-index: 2;
}

.dica[hidden] {
    display: none;
}

.dica b {
    display: block;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.dica .lin {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.dica .lin i {
    display: inline-block;
    width: 12px;
    height: 2px;
    vertical-align: middle;
    margin-right: 0.3rem;
}

.dica .k-entrada {
    height: 8px;
    background: var(--viz-entrada);
}

.dica .k-saida {
    height: 8px;
    background: var(--viz-saida);
}

/* ---- molduras: larga ou estreita ---------------------------------- */
/* ⚠️ Não é o mesmo SVG encolhido — ver `GeometriaDaProjecao`. */
.proj-estreita {
    display: none;
}

@media (max-width: 560px) {
    .proj-larga {
        display: none;
    }

    .proj-estreita {
        display: block;
    }

    .heroi {
        font-size: var(--fs-kpi, 1.75rem);
    }
}

/* ---- tabela gêmea -------------------------------------------------- */
.gemea {
    margin-top: 0.6rem;
    font-size: var(--fs-pequeno, 0.8125rem);
}

.gemea summary {
    cursor: pointer;
    color: var(--zen-text-soft);
    width: max-content;
}

.tabela-gemea {
    border-collapse: collapse;
    width: 100%;
    margin-top: 0.5rem;
}

.tabela-gemea caption {
    text-align: left;
    color: var(--zen-text-soft);
    padding-bottom: 0.25rem;
}

.tabela-gemea th,
.tabela-gemea td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--zen-border);
    text-align: left;
    font-weight: 400;
}

.tabela-gemea thead th {
    color: var(--zen-text-soft);
    font-weight: 600;
}

.tabela-gemea .n {
    text-align: right;
}

.num-negativo {
    color: var(--zen-despesa);
}

/* ---- indicadores ---------------------------------------------------- */
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.85rem;
}

.indicador {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-radius: var(--raio-m, 10px);
    padding: 0.85rem 1rem;
    color: var(--zen-text-main);
    text-decoration: none;
}

.indicador:hover {
    border-color: var(--zen-border-strong);
}

.indicador-rot {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.indicador-periodo,
.indicador-sub,
.indicador-rodape {
    font-size: var(--fs-micro, 0.75rem);
    color: var(--zen-text-soft);
}

.indicador-val {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.delta {
    font-size: var(--fs-pequeno, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.delta-bom {
    color: var(--zen-receita);
}

.delta-ruim {
    color: var(--zen-despesa);
}

.delta-neutro {
    color: var(--zen-text-soft);
    font-weight: 400;
}

.spark {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0.35rem 0 0.15rem;
    overflow: visible;
}

.spark-linha {
    fill: none;
    stroke: var(--viz-contexto);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.spark-atual {
    fill: var(--viz-saldo);
    stroke: var(--zen-surface);
    stroke-width: 1.5;
}

/* Mês pela metade: ponto VAZADO — não é o fechamento do mês. */
.spark-parcial {
    fill: var(--zen-surface);
    stroke: var(--viz-saldo);
    stroke-width: 1.5;
}

.spark-alvo {
    fill: transparent;
}

@media print {
    .gemea > summary {
        display: none;
    }

    .dica {
        display: none;
    }
}

/* =====================================================================
   DRE — a cor da linha, a cascata, o comparativo e a margem.
   ===================================================================== */

/* ⚠️ A COR DA LINHA SAIU DO LAYOUT PARA CÁ, e com um nível a mais de
   especificidade: esta folha é carregada ANTES do `<style>` do layout, que
   ainda declara a paleta antiga (`.linha-cor-0..5`, falha no validador).
   Mesma especificidade, quem vem depois ganha — por isso `.linhas-do-dre`. */
.linhas-do-dre .linha-cor-0 {
    --cor-da-linha: var(--viz-cat-0);
}

.linhas-do-dre .linha-cor-1 {
    --cor-da-linha: var(--viz-cat-1);
}

.linhas-do-dre .linha-cor-2 {
    --cor-da-linha: var(--viz-cat-2);
}

.painel-cascata,
.painel-comparativo,
.painel-margem,
.painel-aging,
.painel-devedores {
    margin-bottom: 1.5rem;
}

.defs-ocultas {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---- legenda: blocos, hachura e tique ------------------------------ */
.k-bloco {
    width: 12px;
    height: 10px;
    border-radius: 2px;
}

.k-bloco.k-entrada {
    background: var(--viz-entrada);
}

.k-bloco.k-saida {
    background: var(--viz-saida);
}

.k-bloco.k-subtotal {
    background: var(--viz-saldo);
}

.k-bloco.k-hachura {
    border: 1px solid var(--zen-text-soft);
    background: repeating-linear-gradient(
        45deg,
        var(--zen-text-soft) 0 1.5px,
        transparent 1.5px 4px
    );
}

.k-tique {
    width: 2px;
    height: 12px;
    background: var(--viz-contexto);
}

/* ---- a cascata ------------------------------------------------------ */
/* ⚠️ SEM ESPAÇO ENTRE AS LINHAS: os conectores de 1 px são metade em cada
   SVG, e qualquer `gap` partiria o fio. O respiro está dentro do SVG. */
.cascata {
    display: grid;
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) minmax(7.5rem, auto);
    column-gap: 0.85rem;
    row-gap: 0;
    margin: 0.4rem 0 0.2rem;
}

.cascata-linha {
    display: contents;
}

.cascata-rotulo {
    align-self: center;
    text-align: right;
    font-size: var(--fs-pequeno, 0.8125rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.cascata-subtotal .cascata-rotulo,
.cascata-subtotal .cascata-valor b {
    font-weight: 600;
}

.cascata-barra {
    display: block;
    width: 100%;
    overflow: visible;
}

.cascata-valor {
    align-self: center;
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
    font-size: var(--fs-pequeno, 0.8125rem);
    line-height: 1.15;
}

.cascata-valor b {
    font-weight: 500;
}

.cascata-valor small {
    color: var(--zen-text-soft);
    font-size: var(--fs-micro, 0.75rem);
}

.cascata-linha.clicavel > * {
    cursor: pointer;
}

.cascata-linha.clicavel:hover .cascata-rotulo {
    text-decoration: underline;
}

.barra-entrada {
    fill: var(--viz-entrada);
}

.barra-saida {
    fill: var(--viz-saida);
}

.barra-subtotal {
    fill: var(--viz-saldo);
}

/* O "a realizar": a MESMA cor, com hachura — fato e promessa na mesma barra. */
.barra-prevista {
    stroke-width: 1;
}

.barra-prevista-entrada {
    stroke: var(--viz-entrada);
}

.barra-prevista-saida {
    stroke: var(--viz-saida);
}

.hachura-fundo {
    fill: var(--zen-surface);
}

.hachura-entrada,
.hachura-saida {
    stroke-width: 2;
}

.hachura-entrada {
    stroke: var(--viz-entrada);
}

.hachura-saida {
    stroke: var(--viz-saida);
}

.conector {
    stroke: var(--viz-eixo);
    stroke-width: 1;
}

.tique {
    stroke: var(--viz-contexto);
    stroke-width: 2;
}

@media (max-width: 560px) {
    /* No celular: rótulo e valor numa linha, a barra embaixo, inteira. */
    .cascata {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cascata-rotulo {
        text-align: left;
        padding-top: 0.45rem;
    }

    .cascata-valor {
        text-align: right;
        padding-top: 0.45rem;
    }

    .cascata-barra {
        grid-column: 1 / -1;
        order: 3;
    }

    .cascata-linha {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    .cascata-eixo .cascata-rotulo,
    .cascata-eixo .cascata-valor {
        display: none;
    }

    /* Seis marcas de "−300 mil" não cabem em 300 px: uma sim, uma não. */
    .marca-alternada {
        display: none;
    }

    /* Com o texto entre uma barra e a seguinte, o fio do conector partiria em
       tocos soltos: no celular ele sai, e o degrau se lê pela posição. */
    .conector {
        display: none;
    }
}

/* ---- o comparativo ---------------------------------------------------- */
.tabela-comparativo .linha-subtotal th,
.tabela-comparativo .linha-subtotal td,
.tabela-gemea .linha-subtotal th {
    font-weight: 600;
}

.tabela-gemea .num {
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
    white-space: nowrap;
}

.tabela-gemea .suave {
    color: var(--zen-text-soft);
}

.efeito {
    white-space: nowrap;
}

.mini-delta {
    vertical-align: middle;
    margin-right: 0.35rem;
}

.delta-bom-barra {
    fill: var(--viz-entrada);
}

.delta-ruim-barra {
    fill: var(--viz-saida);
}

/* ---- a margem --------------------------------------------------------- */
svg.linha-mensal {
    margin-top: 0.25rem;
}

.linha-margem {
    stroke: var(--viz-saldo);
    stroke-width: 2;
    stroke-linecap: round;
}

.ponto-parcial {
    fill: var(--zen-surface);
    stroke: var(--viz-saldo);
    stroke-width: 2;
}

.alvo-ponto {
    fill: transparent;
}

.alvo-ponto:hover {
    fill: var(--viz-faixa);
}

@media (max-width: 560px) {
    .mes-alternado {
        display: none;
    }
}

/* =====================================================================
   TÍTULOS — o aging 100% e quem deve.
   ===================================================================== */
.aging-barras {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem 0.85rem;
    align-items: center;
    margin: 0.5rem 0 0.4rem;
}

.aging-barras .rotulo-da-barra {
    font-size: var(--fs-pequeno, 0.8125rem);
    font-weight: 600;
    text-align: right;
}

.aging-barras .total-da-barra {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-pequeno, 0.8125rem);
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
    font-weight: 600;
    line-height: 1.15;
}

.aging-barras .total-da-barra small {
    font-weight: 400;
    color: var(--zen-text-soft);
    font-size: var(--fs-micro, 0.75rem);
}

.aging-barras .sem-vencido {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.barra-100 {
    display: block;
    width: 100%;
    overflow: visible;
}

/* A folga de 2 px entre segmentos: contorno da cor do cartão, 1 px de cada
   lado (em percentual não se soma "2 px"). */
.seg {
    stroke: var(--zen-surface);
    stroke-width: 2;
}

.seg-receber-0 {
    fill: var(--viz-rec-0);
}

.seg-receber-1 {
    fill: var(--viz-rec-1);
}

.seg-receber-2 {
    fill: var(--viz-rec-2);
}

.seg-receber-3 {
    fill: var(--viz-rec-3);
}

.seg-pagar-0 {
    fill: var(--viz-pag-0);
}

.seg-pagar-1 {
    fill: var(--viz-pag-1);
}

.seg-pagar-2 {
    fill: var(--viz-pag-2);
}

.seg-pagar-3 {
    fill: var(--viz-pag-3);
}

.seg-txt {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
    pointer-events: none;
}

.seg-txt-0 {
    fill: var(--viz-txt-faixa-0);
}

.seg-txt-1 {
    fill: var(--viz-txt-faixa-1);
}

.seg-txt-2 {
    fill: var(--viz-txt-faixa-2);
}

.seg-txt-3 {
    fill: var(--viz-txt-faixa-3);
}

.k-receber-0 {
    background: var(--viz-rec-0);
}

.k-receber-1 {
    background: var(--viz-rec-1);
}

.k-receber-2 {
    background: var(--viz-rec-2);
}

.k-receber-3 {
    background: var(--viz-rec-3);
}

.k-pagar-0 {
    background: var(--viz-pag-0);
}

.k-pagar-1 {
    background: var(--viz-pag-1);
}

.k-pagar-2 {
    background: var(--viz-pag-2);
}

.k-pagar-3 {
    background: var(--viz-pag-3);
}

.legenda .k-par {
    display: inline-flex;
    gap: 1px;
    margin-right: 0.4rem;
}

.legenda .k-par i {
    margin: 0;
}

.devedores {
    display: grid;
    grid-template-columns: minmax(6rem, 14rem) minmax(0, 1fr) auto;
    gap: 0.55rem 0.85rem;
    align-items: center;
    margin: 0.4rem 0;
}

.devedores .nome-do-devedor {
    font-size: var(--fs-pequeno, 0.8125rem);
    text-align: right;
    overflow-wrap: anywhere;
}

.devedores .total-do-devedor {
    font-size: var(--fs-pequeno, 0.8125rem);
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.aviso-suave {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
    border-left: 3px solid var(--zen-border-strong);
    padding: 0.35rem 0.7rem;
    margin: 0.5rem 0;
}

/* Uma linha da grade: some no largo (os filhos viram células da grade de
   fora), e vira subgrade no celular para a barra descer inteira. */
.linha-da-grade {
    display: contents;
}

@media (max-width: 560px) {
    .aging-barras,
    .devedores {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.3rem;
    }

    .linha-da-grade {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        row-gap: 0.25rem;
        margin-bottom: 0.4rem;
    }

    .aging-barras .rotulo-da-barra,
    .devedores .nome-do-devedor {
        text-align: left;
    }

    .linha-da-grade .barra-100,
    .linha-da-grade .sem-vencido {
        grid-column: 1 / -1;
        order: 3;
    }

    .aging-barras .total-da-barra {
        flex-direction: row;
        gap: 0.3rem;
        align-items: baseline;
    }
}

@media print {
    .gemea[open] > summary,
    .gemea > summary {
        display: none;
    }

    .gemea > :not(summary) {
        display: block;
    }
}

/* O nome da faixa ("De 31 a 60 dias") não quebra: quebrado, no celular, virava
   uma coluna de uma palavra por linha (foto de 390 px). A tabela rola. */
.tabela-gemea tbody th[scope='row'],
.tabela-gemea tfoot th[scope='row'] {
    white-space: nowrap;
}

/* --- calendário de vencimentos (§3.3) -------------------------------------- */
.calendario {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
}

.calendario th {
    color: var(--zen-text-soft);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
}

.cal-dia a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 3.25rem;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--cal-neutro);
    color: var(--zen-text-main);
    text-decoration: none;
    font-size: var(--fs-pequeno);
    font-family: var(--fonte-numeros, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
}

.cal-n1 a {
    background: var(--cal-e1);
}
.cal-n2 a {
    background: var(--cal-e2);
}
.cal-n3 a {
    background: var(--cal-e3);
    color: #fff;
}
.cal-nm1 a {
    background: var(--cal-s1);
}
.cal-nm2 a {
    background: var(--cal-s2);
}
.cal-nm3 a {
    background: var(--cal-s3);
    color: #fff;
}

/* No escuro o degrau 3 é o MAIS CLARO: a tinta inverte. */
:root[data-tema='escuro'] .cal-n3 a,
:root[data-tema='escuro'] .cal-nm3 a {
    color: var(--zen-navy);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) .cal-n3 a,
    :root:not([data-tema='claro']) .cal-nm3 a {
        color: var(--zen-navy);
    }
}

/* Dia que passou: hachura suave — já é vencido, não previsão. */
.cal-passado a {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        var(--zen-border) 5px 6px
    );
    color: var(--zen-text-soft);
}

.cal-hoje a {
    outline: 2px solid var(--zen-ring);
    outline-offset: 1px;
    font-weight: 700;
}

.cal-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: var(--esp-3) 0 0;
    color: var(--zen-text-soft);
    font-size: var(--fs-micro);
}

.cal-amostra {
    display: inline-block;
    width: 1rem;
    height: 0.75rem;
    border-radius: 3px;
}

.cal-amostra.cal-n0 {
    background: var(--cal-neutro);
}
.cal-amostra.cal-n1 {
    background: var(--cal-e1);
}
.cal-amostra.cal-n2 {
    background: var(--cal-e2);
}
.cal-amostra.cal-n3 {
    background: var(--cal-e3);
}
.cal-amostra.cal-nm1 {
    background: var(--cal-s1);
}
.cal-amostra.cal-nm2 {
    background: var(--cal-s2);
}
.cal-amostra.cal-nm3 {
    background: var(--cal-s3);
}

@media (max-width: 760px) {
    .cal-dia a {
        height: 2.5rem;
        padding: 2px 4px;
    }

    .cal-seta {
        display: none;
    }
}