/* ===================================================================
   Treinamentos · Cloudflare Lab Guide — TD SYNNEX Showcase (v8.42)
   1) Base + navegação + rodapé: mesmos tokens e regras do index.html
   2) Visualizador do guia: módulos recolhíveis, roteiro lateral
      minimizável, páginas 1:1 com camadas interativas (campos, links)
   =================================================================== */

/* ---------- 1. Base (espelho do showcase) ---------- */
:root {
  --td-cyan:#00c2d4; --td-cyan-2:#28d7e6; --bg:#041a20;
  --panel:rgba(10, 42, 52, 0.55); --panel-brd:rgba(255, 255, 255, 0.09);
  --cf-orange:#f6821f; --cf-orange-2:#faae40; --accent:#00c2d4;
  --green:#22c55e; --red:#ef4444; --text:#e6f2f4; --muted:#89a6ad;
  --radius:16px; --glass-blur:blur(14px);
  --tr-train:#a78bfa; --tr-train-2:#c4b5fd;              /* cor da aba Treinamentos */
  --tr-page-bg:#ffffff;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:84px }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *, *::before, *::after { animation:none !important; transition:none !important } }
body { font-family:'Segoe UI', -apple-system, sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1.6 }
body::before { content:''; position:fixed; inset:0; z-index:-2;
  background:radial-gradient(60vw 60vw at 85% -10%, rgba(0,194,212,.14), transparent 60%), radial-gradient(50vw 50vw at 8% 18%, rgba(0,194,212,.10), transparent 60%), radial-gradient(70vw 60vw at 50% 120%, rgba(246,130,31,.08), transparent 60%), var(--bg) }
a { color:inherit; text-decoration:none }
h1, h2, h3 { letter-spacing:-.02em; line-height:1.15 }
.container { max-width:1240px; margin:0 auto; padding:0 24px }
.mono { font-family:'JetBrains Mono', Consolas, monospace }
body.light { --bg:#f4f7f9; --panel:rgba(255,255,255,0.75); --panel-brd:rgba(15,23,42,0.10); --text:#0f2730; --muted:#51707a; --tr-train:#6d4fd6; --tr-train-2:#7c5ce6 }
body.light nav { background:rgba(255,255,255,0.8) }

.skip-link { position:absolute; left:12px; top:-100px; z-index:10000; padding:10px 16px; border-radius:10px; background:var(--td-cyan); color:#022; font-weight:700 }
.skip-link:focus, .skip-link:focus-visible { top:12px; outline:3px solid #fff; outline-offset:2px }
#scrollbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg, var(--td-cyan), var(--cf-orange)) }

nav { position:fixed; top:0; left:0; right:0; z-index:100; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 26px; background:rgba(4,26,32,0.82); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--panel-brd) }
.cobrand { display:flex; align-items:center; gap:14px; flex:none } .cobrand-link { text-decoration:none; cursor:pointer } .cobrand--foot { margin-bottom:14px } .foot-desc { font-size:.85rem; color:var(--muted); max-width:320px } .svg-defs { position:absolute } .build-ver { margin-top:8px; font-size:.72rem; opacity:.6; letter-spacing:.04em }
.tdx { display:flex; flex-direction:column; line-height:1; gap:4px }
.tdx .tdx-logo img { width:170px; height:auto; display:block }
.tdx .tdx-logo .tdx-dark { display:block } .tdx .tdx-logo .tdx-light { display:none }
body.light .tdx .tdx-logo .tdx-dark { display:none } body.light .tdx .tdx-logo .tdx-light { display:block }
.tdx .tdx-tag { font-size:.56rem; color:var(--td-cyan); letter-spacing:.16em; text-transform:uppercase; font-weight:600 }
@media(max-width:920px) { .tdx .tdx-tag { display:none } }
@media(max-width:560px) { .tdx .tdx-logo img { width:132px } }
.nav-links { display:flex; align-items:center; gap:2px }
.nav-links a { font-size:.8rem; color:var(--muted); padding:8px 12px; border-radius:9px; transition:.2s; white-space:nowrap; font-weight:500 }
.nav-links a:hover { color:var(--text); background:rgba(255,255,255,.06) }
.nav-links .sep { width:1px; height:18px; background:var(--panel-brd); margin:0 6px }
.nav-links a.nav-primary { color:var(--td-cyan); font-weight:700 }
.nav-links a.nav-lab { color:var(--cf-orange-2); font-weight:700; background:rgba(246,130,31,.1); border:1px solid rgba(246,130,31,.3) }
.nav-links a.nav-lab:hover { background:rgba(246,130,31,.2); color:var(--cf-orange-2) }
.nav-links a.nav-train { color:var(--tr-train-2); font-weight:700; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.32); margin-left:4px }
.nav-links a.nav-train:hover, .nav-links a.nav-train[aria-current="page"] { background:rgba(167,139,250,.22); color:var(--tr-train-2) }
body.light .nav-links a.nav-train { color:var(--tr-train) }
.nav-right { display:flex; align-items:center; gap:10px; flex:none }
.lang-switch { display:flex; gap:3px; background:var(--panel); border:1px solid var(--panel-brd); border-radius:10px; padding:3px }
.lang-btn { display:flex; align-items:center; gap:5px; padding:6px 9px; border-radius:7px; font-size:.76rem; font-weight:600; color:var(--muted); cursor:pointer; border:none; background:transparent; font-family:inherit; transition:.2s }
.lang-btn .flag svg { display:block; width:19px; height:13px; border-radius:2px }
.lang-btn.active { background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2)); color:#022 }
.theme-btn, .menu-toggle { width:36px; height:33px; border-radius:9px; border:1px solid var(--panel-brd); background:var(--panel); color:var(--text); cursor:pointer; font-size:1rem; flex:none }
.menu-toggle { display:none }
.nav-group { position:relative }
.nav-trig { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); padding:8px 12px; border-radius:9px; background:none; border:0; font-family:inherit; font-weight:500; cursor:pointer; transition:.2s; white-space:nowrap }
.nav-trig:hover, .nav-group.open .nav-trig { color:var(--text); background:rgba(255,255,255,.06) }
body.light .nav-trig:hover, body.light .nav-group.open .nav-trig { background:rgba(15,23,42,.05) }
.nav-trig .car { font-size:.58rem; opacity:.7; transition:.25s } .nav-group.open .nav-trig .car { transform:rotate(180deg) }
.nav-drop { position:absolute; top:calc(100% + 9px); left:0; min-width:210px; display:none; grid-template-columns:1fr; gap:2px; padding:8px; border-radius:13px; background:rgba(6,39,48,.98); border:1px solid var(--panel-brd); box-shadow:0 18px 44px -12px rgba(0,0,0,.6); backdrop-filter:var(--glass-blur); z-index:120 }
body.light .nav-drop { background:rgba(255,255,255,.98); box-shadow:0 18px 44px -14px rgba(15,23,42,.25) }
.nav-group.open .nav-drop { display:grid }
.nav-drop a { display:flex; align-items:center; gap:9px } .nav-drop .di { width:19px; text-align:center; opacity:.85; flex:none }
@media(max-width:1240px) {
  .nav-links { position:fixed; top:64px; right:12px; left:12px; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:rgba(6,39,48,.97); border:1px solid var(--panel-brd); border-radius:14px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s; max-height:80vh; overflow-y:auto }
  body.light .nav-links { background:rgba(255,255,255,.98) }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto }
  .nav-links a { padding:11px 14px; font-size:.9rem } .nav-links .sep { display:none }
  .nav-links a.nav-train { margin-left:0 }
  .menu-toggle { display:grid; place-items:center }
  .nav-group { width:100% } .nav-trig { width:100%; justify-content:space-between; padding:11px 14px; font-size:.9rem }
  .nav-drop { position:static; display:grid; max-height:0; overflow:hidden; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; transition:max-height .3s ease }
  .nav-group.open .nav-drop { max-height:420px; padding:4px 0 6px 12px }
  .nav-drop a { border-left:2px solid var(--panel-brd); border-radius:0 9px 9px 0 }
}

