/* Gabarita · questao.css — alternativa, questão, feedback, mapa (origem: referencia-visual/componentes.css). */
@layer componentes {
  /* ---------------------------------------------------------------------------
     ALTERNATIVA DE QUESTÃO
     <fieldset><legend class="sr-only">Alternativas da questão 14</legend>
     <ol class="alternativas">
       <li class="alternativa">
         <input type="radio" name="q14" id="q14-a" value="A">
         <label for="q14-a" class="alternativa__rotulo">
           <span class="alternativa__letra" aria-hidden="true">A</span>
           <span class="alternativa__texto"><span class="sr-only">A: </span>…</span>
         </label>
         <button type="button" class="alternativa__riscar" aria-pressed="false" aria-label="Riscar alternativa A">…</button>
       </li>
     </ol></fieldset>
     O rótulo ocupa as duas primeiras colunas (subgrid): toda a faixa é tocável, e o
     botão de riscar fica fora do <label> (HTML válido, sem clique fantasma).
     Estados: :hover · :checked (selecionada) · .is-correta · .is-errada · .is-eliminada
     .alternativas.is-corrigida → as demais esmaecem
     --------------------------------------------------------------------------- */
  .alternativas { display: grid; gap: var(--esp-3); margin: var(--esp-6) 0 0; padding: 0; list-style: none; }

  .alternativa {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--esp-3);
    min-height: var(--alvo-confortavel);
    padding-right: var(--esp-1);
    border: var(--borda-grossa) solid var(--linha-forte);
    border-radius: var(--raio-lg);
    background: var(--superficie-alta);
    box-shadow: 0 3px 0 0 var(--linha-forte);
    translate: 0 0;
    transition:
      border-color var(--dur-rapida) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao),
      box-shadow var(--dur-instante) var(--ease-padrao),
      translate var(--dur-instante) var(--ease-padrao);
  }
  .alternativa > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .alternativa__rotulo {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    align-self: stretch;
    padding: var(--esp-2) 0 var(--esp-2) var(--esp-3);
    cursor: pointer;
  }
  .alternativa:not(:has(.alternativa__riscar)) > .alternativa__rotulo { grid-column: 1 / -1; padding-right: var(--esp-3); }
  .alternativa__letra {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: var(--borda-grossa) solid var(--borda-campo);
    border-radius: 12px;
    background: var(--superficie);
    color: var(--tinta-700);
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    font-weight: 800;
    transition: background-color var(--dur-rapida), border-color var(--dur-rapida), color var(--dur-rapida), scale var(--dur-mola) var(--mola-quique);
  }
  .alternativa__letra .icone { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
  .alternativa__texto {
    padding-block: var(--esp-2);
    font-family: var(--fonte-leitura);
    font-size: var(--texto-leitura);
    line-height: 1.5;
    color: var(--texto);
    overflow-wrap: anywhere;
  }
  .alternativa__texto img { max-height: 10rem; width: auto; border-radius: var(--raio-xs); }
  .alternativa__selo {
    display: flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-family: var(--fonte-ui);
    font-size: var(--texto-xs);
    font-weight: 800;
  }
  .alternativa__selo .icone { width: 0.95rem; height: 0.95rem; stroke-width: 3; }
  .alternativa__riscar {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 12px;
    background: transparent;
    color: var(--tinta-400);
    transition: color var(--dur-rapida), background-color var(--dur-rapida);
  }
  .alternativa__riscar .icone { width: 1.25rem; height: 1.25rem; }
  @media (hover: hover) {
    .alternativa:hover { border-color: var(--tinta-700); background: var(--marca-50); }
    .alternativa:hover .alternativa__letra { border-color: var(--tinta-700); }
    .alternativa__riscar:hover { color: var(--tinta-900); background: var(--papel-fundo); }
  }
  .alternativa:has(.alternativa__rotulo:active) { translate: 0 3px; box-shadow: 0 0 0 0 var(--linha-forte); }
  .alternativa:has(> input:focus-visible) { outline: 3px solid var(--foco-anel); outline-offset: 3px; }

  /* selecionada */
  /* :where() mantém a especificidade baixa, para .is-correta/.is-errada vencerem */
  .alternativa:where(:has(> input:checked), .is-selecionada) {
    border-color: var(--tinta-900);
    background: var(--marca-50);
    box-shadow: 0 3px 0 0 var(--tinta-900);
  }
  .alternativa:where(:has(> input:checked), .is-selecionada) .alternativa__letra {
    border-color: var(--tinta-900);
    background: var(--tinta-900);
    color: var(--marca-500);
  }

  /* eliminada (riscada pelo aluno) */
  .alternativa.is-eliminada { border-style: dashed; background: transparent; box-shadow: none; }
  .alternativa.is-eliminada .alternativa__texto {
    color: var(--texto-suave);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--tinta-500);
  }
  .alternativa.is-eliminada .alternativa__letra { border-style: dashed; background: transparent; color: var(--tinta-400); }
  .alternativa.is-eliminada .alternativa__riscar { color: var(--tinta-900); background: var(--papel-fundo); }

  /* corrigida */
  .alternativas.is-corrigida .alternativa { translate: 0 0; }
  .alternativas.is-corrigida .alternativa__rotulo { cursor: default; }
  .alternativas.is-corrigida .alternativa:not(.is-correta, .is-errada) { border-color: var(--linha); box-shadow: none; background: transparent; }
  .alternativas.is-corrigida .alternativa:not(.is-correta, .is-errada) .alternativa__texto { color: var(--texto-suave); }
  .alternativas.is-corrigida .alternativa__riscar { display: none; }

  .alternativa.is-correta { border-color: var(--acerto-500); background: var(--acerto-50); box-shadow: 0 3px 0 0 var(--acerto-700); }
  .alternativa.is-correta .alternativa__letra { border-color: var(--acerto-700); background: var(--acerto-700); color: #fff; }
  .alternativa.is-correta .alternativa__selo { color: var(--acerto-700); }

  .alternativa.is-errada { border-color: var(--erro-500); background: var(--erro-50); box-shadow: 0 3px 0 0 var(--erro-700); }
  .alternativa.is-errada .alternativa__letra { border-color: var(--erro-700); background: var(--erro-700); color: #fff; }
  .alternativa.is-errada .alternativa__selo { color: var(--erro-700); }

  /* ---------------------------------------------------------------------------
     QUESTÃO (leitura)  .questao > .questao__cabecalho + .questao__enunciado + .alternativas
     Zona calma: nada aqui anima enquanto o aluno lê.
     --------------------------------------------------------------------------- */
  .questao { max-width: var(--largura-leitura); margin-inline: auto; }
  .questao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-4); }
  .questao__numero {
    display: inline-grid; place-items: center;
    min-width: 40px; height: 40px;
    padding: 0 var(--esp-2);
    border-radius: 12px;
    background: var(--c-500);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: var(--texto-lg);
    font-variant-numeric: tabular-nums;
    rotate: -4deg;
  }
  .questao__enunciado {
    font-family: var(--fonte-leitura);
    font-size: var(--texto-leitura);
    line-height: var(--altura-leitura);
    font-optical-sizing: auto;
    color: var(--texto);
    hyphens: manual;
    overflow-wrap: break-word;
  }
  /* URL longa ("Disponível em: …") não alarga a página em 390 px: anywhere entra no min-content */
  .questao .md { overflow-wrap: anywhere; }
  .questao__enunciado p { margin: 0 0 0.9em; text-wrap: pretty; }
  .questao__enunciado p:last-child { margin-bottom: 0; }
  .questao__enunciado strong { font-weight: 700; }
  .questao__enunciado mark { background: var(--marca-100); color: inherit; padding: 0 0.1em; border-radius: 3px; }
  .questao__enunciado code { font-family: var(--fonte-mono); font-size: 0.86em; padding: 0.1em 0.35em; border-radius: 6px; background: var(--papel-fundo); }
  .questao__enunciado pre, .codigo {
    margin: 0 0 1em;
    padding: var(--esp-4);
    overflow-x: auto;
    border-radius: var(--raio-md);
    background: var(--papel);
    box-shadow: inset 4px 0 0 var(--c-500), inset 0 0 0 1.5px var(--linha);
    font-family: var(--fonte-mono);
    font-size: 0.84em;
    line-height: 1.55;
    tab-size: 4;
  }
  .questao__enunciado pre code { padding: 0; background: none; font-size: inherit; }
  .questao__enunciado table { border-collapse: collapse; font-family: var(--fonte-ui); font-size: 0.88em; margin-bottom: 1em; }
  .questao__enunciado th, .questao__enunciado td { padding: 0.35em 0.7em; border: 1px solid var(--linha-forte); }
  .questao__enunciado .katex { font-size: 1.06em; }
  .questao__enunciado .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 0.3em; }
  .questao__apoio {
    margin: 0 0 var(--esp-5);
    padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5);
    border-radius: var(--raio-md);
    background: var(--papel);
    box-shadow: inset 3px 0 0 var(--tinta-300);
    font-size: 0.95em;
    color: var(--tinta-700);
  }
  .questao__apoio-titulo { display: block; margin-bottom: var(--esp-2); font-family: var(--fonte-ui); font-size: var(--texto-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
  .questao__figura { margin: var(--esp-4) 0; }
  .questao__figura img { max-height: 24rem; width: auto; border-radius: var(--raio-sm); border: 1px solid var(--linha); background: #fff; }
  .questao__figura figcaption { margin-top: var(--esp-1); font-family: var(--fonte-ui); font-size: var(--texto-xs); color: var(--texto-suave); }
  .questao__rodape { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px dashed var(--linha-forte); }

  /* ---------------------------------------------------------------------------
     FEEDBACK DO MODO TREINO  .feedback--acerto | --erro  (sobe no rodapé do player)
     --------------------------------------------------------------------------- */
  .feedback {
    --fb-50: var(--acerto-50); --fb-500: var(--acerto-500); --fb-700: var(--acerto-700);
    display: grid;
    gap: var(--esp-3);
    width: 100%;
    padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
    background: var(--fb-50);
    border-top: 3px solid var(--fb-500);
  }
  .feedback--erro { --fb-50: var(--erro-50); --fb-500: var(--erro-500); --fb-700: var(--erro-700); }
  .feedback__topo { display: flex; align-items: center; gap: var(--esp-3); }
  .feedback__icone {
    display: grid; place-items: center; flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--fb-700);
    color: #fff;
  }
  .feedback__icone .icone { width: 1.75rem; height: 1.75rem; stroke-width: 3; }
  .feedback__titulo { font-family: var(--fonte-display); font-weight: 800; font-size: var(--texto-xl); line-height: 1.1; color: var(--fb-700); }
  .feedback__texto { font-size: var(--texto-sm); color: var(--tinta-700); font-weight: 600; }
  .feedback__acoes { display: flex; gap: var(--esp-2); }
  .feedback__acoes .botao:last-child { flex: 1; }
  .xp-ganho {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    background: var(--marca-500);
    color: var(--tinta-900);
    border: 2px solid var(--tinta-900);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: var(--texto-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .xp-ganho .icone { width: 1rem; height: 1rem; --icone-tom: #fff; }

  /* ---------------------------------------------------------------------------
     MAPA DE QUESTÕES  .mapa > .mapa__item
     Estados com forma além de cor: não vista = tracejado · respondida = cheia ·
     marcada = bandeirinha no canto · correta = ✓ · errada = ✕ · atual = anel marca-texto
     --------------------------------------------------------------------------- */
  .mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
  .mapa__item {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
    aspect-ratio: 1;
    min-height: 44px;
    padding: 0;
    border: var(--borda-grossa) dashed var(--borda-campo);
    border-radius: 12px;
    background: transparent;
    color: var(--tinta-700);
    font-family: var(--fonte-display);
    font-size: var(--texto-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: scale var(--dur-media) var(--mola-quique), background-color var(--dur-rapida), border-color var(--dur-rapida);
  }
  @media (hover: hover) { .mapa__item:hover { scale: 1.08; } }
  .mapa__item.is-respondida { border-style: solid; border-color: var(--tinta-900); background: var(--tinta-900); color: #FFFDF9; }
  .mapa__item.is-correta { border-style: solid; border-color: var(--acerto-500); background: var(--acerto-50); color: var(--acerto-700); }
  .mapa__item.is-errada { border-style: solid; border-color: var(--erro-500); background: var(--erro-50); color: var(--erro-700); }
  .mapa__item.is-correta::before, .mapa__item.is-errada::before {
    content: "";
    position: absolute; right: 3px; bottom: 3px;
    width: 12px; height: 12px;
    background: currentColor;
    mask: var(--mapa-marca) center / contain no-repeat;
  }
  .mapa__item.is-correta { --mapa-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .mapa__item.is-errada { --mapa-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
  .mapa__item.is-marcada::after {
    content: "";
    position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--marcada-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4M6 4.5c3-1.8 5.5 1.5 8.5 0s4.5-.5 4.5-.5v9s-1.5-1-4.5.5-5.5-1.8-8.5 0'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 0 0 2px var(--superficie);
  }
  .mapa__item.is-atual, .mapa__item[aria-current="step"] { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 6px var(--marca-500); scale: 1.04; }
  .mapa-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-4); font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
  .mapa-legenda .mapa__item { width: 22px; min-height: 22px; border-radius: 7px; display: inline-grid; vertical-align: middle; margin-right: 6px; pointer-events: none; }
  .mapa-legenda .mapa__item::before { width: 9px; height: 9px; right: 2px; bottom: 2px; }
  .mapa-legenda .mapa__item.is-marcada::after { width: 12px; height: 12px; top: -5px; right: -5px; background-size: 8px; }


  /* ---------------------------------------------------------------------------
     Ajustes do site (nucleo/questao.js): o rótulo é um [role=radio] focável em vez
     de <input>+<label>, para que as setas movam o foco sem responder (numa prova,
     responder por engano custa caro). O visual é o mesmo da referência.
     --------------------------------------------------------------------------- */
  .alternativa__rotulo { border-radius: calc(var(--raio-lg) - 2px); }
  .alternativa__rotulo:focus-visible { outline: none; }
  .alternativa:has(> .alternativa__rotulo:focus-visible) { outline: 3px solid var(--foco-anel); outline-offset: 3px; }
  .alternativa__rotulo[aria-disabled="true"] { cursor: default; }
  .alternativas.is-corrigida .alternativa:has(.alternativa__rotulo:active) { translate: 0 0; box-shadow: none; }
  .alternativas.is-corrigida .alternativa:is(.is-correta, .is-errada):has(.alternativa__rotulo:active) { box-shadow: 0 3px 0 0 var(--acerto-700); }
  .alternativa__texto > .md > :first-child, .alternativa__texto p:first-child { margin-top: 0; }
  .alternativa__texto p { margin: 0; }
  .alternativa__texto p + p { margin-top: 0.5em; }
  .alternativa__texto .katex { font-size: 1.04em; }
  .alternativa__texto .questao__figura { margin: var(--esp-2) 0 0; }
  .alternativa__riscar:focus-visible { outline-offset: -2px; }

  /* riscada = eliminada (os dois nomes valem) */
  .alternativa.is-riscada { border-style: dashed; background: transparent; box-shadow: none; }
  .alternativa.is-riscada .alternativa__texto { color: var(--texto-suave); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--tinta-500); }
  .alternativa.is-riscada .alternativa__letra { border-style: dashed; background: transparent; color: var(--tinta-400); }
  .alternativa.is-riscada .alternativa__riscar { color: var(--tinta-900); background: var(--papel-fundo); }

  /* ONHB: cada alternativa vale pontos (barra proporcional + número) */
  .alternativa__pontos {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    margin-top: 6px;
    font-family: var(--fonte-ui); font-size: var(--texto-xs); font-weight: 800; color: var(--tinta-700);
    font-variant-numeric: tabular-nums;
  }
  .alternativa__pontos::before {
    content: ""; width: calc(4rem * var(--proporcao, 0)); min-width: 4px; height: 6px;
    border-radius: var(--raio-pilula); background: var(--c-500);
  }

  .questao { position: relative; }
  .questao__procedencia-link { font-weight: 700; }
  .questao__marcas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
  .questao__titulo-tarefa { margin-bottom: var(--esp-3); font-size: var(--texto-xl); }
  .questao__figuras { display: grid; gap: var(--esp-3); }
  .questao__figura a { display: inline-block; border-radius: var(--raio-sm); }
  .questao__figura-aviso { color: var(--atencao-700) !important; font-weight: 700; }
  .questao__apoio-corpo p { margin: 0 0 0.8em; }
  .questao__apoio-corpo p:last-child { margin-bottom: 0; }
  .md > :first-child { margin-top: 0; }
  .md > :last-child { margin-bottom: 0; }

  .questao__aviso-gabarito {
    display: flex; align-items: center; gap: var(--esp-2);
    margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-md); background: var(--info-50); color: var(--info-700);
    font-size: var(--texto-sm); font-weight: 700;
  }
  .questao__aviso-gabarito .icone { width: 1.125rem; height: 1.125rem; }
  /* 17 §4.5.5 P3: resposta resolvida por IA, não oficial (06 §2.3: atenção + ícone alerta) */
  .questao__aviso-gabarito--ia { background: var(--atencao-50); color: var(--atencao-700); }

  .questao__extras { display: grid; gap: var(--esp-3); margin-top: var(--esp-5); }
  .questao__extras:empty { display: none; }
  .questao__extras details {
    border: var(--borda) solid var(--linha); border-radius: var(--raio-lg);
    background: var(--superficie); overflow: hidden;
  }
  .questao__extras summary {
    display: flex; align-items: center; gap: var(--esp-2);
    min-height: var(--alvo-toque); padding: 0 var(--esp-4);
    font-weight: 800; cursor: pointer; list-style: none;
  }
  .questao__extras summary::-webkit-details-marker { display: none; }
  .questao__extras summary::after {
    content: ""; width: 10px; height: 10px; margin-left: auto;
    border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    rotate: 45deg; translate: 0 -3px; transition: rotate var(--dur-media) var(--mola-quique);
  }
  .questao__extras details[open] summary::after { rotate: 225deg; translate: 0 3px; }
  .questao__extras summary .icone { color: var(--marca-700); --icone-tom: var(--marca-300); }
  .questao__extras details > :not(summary) {
    padding: 0 var(--esp-4) var(--esp-4);
    font-family: var(--fonte-leitura); font-size: var(--texto-leitura); line-height: var(--altura-leitura);
  }
  .questao__extras details > :not(summary) p { margin: 0 0 0.8em; }
  .questao__solucao-item { font-family: var(--fonte-ui) !important; font-weight: 800; font-size: var(--texto-sm) !important; }

  .questao__rodape { align-items: center; justify-content: space-between; font-size: var(--texto-xs); color: var(--texto-suave); }
  .questao__temas { display: flex; flex-wrap: wrap; gap: var(--esp-1-5); margin: 0; padding: 0; list-style: none; }
  .questao__fonte { margin: 0; font-weight: 600; }
  .questao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); width: 100%; }
}