/*
 * 65_gamificacao.css — ONDA I · §7, §10 e §12.3: o painel do aluno, o extrato
 * de pontos, o ritmo e o placar.
 *
 * NÃO PRECISA DE @import: o layout usa `stylesheet_link_tag :app` e o Propshaft
 * emite um <link> para CADA folha de app/assets/stylesheets, em ordem
 * alfabética. O NÚMERO no nome É a ordem da cascata — 65 entra depois da
 * avaliação (60) e antes do admin (70), que é onde ele deve estar.
 *
 * O QUE NÃO ESTÁ AQUI, E É DE PROPÓSITO: botão, cartão, lista, selo, medidor,
 * aviso, abas, estado vazio, `.conquista` e o bloco `.acao` com os seis
 * modificadores são todos da ONDA D (10_componentes.css, catálogo em /estilo).
 * Esta onda REUSA os nove. Redesenhá-los aqui seria criar uma segunda verdade
 * visual para a mesma coisa — e o primeiro lugar onde isso apareceria é o
 * cartão do placar com raio diferente do cartão do extrato, na mesma tela.
 *
 * ─── A RÉGUA DESTA FOLHA: O PÁTIO, À NOITE, COM LUVA ──────────────────────
 *
 * Três decisões saem daí e valem para o arquivo inteiro:
 *
 *   · **Número é TABULAR e grande.** Placar, pontos e ritmo mudam de valor; se
 *     os dígitos não têm largura fixa, a linha inteira dança e o olho perde a
 *     coluna. `.tabular` é de 02_base.css e está em todo número desta onda.
 *   · **Nada pisca, nada pula, nada comemora.** Não há confete, não há
 *     animação de subida de posição e não há badge vermelho de notificação. O
 *     público é adulto; e §10.3 proíbe qualquer sinal de QUEDA, o que na
 *     prática significa que esta folha não tem estado "piorou".
 *   · **Alvo de toque ≥ `--alvo`** em tudo que é clicável, inclusive a linha
 *     do extrato e o chip do cabeçalho — que é pequeno em altura de TEXTO mas
 *     nunca em área tocável.
 *
 * ─── O QUE ESTA FOLHA DELIBERADAMENTE NÃO TEM ────────────────────────────
 *
 * Não há `.placar__linha--caiu`, `.placar__seta-baixo` nem variação de cor por
 * variação de posição. Não é esquecimento: §10.3, regra 6 — **nenhuma
 * notificação de queda, jamais**. Uma folha de estilo é onde esse tipo de
 * coisa volta pela porta dos fundos, porque "é só uma setinha".
 */

/* ═══ O CHIP DE NÍVEL NO CABEÇALHO ═══════════════════════════════════════
   `layouts/aluno` reserva `yield :medidor` na faixa do topo, ao lado do nome
   da conta. Em 360 px essa faixa tem uns 150 px sobrando: cabe o total e o
   nível, e mais nada. O ritmo tem cartão próprio na tela.                    */

.nivel-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-height: var(--alvo);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-marca-tenue);
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-suave);
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.nivel-chip:hover { border-color: var(--cor-marca) }
.nivel-chip__pontos {
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--cor-pontos);
}
.nivel-chip__unidade { font-size: var(--texto-xs); color: var(--texto-tenue) }
/* O nome do nível some no aparelho estreito: o número é o que muda todo dia, o
   nível muda uma vez por mês. Quem precisa dele tem o painel a um toque. */
.nivel-chip__nivel { display: none; font-size: var(--texto-sm); color: var(--texto-suave) }
@media (min-width: 24rem) {
  .nivel-chip__nivel { display: inline }
}

/* ═══ "O QUE FAZER AGORA" ════════════════════════════════════════════════
   Modificador do `.acao` da onda D (mesmo componente, mesmos seis estados —
   ver /estilo). O que muda no painel é o PESO: este é o único bloco da tela
   com botão primário grande, e ele tem que ganhar a primeira dobra sozinho.  */

.agora { gap: var(--esp-4) }
.agora .botao { margin-top: var(--esp-1) }
/* No celular o botão ocupa a largura toda — o polegar não erra. No desktop ele
   volta ao tamanho do próprio rótulo: um botão de mil pixels não é "mais
   clicável", é um retângulo que parece banner e o olho pula. */
@media (min-width: 40rem) {
  .agora .botao--largo { width: auto; align-self: flex-start }
}
.painel-avisos { margin-top: var(--esp-4) }
/* "e mais N avisos": o que não coube no teto de três. Discreto de propósito —
   ele é a saída para a lista completa, não um quarto aviso âmbar. */
.painel-avisos__mais {
  margin: 0;
  padding-left: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}
.painel-avisos__mais a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  color: inherit;
}

/* ═══ A GRADE DO "COMO ESTOU INDO" ═══════════════════════════════════════
   Uma coluna no celular (extrato primeiro: é o bloco que responde a pergunta).
   Em tela larga, extrato à esquerda com o dobro da largura, ritmo e placar
   empilhados à direita.                                                      */

.painel-grade { display: grid; gap: var(--esp-4) }
@media (min-width: 52rem) {
  .painel-grade { grid-template-columns: 2fr 1fr; align-items: start }
}

/* ═══ EXTRATO (§10.5) ════════════════════════════════════════════════════ */

