/* Visual do sistema. Grená institucional, tipografia sóbria, alvos grandes
   o bastante para o dedo no tablet — regra 8 do briefing. */

:root {
  --grena: #7B1F2B;
  --grena-forte: #63161F;
  --grena-tenue: #F5E9EA;

  --ok: #2C6A4E;
  --ok-tenue: #E4F0E9;
  --erro: #A6303F;
  --erro-tenue: #F8E6E8;
  --aviso: #8A6516;
  --aviso-tenue: #FBF0DA;

  --chrome: #F2EEED;
  --superficie: #FFFFFF;
  --borda: #DFD6D4;
  --borda-suave: #EDE6E5;
  --tinta: #221B1D;
  --tinta-media: #665A5C;
  --tinta-fraca: #938688;

  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --serifa: Georgia, "Times New Roman", serif;
  --raio: 7px;
  --toque: 46px;   /* altura mínima de qualquer coisa clicável no tablet */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chrome);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- barra superior ---------- */
.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.marca {
  font-family: var(--serifa);
  font-size: 18px;
  color: var(--grena);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
.marca small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 600;
}
.quem {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--tinta-media);
}
.quem .papel {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grena);
  background: var(--grena-tenue);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 600;
}

.palco { max-width: 980px; margin: 0 auto; padding: 30px 22px 80px; }

h1 { font-size: 25px; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 30px 0 12px; font-weight: 600; }
.sub { color: var(--tinta-media); margin: 0 0 26px; font-size: 15px; }

/* ---------- cartões ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.cartao h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cartao .ajuda { color: var(--tinta-media); font-size: 14px; margin: 0 0 16px; }

/* ---------- formulários ---------- */
.entrada {
  max-width: 430px;
  margin: 44px auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 34px 32px 30px;
}
.entrada .marca { text-align: center; display: block; margin-bottom: 24px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--tinta-media);
}
/* Todo campo em que se digita ou se escolhe algo entra nesta lista.
   Faltavam date, number, time e file — e a falta nao aparecia como "campo
   feio": a classe .dica sobe 10px para encostar no campo de cima, contando
   com os 16px de margem que so os campos desta lista tem. Sem eles, a dica
   subia POR CIMA do campo de data. O sintoma ficava longe da causa. */
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=number], input[type=file],
select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;          /* 16px evita o zoom automático do Safari no iPad */
  min-height: var(--toque);
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  margin-bottom: 16px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--grena);
  outline-offset: 0;
  border-color: var(--grena);
}
.dica {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin: -10px 0 16px;
}

/* ---------- botões ---------- */
.botao {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: var(--toque);
  padding: 11px 22px;
  border-radius: var(--raio);
  border: 1px solid var(--grena);
  background: var(--grena);
  color: #FFF;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.botao:hover { background: var(--grena-forte); border-color: var(--grena-forte); }
.botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.botao.larga { width: 100%; }
.botao.discreta { background: transparent; color: var(--grena); }
.botao.discreta:hover { background: var(--grena-tenue); }
.botao.simples {
  background: transparent;
  color: var(--tinta-media);
  border-color: var(--borda);
}
.botao.simples:hover { border-color: var(--tinta-media); color: var(--tinta); }

.acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* O botao de guardar a questao, grudado no pe da tela enquanto o formulario
   esta a vista. Achado pelo professor: no fim de um formulario comprido,
   dentro de um quadro e no meio de outros botoes, ninguem o encontrava. */
.faixa-de-guardar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin: 18px 0 0; padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.25);
}
.faixa-de-guardar .dica { margin: 0; }
.faixa-de-guardar .acoes { margin: 0; margin-left: auto; }

/* ---------- recados ---------- */
.recado {
  border-radius: var(--raio);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  border-left: 3px solid;
}
.recado.erro { background: var(--erro-tenue); border-color: var(--erro); color: #6E1E28; }
.recado.certo { background: var(--ok-tenue); border-color: var(--ok); color: #1E4A36; }
.recado.aviso { background: var(--aviso-tenue); border-color: var(--aviso); color: #5E4610; }

/* ---------- rodapé ---------- */
.rodape {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px 40px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

@media (max-width: 560px) {
  .palco { padding: 22px 16px 60px; }
  .entrada { margin: 22px auto; padding: 26px 22px; }
  .quem { width: 100%; margin-left: 0; }
}

/* ---------- menu da barra ---------- */
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 14.5px;
  padding: 8px 14px;
  border-radius: 100px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.menu a:hover { background: var(--grena-tenue); color: var(--grena); }
.menu a.atual { background: var(--grena); color: #FFF; font-weight: 500; }

/* ---------- listas em tabela ---------- */
.rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--superficie); }
/* SEM "overflow: hidden": ele existia so para arredondar os cantos, mas faz
   a tabela virar um conteiner de rolagem — e uma celula grudada gruda no
   conteiner mais proximo, que passaria a ser a propria tabela. Ou seja,
   nao grudaria em nada. A curva volta pelas celulas dos cantos. */
table.lista { border: 1px solid var(--borda); border-radius: var(--raio); }
table.lista thead th:first-child { border-top-left-radius: var(--raio); }
table.lista thead th:last-child { border-top-right-radius: var(--raio); }
table.lista tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--raio);
}
table.lista tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--raio);
}
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; }
th {
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tinta-fraca); font-weight: 600; border-bottom-color: var(--borda);
  background: var(--chrome);
}
tr:last-child td { border-bottom: none; }
tr.inativo td { color: var(--tinta-fraca); }
tr.inativo td b { font-weight: 500; }
/* A coluna de acoes pode quebrar ENTRE os botoes, mas nunca dentro de um.
   Com "nowrap" na celula inteira ela nao encolhia: os botoes exigiam a
   linha toda, a tabela transbordava e o ultimo — Duplicar — ficava cortado
   fora da borda, onde o professor nao tinha como ve-lo. */
.acoes-linha { text-align: right; white-space: normal; }
.acoes-linha .botao { white-space: nowrap; }

