/* ============================================================================
   OC MAPA — DESIGN SYSTEM DOS GUIAS DE CURSO (v1, 16/08/2026)

   Camada de SÍNTESE. Não substitui nada: entra DEPOIS do <style> doado pelo
   help center do MAPA IA e reescreve só o que precisa mudar.

   De onde vem cada parte:
     · chrome de leitura (topbar, nav, dark/light, seletor de idioma, TOC,
       breadcrumb, callouts, largura 760px)  → help center do MAPA IA
     · linguagem de dado e estado (métrica grande, barra de progresso, chip
       de status, cartela de checklist)      → dashboard de progresso
     · acento                                → cor do curso

   A IDEIA CENTRAL é o token --course. O help center trava o laranja OC em
   tudo que é navegação e estado. Aqui esse papel passa para a cor do CURSO,
   e o laranja recua para onde ele é marca (logo na topbar e no rodapé, CTA).
   Trocar ARQ por INT é trocar três linhas do bloco 1, nada mais.
   ============================================================================ */

/* 1) COR DO CURSO ---------------------------------------------------------- */
/* ARQ = azul. INT = laranja OC (--course:#ff612e, --course-deep:#e8481a).    */
:root{
  --course:#0094d6;
  --course-deep:#0077ad;
  --course-soft:rgba(0,148,214,.10);
  --course-ink:#0a5a80;        /* texto sobre fundo tonal do curso */

  /* estado, herdado do dashboard de progresso */
  --ok:#10b981;   --ok-soft:#ecfdf5;
  --wait:#8b5cf6; --wait-soft:#ede9fe;
  --stop:#ef4444; --stop-soft:#fef2f2;

  /* raios do dashboard, um pouco mais macios que os do help */
  --r:16px; --rs:10px;
}
:root[data-theme="dark"],
:root:not([data-theme="light"]) [data-theme="dark"]{
  --course:#3bb3ea;
  --course-deep:#6ac8f2;
  --course-soft:rgba(0,148,214,.18);
  --course-ink:#a9dcf5;
  --ok-soft:rgba(16,185,129,.14);
  --wait-soft:rgba(139,92,246,.14);
  --stop-soft:rgba(239,68,68,.14);
}

/* 2) REMAPEAMENTO DO ACENTO ------------------------------------------------ */
/* Navegação e estado passam do laranja OC para a cor do curso.               */
.topbar nav a.active{color:var(--course)}
.toc a.active{color:var(--course);border-left-color:var(--course)}
.crumb a:hover{color:var(--course)}
.lang a.on{background:var(--course)}
.lang-menu a .lang-check{color:var(--course)}
.etab.active{background:var(--course-soft);color:var(--course)}
.sec .num{color:var(--course)}
.steps>li::before{background:var(--course)}
.flow>li::before{background:var(--course)}
ul.clean>li::before{background:var(--course)}
.tag{color:var(--course)}
.badge.solid{background:var(--course)}
.card .ic{background:var(--course-soft);color:var(--course)}
.card .more{color:var(--course)}
.faq details[open] summary{color:var(--course)}
.faq summary::after{color:var(--course)}
:focus-visible{outline-color:var(--course)}
a{color:var(--course)}
a:hover{color:var(--course-deep)}

/* O laranja FICA onde é marca: .topbar .brand b, .foot .brand b e o CTA.
   Não sobrescrever esses três — é o que amarra o guia à Oficina Criativa. */

/* 2b) LAYOUT DE LEITURA COM SUMÁRIO ---------------------------------------- */
/* O corpo dos guias é coluna única. Aqui ela vira grid de duas colunas para
   o sumário ter contra o que grudar. Abaixo de 1080px o sumário sai de cena e
   o layout volta a ser exatamente o que era. */
.readgrid{
  max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) 232px;
  gap:64px;align-items:start;
}
.readgrid>.read{max-width:var(--read);margin:0;padding:0;min-width:0}
.readgrid>.toc{order:2}
.readgrid>.toc ul{max-height:calc(100vh - var(--topbar-h) - 120px);overflow-y:auto}
.readgrid>.toc a b{
  display:inline-block;min-width:22px;font-family:var(--mono);
  font-size:11.5px;color:var(--faint);font-weight:700;
}
.readgrid>.toc a.active b{color:var(--course)}
@media(max-width:1080px){
  .readgrid{display:block;max-width:none;padding:0}
  .readgrid>.toc{display:none}
  .readgrid>.read{max-width:var(--read);margin:0 auto;padding:0 var(--gutter)}
}

/* 3) MÉTRICA — do dashboard de progresso ----------------------------------- */
.metrics{
  display:grid;gap:12px;margin:1.6em 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.metric{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;
}
.metric .v{
  display:block;font-size:32px;font-weight:900;line-height:1;
  color:var(--fg);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.metric .k{
  display:block;margin-top:6px;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.metric.is-course .v{color:var(--course)}

/* 4) BARRA DE PROGRESSO ---------------------------------------------------- */
.bar{
  height:8px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;margin:.7em 0;
}
.bar>i{
  display:block;height:100%;border-radius:999px;
  background:var(--course);
  transition:width var(--dur-slow,.5s) var(--ease,ease);
}

/* 5) CHIP DE STATUS -------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1.5;
  background:var(--surface-2);color:var(--dim);
}
.chip::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.wait{background:var(--wait-soft);color:var(--wait)}
.chip.stop{background:var(--stop-soft);color:var(--stop)}

/* 6) CHECKLIST DE FECHAMENTO DE MÓDULO ------------------------------------- */
/* O item que dá nome ao produto: "checklist para fechar cada etapa".         */
.check{
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--course);
  border-radius:var(--rs);padding:18px 20px;margin:2em 0;
}
.check>.t{
  display:block;font-size:12.5px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--course);margin-bottom:.8em;
}
.check ul{list-style:none;padding:0;margin:0}
.check li{
  position:relative;padding-left:30px;margin:.55em 0;
  line-height:1.55;color:var(--dim);
}
.check li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--line-2);background:var(--surface);
}
.check li::after{
  content:"";position:absolute;left:6px;top:.52em;
  width:5px;height:9px;border:solid var(--course);
  border-width:0 2px 2px 0;transform:rotate(45deg);
  opacity:0;transition:opacity var(--dur-fast,.15s) var(--ease,ease);
}
.check li.done{color:var(--fg)}
.check li.done::before{border-color:var(--course);background:var(--course-soft)}
.check li.done::after{opacity:1}

/* 7) IMPRESSÃO ------------------------------------------------------------- */
/* Guia de execução é material que o aluno imprime e deixa do lado do teclado. */
@media print{
  .topbar,.toc,.foot,.theme-toggle,.lang,.lang-menu{display:none!important}
  body{background:#fff;font-size:11pt}
  .sec{break-inside:avoid}
  .check{break-inside:avoid;border-left-width:2px}
  a{color:inherit;text-decoration:none}
}