/* ═══════════════════════════════════════════════════════════════════════════
   fn-servico.css — Área do Serviço (/servico), versão simplificada
   ═══════════════════════════════════════════════════════════════════════════
   Origem visual: apps\3-Portal-WEB-VB-DSV\src\FUNARPEN_PORTAL\assets\css\
   servico_index.css + atos_reembolsados.css (pílulas de grupo N/O/C/D/M).

   Convenção 1 página ↔ 1 .css (mesma do login.css). Tudo escopado sob
   .fn-servico; reusa tokens --fn-* de gestao_fundo_tokens.css e as classes
   utilitárias fn-kpi-grid/fn-kpi/fn-table/fn-card/fn-vazio de fn-base.css —
   nada de CSS inline (ADR-0006).
   ═══════════════════════════════════════════════════════════════════════════ */

.fn-servico {
    max-width: 1180px;
}

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.fn-servico__hero {
    position: relative;
    overflow: hidden;
    /* Camada escurecedora (navy-deep 65%, reforçada — era 40%) sobre o
       gradiente: a zona teal (100% do --fn-grad-hero) derrubava o contraste
       do texto claro; 65% garante >=7:1 (AAA) no pior caso p/ todos os tons
       claros do hero (branco, #cfe9ef, #8deee2), sem alterar o desenho do
       gradiente. */
    background: linear-gradient(rgba(7, 30, 73, .65), rgba(7, 30, 73, .65)), var(--fn-grad-hero);
    border-radius: var(--fn-radius-lg);
    box-shadow: var(--fn-shadow-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 1.6rem;
    color: #fff;
}

.fn-servico__hero-titulo {
    font-family: var(--fn-font-editorial);
    font-size: clamp(1.35rem, 1rem + 1.3vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    margin: .35rem 0 .5rem;
}

.fn-servico__hero-servico {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 600;
    color: #cfe9ef;
    margin: 0 0 1.1rem;
}
.fn-servico__hero-servico i { color: #8deee2; }

.fn-servico__aviso {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(230, 126, 34, .18);
    border: 1px solid rgba(230, 126, 34, .5);
    border-left: 4px solid var(--fn-orange);
    border-radius: var(--fn-radius);
    padding: .6rem .9rem;
    font-size: .85rem;
    color: #fff;
    margin-bottom: 1.1rem;
}
.fn-servico__aviso i { color: var(--fn-gold); font-size: 1rem; flex: 0 0 auto; }

/* KPI cards claros sobre o fundo escuro do hero (variante local do .fn-kpi) */
.fn-servico__hero-kpis { margin-top: .2rem; }
.fn-servico__hero-kpis .fn-kpi--claro {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-left: 4px solid var(--fn-gold);
    backdrop-filter: blur(2px);
}
.fn-servico__hero-kpis .fn-kpi--claro .fn-kpi__label { color: #cfe9ef; }
.fn-servico__hero-kpis .fn-kpi--claro .fn-kpi__valor { color: #fff; }
.fn-servico__hero-kpis .fn-kpi--claro .fn-kpi__delta { color: #bfe4e0; }
.fn-servico__hero-kpis .fn-kpi--claro .fn-kpi__delta--pos { color: #8deee2; }

/* ─── SEÇÕES ────────────────────────────────────────────────────────────── */
.fn-servico__secao { margin-top: 2.2rem; }
.fn-servico__texto {
    color: var(--fn-text-secondary);
    margin: .35rem 0 1rem;
}

/* ─── TABELA DE ATOS ────────────────────────────────────────────────────── */
.fn-servico__tabela-atos .fn-servico__col-grupo {
    width: 72px;
    text-align: center;
}

/* Pílula de Grupo (N/O/C/D/M) — mesmas cores do atos_reembolsados.css original */
.fn-servico__pilula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 .35rem;
    border-radius: 6px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: #94a3b8;
}
.fn-servico__pilula--n { background: #256e45; } /* Nascimentos */
.fn-servico__pilula--o { background: #475569; } /* Óbitos */
.fn-servico__pilula--c { background: #1769e0; } /* Certidões */
.fn-servico__pilula--d { background: #8a5602; } /* Demais Atos */
.fn-servico__pilula--m { background: #b5377e; } /* Casamentos */
/* Outros: escurecido de #64748b p/ #45536b — 4,76:1 -> ~7,8:1 (AAA) */
.fn-servico__pilula--x { background: #45536b; } /* Outros */

/* ─── RESPONSIVO ────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .fn-servico__hero { padding: 1.3rem 1.2rem; }
}