/* Gerado por gerar-site.py — não edite aqui, edite o script. */
/* light-dark() resolve pelo color-scheme, então os dois temas cabem numa lista só
   e o botão só precisa trocar o color-scheme. Sem JS, cai no tema do sistema. */
:root{
  color-scheme:light dark;
  --bg:light-dark(#f7f8fa,#0f1217);
  --card:light-dark(#fff,#171b22);
  --ink:light-dark(#16191f,#e7ebf1);
  --muted:light-dark(#5f6b7a,#96a0b0);
  --line:light-dark(#e3e7ed,#262c36);
  --accent:light-dark(#1a56db,#8ab0ff);
  --accent-suave:light-dark(#eaf0ff,#1a2233);
  --code-bg:light-dark(#f0f2f5,#1b2029);
  --sidebar:light-dark(#fbfcfd,#131720);
}
:root[data-tema=claro]{color-scheme:light}
:root[data-tema=escuro]{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}

/* ─── Sidebar ─────────────────────────────────────── */
aside{position:fixed;top:0;left:0;width:272px;height:100vh;overflow-y:auto;
  background:var(--sidebar);border-right:1px solid var(--line);padding:22px 0 40px;z-index:20}
.marca{display:block;padding:0 20px 18px;margin-bottom:6px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.marca small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
aside .bloco{margin:20px 20px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
aside ul{list-style:none;margin:0;padding:0}
aside ul.topo{margin-top:4px}
aside a{display:flex;align-items:center;gap:9px;padding:7px 20px;color:var(--ink);
  text-decoration:none;font-size:14.5px;border-left:3px solid transparent}
aside a i{font-style:normal;font-size:15px;width:19px;text-align:center;flex:none}
aside a:hover{background:var(--accent-suave)}
aside a.ativo{background:var(--accent-suave);border-left-color:var(--accent);
  color:var(--accent);font-weight:600}

.botao-menu,.fundo-menu{display:none}

/* Botão de tema — fica na faixa da sidebar no desktop, vira canto direito no celular */
.botao-tema{position:fixed;top:14px;left:214px;width:36px;height:36px;z-index:22;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  font-size:15px;cursor:pointer;color:var(--ink)}
.botao-tema:hover{border-color:var(--accent)}
.botao-tema .i-escuro{display:none}
[data-tema=escuro] .botao-tema .i-claro{display:none}
[data-tema=escuro] .botao-tema .i-escuro{display:inline}

/* ─── Conteúdo ────────────────────────────────────── */
main{margin-left:272px;padding:44px 40px 72px;max-width:1180px}
article{max-width:800px}

h1{font-size:31px;line-height:1.25;letter-spacing:-.02em;margin:0 0 22px}
h2{font-size:22px;letter-spacing:-.01em;margin:44px 0 14px;padding-top:14px;
  border-top:1px solid var(--line)}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:17.5px;margin:30px 0 10px}
h4{font-size:15.5px;margin:22px 0 8px;color:var(--muted)}
p{margin:0 0 14px}
a{color:var(--accent)}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

ul,ol{margin:0 0 14px;padding-left:22px}
li{margin-bottom:5px}
li>ul,li>ol{margin-top:5px}

/* Blockquote — usado para as caixas de destaque do curso */
blockquote{margin:20px 0;padding:14px 18px;background:var(--card);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0}
blockquote>:last-child{margin-bottom:0}
blockquote h2,blockquote h3{margin-top:0;border:0;padding-top:0;font-size:17px}

/* Tabelas — o curso usa muitas; precisam rolar no celular */
.tabela-rolavel{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);
  border-radius:9px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
th{background:var(--bg);font-weight:650;font-size:13px;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* Código e os diagramas ASCII */
code{background:var(--code-bg);padding:2px 6px;border-radius:5px;
  font:13.5px/1.5 ui-monospace,"Cascadia Code",Consolas,monospace}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:9px;
  padding:15px 17px;overflow-x:auto;margin:0 0 18px}
pre code{background:0;padding:0;font-size:13px;line-height:1.55;white-space:pre}

/* Respostas dos exercícios */
details{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:13px 17px;margin:18px 0}
details[open]{padding-bottom:6px}
summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
details[open] summary::before{transform:rotate(90deg)}
details>:not(summary){margin-top:12px}

/* Checkboxes dos checklists (texto puro no md, viram marcadores) */
article input[type=checkbox]{margin-right:7px}

/* ─── Paginação ───────────────────────────────────── */
.paginacao{display:flex;justify-content:space-between;gap:14px;max-width:800px;
  margin:52px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.paginacao a{flex:1;max-width:47%;padding:13px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:9px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:14.5px}
.paginacao a:hover{border-color:var(--accent)}
.paginacao span{display:block;font-size:12px;font-weight:400;color:var(--muted);
  margin-bottom:3px}
.nav-prox{text-align:right}
.rodape{max-width:800px;margin-top:46px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px}

/* Índice de templates */
.cartoes{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cartoes a{display:flex;align-items:center;gap:11px;padding:17px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;
  color:var(--ink);font-weight:600}
.cartoes a:hover{border-color:var(--accent)}
.cartoes i{font-style:normal;font-size:21px}

/* ─── Mobile ──────────────────────────────────────── */
@media (max-width:900px){
  aside{transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.22)}
  #abrir-menu:checked~aside{transform:translateX(0)}
  #abrir-menu:checked~.fundo-menu{display:block;position:fixed;inset:0;
    background:rgba(0,0,0,.45);z-index:15}
  .botao-menu{display:flex;align-items:center;justify-content:center;
    position:fixed;top:12px;left:12px;width:42px;height:42px;z-index:25;
    background:var(--card);border:1px solid var(--line);border-radius:9px;
    font-size:19px;cursor:pointer;color:var(--ink)}
  .botao-tema{left:auto;right:12px;top:12px;width:42px;height:42px;z-index:25}
  main{margin-left:0;padding:66px 17px 56px}
  h1{font-size:25px}
  h2{font-size:19.5px}
  .paginacao{flex-direction:column}
  .paginacao a{max-width:100%}
  .nav-prox{text-align:left}
}
@media print{
  aside,.botao-menu,.botao-tema,.paginacao{display:none}
  main{margin:0;padding:0}
  details{page-break-inside:avoid}
  details[open] summary{display:none}
}