:root {
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --texto: #1b1f24;
  --apoio: #5c6672;
  --borda: #dde1e6;
  --primaria: #1f3864;
  /* Superficie que carrega texto branco (topo, botao, atalho de conteudo).
     No tema escuro a cor primaria clareia para servir de texto sobre fundo
     escuro; se o topo seguisse essa variavel, ficaria branco sobre azul claro,
     com contraste de 1,9:1. Medido com axe-core: docs/12-acessibilidade.md. */
  --primaria-superficie: #1f3864;
  /* Cor de link. O default do navegador (#0000ee) tem 1,7:1 sobre o fundo do
     tema escuro — reprovado pelo axe-core na auditoria de contraste. */
  --link: #1a4fa0;
  --critico: #b3261e;
  --alerta: #8a5300;
  /* Niveis de proficiencia. Sao marca de identidade, nunca fundo de texto: as
     cores saturadas abaixo passaram no validador de paleta (banda de
     luminosidade, croma, separacao para daltonismo e contraste), enquanto os
     tons pastel anteriores tinham DeltaE 0,8 entre "basico" e "adequado" em
     protanopia — indistinguiveis. O rotulo acompanha sempre o ponto colorido. */
  --n-abaixo: #9b2226;
  --n-basico: #ca6702;
  --n-adequado: #2a9d8f;
  --n-avancado: #264f9e;
  --n-sem: #8a9099;
  /* Fundo suave de cada nivel, para faixa e etiqueta com texto legivel. */
  --n-abaixo-suave: #fdecec;
  --n-basico-suave: #fdefdd;
  --n-adequado-suave: #e3f5f1;
  --n-avancado-suave: #e6edfa;
  --n-sem-suave: #eef0f2;

  /* Rampa sequencial do mapa de calor: magnitude pede uma unica matiz, clara a
     escura. Arco-iris em dado ordenado e' erro de leitura, nao de gosto. */
  --calor-1: #e8eef8;
  --calor-2: #b9cdeb;
  --calor-3: #6d93cf;
  --calor-4: #2c5fa8;
  --calor-tinta-clara: #1b1f24;
  --calor-tinta-escura: #ffffff;

  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --raio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14171c;
    --superficie: #1c2027;
    --texto: #e7eaee;
    --apoio: #9aa4b1;
    --borda: #2c323b;
    --primaria: #8fb0e8;
    --primaria-superficie: #24385c;
    --link: #9ec1ff;
    --critico: #ff8a80;
    --alerta: #ffcc80;
    /* Passos proprios do tema escuro, validados contra a superficie escura. */
    --n-abaixo: #bd4450;
    --n-basico: #d4780f;
    --n-adequado: #2f9f8f;
    --n-avancado: #4a78cc;
    --n-sem: #6b7280;
    --n-abaixo-suave: #2e1b1d;
    --n-basico-suave: #2d2214;
    --n-adequado-suave: #142b28;
    --n-avancado-suave: #1a2338;
    --n-sem-suave: #24282e;

    --calor-1: #1e2a3d;
    --calor-2: #274266;
    --calor-3: #35608f;
    --calor-4: #4a7fbe;
    --calor-tinta-clara: #e7eaee;
    --calor-tinta-escura: #0d1117;

    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topo {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--primaria-superficie); color: #fff;
}
.marca strong { display: block; font-size: 18px; letter-spacing: .5px; }
.marca span { font-size: 13px; opacity: .85; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; }
.menu a {
  color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.menu a:hover { background: rgba(255, 255, 255, .12); }
/* A pagina atual fica marcada tambem fora da cor, com o aria-current no HTML. */
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.menu .usuario { opacity: .85; padding-left: 8px; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 26px; margin: 0 0 4px; line-height: 1.25; }
h2 { font-size: 18px; margin: 0 0 12px; }

/* Cabecalho de pagina: trilha de volta, titulo, linha de contexto e acoes.
   Todas as telas usam o mesmo, para a navegacao nao mudar de forma a cada tela. */
.cabecalho-pagina { margin-bottom: 20px; }
.trilha { font-size: 13px; color: var(--apoio); margin: 0 0 8px; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.cabecalho-pagina .contexto { color: var(--apoio); margin: 4px 0 0; font-size: 14px; }
.cabecalho-pagina .acoes { margin-top: 12px; }
.marcadores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
a { color: var(--link); }
a:visited { color: var(--link); }

.apoio { color: var(--apoio); margin: 0 0 16px; }
.pequeno { font-size: 13px; }
.critico { color: var(--critico); font-weight: 600; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; margin-bottom: 20px; box-shadow: var(--sombra);
}
.cartao > h2:first-child { margin-top: 0; }
.cartao.estreito { max-width: 420px; margin: 48px auto; }

.indicadores { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 20px; }
.indicador {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 14px;
  box-shadow: var(--sombra);
}
.indicador.alerta { border-color: var(--alerta); }
.indicador .rotulo {
  display: block; font-size: 12px; color: var(--apoio);
  text-transform: uppercase; letter-spacing: .4px;
}
.indicador .valor {
  display: block; font-size: 30px; line-height: 1.15; margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}

.colunas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Estado vazio: a tela diz o que falta e o que fazer, em vez de so' ficar em
   branco. A escola abre o sistema antes de existir dado. */
.vazio {
  border: 1px dashed var(--borda); border-radius: var(--raio); padding: 24px;
  text-align: center; color: var(--apoio);
}
.vazio strong { display: block; color: var(--texto); margin-bottom: 4px; font-size: 15px; }
.vazio .botao { margin-top: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--apoio); }
td.descricao { max-width: 420px; color: var(--apoio); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* O nivel e' identidade: ponto colorido mais rotulo. A cor nunca carrega o
   texto — nenhuma das quatro tem contraste suficiente para isso, nem com
   branco nem com tinta escura. */
.nivel {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: 999px; font-size: 12px; line-height: 1.4; white-space: nowrap;
  border: 1px solid var(--borda); background: var(--n-sem-suave); color: var(--texto);
}
.nivel::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--n-sem);
  flex: 0 0 auto;
}
.nivel.n-ABAIXO_DO_BASICO { background: var(--n-abaixo-suave); }
.nivel.n-ABAIXO_DO_BASICO::before { background: var(--n-abaixo); }
.nivel.n-BASICO { background: var(--n-basico-suave); }
.nivel.n-BASICO::before { background: var(--n-basico); }
.nivel.n-ADEQUADO { background: var(--n-adequado-suave); }
.nivel.n-ADEQUADO::before { background: var(--n-adequado); }
.nivel.n-AVANCADO { background: var(--n-avancado-suave); }
.nivel.n-AVANCADO::before { background: var(--n-avancado); }
.nivel.n-SEM_DADOS { background: var(--n-sem-suave); }

