/* ==========================================================================
   Central de ajuda da rede — ajuda.planningbrain.com.br
   Tokens da Planning (brand-tokens.css 1.0): regua fina, raio zero, sem sombra.
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; }
img{ max-width:100%; }

/* ==========================================================================
   Central de ajuda da rede. Tokens da Planning (brand-tokens.css 1.0),
   os mesmos da apresentacao do comite: regua fina, raio zero, sem sombra.
   Formato de artigo: coluna unica de leitura com sumario lateral.
   ========================================================================== */
:root{
  color-scheme: light;
  --_casa-verde:#0AE18C; --_casa-verde-texto:#03784A;
  --_casa-preto:#000000; --_casa-branco:#FFFFFF;
  --_casa-gray10:#646464; --_rampa-gray5:#A6A6A6; --_rampa-gray8:#7E7E7E;

  --bg:      light-dark(var(--_casa-branco), var(--_casa-preto));
  --surface: light-dark(#F1F1F1, #151515);
  --ink:     light-dark(var(--_casa-preto), var(--_casa-branco));
  --muted:   light-dark(var(--_casa-gray10), var(--_rampa-gray5));
  --accent:  var(--_casa-verde);
  --border:  light-dark(var(--_rampa-gray8), var(--_casa-gray10));
  --linha-suave: light-dark(#DCDCDC, #2A2A2A);
  --danger:  light-dark(#D70921, #F63C52);
  --accent-tinta: light-dark(var(--_casa-verde-texto), var(--_casa-verde));

  --fonte:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --peso-hairline:200; --peso-regular:400; --peso-semibold:600; --peso-bold:700;
  --num: lining-nums tabular-nums;
  --tipo-caption:0.6875rem; --tipo-body-sm:0.8125rem; --tipo-body:1rem;
  --tipo-lead:1.25rem; --tipo-h3:1.333rem; --tipo-h2:1.777rem; --tipo-h1:2.369rem;
  --tipo-rotulo:0.625rem;
  --altura-caption:1.45; --altura-body-sm:1.45; --altura-body:1.65; --altura-lead:1.55;
  --altura-h3:1.3; --altura-h1:1.2; --altura-rotulo:1.2;
  --tracking-titulo:-0.015em; --tracking-rotulo:0.16em; --tracking-coluna:0.12em;

  --espaco-05:4px; --espaco-1:8px; --espaco-2:16px; --espaco-3:24px;
  --espaco-4:32px; --espaco-6:48px; --espaco-8:64px; --espaco-12:96px;

  --raio-minimo:2px;
  --borda-largura:1px; --borda-largura-forte:2px;
  --borda-fina:  var(--borda-largura) solid var(--linha-suave);
  --borda-forte: var(--borda-largura-forte) solid var(--ink);
  --icone-md:16px;
  --duracao-hover:200ms; --curva-enfase:cubic-bezier(0.65,0,0.35,1);
}
:root[data-tema="escuro"]{ color-scheme: dark; }
:root[data-tema="claro"]{ color-scheme: light; }
@media (prefers-reduced-motion: reduce){ :root{ --duracao-hover:0ms; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:var(--peso-regular) var(--tipo-body)/var(--altura-body) var(--fonte);
  font-variant-numeric:var(--num); -webkit-font-smoothing:antialiased;
  padding-inline:var(--espaco-3); padding-block:0 var(--espaco-12); }
@media (max-width:640px){ body{ padding-inline:var(--espaco-2); } }
h1,h2,h3,h4{ margin:0; text-wrap:balance; letter-spacing:var(--tracking-titulo); font-weight:var(--peso-semibold); }
p{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:var(--accent-tinta); text-underline-offset:2px; }
:focus-visible{ outline:2px solid var(--accent-tinta); outline-offset:2px; }

.rotulo{ font:var(--peso-semibold) var(--tipo-rotulo)/var(--altura-rotulo) var(--fonte);
  letter-spacing:var(--tracking-rotulo); text-transform:uppercase; }
.base{ font:var(--peso-regular) var(--tipo-caption)/var(--altura-caption) var(--fonte); color:var(--muted); text-wrap:pretty; }
.mut{ color:var(--muted); }

/* barra da central */
.topo{ max-width:1040px; margin:0 auto; display:flex; align-items:center; gap:var(--espaco-2);
  padding:var(--espaco-3) 0; border-bottom:var(--borda-fina); }
.topo img{ height:22px; width:auto; display:block; }
.marca-topo{ display:block; line-height:0; }
.trilha a{ color:inherit; text-decoration:none; }
.trilha a:hover{ color:var(--accent-tinta); text-decoration:underline; }
.topo .l{ display:block; } .topo .d{ display:none; }
:root[data-tema="escuro"] .topo .l{ display:none; } :root[data-tema="escuro"] .topo .d{ display:block; }
.topo .central{ font:var(--peso-semibold) var(--tipo-body-sm)/1.2 var(--fonte); letter-spacing:var(--tracking-coluna);
  text-transform:uppercase; color:var(--muted); padding-left:var(--espaco-2); border-left:var(--borda-fina); }
.topo .btn{ margin-left:auto; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--espaco-1); min-height:34px; padding:0 var(--espaco-2);
  border:var(--borda-largura) solid var(--border); border-radius:var(--raio-minimo); background:transparent; color:var(--ink); cursor:pointer;
  font-size:var(--tipo-body-sm); font-weight:var(--peso-semibold); white-space:nowrap;
  transition:border-color var(--duracao-hover) var(--curva-enfase); }
.btn:hover{ border-color:var(--accent-tinta); }

/* trilha */
.trilha{ max-width:1040px; margin:0 auto; padding-top:var(--espaco-4);
  font-size:var(--tipo-body-sm); line-height:var(--altura-body-sm); color:var(--muted); }
.trilha b{ color:var(--ink); font-weight:var(--peso-semibold); }
.trilha span{ padding:0 var(--espaco-05); }

/* grade do artigo */
.grade{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 232px;
  column-gap:var(--espaco-6); row-gap:var(--espaco-4); align-items:start; padding-top:var(--espaco-2); }
@media (max-width:1000px){ .grade{ grid-template-columns:1fr; row-gap:var(--espaco-3); } }
@media (min-width:1001px){ .art-cab{ grid-column:1; grid-row:1; } .artigo{ grid-column:1; grid-row:2; }
  .sumario{ grid-column:2; grid-row:1 / span 2; align-self:start; } }
.artigo{ max-width:74ch; display:flex; flex-direction:column; gap:var(--espaco-6); }

/* cabecalho do artigo */
.art-cab{ max-width:74ch; display:flex; flex-direction:column; gap:var(--espaco-2); padding-bottom:var(--espaco-3);
  border-bottom:var(--borda-fina); }
.art-cab h1{ font-size:var(--tipo-h1); line-height:var(--altura-h1); }
.art-cab .resumo{ font-size:var(--tipo-lead); line-height:var(--altura-lead); color:var(--muted); max-width:62ch; text-wrap:pretty; }
.art-meta{ display:flex; flex-wrap:wrap; gap:var(--espaco-05) var(--espaco-2); align-items:center;
  font-size:var(--tipo-body-sm); color:var(--muted); }
.art-meta b{ color:var(--ink); font-weight:var(--peso-semibold); }
.art-meta .ponto{ width:3px; height:3px; background:var(--border); display:inline-block; }

/* sumario lateral */
.sumario{ position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--espaco-3));
  border-top:var(--borda-forte); padding-top:var(--espaco-2); display:flex; flex-direction:column; gap:var(--espaco-1); }
@media (max-width:1000px){ .sumario{ position:static; border:var(--borda-fina); padding:var(--espaco-3); } }
.sumario .rotulo{ color:var(--muted); }
.sumario ol{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.sumario li{ border-bottom:var(--borda-fina); }
.sumario li:last-child{ border-bottom:none; }
.sumario a{ display:block; padding:var(--espaco-1) 0; color:var(--ink); text-decoration:none;
  font-size:var(--tipo-body-sm); line-height:var(--altura-body-sm);
  transition:color var(--duracao-hover) var(--curva-enfase); }
.sumario a:hover{ color:var(--accent-tinta); }

/* secoes do artigo */
.secao{ display:flex; flex-direction:column; gap:var(--espaco-3); scroll-margin-top:var(--espaco-4); }
.secao > h2{ font-size:var(--tipo-h2); line-height:var(--altura-h3); }
.secao h3{ font-size:var(--tipo-h3); line-height:var(--altura-h3); }
.secao p{ text-wrap:pretty; }
.bloco{ display:flex; flex-direction:column; gap:var(--espaco-2); }
.secao ul.simples{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:var(--espaco-1); }

/* passos numerados */
ol.passos{ margin:0; padding:0; list-style:none; counter-reset:c; display:flex; flex-direction:column; gap:var(--espaco-2); }
ol.passos > li{ position:relative; padding-left:42px; min-height:26px; counter-increment:c; }
ol.passos > li::before{ content:counter(c); position:absolute; left:0; top:0; width:26px; height:26px; text-align:center;
  border:var(--borda-largura) solid var(--border); border-radius:var(--raio-minimo);
  font:var(--peso-semibold) var(--tipo-body-sm)/24px var(--fonte); }
ol.passos b{ font-weight:var(--peso-semibold); }
.ui{ border:var(--borda-largura) solid var(--border); border-radius:var(--raio-minimo); padding:1px 5px;
  font-weight:var(--peso-semibold); font-size:0.94em; white-space:nowrap; }

/* caixas de aviso */
.caixa{ border-left:var(--borda-largura-forte) solid var(--accent-tinta); background:var(--surface);
  padding:var(--espaco-2) var(--espaco-3); display:flex; flex-direction:column; gap:var(--espaco-1); }
.caixa.importante{ border-left-color:var(--danger); }
.caixa .rotulo{ color:var(--accent-tinta); }
.caixa.importante .rotulo{ color:var(--danger); }
.caixa p{ font-size:var(--tipo-body-sm); line-height:var(--altura-body); }

/* onde entra o print */
.print{ border:1px dashed var(--border); padding:var(--espaco-4) var(--espaco-3); text-align:center;
  display:flex; flex-direction:column; gap:var(--espaco-05); color:var(--muted); }
.print .rotulo{ color:var(--muted); }
.print span.o-que{ font-size:var(--tipo-body-sm); line-height:var(--altura-body-sm); }

/* como identificar cada chave */
.identifica{ border:var(--borda-fina); display:flex; flex-direction:column; }
.identifica > div{ padding:var(--espaco-2) var(--espaco-3); border-bottom:var(--borda-fina);
  display:flex; flex-direction:column; gap:var(--espaco-05); }
.identifica > div:last-child{ border-bottom:none; }
.identifica b{ font-weight:var(--peso-semibold); font-size:var(--tipo-body-sm); }
.identifica code{ font-family:var(--fonte); font-size:var(--tipo-body-sm); color:var(--muted); word-break:break-all; }

/* fluxo da cobranca */
.fluxo{ border:var(--borda-fina); display:flex; flex-direction:column; counter-reset:f; }
.fluxo > div{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:var(--espaco-2);
  padding:var(--espaco-2) var(--espaco-3); border-bottom:var(--borda-fina); counter-increment:f; align-items:baseline; }
.fluxo > div:last-child{ border-bottom:none; }
.fluxo > div::before{ content:counter(f); color:var(--muted); font-weight:var(--peso-semibold); font-size:var(--tipo-body-sm); }
.fluxo p{ font-size:var(--tipo-body-sm); line-height:var(--altura-body); }
.fluxo p b{ font-weight:var(--peso-semibold); }
.fluxo .quem{ font:var(--peso-semibold) var(--tipo-caption)/1.2 var(--fonte); letter-spacing:var(--tracking-coluna);
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.fluxo .automatico{ background:var(--surface); }
.fluxo .automatico .quem{ color:var(--accent-tinta); }
@media (max-width:560px){ .fluxo > div{ grid-template-columns:26px minmax(0,1fr); }
  .fluxo .quem{ grid-column:2; } }

/* modelo de mensagem */
.modelo{ border:var(--borda-fina); }
.modelo-cab{ display:flex; align-items:center; gap:var(--espaco-2); flex-wrap:wrap; padding:var(--espaco-2) var(--espaco-3);
  border-bottom:var(--borda-fina); background:var(--surface); }
.modelo-cab .rotulo{ color:var(--muted); }
.modelo-cab .btn{ margin-left:auto; }
.modelo pre{ margin:0; padding:var(--espaco-3); font:var(--peso-regular) var(--tipo-body-sm)/1.7 var(--fonte);
  white-space:pre-wrap; word-break:break-word; }

/* perguntas frequentes */
.faq{ border:var(--borda-fina); }
.faq details{ border-bottom:var(--borda-fina); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ padding:var(--espaco-2) var(--espaco-3); cursor:pointer; font-weight:var(--peso-semibold);
  font-size:var(--tipo-body-sm); line-height:var(--altura-body); list-style:none;
  display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:var(--espaco-2); align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--muted); text-align:right; font-weight:var(--peso-semibold); }
.faq details[open] summary::after{ content:"\2013"; }
.faq summary:hover{ color:var(--accent-tinta); }
.faq .resposta{ padding:0 var(--espaco-3) var(--espaco-3); font-size:var(--tipo-body-sm); line-height:var(--altura-body); }

/* fim do artigo */
.avaliacao{ border:var(--borda-fina); padding:var(--espaco-3); display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--espaco-2); }
.avaliacao p{ font-weight:var(--peso-semibold); font-size:var(--tipo-body-sm); }
.avaliacao .acoes{ margin-left:auto; display:flex; gap:var(--espaco-1); }
.avaliacao .btn{ min-width:64px; }
@media (max-width:480px){ .avaliacao .acoes{ margin-left:0; } }
.suporte{ border-top:var(--borda-forte); padding-top:var(--espaco-3); display:flex; flex-direction:column; gap:var(--espaco-1); }
.suporte h2{ font-size:var(--tipo-h3); line-height:var(--altura-h3); }
.suporte p{ font-size:var(--tipo-body-sm); line-height:var(--altura-body); color:var(--muted); max-width:62ch; }
.rodape{ max-width:1040px; margin:var(--espaco-8) auto 0; padding-top:var(--espaco-2); border-top:var(--borda-fina); }

/* ==========================================================================
   Home da central
   ========================================================================== */
.capa{ max-width:1040px; margin:0 auto; padding:var(--espaco-8) 0 var(--espaco-6);
  border-bottom:var(--borda-fina); display:flex; flex-direction:column; gap:var(--espaco-3); }
.capa h1{ font:var(--peso-hairline) var(--tipo-h1)/var(--altura-h1) var(--fonte);
  letter-spacing:var(--tracking-titulo); max-width:20ch; }
.capa h1 b{ font-weight:var(--peso-bold); }
.capa p{ font-size:var(--tipo-lead); line-height:var(--altura-lead); color:var(--muted); max-width:62ch; text-wrap:pretty; }
@media (max-width:640px){ .capa{ padding-top:var(--espaco-6); } .capa h1{ font-size:var(--tipo-h2); } }

.busca{ display:flex; flex-direction:column; gap:var(--espaco-1); max-width:520px; }
.busca label{ color:var(--muted); }
.busca input{ font:var(--peso-regular) var(--tipo-body)/1 var(--fonte); color:var(--ink);
  background:var(--bg); border:var(--borda-largura) solid var(--border); border-radius:var(--raio-minimo);
  padding:var(--espaco-2); width:100%; }
.busca input::placeholder{ color:var(--muted); }
.busca input:focus{ outline:2px solid var(--accent-tinta); outline-offset:-1px; }

.colecoes{ max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:var(--espaco-8);
  padding-top:var(--espaco-6); }
.colecao{ display:flex; flex-direction:column; gap:var(--espaco-3); }
.colecao-cab{ display:flex; align-items:baseline; gap:var(--espaco-2); flex-wrap:wrap;
  border-bottom:var(--borda-forte); padding-bottom:var(--espaco-1); }
.colecao-cab h2{ font-size:var(--tipo-h2); line-height:var(--altura-h3); }
.colecao-cab .quantos{ margin-left:auto; color:var(--muted); font-size:var(--tipo-body-sm); }
@media (max-width:640px){ .colecao-cab .quantos{ margin-left:0; flex-basis:100%; } }
.cartoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--espaco-2); }
.cartao{ border:var(--borda-fina); display:flex; }
.cartao a{ width:100%; }
.cartao a{ display:flex; flex-direction:column; gap:var(--espaco-1); padding:var(--espaco-3);
  text-decoration:none; color:var(--ink); height:100%;
  transition:background-color var(--duracao-hover) var(--curva-enfase); }
