/* ============================================================================
   Fluxo de Caixa (/fluxo-caixa) — Planilha viva (.fx-pl) e Resumo de bolso (.fx-rs).

   Cor SÓ por token. Os --fx-* abaixo são apelidos das --mud-palette-* do tema (CashViewTheme.cs),
   então claro e escuro seguem o app sozinhos. Os quatro blocos e o lote não têm cor na paleta do
   Mud: esses têm valor próprio, com a variante escura em [data-theme="dark"] (o mesmo atributo que o
   MainLayout crava no <html>).
   ============================================================================ */

.fx {
    --fx-bg: var(--mud-palette-background);
    --fx-surface: var(--mud-palette-surface);
    --fx-surface-2: var(--mud-palette-drawer-background);
    --fx-sunken: var(--mud-palette-divider);
    --fx-fg: var(--mud-palette-text-primary);
    --fx-muted: var(--mud-palette-text-secondary);
    --fx-faint: var(--mud-palette-text-disabled);
    --fx-line: var(--mud-palette-lines-default);
    --fx-line-soft: var(--mud-palette-divider);
    --fx-accent: var(--mud-palette-primary);
    --fx-accent-strong: var(--mud-palette-primary-darken);
    --fx-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --fx-good: var(--mud-palette-success);
    --fx-bad: var(--mud-palette-error);
    --fx-warn: var(--mud-palette-warning);
    --fx-info: var(--mud-palette-info);
    --fx-good-soft: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --fx-warn-soft: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    --fx-bad-soft: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);

    /* os blocos. A cor de cada um é BlocoDoFluxo.Cor no catálogo (GruposDoFluxo.Blocos), e a tela a
       aplica por style="--pl-spc/--rs-c: var(...)": bloco novo aponta para um token daqui, sem regra nova. */
    --fx-g-cartao: var(--mud-palette-primary-darken);
    --fx-g-caixa: var(--mud-palette-info);
    --fx-g-faturado: #7c4dcc;
    --fx-g-mkp: #0f8f86;
    --fx-g-pagar: var(--mud-palette-error);
    --fx-g-transf: #a8581e;
    --fx-g-imposto: #b0305f;

    /* as três situações e o lote */
    --fx-s-caiu: var(--mud-palette-success);
    --fx-s-vai: var(--mud-palette-info);
    --fx-s-vencido: var(--mud-palette-warning);
    --fx-s-lote: #8a5a00;

    --fx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    --fx-radius: 10px;
    --fx-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
    color: var(--fx-fg);
}
[data-theme="dark"] .fx {
    --fx-accent-strong: var(--mud-palette-primary-lighten);
    --fx-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    --fx-good-soft: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    --fx-warn-soft: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    --fx-bad-soft: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
    --fx-g-cartao: #fb8a3c;
    --fx-g-faturado: #b28cf5;
    --fx-g-mkp: #3cc8bd;
    --fx-g-transf: #e39a62;
    --fx-g-imposto: #f07aa6;
    --fx-s-lote: #e0b44a;
    --fx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.fx :focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; }
.fx-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .fx * { animation: none !important; transition: none !important; } }

/* ── a página: título e as duas abas ──────────────────────────────────────── */
.fx-pagina { max-width: 1280px; margin: 0 auto; }
.fx-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
/* o "atualizando…" tem lugar reservado: some sem empurrar a página quando a carga termina */
.fx-carga { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.fx-carga-oculta { visibility: hidden; }
/* rodapé "Fontes": texto para quem lê a tela; a referência técnica, recolhida */
.fx-fontes { margin-top: 24px; }
.fx-tecnico { margin-top: 6px; font-size: .75rem; color: var(--fx-muted); }
.fx-tecnico summary { cursor: pointer; width: max-content; }
.fx-tecnico ul { margin: 6px 0 0; padding-left: 1.2rem; display: grid; gap: 3px; }
.fx-tecnico code { font-size: .72rem; overflow-wrap: anywhere; }
.fx-abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--fx-sunken); border-radius: 10px; margin-bottom: 20px; max-width: 100%; }
.fx-aba { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--fx-muted); text-decoration: none; white-space: nowrap; }
.fx-aba:hover { color: var(--fx-fg); }
.fx-aba[aria-current="page"] { background: var(--fx-surface); color: var(--fx-fg); font-weight: 600; box-shadow: var(--fx-shadow); }

/* ============================================================================
   PLANILHA VIVA
   ============================================================================ */
.fx-pl {
    --pl-lab: 15.5rem;
    --pl-col: 7.1rem;
    --pl-col-mil: 4.9rem;
    --pl-sp: 6.25rem;
    --pl-hatch: color-mix(in srgb, var(--fx-line) 90%, transparent);
    --pl-p1: 3%; --pl-p2: 6%; --pl-p3: 9%; --pl-p4: 13%; --pl-p5: 17%; --pl-p6: 22%;
    --pl-sec-bg: 6%;
    --pl-hoje-bg: color-mix(in srgb, var(--fx-accent) 13%, var(--fx-surface));
    --pl-on-bg: color-mix(in srgb, var(--fx-accent) 9%, var(--fx-surface));
    --pl-atual-bg: color-mix(in srgb, var(--fx-accent) 8%, var(--fx-surface));
    --pl-heat: var(--fx-fg);
    --pl-spc: var(--fx-muted);
    --pl-det-h: 7.4rem;
    --pl-sv-fg: color-mix(in srgb, var(--fx-muted) 72%, var(--fx-fg));
    position: relative;
}
[data-theme="dark"] .fx-pl {
    --pl-p1: 5%; --pl-p2: 8%; --pl-p3: 11%; --pl-p4: 15%; --pl-p5: 19%; --pl-p6: 24%;
    --pl-sec-bg: 10%;
    --pl-hoje-bg: color-mix(in srgb, var(--fx-accent) 22%, var(--fx-surface));
    --pl-on-bg: color-mix(in srgb, var(--fx-accent) 16%, var(--fx-surface));
    --pl-atual-bg: color-mix(in srgb, var(--fx-accent) 14%, var(--fx-surface));
}

