/* ==========================================================================
   COMPONENTE — uc-resolvedor
   A tela onde o estudante responde a questao, ve o gabarito e sabe se
   acertou. E' o motor do produto: uma questao e' um pageview, uma prova de
   70 questoes sao 70, e e' aqui que ficam os 11 minutos de quem VOLTA --
   que e' o unico numero que este tema existe para mover.

   ==========================================================================
   1. A ANATOMIA, MEDIDA NO HTML RENDERIZADO — E O 130 NAO E' DESTA PECA
   ==========================================================================
   Medido em 05/09/2026, anonimo, no HTML real de SEIS telas, por token de
   atributo `class` e com arvore DOM de verdade (BeautifulSoup), nao regex. A
   tela de resolver so' existe pelo POST do formulario `uc-bq__montar` a
   partir de /questoes/ (nao ha URL estatica); a captura veio de reproduzir
   esse POST, que redireciona para /questoes/questao/N/.

   O inventario da fase registra `uc-r` com 130 renderizacoes. A medicao
   diz que 130 sao DUAS pecas, e a segunda nao e' esta:

     tela            uc-r*   do que se compoe
     resolver          80    43 sufixos distintos -- o resolvedor inteiro
     capa               9  ┐
     taxonomia         13  │  UM sufixo so': `uc-r__tags`, e em 41 dos 42
     prova              8  ├─ casos o PAI e' `article.uc-card2`. E' a linha
     simulado           4  │  de metadado do CARTAO, que a tarefa E ja
     404                8  ┘  resolveu como `uc-cartao__meta`.

   E' o quinto EMPRESTIMO que esta fase encontra (depois de `uc-bq__fh`,
   `uc-marca`, `uc-lbl`/`uc-eyebrow` e `uc-ledger`): um nome, dois donos. O
   resolvedor renderiza `uc-r__tags` UMA vez -- a procedencia da questao --,
   e ali ele nao e' metadado de cartao: e' rotulo. Vira `uc-rotulo`, e as
   outras 41 ocorrencias nao vem para ca'.

   ⚠️ O 80 desta medicao contra o 88 do inventario NAO e' divergencia de
   instrumento: e' a questao sorteada. Cada alternativa carrega CINCO tokens
   (`__alt`, `__letra`, `__ico`, `__ico--ok`/`--no`, `__bar`, `__pct`); a
   questao de hoje tinha 4 alternativas, a da medicao anterior tinha 5.
   Medido no acervo: 22.267 questoes publicadas tem 5 alternativas e 6.413
   tem 4 (22,4%) -- A-D e' forma comum, nao excecao.

   ==========================================================================
   2. ⛔ 43 NOMES VIRAM 22 — E SEIS SAEM PARA PECAS QUE JA EXISTEM
   ==========================================================================
     uc-r__tags     ->  `uc-rotulo`. Ver a secao 1: fora daqui ele e'
                        `uc-cartao__meta`; aqui e' a procedencia da questao
                        (banca · ano · disciplina), que e' a formula do
                        rotulo inteira -- mono, caixa alta, entreletra,
                        --uc-ink-3. Seria a SEXTA copia dessa formula.
     uc-r__cont     ->  `uc-rotulo` ("questao 1 de 10 · nº 40 na prova").
     uc-r__mv       ->  `uc-contador`, tres vezes (tempo, respondidas,
     uc-r__m            aproveitamento) dentro de um `uc-contadores`. E' a
     uc-r__met          peca da tarefa H, e este e' o quinto hospedeiro dela.
     uc-r__ft       ->  `uc-botao--contorno`. Nao se cria um quinto controle
                        de acao: divida declarada na tarefa C e paga na D.
     uc-r__prox     ->  `uc-botao--forte` (ja' era `uc-btn--forte` no antigo).
     uc-r__pause    ->  `uc-botao--texto`, com a PALAVRA "Pausar". O antigo
                        desenha `❚❚` (U+275A) como icone -- dingbat de fonte,
                        o mesmo modo de falha que a regra "nada de emoji como
                        icone" fecha. E o alvo dele media 24x24 (secao 5).
     uc-r__erros    ->  `uc-contador` ("0 questoes esperando revisao" e' um
     uc-r__dica         numero e o que ele conta, letra por letra).
     uc-r__box      ->  desaparecem: sao caixa, e este componente nao tem
     uc-r__box-h        caixa (secao 3).
     uc-r__box-b
     uc-r__ad       ->  `uc-anuncio` (tarefa H).
     uc-r__ring     ->  desaparece. E' a TERCEIRA representacao do mesmo
                        fato: a rosquinha, o contador "0/10 respondidas" e a
                        barra de andamento dizem os tres a mesma coisa. Fica
                        a barra (que e' a unica com `role="progressbar"`) e o
                        contador (que e' a unica com o numero exato).
     uc-r__q--solo  ->  desaparece: existia so' para saber se havia terceira
                        coluna de texto de apoio, e nao ha terceira coluna
                        (secao 4).
     uc-r__grid     ->  o proprio `.uc-resolvedor`.
     uc-r__col      ->  `__questao`.
     uc-r__ses-in   ->  `__sessao`.
     uc-r__t        ->  `uc-rotulo` dentro do `__sessao`.
     uc-r__qb       ->  desaparece: era o miolo com padding de uma caixa.
     uc-r__qh       ->  `__cabeca`.
     uc-r__pct      ->  os DOIS viram `__voto`, um elemento so' (secao 6).
     uc-r__bar
     uc-r__ico      ->  `__marca`, e ele NAO substitui a letra (secao 5).
     uc-r__ico--ok
     uc-r__ico--no
     uc-r__why      ->  entra DENTRO do `__veredito` como segundo paragrafo.
                        Medido: `_explicacao` existe em 5 das 32.601 questoes
                        (0,015%). Um bloco proprio, com moldura e rotulo,
                        para 5 questoes e' anatomia paga por nada.
     uc-r__apoio-h  ->  `uc-rotulo` + o proprio `__apoio`.
     uc-r__apoio-b
     uc-r__dobra    ->  desaparece junto com a coluna (secao 4).
     uc-r__k        ->  `__tecla`.

   O QUE FICA — `.uc-resolvedor` mais VINTE E UM sufixos, 22 nomes ao todo
   (conferido com `grep` no arquivo salvo, nao contado a mao):
   `__sessao`, `__andamento`, `__questao`, `__cabeca`, `__apoio`,
   `__enunciado`, `__alternativas`, `__alternativa`, `__letra`, `__texto`,
   `__marca`, `__icone`, `__voto`, `__veredito`, `__ferramentas`,
   `__atalhos`, `__tecla`, `__nav`, `__trilho`, `__mapa`, `__passo`.

   ==========================================================================
   3. ⛔ CINCO CAIXAS VIRAM UMA — E A QUE FICA NAO E' DECORACAO
   ==========================================================================
   O tema antigo empilha CINCO superficies com borda, fundo e raio na mesma
   tela, quatro delas com a declaracao praticamente identica:

     .uc-r__q      (bancada.css:204)  background:var(--uc-sup);
     .uc-r__box    (bancada.css:320)  border:1px solid var(--uc-rule);
     .uc-r__apoio  (bancada.css:184)  border-radius:var(--uc-r-3)
     .uc-r__alt    (bancada.css:225)
     .uc-r__veredito (bancada.css:269, so' fundo e raio)

   E o `.uc-r__box` aparece TRES vezes (mapa, caderno de erros, salvas), o
   que da sete molduras numa tela cujo assunto e' UMA questao. A tarefa H
   ja' desfez exatamente isto no montador ("o montador nao e' uma caixa -- e
   eram quatro"), e o raciocinio e' o mesmo, um degrau mais forte: aqui a
   questao E' a pagina, e moldura em volta da pagina e' moldura em volta de
   nada.

   O QUE SEPARA PASSA A SER ESPACO MEDIDO, na faixa do craft (8-12px dentro
   de um grupo, 32-48px entre grupos):
     12px  procedencia -> enunciado          (mesmo grupo: identificam a questao)
      8px  entre alternativas                (mesmo grupo: sao a lista)
     32px  enunciado -> alternativas         (grupos diferentes)
     24px  alternativas -> veredito          (o veredito e' consequencia delas)
     32px  veredito -> ferramentas -> nav    (grupos diferentes)
     32px  coluna da questao -> trilho       (topo da faixa "entre grupos")

   ⚠️ AS DUAS QUE SOBREVIVEM SAO CONTROLES, NAO DECORACAO: a alternativa e o
   quadrado do mapa. Controle com borda e raio nao e' moldura -- e' a
   afordancia de "isto se clica", e --uc-r-2 e' literalmente o raio de
   controle do sistema.

   E UMA TERCEIRA, QUE E' CONTEUDO: o `__apoio`. Ele e' texto CITADO -- o
   trecho que a banca mandou ler antes de responder -- e a superficie
   propria e' o que o separa do enunciado, que e' voz do sistema. Medido:
   4.840 das 28.680 questoes publicadas (16,9%) tem texto de apoio, com
   MEDIA de 2.514 caracteres e maximo de 8.039. Nao e' detalhe raro; e' um
   sexto do acervo e o dobro do tamanho do enunciado medio (476).

   ==========================================================================
   4. ⛔ TRES COLUNAS VIRAM DUAS — E A QUE SAI E' A QUE QUEBROU A ORDEM
   ==========================================================================
   O antigo e' `grid-template-columns:300px minmax(0,1fr) 200px`
   (bancada.css:157): apoio | questao | painel. E o proprio codigo dele
   registra o preco disso (`resolver.php:277-290`):

     "Ate 26/08/2026 o DOM comecava pelo texto de apoio (aside), so' que
      entre 641px e 1180px o CSS usa `order` para jogar o apoio para o FIM da
      tela -- e quem navega por Tab/leitor de tela segue o DOM, nao o
      `order`. Resultado medido: o primeiro elemento focavel era o botao
      'mostrar' do apoio, antes da questao e das alternativas."

   O conserto que fizeram foi mover o apoio para o FIM do DOM e compensar com
   `order:1/2/3`. Isso troca um defeito por outro: agora a ordem VISUAL do
   desktop (apoio, questao, painel) e a ordem de LEITURA (questao, painel,
   apoio) discordam -- e quem usa teclado ve o foco saltar do fim da questao
   para o painel da direita e depois para o texto da esquerda.

   AQUI O APOIO ENTRA DENTRO DA QUESTAO, acima do enunciado, que e' onde ele
   e' lido. Ordem do DOM = ordem visual = ordem de leitura, em toda largura,
   sem uma linha de `order`. E some junto: a terceira coluna, o botao de
   recolher (`__dobra`), o `overflow-y:auto` de um scroller aninhado dentro
   da pagina, e o `__q--solo`, que existia so' para saber se havia apoio.

   O PRECO, DITO: num apoio de 8.039 caracteres as alternativas ficam longe
   do texto, e no antigo elas ficavam lado a lado. E' troca consciente --
   ordem de leitura correta em 100% das telas contra conforto de leitura em
   16,9% delas -- e o exemplar de BORDA do mostruario existe para que ela
   seja julgada com o pior caso na tela, nao no abstrato.

   AS DUAS QUE FICAM sao `minmax(0,2fr) minmax(0,1fr)`, a MESMA proporcao do
   montador (tarefa H) e pelo mesmo motivo: o trilho e' um terco da
   ferramenta, nao 200 pixels. Empilha em 900px, que e' o unico breakpoint
   do tema (a tarefa G1 registrou que um terceiro numero aparecendo sem
   decisao e' o risco).

   ==========================================================================
   5. ⛔ ACERTOU E ERROU: TRES SINAIS, E DOIS NAO SAO COR
   ==========================================================================
   E' o momento mais importante do produto inteiro, e a regra do craft e'
   dura: cor nunca e' o unico sinal. O tema antigo ja' tinha entendido metade
   disso -- e o comentario dele diz (bancada.css:255):

     "Ao revelar o gabarito a bolha trocava so' a COR e mantinha a letra A-E
      dentro. Quem nao distingue verde de vermelho ficava sem saber se
      acertou. Agora muda cor E forma juntas."

   So' que a forma entrou NO LUGAR da letra:

     .uc-r__alt.is-ok .uc-r__letra,
     .uc-r__alt.is-no .uc-r__letra{ display:none }

   CONFERIDO NO NAVEGADOR, no computado e nao no atributo (05/09/2026,
   1400x900, producao): com `is-ok` aplicada, `.uc-r__letra` computa
   `display:none` e `.uc-r__ico--ok` computa `display:block`. A letra
   desaparece -- e desaparece no instante exato em que o veredito ao lado
   escreve "A resposta e' B". A tela nomeia uma letra que ela acabou de
   apagar da alternativa que a carrega.

   AQUI SAO TRES SINAIS SIMULTANEOS, E A LETRA NUNCA SAI:
     PALAVRA   `uc-rotulo` na propria linha: "Resposta certa", "Voce
               marcou", "Questao anulada". Nao so' no painel -- na linha,
               onde o olho ja' esta. Sobrevive a impressao em cinza, a
               daltonismo e a leitor de tela sem uma linha de aria-label.
     FORMA     o `__marca`: check, X ou circulo-com-exclamacao, SVG monoline
               de `currentColor`, AO LADO da letra e nunca no lugar dela.
     COR       o fio e o icone. E' o unico canal que se perde, e e' o
               terceiro.

   ⛔ O CONTRASTE, E POR QUE ESTE COMPONENTE NAO PODE REPETIR O DEFEITO
   -------------------------------------------------------------------
   O registro da fase diz: "--uc-certo sobre o proprio fundo suave da'
   4,37:1, abaixo do piso". CONFERI, e o registro esta desatualizado -- o
   defeito ja' foi corrigido na Fase 2a e o numero de hoje e' outro:

     #0F7B4F (o --uc-certo ANTIGO) sobre certo-soft/paper   4,37:1  ✗
     #0D7549 (o --uc-certo DE HOJE) sobre certo-soft/paper  4,74:1  ✓
     medido de novo no navegador em producao: o `b` do veredito computa
     rgb(13,117,73) sobre rgba(15,123,79,.1) sobre branco   5,01:1  ✓

   Passa. Mas passa por 0,24 num texto de ~14px, e a regra de projeto que
   sai daqui e' mais forte que o numero: NESTE COMPONENTE --uc-certo,
   --uc-errado e --uc-alerta nunca carregam texto pequeno. Eles carregam
   FIO e ICONE, onde o piso e' 3:1 e a folga e' de duas vezes; o texto sobre
   superficie tingida e' --uc-ink (16,15:1) ou --uc-rotulo (--uc-ink-3,
   4,59-4,66:1, e ele e' redundante com o icone e com o veredito, nunca o
   unico portador).

     --uc-certo  sobre certo-soft/field   5,01:1   (piso grafico 3:1)
     --uc-errado sobre errado-soft/field  5,63:1
     --uc-alerta sobre alerta-soft/field  5,53:1
     --uc-certo  sobre --uc-field         5,74:1   (o fio)
     --uc-ink    sobre certo-soft/field  16,15:1   (o texto da alternativa)
     --uc-ink-3  sobre certo-soft/field   4,66:1   (a palavra do `__marca`)
     --uc-ink-3  sobre errado-soft/field  4,59:1   ← o par mais apertado
     --uc-ink-3  sobre alerta-soft/field  4,62:1

   Nenhum par deste componente coloca --uc-certo em texto. Nao ha como o
   defeito voltar por descuido: ele voltaria por decisao.

   ⛔ SEGUNDO DEFEITO DE CONTRASTE, ESTE NAO REGISTRADO EM LUGAR NENHUM
   --------------------------------------------------------------------
   `.uc-r__alt.is-dim{opacity:.6}` (bancada.css:265) e' o que o antigo faz
   com as alternativas descartadas. Medido: --uc-ink-2 (#3C4653) a 60% sobre
   branco resulta em rgb(138,144,152) = **3,22:1**, abaixo do piso de 4,5:1.
   Sao 2 ou 3 das 4-5 linhas da tela, apagadas abaixo do minimo legivel, no
   momento em que a pessoa quer justamente reler o que descartou.

   O `00-tokens.css` ja' tinha escrito o conserto antes de o caso aparecer:
   "--uc-desabilitado-ink e --uc-desabilitado-op sao MUTUAMENTE EXCLUSIVOS.
   -ink e' para TEXTO desabilitado; -op e' para o ELEMENTO INTEIRO". Aqui e'
   texto: `color:var(--uc-desabilitado-ink)` (= --uc-ink-3, 5,34:1) e ZERO
   opacidade. Sobe 3,22 -> 5,34.

   ⛔ O MAPA DA SESSAO ERA O UNICO LUGAR ONDE COR ESTAVA SOZINHA
   -------------------------------------------------------------
   `.uc-r__mapa i.ok{background:var(--uc-certo);color:#fff}` contra
   `i.no{background:var(--uc-errado);color:#fff}` -- CONFERIDO no navegador:
   rgb(13,117,73) contra rgb(179,38,30), mesma forma, mesmo raio, mesmo
   tamanho, mesmo numero dentro. Em cinza os dois quadrados sao o mesmo
   quadrado, e o mapa e' justamente o resumo da sessao inteira (10 a 70
   quadrados).

   Aqui a FORMA carrega o significado junto com a cor:
     acertou    --uc-r-max  (redondo)   fio --uc-certo   fundo certo-soft
     errou      --uc-r-1    (canto vivo) fio --uc-errado  fundo errado-soft
     anulada    --uc-r-1                 fio --uc-alerta  fundo alerta-soft
     sem responder --uc-r-1              fio --uc-rule    sem fundo
     a atual    ganha PESO (--uc-w-anunciar) e fio --uc-ink

   Redondo contra quadrado sobrevive ao cinza, ao daltonismo e a 44px. E o
   `aria-label` de cada passo carrega a palavra ("questao 3, voce acertou"),
   entao quem usa leitor de tela nao depende nem da forma.

   ⛔ E POR QUE A ATUAL NAO USA --uc-acao
   --------------------------------------
   Regra do craft: acento de marca em no maximo 2 usos visiveis por tela.
   Nesta tela o acento e' (1) o preenchimento da barra de andamento e (2) o
   botao "Proxima" (`uc-botao--forte`). O quadrado atual seria o terceiro --
   e o antigo o pinta de --uc-acao com sombra (`bancada.css:339`). Aqui ele
   usa PESO e fio --uc-ink: hierarquia sem gastar o acento.

   ==========================================================================
   6. O CONTRATO DE MARCACAO
   ==========================================================================
     <section class="uc-resolvedor" data-uc-estado="preenchido" data-uc-revelado>

       <div class="uc-resolvedor__sessao">
         <div class="uc-resolvedor__andamento" role="progressbar"
              aria-valuemin="1" aria-valuemax="10" aria-valuenow="3"
              aria-label="Avanco no bloco"
              style="--uc-resolvedor-avanco:30%"></div>
         <p class="uc-rotulo">Bloco de questoes · FUNDATEC</p>
         <ul class="uc-contadores"> ... 3x uc-contador ... </ul>
         <button class="uc-botao uc-botao--texto" type="button">Pausar</button>
       </div>

       <div class="uc-resolvedor__questao">
         <div class="uc-resolvedor__cabeca">
           <p class="uc-rotulo">FUNDATEC · 2026 · Direito Administrativo</p>
           <p class="uc-rotulo">questao 3 de 10 · nº 40 na prova</p>
         </div>

         <div class="uc-resolvedor__apoio">            (16,9% das questoes)
           <p class="uc-rotulo">Texto de apoio</p>
           <p>...</p>
         </div>

         <div class="uc-resolvedor__enunciado"> ... </div>

         <form class="uc-resolvedor__alternativas" method="post">
           <button class="uc-resolvedor__alternativa" type="submit"
                   name="uc_ans" value="B" data-uc-alt="B"
                   aria-keyshortcuts="B" data-uc-resposta="certa"
                   aria-disabled="true">
             <span class="uc-resolvedor__letra">B</span>
             <span class="uc-resolvedor__texto">...</span>
             <span class="uc-resolvedor__marca">
               <svg ...check.../><span class="uc-rotulo">Voce acertou</span>
             </span>
             <span class="uc-resolvedor__voto"
                   style="--uc-resolvedor-voto:37%">37%</span>
           </button>
           ...
         </form>

         <div class="uc-resolvedor__veredito" data-uc-veredito="certo"
              role="status" aria-live="polite" aria-atomic="true">
           <span class="uc-resolvedor__marca"><svg ...check.../></span>
           <p><b>Voce acertou.</b> 37% dos candidatos acertam esta questao.</p>
         </div>

         <div class="uc-resolvedor__ferramentas">
           <button class="uc-botao uc-botao--contorno" aria-pressed="false">
             Salvar esta questao</button>
           <p class="uc-resolvedor__atalhos">
             <kbd class="uc-resolvedor__tecla">A</kbd>...</p>
         </div>

         <nav class="uc-resolvedor__nav"> ... uc-botao ... </nav>
       </div>

       <aside class="uc-resolvedor__trilho">
         <p class="uc-rotulo">Mapa do bloco</p>
         <div class="uc-resolvedor__mapa">
           <a class="uc-resolvedor__passo" data-uc-passo="certa"
              href="..." aria-label="questao 1, voce acertou">1</a>
           ...
         </div>
         <ul class="uc-contadores"> ... erros · salvas ... </ul>
       </aside>

     </section>

   ⛔ `data-uc-resposta` TEM QUATRO VALORES, E TRES SAO O QUE O CSS PRECISA:
     certa       o gabarito. A PALAVRA distingue "Resposta certa" (voce nao
                 marcou esta) de "Voce acertou" (marcou) -- os dois pintam
                 igual, e por isso nao viram dois valores de atributo. Dado
                 e' texto; forma e' atributo.
     errada      o que voce marcou, e nao e' o gabarito.
     anulada     a banca cancelou a questao (secao 7).
     descartada  as outras.

   ⛔ `aria-disabled` E NAO `disabled`, e a diferenca importa aqui mais que
   em qualquer outro lugar do sistema. O antigo escreve `bt.disabled = true`
   em TODAS as alternativas ao revelar (resolver.js:453) -- e botao
   `disabled` sai da ordem de tabulacao. Quem navega por teclado responde a
   questao e, no instante seguinte, NAO CONSEGUE MAIS ALCANCAR A RESPOSTA
   CERTA para ler qual era. E' a mesma decisao que a tarefa H ja' tinha
   escrito no montador ("as opcoes ficam indisponiveis por aria-disabled, e
   nao por disabled: quem navega por teclado continua alcancando o botao E o
   motivo ao lado dele"), e este e' o caso onde ela deixa de ser elegancia.
   Travar o reenvio e' trabalho do manipulador, nao do atributo -- e o
   `botao.css` ja' escreveu isso com todas as letras.

   ⛔ `aria-pressed` SAI DAS ALTERNATIVAS. Num `<button>` ele e' ARIA valido
   (ao contrario do `<a>` que a tarefa C achou em 1.165 chips), mas e' o
   papel errado: antes de responder sao cinco botoes anunciando "nao
   pressionado", que e' ruido puro; depois de responder o estado que importa
   nao e' "pressionado", e' "certa"/"errada", e isso a PALAVRA ja' diz em voz
   alta. Ele fica so' onde e' de fato um alternador: o botao "Salvar esta
   questao".

   ==========================================================================
   7. QUESTAO ANULADA — E' REAL, SAO 12, E HOJE A TELA MENTE
   ==========================================================================
   Medido no banco em 05/09/2026: 32.601 questoes tem `_gabarito`, e o valor
   nao e' sempre uma letra --

     A 6.526 · B 6.866 · C 7.093 · D 6.861 · E 4.775
     ANULADO     30   (12 delas PUBLICADAS e alcancaveis)
     (vazio)    450   (446 em rascunho, 4 no lixo -- nenhuma publicada)

   E o motor compara letra com letra: `'certo' => $marcada === $gab`
   (`api.php:286`). Com `$gab = 'ANULADO'` nenhuma letra casa, entao o
   estudante que responde uma dessas 12 recebe "Voce errou" e, logo abaixo,
   "A resposta e' ANULADO." (`resolver.js:485` monta a frase com o valor
   cru). Erra sem ter errado, e le uma palavra que nao e' alternativa.

   ⚠️ NAO SE CORRIGE O TEMA ANTIGO (ordem do dono, 04/09) e o motor de
   resolucao esta fora desta fase. O que este componente faz e' ter A FORMA
   pronta para quando a Fase 4 ligar o motor: `data-uc-veredito="anulada"`,
   `data-uc-resposta="anulada"` na alternativa marcada, --uc-alerta (que e'
   nem certo nem errado, que e' exatamente o caso), o icone de
   circulo-com-exclamacao, e um texto que responde as tres perguntas do
   craft na ordem: o que aconteceu, por que, o que fazer.

   ==========================================================================
   8. O QUE A MEDICAO DIZ QUE **NAO** EXISTE — e por que nao esta aqui
   ==========================================================================
   Duas coisas pedidas como estado desta tela nao aparecem no produto. Os
   numeros vem do banco e do codigo, nao de leitura:

   (a) "ALTERNATIVA ESCOLHIDA E NAO CONFIRMADA" NAO EXISTE. Nao ha passo de
       confirmacao em lugar nenhum: `aoClicar` chama `responde(bt...)` direto
       (resolver.js:567) e o `keydown` chama `responde(L)` direto
       (resolver.js:587). UM clique responde, e a resposta e' TRAVADA no
       servidor na primeira vez (`api.php:270`: "Resposta dada e resposta
       travada... bastaria trocar a alternativa depois de ver o gabarito
       para que todo mundo acertasse").
       ⚠️ E' o achado mais serio desta medicao, e ele nao e' de CSS: a acao
       mais consequente do produto e' irreversivel, sem confirmacao, e esta
       ligada a TECLAS SOLTAS A-E sem modificador. Uma tecla encostada queima
       uma questao. O que este componente pode fazer -- e faz -- e' dizer a
       consequencia ANTES do clique, no proprio texto dos atalhos
       ("respondem na hora"). O resto e' decisao de produto: secao 10.

   (b) "QUESTAO QUE DEPENDE DE IMAGEM" NAO EXISTE NO ACERVO. Varrido o
       conteudo das 28.680 questoes publicadas: `<img` 0, `<figure` 0,
       `[caption` 0, `<svg` 0. Em `_uc_texto_base` (4.840 registros): `<img`
       0. Nao ha meta de imagem entre as 25 chaves que a questao usa. O
       extrator e' de texto.
       Entao nao ha estado de "imagem que nao carregou" para desenhar, e
       desenhar um seria inventar forma para dado que nao existe -- o oposto
       do que esta fase faz. O que existe e' a garantia de que o dia em que
       houver imagem ela nao estoura a coluna: a `01-base.css` ja' declara
       `img,svg,video,iframe{max-width:100%;height:auto}` para o tema
       inteiro, e o `__enunciado` daqui nao a desfaz.
       ⚠️ Vale registrar por que isso pode mudar: ENEM e ENADE sao alvo
       declarado do produto e sao provas com grafico, mapa e tabela. Quando
       o extrator passar a trazer imagem, este e' o gancho.

   (c) O `__voto` RENDERIZA ZERO VEZES HOJE, e continua existindo. O limiar
       e' `UC_STAT_MIN = 20` (`api.php:47`) e a medicao no banco diz: 489
       questoes tem algum voto registrado e **nenhuma** chega a 20. A
       mecanica e' real, o dado ainda nao. Ela fica porque e' o que constroi
       confianca na correcao ("37% dos candidatos acertam esta") e porque
       tirar agora obrigaria a Fase 4 a reinventar -- mas ela NAO organiza o
       desenho: nao ha coluna reservada para ela, e a alternativa sem voto
       nao deixa buraco.

   ==========================================================================
   9. TECLADO — O QUE EXISTE, MEDIDO, E O QUE MUDA
   ==========================================================================
   Lido em `resolver.js:578-601`, nao inferido do texto da dica:

     A B C D E   responde (so' enquanto `!respondida`)
     Enter       proxima questao   ┐ o mesmo destino, duas teclas
     ArrowRight  proxima questao   ┘
     ArrowLeft   questao anterior (`a[rel="prev"]`)
     guarda      ignora com Ctrl/Alt/Meta e dentro de INPUT/TEXTAREA/SELECT

   A DICA DA TELA SO' CONTA DUAS DAS QUATRO. Conferido no navegador, no
   texto computado: `"A–E responde · ↵ avanca"`. As setas -- que sao como se
   volta para reler a questao anterior -- nao estao escritas em lugar
   nenhum, entao so' as descobre quem as tenta. Aqui as quatro estao no
   `__atalhos`.

   E O `aria-keyshortcuts` FICA. O antigo ja' escreve
   `aria-keyshortcuts="A"` em cada alternativa (`resolver.php:347`), que e'
   o atributo ARIA certo para exatamente isto e e' o que faz um leitor de
   tela anunciar o atalho junto com o botao. Preservado no contrato.

   ⛔ A DICA NAO SOME NO CELULAR. O antigo a esconde abaixo de 640px
   (`bancada.css:309`), e 640 e' um breakpoint que so' existe para essa
   linha -- a tarefa G1 registrou que numero de breakpoint aparecendo sem
   decisao e' o risco, e o tema tem UM (900px). Ela custa uma linha de 12px
   num visor de 390 e e' como alguem com teclado Bluetooth no tablet
   descobre que existem atalhos. Fica.

   ==========================================================================
   10. ALVO DE TOQUE — OS DOIS PISOS, E O QUE ESTAVA ABAIXO DELES
   ==========================================================================
   Medido no navegador em 05/09/2026, producao, 1400x900, com
   getBoundingClientRect (nao com a folha de estilo):

     alvo                        medido      44 (dedo)  24 (mouse)
     alternativa mais curta      42,6 px        ✗           ✓
     quadrado do mapa            22,1 x 22,1    ✗           ✗
     "Salvar esta questao"      142,9 x 30,4    ✗           ✓
     pausar o cronometro         24 x 24        ✗        ✓ (no limite)
     "Proxima →"                352 x 46        ✓           ✓

   A ALTERNATIVA E' O ALVO MAIS CLICADO DO SITE e estava 1,4px abaixo do
   piso do dedo. O quadrado do mapa falhava os DOIS. Aqui os cinco passam:
   `min-height:var(--uc-alvo-toque)` na alternativa e no passo do mapa, e os
   controles saem para `uc-botao`, que ja' nasce nos dois pisos (tarefa D).

   O vao entre alternativas sobe de 5,12px (medido) para 8px: alvos vizinhos
   de 44px com 5px de folga e' onde o dedo erra a linha.

   ==========================================================================
   11. ESTADO — QUEM MORA ONDE, E POR QUE NAO NO MESMO LUGAR
   ==========================================================================
     data-uc-estado          na SUPERFICIE (.uc-resolvedor). Os cinco
                             genericos. `vazio` = a sessao de 6h expirou
                             (`api.php:240`, WP_Error 409); `erro` = a
                             resposta nao chegou ao servidor.
     data-uc-revelado        na superficie. "o gabarito esta na tela".
                             Booleano, sem valor: ou esta ou nao esta.
     data-uc-veredito        na superficie. certo | errado | anulada.
     data-uc-resposta        na ALTERNATIVA. certa | errada | anulada |
                             descartada.
     aria-busy               em `__alternativas`. "esta resposta esta indo".
                             E' outro fato e mora em outro lugar, exatamente
                             como a tarefa H separou `data-uc-estado` do
                             `aria-busy` no montador.
     aria-current="page"     no `__passo` da questao atual. E' navegacao
                             dentro de um conjunto de paginas -- `page` e' o
                             valor certo, e nao `true`.

   ⚠️ NAO HA ESQUELETO DE CARREGAMENTO NESTE COMPONENTE, e a ausencia e'
   medida. A questao seguinte chega por navegacao de pagina inteira
   (`window.location.href = prox.href`, resolver.js:593), nao por fetch --
   nao existe um momento em que a moldura esteja na tela e o conteudo nao.
   O que carrega e' a RESPOSTA (`aria-busy`) e os CONTADORES da sessao, e
   para o contador o esqueleto ja' existe e e' do dono dele
   (`contador.css`: `[data-uc-estado="carregando"] .uc-contador__n`).
   Inventar um osso de enunciado aqui seria desenhar um estado que a
   arquitetura nao produz.
   ========================================================================== */

