/* ============================================================
   PÁGINA — Aula / Quiz / Avaliação final do aluno.
   Cobre: app/views/aulas/show, _estado_aula; quizzes/show, resultado;
   avaliacoes/show, resultado; shared/_revisao_respostas.
   Só entram aqui padrões locais que NÃO casam 1:1 com o DS
   (valores divergentes). O resto usa as classes compartilhadas.
   ============================================================ */

/* ── Cabeçalho de aula ──────────────────────────────────────
   O título da aula/quiz/avaliação repete o "titulo-pagina" do DS
   (24/700/--texto) mas com margens próprias por contexto, então
   ficam aqui (o .titulo-pagina do DS tem margin:0). */

/* "Módulo X · Aula Y" acima do título (aulas/show). */
.aula-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
  margin: 0 0 12px;
}

/* Título da aula (aulas/show). */
.aula-titulo {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 20px;
  line-height: 1.3;
}

/* Título de página com margem inferior 24 (resultado/avaliação). */
.aula-titulo-secao {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 24px;
}

/* Título do bloco de questões (quiz/avaliação) — sem margem inferior;
   o subtítulo abaixo controla o espaçamento. */
.aula-titulo-questoes {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 8px;
}

/* Subtítulo logo abaixo do título de questões. */
.aula-subtitulo {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0 0 24px;
}

/* ── Player / mídia ─────────────────────────────────────────
   Vídeo do YouTube: moldura 16/9 com cantos arredondados. */
.aula-video {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 16/9;
}
.aula-video__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Placeholder quando não há vídeo. */
.aula-video-vazio {
  background: var(--fundo-suave);
  border: 1px dashed var(--borda);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  margin-bottom: 16px;
}
.aula-video-vazio__texto {
  color: var(--texto-suave);
  font-size: 14px;
}

/* ── Bloco de conteúdo (artigo inline / markdown) ───────────
   Card branco com padding generoso (32 40) — diverge do .card
   do DS (padding 24), então é classe de página. */
.aula-conteudo {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 32px 40px;
  margin-bottom: 24px;
}

/* Cabeçalho do artigo inline (chip + "concluído automaticamente"). */
.aula-artigo-inline__cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.aula-artigo-inline__auto {
  font-size: 12px;
  color: var(--sucesso-texto);
  font-weight: 600;
  margin-left: auto;
}

/* ── Estado da aula (_estado_aula) ──────────────────────────
   Faixa duração + "tem quiz" / "aula concluída" — quando concluída, a
   pesquisa de satisfação por estrelas entra do lado esquerdo, na mesma
   linha da flag de conclusão (à direita). */
.aula-estado {
  margin: 0 0 24px;
}
.aula-estado__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.aula-estado__esquerda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.aula-estado__info {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 0;
}
.aula-estado__quiz {
  color: var(--marca-texto);
  font-weight: 600;
}
/* Separação do "· tem quiz" quando há duração antes */
.aula-estado__quiz--apos-duracao { margin-left: 8px; }
.aula-estado__concluida {
  font-size: 13px;
  color: var(--sucesso-texto);
  font-weight: 500;
}

/* ── Conteúdo complementar ──────────────────────────────────
   Título da seção. */
.aula-compl-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 12px;
}

/* Card-link de artigo complementar (link externo ou botão de modal).
   O :hover troca a borda pra verde (porta os onmouseenter/leave inline,
   mesmos valores #d4d4d4 → #11854c). */
.aula-compl-card {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
  font: inherit;
  color: inherit;
}
.aula-compl-card:hover {
  border-color: var(--verde-badge);
}
/* Variante <a>: o link externo tem margem inferior própria (o botão
   herda a margem do wrapper data-controller="modal"). */
.aula-compl-card--link {
  margin-bottom: 12px;
  text-decoration: none;
}
.aula-compl-card__esquerda {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* O chip "Artigo" não pode encolher dentro da linha do card (o original
   tinha flex-shrink:0 inline, que o .chip--artigo do DS não traz). */
.aula-compl-card__esquerda .chip--artigo {
  flex-shrink: 0;
}
.aula-compl-card__titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}
.aula-compl-card__ler {
  font-size: 13px;
  color: var(--sucesso-texto);
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Wrapper do modal de artigo complementar (mantém o espaçamento
   que o card-link tem via --link). */
.aula-compl-modal {
  margin-bottom: 12px;
}

/* ── Modal do artigo complementar ───────────────────────────
   Diverge do componente .modal-* do DS (z-index 1000, padding-x 16,
   cabeçalho sticky com padding 28 e borda #ebebeb, corpo 24/28/32,
   fechar 22px) — preservado 1:1 aqui. */
.aula-artigo-overlay {
  position: fixed;
  inset: 0;
  background: var(--veu);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px 16px;
}
.aula-artigo-caixa {
  background: var(--sup);
  border-radius: 12px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.aula-artigo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  background: var(--sup);
  z-index: 1;
}
.aula-artigo-cabecalho__autor {
  font-size: 12px;
  color: var(--texto-suave);
  margin-left: 8px;
}
.aula-artigo-fechar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--texto-suave);
  line-height: 1;
  padding: 0;
}
.aula-artigo-corpo {
  padding: 24px 28px 32px;
}

/* ── Navegação inferior (aulas/show) ────────────────────────
   Coluna alinhada à direita com a faixa de botões e a dica. */
