/* Estados locais da atividade Ligar Colunas (id "text-column-matching"). */
.atividade-text-column-matching [data-estado="selecionado"] { outline: 2px solid #6366f1; background: rgb(99 102 241 / .1); }
.atividade-text-column-matching .col-esq-item[data-estado="correta"] { border-color: rgb(34 197 94 / .8); background: rgb(34 197 94 / .1); }
.atividade-text-column-matching .col-esq-item[data-estado="errada"] { border-color: rgb(239 68 68 / .8); background: rgb(239 68 68 / .1); }

/* Cor por par: data-cor é fixo por linha da esquerda (definido no PHP pelo
   índice, ciclando de 6 em 6) e copiado para a direita no momento em que o
   par se forma (correspondencia-colunas.js) — as duas caixas de um mesmo
   par sempre têm a mesma cor, e pares diferentes nunca dividem cor entre
   vizinhos (0-5 alternam). Evita indigo (seleção em andamento) e
   verde/vermelho (reservados para o resultado de "Verificar"). Só aparece
   com data-estado="associado" — depois de verificar, o JS troca esse valor
   para "correta"/"errada" na esquerda (ver acima), então as duas regras
   nunca competem no mesmo elemento ao mesmo tempo. */
.atividade-text-column-matching [data-estado="associado"][data-cor="0"] { border-color: rgb(245 158 11 / .8); background: rgb(245 158 11 / .1); }
.atividade-text-column-matching [data-estado="associado"][data-cor="1"] { border-color: rgb(139 92 246 / .8); background: rgb(139 92 246 / .1); }
.atividade-text-column-matching [data-estado="associado"][data-cor="2"] { border-color: rgb(6 182 212 / .8);   background: rgb(6 182 212 / .1); }
.atividade-text-column-matching [data-estado="associado"][data-cor="3"] { border-color: rgb(217 70 239 / .8);  background: rgb(217 70 239 / .1); }
.atividade-text-column-matching [data-estado="associado"][data-cor="4"] { border-color: rgb(20 184 166 / .8);  background: rgb(20 184 166 / .1); }
.atividade-text-column-matching [data-estado="associado"][data-cor="5"] { border-color: rgb(249 115 22 / .8);  background: rgb(249 115 22 / .1); }

/* Lista de pares conectados — cada linha vira sua própria caixa com borda,
   na cor do par (data-cor copiado do item da esquerda em
   correspondencia-colunas.js), reforçando visualmente qual combinação é
   qual mesmo rolando a lista com as colunas fora da tela. */
.atividade-text-column-matching .colcolunas-par { padding: .625rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.dark .atividade-text-column-matching .colcolunas-par { border-color: #334155; }
.atividade-text-column-matching .colcolunas-par-seta { color: #6366f1; font-weight: 700; }
.dark .atividade-text-column-matching .colcolunas-par-seta { color: #818cf8; }

.atividade-text-column-matching .colcolunas-par[data-cor="0"] { border-color: rgb(245 158 11 / .8); background: rgb(245 158 11 / .08); }
.atividade-text-column-matching .colcolunas-par[data-cor="1"] { border-color: rgb(139 92 246 / .8); background: rgb(139 92 246 / .08); }
.atividade-text-column-matching .colcolunas-par[data-cor="2"] { border-color: rgb(6 182 212 / .8);   background: rgb(6 182 212 / .08); }
.atividade-text-column-matching .colcolunas-par[data-cor="3"] { border-color: rgb(217 70 239 / .8);  background: rgb(217 70 239 / .08); }
.atividade-text-column-matching .colcolunas-par[data-cor="4"] { border-color: rgb(20 184 166 / .8);  background: rgb(20 184 166 / .08); }
.atividade-text-column-matching .colcolunas-par[data-cor="5"] { border-color: rgb(249 115 22 / .8);  background: rgb(249 115 22 / .08); }