/* Ensino · Professor Ulysses — acabamento das atividades interativas (enfileirado pelo mu-plugin ensino-atividades).
Fonte: C:\AI\projects\ensino-ulysses\themes\ensino-tema\atividades.css
A estrutura vem inline do plugin (#ensino-atividades), que carrega DEPOIS deste arquivo e usa seletores como
`.ensino-atv button` (0,1,1): por isso aqui quase tudo vai prefixado com `.ensino-atv` (0,2,0) para valer.
Aqui só tipografia, cor por trilha, estado (certo/errado), escuro e movimento. */
.ensino-atv{box-shadow:var(--e-sombra);border-top:4px solid var(--e-acento,var(--e-prim))}
.ensino-atv .ensino-atv__titulo{font-family:var(--e-fonte-titulo);font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin:0 0 .5rem;padding:0;border:0}
.ensino-atv__rotulo{color:var(--e-acento,var(--e-tinta-2))}
/* o número da questão pode vir como
ou
(navegação por títulos): mesma aparência */
.ensino-atv .ensino-atv__num{font-family:var(--e-fonte-texto);font-size:.85em;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--e-tinta-2);margin:0 0 .25rem;padding:0;border:0}
.ensino-atv__enunciado{font-size:1.08em;line-height:1.5}
.ensino-atv__apoio{font-size:.98em}
/* listas da atividade: nada de marcador ▸ nem recuo herdados da prosa */
.ensino-atv :is(.ensino-atv__alts-btn,.ensino-atv__pecas-btn,.ensino-atv__feitos,.ensino-atv__questoes,.ensino-atv__pares ul){list-style:none;padding-left:0}
.ensino-atv :is(.ensino-atv__alts-btn,.ensino-atv__pecas-btn,.ensino-atv__feitos,.ensino-atv__pares ul)>li{margin:0;padding:0}
.ensino-atv :is(.ensino-atv__alts-btn,.ensino-atv__pecas-btn,.ensino-atv__feitos,.ensino-atv__questoes,.ensino-atv__pares ul)>li::marker{content:none}
/* alternativas: texto à esquerda, letra alinhada */
.ensino-atv .ensino-atv__alt{justify-content:flex-start;text-align:left;transition:background-color .15s ease,box-shadow .15s ease}
.ensino-atv .ensino-atv__alt:focus-visible,.ensino-atv button:focus-visible,.ensino-atv__lacuna:focus-visible,.ensino-atv__peca [role=button]:focus-visible{outline:3px solid var(--e-foco);outline-offset:2px}
.ensino-atv .ensino-atv__alt[aria-pressed=true]{background:var(--e-acento-suave);border-color:var(--e-prim-texto);box-shadow:inset 0 0 0 2px var(--e-prim-texto)}
/* depois de conferir: estado pela cor E pelo ícone (✓/✗), e sem a opacidade do botão travado */
.ensino-atv .ensino-atv__alt.ensino-atv__alt--certa,.ensino-atv .ensino-atv__alt.ensino-atv__alt--certa[aria-pressed=true],.ensino-atv .ensino-atv__alt.ensino-atv__alt--certa:hover{background:var(--e-ok-fundo);border-color:var(--e-ok);box-shadow:inset 0 0 0 2px var(--e-ok);color:var(--e-tinta);font-weight:600;opacity:1}
.ensino-atv .ensino-atv__alt.ensino-atv__alt--errada,.ensino-atv .ensino-atv__alt.ensino-atv__alt--errada[aria-pressed=true],.ensino-atv .ensino-atv__alt.ensino-atv__alt--errada:hover{background:var(--e-erro-fundo);border-color:var(--e-erro);box-shadow:inset 0 0 0 2px var(--e-erro);color:var(--e-tinta);opacity:1}
.ensino-atv .ensino-atv__alt--certa .ensino-atv__letra{color:var(--e-ok)}
.ensino-atv .ensino-atv__alt--errada .ensino-atv__letra{color:var(--e-erro)}
.ensino-atv .ensino-atv__alt--certa::after,.ensino-atv .ensino-atv__alt--errada::after{
content:"";flex:none;align-self:center;width:1.3rem;height:1.3rem;margin-left:auto;background:currentColor;
mask:var(--e-atv-icone) center/contain no-repeat;-webkit-mask:var(--e-atv-icone) center/contain no-repeat;
}
/* o ícone é decorativo (texto alternativo vazio): o motor já põe "(sua resposta, incorreta)" em texto oculto no botão */
.ensino-atv .ensino-atv__alt--certa::after{content:"";content:"" / "";color:var(--e-ok);--e-atv-icone:url("data:image/svg+xml;utf8,")}
.ensino-atv .ensino-atv__alt--errada::after{content:"";content:"" / "";color:var(--e-erro);--e-atv-icone:url("data:image/svg+xml;utf8,")}
.ensino-atv input.ensino-atv__alt--certa{border-color:var(--e-ok);box-shadow:inset 0 0 0 2px var(--e-ok);background:var(--e-ok-fundo)}
.ensino-atv input.ensino-atv__alt--errada{border-color:var(--e-erro);box-shadow:inset 0 0 0 2px var(--e-erro);background:var(--e-erro-fundo)}
.ensino-atv .ensino-atv__lacuna{border-color:var(--e-borda-campo);background:var(--e-cartao)}
/* feedback: só a primeira linha na cor do estado; explicação e cilada em tinta normal ("errar aqui é o objetivo") */
.ensino-atv .ensino-atv__feedback{color:var(--e-tinta);background:var(--e-cartao);border-color:var(--e-borda);border-left-width:5px}
.ensino-atv .ensino-atv__feedback--ok{border-left-color:var(--e-ok);background:color-mix(in srgb,var(--e-ok-fundo) 55%,var(--e-cartao))}
.ensino-atv .ensino-atv__feedback--erro{border-left-color:var(--e-erro);background:color-mix(in srgb,var(--e-erro-fundo) 55%,var(--e-cartao))}
.ensino-atv__feedback>p:first-child,.ensino-atv__feedback-titulo{font-weight:700}
.ensino-atv__feedback--ok>p:first-child,.ensino-atv__feedback--ok .ensino-atv__feedback-titulo{color:var(--e-ok)}
.ensino-atv__feedback--erro>p:first-child,.ensino-atv__feedback--erro .ensino-atv__feedback-titulo{color:var(--e-erro)}
.ensino-atv__explicacao{color:var(--e-tinta)}
.ensino-atv__cilada p{margin:0;color:inherit;font-weight:400}
.ensino-atv__feedback .ensino-miudo{color:var(--e-tinta-2)}
.ensino-atv__cilada{margin:.5rem 0 0;padding:.5rem .75rem;border-left:3px solid var(--e-atencao);border-radius:0 var(--e-raio) var(--e-raio) 0;background:var(--e-atencao-fundo);color:var(--e-tinta)}
.ensino-atv__progresso{color:var(--e-tinta-2)}
.ensino-atv__progresso progress{appearance:none;-webkit-appearance:none;border:0;border-radius:99px;overflow:hidden;background:var(--e-borda)}
.ensino-atv__progresso progress::-webkit-progress-bar{background:var(--e-borda);border-radius:99px}
.ensino-atv__progresso progress::-webkit-progress-value{background:var(--e-acento,var(--e-prim));border-radius:99px;transition:width .3s ease}
.ensino-atv__progresso progress::-moz-progress-bar{background:var(--e-acento,var(--e-prim));border-radius:99px}
/* resultado: placar grande, recompensa em destaque (selo +XP, sequência com chama, medalha) e próximos passos */
.ensino-atv__resumo strong{font-family:var(--e-fonte-titulo);color:var(--e-acento,var(--e-prim));font-size:2.6rem}
.ensino-atv__mensagem{font-size:1.05em}
.ensino-atv .ensino-atv__resumo>.ensino-miudo{display:inline-block;margin:.25rem auto .75rem;padding:.4rem .9rem;border-radius:99px;background:color-mix(in srgb,var(--e-ouro) 22%,var(--e-cartao));color:var(--e-tinta);font-size:1rem;font-weight:700;opacity:1}
.ensino-atv__recompensa{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin:.75rem 0 1rem}
.ensino-atv__recompensa>p{margin:0}
.ensino-atv__xp{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1.1rem;border-radius:99px;background:var(--e-ouro);color:#1B2733;font-weight:800;font-size:1.3rem;line-height:1.2;animation:ensino-atv-xp .5s cubic-bezier(.2,.9,.3,1.4) both}
.ensino-atv__seq,.ensino-atv__medalha{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--e-tinta)}
.ensino-atv__seq svg{color:#C2410C}
.ensino-atv__medalha svg{color:var(--e-ouro-texto)}
.ensino-atv .ensino-atv__xp-total{color:var(--e-tinta-2);opacity:1}
@keyframes ensino-atv-xp{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.ensino-atv .ensino-atv__acoes--fim{justify-content:center}
/* com o resultado na tela, os caminhos do tema abaixo da atividade não se repetem */
.e-leitura__corpo:has(.ensino-atv__resumo:not([hidden])) .e-material__depois{display:none}
/* botões da atividade: a classe resolve sozinha, sem !important. O CSS inline do plugin carrega depois deste
arquivo com `.ensino-atv .ensino-atv__btn--prim` (0,2,0); o `body` na frente dá (0,2,1). */
body .ensino-atv .ensino-atv__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.2rem;border-radius:var(--e-raio);border:1px solid var(--e-borda-campo);font-weight:600;text-decoration:none;color:var(--e-tinta);background:transparent}
body .ensino-atv .ensino-atv__btn--prim,body .ensino-atv .ensino-atv__btn.ensino-atv__btn--prim{background:var(--e-acento,var(--e-prim));color:#fff;border-color:transparent}
body .ensino-atv .ensino-atv__btn--prim:hover{filter:brightness(.94);background:var(--e-acento,var(--e-prim));color:#fff}
:root[data-tema="escuro"] body .ensino-atv .ensino-atv__btn--prim,:root[data-tema="escuro"] body .ensino-atv .ensino-atv__btn--prim:hover{color:#101E2C}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) body .ensino-atv .ensino-atv__btn--prim,:root:not([data-tema="claro"]) body .ensino-atv .ensino-atv__btn--prim:hover{color:#101E2C}}
body .ensino-atv .ensino-atv__btn--contorno:hover{background:var(--e-superficie);color:var(--e-tinta)}
/* cartão de memorização: o seletor do plugin `.ensino-atv button` ganhava de `.ensino-atv__cartao` (48 px, fonte de texto) */
.ensino-atv .ensino-atv__cartao{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;width:100%;min-height:180px;margin:.5rem 0;padding:1.25rem;text-align:center;
font-family:var(--e-fonte-titulo);font-size:1.45rem;line-height:1.35;font-weight:500;background:var(--e-superficie);border:1px solid var(--e-borda);border-radius:calc(var(--e-raio) + 4px);box-shadow:var(--e-sombra);transition:transform .15s ease,box-shadow .15s ease;perspective:800px}
.ensino-atv .ensino-atv__cartao:hover{transform:translateY(-2px);background:var(--e-superficie);box-shadow:var(--e-sombra)}
/* virar: o JS troca o conteúdo do cartão; o texto novo entra girando (só transform/opacity) */
.ensino-atv .ensino-atv__cartao>span{display:block;animation:ensino-atv-vira .35s ease-out both;transform-origin:50% 50%}
@keyframes ensino-atv-vira{from{opacity:0;transform:rotateY(80deg)}to{opacity:1;transform:none}}
/* quando o motor mandar frente e verso juntos (.ensino-atv__frente/.ensino-atv__verso), a frente fica pequena em cima */
.ensino-atv .ensino-atv__cartao--virado :is(.ensino-atv__frente,.ensino-atv__cartao-frente){font-size:.72em;color:var(--e-tinta-2);font-family:var(--e-fonte-texto);animation:none}
.ensino-atv .ensino-atv__cartao--virado{border-color:color-mix(in srgb,var(--e-acento,var(--e-prim)) 45%,var(--e-borda))}
.ensino-atv .ensino-atv__notas button strong{font-size:1em}
.ensino-atv .ensino-atv__notas button{justify-content:center;flex-direction:column;text-align:center}
.ensino-atv .ensino-atv__notas small{opacity:1;color:var(--e-tinta-2)}
.ensino-atv__notas button:nth-child(1){border-color:color-mix(in srgb,var(--e-erro) 45%,var(--e-borda))}
.ensino-atv__notas button:nth-child(4){border-color:color-mix(in srgb,var(--e-ok) 45%,var(--e-borda))}
.ensino-atv__tempo{font-weight:700;color:var(--e-adultos)}
.ensino-atv__dica{border-left:3px solid var(--e-ouro);padding-left:.6rem}
/* ligar pares: duas colunas também no celular (itens curtos cabem em ~150 px); legenda de cada coluna */
.ensino-atv .ensino-atv__pares{grid-template-columns:1fr 1fr;column-gap:.6rem}
.ensino-atv .ensino-atv__pares>ul::before{content:attr(aria-label);content:attr(aria-label) / "";display:block;font-size:.8rem;font-weight:600;line-height:1.3;color:var(--e-tinta-2);margin:0 0 .15rem}
.ensino-atv .ensino-atv__pares--empilhar{grid-template-columns:1fr}
.ensino-atv .ensino-atv__coluna-rotulo{font-size:.8rem;margin:0 0 .15rem}
/* par ligado: fundo da escola e número do par (a cor não é o único sinal) */
.ensino-atv .ensino-atv__alt.ensino-atv__alt--ligado{background:color-mix(in srgb,var(--e-escola) 10%,var(--e-cartao));border-color:color-mix(in srgb,var(--e-escola) 55%,var(--e-borda))}
.ensino-atv__par-num{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .3rem;border-radius:99px;background:var(--e-escola);color:#fff;font-size:.8rem;font-weight:700}
:root[data-tema="escuro"] .ensino-atv__par-num{color:#0B1A26}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .ensino-atv__par-num{color:#0B1A26}}
.ensino-atv__par-num:empty{display:none}
/* versão acessível: mais ar, uma coisa por vez */
.ensino-atv--acessivel{padding:1.4rem 1.4rem 1.6rem}
.ensino-atv--acessivel .ensino-atv__q{padding-bottom:0;border-bottom:0}
.ensino-atv--acessivel .ensino-atv__alts-btn{gap:.75rem}
.ensino-atv--acessivel .ensino-atv__letra{font-size:1.1em}
.ensino-atv--acessivel .ensino-atv__cabeca{margin-bottom:.25rem}
.ensino-atv--acessivel .ensino-atv__instrucao{font-size:.95em;margin-bottom:.75rem}
.ensino-atv .ensino-atv__ouvir{margin:0 0 .75rem;background:var(--e-acento-suave);color:var(--e-tinta);justify-content:flex-start}
/* Praticar: painel com 3 números também no celular, menores */
body .ensino-atv-painel{box-shadow:var(--e-sombra);grid-template-columns:repeat(3,minmax(0,1fr))}
.ensino-atv-painel__num strong{font-family:var(--e-fonte-titulo);color:var(--e-acento,var(--e-prim))}
.ensino-atv-painel__num span{color:var(--e-tinta-2)}
.ensino-atv-medalhas li{background:var(--e-superficie)}
/* selos de modo: `body .ensino-selo` (0,1,1) do tema ganhava de `.ensino-selo--modo-*` e todos saíam iguais */
body .ensino-selo.ensino-selo--modo-treino{background:var(--e-acento-suave);color:var(--e-prim-texto)}
body .ensino-selo.ensino-selo--modo-revisao-prova{background:#FBF3E0;color:#7A5A12}
body .ensino-selo.ensino-selo--modo-desafio{background:#FBE9E7;color:var(--e-adultos)}
body .ensino-selo.ensino-selo--modo-cartoes{background:var(--e-ok-fundo);color:var(--e-ok)}
@media (prefers-color-scheme:dark){
:root:not([data-tema="claro"]) body .ensino-selo.ensino-selo--modo-revisao-prova{background:#3B2F12;color:#F1D48A}
:root:not([data-tema="claro"]) body .ensino-selo.ensino-selo--modo-desafio{background:#3B1616;color:var(--e-adultos)}
}
:root[data-tema="escuro"] body .ensino-selo.ensino-selo--modo-revisao-prova{background:#3B2F12;color:#F1D48A}
:root[data-tema="escuro"] body .ensino-selo.ensino-selo--modo-desafio{background:#3B1616;color:var(--e-adultos)}
/* Praticar no primeiro uso: em vez de três zeros, o convite do motor (.ensino-praticar-boas-vindas) vira um cartão;
o painel vazio fica só com a nota de privacidade, sem caixa */
body .ensino-praticar-boas-vindas{display:grid;justify-items:center;gap:.5rem;text-align:center;margin:0 0 .75rem;padding:1.5rem 1.25rem 1.35rem;border:1px solid var(--e-borda);border-top:4px solid var(--e-acento,var(--e-prim));border-radius:calc(var(--e-raio) + 4px);background:var(--e-cartao);box-shadow:var(--e-sombra)}
body .ensino-praticar-boas-vindas p{margin:0;max-width:42ch;color:var(--e-tinta-2)}
body .ensino-praticar-boas-vindas .ensino-praticar-boas-vindas__titulo{font-family:var(--e-fonte-titulo);font-size:clamp(1.3rem,1.15rem + .6vw,1.55rem);line-height:1.2;color:var(--e-tinta)}
.ensino-praticar-boas-vindas__titulo strong{font-weight:600}
body .ensino-praticar-boas-vindas .ensino-praticar-boas-vindas__acao{margin-top:.5rem}
/* o botão do convite é o mesmo primário das atividades (acento da trilha), não o marinho genérico do .e-btn */
body .ensino-praticar-boas-vindas .ensino-atv__btn--prim{background:var(--e-acento,var(--e-prim));color:#fff;border-color:transparent}
:root[data-tema="escuro"] body .ensino-praticar-boas-vindas .ensino-atv__btn--prim{color:#101E2C}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) body .ensino-praticar-boas-vindas .ensino-atv__btn--prim{color:#101E2C}}
body .ensino-atv-painel.ensino-atv-painel--vazio{display:block;padding:0;border:0;background:none;box-shadow:none}
.ensino-atv-painel--vazio .ensino-atv-medalhas:empty{display:none}
.ensino-atv-entrar{margin:0 0 1.5rem}
.ensino-atv-card--feita{border-left:4px solid var(--e-ok)}
/* movimento: só transform/opacity, e nada em reduced-motion */
.ensino-atv__feedback{animation:ensino-atv-surge .25s ease-out}
@keyframes ensino-atv-surge{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.ensino-atv__feedback,.ensino-atv .ensino-atv__cartao,.ensino-atv .ensino-atv__cartao>span,.ensino-atv .ensino-atv__alt,.ensino-atv__xp{animation:none;transition:none}
.ensino-atv .ensino-atv__cartao:hover{transform:none}
}
/* 375 px: nada de rolagem lateral */
@media (max-width:480px){
.ensino-atv{padding:.9rem .9rem 1.1rem;margin-left:0;margin-right:0}
.ensino-atv__colunas{gap:.75rem}
.ensino-atv__resumo strong{font-size:2.2rem}
.ensino-atv .ensino-atv__cartao{font-size:1.25rem;min-height:150px}
.ensino-atv .ensino-atv__pares button{padding:.5rem .6rem}
body .ensino-atv-painel{gap:.4rem;padding:.8rem .6rem}
body .ensino-atv-painel__num strong{font-size:1.45rem}
body .ensino-atv-painel__num span{font-size:.78rem;line-height:1.25;display:block}
}