/* ===========================================================================
   ÁREA DE MEMBROS — só consome tokens. Nenhum valor de cor é escrito aqui.

   Uma escolha que vale explicar: os módulos são LISTA VERTICAL, não carrossel
   horizontal. Carrossel esconde metade do conteúdo fora da tela e exige
   arrastar com precisão — as duas coisas que mais falham com quem tem 50, 60,
   70 anos e um celular antigo. A marcação é uma lista `<ol>`; virar carrossel
   um dia é mudança só deste arquivo, sem tocar no HTML nem no JavaScript.
   =========================================================================== */

/* --- BARRA DE CIMA -------------------------------------------------------- */
/* O cabeçalho e o estado vazio agora vivem no componentes.css: são usados
   também pela página principal e pelas páginas legais. */

/* --- ÁREA PRINCIPAL ------------------------------------------------------- */
.painel { padding: var(--e6) 0 var(--e16); }

/* --- BANNER DO ALUNO ------------------------------------------------------ */
/* Cartão branco, não faixa colorida: o contraste máximo é o do preto no branco,
   e é justamente aqui que fica o botão mais importante da tela. */
.banner {
  padding: var(--e6) var(--e5);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-1);
  margin-bottom: var(--e8);
}
.banner__progresso { margin: var(--e5) 0 var(--e3); }
.banner__numero { font-weight: var(--peso-forte); }

/* --- MÓDULO --------------------------------------------------------------- */
.modulos { list-style: none; margin: 0; padding: 0; }
.modulos > li + li { margin-top: var(--e8); }

.modulo__cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e2);
  margin-bottom: var(--e3);
}
.modulo__titulo { margin: 0; }
.modulo__contagem { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }

/* --- LISTA DE AULAS ------------------------------------------------------- */
.aulas { list-style: none; margin: 0; padding: 0; }
.aulas > li + li { margin-top: var(--e3); }

/* A aula inteira é um alvo de toque. Link pequeno no título faz o dedo errar. */
.aula-item {
  display: flex; align-items: center; gap: var(--e4);
  width: 100%; min-height: 72px;
  padding: var(--e4) var(--e5);
  background: var(--cor-fundo);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto);
  text-decoration: none;
  text-align: left;
  transition: border-color var(--transicao), background var(--transicao);
}
a.aula-item:hover { border-color: var(--cor-primaria); background: var(--cor-fundo-realce); }

.aula-item--bloqueada {
  background: var(--cor-fundo-suave);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}
.aula-item--atual { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }

.aula-item__marca {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texto-medio); font-weight: var(--peso-forte);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio-redondo);
}
.aula-item__marca--feita {
  color: var(--cor-texto-invertido);
  background: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
}
.aula-item__corpo { flex: 1 1 auto; min-width: 0; }
.aula-item__titulo { font-weight: var(--peso-medio); }
.aula-item__nota { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
.aula-item--atual .aula-item__nota { color: var(--cor-primaria-esc); }
.aula-item__seta { flex: 0 0 auto; color: var(--cor-primaria); font-size: var(--texto-grande); }

/* --- PÁGINA DA AULA ------------------------------------------------------- */
.aula-layout { display: block; }
@media (min-width: 900px) {
  .aula-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--e8);
    align-items: start;
  }
}

/* Proporção 16:9 pela técnica do padding: `aspect-ratio` não existe em celular
   Android antigo, e boa parte deste público usa aparelho de 5 anos atrás. */
.player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--cor-texto);
  border-radius: var(--raio);
  overflow: hidden;
}
.player > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.player--vazio {
  padding-bottom: 0;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e8) var(--e5);
  text-align: center;
  color: var(--cor-texto);
  background: var(--cor-fundo-suave);
  border: 2px dashed var(--cor-borda-forte);
}

.aula-acoes {
  display: flex; flex-direction: column; gap: var(--e3);
  margin-top: var(--e6);
}
@media (min-width: 560px) {
  .aula-acoes { flex-direction: row; flex-wrap: wrap; }
  .aula-acoes > .botao { flex: 1 1 240px; }
}

.materiais { list-style: none; margin: 0; padding: 0; }
.materiais > li + li { margin-top: var(--e3); }
.material {
  display: flex; align-items: center; gap: var(--e3);
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  text-decoration: none;
}

