:root{
  --cfap-navy:#0B1E3F;
  --cfap-navy-700:#13294B;
  --cfap-navy-900:#06132A;
  --cfap-gold:#E8B106;
  --cfap-red:#C0392B;
  --cfap-bg:#F3F6FB;
  --cfap-ink:#0F172A;
}

/* ===== App shell (área interna) ===== */
body.cfap-app{ background:var(--cfap-bg); color:var(--cfap-ink); }
.cfap-topbar{ background:var(--cfap-navy); }
.cfap-topbar .navbar-toggler-icon{ filter:invert(1); }

.cfap-shell{ min-height:100vh; }
/* !important vence o reset "background transparent" do offcanvas-lg no desktop */
.cfap-sidebar{ background-color:var(--cfap-navy) !important; color:#fff; width:250px; --bs-offcanvas-width:250px;
  display:flex; flex-direction:column; }
.cfap-sidebar .offcanvas-body{ display:flex; flex-direction:column; flex:1 1 auto; }
/* Sidebar SEMPRE com a altura total da tela — mesmo tamanho em todas as páginas. */
@media (min-width:992px){
  .cfap-sidebar{ position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:1030; }
  .cfap-content{ margin-left:250px; }
}
.cfap-content{ min-width:0; }
/* Margens FLUIDAS: crescem/encolhem com a tela (sem breakpoints rígidos). */
.cfap-content .container-fluid{
  width: min(100%, 1100px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(1rem, 2.5vw, 1.75rem);
}
/* Container padrão de formulário (leitura confortável, alinhado). */
.cfap-form{ width: min(100%, 720px); }
.cfap-form .form-label{ margin-bottom:.25rem; font-weight:500; }

/* 🔴 CAMPO TRAVADO PARECE TRAVADO — cinza, como era até o Bootstrap 5.2.
   O 5.3 tirou `[readonly]` da regra de `:disabled`, então um campo `readonly` sai BRANCO e
   indistinguível de um editável: quem olha a tela só descobre que não pode ao tentar digitar.
   Ele pediu isto em 2026-09-18 com essas palavras — "como se estivesse bloqueada (cinza)".
   ⚠️ Não é CSS de tela: é regra do atributo NATIVO, e vale para os quatro campos travados do
   sistema (os dois pisos da turma, a carga da disciplina do CF, o Ano do EQP e a instituição do
   curso SENASP). Nenhuma classe `.cfap-*` nasce aqui — por isso não há linha nova no §0.
   ⚠️ Só `<input>`/`<textarea>`: em `<select>` o atributo `readonly` NÃO EXISTE, e o padrão do
   projeto ali é `disabled` mais um campo oculto com o valor — que o Bootstrap já pinta de cinza
   por `.form-select:disabled`.
   🔴 E continua sendo só APARÊNCIA: `readonly` envia o valor no POST e não protege nada. A guarda
   de cada um desses campos mora na função de domínio que grava. */
.form-control[readonly]{
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}

.cfap-brand{ padding:1.25rem .5rem 1rem; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:.75rem; text-align:center; }
.cfap-brasao{ width:90px; height:auto; }
.cfap-brand-txt{ color:#fff; font-weight:700; font-size:.95rem; margin-top:.5rem; line-height:1.2; }

.cfap-nav .nav-link{ color:#E7ECF5; font-size:1.05rem; padding:.6rem .8rem; border-radius:.4rem; }
.cfap-nav .nav-link:hover{ background:var(--cfap-navy-700); color:#fff; }
.cfap-nav .nav-link.active{ background:var(--cfap-gold); color:#1a1a1a; font-weight:600; }
/* Subgrupo recolhível do menu (ex.: "Gestão"): toggle com caret + sub-lista indentada */
.cfap-nav .cfap-grupo-toggle{ display:flex; align-items:center; justify-content:space-between; }
.cfap-nav .cfap-caret{ display:inline-block; padding:3px; margin-left:.5rem; margin-right:2px; flex:0 0 auto;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform .15s ease; opacity:.75; }
.cfap-nav .cfap-grupo-toggle[aria-expanded="true"] .cfap-caret{ transform:rotate(45deg); }
/* flex-wrap:nowrap é OBRIGATÓRIO: o .nav do Bootstrap traz flex-wrap:wrap e, enquanto o
   collapse anima a altura (.collapsing => height:0), uma coluna com wrap quebra os itens
   em VÁRIAS COLUNAS lado a lado — eles só "se encaixavam" ao fim da animação. */
.cfap-nav-sub{ list-style:none; margin:.1rem 0 .35rem .4rem; padding-left:.6rem;
  flex-wrap:nowrap; border-left:1px solid rgba(255,255,255,.16); }
/* Animação mais curta que os .35s padrão: menu lateral tem que responder ao toque. */
.cfap-nav .collapsing{ transition-duration:.2s; }
.cfap-nav-sub .nav-link{ color:#E7ECF5; font-size:.92rem; padding:.4rem .7rem; border-radius:.4rem; }
.cfap-nav-sub .nav-link:hover{ background:var(--cfap-navy-700); color:#fff; }
.cfap-nav-sub .nav-link.active{ background:var(--cfap-gold); color:#1a1a1a; font-weight:600; }

.cfap-user{ padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); }
.cfap-user .nome{ color:#cdd7ea; }

/* ===== Padrões de conteúdo (identidade visual das telas) ===== */
.cfap-page-title{ color:var(--cfap-navy); font-weight:700; border-bottom:2px solid var(--cfap-gold);
  padding-bottom:.4rem; margin-bottom:1rem; }
.cfap-content a:not(.btn){ color:var(--cfap-navy); text-decoration:none; }
.cfap-content a:not(.btn):hover{ color:var(--cfap-navy-900); text-decoration:underline; }

/* Botão primário do sistema (ações principais) */
.btn-cfap{ background:var(--cfap-navy); border:1px solid var(--cfap-navy); color:#fff; font-weight:600; }
.btn-cfap:hover{ background:var(--cfap-navy-700); border-color:var(--cfap-navy-700); color:#fff; }

/* ===== Tela de detalhe: seções com título + linha dourada (padrão do sistema) ===== */
.cfap-secao{ color:var(--cfap-navy); font-weight:700; font-size:1.05rem; border-bottom:2px solid var(--cfap-gold);
  padding-bottom:.3rem; margin:1.6rem 0 .9rem; }
.cfap-campo{ margin-bottom:.7rem; }
.cfap-campo .cfap-campo-rot{ font-weight:700; color:var(--cfap-navy); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.cfap-campo .cfap-campo-val{ color:var(--cfap-ink); }
/* Cabeçalho do agente (foto centralizada) na tela de detalhe */
.cfap-agente-head{ text-align:center; margin-bottom:1.25rem; }
/* Retrato 4:5 (mesma proporção da foto do Painel/.dphoto); object-position:top p/ não cortar a cabeça */
.cfap-agente-head img{ width:160px; height:200px; object-fit:cover; object-position:center top; border-radius:12px; border:3px solid var(--cfap-navy); box-shadow:0 2px 10px rgba(11,30,63,.18); }
.cfap-agente-head .cfap-foto-vazia{ width:160px; height:200px; border-radius:12px; border:3px dashed var(--cfap-navy); display:inline-flex; align-items:center; justify-content:center; color:var(--cfap-navy); background:#eef3fb; font-size:2.5rem; font-weight:800; }
.cfap-agente-head .cfap-agente-qra{ font-size:1.5rem; font-weight:800; color:var(--cfap-navy); text-transform:uppercase; letter-spacing:.03em; margin-top:.55rem; }
.cfap-agente-head .cfap-agente-nome{ color:var(--cfap-ink); }

/* ===== Login (cfap.php) ===== */
.cfap-login{ background:var(--cfap-navy); min-height:100vh; }
.cfap-login .brasao{ width:170px; height:auto; }
.cfap-login .titulo{ color:#fff; font-weight:700; }
.cfap-login .card-login{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.cfap-login .card-login .form-label{ color:#e7ecf5; }
.cfap-login .btn-entrar{ background:var(--cfap-gold); border:0; color:#1a1a1a; font-weight:700; }
.cfap-login .btn-entrar:hover{ filter:brightness(.95); color:#1a1a1a; }
.cfap-login .link-claro{ color:#cdd7ea; text-decoration:none; }
.cfap-login .link-claro:hover{ color:#fff; text-decoration:underline; }

/* ===== Pop-up padrão CFAP (cfap-ui.js) ===== */
.cfap-modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(6,19,42,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
/* Ampliação de imagem: reusa a moldura de sobreposição acima e troca só o que difere — fundo bem
   mais escuro (a imagem precisa de contraste, não de véu) e o cursor de fechar.
   🔴 CSS puro de propósito: a API de tela cheia dispara o fullscreenchange que prova.js usa para
   PAUSAR a prova. Ver public/assets/js/cfap-zoom.js. */
.cfap-modal-overlay.cfap-zoom{ background:rgba(6,19,42,.94); cursor:zoom-out; padding:2vh 2vw; }
.cfap-zoom img{ max-width:100%; max-height:96vh; height:auto; }

.cfap-modal{
  width:min(100%, 460px); background:#fff; color:var(--cfap-ink);
  border-radius:.6rem; overflow:hidden;
  border-top:4px solid var(--cfap-gold);
  box-shadow:0 12px 40px rgba(6,19,42,.45);
  max-height:calc(100vh - 2rem); display:flex; flex-direction:column;
}
.cfap-modal-head{
  background:var(--cfap-navy); color:#fff; font-weight:700;
  padding:.85rem 1.1rem; font-size:1.05rem;
}
.cfap-modal-body{ padding:1.1rem; overflow-y:auto; }
.cfap-modal-body p{ margin-bottom:.5rem; }
.cfap-modal-lista{ margin:.25rem 0 0; padding-left:1.25rem; max-height:220px; overflow:auto; }
.cfap-modal-lista li{ padding:.1rem 0; }
.cfap-modal-foot{ display:flex; gap:.5rem; justify-content:flex-end; padding:.75rem 1.1rem 1.1rem; }

/* ===== Opção tocável (correção prática) ===== */
.cfap-opcao{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.7rem .8rem; margin-bottom:.5rem;
  border:1px solid #d7deea; border-radius:.5rem;
  background:#fff; cursor:pointer; min-height:48px;
  transition:background-color .12s, border-color .12s;
}
.cfap-opcao:hover{ border-color:var(--cfap-navy-700); }
.cfap-opcao .form-check-input{ width:1.25rem; height:1.25rem; margin-top:.1rem; flex:0 0 auto; }
.cfap-opcao .cfap-opcao-txt{ flex:1 1 auto; }
.cfap-opcao:has(input:checked){ border-color:var(--cfap-navy); background:#eef3fb; box-shadow:inset 0 0 0 1px var(--cfap-navy); }

/* ===== Chamada por sessão: linha do agente + painel de exceção =====
   O painel fica recolhido: a chamada normal continua sendo dois toques no tablet, e só o caso
   excepcional (atraso, saída antecipada, motivo de falta) custa digitação. */
.cfap-chamada-linha{ margin-bottom:.5rem; }
.cfap-chamada-linha .cfap-opcao{ margin-bottom:0; align-items:center; }
.cfap-chamada-linha .btn-excecao{ flex:0 0 auto; }
.cfap-excecao{
  padding:.6rem .8rem .8rem; margin:0;
  border:1px solid #d7deea; border-top:0; border-radius:0 0 .5rem .5rem;
  background:#f7f9fd;
}
.cfap-chamada-linha:has(.cfap-excecao:not(.d-none)) .cfap-opcao{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

/* ===== Barra de ações fixa (alcance do polegar no mobile) ===== */
.cfap-acoes-fixas{
  position:sticky; bottom:0; z-index:10; width:100%;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.7rem 0; margin-top:1rem;
  background:rgba(243,246,251,.97); border-top:1px solid #d7deea;
}
/* min-height num inline-block estica a caixa e deixa o texto preso ao topo pelo padding.
   inline-flex + center é o que realmente centraliza — era o desalinhamento relatado. */
.cfap-acoes-fixas .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }

/* Cartão de COMPONENTE da correção prática (v1.19.0). Cada um grava sozinho e mostra o próprio
   estado — é a unidade de trabalho do instrutor no estande. */
.cfap-componente{ border:1px solid #d7deea; border-radius:.6rem; background:#fff; padding:.9rem; margin-bottom:.9rem; }
.cfap-componente.salvo{ border-color:#146B48; background:#F6FBF8; }
.cfap-componente .cfap-comp-cabeca{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.cfap-componente .cfap-comp-acao{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.7rem; }
.cfap-componente .cfap-comp-acao .btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.cfap-componente[data-travado="1"] .cfap-comp-campos{ display:none; }
.cfap-comp-resumo{ font-weight:600; }

/* Padrão MOBILE (DIRETRIZES-UI §5.7): dado denso não vira tabela de rolagem lateral no celular. */
@media (max-width: 575.98px){
  #memoria table, #memoria thead, #memoria tbody, #memoria tr, #memoria td{ display:block; width:100%; }
  #memoria thead{ display:none; }
  #memoria tr{ border-bottom:1px solid #e6ebf3; padding:.35rem 0; }
  #memoria td{ border:0; padding:.1rem 0; }
  #memoria td::before{ content:attr(data-rot) ': '; color:#5A6B86; font-size:.85em; }
}

/* ===== Designados: linhas maiores + destaque ao marcar ===== */
.cfap-designados .form-check{
  padding:.55rem .6rem .55rem 2.1rem; margin-bottom:.4rem; min-height:46px;
  border:1px solid #d7deea; border-radius:.45rem;
}
.cfap-designados .form-check-input{ width:1.2rem; height:1.2rem; margin-left:-1.6rem; margin-top:.15rem; }
.cfap-designados .form-check:has(input:checked){ border-color:var(--cfap-navy); background:#eef3fb; }

/* ===== Tabela que vira cartões no mobile (< lg) ===== */
@media (max-width:991.98px){
  .cfap-tabela-cards thead{ display:none; }
  .cfap-tabela-cards tbody, .cfap-tabela-cards tr, .cfap-tabela-cards td{ display:block; }
  .cfap-tabela-cards tr{
    border:1px solid #d7deea; border-radius:.5rem; padding:.5rem .75rem; margin-bottom:.6rem; background:#fff;
  }
  .cfap-tabela-cards td{ display:flex; justify-content:space-between; gap:1rem; border:0; padding:.3rem 0; }
  .cfap-tabela-cards td::before{ content:attr(data-label); font-weight:600; color:var(--cfap-navy); }
  .cfap-tabela-cards td.cfap-td-acao{ padding-top:.5rem; }
  .cfap-tabela-cards td.cfap-td-acao::before{ content:""; }
  .cfap-tabela-cards td.cfap-td-acao .btn{ width:100%; min-height:46px; }
}

/* ===== Editor de texto rico (cfap-editor.js) ===== */
.cfap-editor-barra{ display:flex; gap:.15rem; flex-wrap:wrap; align-items:center;
  padding:.3rem .35rem; border:1px solid #dee2e6; border-bottom:none;
  border-radius:.375rem .375rem 0 0; background:#f8f9fa; margin-bottom:0; }
.cfap-editor-btn{ min-width:2rem; height:1.9rem; display:inline-flex; align-items:center;
  justify-content:center; padding:0 .45rem; border:1px solid transparent; border-radius:.3rem;
  background:transparent; color:var(--cfap-ink); font-size:.9rem; line-height:1; }
.cfap-editor-btn:hover{ background:#e9ecef; }
.cfap-editor-btn:disabled{ opacity:.5; }
/* O pedido central: o botão mostra que está LIGADO. Navy sólido, escolhido em mockup. */
.cfap-editor-btn.ativo{ background:var(--cfap-navy); border-color:var(--cfap-navy); color:#fff; }
.cfap-editor-sep{ width:1px; height:1.2rem; background:#dee2e6; margin:0 .2rem; }
/* Dica própria: o title nativo demora ~1s e some sozinho — foi o que o usuário reprovou. Só onde
   existe passar o mouse: no tablet ela ficaria presa na tela depois do toque. */
@media (hover: hover) {
  .cfap-editor-btn[data-dica]{ position:relative; }
  .cfap-editor-btn[data-dica]:hover::after{ content:attr(data-dica); position:absolute;
    bottom:calc(100% + .3rem); left:50%; transform:translateX(-50%); z-index:5;
    background:var(--cfap-navy); color:#fff; padding:.2rem .45rem; border-radius:.25rem;
    font-size:.72rem; line-height:1.3; white-space:nowrap; pointer-events:none; }
}
.cfap-editor-area{ min-height:120px; height:auto; overflow:auto; text-align:justify;
  border-radius:0 0 .375rem .375rem; }
.cfap-editor-area:focus{ outline:2px solid var(--cfap-gold); box-shadow:none; }
.cfap-editor-area ul, .cfap-editor-area ol{ padding-left:1.5rem; }

/* Sugestões do autocomplete (nº de série da arma, na correção prática). Fica sobre o conteúdo
   seguinte, ancorada no campo — sem isso empurraria a tela a cada tecla. */
.cfap-sugestao{ position:absolute; z-index:20; width:100%; max-width:420px; max-height:220px;
  overflow:auto; background:#fff; border:1px solid #ced4da; border-top:0;
  border-radius:0 0 .375rem .375rem; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.cfap-sugestao-item{ display:block; width:100%; text-align:left; padding:.4rem .6rem; border:0;
  background:transparent; font-size:.9rem; }
.cfap-sugestao-item:hover{ background:#e9ecef; }

/* Campo de TÍTULO de entidade: mostra caixa alta enquanto se digita ou COLA. É só aparência —
   quem grava assim é a camada de domínio (titulo_entidade), que vale sem CSS e sem JS.
   NUNCA em campo de pessoa: QRA e nome têm regra própria (primeira_maiuscula / nome_proprio). */
.cfap-caixa-alta{ text-transform:uppercase; }

/* Conteúdo rico exibido (ementa, conteúdo, detalhamento das práticas) */
.cfap-rico{ text-align:justify; }
.cfap-rico ul, .cfap-rico ol{ padding-left:1.5rem; }
/* Subtítulo, citação e riscado: MESMA aparência no que se exibe e no que se edita, senão o editor
   deixa de mostrar o que a tela vai mostrar. O h3 sai do justificado — título justificado abre
   buracos entre as palavras. A citação reusa o filete dourado da .cfap-secao, sem componente novo. */
.cfap-rico h3, .cfap-editor-area h3{ font-size:1.05rem; font-weight:700; color:var(--cfap-navy);
  text-align:left; margin:1rem 0 .4rem; }
.cfap-rico blockquote, .cfap-editor-area blockquote{ margin:.75rem 0; padding:.25rem 0 .25rem .8rem;
  border-left:3px solid var(--cfap-gold); color:#495057; font-style:italic; }
/* Imagem de conteúdo: cresce até a largura da coluna e para no tamanho real do arquivo.
   max-width LIMITA, não estica — um print estreito de 300px continua com 300px. Usar width:100%
   borraria toda imagem pequena do sistema. O teto antigo era 520px numa coluna de ~1020. */
.cfap-rico img, .cfap-editor-area img, .cfap-img{ display:block; margin:.6rem auto; max-width:100%; height:auto; }
/* Lupa só onde ampliar existe. No editor o clique posiciona o cursor, então ele fica de fora. */
.cfap-rico img, img[data-cfap-zoom]{ cursor:zoom-in; }

/* ===== Breadcrumb (trilha "onde estou") ===== */
.cfap-breadcrumb{ --bs-breadcrumb-divider:'›'; font-size:.9rem; margin-bottom:.75rem; }
.cfap-breadcrumb a{ color:var(--cfap-navy); text-decoration:none; }
.cfap-breadcrumb a:hover{ text-decoration:underline; }
.cfap-breadcrumb .breadcrumb-item.active{ color:var(--cfap-ink); }

/* ===== Gráficos do EQP (SVG inline, sem dependência) ===== */
.cfap-graf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1rem; margin:.5rem 0 1.25rem; }
.cfap-graf-card{ border:1px solid #e3e7ee; border-radius:10px; padding:.9rem 1rem; background:#fff; box-shadow:0 1px 2px rgba(11,30,63,.04); }
.cfap-graf-card h2{ margin-bottom:.6rem; color:var(--cfap-navy); }
.cfap-pizza{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin:0; }
.cfap-pizza svg{ flex:0 0 auto; }
.cfap-legenda{ list-style:none; padding:0; margin:0; font-size:.85rem; }
.cfap-legenda li{ display:flex; align-items:center; gap:.4rem; margin:.15rem 0; }
.cfap-leg-cor{ display:inline-block; width:14px; height:14px; border-radius:3px; flex:0 0 auto; }
.cfap-cartoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin:.5rem 0 1rem; }
@media print { .cfap-graf-grid{ grid-template-columns:1fr 1fr; } .cfap-graf-card{ break-inside:avoid; } }

/* Selo (badge) padrão do sistema — fundo claro + texto num passo mais escuro da MESMA cor.
   Substitui o badge sólido do Bootstrap onde o rótulo carrega significado (conceito LC 139,
   situação da avaliação, tipo de evento da arma). A cor da fatia do gráfico, usada como texto,
   não teria contraste — daí o tom escuro. Cores: verde=bom/aprovado · azul=informativo ·
   amarelo=atenção/pendente · vermelho=ruim/insuficiente. */
.cfap-selo{ display:inline-block; padding:.2rem .55rem; border-radius:.45rem; font-size:.8rem;
  font-weight:700; background:#EEF2F8; color:#4A5A70; white-space:nowrap; }
.cfap-selo.verde{ background:#E4F5EC; color:#146B48; }
.cfap-selo.azul{ background:#E4EFFB; color:#1B5A97; }
.cfap-selo.amarelo{ background:#FBF0D8; color:#8A6100; }
.cfap-selo.vermelho{ background:#FBE6E6; color:#A32C2C; }
/* Família IDENTIDADE (DIRETRIZES-UI §5.4): o que a coisa É, nunca como ela está.
   navy  = papel institucional (GCM, Superintendente)
   caqui = instrutor — convenção internacional de instrutor de armamento e tiro. Puxado para o
           oliva-terroso de propósito: o cáqui amarelado ficava na família do amarelo semântico. */
.cfap-selo.navy{ background:#E3E9F4; color:#16305C; }
.cfap-selo.caqui{ background:#EEEADB; color:#63603A; }

/* Gráfico de linha (svg_linha) — vale dentro e fora do painel (.cfap-dash define as vars). */
.cfap-linha{ display:block; width:100%; height:auto; }
.cfap-linha .cfap-grid{ stroke:var(--dline,#E3E9F2); stroke-width:1; }
.cfap-linha .cfap-base{ stroke:var(--dmuted,#5B6B7F); stroke-opacity:.45; }
.cfap-linha .cfap-axis{ fill:var(--dmuted,#5B6B7F); font-size:12px; font-variant-numeric:tabular-nums; }
.cfap-linha .cfap-linha-val{ fill:var(--dink,#16202E); font-size:13px; font-weight:700; }
.cfap-linha .cfap-ponto{ stroke:var(--dcard,#fff); stroke-width:2; }
/* Valor único (figura): substitui a "linha de um ponto só". */
.cfap-figura{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.4rem .5rem 1.1rem; }
.cfap-figura-v{ font-size:2.75rem; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--dink,#16202E); }
.cfap-figura-r{ margin-top:.35rem; font-size:.95rem; font-weight:600; color:var(--dink,#16202E); }
.cfap-figura-n{ margin-top:.3rem; font-size:.78rem; color:var(--dmuted,#5B6B7F); max-width:32ch; }

.cfap-cartao{ flex:1 1 140px; border:1px solid #e3e7ee; border-radius:8px; padding:.6rem .8rem; }
.cfap-cartao .n{ font-size:1.5rem; font-weight:700; color:var(--cfap-navy); }
.cfap-cartao .l{ font-size:.8rem; color:#667; }
@media print { .cfap-cartao{ break-inside:avoid; } }

/* ===================================================================== */
/* Padrão de tabela CFAP — "Cabeçalho Navy"                              */
/* Bloco isolado e reversível: remover TODO este trecho devolve as       */
/* tabelas ao visual Bootstrap padrão. Mira as classes .table que TODAS  */
/* as listagens já usam — nenhum PHP precisa mudar; badges e botões      */
/* continuam iguais. Ver artefato de comparação (Opção A).               */
/* ===================================================================== */
@media (min-width:992px){
  /* Container = cartão arredondado com filete e leve sombra */
  .cfap-content .table{
    border-collapse:separate; border-spacing:0;
    background:#fff; border:1px solid #E4EAF2; border-radius:12px; overflow:hidden;
    box-shadow:0 1px 3px rgba(11,30,63,.10);
  }
  /* Cabeçalho navy com texto branco + filete dourado */
  .cfap-content .table > thead > tr > th{
    background:var(--cfap-navy); color:#fff;
    text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; font-weight:600;
    padding:.72rem .9rem; border-top:0; border-bottom:3px solid var(--cfap-gold);
  }
  /* Linhas: respiro maior, zebra e realce no hover */
  .cfap-content .table > tbody > tr > td{
    padding:.7rem .9rem; border-top:0; border-bottom:1px solid #EEF1F6;
  }
  .cfap-content .table > tbody > tr:nth-child(even) > td{ background:#F6F8FC; }
  .cfap-content .table > tbody > tr:hover > td{ background:#EAF0FB; }
  .cfap-content .table > tbody > tr:last-child > td{ border-bottom:0; }
  /* Rodapé (linha de total, ex.: boletim) */
  .cfap-content .table > tfoot > tr > th,
  .cfap-content .table > tfoot > tr > td{
    padding:.7rem .9rem; border-top:2px solid #E4EAF2; font-weight:600;
  }
}
/* Mobile (< lg): tabelas que NÃO viram cartões ganham o mesmo cabeçalho  */
/* navy, compacto. As .cfap-tabela-cards seguem virando cartões (bloco    */
/* acima), sem interferência — daí o :not(.cfap-tabela-cards).            */
@media (max-width:991.98px){
  .cfap-content .table:not(.cfap-tabela-cards) > thead > tr > th{
    background:var(--cfap-navy); color:#fff;
    text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; font-weight:600;
    padding:.55rem .65rem; border-bottom:3px solid var(--cfap-gold);
  }
  .cfap-content .table:not(.cfap-tabela-cards) > tbody > tr > td{
    padding:.5rem .65rem; border-bottom:1px solid #EEF1F6;
  }
  .cfap-content .table:not(.cfap-tabela-cards) > tbody > tr:nth-child(even) > td{ background:#F6F8FC; }
}

/* ===== Boletim (Minha pasta) — cabeçalho institucional (SÓ na impressão) ===== */
.cfap-bol-cab{
  display:none; /* timbre com brasões: aparece apenas ao imprimir/salvar em PDF */
  align-items:center; gap:1rem; text-align:center;
  border-bottom:3px solid #0B1E3F; padding-bottom:.75rem; margin-bottom:1rem;
}
.cfap-bol-cab-txt{ flex:1 1 auto; min-width:0; }
.cfap-bol-brasao{ width:74px; height:auto; flex:0 0 auto; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
.cfap-bol-inst{ font-weight:700; color:#0B1E3F; font-size:1.02rem; line-height:1.2; }
.cfap-bol-org{ color:#5B6B7F; font-size:.86rem; }
.cfap-bol-titulo{ font-size:1.15rem; margin:.35rem 0 0; color:#0B1E3F; }
.cfap-bol-ano{ color:#5B6B7F; font-size:.86rem; }
.cfap-bol-agente{
  border:1px solid #E3E9F2; border-left:4px solid #E8B106; border-radius:8px;
  padding:.55rem .85rem; margin-bottom:1rem;
}
.cfap-bol-qra{ font-weight:700; font-size:1.12rem; color:#0B1E3F; letter-spacing:.02em; }
.cfap-bol-nome{ color:#5B6B7F; }

/* ===== Impressão (boletim do agente) ===== */
@media print {
  .cfap-topbar, .cfap-sidebar, .cfap-breadcrumb, .d-print-none { display:none !important; }
  .cfap-shell, .cfap-content, .container-fluid { display:block; margin:0; padding:0; }
  .cfap-content{ width:100%; }
  body.cfap-app{ background:#fff; }
  .cfap-boletim{ color:#000; }
  a[href]{ color:#000; text-decoration:none; }
  /* Cabeçalho institucional em preto para papel; brasões impressos fielmente */
  .cfap-bol-cab{ display:flex; border-bottom-color:#000; }
  .cfap-bol-brasao{ width:64px; }
  .cfap-bol-inst, .cfap-bol-titulo, .cfap-bol-qra{ color:#000; }
  .cfap-bol-agente{ border-color:#999; border-left-color:#000; }
  /* Tabelas: visual limpo de papel (sem faixa navy nem sombra) */
  .cfap-content .table{ box-shadow:none; border:1px solid #999; }
  .cfap-content .table > thead > tr > th{
    background:#fff !important; color:#000; border-bottom:2px solid #000; }
  .cfap-content .table > tbody > tr:nth-child(even) > td{ background:#fff; }
  .cfap-content .table > tbody > tr > td{ border-bottom:1px solid #999; }
}

/* ===== Painel de Indicadores (Módulo 8) — escopo .cfap-dash (tema claro do sistema) ===== */
.cfap-dash{
  --dgold:#E8B106; --dcard:#fff; --dink:#16202E; --dmuted:#5B6B7F; --dline:#E3E9F2; --dground:#EEF2F8;
  --dok:#1E9E6A; --dokbg:#E4F5EC; --dinfo:#2D7DD2; --dinfobg:#E4EFFB;
  --dwarn:#E8A317; --dwarnbg:#FBF0D8; --dcrit:#D64545; --dcritbg:#FBE6E6;
  --dc1:#2D7DD2; --dc2:#1E9E6A; --dc3:#7C5CBF; --dc4:#E8A317; --dc5:#17A2B8; --dc6:#D64545;
}
.cfap-dash .num{font-variant-numeric:tabular-nums}
.cfap-dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cfap-dash .dcard{background:var(--dcard);border:1px solid var(--dline);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,32,58,.06),0 6px 20px rgba(16,32,58,.05);padding:16px 18px}
.cfap-dash .c12{grid-column:span 12}.cfap-dash .c8{grid-column:span 8}.cfap-dash .c7{grid-column:span 7}
.cfap-dash .c6{grid-column:span 6}.cfap-dash .c5{grid-column:span 5}.cfap-dash .c4{grid-column:span 4}.cfap-dash .c3{grid-column:span 3}
@media(max-width:900px){.cfap-dash-grid>*{grid-column:span 12 !important}}
.cfap-dash .dct{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.cfap-dash .dhd{display:flex;align-items:center;gap:9px;min-width:0}
.cfap-dash .dfilete{width:4px;height:16px;border-radius:3px;background:var(--dgold);flex:0 0 auto}
.cfap-dash .dct h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dink);margin:0;font-weight:700}
.cfap-dash .dct a{font-size:12px;color:var(--dinfo);text-decoration:none;white-space:nowrap}
/* Subtítulo do cartão: diz o que o gráfico mede e em que escala (mata a dúvida "77 de quê?") */
.cfap-dash .dsub{font-size:12px;color:var(--dmuted);margin:-6px 0 10px}
/* Cartão de gráfico: o desenho ocupa a sobra de altura (a grade iguala a altura das colunas,
   e o gráfico, que tem proporção fixa, deixava um vazio no rodapé do cartão). */
.cfap-dash .dcard-plot{display:flex;flex-direction:column}
.cfap-dash .dcard-plot .dplot{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.cfap-dash .dcard-plot .dplot>*{width:100%}

.cfap-dash .did{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.cfap-dash .did .dphoto{width:118px;height:148px;border-radius:11px;background:#c9d2df center/cover;flex:0 0 auto;box-shadow:inset 0 0 0 1px var(--dline)}
.cfap-dash .did h3{margin:0 0 2px;font-size:22px;letter-spacing:-.01em}
.cfap-dash .did .drole{color:var(--dmuted);margin-bottom:12px}
.cfap-dash .dfacts{display:flex;flex-wrap:wrap;gap:14px 30px;margin-bottom:12px}
.cfap-dash .dfacts .dk{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dmuted)}
.cfap-dash .dfacts .dv{font-size:15px;font-weight:600}
.cfap-dash .dchips{display:flex;flex-wrap:wrap;gap:8px}
.cfap-dash .dchip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--dground);border:1px solid var(--dline);font-size:12.5px}
.cfap-dash .dchip .ddot{width:8px;height:8px;border-radius:50%}
.cfap-dash .dchip.ok{background:var(--dokbg);color:var(--dok);border-color:transparent;font-weight:600}
.cfap-dash .dchip.warn{background:var(--dwarnbg);color:var(--dwarn);border-color:transparent;font-weight:600}
.cfap-dash .dchip.crit{background:var(--dcritbg);color:var(--dcrit);border-color:transparent;font-weight:600}

.cfap-dash .darma-frame{width:100%;max-width:220px;aspect-ratio:1/1;margin:0 auto 12px;border-radius:12px;
  background:#f4f6fa;border:1px solid var(--dline);display:grid;place-items:center;overflow:hidden;padding:12px}
.cfap-dash .darma-frame img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cfap-dash .darma-ph{color:var(--dmuted);font-size:13px;text-align:center}
.cfap-dash .dkv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.cfap-dash .dkv .dk{color:var(--dmuted)}.cfap-dash .dkv .dv{text-align:right;font-weight:600}
.cfap-dash .dpill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--dokbg);color:var(--dok)}

.cfap-dash .dhab{display:flex;flex-direction:column}
.cfap-dash .dhab .drow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--dline)}
.cfap-dash .dhab .drow:last-child{border-bottom:0}
.cfap-dash .dhab .deq{flex:1;font-weight:500}
.cfap-dash .dtag{padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600}
.cfap-dash .dtag.y{background:var(--dokbg);color:var(--dok)}.cfap-dash .dtag.n{background:var(--dcritbg);color:var(--dcrit)}
.cfap-dash .dhab .ddt{color:var(--dmuted);font-size:12px;text-align:right;min-width:64px}

.cfap-dash .deqp{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cfap-dash .ddonut-wrap{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.cfap-dash .ddonut-cap{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dmuted);margin-bottom:8px}
.cfap-dash .ddonut{position:relative}
.cfap-dash .ddonut .dlbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:700;letter-spacing:-.02em}
.cfap-dash .dbars{flex:1;min-width:150px;display:flex;flex-direction:column;gap:12px}
.cfap-dash .dbar .dbh{display:flex;justify-content:space-between;margin:0 0 4px;font-size:13px}
.cfap-dash .dbar .dbh b{font-weight:700}
.cfap-dash .dtrack{height:8px;border-radius:6px;background:var(--dground)}
.cfap-dash .dtrack>i{display:block;height:100%;border-radius:6px}
/* Escala fixa: a trilha inteira É o 0–100, então ela ganha uma borda que delimita o teto
   (sem ela, "até onde vai 100%" fica implícito). */
.cfap-dash .dtrack.esc100{box-shadow:inset 0 0 0 1px var(--dline)}

.cfap-dash .dind{display:flex;flex-direction:column}
.cfap-dash .dind .drow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--dline)}
.cfap-dash .dind .drow:last-child{border-bottom:0}
.cfap-dash .dind .dlb{flex:1;color:var(--dmuted)}
.cfap-dash .dind .dvl{font-size:17px;font-weight:700}

.cfap-dash .dalerts{display:flex;gap:12px;flex-wrap:wrap}
.cfap-dash .dal{flex:1;min-width:190px;display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:11px}
.cfap-dash .dal .dic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:#fff;font-weight:700}
.cfap-dash .dal b{display:block;font-size:13.5px}.cfap-dash .dal small{color:var(--dmuted);font-size:12px}
.cfap-dash .dal.ok{background:var(--dokbg)}.cfap-dash .dal.ok .dic{background:var(--dok)}
.cfap-dash .dal.warn{background:var(--dwarnbg)}.cfap-dash .dal.warn .dic{background:var(--dwarn)}
.cfap-dash .dal.crit{background:var(--dcritbg)}.cfap-dash .dal.crit .dic{background:var(--dcrit)}
.cfap-dash .dal.info{background:var(--dinfobg)}.cfap-dash .dal.info .dic{background:var(--dinfo)}

/* Legenda de séries (.dleg): fica para gráficos com 2+ séries. Um gráfico de série única não
   leva legenda — o subtítulo (.dsub) já diz o que está plotado. */
.cfap-dash .dleg{display:flex;gap:16px;font-size:12px;margin-bottom:6px;color:var(--dmuted)}
.cfap-dash .dleg span{display:inline-flex;align-items:center;gap:6px}
.cfap-dash .dleg i{width:20px;height:3px;border-radius:2px;display:inline-block}

/* ---- Painel do Gestor (SP3) ---- */
.cfap-dash .dfilters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--dcard);border:1px solid var(--dline);border-radius:12px;padding:12px 16px;margin:8px 0 16px}
.cfap-dash .dfld{display:flex;flex-direction:column;gap:3px}
.cfap-dash .dfld label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dmuted);font-weight:700}
.cfap-dash .dfld select{border:1px solid var(--dline);border-radius:8px;padding:7px 10px;font-size:13.5px;background:#fff;color:var(--dink);min-width:130px}
.cfap-dash .dhint{color:var(--dmuted);font-size:12px;align-self:center}
.cfap-dash .dkpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px}
@media(max-width:1050px){.cfap-dash .dkpis{grid-template-columns:repeat(2,1fr)}}
.cfap-dash .dkpi{background:var(--dcard);border:1px solid var(--dline);border-radius:14px;box-shadow:0 1px 2px rgba(16,32,58,.06),0 6px 20px rgba(16,32,58,.05);padding:14px 16px}
/* Rótulo do KPI = mesmo padrão do cabeçalho dos demais cartões (filete dourado + texto escuro
   em caixa alta). Antes era um pontinho colorido que não codificava nada + texto cinza. */
.cfap-dash .dkpi .kl{font-size:12px;color:var(--dink);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.25;display:flex;align-items:center;gap:9px}
.cfap-dash .dkpi .kl .dfilete{align-self:stretch;height:auto;min-height:16px}
.cfap-dash .dkpi .kv{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.cfap-dash .dkpi .ks{font-size:12px;color:var(--dmuted)}
.cfap-dash .kup{color:var(--dok);font-weight:700}.cfap-dash .kdn{color:var(--dcrit);font-weight:700}
.cfap-dash .ddistrib{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cfap-dash .ddonut{position:relative;flex:0 0 auto}
.cfap-dash .ddonut .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cfap-dash .ddonut .lbl b{font-size:23px;font-weight:800}.cfap-dash .ddonut .lbl span{font-size:11px;color:var(--dmuted)}
.cfap-dash .dleglist{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.cfap-dash .dleglist .li{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;padding:5px 8px;border-radius:8px;text-decoration:none;color:var(--dink)}
.cfap-dash .dleglist .li:hover{background:var(--dground)}
.cfap-dash .dleglist .dot{width:11px;height:11px;border-radius:3px}.cfap-dash .dleglist .li .n{flex:1}.cfap-dash .dleglist .li b{font-weight:700}
.cfap-dash .dleglist .li .go{color:var(--dmuted);font-weight:700}
.cfap-dash .dalist{display:flex;flex-direction:column;gap:9px}
.cfap-dash .dalx{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px}
.cfap-dash .dalx .n{flex:1;font-size:13.5px}.cfap-dash .dalx b{font-size:18px;font-weight:800}
.cfap-dash .dalx.warn{background:var(--dwarnbg)}.cfap-dash .dalx.warn b{color:var(--dwarn)}
.cfap-dash .dalx.crit{background:var(--dcritbg)}.cfap-dash .dalx.crit b{color:var(--dcrit)}
.cfap-dash .dalx.info{background:var(--dinfobg)}.cfap-dash .dalx.info b{color:var(--dinfo)}
.cfap-dash .dcmp-ctrls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.cfap-dash .dcmp-note{color:var(--dmuted);font-size:12px;align-self:center}
.cfap-dash .dhbars{display:flex;flex-direction:column;gap:11px}
.cfap-dash .dhbar .l{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.cfap-dash .dhbar .l b{font-weight:700}
.cfap-dash .dstable{width:100%;border-collapse:collapse;font-size:13.5px}
.cfap-dash .dstable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dmuted);padding:8px 10px;border-bottom:1px solid var(--dline)}
.cfap-dash .dstable td{padding:9px 10px;border-bottom:1px solid var(--dline)}
.cfap-dash .dstable tr:last-child td{border-bottom:0}
.cfap-dash .dqra{font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#0B1E3F;text-decoration:none}
.cfap-dash .dqra:hover{color:var(--dinfo);text-decoration:underline}
.cfap-dash .dpill{padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:600;background:var(--dokbg);color:var(--dok)}
.cfap-dash .dpill.off{background:var(--dground);color:var(--dmuted)}
.cfap-dash .dsearch{border:1px solid var(--dline);border-radius:8px;padding:6px 10px;font-size:13px;min-width:200px}
.cfap-dash .dpg{border:1px solid var(--dline);background:#fff;border-radius:7px;padding:3px 10px;cursor:pointer;color:var(--dinfo);font-size:12.5px}

/* Modo Prova — bloqueio por saída de tela. Cobre tudo; a trava real é do servidor. */
.cfap-prova-bloqueio{
  position:fixed; inset:0; z-index:2000; background:var(--cfap-navy); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem; gap:.5rem;
}
.cfap-prova-bloqueio[hidden]{ display:none; }
.cfap-bloqueio-brasao{ width:110px; max-width:30vw; margin-bottom:.5rem; }
.cfap-bloqueio-form{ display:flex; flex-direction:column; align-items:center; gap:.75rem; margin-top:1rem; }
.cfap-bloqueio-form label{ font-size:.95rem; color:#c9d4e6; }
.cfap-bloqueio-form input{
  width:9rem; padding:.6rem; border:0; border-radius:.5rem; text-align:center;
  font-size:2.25rem; letter-spacing:.5rem; font-variant-numeric:tabular-nums;
}
.cfap-bloqueio-erro{ min-height:1.5rem; color:#ffc9c9; font-weight:600; margin:0; }
#prova-conteudo{ user-select:none; -webkit-user-select:none; }

/* Foto do alvo na correção prática: botões de câmera/arquivo + prévia antes de salvar.
   O input fica escondido só quando o JS assume (sem JS ele continua visível e funcional). */
.cfap-foto .cfap-foto-input{ display:none; }
.cfap-foto-acoes{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cfap-foto-previa{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.cfap-foto-previa:not(:empty){ margin-top:.5rem; }
.cfap-foto-previa img{ width:84px; height:84px; object-fit:cover; border-radius:.5rem;
  border:1px solid #d7dfea; background:#f4f6fa; }
.cfap-foto-info{ font-size:.8rem; color:#5B6B7F; }

/* ===================================================================== */
/* Guia do Usuário                                                       */
/* ===================================================================== */
/* Largura vem do container do sistema (.cfap-content .container-fluid, DIRETRIZES-UI §5.1).
   Aqui só a entrelinha, que é tipografia e não espaçamento de bloco. */
.cfap-ajuda p, .cfap-ajuda li{ line-height:1.7; }
.cfap-ajuda strong{ color:var(--cfap-navy); }

/* ATENÇÃO: nada de margem ad-hoc aqui — DIRETRIZES-UI §5.1 manda usar as utilidades de
   espaçamento do Bootstrap. O ritmo vertical vem de `mb-4`/`mt-5` no HTML dos capítulos e dos
   auxiliares em core/ajuda_blocos.php. Este bloco cuida só de COR, BORDA e TIPO. */

/* Título de seção: usa .cfap-secao, o componente do sistema — ele já traz negrito, o filete
   dourado e a própria margem. Nada a redefinir aqui. */

/* Caminho de cliques — substitui a captura de tela: diz ONDE fica, sem imagem para envelhecer. */
.cfap-ajuda-caminho{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  background:var(--cfap-navy); color:#fff; padding:.6rem .9rem; border-radius:.45rem; font-size:.93rem; }
.cfap-ajuda-caminho .sep{ color:var(--cfap-gold); font-weight:700; }
.cfap-ajuda-caminho .passo{ white-space:nowrap; }

/* Tabelas herdam a skin "Cabeçalho Navy" (DIRETRIZES-UI §5: não criar CSS de tabela por tela).
   O único acréscimo é a GRADE — aqui a tabela carrega o conteúdo que a imagem carregaria. */
.cfap-ajuda-tabwrap{ overflow-x:auto; }
.cfap-ajuda-tabwrap .table{ font-size:.94rem; }
.cfap-ajuda-tabwrap .table > tbody > tr > td{ vertical-align:top; }
.cfap-ajuda-tabwrap .table > thead > tr > th:not(:last-child){ border-right:1px solid rgba(255,255,255,.22); }
.cfap-ajuda-tabwrap .table > tbody > tr > td:not(:last-child){ border-right:1px solid #E4EAF2; }

/* Exemplo trabalhado — distinto do aviso, que é amarelo/atenção. */
.cfap-ajuda-exemplo{ border:1px solid #D8E0EC; border-left:4px solid var(--cfap-navy);
  border-radius:.45rem; padding:1.1rem 1.2rem; background:#F7F9FC; }
.cfap-ajuda-exemplo > h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--cfap-navy); font-weight:700; }
.cfap-ajuda-exemplo > :last-child{ margin-bottom:0; }

/* A conta com números reais. Monoespaçada para as colunas baterem na vertical. */
.cfap-ajuda-formula{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem; background:#0B1E3F; color:#E8EEF7; padding:.9rem 1.05rem; border-radius:.45rem;
  overflow-x:auto; line-height:1.85; }
.cfap-ajuda-formula .destaque{ color:var(--cfap-gold); font-weight:700;
  border-top:1px solid rgba(232,177,6,.35); margin-top:.5rem; padding-top:.5rem; }

/* O rosa que o Bootstrap dá a <code> destoa da paleta e chama mais atenção que o texto. */
.cfap-ajuda code{ color:var(--cfap-navy); background:#EEF2F7; padding:.12rem .38rem;
  border-radius:.25rem; font-size:.86em; }

.cfap-ajuda-fig img{ border:1px solid #D8DEE8; border-radius:.5rem; }
.cfap-ajuda-fig figcaption{ font-size:.85rem; color:#5A6A80; }
.cfap-ajuda-aviso{ background:#FBF0D8; color:#7A5600; border-left:4px solid var(--cfap-gold);
  padding:.9rem 1.05rem; border-radius:.45rem; line-height:1.7; }
.cfap-ajuda-aviso strong{ color:#6B4B00; }
.cfap-ajuda-aviso > :last-child{ margin-bottom:0; }
.cfap-ajuda-vejatambem{ font-size:.9rem; border-top:1px solid #E4EAF2; }

/* Índice agrupado por parte. */
.cfap-ajuda-parte .sub{ font-size:.87rem; color:#5A6A80; }

/* ===== Tela de prova: tamanho do texto ajustável pelo aluno (item AQ) =====
   O aluno toca A− / A+ e o texto REFLUI — nada de rolagem horizontal. A escala vive numa variável
   no próprio <form>, e o JS só troca o número.
   🔴 Só o formulário cresce: o pop-up, o cartão "Prova pausada" e a barra do PIN têm de continuar
   do tamanho certo, porque são eles que resolvem um problema no meio da prova.
   🔴 O zoom é CSS puro porque prova.js escuta 'fullscreenchange' e PAUSA a prova: qualquer zoom
   pela API de tela cheia travaria o aluno esperando o PIN do instrutor. */
.cfap-prova-txt{ --cfap-prova-esc:1; }
.cfap-prova-txt .card-body > p,
.cfap-prova-txt .form-check-label,
.cfap-prova-txt .cfap-secao{
  font-size:calc(1rem * var(--cfap-prova-esc));
  line-height:1.5;
}
/* Questão em branco apontada pelo pop-up de "faltam questões" (item AR). */
.cfap-prova-faltante{ outline:3px solid var(--cfap-red); outline-offset:2px; }