/* Tutorial do professor (camada reaproveitável). Usa as variáveis do simulador quando existem:
   --ac (destaque), --papel, --borda, --tx, --tx2, --tx3, --mono. Cores chapadas; só a faixa da marca tem as três cores. */
#tutor{--tt-ac:var(--ac,#FFCB05);--tt-rx:#4B1B7A;--tt-mg:#BE1E5C;--tt-lj:#F47922;--tt-papel:var(--papel,#1b1129);--tt-papel2:#22163a;--tt-borda:var(--borda,rgba(255,255,255,.1));--tt-tx:var(--tx,#e9ebef);--tt-tx2:var(--tx2,#b9b2c8);--tt-tx3:var(--tx3,#8a8299);
  position:fixed;inset:0;z-index:110;background:rgba(8,6,14,.86);display:grid;place-items:center;padding:18px;font-family:var(--sans,Inter,system-ui,Arial,sans-serif);color:var(--tt-tx)}
#tutor svg{width:16px;height:16px;flex:none}
#tutor .tt-cx{width:min(1080px,100%);height:min(760px,calc(100dvh - 36px));display:flex;flex-direction:column;background:var(--tt-papel);border:1px solid var(--tt-borda);border-radius:18px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
#tutor .tt-topo{display:flex;align-items:center;gap:12px;padding:12px 14px 10px 14px;flex:none}
#tutor .tt-logo{width:42px;height:42px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}#tutor .tt-logo img{width:36px;height:36px;object-fit:contain}
#tutor .tt-tit{min-width:0;flex:1}#tutor .tt-tit small{display:block;font:700 10.5px var(--mono,monospace);letter-spacing:.8px;text-transform:uppercase;color:var(--tt-ac)}#tutor .tt-tit b{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tutor .tt-prog{font:600 11.5px var(--mono,monospace);color:var(--tt-tx2);padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.05);white-space:nowrap}
#tutor .tt-x{width:34px;padding:0;justify-content:center}
#tutor .tt-faixa{height:4px;flex:none;background:linear-gradient(90deg,#4B1B7A,#BE1E5C,#F47922)}
#tutor .tt-corpo{flex:1;min-height:0;display:grid;grid-template-columns:282px minmax(0,1fr)}
/* índice */
#tutor .tt-ind{overflow:auto;padding:10px 8px 16px;border-right:1px solid var(--tt-borda);background:rgba(0,0,0,.14)}
#tutor .tt-ind-cab{display:none;font-size:15px;font-weight:800;padding:4px 8px 8px}
#tutor .tt-gr{font:700 10.5px var(--mono,monospace);letter-spacing:.8px;text-transform:uppercase;color:var(--tt-tx3);padding:12px 10px 5px}
#tutor .tt-ic{width:100%;display:grid;grid-template-columns:24px 18px 1fr 18px;align-items:center;gap:8px;padding:7px 8px;border:0;border-radius:9px;background:none;color:var(--tt-tx2);text-align:left;font-size:13px;font-weight:600;line-height:1.25}
#tutor .tt-ic:hover{background:rgba(255,255,255,.06);color:var(--tt-tx)}
#tutor .tt-ic.on{background:rgba(255,203,5,.1);color:#fff;box-shadow:inset 3px 0 0 var(--tt-ac)}
#tutor .tt-ic .tt-n{font:600 10.5px var(--mono,monospace);color:var(--tt-tx3)}#tutor .tt-ic.on .tt-n{color:var(--tt-ac)}
#tutor .tt-ic .tt-i{width:17px;height:17px;color:var(--tt-tx3)}#tutor .tt-ic.on .tt-i{color:var(--tt-ac)}
#tutor .tt-ic .tt-st{width:18px;height:18px;border-radius:50%;display:grid;place-items:center}#tutor .tt-ic.visto .tt-st{width:7px;height:7px;margin:0 auto;background:var(--tt-tx3)}
#tutor .tt-ic.feito .tt-st{background:#3fbf6e;color:#06200f}#tutor .tt-ic.feito .tt-st svg{width:12px;height:12px;stroke-width:3}
/* capítulo */
#tutor .tt-art{overflow:auto;padding:20px 28px 22px;scroll-behavior:smooth}
#tutor .tt-volta{display:none;margin-bottom:10px}
#tutor .tt-cab{display:flex;gap:14px;align-items:flex-start}
#tutor .tt-num{font:800 13px var(--mono,monospace);color:#1A0830;background:var(--tt-ac);padding:6px 8px;border-radius:8px;flex:none;margin-top:3px}
#tutor h2{margin:0;font-size:22px;line-height:1.2;font-weight:800}
#tutor .tt-res{margin:5px 0 0;color:var(--tt-tx2);font-size:14px}
#tutor .tt-meta{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
#tutor .tt-meta span{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--mono,monospace);color:var(--tt-tx2);background:rgba(255,255,255,.05);border:1px solid var(--tt-borda);padding:4px 9px;border-radius:7px}
#tutor .tt-meta span.ok{color:#3fbf6e;border-color:rgba(63,191,110,.4)}#tutor .tt-meta svg{width:13px;height:13px}
#tutor .tt-aula{margin:14px 0;padding:11px 14px;border-radius:12px;background:rgba(244,121,34,.08);border:1px solid rgba(244,121,34,.35)}
#tutor .tt-aula b{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#ffb27a}#tutor .tt-aula p{margin:5px 0 0;font-size:13.5px;color:var(--tt-tx)}
#tutor .tt-p{font-size:14px;color:var(--tt-tx);margin:10px 0;max-width:72ch}
#tutor h3{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--tt-tx3);margin:20px 0 10px;font-weight:800}
#tutor .tt-passos{list-style:none;counter-reset:tp;margin:0;padding:0;display:grid;gap:8px}
#tutor .tt-passos li{counter-increment:tp;display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;padding:10px 12px;border-radius:12px;border:1px solid var(--tt-borda);background:rgba(255,255,255,.025)}
#tutor .tt-passos li::before{content:counter(tp);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--mono,monospace);background:var(--tt-rx);color:#fff}
#tutor .tt-passos b{font-size:14px}#tutor .tt-passos p{margin:3px 0 0;color:var(--tt-tx2);font-size:13px;max-width:70ch}
#tutor .tt-passos .tt-mostra{height:28px;font-size:12px;padding:0 9px}#tutor .tt-passos .tt-mostra svg{width:14px;height:14px}
#tutor kbd,#tutorGuia kbd{font:600 11px var(--mono,monospace);background:#2a1d40;border:1px solid var(--tt-borda,rgba(255,255,255,.12));border-bottom-width:2px;border-radius:5px;padding:0 5px;color:#fff;white-space:nowrap}
#tutor .tt-tab{width:100%;border-collapse:collapse;font-size:13px}#tutor .tt-tab td{padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}#tutor .tt-tab td:first-child{white-space:nowrap;color:var(--tt-tx);font-weight:600;width:1%}#tutor .tt-tab td:last-child{color:var(--tt-tx2)}
#tutor .tt-dicas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:18px}
#tutor .tt-dica{padding:11px 13px;border-radius:12px;border:1px solid var(--tt-borda);background:rgba(255,255,255,.025)}
#tutor .tt-dica b{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.5px;text-transform:uppercase}#tutor .tt-dica p{margin:6px 0 0;font-size:13px;color:var(--tt-tx2)}
#tutor .tt-dica.aula{border-color:rgba(255,203,5,.35)}#tutor .tt-dica.aula b{color:var(--tt-ac)}
#tutor .tt-dica.atencao{border-color:rgba(190,30,92,.55);background:rgba(190,30,92,.07)}#tutor .tt-dica.atencao b{color:#ff7aa8}
#tutor .tt-dica.saiba b{color:#a8c8ff}
#tutor .tt-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--tt-borda)}
#tutor .tt-acoes .ib{height:38px;padding:0 14px;font-size:13px}.tt-esp{flex:1}
/* roteiros e atividades */
#tutor .tt-roteiro{margin:14px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--tt-borda);background:rgba(255,255,255,.025)}
#tutor .tt-rc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
#tutor .tt-rn{font:700 11px var(--mono,monospace);background:var(--tt-mg);color:#fff;padding:3px 8px;border-radius:6px}#tutor .tt-roteiro h4{margin:0;font-size:16px;flex:1;min-width:200px}
#tutor .tt-rt{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--mono,monospace);color:var(--tt-tx2)}#tutor .tt-rt svg{width:13px;height:13px}
#tutor .tt-obj{font-size:13px;color:var(--tt-tx2);margin:6px 0}#tutor .tt-obj b{color:var(--tt-tx)}
#tutor .tt-tempo td:first-child{font-family:var(--mono,monospace);color:var(--tt-ac);font-weight:600}
#tutor .tt-roteiro>.ib{margin-top:8px}
#tutor .tt-ativ{display:grid;gap:8px;margin-top:8px}#tutor .tt-at{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--tt-borda);background:rgba(255,255,255,.025)}
#tutor .tt-an{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:700 12px var(--mono,monospace);background:var(--tt-mg);color:#fff}
#tutor .tt-at b{font-size:14px}#tutor .tt-at em{font:600 11px var(--mono,monospace);font-style:normal;color:var(--tt-ac);margin-left:6px}#tutor .tt-at p{margin:3px 0 0;font-size:13px;color:var(--tt-tx2)}
/* botão do topo ligado */
#btTutor.on{color:#fff}
/* ---------- guia da prática (cartão pequeno sobre o simulador) ---------- */
#tutorGuia{position:fixed;z-index:96;width:min(360px,calc(100vw - 16px));background:#1d1430;border:1px solid var(--ac,#FFCB05);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);color:var(--tx,#e9ebef);font:13px/1.45 var(--sans,Inter,Arial,sans-serif);overflow:hidden;transition:left .25s,top .25s}
#tutorGuia svg{width:15px;height:15px;flex:none}
#tutorGuia .tg-cab{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:rgba(255,203,5,.08);border-bottom:1px solid rgba(255,255,255,.08)}
#tutorGuia .tg-ic{color:var(--ac,#FFCB05)}#tutorGuia .tg-cap{flex:1;min-width:0;font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tutorGuia .tg-np{font:700 11px var(--mono,monospace);color:#1A0830;background:var(--ac,#FFCB05);padding:2px 7px;border-radius:6px}
#tutorGuia .tg-min{width:28px;height:28px;border:0;border-radius:8px;background:none;color:#cfd4df;display:grid;place-items:center}#tutorGuia .tg-min:hover{background:rgba(255,255,255,.08)}
#tutorGuia .tg-corpo{padding:10px 12px 12px;max-height:min(46vh,380px);overflow:auto}
#tutorGuia .tg-t{display:block;font-size:14.5px;margin-bottom:4px}#tutorGuia p{margin:0;color:#d2cde0}
#tutorGuia .tg-acao{margin-top:9px;height:32px;background:var(--mg,#BE1E5C);border-color:transparent;color:#fff}
#tutorGuia .tg-pts{display:flex;gap:4px;margin:11px 0 9px}#tutorGuia .tg-pts i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}#tutorGuia .tg-pts i.ja{background:rgba(255,203,5,.45)}#tutorGuia .tg-pts i.on{background:var(--ac,#FFCB05)}
#tutorGuia .tg-bt{display:flex;gap:6px;align-items:center}#tutorGuia .tg-bt .ib{height:32px}
#tutorGuia.min .tg-corpo{display:none}
@media (max-width:860px){
  #tutor{padding:0}
  #tutor .tt-cx{height:100dvh;border-radius:0;border:0}
  #tutor .tt-topo{padding:10px 10px 8px}#tutor .tt-logo{width:36px;height:36px}#tutor .tt-logo img{width:30px;height:30px}#tutor .tt-tit b{font-size:14px}
  #tutor .tt-prog{display:none}#tutor #ttImp .tx{display:none}#tutor #ttImp{width:34px;padding:0;justify-content:center}
  #tutor .tt-corpo{display:block;position:relative}
  #tutor .tt-ind,#tutor .tt-art{position:absolute;inset:0;border:0}
  #tutor .tt-ind-cab{display:block}
  #tutor .tt-art{display:none;padding:12px 16px 20px}
  #tutor .tt-lendo .tt-ind{display:none}#tutor .tt-lendo .tt-art{display:block}
  #tutor .tt-volta{display:inline-flex}
  #tutor h2{font-size:19px}#tutor .tt-num{font-size:12px}
  #tutor .tt-passos li{grid-template-columns:26px 1fr;padding:9px 10px}#tutor .tt-passos li::before{width:24px;height:24px}
  #tutor .tt-passos .tt-mostra{grid-column:2;justify-self:start}
  #tutor .tt-ic{padding:10px 8px;font-size:14px}
  #tutor .tt-acoes .ib{flex:1;justify-content:center}#tutor .tt-acoes .tt-esp{display:none}#tutor #ttPrat{flex-basis:100%}
  #tutor .tt-tab td:first-child{white-space:normal;width:34%}
  #tutorGuia .tg-corpo{max-height:30vh}
}