/* SISTEMA PARÁ · JF PRODUTO — design system extraído do protótipo (tokens + componentes) */
/* ===== DESIGN SYSTEM SISTEMA PARA, escopado em .tela ===== */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--jf-sans);color:var(--jf-texto);background:var(--jf-superficie-2);font-size:16px;line-height:1.5}
*,*::before,*::after{box-sizing:border-box}
/* =====================================================================
   SISTEMA PARÁ · JF PRODUTO: tokens-jf.css · v2.0.0
   Jader Filho 1515 · Deputado Federal · MDB-PA · 2026
   ---------------------------------------------------------------------
   Custom properties + utilitários base dos componentes principais.
   Fonte de verdade: design-system-jf.md + tokens-jf.json.
   Regra de ouro: não edite valor no componente; edite o token.
   ===================================================================== */

/* ---------- FONTES (arquivos em /fontes/; conferir licença webfont) -- */
/* Light 300: só vitrine; Railway Gank: só slogan/citação/celebração */

:root{
  /* =========================== COR: PRIMITIVOS ======================
     Escalas 50-900. Degrau 500 = cor oficial do manual marca_JF_26_NOVA. */

  /* Azul (institucional) */
  --jf-azul-50:#F2F6FF;   --jf-azul-100:#E6EEFF;  --jf-azul-200:#C4D4FF;
  --jf-azul-300:#9DB6FF;  --jf-azul-400:#5C82FF;  --jf-azul-500:#003AFF; /* oficial */
  --jf-azul-600:#0031D9;  --jf-azul-700:#0029B8;  --jf-azul-800:#002190;
  --jf-azul-900:#001B6B;  --jf-azul-950:#000F42;  /* 950: só site vitrine */

  /* Ciano (progresso, foco de dado) */
  --jf-ciano-50:#E5F9FF;  --jf-ciano-100:#CCF2FF; --jf-ciano-200:#99E5FF;
  --jf-ciano-300:#33CCFF; --jf-ciano-400:#0FC5FF; --jf-ciano-500:#00BFFF; /* oficial; PROIBIDO como texto/branco */
  --jf-ciano-600:#00A2D9; --jf-ciano-700:#0079AD; /* texto AA 4,84:1 */
  --jf-ciano-800:#006B99; --jf-ciano-900:#004A66;

  /* Vermelho (marca + ação) */
  --jf-vermelho-50:#FFE5E5;  --jf-vermelho-100:#FFD1D1; --jf-vermelho-200:#FFA3A3;
  --jf-vermelho-300:#FF6666; --jf-vermelho-400:#FF3333; --jf-vermelho-500:#FF0000; /* oficial; só marca/display */
  --jf-vermelho-600:#D60000; /* ação primária, AA 5,44:1 */
  --jf-vermelho-700:#C00000; --jf-vermelho-800:#990000; --jf-vermelho-900:#7A0000;

  /* Verde (FUNCIONAL WhatsApp; nunca sucesso, nunca decoração) */
  --jf-verde-50:#D9F7E6;  --jf-verde-100:#C3F2D8; --jf-verde-300:#63E09C;
  --jf-verde-500:#25D366; /* fundo do botão; texto sempre escuro */
  --jf-verde-700:#1B7A46; --jf-verde-900:#0E3D23;

  /* Neutro (tinta azulada) */
  --jf-neutro-0:#FFFFFF;   --jf-neutro-50:#F2F6FF;  --jf-neutro-100:#E6EEFF;
  --jf-neutro-200:#DCE6FF; --jf-neutro-300:#BFD1F5; --jf-neutro-400:#8494B5; /* só UI/placeholder */
  --jf-neutro-500:#6F80A3; --jf-neutro-600:#5A6A8C; --jf-neutro-700:#3D4E73;
  --jf-neutro-800:#1F2E52; --jf-neutro-900:#0A1633;

  /* Regiões (SÓ dentro de mapas; repouso 42%, hover 75%, ativo 100%) */
  --jf-regiao-norte:#FF0000; --jf-regiao-nordeste:#00BFFF; --jf-regiao-co:#0080D6;
  --jf-regiao-sudeste:#003AFF; --jf-regiao-sul:#001B6B;

  /* =========================== COR: SEMÂNTICOS (tema claro único) === */
  --jf-superficie:var(--jf-neutro-0);
  --jf-superficie-2:var(--jf-neutro-50);
  --jf-superficie-3:var(--jf-neutro-100);
  --jf-superficie-inversa:var(--jf-azul-900);
  --jf-texto:var(--jf-neutro-900);
  --jf-texto-2:var(--jf-neutro-600);
  --jf-texto-3:var(--jf-neutro-400);          /* placeholder/UI, nunca corpo */
  --jf-texto-inverso:var(--jf-neutro-0);
  --jf-marca:var(--jf-azul-500);
  --jf-marca-forte:var(--jf-azul-900);
  --jf-acao:var(--jf-vermelho-600);           /* ÚNICO botão de próxima ação por tela */
  --jf-acao-hover:var(--jf-vermelho-700);
  --jf-acao-pressed:var(--jf-vermelho-800);
  --jf-acao-texto:var(--jf-neutro-0);
  --jf-link:var(--jf-azul-500);
  --jf-link-hover:var(--jf-azul-600);
  --jf-progresso:var(--jf-ciano-500);         /* ciano = progresso/sucesso */
  --jf-progresso-trilha:var(--jf-ciano-200);
  --jf-sucesso-texto:var(--jf-ciano-700);
  --jf-sucesso-fundo:var(--jf-ciano-50);
  --jf-dica-fundo:var(--jf-azul-100);         /* azul claro = caixa DICA */
  --jf-dica-borda:var(--jf-azul-500);
  --jf-erro-texto:var(--jf-vermelho-600);     /* erro = texto + ícone, nunca só cor */
  --jf-erro-fundo:var(--jf-vermelho-50);
  --jf-erro-borda:var(--jf-vermelho-200);
  --jf-whatsapp:var(--jf-verde-500);          /* verde = compartilhar/ajuda humana */
  --jf-whatsapp-texto:var(--jf-neutro-900);
  --jf-whatsapp-texto-alt:var(--jf-verde-700);
  --jf-linha:var(--jf-neutro-200);
  --jf-linha-forte:var(--jf-neutro-300);
  --jf-foco:var(--jf-azul-500);
  --jf-veu:rgba(10,22,51,.5);

  /* =========================== TIPOGRAFIA =========================== */
  --jf-sans:'Aeonik Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --jf-display:'Aeonik Pro',sans-serif;
  --jf-script:'Railway Gank','Caveat Brush',cursive; /* uso restrito, ver DS f/b.2 */

  --jf-fs-display-hero:clamp(2.8rem,8vw,5rem);
  --jf-fs-display:clamp(2rem,5.5vw,3.2rem);
  --jf-fs-titulo-1:1.9rem;
  --jf-fs-pergunta:clamp(1.35rem,4.5vw,1.75rem); /* a pergunta única da tela */
  --jf-fs-titulo-2:1.25rem;
  --jf-fs-titulo-3:1.05rem;
  --jf-fs-lead:1.12rem;
  --jf-fs-corpo-lg:1.06rem;
  --jf-fs-corpo:1rem;
  --jf-fs-corpo-sm:.88rem;   /* piso do corpo */
  --jf-fs-legenda:.78rem;    /* crédito/fonte de dado, nunca instrução */
  --jf-fs-overline:.7rem;
  --jf-fs-rotulo:.8rem;
  --jf-fs-botao:.9rem;
  --jf-fs-botao-lg:1rem;
  --jf-fs-metric:clamp(2rem,4.5vw,3.4rem);
  --jf-fs-metric-sm:1.5rem;
  --jf-fs-script:1.15rem;

  /* =========================== ESPAÇO (base 4, ritmo 8) ============= */
  --jf-s-1:4px;  --jf-s-2:8px;  --jf-s-3:12px; --jf-s-4:16px; --jf-s-5:20px;
  --jf-s-6:24px; --jf-s-8:32px; --jf-s-10:40px; --jf-s-12:48px;
  --jf-s-16:64px; --jf-s-20:80px; --jf-s-24:96px; --jf-s-32:128px;

  /* =========================== GRID / MEDIDAS ======================= */
  --jf-maxw:1140px;
  --jf-maxw-texto:68ch;
  --jf-maxw-fluxo:560px;   /* formulário em passos: coluna única */
  --jf-gutter:24px;
  --jf-margem:22px;
  --jf-margem-lg:32px;
  --jf-toque-min:48px;     /* alvo de toque mínimo em produto */

  /* =========================== RADIUS =============================== */
  --jf-r-0:0px;   --jf-r-xs:4px;  --jf-r-sm:8px;
  --jf-r-md:12px; /* controle padrão */
  --jf-r-lg:16px; /* card padrão */
  --jf-r-xl:24px; --jf-r-2xl:32px; --jf-r-3xl:44px; --jf-r-full:999px;

  /* =========================== BORDAS =============================== */
  --jf-b-padrao:1px solid var(--jf-linha);
  --jf-b-contorno:2px solid var(--jf-linha-forte);
  --jf-b-interativa:1px solid var(--jf-azul-500);
  --jf-b-erro:2px solid var(--jf-erro-texto);

  /* =========================== SOMBRAS (do azul, nunca preto) ======= */
  --jf-sh-1:0 1px 2px rgba(0,27,107,.06);
  --jf-sh-2:0 2px 8px rgba(0,27,107,.08);
  --jf-sh-3:0 8px 24px rgba(0,27,107,.10);
  --jf-sh-4:0 16px 40px rgba(0,27,107,.14);
  --jf-sh-foco:0 0 0 3px rgba(0,58,255,.30);

  /* =========================== MOTION =============================== */
  --jf-t-rapido:140ms;
  --jf-t-padrao:220ms;
  --jf-t-lento:420ms;
  --jf-e-padrao:cubic-bezier(.3,.9,.3,1);
  --jf-e-entrada:cubic-bezier(.2,1,.3,1);
  --jf-e-carimbo:cubic-bezier(.2,1.5,.4,1);

  /* =========================== Z-INDEX ============================== */
  --jf-z-dropdown:1000; --jf-z-sticky:1100; --jf-z-drawer:1200;
  --jf-z-modal-veu:1290; --jf-z-modal:1300; --jf-z-toast:1400; --jf-z-tooltip:1500;
}

