/*
 * 62_pratica.css — LEVA 2309 (docs/GUSTAVO-2309.md §2.1–2.3) · dono: pacote P3 pratica.
 *
 * A lição curta do dia em um frame só, com o feedback imediato (cor, ícone e a explicação).
 *
 * Não precisa de @import: o layout usa `stylesheet_link_tag :app` e o
 * Propshaft emite um <link> por folha, em ordem alfabética — o número no nome
 * é a posição na cascata (depois da prova, 60, que é a tela-irmã).
 *
 * ─── A PRÁTICA NÃO É A PROVA, E A TELA TEM QUE DIZER ISSO SEM ESCREVER ─────
 *
 * A prova (60_avaliacao.css) é sóbria de propósito: relógio, nenhuma cor de
 * acerto, a marca como única confirmação. A prática é o contrário — é onde o
 * produto PODE dizer "certo" e "errado" na hora (§2.3), então ela usa verde e
 * coral com ícone, a curva elástica no acerto e a barra que enche. O que não
 * muda é a régua do aluno: alvo de toque de `--alvo-grande`, uma mão, 390 px.
 *
 * As alternativas aqui são um bloco PRÓPRIO (`.pratica-alternativa`) e não o
 * `.alternativa` da prova: lá o check verde é proibido (§12.3), aqui ele é o
 * assunto. Reusar a classe e sobrescrever seria acoplar as duas telas pela
 * cascata — o dia em que a prova mudar, a prática mudaria junto sem querer.
 *
 * ─── MOVIMENTO ───────────────────────────────────────────────────────────
 * Só `transform` e `opacity`, com as curvas e os tempos de 03_movimento.css.
 * `prefers-reduced-motion` desliga tudo no fim desta folha (e 02_base.css já
 * zera no atacado): o conteúdo é o mesmo, sem o movimento. A informação nunca
 * espera a animação — tudo já nasce no lugar e visível no HTML.
 *
 * Tudo por token; nenhum hex aqui.
 */

/* ═══ A TELA ══════════════════════════════════════════════════════════════ */

/* O `padding-bottom` é o espaço da barra inferior do app (fixa no celular):
   sem ele o "Continuar" nascia debaixo dela — o mesmo cuidado da prova. */