/* As acoes de quem esta fazendo a prova, no acompanhamento ao vivo: um
   botao "Agir..." que abre tres blocos rotulados. Espremidas na coluna,
   cortavam o texto das caixas e misturavam o motivo de uma acao com a
   outra. */
.acoes-da-folha > summary { list-style: none; cursor: pointer; }
.acoes-da-folha > summary::-webkit-details-marker { display: none; }
.acoes-da-folha[open] > summary { margin-bottom: 8px; }
.painel-de-acoes {
  display: grid; gap: 12px; min-width: 18rem; max-width: 24rem;
  padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); text-align: left;
}
.painel-de-acoes form { display: grid; gap: 6px; }
.painel-de-acoes .motivo, .painel-de-acoes .botao { width: 100%; margin: 0; }
.rotulo-da-acao { margin: 0; font-size: 13.5px; color: var(--tinta-media); }

/* E ela GRUDA NA BORDA DIREITA. A lista de questoes tem dez colunas para a
   coordenacao: abaixo de 820 px vira fichas, acima de uns 1100 px cabe
   inteira, e no meio transborda — levando para fora justamente a ultima
   coluna, a dos botoes. Da para rolar de lado, mas nada na tela diz isso.
   Grudada, ela fica sempre a vista e o resto rola por baixo. */
.lista td.acoes-linha, .lista th:last-child {
  position: sticky; right: 0; z-index: 1;
  background: var(--superficie);
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.18);
}
.lista th:last-child { background: var(--chrome); }

@media (max-width: 820px) {
  /* Em ficha nao ha borda de onde grudar, e cada campo e uma linha. */
  .lista td.acoes-linha, .lista th:last-child {
    position: static; box-shadow: none;
  }
}

/* ---------- selos ---------- */
.selo {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.selo.ativo { background: var(--ok-tenue); color: var(--ok); }
.selo.aguardando { background: var(--aviso-tenue); color: var(--aviso); }
.selo.inativo { background: var(--chrome); color: var(--tinta-fraca); border: 1px solid var(--borda); }
.marca-eu {
  font-size: 11px; color: var(--grena); background: var(--grena-tenue);
  padding: 2px 8px; border-radius: 100px; font-weight: 600;
}

/* ---------- senha provisória em destaque ---------- */
.senha {
  font-family: Consolas, "Courier New", monospace;
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  background: var(--superficie); color: var(--grena);
  padding: 3px 10px; border-radius: 5px; border: 1px solid var(--borda);
  white-space: nowrap; user-select: all;
}

/* ---------- barra de ações da lista ---------- */
.linha-acoes { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.busca { display: flex; gap: 8px; align-items: center; margin: 0; flex: 1; min-width: 260px; }
.busca input { margin: 0; }

@media (max-width: 700px) {
  .so-largo { display: none; }
  .linha-acoes { flex-direction: column; align-items: stretch; }
  .busca { min-width: 0; }
}

/* ---------- dois campos lado a lado ---------- */
.lado-a-lado { display: flex; gap: 16px; flex-wrap: wrap; }
.lado-a-lado > div { flex: 1; min-width: 190px; }

/* ---------- lista de tópicos do conteúdo ---------- */
ul.topicos { margin: 4px 0 0; padding-left: 20px; }
ul.topicos li { margin-bottom: 6px; color: var(--tinta-media); font-size: 14.5px; }

/* ---------- alternativas ---------- */
.alternativa { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.alternativa textarea { margin: 0; }
.marcador {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0; padding-top: 8px; min-width: 40px; cursor: pointer;
}
.marcador span { font-weight: 700; font-size: 15px; color: var(--tinta-media); }
.marcador input { width: 22px; height: 22px; margin: 0; accent-color: var(--grena); }
.marcador input:checked + span { color: var(--grena); }

/* ---------- escolhas em caixa ---------- */
.escolhas { display: flex; flex-direction: column; gap: 2px; }
.escolha {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; font-size: 14.5px; color: var(--tinta);
  padding: 7px 8px; border-radius: 5px; cursor: pointer; margin: 0;
  min-height: 38px;
}
.escolha:hover { background: var(--grena-tenue); }
.escolha input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--grena); }
.unidade-escolha { margin-bottom: 18px; }
.unidade-escolha h4 {
  font-size: 13px; margin: 0 0 6px; color: var(--grena);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---------- figuras ---------- */
.figura {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--borda-suave);
  border-radius: var(--raio); margin-bottom: 12px;
}
.figura img { max-width: 220px; max-height: 170px; border-radius: 5px; }
.figura-lado { flex: 1; }
.figura-lado p { margin: 0 0 10px; font-size: 14px; color: var(--tinta-media); }
input[type=file] {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px dashed var(--borda); border-radius: var(--raio);
  background: var(--superficie); margin-bottom: 16px;
}

/* ---------- colar a questão inteira ---------- */
details.colar summary {
  font-size: 16px; font-weight: 600; cursor: pointer;
  color: var(--grena); list-style: none; padding: 2px 0;
}
details.colar summary::-webkit-details-marker { display: none; }
details.colar summary::before { content: "▸ "; }
details.colar[open] summary::before { content: "▾ "; }
details.colar[open] summary { margin-bottom: 10px; }

/* ---------- colar figura ---------- */
.area-colar {
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--tinta-media);
  background: var(--chrome);
  cursor: text;
}
.area-colar:focus { outline: 2px solid var(--grena); border-color: var(--grena); }
.area-colar.tem-figura { border-style: solid; border-color: var(--ok); background: var(--ok-tenue); }
.area-colar img { max-width: 200px; max-height: 150px; margin-top: 12px; border-radius: 5px; display: block; }

.area-colar .instrucao { display: block; }
.area-colar.recebendo { border-color: var(--grena); background: var(--grena-tenue); }