/* Distribuicao por nivel: a barra e' a marca, o rotulo fica embaixo, em tinta
   de texto. Ha 2px de respiro entre segmentos, para a borda nao se perder.
   `stretch` iguala a altura: o rotulo do segmento estreito quebra em mais
   linhas e, com `flex-end`, desalinhava a faixa colorida. `min-width` garante
   que o rotulo do menor nivel ainda caiba. */
.barras { display: flex; gap: 2px; align-items: stretch; }
.barra {
  flex: 0 1 auto; min-width: 96px; text-align: center; padding: 0 0 10px;
  border-radius: 6px; background: var(--fundo);
}
.barra .faixa {
  display: block; height: 10px; border-radius: 4px 4px 0 0; background: var(--n-sem);
}
.barra .rotulo-barra { display: block; font-size: 12px; color: var(--apoio); padding: 0 6px; }
.barra strong {
  display: block; font-size: 20px; line-height: 1.2; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.barra.n-ABAIXO_DO_BASICO { background: var(--n-abaixo-suave); }
.barra.n-ABAIXO_DO_BASICO .faixa { background: var(--n-abaixo); }
.barra.n-BASICO { background: var(--n-basico-suave); }
.barra.n-BASICO .faixa { background: var(--n-basico); }
.barra.n-ADEQUADO { background: var(--n-adequado-suave); }
.barra.n-ADEQUADO .faixa { background: var(--n-adequado); }
.barra.n-AVANCADO { background: var(--n-avancado-suave); }
.barra.n-AVANCADO .faixa { background: var(--n-avancado); }

/* Legenda: identidade nunca depende so' da cor. */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.legenda li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--apoio); }
.legenda .amostra { width: 12px; height: 12px; border-radius: 3px; background: var(--n-sem); }
.legenda .c1 { background: var(--calor-1); border: 1px solid var(--borda); }
.legenda .c2 { background: var(--calor-2); }
.legenda .c3 { background: var(--calor-3); }
.legenda .c4 { background: var(--calor-4); }

form { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; color: var(--apoio); }
input {
  padding: 10px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo); color: var(--texto); font-size: 15px;
}
button, .botao {
  display: inline-block; margin-top: 10px; padding: 10px 16px; border: 0; border-radius: 6px;
  background: var(--primaria-superficie); color: #fff; font-size: 15px; cursor: pointer;
  text-decoration: none;
}
.botao.secundario { background: transparent; color: var(--primaria); border: 1px solid var(--borda); }
.erro { color: var(--critico); font-size: 14px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }

footer {
  border-top: 1px solid var(--borda); padding: 16px; text-align: center;
  color: var(--apoio); font-size: 13px;
}
footer p { margin: 2px 0; }

@media (max-width: 640px) {
  main { padding: 16px; }
  /* Na coluna do celular a proporcao horizontal perde sentido: cada nivel ocupa
     a linha inteira. `.barras .barra` vence `.larg-*` por especificidade. */
  .barras { flex-direction: column; }
  .barras .barra { width: auto; }
}

/* --- Biblioteca digital e recursos ---------------------------------------- */
/* Acervo em grade: o material e' objeto, nao linha de tabela. Cada cartao traz
   a lombada colorida do componente, para o professor achar pelo canto do olho. */
main > section > h2, main > section > h2:first-child { margin-top: 8px; }
.estante { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* A lombada colorida do componente e' uma borda, nao um pseudo-elemento
   posicionado: sobreposto ao cartao, ele impedia o axe-core de determinar o
   fundo das etiquetas ("could not be determined due to a pseudo element") e
   deixava o contraste sem veredito. */
.estante .titulo-material {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px; border: 1px solid var(--borda); border-left: 6px solid var(--n-avancado);
  border-radius: var(--raio);
  background: var(--superficie); box-shadow: var(--sombra);
  color: inherit; text-decoration: none; overflow: hidden;
}
.estante .titulo-material.matematica { border-left-color: var(--n-adequado); }
/* O realce do hover nao toca a lombada: ela identifica o componente. */
.estante .titulo-material:hover {
  border-top-color: var(--primaria); border-right-color: var(--primaria);
  border-bottom-color: var(--primaria);
}
.estante .titulo-material strong { font-size: 15px; line-height: 1.35; }
.estante .titulo-material .ficha-curta { font-size: 13px; color: var(--apoio); margin-top: auto; }
.estante .titulo-material .etiqueta { align-self: flex-start; }

.acervo, .unidades { list-style: none; margin: 0; padding: 0; }
.unidades { counter-reset: unidade; }
.acervo li, .unidades li { border-bottom: 1px solid var(--borda); }
.acervo li:last-child, .unidades li:last-child { border-bottom: 0; }
.acervo a, .unidades a {
  display: block; padding: 12px 4px; color: inherit; text-decoration: none;
}
.acervo a:hover, .unidades a:hover { background: var(--fundo); }
.acervo strong, .unidades strong { display: block; }
.acervo span, .unidades span { display: block; }
.unidades li { counter-increment: unidade; }
.unidades a strong::before { content: counter(unidade) ". "; color: var(--apoio); }

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--fundo); border: 1px solid var(--borda);
  font-size: 12px; color: var(--apoio);
}
.objetivo {
  border-left: 3px solid var(--primaria); padding: 10px 14px; margin: 0 0 16px;
  background: var(--superficie); border-radius: 0 var(--raio) var(--raio) 0;
}
/* Leitura: coluna estreita, centrada e com entrelinha maior. Texto corrido em
   1180px de largura cansa; o caderno e' para ser lido, nao consultado. */