/* =====================================================================
   BASE
   ===================================================================== */
::selection{background:var(--jf-ciano-500);color:var(--jf-azul-900)}

/* Foco visível universal (lei do sistema) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--jf-foco);outline-offset:2px;border-radius:var(--jf-r-sm)
}

/* Números de dado: sempre tabulares */
.jf-num,.jf-kpi__valor,.jf-tabela td.num{font-variant-numeric:tabular-nums}

/* Movimento reduzido: corta tudo para o estado final */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
}

/* =====================================================================
   .jf-btn: BOTÃO
   Lei: um .jf-btn--primaria por tela. Vermelho nunca destrói.
   ===================================================================== */
.jf-btn{
  --_h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--jf-s-2);
  min-height:var(--_h);min-width:var(--jf-toque-min);
  padding:0 var(--jf-s-6);
  font-family:var(--jf-sans);font-weight:700;font-size:var(--jf-fs-botao);
  letter-spacing:.005em;line-height:1;
  border-radius:var(--jf-r-md);border:2px solid transparent;
  cursor:pointer;text-decoration:none;user-select:none;
  transition:transform var(--jf-t-rapido) var(--jf-e-padrao),
             background var(--jf-t-padrao) var(--jf-e-padrao),
             color var(--jf-t-padrao) var(--jf-e-padrao),
             border-color var(--jf-t-padrao) var(--jf-e-padrao),
             box-shadow var(--jf-t-padrao) var(--jf-e-padrao);
}
.jf-btn--sm{--_h:40px;padding:0 var(--jf-s-4);font-size:.82rem}   /* só admin */
.jf-btn--lg{--_h:56px;padding:0 var(--jf-s-8);font-size:var(--jf-fs-botao-lg)} /* fluxos */
.jf-btn--bloco{width:100%}                                        /* largura total no fluxo */

