/* Tutorial RodFiscal TMS — índice da página à esquerda, conteúdo em coluna larga (os prints precisam de espaço).
   Verde de placa de rodovia como cor da marca; laranja dos números = o mesmo laranja das marcações nos prints. */
:root {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface-2: #ecf0ed;
  --fg: #17201c;
  --muted: #55625b;
  --line: #d6dfd9;
  --accent: #0d6a44;
  --accent-soft: #e0f0e7;
  --marca: #ff5a1f;
  --marca-soft: #ffe9df;
  --warn: #8a5a00;
  --warn-soft: #fbf0d6;
  --danger: #a32d2d;
  --danger-soft: #f8e3e1;
  --info: #1f5a8c;
  --info-soft: #e3eef7;
  --sombra: 0 1px 2px rgba(16, 32, 24, .06), 0 8px 24px rgba(16, 32, 24, .08);
  --font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101512; --surface: #161d19; --surface-2: #1d2621; --fg: #e4ebe7; --muted: #9aa8a0; --line: #2b3630;
    --accent: #4fc28d; --accent-soft: #163225; --marca: #ff7a45; --marca-soft: #3a2116; --warn: #f0b84a; --warn-soft: #33290f;
    --danger: #f08b80; --danger-soft: #3a1c1a; --info: #7fb6e6; --info-soft: #172a3a; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101512; --surface: #161d19; --surface-2: #1d2621; --fg: #e4ebe7; --muted: #9aa8a0; --line: #2b3630;
  --accent: #4fc28d; --accent-soft: #163225; --marca: #ff7a45; --marca-soft: #3a2116; --warn: #f0b84a; --warn-soft: #33290f;
  --danger: #f08b80; --danger-soft: #3a1c1a; --info: #7fb6e6; --info-soft: #172a3a; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--font-body); }
a { color: var(--accent); }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- topo ---------- */
.topo { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.topo-in { max-width: 1320px; margin: 0 auto; padding-inline: 24px; display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap; }
.marca-site { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 700 15px var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.placa { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--accent); color: var(--surface); font-size: 16px; }
.paginas { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.paginas a { display: block; padding: 6px 11px; border-radius: 7px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.paginas a:hover { background: var(--surface-2); color: var(--fg); }
.paginas a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 760px) { .topo { position: static; } .topo-in { padding-inline: 16px; padding-block: 10px; } }

/* ---------- página ---------- */
.pagina { max-width: 1320px; margin: 0 auto; padding-inline: 24px; padding-block: 0 72px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; }
@media (max-width: 980px) { .pagina { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 16px; } }
nav.indice { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; padding-block: 30px 12px; font-size: 14.5px; }
nav.indice h2 { font: 600 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
nav.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
nav.indice a { display: block; padding: 5px 10px; border-radius: 6px; border-left: 2px solid transparent; color: var(--fg); text-decoration: none; line-height: 1.35; }
nav.indice a:hover { background: var(--surface-2); }
nav.indice a.atual { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 980px) { nav.indice { position: static; max-height: none; padding-block: 16px 0; } }
nav.indice summary { cursor: pointer; font: 600 15px var(--font-body); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
nav.indice details[open] summary { margin-bottom: 8px; }

main { min-width: 0; padding-block: 30px 0; }
.cabeca { padding-block: 6px 26px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rotulo { font: 600 12.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
h1 { font: 700 clamp(30px, 4.4vw, 44px)/1.08 var(--font-display); margin: 0 0 10px; text-wrap: balance; }
.lead { margin: 0; color: var(--muted); font-size: 18px; max-width: 68ch; }
.para-quem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.papel { font: 600 12.5px var(--font-body); padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

section.passo { padding-block: 34px 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
section.passo:last-of-type { border-bottom: 0; }
h2.titulo { font: 700 27px/1.15 var(--font-display); margin: 0 0 6px; text-wrap: balance; }
h3 { font: 700 20px/1.2 var(--font-display); margin: 26px 0 6px; }
p, li { max-width: 72ch; }
p { margin: 8px 0; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }

/* Lista que acompanha o print: o número é o mesmo da marcação na imagem */
ol.marcas { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 9px; }
ol.marcas > li { position: relative; padding-left: 40px; max-width: 74ch; }
ol.marcas > li > .n, .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marca); color: #fff; font: 700 14px var(--font-body); box-shadow: 0 0 0 2px var(--surface); }
ol.marcas > li > .n { position: absolute; left: 0; top: 0; }
.n.mini { width: 21px; height: 21px; font-size: 12px; vertical-align: 1px; }

/* Sequência (sem marcação no print) */
ol.seq { counter-reset: s; list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 9px; }
ol.seq > li { counter-increment: s; position: relative; padding-left: 40px; max-width: 74ch; }
ol.seq > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 14px/26px var(--font-display); text-align: center; }

figure.print { margin: 16px 0 22px; max-width: 1040px; }
figure.print button { all: unset; display: block; cursor: zoom-in; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sombra); background: var(--surface); line-height: 0; }
figure.print button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
figure.print.pequeno { max-width: 560px; }
figure.print.medio { max-width: 760px; }
figure.print img { display: block; width: 100%; height: auto; }
figure.print figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }

.caminho { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 500 14px var(--font-body); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.caminho b { font-weight: 600; }
.btn { display: inline-block; font: 600 14px var(--font-body); border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 0 7px; white-space: nowrap; }
kbd { font: 500 12.5px var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
code { font: 500 13.5px var(--font-mono); background: var(--surface-2); border-radius: 4px; padding: 0 4px; }

.aviso { border-radius: var(--r); padding: 12px 16px; margin: 16px 0; max-width: 78ch; background: var(--info-soft); }
.aviso > strong:first-child { display: block; font: 700 15.5px var(--font-display); letter-spacing: .02em; color: var(--info); margin-bottom: 2px; }
.aviso.atencao { background: var(--warn-soft); } .aviso.atencao > strong:first-child { color: var(--warn); }
.aviso.perigo { background: var(--danger-soft); } .aviso.perigo > strong:first-child { color: var(--danger); }
.aviso p { margin: 4px 0; }

.tabela { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); max-width: 860px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12.5px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

.cadeia { display: flex; flex-wrap: wrap; margin: 16px 0; max-width: 860px; }
.elo { flex: 1 1 160px; background: var(--surface); border: 1px solid var(--line); padding: 11px 14px; min-width: 0; }
.elo + .elo { border-left: 0; }
.elo:first-child { border-radius: var(--r) 0 0 var(--r); } .elo:last-child { border-radius: 0 var(--r) var(--r) 0; }
.elo b { display: block; font: 700 18px var(--font-display); }
.elo small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.elo .ordem { font: 700 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 620px) { .elo { flex-basis: 100%; border-left: 1px solid var(--line) !important; border-radius: 0 !important; } .elo + .elo { border-top: 0; } .elo:first-child { border-radius: var(--r) var(--r) 0 0 !important; } .elo:last-child { border-radius: 0 0 var(--r) var(--r) !important; } }

details.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin: 8px 0; max-width: 860px; }
details.faq summary { cursor: pointer; padding: 11px 14px; font-weight: 600; list-style: none; display: flex; gap: 10px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+"; font: 700 16px var(--font-mono); color: var(--accent); flex: none; width: 12px; }
details.faq[open] summary::before { content: "–"; }
details.faq > div { padding: 0 16px 12px 38px; }

/* ---------- capa ---------- */
.capa { max-width: 1320px; margin: 0 auto; padding-inline: 24px; padding-block: 44px 72px; }
@media (max-width: 760px) { .capa { padding-inline: 16px; padding-block: 26px 56px; } }
.capa h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: 18ch; }
.capa .lead { font-size: 19px; }
.capa-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 8px 34px; }
@media (max-width: 980px) { .capa-grade { grid-template-columns: minmax(0, 1fr); } }
.capa-print { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sombra); line-height: 0; }
.trilhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 22px 0 36px; }
.trilha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; min-width: 0; }
.trilha h3 { margin: 0 0 6px; font-size: 19px; }
.trilha p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.trilha ol { margin: 0; padding-left: 20px; font-size: 15px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cartao { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .15s, transform .15s; }
.cartao:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .cartao:hover { transform: translateY(-2px); } }
.cartao .mini { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cartao .mini img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.cartao .txt { padding: 12px 16px 16px; }
.cartao .txt span { font: 700 11.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cartao .txt b { display: block; font: 700 20px/1.2 var(--font-display); margin: 2px 0 4px; }
.cartao .txt p { margin: 0; font-size: 15px; color: var(--muted); }
.secao-titulo { font: 700 24px var(--font-display); margin: 8px 0 4px; }

/* ---------- rodapé e navegação entre páginas ---------- */
.anterior-proxima { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; max-width: 860px; }
.anterior-proxima a { display: block; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; min-width: 0; }
.anterior-proxima a:hover { border-color: var(--accent); }
.anterior-proxima small { display: block; color: var(--muted); font-size: 13px; }
.anterior-proxima b { font: 700 18px var(--font-display); }
.anterior-proxima .prox { text-align: right; grid-column: 2; }
.rodape { color: var(--muted); font-size: 14px; margin-top: 28px; }

/* ---------- ampliar print ---------- */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(8, 14, 11, .86); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.zoom[hidden] { display: none !important; }
.zoom img { max-width: min(1500px, 100%); max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; }
.zoom button { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 16px; font: 600 15px var(--font-body); background: #fff; color: #17201c; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; }