/* Estados de seleção/correção do Conjunto de Questões. Precisa de CSS
   próprio (não dá pra resolver só com classe Tailwind em .sub-opcao) porque
   o dark: já usado na casca (dark:border-slate-700, dark:bg-slate-800/50,
   dark:text-slate-300) compila para ".dark .dark\:X" — duas classes
   encadeadas, especificidade maior que uma classe Tailwind solta tipo
   "border-indigo-500/60". No tema escuro o slate sempre vencia e a seleção
   nunca aparecia. Aqui a combinação de duas classes + atributo já garante
   especificidade suficiente, então nem precisa duplicar a variante escura
   como seletor à parte — só a cor do texto muda por tema. */
.questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="selecionada"] {
  border-color: #6366f1;
  background: rgb(99 102 241 / 0.1);
  color: #4338ca;
}

.dark .questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="selecionada"] { color: #a5b4fc; }

.questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="correta"] {
  border-color: rgb(34 197 94 / 0.6);
  background: rgb(34 197 94 / 0.1);
  color: #15803d;
}

.dark .questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="correta"] { color: #86efac; }

.questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="errada"] {
  border-color: rgb(239 68 68 / 0.6);
  background: rgb(239 68 68 / 0.1);
  color: #b91c1c;
}

.dark .questao[data-tipo="conjunto-questoes"] .sub-opcao[data-estado="errada"] { color: #fca5a5; }

.questao[data-tipo="conjunto-questoes"] .sub-opcao:disabled { cursor: not-allowed; }