/* Evolucao do aluno: fonte UNICA de estilo para o caderno, o painel do pai e o link.
   Depende das variaveis de cor que cada pagina define no :root (--acento, --facil,
   --media, --dificil, --tinta, --tinta-2, --borda). O peso da prova (leve a pesada)
   e uma escala ORDINAL do proprio roxo do app, do mais claro ao mais escuro, validada
   com o validador da skill dataviz (ponta clara a 2,35:1 sobre branco). */

/* selos honestos (v3.5): fato que aconteceu, uma linha so, sem contagem e sem barra
   de progresso. Pilula discreta com um ponto verde, para nao competir com a frase do
   progresso, que continua sendo a manchete da tela. */
.evo-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.evo-selo { display: inline-flex; align-items: center; gap: 6px; background: #FFFDF9; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; color: var(--tinta-2); line-height: 1.3; }
.evo-selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--facil); flex: none; }

/* o que estudar antes da prova (v3.5): a parte fraca com o caminho de treinar ela */
.evo-estudo { display: grid; gap: 8px; margin-bottom: 4px; }
.evo-estudo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #FFFDF9; border: 1px solid var(--borda); border-radius: 12px; padding: 11px 12px; }
.evo-estudo-item .quem { min-width: 0; }
.evo-estudo-item .quem b { display: block; font-size: 14.5px; font-weight: 900; color: var(--tinta); line-height: 1.25; }
.evo-estudo-item .quem small { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-top: 2px; }
.evo-treinar { font: inherit; font-size: 13px; font-weight: 900; color: #fff; background: var(--acento); border: none; border-radius: 999px; padding: 9px 15px; cursor: pointer; white-space: nowrap; flex: none; }
.evo-treinar:active { transform: scale(0.97); }
.evo-treinar:disabled { opacity: 0.55; cursor: wait; }
.letra-grande .evo-selo { font-size: 14px; }
.letra-grande .evo-estudo-item .quem b { font-size: 16.5px; }
.letra-grande .evo-estudo-item .quem small { font-size: 13.5px; }
.letra-grande .evo-treinar { font-size: 15px; }

.evo-frases { display: grid; gap: 8px; margin-bottom: 16px; }
.evo-frase { background: #F0EDFF; color: var(--acento); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 800; line-height: 1.4; }
.evo-frase.principal { font-size: 17.5px; padding: 14px 16px; }
.evo-frase.caiu { background: #FFF6DE; color: #7A5A00; }
.evo-frase.manteve, .evo-frase.aguardando { background: #FFFDF9; border: 1px solid var(--borda); color: var(--tinta-2); }

.evo-titulo { font-weight: 900; font-size: 16px; margin: 18px 0 6px; }
.evo-sub { font-size: 12.5px; font-weight: 700; color: var(--tinta-2); margin-bottom: 10px; line-height: 1.4; }

.evo-legenda { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-bottom: 10px; line-height: 1.3; }
.evo-legenda-titulo { width: 100%; }
.evo-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.evo-sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--acento); }
.evo-sw.leve, .evo-ponto.leve { fill: #A99FF2; background: #A99FF2; }
.evo-sw.equilibrada, .evo-ponto.equilibrada { fill: #8B7EEE; background: #8B7EEE; }
.evo-sw.puxada, .evo-ponto.puxada { fill: #6C5CE7; background: #6C5CE7; }
.evo-sw.pesada, .evo-ponto.pesada { fill: #4C3EC2; background: #4C3EC2; }
.evo-sw.simples { background: #fff; border: 2px solid var(--acento); width: 8px; height: 8px; }

.evo-bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 8px 4px; margin-bottom: 10px; background: #FFFDF9; }
.evo-materia { font-weight: 900; font-size: 14px; padding: 0 6px 2px; }
.evo-grafico { position: relative; }
.evo-grafico svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.evo-grade { stroke: var(--borda); stroke-width: 1; }
.evo-eixo { font-size: 11px; font-weight: 700; fill: var(--tinta-2); }
.evo-nivel { font-size: 10.5px; font-weight: 800; fill: var(--tinta-2); }
.evo-rotulo { font-size: 13px; font-weight: 900; fill: var(--tinta); }
.evo-linha { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.evo-alvo { fill: transparent; cursor: pointer; }
.evo-anel { fill: #FFFDF9; }
.evo-ponto { fill: var(--acento); pointer-events: none; }
.evo-ponto.simples { fill: #FFFDF9; stroke: var(--acento); stroke-width: 2; }
.evo-ponto-g { outline: none; }
.evo-ponto-g:focus .evo-anel, .evo-ponto-g.ativo .evo-anel { fill: #D9D3FA; }
.evo-dica { position: absolute; display: none; z-index: 2; background: var(--tinta); color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; line-height: 1.4; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; box-shadow: 0 3px 10px rgba(43,39,51,0.25); }
.evo-dica b { display: block; font-size: 14px; font-weight: 900; }

/* barras por parte da materia: o mesmo desenho das barras do painel do pai */
.evo-barras { display: grid; gap: 9px; }
.evo-barra { display: grid; grid-template-columns: minmax(96px, 36%) 1fr 58px; align-items: center; gap: 9px; }
.evo-barra .mat { color: var(--tinta-2); font-size: 12.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evo-barra .trilho { background: #F0EDFF; border-radius: 4px; height: 14px; overflow: hidden; }
.evo-barra .cheio { height: 100%; border-radius: 0 4px 4px 0; }
.evo-barra .cheio.boa { background: var(--facil); }
.evo-barra .cheio.meia { background: var(--media); }
.evo-barra .cheio.ruim { background: var(--dificil); }
.evo-barra .val { text-align: right; line-height: 1.1; }
.evo-barra .val b { display: block; font-size: 14px; font-weight: 900; color: var(--tinta); }
.evo-barra .val small { font-size: 10.5px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.evo-vazio { text-align: center; color: var(--tinta-2); font-weight: 700; padding: 16px 4px; line-height: 1.5; font-size: 13.5px; }