.btn { display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none; padding:15px 26px; border-radius:12px; font-size:.95rem; font-weight:600; transition:.22s; font-family:inherit }
.btn-primary { background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2)); color:#022; box-shadow:0 8px 30px rgba(0,194,212,.35) }
.btn-primary:hover { transform:translateY(-2px) }
.btn-ghost { background:var(--panel); border:1px solid var(--panel-brd); color:var(--text) }
.btn-ghost:hover { border-color:var(--td-cyan); color:var(--td-cyan) }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--td-cyan); margin-bottom:14px; padding:5px 12px; border-radius:8px; background:rgba(0,194,212,.08); border:1px solid rgba(0,194,212,.22) }
.sec-head { max-width:820px }
.sec-head h1 { font-size:clamp(1.8rem, 3.5vw, 2.7rem); font-weight:800; margin-bottom:14px }
.sec-head p { color:var(--muted); font-size:1.05rem }
.sec-head p b { color:var(--text) }
.card { background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius); backdrop-filter:var(--glass-blur); padding:26px; position:relative }

footer { padding:60px 0 40px; border-top:1px solid var(--panel-brd); margin-top:60px }
.foot-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.1fr; gap:30px }
@media(max-width:900px) { .foot-grid { grid-template-columns:1fr 1fr } }
@media(max-width:560px) { .foot-grid { grid-template-columns:1fr } }
.foot-grid h4 { font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px }
.foot-grid a { display:block; font-size:.85rem; color:var(--muted); padding:4px 0; transition:.2s } .foot-grid a:hover { color:var(--cf-orange-2) }
.foot-grid .td-col h4 { color:var(--td-cyan) }
.copyright { text-align:center; color:var(--muted); font-size:.8rem; margin-top:40px }
.credit { text-align:center; color:var(--td-cyan); font-size:.74rem; font-weight:600; margin-top:8px; opacity:.85 }
.build-ver { text-align:center; color:var(--muted) }
#backTop { position:fixed; bottom:26px; right:26px; z-index:280; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; font-weight:800; color:#022; border:0; cursor:pointer; background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2)); box-shadow:0 10px 30px -6px rgba(0,194,212,.6); opacity:0; pointer-events:none; transform:translateY(12px); transition:.3s }
#backTop.show { opacity:1; pointer-events:auto; transform:none } #backTop:hover { transform:translateY(-3px) scale(1.05) }
:is(a, button, input, select, summary):focus-visible { outline:3px solid var(--cf-orange-2); outline-offset:2px }
.tr-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ---------- 2. Cabeçalho da página ---------- */
.tr-head { padding:118px 0 34px }
.tr-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:34px }
.tr-stat { padding:16px 18px; border-radius:14px; background:var(--panel); border:1px solid var(--panel-brd); backdrop-filter:var(--glass-blur) }
.tr-stat .num { font-size:1.7rem; font-weight:800; line-height:1.1 } .tr-stat .num span { color:var(--td-cyan-2) }
.tr-stat .lbl { font-size:.8rem; color:var(--muted); margin-top:4px }
@media(max-width:900px) { .tr-stats { grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media(max-width:760px) { .tr-head { padding:96px 0 24px } }

/* ---------- 3. Barra de ferramentas ---------- */
.tr-body { padding-bottom:40px }
.tr-toolbar { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:24px; padding:22px 24px; margin-bottom:26px }
.tr-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.tr-domain__row { display:flex; gap:10px }
.tr-input { flex:1; min-width:0; padding:11px 14px; border-radius:11px; border:1px solid var(--panel-brd); background:rgba(0,0,0,.25); color:var(--text); font-size:.92rem }
body.light .tr-input { background:#fff }
.tr-input::placeholder { color:var(--muted); opacity:.8 }
.tr-input:focus { border-color:var(--td-cyan); outline:none; box-shadow:0 0 0 3px rgba(0,194,212,.2) }
.tr-help { font-size:.78rem; color:var(--muted); margin-top:8px }
.tr-msg { font-size:.82rem; font-weight:600; margin-top:6px; min-height:1.3em }
.tr-msg[data-state="ok"] { color:var(--green) } .tr-msg[data-state="error"] { color:var(--red) }
.tr-tools { display:grid; grid-template-columns:repeat(2, auto); gap:18px; align-content:start; justify-content:start }
.tr-btn { padding:11px 16px; font-size:.84rem; border-radius:11px; gap:7px }
.tr-btnrow { display:flex; gap:8px; flex-wrap:wrap }
@media(max-width:1000px) { .tr-toolbar { grid-template-columns:1fr } .tr-tools { grid-template-columns:1fr 1fr } }
@media(max-width:560px) { .tr-tools { grid-template-columns:1fr } .tr-domain__row { flex-direction:column } .tr-toolbar { padding:18px } }

/* ---------- 4. Layout: roteiro lateral + conteúdo ---------- */
.tr-layout { display:grid; grid-template-columns:300px minmax(0, 1fr); gap:26px; align-items:start }
.tr-layout[data-side-collapsed="true"] { grid-template-columns:72px minmax(0, 1fr) }
.tr-side { position:sticky; top:82px; max-height:calc(100vh - 100px); overflow:auto; padding:18px 16px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--panel-brd); backdrop-filter:var(--glass-blur); scrollbar-width:thin; transition:padding .2s }
.tr-side__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px }
.tr-side__title { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700 }
.tr-side__icon { font-size:1.05rem }
.tr-side__min { width:30px; height:30px; flex:none; border-radius:8px; border:1px solid var(--panel-brd); background:transparent; color:var(--muted); cursor:pointer; font-size:.95rem; line-height:1; transition:.2s }
.tr-side__min:hover { color:var(--text); border-color:var(--td-cyan) }

/* cartão "Você está em" */
.tr-now { display:grid; gap:8px; padding:14px 14px 12px; margin-bottom:16px; border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(0,194,212,.14), rgba(167,139,250,.12)); border:1px solid rgba(0,194,212,.3) }
.tr-now::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, var(--td-cyan), var(--tr-train)) }
body.light .tr-now { background:linear-gradient(135deg, rgba(0,194,212,.10), rgba(124,58,237,.08)); border-color:rgba(0,122,134,.28) }
.tr-now__kicker { font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--td-cyan-2) }
body.light .tr-now__kicker { color:#007a86 }
.tr-now__row { display:flex; align-items:center; gap:12px }
.tr-now__num { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; line-height:1; color:#031a1e;
  background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2)); box-shadow:0 6px 18px rgba(0,194,212,.3) }