/* ⛔ A UNICA CONSTANTE DESTE COMPONENTE, e por que num `:root` do proprio
   arquivo. E' o mecanismo de escape que a tarefa H sancionou no
   `anuncio.css` e que o `00-tokens.css` usa desde a Fase 2a: medida ou
   valor sem dono se BATIZA, nunca se isenta na propriedade.

   O motivo aqui e' a Regra 9 (existencia do token): ela e' escrita por
   JavaScript em tempo de execucao, no atributo `style` do elemento, e um
   `var(--uc-resolvedor-avanco)` consumido sem nenhuma declaracao no tema e'
   exatamente o achado que a R9 existe para pegar -- foi assim que a tarefa
   A2 encontrou uma animacao apontando para um token que nunca existiu.

   E O VALOR DECLARADO E' O SEGURO, nao um placeholder: 0%. Numa pagina em
   que o JavaScript nao rodou, a barra de andamento aparece VAZIA -- que e'
   verdade ("nao sei"), enquanto qualquer outro padrao seria afirmacao falsa
   desenhada com confianca. Nao e' px nem rem, entao nao ha grade a
   respeitar; o que ha e' dono. */
:root{
  --uc-resolvedor-avanco:0%;
}

/* --------------------------------------------------------------------------
   A SUPERFICIE
   --------------------------------------------------------------------------
   Duas colunas, 2:1, em PROPORCAO e nao em pixel -- a mesma decisao (e o
   mesmo numero) do `uc-montador`. A sessao atravessa as duas porque ela
   descreve o bloco inteiro, nao a questao.

   `align-items:start`: a coluna da questao e a do trilho NUNCA tem o mesmo
   tamanho, e igualar seria a simetria vazia que o `02-mostruario.css` ja'
   recusa por escrito. Um mapa de 10 quadrados nao vira uma parede de 800px
   porque o enunciado e' longo. */
