/* Estados de Marcar Palavras. data-estado no .palavra-item e a unica fonte do
   visual; esta folha vem depois do tailwind.css e pinta os dois temas.
   A cor do texto tambem muda, nao so o fundo: o par "text-slate-700
   dark:text-slate-300" que o PHP renderizava antes mascarava o verde/vermelho/
   ambar do feedback, deixando os tres resultados com a mesma cor de letra. */

.atividade-mark-the-words .palavra-item[data-estado="padrao"] { color: #334155; }
.atividade-mark-the-words .palavra-item[data-estado="padrao"]:hover { background: #e2e8f0; }

.atividade-mark-the-words .palavra-item[data-estado="marcada"]   { background: rgb(99 102 241 / .15); color: #3730a3; box-shadow: inset 0 0 0 1px rgb(99 102 241 / .5); }
.atividade-mark-the-words .palavra-item[data-estado="acerto"]    { background: rgb(34 197 94 / .18);  color: #15803d; box-shadow: inset 0 0 0 1px rgb(34 197 94 / .5); }
.atividade-mark-the-words .palavra-item[data-estado="erro"]      { background: rgb(239 68 68 / .18);  color: #b91c1c; box-shadow: inset 0 0 0 1px rgb(239 68 68 / .5); }
.atividade-mark-the-words .palavra-item[data-estado="esquecida"] { background: rgb(245 158 11 / .18); color: #b45309; box-shadow: inset 0 0 0 1px rgb(245 158 11 / .5); }

/* --- tema escuro --- */
.dark .atividade-mark-the-words .palavra-item[data-estado="padrao"] { color: #cbd5e1; }
.dark .atividade-mark-the-words .palavra-item[data-estado="padrao"]:hover { background: #334155; }

.dark .atividade-mark-the-words .palavra-item[data-estado="marcada"]   { color: #c7d2fe; }
.dark .atividade-mark-the-words .palavra-item[data-estado="acerto"]    { color: #86efac; }
.dark .atividade-mark-the-words .palavra-item[data-estado="erro"]      { color: #fca5a5; }
.dark .atividade-mark-the-words .palavra-item[data-estado="esquecida"] { color: #fcd34d; }