/* =====================================================================
   Layout do site do curso: início e aula.

   Generaliza a prévia aprovada da 5.3 (docs/referencia/previa-5.3.html):
   trilho de módulos à esquerda, aula em coluna de leitura, gráficos na
   largura da coluna. Nenhuma cor escrita aqui — tudo vem dos tokens de
   design.css, e testes/app/curso-css.test.js vigia isso.
   ===================================================================== */

p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--cor-zona-borda); }
a:hover { color: var(--cor-foco); }

/* ---------- moldura ---------- */
.app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.trilho { border-right: 1px solid var(--cor-borda); background: var(--cor-superficie);
  padding: var(--e4) var(--e3); position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e4); }
.marca { display: grid; gap: var(--e1); text-decoration: none; color: var(--cor-texto); }
.marca strong { font-size: 17px; letter-spacing: var(--espaco-letra-titulo); }
.progresso-aula { display: grid; gap: var(--e1); }
.progresso { height: 4px; background: var(--cor-superficie-alta); border-radius: 2px; overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; background: var(--cor-zona-borda);
  transition: width var(--transicao); }
.dica { font-size: var(--texto-mini); color: var(--cor-texto-suave); }

.menu-curso > summary { display: none; }
.modulos, .aulas { list-style: none; margin: 0; padding: 0; }
.modulos { display: grid; gap: 2px; }
.modulos summary { display: grid; grid-template-columns: 38px 1fr; gap: var(--e2); align-items: baseline;
  padding: 6px var(--e2); border-radius: var(--raio); font-size: var(--texto-mini);
  color: var(--cor-texto-suave); cursor: pointer; list-style: none; }
.modulos summary::-webkit-details-marker { display: none; }
.modulos summary:hover { background: var(--cor-superficie-alta); }
.m { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-eixo); }
.modulo.atual > details > summary { background: var(--cor-superficie-alta); color: var(--cor-texto); }
.modulo.atual .m { color: var(--cor-zona-borda); }
.trilho .aulas { display: grid; gap: 2px; padding: var(--e1) 0 var(--e2) 46px; }
.aulas li { font-size: 12.5px; }
.aulas a { color: var(--cor-texto-suave); text-decoration: none; }
.aulas a:hover { color: var(--cor-texto); }
.aulas li.esta a { color: var(--cor-texto); font-weight: var(--peso-medio); }
.aulas li.esta a::before { content: "▸ "; color: var(--cor-zona-borda); }
.aulas li.concluida a::after { content: " ✓"; color: var(--cor-acerto); }

.conteudo { padding-block: var(--e5) var(--e6);
  padding-left: max(var(--e5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--e5), env(safe-area-inset-right, 0px)); }
.coluna { max-width: 860px; margin: 0 auto; display: grid; gap: var(--e6); }
.texto { max-width: 66ch; display: grid; gap: var(--e3); }
.texto h3 { font-size: 18px; margin-top: var(--e3); }
.texto h4 { font-size: var(--texto-p); }
.texto ul, .texto ol { margin: 0; padding-left: var(--e4); display: grid; gap: var(--e2); }
.texto blockquote { margin: 0; border: 1px dashed var(--cor-zona-gabarito-borda); border-radius: var(--raio-grande);
  padding: var(--e3); display: grid; gap: var(--e2); }
.texto hr { border: 0; border-top: 1px solid var(--cor-borda); width: 100%; }
.texto code { font-family: var(--fonte-mono); background: var(--cor-superficie-alta);
  border-radius: var(--raio); padding: 0 var(--e1); }
.tabela { overflow-x: auto; }
.tabela table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.tabela th, .tabela td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--cor-borda);
  vertical-align: top; }
.tabela th { color: var(--cor-texto-suave); font-weight: var(--peso-medio); }

/* ---------- abertura e seções ---------- */
.abertura { display: grid; gap: var(--e3); }
.abertura h1 { font-size: 34px; }
.meta { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: var(--texto-mini); color: var(--cor-texto-suave); }
.frase { font-size: 19px; line-height: 1.5; border-left: 2px solid var(--cor-zona-gabarito-borda);
  padding-left: var(--e3); max-width: 60ch; }
.secao { display: grid; gap: var(--e4); }
.secao > header { display: grid; gap: var(--e1); }
.secao h2 { font-size: 24px; }