.tr-now__num--intro { background:linear-gradient(135deg, var(--tr-train), var(--tr-train-2)); box-shadow:0 6px 18px rgba(167,139,250,.3) }
.tr-now__mod { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.tr-now__txt { min-width:0; display:grid; gap:2px }
.tr-now__title { font-size:1rem; font-weight:800; line-height:1.2 }
.tr-now__sub { font-size:.74rem; color:var(--muted); line-height:1.35 }
.tr-now__meta { display:flex; justify-content:space-between; align-items:baseline; font-size:.7rem; font-weight:700; color:var(--muted) }
.tr-now__pct { color:var(--td-cyan-2) } body.light .tr-now__pct { color:#007a86 }
.tr-progress { height:5px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden }
body.light .tr-progress { background:rgba(15,23,42,.1) }
.tr-progress__bar { height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, var(--td-cyan), var(--tr-train)); transition:width .35s ease }

/* stepper vertical */
.tr-route { list-style:none; display:grid; gap:0; position:relative }
.tr-stepper li { position:relative }
.tr-stepper li::before { content:""; position:absolute; left:26px; top:0; bottom:0; width:2px; background:var(--panel-brd); z-index:0 }
.tr-stepper li:first-child::before { top:50% } .tr-stepper li:last-child::before { bottom:50% }
.tr-stepper li[data-state="done"]::before { background:rgba(34,197,94,.55) }
.tr-stepper li[data-state="current"]::before { background:linear-gradient(180deg, rgba(34,197,94,.55) 50%, var(--panel-brd) 50%) }
.tr-route__item { position:relative; z-index:1; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:center; width:100%; padding:9px 10px 9px 8px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:background .2s, border-color .2s, transform .2s }
.tr-route__item:hover { background:rgba(255,255,255,.05); border-color:var(--panel-brd) }
body.light .tr-route__item:hover { background:rgba(15,23,42,.04) }
.tr-route__item:focus-visible { outline:2px solid var(--td-cyan); outline-offset:2px }
.tr-route__num { position:relative; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:1.05rem; line-height:1; background:var(--panel); border:2px solid var(--panel-brd); transition:.25s }
.tr-route__item:not([aria-current]):not([data-done="true"]) .tr-route__num .tr-route__n { filter:grayscale(1); opacity:.6 }
/* estados */
.tr-route__item[data-done="true"] .tr-route__num { background:rgba(34,197,94,.16); color:var(--green); border-color:rgba(34,197,94,.6) }
.tr-route__item[data-done="true"] .tr-route__num .tr-route__n { opacity:.75 }
.tr-route__item[data-done="true"] .tr-route__num::after { content:"✓"; position:absolute; right:-5px; bottom:-5px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; font-weight:900; color:#052e13; background:var(--green); border:2px solid var(--panel) }
.tr-route__item[data-done="true"] .tr-route__title { color:var(--muted) }
.tr-route__item[aria-current="step"] { background:rgba(0,194,212,.10); border-color:rgba(0,194,212,.4) }
.tr-route__item[aria-current="step"] .tr-route__num { background:var(--td-cyan); border-color:var(--td-cyan-2); transform:scale(1.08); box-shadow:0 0 0 4px rgba(0,194,212,.18); animation:tr-pulse 2.2s ease-out infinite }
.tr-route__item--intro[aria-current="step"] { background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.4) }
.tr-route__item--intro[aria-current="step"] .tr-route__num { background:var(--tr-train); border-color:var(--tr-train-2); box-shadow:0 0 0 4px rgba(167,139,250,.18) }
.tr-route__item--final[aria-current="step"] { background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.4) }
.tr-route__item--final[aria-current="step"] .tr-route__num { background:var(--green); border-color:#86efac; box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:none }
.tr-route__item--final[aria-current="step"] .tr-route__state { color:var(--green); border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.14) }
.tr-now__num--final { background:linear-gradient(135deg, #22c55e, #86efac); box-shadow:0 6px 18px rgba(34,197,94,.3) }
@keyframes tr-pulse { 0% { box-shadow:0 0 0 0 rgba(0,194,212,.45) } 70% { box-shadow:0 0 0 8px rgba(0,194,212,0) } 100% { box-shadow:0 0 0 0 rgba(0,194,212,0) } }
@media (prefers-reduced-motion:reduce) { .tr-route__item[aria-current="step"] .tr-route__num { animation:none } }
.tr-route__txt { min-width:0; display:grid; gap:3px; align-content:center }
.tr-route__title { font-size:.84rem; font-weight:700; line-height:1.3; display:flex; justify-content:space-between; align-items:flex-start; gap:8px }
.tr-route__title > span:first-child { min-width:0; overflow-wrap:anywhere }
.tr-route__state { flex:none; margin-top:1px; font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; line-height:1.4; border:1px solid var(--panel-brd); color:var(--muted); background:rgba(255,255,255,.03) }
.tr-route__item[data-done="true"] .tr-route__state { color:var(--green); border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.1) }
.tr-route__item[aria-current="step"] .tr-route__state { color:var(--td-cyan-2); border-color:rgba(0,194,212,.5); background:rgba(0,194,212,.14) }
body.light .tr-route__item[aria-current="step"] .tr-route__state { color:#007a86 }
.tr-route__item--intro[aria-current="step"] .tr-route__state { color:var(--tr-train-2); border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.14) }
body.light .tr-route__item--intro[aria-current="step"] .tr-route__state { color:var(--tr-train) }
.tr-route__sub { font-size:.72rem; color:var(--muted); line-height:1.35; display:grid; gap:2px }
.tr-route__sub > span:first-child { min-width:0; overflow-wrap:anywhere }
.tr-route__pages { font-size:.64rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); opacity:.75 }
.tr-route__pages:empty { display:none }
.tr-side__hint { font-size:.72rem; color:var(--muted); margin-top:14px; line-height:1.4; padding-top:12px; border-top:1px dashed var(--panel-brd) }
/* roteiro minimizado: só os marcadores do stepper */
.tr-layout[data-side-collapsed="true"] .tr-side { padding:14px 10px }
.tr-layout[data-side-collapsed="true"] .tr-side__txt,
.tr-layout[data-side-collapsed="true"] .tr-side__icon,
.tr-layout[data-side-collapsed="true"] .tr-route__txt { display:none }
.tr-layout[data-side-collapsed="true"] .tr-side__head { justify-content:center; margin-bottom:10px }
.tr-layout[data-side-collapsed="true"] .tr-route__item { grid-template-columns:36px; justify-content:center; padding:6px 6px }
.tr-layout[data-side-collapsed="true"] .tr-stepper li::before { left:24px }
.tr-layout[data-side-collapsed="true"] .tr-side__min span[aria-hidden] { display:inline-block; transform:rotate(180deg) }

