/* 2026-11-10 (doc 8, D8): cabecalho e rodape novos do FNCJ (modelos 8.1 a 8.3). So carregado no estilo com "fncj_novo".
   Cabecalho: html/fncj-cabecalho.php. Rodape: layout do Builder do estilo (elemento html com as classes .fxf-*). */

.fxh, .fxf { --fx-azul: #224fa1; --fx-azul-escuro: #1b3f80; --fx-verde: #00cca3; --fx-claro: #eef3fb; --fx-rodape: #e7eef6; --fx-texto: #2c3e5c; --fx-suave: #5a6b85; --fx-borda: #e1e7ef; }
.fxh *, .fxf *, .fxh-trilha * { box-sizing: border-box; }
.fxh-largura { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.fxh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecalho ---------- */
.fxh { position: relative; z-index: 980; font-family: inherit; }
.fxh-barra { background: #fff; border-bottom: 1px solid var(--fx-borda); }
.fxh-linha { display: flex; align-items: center; gap: 24px; min-height: 84px; transition: min-height .2s; }
.fxh-logo { flex: none; display: block; line-height: 0; }
.fxh-logo img { height: 64px; width: auto; transition: height .2s; }
.fxh-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.fxh-menu { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fxh-item { position: relative; }
.fxh-topo { display: block; padding: 28px 12px 25px; border-bottom: 3px solid transparent; color: var(--fx-azul) !important; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: padding .2s; }
.fxh-topo:hover, .fxh-topo:focus, .fxh-aberto > .fxh-topo { color: var(--fx-azul-escuro) !important; }
.fxh-ativo > .fxh-topo { border-bottom-color: var(--fx-verde); }
.fxh-sub { position: absolute; top: 100%; left: 50%; z-index: 990; min-width: 240px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid var(--fx-borda); border-radius: 12px; box-shadow: 0 12px 28px rgba(20, 40, 80, .14); transform: translateX(-50%); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
.fxh-aberto > .fxh-sub { visibility: visible; opacity: 1; }
.fxh-sub a { display: block; padding: 10px 20px; color: var(--fx-azul) !important; font-size: 15px; font-weight: 500; text-decoration: none !important; white-space: nowrap; }
.fxh-sub a:hover, .fxh-sub a:focus, .fxh-sub a.fxh-sub-ativo { background: var(--fx-claro); color: var(--fx-azul-escuro) !important; font-weight: 700; }
.fxh-acoes { flex: none; display: flex; align-items: center; gap: 10px; }
.fxh-lupa, .fxh-abrir, .fxh-fechar, .fxh-busca-fechar { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--fx-azul); cursor: pointer; }
.fxh-lupa:hover, .fxh-lupa:focus { background: var(--fx-claro); }
.fxh-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 2px solid var(--fx-azul); border-radius: 999px; background: var(--fx-azul); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; white-space: nowrap; cursor: pointer; }
.fxh-botao:hover, .fxh-botao:focus { background: var(--fx-azul-escuro); border-color: var(--fx-azul-escuro); }
.fxh-botao-linha { background: #fff; color: var(--fx-azul) !important; }
.fxh-botao-linha:hover, .fxh-botao-linha:focus { background: var(--fx-claro); border-color: var(--fx-azul); }
.fxh-conta { position: relative; }
.fxh-usuario { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 5px; border: 1px solid #c9d6ea; border-radius: 999px; background: #fff; color: var(--fx-azul); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.fxh-inicial { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fx-verde); color: #fff; font-weight: 800; }
.fxh-conta-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 990; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid var(--fx-borda); border-radius: 12px; box-shadow: 0 12px 28px rgba(20, 40, 80, .14); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
.fxh-conta.fxh-aberto .fxh-conta-menu { visibility: visible; opacity: 1; }
.fxh-conta-menu a { display: block; padding: 10px 18px; color: var(--fx-azul) !important; font-size: 15px; text-decoration: none !important; }
.fxh-conta-menu a:hover, .fxh-conta-menu a:focus { background: var(--fx-claro); }
.fxh-sair { margin-top: 6px; border-top: 1px solid var(--fx-borda); padding-top: 6px; }
.fxh-abrir { display: none; flex-direction: column; gap: 5px; }
.fxh-abrir span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--fx-azul); }

/* compacto fixo ao rolar */
.fxh-vaga { height: 0; }
.fxh.fxh-fixo .fxh-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 980; box-shadow: 0 2px 10px rgba(20, 40, 80, .12); }
.fxh.fxh-fixo .fxh-linha { min-height: 64px; }
.fxh.fxh-fixo .fxh-logo img { height: 46px; }
.fxh.fxh-fixo .fxh-topo { padding-top: 19px; padding-bottom: 16px; }
.fxh.fxh-fixo ~ .fxh-trilha { margin-top: 0; }

/* busca */
.fxh-busca { padding: 14px 0; border-top: 1px solid var(--fx-borda); background: #fff; }
.fxh-busca .fxh-largura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fxh-busca input[type=search] { flex: 1 1 260px; min-height: 46px; padding: 0 16px; border: 1px solid #b9c8e2; border-radius: 999px; font: inherit; font-size: 16px; color: var(--fx-texto); }
.fxh-busca-aviso { flex-basis: 100%; margin: 0; color: #b0461a; font-size: 14px; }

/* faixa de submenu da secao */
.fxh-faixa { background: var(--fx-claro); border-bottom: 1px solid var(--fx-borda); }
.fxh-faixa ul { display: flex; gap: 6px 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.fxh-faixa ul::-webkit-scrollbar { display: none; }
.fxh-faixa a { display: block; padding: 14px 0; color: var(--fx-azul) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.fxh-faixa a:hover, .fxh-faixa a:focus { text-decoration: underline !important; }
.fxh-faixa a.fxh-faixa-ativo { color: #00a886 !important; }

/* caminho de navegacao */
.fxh-trilha { background: #fff; font-size: 14px; }
.fxh-trilha ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 14px 0 12px; list-style: none; color: var(--fx-suave); }
.fxh-trilha li + li::before { content: "›"; margin: 0 8px; color: #9aa9c0; }
.fxh-trilha a { color: var(--fx-suave) !important; text-decoration: none !important; }
.fxh-trilha a:hover { color: var(--fx-azul) !important; text-decoration: underline !important; }
.fxh-trilha span[aria-current] { color: var(--fx-azul); font-weight: 600; }

/* aviso "Voce saiu da sua conta." */
.fxh-aviso { position: fixed; left: 50%; bottom: 24px; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; border-radius: 12px; background: var(--fx-azul-escuro); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(20, 40, 80, .25); transform: translateX(-50%); }
.fxh-aviso button { border: 0; background: none; color: #fff; font-size: 16px; cursor: pointer; }

/* painel do celular */
.fxh-painel { position: fixed; inset: 0; z-index: 1001; overflow-y: auto; background: #fff; }
.fxh-painel-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fx-borda); }
.fxh-painel-topo img { height: 48px; width: auto; }
.fxh-fechar { font-size: 22px; }
.fxh-painel-menu { margin: 0; padding: 0; list-style: none; }
.fxh-painel-menu > li { border-bottom: 1px solid var(--fx-borda); }
.fxh-painel-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; color: var(--fx-azul); font-size: 17px; font-weight: 700; list-style: none; cursor: pointer; }
.fxh-painel-menu summary::-webkit-details-marker { display: none; }
.fxh-painel-menu summary::after { content: "+"; font-size: 22px; font-weight: 600; }
.fxh-painel-menu details[open] summary::after { content: "–"; }
.fxh-painel-menu ul { margin: 0; padding: 0 0 8px; list-style: none; }
.fxh-painel-menu ul a { display: flex; align-items: center; min-height: 44px; padding: 0 20px 0 36px; color: var(--fx-texto) !important; font-size: 16px; text-decoration: none !important; }
.fxh-painel-menu ul a[aria-current] { color: var(--fx-azul) !important; font-weight: 700; }
.fxh-painel-botoes { display: grid; gap: 12px; padding: 20px; }
html.fxh-travado, html.fxh-travado body { overflow: hidden; }

@media (max-width: 1100px) {
    .fxh-linha { gap: 14px; }
    .fxh-topo { padding-left: 8px; padding-right: 8px; font-size: 15px; }
    .fxh-botao { padding: 0 16px; font-size: 14px; }
    .fxh-logo img { height: 54px; }
}
@media (max-width: 959px) {
    .fxh-nav, .fxh-acoes > .fxh-botao, .fxh-conta { display: none; }
    .fxh-abrir { display: inline-flex; }
    .fxh-linha { justify-content: space-between; min-height: 68px; }
    .fxh-logo img { height: 48px; }
    .fxh.fxh-fixo .fxh-linha { min-height: 58px; }
    .fxh.fxh-fixo .fxh-logo img { height: 40px; }
    .fxh-faixa a { padding: 12px 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fxh *, .fxf * { transition: none !important; }
}

/* ---------- rodape ---------- */
.fxf { background: var(--fx-rodape); color: var(--fx-texto); font-size: 15px; }
.fxf a { color: var(--fx-texto) !important; text-decoration: none !important; }
.fxf a:hover, .fxf a:focus { color: var(--fx-azul) !important; text-decoration: underline !important; }
.fxf-largura { max-width: 1200px; margin: 0 auto; padding: 56px 16px 0; }
.fxf-grade { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 28px; }
.fxf-marca img { height: 60px; width: auto; }
.fxf-contato { margin: 18px 0 14px; line-height: 1.9; }
.fxf-redes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fxf-redes a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--fx-azul); border-radius: 50%; color: var(--fx-azul) !important; }
.fxf-redes a:hover, .fxf-redes a:focus { background: var(--fx-azul); color: #fff !important; }
.fxf-redes svg { width: 18px; height: 18px; fill: currentColor; }
.fxf-grupo summary { margin: 4px 0 14px; color: var(--fx-azul); font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; list-style: none; pointer-events: none; }
.fxf-grupo summary::-webkit-details-marker { display: none; }
.fxf-grupo ul { margin: 0; padding: 0; list-style: none; }
.fxf-grupo li { margin: 0 0 10px; line-height: 1.4; }
.fxf-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding: 22px 0 26px; border-top: 1px solid #c9d6ea; color: var(--fx-suave); font-size: 14px; }
.fxf-base p { margin: 0; }
.fxf-topo { border: 0; background: none; color: var(--fx-texto); font: inherit; cursor: pointer; padding: 0; }
.fxf-topo:hover, .fxf-topo:focus { color: var(--fx-azul); text-decoration: underline; }
@media (max-width: 1100px) {
    .fxf-grade { grid-template-columns: repeat(3, 1fr); }
    .fxf-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .fxf-largura { padding-top: 36px; }
    .fxf-grade { grid-template-columns: 1fr; gap: 0; }
    .fxf-marca { margin-bottom: 18px; }
    .fxf-grupo { border-top: 1px solid #c9d6ea; }
    .fxf-grupo summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; pointer-events: auto; cursor: pointer; font-size: 16px; letter-spacing: 0; text-transform: none; }
    .fxf-grupo summary::after { content: "+"; font-size: 22px; font-weight: 600; }
    .fxf-grupo[open] summary::after { content: "–"; }
    .fxf-grupo ul { padding-bottom: 12px; }
    .fxf-base { flex-direction: column; margin-top: 0; }
}