/* ---------- histórico de uso ---------- */
.inedita { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.inedita p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; color: var(--tinta-media); }
.selo-grande {
  display: inline-block; font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 7px 15px; border-radius: 100px; flex: none;
}
.selo-grande.nova { background: var(--grena-tenue); color: var(--grena); }
.selo-grande.usada { background: var(--ok-tenue); color: var(--ok); }
.selo.inedita { background: var(--grena-tenue); color: var(--grena); }
.selo.usada { background: var(--ok-tenue); color: var(--ok); }
.historico table { font-size: 14px; }

/* ---------- tela de erro ---------- */
.detalhe-erro {
  font-family: Consolas, "Courier New", monospace; font-size: 13px;
  background: var(--chrome); border: 1px solid var(--borda);
  border-radius: 5px; padding: 12px 14px; margin: 0 0 16px;
  overflow-x: auto; color: var(--tinta-media);
}
code {
  font-family: Consolas, "Courier New", monospace; font-size: 0.9em;
  background: var(--grena-tenue); color: var(--grena);
  padding: 1px 6px; border-radius: 4px;
}

/* ---------- filtros de busca ---------- */
.filtros { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.filtro { flex: 1; min-width: 150px; }
.filtro.largo { flex: 2.5; min-width: 240px; }
.filtro label { font-size: 12px; }
.filtro input, .filtro select { margin-bottom: 12px; }
#busca .acoes { margin-top: 4px; }

/* ---------- números do resumo ---------- */
.numeros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.numero-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 12px 18px; min-width: 104px; text-align: center;
}
.numero-caixa .n { display: block; font-size: 23px; font-weight: 600; color: var(--grena); }
.numero-caixa .t {
  display: block; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600;
}
.acoes-linha form { margin: 0 0 0 6px; }

/* ---------- conferência automática ---------- */
.veredito { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 6px; flex-wrap: wrap; }
.veredito p { margin: 0; flex: 1; min-width: 250px; font-size: 14px; color: var(--tinta-media); }
.selo-grande.atencao { background: var(--aviso-tenue); color: var(--aviso); }
.selo-grande.grave { background: var(--erro-tenue); color: var(--erro); }
.rotulo-achado {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; margin: 20px 0 6px;
}
.rotulo-achado.defeito { color: var(--erro); }
.rotulo-achado.atencao { color: var(--aviso); }
ul.achados { margin: 0; padding-left: 20px; }
ul.achados li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.5; }
ul.achados.medidas li { color: var(--tinta-media); font-size: 13.5px; }
.ver-medidas { cursor: pointer; font-size: 13.5px; color: var(--grena); }
.selo.grave { background: var(--erro-tenue); color: var(--erro); }

/* ---------- parecer da IA ---------- */
.gabarito-conferido {
  background: var(--ok-tenue); border-left: 3px solid var(--ok);
  border-radius: var(--raio); padding: 14px 16px; margin: 18px 0;
}
.gabarito-conferido.diverge { background: var(--erro-tenue); border-color: var(--erro); }
.gabarito-conferido h4 {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ok);
}
.gabarito-conferido.diverge h4 { color: var(--erro); }
.gabarito-conferido p { margin: 0 0 8px; font-size: 14.5px; }
.gabarito-conferido p:last-child { margin-bottom: 0; }
.gabarito-conferido .raciocinio { color: var(--tinta-media); font-size: 14px; }
.sugestao {
  border: 1px solid var(--borda-suave); border-radius: var(--raio);
  padding: 12px 14px; margin-bottom: 10px;
}
.sugestao p { margin: 0 0 7px; font-size: 14.5px; }
.sugestao p:last-child { margin-bottom: 0; }
.analise-detalhada p { font-size: 14px; color: var(--tinta-media); margin: 0 0 10px; }

/* ---------- edição do conteúdo programático ---------- */
.linha-editar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.linha-editar input { margin: 0; flex: 1; min-width: 220px; font-size: 15px; min-height: 40px; }
.linha-editar .botao { min-height: 40px; padding: 8px 14px; font-size: 14px; }
ul.topicos.editaveis { list-style: none; padding-left: 0; margin: 12px 0 0; }
ul.topicos.editaveis li { margin-bottom: 8px; color: var(--tinta); }

/* Caixa de marcar com o texto ao lado, para confirmacoes que nao podem ser
   dadas por engano. O alvo do toque e a frase inteira, e nao so o quadradinho
   — no tablet, acertar um quadradinho de 13px e questao de sorte. */
label.marcavel {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-weight: 400; line-height: 1.5; padding: 10px 12px; margin: 0;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie);
  min-height: 44px;
}
label.marcavel input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--grena);
}
label.marcavel:hover { border-color: var(--grena); }

/* Faixa que acompanha o visitante em todas as telas. Nao e um aviso de erro:
   e um lembrete de contexto, para que ninguem tente alterar algo e conclua que
   o sistema esta quebrado. */
.faixa-visitante {
  background: var(--grena-tenue); color: var(--grena-forte);
  border-bottom: 1px solid var(--grena); padding: 10px 20px;
  font-size: 14px; text-align: center;
}
/* Campos travados para o visitante: cinzentos, mas ainda legiveis. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--chrome); color: var(--tinta-media); cursor: not-allowed;
}
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- tabelas que viram fichas no tablet ----------
   Uma tabela de sete colunas nao cabe num iPad em pe. A saida obvia — rolar
   de lado — e a pior de todas com o dedo: some metade da informacao e a pessoa
   perde a referencia da linha em que estava.

   Abaixo de 820px cada LINHA vira uma ficha, e cada celula ganha o nome da
   coluna ao lado, tirado do atributo data-rotulo. Nada e escondido: a mesma
   informacao, empilhada.

   O <table> continua sendo <table> no HTML de proposito. Um leitor de tela
   entende uma tabela; nao entenderia uma pilha de <div>. */