.fx-pl-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; margin: 0 0 14px; }
.fx-pl-cab > div { min-width: 0; }
.fx-pl h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.fx-pl-perg { margin: 4px 0 0; font-size: .95rem; color: var(--fx-muted); }
.fx-pl-meta { margin: 0; font-size: .78rem; color: var(--fx-muted); font-variant-numeric: tabular-nums; }

.fx-pl-card { position: relative; display: flex; flex-direction: column; background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); }
.fx-pl-card > * { min-width: 0; }

.fx-pl-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 14px 16px; border-bottom: 1px solid var(--fx-line-soft); }
.fx-pl-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-pl-rotulo { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fx-muted); }
.fx-pl select { font: inherit; font-size: .86rem; color: var(--fx-fg); background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: 8px; padding: 7px 10px; max-width: 100%; min-height: 36px; }
.fx-pl-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--fx-sunken); border-radius: 9px; max-width: 100%; }
.fx-pl-seg button { font: inherit; font-size: .82rem; color: var(--fx-muted); background: transparent; border: 0; border-radius: 7px; padding: 6px 10px; min-height: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fx-pl-seg button:hover:not(:disabled) { color: var(--fx-fg); }
.fx-pl-seg button[aria-pressed="true"] { background: var(--fx-surface); color: var(--fx-fg); font-weight: 600; box-shadow: var(--fx-shadow); }
.fx-pl-seg button:disabled { opacity: .45; cursor: not-allowed; }
.fx-pl-indisp { font-size: .72rem; color: var(--fx-muted); }
.fx-pl-sd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fx-pl-sd-Recebido { background: var(--fx-s-caiu); }
.fx-pl-sd-AReceber { background: var(--fx-s-vai); }
.fx-pl-sd-VencidoSemBaixa { background: var(--fx-s-vencido); }
.fx-pl-sd-Tudo { border: 1.5px solid var(--fx-muted); }
.fx-pl-sv { font-family: var(--fx-mono); font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--pl-sv-fg); font-weight: 500; }
.fx-pl-sv-l { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--fx-muted); font-weight: 400; white-space: nowrap; }
/* com saída: "entra R$ … · sai R$ …" — os dois lados quebram ENTRE si, nunca no meio do número */
.fx-pl-sv-2 { display: inline-flex; flex-wrap: wrap; column-gap: .65em; row-gap: 0; font-family: inherit; }
.fx-pl-sv-lado { white-space: nowrap; }
.fx-pl-sv-lado + .fx-pl-sv-lado::before { content: "·"; margin-right: .65em; color: var(--fx-muted); }
.fx-pl-sv-r { font-size: .72rem; font-weight: 400; color: var(--fx-muted); }
.fx-pl-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fx-pl-btn { font: inherit; font-size: .84rem; font-weight: 500; color: var(--fx-fg); background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: 8px; padding: 7px 12px; min-height: 36px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.fx-pl-btn:hover:not(:disabled) { background: var(--fx-surface-2); border-color: var(--fx-faint); }
.fx-pl-btn:disabled { opacity: .5; cursor: not-allowed; }
.fx-pl-btn svg { width: 15px; height: 15px; flex: none; }
.fx-pl-btn-pri { border-color: color-mix(in srgb, var(--fx-accent) 45%, var(--fx-line)); background: var(--fx-accent-soft); font-weight: 600; }
.fx-pl-btn-pri svg { color: var(--fx-accent-strong); }
.fx-pl-btn-pri:hover:not(:disabled) { border-color: var(--fx-accent); background: var(--fx-accent-soft); }
.fx-pl-curto { display: none; }

.fx-pl-onota { margin: 0; padding: 10px 16px 0; font-size: .8rem; color: var(--fx-muted); }
.fx-pl-onota b { color: var(--fx-fg); font-weight: 600; }
.fx-pl-aviso { margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; font-size: .82rem; background: var(--fx-good-soft); color: var(--fx-fg); }
.fx-pl-aviso.fx-pl-aviso-x { background: var(--fx-warn-soft); }
.fx-pl-aviso:empty { display: none; }
.fx-pl textarea { display: block; box-sizing: border-box; width: calc(100% - 32px); margin: 8px 16px 0; height: 7rem; font-family: var(--fx-mono); font-size: .72rem; color: var(--fx-fg); background: var(--fx-surface-2); border: 1px solid var(--fx-line); border-radius: 8px; padding: 8px; resize: vertical; }
.fx-pl textarea[hidden] { display: none; }

/* detalhe da célula: altura fixa (a tabela não pula) e preso no topo ao rolar, colado na barra do app
   (--fx-topo é a altura REAL dela, medida no JS; o fallback deixava uma fresta de 6px) */
.fx-pl-det { position: sticky; top: var(--fx-topo, var(--mud-appbar-height, 56px)); z-index: 5; box-sizing: border-box; height: var(--pl-det-h); overflow-y: auto; margin-top: 12px; padding: 12px 16px; background: var(--fx-surface-2); border-top: 1px solid var(--fx-line-soft); border-bottom: 1px solid var(--fx-line); }
.fx-pl-det-conteudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 24px; align-content: start; align-items: start; }
.fx-pl-det-conteudo:empty { display: none; }
.fx-pl-det p { margin: 0; min-width: 0; }
.fx-pl-det-dica { font-size: .82rem; color: var(--fx-muted); }
.fx-pl-det.fx-pl-det-ativo .fx-pl-det-dica { display: none; }
.fx-pl-det-cam { font-size: .76rem; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-pl-det-v { font-family: var(--fx-mono); font-size: 1.3rem; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 2px !important; }
.fx-pl-det-x { font-size: .78rem; color: var(--fx-muted); font-variant-numeric: tabular-nums; margin-top: 2px !important; }
.fx-pl-det-n { font-size: .8rem; line-height: 1.5; color: var(--fx-fg); }

.fx-pl-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 16px; font-size: .72rem; color: var(--fx-muted); border-bottom: 1px solid var(--fx-line-soft); }
.fx-pl-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fx-pl-leg i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.fx-pl-leg .fx-pl-lg-calor { background: linear-gradient(90deg, color-mix(in srgb, var(--fx-s-caiu) var(--pl-p1), transparent), color-mix(in srgb, var(--fx-s-caiu) var(--pl-p6), transparent)); border: 1px solid var(--fx-line-soft); }
.fx-pl-leg .fx-pl-lg-fora { background-image: repeating-linear-gradient(135deg, var(--pl-hatch) 0 1px, transparent 1px 5px); border: 1px solid var(--fx-line-soft); }
.fx-pl-leg .fx-pl-lg-hoje { width: 2px; height: 14px; border-radius: 1px; background: var(--fx-accent); }

