/* Painel de Avaliações — PEI João Sarmento Pimentel
 *
 * A paleta vem do brasão da escola e é a mesma do painel anterior, para quem
 * já usava não sentir que trocou de sistema. O que mudou é a estrutura: aqui há
 * várias avaliações e vários anos, então apareceram cartões, abas e tabelas
 * largas que o painel de uma avaliação só não precisava.
 */

:root {
  --primary: #4B22F5;
  --primary-soft: #8B6BF5;
  --lp-color: #2E9BD6;
  --mat-color: #0F4C75;
  --good: #1F9E3D;
  --warn: #D6A400;
  --bad: #D64550;

  --bg: #F4F5FA;
  --bg-card: #FFFFFF;
  --bg-card-2: #F8F8FC;
  --text: #181A2A;
  --text-dim: #5A5F78;
  --border: #E2E3EE;
  --shadow: 0 1px 3px rgba(20, 20, 50, .08), 0 1px 2px rgba(20, 20, 50, .06);
  --radius: 16px;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg: #0B1020;
    --bg-card: #141B33;
    --bg-card-2: #101728;
    --text: #EDEEF7;
    --text-dim: #9BA0BE;
    --border: #232C4D;
    --primary: #8B6BF5;
    --primary-soft: #4B22F5;
    --lp-color: #4FB8EE;
    --mat-color: #3E8FCE;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --bg: #0B1020;
  --bg-card: #141B33;
  --bg-card-2: #101728;
  --text: #EDEEF7;
  --text-dim: #9BA0BE;
  --border: #232C4D;
  --primary: #8B6BF5;
  --primary-soft: #4B22F5;
  --lp-color: #4FB8EE;
  --mat-color: #3E8FCE;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.envelope { max-width: 1320px; margin: 0 auto; padding: 20px 22px 60px; }

/* ---------------------------------------------------------------- cabeçalho */
header.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marca img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.marca h1 { font-size: 19px; margin: 0; font-weight: 800; letter-spacing: .2px; }
.marca p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }

.acoes-topo { display: flex; align-items: center; gap: 10px; }

.quem {
  font-size: 12px; color: var(--text-dim); text-align: right; line-height: 1.35;
}
.quem strong { display: block; color: var(--text); font-size: 13px; font-weight: 700; }

/* ------------------------------------------------------------------ botões */
button, .botao {
  font-family: inherit; font-size: 13px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text);
  padding: 7px 15px; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primario {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
button.primario:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-soft); color: #fff; }
button.perigo:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
button.discreto { border-color: transparent; background: transparent; color: var(--text-dim); }

select,
input[type="text"], input[type="search"], input[type="number"],
input[type="email"], input[type="password"] {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; font-family: inherit; min-width: 150px;
}
select:focus, input:focus { outline: 2px solid var(--primary-soft); outline-offset: 1px; }

/* -------------------------------------------------------------------- abas */
/* A barra não quebra: quem quebra são os botões dentro dela. Assim o ano fica
   sempre na mesma linha da primeira fileira de abas, encostado à direita, em
   vez de cair sozinho numa linha abaixo quando a tela aperta. */
nav.abas {
  display: flex; align-items: flex-end; flex-wrap: nowrap;
  gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 22px;
}
.abas-itens { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

/* Um pouco acima da linha da barra, para não parecer apoiado nela como se
   fosse mais uma aba. */
nav.abas #seletorAno {
  flex-shrink: 0; margin-bottom: 6px;
  min-width: auto; padding: 5px 10px; font-size: 13px; font-weight: 700;
}
nav.abas button {
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--text-dim); padding: 10px 16px; font-weight: 700;
}
nav.abas button:hover { color: var(--text); border-color: transparent; }
nav.abas button.ativa { color: var(--primary); border-bottom-color: var(--primary); }

/* ------------------------------------------------------------------ painel */
.painel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 18px;
}
.painel > h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.painel > .desc { margin: 0 0 18px; font-size: 12.5px; color: var(--text-dim); }

.rotulo {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px;
}