.leitura { max-width: 72ch; margin: 0 auto; }
.leitura .corpo { font-size: 17px; line-height: 1.7; }
.corpo { white-space: pre-wrap; }
.cartao.orientacao { border-left: 4px solid var(--alerta); background: var(--fundo); }
.cartao.orientacao h2 { color: var(--alerta); }
.cartao.atividade { border-left: 4px solid var(--primaria); }
.cartao.recurso { border-left: 4px solid var(--n-adequado); }
/* Etiqueta do tipo de bloco: o estudante sabe se aquilo e' leitura, atividade
   ou jogo antes de comecar. */
.tipo-bloco {
  display: inline-block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--apoio); margin-bottom: 4px;
}

/* Navegacao entre unidades, no pe' da leitura. */
.paginacao-unidade {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--borda);
}
.paginacao-unidade .apoio { margin: 0; }
.paginacao-unidade a { display: inline-flex; flex-direction: column; text-decoration: none; }
/* O destino da direita alinha pela borda direita, como o olho espera de um
   "proximo". O da esquerda fica onde esta'. */
.paginacao-unidade > :last-child { text-align: right; align-items: flex-end; }
.paginacao-unidade > :first-child { text-align: left; align-items: flex-start; }
.paginacao-unidade .direcao { font-size: 12px; color: var(--apoio); }
.paginacao-unidade .destino { font-weight: 600; }

/* Progresso dentro do caderno. */
.progresso-caderno { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--apoio); }
.progresso-caderno .trilho { flex: 1; max-width: 220px; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.ficha dt { font-size: 13px; color: var(--apoio); }
.ficha dd { margin: 0; }

.questao { border: 1px solid var(--borda); border-radius: 8px; margin: 0 0 14px; padding: 12px; }
.questao legend { font-weight: 600; padding: 0 6px; }
.alternativa {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px;
  border-radius: 6px; cursor: pointer; color: var(--texto); font-size: 15px;
}
.alternativa:hover { background: var(--fundo); }
.alternativa input { width: auto; margin-top: 3px; }

.pareamento { display: grid; gap: 10px; }
.par { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.par label { color: var(--texto); font-size: 15px; }
.par select {
  padding: 8px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo); color: var(--texto);
}

.ordenacao { margin: 0 0 14px; padding-left: 24px; }
.ordenacao li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px; border-bottom: 1px solid var(--borda);
}
.ordenacao .acoes button {
  margin: 0 0 0 4px; padding: 4px 10px; font-size: 16px; line-height: 1;
}
.ordenacao .acoes button:disabled { opacity: .35; cursor: not-allowed; }

audio { width: 100%; margin: 12px 0; }

:focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; }

/* --- Provas do estudante --------------------------------------------------- */
.provas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.prova-cartao { display: flex; flex-direction: column; gap: 8px; }
.prova-cartao h2 { margin: 0; font-size: 17px; }
.prova-cartao .situacao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prova-cartao .acoes { margin-top: auto; }
.prova-cartao .progresso { margin: 4px 0 0; }

/* --- Aplicacao online da avaliacao ---------------------------------------- */
.progresso { margin-bottom: 12px; }
.trilho {
  display: block; height: 8px; border-radius: 999px; background: var(--borda); overflow: hidden;
}
td .trilho { width: 90px; margin-top: 4px; }
/* `display: block` e' necessario: quando a barra vem como <span> no HTML
   renderizado no servidor, altura em elemento inline e' ignorada e a barra
   aparece vazia. */
.preenchido { display: block; height: 100%; background: var(--primaria); transition: width .2s; }

/* Larguras proporcionais em classe, nao em atributo `style`. A CSP do sistema
   usa `style-src 'self'` sem `unsafe-inline`, o que faz o navegador descartar
   qualquer atributo `style=` vindo do HTML renderizado no servidor: barra
   proporcional so' funciona por classe. Passo de 1%, de 0 a 100. */