/* Primária: a próxima ação (vermelho-600, AA com branco) */
.jf-btn--primaria{background:var(--jf-acao);color:var(--jf-acao-texto)}
.jf-btn--primaria:hover{background:var(--jf-acao-hover);transform:translateY(-2px);box-shadow:var(--jf-sh-3)}
.jf-btn--primaria:active{background:var(--jf-acao-pressed);transform:translateY(0) scale(.985);box-shadow:none}

/* WhatsApp: compartilhar / ajuda humana (texto escuro obrigatório) */
.jf-btn--whatsapp{background:var(--jf-whatsapp);color:var(--jf-whatsapp-texto)}
.jf-btn--whatsapp:hover{background:var(--jf-verde-300);transform:translateY(-2px);box-shadow:var(--jf-sh-3)}
.jf-btn--whatsapp:active{transform:translateY(0) scale(.985)}

/* Secundária: institucional (site/admin) */
.jf-btn--secundaria{background:var(--jf-azul-900);color:#fff}
.jf-btn--secundaria:hover{background:var(--jf-azul-500);transform:translateY(-2px);box-shadow:var(--jf-sh-3)}
.jf-btn--secundaria:active{transform:translateY(0) scale(.985)}

/* Fantasma: voltar, cancelar, alternativa (inclui a destrutiva confirmada) */
.jf-btn--fantasma{background:transparent;color:var(--jf-azul-900);border-color:var(--jf-linha-forte)}
.jf-btn--fantasma:hover{background:var(--jf-azul-900);color:#fff;border-color:var(--jf-azul-900)}
.jf-btn--fantasma.on-dark,.on-dark .jf-btn--fantasma{color:#fff;border-color:rgba(255,255,255,.45)}
.jf-btn--fantasma.on-dark:hover,.on-dark .jf-btn--fantasma:hover{background:#fff;color:var(--jf-azul-900)}

/* Link: ação terciária */
.jf-btn--link{background:transparent;color:var(--jf-link);text-decoration:underline;min-height:var(--jf-toque-min);padding:0 var(--jf-s-2)}
.jf-btn--link:hover{color:var(--jf-link-hover)}

/* Estados comuns */
.jf-btn[disabled],.jf-btn.is-desabilitado{opacity:.38;pointer-events:none}
.jf-btn.is-carregando{pointer-events:none;position:relative}
.jf-btn.is-carregando::before{
  content:"";width:16px;height:16px;border-radius:var(--jf-r-full);
  border:2.4px solid currentColor;border-right-color:transparent;
  animation:jf-girar .7s linear infinite
}
@keyframes jf-girar{to{transform:rotate(1turn)}}

/* =====================================================================
   .jf-campo: CAMPO DE TEXTO
   Rótulo em cima, sempre visível. Placeholder nunca é rótulo.
   ===================================================================== */
.jf-campo{display:flex;flex-direction:column;gap:var(--jf-s-2);max-width:var(--jf-maxw-fluxo)}
.jf-campo__rotulo{font-size:var(--jf-fs-rotulo);font-weight:700;line-height:1.2;color:var(--jf-texto)}
.jf-campo__apoio{font-size:var(--jf-fs-corpo-sm);color:var(--jf-texto-2)}
.jf-campo__controle{
  min-height:52px;                       /* 48px em admin denso */
  padding:0 var(--jf-s-4);
  font-family:var(--jf-sans);font-size:1rem;color:var(--jf-texto);
  background:var(--jf-superficie);
  border:var(--jf-b-padrao);border-radius:var(--jf-r-md);
  transition:border-color var(--jf-t-rapido) var(--jf-e-padrao),
             box-shadow var(--jf-t-rapido) var(--jf-e-padrao);
}
textarea.jf-campo__controle{min-height:96px;padding-block:var(--jf-s-3);line-height:1.55}
.jf-campo__controle::placeholder{color:var(--jf-texto-3)}
.jf-campo__controle:focus{border-color:var(--jf-azul-500);box-shadow:var(--jf-sh-foco);outline:none}
.jf-campo__controle[disabled]{background:var(--jf-superficie-2);color:var(--jf-texto-3)}
.jf-campo.tem-erro .jf-campo__controle{border:var(--jf-b-erro)}

/* =====================================================================
   .jf-erro: MENSAGEM DE ERRO
   Lei: sempre ícone + frase. Nunca só cor. Nunca fundo cheio vermelho.
   ===================================================================== */
.jf-erro{
  display:flex;align-items:flex-start;gap:var(--jf-s-2);
  margin-top:var(--jf-s-2);
  font-size:var(--jf-fs-corpo-sm);font-weight:500;color:var(--jf-erro-texto)
}
.jf-erro__icone{flex:none;width:20px;height:20px}
/* Erro de tela (falha de envio, erro de sistema) */
.jf-erro--bloco{
  margin-top:0;padding:var(--jf-s-4);
  background:var(--jf-erro-fundo);
  border:1px solid var(--jf-erro-borda);border-radius:var(--jf-r-md)
}

/* =====================================================================
   .jf-dica: CAIXA DE DICA
   Lei: azul claro = dica dispensável. Máx. 1 por tela. Nunca conteúdo
   obrigatório, nunca aviso, nunca erro.
   ===================================================================== */
.jf-dica{
  display:flex;gap:var(--jf-s-3);align-items:flex-start;
  padding:var(--jf-s-4);
  background:var(--jf-dica-fundo);
  border-left:4px solid var(--jf-dica-borda);
  border-radius:var(--jf-r-md);
}
.jf-dica__icone{flex:none;width:24px;height:24px;color:var(--jf-azul-500)}
.jf-dica__titulo{font-size:var(--jf-fs-rotulo);font-weight:700;color:var(--jf-azul-900);margin-bottom:var(--jf-s-1)}
.jf-dica__texto{font-size:var(--jf-fs-corpo);color:var(--jf-texto)}

/* =====================================================================
   .jf-card: CARD
   ===================================================================== */
.jf-card{
  background:var(--jf-superficie);
  border:var(--jf-b-padrao);border-radius:var(--jf-r-lg);
  padding:var(--jf-s-6);box-shadow:var(--jf-sh-1);
  transition:transform var(--jf-t-padrao) var(--jf-e-padrao),
             box-shadow var(--jf-t-padrao) var(--jf-e-padrao),
             border-color var(--jf-t-padrao) var(--jf-e-padrao);
}
a.jf-card{display:block;color:inherit;text-decoration:none}
.jf-card--clicavel:hover,a.jf-card:hover{
  transform:translateY(-3px);box-shadow:var(--jf-sh-3);border-color:var(--jf-azul-500)
}
/* Barra de acento: ciano = dado, azul = institucional. NUNCA vermelho. */
.jf-card--acento-dado{border-top:4px solid var(--jf-ciano-500)}
.jf-card--acento-marca{border-top:4px solid var(--jf-azul-500)}
.jf-card__titulo{
  font-size:var(--jf-fs-titulo-3);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--jf-texto);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.jf-card__texto{font-size:var(--jf-fs-corpo-sm);line-height:1.55;color:var(--jf-texto-2);margin-top:var(--jf-s-2)}

/* =====================================================================
   .jf-kpi: KPI / NÚMERO
   Lei: rótulo falado, número tabular, fonte do dado obrigatória.
   Abaixo da meta: borda esquerda vermelha + texto (nunca barra cheia).
   ===================================================================== */
.jf-kpi{display:flex;flex-direction:column;gap:var(--jf-s-1)}
.jf-kpi__rotulo{font-size:var(--jf-fs-rotulo);font-weight:700;color:var(--jf-texto-2)}
.jf-kpi__valor{
  font-family:var(--jf-display);font-weight:900;
  font-size:var(--jf-fs-metric-sm);line-height:1.1;letter-spacing:-.02em;
  color:var(--jf-azul-900);font-variant-numeric:tabular-nums
}
.jf-kpi--heroi .jf-kpi__valor{font-size:var(--jf-fs-metric);line-height:1;letter-spacing:-.03em}
.jf-kpi__variacao{font-size:var(--jf-fs-corpo-sm);color:var(--jf-texto-2)} /* texto diz a direção */
.jf-kpi__variacao.subiu{color:var(--jf-sucesso-texto)}
.jf-kpi__fonte{font-size:var(--jf-fs-legenda);color:var(--jf-texto-2)}     /* obrigatória */
.jf-kpi--abaixo-meta{border-left:3px solid var(--jf-erro-texto);padding-left:var(--jf-s-3)}

/* =====================================================================
   UTILITÁRIOS DE APOIO (progresso, badge, texto)
   ===================================================================== */
/* Progresso de passos: barra ciano + texto "Passo X de Y" obrigatório */
.jf-passos{display:flex;flex-direction:column;gap:var(--jf-s-2)}
.jf-passos__texto{font-size:var(--jf-fs-rotulo);font-weight:700;color:var(--jf-texto-2)}
.jf-passos__barra{height:6px;border-radius:var(--jf-r-full);background:var(--jf-progresso-trilha);overflow:hidden}
.jf-passos__preenchido{height:100%;border-radius:var(--jf-r-full);background:var(--jf-progresso);
  transition:width var(--jf-t-lento) var(--jf-e-padrao)}

/* Badge (estado por extenso, nunca só cor) */
.jf-badge{display:inline-flex;align-items:center;gap:var(--jf-s-1);
  height:26px;padding:0 var(--jf-s-3);border-radius:var(--jf-r-full);
  font-size:.7rem;font-weight:700;letter-spacing:.04em}
.jf-badge--neutra{background:var(--jf-azul-100);color:var(--jf-azul-900)}
.jf-badge--ativa{background:var(--jf-ciano-500);color:var(--jf-azul-900)}
.jf-badge--sucesso{background:var(--jf-sucesso-fundo);color:var(--jf-sucesso-texto)}
.jf-badge--urgencia{background:var(--jf-erro-fundo);color:var(--jf-erro-texto)}

/* Script da marca: SÓ slogan, citação e celebração */
.jf-script{font-family:var(--jf-script);font-weight:400;font-size:var(--jf-fs-script);letter-spacing:0}

/* Faixa da marca (vermelho, ciano, azul: 33,33% cada) */
.jf-faixa{height:6px;border-radius:0;background:linear-gradient(90deg,
  var(--jf-vermelho-500) 0 33.33%,
  var(--jf-ciano-500) 33.33% 66.66%,
  var(--jf-azul-500) 66.66% 100%)}

/* Medidas de leitura */
.jf-prosa{max-width:var(--jf-maxw-texto)}
.jf-fluxo{max-width:var(--jf-maxw-fluxo);margin-inline:auto}

/* Aliases legados (não usar em código novo) */
:root{
  --blue:var(--jf-azul-900);--blue-soft:var(--jf-azul-700);
  --green:var(--jf-ciano-500);--yellow:var(--jf-ciano-500);
  --red:var(--jf-vermelho-500);--sand:var(--jf-linha);--muted:var(--jf-texto-2);
}