/* Peças antigas das telas de estudo (prefixo mod-) que ainda têm quem use: o topo com o voltar pequeno, o título de
   seção e o "esperando" (hoje: js/sequencia.js e js/loja-admin.js). O resto deste arquivo (bloco "Estudar" da
   disciplina, a caixa "Fazer prova", a prova de uma questão por vez, a nota e o resumo, prefixo es-) saiu no
   acabamento: o Estudar mora em css/estudar.css. Tela nova não usa estas classes: use as do base.css. */

/* cabeçalho de tela: voltar pequeno, título, apoio */
.mod-topo { display: grid; gap: 6px; min-width: 0; margin: 2px 0 22px; }
.mod-voltar {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 44px;
  margin: -4px 0 -2px -10px;
  padding: 0 12px 0 4px;
  border-radius: var(--raio-2);
  color: var(--texto-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.mod-voltar .ic { width: 20px; height: 20px; flex: none; }
.mod-voltar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .mod-voltar:hover { background: var(--superficie-2); color: var(--texto); } }
.mod-topo h1 { font-size: clamp(26px, 6.8vw, 34px); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; overflow-wrap: anywhere; }
.mod-topo > p { color: var(--texto-2); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }

/* título de seção dentro da tela */
.mod-secao-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 12px; font-size: 20px; }
.mod-secao-t small { flex: none; color: var(--texto-3); font-family: var(--fonte-texto); font-size: 14px; font-weight: 500; }

/* esperando: a rodinha (ou o mascote) com a frase do que está acontecendo */
.mod-espera {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 46vh;
  padding: 24px 12px;
  color: var(--texto-2);
  text-align: center;
}
.mod-espera.compacta { min-height: 0; padding: 18px 8px 8px; }
.mod-espera p { max-width: 32ch; font-size: 16px; font-weight: 500; line-height: 1.45; }
.mod-espera .girando { width: 34px; height: 34px; border-width: 4px; }
.mod-espera .kamurinha { width: 112px; height: auto; margin-bottom: -2px; }
.mod-espera.compacta .kamurinha { width: 84px; }
@media (min-width: 561px) { dialog.caixa .mod-espera .kamurinha { display: none; } }