/* =============================================================================
 * EDS TeacherDeck — folhas impressas
 *
 * O app e escuro. O PAPEL e branco, sempre. Aqui nao ha tema: o que sai da
 * impressora precisa ser preto sobre branco, com o maximo de contraste, porque
 * quem le e uma camera de celular ruim sob luz de sala de aula.
 *
 * As medidas vieram do `prototipo/cartao-resposta.html`, que foi lido 150/150
 * na rodada 1 da Fase 0. Nao mexer sem repetir o teste.
 * ========================================================================== */

.impressao { --tinta: #000; }

.folha {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto var(--r4);
  padding: 12mm 12mm 10mm;
  background: #fff;
  color: var(--tinta);
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  page-break-after: always;
  break-after: page;
  box-shadow: 0 2px 18px #00000055;
}

/* --------------------------------------------------------- marcas de canto
   Quatro quadrados solidos definem o plano do papel e permitem desentortar a
   foto. O canto inferior direito e MENOR de proposito: e ele que diz qual lado
   e o de cima, mesmo se a foto vier de cabeca para baixo.

   ---------------------------------------------------------------------------
   POR QUE BORDA, E NAO `background`

   Ate 11/08/2026 estas marcas eram `background: #000`. Elas apareciam
   perfeitas na tela e NUNCA SAIAM NA IMPRESSORA: navegador nao imprime cor de
   fundo sem `print-color-adjust: exact`, e essa linha nao existia em lugar
   nenhum do projeto.

   O estrago foi silencioso e caro. O primeiro teste em papel de verdade leu
   6 de 10 — e as quatro erradas passaram com 98% de confianca, porque o
   leitor estava olhando um cartao SEM NENHUMA ancora de posicao. As bolhas
   sairam (sao `border`), o QR saiu (e imagem), o quadro saiu (e `border`).
   So o sistema de referencia nasceu branco sobre branco.

   Borda SEMPRE imprime. Um elemento de tamanho zero com borda de 4mm em
   volta e um quadrado preto solido de 8mm que nenhuma configuracao de
   impressora descarta. O `print-color-adjust` fica junto como cinto e
   suspensorio, nao como unica defesa.
   --------------------------------------------------------------------------- */
.folha .marca {
  position: absolute; display: block;
  width: 0; height: 0;
  border-style: solid; border-color: #000;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.folha .marca.tl { top: 6mm; left: 6mm;   border-width: 4.5mm; }
.folha .marca.tr { top: 6mm; right: 6mm;  border-width: 4.5mm; }
.folha .marca.bl { bottom: 6mm; left: 6mm;  border-width: 4.5mm; }
.folha .marca.br { bottom: 6mm; right: 6mm; border-width: 2.5mm; }

/* ------------------------------------------------------------- cabecalho */
.folha .topo-folha {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8mm; padding: 4mm 12mm 0;
}
.folha.prova .topo-folha { padding: 0; }

.folha .ident { flex: 1; min-width: 0; }
.folha .inst { font-size: 10pt; font-weight: 700; }
.folha .tit  { font-size: 13.5pt; font-weight: 700; margin-top: 1mm; }
.folha .li   { font-size: 9pt; margin-top: 2mm; }
.folha .li b { display: inline-block; min-width: 19mm; }

.folha .aluno { margin-top: 3mm; border: .4mm solid #000; padding: 2.5mm 3mm; }
.folha .nome  { font-size: 12pt; font-weight: 700; }
.folha .mat   { font-size: 9pt; margin-top: 1mm; }
.folha .nome-vazio { font-size: 10.5pt; }

.folha .qr { text-align: center; flex: none; }
.folha .qr img, .folha .qr canvas { display: block; width: 26mm; height: 26mm; }
.folha .qr .tok {
  font-family: "Courier New", monospace; font-size: 6.5pt;
  margin-top: 1mm; letter-spacing: .03em;
}

/* --------------------------------------------------------------- instrucao
   A regra "rasura nao e lida" precisa estar IMPRESSA, nao so no codigo. */
.folha .instr {
  margin: 4mm 12mm 0; border: .3mm solid #000;
  padding: 2.5mm 3mm; font-size: 8.5pt; line-height: 1.35;
}
.folha .diag-preencher { display: block; width: 55mm; height: 11mm; margin-top: 1.5mm; }

/* ----------------------------------------------------------------- bolhas */
.folha .grade-bolhas { margin: 5mm 12mm 0; display: flex; gap: 8mm; align-items: flex-start; }
.folha .coluna { flex: 1; }

.folha .q { display: flex; align-items: center; gap: 2.2mm; margin-bottom: 2.6mm; }
.folha .q .n {
  width: 7mm; text-align: right; font-size: 9.5pt; font-weight: 700;
  font-family: "Courier New", monospace;
}
.folha .bolhas { display: flex; gap: 2.4mm; }

/* Cabecalho de coluna: a letra que a tinta nunca cobre.
   Sem ela o leitor conta circulos e erra a contagem nas linhas de baixo —
   3 leituras erradas em 5 no teste, todas com 98% de confianca. Com ela,
   8 em 8 corretas. Ver docs/FASE-0-CARTAO.md. */
.folha .q.cab-col { margin-bottom: 1.6mm; padding-bottom: 1.2mm;
                    border-bottom: .25mm solid #000; }
.folha .rot {
  width: 5.2mm; text-align: center;
  font-size: 8.5pt; font-weight: 700; line-height: 1;
}
.folha .bolha {
  width: 5.2mm; height: 5.2mm;
  border: .45mm solid #000; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 7pt; line-height: 1;
}

/* ------------------------------------------------------------- questoes */
.folha.prova .questoes { margin: 6mm 0 0; padding-left: 0; list-style: none; counter-reset: q; }
.folha.prova .questoes > li {
  counter-increment: q; margin-bottom: 5mm;
  page-break-inside: avoid; break-inside: avoid;
}
.folha.prova .enun { font-size: 10.5pt; line-height: 1.45; }
.folha.prova .enun::before {
  content: counter(q) ". "; font-weight: 700;
}
/* Figura da questao. Largura contida para nao dominar a pagina, e centralizada
   como manda a convencao de prova impressa. */
/* 62 mm em vez de 78: com 7 figuras numa prova de 10 questoes, cada
   milimetro a mais vira pagina a mais. Continua legivel — a medida ainda ocupa
   quase um terco da largura util. */
/* .folha.gabarito entra aqui tambem: o gabarito reusa a mesma marcacao
   ".figura" (vistas/gabarito.js) e nunca tinha regra de tamanho propria —
   a figura so nao estourava a pagina porque raramente aparecia sem SVG com
   viewBox. Ganho retroativo ao mexer nisto para a figura de upload. */
.folha.prova .figura, .folha.gabarito .figura {
  margin: 2.5mm 0 2.5mm 6mm;
  max-width: 62mm;
  page-break-inside: avoid; break-inside: avoid;
}
.folha.prova .figura svg, .folha.gabarito .figura svg {
  width: 100%; height: auto; display: block;
  /* Rotulo que passa um pouco do viewBox aparece em vez de sumir. Na prova
     impressa, medida cortada e questao sem resposta. */
  overflow: visible;
}
.folha.prova .figura svg text, .folha.gabarito .figura svg text { font-family: Arial, sans-serif; }

/* Figura de UPLOAD (imagem do professor, nao SVG da IA) — mesmo container,
   regra propria porque <img> nao aceita viewBox/overflow como <svg>. */
.folha.prova .figura img, .folha.gabarito .figura img {
  width: 100%; height: auto; display: block; object-fit: contain;
}

.folha.prova .alts { margin: 2mm 0 0 6mm; font-size: 10pt; line-height: 1.5; }
.folha.prova .alts .l { font-weight: 700; font-family: "Courier New", monospace; }
.folha.prova .linhas { margin: 3mm 0 0 6mm; }
.folha.prova .linhas span {
  display: block; border-bottom: .25mm solid #666; height: 7mm;
}

/* ------------------------------------------------------------------ rodape */
.folha .rodape {
  display: flex; justify-content: space-between; font-size: 7.5pt;
  padding-top: 4mm; margin-top: 6mm;
  border-top: .2mm solid #999;
}

/* O CARTAO e sempre uma pagina so, e o rodape dele deve ficar colado embaixo,
   longe das bolhas — a camera precisa de area limpa. */
.folha.cartao { display: flex; flex-direction: column; }
.folha.cartao .grade-bolhas { flex: 1; }
.folha.cartao .rodape { border-top: 0; margin-top: auto; }

/* A PROVA pode ocupar varias paginas fisicas. Rodape posicionado por absoluto
   caia no meio da pagina 2, colado na ultima alternativa — foi o que apareceu
   no teste 3. Em fluxo normal, ele termina onde o conteudo termina. */
.folha.prova { min-height: 0; }


/* ------------------------------------------------------------------ print */
@media print {
  @page { size: A4 portrait; margin: 0; }

  body { background: #fff !important; }
  body::before { display: none !important; }
  .topo, #controles, #toast, #modais { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }

  .folha { box-shadow: none; margin: 0; }
  .folha:last-child { page-break-after: auto; break-after: auto; }
}

/* --------------------------------------------------- preenchimento simulado
   Usado para testar a leitura por foto sem impressora, e para demonstrar o
   ciclo inteiro numa reuniao. Nao e um circulo perfeito de proposito: caneta
   real sai do centro, passa da borda e deixa falha. Se a leitura so funcionar
   com bolha perfeita, ela nao funciona. */
.folha .bolha { position: relative; }

.folha .bolha.cheia { color: transparent; }
.folha .bolha.cheia::after {
  content: ""; position: absolute;
  width: 118%; height: 118%; background: #000; border-radius: 50%;
}

/* Falha de tinta: o caso duvidoso, que deve ir para conferencia. */
.folha .bolha.falha { color: transparent; }
.folha .bolha.falha::after {
  content: ""; position: absolute;
  width: 74%; height: 74%; background: #000; border-radius: 50%; opacity: .82;
}
/* ------------------------------------------------------- gabarito comentado
   Duas versoes do mesmo documento: a do professor traz a fundamentacao e o
   trecho de origem; a do aluno explica por que cada errada esta errada. */

.folha.gabarito { min-height: 0; }

.folha .carimbo {
  flex: none; border: .5mm solid #000; padding: 2mm 3mm;
  font-size: 8pt; font-weight: 700; letter-spacing: .08em;
  text-align: center; max-width: 34mm; line-height: 1.25;
}

/* Faixa com as respostas, so na versao do professor: ele confere de relance. */
.folha .resumo-gab {
  display: flex; flex-wrap: wrap; gap: 2mm 5mm;
  border: .3mm solid #000; padding: 3mm; margin-top: 4mm;
  font-family: "Courier New", monospace; font-size: 10pt;
}
.folha .resumo-gab b { margin-right: 1mm; }

.folha .questoes.gab > li { margin-bottom: 7mm; }

.folha .alts .certa { font-weight: 700; }
.folha .marca-certa { font-size: 8.5pt; letter-spacing: .02em; }

.folha .coment, .folha .origem {
  margin: 2.5mm 0 0 6mm; padding: 2mm 3mm;
  font-size: 9.5pt; line-height: 1.45;
  border-left: .6mm solid #000;
}
.folha .origem { border-left-style: dotted; font-style: italic; }

.folha .olho-gab {
  display: block; font-size: 7pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8mm;
}

.folha .assuntos {
  margin: 1.5mm 0 0 6mm; font-size: 8pt; letter-spacing: .04em;
  text-transform: uppercase;
}

/* =========================================================== cabecalho institucional
   Pedido do professor parceiro, que montava o cabecalho dele fora do app.
   Regra que vale para todos os campos: o que nao foi preenchido vira LINHA
   PARA PREENCHER A MAO, nunca some. Prova impressa com campo faltando e pior
   que prova com campo em branco. */

.folha .cab-inst { margin-bottom: 5mm; }

/* faixa da instituicao ---------------------------------------------------- */
.folha .faixa-inst {
  display: flex; align-items: stretch; gap: 4mm;
  border: .5mm solid #000; padding: 3mm;
}
.folha .logo-inst { width: 18mm; height: 18mm; object-fit: contain; flex: none; }
.folha .faixa-txt { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.folha .faixa-nome { font-size: 13pt; font-weight: 700; letter-spacing: .04em; }
.folha .faixa-sub {
  font-size: 8pt; letter-spacing: .22em; text-transform: uppercase; margin-top: 1mm;
}

/* A caixa de nota fica no canto, do jeito que o professor procura: sempre no
   mesmo lugar, em todas as folhas da pilha. */
.folha .caixa-nota {
  flex: none; width: 30mm; border-left: .4mm solid #000; padding-left: 3mm;
  display: flex; flex-direction: column; justify-content: center;
}
.folha .cn-rot { font-size: 8pt; font-weight: 700; letter-spacing: .16em; }
.folha .cn-linha { border-bottom: .35mm solid #000; height: 7mm; margin-top: 1mm; }
.folha .cn-visto { font-size: 6.5pt; margin-top: 1.2mm; letter-spacing: .04em; }

.folha .cab-inst .inst { font-size: 10pt; font-weight: 700; }
.folha .tit-prova {
  font-size: 12pt; font-weight: 700; margin-top: 2.5mm; letter-spacing: .01em;
}

/* grade de campos --------------------------------------------------------- */
.folha .grade-cab {
  display: flex; flex-wrap: wrap; gap: 0;
  border: .3mm solid #000; border-bottom: 0; margin-top: 3mm;
}
.folha .grade-cab .cel {
  flex: var(--cw) 1 0; min-width: 32mm;
  border-bottom: .3mm solid #000; border-right: .3mm solid #000;
  padding: 1.6mm 2.5mm;
}
.folha .grade-cab .cel:last-child { border-right: 0; }
.folha .cel-rot {
  display: block; font-size: 6.5pt; letter-spacing: .12em;
  text-transform: uppercase;
}
.folha .cel-val { display: block; font-size: 9.5pt; min-height: 4.6mm; padding-top: .6mm; }

/* A linha para preencher a mao. */
.folha .preencher {
  display: inline-block; width: 100%; border-bottom: .3mm solid #000;
  height: 3.4mm; vertical-align: bottom;
}
.folha .preencher.curta { width: 46mm; }

/* identificacao do aluno -------------------------------------------------- */
.folha .ident-aluno { border: .3mm solid #000; border-top: 0; padding: 2.5mm; }
.folha .ia-rot {
  font-size: 6.5pt; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.5mm;
}
.folha .ia-linha { display: flex; align-items: flex-end; gap: 2mm; margin-top: 1.8mm; }
.folha .ia-cam { font-size: 9pt; flex: none; }
.folha .ia-val {
  flex: 1; font-size: 10.5pt; font-weight: 700;
  border-bottom: .3mm solid #000; min-height: 5mm;
}

/* orientacoes ------------------------------------------------------------- */
.folha .orient { border: .3mm solid #000; border-top: 0; padding: 2.5mm; }
.folha .or-rot {
  font-size: 6.5pt; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.2mm;
}
.folha .or-txt { font-size: 8.5pt; line-height: 1.4; }

/* cabecalho das paginas seguintes ----------------------------------------- */
.folha .cab-cont {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 5mm;
  border-bottom: .35mm solid #000; padding-bottom: 1.5mm; margin-bottom: 4mm;
  font-size: 8pt;
}
.folha .cc-aluno { font-weight: 700; }

/* --------------------------------------------- cabecalho corrido da prova
   As questoes vivem dentro de uma tabela de UMA coluna so. Nao e elegante, e
   e proposital: o <thead> e a unica coisa que o navegador redesenha no topo
   de cada pagina impressa. `position: running()` nao tem suporte que preste.

   Sem isso, a pagina 2 sai sem identificacao nenhuma — e se cair no chao da
   sala, ninguem sabe de quem e. */
.folha.prova .corpo-prova {
  width: 100%; border-collapse: collapse; margin-top: 4mm;
}
.folha.prova .corpo-prova > thead { display: table-header-group; }
.folha.prova .corpo-prova > tbody { display: table-row-group; }
.folha.prova .corpo-prova td { padding: 0; vertical-align: top; }

/* Na TELA o cabecalho corrido so atrapalha: ele ja esta logo abaixo do
   completo, e ali e redundante. No papel, e o que salva a pagina 2. */
.folha.prova .corpo-prova > thead .cab-cont { display: none; }
@media print {
  .folha.prova .corpo-prova > thead .cab-cont { display: flex; }
}

/* ------------------------------------------------------------ duas colunas
   Pedido do professor parceiro, olhando os modelos do Gradepen: prova em duas
   colunas ocupa quase metade das folhas. Numa turma de 40, cada folha a menos
   e dinheiro do bolso dele.

   `break-inside: avoid` continua valendo por questao — questao partida ao meio
   entre colunas e pior que folha a mais. */
.folha.prova.duas .questoes {
  column-count: 2;
  column-gap: 8mm;
  column-rule: .2mm solid #ccc;
}

/* Tudo encolhe junto, senao a coluna estoura. */
.folha.prova.duas .enun  { font-size: 9.5pt; line-height: 1.38; }
.folha.prova.duas .alts  { font-size: 9pt; line-height: 1.42; margin-left: 4mm; }
.folha.prova.duas .linhas { margin-left: 4mm; }

/* A figura tem que caber em MEIA largura util. 62 mm estouraria a coluna. */
.folha.prova.duas .figura { max-width: 52mm; margin-left: 4mm; }

.folha.prova.duas .questoes > li { margin-bottom: 4mm; }

/* ================================================== cabecalho COMPACTO
   O cabecalho institucional estava comendo folha demais, e a saida errada
   seria diminuir a letra da QUESTAO. Entao apertamos o cabecalho e deixamos a
   questao no tamanho que o aluno le sem forcar a vista.

   Ganho medido em altura: ~62 mm para ~40 mm. Uma questao inteira a mais por
   folha, sem tocar no corpo da prova. */

.folha .faixa-inst { padding: 2mm 2.5mm; gap: 3mm; }
.folha .logo-inst  { width: 14mm; height: 14mm; }
.folha .faixa-nome { font-size: 11.5pt; }
.folha .faixa-sub  { font-size: 7pt; letter-spacing: .18em; margin-top: .6mm; }

.folha .caixa-nota { width: 25mm; padding-left: 2.5mm; }
.folha .cn-rot     { font-size: 7pt; letter-spacing: .12em; }
.folha .cn-linha   { height: 5mm; margin-top: .6mm; }
.folha .cn-visto   { font-size: 5.8pt; margin-top: .6mm; }

.folha .cab-inst   { margin-bottom: 3mm; }
.folha .tit-prova  { font-size: 11.5pt; margin-top: 1.5mm; }

.folha .grade-cab      { margin-top: 2mm; }
.folha .grade-cab .cel { padding: 1mm 2mm; min-width: 30mm; }
.folha .cel-rot        { font-size: 6pt; letter-spacing: .1em; }
.folha .cel-val        { font-size: 9pt; min-height: 3.6mm; padding-top: .3mm; }

/* A identificacao vira UMA linha: aluno e matricula lado a lado. */
.folha .ident-aluno {
  display: flex; gap: 0; padding: 0;
  border: .3mm solid #000; border-top: 0;
}
.folha .ident-aluno .ia-linha {
  flex: var(--cw, 1) 1 0; margin: 0; padding: 1mm 2mm;
  border-right: .3mm solid #000; gap: 1.5mm;
}
.folha .ident-aluno .ia-linha:last-child { border-right: 0; }
.folha .ia-cam { font-size: 8pt; }
.folha .ia-val { font-size: 9.5pt; min-height: 3.8mm; border-bottom: 0; }

.folha .orient   { padding: 1.5mm 2mm; }
.folha .or-rot   { font-size: 6pt; margin-bottom: .5mm; }
.folha .or-txt   { font-size: 7.5pt; line-height: 1.3; }

/* O rotulo "Identificacao do aluno" saiu: a palavra "Aluno(a):" ao lado do
   campo ja diz o que e, e o rotulo custava uma linha inteira. */
.folha .ia-rot { display: none; }

/* ============================================ cabecalho: segunda apertada
   O professor imprimiu e disse que ainda tomava espaco. Quatro cortes, todos
   com motivo:

   1. Duracao saiu — ocupava uma linha inteira sozinha, e quase ninguem
      preenche.
   2. Orientacoes gerais foram para o CARTAO. Elas falam de como pintar a
      bolha, e a bolha esta la, nao na folha de questoes.
   3. As celulas encolheram: os nomes quebravam em duas linhas e dobravam a
      altura da faixa inteira.
   4. O nome do professor perdeu o cargo colado — o rotulo ja diz
      "Professor(a)", e saia "PROFESSOR(A): PROFESSOR EGNALDO DIAS". */

.folha .grade-cab .cel { padding: .8mm 1.8mm; min-width: 26mm; }
.folha .cel-rot        { font-size: 5.6pt; letter-spacing: .08em; }
.folha .cel-val {
  font-size: 8.5pt; min-height: 3.2mm; padding-top: .2mm;
  line-height: 1.15;
  /* Nome longo encolhe em vez de quebrar linha: uma linha a mais aqui vira
     dois milimetros a mais em TODA a faixa. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.folha .ident-aluno .ia-linha { padding: .8mm 1.8mm; }
.folha .ia-cam { font-size: 7.5pt; }
.folha .ia-val { font-size: 9pt; min-height: 3.4mm; }

.folha .cab-inst  { margin-bottom: 2.5mm; }
.folha .tit-prova { font-size: 11pt; margin-top: 1.2mm; }
.folha .faixa-inst { padding: 1.6mm 2mm; }
.folha .logo-inst  { width: 12mm; height: 12mm; }
.folha .faixa-nome { font-size: 10.5pt; }
.folha .faixa-sub  { font-size: 6.2pt; }
.folha .caixa-nota { width: 22mm; }
.folha .cn-linha   { height: 4.2mm; }

/* No CARTAO as orientacoes podem respirar: ali sobra espaco, e e onde o aluno
   precisa mesmo ler antes de marcar. */
.folha.cartao .instr { font-size: 8pt; line-height: 1.35; }

/* ==================================================== o cartao vira BLOCO
   Antes era uma folha separada, sempre. Agora ele flui logo depois das
   questoes e so pula de pagina quando nao cabe — `break-inside: avoid` faz
   exatamente isso. Numa turma de 40, sao 40 folhas economizadas.

   E as marcas de canto mudaram de dono. Antes cercavam a FOLHA; se o cartao
   caisse na pagina 2, as marcas ficavam na pagina 1 e a foto perdia a
   referencia para desentortar. Agora cercam o PROPRIO cartao — o que tambem
   melhora a leitura, porque a camera enquadra so o quadro do gabarito em vez
   da folha inteira. E o que o Gradepen faz. */

.folha .cartao-bloco {
  position: relative;
  margin-top: 8mm;
  padding: 11mm 10mm 9mm;
  border: .4mm dashed #666;          /* linha de corte: da para destacar */
  break-inside: avoid; page-break-inside: avoid;
}

/* Aviso de destaque, impresso na propria linha de corte. */
.folha .cartao-bloco::before {
  content: "CARTÃO-RESPOSTA — destaque nesta linha e entregue ao professor";
  position: absolute; top: -2.2mm; left: 8mm;
  background: #fff; padding: 0 2mm;
  font-size: 6.5pt; letter-spacing: .1em;
}

/* As marcas agora sao do BLOCO, nao da folha. */
/* ======================================================== AREA DE LEITURA
 *
 * O quadro que a CAMERA precisa enquadrar. Dentro dele existem apenas o QR e a
 * grade de bolhas — nada de cabecalho, nome ou orientacoes.
 *
 * POR QUE ESTREITO
 *
 * O professor fotografa com o celular EM PE. Uma area de 186mm de largura vira
 * uma tira horizontal no meio de um quadro em retrato: a maior parte dos
 * pixels vai para a mesa e sobra pouca resolucao justamente para a bolha.
 *
 * Com uma coluna de questoes a area fica em torno de 62 x 108mm — proporcao
 * 0,57, quase a de um celular em pe. Aponta e esta enquadrado.
 *
 * O nome do aluno e as orientacoes continuam no cartao destacavel, logo acima.
 * Quem confere com o olho continua vendo de quem e a folha; o que mudou e que
 * esse texto saiu de dentro do quadro que a camera precisa pegar.
 * ======================================================================== */
/* A LARGURA NAO ESTA AQUI — de proposito.
   Ela e aplicada em linha por vistas/imprimir.js, a partir de AREA_MM em
   motor/leitor-optico.js. Um numero so, no arquivo que o usa para medir. */
.folha .area-leitura {
  position: relative;
  margin: 4mm 0 0;
  padding: 9mm 7mm 8mm;
  border: .3mm solid #000;
  break-inside: avoid; page-break-inside: avoid;
}

/* QR e token no topo da area, dentro das marcas: assim a foto que serve para
   LER as bolhas e a mesma que identifica o aluno. Uma foto, nao duas. */
.folha .area-leitura .qr-token {
  display: flex; align-items: center; gap: 3mm;
  margin-bottom: 3mm;
}
.folha .area-leitura .qr { width: 20mm; height: 20mm; flex: none; }
.folha .area-leitura .qr img,
.folha .area-leitura .qr canvas { width: 100% !important; height: 100% !important; }
.folha .area-leitura .tok {
  font-family: "Courier New", monospace; font-size: 7.5pt; letter-spacing: .04em;
}

.folha .area-leitura .grade-bolhas { margin: 0; gap: 6mm; }
.folha .area-leitura .coluna { flex: none; }

/* Mesmas marcas do cartao destacavel — e a MESMA razao para serem borda.
   A distancia entre o centro da marca superior esquerda e o da superior
   direita e a unica medida que o leitor optico precisa saber de cor:

     bloco = 186mm de largura (210 da folha - 12 de margem de cada lado)
     centro da tl = 3mm de recuo + 4mm de meia-marca = 7mm
     centro da tr = 186 - 3 - 4                      = 179mm
     ------------------------------------------------------------------
     entre os dois centros                            = 172mm  (LARGURA_MM)

   Mudar qualquer um desses numeros exige mudar LARGURA_MM em
   motor/leitor-optico.js. Estao amarrados. */
.folha .area-leitura .marca {
  position: absolute; display: block;
  width: 0; height: 0;
  border-style: solid; border-color: #000;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.folha .area-leitura .marca.tl { top: 2mm; left: 2mm;    border-width: 3mm; }
.folha .area-leitura .marca.tr { top: 2mm; right: 2mm;   border-width: 3mm; }
.folha .area-leitura .marca.bl { bottom: 2mm; left: 2mm;  border-width: 3mm; }
.folha .area-leitura .marca.br { bottom: 2mm; right: 2mm; border-width: 1.7mm; }

/* Dentro do bloco o espacamento e mais justo que numa folha inteira. */
.folha .cartao-bloco .topo-folha  { padding: 0 0 0 2mm; }
.folha .cartao-bloco .instr       { margin: 3mm 0 0; }
.folha .cartao-bloco .grade-bolhas{ margin: 4mm 0 0; }
.folha .cartao-bloco .rodape      { margin-top: 4mm; padding-top: 2mm; }

/* "So os cartoes": esconde a prova e deixa o bloco, util quando a prova ja foi
   impressa e faltou cartao para um aluno. */
body.so-cartao .folha .cab-inst,
body.so-cartao .folha .corpo-prova,
body.so-cartao .folha > .rodape { display: none !important; }
body.so-cartao .folha .cartao-bloco { margin-top: 0; }