@media (max-width: 820px) {
  table.empilha, table.empilha tbody, table.empilha tr, table.empilha td {
    display: block; width: 100%;
  }
  table.empilha thead { display: none; }
  table.empilha { border: none; background: none; }
  table.empilha tr {
    border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--superficie); margin-bottom: 12px; padding: 4px 0;
  }
  table.empilha td {
    border-bottom: 1px solid var(--borda-suave);
    padding: 10px 14px; display: flex; gap: 12px; align-items: center;
    justify-content: space-between; min-height: 44px;
  }
  table.empilha tr td:last-child { border-bottom: none; }
  table.empilha td::before {
    content: attr(data-rotulo);
    font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--tinta-fraca); font-weight: 600; flex: none;
  }
  /* A celula sem rotulo — a do enunciado — ocupa a ficha inteira. */
  table.empilha td[data-rotulo=""]::before { content: none; }
  table.empilha td[data-rotulo=""] { display: block; }
  /* Celula vazia nao vira linha em branco com um rotulo solto. */
  table.empilha td:empty { display: none; }
  .rolagem { overflow-x: visible; }
}

/* Alvos de toque nas tabelas: no tablet, o dedo cobre uns 9 mm. */
table .botao.simples { min-height: 40px; padding: 8px 12px; }
table input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--grena);
}
@media (max-width: 820px) {
  table .botao.simples { min-height: 44px; }
  table input[type="checkbox"] { width: 26px; height: 26px; }
}

/* O campo de arquivo desenha um botao dentro de si; o espacamento interno dos
   demais campos o deixaria alto demais. */
input[type=file] { padding: 8px 10px; line-height: 1.6; }

/* Quatro campos de data numa linha so ficam estreitos demais para caber
   "dd/mm/aaaa" mais o icone do calendario. Dois por linha em telas medias,
   um por linha no tablet em pe. */
.lado-a-lado.quatro > div { min-width: 210px; }
@media (max-width: 900px) {
  .lado-a-lado.quatro > div { min-width: 240px; }
}

/* O codigo da disciplina, ao lado do nome. E por ele que a matriz se le e se
   ordena, entao ele precisa ser encontravel de relance sem roubar a atencao
   do nome. */
.codigo {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; color: var(--tinta-fraca);
  background: var(--chrome); padding: 2px 6px; border-radius: 4px;
  white-space: nowrap;
}

/* O corpo do e-mail, mostrado como ele sai: texto simples, sem reformatacao.
   Quebra a linha em vez de rolar de lado — a mensagem e para ser LIDA aqui,
   antes de sair. */
.corpo-do-aviso {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.55; color: var(--tinta);
  background: var(--chrome); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px; margin: 10px 0 0;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- o manual dentro do sistema ----------
   Texto longo, para ser lido de cima a baixo. Linha mais curta que a largura
   da tela: passando de uns 75 caracteres, o olho se perde ao voltar para o
   comeco da linha seguinte. */
.texto-do-manual, .passo-do-manual, .dica.manual {
  max-width: 62ch; line-height: 1.65; color: var(--tinta);
  font-size: 15.5px; margin: 0 0 12px;
}
.passo-do-manual {
  border-left: 3px solid var(--grena-tenue); padding-left: 14px;
  margin-bottom: 8px;
}
.dica.manual { color: var(--tinta-media); font-size: 14px; font-style: italic; }
.secao-do-manual {
  margin: 34px 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--grena-tenue); color: var(--grena);
}
.subsecao-do-manual { margin: 22px 0 10px; color: var(--tinta); }
.pergunta-do-manual {
  margin: 20px 0 8px; color: var(--grena-forte); font-size: 15.5px;
}
.palco .recado.aviso { max-width: 62ch; }

/* O codigo da sala, para ser lido em voz alta numa sala com trinta pessoas.
   Grande, espacado, e numa fonte em que o 5 nao vira S. */
/* O ENDERECO do painel de notas, no fim da prova. O estilo do codigo da
   sala — seis letras grandes e espacadas — fazia o endereco sair da caixa,
   cortado, no tablet. Aqui: letra menor, sem espacamento, e quebra onde
   precisar. */
.endereco-grande {
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(16px, 3.4vw, 22px); font-weight: 700;
  color: var(--grena); background: var(--grena-tenue);
  border: 2px solid var(--grena); border-radius: var(--raio);
  padding: 14px 12px; margin: 6px 0 14px; text-align: center;
  overflow-wrap: anywhere; user-select: all;
}
.codigo-grande {
  font-family: Consolas, "Courier New", monospace;
  font-size: 40px; font-weight: 700; letter-spacing: 0.18em;

  color: var(--grena); background: var(--grena-tenue);
  border: 2px solid var(--grena); border-radius: var(--raio);
  padding: 14px 10px; margin: 6px 0 14px; text-align: center;
  user-select: all;
}
@media (max-width: 560px) {
  .codigo-grande { font-size: 32px; letter-spacing: 0.12em; }
}

/* =======================================================================
   A PROVA DO ESTUDANTE — Etapa 4, passo 3

   Outra casa dentro da mesma casa. Aqui não há menu, não há atalho e não
   há nada em que clicar por engano: quem está nesta tela está fazendo uma
   prova, com o relógio correndo, muitas vezes num tablet emprestado e com
   a mão trêmula. Tudo é maior, mais espaçado e mais óbvio do que nas telas
   dos docentes.
   ======================================================================= */

.tela-do-aluno { background: var(--chrome); }

.barra-do-aluno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: var(--grena); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.marca-do-aluno { font-weight: 600; font-size: 17px; line-height: 1.2; }
.marca-do-aluno small {
  display: block; font-weight: 400; font-size: 12px; opacity: .85;
}

/* ---------- o relógio ----------
   Grande, sempre visível, e sem poder nenhum: quem encerra a prova é o
   servidor. Este número existe para a pessoa se organizar. */