/* tabela */
/* A linha dos meses acompanha a rolagem da PÁGINA, logo abaixo do painel de detalhe. `position: sticky` não
   serve: a rolagem horizontal (overflow-x) da caixa vira o contexto de rolagem dele, e o cabeçalho sumia ao
   descer — com o painel de detalhe no lugar. Quem o desloca é o JS (translateY no thead, prenderCabecalho);
   aqui ele ganha fundo opaco e fica por cima das linhas. */
.fx-pl-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fx-pl-t thead { position: relative; z-index: 4; will-change: transform; }
.fx-pl-t thead th, .fx-pl-t thead td { background-color: var(--fx-surface); }
.fx-pl-t thead tr.fx-pl-mh th { box-shadow: inset 0 -1px 0 var(--fx-line); }
.fx-pl-t thead tr.fx-pl-mh th.fx-pl-lab, .fx-pl-t thead tr.fx-pl-mh th.fx-pl-sp { box-shadow: inset -1px 0 0 var(--fx-line), inset 0 -1px 0 var(--fx-line); }
.fx-pl-t thead tr.fx-pl-mh th.fx-pl-seam { box-shadow: inset 2px 0 0 var(--fx-accent), inset 0 -1px 0 var(--fx-line); }
.fx-pl-t { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .8rem; color: var(--fx-fg); }
.fx-pl-t th, .fx-pl-t td { padding: 0; border-bottom: 1px solid var(--fx-line-soft); vertical-align: middle; }
.fx-pl-t .fx-pl-lab { position: sticky; left: 0; z-index: 2; width: var(--pl-lab); min-width: var(--pl-lab); max-width: var(--pl-lab); box-sizing: border-box; padding: .42rem .75rem .42rem .6rem; text-align: left; font-weight: 500; background-color: var(--fx-surface); box-shadow: inset -1px 0 0 var(--fx-line); }
.fx-pl-t thead .fx-pl-lab { z-index: 3; }
.fx-pl-t td.fx-pl-c { min-width: var(--pl-col); box-sizing: border-box; height: 2.15rem; padding: 0 .7rem; text-align: right; white-space: nowrap; font-family: var(--fx-mono); font-size: .76rem; font-variant-numeric: tabular-nums; cursor: default; }
.fx-pl-t.fx-pl-mil td.fx-pl-c { min-width: var(--pl-col-mil); }
.fx-pl-t td.fx-pl-c:focus { outline: none; }
.fx-pl-t td.fx-pl-c:hover, .fx-pl-t td.fx-pl-c.fx-pl-on { box-shadow: inset 0 0 0 2px var(--fx-accent); }
.fx-pl-t td.fx-pl-c.fx-pl-seam:hover, .fx-pl-t td.fx-pl-c.fx-pl-seam.fx-pl-on { box-shadow: inset 2px 0 0 var(--fx-accent), inset 0 0 0 2px var(--fx-accent); }
.fx-pl-t td.fx-pl-c:focus-visible { box-shadow: inset 0 0 0 2px var(--fx-accent), 0 0 0 2px var(--fx-accent-soft); }