.uc-resolvedor{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-areas:"sessao sessao" "questao trilho";
  gap:var(--sp-6);
  align-items:start;
  min-width:0;
}

/* As tres areas, escopadas com `>` pelo mesmo motivo que o montador
   registrou: sem o escopo, um `__trilho` que aparecesse dentro de outro
   container herdaria uma area que aquele container nao declara -- e area
   nomeada inexistente cria trilha implicita, que foi o que colapsou uma
   coluna para 0px no tema antigo (bancada.css:527). */
.uc-resolvedor > .uc-resolvedor__sessao{ grid-area:sessao }
.uc-resolvedor > .uc-resolvedor__questao{ grid-area:questao }
.uc-resolvedor > .uc-resolvedor__trilho{ grid-area:trilho }

/* ⛔ SEM TRILHO, A QUESTAO OCUPA A LARGURA INTEIRA — defeito MEDIDO na
   captura do exemplar "vazio" (05/09/2026): com a sessao expirada nao ha
   mapa para desenhar, e a grade continuava reservando o terco da direita.
   O painel de aviso ficava espremido em 2/3 da largura com um terco de
   nada ao lado -- a simetria vazia que o `02-mostruario.css` recusa por
   escrito, so' que pela ausencia em vez da igualdade.
   O `:has()` tem o conteudo removido pela Regra 16 antes de ela procurar o
   compound da direita, entao o alvo julgado e' `.uc-resolvedor__questao`,
   que e' deste arquivo. E' a mesma forma que o `cartao.css` ja' usa. */