/* ------------------------------------------- grade de cartões de avaliação */
.grade-avaliacoes {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cartao {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cartao:hover { border-color: var(--primary); transform: translateY(-2px); }
.cartao.vazio { cursor: default; opacity: .72; }
.cartao.vazio:hover { border-color: var(--border); transform: none; }

.cartao .tipo { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); }
.cartao .periodo { font-size: 18px; font-weight: 800; margin: -6px 0 0; }
.cartao .nota { font-size: 12.5px; color: var(--text-dim); }

.partes { display: flex; flex-direction: column; gap: 7px; }
.parte { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.parte .bolinha { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.parte.tem .bolinha { background: var(--good); }
.parte.parcial .bolinha { background: var(--warn); }
.parte .nome { flex: 1; }
.parte .valor { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.parte:not(.tem) .nome, .parte:not(.tem) .valor { color: var(--text-dim); }

/* --------------------------------------------------------- tabela de dados */
.rolagem {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card-2);
}
table.dados { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.dados th, table.dados td { padding: 9px 12px; text-align: right; white-space: nowrap; }
table.dados thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card-2); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-dim);
}
table.dados td { border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.dados tbody tr:last-child td { border-bottom: none; }
table.dados tbody tr:hover td { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* A primeira coluna fica congelada: com 13 matérias, sem isso a pessoa rola
   para a direita e perde de vista de qual turma é a linha. */
table.dados th.rotulo-linha, table.dados td.rotulo-linha {
  position: sticky; left: 0; z-index: 1;
  text-align: left; background: var(--bg-card-2);
  border-right: 1px solid var(--border); font-weight: 700;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
table.dados thead th.rotulo-linha { z-index: 3; }
table.dados tbody tr:hover td.rotulo-linha { background: color-mix(in srgb, var(--primary) 6%, var(--bg-card-2)); }
table.dados td.vazio { color: var(--text-dim); }
table.dados tr.clicavel { cursor: pointer; }

/* Escala de cor do percentual: o olho encontra a turma em dificuldade antes de
   ler os números. Faixas largas de propósito — não é nota, é ordem de grandeza. */
.faixa-baixa { color: var(--bad); font-weight: 700; }
.faixa-media { color: var(--warn); font-weight: 600; }
.faixa-alta { color: var(--good); font-weight: 600; }

/* ---------------------------------------------------------------- diversos */
.aviso {
  border-radius: 12px; padding: 12px 15px; font-size: 13px;
  border: 1px solid var(--border); background: var(--bg-card-2); margin-bottom: 14px;
}
.aviso.atencao { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--bg-card)); }
.aviso.ruim { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--bg-card)); }
.aviso.bom { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--bg-card)); }
.aviso ul { margin: 8px 0 0; padding-left: 20px; }

.vazio-msg { color: var(--text-dim); font-size: 13.5px; padding: 26px 0; text-align: center; }