.fx-pl-band > * { height: 2.1rem; padding: .5rem .7rem .15rem; border-bottom: 0 !important; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fx-muted); text-align: left; white-space: nowrap; }
.fx-pl-band .fx-pl-lab { box-shadow: inset -1px 0 0 var(--fx-line); }
.fx-pl-band-e { text-align: right !important; padding-right: 3.9rem !important; }
.fx-pl-band-d { position: relative; padding-left: 3.9rem !important; }
.fx-pl-hoje { position: absolute; left: 1px; top: 58%; transform: translate(-50%, -50%); z-index: 1; padding: 1px 8px; border: 1px solid var(--fx-accent); border-radius: 999px; background: var(--pl-hoje-bg); color: var(--fx-fg); font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-pl-seam { box-shadow: inset 2px 0 0 var(--fx-accent); }

.fx-pl-mh th { padding: .45rem .7rem .5rem; border-bottom: 1px solid var(--fx-line); font-size: .74rem; font-weight: 600; color: var(--fx-muted); text-align: right; white-space: nowrap; vertical-align: bottom; }
.fx-pl-mh th.fx-pl-lab { text-align: left; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.fx-pl-mh th small { display: block; font-size: .68rem; font-weight: 500; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
.fx-pl-mh th.fx-pl-atual { background-color: var(--pl-atual-bg); color: var(--fx-fg); }
.fx-pl-mh th.fx-pl-on { color: var(--fx-fg); background-color: var(--pl-on-bg); }
.fx-pl-mh th.fx-pl-sph { text-align: left; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }

/* níveis de linha */
.fx-pl tr.fx-pl-s-Recebido { --pl-heat: var(--fx-s-caiu); }
.fx-pl tr.fx-pl-s-AReceber { --pl-heat: var(--fx-s-vai); }
.fx-pl tr.fx-pl-s-VencidoSemBaixa { --pl-heat: var(--fx-s-vencido); }
/* a cor do bloco (--pl-spc) vem na própria <tr>, do catálogo */
.fx-pl tr.fx-pl-Secao { --pl-spc: var(--pl-heat); }
.fx-pl tr.fx-pl-Total { --pl-spc: var(--fx-fg); }
.fx-pl tr.fx-pl-Resultado { --pl-spc: var(--fx-accent); }

/* só com saída: o cabeçalho de cada parte e a linha "Resultado (entradas − saídas)" */
.fx-pl tr.fx-pl-Parte > * { background-color: var(--fx-surface); border-top: 2px solid var(--fx-fg); padding-top: .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-fg); }
.fx-pl tr.fx-pl-Parte .fx-pl-rs { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fx-pl tr.fx-pl-Resultado > * { background-color: color-mix(in srgb, var(--fx-accent) 8%, var(--fx-surface-2)); border-top: 2px solid var(--fx-fg); border-bottom: 0; font-weight: 700; }
.fx-pl tr.fx-pl-Resultado td.fx-pl-c { font-size: .8rem; }
.fx-pl tr.fx-pl-Resultado td.fx-pl-neg { color: var(--fx-bad); }
.fx-pl tr.fx-pl-Resultado .fx-pl-sdot { background: var(--fx-accent); }

.fx-pl tr.fx-pl-Secao > * { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-sec-bg), var(--fx-surface)); border-top: 1px solid var(--fx-line); font-weight: 650; }
.fx-pl tr.fx-pl-Secao td.fx-pl-c { font-size: .78rem; }
.fx-pl tr.fx-pl-Bloco td.fx-pl-c { font-weight: 500; }
.fx-pl tr.fx-pl-Sub .fx-pl-lab { font-weight: 400; color: var(--fx-muted); padding-left: 2.55rem; font-size: .78rem; }
.fx-pl tr.fx-pl-Sub td.fx-pl-c { color: color-mix(in srgb, var(--fx-fg) 82%, var(--fx-surface)); font-size: .74rem; }
.fx-pl tr.fx-pl-Nunca .fx-pl-lab { color: var(--fx-muted); font-weight: 500; }
.fx-pl tr.fx-pl-Total > * { background-color: var(--fx-surface-2); border-top: 1px solid var(--fx-fg); border-bottom: 0; font-weight: 700; }
.fx-pl tr.fx-pl-Total td.fx-pl-c { font-size: .8rem; }
.fx-pl-t tr.fx-pl-Secao > .fx-pl-lab, .fx-pl-t tr.fx-pl-Secao > .fx-pl-sp { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-sec-bg), var(--fx-surface)); }
.fx-pl-t tr.fx-pl-Total > .fx-pl-lab, .fx-pl-t tr.fx-pl-Total > .fx-pl-sp { background-color: var(--fx-surface-2); }
.fx-pl-t tr > .fx-pl-lab.fx-pl-on { background-color: var(--pl-on-bg); }

.fx-pl-t td.fx-pl-h1 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p1), transparent); }
.fx-pl-t td.fx-pl-h2 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p2), transparent); }
.fx-pl-t td.fx-pl-h3 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p3), transparent); }
.fx-pl-t td.fx-pl-h4 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p4), transparent); }
.fx-pl-t td.fx-pl-h5 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p5), transparent); }
.fx-pl-t td.fx-pl-h6 { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-p6), transparent); }
.fx-pl-t td.fx-pl-fora { background-image: repeating-linear-gradient(135deg, var(--pl-hatch) 0 1px, transparent 1px 7px); }
.fx-pl-t td.fx-pl-zero { color: var(--fx-faint); }
.fx-pl-t td.fx-pl-neg { color: var(--fx-muted); }
.fx-pl-t td.fx-pl-totc, .fx-pl-mh th.fx-pl-totc { border-left: 1px solid var(--fx-line); font-weight: 600; }
.fx-pl-t td.fx-pl-totc { background-color: var(--fx-surface-2); }
.fx-pl tr.fx-pl-Secao td.fx-pl-totc { background-color: color-mix(in srgb, var(--pl-heat) var(--pl-sec-bg), var(--fx-surface-2)); }