/* ---------- exercício ---------- */
.exercicio { display: grid; gap: var(--e3); }
.cabeca-ex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.tipo { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); padding: 1px 6px; }
.selo-novo { font-size: 12px; font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-etiqueta);
  text-transform: uppercase; color: var(--cor-texto-sobre-cor); background: var(--cor-zona-borda);
  border-radius: 999px; padding: 1px 8px; }
.enunciado { max-width: 66ch; display: grid; gap: var(--e2); }
.interacao { display: grid; gap: var(--e3); }
.aviso-preparacao { border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-grande);
  padding: var(--e3); font-size: var(--texto-mini); color: var(--cor-texto-suave); }
.instrucao { display: flex; gap: var(--e2); align-items: flex-start; margin: 0;
  border: 1px solid var(--cor-zona-borda); border-bottom: 0; background: var(--cor-zona);
  border-radius: var(--raio-grande) var(--raio-grande) 0 0; padding: var(--e2) var(--e3); font-weight: var(--peso-medio); }
.instrucao + .painel { margin-top: calc(-1 * var(--e3)); }
.instrucao .seta { color: var(--cor-zona-borda); }
.painel { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-top-color: var(--cor-zona-borda);
  border-radius: 0 0 var(--raio-grande) var(--raio-grande); padding: var(--e2); display: grid; gap: var(--e2); }
.painel.solto { border-top-color: var(--cor-borda); border-radius: var(--raio-grande); }
.ficha { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--cor-texto-suave); padding: 0 var(--e1); }
.ficha b { color: var(--cor-texto); font-weight: var(--peso-medio); }
canvas.grafico { display: block; width: 100%; height: auto; background: var(--cor-fundo); border-radius: var(--raio);
  cursor: crosshair; touch-action: none; }
canvas.grafico[hidden] { display: none; }
/* Gráfico de apoio (1.3.a e 1.3.b): o mesmo mercado em outro tempo gráfico, acima da
   instrução, só para ler. Mesmo canvas do gráfico principal; a ficha diz "Apoio". */
.painel.apoio { margin-bottom: var(--e3); }
canvas.grafico-apoio { display: block; width: 100%; max-width: 100%; height: auto; background: var(--cor-fundo);
  border-radius: var(--raio); }