.relogio {
  display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.relogio span { font-size: 26px; font-weight: 700; }
.relogio small { font-size: 11px; opacity: .85; }
.relogio.apertado span { color: #FFD9DE; }

/* ---------- o tamanho da letra ----------
   A− e A+ na barra, ao lado do relógio. O ajuste amplia a página da prova
   inteira (zoom), e não só o texto: letra maior com botão pequeno não
   ajuda ninguém num tablet. Fora da tela da prova, --letra não existe e
   tudo fica em 1. */
.tamanho-da-letra { display: flex; gap: 6px; margin-left: auto; }
.tamanho-da-letra button {
  min-width: 44px; min-height: 40px; padding: 4px 8px;
  font: inherit; font-weight: 700; font-size: 17px; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px; cursor: pointer;
}
.tamanho-da-letra button:disabled { opacity: .4; cursor: default; }
.palco-do-aluno,
#questao-aberta-conteudo { zoom: var(--letra, 1); }
/* A faixa do comando cresce menos: com o teclado aberto ela divide meia
   tela com o campo de resposta, e quem escreve precisa ver o que escreve. */
.comando-fixo-texto { zoom: min(var(--letra, 1), 1.15); }

.palco-do-aluno { max-width: 780px; margin: 0 auto; padding: 20px 16px 60px; }
.rodape-do-aluno {
  text-align: center; padding: 20px; color: var(--tinta-fraca); font-size: 13px;
}

.cartao-do-aluno {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 22px; margin-bottom: 18px;
}
.cartao-do-aluno h1 { margin: 0 0 6px; font-size: 25px; }
.cartao-do-aluno h1 small { color: var(--tinta-fraca); font-weight: 400; }

.campo-grande {
  width: 100%; min-height: 54px; font-size: 21px; padding: 10px 14px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta); margin-bottom: 6px;
}
#codigo { text-transform: uppercase; letter-spacing: 5px; font-weight: 700; }

.botao.grande {
  min-height: 54px; font-size: 18px; width: 100%; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.botao.grande[disabled] { opacity: .35; cursor: default; }

.regras-da-prova { margin: 0 0 18px; padding-left: 22px; }
.regras-da-prova li { margin-bottom: 9px; }

/* ---------- os números das questões ----------
   O mapa da prova. Quem já respondeu fica cheio; quem falta fica vazio —
   e é assim que a pessoa descobre, sem contar no dedo, o que deixou para
   trás. Cada número é um envio de formulário de verdade: grava a resposta
   atual e leva para a questão pedida, com ou sem JavaScript. */
.numeros {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
  padding-top: 7px;           /* espaco para o selo do ✓ nao ser cortado */
}
.numero {
  min-width: 44px; min-height: 44px; padding: 0 6px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta-media);
  font-size: 16px; font-weight: 600; cursor: pointer;
  position: relative;
}
/* O ✓ DA QUESTAO RESPONDIDA E GRAVADA. Sugestao do professor: marcar cada
   questao feita com um sinal de checagem. So aparece depois de o servidor
   confirmar — a pagina so poe "feita" quando a gravacao volta certa. */
.numero.feita::after {
  content: "✓"; position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok, #2c6a4e); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}
.numero.feita {
  background: var(--grena-tenue); border-color: var(--grena);
  color: var(--grena);
}
.numero.atual {
  background: var(--grena); border-color: var(--grena); color: #fff;
}
.numero:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.enunciado { font-size: 18px; line-height: 1.65; margin-bottom: 14px; }
.enunciado p { margin: 0 0 12px; }
.comando { font-weight: 600; margin: 14px 0; }
.figura { margin: 14px 0; text-align: center; }
.figura img {
  max-width: 100%; height: auto; border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
}
.figura figcaption {
  font-size: 13px; color: var(--tinta-media); margin-top: 6px;
}

/* ---------- as alternativas ----------
   A caixa inteira é clicável, e não só a bolinha: no tablet, acertar uma
   bolinha de doze pixels com o dedo é um exercício de pontaria que não tem
   nada a ver com o que a prova quer medir. */
.alternativas { display: flex; flex-direction: column; gap: 10px; }
.alternativa {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; min-height: var(--toque);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); cursor: pointer;
}
.alternativa:hover { border-color: var(--grena); }
.alternativa.marcada {
  border-color: var(--grena); background: var(--grena-tenue);
  box-shadow: inset 0 0 0 1px var(--grena);
}
.alternativa input { margin-top: 5px; width: 20px; height: 20px; flex: none; }
.alternativa .letra {
  font-weight: 700; color: var(--grena); flex: none; min-width: 20px;
}
.alternativa .texto { flex: 1; }

.linha-de-gravacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; flex-wrap: wrap;
}
.linha-de-gravacao span { font-size: 14px; }
.gravado { color: var(--ok); }
.gravando { color: var(--tinta-media); }
.sem-conexao { color: var(--aviso); font-weight: 600; }

.andar { display: flex; gap: 12px; margin-bottom: 18px; }
.andar .botao { margin-top: 0; }

/* ---------- o fim ---------- */
.quadro-do-fim {
  display: flex; flex-wrap: wrap; gap: 26px; margin: 18px 0;
}
.quadro-do-fim > div { min-width: 120px; }
.numero-grande {
  display: block; font-size: 38px; font-weight: 700; color: var(--grena);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.quadro-do-fim .rotulo { font-size: 13px; color: var(--tinta-media); }
.cartao-do-aluno.acertou { border-left: 4px solid var(--ok); }
.cartao-do-aluno.errou { border-left: 4px solid var(--erro); }
.justificativa {
  background: var(--grena-tenue); border-radius: var(--raio);
  padding: 14px; margin-top: 12px;
}

/* No telefone, a prova continua inteira: só fica mais estreita. */
@media (max-width: 520px) {
  .palco-do-aluno { padding: 14px 10px 50px; }
  .cartao-do-aluno { padding: 16px; }
  .enunciado { font-size: 17px; }
  .andar { flex-direction: column; }
  .numero { min-width: 40px; min-height: 40px; }
}

/* ---------- a faixa da tela cheia ----------
   Aparece quando a prova sai da tela cheia, e volta a aparecer, mais firme,
   quando a pessoa retorna de outra aba. Não acusa ninguém de nada: diz o que
   foi registrado, e o professor decide o resto. */
.fora-da-tela-cheia {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--aviso-tenue); border: 1px solid var(--aviso);
  border-radius: var(--raio); padding: 14px 16px; margin-bottom: 16px;
  color: var(--tinta);
}
.fora-da-tela-cheia .botao { margin: 0; }
.fora-da-tela-cheia.acusando {
  background: var(--erro-tenue); border-color: var(--erro);
}

