/* On Training — Sala de aula (v1 · 2026-09-29)
   Camada aditiva sobre o leitor de aulas ([data-lesson-viewer]). Se este arquivo sair, a sala volta ao visual anterior. */
.sx[data-lesson-viewer]{--sx-navy:#061a2b;--sx-navy2:#0b2336;--sx-teal:#00cca3;--sx-teal-d:#008b76;--sx-yellow:#f4b400;--sx-mint:#effcf8;--sx-line:#e2e8f0;--sx-ink:#081b3a;padding:0!important;background:var(--sx-navy)!important;backdrop-filter:none!important}
.sx[data-lesson-viewer]>div{max-width:none!important;height:100dvh!important;border:0!important;box-shadow:none!important;background:#f7fbff!important}

/* ---------- topo ---------- */
.sx[data-lesson-viewer]>div>header{position:relative;gap:1rem;padding:.7rem 1rem .7rem 1.25rem!important;background:linear-gradient(90deg,#061a2b,#0b2c40)!important;border:0!important}
.sx[data-lesson-viewer]>div>header>div:first-child{min-width:0;flex:1}
.sx[data-lesson-viewer]>div>header p{color:var(--sx-teal)!important;letter-spacing:.18em!important}
.sx[data-lesson-viewer]>div>header h2{color:#fff!important;font-size:1rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tools{display:flex;align-items:center;gap:.4rem}
.sx-tool{display:inline-flex;align-items:center;gap:.35rem;height:2.4rem;padding:0 .75rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#e2edf7;font-size:.8rem;font-weight:800;cursor:pointer;transition:background .15s,border-color .15s}
.sx-tool:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.sx-tool[aria-pressed="true"]{background:var(--sx-teal);border-color:var(--sx-teal);color:var(--sx-navy)}
.sx-tool .material-symbols-outlined{font-size:1.15rem}
.sx-tool:focus-visible,.sx-step:focus-visible{outline:3px solid var(--sx-yellow);outline-offset:2px}
.sx[data-lesson-viewer] [data-close-lesson]{height:2.4rem;border-radius:.6rem!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important}
.sx[data-lesson-viewer] [data-close-lesson]:hover{background:#7f1d1d!important;border-color:#7f1d1d!important}
@media(max-width:767px){.sx-tool .sx-tl{display:none}.sx-tool{padding:0 .6rem}.sx[data-lesson-viewer]>div>header{padding:.55rem .6rem .55rem .9rem!important}.sx[data-lesson-viewer]>div>header p{display:none}}

/* ---------- trilha das páginas ---------- */
.sx-steps{display:flex;align-items:center;gap:.9rem;padding:.65rem 1.25rem;background:#fff;border-bottom:1px solid var(--sx-line);overflow-x:auto;scrollbar-width:none}
.sx-steps::-webkit-scrollbar{display:none}
.sx-steps-label{flex:none;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.sx-steps ol{display:flex;gap:.4rem;margin:0;padding:0;list-style:none;flex:1;min-width:max-content}
.sx-step{display:flex;align-items:center;gap:.45rem;padding:.35rem .75rem .35rem .4rem;border-radius:999px;border:1px solid var(--sx-line);background:#fff;color:#475569;font-size:.76rem;font-weight:800;white-space:nowrap;cursor:pointer;transition:all .15s}
.sx-step i{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#eef2f7;font-style:normal;font-size:.7rem;font-weight:900}
.sx-step:hover{border-color:#9bdccd}
.sx-step.is-seen{color:var(--sx-teal-d)}
.sx-step.is-seen i{background:var(--sx-mint);color:var(--sx-teal-d)}
.sx-step.is-now{background:var(--sx-ink);border-color:var(--sx-ink);color:#fff}
.sx-step.is-now i{background:var(--sx-yellow);color:var(--sx-navy)}
.sx-step.is-quiz i{background:#fff3c4;color:#8a6200}
.sx-step.is-lab::after{content:"science";font-family:"Material Symbols Outlined";font-size:.95rem;margin-left:.15rem;color:#107c41}
.sx-step.is-now.is-lab::after{color:#6ee7b7}
@media(max-width:767px){.sx-step span{display:none}.sx-step{padding:.3rem}.sx-step.is-now span{display:inline;padding-right:.3rem}.sx-steps{padding:.55rem .8rem}}

/* ---------- barra lateral ---------- */
.sx[data-lesson-viewer] aside{width:300px!important;padding:1.25rem 1rem!important;background:#fff!important;overflow-y:auto}
.sx[data-lesson-viewer] aside nav{display:grid;gap:.25rem}
.sx[data-lesson-viewer] [data-sidebar-lesson]{position:relative;display:grid!important;grid-template-columns:2.1rem 1fr;align-items:center!important;gap:.1rem .7rem!important;padding:.6rem .7rem!important;border:0!important;border-radius:.8rem!important;background:transparent!important;text-align:left}
.sx[data-lesson-viewer] [data-sidebar-lesson]:not(:disabled):hover{background:#f1f5f9!important}
.sx[data-lesson-viewer] [data-sidebar-lesson].sx-active{background:var(--sx-mint)!important;box-shadow:inset 3px 0 0 var(--sx-teal-d)}
.sx[data-lesson-viewer] [data-sidebar-icon]{grid-row:span 2;display:grid!important;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#eef2f7;color:#64748b;font-size:1.15rem!important}
.sx[data-lesson-viewer] [data-sidebar-lesson].sx-done [data-sidebar-icon]{background:var(--sx-teal-d);color:#fff}
.sx[data-lesson-viewer] [data-sidebar-lesson].sx-open [data-sidebar-icon]{background:#fff3c4;color:#8a6200}
.sx[data-lesson-viewer] [data-sidebar-state]{font-size:.66rem!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase}
.sx-stitle{grid-column:2;font-size:.82rem;font-weight:800;line-height:1.3;color:var(--sx-ink)}
[data-sidebar-lesson]:disabled .sx-stitle{color:#94a3b8}
.sx-lab{position:absolute;right:.55rem;top:.55rem;font-size:.95rem!important;color:#10b981}
.sx-ring{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;padding:1rem;border-radius:1rem;background:linear-gradient(135deg,#061a2b,#0d3a4a);color:#fff}
.sx-ring svg{flex:none}
.sx-ring b{display:block;font-size:1rem;font-weight:900}
.sx-ring small{display:block;margin-top:.15rem;font-size:.75rem;color:#a9c3dc;line-height:1.4}
.sx[data-lesson-viewer] aside .sx-hide{display:none!important}
.sx-focus [data-lesson-viewer] aside,.sx[data-lesson-viewer].sx-focus aside{display:none!important}
@media(max-width:767px){
  .sx[data-lesson-viewer] aside{position:fixed;z-index:5;left:0;top:0;bottom:0;height:100dvh;max-height:none!important;width:min(86vw,320px)!important;transform:translateX(-102%);transition:transform .25s;box-shadow:20px 0 60px -20px rgba(0,0,0,.5);border:0!important}
  .sx[data-lesson-viewer].sx-drawer aside{transform:none}
  .sx-scrim{position:fixed;inset:0;z-index:4;background:rgba(6,26,43,.5);display:none}
  .sx[data-lesson-viewer].sx-drawer .sx-scrim{display:block}
}

/* ---------- área de leitura ---------- */
.sx[data-lesson-viewer] main{padding:2.2rem clamp(1rem,4vw,3rem) 3rem!important;scroll-behavior:smooth}
.sx[data-lesson-viewer] main>*{max-width:800px;margin-left:auto!important;margin-right:auto!important}
.sx[data-lesson-viewer] main>.mt-10{margin-top:1.75rem!important}
.sx[data-lesson-viewer] [data-lesson-counter]{display:flex;align-items:center;gap:.6rem}
.sx-read{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;border-radius:999px;background:#eef2f7;color:#64748b;font-size:.68rem;letter-spacing:.02em;text-transform:none}
.sx[data-lesson-viewer] [data-lesson-title]{font-size:clamp(1.6rem,3vw,2.2rem)!important;line-height:1.15!important;letter-spacing:-.015em}
.sx[data-lesson-viewer] [data-lesson-bar]{min-width:4px;border-radius:4px;background:linear-gradient(90deg,var(--sx-teal-d),var(--sx-teal))!important;box-shadow:0 0 12px rgba(0,204,163,.5);transition:width .4s ease!important}
.sx[data-lesson-viewer] [data-lesson-page-content]{animation:sx-in .35s ease}
@keyframes sx-in{from{opacity:0;transform:translateY(8px)}}
.sx[data-lesson-viewer] [data-lesson-page-content] h4{letter-spacing:-.015em;line-height:1.2!important}
.sx[data-lesson-viewer] [data-lesson-page-content] .border:not(.otlab *){border-radius:1rem}
.sx[data-lesson-viewer] [data-lesson-page-content] .border.bg-white{box-shadow:0 12px 34px -26px rgba(8,27,58,.35)}
.sx[data-lesson-viewer] [data-lesson-page-content] table:not(.grid){width:100%;border-collapse:separate;border-spacing:0;border-radius:.8rem;overflow:hidden;border:1px solid var(--sx-line)}
.sx[data-lesson-viewer] [data-lesson-page-content] table:not(.grid) th{background:var(--sx-ink)!important;color:#fff!important}
.sx[data-lesson-viewer] [data-lesson-page-content] table:not(.grid) tbody tr:nth-child(even) td{background:#f8fafc}
.sx[data-lesson-viewer] [data-lesson-page-content] img:not(.otlab *){border-radius:.8rem}
.sx[data-lesson-viewer] [data-lesson-page-content] a[download],.sx[data-lesson-viewer] [data-lesson-page-content] a[href$=".xlsx"]{border-radius:.6rem}
.sx-z1 main>.mt-10,.sx-z1 main>[data-lesson-counter],.sx-z1 main>[data-lesson-title]{zoom:1.1}
.sx-z2 main>.mt-10,.sx-z2 main>[data-lesson-counter],.sx-z2 main>[data-lesson-title]{zoom:1.22}

/* ---------- avaliação ---------- */
.sx[data-lesson-viewer] [data-assessment-questions] fieldset{border-radius:1rem!important;padding:1.25rem!important;box-shadow:0 12px 30px -26px rgba(8,27,58,.4)}
.sx[data-lesson-viewer] [data-assessment-questions] legend{font-size:1rem!important;line-height:1.45;padding:0 .3rem}
.sx[data-lesson-viewer] [data-assessment-questions] label{align-items:center;margin-top:.6rem!important;padding:.75rem .9rem;border:2px solid var(--sx-line);border-radius:.8rem;cursor:pointer;transition:border-color .15s,background .15s}
.sx[data-lesson-viewer] [data-assessment-questions] label:hover{border-color:#9bdccd;background:#fbfffe}
.sx[data-lesson-viewer] [data-assessment-questions] label:has(input:checked){border-color:var(--sx-teal-d);background:var(--sx-mint);color:#064e46}
.sx[data-lesson-viewer] [data-assessment-questions] input[type=radio]{accent-color:var(--sx-teal-d);width:1.1rem;height:1.1rem;flex:none}
.sx-answered{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;font-size:.85rem;font-weight:800;color:#475569}
.sx-answered i{flex:1;max-width:220px;height:6px;border-radius:6px;background:#e2e8f0;overflow:hidden}
.sx-answered i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sx-teal-d),var(--sx-teal));transition:width .3s}
.sx[data-lesson-viewer] [data-assessment-submit]{border-radius:.7rem;padding:.9rem 1.3rem!important;box-shadow:0 10px 24px -12px rgba(244,180,0,.7)}
.sx[data-lesson-viewer] [data-assessment-result]{border-radius:1rem}
.sx-win{position:relative;margin-top:1.2rem;padding:1.4rem 1.5rem;border-radius:1.1rem;background:linear-gradient(135deg,#061a2b,#0d3a4a);color:#fff;overflow:hidden;animation:sx-in .4s ease}
.sx-win::after{content:"";position:absolute;right:-40px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(244,180,0,.35),transparent 70%)}
.sx-win b{display:block;font-size:1.3rem;font-weight:900}
.sx-win p{margin:.35rem 0 0;color:#c7dcef;line-height:1.55;position:relative;z-index:1}
.sx-win .sx-medal{font-size:2.4rem;line-height:1;display:inline-block;animation:sx-pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes sx-pop{from{transform:scale(.2) rotate(-30deg);opacity:0}}
.sx-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.sx-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:sx-fall linear forwards}
@keyframes sx-fall{to{transform:translate(var(--dx),105vh) rotate(720deg)}}

/* ---------- rodapé ---------- */
.sx[data-lesson-viewer]>div>footer{position:relative;gap:.75rem;padding:.75rem clamp(.8rem,3vw,2rem)!important;box-shadow:0 -10px 30px -20px rgba(8,27,58,.3)}
.sx[data-lesson-viewer] [data-lesson-prev],.sx[data-lesson-viewer] [data-lesson-next],.sx[data-lesson-viewer] [data-lesson-next-start]{border-radius:.7rem!important;min-height:2.9rem;padding-left:1.2rem!important;padding-right:1.2rem!important}
.sx[data-lesson-viewer] [data-lesson-next]{box-shadow:0 10px 24px -14px rgba(0,139,118,.8)}
.sx[data-lesson-viewer] [data-lesson-next]:hover{background:#006f60!important}
.sx[data-lesson-viewer] [data-lesson-next-start]:not([hidden]){background:var(--sx-yellow)!important;border-color:var(--sx-yellow)!important;color:var(--sx-navy)!important;animation:sx-nudge 1.6s ease 2}
@keyframes sx-nudge{50%{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(244,180,0,.9)}}
.sx-pageinfo{position:absolute;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:800;color:#64748b;white-space:nowrap}
.sx-keys{display:inline-flex;gap:.2rem;margin-left:.5rem;opacity:.75}
.sx-keys kbd{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .25rem;border-radius:.35rem;border:1px solid #cbd5e1;border-bottom-width:2px;font:700 .7rem/1 ui-monospace,Consolas,monospace;color:#475569;background:#fff}
@media(max-width:767px){.sx-steps-label{display:none}.sx-pageinfo{position:static;transform:none;order:-1;flex:1 0 100%!important;text-align:center}.sx-keys{display:none}.sx[data-lesson-viewer]>div>footer>*{flex:1}.sx[data-lesson-viewer]>div>footer>div{justify-content:flex-end}}

@media(prefers-reduced-motion:reduce){.sx[data-lesson-viewer] *{animation:none!important;transition:none!important}.sx-confetti{display:none}}
.sx-answered[hidden]{display:none}

/* ---------- rodapé sem sobreposição (2026-10-16) ----------
   Com a sala aberta, "Erro ou sugestão?" e "Fale com a gente" viram ícones e o rodapé reserva o espaço deles. */
body:has([data-lesson-viewer]:not([hidden])) .otfb-btn{padding:11px 12px}
body:has([data-lesson-viewer]:not([hidden])) .otfb-btn .otfb-l{display:none}
body:has([data-lesson-viewer]:not([hidden])) .ott-fab{padding:6px;gap:0}
body:has([data-lesson-viewer]:not([hidden])) .ott-fab>b{display:none}
.sx[data-lesson-viewer]>div>footer{padding-left:max(72px,clamp(.8rem,3vw,2rem))!important;padding-right:max(84px,clamp(.8rem,3vw,2rem))!important}
@media(min-width:768px){
  .sx[data-lesson-viewer]>div>footer{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
  .sx[data-lesson-viewer]>div>footer>*{flex:none}
  .sx[data-lesson-viewer]>div>footer>[data-lesson-prev]{order:1}
  .sx[data-lesson-viewer]>div>footer>.sx-pageinfo{position:static;transform:none;order:2;flex:1 1 auto;text-align:center}
  .sx[data-lesson-viewer]>div>footer>.cb-skip{order:3;margin:0}
  .sx[data-lesson-viewer]>div>footer>div{order:4;flex:none}
}

/* ---------- celular: rodapé compacto em uma linha (2026-10-16) ----------
   Antes: 3 linhas (~170 px de 844). Agora: uma barra de ~68 px com Anterior em ícone, página e Próximo grande.
   "Já sei: ir à prova" sai do rodapé no celular (continua no painel "Seu caminho neste curso"). */
@media(max-width:767px){
  .sx[data-lesson-viewer]>div>footer{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:.5rem!important;padding:.55rem .75rem!important}
  .sx[data-lesson-viewer]>div>footer>.cb-skip{display:none!important}
  .sx[data-lesson-viewer]>div>footer>[data-lesson-prev]{flex:none!important;width:52px;min-width:0!important;min-height:48px;padding:0!important;order:1!important;font-size:0!important;position:relative}
  .sx[data-lesson-viewer]>div>footer>[data-lesson-prev]::before{content:"←";font-size:1.4rem;font-weight:900;line-height:1}
  .sx[data-lesson-viewer]>div>footer>.sx-pageinfo{order:2!important;flex:none!important;min-width:0;font-size:.7rem;line-height:1.15;text-align:center;white-space:normal}
  .sx[data-lesson-viewer]>div>footer>.sx-pageinfo{max-width:92px}
  .sx[data-lesson-viewer]>div>footer>div{order:3!important;flex:1 1 auto!important;display:flex;gap:.4rem}
  .sx[data-lesson-viewer]>div>footer>div>button{flex:1;min-height:48px;font-size:.95rem!important}
  body:has([data-lesson-viewer]:not([hidden])) .otfb-btn,body:has([data-lesson-viewer]:not([hidden])) .ott-fab{bottom:88px!important}
  .sx[data-lesson-viewer]>div>footer{padding-left:.75rem!important;padding-right:.75rem!important}
}
.sx-min{}@media(max-width:767px){.sx-min{display:none}}