.rotulo-apoio { color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.leitura-vela { min-height: 18px; font-size: 12px; color: var(--cor-texto-suave); padding: 0 var(--e1);
  font-family: var(--fonte-mono); font-variant-numeric: var(--variante-numerica); white-space: pre; overflow-x: auto; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
button { font: inherit; font-size: 14px; font-weight: var(--peso-medio); border-radius: var(--raio); cursor: pointer;
  padding: 8px 16px; border: 1px solid var(--cor-borda-forte); background: var(--cor-superficie-alta); color: var(--cor-texto);
  transition: background var(--transicao), border-color var(--transicao); }
button:hover:not(:disabled) { border-color: var(--cor-texto-suave); }
button.principal { background: var(--cor-zona-borda); border-color: var(--cor-zona-borda); color: var(--cor-texto-sobre-cor); }
button.principal:hover:not(:disabled) { background: var(--cor-foco); border-color: var(--cor-foco); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.veredito { display: grid; gap: var(--e2); border-radius: var(--raio-grande); padding: var(--e3);
  border: 1px solid var(--cor-borda); background: var(--cor-superficie); }
.veredito .selo { justify-self: start; font-size: 12px; font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-etiqueta);
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: var(--cor-texto-sobre-cor);
  background: var(--cor-texto-suave); }
.veredito.acerto { border-color: var(--cor-acerto); background: var(--cor-acerto-preenchimento); }
.veredito.acerto .selo { background: var(--cor-acerto); }
.veredito.parcial { border-color: var(--cor-parcial); background: var(--cor-parcial-preenchimento); }
.veredito.parcial .selo { background: var(--cor-parcial); }
.veredito.erro { border-color: var(--cor-erro); background: var(--cor-erro-preenchimento); }
.veredito.erro .selo { background: var(--cor-erro); }
.veredito .texto-veredito, .veredito .porque { display: grid; gap: var(--e2); font-size: 14.5px; }
.veredito .porque, .veredito .detalhe { color: var(--cor-texto-suave); font-size: 14px; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: 12px; color: var(--cor-texto-suave); }
.legenda i { display: inline-block; width: 18px; height: 10px; vertical-align: -1px; margin-right: 6px; border-radius: 2px; }
.legenda .voce { background: var(--cor-zona); border: 2px solid var(--cor-zona-borda); }
.legenda .gab { background: var(--cor-zona-gabarito); border: 2px dashed var(--cor-zona-gabarito-borda); }

/* questão */
.alternativas { display: grid; gap: var(--e2); }
.alternativa { display: grid; grid-template-columns: 28px 1fr; gap: var(--e2); align-items: start; text-align: left;
  padding: 10px var(--e3); font-weight: var(--peso-normal); background: var(--cor-superficie); }
.alternativa .letra { font-family: var(--fonte-mono); color: var(--cor-texto-suave); }
.alternativa[aria-pressed="true"] { border-color: var(--cor-zona-borda); background: var(--cor-zona); }
.alternativa.certa { border-color: var(--cor-acerto); background: var(--cor-acerto-preenchimento); opacity: 1; }
.alternativa.errada { border-color: var(--cor-erro); background: var(--cor-erro-preenchimento); opacity: 1; }

/* resposta escrita */
.resposta-escrita { font: inherit; font-size: 14.5px; color: var(--cor-texto); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); padding: var(--e2) var(--e3);
  min-height: 120px; resize: vertical; width: 100%; }
.alvo-comentado { display: grid; gap: var(--e2); border: 1px dashed var(--cor-zona-gabarito-borda);
  border-radius: var(--raio-grande); padding: var(--e3); }

/* replay */
.abas { display: flex; gap: 2px; padding: 0 var(--e1); }
.aba { padding: 5px 12px; font-size: 13px; background: none; border-color: var(--cor-superficie); color: var(--cor-texto-suave); }
.aba[aria-selected="true"] { background: var(--cor-superficie-alta); border-color: var(--cor-borda-forte); color: var(--cor-texto); }
.decisao { display: grid; gap: var(--e3); background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande); padding: var(--e3); }
.decisao fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.decisao fieldset[hidden] { display: none; }
.decisao legend { padding: 0; margin-bottom: var(--e2); font-weight: var(--peso-medio); }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opcao { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio); cursor: pointer; font-size: 14px; background: var(--cor-superficie-alta); }
.opcao:has(input:checked) { border-color: var(--cor-zona-borda); background: var(--cor-zona); }
.opcao input { accent-color: var(--cor-zona-borda); margin: 0; }
.campo-preco { display: grid; gap: var(--e1); font-size: var(--texto-mini); color: var(--cor-texto-suave); }
.campo-preco input { font-family: var(--fonte-mono); font-size: 14px; color: var(--cor-texto); background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); padding: 6px var(--e2); width: 12ch; }
.decisoes-corrigidas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); font-size: 14px; }
.decisoes-corrigidas li { display: grid; grid-template-columns: 80px 1fr; gap: var(--e2); }
.decisoes-corrigidas .faixa-acerto { color: var(--cor-acerto); }
.decisoes-corrigidas .faixa-parcial { color: var(--cor-parcial); }
.decisoes-corrigidas .faixa-erro { color: var(--cor-erro); }
.relogio { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-texto-suave); }

/* ---------- conclusão da aula ---------- */
.conclusao { display: grid; gap: var(--e3); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande);
  background: var(--cor-superficie); padding: var(--e4); }
.conclusao:empty { display: none; }
.conclusao.concluida { border-color: var(--cor-acerto); background: var(--cor-acerto-preenchimento); }
.conclusao.refazer { border-color: var(--cor-parcial); background: var(--cor-parcial-preenchimento); }
.conclusao h2 { font-size: var(--texto-titulo); }
.fim-da-aula { height: 1px; }

/* ---------- prova ---------- */
.cartao-prova { display: grid; gap: var(--e2); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-grande);
  padding: var(--e4); background: var(--cor-superficie); }
.cartao-prova h2 { font-size: var(--texto-titulo); display: flex; align-items: center; gap: var(--e2); }
.cartao-prova.liberada { border-style: solid; border-color: var(--cor-acerto); }
.icone-cadeado { color: var(--cor-texto-suave); flex: none; }
.cartao-prova.liberada .icone-cadeado { display: none; }

.cartao-prova.aprovada { border-color: var(--cor-acerto); background: var(--cor-acerto-preenchimento); }
.botao-link, a.botao-link { display: inline-block; text-decoration: none; font-size: 14px; font-weight: var(--peso-medio);
  border-radius: var(--raio); padding: 8px 16px; background: var(--cor-zona-borda); color: var(--cor-texto-sobre-cor); }
.botao-link:hover { background: var(--cor-foco); color: var(--cor-texto-sobre-cor); }
.botao-link[hidden] { display: none; }