@media(max-width:1000px) {
  .tr-layout, .tr-layout[data-side-collapsed="true"] { grid-template-columns:1fr }
  .tr-side { position:static; max-height:none }
  .tr-stepper li::before { display:none }
  .tr-layout[data-side-collapsed="true"] .tr-route { display:flex; flex-wrap:wrap; gap:6px }
  .tr-layout[data-side-collapsed="true"] .tr-side__head { justify-content:space-between }
  .tr-layout[data-side-collapsed="true"] .tr-side__txt { display:inline }
  .tr-layout[data-side-collapsed="true"] .tr-now { display:none }
}

/* ---------- 4b. Encerramento ---------- */
.tr-mod--final .tr-mod__num { background:linear-gradient(135deg, rgba(34,197,94,.26), rgba(34,197,94,.06)); border-color:rgba(34,197,94,.36) }
.tr-mod--final .tr-mod__kicker { color:var(--green) }
.tr-final { text-align:center; padding:34px 22px 26px; border-radius:18px; position:relative; overflow:hidden; margin-bottom:1.4em;
  background:radial-gradient(120% 140% at 50% 0%, rgba(34,197,94,.18), transparent 60%), linear-gradient(135deg, rgba(0,194,212,.10), rgba(167,139,250,.10)); border:1px solid rgba(34,197,94,.3) }