.uc-resolvedor:not(:has(.uc-resolvedor__trilho)) > .uc-resolvedor__questao{
  grid-column:1/-1;
}

/* UMA declaracao para empilhar, e nenhum reset por filho. 900px e' o unico
   breakpoint do tema (tarefa G1). Empilhado, o trilho fica DEPOIS da
   questao -- que e' a ordem de leitura: primeiro responder, depois olhar
   onde se esta. */
@media (max-width:900px){
  .uc-resolvedor{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"sessao" "questao" "trilho";
  }
}

/* --------------------------------------------------------------------------
   A SESSAO — a barra que diz onde a pessoa esta
   --------------------------------------------------------------------------
   `align-items:baseline` e nao `center`: o rotulo do bloco e os numeros dos
   contadores tem tamanhos diferentes, e o que alinha texto de tamanhos
   diferentes e' a linha de base, nao o meio da caixa.

   A barra de andamento toma a linha inteira acima (`flex:1 1 100%`) e os
   tres que sobram se distribuem: rotulo do bloco, contadores, pausar.

   ⛔ `justify-content:space-between` E NAO UMA CLASSE MINHA NO ROTULO. A
   forma obvia seria `.uc-resolvedor__sessao > .uc-rotulo{flex:1 1 auto}`
   para o rotulo empurrar o resto -- e a Regra 16 recusa isso com todas as
   letras: o compound da direita mira prefixo que este arquivo nao declara.
   E' a forma exata do `.uc-portas .uc-card2__pe` que motivou a regra. O
   `space-between` entrega o mesmo layout SEM tocar em nenhum convidado, e
   sem precisar da terceira saida da R16 (uma classe de posicao minha no
   elemento alheio, que e' onde a propria regra declara o proximo buraco
   dela). Zero coabitacao.

   16px de respiro embaixo mais o fio: e' a quinta escala do vocabulario de
   fio que a tarefa F fixou -- atravessa A PAGINA. A sessao e' o bloco; a
   questao e' outro. */