.cartao a:hover{ background:var(--surface); }
.cartao a:hover h3{ color:var(--accent-tinta); }
.cartao h3{ font-size:var(--tipo-h3); line-height:var(--altura-h3);
  transition:color var(--duracao-hover) var(--curva-enfase); }
.cartao p{ font-size:var(--tipo-body-sm); line-height:var(--altura-body); color:var(--muted); text-wrap:pretty; }
.cartao .marca{ margin-top:auto; padding-top:var(--espaco-2); font:var(--peso-semibold) var(--tipo-caption)/1.2 var(--fonte);
  letter-spacing:var(--tracking-coluna); text-transform:uppercase; color:var(--muted); }
.sem-resultado{ border:var(--borda-fina); padding:var(--espaco-3); font-size:var(--tipo-body-sm);
  line-height:var(--altura-body); color:var(--muted); }
.fim-home{ max-width:1040px; margin:var(--espaco-8) auto 0; border-top:var(--borda-forte);
  padding-top:var(--espaco-3); display:flex; flex-direction:column; gap:var(--espaco-1); }
.fim-home h2{ font-size:var(--tipo-h3); line-height:var(--altura-h3); }
.fim-home p{ font-size:var(--tipo-body-sm); line-height:var(--altura-body); color:var(--muted); max-width:62ch; }