body.light .tr-final { background:radial-gradient(120% 140% at 50% 0%, rgba(34,197,94,.14), transparent 60%), linear-gradient(135deg, rgba(0,194,212,.08), rgba(124,58,237,.06)) }
.tr-final__icon { display:inline-grid; place-items:center; width:72px; height:72px; border-radius:22px; font-size:2.1rem; line-height:1; margin-bottom:14px;
  background:linear-gradient(135deg, #22c55e, #86efac); box-shadow:0 10px 30px rgba(34,197,94,.35) }
.tr-final__title { font-size:clamp(1.3rem, 2.4vw, 1.75rem); font-weight:900; letter-spacing:-.01em; margin:0 0 6px; line-height:1.2 }
.tr-final__sub { color:var(--muted); font-size:.9rem; margin:0 0 18px }
.tr-final__chips { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.tr-final__chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; color:var(--text);
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); transition:.2s }
.tr-final__chip:hover { background:rgba(34,197,94,.22); transform:translateY(-1px) }
.tr-final__chip:focus-visible { outline:2px solid var(--td-cyan); outline-offset:2px }
.tr-final__actions { display:flex; flex-wrap:wrap; gap:10px; margin:1.4em 0 1em }
.tr-final__sign { font-size:1.05rem; margin-top:1.2em; padding-top:1em; border-top:1px dashed var(--panel-brd) } .tr-final__sign strong { color:var(--green) } .tr-final__sign span { color:var(--muted) }
@media(max-width:700px) { .tr-final { padding:26px 16px 20px } .tr-final__actions .tr-btn { width:100%; justify-content:center } }

/* ---------- 5. Seções (módulos) recolhíveis ---------- */
.tr-content { min-width:0 }
.tr-status { text-align:center; color:var(--muted); margin:8px 0 16px } .tr-status:empty { display:none }
.tr-status[data-state="error"] { color:var(--red); font-weight:600 }
.tr-sections { display:grid; gap:22px }
.tr-mod { border-radius:var(--radius); background:var(--panel); border:1px solid var(--panel-brd); backdrop-filter:var(--glass-blur); overflow:hidden; scroll-margin-top:84px }
.tr-mod__head { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:16px; align-items:center; width:100%; padding:18px 22px; background:transparent; border:0; color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:.2s }
.tr-mod__head:hover { background:rgba(255,255,255,.04) } body.light .tr-mod__head:hover { background:rgba(15,23,42,.03) }
.tr-mod__num { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.25rem; background:linear-gradient(135deg, rgba(0,194,212,.22), rgba(0,194,212,.06)); border:1px solid rgba(0,194,212,.3) }
.tr-mod--intro .tr-mod__num { background:linear-gradient(135deg, rgba(167,139,250,.24), rgba(167,139,250,.06)); border-color:rgba(167,139,250,.32) }
.tr-mod__kicker { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--td-cyan) }
.tr-mod--intro .tr-mod__kicker { color:var(--tr-train-2) } body.light .tr-mod--intro .tr-mod__kicker { color:var(--tr-train) }
.tr-mod__title { font-size:1.15rem; font-weight:800; margin-top:2px }
.tr-mod__sub { font-size:.84rem; color:var(--muted); margin-top:2px }
.tr-mod__meta { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.78rem; font-weight:600; white-space:nowrap }
.tr-mod__chev { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--panel-brd); font-size:.8rem; transition:transform .25s }
.tr-mod[data-open="false"] .tr-mod__chev { transform:rotate(-90deg) }
.tr-mod__body { padding:6px 26px 30px; border-top:1px solid var(--panel-brd) }
.tr-mod[data-open="false"] .tr-mod__body { display:none }
@media(max-width:700px) {
  .tr-mod__head { grid-template-columns:40px minmax(0,1fr) auto; padding:14px 16px; gap:12px }
  .tr-mod__num { width:40px; height:40px; font-size:1.05rem } .tr-mod__meta .tr-mod__pgs { display:none }
  .tr-mod__body { padding:4px 16px 22px }
}