/* rótulo da linha */
.fx-pl-rw { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-pl-rt { display: flex; flex-direction: column; min-width: 0; }
.fx-pl-rn { line-height: 1.25; overflow-wrap: anywhere; }
.fx-pl-rs { font-size: .68rem; font-weight: 400; line-height: 1.3; color: var(--fx-muted); overflow-wrap: anywhere; }
.fx-pl-exp { flex: none; width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--fx-muted); cursor: pointer; }
.fx-pl-exp:hover { background: var(--fx-sunken); color: var(--fx-fg); }
.fx-pl-exp svg { width: 14px; height: 14px; transition: transform .15s ease; }
.fx-pl-exp[aria-expanded="true"] svg { transform: rotate(90deg); }
.fx-pl-exp-vazio { flex: none; width: 22px; }
.fx-pl-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pl-spc); }
.fx-pl tr.fx-pl-Nunca .fx-pl-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pl-spc); }
.fx-pl-sdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pl-heat); }
.fx-pl tr.fx-pl-Total .fx-pl-sdot { background: transparent; box-shadow: inset 0 0 0 2px var(--fx-fg); }
/* marca neutra de nota: a célula inclui a antecipação (o valor está na legenda e no detalhe) */
.fx-pl-ic-lote { width: .5rem; height: .5rem; margin-right: .3rem; fill: var(--fx-muted); vertical-align: 0; }