.pratica {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  max-width: 40rem;
  margin: 0 auto;
  padding-bottom: calc(var(--esp-10) + 3.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 48rem) {
  .pratica { padding-bottom: var(--esp-10) }
}

.pratica__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.pratica__etiqueta {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* O "X" de sair: alvo de 48 px, discreto. Sair da prática não perde nada
   (a prática aberta do dia é retomada), então ele não pede confirmação. */
.pratica__sair {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  margin-right: calc(-1 * var(--esp-2));
  border-radius: var(--raio-redondo);
  color: var(--texto-tenue);
}
.pratica__sair:hover { color: var(--texto); background: var(--fundo-elevado) }
.pratica__sair:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px }

.pratica__moldura { display: block }

/* Cada troca do frame é uma CENA nova, e ela entra de baixo — a mesma frase
   de movimento de `entra-de-baixo` (03_movimento.css), com a curva de
   entrada. 220 ms: a pessoa não espera, só percebe que mudou. */
.pratica__cena {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  animation: entra-de-baixo var(--tempo-normal) var(--curva-entrada) both;
  /* A cena é rolada até o topo a cada troca (`app#focarAoCarregar`); a margem
     deixa o cabeçalho grudado fora do caminho. */
  scroll-margin-top: calc(3.5rem + var(--esp-3));
}
@media (min-width: 48rem) {
  .pratica__cena { scroll-margin-top: calc(7rem + 1px + var(--esp-3)) }
}

/* Enviando: a cena inteira abaixa o tom — o dedo vê que "pegou" antes de a
   resposta chegar, sem spinner no meio da questão. */
.pratica__cena--respondendo .pratica__alternativas { opacity: 0.6; transition: opacity var(--tempo-rapido) var(--curva-padrao) }

/* ═══ A BARRA n/5 ═════════════════════════════════════════════════════════ */

.pratica-progresso { display: flex; flex-direction: column; gap: var(--esp-2) }

.pratica-progresso__trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O segmento é o trilho; o `::after` é o preenchimento, que ENCHE por
   `scaleX` (a CSP descarta `style=""`, e `width` animado custa layout). */
.pratica-progresso__passo {
  position: relative;
  height: 0.5rem;
  border-radius: var(--raio-redondo);
  background: var(--fundo-fundo);
  overflow: hidden;
}
.pratica-progresso__passo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--passo-cor, transparent);
  transform-origin: left center;
  transform: scaleX(var(--passo-cheio, 0));
}
.pratica-progresso__passo--atual  { --passo-cor: var(--cor-marca-tenue); --passo-cheio: 1 }
.pratica-progresso__passo--certa  { --passo-cor: var(--cor-aprovado); --passo-cheio: 1 }
.pratica-progresso__passo--errada { --passo-cor: var(--cor-reprovado); --passo-cheio: 1 }
.pratica-progresso__passo--recente::after {
  animation: pratica-enche var(--tempo-lento) var(--curva-entrada) both;
}
@keyframes pratica-enche { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.pratica-progresso__texto {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}

/* ═══ A QUESTÃO ═══════════════════════════════════════════════════════════ */

/* "Revisão": a pessoa já viu esta questão (e provavelmente errou). Dizer
   isso muda a leitura — é segunda chance, não pegadinha. */
.pratica__origem {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-ritmo-suave);
  color: var(--cor-ritmo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}

.pratica__enunciado {
  margin: 0;
  font-size: var(--texto-xl);
  line-height: var(--altura-apertada);
  overflow-wrap: anywhere;
}
.pratica__enunciado:focus { outline: none }

.pratica__formulario { display: flex; flex-direction: column; gap: var(--esp-5) }

.pratica__alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.pratica__legenda {
  padding: 0;
  margin-bottom: var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}

/* A ALTERNATIVA. O `<label>` embrulha o rádio: a área inteira é o alvo, com
   `--alvo-grande` (56 px) de altura mínima. O rádio continua no DOM e
   focável (teclado, leitor de tela, `:has(:checked)`). */
.pratica-alternativa {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-grande);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
  -webkit-tap-highlight-color: transparent;
}

.pratica-alternativa--opcao {
  cursor: pointer;
  transition: transform var(--tempo-rapido) var(--curva-saida);
}
@media (hover: hover) {
  .pratica-alternativa--opcao:hover { border-color: var(--cor-marca-tenue) }
}
.pratica-alternativa--opcao:active { transform: scale(0.99) }

.pratica-alternativa__controle {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pratica-alternativa__letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-redondo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}

.pratica-alternativa__texto {
  flex: 1;
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  overflow-wrap: anywhere;
}

/* Escolhida (ainda não conferida): a MARCA, não verde — escolher não é
   acertar, e pintar de verde antes de conferir seria mentir por um segundo. */
.pratica-alternativa:has(.pratica-alternativa__controle:checked) {
  border-color: var(--cor-marca);
  background: var(--cor-marca-suave);
}
.pratica-alternativa:has(.pratica-alternativa__controle:checked) .pratica-alternativa__letra {
  border-color: transparent;
  background: var(--cor-marca-forte);
  color: var(--cor-marca-contraste);
}
.pratica-alternativa:has(.pratica-alternativa__controle:focus-visible) {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}
.pratica-alternativa:has(.pratica-alternativa__controle:disabled) { cursor: default }

/* ── A correção ─────────────────────────────────────────────────────────── */

.pratica-alternativa__marca { flex: none; display: grid; place-items: center }

.pratica-alternativa--certa {
  border-color: var(--cor-aprovado);
  background: var(--cor-aprovado-suave);
}
.pratica-alternativa--certa .pratica-alternativa__letra {
  border-color: transparent;
  background: var(--cor-aprovado-forte);
  color: var(--cor-aprovado-contraste);
}
.pratica-alternativa--certa .pratica-alternativa__marca { color: var(--cor-aprovado) }

