/* ══════════════════════════════════════════════════════════════
   SUPORTE · POP — base de conhecimento embutida no painel
   Todo o CSS é escopado em #s-suporte. Os tokens próprios da POP
   (--blue, --ink, --muted, --line…) são remapeados para os tokens
   do painel (--purple, --txt, --txt2, --border…), por isso a seção
   segue automaticamente o tema do painel (claro/escuro).
══════════════════════════════════════════════════════════════ */
#s-suporte{
  --blue:var(--purple); --blue-deep:var(--purple);
  --blue-wash:var(--purple-l); --blue-tint:var(--purple-xl);
  --ink:var(--txt); --muted:var(--txt2); --faint:var(--txt3);
  --line:var(--border); --line-soft:var(--border);
  --panel:var(--surface);
  --good:var(--ok); --good-wash:var(--ok-l);
  --warn-wash:var(--warn-l);
  --crit:var(--err); --crit-wash:var(--err-l);
  --font:var(--ff); --mono:var(--fm);
  --shadow-lg:var(--shadow-md);
  --surface-2:rgba(255,255,255,.06);   /* fill "inset" no escuro */
}
html.light #s-suporte{ --surface-2:#F1F3F7; }

/* rolagem suave da área principal (para os âncoras "comece por aqui" + voltar ao topo) */
.main{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.main{scroll-behavior:auto}}

/* ── BLINDAGEM contra classes globais do painel ──
   O Overview usa .node (position:absolute) e .ic (caixa 36×36 com fundo/borda)
   na sua arquitetura navegável. Esses nomes colidem com os desta base de
   conhecimento, então neutralizamos o que vaza (posição, caixa do ícone). */
#s-suporte .node{position:static;z-index:auto;cursor:default;transition:none}
#s-suporte .node::after{display:none}
#s-suporte .node:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow)}
#s-suporte .node.brain,#s-suporte .node.brain:hover{border-color:var(--purple)}
#s-suporte .ic{width:auto;height:auto;background:none;border:0;border-radius:0;place-items:initial}
#s-suporte svg.ic{width:1em;height:1em;background:none;border:0;display:inline-block;place-items:initial}

/* base */
#s-suporte h1,#s-suporte h2,#s-suporte h3,#s-suporte h4{margin:0;font-weight:700;letter-spacing:-.02em}
#s-suporte p{margin:0}
#s-suporte a{color:var(--purple);text-decoration:none}
#s-suporte a:hover{text-decoration:underline}
#s-suporte code{font-family:var(--fm);font-size:.86em}
#s-suporte .mono{font-family:var(--fm)}
#s-suporte .tag-code{font-family:var(--fm);font-size:.84em;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;color:var(--txt);white-space:nowrap}
#s-suporte :focus-visible{outline:2.5px solid var(--purple);outline-offset:2px;border-radius:6px}
#s-suporte svg.ic{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
#s-suporte .wrap{max-width:none;margin:0;padding:0}

/* A animação padrão de .section (fadeIn) usa translateY = um transform que
   fica no elemento e quebra o position:sticky da top bar (ela passa a grudar
   deslocada, com conteúdo aparecendo acima). Trocamos por um fade sem
   transform, exclusivo desta seção. */
#s-suporte{animation:suporteFade .2s ease}
@keyframes suporteFade{from{opacity:0}to{opacity:1}}

/* top bar interna — navegação por seções (sticky, como na página do doc).
   O `.main` tem padding-top e o overflow deixa o conteúdo passar por cima dessa
   faixa; por isso o `top` negativo (= -padding-top) faz a barra grudar RENTE ao
   topo, sem vão. Os valores acompanham o padding responsivo do .main. */
