/* Cartao de revisao de questao: fonte UNICA de estilo.
   Usado pela tela de resultado (index.html), pelo caderno do aluno (caderno.html),
   pelo painel do pai (admin.html) e pelo link compartilhado.
   Depende das variaveis de cor que cada pagina define no :root. */

/* texto-base da questao: trecho de historiador, documento ou tabela que a pergunta interpreta */
.texto-base { background: #FFFDF9; border-left: 4px solid var(--acento); border-radius: 0 10px 10px 0; padding: 12px 14px; margin: -4px 0 16px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--tinta); }
.texto-base .fonte { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); }
.rev-item .texto-base { font-size: 14px; margin: 0 0 10px; padding: 10px 12px; }

.selo { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #fff; }
.selo.materia { background: var(--tinta); }
.selo.facil { background: var(--facil); }
.selo.media { background: var(--media); }
.selo.dificil { background: var(--dificil); }

.figura { margin: -4px 0 18px; text-align: center; background: #FFFDF9; border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.figura svg { max-width: 100%; height: auto; display: inline-block; }
.rev-item .figura { margin: 0 0 10px; padding: 8px; }

.rev-titulo { font-weight: 900; font-size: 16px; margin-bottom: 12px; }
.rev-item { border: 2px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.rev-item.errada { border-color: #F0C4C4; }
.rev-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.rev-num { font-weight: 900; font-size: 13px; color: var(--tinta-2); }
.rev-perg { font-weight: 800; font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
.rev-resp { font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; line-height: 1.35; }
.rev-resp.sua-errada { background: #FCE8E8; color: #A22B2B; }
.rev-resp.certa { background: #E4F5EB; color: #1F7042; }
.rev-coment { background: #FFF6DE; color: #7A5A00; font-size: 14px; font-weight: 700; line-height: 1.45; padding: 10px 12px; border-radius: 8px; margin: 8px 0 6px; }
.rev-exp { font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; margin-top: 8px; }
.link-toggle { background: none; border: none; font: inherit; font-weight: 800; font-size: 14px; color: var(--acento); cursor: pointer; padding: 4px 0; margin-bottom: 12px; }

/* a questao foi editada no banco depois desta prova (ver lib/revisao.js) */
.rev-mudou { background: #FFF6DE; color: #7A5A00; font-size: 12.5px; font-weight: 800; line-height: 1.4; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; }
.rev-aviso { background: #FFF6DE; color: #7A5A00; border-radius: 10px; padding: 11px 13px; font-size: 13px; font-weight: 700; line-height: 1.45; margin-bottom: 12px; }

/* Ler para mim (v3.4): a voz do aparelho le o comentario e a explicacao. Herda a cor do bloco. */
.rev-coment > span, .rev-exp > span { display: block; }
.ler-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font: inherit; font-size: 13px; font-weight: 900; line-height: 1; padding: 7px 13px; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.ler-btn::before { content: ''; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ler-btn.lendo::before { width: 9px; height: 9px; border: none; background: currentColor; border-radius: 2px; }

/* Letra maior (v3.4): html.letra-grande, escolha guardada no aparelho. Vale nas quatro superficies. */
.letra-grande .rev-perg { font-size: 21px; }
.letra-grande .rev-resp { font-size: 18px; }
.letra-grande .rev-coment { font-size: 18px; }
.letra-grande .rev-exp { font-size: 17px; }
.letra-grande .rev-item .texto-base { font-size: 17px; }
.letra-grande .ler-btn { font-size: 15px; padding: 9px 15px; }