/* Células da tabela de dupla entrada: estado de escolha e estado de correção.

   As cores vivem aqui, e não no JavaScript, pelo motivo registrado no
   Plano_Correcao_Bug_Tema_Escuro.md: até 2026-08-17 o JS adicionava
   text-red-300 / text-green-400 por cima de um "text-slate-600
   dark:text-slate-400" que já estava na célula, e a variante dark: vencia nos
   dois temas. O texto nunca mudava de cor — só o fundo, a 10% e 20% de
   opacidade, distinguia acerto de erro. */

.tabela-celula {
  color: #475569;
  cursor: pointer;
}

.dark .tabela-celula {
  color: #cbd5e1;
}

/* Hover só enquanto a célula ainda aceita clique. */
.tabela-celula:not(:disabled):hover {
  background: rgba(99, 102, 241, 0.1);
}

/* Escolhida, antes de verificar. Indigo de propósito: verde ou vermelho aqui
   entregaria a resposta antes da correção. */
.tabela-celula[data-selecionada="true"] {
  background: rgba(99, 102, 241, 0.15);
  color: #4338ca;
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #6366f1;
}

.dark .tabela-celula[data-selecionada="true"] {
  color: #c7d2fe;
}

/* Depois de verificar. */
.tabela-celula[data-estado="correta"] {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #16a34a;
}

.dark .tabela-celula[data-estado="correta"] {
  color: #86efac;
}

.tabela-celula[data-estado="errada"] {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #dc2626;
}

.dark .tabela-celula[data-estado="errada"] {
  color: #fca5a5;
}

/* A célula certa revelada quando a pessoa errou: mais discreta que a escolha,
   para não competir com o erro que ela precisa enxergar. */
.tabela-celula[data-estado="revelada"] {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #16a34a;
}

.dark .tabela-celula[data-estado="revelada"] {
  color: #86efac;
}

/* Grade travada depois da correção: sem cursor de clique, mas sem esmaecer —
   as cores acima é que comunicam o resultado. */
.tabela-celula:disabled {
  cursor: default;
  opacity: 1;
}