.pratica-alternativa--errada {
  border-color: var(--cor-reprovado);
  background: var(--cor-reprovado-suave);
}
.pratica-alternativa--errada .pratica-alternativa__letra {
  border-color: transparent;
  background: var(--cor-reprovado-forte);
  color: var(--cor-reprovado-contraste);
}
.pratica-alternativa--errada .pratica-alternativa__marca { color: var(--cor-reprovado) }

/* As que não importam mais recuam — o olho vai direto para as duas que
   contam. Opacidade e não cinza de texto: continua legível para quem quer
   reler. */
.pratica-alternativa--apagada { opacity: 0.55; border-color: var(--borda) }

/* No acerto, a certa dá o pulso elástico, uma vez (a curva de confirmação
   da marca); no erro, a escolhida dá um "não" curto de lado. As duas só com
   `transform`. */
.pratica__cena--certa .pratica-alternativa--certa {
  animation: pulso-confirma var(--tempo-lento) var(--curva-elastica) both;
}
.pratica__cena--errada .pratica-alternativa--errada {
  animation: pratica-balanca var(--tempo-lento) var(--curva-padrao) both;
}
@keyframes pratica-balanca {
  0%, 100% { transform: translateX(0) }
  20%      { transform: translateX(-6px) }
  40%      { transform: translateX(5px) }
  60%      { transform: translateX(-3px) }
  80%      { transform: translateX(2px) }
}

/* ═══ O FEEDBACK ══════════════════════════════════════════════════════════ */

/* Um cartão com a cor do veredito na borda de cima — não um bloco inteiro
   verde ou vermelho: a explicação é para ser LIDA, e texto longo sobre fundo
   saturado cansa em três linhas. Sobe de baixo (a folha da marca, §3). */
.pratica-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--feedback-cor);
  border-radius: var(--raio-4);
  background: var(--fundo-elevado);
  box-shadow: var(--sombra-2);
  animation: pratica-folha var(--tempo-lento) var(--curva-entrada) both;
  animation-delay: 60ms;
}
.pratica-feedback--certa  { --feedback-cor: var(--cor-aprovado) }
.pratica-feedback--errada { --feedback-cor: var(--cor-reprovado) }

@keyframes pratica-folha {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0) }
  to   { opacity: 1; transform: none }
}

.pratica-feedback__veredito {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--feedback-cor);
}

.pratica-feedback__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-redondo);
  background: var(--feedback-cor);
  color: var(--fundo);
  animation: pratica-carimbo var(--tempo-lento) var(--curva-elastica) both;
  animation-delay: 120ms;
}
@keyframes pratica-carimbo {
  from { opacity: 0; transform: scale(0.4) rotate(-12deg) }
  to   { opacity: 1; transform: none }
}

.pratica-feedback__explicacao { display: flex; flex-direction: column; gap: var(--esp-2); border-radius: var(--raio-2) }
.pratica-feedback__explicacao:focus { outline: none }
.pratica-feedback__explicacao:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 4px }

.pratica-feedback__titulo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.pratica-feedback__texto {
  margin: 0;
  font-size: var(--texto-md);
  line-height: var(--altura-solta);
  color: var(--texto);
  max-width: var(--largura-leitura);
}
.pratica-feedback__texto--tenue { color: var(--texto-tenue) }

.pratica-feedback__volta {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.pratica__acao { margin: 0 }
.pratica__acao .botao, .pratica__acao.botao { width: 100% }

/* No desktop o botão não precisa atravessar a coluna inteira. */
@media (min-width: 40rem) {
  .pratica__conferir, .pratica__acao.botao, .pratica__acao .botao { width: auto; min-width: 16rem; align-self: flex-end }
  .pratica__acao { display: flex; justify-content: flex-end }
}

.pratica__fim-texto { margin: 0; font-size: var(--texto-lg); font-weight: var(--peso-forte) }
.pratica__fim-texto:focus { outline: none }

/* ═══ O RESULTADO ═════════════════════════════════════════════════════════ */

.pratica-resultado { align-items: center; text-align: center; padding-top: var(--esp-6) }

.pratica-resultado__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-redondo);
  background: var(--cor-aprovado-suave);
  color: var(--cor-aprovado);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

.pratica-resultado__placar {
  margin: 0;
  font-size: var(--texto-3xl);
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
}
.pratica-resultado__placar:focus { outline: none }