.larg-0 { width: 0%; }
.larg-1 { width: 1%; }
.larg-2 { width: 2%; }
.larg-3 { width: 3%; }
.larg-4 { width: 4%; }
.larg-5 { width: 5%; }
.larg-6 { width: 6%; }
.larg-7 { width: 7%; }
.larg-8 { width: 8%; }
.larg-9 { width: 9%; }
.larg-10 { width: 10%; }
.larg-11 { width: 11%; }
.larg-12 { width: 12%; }
.larg-13 { width: 13%; }
.larg-14 { width: 14%; }
.larg-15 { width: 15%; }
.larg-16 { width: 16%; }
.larg-17 { width: 17%; }
.larg-18 { width: 18%; }
.larg-19 { width: 19%; }
.larg-20 { width: 20%; }
.larg-21 { width: 21%; }
.larg-22 { width: 22%; }
.larg-23 { width: 23%; }
.larg-24 { width: 24%; }
.larg-25 { width: 25%; }
.larg-26 { width: 26%; }
.larg-27 { width: 27%; }
.larg-28 { width: 28%; }
.larg-29 { width: 29%; }
.larg-30 { width: 30%; }
.larg-31 { width: 31%; }
.larg-32 { width: 32%; }
.larg-33 { width: 33%; }
.larg-34 { width: 34%; }
.larg-35 { width: 35%; }
.larg-36 { width: 36%; }
.larg-37 { width: 37%; }
.larg-38 { width: 38%; }
.larg-39 { width: 39%; }
.larg-40 { width: 40%; }
.larg-41 { width: 41%; }
.larg-42 { width: 42%; }
.larg-43 { width: 43%; }
.larg-44 { width: 44%; }
.larg-45 { width: 45%; }
.larg-46 { width: 46%; }
.larg-47 { width: 47%; }
.larg-48 { width: 48%; }
.larg-49 { width: 49%; }
.larg-50 { width: 50%; }
.larg-51 { width: 51%; }
.larg-52 { width: 52%; }
.larg-53 { width: 53%; }
.larg-54 { width: 54%; }
.larg-55 { width: 55%; }
.larg-56 { width: 56%; }
.larg-57 { width: 57%; }
.larg-58 { width: 58%; }
.larg-59 { width: 59%; }
.larg-60 { width: 60%; }
.larg-61 { width: 61%; }
.larg-62 { width: 62%; }
.larg-63 { width: 63%; }
.larg-64 { width: 64%; }
.larg-65 { width: 65%; }
.larg-66 { width: 66%; }
.larg-67 { width: 67%; }
.larg-68 { width: 68%; }
.larg-69 { width: 69%; }
.larg-70 { width: 70%; }
.larg-71 { width: 71%; }
.larg-72 { width: 72%; }
.larg-73 { width: 73%; }
.larg-74 { width: 74%; }
.larg-75 { width: 75%; }
.larg-76 { width: 76%; }
.larg-77 { width: 77%; }
.larg-78 { width: 78%; }
.larg-79 { width: 79%; }
.larg-80 { width: 80%; }
.larg-81 { width: 81%; }
.larg-82 { width: 82%; }
.larg-83 { width: 83%; }
.larg-84 { width: 84%; }
.larg-85 { width: 85%; }
.larg-86 { width: 86%; }
.larg-87 { width: 87%; }
.larg-88 { width: 88%; }
.larg-89 { width: 89%; }
.larg-90 { width: 90%; }
.larg-91 { width: 91%; }
.larg-92 { width: 92%; }
.larg-93 { width: 93%; }
.larg-94 { width: 94%; }
.larg-95 { width: 95%; }
.larg-96 { width: 96%; }
.larg-97 { width: 97%; }
.larg-98 { width: 98%; }
.larg-99 { width: 99%; }
.larg-100 { width: 100%; }

.mapa { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.mapa .atalho {
  margin: 0; min-width: 38px; padding: 6px 8px; font-size: 14px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda);
}
.mapa .atalho.respondida { background: var(--n-adequado-suave); border-color: var(--n-adequado); }
.mapa .atalho.atual { border-color: var(--primaria); border-width: 2px; font-weight: 700; }

/* --- Area de operacao ------------------------------------------------------ */
.filtros {
  flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.filtros label { align-self: center; }
.filtros select { padding: 8px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--superficie); color: var(--texto); }
/* No celular o par rotulo+campo quebra no meio da linha e o rotulo acaba longe
   do campo que nomeia. Cada par passa a ocupar a largura toda. */
@media (max-width: 640px) {
  .filtros { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .filtros label { align-self: start; }
  .filtros label + select { margin-bottom: 8px; }
}

textarea {
  padding: 10px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
  resize: vertical;
}
select {
  padding: 10px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--fundo); color: var(--texto); font-size: 15px;
}
input[type="file"] { padding: 8px 0; border: 0; background: none; }