.lateral {
  margin-top: var(--e10);
  padding: var(--e5);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
}
@media (min-width: 900px) {
  .lateral { margin-top: 0; position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow-y: auto; }
}

/* --- VOLTAR --------------------------------------------------------------- */
.voltar {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--alvo-toque-menor);
  font-weight: var(--peso-medio);
  margin-bottom: var(--e4);
}

/* --- ESTADO VAZIO --------------------------------------------------------- */

/* --- COMENTÁRIOS (F3.5) --------------------------------------------------- */
.comentarios {
  margin-top: var(--e12);
  padding-top: var(--e8);
  border-top: 2px solid var(--cor-borda);
}

.entrada--texto {
  min-height: 120px;
  line-height: var(--altura-linha);
  resize: vertical;
}

.comentario-form { margin: var(--e5) 0 var(--e8); }
.comentario-form--resposta { margin: var(--e4) 0 0; padding-left: var(--e5); border-left: 3px solid var(--cor-primaria); }

.lista-comentarios { list-style: none; margin: 0; padding: 0; }
.lista-comentarios > li + li { margin-top: var(--e5); }

.comentario {
  padding: var(--e5);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
/* A resposta da equipe precisa ser reconhecida de longe: é a resposta oficial,
   e o aluno tem de saber que não é opinião de outro aluno. */
.comentario--equipe { background: var(--cor-primaria-clara); border-color: var(--cor-primaria); }
.comentario--esperando { background: var(--cor-fundo-suave); }

.comentario__topo {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e2);
}
.comentario__autor { font-weight: var(--peso-forte); }
.comentario__quando { margin-left: auto; }
.comentario__texto { margin: 0 0 var(--e3); white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario__acoes { display: flex; gap: var(--e5); }

/* Respostas recuadas, com um fio para o olho seguir de quem é a conversa. */
.lista-comentarios--respostas {
  margin-top: var(--e4);
  padding-left: var(--e4);
  border-left: 3px solid var(--cor-borda);
}
@media (min-width: 560px) {
  .lista-comentarios--respostas { padding-left: var(--e6); }
}

/* --- NÍVEL E COMEMORAÇÃO (F3.6) ------------------------------------------ */
.nivel {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: 0 0 var(--e3);
}
.nivel__icone { font-size: var(--texto-grande); line-height: 1; }
.nivel__nome  { font-weight: var(--peso-forte); font-size: var(--texto-medio); }
/* A cor do nome vem do servidor, já conferida contra a WCAG. Nenhuma cor de
   nível é escrita aqui — no admin ela muda, e o CSS não ficaria sabendo. */

.festa {
  margin-bottom: var(--e8);
  padding: var(--e8) var(--e5);
  text-align: center;
  background: var(--cor-sucesso-fundo);
  border: 3px solid var(--cor-sucesso);
  border-radius: var(--raio-grande);
}
.festa__icone  { display: block; font-size: 56px; line-height: 1; margin-bottom: var(--e3); }
.festa__titulo { color: var(--cor-sucesso-esc); margin-bottom: var(--e2); }
.festa__texto  { color: var(--cor-sucesso-esc); font-size: var(--texto-medio); margin-bottom: var(--e6); }
@media (min-width: 560px) {
  .festa .botao { min-width: 240px; }
}

/* --- MÓDULO À VENDA (F3.7) ----------------------------------------------- */
.venda {
  margin-bottom: var(--e4);
  padding: var(--e5);
  background: var(--cor-fundo-realce);
  border: 2px solid var(--cor-primaria);
  border-radius: var(--raio);
}
.venda__chamada  { font-size: var(--texto-medio); font-weight: var(--peso-forte); margin-bottom: var(--e2); }
.venda__descricao{ margin-bottom: var(--e4); }
.venda__preco    { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e4); }
/* Preço riscado precisa de MAIS que o risco: quem enxerga pouco não distingue
   um risco fino de um traço da fonte. Por isso vem menor, cinza e com rótulo
   lido em voz alta pelo leitor de tela. */
.venda__de  { text-decoration: line-through; color: var(--cor-texto-suave); font-size: var(--texto-corpo); }
.venda__por { font-size: var(--texto-titulo); font-weight: var(--peso-forte); color: var(--cor-primaria-esc); }