.aula-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  margin-top: 40px;
}
.aula-nav__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.aula-nav__dica {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 0;
}
/* Voltar à visão geral da trilha, sempre disponível dentro da aula. */
.aula-nav__voltar {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
}
.aula-nav__voltar:hover {
  color: var(--texto);
}

/* ── Peso dos botões-link ───────────────────────────────────
   O .btn do DS não define font-weight; o 700 !important global só
   atinge <button>. Os <a> da aula traziam o peso inline (700 nos
   primários/verdes, 500 nos secundários) — preservado aqui. */
.btn-peso-700 {
  font-weight: 700;
}
.btn-peso-500 {
  font-weight: 500;
}

/* ── Botão "avançar" (12 24) ────────────────────────────────
   Os CTAs primário/verde da aula/quiz usam padding 12px 24px
   (o .btn do DS usa 12px 20px) — classe própria. Combina com
   .btn-primary/.btn-success do DS para a cor. */
.btn-avancar {
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* ── Cards de questão (quiz/avaliação) ──────────────────────
   #fff / borda --borda / radius 8 / padding 24 = idêntico ao .card
   do DS; usamos .card direto. A pilha de opções usa .pilha-8 do DS. */
.questao-enunciado {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 16px;
}

/* Barra de ações abaixo das questões (voltar / enviar). */
.quiz-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
/* Variante da avaliação: permite quebrar em telas estreitas. */
.quiz-acoes--quebravel {
  gap: 12px;
  flex-wrap: wrap;
}
/* Botão "Enviar respostas" do quiz da aula (azul, 12 24). */
.btn-enviar-quiz {
  background: var(--azul);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  color: var(--sobre-cor);
}

/* Input de rádio visualmente oculto dentro da .opcao-quiz. */
.radio-oculto {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ── Hero de resultado (aprovado/reprovado) ─────────────────
   Card centralizado com radius 12 e padding 48 32 — diverge do
   .card do DS. Usado em quizzes/resultado e avaliacoes/resultado. */
.resultado-hero {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
/* Círculo do ícone. Estado finito (aprovado vs reprovado) vira modifier:
   --ok = troféu dourado em verde-suave (também usado no card "já aprovado");
   --reprovado = cinza neutro. */
.resultado-icone {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.resultado-icone--ok {
  color: var(--dourado-vivo);
  background: var(--verde-suave);
}
.resultado-icone--reprovado {
  color: var(--txt-4);
  background: var(--sup-hover);
}
.resultado-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
  margin: 0;
}
.resultado-texto {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0;
}
/* Botão único "Voltar à trilha" do quiz aprovado (12 32, inline-block). */
.btn-resultado-unico {
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}
/* Wrapper do botão único. */
.resultado-acao-unica {
  margin-top: 4px;
}
/* Coluna de botões empilhados (reprovado): largura travada e centrada. */
.resultado-botoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
  width: 100%;
  max-width: 300px;
}
/* Botão em bloco do hero (largura total, centrado, 12 24). */
.btn-resultado-bloco {
  width: 100%;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* ── Avaliação: hero de "já aprovado" / instruções ──────────
   Coluna de ações da tela de certificado pronto (max 360). */
.resultado-acoes-cert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  width: 100%;
  max-width: 360px;
}
/* Caixa verde "Seu certificado está pronto!". */
.caixa-certificado {
  background: var(--sucesso-suave);
  border: 1px solid var(--verde);
  border-radius: 10px;
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.caixa-certificado__icone {
  color: var(--sucesso-texto);
}
.caixa-certificado__titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--sucesso-texto);
  margin: 0;
}
.caixa-certificado__texto {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.5;
}
/* Botão "Baixar certificado" do hero (verde, padding-y 13). */
.btn-baixar-cert {
  width: 100%;
  border-radius: 8px;
  padding: 13px 24px;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Caixa de instruções da avaliação (intro). */
.avaliacao-intro {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 32px;
}
.avaliacao-intro__icone {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--azul-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--marca-texto);
}
.avaliacao-intro__titulo {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  margin: 0;
}
.avaliacao-intro__texto {
  font-size: 15px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.7;
}
.avaliacao-intro__destaque {
  color: var(--texto);
}
/* Caixa "Antes de começar" (cinza, alinhada à esquerda). */
.avaliacao-instrucoes {
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px 24px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avaliacao-instrucoes__titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
  margin: 0;
}
.avaliacao-instrucoes__lista {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.6;
}
.avaliacao-instrucoes__destaque {
  color: var(--marca-texto);
}

/* ── Revisão de respostas (shared/_revisao_respostas) ───────
   <details> de largura travada com summary estilizado. */
.revisao {
  width: 100%;
  max-width: 600px;
}
.revisao__summary {
  list-style: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--sup);
  font-size: 14px;
  color: var(--texto-2);
  cursor: pointer;
  font-family: inherit;
}
.revisao__summary::-webkit-details-marker {
  display: none;
}
.revisao__chevron {
  color: var(--texto-suave);
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
}
.revisao__corpo {
  border: 1px solid var(--borda);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.revisao__pergunta {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 8px;
}
.revisao__opcoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Linha da resposta marcada — cor/fundo/borda vêm de modificadores
   (acertou = verde, errou = vermelho) em vez de inline dinâmico. */
.revisao__resposta {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.revisao__resposta--certa {
  border-color: var(--verde);
  background: var(--verde-suave);
  color: var(--sucesso-texto);
}
.revisao__resposta--errada {
  border-color: var(--vermelho-toast);
  background: var(--perigo-suave);
  color: var(--perigo-texto);
}
.revisao__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}