.uc-resolvedor__sessao{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  min-width:0;
  padding-bottom:var(--sp-4);
  border-bottom:var(--uc-borda) solid var(--uc-rule);
}

/* --------------------------------------------------------------------------
   O ANDAMENTO
   --------------------------------------------------------------------------
   `role="progressbar"` com `aria-valuenow` mora AQUI, no mesmo elemento que
   desenha o preenchimento -- e essa e' a razao de o preenchimento ser um
   `::after` e nao um `<span>` filho. No antigo sao dois elementos: o
   `role` num `<div>` e o `style="width:10%"` num `<span>` dentro. Duas
   fontes da verdade para o mesmo fato, e nada garante que nao divirjam.
   Aqui a largura visual e o valor anunciado saem do mesmo no'.

   4px de altura (--sp-1) e nao 3: 3 nao esta na grade e nao ha motivo
   medido para sair dela num fio de progresso.

   `overflow:hidden` para o preenchimento acompanhar o raio. Nao corta anel
   de foco -- este elemento nao recebe foco. */
.uc-resolvedor__andamento{
  position:relative;
  flex:1 1 100%;
  min-width:0;
  height:var(--sp-1);
  border-radius:var(--uc-r-max);
  background:var(--uc-paper-3);
  overflow:hidden;
}

/* PRIMEIRO dos dois usos do acento nesta tela (o outro e' o botao
   "Proxima"). O craft manda no maximo 2 visiveis, e sao exatamente 2. */
.uc-resolvedor__andamento::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:var(--uc-resolvedor-avanco);
  border-radius:var(--uc-r-max);
  background:var(--uc-acao);
  transition:width var(--uc-dur-3) var(--uc-ease);
}

/* --------------------------------------------------------------------------
   A QUESTAO — a coluna de leitura, e ela NAO e' uma caixa (secao 3)
   --------------------------------------------------------------------------
   `align-content:start` para o conteudo nao se espalhar quando o trilho ao
   lado for mais alto que a questao (mapa de 70 quadrados contra questao de
   duas linhas). */
.uc-resolvedor__questao{
  display:grid;
  gap:var(--sp-6);
  align-content:start;
  min-width:0;
}

/* A CABECA: procedencia a esquerda, posicao a direita. Sao dois `uc-rotulo`
   inteiros -- nao ha `.uc-resolvedor__tag` nem `__cont`, porque a formula do
   rotulo ja' e' esta e copiar seria a sexta vez (tarefa D).
   `gap` de 8/24: 8px entre linhas quando quebra (a cabeca e' um bloco
   compacto), 24px entre os dois blocos (sao coisas diferentes).
   `justify-content:space-between` empurra a posicao para a borda sem
   `margin-left:auto`, que quebraria quando os dois quebrassem de linha. */
.uc-resolvedor__cabeca{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-2) var(--sp-5);
  min-width:0;
}

/* --------------------------------------------------------------------------
   O TEXTO DE APOIO — a unica superficie de CONTEUDO da tela
   --------------------------------------------------------------------------
   16,9% das questoes, media de 2.514 caracteres (secao 3). Ele e' voz da
   BANCA, nao do sistema, e por isso ganha superficie propria: --uc-paper-2,
   que e' o degrau imediatamente abaixo do papel e le como "citado" sem
   pintar nada.

   ⛔ SEM BARRA COLORIDA A ESQUERDA. E' a forma-assinatura de painel gerado
   por IA e esta na lista de tells do craft; o antigo faz exatamente isso no
   bloco vizinho (`.uc-r__q{padding-left:.7rem;border-left:2px}` na amostra
   do montador, que a tarefa H ja' tinha tirado).

   ⛔ SEM `max-height` E SEM SCROLLER INTERNO. O antigo usa
   `overflow-y:auto` numa coluna de 300px (bancada.css:199), e foi essa
   coluna que produziu o defeito de ordem de leitura da secao 4. Scroller
   aninhado dentro de pagina rolavel e' armadilha no celular, e um texto que
   e' obrigatorio ler nao se esconde atras de altura fixa. Ele flui. */
.uc-resolvedor__apoio{
  display:grid;
  gap:var(--sp-3);
  min-width:0;
  padding:var(--sp-4);
  border-radius:var(--uc-r-3);
  background:var(--uc-paper-2);
  color:var(--uc-ink-2);
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
}

/* Enunciado real traz codigo de lei, formula e URL sem espaco. `anywhere` e
   nao `break-word` pelo motivo que o chip, o botao e o montador ja'
   registraram: `break-word` quebra a palavra na linha mas nao reduz o
   min-content do item de grade, entao a coluna estoura mesmo assim. */
.uc-resolvedor__apoio p{
  margin:0;
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   O ENUNCIADO
   --------------------------------------------------------------------------
   `--uc-lh-normal` (1.6) e nao `--uc-lh-controle`: o mapeamento nominal do
   `00-tokens.css` da' `normal` para corpo, e enunciado e' corpo -- e' lido
   com atencao, nao escaneado.
   `max-width:var(--uc-medida)` NAO entra aqui de proposito: a coluna ja' e'
   2/3 de 1.180px = ~754px, e a medida (65ch) daria ~65ch de qualquer jeito
   no tamanho de corpo; declarar as duas produziria uma coluna que encolhe
   sem motivo visivel quando a tela cresce. */
.uc-resolvedor__enunciado{
  min-width:0;
  color:var(--uc-ink);
  font-size:var(--uc-s-0);
  line-height:var(--uc-lh-normal);
  overflow-wrap:anywhere;
}

.uc-resolvedor__enunciado p{
  margin:0;
}

.uc-resolvedor__enunciado p + p{
  margin-top:var(--sp-3);
}

/* --------------------------------------------------------------------------
   ENUNCIADO COM ESTRUTURA (uc_enunciado_html, 22/09/2026)
   --------------------------------------------------------------------------
   O extrator entrega o enunciado CORRIDO: "TEXTO I" + prosa + referencia + comando no mesmo
   paragrafo (medido: 2.564 com referencia colada, 631 com TEXTO I/II, 74 com I/II/III corrido).
   Tres niveis, e so um primario:
     primario   o COMANDO (o que a questao pede) -- peso 600 + respiro acima. Sem estes dois vetores
                ele se perde no fim da parede de texto, que e o defeito.
     estrutura  "TEXTO I" -- e o `.uc-rotulo` do projeto, nao um estilo novo.
     incidental a REFERENCIA ("SOUSA, M. Disponivel em...") -- menor e em --uc-ink-3 (5,02:1).
   Espaco AGRUPA: o rotulo fica colado ao texto que nomeia (--sp-1) e longe do texto anterior
   (--sp-5); os itens I/II/III ficam a --sp-2 entre si, dentro do mesmo grupo. */
.uc-resolvedor__enunciado .uc-enunciado__fonte{
  color:var(--uc-ink-3);
  font-size:var(--uc-s--1);
}

.uc-resolvedor__enunciado .uc-enunciado__comando{
  margin-top:var(--sp-4);
  font-weight:600;
}

.uc-resolvedor__enunciado * + .uc-enunciado__rotulo{
  margin-top:var(--sp-5);
}

.uc-resolvedor__enunciado .uc-enunciado__rotulo + *{
  margin-top:var(--sp-1);
}

.uc-resolvedor__enunciado .uc-enunciado__itens{
  display:grid;
  gap:var(--sp-2);
  margin:var(--sp-3) 0 0;
  padding:0;
  /* SEM marcador: o "I." / "II." ja vem no texto da banca. Um ::marker somaria "1. I." */
  list-style:none;
}

.uc-resolvedor__enunciado .uc-enunciado__item{
  margin:0;
}

/* --------------------------------------------------------------------------
   AS ALTERNATIVAS — o alvo mais clicado do site
   --------------------------------------------------------------------------
   8px de vao, contra os 5,12px medidos no antigo (secao 10): alvos de 44px
   vizinhos precisam de folga onde o dedo erra a linha. Continua sendo
   "mesmo grupo" na faixa do craft (8-12px), porque as alternativas SAO um
   grupo -- sao a mesma pergunta. */
.uc-resolvedor__alternativas{
  display:grid;
  gap:var(--sp-2);
  min-width:0;
  margin:0;
}

/* "Esta resposta esta indo." O conjunto inteiro para de aceitar clique --
   e' o mesmo fato que o `.uc-r.is-enviando .uc-r__alts` do antigo dizia com
   `opacity:.55`, so' que aqui ele sai de um atributo que o leitor de tela
   tambem le, e a opacidade fica no elemento INTEIRO (que e' o uso correto
   de --uc-desabilitado-op, segundo o proprio 00-tokens.css) e nao no texto. */
.uc-resolvedor__alternativas[aria-busy="true"]{
  opacity:var(--uc-desabilitado-op);
  pointer-events:none;
}

/* A ALTERNATIVA.
   Tres colunas: letra (fixa) · texto (elastico) · marca e voto (fixos).
   `align-items:start` porque a letra tem de ficar na PRIMEIRA linha de um
   texto de tres linhas, nao no meio dele.

   `min-height:var(--uc-alvo-toque)` -- 44px em toda largura, os dois pisos
   de uma vez. O antigo media 42,6px na alternativa mais curta (secao 10).

   `text-align:left` explicito: `<button>` centraliza por padrao no agente
   do usuario, e uma alternativa e' texto corrido.

   Sem `overflow:hidden`, e o motivo NAO e' o anel de foco (o `botao.css` ja'
   mediu que outline do proprio elemento nao e' recortado pelo overflow
   dele): e' que nao ha nada para recortar. O antigo precisa dele porque a
   barra de participacao e' `position:absolute` no pe do botao; aqui essa
   barra nao existe (ver `__voto`), e o que contem o texto e' `min-width:0`
   mais `anywhere` no `__texto`. Propriedade sem trabalho a fazer nao entra. */
.uc-resolvedor__alternativa{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:var(--sp-3);
  min-width:0;
  min-height:var(--uc-alvo-toque);
  padding:var(--sp-3);
  border:var(--uc-borda) solid var(--uc-rule);
  border-radius:var(--uc-r-2);
  background:var(--uc-field);
  color:var(--uc-ink-2);
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-ler);
  line-height:var(--uc-lh-normal);
  text-align:left;
  cursor:pointer;
  transition:background-color var(--uc-dur-2) var(--uc-ease),
             border-color var(--uc-dur-2) var(--uc-ease),
             color var(--uc-dur-2) var(--uc-ease);
}