/* O enunciado e as alternativas não se selecionam com o dedo: fecha o
   caminho de um toque para levar a questão a outro lugar. Não impede quem
   digitar de novo ou fotografar — nada numa página impede isso. */
.tela-do-aluno .enunciado,
.tela-do-aluno .comando,
.tela-do-aluno .alternativas {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* O alerta da saída, quando a pessoa volta para a prova. Ocupa a linha
   inteira e vem antes de tudo: é um aviso, não uma nota de rodapé. */
.fora-da-tela-cheia .recado-da-saida {
  display: block; width: 100%; font-size: 16px; line-height: 1.5;
  margin-bottom: 4px;
}

/* Remover alguém da prova zera a nota. O botão não pode parecer com os
   outros: quem o aperta precisa ter percebido o que está fazendo. */
.botao.perigo {
  background: var(--erro); border-color: var(--erro); color: #fff;
}
.botao.perigo:hover { background: #8C2735; border-color: #8C2735; }
.motivo {
  width: 100%; margin-bottom: 6px; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--borda); border-radius: var(--raio);
}

/* =======================================================================
   O RELATÓRIO DA APLICAÇÃO — Etapa 4, passo 7

   Os gráficos são desenhados com as próprias caixas da página: sem
   biblioteca de fora, sem imagem gerada. Um gráfico que depende de
   biblioteca externa é um gráfico que some no dia em que a rede da
   faculdade estiver bloqueando o endereço dela.
   ======================================================================= */

.histograma {
  display: flex; align-items: flex-end; gap: 12px;
  height: 160px; margin: 14px 0 6px;
}
.histograma .coluna {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%;
}
.histograma .quantos { font-size: 13px; color: var(--tinta-media); }
.histograma .barra {
  width: 100%; min-height: 3px; background: var(--grena);
  border-radius: var(--raio) var(--raio) 0 0;
}
.histograma .rotulo-da-faixa {
  font-size: 12px; color: var(--tinta-media); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.mapa-de-calor {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.cartao-da-questao {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px;
  background: var(--superficie);
}
.cartao-da-questao.critica { border-left: 4px solid var(--erro); }
.topo-da-questao {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.resumo-do-enunciado {
  font-size: 14px; color: var(--tinta-media); margin: 0 0 10px;
}

/* A barra de cada alternativa. A certa vem em grená; as demais, cinza —
   assim o distrator que ninguém escolheu salta aos olhos. */
.linha-da-alternativa {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.linha-da-alternativa .letra {
  width: 18px; font-weight: 700; color: var(--tinta-fraca); flex: none;
}
.linha-da-alternativa .letra.certa { color: var(--grena); }
.linha-da-alternativa .trilho {
  flex: 1; height: 14px; background: var(--borda-suave);
  border-radius: 7px; overflow: hidden;
}
.linha-da-alternativa .preenchido {
  height: 100%; background: var(--tinta-fraca); border-radius: 7px;
}
.linha-da-alternativa .preenchido.certa { background: var(--grena); }
.linha-da-alternativa .quantos-marcaram {
  width: 26px; text-align: right; font-size: 13px;
  color: var(--tinta-media); font-variant-numeric: tabular-nums;
}

.ficha-da-questao {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  margin: 12px 0 8px; font-size: 13px;
}
.ficha-da-questao dt { color: var(--tinta-fraca); }
.ficha-da-questao dd { margin: 0; }

/* A busca na lista do acompanhamento. */
.campo-de-busca {
  width: 100%; max-width: 360px; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  margin-bottom: 12px; font-size: 15px;
}

/* A linha destacada nos registros da sala.
   Uma faixa na lateral, e nao o fundo inteiro pintado: o destaque precisa
   encontrar a linha de relance numa lista de duzentas, sem transformar a
   tabela num semaforo nem sugerir culpa de quem quer que seja. */
tr.atencao td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }
tr.atencao { background: var(--aviso-tenue); }

/* ------------------------------------------------------------------ */
/* A resposta escrita, no tablet.                                      */
/*                                                                     */
/* O campo e grande de proposito. Um campo pequeno faz a pessoa rolar  */
/* dentro dele para reler o que escreveu, e quem nao consegue reler    */
/* nao revisa — perde ponto por um erro que enxergaria.                */
.subitem { margin: 18px 0 24px; }
.rotulo-do-subitem {
  margin: 0 0 4px; font-size: 17px; display: flex; align-items: baseline;
  gap: 8px;
}
.rotulo-do-subitem small { font-weight: normal; color: var(--tinta-fraca); }

.resposta-escrita {
  width: 100%; min-height: 220px; padding: 14px 16px; font-size: 17px;
  line-height: 1.6; border: 1px solid var(--borda);
  border-radius: var(--raio); resize: vertical; font-family: inherit;
}
.resposta-escrita:focus {
  outline: 2px solid var(--grena); outline-offset: 1px;
}

/* ---------- o comando fixo, enquanto se escreve ----------
   Logo abaixo da barra do relógio, por cima da página. Altura limitada:
   um comando longo rola dentro da faixa e não toma a meia tela que o
   teclado deixa. */
.comando-fixo {
  position: fixed; left: 0; right: 0; z-index: 19;
  background: var(--superficie); border-bottom: 2px solid var(--grena);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
  padding: 8px 16px; max-height: 30vh; overflow-y: auto;
}
.comando-fixo-dentro {
  max-width: 780px; margin: 0 auto;
  display: flex; gap: 12px; align-items: flex-start;
}
.comando-fixo-texto { flex: 1; display: flex; gap: 6px; align-items: baseline; }
.comando-fixo-texto .comando { margin: 0; font-size: 16px; }
.comando-fixo-letra { flex: none; }
.comando-fixo .botao { flex: none; padding: 8px 12px; }

/* ---------- a questão aberta por cima ---------- */
.questao-aberta-fundo {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.questao-aberta-fundo[hidden] { display: none; }
.questao-aberta {
  width: min(760px, 94vw); max-height: 88vh; overflow-y: auto;
  border-radius: var(--raio); padding: 22px;
  background: var(--superficie); color: var(--tinta);
}
.questao-aberta .figura { display: block; }
.questao-aberta .figura img { max-width: 100%; max-height: none; }
.questao-aberta .dica { margin: 14px 0 0; text-align: center; }
#folha .figura { cursor: zoom-in; }

.contador { font-size: 14px; color: var(--tinta-fraca); }
.contador.perto-do-limite { color: var(--aviso); }
.contador.no-limite, .contador.abaixo-do-minimo {
  color: var(--aviso); font-weight: 600;
}
.salvo-em { font-size: 14px; }

/* O terceiro estado do numero da questao: comecada, e nao respondida.
   Contorno, e nao preenchimento — para nao se confundir de relance com a
   questao pronta, que e a informacao que o estudante procura. */
.numero.comecada:not(.atual) {
  border: 2px dashed var(--grena); background: transparent;
  color: var(--tinta);
}

/* A discursiva do modo papel: respondida na folha impressa, e não no
   tablet. Um sinal próprio, para não parecer "em branco" nem "feita". */
.numero.papel:not(.atual) {
  background: var(--superficie); border: 2px solid var(--borda);
  color: var(--tinta);
}
.numero.papel::after {
  content: "✎"; position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tinta-media, #5e4f52); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}

/* ------------------------------------------------------------------ */
/* A correcao da discursiva.                                           */
/*                                                                     */
/* A resposta do estudante fica num bloco com fundo proprio e fonte de */
/* leitura: quem corrige vinte respostas seguidas precisa que cada uma */
/* comece visivelmente, senao elas se misturam na cabeca.              */
.resposta-do-estudante {
  white-space: pre-wrap; background: var(--chrome);
  border-left: 3px solid var(--borda); border-radius: var(--raio);
  padding: 14px 16px; font-size: 16px; line-height: 1.7;
  max-height: 60vh; overflow-y: auto;
}

.criterio-na-correcao {
  padding: 12px 0; border-bottom: 1px solid var(--borda-suave);
}
.criterio-na-correcao:last-of-type { border-bottom: none; }

.niveis { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nivel {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  align-items: baseline; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie);
}
.nivel .rotulo-do-nivel { grid-column: 2; }
.nivel .dica { grid-column: 2; margin: 0; }
.nivel.escolhido { border-color: var(--grena); background: var(--grena-tenue); }
/* O erro que zera nao e "o nivel mais baixo": e outra coisa, e precisa
   parecer outra coisa, senao se marca por engano ao descer a lista. */
.nivel.zera { border-style: dashed; }
.nivel.zera.escolhido {
  border-color: var(--erro); background: var(--erro-tenue);
}

/* A discursiva revista pelo estudante. Cada comando num bloco proprio:
   quem le a propria prova precisa distinguir onde acaba uma resposta e
   comeca a outra, senao a grade de correcao parece ser de tudo junto. */
.subitem-revisto {
  margin: 16px 0; padding: 14px 0 0; border-top: 1px solid var(--borda-suave);
}
.subitem-revisto:first-of-type { border-top: none; }
.subitem-revisto h4 { margin: 0 0 6px; }
.subitem-revisto h4 small { font-weight: normal; color: var(--tinta-fraca); }
.subitem-revisto h5 {
  margin: 14px 0 6px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-media);
}

/* ------------------------------------------------------------------ */
/* A sugestao da maquina, na tela de correcao.                         */
/*                                                                     */
/* Cor e forma DIFERENTES das do nivel escolhido. A sugestao e opiniao */
/* de maquina e a marcacao e decisao de gente: se as duas parecessem   */
/* a mesma coisa, o professor acabaria confirmando sem ler — que e     */
/* justamente o que esta ferramenta nao pode causar.                   */
.palpite-da-maquina {
  margin: 8px 0; padding: 8px 12px; font-size: 14px;
  background: var(--chrome); border-left: 3px dashed var(--tinta-fraca);
  border-radius: var(--raio); color: var(--tinta-media);
}
.palpite-da-maquina .trecho {
  font-style: italic; color: var(--tinta);
}
.nivel.sugerido:not(.escolhido) {
  border-style: dashed; border-color: var(--tinta-fraca);
}

/* A escolha do tipo, dentro da caixa de colar.
   Enquadrada para se ler como UMA pergunta com tres respostas, e nao como
   tres caixinhas soltas entre o texto de ajuda e o campo de colar. */
.tipo-do-colado {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 14px 12px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.tipo-do-colado legend {
  padding: 0 6px; font-size: 14px; font-weight: 600;
  color: var(--tinta-media);
}
.tipo-do-colado .marcavel { margin: 0; }

/* O pedido de revisao, na tela do estudante.
   FECHADO por padrao. Aberto o tempo todo, convidaria a contestar toda
   questao errada — e o pedido de revisao nao e um segundo turno da prova. */
.pedir-revisao {
  margin-top: 12px; border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 10px 14px;
}
.pedir-revisao > summary {
  cursor: pointer; font-weight: 600; color: var(--grena);
}
.pedir-revisao[open] > summary { margin-bottom: 8px; }

/* ------------------------------------------------------------------ */
/* A barra de formatacao da questao.                                   */
/*                                                                     */
/* A area editavel tem a MESMA cara de uma caixa de texto comum — quem */
/* abre a tela nao precisa perceber que mudou alguma coisa. O que muda */
/* e a fila de botoes em cima dela.                                    */
.com-barra {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); margin-bottom: 12px; overflow: hidden;
}
.com-barra:focus-within { outline: 2px solid var(--grena); outline-offset: 1px; }

.barra-de-formato {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 8px;
  background: var(--chrome); border-bottom: 1px solid var(--borda);
}
button.formato {
  min-width: 34px; min-height: 30px; padding: 0 8px; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--tinta); font-size: 15px; font-family: var(--serifa);
  line-height: 1;
}
button.formato.solta {
  font-family: var(--sans); font-size: 13px; color: var(--tinta-media);
}
button.formato:hover { background: var(--superficie); border-color: var(--borda); }
button.formato:focus-visible { outline: 2px solid var(--grena); outline-offset: 1px; }
.area-editavel {
  min-height: 170px; padding: 12px 14px; font-size: 16px; line-height: 1.6;
  outline: none; overflow-wrap: break-word;
}
.com-barra.estreita .area-editavel { min-height: 56px; font-size: 15px; }
.area-editavel:empty::before {
  content: attr(data-vazio); color: var(--tinta-fraca);
}

/* A tabela dentro do enunciado: linhas visiveis, para quem digita saber
   onde esta. Sem isso, editar uma tabela e adivinhar. */
.area-editavel table {
  border-collapse: collapse; margin: 10px 0; width: 100%;
}
.area-editavel th, .area-editavel td {
  border: 1px solid var(--borda); padding: 6px 9px; font-size: 15px;
  min-width: 48px;
}
.area-editavel th { background: var(--chrome); font-weight: 600; }

/* E a mesma tabela onde o estudante e o corretor a leem. */
.enunciado table, .justificativa table, .resposta-do-estudante table {
  border-collapse: collapse; margin: 10px 0;
}
.enunciado th, .enunciado td,
.justificativa th, .justificativa td {
  border: 1px solid var(--borda); padding: 6px 10px;
}
.enunciado th, .justificativa th {
  background: var(--chrome); font-weight: 600;
}

/* A caixa de duvidas da Ajuda: os trechos achados no manual. */
.achados-da-ajuda { list-style: none; padding: 0; margin: 6px 0 0;
  display: grid; gap: 10px; }
.achados-da-ajuda li { border-left: 3px solid var(--borda);
  padding: 4px 0 4px 12px; }
.pergunta-do-manual:target, .subsecao-do-manual:target, .secao-do-manual:target,
.texto-do-manual:target, .passo-do-manual:target, .dica.manual:target,
.recado:target { background: var(--grena-tenue, #F6EBEC);
  scroll-margin-top: 80px; }

/* ------------------------------------------------------------------ */
/* Modo papel: fotografar as folhas de resposta (seção 7.4, modo B).   */
/* ------------------------------------------------------------------ */
.lista-das-fotos { list-style: none; padding: 0; margin: 0 0 16px; }
.lista-das-fotos li {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--borda-suave);
}
.lista-das-fotos li b { flex: 1 1 100%; }
.lista-das-fotos .lado { color: var(--erro, #9b2335); font-weight: 600; }
.lista-das-fotos .lado.recebido { color: var(--ok, #2c6a4e); }

/* A câmera ocupa a tela toda: o visor grande é o que faz a foto sair boa. */
/* Uma camada fixa, acima de tudo, e não um <dialog>: a tela cheia sobe a
   página por cima de qualquer <dialog> aberto (achado no tablet). */
.camera {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: #111; color: #fff;
}
.camera[hidden] { display: none; }
body.com-camera { overflow: hidden; }
.camera-visor { position: relative; flex: 1; min-height: 0; }
.camera-visor video {
  width: 100%; height: 100%; object-fit: contain; background: #000;
  border-radius: 8px;
}
/* A moldura na proporção do A4 mostra onde pôr a folha. */
.camera-moldura {
  position: absolute; inset: 0; margin: auto; pointer-events: none;
  aspect-ratio: 210 / 297; height: 92%; max-width: 92%;
  border: 2px dashed rgba(255, 255, 255, .7); border-radius: 6px;
}
.camera-recado { margin: 0; font-size: 17px; line-height: 1.45; min-height: 2.9em; }
.camera-recado.bom { color: #9be3b8; }
.camera-recado.ruim { color: #ffb4bf; }
.camera-pergunta { display: flex; flex-wrap: wrap; gap: 10px; }
.camera-botoes { display: flex; gap: 12px; }
.camera-botoes .botao { flex: 1; }
.camera .botao.simples { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
.camera-medida {
  position: absolute; left: 8px; bottom: 6px; font-size: 11px;
  color: rgba(255, 255, 255, .55); pointer-events: none;
}

/* As folhas de resposta da sala: conferência e plano B (modo papel). */
.fila-do-aplicador { margin: 14px 0 0; padding-left: 20px; }
.fila-do-aplicador li { margin-bottom: 10px; }
.fila-do-aplicador .certo { color: var(--ok, #2c6a4e); font-weight: 600; }
.fila-do-aplicador .escolhas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.falta { color: var(--erro, #9b2335); font-weight: 600; }
.em-dia { color: var(--ok, #2c6a4e); font-weight: 600; }
form.dispensar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
form.dispensar input[type=text] { flex: 1 1 160px; }

/* A folha de resposta na correção (modo papel). */
.pagina-da-folha { margin: 0 0 16px; }
.pagina-da-folha figcaption { font-weight: 600; margin-bottom: 6px; }
.pagina-da-folha img { width: 100%; max-width: 900px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }

/* A transcrição da folha pela IA, ao lado da imagem (modo papel). */
.transcricao { margin: 0 0 18px; padding: 12px 14px;
  border: 1px dashed var(--borda); border-radius: var(--raio); }
.transcricao h4 { margin: 0 0 8px; }
.transcricao h4 small { font-weight: normal; color: var(--tinta-fraca); }