/* ============================================================
   Afinni — guia
   A mesma paleta e a mesma estrutura da aplicação: o guia é a
   app a explicar-se, não um documento à parte.
   ============================================================ */
:root{
  --topbar-h:56px;
  --sidebar-w:17rem;
  --toc-w:13.5rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 1.5rem)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.65 var(--fonte);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
.saltar{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.saltar:focus{left:.5rem;top:.5rem}

/* ---------------------------------------------------- barra de topo */
.topbar{
  position:fixed;inset:0 0 auto;height:var(--topbar-h);z-index:50;
  display:flex;align-items:center;gap:.75rem;padding:0 1rem;
  background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .marca{height:22px;width:auto;display:block}
.topbar .sep{width:1px;height:1.5rem;background:var(--line)}
.topbar .seccao{font-size:13px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.topbar .acoes{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.topbar .voltar{
  display:inline-flex;align-items:center;gap:.35rem;padding:6px 12px;font-size:13px;
  font-family:inherit;cursor:pointer;
  border:1px solid var(--line-2);border-radius:8px;color:var(--ink-2);background:#fff}
.topbar .voltar:hover{background:var(--brand-soft);color:var(--brand-ink);text-decoration:none}
.topbar .voltar[hidden]{display:none}
.idiomas{display:flex;border:1px solid var(--line-2);border-radius:20px;overflow:hidden}
.idiomas a{padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink-2);background:#fff}
.idiomas a:hover{background:var(--brand-soft);text-decoration:none}
.idiomas a[aria-current]{background:var(--brand-ink);color:#fff}

.menu-btn{display:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;
  background:#fff;cursor:pointer;padding:0;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  position:absolute;left:9px;width:16px;height:2px;background:var(--ink-2);content:'';border-radius:2px}
.menu-btn span{top:16px}
.menu-btn span::before{top:-5px;left:0}
.menu-btn span::after{top:5px;left:0}

/* ---------------------------------------------------- três colunas */
.pagina{
  display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  max-width:1560px;margin:0 auto;padding-top:var(--topbar-h)}

.sidebar,.toc{
  position:sticky;top:var(--topbar-h);align-self:start;
  max-height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:1.4rem 1rem}
.sidebar{border-right:1px solid var(--line)}
.toc{border-left:1px solid var(--line)}
.sidebar h2,.toc h2{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 .8rem}

.sidebar .parte{margin-bottom:1.1rem}
.sidebar .parte > a{
  display:flex;gap:.45rem;align-items:baseline;font-size:13.5px;font-weight:600;
  color:var(--ink);padding:.25rem 0}
.sidebar .parte > a .num{color:var(--brand);font-size:11.5px;min-width:1.4em}
.sidebar .parte > a:hover{color:var(--brand-ink);text-decoration:none}
.sidebar ol,.sidebar ul{list-style:none;margin:.1rem 0 0;padding:0 0 0 1.85rem}
.sidebar li a{display:block;padding:3px 0;font-size:13px;color:var(--ink-2)}
.sidebar li a:hover{color:var(--ink);text-decoration:none}
.sidebar li a.aqui{color:var(--brand-ink);font-weight:600}

.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:.3rem .7rem;font-size:12.5px;color:var(--ink-2);
  border-left:2px solid transparent;margin-left:-1px}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc a.aqui{color:var(--brand-ink);border-left-color:var(--brand);font-weight:600}

/* ---------------------------------------------------- artigo */
.artigo{padding:2rem 3rem 6rem;max-width:790px}
.artigo > header{margin-bottom:2.5rem}
.artigo h1{font-size:30px;letter-spacing:-.025em;margin:0 0 .4rem}
.artigo .entrada{font-size:16px;color:var(--ink-2);margin:0;line-height:1.6}
.parte-head{margin:3.4rem 0 1.6rem;padding-top:.6rem;border-top:2px solid var(--ink)}
.parte-head:first-of-type{margin-top:0}
.parte-head .num{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.parte-head h2{font-size:23px;letter-spacing:-.02em;margin:.15rem 0 .4rem}
.parte-head p{margin:0;color:var(--ink-2);font-size:14.5px}

.artigo section{scroll-margin-top:calc(var(--topbar-h) + 1rem)}
.artigo h3{font-size:17px;letter-spacing:-.01em;margin:2.2rem 0 .6rem}
.artigo h4{font-size:14px;margin:1.4rem 0 .3rem}
.artigo p,.artigo li{font-size:15px;line-height:1.68;color:#33403f}
.artigo ul,.artigo ol{padding-left:1.3rem;margin:.6rem 0}
.artigo li{margin-bottom:.35rem}
.artigo b,.artigo strong{color:var(--ink)}
code{font-family:var(--mono);font-size:13px;background:#eaeeed;padding:1px 5px;border-radius:4px}
kbd{font-family:var(--mono);font-size:12px;background:#fff;border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink);white-space:nowrap}

.passos{list-style:none;padding:0;counter-reset:p}
.passos > li{counter-increment:p;position:relative;padding-left:2.6rem;margin-bottom:1.2rem}
.passos > li::before{
  content:counter(p);position:absolute;left:0;top:.05rem;
  display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--brand-ink);color:#fff;font-size:12px;font-weight:700}
.passos > li > b{display:block;margin-bottom:.15rem}

table.tabela{width:100%;border-collapse:collapse;margin:.9rem 0 1.2rem;font-size:14px}
table.tabela th{text-align:left;background:#edf0ef;color:var(--ink-2);font-weight:600;
  padding:7px 10px;border:1px solid var(--line-2);font-size:12.5px}
table.tabela td{padding:7px 10px;border:1px solid var(--line);vertical-align:top}
table.tabela td:first-child{font-weight:500;white-space:nowrap}
table.tabela.larga td:first-child{white-space:normal}

.nota{border-left:3px solid var(--brand);background:#eef2f1;padding:.8rem 1rem;
  border-radius:0 8px 8px 0;margin:1.2rem 0;font-size:14px}
.nota b{display:block;margin-bottom:.2rem}
.nota.atencao{border-color:var(--warn);background:#fbf3e6}
.formula{font-family:var(--mono);font-size:13.5px;background:#fff;border:1px solid var(--line-2);
  border-radius:8px;padding:.7rem .9rem;margin:.8rem 0;color:var(--ink);line-height:1.5}
.exemplo{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin:1rem 0}
.exemplo h4{margin-top:0}

.legenda-cor{display:inline-block;width:11px;height:11px;border-radius:50%;
  vertical-align:-1px;margin-right:.3rem}
.legenda-linha{display:inline-block;width:22px;border-top:2.5px solid;vertical-align:4px;margin-right:.3rem}

/* ---------------------------------------------------- adaptação */
@media (max-width:1180px){
  .pagina{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .toc{display:none}
  .artigo{padding:2rem 2rem 5rem}
}
@media (max-width:820px){
  .pagina{grid-template-columns:1fr}
  .menu-btn{display:block}
  .topbar .sep,.topbar .seccao{display:none}
  .sidebar{
    position:fixed;top:var(--topbar-h);left:0;bottom:0;width:min(82vw,var(--sidebar-w));
    background:var(--panel);z-index:45;transform:translateX(-101%);transition:transform .18s;
    max-height:none}
  body.menu-aberto .sidebar{transform:none;box-shadow:0 0 40px rgba(31,42,42,.18)}
  .artigo{padding:1.5rem 1.2rem 4rem}
}
@media print{
  .topbar,.sidebar,.toc{display:none !important}
  .pagina{display:block;padding-top:0}
  .artigo{max-width:none;padding:0}
  .parte-head{break-before:page}
  .parte-head:first-of-type{break-before:auto}
}