/* página da prova */
.aviso-prova { border: 1px solid var(--cor-zona-borda); border-radius: var(--raio-grande); padding: var(--e3);
  background: var(--cor-zona); font-weight: var(--peso-medio); }
.barra-da-prova { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--e3);
  justify-content: space-between; align-items: center; padding: var(--e2) var(--e3); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); background: var(--cor-superficie); font-size: 14px; }
.alternativa[aria-checked="true"] { border-color: var(--cor-zona-borda); background: var(--cor-zona); }
div.alternativa { border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); }
.regras-da-prova { margin: 0; padding-left: var(--e4); display: grid; gap: var(--e2); }
.confirmar { display: grid; gap: var(--e2); }
.confirmar[hidden] { display: none; }
.resultado-prova.aprovado { border-color: var(--cor-acerto); background: var(--cor-acerto-preenchimento); }
.resultado-prova.reprovado { border-color: var(--cor-parcial); background: var(--cor-parcial-preenchimento); }
.blocos-da-nota { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e3);
  font-family: var(--fonte-mono); font-size: 14px; }
.pagina-prova .meta a { color: var(--cor-texto-suave); }

/* ajuste fino no celular: ◀ ▶ (tipo A) */
.ajuste-fino[hidden] { display: none; }
.ajuste-fino button.ajuste { min-width: 44px; min-height: 44px; padding: 0 var(--e3); font-size: 18px; }

/* falha ao carregar um gráfico */
.falha-de-carga { display: grid; gap: var(--e2); justify-items: start; color: var(--cor-texto); }

/* fim da aula: anterior e próxima */
.navegacao-aulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e3); }
.navegacao-aulas a { display: grid; gap: var(--e1); text-decoration: none; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande); padding: var(--e3); background: var(--cor-superficie); color: var(--cor-texto); }
.navegacao-aulas a span { font-size: var(--texto-mini); color: var(--cor-texto-suave); }
.navegacao-aulas a b { font-weight: var(--peso-medio); }
.navegacao-aulas .proxima { text-align: right; }
.navegacao-aulas.concluida .proxima { border-color: var(--cor-zona-borda); background: var(--cor-zona); }
.navegacao-aulas.concluida .proxima span { color: var(--cor-zona-borda); font-weight: var(--peso-forte); }

/* ---------- início ---------- */
.inicio .abertura .marca { margin-bottom: var(--e2); }
.grade-modulos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cartao-modulo { display: grid; gap: var(--e2); align-content: start; background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: var(--e3); min-width: 0; }
.cabeca-modulo { display: grid; grid-template-columns: 38px 1fr; gap: var(--e2); align-items: baseline; }
.cabeca-modulo h2 { font-size: 16px; }
.cartao-modulo .aulas { display: grid; gap: 2px; }

/* ---------- contas: entrar, sair, privacidade, termos ---------- */
.pagina-simples .coluna { max-width: 560px; }
.formulario { display: grid; gap: var(--e2); max-width: 420px; }
.formulario label { font-size: var(--texto-mini); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
.formulario input { font: inherit; font-size: 16px; color: var(--cor-texto); background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); padding: var(--e2) var(--e3); min-width: 0; }
.formulario input:focus { outline: 2px solid var(--cor-foco); outline-offset: 1px; }
.formulario input[name="codigo"] { font-family: var(--fonte-mono); letter-spacing: 0.3em; max-width: 12ch; }
.aviso { border: 1px solid var(--cor-parcial); border-radius: var(--raio-grande); padding: var(--e3);
  background: var(--cor-parcial-preenchimento); }
.rodape-legal { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: var(--texto-mini);
  color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); padding-top: var(--e3); }
.rodape-legal a { color: var(--cor-texto-suave); }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--cor-borda);
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .conteudo { padding-block: var(--e4) var(--e5);
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .abertura h1 { font-size: var(--texto-display); }
  .trilho { gap: var(--e3); }
  .menu-curso > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    list-style: none; padding: var(--e2) var(--e3); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
    font-size: 14px; font-weight: var(--peso-medio); color: var(--cor-texto); background: var(--cor-superficie-alta); }
  .menu-curso > summary::-webkit-details-marker { display: none; }
  .menu-curso > summary::after { content: "▾"; color: var(--cor-texto-suave); }
  .menu-curso[open] > summary { margin-bottom: var(--e2); }
  .menu-curso[open] > summary::after { content: "▴"; }
  .decisoes-corrigidas li { grid-template-columns: 1fr; }
}