/* Enquanto da' para responder. `:not([aria-disabled])` e nao `:not(:disabled)`
   porque o revelado usa `aria-disabled` (secao 6) -- e depois de revelado a
   alternativa nao e' mais um alvo, e' um resultado. */
.uc-resolvedor__alternativa:hover:not([aria-disabled="true"]){
  border-color:var(--uc-rule-forte);
  background:var(--uc-paper-2);
}

/* O toque. --uc-pressao e' o deslocamento unico do sistema (1px): num
   controle de 13px qualquer coisa acima disso le como "a pagina pulou". */
.uc-resolvedor__alternativa:active:not([aria-disabled="true"]){
  transform:translateY(var(--uc-pressao));
}

/* Revelada, deixa de ser alvo -- mas continua alcancavel por Tab (secao 6). */
.uc-resolvedor__alternativa[aria-disabled="true"]{
  cursor:default;
}

/* A LETRA. Mono com largura tabular porque ela e' DADO -- e' a mesma regra
   que a tarefa C fixou no chip e a D estendeu ao botao. 32px (--sp-6) de
   caixa: acima dos 21px do antigo, e o suficiente para a letra respirar
   dentro do fio sem virar botao dentro de botao.
   `place-items:center` centra a letra na propria caixa; a caixa e' que fica
   no topo, pelo `align-items:start` do pai. */
.uc-resolvedor__letra{
  display:grid;
  place-items:center;
  flex:none;
  width:var(--sp-6);
  height:var(--sp-6);
  border:var(--uc-borda) solid var(--uc-rule-forte);
  border-radius:var(--uc-r-1);
  background:var(--uc-field);
  color:var(--uc-ink-2);
  font-family:var(--uc-mono);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  font-variant-numeric:tabular-nums lining-nums;
  line-height:var(--uc-lh-controle);
}

.uc-resolvedor__texto{
  min-width:0;
  overflow-wrap:anywhere;
}

/* A MARCA: icone + palavra, e ela e' a razao de este componente nao
   depender de cor (secao 5). A palavra e' `uc-rotulo` INTEIRO -- nao ha
   `.uc-resolvedor__marca .uc-rotulo{}` aqui, e nao poderia haver: a Regra
   16 recusa um seletor cujo compound da direita mira prefixo que este
   arquivo nao declara. A consequencia e' deliberada e boa: a palavra fica
   na cor do rotulo (--uc-ink-3), o icone fica na cor semantica, e nenhum
   texto pequeno carrega --uc-certo.

   `flex:none` para o par nao ser achatado quando o texto e' longo -- e' o
   defeito que o `uc-botao__icone` ja' pagou.
   `justify-items:center` mantem o icone sobre a palavra quando a palavra e'
   mais larga que ele.
   ⛔ A COLUNA NAO ENTRA AQUI, E ISSO E' CONSERTO DE DEFEITO MEDIDO. Este
   mesmo `__marca` vive em DOIS hospedeiros -- a alternativa (grade de tres
   colunas) e o veredito (grade de duas). Um `grid-column:3` na regra base
   valia nos dois: no veredito ele criava uma TERCEIRA trilha implicita e
   empurrava o texto para a linha de baixo, com o icone sozinho numa linha
   so'. Visto na captura de 390x844.
   A coluna e' propriedade da POSICAO dentro de cada hospedeiro, nao da
   peca -- entao ela e' escrita por hospedeiro, logo abaixo. */
.uc-resolvedor__marca{
  display:grid;
  justify-items:center;
  gap:var(--sp-1);
  min-width:0;
  color:var(--uc-ink-3);
}

/* Na ALTERNATIVA a marca e' a terceira coluna: e' isso que mantem a borda
   direita alinhada quando um irmao tem marca e o outro nao. */
.uc-resolvedor__alternativa .uc-resolvedor__marca{
  grid-column:3;
}

/* O ICONE. Nome proprio e nao `.uc-resolvedor__marca svg`, por dois motivos
   praticos: dois dos tres desenhos vem da TABELA DE ICONES DO SISTEMA
   (`05-aviso.php`), que exige uma classe como argumento; e a Regra 12 acusa
   classe escrita em template e nunca declarada em CSS -- que e' exatamente o
   que um seletor por elemento deixaria acontecer. `uc-aviso__icone` e
   `uc-botao__icone` ja' usam este nome; este e' o terceiro. */
.uc-resolvedor__icone{
  width:var(--sp-4);
  height:var(--sp-4);
}

/* O VOTO — quantos marcaram esta alternativa (secao 8c: zero questoes
   chegam ao limiar hoje).
   DOIS elementos do antigo (`__pct` e `__bar`) viram UM, e a BARRA NAO VEM.
   Ela existia como `position:absolute` no pe do botao (bancada.css:247), e
   duas medicoes desta tarefa a mataram:
     1. numa coluna auto-dimensionada pelo texto "41%", uma barra de 41%
        mede 12px -- desenho que nao se le, ocupando a linha do controle
        mais importante da tela;
     2. reproduzi-la no pe do botao exigiria uma segunda quantidade grafica
        atravessando a MESMA linha em que o certo/errado tem de dominar.
        Numa tela cujo assunto e' "acertei ou errei", um segundo grafico
        competindo pela mesma faixa e' ruido com cara de dado.
   O numero em mono tabular alinhado a direita ja' e' a quantidade, e quatro
   deles empilhados sao escanaveis sem nenhuma barra.

   `grid-column:3` explicito: sem ele o voto e' o QUARTO filho de uma grade
   de tres colunas e cai na linha 2 da coluna 1 -- medido na captura do
   exemplar de borda, com o "41%" aparecendo embaixo da letra em vez de sob
   a marca. Com a coluna fixada, o voto fica na terceira coluna com marca ou
   sem ela, e a borda direita da lista fica alinhada em toda alternativa. */
.uc-resolvedor__voto{
  grid-column:3;
  justify-self:end;
  min-width:0;
  color:var(--uc-ink-3);
  font-family:var(--uc-mono);
  font-size:var(--uc-s--1);
  font-variant-numeric:tabular-nums lining-nums;
  line-height:var(--uc-lh-controle);
}

/* ⛔ NO CELULAR A MARCA DESCE PARA A LINHA DE BAIXO — defeito MEDIDO na
   captura de 390x844 (05/09/2026): numa alternativa de 271px de largura, a
   coluna do "RESPOSTA CERTA" comia ~110px e o texto da alternativa quebrava
   em tres linhas dentro de 120px. O sinal que existe para NAO competir com
   a leitura estava competindo com ela.
   Duas colunas em vez de tres: o texto fica com a largura inteira e a marca
   vai para a linha seguinte, alinhada com ele. `grid-auto-flow:column` poe o
   icone AO LADO da palavra em vez de acima -- na horizontal sobra largura, e
   e' altura que falta no celular.
   O breakpoint e' o mesmo 900px do resto do componente e do tema.

   ⚠️ ESTE BLOCO FICA DEPOIS DE `__marca` E `__voto`, E A POSICAO E' O
   CONSERTO. Escrito logo abaixo de `__texto` (que e' onde ele nasceu), o
   `grid-column:3` das duas regras seguintes vencia por ordem de fonte e a
   marca continuava na terceira coluna -- so' que agora numa trilha
   IMPLICITA, porque o template ja' tinha ido para duas. Medido no
   navegador a 390px: `grid-template-columns` computava
   `32px 54.36px 135.24px`, tres trilhas onde a regra declara duas. O
   arquivo dizia uma coisa e o computado dizia outra. */
