/* ==========================================================================
Perfil Estudante — a mesma casa, outra cor de chrome.
O que muda aqui são os tokens de **chrome**: o azul que pinta botão, link,
item de menu ativo e gradiente do avatar. O que NÃO muda:
- a **marca**. `--cpm-navy` e `--cpm-accent` são medidos da logomarca
(`img/logo-original.jpg`), e repintá-los faria o produto mudar de nome ao
trocar de perfil. É o mesmo CorrigePraMim dos dois lados.
- as cores de **estado**. Verde de acerto, vermelho de erro e amarelo de
alerta significam coisa, e do lado do estudante significam mais ainda —
é nelas que ele lê o resultado da lista. Repintá-las de roxo apagaria a
informação.
Por que roxo, e não o verde da marca: verde já é "acertou" nesta tela, e o
estudante vê acerto e erro o tempo todo. Uma cor de chrome que também é cor
de estado faria o cabeçalho parecer um elogio. O roxo #6a3fd4 dá 6.41:1
sobre branco (o azul do professor dá 5.09:1), então escreve e pinta, e não
colide com nenhum dos três estados.
========================================================================== */
[data-perfil="estudante"] {
--cpm-primary: #6a3fd4;
--cpm-primary-hover: #5730ad;
--cpm-primary-light: #f0eafd;
--cpm-primary-lighter: #f8f5fe;
--cpm-text-link: #6a3fd4;
--cpm-grad: linear-gradient(135deg, #6a3fd4 0%, #9b6ef0 100%);
}
/* ==========================================================================
O seletor de ambiente, na topbar
Os dois pontos carregam a cor **do produto que representam**, e não a cor do
tema ativo: o menu mostra os dois lado a lado, e pintar ambos com o
`--cpm-primary` corrente faria o seletor dizer que os dois ambientes são a
mesma coisa. Por isso os valores literais — são as duas âncoras da paleta,
e não um token que muda debaixo deles.
O ponto nunca identifica sozinho: o nome do ambiente vai sempre ao lado.
========================================================================== */
.cpm-lab-switcher__dot--professor { background: #2872b0; }
.cpm-lab-switcher__dot--estudante { background: #6a3fd4; }
/* ==========================================================================
Cabeçalho da área
========================================================================== */
.est-hero {
background: var(--cpm-grad);
color: #fff;
border-radius: var(--cpm-radius-lg);
padding: 26px 28px;
margin-bottom: 20px;
box-shadow: var(--cpm-shadow-2);
}
.est-hero h1 { color: #fff; margin-bottom: 6px; }
.est-hero p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 62ch; }
.est-hero__numeros { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.est-hero__numero strong {
display: block; font-family: var(--cpm-font-display);
font-size: 26px; font-weight: 800; line-height: 1.1;
}
.est-hero__numero span { font-size: 12px; color: rgba(255, 255, 255, .8); }
/* ==========================================================================
Habilidade — o cartão pelo qual o estudante escolhe o que treinar
========================================================================== */
.est-lista-habilidades { display: grid; gap: 10px; }
.est-hab {
display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 14px 16px;
}
.est-hab:hover { border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover); }
.est-hab__codigo {
font-family: var(--cpm-font-mono); font-size: 12px; font-weight: 700;
color: var(--cpm-primary); letter-spacing: .02em;
}
.est-hab__descricao {
margin: 3px 0 0; font-size: 13px; color: var(--cpm-text-secondary);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.est-hab__meta { font-size: 12px; color: var(--cpm-text-muted); margin-top: 5px; }
.est-hab__estoque { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* O estoque por nível, escrito na própria opção. É ele que sustenta a
escolha — ver `catalogo_estudante.habilidades`. Zero aparece igual: é aí que
ele mais informa. */
.est-estoque {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; padding: 3px 9px;
border-radius: var(--cpm-radius-pill);
background: var(--cpm-surface-2); color: var(--cpm-text-secondary);
font-variant-numeric: tabular-nums;
}
.est-estoque--vazio { opacity: .45; }
/* O nível não usa cor sozinho, e não usa verde/amarelo/vermelho: eles já
significam acerto, alerta e erro nesta mesma tela, e dificuldade não é
erro. Quem carrega o significado são as três barrinhas mais o texto. */
.est-nivel { display: inline-flex; align-items: center; gap: 6px; }
.est-nivel__barras { display: inline-flex; gap: 2px; }
.est-nivel__barra {
width: 4px; height: 11px; border-radius: 1px;
background: var(--cpm-border);
}
.est-nivel__barra--on { background: var(--cpm-primary); }
/* ==========================================================================
A lista de exercícios
========================================================================== */
.est-questao {
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius-lg); padding: 20px 22px; margin-bottom: 14px;
}
.est-questao__topo {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
.est-questao__numero {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--cpm-primary-light); color: var(--cpm-primary);
font-weight: 700; font-size: 13px; flex: none;
}
/* O código do item. **Monoespaçado e apagado**: monoespaçado porque ele é
copiado caractere a caractere, e a fonte de texto corrido faz o 8 e o B
parecerem a mesma coisa justamente em quem está copiando; apagado porque ele
não é o que o estudante veio ler. Fica no fim da linha, depois dos códigos
da BNCC, e `margin-left:auto` o empurra para a borda — ali ele não disputa
espaço com nada. */
.est-questao__codigo {
margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px; letter-spacing: .04em; color: var(--cpm-text-muted, #6b7280);
}
.est-questao__texto { margin: 0 0 8px; line-height: 1.6; white-space: pre-line; }
/* A figura entre o texto-base e o comando. A largura é limitada porque o SVG
escala sem limite: num monitor largo, um gráfico de três colunas ocupando a
tela inteira fica pior de ler, não melhor. */
.est-questao__figura {
margin: 10px 0 14px; padding: 12px 8px 4px;
max-width: 460px;
border: 1px solid var(--cpm-border-light); border-radius: var(--cpm-radius);
background: var(--cpm-bg);
}
.est-questao__figura svg { display: block; }
.est-questao__comando { margin: 0 0 14px; font-weight: 600; line-height: 1.55; white-space: pre-line; }
.est-alternativas { display: grid; gap: 8px; }
.est-alt {
display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
border: 1px solid var(--cpm-border-light); border-radius: var(--cpm-radius);
padding: 11px 14px; cursor: pointer; background: var(--cpm-bg);
}
.est-alt:hover { border-color: var(--cpm-primary); background: var(--cpm-primary-lighter); }
.est-alt input { margin: 0; accent-color: var(--cpm-primary); }
.est-alt__letra {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%; flex: none;
border: 1.5px solid var(--cpm-border); font-size: 12px; font-weight: 700;
color: var(--cpm-text-secondary);
}
.est-alt input:checked + .est-alt__corpo .est-alt__letra {
background: var(--cpm-primary); border-color: var(--cpm-primary); color: #fff;
}
.est-alt__corpo { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
/* No resultado e na folha impressa a alternativa não tem rádio — a coluna do
controle não existe, e sem isto o corpo ficaria espremido na primeira. */
.est-alt > .est-alt__corpo:only-child { grid-column: 1 / -1; }
.est-alt__texto { line-height: 1.5; }
/* ==========================================================================
Resultado — aqui a cor volta a ser estado, e por isso ela não é a do perfil
========================================================================== */
.est-placar {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius-lg); padding: 20px 24px; margin-bottom: 18px;
}
.est-placar__nota {
font-family: var(--cpm-font-display); font-size: 34px; font-weight: 800;
line-height: 1; color: var(--cpm-primary);
}
.est-placar__barra {
flex: 1 1 220px; height: 10px; border-radius: var(--cpm-radius-pill);
background: var(--cpm-surface-3); overflow: hidden; min-width: 140px;
}
.est-placar__preenchida { height: 100%; background: var(--cpm-success); }
/* O placar do passo 4: duas contagens, acertos e erros, e nada mais — sem
barra de percentual, porque o passo não tem piso a alcançar. */
.est-placar--mao { gap: 28px; }
.est-placar__conta {
display: flex; align-items: center; gap: 8px; font-size: 15px;
}
.est-placar__conta strong {
font-family: var(--cpm-font-display); font-size: 30px; font-weight: 800; line-height: 1;
}
.est-placar__conta--certa .material-icons-outlined { color: var(--cpm-success); }
.est-placar__conta--errada .material-icons-outlined { color: var(--cpm-red); }
.est-questao--certa { border-color: #a7e8cd; background: var(--cpm-success-light); }
.est-questao--errada { border-color: #f6c1c1; background: var(--cpm-red-light); }
.est-questao--branco { border-color: #f0dca8; background: var(--cpm-yellow-light); }
.est-veredito {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; padding: 3px 10px;
border-radius: var(--cpm-radius-pill); background: var(--cpm-bg);
}
.est-veredito .material-icons-outlined { font-size: 16px; }
.est-veredito--certa { color: var(--cpm-success); }
.est-veredito--errada { color: var(--cpm-red); }
.est-veredito--branco { color: var(--cpm-yellow); }
.est-alt--marcada { border-color: currentColor; }
.est-alt--gabarito { border-color: var(--cpm-success); background: #fff; }
.est-alt__tag {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; margin-left: 8px;
}
/* A leitura do erro: a mesma que o professor vê no diagnóstico. */
.est-porque {
margin-top: 14px; padding: 13px 15px; border-radius: var(--cpm-radius);
background: var(--cpm-bg); border-left: 3px solid var(--cpm-primary);
}
.est-porque h4 { margin: 0 0 5px; font-size: 13px; color: var(--cpm-primary); }
.est-porque p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
/* ==========================================================================
Resolução em vídeo — mora ao lado da questão errada, não num curso à parte
========================================================================== */
.est-video { margin-top: 14px; }
.est-video__moldura {
position: relative; width: 100%; padding-top: 56.25%;
border-radius: var(--cpm-radius); overflow: hidden; background: #000;
}
.est-video__moldura iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.est-video__abrir {
display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
font-size: 13px; font-weight: 600;
}
/* ==========================================================================
Histórico
========================================================================== */
.est-historico { display: grid; gap: 8px; }
.est-linha {
display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 12px 16px;
}
.est-linha__quando { font-size: 12px; color: var(--cpm-text-muted); }
@media (max-width: 700px) {
.est-hab, .est-linha { grid-template-columns: 1fr; }
.est-hab__estoque { justify-content: flex-start; }
}
/* ==========================================================================
Trilhas de Conhecimento
A trilha é uma lista **ordenada**, e o desenho tem que dizer isso antes de
qualquer texto: por isso a marca numerada à esquerda e o fio que liga uma
etapa à seguinte. Sem o fio, uma trilha de 44 etapas se lê como um monte de
cartões empilhados, que é justamente o que ela não é.
O estado da etapa não é carregado por cor sozinha — a regra da casa. Quem
diz "concluída" é o ✓ dentro da marca; quem diz "não iniciada" é o número.
A cor reforça, e por isso o verde de concluída é o mesmo verde de acerto
das outras telas do estudante: aqui ele significa a mesma coisa.
========================================================================== */
.est-trilhas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px; margin-bottom: 20px;
}
.est-trilha-cartao {
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 16px 18px;
border-top: 3px solid var(--cpm-primary);
}
.est-trilha-cartao h2 { font-size: 15px; margin: 6px 0 2px; }
.est-trilha-cartao__icone { color: var(--cpm-primary); font-size: 22px; }
.est-trilha-cartao__chamada {
font-size: 12px; font-weight: 600; color: var(--cpm-primary); margin: 0 0 6px;
}
.est-trilha-cartao__explica {
font-size: 12.5px; color: var(--cpm-text-muted); margin: 0; line-height: 1.5;
}
/* O cartão aberto é um link, e tem que se anunciar como um: a tarja colorida
sozinha não distingue clicável de decorativo quando três dos quatro cartões
não abrem nada. */
a.est-trilha-cartao { text-decoration: none; color: inherit; display: block; }
a.est-trilha-cartao:hover {
border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover);
}
.est-trilha-cartao__acao {
display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
font-size: 13px; font-weight: 700; color: var(--cpm-primary);
}
.est-trilha-cartao__acao .material-icons-outlined { font-size: 16px; }
/* Apagado, e não escondido: cartão que some faz o estudante procurar o que não
achou, e quando a trilha abrir ninguém precisa reaprender onde ela morava.
A tarja do topo perde a cor junto — ela é o que diz "esta é uma via", e uma
via fechada não devia parecer aberta. */
.est-trilha-cartao--apagado {
opacity: .55; cursor: not-allowed; border-top-color: var(--cpm-border);
}
.est-trilha-cartao--apagado .est-trilha-cartao__icone,
.est-trilha-cartao--apagado .est-trilha-cartao__chamada {
color: var(--cpm-text-muted);
}
.est-trilha-cartao--apagado h2 {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.est-trilha-acoes { display: grid; gap: 6px; }
/* As quatro áreas do ENEM. Cartão e não linha de lista porque o nome da área é
longo e o estoque precisa caber embaixo dele sem competir — numa linha só, o
número ficaria espremido contra a borda direita. */
.est-areas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
gap: 12px;
}
/* Ícone à esquerda, e não acima do nome: os quatro nomes têm três ou quatro
palavras, e empilhá-los sob o ícone daria quatro cartões de alturas
diferentes numa escolha que se lê de relance. */
.est-area {
display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
align-items: center; text-decoration: none; color: inherit;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-left: 3px solid var(--cpm-primary);
border-radius: var(--cpm-radius); padding: 16px 18px;
}
.est-area:hover { border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover); }
.est-area__icone {
grid-row: span 2; font-size: 34px; color: var(--cpm-primary);
}
.est-area strong { font-size: 16.5px; line-height: 1.3; align-self: end; }
.est-area__progresso {
display: block; align-self: start; margin-top: 6px;
}
.est-area__estoque {
display: block; margin-top: 5px;
font-size: 12.5px; color: var(--cpm-text-muted);
}
/* A barra de progresso em cartão claro. A do `est-hero` é irmã dela e não a
mesma: lá o fundo é o gradiente do cabeçalho e o preenchimento é branco;
aqui o trilho é cinza e o preenchimento é a cor de quem está avançando.
O número vai **escrito ao lado** — a barra sozinha não diz 43 de quê, e uma
barra vazia em quatro áreas seria indistinguível de quatro áreas sem
exercício. Cor nunca carrega informação sozinha, e comprimento também não. */
.est-barra {
display: block; height: 6px; border-radius: 99px;
background: var(--cpm-surface-3); overflow: hidden;
}
.est-barra > span {
display: block; height: 100%; border-radius: 99px;
background: var(--cpm-primary);
}
.est-barra--unidade > span { background: var(--unidade-cor, var(--cpm-primary)); }
/* Apagada e não escondida: a área sem exercício continua sendo uma das quatro
da prova, e sumir com ela faria o ENEM parecer ter três. O ícone perde a cor
junto, senão o cartão apagado continuaria acenando como se abrisse algo. */
.est-area--vazia { opacity: .6; border-left-color: var(--cpm-border); }
.est-area--vazia .est-area__icone { color: var(--cpm-text-muted); }
/* ==========================================================================
Os quatro passos da trilha — quatro boxes lado a lado
No mesmo lugar em todas as telas da trilha, e o box **fica verde quando o
passo é concluído**. O verde é o de acerto, escurecido para o branco
escrever em cima dele com folga (#047857 dá 5.48:1). O passo atual é o
único com borda na cor do perfil: ele não é "mais concluído" que os outros,
é onde a pessoa está. Ver `_momentos.html`.
========================================================================== */
.est-passos { margin-bottom: 16px; --passo-verde: #047857; }
.est-passos__lista {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.est-passo__alvo {
display: flex; flex-direction: column; gap: 4px; height: 100%;
padding: 12px 14px; border-radius: 12px;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
color: inherit; text-decoration: none;
transition: box-shadow .15s ease, border-color .15s ease;
}
a.est-passo__alvo:hover {
border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover);
}
.est-passo__topo { display: flex; align-items: center; justify-content: space-between; }
.est-passo__marca {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid var(--cpm-border); color: var(--cpm-text-muted);
font-family: var(--cpm-font-display); font-weight: 800; font-size: 13px;
}
.est-passo__marca .material-icons-outlined { font-size: 17px; }
.est-passo__icone { font-size: 22px; color: var(--cpm-text-muted); }
.est-passo__titulo {
font-family: var(--cpm-font-display); font-size: 14.5px; line-height: 1.25;
}
.est-passo__descricao {
font-size: 12.5px; line-height: 1.45; color: var(--cpm-text-secondary);
}
.est-passo__estado {
margin-top: auto; padding-top: 2px;
font-size: 12px; font-weight: 600; color: var(--cpm-text-muted);
}
/* Concluído: o box inteiro verde, texto branco. */
.est-passo--concluida .est-passo__alvo {
background: var(--passo-verde); border-color: var(--passo-verde); color: #fff;
}
.est-passo--concluida .est-passo__marca {
background: #fff; border-color: #fff; color: var(--passo-verde);
}
.est-passo--concluida .est-passo__icone,
.est-passo--concluida .est-passo__descricao,
.est-passo--concluida .est-passo__estado { color: rgba(255, 255, 255, .9); }
/* Onde ele está: borda e número na cor do perfil. Num passo já concluído o
box continua verde, e a borda roxa por fora diz que é ali que ele está. */
.est-passo--atual .est-passo__alvo {
border: 2px solid var(--cpm-primary);
box-shadow: 0 0 0 3px var(--cpm-primary-light);
}
.est-passo--atual:not(.est-passo--concluida) .est-passo__marca {
background: var(--cpm-primary); border-color: var(--cpm-primary); color: #fff;
}
.est-passo--atual:not(.est-passo--concluida) .est-passo__estado { color: var(--cpm-primary); }
/* Aberto e ainda não feito: o número na cor do perfil chama para o clique. */
.est-passo--aberto .est-passo__marca { border-color: var(--cpm-primary); color: var(--cpm-primary); }
/* Tentado: percorrido sem vencer. Âmbar, e não o verde — são coisas
diferentes, e o texto diz qual. */
.est-passo--tentada .est-passo__alvo { border-color: var(--cpm-yellow); }
.est-passo--tentada .est-passo__marca { border-color: var(--cpm-yellow); color: var(--cpm-yellow-ink); }
.est-passo--tentada .est-passo__estado { color: var(--cpm-yellow-ink); }
/* Trancado: apagado e não escondido — ver o caminho inteiro é o que dá
sentido ao passo em que se está. O estado escrito diz qual passo o abre. */
.est-passo--trancado .est-passo__alvo { opacity: .55; background: var(--cpm-surface); }
.est-passo--trancado .est-passo__marca { border-style: dashed; }
/* Dentro de um passo os boxes são mais baixos: o que ele veio fazer está
logo abaixo, e o cabeçalho não pode empurrá-lo para baixo da dobra. */
.est-passos:not(.est-passos--completo) .est-passo__alvo { padding: 10px 12px; }
.est-passos:not(.est-passos--completo) .est-passo__titulo { font-size: 13.5px; }
/* No celular, dois por linha. Os quatro continuam à vista. */
@media (max-width: 720px) {
.est-passos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.est-passo__descricao { display: none; }
}
/* O título do bloco de habilidades: a régua acima não pode ficar de enfeite,
e sem este rótulo a lista abaixo não diz de qual momento ela é. */
.est-momento-titulo {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 16px; margin: 20px 0 10px;
}
.est-momento-titulo__numero {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--cpm-primary); color: #fff; font-size: 13px; font-weight: 800;
}
.est-momento-titulo__nota {
font-size: 12.5px; font-weight: 400; color: var(--cpm-text-muted);
}
/* ==========================================================================
A janela de assuntos — as competências específicas da área
Substituiu a tela de unidades temáticas na Trilha ENEM, e as duas não
podiam conviver: a competência **atravessa** a unidade (uma competência de
Matemática tem habilidade de Números e de Álgebra), então elas não aninham,
e oferecer as duas seria duas portas para a mesma escolha. A unidade
continua sendo a cor e a faixa do mapa do professor, que é onde ela
significa alguma coisa.
Uma coluna e não quatro: o assunto tem nome, resumo, duas contagens e uma
barra, e espremer isso em cartão de 250px daria quatro linhas de texto
truncado. Aqui a lista se lê de cima para baixo, como se lê uma escolha.
========================================================================== */
.est-assuntos { display: grid; gap: 10px; }
/* Os blocos de assunto lado a lado — três por linha numa tela de notebook,
e menos conforme a largura encolhe. Dentro do bloco, corpo e número
empilham (ver `.est-assuntos--blocos .est-bloco`). */
.est-assuntos--blocos {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.est-assuntos--blocos .est-bloco {
grid-template-columns: 1fr; align-content: space-between;
gap: 14px; padding: 20px; margin-bottom: 0;
}
.est-assuntos--blocos .est-bloco__corpo { padding-left: 0; }
.est-assuntos--blocos .est-bloco__destaque {
padding: 12px 0 0; border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .45);
}
.est-assuntos--blocos .est-bloco__numero { font-size: 40px; }
/* A linha que diz por que a lista está nesta ordem. Discreta: é legenda da
lista, não instrução. */
.est-assuntos__ordem {
margin: 0 0 12px; font-size: 13px;
color: var(--cpm-text-muted, #6b7280);
}
.est-assunto {
display: grid; grid-template-columns: auto 1fr; gap: 16px;
align-items: start; text-decoration: none; color: inherit;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-left: 3px solid var(--cpm-primary);
border-radius: var(--cpm-radius); padding: 16px 18px;
}
.est-assunto:hover {
border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover);
}
.est-assunto__numero {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--cpm-primary-light); color: var(--cpm-primary);
font-family: var(--cpm-font-display); font-weight: 800; font-size: 15px;
}
.est-assunto__corpo strong { display: block; font-size: 16px; line-height: 1.3; }
.est-assunto__resumo {
margin: 4px 0 0; font-size: 13px; line-height: 1.5;
color: var(--cpm-text-secondary);
}
.est-assunto__contas {
display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0;
font-size: 12.5px; color: var(--cpm-text-muted);
}
.est-assunto__caminho { display: inline-flex; align-items: center; gap: 4px; }
.est-assunto__caminho .material-icons-outlined { font-size: 15px; }
.est-assunto__progresso {
display: block; margin-top: 5px; font-size: 12.5px; color: var(--cpm-text-muted);
}
.est-assunto__corpo .est-barra { margin-top: 8px; max-width: 320px; }
/* As trilhas de um assunto em boxes pequenos, lado a lado (três ou quatro
por linha no notebook). A descrição corta em três linhas — o texto inteiro
está no `title` e abre no passo —, e a barra ocupa a largura do box. */
.est-assuntos--trilhas {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
}
.est-assuntos--trilhas .est-assunto { gap: 10px; padding: 14px; }
.est-assuntos--trilhas .est-assunto__numero {
width: 28px; height: 28px; font-size: 13px;
}
.est-assuntos--trilhas .est-assunto__corpo {
display: flex; flex-direction: column; min-width: 0; height: 100%;
}
.est-assuntos--trilhas .est-assunto__corpo strong { font-size: 15px; line-height: 28px; }
.est-assuntos--trilhas .est-assunto__resumo {
font-size: 12.5px; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* O que mede vai para o pé do box, para as barras se alinharem na linha. */
.est-assuntos--trilhas .est-assunto__contas { margin-top: auto; padding-top: 8px; }
.est-assuntos--trilhas .est-assunto__corpo .est-barra { max-width: none; }
/* Apagado e não escondido: o assunto sem caminho mapeado continua sendo uma
das competências da área, e sumir com ele faria a BNCC parecer ter menos. */
.est-assunto--vazio { opacity: .6; border-left-color: var(--cpm-border); }
.est-assunto--vazio .est-assunto__numero {
background: var(--cpm-surface); color: var(--cpm-text-muted);
}
/* ==========================================================================
A Área de Treinamento — escolher a área e o tamanho da sessão
Reaproveita `.est-area` da escolha de área da trilha, que já tem o ícone à
esquerda e o estoque embaixo do nome. A variante `--radio` só troca o link
por um controle: a marca de escolhido é a borda e o fundo, e o rádio fica
visível para quem chega pelo teclado.
========================================================================== */
.est-areas--escolha { margin-top: 4px; }
.est-area--radio {
cursor: pointer;
grid-template-columns: auto auto 1fr;
align-items: center;
}
.est-area--radio input[type="radio"] { margin: 0; }
.est-area__corpo { display: block; }
.est-area--radio:has(input:checked) {
border-color: var(--cpm-primary);
background: var(--cpm-primary-lighter);
box-shadow: var(--cpm-shadow-hover);
}
/* Fundo do bloco, e não só borda: num grid de quatro cartões a borda sozinha
se perde, e a escolha é o que a tela precisa deixar óbvio antes do envio. */
.est-area--radio:has(input:disabled) { cursor: not-allowed; }
/* Nove botões numa linha que quebra. Rádio escondido e o número como alvo: o
passo de cinco fica visível, em vez de virar uma regra que recusa o 7 depois
do envio. */
.est-quantidades { display: flex; flex-wrap: wrap; gap: 8px; }
.est-quantidade { cursor: pointer; }
.est-quantidade input { position: absolute; opacity: 0; pointer-events: none; }
.est-quantidade span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 56px; height: 44px; padding: 0 12px;
border: 1px solid var(--cpm-border); border-radius: var(--cpm-radius);
background: var(--cpm-bg); font-family: var(--cpm-font-display);
font-size: 16px; font-weight: 700; color: var(--cpm-text-secondary);
}
.est-quantidade input:checked + span {
border-color: var(--cpm-primary); background: var(--cpm-primary);
color: #fff;
}
/* O foco tem que aparecer: com o rádio escondido, quem navega por teclado não
veria onde está. */
.est-quantidade input:focus-visible + span {
outline: 2px solid var(--cpm-primary); outline-offset: 2px;
}
/* O símbolo da área ao lado do título da trilha aberta: é o mesmo pelo qual
ele escolheu na tela anterior, e é o que diz, sem ler, onde ele está. */
.est-hero__icone { font-size: 26px; vertical-align: -4px; opacity: .9; }
.est-hero--trilha h1 { font-size: 22px; }
.est-hero__sobre {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; margin: 0 0 4px; color: rgba(255, 255, 255, .85);
}
.est-hero__sobre .material-icons-outlined { font-size: 15px; vertical-align: -3px; }
.est-progresso { margin-top: 16px; }
.est-progresso__barra {
height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .28);
overflow: hidden;
}
.est-progresso__barra span {
display: block; height: 100%; background: #fff; border-radius: 99px;
}
.est-progresso__texto {
display: block; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .85);
}
.est-continuar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.est-trilha { list-style: none; margin: 0; padding: 0; }
.est-etapa {
display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
align-items: start; position: relative;
background: var(--cpm-bg); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 12px 16px; margin-bottom: 8px;
}
/* O fio que liga uma etapa à seguinte. Desenhado a partir da marca, e não
entre os cartões, para acompanhar a numeração quando a linha quebra. */
.est-etapa::after {
content: ''; position: absolute; left: 31px; top: 44px; bottom: -9px;
width: 2px; background: var(--cpm-border-light);
}
.est-etapa:last-child::after { display: none; }
.est-etapa__marca {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
border: 2px solid var(--cpm-border); background: var(--cpm-surface);
font-size: 13px; font-weight: 700; color: var(--cpm-text-muted);
}
.est-etapa__marca .material-icons-outlined { font-size: 17px; }
.est-etapa--concluida .est-etapa__marca {
background: var(--cpm-success); border-color: var(--cpm-success); color: #fff;
}
.est-etapa--concluida::after { background: var(--cpm-success); }
.est-etapa--andamento .est-etapa__marca {
border-color: var(--cpm-primary); color: var(--cpm-primary);
}
.est-etapa--tentada .est-etapa__marca {
/* Borda no âmbar, número no tom escuro: o número é palavra escrita e o
âmbar de alerta só passa AA no --cpm-yellow-ink. */
border-color: var(--cpm-yellow); color: var(--cpm-yellow-ink);
}
/* Apagada, e não escondida: a etapa sem exercício faz parte do caminho, e
sumir com ela faria o estudante achar que o caminho é mais curto. */
.est-etapa--sem_exercicio { opacity: .55; }
.est-etapa__topo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.est-etapa__acao { display: grid; gap: 6px; justify-items: stretch; }
.est-etapa__qtd { width: 76px; padding: 5px 8px; font-size: 13px; }
@media (max-width: 700px) {
.est-etapa { grid-template-columns: auto 1fr; }
.est-etapa__acao { grid-column: 2; }
.est-etapa::after { display: none; }
}
/* ==========================================================================
Papel — a mesma lista, impressa. O gabarito vai na última folha, e não ao pé
de cada questão: ali ele responde antes de ser perguntado.
========================================================================== */
@media print {
.cpm-topbar, .cpm-sidebar, .cpm-sidebar-scrim, .est-nao-imprime { display: none !important; }
.cpm-main { margin: 0 !important; padding: 0 !important; }
body { background: #fff; }
@page { size: A4 portrait; margin: 14mm; }
.est-folha__cabecalho {
border-bottom: 1.5px solid #000; padding-bottom: 8px; margin-bottom: 14px;
}
.est-folha__linha-aluno {
display: flex; gap: 18px; margin-top: 10px; font-size: 11pt;
}
.est-folha__linha-aluno span { border-bottom: 1px solid #000; flex: 1; min-height: 18px; }
.est-questao {
border: 0; padding: 0 0 12px; margin: 0 0 12px;
break-inside: avoid; page-break-inside: avoid;
}
.est-alt { border: 0; padding: 2px 0; }
.est-alt__letra { border-color: #000; color: #000; }
.est-gabarito { break-before: page; page-break-before: always; }
}
/* ==========================================================================
Passo 1 da trilha — a aula conceitual
Dois cartões lado a lado e o quiz em largura inteira embaixo, que é o
desenho pedido. As duas colunas são iguais (`1fr 1fr`) porque nenhuma das
duas é a principal: o texto diz o que a trilha ensina, o mapa mostra a
mesma coisa de outro jeito, e quem lê escolhe por onde entrar.
========================================================================== */
.est-passo1 {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
align-items: start;
}
/* Empilha antes do quiz ficar espremido: a 760px cada coluna já está com
menos de 360px, e o mapa mental deixa de se ler. */
@media (max-width: 760px) {
.est-passo1 { grid-template-columns: 1fr; }
}
.est-passo1__cartao { margin: 0; }
/* `pre-line` e não `
` na gravação: o que o superadmin digitou tem
parágrafos, e guardá-los como marcação obrigaria a escapar o resto. */
.est-passo1__texto {
font-size: 15px; line-height: 1.65; white-space: pre-line;
}
.est-passo1__mapa {
display: block; width: 100%; height: auto; border-radius: 10px;
border: 1px solid var(--cpm-border-light);
}
/* O mapa em SVG não leva borda de foto: é desenho, e ganha só respiro. */
.est-passo1__mapa--svg { border: 0; border-radius: 0; margin: 0; color: var(--cpm-text); }
.est-passo1__quiz { margin-top: 16px; }
/* A explicação de quem errou: texto de leitura, com parágrafos preservados
como no cartão do "o que esta trilha vai ensinar". */
.est-passo1__explicacao {
margin: 14px 0; padding: 14px 16px; border-radius: 9px;
background: var(--cpm-bg-light, rgba(106, 63, 212, .06));
border-left: 4px solid var(--cpm-primary);
font-size: 14.5px; line-height: 1.65; white-space: pre-line;
}
.est-passo1__certa { margin: 0 0 8px; white-space: normal; }
.est-passo1__campo { border: 0; padding: 0; margin: 0 0 16px; }
.est-passo1__campo legend {
font-size: 15.5px; font-weight: 700; line-height: 1.5;
margin-bottom: 12px; padding: 0; color: var(--cpm-text);
}
/* A alternativa inteira é clicável, e não só o círculo do rádio: num celular
o alvo de 14px é o que faz o estudante errar a escolha que ele só pode
fazer uma vez. */
.est-passo1__alternativa {
display: flex; gap: 10px; align-items: flex-start;
padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
border: 1px solid var(--cpm-border); border-radius: 9px;
font-size: 14.5px; line-height: 1.55;
transition: border-color .12s, background .12s;
}
.est-passo1__alternativa:hover { border-color: var(--cpm-primary); }
.est-passo1__alternativa:focus-within {
border-color: var(--cpm-primary);
box-shadow: 0 0 0 3px var(--cpm-primary-light, rgba(106, 63, 212, .18));
}
.est-passo1__alternativa input { margin-top: 3px; flex: none; }
.est-passo1__video {
position: relative; padding-top: 56.25%; margin: 16px 0 10px;
border-radius: 10px; overflow: hidden; background: #000;
}
.est-passo1__video iframe, .est-passo1__video > div {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.est-passo1__estado {
display: flex; align-items: center; gap: 6px; margin: 0;
font-size: 13.5px; color: var(--cpm-text-muted);
}
.est-passo1__estado .material-icons-outlined { font-size: 17px; }
/* O "E agora?" do resultado de uma lista da trilha. A borda esquerda leva a
cor de estado (verde passou, âmbar treinar) e o ícone e a frase repetem a
mesma coisa — cor nunca carrega a informação sozinha. */
.est-agora {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 0 0 16px; border-left: 5px solid var(--cpm-yellow, #d97706);
}
.est-agora--passou { border-left-color: var(--cpm-green, #16a34a); }
/* Terceiro estado: tentou o bastante, leva a explicação e segue. Não é
acerto nem erro — é o caminho continuando, então usa a cor de chrome
do perfil e não uma das três de estado. */
.est-agora--segue { border-left-color: var(--cpm-primary, #6a3fd4); }
.est-agora--segue .est-agora__icone { color: var(--cpm-primary, #6a3fd4); }
.est-agora__icone { font-size: 30px; color: var(--cpm-yellow, #d97706); }
.est-agora--passou .est-agora__icone { color: var(--cpm-green, #16a34a); }
.est-agora__texto { flex: 1 1 280px; font-size: 15px; line-height: 1.55; }
.est-agora__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.est-agora__acoes form { margin: 0; }
.est-agora__acoes .cpm-btn .material-icons-outlined { font-size: 18px; vertical-align: -4px; }
/* ==========================================================================
As três caixas do cabeçalho do estudante
Substituíram a fileira de números soltos (`est-hero__numeros`), que corria
sem separação. São três coisas diferentes — trilhas, treino e vídeo —, e
caixa com borda é o que faz cada uma se ler como uma resposta em vez de
três números na mesma linha.
========================================================================== */
.est-hero__caixas {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px; margin-top: 20px;
}
@media (max-width: 720px) { .est-hero__caixas { grid-template-columns: 1fr; } }
.est-caixa {
/* Fundo claro sobre o roxo do herói, e não transparente: o cabeçalho já é
um gradiente, e caixa sem fundo próprio se dissolve nele. */
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 12px; padding: 14px 16px;
}
.est-caixa__titulo {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; opacity: .85; margin-bottom: 8px;
}
.est-caixa__titulo .material-icons-outlined { font-size: 16px; }
.est-caixa__linha {
margin: 0 0 2px; font-size: 14px; line-height: 1.35;
}
.est-caixa__linha strong { font-size: 26px; font-weight: 800; margin-right: 4px; }
/* A nota é o que impede o número de ser lido errado — "completa" precisa
dizer completa do quê. Fica menor, mas nunca escondida. */
.est-caixa__nota {
display: block; margin-top: 8px; font-size: 11.5px;
line-height: 1.4; opacity: .8;
}
/* A seção que ainda não abriu: a caixa fica no lugar dela, apagada. Menos
opacidade que o `--apagado` do resto da casa (.45), porque aqui o fundo é o
gradiente roxo e não o branco — sobre ele, .45 apaga até o contorno. */
.est-caixa--apagado { opacity: .62; }
/* O "em breve" da casa é cinza (`--cpm-text-muted`), medido para branco. Dentro
do herói ele cairia sobre o roxo e sumiria, então aqui ele é branco lavado —
é a mesma decisão do rótulo apagado do mapa: quem apaga é a luminosidade
contra o fundo que a peça tem, não um valor fixo. */
.est-hero .cpm-em-breve { color: rgba(255, 255, 255, .82); }
/* O cartão de uma seção fechada, no corpo da tela. Não é `cpm-card--apagado`
porque não existe: o padrão da casa apaga o **comando**, e aqui o cartão
inteiro é a promessa. O texto continua legível de propósito — quem lê
precisa saber o que vem, e é isso que separa "apagado" de "escondido". */
.est-cartao--apagado {
opacity: .72;
border-style: dashed;
}
.est-cartao--apagado .cpm-card__title { display: flex; align-items: center; gap: 8px; }
/* A espera pelo distrator: o estudante errou, mas ainda não chegou à terceira
tentativa. Fica visível e apagada — sumir faria parecer que este item não
tem explicação nenhuma, e ele não saberia que há algo a alcançar. */
.est-porque__espera {
display: flex; gap: 7px; align-items: flex-start;
margin: 12px 0 0; padding: 10px 12px;
border: 1px dashed var(--cpm-border); border-radius: 9px;
font-size: 13px; line-height: 1.5; color: var(--cpm-text-muted);
}
.est-porque__espera .material-icons-outlined { font-size: 17px; flex: none; }
/* ==========================================================================
A sugestão de por onde começar
Ela veste `--cpm-primary-light`, a cor de chrome do perfil, e **não** verde,
amarelo nem vermelho: esses três significam acerto, alerta e erro nas telas
do estudante, e uma sugestão não é nenhum dos três. Pintá-la de verde faria
o cartão parecer elogio; de amarelo, cobrança.
É um `` inteiro e não um cartão com botão dentro: a sugestão tem um
destino só, e um alvo de clique do tamanho do cartão é o que ela precisa
numa tela que se abre no celular.
========================================================================== */
.est-sugestao {
display: block; text-decoration: none; color: inherit;
background: var(--cpm-primary-lighter);
border: 1px solid var(--cpm-primary-light);
border-left: 3px solid var(--cpm-primary);
margin-bottom: 16px;
}
.est-sugestao:hover {
border-color: var(--cpm-primary); box-shadow: var(--cpm-shadow-hover);
}
.est-sugestao__selo {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase; color: var(--cpm-primary); margin: 0 0 6px;
}
.est-sugestao__selo .material-icons-outlined { font-size: 17px; }
.est-sugestao__nome { font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.est-sugestao__area {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--cpm-text-muted); margin: 0 0 8px;
}
.est-sugestao__area .material-icons-outlined { font-size: 16px; }
.est-sugestao__resumo { font-size: 14px; margin: 0 0 10px; }
/* O motivo é o que distingue oferta de imposição, então ele não é nota de
rodapé: ganha peso, fundo próprio e fica coloado ao pé do cartão. */
.est-sugestao__motivo {
font-size: 13.5px; font-weight: 600; color: var(--cpm-primary-hover);
background: var(--cpm-primary-light);
border-radius: var(--cpm-radius); padding: 8px 11px; margin: 0;
}
/* ==========================================================================
Simulados — o cronômetro e o relatório por competência
O cronômetro usa a cor de chrome do perfil, e não uma das três de estado:
tempo não é acerto, erro nem alerta. Ao passar do tempo de referência ele
muda para o âmbar de atenção — que aqui quer dizer "olhe para isto", e não
"você errou", porque o simulado não fecha sozinho.
========================================================================== */
.est-cronometro {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 16px; padding: 10px 14px;
border: 1px solid var(--cpm-border-light); border-radius: var(--cpm-radius);
background: var(--cpm-primary-lighter);
}
.est-cronometro .material-icons-outlined { color: var(--cpm-primary); font-size: 20px; }
.est-cronometro__tempo {
font-family: var(--cpm-font-mono); font-size: 18px; font-weight: 700;
color: var(--cpm-primary); font-variant-numeric: tabular-nums;
}
.est-cronometro__rotulo { font-size: 13px; color: var(--cpm-text-secondary); }
.est-cronometro--passou { background: #fff8ed; border-color: #f2d3a0; }
.est-cronometro--passou .material-icons-outlined,
.est-cronometro--passou .est-cronometro__tempo { color: var(--cpm-yellow, #d97706); }
/* O relatório: nome, barra e a conta escrita ao lado. A barra sozinha não diz
"de quantas", e é a mesma regra do progresso da trilha — comprimento não
carrega informação sozinho. */
.est-relatorio { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.est-relatorio__linha {
display: grid; grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) auto;
gap: 12px; align-items: center;
}
.est-relatorio__nome { font-size: 14px; }
.est-relatorio__conta {
font-size: 13px; color: var(--cpm-text-secondary);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 560px) {
.est-relatorio__linha { grid-template-columns: 1fr auto; }
.est-relatorio__linha .est-barra { grid-column: 1 / -1; }
}
/* ===================== O painel do estudante =====================
A tela contava esforço (listas, exercícios, minutos) e passou a contar
domínio. A ordem visual é a da pergunta de quem abre o app: o que faço
agora · onde estou · o que revisar. */
/* ---- 1. A ação principal, e é uma só ---- */
.est-retomar {
display: block; text-decoration: none; color: inherit;
background: var(--cpm-surface, #fff);
border: 1px solid var(--cpm-border, #e2e8f0);
border-left: 4px solid var(--cpm-primary);
border-radius: 12px; padding: 18px 20px; margin-bottom: 22px;
transition: box-shadow .15s ease, transform .15s ease;
}
a.est-retomar:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.est-retomar--vazio { border-left-color: var(--cpm-border, #e2e8f0); }
.est-retomar__rotulo {
display: block; font-size: 11.5px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase;
color: var(--cpm-primary); margin-bottom: 4px;
}
.est-retomar__titulo {
display: block; font-size: 19px; line-height: 1.25;
font-family: var(--cpm-font-display);
}
.est-retomar__detalhe {
display: block; margin-top: 2px; font-size: 13.5px;
color: var(--cpm-text-muted, #6b7280);
}
/* A régua miniatura: seis marcas, a atual em anel. Ela repete a régua grande
da trilha no tamanho de uma linha — quem está no meio do percurso reconhece
onde está antes de ler o texto. */
.est-retomar__passos { display: inline-flex; gap: 6px; margin-top: 10px; }
.est-retomar__passo {
width: 9px; height: 9px; border-radius: 50%;
background: var(--cpm-border, #e2e8f0);
}
.est-retomar__passo--feito { background: var(--cpm-success); }
.est-retomar__passo--atual {
background: var(--cpm-primary);
box-shadow: 0 0 0 3px var(--cpm-primary-light);
}
.est-retomar__acao {
display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
font-weight: 700; color: var(--cpm-primary); text-decoration: none;
}
.est-retomar__acao .material-icons-outlined { font-size: 18px; }
/* ---- 2. Onde estou, por área ---- */
.est-secao {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin: 0 0 12px; font-size: 15px; font-family: var(--cpm-font-display);
}
.est-secao__link {
margin-left: auto; font-size: 13px; font-weight: 600; font-family: inherit;
}
.est-areas {
display: grid; gap: 12px; margin-bottom: 26px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.est-area {
display: block; text-decoration: none; color: inherit;
background: var(--cpm-surface, #fff);
border: 1px solid var(--cpm-border, #e2e8f0);
border-radius: 12px; padding: 14px 16px;
}
a.est-area:hover { border-color: var(--cpm-primary); }
.est-area__topo {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.est-area__topo .material-icons-outlined { font-size: 18px; color: var(--cpm-primary); }
.est-area__barra {
display: block; height: 8px; border-radius: 99px;
background: var(--cpm-border, #e2e8f0); overflow: hidden;
}
.est-area__barra > span {
display: block; height: 100%; border-radius: 99px;
background: var(--cpm-primary);
}
.est-area__conta {
display: block; margin-top: 7px; font-size: 12.5px;
color: var(--cpm-text-muted, #6b7280);
}
/* ---- 3. O que revisar ---- */
.est-revisar { list-style: none; margin: 0 0 26px; padding: 0; }
.est-revisar__linha {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 11px 14px; border: 1px solid var(--cpm-border, #e2e8f0);
border-radius: 10px; margin-bottom: 8px;
background: var(--cpm-surface, #fff);
}
.est-revisar__falta {
font-size: 12.5px; color: var(--cpm-text-muted, #6b7280);
}
.est-revisar__acao { margin-left: auto; }
/* O nível de maestria: **marca e palavra**, nunca a cor sozinha. As quatro
formas se distinguem em preto e branco — círculo vazio, meio, quase cheio,
cheio —, que é a mesma regra do selo de dificuldade e dos ícones de
disciplina no mapa do professor. */
.est-nivel-maestria {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; white-space: nowrap;
}
.est-nivel-maestria__marca {
width: 11px; height: 11px; border-radius: 50%;
border: 2px solid currentColor; flex: none;
}
.est-nivel-maestria--nao_iniciada { color: var(--cpm-text-muted, #6b7280); }
.est-nivel-maestria--em_pratica { color: #b3541e; }
.est-nivel-maestria--em_pratica .est-nivel-maestria__marca {
background: linear-gradient(to right, currentColor 50%, transparent 50%);
}
.est-nivel-maestria--proficiente { color: var(--cpm-primary); }
.est-nivel-maestria--proficiente .est-nivel-maestria__marca {
background: linear-gradient(to right, currentColor 75%, transparent 75%);
}
.est-nivel-maestria--dominada { color: var(--cpm-success); }
.est-nivel-maestria--dominada .est-nivel-maestria__marca { background: currentColor; }
@media (max-width: 560px) {
.est-revisar__falta { width: 100%; order: 3; }
.est-revisar__acao { margin-left: 0; order: 4; }
}
/* ===================== A tela de área, em três colunas =====================
Onde estou (esquerda) · o que faço agora (centro) · quanto falta (direita).
Empilhadas numa coluna só, as três perguntas viram rolagem e o estudante
responde a última primeiro. */
.est-area-tela {
display: grid; gap: 22px; align-items: start;
grid-template-columns: 220px minmax(0, 1fr) 210px;
}
.est-coluna__titulo {
font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--cpm-text-muted, #6b7280);
margin: 0 0 8px;
}
.est-coluna--areas .est-coluna__titulo:nth-of-type(n+2) { margin-top: 20px; }
.est-navlista { list-style: none; margin: 0 0 4px; padding: 0; }
.est-navlista__item {
display: flex; align-items: center; gap: 7px;
padding: 7px 9px; border-radius: 8px; text-decoration: none;
color: inherit; font-size: 13.5px; line-height: 1.25;
}
.est-navlista__item:hover { background: var(--cpm-bg); }
/* O item atual se distingue por **fundo, peso e barra**, e não por cor só:
numa lista de quatro linhas parecidas, a cor sozinha some para quem não a
enxerga. */
.est-navlista__item--atual {
background: var(--cpm-primary-light); font-weight: 700;
box-shadow: inset 3px 0 0 var(--cpm-primary);
}
.est-navlista__item .material-icons-outlined { font-size: 17px; flex: none; }
.est-navlista__nome { flex: 1; min-width: 0; }
.est-navlista__ordem {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 4px; flex: none;
background: var(--cpm-border, #e2e8f0); font-size: 11px; font-weight: 800;
}
.est-navlista__valor {
font-size: 11.5px; font-weight: 700; color: var(--cpm-text-muted, #6b7280);
flex: none;
}
.est-navlista__item--atual .est-navlista__valor { color: var(--cpm-primary); }
.est-area-tela__sobre {
display: flex; align-items: center; gap: 6px; margin: 0 0 2px;
font-size: 12px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--cpm-text-muted, #6b7280);
}
.est-area-tela__sobre .material-icons-outlined { font-size: 16px; }
.est-area-tela__titulo {
margin: 0 0 2px; font-size: 22px; font-family: var(--cpm-font-display);
}
/* ---- A habilidade, que abre no lugar ---- */
.est-habilidades { list-style: none; margin: 14px 0 0; padding: 0; }
.est-hab-linha {
border: 1px solid var(--cpm-border, #e2e8f0); border-radius: 10px;
margin-bottom: 8px; background: var(--cpm-surface, #fff);
}
.est-hab-linha__topo {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 11px 13px; cursor: pointer; list-style: none;
}
.est-hab-linha__topo::-webkit-details-marker { display: none; }
.est-hab-linha__nivel { font-size: 12.5px; font-weight: 700; }
.est-hab-linha__conta {
font-size: 12px; color: var(--cpm-text-muted, #6b7280);
}
.est-hab-linha__seta {
margin-left: auto; font-size: 20px; color: var(--cpm-text-muted, #6b7280);
transition: transform .15s ease;
}
.est-hab-linha[open] .est-hab-linha__seta { transform: rotate(180deg); }
.est-hab-linha__corpo {
padding: 0 13px 13px; border-top: 1px solid var(--cpm-border, #e2e8f0);
padding-top: 11px;
}
.est-hab-linha__falta {
display: flex; align-items: center; gap: 5px; margin: 0 0 11px;
font-size: 12.5px; font-weight: 600; color: var(--cpm-primary);
}
.est-hab-linha__falta .material-icons-outlined { font-size: 15px; }
/* ---- A coluna do progresso ---- */
.est-coluna--progresso {
background: var(--cpm-surface, #fff);
border: 1px solid var(--cpm-border, #e2e8f0);
border-radius: 12px; padding: 14px 16px;
}
.est-progresso-num {
margin: 6px 0 12px; font-size: 26px; font-weight: 800;
font-family: var(--cpm-font-display); color: var(--cpm-primary);
}
.est-contagem { list-style: none; margin: 0 0 4px; padding: 0; }
.est-contagem__linha {
display: flex; align-items: center; gap: 7px; font-size: 13px;
padding: 3px 0;
}
.est-contagem__total {
margin: 0 0 14px; padding-top: 6px; font-size: 12px;
border-top: 1px solid var(--cpm-border, #e2e8f0);
color: var(--cpm-text-muted, #6b7280);
}
/* No telefone não há três colunas: a navegação vira uma fila rolável no topo
e o progresso desce para o rodapé — o que ele precisa ver primeiro ali é o
que fazer agora, e não onde está no produto. */
@media (max-width: 900px) {
.est-area-tela { grid-template-columns: 1fr; }
.est-coluna--areas { order: 1; }
.est-coluna--conteudo { order: 2; }
.est-coluna--progresso { order: 3; }
.est-navlista { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.est-navlista__item { white-space: nowrap; }
.est-navlista__nome { flex: none; }
}
/* ===================== A dica progressiva =====================
Fica entre as alternativas e a próxima questão: é ajuda para responder, e
ajuda que aparece depois do que ela ajuda chega tarde. */
.est-dica {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 12px; padding-top: 12px;
border-top: 1px dashed var(--cpm-border, #e2e8f0);
}
.est-dica__texto {
width: 100%; margin: 0 0 6px; padding: 9px 12px;
background: var(--cpm-bg); border-radius: 8px;
font-size: 13.5px; line-height: 1.55;
}
.est-dica__ordem {
display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--cpm-text-muted, #6b7280);
margin-bottom: 2px;
}
/* Botão de texto, e não primário: a ação principal da tela continua sendo
entregar. Pedir dica é legítimo, e não deve competir com responder. */
.est-dica__botao {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--cpm-border, #e2e8f0);
border-radius: 8px; padding: 6px 11px; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 700;
color: var(--cpm-primary);
}
.est-dica__botao:hover { border-color: var(--cpm-primary); }
.est-dica__botao .material-icons-outlined { font-size: 17px; }
.est-dica__custo { font-size: 11.5px; color: var(--cpm-text-muted, #6b7280); }
/* ===================== O bloco da competência =====================
O ícone e o nome, e o número em destaque separado por um fio. A ordem de
leitura é a da decisão: qual é · quanto cai no ENEM. */
.est-bloco {
position: relative; overflow: hidden;
display: grid; gap: 18px; align-items: center;
grid-template-columns: minmax(0, 1fr) 190px;
background: var(--cpm-primary); color: #fff;
border-radius: 14px; padding: 22px 24px; margin-bottom: 14px;
text-decoration: none;
}
.est-bloco:hover { filter: brightness(1.06); }
.est-bloco__corpo { position: relative; min-width: 0; }
.est-bloco__icone { font-size: 30px; display: block; margin-bottom: 6px; }
.est-bloco__titulo {
display: block; font-family: var(--cpm-font-display);
font-size: 19px; line-height: 1.2;
}
.est-bloco__resumo {
margin: 6px 0 0; font-size: 13.5px; line-height: 1.5;
color: rgba(255, 255, 255, .88); max-width: 46ch;
}
.est-bloco__contas {
display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0;
font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .82);
}
.est-bloco__caminho { display: inline-flex; align-items: center; gap: 4px; }
.est-bloco__caminho .material-icons-outlined { font-size: 15px; }
/* O fio que separa os dois lados — o mesmo da peça de referência. No celular
ele vira uma linha horizontal, porque ali os lados empilham. */
.est-bloco__destaque {
position: relative; padding-left: 20px;
border-left: 1px solid rgba(255, 255, 255, .45);
}
.est-bloco__rotulo {
display: block; font-size: 12px; font-weight: 700; line-height: 1.3;
}
.est-bloco__numero {
display: block; margin-top: 6px;
font-family: var(--cpm-font-display); font-weight: 800;
font-size: 46px; line-height: 1;
}
.est-bloco__numero--vazio { color: rgba(255, 255, 255, .6); }
.est-bloco__nota {
display: block; margin-top: 4px; font-size: 11.5px;
color: rgba(255, 255, 255, .82);
}
/* Competência sem exercício continua **aparecendo**, apagada: sumir com ela
faria a BNCC parecer ter menos competências do que tem. Mesma regra das
áreas vazias na porta das trilhas. */
.est-bloco--vazio { background: #7a8aa8; }
@media (max-width: 720px) {
.est-bloco { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
.est-bloco__destaque {
padding: 12px 0 0; border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .45);
}
.est-bloco__numero { font-size: 38px; }
}
/* ==========================================================================
Gamificação — nível, ofensiva e conquistas (`_jogo.html`)
O roxo do chrome pinta o XP e o nível: é a cor do perfil, e não uma cor de
estado. A chama é o único tom quente, em #c2410c (5.18:1 sobre branco, então
escreve), longe do âmbar de alerta e do vermelho de erro — ofensiva não é
aviso nem falha. Verde fica com "acertou", como em toda a área do estudante.
Nenhuma cor diz sozinha: toda peça traz o número por extenso ao lado.
========================================================================== */
.jogo-painel {
display: grid; gap: 12px; margin-bottom: 22px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .jogo-painel { grid-template-columns: 1fr; } }
.jogo-bloco {
display: flex; gap: 14px; align-items: center;
text-decoration: none; color: inherit;
background: var(--cpm-surface, #fff);
border: 1px solid var(--cpm-border, #e2e8f0);
border-radius: 12px; padding: 14px 16px;
transition: box-shadow .15s ease, border-color .15s ease;
}
.jogo-bloco:hover { border-color: var(--cpm-primary); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.jogo-bloco__corpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jogo-bloco__rotulo {
font-size: 11px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--cpm-text-muted, #6b7280);
}
.jogo-bloco__titulo {
font-family: var(--cpm-font-display); font-size: 17px; line-height: 1.25;
}
.jogo-bloco__detalhe { font-size: 12.5px; color: var(--cpm-text-muted, #6b7280); margin-top: 2px; }
.jogo-selo {
flex: none; width: 48px; height: 48px; border-radius: 14px;
display: grid; place-items: center;
background: var(--cpm-grad); color: #fff;
font-family: var(--cpm-font-display); font-weight: 800; font-size: 20px;
box-shadow: 0 4px 12px rgba(106, 63, 212, .3);
}
.jogo-chama, .jogo-medalha { flex: none; font-size: 40px; }
.jogo-chama { color: var(--cpm-border, #cbd5e1); }
.jogo-bloco--acesa .jogo-chama { color: #c2410c; }
.jogo-medalha { color: var(--cpm-primary); }
.jogo-barra {
display: block; height: 8px; border-radius: 99px; overflow: hidden;
background: var(--cpm-primary-light, #f0eafd); margin: 6px 0 2px;
}
.jogo-barra > span {
display: block; height: 100%; border-radius: inherit;
background: var(--cpm-primary); min-width: 2px;
}
.jogo-barra--fina { height: 6px; width: 100%; }
/* O que a entrega rendeu. */
.jogo-recompensa {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
background: var(--cpm-primary-lighter, #f8f5fe);
border: 1px solid var(--cpm-primary-light, #f0eafd);
border-left: 4px solid var(--cpm-primary);
border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
animation: jogo-entra .4s ease-out;
}
.jogo-recompensa__xp {
font-family: var(--cpm-font-display); font-size: 24px; font-weight: 800;
color: var(--cpm-primary);
}
.jogo-recompensa__texto { flex: 1; min-width: 200px; }
.jogo-recompensa__ofensiva { display: inline-flex; align-items: center; gap: 4px; color: #c2410c; font-weight: 700; }
.jogo-recompensa__link { font-size: 13px; }
.jogo-novas {
background: var(--cpm-surface, #fff);
border: 1px dashed var(--cpm-primary);
border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
animation: jogo-entra .5s ease-out;
}
.jogo-novas__rotulo {
display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--cpm-primary); margin-bottom: 6px;
}
.jogo-novas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jogo-novas li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jogo-novas li .material-icons-outlined { color: var(--cpm-primary); }
.jogo-novas li span:last-child { color: var(--cpm-text-muted, #6b7280); font-size: 13px; }
@keyframes jogo-entra {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.jogo-recompensa, .jogo-novas { animation: none; }
}
/* A vitrine de medalhas. */
.jogo-medalhas {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* No celular, duas medalhas por linha: uma por linha fazia dezoito cartões
ocuparem quase cinco mil pixels, e o estudante rolava sem ver o que falta. */
@media (max-width: 560px) {
.jogo-medalhas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jogo-medalha-cartao { padding: 14px 10px; }
.jogo-medalha-cartao__icone { width: 44px; height: 44px; font-size: 22px; }
}
.jogo-medalha-cartao {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 4px; padding: 18px 14px; border-radius: 12px;
border: 1px solid var(--cpm-border, #e2e8f0);
background: var(--cpm-surface, #fff);
}
.jogo-medalha-cartao__icone {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; font-size: 28px; margin-bottom: 6px;
}
.jogo-medalha-cartao--obtida .jogo-medalha-cartao__icone {
background: var(--cpm-grad); color: #fff;
box-shadow: 0 4px 12px rgba(106, 63, 212, .25);
}
.jogo-medalha-cartao--obtida { border-color: var(--cpm-primary-light, #f0eafd); }
/* Trancada é cadeado + contagem, e não só cinza: a forma diz "falta", e o
número diz quanto. */
.jogo-medalha-cartao--trancada .jogo-medalha-cartao__icone {
background: var(--cpm-bg, #f1f5f9); color: var(--cpm-text-muted, #6b7280);
border: 1px dashed var(--cpm-border, #cbd5e1);
}
.jogo-medalha-cartao__nome { font-family: var(--cpm-font-display); font-size: 15px; }
.jogo-medalha-cartao__descricao { font-size: 12.5px; color: var(--cpm-text-muted, #6b7280); }
.jogo-medalha-cartao__estado { font-size: 12px; font-weight: 700; margin-top: 4px; }
.jogo-medalha-cartao--obtida .jogo-medalha-cartao__estado { color: var(--cpm-primary); }
.jogo-regras { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
/* ---------- A tela de Conquistas ----------
**Cabe inteira numa tela de notebook** (1366×~600 úteis, sem rolar): o
painel numa faixa no alto, as medalhas em cartões deitados — ícone ao
lado do texto, barra e contagem na mesma linha —, quatro por linha e com a
largura toda, e as regras de XP numa faixa no pé, lado a lado. O escopo é esta
página: o painel e o cartão de medalha mantêm o desenho de sempre onde mais
aparecerem. Mexeu aqui, meça de novo nesse tamanho. */
.jogo-medalha-cartao__progresso { display: flex; flex-direction: column; align-items: center; width: 100%; }
.jogo-pagina__cabeca {
display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.jogo-pagina__cabeca h1 { font-size: 22px; margin: 0; }
.jogo-pagina__cabeca p { margin: 0; font-size: 13.5px; }
.jogo-pagina__cabeca ~ .jogo-painel { gap: 8px; margin-bottom: 10px; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-bloco { padding: 6px 12px; gap: 10px; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-bloco__titulo { font-size: 15px; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-bloco__detalhe { font-size: 12px; margin-top: 0; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-selo { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-chama,
.jogo-pagina__cabeca ~ .jogo-painel .jogo-medalha { font-size: 30px; }
.jogo-pagina__cabeca ~ .jogo-painel .jogo-barra { margin: 3px 0 1px; height: 6px; }
.jogo-pagina { display: grid; gap: 10px; }
.jogo-pagina__titulo { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.jogo-pagina__regras {
display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; padding: 10px 14px;
}
.jogo-pagina__regras .jogo-pagina__titulo { margin: 0; flex: none; }
.jogo-pagina__regras .jogo-regras {
list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px;
font-size: 12.5px; line-height: 1.4; flex: 1;
}
.jogo-pagina .jogo-medalhas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* O cartão deitado: nome e contagem na primeira linha, a descrição na
segunda, a barra no pé. Na medalha ganha, "Ganha em…" ocupa o pé no lugar
da barra — ela é longa demais para dividir a linha com o nome. */
.jogo-pagina .jogo-medalha-cartao {
display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
column-gap: 10px; row-gap: 0; align-items: start; text-align: left; padding: 7px 10px;
}
.jogo-pagina .jogo-medalha-cartao__icone {
grid-column: 1; grid-row: 1 / span 3;
width: 32px; height: 32px; font-size: 17px; margin: 0;
}
.jogo-pagina .jogo-medalha-cartao__nome { grid-column: 2; grid-row: 1; font-size: 13.5px; line-height: 1.3; }
.jogo-pagina .jogo-medalha-cartao__descricao {
grid-column: 2 / 4; grid-row: 2; font-size: 11.5px; line-height: 1.3;
}
.jogo-pagina .jogo-medalha-cartao__progresso { display: contents; }
.jogo-pagina .jogo-medalha-cartao__estado { font-size: 11.5px; margin: 0; white-space: nowrap; }
.jogo-pagina .jogo-medalha-cartao--trancada .jogo-medalha-cartao__estado {
grid-column: 3; grid-row: 1; align-self: center;
}
.jogo-pagina .jogo-medalha-cartao--obtida .jogo-medalha-cartao__estado {
grid-column: 2 / 4; grid-row: 3; margin-top: 3px;
}
.jogo-pagina .jogo-medalha-cartao__progresso .jogo-barra--fina {
grid-column: 2 / 4; grid-row: 3; height: 4px; margin: 5px 0 1px;
}
@media (max-width: 1100px) {
.jogo-pagina .jogo-medalhas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.jogo-pagina .jogo-medalhas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cartão estreito: o nome fica com a linha toda, e a contagem desce para
o pé, ao lado da barra — dividindo a linha, as duas se atropelavam. */
.jogo-pagina .jogo-medalha-cartao__nome { grid-column: 2 / 4; }
.jogo-pagina .jogo-medalha-cartao--trancada .jogo-medalha-cartao__estado {
grid-column: 3; grid-row: 3; margin-left: 6px;
}
.jogo-pagina .jogo-medalha-cartao__progresso .jogo-barra--fina { grid-column: 2; align-self: center; margin: 3px 0 0; }
}
/* ==========================================================================
Verificação de pré-requisitos (passo 1) — um cartão por habilidade, com o
quiz conceitual e o prático lado a lado. Certo e errado se leem pelo ícone
e pela palavra, e não só pela cor.
========================================================================== */
.est-verif { display: grid; gap: 14px; margin-bottom: 22px; }
.est-verif__hab {
border: 1px solid var(--cpm-border, #e2e8f0); border-radius: 14px;
padding: 16px 18px; background: var(--cpm-surface, #fff);
}
.est-verif__hab--ok { border-color: var(--cpm-success); }
.est-verif__titulo {
font-size: 15px; margin: 0 0 12px; padding-bottom: 8px;
border-bottom: 2px solid var(--cpm-primary);
}
.est-verif__titulo span { font-weight: 400; font-size: 13px; color: var(--cpm-text-muted, #6b7280); }
/* Mesma regra da lista: lado a lado enquanto couber. Os cartões do resultado
são menores (rótulo, ícone, uma palavra), então 200px bastam para cada. */
.est-verif__quizzes {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.est-verif__titulo { overflow-wrap: anywhere; }
@media (max-width: 560px) {
.est-verif__hab { padding: 12px; }
.est-verif__quiz { padding: 12px 10px; border-radius: 16px; }
}
.est-verif__quiz {
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center; padding: 16px 12px; border-radius: 22px;
border: 2px solid var(--cpm-primary); background: var(--cpm-primary-lighter, #f8f5fe);
}
.est-verif__rotulo {
font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.est-verif__marca { font-size: 32px; }
.est-verif__quiz--certo .est-verif__marca { color: var(--cpm-success); }
.est-verif__quiz--errado .est-verif__marca { color: var(--cpm-red); }
.est-verif__link { font-size: 12.5px; }
.est-verif__estado {
margin: 10px 0 0; font-size: 13px; font-weight: 700;
display: flex; align-items: center; gap: 6px;
}
.est-verif__hab--ok .est-verif__estado { color: var(--cpm-accent-ink, #1f7a1f); }
/* A verificação do passo 1 na hora de responder: um bloco por habilidade,
com o quiz conceitual e o prático lado a lado — as duas faces da mesma
pergunta. No celular eles empilham, conceitual primeiro. */
.est-par {
border: 1px solid var(--cpm-border, #e2e8f0); border-radius: 14px;
padding: 16px; margin-bottom: 18px; background: var(--cpm-surface, #fff);
}
.est-par__titulo {
font-size: 15px; margin: 0 0 12px; padding-bottom: 8px;
border-bottom: 2px solid var(--cpm-primary);
}
.est-par__titulo span { font-weight: 400; font-size: 13px; color: var(--cpm-text-muted, #6b7280); }
/* **Lado a lado enquanto couber, e não até uma largura de tela fixa.** A
coluna mede o espaço que ela tem de fato — que já desconta o menu lateral —,
e cada quiz precisa de uns 320px para a alternativa não virar uma palavra
por linha. `auto-fit` põe os dois juntos quando há 2 × 320 e empilha quando
não há, em qualquer tela; `min(100%, …)` é o que impede a coluna mínima de
estourar a tela num celular mais estreito que ela. */
.est-par__grade {
display: grid; gap: 14px; align-items: stretch;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.est-par__grade > .est-questao { margin-bottom: 0; min-width: 0; }
/* Palavra longa, URL ou fórmula sem espaço não empurra a coluna para fora. */
.est-par .est-questao__texto,
.est-par .est-questao__comando,
.est-par .est-alt__texto { overflow-wrap: anywhere; }
.est-par .est-questao__figura { max-width: 100%; }
.est-par .est-questao__figura svg { max-width: 100%; height: auto; }
/* No celular o bloco perde a moldura de fora e os cartões perdem respiro: numa
tela de 360px, duas bordas e dois paddings aninhados comem um quinto da
largura que devia ser do texto. */
@media (max-width: 560px) {
.est-par { padding: 12px 0 0; border: 0; background: transparent; }
.est-par__titulo { font-size: 14px; }
.est-par__grade > .est-questao { padding: 14px 14px; }
}
/* ==========================================================================
A aula conceitual (passo 2): abertura · passo a passo | exemplo · mapa ·
quiz. A explicação e o exemplo ficam lado a lado enquanto couberem — cada
um precisa de uns 300px na coluna de conteúdo — e empilham quando não.
========================================================================== */
.est-aula__abertura,
.est-aula__mapa { margin-bottom: 16px; }
.est-aula__lado {
display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.est-aula__cartao { margin: 0; min-width: 0; }
.est-aula__cartao .cpm-card__title { display: flex; align-items: center; gap: 8px; }
.est-aula__cartao .cpm-card__title .material-icons-outlined { color: var(--cpm-primary); }
/* O exemplo se distingue da explicação pela tarja e pelo título, e não só
pela cor de fundo. */
.est-aula__cartao--exemplo {
border-left: 4px solid var(--cpm-primary);
background: var(--cpm-primary-lighter, #f8f5fe);
}
.est-aula__passos {
margin: 0; padding-left: 22px; display: grid; gap: 10px;
line-height: 1.55; overflow-wrap: anywhere;
}
.est-aula__passos li::marker { font-weight: 800; color: var(--cpm-primary); }
.est-aula__problema {
margin: 0 0 12px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere;
}
.est-aula__resposta {
margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
background: var(--cpm-surface, #fff); border: 1px solid var(--cpm-primary-light, #f0eafd);
overflow-wrap: anywhere;
}
@media (max-width: 560px) {
.est-aula__lado { gap: 12px; }
.est-aula__passos { padding-left: 18px; }
}
/* A tabela de dados de um item ou de um exemplo (`figura_item._tabela`).
Fios finos e cabeçalho em peso, sem cor de fundo: tem de sair igual no papel
em preto e branco, com "gráficos de fundo" desligado. */
.figura-tabela {
width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0;
font-variant-numeric: tabular-nums;
}
.figura-tabela caption {
caption-side: top; text-align: left; font-weight: 700; padding: 0 0 6px;
}
.figura-tabela th, .figura-tabela td {
border: 1px solid var(--cpm-border, #cbd5e1); padding: 5px 8px;
text-align: left; vertical-align: top; overflow-wrap: break-word;
}
.figura-tabela thead th { font-weight: 700; border-bottom-width: 2px; }
.figura-tabela tbody th { font-weight: 600; }
/* Só número se alinha à direita, para as casas decimais baterem; texto fica
à esquerda, onde se lê. */
.figura-tabela td.figura-tabela__num { text-align: right; white-space: nowrap; }
.figura-tabela__fonte { margin: 6px 0 0; font-size: 12px; color: var(--cpm-text-muted, #6b7280); }
.est-questao__figura:has(.figura-tabela) { padding: 10px; }
.est-aula__figura { max-width: 100%; margin: 4px 0 14px; background: var(--cpm-surface, #fff); }
/* No quiz a figura ocupa a largura da página, e sem teto o SVG se esticaria
com a fonte junto; o limite é o mesmo da figura de item. */
.est-aula__figura--quiz { max-width: 520px; }
/* ===== O relógio do passo 4 (Mão na massa) =====
Uma questão por tela, 1min30 cada, o saldo passando para a próxima. O
relógio mora no canto da questão (`margin-left: auto` no topo, que já é
flex): número escrito e barra que encolhe. Nos últimos 20 s ele vira âmbar,
nos últimos 10 s vermelho e pulsa — mas quem avisa é o número, e a cor só
reforça. */
.est-relogio__progresso {
height: 6px; border-radius: var(--cpm-radius-pill); overflow: hidden;
background: var(--cpm-surface-3); margin-bottom: 8px;
}
.est-relogio__progresso span { display: block; height: 100%; background: var(--cpm-primary); }
.est-relogio__onde { font-size: 14px; color: var(--cpm-text-secondary); margin: 0 0 12px; }
.est-relogio__bonus { color: var(--cpm-success); font-weight: 700; }
.est-relogio__aviso { color: var(--cpm-yellow-ink, #b45309); font-weight: 600; }
.est-relogio {
margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: var(--cpm-radius-pill);
background: var(--cpm-primary-light, #f1ecfd); color: var(--cpm-primary);
border: 1px solid currentColor; font-weight: 700;
transition: background .2s, color .2s;
}
.est-relogio .material-icons-outlined { font-size: 20px; }
.est-relogio__tempo {
font-family: var(--cpm-font-display); font-size: 20px; line-height: 1;
font-variant-numeric: tabular-nums; min-width: 3.2ch;
}
.est-relogio__barra {
width: 64px; height: 6px; border-radius: 3px; overflow: hidden;
background: rgba(0, 0, 0, .1);
}
.est-relogio__barra span {
display: block; height: 100%; background: currentColor;
transition: width .25s linear;
}
.est-relogio--atencao { color: var(--cpm-yellow-ink, #b45309); background: #fff8ed; }
.est-relogio--urgente {
color: var(--cpm-red); background: var(--cpm-red-light);
animation: est-relogio-pulso 1s ease-in-out infinite;
}
.est-relogio--zerou { animation: none; }
@keyframes est-relogio-pulso {
50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.est-relogio--urgente { animation: none; }
}
.est-relogio__rodape { gap: 12px; flex-wrap: wrap; margin-top: 12px; }
/* No celular o relógio sobe para a primeira linha inteira do topo, fixo no
alto da tela (o topo da questão fica preso abaixo da barra do app)
enquanto se rola o enunciado: questão longa não pode esconder
o tempo. */
@media (max-width: 640px) {
.est-questao--relogio .est-questao__topo {
position: sticky; top: var(--cpm-topbar-height, 60px); z-index: 5;
box-shadow: 0 -12px 0 var(--cpm-surface, #fff);
background: var(--cpm-surface, #fff);
padding: 6px 0;
}
.est-questao--relogio .est-relogio {
order: -1; margin-left: 0; width: 100%; justify-content: center;
}
.est-relogio__barra { flex: 1; max-width: 160px; }
}
/* ---------- A tela Início ----------
O painel roxo do alto é o dashboard: a saudação e, abaixo, cinco blocos de número — nível, ofensiva, trilhas,
habilidades e questões — em vidro branco sobre o gradiente. O texto é
branco em cima do roxo da marca (#6a3fd4 dá 6,4:1), e os blocos só clareiam
o fundo em 12%, o que mantém o contraste acima de 4,5:1.
**As medidas são contadas para a tela inteira caber num notebook**
(1366×~600 úteis, sem rolar): painel com ~150px e os seis passos numa
fileira. Mexeu aqui, confira nesse tamanho. */
.est-painel { padding: 16px 20px 12px; margin-bottom: 12px; }
.est-painel h1 { font-size: 22px; margin-bottom: 2px; }
.est-painel__topo {
display: flex; align-items: center; justify-content: space-between;
gap: 10px 20px; flex-wrap: wrap; margin-bottom: 12px;
}
.est-painel__topo p { font-size: 14px; }
.est-painel__numeros {
display: grid; gap: 8px;
grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
}
.est-painel__bloco {
display: flex; flex-direction: column; gap: 1px; min-width: 0;
padding: 8px 12px; border-radius: var(--cpm-radius);
background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
color: #fff; text-decoration: none;
}
a.est-painel__bloco:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.est-painel__rotulo {
display: flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.est-painel__rotulo .material-icons-outlined { font-size: 14px; }
.est-painel__valor {
font-family: var(--cpm-font-display); font-size: 16px; line-height: 1.25; color: #fff;
}
.est-painel__detalhe { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.est-painel__barra {
display: block; height: 5px; border-radius: 3px; margin: 3px 0 2px;
background: rgba(255, 255, 255, .25); overflow: hidden;
}
.est-painel__barra span { display: block; height: 100%; background: #fff; border-radius: 3px; min-width: 3px; }
.est-painel__conquista {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .92); text-decoration: none;
}
.est-painel__conquista:hover { color: #fff; text-decoration: underline; }
.est-painel__conquista .material-icons-outlined { font-size: 16px; }
.est-painel__conquista strong { color: #fff; }
.est-painel__conquista-total { margin-left: auto; color: rgba(255, 255, 255, .78); }
@media (max-width: 1180px) {
.est-painel__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.est-painel__bloco--nivel { grid-column: span 3; }
}
@media (max-width: 640px) {
.est-painel { padding: 18px 16px 14px; }
.est-painel__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.est-painel__bloco--nivel { grid-column: span 2; }
.est-inicio__cta { width: 100%; justify-content: center; }
.est-painel__conquista-total { margin-left: 0; flex-basis: 100%; }
}
/* ---------- Como funciona uma trilha (tela inicial) ----------
Os seis passos numa fileira em tela larga, com o ícone e o nome em cima do
texto — ao lado dele, o ícone roubaria um terço da largura de cada cartão.
A cor de cada passo é a mesma da régua da trilha (`MOMENTOS`), e pinta só a
marca e a borda: o texto fica na cor de sempre, porque a cor identifica o
passo e não carrega estado. Número e nome vão escritos: a cor nunca
identifica sozinha. No celular os passos correm de lado, com o próximo
cartão aparecendo pela borda para dizer que há mais. */
.est-como { margin: 0; padding: 14px 16px 16px; }
.est-como__cabeca {
display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.est-como__titulo { font-size: 16px; font-weight: 700; margin: 0; }
.est-como__intro { font-size: 13.5px; color: var(--cpm-text-secondary); margin: 0; }
.est-como__passos {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 1000px) { .est-como__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .est-como__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.est-como__passos {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 10px; margin: 0 -4px; padding: 2px 4px 10px;
}
.est-como__passo { flex: 0 0 82%; scroll-snap-align: start; }
}
.est-como__passo {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 11px; border: 1px solid var(--cpm-border);
border-top: 4px solid var(--passo-cor); border-radius: var(--cpm-radius);
background: var(--cpm-surface-2, #f7f8fb);
}
.est-como__topo { display: flex; gap: 8px; align-items: center; }
.est-como__marca {
flex: none; width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center; background: var(--passo-cor); color: #fff;
}
.est-como__marca .material-icons-outlined { font-size: 16px; }
.est-como__nome { display: block; font-size: 13.5px; line-height: 1.25; }
.est-como__num {
display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--cpm-text-secondary);
}
.est-como__texto { font-size: 12.5px; line-height: 1.45; margin: 0; color: var(--cpm-text-secondary); }
/* ===== Itens ENEM: a prova como grade de questões =====
Cada quadrado é uma questão, na ordem da prova. A situação vai escrita e com
ícone, e a cor só reforça — os três tons de estado são os de acerto, erro e
alerta que o estudante já lê no resultado. */
.enem-prova { margin-bottom: 20px; }
.enem-prova__topo { display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.enem-prova__titulo { margin: 0; font-size: 19px; }
.enem-prova__conta { margin: 2px 0 0; color: var(--cpm-text-secondary, #4b5563); font-size: 14px; }
.enem-prova__barra { flex: 0 1 260px; height: 8px; border-radius: 99px;
background: var(--cpm-border-light); overflow: hidden; }
.enem-prova__barra span { display: block; height: 100%; background: var(--cpm-primary, #6a3fd4); }
/* Linguagens: a escolha entre inglês e espanhol para as questões 1 a 5. */
.enem-lingua { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.enem-lingua__rotulo { font-size: 14px; color: var(--cpm-text-secondary, #4b5563); }
.enem-lingua__opcao { padding: 5px 14px; border: 1px solid var(--cpm-border); border-radius: 99px;
font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; background: #fff; }
.enem-lingua__opcao:hover, .enem-lingua__opcao:focus-visible { border-color: var(--cpm-primary, #6a3fd4); }
.enem-lingua__opcao--atual { background: var(--cpm-primary, #6a3fd4); border-color: var(--cpm-primary, #6a3fd4);
color: #fff; }
.enem-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.enem-grade form { margin: 0; height: 100%; }
.enem-questao { width: 100%; height: 100%; display: flex; flex-direction: column;
align-items: flex-start; gap: 4px; padding: 10px 12px; text-align: left; cursor: pointer;
background: #fff; border: 1px solid var(--cpm-border);
border-left: 4px solid var(--cpm-border); border-radius: 8px;
font: inherit; color: inherit; transition: box-shadow .15s, border-color .15s; }
.enem-questao:hover, .enem-questao:focus-visible { border-color: var(--cpm-primary, #6a3fd4);
box-shadow: 0 2px 8px rgba(0, 0, 0, .08); outline: none; }
.enem-questao__numero { font-size: 20px; font-weight: 700; line-height: 1.1; }
.enem-questao__assunto { font-size: 12.5px; color: var(--cpm-text-secondary, #4b5563); line-height: 1.3;
flex: 1; }
.enem-questao__estado { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
font-weight: 600; color: var(--cpm-text-secondary, #4b5563); }
.enem-questao__estado .material-icons-outlined { font-size: 16px; }
.enem-questao--certa { border-left-color: var(--cpm-success); }
.enem-questao--certa .enem-questao__estado { color: var(--cpm-success); }
.enem-questao--errada { border-left-color: var(--cpm-red); }
.enem-questao--errada .enem-questao__estado { color: var(--cpm-red); }
.enem-questao--branco { border-left-color: var(--cpm-yellow); }
.enem-questao--branco .enem-questao__estado { color: var(--cpm-yellow-ink); }
.enem-questao--andamento { border-left-color: var(--cpm-primary, #6a3fd4); }
.enem-questao--andamento .enem-questao__estado { color: var(--cpm-primary, #6a3fd4); }
@media (max-width: 520px) {
.enem-grade { grid-template-columns: repeat(2, 1fr); }
}
/* O símbolo da área ao lado do título, nas telas de ano e de questões: diz
onde o estudante está sem ele precisar ler a linha de cima. */
.enem-hero__icone { font-size: 1em; vertical-align: -0.12em; margin-right: 8px; }
/* Os anos em cartões de largura fixa: com um ano só, `auto-fit` esticaria o
cartão pela tela inteira, e uma prova virava uma faixa. */
.enem-anos { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
/* ===== "Preciso que me ensine a resolver" =====
A questão e o quadro lado a lado: ele fica à vista sem rolar até o fim das
alternativas. Abaixo de 1000px a coluna lateral não cabe e ele desce. */
.est-ensina-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px; align-items: start; }
.est-ensina-grade > .est-questao { margin-bottom: 0; }
@media (max-width: 1000px) {
.est-ensina-grade { grid-template-columns: 1fr; }
}
.est-ensina { position: sticky; top: 76px; background: var(--cpm-bg, #fff);
border: 1px dashed var(--cpm-primary); border-radius: var(--cpm-radius);
padding: 14px 16px; }
.est-ensina--aberta { border-style: solid; }
/* No resultado o quadro mora dentro do cartão da questão, embaixo. */
.est-questao .est-ensina { position: static; margin-top: 14px; }
.est-ensina__botao { display: flex; align-items: flex-start; gap: 8px; width: 100%;
text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-weight: 600; color: var(--cpm-primary); line-height: 1.35; }
.est-ensina__botao:hover, .est-ensina__botao:focus-visible { text-decoration: underline; outline: none; }
.est-ensina__custo { display: block; margin-top: 8px; font-size: 12.5px;
color: var(--cpm-text-secondary); }
.est-ensina__titulo { display: flex; align-items: center; gap: 8px; margin: 0;
font-weight: 600; color: var(--cpm-primary); cursor: default; }
summary.est-ensina__titulo { cursor: pointer; list-style: none; }
summary.est-ensina__titulo::-webkit-details-marker { display: none; }
.est-ensina__passos { margin: 12px 0 0; padding-left: 20px; }
.est-ensina__passos li { margin-bottom: 8px; line-height: 1.5; }
.est-ensina__resposta { margin: 10px 0 0; padding-top: 10px;
border-top: 1px solid var(--cpm-border-light); }
/* A dica fica no alto do quadro, separada do "me ensine" por um fio: são
duas ajudas de tamanhos diferentes, e a ordem é a ordem em que se pedem. */
.est-ensina__dica { padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--cpm-border-light); }
.est-ensina__dica .est-dica__texto { font-size: 14px; }
/* Antes da dica, o botão de resolver continua clicável — é o clique que traz
o aviso —, mas sai em tom secundário para não disputar com o de cima. */
.est-ensina__botao--espera { color: var(--cpm-text-secondary); }
.est-ensina__aviso { display: flex; gap: 8px; align-items: flex-start;
margin-bottom: 10px; padding: 10px 12px; border-radius: 8px;
background: var(--cpm-yellow-light); border: 1px solid var(--cpm-yellow);
color: var(--cpm-text); font-size: 13.5px; line-height: 1.45; }
.est-ensina__aviso .material-icons-outlined { color: var(--cpm-yellow-ink); font-size: 20px; }
.est-ensina__dica .est-dica__custo { display: block; margin-top: 6px; }
/* ===== A questão do ENEM em tela dividida =====
Duas colunas iguais, na altura da janela: a questão à esquerda, a ajuda e
a entrega à direita. O que se usa para resolver — enunciado, figura,
alternativas, dica, "me ensine" e entregar — fica à vista sem rolar a
página. Questão mais alta que a coluna rola **dentro** dela, e os botões
continuam no lugar.
Para sobrar altura, o que não é questão encolhe: o respiro da página, o
cabeçalho (uma linha) e a altura de cada alternativa. A conta da altura é a
tela de notebook (1366 × ~600 úteis): mexeu no cabeçalho ou nos espaços,
meça de novo — `--est-enem-folga` é tudo o que fica acima e abaixo das
duas colunas. */
@media (min-width: 1001px) {
.cpm-main:has(.est-lista--enem) { padding-top: 12px; padding-bottom: 12px; }
.est-enem-cabeca { margin-bottom: 10px; }
.est-enem-cabeca h1 { font-size: 20px; margin: 0; }
.est-enem-cabeca p { margin: 0; font-size: 12.5px; }
.est-enem-cabeca .cpm-btn { padding-top: 6px; padding-bottom: 6px; }
.est-lista--enem .est-ensina-grade {
grid-template-columns: 1fr 1fr;
height: calc(100vh - var(--est-enem-folga, 152px));
min-height: 400px;
}
.est-lista--enem .est-ensina-grade > .est-questao {
height: 100%; overflow-y: auto; margin: 0;
}
.est-lista--enem .est-questao { padding: 14px 16px; }
/* A linha do alto do cartão sai: o número "1" não diz nada numa questão
avulsa, e a habilidade e o código do item continuam no resultado. São
34 px que voltam para o enunciado. */
.est-lista--enem .est-questao__topo { display: none; }
.est-lista--enem .est-questao__texto,
.est-lista--enem .est-questao__comando { margin-bottom: 8px; line-height: 1.5; }
/* A figura se contém para caber na coluna; a largura acompanha a altura. */
.est-lista--enem .est-questao__figura { margin: 6px 0 10px; }
.est-lista--enem .est-questao__figura .figura-imagem { max-height: 26vh; width: auto; }
.est-lista--enem .est-alternativas { gap: 4px; }
.est-lista--enem .est-alt { padding: 6px 12px; }
/* Alternativas que são gráfico vão em duas colunas: cinco desenhos
empilhados ocupariam três telas, e lado a lado eles também se comparam
melhor, que é o que a questão pede. */
.est-lista--enem .est-alternativas:has(.alternativa-imagem) { grid-template-columns: 1fr 1fr; }
.est-lista--enem .est-alt .alternativa-imagem { max-height: 15vh; width: auto; max-width: 100%; }
/* A coluna da direita: as alternativas no alto, rolando sozinhas se forem
altas demais (as de gráfico), e a ajuda com o botão de entregar presa
embaixo — os botões nunca saem da tela. */
.est-lista--enem .est-enem-direita { height: 100%; display: flex; flex-direction: column;
gap: 10px; min-height: 0; }
/* As alternativas ocupam toda a altura que a Ajuda deixa; só quando a
resolução está aberta elas ganham um teto, para a Ajuda ter onde crescer. */
.est-lista--enem .est-enem-direita__alts { flex: 0 1 auto; min-height: 0; overflow: hidden;
display: flex; flex-direction: column;
background: var(--cpm-bg, #fff); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 10px 12px; }
.est-lista--enem .est-enem-direita .est-ensina { position: static; height: auto; flex: 0 0 auto;
display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; }
/* Com a resolução aberta o quadro cresce, e as alternativas cedem a altura. */
/* Com a resolução aberta o quadro ocupa o resto da coluna e rola por
dentro; as alternativas não cedem altura — é nelas que se responde. */
.est-lista--enem .est-enem-direita .est-ensina--aberta { flex: 1 1 auto; min-height: 0; }
/* Dentro do quadro das alternativas, a lista rola sozinha se for alta
demais (as de gráfico) e o botão de entregar fica no pé, sempre à vista. */
.est-lista--enem .est-enem-caixa__lista { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.est-lista--enem .est-ensina__entregar { flex: none; }
/* O espaço entre as duas seções é maior que o de dentro delas: é ele que
diz que a Ajuda é outra coisa, e não a continuação das alternativas. */
.est-lista--enem .est-enem-direita { gap: 18px; }
.est-lista--enem .est-enem-direita .est-ensina { padding: 10px 14px; }
.est-lista--enem .est-ensina__dica { padding-bottom: 8px; margin-bottom: 8px; }
.est-lista--enem .est-ensina__custo { margin-top: 4px; }
.est-lista--enem .est-ensina__entregar { margin-top: 10px; }
}
.est-ensina__entregar { width: 100%; justify-content: center; margin-top: 14px; }
/* O título de cada seção da coluna da direita: pequeno e em caixa alta, como
rótulo de seção, e não como manchete — quem manda na tela é a questão. */
.est-enem-caixa__titulo { margin: 0 0 8px; font-size: 12px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--cpm-text-secondary); }
@media (max-width: 1000px) {
.est-enem-direita { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.est-enem-direita__alts { background: var(--cpm-bg, #fff); border: 1px solid var(--cpm-border-light);
border-radius: var(--cpm-radius); padding: 12px 14px; }
}
/* Os dois botões da Ajuda numa linha: dica à esquerda, resolver à direita. */
.est-ensina__botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.est-ensina__botoes .est-ensina__botao { width: auto; padding: 7px 12px; border: 1px solid var(--cpm-primary);
border-radius: 8px; font-size: 13.5px; align-items: center; }
.est-ensina__botoes .est-ensina__botao--espera { border-color: var(--cpm-border); }
.est-ensina__botoes .est-dica__botao { margin: 0; }
.est-ensina .est-dica__texto { font-size: 14px; }
.est-ensina__custo { margin: 6px 0 0; }
.est-ensina__resolver { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cpm-border-light); }
.est-ensina__resolver--topo { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cpm-border-light); }
/* ===== O resultado da questão do ENEM: o mesmo arranjo da resolução =====
Reaproveita `.est-lista--enem` inteiro; o que muda é o pé das Alternativas
(seguir ou voltar no lugar de entregar) e a linha do veredito. */
.est-enem-caixa__cabeca { display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 8px; }
.est-enem-caixa__cabeca .est-enem-caixa__titulo { margin: 0; }
.est-enem-veredito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin: 0; font-weight: 700; font-size: 14px; }
.est-enem-veredito .material-icons-outlined { font-size: 19px; }
.est-enem-veredito .est-nivel, .est-enem-veredito .cpm-badge { margin-left: 6px; font-weight: 500; }
.est-enem-caixa .jogo-recompensa { margin: 0 0 8px; }
.est-enem-seguir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.est-enem-seguir form { margin: 0; flex: 1 1 auto; }
.est-enem-seguir .cpm-btn { width: 100%; justify-content: center; }
.est-enem-seguir > a.cpm-btn { flex: 1 1 auto; width: auto; }
@media (min-width: 1001px) {
.est-lista--enem .est-enem-seguir { flex: none; }
/* Aberta a resolução, o quadro da Ajuda cresce e rola por dentro. */
.est-lista--enem .est-enem-direita .est-ensina:has(details[open]) { flex: 1 1 auto; min-height: 0; }
}
@media (min-width: 1001px) {
.est-lista--enem .est-enem-direita:has(.est-ensina--aberta, details[open]) .est-enem-direita__alts {
flex: 0 0 auto; max-height: 66%; }
.est-lista--enem .est-enem-direita .est-ensina { flex: 0 0 auto; }
}
/* "Vamos começar!!!" na porta das Trilhas: o botão é a única ação da tela, e
o tamanho diz isso. Tudo escala junto (altura, texto, seta, canto); em tela
estreita encolhe pela largura em vez de vazar para o lado. */
.est-comecar { text-align: center; }
.cpm-btn.est-comecar__botao {
height: clamp(112px, 20vw, 256px);
padding: 0 clamp(24px, 8vw, 128px);
font-size: clamp(28px, 6vw, 80px);
border-radius: clamp(20px, 3.5vw, 48px);
gap: 0.3em;
max-width: 100%;
white-space: nowrap;
}
.est-comecar__botao .material-icons-outlined { font-size: 1em; }
/* ===== Início: o mapa de estudo =====
Cinco paradas ligadas por uma estrada tracejada, e a volta no fim dizendo
que é um ciclo. Em tela larga a estrada corre na horizontal, passando pelo
centro dos marcadores; no celular ela desce pela esquerda, e cada parada
vira uma linha com o marcador sobre ela. Cada parada é um link. */
.est-mapa { margin: 0 0 16px; padding: 16px 18px 14px; }
.est-mapa__cabeca {
display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.est-mapa__titulo {
display: flex; align-items: center; gap: 6px;
font-size: 16px; font-weight: 700; margin: 0;
}
.est-mapa__titulo .material-icons-outlined { color: var(--cpm-primary); font-size: 20px; }
.est-mapa__intro { font-size: 13.5px; color: var(--cpm-text-secondary); margin: 0; }
.est-mapa__paradas {
position: relative; list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(var(--paradas, 5), minmax(0, 1fr)); gap: 12px;
}
/* A estrada: atrás dos marcadores, do centro do primeiro ao do último. */
.est-mapa__paradas::before {
content: ""; position: absolute; top: 21px;
left: calc(50% / var(--paradas, 5)); right: calc(50% / var(--paradas, 5));
border-top: 3px dashed var(--cpm-border);
}
.est-mapa__parada { position: relative; }
.est-mapa__parada a {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 4px; height: 100%; padding: 0 6px 10px; border-radius: var(--cpm-radius);
color: inherit; text-decoration: none;
transition: background-color .15s;
}
.est-mapa__parada a:hover,
.est-mapa__parada a:focus-visible { background: var(--cpm-surface-2, #f3f4f8); }
.est-mapa__marca {
position: relative; width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; margin-bottom: 4px;
background: var(--mapa-cor); color: #fff;
box-shadow: 0 0 0 5px var(--cpm-bg, #fff);
}
.est-mapa__marca .material-icons-outlined { font-size: 22px; }
.est-mapa__num {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--mapa-cor);
}
.est-mapa__nome { font-size: 14px; line-height: 1.25; }
.est-mapa__texto { font-size: 12.5px; line-height: 1.45; color: var(--cpm-text-secondary); }
.est-mapa__volta {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin: 8px 0 0; padding: 8px 12px; border-radius: 99px;
border: 2px dashed var(--cpm-border); color: var(--cpm-text-secondary);
font-size: 13px; font-weight: 600;
}
.est-mapa__volta .material-icons-outlined { font-size: 18px; color: var(--cpm-primary); }
@media (max-width: 900px) {
.est-mapa__paradas { grid-template-columns: 1fr; gap: 4px; }
/* Na vertical a estrada é um trecho por parada, do marcador dela ao da
seguinte: uma linha só, na lista inteira, passaria do último marcador. */
.est-mapa__paradas::before { display: none; }
.est-mapa__parada:not(:last-child)::after {
content: ""; position: absolute; left: 27px; top: 50px; bottom: -10px;
border-left: 3px dashed var(--cpm-border);
}
.est-mapa__parada a {
display: grid; grid-template-columns: 44px 1fr; column-gap: 12px;
align-items: start; text-align: left; padding: 6px;
}
.est-mapa__marca { grid-row: 1 / span 3; margin: 0; }
}
/* ===== A avaliação diagnóstica =====
O ponto de partida abre o cartão, sozinho e grande: é a resposta que o
estudante veio buscar. As quatro áreas vêm embaixo, lado a lado em tela
larga, cada assunto com o estado escrito por ícone e texto oculto — a cor
só reforça, e são as mesmas três de acerto, erro e em branco do resultado. */
.est-diag { margin-bottom: 16px; padding: 18px; }
.est-diag__rotulo {
margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--cpm-primary);
}
.est-diag__areas {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 1100px) { .est-diag__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .est-diag__areas { grid-template-columns: 1fr; } }
.est-diag__area {
padding: 12px; border: 1px solid var(--cpm-border-light); border-radius: var(--cpm-radius);
}
.est-diag__area-nome {
display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14.5px;
}
.est-diag__area-nome .material-icons-outlined { font-size: 20px; color: var(--cpm-primary); }
.est-diag__area-conta {
display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
font-size: 12.5px; color: var(--cpm-text-secondary); white-space: nowrap;
}
.est-diag__area-conta .est-barra { flex: 1; }
.est-diag__comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.est-diag__comp { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.est-diag__comp .material-icons-outlined { font-size: 17px; flex: none; margin-top: 1px; }
.est-diag__comp a { color: inherit; }
.est-diag__comp--certa .material-icons-outlined { color: var(--cpm-success); }
.est-diag__comp--errada .material-icons-outlined { color: var(--cpm-red); }
.est-diag__comp--branco .material-icons-outlined { color: var(--cpm-text-secondary); }
.est-diag-quando { margin: 0 0 8px; font-size: 13px; color: var(--cpm-text-secondary); }
.est-diag-convite { padding: 18px; }
.est-diag-convite__titulo { margin: 0 0 8px; font-size: 17px; }
.est-diag-convite p { margin: 0 0 14px; color: var(--cpm-text-secondary); }
.est-diag-convite__regras { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.est-diag-convite__regras li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.est-diag-convite__regras .material-icons-outlined { color: var(--cpm-primary); flex: none; }
/* Na lista: o combinado antes da primeira questão e o nome de cada área. */
.est-diag-aviso {
display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px;
padding: 10px 12px; border-radius: var(--cpm-radius);
background: var(--cpm-surface-2, #f3f4f8); font-size: 13.5px;
}
.est-diag-aviso .material-icons-outlined { color: var(--cpm-primary); font-size: 20px; }
.est-diag-secao {
margin: 22px 0 10px; padding-bottom: 6px; font-size: 16px;
border-bottom: 2px solid var(--cpm-border-light);
}
/* A parada do mapa que ainda não foi feita leva um selo: é por ela que se começa. */
.est-mapa__selo {
position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
padding: 1px 8px; border-radius: 99px; white-space: nowrap;
background: var(--mapa-cor); color: #fff; font-size: 10px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 900px) { .est-mapa__selo { left: 0; transform: none; top: -8px; } }
/* No resultado da diagnóstica: os pré-requisitos diretos de cada questão. A
borda é neutra quando ele acertou e âmbar quando não — ali a lista é por
onde revisar —, e o título diz a diferença em texto. */
.est-antecessoras {
margin-top: 12px; padding: 10px 12px; border-radius: var(--cpm-radius);
border-left: 4px solid var(--cpm-border); background: var(--cpm-surface-2, #f3f4f8);
}
.est-antecessoras--revisar { border-left-color: var(--cpm-yellow); }
.est-antecessoras h4 {
display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px;
}
.est-antecessoras h4 .material-icons-outlined { font-size: 18px; color: var(--cpm-primary); }
.est-antecessoras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.est-antecessoras li {
display: grid; grid-template-columns: 86px 58px 1fr; gap: 4px 8px; align-items: baseline;
font-size: 13px; line-height: 1.45;
}
.est-antecessoras__ano { font-size: 12px; font-weight: 600; color: var(--cpm-text-secondary); white-space: nowrap; }
@media (max-width: 600px) {
.est-antecessoras li { grid-template-columns: auto 1fr; }
.est-antecessoras__texto { grid-column: 1 / -1; }
}
.est-antecessoras__vazio { margin: 10px 0 0; font-size: 12.5px; color: var(--cpm-text-secondary); }
/* ===== O guia de estudos da diagnóstica, como mapa =====
Quatro colunas por área (7º, 8º, 9º e o Médio), cartões verdes para o que
ele já aprendeu e laranja para o que falta, a próxima com anel e selo. O
estado vai escrito no cartão, além da cor: impresso em preto e branco, o
mapa continua dizendo o que está feito. Em tela estreita as colunas
empilham, na mesma ordem de estudo. */
.est-guia-legenda {
display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
margin: 0 0 14px; font-size: 13px; color: var(--cpm-text-secondary);
}
.est-guia-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.est-guia-legenda__cor { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
.est-guia-legenda__cor--verde { background: var(--cpm-success-light); border-color: var(--cpm-success); }
.est-guia-legenda__cor--laranja { background: #fff4ec; border-color: #ea6a1f; }
.est-guia-legenda__cor--proxima { background: #fff4ec; border-color: #ea6a1f; box-shadow: 0 0 0 2px var(--cpm-primary); }
.est-guia-legenda__dica { flex-basis: 100%; }
.est-guia-area { margin-bottom: 16px; padding: 16px; }
.est-guia-area__nome { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; }
.est-guia-area__nome .material-icons-outlined { color: var(--cpm-primary); }
.est-guia-area__conta { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--cpm-text-secondary); }
.est-guia-colunas {
display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 1000px) { .est-guia-colunas { grid-template-columns: 1fr; } }
.est-guia-coluna { min-width: 0; }
.est-guia-coluna h3 { margin: 0 0 8px; font-size: 13.5px; }
.est-guia-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.est-guia__passo {
display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 99px;
background: var(--cpm-primary); color: #fff; font-size: 10.5px; font-weight: 700;
letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px;
}
.est-mapa-hab {
display: flex; flex-direction: column; gap: 3px; padding: 8px 10px;
border: 2px solid; border-radius: var(--cpm-radius); color: inherit; text-decoration: none;
transition: transform .12s, box-shadow .12s;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.est-mapa-hab:hover, .est-mapa-hab:focus-visible { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.est-mapa-hab--verde { background: var(--cpm-success-light); border-color: var(--cpm-success); }
.est-mapa-hab--laranja { background: #fff4ec; border-color: #ea6a1f; }
.est-mapa-hab--preparo { border-style: dashed; }
.est-mapa-hab--proxima { box-shadow: 0 0 0 3px var(--cpm-primary); }
.est-mapa-hab__topo { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.est-mapa-hab__topo .material-icons-outlined { font-size: 17px; }
.est-mapa-hab--verde .est-mapa-hab__topo .material-icons-outlined { color: var(--cpm-success); }
.est-mapa-hab--laranja .est-mapa-hab__topo .material-icons-outlined { color: #c2410c; }
.est-mapa-hab__selo {
margin-left: auto; padding: 0 7px; border-radius: 99px; background: var(--cpm-primary);
color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.est-mapa-hab__comp { font-size: 11px; font-weight: 600; color: var(--cpm-text-secondary); }
.est-mapa-hab__texto {
font-size: 12px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.est-mapa-hab__estado { font-size: 11px; font-weight: 600; color: var(--cpm-text-secondary); }
.est-mapa-hab--verde .est-mapa-hab__estado { color: var(--cpm-success); }
.est-mapa-hab--laranja .est-mapa-hab__estado { color: #c2410c; }
@media print {
.est-guia-colunas { grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); }
.est-guia-area { break-inside: auto; }
.est-mapa-hab { break-inside: avoid; }
}
.est-estudo__exercicios { padding: 18px; }
.est-estudo__exercicios p { margin: 0 0 12px; }
/* No resultado: o convite para gerar o guia, entre o ponto de partida e as áreas. */
.est-diag__guia {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: -4px 0 16px; padding: 10px 14px; border: 1px dashed var(--cpm-border);
border-radius: var(--cpm-radius);
}
.est-diag__guia > .material-icons-outlined { color: var(--cpm-primary); }
.est-diag__guia p { flex: 1 1 300px; margin: 0; font-size: 13.5px; }
/* ===== Meu Mapa de Estudos: o resumo no topo =====
Quanto do mapa já está verde, no total e por área. A barra repete o número
e não o substitui: impresso, o "12 de 40" continua lá. */
.est-meumapa-resumo {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
margin-bottom: 16px;
}
.est-meumapa-resumo__num {
font-family: var(--cpm-font-display); font-size: 34px; font-weight: 800;
color: var(--cpm-success); line-height: 1;
}
.est-meumapa-resumo__num small { font-size: 16px; font-weight: 600; color: var(--cpm-text-secondary); }
.est-meumapa-resumo__corpo { flex: 1; min-width: 220px; }
.est-meumapa-resumo__barra {
height: 10px; margin: 8px 0 10px; border-radius: 99px;
background: #fff4ec; border: 1px solid #f3c7a6; overflow: hidden;
}
.est-meumapa-resumo__barra span { display: block; height: 100%; background: var(--cpm-success); }
.est-meumapa-resumo__areas {
display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0;
list-style: none; font-size: 13px; color: var(--cpm-text-secondary);
}
.est-meumapa-resumo__areas li { display: inline-flex; align-items: center; gap: 4px; }
.est-meumapa-resumo__areas .material-icons-outlined { font-size: 16px; }
/* ===== O Básico: a lista de temas (e de componentes) =====
Um cartão por tema, na ordem de estudar: o número, o título, o resumo e o
estado por escrito — a borda colorida só reforça. Verde concluído, laranja
tentado, neutro não começado, como no mapa de estudos. */
.est-basico-temas {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px;
}
.est-basico-tema {
display: flex; align-items: center; gap: 14px; height: 100%; margin: 0;
color: inherit; text-decoration: none; border-left: 5px solid var(--cpm-border);
transition: box-shadow .15s, transform .15s;
}
.est-basico-tema:hover { box-shadow: var(--cpm-shadow-md, 0 4px 14px rgba(0,0,0,.08)); transform: translateY(-1px); }
.est-basico-tema--feito { border-left-color: var(--cpm-success); }
.est-basico-tema--tentado { border-left-color: #ea6a1f; }
.est-basico-tema__num {
flex: none; width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cpm-primary-light, #eaf1fb); color: var(--cpm-primary);
font-family: var(--cpm-font-display); font-weight: 800; font-size: 18px;
}
.est-basico-tema--feito .est-basico-tema__num { background: var(--cpm-success-light); color: var(--cpm-success); }
.est-basico-tema__corpo { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.est-basico-tema__titulo { font-size: 15px; }
.est-basico-tema__resumo { font-size: 13px; color: var(--cpm-text-secondary); }
.est-basico-tema__estado {
display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
font-size: 12px; font-weight: 600; color: var(--cpm-text-secondary);
}
.est-basico-tema__estado .material-icons-outlined { font-size: 16px; }
.est-basico-tema--feito .est-basico-tema__estado { color: var(--cpm-success); }
.est-basico-tema--tentado .est-basico-tema__estado { color: #c2560f; }
.est-basico-tema__seta { flex: none; color: var(--cpm-text-secondary); }
@media (max-width: 600px) {
.est-basico-temas { grid-template-columns: 1fr; }
}
/* ===== Comunidade de Estudantes =====
Dúvidas das questões, com apelido e avatar (nunca nome). O escopo — só a
escola ou toda a plataforma — vai escrito em cada post. Ver
`services/comunidade`. */
.com-autor { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.com-avatar {
width: 28px; height: 28px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cpm-primary-light, #eaf1fb); color: var(--cpm-primary);
}
.com-avatar .material-icons-outlined { font-size: 17px; }
.com-avatar--grande { width: 46px; height: 46px; }
.com-avatar--grande .material-icons-outlined { font-size: 26px; }
.com-quando { color: var(--cpm-text-secondary); font-weight: 400; }
.com-escopo {
display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
padding: 2px 8px; border-radius: 99px; background: var(--cpm-bg-subtle, #f3f4f6);
color: var(--cpm-text-secondary);
}
.com-escopo .material-icons-outlined { font-size: 14px; }
.com-escopo--plataforma { background: #eef6ff; color: #1d5fa8; }
.com-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.com-filtro {
padding: 6px 14px; border-radius: 99px; border: 1px solid var(--cpm-border);
font-size: 13px; color: inherit; text-decoration: none; background: var(--cpm-surface, #fff);
}
.com-filtro--ativo { background: var(--cpm-primary); border-color: var(--cpm-primary); color: #fff; }
.com-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.com-item {
display: flex; flex-direction: column; gap: 6px; margin: 0;
color: inherit; text-decoration: none; transition: box-shadow .15s;
}
.com-item:hover { box-shadow: var(--cpm-shadow-md, 0 4px 14px rgba(0,0,0,.08)); }
.com-item__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.com-item__texto { font-size: 15px; white-space: pre-line; }
.com-item__questao, .com-item__respostas {
display: inline-flex; align-items: flex-start; gap: 5px; font-size: 12.5px;
color: var(--cpm-text-secondary);
}
.com-item__questao .material-icons-outlined, .com-item__respostas .material-icons-outlined { font-size: 16px; }
.com-item__respostas { font-weight: 600; color: var(--cpm-primary); }
.com-item__respostas--zero { color: #c2560f; }
.com-trecho { font-style: italic; }
.com-subtitulo { font-size: 17px; margin: 22px 0 10px; }
.com-como { margin-bottom: 12px; }
.com-post__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.com-post__texto { white-space: pre-line; margin: 0 0 8px; font-size: 15px; }
.com-post__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.com-post--duvida { border-left: 4px solid var(--cpm-primary); }
.com-post--melhor { border-left: 4px solid var(--cpm-success); background: #f3fbf5; }
.com-post__selo {
display: flex; align-items: center; gap: 5px; margin: 0 0 6px;
font-size: 12.5px; font-weight: 700; color: var(--cpm-success);
}
.com-post__selo .material-icons-outlined { font-size: 17px; }
.com-perguntar .com-texto { width: 100%; resize: vertical; margin-bottom: 10px; }
.com-escopos { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.com-escopos label {
display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
border: 1px solid var(--cpm-border); border-radius: var(--cpm-radius); font-size: 14px;
}
.com-escopos label:has(input:checked) { border-color: var(--cpm-primary); background: #f4f8fe; }
.com-ajuda { font-size: 12.5px; margin: 4px 0 12px; }
.com-discutir { margin: 8px 0 0; }
.com-denunciar { font-size: 12.5px; }
.com-denunciar summary {
display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
color: var(--cpm-text-secondary); list-style: none;
}
.com-denunciar summary .material-icons-outlined { font-size: 15px; }
.com-denunciar form {
margin-top: 8px; padding: 10px; border: 1px solid var(--cpm-border);
border-radius: var(--cpm-radius); display: grid; gap: 8px; max-width: 420px;
}
.com-denunciar fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.com-denunciar legend { font-weight: 600; margin-bottom: 4px; }
.com-entrar .cpm-card { margin-bottom: 14px; }
.com-regras { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.com-aceite { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.com-avatares { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.com-avatar-opcao input { position: absolute; opacity: 0; }
.com-avatar-opcao .com-avatar { cursor: pointer; border: 2px solid transparent; }
.com-avatar-opcao input:checked + .com-avatar { border-color: var(--cpm-primary); background: var(--cpm-primary); color: #fff; }
.com-avatar-opcao input:focus-visible + .com-avatar { outline: 2px solid var(--cpm-primary); outline-offset: 2px; }
/* A moderação (equipe da plataforma). */
.com-mod__item { margin-bottom: 10px; }
.com-mod__item--oculto { opacity: .7; border-left: 4px solid #d97706; }
.com-mod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 6px; }
.com-mod__denuncias { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.com-mod__decisao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.com-mod__decisao .cpm-input { width: auto; min-width: 180px; }
.com-mod__resposta { margin: 10px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--cpm-border); }
/* ===== Comunidade: abas e grupos de estudo (2026-10-06) ===== */
.com-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cpm-border); margin: 0 0 14px; }
.com-aba {
display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
color: var(--cpm-text-secondary); text-decoration: none; font-weight: 600; font-size: 14px;
border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.com-aba .material-icons-outlined { font-size: 19px; }
.com-aba--ativa { color: var(--cpm-primary); border-bottom-color: var(--cpm-primary); }
.com-barra { height: 8px; border-radius: 99px; background: var(--cpm-bg-subtle, #eef0f3); overflow: hidden; }
.com-barra span { display: block; height: 100%; background: var(--cpm-success); border-radius: 99px; }
.com-grupos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.com-grupo-cartao { display: flex; flex-direction: column; gap: 6px; margin: 0; color: inherit; text-decoration: none; height: 100%; }
a.com-grupo-cartao:hover { box-shadow: var(--cpm-shadow-md, 0 4px 14px rgba(0,0,0,.08)); }
.com-grupo-cartao__nome { font-size: 15px; }
.com-grupo-cartao__desc { font-size: 13px; color: var(--cpm-text-secondary); }
.com-grupo-cartao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cpm-text-secondary); }
.com-grupo-cartao__meta > span { display: inline-flex; align-items: center; gap: 3px; }
.com-grupo-cartao__meta .material-icons-outlined { font-size: 15px; }
.com-grupo-cartao form { margin-top: auto; }
.com-grupos-acoes { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 16px 0 4px; align-items: start; }
.com-grupo-form summary { display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.com-grupo-form form { display: grid; gap: 6px; margin-top: 10px; }
.com-grupo-codigo { display: grid; gap: 8px; }
.com-grupos-aviso { margin-top: 18px; }
@media (max-width: 760px) { .com-grupos-acoes { grid-template-columns: 1fr; } }
.com-convite { display: flex; align-items: center; gap: 10px; }
.com-convite__codigo { font-family: var(--cpm-font-display); font-size: 18px; letter-spacing: .14em; }
.com-semana__desde { font-size: 12.5px; font-weight: 400; margin-left: auto; }
.com-semana__total { margin: 0 0 8px; }
.com-membros { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 6px; }
.com-membro {
display: grid; grid-template-columns: 26px minmax(140px, 1.2fr) minmax(140px, 2fr) 56px 110px 34px;
align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--cpm-radius);
}
.com-membro--eu { background: #f4f8fe; }
.com-membro__pos { font-weight: 800; color: var(--cpm-text-secondary); text-align: center; }
.com-membro__quem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.com-membro__progresso { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.com-membro__num { font-size: 13px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.com-ok { font-size: 16px; color: var(--cpm-success); }
.com-membro__ofensiva { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: #d9480f; font-size: 13px; }
.com-membro__ofensiva .material-icons-outlined { font-size: 17px; }
.com-membro__hoje { font-size: 12px; color: var(--cpm-text-secondary); }
.com-membro__hoje--sim { color: var(--cpm-success); font-weight: 600; }
@media (max-width: 760px) {
.com-membro { grid-template-columns: 22px 1fr auto; }
.com-membro__progresso { grid-column: 2 / -1; }
.com-membro__hoje { grid-column: 2; }
}
.com-recado { border-top: 1px solid var(--cpm-border); padding-top: 10px; margin-top: 10px; }
.com-grupo-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 12px; }
.com-grupo-pe details { flex: 1; min-width: 260px; max-width: 520px; }
/* ===== Comunidade: reconhecimento — "Quem mais ajudou" (2026-10-06) ===== */
.com-ajuda-grade { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .com-ajuda-grade { grid-template-columns: 1fr; } }
.com-minha-ajuda__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.com-minha-ajuda__nums div { display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 10px 6px; border-radius: var(--cpm-radius); background: var(--cpm-bg-subtle, #f4f5f7); }
.com-minha-ajuda__nums strong { font-family: var(--cpm-font-display); font-size: 24px; color: var(--cpm-primary); }
.com-minha-ajuda__nums span { font-size: 12px; color: var(--cpm-text-secondary); }
.com-medalhas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.com-medalha { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--cpm-radius); opacity: .55; }
.com-medalha--obtida { opacity: 1; background: #fff8e6; }
.com-medalha > .material-icons-outlined { font-size: 26px; color: #b8860b; }
.com-medalha small { display: block; font-size: 12px; color: var(--cpm-text-secondary); }
.com-ranking__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.com-ranking__linha { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: var(--cpm-radius); }
.com-ranking__pos { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; font-weight: 800; font-size: 13px; background: var(--cpm-bg-subtle, #eef0f3); }
.com-ranking__pos--1 { background: #f5c518; color: #5c4400; }
.com-ranking__pos--2 { background: #cfd4da; color: #374151; }
.com-ranking__pos--3 { background: #e0a46a; color: #5a3410; }
.com-ranking__detalhe { font-size: 12.5px; color: var(--cpm-text-secondary); }
.com-ranking__pontos { font-size: 14px; }
.com-ranking__eu { margin: 10px 0 0; }
@media (max-width: 600px) { .com-ranking__linha { grid-template-columns: 30px 1fr auto; }
.com-ranking__detalhe { display: none; } }
/* ===== O tour da plataforma (primeiro acesso, 2026-10-06) =====
Um recorte em volta do item do menu — a sombra enorme escurece o resto —
e um cartão ao lado. Sem alvo, o cartão fica no centro. Ver
`static/js/tour-estudante.js`. */
.cpm-tour__fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 24, 33, .55); }
.cpm-tour__fundo--transparente { background: transparent; }
.cpm-tour__recorte {
position: fixed; z-index: 1001; border-radius: 10px; pointer-events: none;
box-shadow: 0 0 0 9999px rgba(20, 24, 33, .55), 0 0 0 3px #fff, 0 0 0 6px var(--cpm-primary);
transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.cpm-tour__cartao {
position: fixed; z-index: 1002; width: min(360px, calc(100vw - 24px));
background: var(--cpm-surface, #fff); color: var(--cpm-text, #1f2937);
border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.cpm-tour__cartao--centro { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.cpm-tour__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cpm-tour__icone {
width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--cpm-primary-light, #eaf1fb); color: var(--cpm-primary); font-size: 22px;
}
.cpm-tour__contagem { font-size: 12px; color: var(--cpm-text-secondary); font-weight: 600; }
.cpm-tour__titulo { font-size: 18px; margin: 4px 0 6px; font-family: var(--cpm-font-display); }
.cpm-tour__texto { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
.cpm-tour__pontos { display: flex; gap: 5px; margin-bottom: 12px; }
.cpm-tour__pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--cpm-border, #d1d5db); }
.cpm-tour__pontos span.ativo { background: var(--cpm-primary); width: 18px; border-radius: 99px; }
.cpm-tour__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cpm-tour__espaco { flex: 1; }
@media (prefers-reduced-motion: reduce) { .cpm-tour__recorte { transition: none; } }
.est-mapa__tour { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-weight: 600; white-space: nowrap; }
.est-mapa__tour .material-icons-outlined { font-size: 17px; }
/* ---------- Texto enxuto (desde 2026-10-06) ----------
As três peças de `_partes.html`: a descrição da BNCC cortada com "ver
mais", os fatos em itens com ícone e o "Como funciona?" fechado (`.est-ajuda` — `.est-como` já é o bloco dos seis passos). */
.est-desc { display: inline; cursor: pointer; }
.est-desc__inteira { display: none; }
.est-desc__chave:checked ~ .est-desc__curta { display: none; }
.est-desc__chave:checked ~ .est-desc__inteira { display: inline; }
.est-desc__mais::before {
content: "ver mais"; margin-left: 6px; font-weight: 700;
text-decoration: underline; white-space: nowrap;
}
.est-desc__chave:checked ~ .est-desc__mais::before { content: "ver menos"; }
.est-desc__chave:focus-visible ~ .est-desc__mais { outline: 2px solid currentColor; outline-offset: 2px; }
.est-fatos {
display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
margin: 12px 0; padding: 0;
}
.est-fatos li {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--cpm-radius-pill);
background: var(--cpm-surface-2); font-size: 14px; font-weight: 600;
color: var(--cpm-text);
}
.est-fatos .material-icons-outlined { font-size: 18px; color: var(--cpm-primary); }
.est-hero .est-fatos li { background: rgba(255, 255, 255, .14); color: #fff; }
.est-hero .est-fatos .material-icons-outlined { color: #fff; }
.est-ajuda { margin-top: 12px; font-size: 14px; }
.est-ajuda summary {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
list-style: none; font-weight: 600; color: var(--cpm-text-secondary);
}
.est-ajuda summary::-webkit-details-marker { display: none; }
.est-ajuda summary .material-icons-outlined { font-size: 18px; }
.est-ajuda__corpo { margin-top: 8px; line-height: 1.55; color: var(--cpm-text-secondary); }
.est-ajuda__corpo ul { margin: 0; padding-left: 20px; }
.est-ajuda__corpo li + li { margin-top: 4px; }
/* ---------- O placar da diagnóstica (desde 2026-10-06) ----------
O resultado abre o bloco, grande: o anel com a porcentagem, o "7 de 21"
em número de título e as três contas (certas · erradas · em branco). As
áreas viram cartões com o número grande, e o ponto de partida desce para
depois delas — primeiro "como eu fui", depois "por onde começo". */
.est-diag__placar {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
padding: 6px 4px 18px; margin-bottom: 18px;
border-bottom: 1px solid var(--cpm-border-light);
}
.est-diag__anel { width: 132px; height: 132px; flex: none; }
.est-diag__anel-fundo { fill: none; stroke: var(--cpm-surface-3); stroke-width: 10; }
.est-diag__anel-cheio { fill: none; stroke: var(--cpm-primary); stroke-width: 10; stroke-linecap: round; }
.est-diag__anel-pct {
font-family: var(--cpm-font-display); font-size: 22px; font-weight: 800;
fill: var(--cpm-text); text-anchor: middle; dominant-baseline: central;
}
.est-diag__placar-texto { flex: 1 1 260px; min-width: 0; }
.est-diag__nota {
margin: 2px 0 2px; font-family: var(--cpm-font-display);
font-size: 26px; line-height: 1.2; color: var(--cpm-text);
}
.est-diag__nota strong { font-size: 44px; font-weight: 800; color: var(--cpm-primary); }
.est-diag__veredito { margin: 0 0 10px; font-size: 15px; color: var(--cpm-text-secondary); }
.est-diag__contas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.est-diag__contas li {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
border-radius: var(--cpm-radius-pill); background: var(--cpm-surface-2);
font-size: 14px; font-weight: 600;
}
.est-diag__contas .material-icons-outlined { font-size: 18px; }
.est-diag__conta--certa .material-icons-outlined { color: var(--cpm-success); }
.est-diag__conta--errada .material-icons-outlined { color: var(--cpm-red); }
.est-diag__conta--branco .material-icons-outlined { color: var(--cpm-text-secondary); }
.est-diag__secao { margin: 0 0 10px; font-size: 16px; }
.est-diag__secao--questoes { margin: 8px 0 12px; }
.est-diag__area { position: relative; padding: 14px; }
.est-diag__area--partida { border-color: var(--cpm-primary); box-shadow: inset 0 3px 0 var(--cpm-primary); }
.est-diag__area--forte { box-shadow: inset 0 3px 0 var(--cpm-success); }
.est-diag__selo {
position: absolute; top: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
border-radius: var(--cpm-radius-pill); font-size: 11px; font-weight: 700;
}
.est-diag__selo .material-icons-outlined { font-size: 14px; }
.est-diag__selo--partida { background: var(--cpm-primary); color: #fff; }
.est-diag__selo--forte { background: var(--cpm-success-light); color: var(--cpm-text); }
.est-diag__selo--forte .material-icons-outlined { color: var(--cpm-success); }
.est-diag__area-placar {
display: flex; align-items: baseline; gap: 2px; margin: 4px 0 6px;
font-family: var(--cpm-font-display); color: var(--cpm-text-secondary); font-size: 18px;
}
.est-diag__area-placar strong { font-size: 34px; font-weight: 800; color: var(--cpm-text); line-height: 1; }
.est-diag__area-pct { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--cpm-text); }
.est-diag__area-barra { display: block; margin-bottom: 12px; }
.est-diag__guia { margin-top: 16px; }
@media (max-width: 520px) {
.est-diag__placar { gap: 14px; }
.est-diag__anel { width: 104px; height: 104px; }
.est-diag__nota strong { font-size: 38px; }
.est-diag__nota { font-size: 22px; }
}
/* O cartão do mapa aberto por um link da diagnóstica (`#hab-CODIGO`): para
abaixo da barra do topo e ganha contorno, senão o estudante chega à página
e não sabe qual dos cartões o link apontava. */
.est-guia-coluna li { scroll-margin-top: calc(var(--cpm-topbar-height, 60px) + 16px); }
.est-guia-coluna li:target .est-mapa-hab {
outline: 3px solid var(--cpm-primary); outline-offset: 2px;
}
/* ==========================================================================
Desafio ENEM — 20 questões, 3 minutos cada, pontos pelo tempo
A questão reaproveita o relógio do passo 4 (`.est-relogio`, `.est-questao
--relogio`); aqui ficam a linha do alto (onde está e quantos pontos já
fez), o rodapé com o minuto extra e o resultado.
========================================================================== */
.est-desafio__historico { list-style: none; margin: 0; padding: 0; }
.est-desafio__historico a {
display: flex; align-items: center; gap: 14px; padding: 10px 2px;
border-top: 1px solid var(--cpm-border-light); color: inherit; text-decoration: none;
}
.est-desafio__historico li:first-child a { border-top: 0; }
.est-desafio__historico a:hover strong { color: var(--cpm-primary); }
.est-desafio__historico span:first-child { color: var(--cpm-text-muted); min-width: 92px; }
.est-desafio__botoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.est-desafio__pontos-texto { color: var(--cpm-primary); }
.est-placar__conta--pontos .material-icons-outlined { color: var(--cpm-primary); }
.est-desafio__linhas { list-style: none; margin: 0; padding: 0; }
.est-desafio__linha {
display: grid; grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) 110px 60px;
align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px;
border-top: 1px solid var(--cpm-border-light);
}
.est-desafio__linha:first-child { border-top: 0; }
.est-desafio__linha--certa > .material-icons-outlined { color: var(--cpm-success); }
.est-desafio__linha--errada > .material-icons-outlined { color: var(--cpm-red, #dc2626); }
.est-desafio__resp, .est-desafio__tempo { color: var(--cpm-text-secondary); }
.est-desafio__pts { text-align: right; }
@media (max-width: 720px) {
.est-desafio__linha { grid-template-columns: 24px 1fr auto; }
.est-desafio__resp, .est-desafio__tempo { grid-column: 2 / 4; }
}