#s-suporte .kbnav{
  position:sticky; top:-24px; z-index:25;
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  margin:0 0 18px; padding:9px 2px;
  border-bottom:1px solid var(--border);
  background:var(--surface-solid);
}
@media (max-width:768px){#s-suporte .kbnav{top:-16px}}
@media (max-width:420px){#s-suporte .kbnav{top:-12px}}
html:not(.light) #s-suporte .kbnav{
  background:rgba(15,13,24,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
html.light #s-suporte .kbnav{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
#s-suporte .kbnav-link{
  font-size:13px; font-weight:600; color:var(--txt2);
  padding:7px 13px; border-radius:9px; text-decoration:none;
  white-space:nowrap; cursor:pointer; transition:color .14s,background .14s;
}
#s-suporte .kbnav-link:hover{color:var(--txt);background:var(--purple-xl);text-decoration:none}
#s-suporte .kbnav-link.active{color:var(--purple);background:var(--purple-l)}

/* voltar ao topo — widget flutuante; a opacidade é controlada por JS conforme a rolagem */
#s-suporte .kbtop-float{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; background:var(--purple);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(78,168,255,.22);
  cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .12s linear, transform .16s ease;
}
#s-suporte .kbtop-float:hover{transform:translateY(-3px)}
#s-suporte .kbtop-float:active{transform:translateY(-1px)}
#s-suporte .kbtop-float svg{width:20px;height:20px;display:block}
html.light #s-suporte .kbtop-float{box-shadow:0 10px 26px rgba(0,113,227,.30)}
@media (max-width:768px){#s-suporte .kbtop-float{right:16px;bottom:20px;width:42px;height:42px}}

/* busca (hero) */
#s-suporte .kbhero{margin:0 0 4px}
#s-suporte .kbsearch{position:relative;max-width:640px}
#s-suporte .kbsearch .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint);display:flex}
#s-suporte .kbsearch .si svg{width:18px;height:18px}
#s-suporte #kbSearch{width:100%;font-family:var(--ff);font-size:15px;padding:13px 16px 13px 44px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--txt);box-shadow:var(--shadow)}
#s-suporte #kbSearch::placeholder{color:var(--faint)}
#s-suporte #kbSearch:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 3px var(--purple-l),var(--shadow)}
#s-suporte .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
#s-suporte .chips small{color:var(--faint);font-size:12px;margin-right:2px}
#s-suporte .qchip{font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--txt2);cursor:pointer;font-family:var(--ff);transition:all .14s}
#s-suporte .qchip:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-xl)}
#s-suporte #kbCount{display:block;margin-top:12px;font-size:12.5px;color:var(--faint);font-weight:500;min-height:15px}

/* seções internas */
#s-suporte section{padding:26px 0;border-top:1px solid var(--border);scroll-margin-top:60px}
#s-suporte .wrap>section:first-of-type{border-top:none;padding-top:14px}
#s-suporte .sec-head{margin-bottom:18px}
#s-suporte .sec-head .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);display:flex;align-items:center;gap:8px}
#s-suporte .sec-head h2{font-size:clamp(19px,3vw,25px);margin-top:9px;color:var(--txt)}
#s-suporte .sec-head p{color:var(--txt2);margin-top:7px;max-width:70ch}

/* cards genéricos */
#s-suporte .grid{display:grid;gap:14px}
@media(min-width:720px){#s-suporte .g2{grid-template-columns:1fr 1fr}#s-suporte .g3{grid-template-columns:repeat(3,1fr)}}
#s-suporte .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
#s-suporte .card h3{font-size:16px;margin-bottom:6px;color:var(--txt)}
#s-suporte .card p{color:var(--txt2);font-size:14px}
#s-suporte .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--purple-l);color:var(--purple)}

/* whatis */
#s-suporte .whatis{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:820px){#s-suporte .whatis{grid-template-columns:1.4fr 1fr}}
#s-suporte .whatis .def{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
#s-suporte .whatis .def h2{font-size:22px;color:var(--txt)}
#s-suporte .whatis .def p{color:var(--txt2);margin-top:12px;font-size:15px}
#s-suporte .quote{border-left:3px solid var(--purple);background:var(--purple-xl);border-radius:0 10px 10px 0;padding:13px 16px;margin-top:16px;font-size:15px;font-weight:500;color:var(--txt)}
#s-suporte .stackchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#s-suporte .stackchips span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--txt2)}
#s-suporte .aside{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
#s-suporte .aside h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:12px}

/* atalhos "comece por aqui" */
#s-suporte .startlist{display:grid;gap:8px}
#s-suporte .startlink{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);text-decoration:none;color:var(--txt);transition:border-color .15s,background .15s,transform .1s}
#s-suporte .startlink:hover{border-color:var(--purple);background:var(--purple-xl);text-decoration:none}
#s-suporte .startlink:active{transform:translateY(1px)}
#s-suporte .startlink .n{flex:none;width:26px;height:26px;border-radius:7px;background:var(--purple-l);color:var(--purple);display:grid;place-items:center;font-weight:700;font-size:12.5px}
#s-suporte .startlink b{font-size:14px;font-weight:600;display:block;line-height:1.25;color:var(--txt)}
#s-suporte .startlink small{color:var(--txt2);font-size:12.5px;display:block;margin-top:1px}
#s-suporte .startlink .go{margin-left:auto;color:var(--faint);font-weight:700}
#s-suporte .startlink:hover .go{color:var(--purple)}

/* diagrama */
#s-suporte .diagram{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 18px;box-shadow:var(--shadow);overflow-x:auto}
#s-suporte .flowlabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:12px;display:flex;align-items:center;gap:8px}
#s-suporte .pipeline{display:flex;align-items:stretch;gap:8px;min-width:max-content}
#s-suporte .node{background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;padding:12px 15px;min-width:104px;text-align:center;box-shadow:var(--shadow)}
#s-suporte .node .nt{font-weight:700;font-size:14px;color:var(--txt)}
#s-suporte .node .nd{font-size:11px;color:var(--faint);margin-top:3px}
#s-suporte .node.brain{border-color:var(--purple);background:var(--purple-xl)}
#s-suporte .node.brain .nt{color:var(--purple)}
#s-suporte .arrow{align-self:center;color:var(--faint);font-size:20px;font-weight:700;flex:none}
#s-suporte .aux{margin-top:20px;padding-top:18px;border-top:1px dashed var(--border)}
#s-suporte .auxrow{display:flex;align-items:center;gap:12px;min-width:max-content}
#s-suporte .auxtrig{background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;padding:12px 15px;text-align:center;box-shadow:var(--shadow)}
#s-suporte .auxtrig .nt{font-weight:700;font-size:13px;color:var(--txt)}
#s-suporte .auxbrace{color:var(--faint);font-size:22px;flex:none}
#s-suporte .auxset{display:grid;gap:10px}
#s-suporte .auxset .auxtrig{min-width:150px;text-align:left;display:flex;gap:10px;align-items:center}
#s-suporte .auxset .auxtrig .ic{color:var(--purple);font-size:18px;flex:none;display:flex}
#s-suporte .loopnote{margin-top:16px;font-size:13px;color:var(--txt2);background:var(--purple-l);border-radius:10px;padding:11px 14px;display:flex;gap:9px;align-items:flex-start}
#s-suporte .loopnote .ic{color:var(--purple);flex:none;font-size:17px;margin-top:1px;display:flex}

/* tabelas */
#s-suporte .tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
#s-suporte table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
#s-suporte thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;background:var(--surface-2);padding:11px 15px;border-bottom:1px solid var(--border)}
#s-suporte tbody td{padding:12px 15px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--txt)}
#s-suporte tbody tr:last-child td{border-bottom:none}
#s-suporte tbody tr.kb-item:hover td{background:var(--purple-xl)}
#s-suporte td .sy{font-weight:600;color:var(--txt)}

/* badges de fluxo */
#s-suporte .flowbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px;white-space:nowrap}
#s-suporte .fb-brain{background:var(--purple-l);color:var(--purple)}
#s-suporte .fb-mcp{background:var(--ok-l);color:var(--ok)}
#s-suporte .fb-dtf{background:var(--warn-l);color:var(--warn)}
#s-suporte .fb-fup{background:rgba(139,110,240,.18);color:#b7a6f2}
#s-suporte .fb-cfg{background:var(--surface-2);color:var(--txt2)}
html.light #s-suporte .fb-fup{background:#efe9fb;color:#6d4bd0}

/* artigos */
#s-suporte .articles{display:grid;gap:12px}
#s-suporte .article{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0;box-shadow:var(--shadow);overflow:hidden}
#s-suporte .article .ah{display:flex;align-items:flex-start;gap:14px;padding:16px 18px}
#s-suporte .article .aicon{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--purple-l);color:var(--purple)}
#s-suporte .article .aicon.warn{background:var(--warn-l);color:var(--warn)}
#s-suporte .article .aicon.crit{background:var(--err-l);color:var(--err)}
#s-suporte .article .aicon.good{background:var(--ok-l);color:var(--ok)}
#s-suporte .article h3{font-size:16px;color:var(--txt)}
#s-suporte .article .sym{color:var(--txt2);font-size:13px;margin-top:3px}
#s-suporte .article .body{padding:0 18px 16px 70px}
#s-suporte .steps{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:s}
#s-suporte .steps li{position:relative;padding-left:30px;font-size:14px;color:var(--txt)}
#s-suporte .steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:6px;background:var(--purple);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
#s-suporte .steps li .lbl{color:var(--txt2)}
#s-suporte .callout{margin-top:14px;font-size:13.5px;color:var(--txt2);background:var(--surface-2);border-radius:10px;padding:11px 14px;border-left:3px solid var(--purple)}
#s-suporte .callout.warn{border-left-color:var(--warn);background:var(--warn-l)}

/* mini-fluxo (pré-processamento → fila) */
#s-suporte .mflow{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px 16px 8px;margin:6px 0 18px;overflow-x:auto;box-shadow:var(--shadow)}
#s-suporte .mflow-head{font-size:12.5px;font-weight:700;color:var(--txt2);margin-bottom:12px;display:flex;align-items:center;gap:8px;white-space:nowrap}
#s-suporte .mtag{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.06em;background:var(--purple-l);color:var(--purple);padding:2px 7px;border-radius:6px}
#s-suporte .mrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px dashed var(--border);min-width:max-content}
#s-suporte .mrow:first-of-type{border-top:none}
#s-suporte .mcond{font-family:var(--fm);font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 8px;color:var(--txt);flex:none;min-width:44px;text-align:center}
#s-suporte .marrow{color:var(--faint);font-weight:700;flex:none}
#s-suporte .mnode{background:var(--surface-2);border:1.5px solid var(--border);border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;flex:none;box-shadow:var(--shadow);color:var(--txt)}
#s-suporte .mnode.mif{border-color:var(--warn);background:var(--warn-l);color:var(--warn)}
#s-suporte .mdest{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;flex:none;white-space:nowrap}
#s-suporte .mdest.fila{background:var(--purple-l);color:var(--purple)}
#s-suporte .mdest.atend{background:var(--ok-l);color:var(--ok)}
#s-suporte .msplit{display:inline-flex;flex-direction:column;gap:6px}
#s-suporte .msplit .mline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);font-weight:600}
#s-suporte .msplit .mk{font-family:var(--fm);color:var(--faint);font-size:11px}

/* badges de máquinas */
#s-suporte .mbadge{font-family:var(--fm);font-weight:700;font-size:10.5px;padding:2px 7px;border-radius:999px;line-height:1;white-space:nowrap;vertical-align:1px}
#s-suporte .mbadge.b7{background:var(--purple-l);color:var(--purple)}
#s-suporte .mbadge.b1{background:var(--surface-2);color:var(--txt2);border:1px solid var(--border)}
#s-suporte .dots{display:inline-flex;gap:3px;vertical-align:middle}
#s-suporte .dots i{width:6px;height:6px;border-radius:50%;background:var(--purple);display:inline-block}
#s-suporte .dots.one i{background:var(--faint)}
#s-suporte .mcell{display:flex;align-items:center;gap:9px;white-space:nowrap}
#s-suporte .grouprow td{background:var(--surface-2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 15px}
#s-suporte .legend{font-size:13px;color:var(--faint);font-style:italic;margin-top:12px}

/* glossário */
#s-suporte .gloss{display:grid;gap:12px}
@media(min-width:720px){#s-suporte .gloss{grid-template-columns:1fr 1fr}}
#s-suporte .term{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
#s-suporte .term dt{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--txt)}
#s-suporte .term dd{margin:5px 0 0;color:var(--txt2);font-size:13.5px}

/* vazio + rodapé */
#s-suporte .empty{display:none;text-align:center;padding:40px 0;color:var(--txt2)}
#s-suporte .empty .big{font-size:40px}
#s-suporte .kbfoot{border-top:1px solid var(--border);padding:22px 0 8px;margin-top:8px;color:var(--faint);font-size:13px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#s-suporte .kbfoot b{color:var(--txt2)}
#s-suporte .kbfoot p{max-width:70ch}
#s-suporte .totop{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--txt2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--ff);transition:all .14s}
#s-suporte .totop:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-xl)}