/* ═══════════════════════════════════════════════════════════════
   fn-gestao-fundo.css — página /gestao/fundo (Relatório Informativo Mensal)
   ═══════════════════════════════════════════════════════════════
   Escopo: tudo sob .fn-gf. Reusa tokens --fn-* (gestao_fundo_tokens.css)
   e os componentes fn-kpi/fn-table/fn-card de fn-base.css/fn-app-shell.css
   — este arquivo só acrescenta o que é específico da página (hero navy
   com KPIs, highlight cards, performance card), no espírito visual de
   apps\3-Portal-WEB-VB-DSV\...\assets\css\gestao_fundo_domain.css e
   gestao_fundo_layout.css (versão SIMPLIFICADA — sem gráficos/flip-cards).
   ═══════════════════════════════════════════════════════════════ */

.fn-gf { display: flex; flex-direction: column; gap: 1.6rem; }

/* ─── HERO — navy/teal (mesmo gradiente --fn-grad-hero do domínio) ─── */
.fn-gf-hero {
    /* Camada escurecedora (navy-deep 65%, reforçada — era 40%) — mesmo
       tratamento do hero de Serviço (.fn-servico__hero): a zona teal
       do --fn-grad-hero derrubava o contraste do texto claro; 65% garante
       >=7:1 (AAA) no pior caso p/ branco e rgba(255,255,255,.92), sem
       alterar o desenho do gradiente. */
    background: linear-gradient(rgba(7, 30, 73, .65), rgba(7, 30, 73, .65)), var(--fn-grad-hero);
    color: #fff;
    border-radius: var(--fn-radius-lg);
    padding: 1.5rem 1.75rem 1.75rem;
    position: relative;
    overflow: hidden;
}
.fn-gf-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--fn-grad-accent-stripe);
}
.fn-gf-hero__top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .8rem; margin-bottom: .5rem;
}
/* eyebrow claro (.fn-eyebrow--claro de fn-base.css) clareado só aqui, por
   especificidade — de --fn-copper-light (#e8a87c, ~5,0:1 no pior caso do
   hero escurecido) p/ #ffd9b3 (~7,7:1, AAA); não mexe no token global
   (usado também nos ícones do mega-menu). */
.fn-gf-hero__top .fn-eyebrow--claro { color: #ffd9b3; }

.fn-gf-hero__periodo { display: flex; align-items: center; gap: .5rem; }
.fn-gf-hero__select {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: var(--fn-radius-pill);
    padding: .4rem 1rem;
    font-family: var(--fn-font-ui);
    font-size: .82rem; font-weight: 600;
}
.fn-gf-hero__select option { color: var(--fn-text); }
.fn-gf-hero__titulo {
    font-family: var(--fn-font-editorial);
    font-size: 1.8rem; font-weight: 700; line-height: 1.25;
    letter-spacing: -.02em; margin: .2rem 0 .3rem;
}
.fn-gf-hero__subtitulo {
    font-size: .92rem; color: rgba(255,255,255,.92);
    max-width: 640px; line-height: 1.55; margin-bottom: 1rem;
}

/* ─── KPIs do hero ──────────────────────────────────────────── */
.fn-gf-hero__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
}
.fn-gf-kpi {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--fn-radius);
    padding: .85rem 1.1rem;
}
.fn-gf-kpi__label {
    font-family: var(--fn-font-mono);
    font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.92); font-weight: 700; margin-bottom: .25rem;
}
.fn-gf-kpi__valor {
    font-family: var(--fn-font-mono);
    font-size: 1.35rem; font-weight: 600; color: #fff;
    font-variant-numeric: tabular-nums;
}
.fn-gf-kpi__delta { font-size: .76rem; font-weight: 600; margin-top: .2rem; color: rgba(255,255,255,.92); }
.fn-gf-kpi__delta--up   { color: #a7f3d0; }
.fn-gf-kpi__delta--down { color: #ffd9d9; }

/* ─── Section header (mesmo desenho do fn-section-header) ───── */
.fn-gf-section-header { margin-bottom: 1.1rem; }
.fn-gf-section-header .fn-h2 {
    border-bottom: 2px solid var(--fn-navy);
    padding-bottom: .45rem; margin: .2rem 0 0;
}

/* ─── Highlights do mês ─────────────────────────────────────── */
.fn-gf-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}
.fn-gf-highlight {
    display: flex; align-items: flex-start; gap: .8rem;
    background: var(--fn-surface);
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    box-shadow: var(--fn-shadow-sm);
    padding: 1rem 1.1rem;
}
.fn-gf-highlight__icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    /* verde escurecido de #17703d p/ #0f5c30 — 5,58:1 -> ~7,4:1 (AAA) sobre --fn-green-pale */
    background: var(--fn-green-pale); color: #0f5c30;
    border: 2px solid var(--fn-green);
}
.fn-gf-highlight__texto { font-size: .85rem; color: var(--fn-text-secondary); line-height: 1.55; }