/* minigráfico */
.fx-pl-t .fx-pl-sp { position: sticky; left: var(--pl-lab); z-index: 2; width: var(--pl-sp); min-width: var(--pl-sp); max-width: var(--pl-sp); box-sizing: border-box; padding: 0 .55rem; background-color: var(--fx-surface); box-shadow: inset -1px 0 0 var(--fx-line); }
.fx-pl-t thead .fx-pl-sp { z-index: 3; }
.fx-pl-spk { display: block; width: 100%; height: 22px; overflow: visible; }
.fx-pl-spk-a { fill: color-mix(in srgb, var(--pl-spc) 14%, transparent); stroke: none; }
.fx-pl-spk-l { fill: none; stroke: var(--pl-spc); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fx-pl-spk-0 { fill: none; stroke: var(--fx-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-pl-spk-h { fill: none; stroke: var(--fx-accent); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }

/* rodapé */
.fx-pl-pe { padding: 14px 16px 16px; font-size: .8rem; line-height: 1.55; color: var(--fx-muted); }
.fx-pl-confere { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--fx-surface-2); border: 1px solid var(--fx-line-soft); color: var(--fx-fg); }
.fx-pl-confere svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.fx-pl-confere.fx-pl-ok svg { color: var(--fx-good); }
.fx-pl-confere.fx-pl-nok { background: var(--fx-bad-soft); }
.fx-pl-confere.fx-pl-nok svg { color: var(--fx-bad); }
.fx-pl-confere > span { min-width: 0; }
.fx-pl-notas { margin: 0; padding-left: 1.25rem; display: grid; gap: 5px; }
.fx-pl-notas li { padding-left: 2px; }
.fx-pl-notas b { color: var(--fx-fg); font-weight: 600; }

@media (max-width: 900px) {
    .fx-pl-t .fx-pl-sp { display: none; }
}
@media (max-width: 720px) {
    .fx-pl { --pl-det-h: 7.8rem; }
    .fx-pl-acoes { margin-left: 0; }
    .fx-pl-det-conteudo { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .fx-pl-det { padding-top: 10px; padding-bottom: 10px; }
    .fx-pl-det-v { font-size: 1.12rem; }
    .fx-pl-det-x { font-size: .74rem; }
    .fx-pl-det-n { font-size: .76rem; line-height: 1.42; margin-top: 2px !important; }
}
@media (max-width: 560px) {
    .fx-pl { --pl-lab: 9.4rem; }
    .fx-pl-rs-mais { display: none; }
    .fx-pl-acoes { width: 100%; flex-wrap: nowrap; }
    .fx-pl-acoes .fx-pl-btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
    .fx-pl-longo { display: none; }
    .fx-pl-curto { display: inline; }
    .fx-pl-onota, .fx-pl-leg { order: 1; }
    .fx-pl-pe { order: 2; }
    .fx-pl-leg { border-bottom: 0; border-top: 1px solid var(--fx-line-soft); padding-top: 10px; }
    .fx-pl-onota { padding-top: 10px; }
    .fx-pl-bar { padding: 12px; gap: 12px; }
    .fx-pl-campo { width: 100%; }
    .fx-pl-seg { display: flex; width: 100%; box-sizing: border-box; }
    .fx-pl-seg button { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
    .fx-pl-seg-sit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-pl-seg-sit button { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 7px; row-gap: 1px; align-items: center; justify-content: stretch; text-align: left; white-space: normal; padding: 7px 10px; }
    .fx-pl-seg-sit .fx-pl-sv, .fx-pl-seg-sit .fx-pl-sv-l { grid-column: 2; }
    .fx-pl-seg-sit .fx-pl-sv-l { white-space: normal; }
    .fx-pl-seg-sit .fx-pl-sv-2 { display: grid; }
    .fx-pl-seg-sit .fx-pl-sv-lado + .fx-pl-sv-lado::before { content: none; }
    .fx-pl-t .fx-pl-lab { padding-left: .45rem; padding-right: .5rem; }
    .fx-pl tr.fx-pl-Sub .fx-pl-lab { padding-left: 1.6rem; }
    .fx-pl-onota, .fx-pl-leg, .fx-pl-det, .fx-pl-pe { padding-left: 12px; padding-right: 12px; }
    .fx-pl-aviso { margin-left: 12px; margin-right: 12px; }
    .fx-pl textarea { width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; }
}

/* ============================================================================
   RESUMO DE BOLSO — um trilho vertical que começa no HOJE (o único ponto laranja da tela) e desce
   pelo tempo, com números grandes em cada parada. O resto é quieto: cinza, fio fino, cor só nos blocos.
   ============================================================================ */
.fx-rs {
    --rs-sel: color-mix(in srgb, var(--fx-fg) 6%, transparent);
    --rs-track: color-mix(in srgb, var(--fx-fg) 6%, transparent);
    --rs-halo: var(--fx-accent-soft);
    --rs-venc: color-mix(in srgb, var(--fx-s-vencido) 50%, var(--fx-surface));
    --rs-lote-hatch: color-mix(in srgb, var(--fx-s-lote) 22%, var(--fx-surface));
    --rs-rail: var(--fx-line);
    max-width: 520px;
    margin-inline: auto;
    -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .fx-rs {
    --rs-sel: color-mix(in srgb, var(--fx-fg) 10%, transparent);
    --rs-track: color-mix(in srgb, var(--fx-fg) 10%, transparent);
    --rs-venc: color-mix(in srgb, var(--fx-s-vencido) 55%, var(--fx-surface));
    --rs-lote-hatch: color-mix(in srgb, var(--fx-s-lote) 30%, var(--fx-surface));
}
@media (min-width: 900px) {
    .fx-rs { max-width: 980px; }
    .fx-rs .fx-rs-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
}
.fx-rs *, .fx-rs *::before, .fx-rs *::after { box-sizing: border-box; }
.fx-rs p, .fx-rs h2, .fx-rs h3, .fx-rs ul, .fx-rs ol, .fx-rs dl, .fx-rs dd { margin: 0; }

.fx-rs-top h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.fx-rs-top .fx-rs-sub { margin-top: 4px; color: var(--fx-muted); font-size: 15px; }

/* seletor de origem: chips roláveis, alvo de 44 px; a borda direita esmaece para ninguém achar que a lista acaba */
.fx-rs-chips {
    position: relative; display: flex; gap: 8px; overflow-x: auto; margin: 16px -2px 12px; padding: 2px 2px 8px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; min-width: 0;
    scrollbar-width: thin; scrollbar-color: var(--fx-line) transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.fx-rs-chips::after { content: ""; flex: 0 0 34px; }
.fx-rs-chip {
    flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; scroll-snap-align: start;
    border: 1px solid var(--fx-line); background: var(--fx-surface); color: var(--fx-fg);
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fx-rs-chip:hover { border-color: var(--fx-faint); }
.fx-rs-chip[aria-pressed="true"] { background: var(--fx-fg); color: var(--fx-surface); border-color: var(--fx-fg); }
/* etapa 1 da carga: a origem existe mas o dinheiro dela ainda não chegou */
.fx-rs-chip:disabled { cursor: default; color: var(--fx-muted); border-style: dashed; }
.fx-rs-chip:disabled:hover { border-color: var(--fx-line); }
.fx-rs-chip-espera { animation: fx-rs-espera 1.4s ease-in-out infinite; }
@keyframes fx-rs-espera { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .fx-rs-chip-espera { animation: none; } }

.fx-rs-grid { display: grid; gap: 16px; }
.fx-rs-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.fx-rs-card { background: var(--fx-surface); border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); padding: 20px; min-width: 0; }
.fx-rs-h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.fx-rs-hint { color: var(--fx-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }

/* o trilho */
.fx-rs-rail { list-style: none; padding: 0; }
.fx-rs-stop { position: relative; padding-left: 32px; padding-bottom: 26px; min-width: 0; }
.fx-rs-stop:last-child { padding-bottom: 4px; }
.fx-rs-stop::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fx-surface); border: 2px solid var(--fx-s-vai); }
.fx-rs-stop::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: 0; width: 2px; border-radius: 1px; background: var(--rs-rail); }
.fx-rs-stop:last-child::after { display: none; }
.fx-rs-stop.fx-rs-hoje { padding-bottom: 28px; }
.fx-rs-stop.fx-rs-hoje::before { top: 8px; background: var(--fx-accent); border-color: var(--fx-accent); box-shadow: 0 0 0 5px var(--rs-halo); }
.fx-rs-stop.fx-rs-hoje::after { top: 28px; }
.fx-rs-dia { font-size: clamp(20px, 5.6vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.fx-rs-ctx { color: var(--fx-muted); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.fx-rs-ctx b { color: var(--fx-fg); font-weight: 600; }

.fx-rs-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fx-rs-when { color: var(--fx-muted); font: 500 12px var(--fx-mono); white-space: nowrap; }
.fx-rs-big { font-family: var(--fx-mono); font-size: clamp(34px, 10.5vw, 46px); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; margin: 8px 0 3px !important; font-variant-numeric: tabular-nums; white-space: nowrap; animation: fx-rs-in .35s cubic-bezier(.2, .8, .2, 1); }
.fx-rs-mid { font-family: var(--fx-mono); font-size: clamp(28px, 8vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 12px 0 3px !important; font-variant-numeric: tabular-nums; white-space: nowrap; animation: fx-rs-in .35s cubic-bezier(.2, .8, .2, 1); }
.fx-rs-cur { font-size: .4em; font-weight: 500; color: var(--fx-muted); letter-spacing: 0; vertical-align: .95em; }
.fx-rs-unit { font-size: .46em; font-weight: 500; color: var(--fx-muted); letter-spacing: 0; }
.fx-rs-exato { color: var(--fx-muted); font: 12.5px/1.4 var(--fx-mono); font-variant-numeric: tabular-nums; margin-bottom: 12px !important; }
.fx-rs-exato .fx-rs-exato-t { font-family: var(--mud-typography-default-family, sans-serif); }
.fx-rs-zero { color: var(--fx-muted); }
.fx-rs-big.fx-rs-zero { font-size: clamp(24px, 7vw, 28px); }

.fx-rs-blocos { list-style: none; padding: 0; display: grid; gap: 7px; }
.fx-rs-bl { display: grid; grid-template-columns: 8.4em minmax(0, 1fr) minmax(7.4em, max-content); grid-template-areas: "n t v"; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.fx-rs-bl > .fx-rs-bl-n { grid-area: n; }
.fx-rs-bl > .fx-rs-bl-t { grid-area: t; }
.fx-rs-bl > .fx-rs-bl-v { grid-area: v; }
.fx-rs-bl-n { color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-rs-bl-t { height: 4px; border-radius: 2px; background: var(--rs-track); overflow: hidden; }
.fx-rs-bl-b { display: block; height: 100%; border-radius: 2px; background: var(--rs-c); }
.fx-rs-bl-v { font-family: var(--fx-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* a cor do bloco (--rs-c) vem no próprio <li>, do catálogo */
.fx-rs-vazio { color: var(--fx-muted); font-size: 13px; }

/* só com saída: o que vai sair e a conta entra − sai = sobra de cada parada */
.fx-rs-saidas { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--fx-line); }
.fx-rs-conta { display: grid; gap: 4px; margin-top: 10px !important; font-size: 13px; }
.fx-rs-conta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.fx-rs-conta dt { color: var(--fx-muted); }
.fx-rs-conta dd { font-family: var(--fx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-rs-conta .fx-rs-sobra { padding-top: 5px; border-top: 1px solid var(--fx-line-soft); font-weight: 600; }
.fx-rs-conta .fx-rs-sobra dt { color: var(--fx-fg); }
.fx-rs-conta .fx-rs-falta dd { color: var(--fx-bad); }
.fx-rs-conta-n { margin-top: 6px !important; font-size: 12px; line-height: 1.45; color: var(--fx-muted); }

.fx-rs-prazo { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--fx-line); }
.fx-rs-prazo-h { font-size: 12.5px; color: var(--fx-muted); line-height: 1.4; margin-bottom: 7px !important; }
.fx-rs-prazo .fx-rs-bl-b { background: repeating-linear-gradient(45deg, var(--rs-c) 0 2px, color-mix(in srgb, var(--rs-c) 30%, transparent) 2px 4px); }

.fx-rs-notas { display: grid; gap: 8px; margin-top: 18px; }
.fx-rs-nota { font-size: 13px; line-height: 1.5; color: var(--fx-muted); background: var(--fx-surface-2); border: 1px solid var(--fx-line-soft); border-radius: 8px; padding: 10px 12px; }
.fx-rs-nota b { color: var(--fx-fg); font-weight: 600; }

/* o lote numa linha à parte, neutra (só para ler o número) */
.fx-rs-lote { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--fx-surface-2); border: 1px solid var(--fx-line-soft); display: grid; gap: 8px; }
.fx-rs-lote-l, .fx-rs-soma { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--fx-muted); min-width: 0; }
.fx-rs-lote-l > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fx-rs-soma { padding-top: 8px; border-top: 1px solid var(--fx-line-soft); }
.fx-rs-lote-l > span:last-child, .fx-rs-soma > span:last-child { font-family: var(--fx-mono); color: var(--fx-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* o que saiu no mesmo período, ao lado do "caiu" — não subtraído dele */
.fx-rs-saiu { margin-top: 14px; }
.fx-rs-saiu .fx-rs-soma { border-top: 1px dashed var(--fx-line); }

/* pede atenção */
.fx-rs-at-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; }
.fx-rs-cnt { font: 600 12px var(--fx-mono); color: var(--fx-muted); background: var(--fx-sunken); border-radius: 999px; padding: 2px 8px; }
.fx-rs-alertas { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 10px !important; }
.fx-rs-al { background: var(--fx-surface); border: 1px solid var(--fx-line-soft); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); }
.fx-rs-al-s { list-style: none; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 16px; grid-template-areas: "m t v c" ". l l l"; column-gap: 12px; row-gap: 3px; align-items: center; min-height: 60px; padding: 12px 14px; cursor: pointer; border-radius: var(--fx-radius); }
.fx-rs-al-s > .fx-rs-al-m { grid-area: m; }
.fx-rs-al-s > .fx-rs-al-t { grid-area: t; min-width: 0; }
.fx-rs-al-s > .fx-rs-al-v { grid-area: v; }
.fx-rs-al-s > .fx-rs-al-c { grid-area: c; }
.fx-rs-al-s > .fx-rs-al-l { grid-area: l; }
.fx-rs-al-s::-webkit-details-marker { display: none; }
.fx-rs-al-s:hover { background: var(--fx-surface-2); }
.fx-rs-al-m { width: 10px; height: 10px; border-radius: 3px; background: var(--rs-c); }
.fx-rs-al-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fx-rs-al-l { display: block; font-size: 13px; color: var(--fx-muted); line-height: 1.4; }
.fx-rs-al-v { font: 600 15px var(--fx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fx-rs-al-v.fx-rs-txt { font-family: inherit; font-weight: 500; font-size: 13px; color: var(--fx-muted); }
.fx-rs-al-c { width: 16px; height: 16px; fill: none; stroke: var(--fx-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.fx-rs-al[open] .fx-rs-al-c { transform: rotate(180deg); }
.fx-rs-al-d { padding: 0 14px 14px 36px; font-size: 13px; line-height: 1.55; color: var(--fx-muted); display: grid; gap: 8px; }
.fx-rs-al-d b { color: var(--fx-fg); font-weight: 600; white-space: nowrap; }
.fx-rs-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-rs-pill { font-size: 11.5px; color: var(--fx-muted); background: var(--fx-sunken); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fx-rs-a-venc { --rs-c: var(--fx-s-vencido); }
.fx-rs-a-vencs { --rs-c: var(--fx-bad); }
.fx-rs-a-orig { --rs-c: var(--fx-info); }
.fx-rs-a-liq { --rs-c: var(--fx-muted); }
.fx-rs-a-said { --rs-c: var(--fx-faint); }
.fx-rs-a-extr, .fx-rs-a-extrs { --rs-c: var(--fx-muted); }
.fx-rs-a-sloj { --rs-c: var(--fx-faint); }
/* aviso que existe sempre: na lista, fora do contador, e mais quieto que o que pede ação */
.fx-rs-aviso .fx-rs-al { box-shadow: none; background: var(--fx-surface-2); }

/* minigráfico de 17 meses */
.fx-rs-mini-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fx-rs-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 6px !important; font-size: 12px; color: var(--fx-muted); }
.fx-rs-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fx-rs-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.fx-rs-sw-caiu { background: var(--fx-s-caiu); }
.fx-rs-sw-venc { background: var(--rs-venc); }
.fx-rs-sw-vai { background: var(--fx-s-vai); }
.fx-rs-sw-vaip { background: color-mix(in srgb, var(--fx-s-vai) 38%, var(--fx-surface)); box-shadow: inset 0 0 0 1px var(--fx-s-vai); }
.fx-rs-sw-lote { background: repeating-linear-gradient(45deg, var(--fx-s-lote) 0 1.5px, var(--rs-lote-hatch) 1.5px 3.5px); }
.fx-rs-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; border-radius: 6px; }
.fx-rs-svg:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 4px; }
.fx-rs-gl { stroke: var(--fx-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-rs-base { stroke: var(--fx-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-rs-ax { fill: var(--fx-muted); font-family: var(--fx-mono); font-size: 10px; }
.fx-rs-ax.fx-rs-ax-hoje { fill: var(--fx-accent-strong); font-weight: 600; }
.fx-rs-seg { stroke: var(--fx-surface); stroke-width: .6; }
.fx-rs-seg-caiu { fill: var(--fx-s-caiu); }
.fx-rs-seg-venc { fill: var(--rs-venc); }
.fx-rs-seg-vai { fill: var(--fx-s-vai); }
.fx-rs-seg-vaip { fill: color-mix(in srgb, var(--fx-s-vai) 38%, var(--fx-surface)); }
.fx-rs-hatch-bg { fill: var(--rs-lote-hatch); }
.fx-rs-hatch-fg { fill: var(--fx-s-lote); }
.fx-rs-selcol { fill: var(--rs-sel); transition: x .18s ease; }
.fx-rs-hit { fill: transparent; cursor: pointer; }
.fx-rs-hoje-l { stroke: var(--fx-accent); stroke-width: 1.4; stroke-dasharray: 2.5 2.5; vector-effect: non-scaling-stroke; }
.fx-rs-hoje-t { fill: var(--fx-accent-strong); font-size: 10px; font-weight: 600; }

.fx-rs-ro { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "p m n" "l l l" "x x x"; column-gap: 10px; row-gap: 8px; align-items: center; margin-top: 12px; }
.fx-rs-ro > .fx-rs-prev { grid-area: p; }
.fx-rs-ro > .fx-rs-next { grid-area: n; }
.fx-rs-ro-p { display: contents; }
.fx-rs-ro-p[hidden] { display: none; }
.fx-rs-ro-m { grid-area: m; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.3; min-height: 20px; }
.fx-rs-ro-m span { color: var(--fx-accent-strong); font-weight: 600; font-size: 12px; margin-left: 4px; }
.fx-rs-ro-l { grid-area: l; display: grid; gap: 5px; padding: 10px 12px; background: var(--fx-surface-2); border: 1px solid var(--fx-line-soft); border-radius: 8px; }
.fx-rs-ro-l div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
.fx-rs-ro-l dt { color: var(--fx-muted); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fx-rs-ro-l dd { font-family: var(--fx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-rs-ro-n { grid-area: x; font-size: 12.5px; line-height: 1.45; color: var(--fx-muted); }
.fx-rs-ro-n:empty { display: none; }
.fx-rs-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fx-line); background: var(--fx-surface); color: var(--fx-fg); display: grid; place-items: center; cursor: pointer; padding: 0; }
.fx-rs-nav:hover:not(:disabled) { border-color: var(--fx-faint); }
.fx-rs-nav:disabled { opacity: .35; cursor: default; }
.fx-rs-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes fx-rs-in { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 440px) {
    .fx-rs-bl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "t t"; row-gap: 5px; }
    .fx-rs-blocos { gap: 10px; }
    .fx-rs-ax, .fx-rs-hoje-t { font-size: 11.5px; }
}
@media (max-width: 380px) {
    .fx-rs-card { padding: 16px; }
    .fx-rs-al-d { padding-left: 14px; }
    .fx-rs-ax, .fx-rs-hoje-t { font-size: 14px; }
    .fx-rs-ax-mid { display: none; }
}