/* "Nova versao das alternativas": a correcao PADRAO do /feed/ (a anterior volta
   com `?nova_versao_alternativas=0`; ver `services/nova_versao_alternativas.py`).
   Tudo sob `.nva-card`, a classe que `feed_nova_versao_alternativas.js` poe no
   card DEPOIS da confirmacao: antes de responder, o card e o de sempre.

   CONGRUENCIA COM O CARD ANTES DA RESPOSTA: a alternativa respondida tem a
   MESMA tipografia e a mesma geometria da alternativa a responder (Inter, o
   tamanho do feed -- nada de px fixo, que ignorava a escala da tela --, peso
   400, a letra "A)" do contador, cantos de 10px). O que entra depois da
   resposta e so COR e icone de traco fino; os titulos dos blocos seguem o
   rotulo do topo do card ("QUESTAO DE PROVA": caixa alta pequena).

   A COR DIZ O QUE O BLOCO E: verde = o que esta certo (a correta, "por que e
   a resposta", "como corrigir"); vermelho = o que esta errado (a marcada
   errada, "por que nao e a resposta"); ambar = armadilha da banca; azul so
   na habilidade, que nao e certo nem errado. */

.nva-card {
  --nva-verde: #1a9f5c;
  --nva-verde-escuro: #146c43;
  --nva-verde-fundo: #f1faf5;
  --nva-verde-borda: #c6e8d5;
  --nva-vermelho: #d93f55;
  --nva-vermelho-escuro: #a8243a;
  --nva-vermelho-fundo: #fff5f6;
  --nva-vermelho-borda: #f4d0d6;
  --nva-ambar-escuro: #8a5a12;
  --nva-ambar-fundo: #fff9ef;
  --nva-ambar-borda: #f1e0bd;
  --nva-azul: var(--fxm-purple, #2f5cec);
  --nva-linha: var(--linha, #e6e8ec);
  --nva-tinta: var(--tinta, #14142b);
  --nva-tinta-2: var(--tinta-2, #4a4f5c);
  --nva-tinta-3: var(--tinta-3, #6b7080);
}

/* ---- O padrao continua no DOM, so fora de cena ---- */
.nva-card .vp__abrir,
.nva-card .vp__alt-corpo,
.nva-card [data-vp],
.nva-card [data-alt-porque],
.nva-card [data-sensor-erro],
.nva-card .fd__elimina,
.nva-card .fd__feedback-resultado { display: none !important; }
.nva-card .nva__analise[hidden] { display: none !important; }

/* ---- 1. Cada alternativa e UM bloco: a linha de sempre + a analise dentro ---- */
.nva-card .fd__alt {
  position: relative;
  border: 1.5px solid var(--nva-linha);
  border-radius: 10px;
  background: #fff;
}
.nva-card .fd__alt.nva-alt--certa { border-color: var(--nva-verde); }
.nva-card .fd__alt.nva-alt--marcada { border-color: var(--nva-vermelho); }

/* A linha: so tira a moldura propria (agora e a do bloco) e o recuo da
   alternativa refutada. Tamanho, peso, espacamento e a letra ficam os do feed. */
.nva-card .fd__opcao,
.nva-card .fd__opcao.certa,
.nva-card .fd__opcao.errada,
.nva-card .fd__opcao.refutada:not(.eliminada) {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 8.5px;
  background: transparent;
  color: var(--nva-tinta);
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
}
.nva-card .nva-alt--aberta .fd__opcao { border-radius: 8.5px 8.5px 0 0; }
.nva-card .nva-alt--certa .fd__opcao { background: var(--nva-verde-fundo); }
.nva-card .nva-alt--marcada .fd__opcao { background: var(--nva-vermelho-fundo); }
.nva-card .fd__opcao:focus-visible { outline: 2px solid var(--nva-azul); outline-offset: -3px; }
/* A letra so ganha a cor do estado. */
.fd__card.nva-card[data-tipo="questao_real"] .nva-alt--certa .fd__opcao::before { color: var(--nva-verde-escuro); }
.fd__card.nva-card[data-tipo="questao_real"] .nva-alt--marcada .fd__opcao::before { color: var(--nva-vermelho-escuro); }

/* A ETIQUETA presa na borda de cima, como legenda: nao disputa a linha com o
   texto (antes ela quebrava a alternativa em duas). */
.nva__tag {
  position: absolute;
  top: 0;
  right: 12px;
  z-index: 1;
  transform: translateY(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.nva__tag--certa { background: var(--nva-verde); }
.nva__tag--errada { background: var(--nva-vermelho); }

/* A seta de abrir mora no recuo da direita que o feed ja reserva (era o do X). */
.nva__abrir {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--nva-tinta-3);
  transition: transform .2s ease;
}
.nva__abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nva-alt--aberta .nva__abrir { transform: rotate(180deg); }
.nva-alt--certa .nva__abrir { color: var(--nva-verde-escuro); }
.nva-alt--marcada .nva__abrir { color: var(--nva-vermelho-escuro); }

/* O trecho da armadilha, grifado no texto, so com o bloco aberto. */
.nva__grifo { background: transparent; color: inherit; }
.nva-alt--aberta .nva__grifo {
  padding: 0 2px;
  border-radius: 3px;
  background: #fde9b0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- 2. A analise, dentro do bloco: o corpo de texto da alternativa ---- */
.nva__analise {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--nva-linha);
  font-size: .88em;            /* o mesmo da alternativa (o feed usa .88em) */
  animation: nva-entra .2s ease both;
}
.nva-alt--certa .nva__analise { border-top-color: var(--nva-verde-borda); }
.nva-alt--marcada .nva__analise { border-top-color: var(--nva-vermelho-borda); }

.nva__bloco { padding: 10px 12px; border: 1px solid; border-radius: 8px; }
.nva__bloco p { margin: 0; font-size: 1em; font-weight: 400; line-height: 1.55; color: var(--nva-tinta-2); }
.nva__bloco p + p { margin-top: 4px; }
/* Titulo no tom do rotulo do topo do card: caixa alta pequena, cor do bloco. */
.nva__bloco-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.nva__bloco-icone { display: grid; place-items: center; width: 14px; height: 14px; }
.nva__bloco-icone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.nva__bloco--porque-certa { background: var(--nva-verde-fundo); border-color: var(--nva-verde-borda); }
.nva__bloco--porque-certa .nva__bloco-titulo { color: var(--nva-verde-escuro); }
.nva__bloco--porque-errada { background: var(--nva-vermelho-fundo); border-color: var(--nva-vermelho-borda); }
.nva__bloco--porque-errada .nva__bloco-titulo { color: var(--nva-vermelho-escuro); }
.nva__bloco--armadilha { background: var(--nva-ambar-fundo); border-color: var(--nva-ambar-borda); }
.nva__bloco--armadilha .nva__bloco-titulo { color: var(--nva-ambar-escuro); }
.nva__armadilha-nome { font-weight: 600 !important; color: var(--nva-tinta) !important; }
.nva__bloco--corrigir { background: var(--nva-verde-fundo); border-color: var(--nva-verde-borda); }
.nva__bloco--corrigir .nva__bloco-titulo { color: var(--nva-verde-escuro); }

/* "Ou seja": o resumo, sem caixa a mais -- um fio na cor do bloco. */
.nva__ou-seja {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed;
}
.nva__bloco--porque-certa .nva__ou-seja { border-color: var(--nva-verde-borda); }
.nva__bloco--porque-errada .nva__ou-seja { border-color: var(--nva-vermelho-borda); }
.nva__ou-seja-icone { flex: 0 0 14px; padding-top: .2em; }
.nva__bloco--porque-certa .nva__ou-seja-icone { color: var(--nva-verde-escuro); }
.nva__bloco--porque-errada .nva__ou-seja-icone { color: var(--nva-vermelho-escuro); }
.nva__ou-seja-icone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nva__ou-seja p { color: var(--nva-tinta) !important; }
.nva__ou-seja b { font-weight: 600; }

.nva__troca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nva__troca-antes,
.nva__troca-depois { padding: 2px 7px; border-radius: 6px; font-size: 1em; line-height: 1.45; }
.nva__troca-antes { background: #fbe1e5; color: var(--nva-vermelho-escuro); text-decoration: line-through; text-decoration-thickness: 1px; }
.nva__troca-depois { background: #fff; color: var(--nva-verde-escuro); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nva-verde); }
.nva__troca-seta { display: grid; place-items: center; color: var(--nva-verde-escuro); }
.nva__troca-seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 3. A habilidade, fechando a lista ---- */
.nva__habilidade {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--nva-linha);
  border-radius: 10px;
  background: #fff;
  font-size: .88em;
}
.nva__habilidade-icone { flex: 0 0 14px; padding-top: .15em; color: var(--nva-azul); }
.nva__habilidade-icone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nva__habilidade-rotulo { display: block; font-size: .8em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nva-azul); }
.nva__habilidade p { margin: 2px 0 0; font-size: 1em; font-weight: 400; line-height: 1.45; color: var(--nva-tinta); }

@keyframes nva-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nva__analise { animation: none; }
  .nva__abrir { transition: none; }
}