/* ─── Texto editorial ("Análise da Arrecadação") ─────────────── */
.fn-gf-editorial {
    font-family: var(--fn-font-editorial);
    font-size: .92rem; color: var(--fn-text);
    line-height: 1.75; max-width: 780px;
}
.fn-gf-editorial p { margin-bottom: .8rem; }
.fn-gf-editorial p:last-child { margin-bottom: 0; }
.fn-gf-vazio {
    font-style: italic; color: var(--fn-text-secondary);
    font-size: .88rem; padding: .6rem 0;
}

/* ─── Filtro de tabela (Reembolso Mensal) ───────────────────── */
.fn-gf-filtro-linha {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin-bottom: .7rem;
}
.fn-gf-filtro-input {
    max-width: 320px;
}
.fn-gf-filtro-contagem {
    font-family: var(--fn-font-mono);
    font-size: .72rem; color: var(--fn-text-secondary);
}

/* Tabela do Reembolso Mensal — corpo rolável (item 8 da revisão pós-SPEC:
   estava inline no .razor). */
.fn-gf-tabela-scroll {
    max-height: 560px;
    overflow-y: auto;
}

/* ─── Performance Acumulada ──────────────────────────────────── */
.fn-gf-performance {
    background: var(--fn-surface);
    border: 1px solid var(--fn-border-light);
    border-radius: var(--fn-radius-lg);
    box-shadow: var(--fn-shadow-md);
    overflow: hidden;
}
.fn-gf-performance__header {
    background: var(--fn-grad-card-header);
    color: #fff;
    padding: 1rem 1.4rem;
    font-family: var(--fn-font-editorial);
    font-size: 1rem; font-weight: 700;
}
.fn-gf-performance__kpis {
    display: flex; flex-wrap: wrap;
}
.fn-gf-performance__kpi {
    flex: 1; min-width: 150px;
    padding: 1rem 1.2rem; text-align: center;
    border-right: 1px solid var(--fn-border-light);
    border-top: 1px solid var(--fn-border-light);
}
.fn-gf-performance__kpi:last-child { border-right: none; }
.fn-gf-performance__kpi-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    /* escurecido só aqui (não mexe no token --fn-text-secondary global):
       5,89:1 -> ~8,1:1 (AAA) + rótulo 1px maior */
    color: #43506a; font-weight: 600; margin-bottom: .3rem;
}
.fn-gf-performance__kpi-valor {
    font-family: var(--fn-font-mono);
    font-size: 1.2rem; font-weight: 700; color: var(--fn-navy);
}
.fn-gf-performance__kpi-valor--teal   { color: var(--fn-teal-dark); }
/* copper escurecido de #a55d33 p/ #7a4526 — 4,98:1 -> ~7,75:1 (AAA) */
.fn-gf-performance__kpi-valor--copper { color: #7a4526; }

/* ─── Carregando ──────────────────────────────────────────────── */
.fn-gf-carregando {
    font-family: var(--fn-font-mono);
    font-size: .78rem; color: var(--fn-text-secondary);
    padding: .4rem 0;
}
/* Variante clara — dentro do hero navy/teal o cinza --fn-text-secondary
   cai para ~1,5-1,9:1 (bug de composição); sobre o gradiente escurecido
   (65%) o branco a 92% garante >=7:1. Chip com fundo leve + peso 600:
   destaca o estado transitório "carregando" do texto corrido do hero. */
.fn-gf-hero .fn-gf-carregando {
    display: inline-block;
    font-size: .82rem;
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border-radius: var(--fn-radius);
    padding: .35rem .6rem;
}

@media (max-width: 640px) {
    .fn-gf-hero__titulo { font-size: 1.4rem; }
    .fn-gf-performance__kpi { min-width: 50%; }
}