@media (max-width:900px){
  .uc-resolvedor__alternativa{
    grid-template-columns:auto minmax(0,1fr);
  }
  .uc-resolvedor__alternativa .uc-resolvedor__marca{
    grid-column:2;
    grid-auto-flow:column;
    align-items:center;
    justify-content:start;
  }
  .uc-resolvedor__alternativa .uc-resolvedor__voto{
    grid-column:2;
  }
}

/* --------------------------------------------------------------------------
   A REVELACAO — os tres valores de data-uc-resposta
   --------------------------------------------------------------------------
   Cada um pinta TRES coisas: o fio da linha, o fundo da linha e o fio da
   letra. O icone e a palavra vem do `__marca`, e a cor deles desce por
   `color` -- e' heranca, nao um seletor a mais.

   O fundo tingido e' o TERCEIRO sinal, nunca o primeiro: o texto continua
   --uc-ink (16,15:1 sobre certo-soft) e a palavra continua escrita. */
.uc-resolvedor__alternativa[data-uc-resposta="certa"]{
  border-color:var(--uc-certo);
  background:var(--uc-certo-soft);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="certa"] .uc-resolvedor__letra{
  border-color:var(--uc-certo);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="certa"] .uc-resolvedor__marca{
  color:var(--uc-certo);
}

.uc-resolvedor__alternativa[data-uc-resposta="errada"]{
  border-color:var(--uc-errado);
  background:var(--uc-errado-soft);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="errada"] .uc-resolvedor__letra{
  border-color:var(--uc-errado);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="errada"] .uc-resolvedor__marca{
  color:var(--uc-errado);
}

/* ANULADA (secao 7). --uc-alerta e nao --uc-errado: a pessoa nao errou, e
   dizer que errou e' o que a tela faz hoje. Nem certo nem errado tem cor
   propria neste sistema, e alerta e' exatamente ela. */
.uc-resolvedor__alternativa[data-uc-resposta="anulada"]{
  border-color:var(--uc-alerta);
  background:var(--uc-alerta-soft);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="anulada"] .uc-resolvedor__letra{
  border-color:var(--uc-alerta);
  color:var(--uc-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="anulada"] .uc-resolvedor__marca{
  color:var(--uc-alerta);
}

/* DESCARTADA — e este e' o conserto do segundo defeito de contraste da
   secao 5. Tinta desabilitada, ZERO opacidade: 3,22:1 -> 5,34:1.
   A linha continua legivel de proposito: e' relendo o que descartou que a
   pessoa aprende por que errou. */
.uc-resolvedor__alternativa[data-uc-resposta="descartada"]{
  border-color:var(--uc-rule);
  background:var(--uc-field);
  color:var(--uc-desabilitado-ink);
}
.uc-resolvedor__alternativa[data-uc-resposta="descartada"] .uc-resolvedor__letra{
  border-color:var(--uc-rule);
  color:var(--uc-desabilitado-ink);
}

/* --------------------------------------------------------------------------
   O VEREDITO
   --------------------------------------------------------------------------
   Duas colunas: o icone e o texto. Ele repete a palavra que ja' esta na
   alternativa -- e a repeticao e' o desenho, nao redundancia por descuido:
   e' uma regiao viva (`role="status"`), e regiao viva so' anuncia o que
   esta DENTRO dela. Quem usa leitor de tela ouve o resultado sem ter de
   caminhar de volta pelas alternativas.

   A superficie e' tingida e o texto e' --uc-ink (16,15:1). O antigo poe
   --uc-certo no `<b>` sobre o mesmo fundo (5,01:1 medido) -- passa, e
   mesmo assim nao se repete aqui: secao 5. */
/* ⛔ A RESERVA DE CONTEXTO ACIMA DO VEREDITO.
   O destino do Post/Redirect/Get traz `#uc-veredito`, e sem esta linha o
   navegador encostaria o veredito no topo da tela -- a pessoa saberia o
   resultado e perderia de vista a questao que acabou de responder.
   `--sp-9` (96px) e' o token, nao um numero escolhido: ele deixa cerca de uma
   alternativa e meia visivel acima do veredito e ainda mantem o veredito
   (58px medido) e o "Proxima" (44px) dentro da dobra em qualquer viewport a
   partir de 568px -- 96+58+32+44 = 230px. Nada fixo mora no topo desta tela
   (a `uc-tabbar` e' `position:fixed` no PE e some acima de 900px), entao a
   reserva nao precisa compensar barra nenhuma.
   Logica e nao fisica (`-top`) porque a casa escreve assim: `padding-block`,
   `margin-block`. */
.uc-resolvedor__veredito{
  scroll-margin-block-start:var(--sp-9);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--sp-3);
  min-width:0;
  margin:0;
  padding:var(--sp-4);
  border:var(--uc-borda) solid var(--uc-rule);
  border-radius:var(--uc-r-3);
  background:var(--uc-paper-2);
  color:var(--uc-ink);
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
}

/* ⛔ O ANEL DE FOCO SAI AQUI, E ESTE E' O UNICO LUGAR DO TEMA ONDE ISSO SE
   FAZ SEM POR OUTRO NO LUGAR. A regra da casa (cartao.css) e' "so' se tira o
   anel de alguem quando ha prova de que outro anel entrou no lugar". Aqui a
   prova e' outra, e e' mais forte: NAO HA A QUEM TIRAR.

   O veredito e' `tabindex="-1"` -- ele existe para RECEBER o pouso do
   fragmento `#uc-veredito`, para que quem usa leitor de tela seja levado ao
   resultado e o ouca. Ele nao esta na fila do Tab: medido em 06/09/2026 com
   Tab real, 60 paradas seguidas na tela de resolver, o veredito nao aparece
   em NENHUMA. Ou seja, o unico foco que ele recebe na vida e' o pouso.

   E o pouso acende o anel para TODO MUNDO, inclusive para quem chegou de
   clique com o dedo: medido, `outline: solid 2px` depois de tocar numa
   alternativa. O Chrome trata o foco vindo de fragmento como `:focus-visible`
   e o CSS nao tem como separar os dois casos.

   O que se perde tirando: nada que alguem use para se localizar -- o pouso ja
   e' anunciado por posicao (o veredito nasce a 96px do topo), por forma (o
   painel tingido com borda), por icone e pela PALAVRA ("Voce acertou"). Cor
   nao esta sozinha e o anel nao era o sinal.
   O que se ganha: o resultado nao chega emoldurado por um artefato de foco. */
.uc-resolvedor__veredito:focus-visible{
  outline:none;
}

.uc-resolvedor__veredito p{
  grid-column:2;
  margin:0;
  overflow-wrap:anywhere;
}

.uc-resolvedor__veredito p + p{
  margin-top:var(--sp-3);
  color:var(--uc-ink-2);
}

/* O `<b>` do veredito e' a unica coisa da tela que muda de tamanho ao
   revelar. Nao muda de COR: a palavra e' a palavra, e a cor esta no icone
   ao lado dela. */
.uc-resolvedor__veredito b{
  font-weight:var(--uc-w-anunciar);
}

.uc-resolvedor__veredito[data-uc-veredito="certo"]{
  border-color:var(--uc-certo);
  background:var(--uc-certo-soft);
}
.uc-resolvedor__veredito[data-uc-veredito="certo"] .uc-resolvedor__marca{
  color:var(--uc-certo);
}

.uc-resolvedor__veredito[data-uc-veredito="errado"]{
  border-color:var(--uc-errado);
  background:var(--uc-errado-soft);
}
.uc-resolvedor__veredito[data-uc-veredito="errado"] .uc-resolvedor__marca{
  color:var(--uc-errado);
}

.uc-resolvedor__veredito[data-uc-veredito="anulada"]{
  border-color:var(--uc-alerta);
  background:var(--uc-alerta-soft);
}
.uc-resolvedor__veredito[data-uc-veredito="anulada"] .uc-resolvedor__marca{
  color:var(--uc-alerta);
}

/* No veredito o `__marca` e' so' o icone -- nao ha palavra dentro dele,
   porque a palavra e' a frase inteira ao lado. 24px e nao 16: aqui ele e'
   o simbolo do resultado, nao a etiqueta de uma linha. */
.uc-resolvedor__veredito .uc-resolvedor__icone{
  width:var(--sp-5);
  height:var(--sp-5);
}

/* --------------------------------------------------------------------------
   FERRAMENTAS E ATALHOS
   --------------------------------------------------------------------------
   Sem fio acima. O antigo desenha `border-top` aqui (bancada.css:288) para
   descolar as ferramentas do veredito; sem caixa nenhuma na tela, 32px de
   ar dizem a mesma coisa e nao gastam o recurso do fio -- que e' o que a
   tarefa E aprendeu tirando o segundo fio do cartao. */