/* O "+N". Cor de PONTOS (a mesma do extrato e do chip de nível): é o ledger
   falando, não a prática. Cresce de dentro com a curva elástica, uma vez. */
.pratica-resultado__ganho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  margin: 0;
}
.pratica-resultado__pontos {
  display: inline-block;
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-redondo);
  background: var(--cor-pontos-suave);
  color: var(--cor-pontos);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  animation: pratica-ganho var(--tempo-lento) var(--curva-elastica) both;
  animation-delay: 120ms;
}
@keyframes pratica-ganho {
  from { opacity: 0; transform: translate3d(0, 0.5rem, 0) scale(0.8) }
  to   { opacity: 1; transform: none }
}
.pratica-resultado__ganho-rotulo { font-size: var(--texto-sm); color: var(--texto-tenue) }
.pratica-resultado__ganho--zero { font-size: var(--texto-sm); color: var(--texto-suave) }

.pratica-resultado__hoje { width: 100%; max-width: 24rem; text-align: left }

.pratica-resultado__recado { margin: 0; color: var(--texto-suave); max-width: var(--largura-leitura) }

.pratica-resultado__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  width: 100%;
  max-width: 24rem;
}

/* ═══ A PORTA (/praticas/nova, modal no painel) ═══════════════════════════ */

.pratica-porta { display: flex; flex-direction: column; gap: var(--esp-4) }
.pratica-porta__texto { margin: 0; color: var(--texto-suave); line-height: var(--altura-normal) }

.pratica-porta__revisoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-3);
  background: var(--fundo-fundo);
  color: var(--texto-suave);
  font-weight: var(--peso-medio);
}
.pratica-porta__revisoes--vencidas { background: var(--cor-ritmo-suave); color: var(--cor-ritmo) }

.pratica-porta__comecar { margin: 0; width: 100% }

/* ═══ O CARTÃO DO PAINEL ══════════════════════════════════════════════════ */

.cartao-pratica {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
}

.cartao-pratica__topo { display: flex; align-items: center; gap: var(--esp-3) }

.cartao-pratica__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio-3);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
}
.cartao-pratica--fechada .cartao-pratica__icone { background: var(--fundo-fundo); color: var(--texto-tenue) }

.cartao-pratica__cabeca { min-width: 0 }
.cartao-pratica__titulo { font-size: var(--texto-lg) }

.cartao-pratica__revisoes {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}
.cartao-pratica__revisoes--vencidas { color: var(--cor-ritmo); font-weight: var(--peso-forte) }

.cartao-pratica__bloqueio { margin: 0; font-size: var(--texto-sm); color: var(--texto-suave) }

/* O botão desenhado dentro do cartão acionável: o clique é do gatilho do
   título, esticado. `pointer-events: none` para o hover do cartão ser o
   único — dois hovers competindo no mesmo lugar parecem dois alvos. */
.cartao-pratica__cta { pointer-events: none }
@media (hover: hover) {
  .cartao--acionavel.cartao-pratica:hover .cartao-pratica__cta .botao__icone { transform: translateX(3px) }
}
.cartao-pratica__cta .botao__icone { transition: transform var(--tempo-rapido) var(--curva-entrada) }

/* ═══ MOVIMENTO REDUZIDO ══════════════════════════════════════════════════
   O mesmo conteúdo, parado. 02_base.css já zera durações no atacado; aqui o
   `animation: none` garante que nada fique no quadro inicial (opacidade 0)
   se alguma folha futura mexer naquele bloco. */
@media (prefers-reduced-motion: reduce) {
  .pratica__cena,
  .pratica-feedback,
  .pratica-feedback__icone,
  .pratica-resultado__pontos,
  .pratica-progresso__passo--recente::after,
  .pratica__cena--certa .pratica-alternativa--certa,
  .pratica__cena--errada .pratica-alternativa--errada { animation: none }
  .pratica-alternativa--opcao:active { transform: none }
}
[data-movimento="reduzido"] .pratica__cena,
[data-movimento="reduzido"] .pratica-feedback,
[data-movimento="reduzido"] .pratica-feedback__icone,
[data-movimento="reduzido"] .pratica-resultado__pontos { animation: none !important }