.etiqueta {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.etiqueta.fisica { border-color: var(--lp-color); color: var(--lp-color); }
.etiqueta.digital { border-color: var(--primary); color: var(--primary); }

.linha-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.espaco { flex: 1; }

.carregando { color: var(--text-dim); padding: 40px 0; text-align: center; font-size: 13.5px; }

@media (max-width: 640px) {
  .envelope { padding: 14px 14px 50px; }
  .marca h1 { font-size: 16px; }
  .marca img { width: 42px; height: 42px; }
}

/* Divisor entre os componentes regulares e os do itinerário: as duas famílias
   ficam na mesma tabela na tela do aluno, e a linha lembra que são escalas
   distintas — não colunas comparáveis entre si. */
table.dados th.inicia-grupo, table.dados td.inicia-grupo {
  border-left: 2px solid var(--primary-soft);
}

/* =========================================================== visão geral */

/* Números de abertura. Grandes de propósito: são o que a gestão olha primeiro
   e, com frequência, o único que vai olhar. */
.faixa-numeros {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.numerao {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 5px;
}
.numerao .valor {
  font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.numerao .valor.ruim { color: var(--bad); }
.numerao .valor.bom { color: var(--good); }
.numerao .sub { font-size: 12px; color: var(--text-dim); }

/* ------------------------------------------------------------------ radar */
.radar-envelope { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.radar { width: 100%; max-width: 600px; height: auto; overflow: visible; }
.radar circle { cursor: pointer; }

.legenda-areas {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  font-size: 12px; color: var(--text-dim);
}
.item-area { display: inline-flex; align-items: center; gap: 7px; }
.item-area .amostra { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Dica flutuante do gráfico. Fica no body para não ser cortada pelo painel. */
.dica {
  position: fixed; transform: translate(-50%, -100%); z-index: 50;
  pointer-events: none; max-width: 240px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px; font-size: 12.5px;
}
.dica strong { font-size: 13px; }
.dica .vazio { color: var(--text-dim); font-size: 11.5px; }

/* --------------------------------------------------- turmas em destaque */
.duas-colunas { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.coluna-turmas { display: flex; flex-direction: column; gap: 10px; }
.lista-turmas { display: flex; flex-direction: column; gap: 8px; }

.turma-linha {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card-2); padding: 10px 14px; width: 100%;
}
.turma-linha .nome { flex: 1; font-weight: 600; font-size: 13px; }
.turma-linha .medida { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.turma-linha .valor {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: right;
}
.turma-linha .trilha {
  display: block; width: 90px; height: 8px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.turma-linha .preenche { display: block; height: 100%; border-radius: 999px; }
.turma-linha .trilha.bom .preenche { background: var(--good); }
.turma-linha .trilha.ruim .preenche { background: var(--bad); }

/* ------------------------------------------------ cartões de tipo de prova */
.grade-tipos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartao-tipo {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.cartao-tipo:hover:not(.vazio) { border-color: var(--primary); transform: translateY(-2px); }
.cartao-tipo.vazio { opacity: .6; cursor: default; }
.cartao-tipo .tipo { font-size: 15px; font-weight: 800; color: var(--text); }
.cartao-tipo:hover:not(.vazio) .tipo { color: var(--primary); }
.cartao-tipo .explica { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.cartao-tipo .nota { font-size: 12px; font-weight: 700; color: var(--text-dim); }

@media (max-width: 560px) {
  .numerao .valor { font-size: 27px; }
  .turma-linha .trilha { width: 56px; }
}

/* Radar e lista lado a lado: a forma à esquerda, a ordem à direita. Abaixo de
   1000px empilham — o radar não sobrevive a uma coluna estreita. */
.radar-com-lista {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
}
@media (max-width: 1000px) {
  .radar-com-lista { grid-template-columns: 1fr; }
}

.lista-componentes { display: flex; flex-direction: column; gap: 7px; }
.linha-componente {
  display: grid; grid-template-columns: 1fr 100px 52px;
  align-items: center; gap: 12px; font-size: 12.5px;
}
.linha-componente .nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-componente .trilha {
  height: 9px; border-radius: 999px; background: var(--border); overflow: hidden;
}
/* Ponta arredondada no fim do dado, ancorada na base da trilha. */
.linha-componente .preenche { display: block; height: 100%; border-radius: 999px; }
.linha-componente .valor {
  text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
}

/* ==================================================== Avaliação Diagnóstica */

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.contagem { font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }

/* Barra empilhada: um vão de 2px da cor da superfície entre segmentos, para as
   fatias não se fundirem quando duas cores vizinhas são próximas. */
.barra-empilhada {
  display: flex; width: 100%; border-radius: 6px; overflow: hidden;
  background: var(--bg-card-2); gap: 2px;
}
.barra-empilhada .segmento {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
  transition: width .2s;
  /* Sem isto a fatia estica para caber o próprio texto e rouba largura das
     outras — a barra deixaria de ser proporcional aos números. */
  min-width: 0; overflow: hidden;
}
/* flex-shrink: 0 mantém a largura natural do texto mesmo quando a fatia é
   estreita — senão ele encolhe junto e a medida diria que sempre cabe. */
.segmento-texto { flex-shrink: 0; }
/* Escondido, mas ainda medido: é pela largura dele que se decide se cabe. */
.segmento.sem-rotulo .segmento-texto { visibility: hidden; }

.barra-com-rotulos { flex: 1 1 auto; min-width: 0; }
.rotulos-fora { position: relative; height: 16px; margin-top: 3px; }
.rotulo-fora {
  position: absolute; top: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rotulo-fora .ponto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Quando nem posicionados cabem, os rótulos seguem em fila, sem sobrepor. */
.rotulos-fora.em-fila { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; height: auto; }
.rotulos-fora.em-fila .rotulo-fora { position: static; }

/* Alinhados pelo topo, com a altura da barra: quando uma linha de rótulos
   aparece embaixo, "AvD1" e o total continuam na altura da barra, e não
   descem para o meio do conjunto. */
.linha-dist { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.rotulo-dist { font-size: 11.5px; font-weight: 800; color: var(--text-dim); width: 42px; flex-shrink: 0; line-height: 22px; }
.n-dist { font-size: 11.5px; color: var(--text-dim); width: 34px; text-align: right; flex-shrink: 0; line-height: 22px; }

.titulo-componente { font-size: 13.5px; margin: 0 0 10px; font-weight: 800; }
.titulo-componente .vazio { color: var(--text-dim); font-weight: 500; }

.legenda-simples {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 12px; color: var(--text-dim);
}
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --------------------------------------------------------------- donuts */
.grade-donuts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cartao-donut {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; text-align: center;
}
.cartao-donut h4 { margin: 0 0 12px; font-size: 13px; font-weight: 800; }
.donut { position: relative; width: 140px; margin: 0 auto; }
.donut svg { width: 140px; height: 140px; display: block; }
.donut-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.donut-centro b { font-size: 22px; font-weight: 800; line-height: 1; }
.donut-centro span { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; max-width: 88px; }

.legenda-donut { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.linha-legenda { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.linha-legenda b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ etiquetas de evolução */
.etiqueta.evo-avançou { border-color: var(--good); color: var(--good); }
.etiqueta.evo-manteve { border-color: var(--text-dim); color: var(--text-dim); }
.etiqueta.evo-regrediu { border-color: var(--bad); color: var(--bad); }

/* `hidden` sozinho não esconde a dica: a regra `.dica { display: flex }` acima é
   de autor e vence o `[hidden] { display: none }` que vem do navegador. Sem
   esta linha, a caixa aparece no primeiro ponto e nunca mais some. */
.dica[hidden] { display: none; }

/* ============================================ escolha do período (importar) */

.grupos-periodo { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.grupo-periodo { display: flex; flex-direction: column; gap: 9px; }
.opcoes-periodo { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cada período é um alvo clicável, não uma linha de lista suspensa: a pessoa vê
   de uma vez tudo que existe e o que cada um já tem dentro. */
.opcao-periodo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card-2); padding: 11px 16px; text-align: left; min-width: 168px;
}
.opcao-periodo .periodo { font-size: 14px; font-weight: 700; color: var(--text); }
.opcao-periodo .ja-tem { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }

.opcao-periodo.escolhida {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
}
.opcao-periodo.escolhida .periodo { color: var(--primary); }

/* A criação fica recolhida: acontece uma vez por bimestre, no máximo, e não
   deve competir com a escolha, que é o que se faz toda vez. */
.caixa-criar {
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.caixa-criar .linha-acoes { margin-bottom: 0; }

/* ==================================================== perfil do aluno */

.perfil-topo { display: flex; align-items: center; gap: 18px; }
.avatar {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, var(--bg-card));
  color: var(--primary); font-size: 19px; font-weight: 800; letter-spacing: .5px;
}
.perfil-identidade h2 { margin: 0 0 2px; font-size: 21px; font-weight: 800; }
.perfil-identidade .desc { margin: 0; }

/* --------------------------------------------------------- os quatro números */
.faixa-medidores {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.medidor {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 7px;
}
.medidor-rotulo { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.medidor-sub { display: block; font-size: 11.5px; color: var(--text-dim); }
.medidor-valor {
  font-size: 30px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.medidor-nota { font-size: 11.5px; color: var(--text-dim); }

.trilha-grande {
  display: block; height: 8px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.trilha-grande .preenche { display: block; height: 100%; border-radius: 999px; }

/* Preenchimento por faixa, reaproveitado pelas barras do perfil. */
.preenche.faixa-alta  { background: var(--good); }
.preenche.faixa-media { background: var(--warn); }
.preenche.faixa-baixa { background: var(--bad); }
.preenche.vazio       { background: var(--text-dim); }
.ponto.faixa-alta-bg  { background: var(--good); }
.ponto.faixa-media-bg { background: var(--warn); }
.ponto.faixa-baixa-bg { background: var(--bad); }

.legenda-faixas { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.legenda-faixas > span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------------------------------------------------- as duas colunas do meio */
/* Duas linhas alinhadas: cada par de painéis estica até a altura do mais alto,
   então a borda de baixo fica reta nos dois lados. O espaço entre painéis é o
   gap da grade, não a margem de cada um — margem somada ao gap dobraria. */
.perfil-grade {
  display: grid; gap: 18px; align-items: stretch; margin-bottom: 18px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
}
.perfil-grade > .painel,
.perfil-coluna > .painel { margin-bottom: 0; }
.perfil-coluna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* A leitura ocupa o que sobra da coluna depois da Diagnóstica. Ela nunca rola
   nem corta: numa versão que rolava por dentro, um aluno da 3ª série perdia de
   vista justamente os "Pontos de atenção". O que a encurta são as pílulas; se
   ainda assim ela passar do vizinho, é o painel da Prova Paulista que estica. */
.painel-leitura { flex: 1 1 auto; display: flex; flex-direction: column; }
.leitura-itens { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1040px) { .perfil-grade { grid-template-columns: 1fr; } }

/* ------------------------------------------------ barras por componente */
.barras-competencia { display: flex; flex-direction: column; gap: 9px; }
.linha-competencia {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.1fr 54px 62px;
  align-items: center; gap: 12px; font-size: 12.5px;
}
.linha-competencia .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-competencia .trilha { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.linha-competencia .trilha .preenche { display: block; height: 100%; border-radius: 999px; }
.linha-competencia .valor { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- cartões da AvD */
.cartoes-avd { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cartao-avd {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card-2); overflow: hidden;
}
.avd-topo {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 15px; border-bottom: 1px solid var(--border);
}
.avd-topo strong { font-size: 14px; }
.avd-topo .vazio { font-size: 11.5px; color: var(--text-dim); }
.avd-corpo { padding: 13px 15px; display: flex; flex-direction: column; gap: 13px; }
.avd-linha { display: flex; flex-direction: column; gap: 4px; }
.avd-linha .materia { font-size: 12.5px; font-weight: 700; }
.avd-linha .valores { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.avd-linha .equiv { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.etiqueta.nivel-abaixo      { border-color: var(--bad);  color: var(--bad); }
.etiqueta.nivel-basico      { border-color: var(--warn); color: var(--warn); }
.etiqueta.nivel-proficiente { border-color: var(--good); color: var(--good); }

/* ---------------------------------------------------- leitura dos dados */
.coluna-leitura { display: flex; flex-direction: column; gap: 9px; }
.titulo-leitura { font-size: 12.5px; font-weight: 800; }
.titulo-leitura.bom { color: var(--good); }
.titulo-leitura.ruim { color: var(--bad); }
.coluna-leitura ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.coluna-leitura li {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  padding-left: 14px; position: relative;
}
.coluna-leitura li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
}
.coluna-leitura li.bom::before { background: var(--good); }
.coluna-leitura li.ruim::before { background: var(--bad); }
.coluna-leitura li b { font-variant-numeric: tabular-nums; }
.coluna-leitura li .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leitura em pílulas: nome e percentual juntos, quebrando linha só quando a
   largura acaba. A bolinha colorida carrega o tom; o texto fica na tinta
   normal, para ler bem sobre qualquer fundo. */
.grupo-leitura { display: flex; flex-direction: column; gap: 8px; }
.pilulas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pilulas li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; line-height: 1.4; background: var(--bg-card);
}
.pilulas li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pilulas li.bom::before { background: var(--good); }
.pilulas li.ruim::before { background: var(--bad); }
.pilulas li b { font-variant-numeric: tabular-nums; }
.grupo-leitura .vazio { margin: 0; font-size: 12px; color: var(--text-dim); }

/* Separador de bloco na tabela de evolução. */
table.dados tr.linha-grupo td {
  background: var(--bg-card); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}

/* Trajetória AvD1 -> AvD2. Largura livre, altura pela proporção do viewBox. */
/* O teto de altura impede o gráfico de esticar junto com a largura da coluna e
   passar a dominar a tela — sem ele, numa coluna de 640px ele vira 468px de
   altura e a esquerda fica mais alta que a direita. */
.trajetoria { width: 100%; height: auto; max-height: 250px; display: block; overflow: visible; }

/* ============================================== blocos por itinerário */

.grade-itinerarios {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.cartao-itinerario {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card-2); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.itinerario-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.itinerario-topo .nome { display: block; font-size: 14.5px; font-weight: 800; }
.itinerario-topo .sub { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.itinerario-topo .resumo {
  font-size: 22px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.itinerario-topo .resumo.faixa-alta  { color: var(--good); }
.itinerario-topo .resumo.faixa-media { color: var(--warn); }
.itinerario-topo .resumo.faixa-baixa { color: var(--bad); }

.itinerario-materias { display: flex; flex-direction: column; gap: 8px; }
/* Grade mais estreita que a do perfil: aqui o cartão tem metade da largura. */
.itinerario-materias .linha-competencia { grid-template-columns: minmax(0, 1fr) 1.3fr 46px 0; }

.aviso-poucos {
  margin: 0; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 11.5px;
}

.resumo-bloco { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.origem-do-numero { font-size: 10px; color: var(--text-dim); white-space: nowrap; }

/* ------------------------- blocos de componente no perfil do aluno */
.blocos-do-aluno { display: flex; flex-direction: column; gap: 20px; }
.bloco-componentes { display: flex; flex-direction: column; gap: 12px; }
.bloco-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.bloco-topo .titulo { display: block; font-size: 13.5px; font-weight: 800; }
.bloco-topo .sub { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.bloco-topo .resumo {
  font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.bloco-topo .resumo.faixa-alta  { color: var(--good); }
.bloco-topo .resumo.faixa-media { color: var(--warn); }
.bloco-topo .resumo.faixa-baixa { color: var(--bad); }

/* --------------------------------------- seletor de bimestre do gráfico */
.cabecalho-com-seletor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.cabecalho-com-seletor h2 { margin: 0; font-size: 16px; font-weight: 800; }

/* Botões em grupo, não lista suspensa: são três ou quatro opções e a pessoa
   troca entre elas o tempo todo para comparar. */
.seletor-periodo {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 999px;
}
.seletor-periodo button {
  border: none; background: none; border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
}
.seletor-periodo button:hover { color: var(--text); border-color: transparent; }
.seletor-periodo button.escolhido {
  background: var(--primary); color: #fff;
}
.seletor-periodo button.escolhido:hover { color: #fff; }

/* Linha de usuário desativado: continua visível para poder ser reativado. */
table.dados tr.inativo td { opacity: .5; }
table.dados td.email { font-size: 12px; }

/* ============================================================ tela de entrada */

body.entrando { background: var(--bg); }

/* O cabeçalho e as abas se escondem com [hidden], mas as regras acima declaram
   `display:` e ganham da folha do navegador — sem isto a tela de login
   apareceria pendurada embaixo do menu da escola. */
header.topo[hidden], nav.abas[hidden] { display: none; }
.envelope-entrada {
  min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 20px 0;
}

.cartao-entrada {
  width: 100%; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px 30px 26px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.cartao-entrada .brasao { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 2px; }
.cartao-entrada h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.cartao-entrada .escola { margin: -8px 0 8px; font-size: 12.5px; color: var(--text-dim); }
.cartao-entrada .ajuda { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); }

.campo-entrada { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.campo-entrada input { width: 100%; min-width: 0; }

button.largo { width: 100%; padding: 11px; font-size: 14px; margin-top: 4px; }

/* "sair" fica discreto ao lado do papel: é ação rara e não deve competir com
   a navegação, mas precisa estar sempre alcançável. */
button.discreto.sair {
  padding: 0 2px; font-size: 12px; font-weight: 600;
  text-decoration: underline; vertical-align: baseline;
}

/* Senha provisória: fonte de largura fixa para não confundir letras parecidas
   ao ditar ou anotar, e seleção do texto inteiro com um clique. */
.senha-provisoria {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  user-select: all;
}