/* ---------- 6. Conteúdo do guia (artigo nativo) ---------- */
.tr-article { max-width:78ch; margin:0 auto; font-size:1.02rem; line-height:1.7 }
.tr-article > * + * { margin-top:1em }
.tr-article h3 { font-size:1.05rem; font-weight:700; margin-top:2.1em; padding-bottom:8px; border-bottom:1px solid var(--panel-brd); letter-spacing:0; color:var(--text) }
.tr-article h3:first-child { margin-top:1.2em }
.tr-article h3.tr-h--label { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border:0; margin-top:1.6em; padding-bottom:0 }
.tr-article h4 { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start; font-size:1.12rem; font-weight:800; margin-top:2.4em; letter-spacing:-.01em }
.tr-article h4 + * { margin-top:.8em }
.tr-step__n { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:.9rem; font-weight:800; background:linear-gradient(135deg, var(--td-cyan), var(--td-cyan-2)); color:#022; box-shadow:0 6px 18px -6px rgba(0,194,212,.6); flex:none; margin-top:-4px }
.tr-article p { color:var(--text) }
.tr-article b { font-weight:700 }
.tr-ref { color:var(--td-cyan-2); font-weight:600 } body.light .tr-ref { color:#007a86 }
.tr-article a.tr-ref { text-decoration:underline; text-decoration-color:rgba(0,194,212,.45); text-underline-offset:3px }
.tr-article a.tr-ref:hover { text-decoration-color:var(--td-cyan) }
.tr-article ul { padding-left:1.4em; display:grid; gap:.45em }
.tr-article li::marker { color:var(--td-cyan) }
.tr-note { padding:16px 18px 16px 20px; border-radius:12px; background:rgba(246,130,31,.08); border:1px solid rgba(246,130,31,.28); border-left:4px solid var(--cf-orange); font-size:.95rem }
.tr-note__lbl { display:block; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cf-orange-2); margin-bottom:6px }
.tr-path { display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:10px; background:rgba(0,194,212,.08); border:1px solid rgba(0,194,212,.25); font-size:.84rem }
.tr-path__lbl { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--td-cyan) }
.tr-path__val { font-weight:600 } .tr-path__val .sep { color:var(--muted); padding:0 4px }
.tr-code { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 12px 12px 16px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid var(--panel-brd); margin-top:1em }
body.light .tr-code { background:#0f2730; border-color:#0f2730 }
.tr-code pre { margin:0; font:.88rem/1.5 'JetBrains Mono', Consolas, monospace; color:#e6f2f4; white-space:pre-wrap; overflow-wrap:anywhere }
.tr-code .tr-code__dom { color:var(--td-cyan-2); font-weight:700 }
.tr-dom--on { color:var(--td-cyan-2); font-weight:600; border-bottom:1px dashed rgba(0,194,212,.6); cursor:help } body.light .tr-dom--on { color:#007a86 }
.tr-code__copy { flex:none; padding:8px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font:600 .78rem/1 inherit; cursor:pointer; display:inline-flex; gap:6px; align-items:center; transition:.2s }
.tr-code__copy:hover { background:rgba(0,194,212,.25); border-color:var(--td-cyan) }
.tr-code__copy[data-state="ok"] { background:var(--green); border-color:var(--green); color:#032 }
.tr-code__copy[data-state="error"] { background:var(--red); border-color:var(--red) }
.tr-cover { margin:0 -26px; }
.tr-cover img { display:block; width:100%; height:auto; aspect-ratio:1600 / 520; object-fit:cover }
.tr-mod__body .tr-cover + .tr-article { margin-top:26px }
@media(max-width:700px) { .tr-cover { margin:0 -16px } .tr-cover img { aspect-ratio:16 / 7 } }
.tr-review { padding:14px 18px; border-radius:12px; background:rgba(167,139,250,.08); border:1px solid rgba(167,139,250,.3); font-size:.92rem }
.tr-review__lbl { display:block; font-weight:800; margin-bottom:4px; color:var(--tr-train-2) } body.light .tr-review__lbl { color:var(--tr-train) }
.tr-pathfix { padding:14px 16px 14px 18px; border-radius:12px; background:rgba(0,194,212,.06); border:1px solid rgba(0,194,212,.22); border-left:4px solid var(--td-cyan); font-size:.9rem; display:grid; gap:6px }
.tr-pathfix--changed { background:rgba(246,130,31,.08); border-color:rgba(246,130,31,.3); border-left-color:var(--cf-orange) }
.tr-pathfix__lbl { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--td-cyan) }
.tr-pathfix--changed .tr-pathfix__lbl { color:var(--cf-orange-2) } body.light .tr-pathfix--changed .tr-pathfix__lbl { color:#b35a00 }
.tr-pathfix__path { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-weight:700 }
.tr-pathfix__path .sep { color:var(--muted); font-weight:400 }
.tr-pathfix__path > span:not(.sep) { padding:3px 10px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid var(--panel-brd) } body.light .tr-pathfix__path > span:not(.sep) { background:#fff }
.tr-pathfix__note { color:var(--muted); font-size:.86rem; margin:0 }
.tr-pathfix__src { font-size:.78rem; color:var(--td-cyan); font-weight:600; justify-self:start } .tr-pathfix__src:hover { text-decoration:underline }
.tr-kv { border-radius:12px; border:1px solid rgba(0,194,212,.25); background:rgba(0,194,212,.05); overflow:hidden }
.tr-kv__head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; background:rgba(0,194,212,.08); border-bottom:1px solid rgba(0,194,212,.2) }
.tr-kv__title { font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--td-cyan) }
.tr-kv__list { margin:0; display:grid }
.tr-kv__row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--panel-brd) }
.tr-kv__row:last-child { border-bottom:0 }
.tr-kv__row dt { font-size:.84rem; color:var(--muted); font-weight:600 }
.tr-kv__row dd, .tr-kv__table td { margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px }
.tr-kv code, .tr-kv__table code { font:600 .92rem/1.3 'JetBrains Mono', Consolas, monospace; color:var(--td-cyan-2); overflow-wrap:anywhere } body.light .tr-kv code, body.light .tr-kv__table code { color:#007a86 }
.tr-kv__btn, .tr-kv__all { flex:none; padding:6px 10px; border-radius:8px; border:1px solid var(--panel-brd); background:var(--panel); color:var(--text); font:600 .74rem/1 inherit; cursor:pointer; transition:.2s }
.tr-kv__all { border-color:rgba(0,194,212,.4); color:var(--td-cyan) }
.tr-kv__btn:hover, .tr-kv__all:hover { border-color:var(--td-cyan); color:var(--td-cyan) }
.tr-kv__btn[data-state="ok"], .tr-kv__all[data-state="ok"] { background:var(--green); border-color:var(--green); color:#032 }
.tr-kv__btn[data-state="error"], .tr-kv__all[data-state="error"] { background:var(--red); border-color:var(--red); color:#fff }
.tr-kv__table { width:100%; border-collapse:collapse; font-size:.9rem }
.tr-kv__table th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 14px; border-bottom:1px solid var(--panel-brd) }
.tr-kv__table td { display:table-cell; padding:8px 14px; border-bottom:1px solid var(--panel-brd) } .tr-kv__table tr:last-child td { border-bottom:0 }
.tr-kv__table td .tr-kv__btn { margin-left:10px }
@media(max-width:600px) { .tr-kv__row { grid-template-columns:1fr; gap:4px } .tr-kv__table th:nth-child(3), .tr-kv__table td:nth-child(3) { display:none } }
.tr-fig { margin:1.4em 0 0; }
.tr-fig img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--panel-brd); background:#fff; box-shadow:0 14px 36px -18px rgba(0,0,0,.6) }
.tr-fig figcaption { font-size:.76rem; color:var(--muted); margin-top:8px; text-align:right }
.tr-intro-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1em }
.tr-lab { padding:18px 18px 16px; border-radius:14px; border:1px solid var(--panel-brd); background:rgba(0,0,0,.18); display:grid; gap:6px; align-content:start }
body.light .tr-lab { background:#fff }
.tr-lab__tag { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--td-cyan) }
.tr-lab--2 .tr-lab__tag { color:var(--tr-train-2) } body.light .tr-lab--2 .tr-lab__tag { color:var(--tr-train) }
.tr-lab__name { font-size:1.05rem; font-weight:800 }
.tr-lab__meta { font-size:.8rem; color:var(--muted) }
.tr-lab__code { font-family:'JetBrains Mono', Consolas, monospace; font-size:.8rem; color:var(--cf-orange-2); font-weight:700 }
.tr-lab__desc { font-size:.9rem; margin-top:4px }
.tr-callout { padding:14px 18px; border-radius:12px; background:rgba(0,194,212,.07); border:1px solid rgba(0,194,212,.22) }
.tr-callout ol { padding-left:1.3em }
.tr-callout__lbl { display:block; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--td-cyan); margin-bottom:6px }
.tr-route-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; list-style:none; padding:0 }
.tr-route-grid li { cursor:pointer; display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center; padding:10px 12px; border-radius:11px; border:1px solid var(--panel-brd); background:rgba(0,0,0,.14) }
body.light .tr-route-grid li { background:#fff }
.tr-route-grid .n { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:1.05rem; line-height:1; background:rgba(0,194,212,.14); color:var(--td-cyan-2); border:1px solid rgba(0,194,212,.3) }
body.light .tr-route-grid .n { color:#007a86 }
.tr-route-grid b { display:block; font-size:.9rem } .tr-route-grid small { color:var(--muted); font-size:.76rem; line-height:1.3 }
.tr-orig { font-size:.74rem; color:var(--muted); margin-top:1.6em; text-align:right }
@media(max-width:700px) { .tr-article { font-size:.98rem } .tr-intro-cards { grid-template-columns:1fr } .tr-code { grid-template-columns:1fr } .tr-code__copy { justify-self:end } }

@media print {
  nav, footer, .tr-head, .tr-toolbar, .tr-side, #backTop, #scrollbar, .tr-code__copy, .tr-mod__chev { display:none !important }
  .tr-layout { display:block } .tr-mod { break-inside:avoid; background:none; border:0 }
  .tr-mod[data-open="false"] .tr-mod__body { display:block }
  .tr-fig img { box-shadow:none }
}