/* On Training — Desenho das aulas (v2 · 2026-10-19) */
.sa-audio{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sa-audio button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 1rem;border-radius:999px;border:1.5px solid #cbd5e1;background:#fff;color:#081b3a;font:800 .85rem Inter,Arial,sans-serif;cursor:pointer}
.sa-audio .sa-play{background:#061a2b;border-color:#061a2b;color:#fff}.sa-audio .sa-play .material-symbols-outlined{color:#f4b400}
.sa-audio.is-on .sa-play{background:#008b76;border-color:#008b76}
.sa-audio .sa-rate{min-width:56px;padding:0 .7rem}.sa-audio .sa-stop{width:44px;padding:0}
.sa-audio:not(.is-on) .sa-stop{display:none}
.sa-sum{padding:.9rem 1rem;border-radius:1rem;background:#fff8e1;border:1px solid #f4d36b}
.sa-sum>b{display:flex;align-items:center;gap:.4rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8a6200}.sa-sum>b .material-symbols-outlined{font-size:1.1rem;color:#f59e0b}
.sa-sum ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem}
.sa-sum li{position:relative;padding-left:1.1rem;font-size:.95rem;line-height:1.4;color:#3b3300}.sa-sum li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:#f59e0b}


/* caminho */
.sa-paths{margin:1.2rem 0 .8rem;display:grid;gap:.5rem}.sa-paths>b{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.sa-paths>div{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sa-paths button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.5rem .7rem;border-radius:.9rem;border:2px solid #cbd5e1;background:#fff;color:#334155;font:800 .88rem Inter,Arial,sans-serif;cursor:pointer;text-align:center}
.sa-paths button[aria-pressed="true"]{border-color:#008b76;background:#effcf8;color:#006c5b;box-shadow:0 0 0 3px rgba(0,204,163,.18)}
.sa-paths .material-symbols-outlined{font-size:1.3rem}
.sa-go{display:none;padding:1rem;border-radius:1rem;background:#effcf8;border:1.5px solid #00cca3}.sa-go p{margin:0 0 .7rem;color:#064e46;font-weight:600}
.sa-go button{display:inline-flex;align-items:center;gap:.4rem;min-height:48px;padding:0 1.2rem;border:0;border-radius:.8rem;background:#008b76;color:#fff;font:800 .9rem Inter,Arial,sans-serif;cursor:pointer}

/* listas tocáveis */
.sa-ticks{list-style:none!important;padding:0!important;margin:.6rem 0 0!important;display:grid;gap:.4rem}
.sa-ticks>li{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border:1.5px solid #e2e8f0;border-radius:.8rem;background:#fff;cursor:pointer;min-height:48px;transition:all .15s;list-style:none!important}
.sa-ticks>li::before{content:"";flex:none;width:1.45rem;height:1.45rem;margin-top:.05rem;border-radius:50%;border:2px solid #94a3b8;background:#fff}
.sa-ticks>li.is-on{border-color:#00cca3;background:#effcf8;color:#064e46}.sa-ticks>li.is-on::before{border-color:#008b76;background:#008b76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/80% no-repeat}
.sa-ticks>li:focus-visible{outline:3px solid #f4b400;outline-offset:2px}
.sa-tickbar{display:flex;align-items:center;gap:.7rem;margin-top:.6rem;font-size:.78rem;font-weight:800;color:#64748b}.sa-tickbar i{flex:1;height:7px;border-radius:9px;background:#e8eef5;overflow:hidden}.sa-tickbar u{display:block;height:100%;background:linear-gradient(90deg,#008b76,#00cca3);transition:width .3s}.sa-tickbar.is-done{color:#008b76}
/* desafio relâmpago */
.sa-act{margin:1.6rem 0 0;padding:1rem;border-radius:1.2rem;background:linear-gradient(180deg,#061a2b,#0b2336);color:#fff;border:1px solid #1d3a52}
.sa-act header{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sa-act-h{display:flex;align-items:center;gap:.4rem}.sa-act-h .material-symbols-outlined{color:#f4b400}.sa-act-h b{font-size:1rem}
.sa-act-dots{display:flex;gap:.3rem}.sa-act-dots i{width:.7rem;height:.7rem;border-radius:50%;background:#1d3a52}.sa-act-dots i.is-now{background:#f4b400}.sa-act-dots i.is-ok{background:#00cca3}
.sa-body{margin-top:.8rem;display:grid;gap:.7rem}
.sa-type{margin:0;display:flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#7ee8cf}.sa-combo{margin-left:auto;color:#f4b400;letter-spacing:0;font-size:.8rem}
.sa-q small{color:#8fb3c9;font-weight:800}.sa-q p{margin:.3rem 0 0;font-size:1.15rem;font-weight:700;line-height:1.4}.sa-q .sa-big,.sa-big{font-size:1.5rem!important;text-align:center;padding:.7rem 0;margin:0}
.sa-act button{font-family:Inter,Arial,sans-serif;cursor:pointer}
.sa-tf,.sa-cls{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.sa-cls{grid-template-columns:repeat(3,1fr)}
.sa-tf button,.sa-cls button{min-height:60px;border-radius:.9rem;border:2px solid #2a4a63;border-bottom-width:5px;background:#10304a;color:#fff;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.sa-tf button:active,.sa-cls button:active{transform:translateY(3px);border-bottom-width:2px}.sa-tf button:hover,.sa-cls button:hover{border-color:#00cca3}
.sa-match{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.sa-col{display:grid;gap:.5rem;align-content:start}
.sa-pool{display:flex;flex-wrap:wrap;gap:.5rem}.sa-line{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;counter-reset:o}.sa-line li{counter-increment:o;display:flex;gap:.6rem;align-items:center;padding:.6rem .8rem;border-radius:.8rem;background:#0f4a40;border:1px solid #00cca3}.sa-line li::before{content:counter(o);display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#00cca3;color:#061a2b;font-weight:900;font-size:.8rem}
.sa-pc{min-height:52px;padding:.5rem .8rem;border-radius:.8rem;border:2px solid #2a4a63;border-bottom-width:4px;background:#10304a;color:#fff;font-weight:700;font-size:.9rem;text-align:left;line-height:1.3}
.sa-pc.is-sel{border-color:#f4b400;background:#2a2a10}.sa-pc.is-ok{border-color:#00cca3;background:#0f4a40;opacity:.8;cursor:default}.sa-pc.is-bad,.sa-sc.is-bad,.sa-tc.is-bad,.sa-th.is-bad{animation:sa-shake .4s;border-color:#ef4444!important}
.sa-hint{margin:0;color:#8fb3c9;font-size:.85rem}
.sa-xray{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;border-radius:999px;border:1.5px solid #2a4a63;background:transparent;color:#cde;font-weight:800;font-size:.82rem;justify-self:start}.sa-xray[aria-pressed="true"]{background:#f4b400;border-color:#f4b400;color:#061a2b}
.sa-spot{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.sa-sc{min-height:52px;padding:.5rem;border-radius:.7rem;border:2px solid #2a4a63;background:#fff;color:#081b3a;font:600 1rem Calibri,Inter,Arial,sans-serif;white-space:pre}.sa-sc.is-ok{background:#d6f7ec;border-color:#00cca3}
.sa-tapg{display:grid;grid-template-columns:34px repeat(6,1fr);gap:2px;max-width:480px;margin:0 auto;width:100%}
.sa-th,.sa-tc{min-height:40px;border:0;border-radius:.3rem;background:#10304a;color:#9fc2d8;font-weight:800;font-size:.8rem}.sa-tc{background:#fff}.sa-tc.is-ok,.sa-th.is-ok{background:#00cca3!important;color:#061a2b}.sa-tc.is-band{background:#bff3e4}
.sa-fb{display:flex;gap:.5rem;align-items:flex-start;padding:.7rem .9rem;border-radius:.8rem;font-size:.92rem;line-height:1.4;animation:sa-in .25s}.sa-fb.is-ok{background:#0f4a40;color:#b7f5e3}.sa-fb.is-no{background:#4a1f1f;color:#ffd3d3}.sa-fb .material-symbols-outlined{flex:none;font-size:1.3rem}
.sa-next{min-height:52px;border:0;border-bottom:4px solid #007a67;border-radius:.9rem;background:#00cca3;color:#061a2b;font-weight:900;font-size:1rem}.sa-next:active{transform:translateY(3px);border-bottom-width:1px}
.sa-end{display:grid;justify-items:center;gap:.4rem;padding:1rem 0;text-align:center}.sa-end .material-symbols-outlined{font-size:3rem;color:#f4b400}.sa-end b{font-size:1.2rem}.sa-end span:not(.material-symbols-outlined){color:#8fb3c9}.sa-again{margin-top:.4rem;min-height:44px;padding:0 1.2rem;border-radius:999px;border:1.5px solid #2a4a63;background:transparent;color:#fff;font-weight:800}
@keyframes sa-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes sa-in{from{opacity:0;transform:translateY(6px)}}
.sa-ticks>li>.sa-tx{flex:1;min-width:0;line-height:1.45;overflow-wrap:anywhere}
.sa-ticks>li>.sa-tx b,.sa-ticks>li>.sa-tx strong{font-weight:800}
.sa-act{margin:0}

/* ===== passos ===== */
.sp[data-hdr="off"]>p.text-xs,.sp[data-hdr="off"]>h4,.sp[data-hdr="min"]>p.text-xs,.sp[data-hdr="min"]>h4{display:none!important}
.sp-head{display:grid;gap:.7rem;margin:1rem 0 1.1rem}
.sp-prog{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .3rem}
.sp-lab{font:900 .76rem Inter,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#008b76}
.sp-t{font:700 .85rem Inter,Arial,sans-serif;color:#475569}
.sp-seg{display:flex;gap:4px;width:100%;margin-top:.4rem}
.sp-seg b{flex:1;height:7px;border-radius:9px;background:#e2e8f0;transition:background .2s}
.sp-seg b.is-ok{background:#00cca3}.sp-seg b.is-now{background:#008b76}
.sp-tools{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.sp-all{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .8rem;border:0;background:transparent;color:#475569;font:800 .8rem Inter,Arial,sans-serif;cursor:pointer;border-radius:999px;text-decoration:underline;text-underline-offset:3px}
.sp-all .material-symbols-outlined{font-size:1.1rem}
.sp .sp-step{animation:sp-in .24s ease both}
.sp .sp-step:not(.is-cur){display:none}
.sp.sp-all .sp-step:not(.sp-off){display:block;margin-bottom:1.6rem}
.sp.sp-all .sp-step.sp-off{display:none}
.sp-step>*:first-child{margin-top:0!important}
.sp-step>*+*{margin-top:1rem}
.sp-step[data-kind="ov"]>.sa-sum{margin:0 0 1rem}
.sp .rw-wel>summary{display:none}
.sp-welcome{padding:1rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff}
.sp-welcome>*+*{margin-top:.8rem}
html body [data-lesson-viewer] button[data-lesson-next][data-sp-more]{font-size:0!important;letter-spacing:0!important}html body [data-lesson-viewer] button[data-lesson-next][data-sp-more] *{display:none!important}
html body [data-lesson-viewer] button[data-lesson-next][data-sp-more]::before{content:attr(data-sp-label) " ›";font-size:.9rem!important;font-weight:900}
.sa-go{display:block}
@keyframes sp-in{from{opacity:0;transform:translateY(8px)}}

/* ===== mapa da tela do Excel ===== */
.sa-map{margin:1rem 0 0}
.sa-map-h{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;color:#064e46}.sa-map-h .material-symbols-outlined{color:#f59e0b}.sa-map-n{margin-left:auto;font-weight:900;font-size:.8rem;background:#061a2b;color:#f4b400;border-radius:999px;padding:.15rem .6rem}
.sa-map.is-done .sa-map-n{background:#008b76;color:#fff}
.sa-xl{border:1px solid #107c41;border-radius:.7rem;overflow:hidden;background:#fff;max-width:660px;font:600 .8rem Calibri,Inter,Arial,sans-serif;color:#1f2937}
.sa-hp{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;transition:box-shadow .15s,background .15s}
.sa-hp:not(.is-seen){animation:sa-hint 1.9s ease-in-out infinite}
.sa-hp.is-seen{box-shadow:inset 0 0 0 2px rgba(0,204,163,.85)}
.sa-hp.is-now{box-shadow:inset 0 0 0 3px #f4b400;background-color:#fffbea}
.xl-rib{display:flex;flex-wrap:wrap;gap:.1rem .9rem;width:100%;min-height:44px;align-items:center;padding:.4rem .8rem;background:#107c41;color:#d6efe0;text-align:left;font:700 .76rem Inter,Arial,sans-serif}
.xl-rib .on{color:#fff;box-shadow:inset 0 -2px #fff}.xl-rib.is-now{background:#0b5c2f}
.xl-fx{display:flex;border-bottom:1px solid #d1d5db;background:#fff}
.xl-name{width:64px;min-height:44px;border-right:1px solid #d1d5db;font-weight:800;color:#081b3a;background:#fff}
.xl-bar{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:.6rem;padding:0 .6rem;text-align:left;background:#fff}
.xl-bar em{color:#107c41;font-style:italic;font-weight:800;padding-right:.6rem;border-right:1px solid #d1d5db}.xl-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-g{display:grid;grid-template-columns:30px repeat(5,minmax(0,1fr));background:#fff}
.xl-corner{background:#f3f4f6;border-right:1px solid #d1d5db;border-bottom:1px solid #d1d5db}
.xl-h{min-height:38px;padding:0;background:#f3f4f6;border-right:1px solid #d1d5db;border-bottom:1px solid #d1d5db;font-weight:800;font-size:.75rem;color:#4b5563}
.xl-c{display:flex;align-items:center;min-height:38px;min-width:0;padding:0 .35rem;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;font-size:.72rem;text-align:left;background:#fff}
.xl-c>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-th{font-weight:800;background:#fafafa}.xl-n{justify-content:flex-end}
.xl-c.is-active{outline:2px solid #107c41;outline-offset:-2px;background:#f0fdf4;font-weight:800;color:#081b3a}
.xl-tabs{display:flex;align-items:flex-end;gap:.5rem;padding:.35rem .5rem 0;background:#f3f4f6;border-top:1px solid #d1d5db}
.xl-tab{min-height:40px;padding:0 1rem;border:1px solid #d1d5db;border-bottom:0;border-radius:.4rem .4rem 0 0;background:#fff;color:#107c41;font-weight:800;box-shadow:inset 0 -3px #107c41}
.xl-plus{color:#6b7280;font-weight:800;padding:0 .4rem .5rem}
.sa-map-t{min-height:3.4rem;margin-top:.6rem;padding:.7rem .9rem;border-radius:.8rem;background:#061a2b;color:#fff;font-size:.92rem;line-height:1.4;display:grid;gap:.15rem}.sa-map-t:empty{display:none}.sa-map-t b{color:#f4b400}
.sa-list{margin-top:.8rem}.sa-list>summary{cursor:pointer;font-weight:800;color:#006c5b;font-size:.85rem;min-height:44px;display:flex;align-items:center}
@keyframes sa-hint{0%,100%{box-shadow:inset 0 0 0 2px rgba(245,158,11,0)}50%{box-shadow:inset 0 0 0 2px rgba(245,158,11,.95)}}

@media(max-width:767px){
  .sx .sa-tbl,.sx .sa-tbl tbody{display:block;width:100%;min-width:0}.sx .sa-tbl thead{display:none}
  .sx .sa-tbl tr{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;margin:0 0 .6rem;padding:.7rem .8rem;border:1px solid #e2e8f0;border-radius:.8rem;background:#fff}
  .sx .sa-tbl td,.sx .sa-tbl th{display:block;min-width:0;white-space:normal!important;overflow-wrap:anywhere;border:0!important;padding:0!important;background:transparent!important;color:#334155!important}
  .sx .sa-tbl td:first-child{font-weight:900;color:#081b3a!important;font-size:1rem}
  .sx .sa-tbl td:not(:first-child)::before{content:attr(data-l);display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-top:.35rem}
  .sx [data-lesson-page-content] .overflow-x-auto{overflow-x:visible!important}
  .sx[data-lesson-viewer] [data-lesson-title]{font-size:1.2rem!important;line-height:1.25!important;margin-top:.15rem!important}
  .sx .sp>h4{font-size:1.55rem!important;line-height:1.18!important}
  .sx .sp p.text-lg{font-size:1rem!important;line-height:1.6!important}
  .sa-paths>div{grid-template-columns:1fr}.sa-match{grid-template-columns:1fr 1fr;gap:.4rem}.sa-pc{font-size:.82rem;padding:.4rem .6rem}.sa-cls{grid-template-columns:1fr}.sa-spot{grid-template-columns:1fr 1fr}
  .xl-rib{font-size:.7rem;gap:.1rem .6rem}.xl-c{font-size:.66rem;padding:0 .25rem}
}
@media(prefers-reduced-motion:reduce){.sa-pc.is-bad,.sa-fb,.sp .sp-step,.sa-hp{animation:none!important}}

/* cabeçalho da aula mais enxuto: o conteúdo vem primeiro */
@media(min-width:768px){.sx[data-lesson-viewer] [data-lesson-title]{font-size:clamp(1.4rem,2.2vw,1.75rem)!important;line-height:1.2!important;margin-top:.1rem!important}}