/* Cores da marca nos minicursos (Gui, 30/10/2026: "falta roxo, laranja e
   outras cores... dê aquele trato bem feito"). Carregado por último nas quatro
   edições. Paleta do Gui: laranja da marca, violeta da marca, ciano e amarelo
   da paleta do Palco. Letra escura sobre laranja, ciano e amarelo; branca
   sobre violeta. */
:root { --mc-laranja: #ff6a1f; --mc-violeta: #5b2ee6; --mc-ciano: #2fe3da; --mc-amarelo: #ffd84a; --mc-tinta: #16130f; }

/* ── 40 prompts e 25 prompts ── */

/* "Da conversa à ação": o bloco de abertura vira violeta. */
.intro { background: var(--mc-violeta) !important; border: 0 !important; color: #fff; box-shadow: 0 30px 60px -36px rgb(91 46 230 / .7); }
.intro h2, .intro h3 { color: #fff; }
.intro p, .intro .steps p { color: rgb(255 255 255 / .88) !important; }
.intro .edition { color: var(--mc-amarelo) !important; }
.intro .steps li { border-color: rgb(255 255 255 / .22) !important; }
.intro .steps li > span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mc-amarelo); color: var(--mc-tinta) !important; font-weight: 700; }

/* Cada categoria ganha uma cor, em rodízio: faixa no alto e o número dos prompts. */
.category { --mc-c: var(--mc-laranja); --mc-t: var(--mc-tinta); box-shadow: inset 0 6px 0 var(--mc-c) !important; }
.category:nth-of-type(4n+2) { --mc-c: var(--mc-violeta); --mc-t: #fff; }
.category:nth-of-type(4n+3) { --mc-c: var(--mc-ciano); }
.category:nth-of-type(4n+4) { --mc-c: var(--mc-amarelo); }
.category .prompt-number { background: var(--mc-c) !important; color: var(--mc-t) !important; border-color: transparent !important; font-weight: 700; }
.library-sidebar nav a.active, .library-sidebar nav a[aria-current="true"] { background: var(--mc-laranja); color: var(--mc-tinta); }

/* ── IA na prática ── */

/* Os quatro passos de "Antes de começar": um cartão de cada cor. */
.pratica-passos li { --mc-c: var(--mc-laranja); --mc-t: var(--mc-tinta); background: var(--mc-c) !important; color: var(--mc-t) !important; border: 0 !important; box-shadow: 0 18px 34px -24px rgb(22 19 15 / .5); }
.pratica-passos li:nth-child(2) { --mc-c: var(--mc-violeta); --mc-t: #fff; }
.pratica-passos li:nth-child(3) { --mc-c: var(--mc-ciano); }
.pratica-passos li:nth-child(4) { --mc-c: var(--mc-amarelo); }
.pratica-passos li h3, .pratica-passos li p, .pratica-passos li .step-number { color: inherit !important; }
.pratica-passos li mark { background: var(--mc-tinta); color: #fff; }
.pratica-passos li:nth-child(2) mark { background: var(--mc-amarelo); color: var(--mc-tinta); }

/* O comando: moldura violeta, para ser a coisa mais à vista de cada lição. */
.pratica-cmd { border: 2px solid var(--mc-violeta) !important; box-shadow: 0 22px 40px -30px rgb(91 46 230 / .8); }
.pratica-cmd-topo .micro:first-child { color: var(--mc-violeta) !important; font-weight: 700; }
.pratica-copiar { background: var(--mc-violeta) !important; color: #fff !important; border-color: var(--mc-violeta) !important; }
.pratica-depois { border-left-color: var(--mc-ciano) !important; background: rgb(47 227 218 / .14); padding: 12px 16px !important; border-radius: 0 12px 12px 0; }
.pratica-indice a span { color: var(--mc-violeta); font-weight: 700; }

/* ── Da ideia ao experimento ── */

/* Painel das fichas: herdava o branco do tema escuro antigo (letra branca
   sobre creme). Vira um bloco violeta com campos brancos. */
.tutorial-experiment .fill-section {
  --text: #fff; --muted: rgb(255 255 255 / .82); --lms-body: rgb(255 255 255 / .86); --accent: var(--mc-amarelo); --line: rgb(255 255 255 / .22); --line-2: rgb(255 255 255 / .3);
  background: var(--mc-violeta) !important; color: #fff; border: 0 !important; box-shadow: 0 30px 60px -36px rgb(91 46 230 / .7) !important;
}
.tutorial-experiment .fill-section h3, .tutorial-experiment .fill-section .worksheet > summary { color: #fff; }
.tutorial-experiment .fill-section > p, .tutorial-experiment .fill-section .worksheet-body > p, .tutorial-experiment .fill-section small { color: rgb(255 255 255 / .82); }
.tutorial-experiment .fill-section .worksheet-fields label { color: #fff; }
.tutorial-experiment .fill-section .worksheet-fields textarea { background: #fff; color: var(--mc-tinta); border-color: transparent; }
.tutorial-experiment .fill-section .worksheet > summary > span:last-child { color: var(--mc-amarelo); }
.tutorial-experiment .fill-section #download-filled { background: var(--mc-amarelo) !important; color: var(--mc-tinta) !important; border-color: var(--mc-amarelo) !important; }
.tutorial-experiment .fill-section .text-link, .tutorial-experiment .fill-section .copy-status { color: var(--mc-amarelo) !important; }
.tutorial-experiment .fill-section :focus-visible { outline-color: var(--mc-amarelo); }

/* As quatro etapas: número em círculo colorido. */
.tutorial-experiment .step { --mc-c: var(--mc-laranja); --mc-t: var(--mc-tinta); }
.tutorial-experiment .step:nth-child(2) { --mc-c: var(--mc-violeta); --mc-t: #fff; }
.tutorial-experiment .step:nth-child(3) { --mc-c: var(--mc-ciano); }
.tutorial-experiment .step:nth-child(4) { --mc-c: var(--mc-amarelo); }
.tutorial-experiment .step .step-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mc-c); color: var(--mc-t) !important; font-weight: 700; padding: 0 !important; }
.tutorial-experiment .tool { box-shadow: inset 0 6px 0 var(--mc-ciano); }
.tutorial-experiment .tool:nth-child(2) { box-shadow: inset 0 6px 0 var(--mc-amarelo); }
.tutorial-experiment .prompt-box { border: 2px solid var(--mc-violeta) !important; }

/* Barra das categorias (40 e 25 prompts): grudava a 28 px do topo, por baixo
   do cabeçalho fixo do site (menu + Conteúdos, 140 px), e a parte de cima
   sumia (alfinete do Gui, 30/10/2026). Agora gruda logo abaixo dele e rola por
   dentro quando a tela é baixa. Só vale onde ela é fixa (no celular é estática). */
.library-sidebar { top: 164px; max-height: calc(100vh - 184px); overflow-y: auto; overscroll-behavior: contain; }
html { scroll-padding-top: 160px; }