.uc-resolvedor__ferramentas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  min-width:0;
}

/* A DICA DE TECLADO. Fica visivel em toda largura (secao 9).
   `line-height:--uc-lh-normal` e nao `--uc-lh-controle`: quando ela quebra
   em duas linhas num visor de 390, as teclas de uma linha encostariam nas
   da outra com o entrelinha de controle. */
.uc-resolvedor__atalhos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-1) var(--sp-3);
  min-width:0;
  margin:0;
  color:var(--uc-ink-3);
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
}

/* A TECLA. `<kbd>` e' o elemento da plataforma para isto, e a `01-base.css`
   ja' o poe em mono com o tamanho relativo (--uc-s-rel-mono) -- o que falta
   e' a forma de tampa de tecla.
   --uc-r-1 (4px): e' o raio de DETALHE do sistema, e uma tecla e' detalhe.
   Nao e' controle: `<kbd>` nao se clica. */
.uc-resolvedor__tecla{
  display:inline-grid;
  place-items:center;
  min-width:var(--sp-5);
  padding:0 var(--sp-1);
  border:var(--uc-borda) solid var(--uc-rule-forte);
  border-radius:var(--uc-r-1);
  background:var(--uc-field);
  color:var(--uc-ink-2);
  font-family:var(--uc-mono);
  font-weight:var(--uc-w-realce);
  line-height:var(--uc-lh-controle);
}

/* --------------------------------------------------------------------------
   A NAVEGACAO
   --------------------------------------------------------------------------
   `justify-content:space-between` com "Anterior" a esquerda e "Proxima" a
   direita -- e a "Proxima" e' o SEGUNDO e ultimo uso do acento.
   ⚠️ Na PRIMEIRA questao nao existe "Anterior" (o antigo so' o imprime com
   `$step > 1`), e sem esta regra a "Proxima" iria para a esquerda: um botao
   que muda de lugar entre a questao 1 e a 2 e' o tipo de instabilidade que
   custa clique. `margin-inline-start:auto` no ultimo filho resolve nos dois
   casos com uma declaracao. */
.uc-resolvedor__nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  min-width:0;
}

.uc-resolvedor__nav > :last-child{
  margin-inline-start:auto;
}

/* --------------------------------------------------------------------------
   O TRILHO E O MAPA
   -------------------------------------------------------------------------- */

/* `position:sticky` so' onde ha duas colunas: empilhado, um mapa grudado no
   topo cobriria a questao. O antigo faz o mesmo com uma media query de
   900px (bancada.css:319), e este e' o mesmo breakpoint. */
.uc-resolvedor__trilho{
  display:grid;
  gap:var(--sp-4);
  align-content:start;
  min-width:0;
}

@media (min-width:901px){
  .uc-resolvedor__trilho{
    position:sticky;
    top:var(--sp-4);
  }
}

/* O MAPA. `auto-fill` e nao `auto-fit`, e a diferenca com o montador e'
   deliberada: la' eram quatro controles fixos dividindo uma linha, e um
   trilho vazio no fim desenhava um buraco. Aqui e' um conjunto ABERTO (10 a
   70 questoes) onde o tamanho de um quadrado nao pode depender de quantos
   irmaos ele tem -- se dependesse, o mapa de 10 questoes teria quadrados do
   dobro do tamanho do de 70. `auto-fill` mantem o passo constante.

   `minmax(var(--uc-alvo-toque),1fr)` = 44px de piso, os dois pisos de uma
   vez (secao 10). Num trilho de ~377px cabem 8 por linha; num visor de 390
   empilhado, 7. */
.uc-resolvedor__mapa{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--uc-alvo-toque),1fr));
  gap:var(--sp-2);
  min-width:0;
}

/* O PASSO. Quadrado por padrao (--uc-r-1), redondo quando acertou -- a
   forma e' o sinal que sobrevive ao cinza (secao 5). */
.uc-resolvedor__passo{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:var(--uc-alvo-toque);
  border:var(--uc-borda) solid var(--uc-rule);
  border-radius:var(--uc-r-1);
  background:var(--uc-field);
  color:var(--uc-ink-3);
  font-family:var(--uc-mono);
  font-size:var(--uc-s--1);
  font-variant-numeric:tabular-nums lining-nums;
  line-height:var(--uc-lh-controle);
  text-decoration:none;
  transition:border-color var(--uc-dur-2) var(--uc-ease),
             background-color var(--uc-dur-2) var(--uc-ease);
}

.uc-resolvedor__passo:hover{
  border-color:var(--uc-rule-forte);
  background:var(--uc-paper-2);
}

.uc-resolvedor__passo[data-uc-passo="certa"]{
  border-color:var(--uc-certo);
  border-radius:var(--uc-r-max);
  background:var(--uc-certo-soft);
  color:var(--uc-ink);
}

.uc-resolvedor__passo[data-uc-passo="errada"]{
  border-color:var(--uc-errado);
  background:var(--uc-errado-soft);
  color:var(--uc-ink);
}

.uc-resolvedor__passo[data-uc-passo="anulada"]{
  border-color:var(--uc-alerta);
  background:var(--uc-alerta-soft);
  color:var(--uc-ink);
}

/* A QUESTAO ATUAL. Peso e fio de tinta, nunca o acento (secao 5): sao
   dois usos do acento nesta tela e os dois ja' tem dono.
   Vem DEPOIS das tres regras de resultado de proposito: a questao atual
   pode estar respondida, e "onde estou" tem de vencer "como fui" sem
   apagar o fundo que diz como foi. */
.uc-resolvedor__passo[aria-current="page"]{
  border-color:var(--uc-ink);
  color:var(--uc-ink);
  font-weight:var(--uc-w-anunciar);
}

/* --------------------------------------------------------------------------
   A CALHA DE NUMERAÇÃO DO TEXTO DE APOIO
   --------------------------------------------------------------------------
   ⛔ O DEFEITO QUE ISTO FECHA (07/09/2026): 60 textos de apoio distintos —
   2.016 questões publicadas — serviam a numeração lateral do caderno EMBUTIDA
   na prosa:

     "...um comercial do Enem 02 chamando para inscrições: a propaganda
      mostrava cenas reais de estudantes no momento exato 03 em que..."

   Relato do dono: "se o texto de apoio estiver mal formatado ou difícil pra
   ler, o site perde credibilidade".

   ⛔ E O NÚMERO NÃO PODE SUMIR: o enunciado pergunta pelas "lacunas tracejadas
   nas linhas 10, 19 e 31". Sem ele a questão fica sem resposta. Por isso é
   calha, e não remoção — `uc_apoio_html()` emite `<li value="N">` e o
   navegador desenha o N na margem sozinho.

   `list-style-position:outside` é o que põe o número FORA do texto: com
   `inside` ele voltaria a empurrar a primeira palavra, que é metade do
   problema original. */
.uc-apoio__cabeca{
  margin:0;
  font-weight:600;
  color:var(--uc-ink);
}

.uc-apoio__linhas{
  display:grid;
  gap:var(--sp-1);
  margin:0;
  padding-inline-start:0;
  /* SEM marcador: o numero e um <span> na grade de cada linha (ver
     uc_apoio_html). Tentar desenha-lo com ::marker ja falhou duas vezes --
     com ponto lia como lista de itens, sem ponto colava na palavra. */
  list-style:none;
}

.uc-apoio__linha{
  display:grid;
  /* 2,5em cabe tres digitos com folga: as provas medidas vao ate a linha 44,
     e um caderno de 100 linhas continua cabendo sem reflow. */
  grid-template-columns:2.5em 1fr;
  gap:var(--sp-2);
  margin:0;
}

/* O NUMERO E REFERENCIA, NAO CONTEUDO -- e a hierarquia tem de dizer isso.
   `tabular-nums` alinha a coluna: sem ele "9" e "31" ficam desencontrados e a
   calha deixa de parecer calha. Alinhado a DIREITA porque e assim que numero
   de linha se le, encostado no texto que ele nomeia. */
.uc-apoio__n{
  color:var(--uc-ink-3);
  font-variant-numeric:tabular-nums;
  text-align:right;
  -webkit-user-select:none;
  user-select:none;
}

.uc-apoio__txt{
  min-width:0;
  /* `anywhere` e nao `break-word`, pelo motivo ja registrado no chip, no botao
     e no montador: `break-word` quebra a palavra na linha mas NAO reduz o
     min-content do item de grade, entao a coluna estoura mesmo assim. */
  overflow-wrap:anywhere;
}

/* FIGURA DA QUESTAO (07/09/2026).
   A secao (b) do comentario de medicao deste arquivo previa este dia: "quando
   o extrator passar a trazer imagem, este e' o gancho". A `01-base.css` ja
   declara `img,svg,video,iframe{max-width:100%;height:auto}` para o tema
   inteiro, entao aqui so entra POSICAO -- nada de tamanho, que ja esta
   resolvido, e nada de moldura, que competiria com a moldura que a propria
   figura muitas vezes ja tem (quadrinho, foto). */
.uc-resolvedor__figura{ margin:0 }
.uc-resolvedor__figura img{ display:block; margin-inline:auto }