.retorno { margin: 8px 0 0; font-size: 14px; }
.retorno.sucesso { color: #1b5e20; }
.retorno.erro { color: var(--critico); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .retorno.sucesso { color: #a5d6a7; }
}

.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-linha .botao { margin-top: 0; padding: 5px 10px; font-size: 13px; }

/* Tabela larga rola dentro da propria area, em vez de vazar por baixo da borda
   do cartao. A area recebe `tabindex` no HTML: regiao rolavel tem de ser
   alcancavel pelo teclado (WCAG 2.1.1), e nao so' pelo arrasto. */
.rolagem { overflow-x: auto; }
.rolagem:focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; }
/* No celular a tabela cabe rolando de lado, e nao espremendo: "Maria Carvalho
   Jesus" em tres linhas com a etiqueta de nivel quebrada ao lado e' pior de ler
   do que deslizar a tabela. A coluna de descricao continua quebrando. */
@media (max-width: 640px) {
  .rolagem table th, .rolagem table td:not(.descricao) { white-space: nowrap; }
}
table.calor { font-size: 12px; border-collapse: separate; border-spacing: 2px; }
table.calor th, table.calor td { text-align: center; padding: 6px 8px; white-space: nowrap; }
/* Cabecalho de linha e' nome proprio da turma, nao rotulo de coluna: sem
   caixa alta, que ja' prejudicou a leitura de "1o ano A - Escola Centro". */
table.calor th[scope="row"] {
  text-align: left; text-transform: none; letter-spacing: 0; font-size: 12px;
  position: sticky; left: 0; background: var(--superficie);
}
table.calor td { border: 0; border-radius: 4px; font-variant-numeric: tabular-nums; }
/* Rampa sequencial: o valor vai impresso em cada celula, entao a leitura nao
   depende da cor — e a cor da tinta acompanha o passo da rampa. */
table.calor td.c1 { background: var(--calor-1); color: var(--calor-tinta-clara); }
table.calor td.c2 { background: var(--calor-2); color: var(--calor-tinta-clara); }
table.calor td.c3 { background: var(--calor-3); color: var(--calor-tinta-clara); }
table.calor td.c4 { background: var(--calor-4); color: var(--calor-tinta-escura); }
table.calor td.vazia { color: var(--apoio); background: var(--fundo); }

h2 a { color: inherit; }

/* --- Acessibilidade -------------------------------------------------------- */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 10px 16px; background: var(--primaria-superficie); color: #fff; text-decoration: none;
}
.pular:focus { left: 0; }
main:focus { outline: none; }

/* --- Pagina de erro -------------------------------------------------------- */
.pagina-de-erro { max-width: 560px; margin: 48px auto; text-align: center; }
.pagina-de-erro .codigo-do-erro {
  font-size: 56px; font-weight: 700; line-height: 1; margin: 0; color: var(--apoio);
}
.pagina-de-erro h1 { margin: 8px 0 12px; }
.pagina-de-erro .detalhe-do-erro { color: var(--apoio); }
.pagina-de-erro .requisicao-do-erro { font-size: 13px; color: var(--apoio); }
.pagina-de-erro code { background: var(--fundo); padding: 2px 6px; border-radius: 4px; }
.aviso-truncado { margin: 8px 0 0; font-size: 13px; }

/* --- Apresentacao ampliada (TR 10 "an") ------------------------------------ */
/* Concedida pelo servidor a quem tem atendimento educacional especializado. */
body.fonte-ampliada { font-size: 21px; line-height: 1.7; }
body.fonte-ampliada .questao legend { font-size: 24px; }
body.fonte-ampliada .alternativa { padding: 10px 0; }
body.fonte-ampliada .alternativa input[type="radio"] { width: 22px; height: 22px; }
body.fonte-ampliada .mapa .atalho { min-width: 42px; min-height: 42px; font-size: 18px; }
body.fonte-ampliada .apoio.pequeno { font-size: 17px; }

.relogio { font-variant-numeric: tabular-nums; font-weight: 600; margin: 4px 0; }
.relogio.critico { color: var(--critico); }