.decomposicao { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1) }
.decomposicao__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px dashed var(--borda-tenue);
  font-size: var(--texto-sm);
}
.decomposicao__item:last-child { border-bottom: 0 }
.decomposicao__rotulo { color: var(--texto-suave) }
.decomposicao__valor { font-weight: var(--peso-medio) }
.decomposicao__item--total {
  border-top: 1px solid var(--borda);
  border-bottom: 0;
  margin-top: var(--esp-1);
  padding-top: var(--esp-3);
  font-size: var(--texto-md);
}
.decomposicao__item--total .decomposicao__rotulo { color: var(--texto); font-weight: var(--peso-medio) }
.decomposicao__item--total .decomposicao__valor { color: var(--cor-pontos); font-weight: var(--peso-forte) }

.extrato__lista { list-style: none; margin: 0; padding: 0 }
.extrato__linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--borda-tenue);
}
.extrato__texto { flex: 1; min-width: 0 }
.extrato__titulo { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-medio) }
.extrato__titulo a { color: inherit; text-decoration: none }
.extrato__titulo a:hover { text-decoration: underline }
.extrato__meta {
  margin: var(--esp-1) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}
/* A parcela é a decomposição DAQUELE evento ("nota 45", "24 h 25"). É o que
   transforma "+210" numa frase que o motorista confere sozinho. */
.extrato__parcela { display: inline-flex; gap: var(--esp-1) }
.extrato__parcela b { color: var(--texto-suave); font-weight: var(--peso-medio) }
.extrato__pontos {
  flex: none;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--cor-pontos);
}

/* ═══ RITMO (§10.2) ══════════════════════════════════════════════════════
   Cinco marcas porque o teto é cinco (`clamp(semanas,1,5)`). É uma RÉGUA, não
   uma chama: o que o motorista precisa ver é quanto a próxima semana vale.    */

.ritmo__semanas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--esp-2);
}
.ritmo__semana {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
}
.ritmo__semana--cheia {
  border-color: var(--cor-ritmo);
  background: var(--cor-ritmo-suave);
  color: var(--cor-ritmo);
  font-weight: var(--peso-forte);
}
.ritmo__valor { font-variant-numeric: tabular-nums }

/* O "por que semanal" é `<details>` e não modal: abre no lugar, não tapa a
   tela, e o estado fechado não custa nada a quem não perguntou. */
.ritmo__porque > summary {
  min-height: var(--alvo);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--texto-sm);
  color: var(--cor-marca);
}
.ritmo__porque > p { margin: 0 0 var(--esp-2); font-size: var(--texto-sm); color: var(--texto-suave) }

/* ═══ SELOS (§10.4) ══════════════════════════════════════════════════════
   `.conquista` é da onda D. Aqui só a grade: dois por linha no celular (o
   ícone e duas linhas de texto não cabem em um por linha sem virar rolagem).  */

.selos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* ═══ PLACAR (§10.1 e §10.3) ═════════════════════════════════════════════ */

.placar__contagem { margin: 0 0 var(--esp-4); font-size: var(--texto-sm); color: var(--texto-tenue) }
.placar__titulo { margin: 0; font-size: var(--texto-lg) }
.placar__ajuda { margin: 0 0 var(--esp-3); font-size: var(--texto-sm); color: var(--texto-tenue) }
.placar__falta {
  margin: var(--esp-3) 0 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-2);
  background: var(--cor-marca-suave);
  color: var(--texto);
  font-size: var(--texto-sm);
}

.placar {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  overflow: hidden;
}
.placar__linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--borda);
}
.placar__linha:last-child { border-bottom: 0 }

/* A MINHA linha é destacada pela marca da conta, e é o único destaque do
   placar. Não há cor para "subiu" nem para "caiu" (§10.3, regra 6). */
.placar__linha--eu { background: var(--cor-marca-suave); box-shadow: inset 3px 0 0 var(--cor-marca) }

.placar__posicao {
  flex: none;
  width: 2rem;
  text-align: right;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}
/* Fora do Top 10 não há ordinal (§10.3, regra 3). O ícone ocupa a mesma
   largura para as duas listas ficarem alinhadas entre si — o alinhamento é o
   que faz a ausência do número parecer desenho, e não defeito. */
.placar__marca { flex: none; width: 2rem; display: grid; place-items: center; color: var(--texto-tenue) }

.placar__pessoa {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  font-size: var(--texto-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placar__eu {
  flex: none;
  padding: 0.1rem var(--esp-2);
  border-radius: var(--raio-redondo);
  background: var(--cor-marca);
  color: var(--cor-marca-contraste);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}
.placar__numeros { flex: none; display: flex; flex-direction: column; align-items: flex-end }
.placar__pontos { font-size: var(--texto-lg); font-weight: var(--peso-forte); color: var(--cor-pontos) }
.placar__aulas { font-size: var(--texto-xs); color: var(--texto-tenue) }

.placar-resumo__frase { margin: 0; font-size: var(--texto-md) }

/* Os três primeiros ganham a cor de pontos no ordinal, e só isso: sem medalha,
   sem coroa, sem pódio desenhado. Pódio é o gesto que separa "os três" de
   "todo o resto" — exatamente o que a §10.3 existe para não fazer. */
.placar__linha:nth-child(-n + 3) .placar__posicao { color: var(--cor-pontos) }