/* Estados locais da atividade Parear Imagens (id "image-pairing"). */
.atividade-parear-imagens [data-estado="selecionado"] { outline: 2px solid #6366f1; background: rgb(99 102 241 / .1); }
.atividade-parear-imagens .pi-esq[data-estado="correta"] { border-color: rgb(34 197 94 / .8); background: rgb(34 197 94 / .1); }
.atividade-parear-imagens .pi-esq[data-estado="errada"] { border-color: rgb(239 68 68 / .8); background: rgb(239 68 68 / .1); }

/* Cor por par: data-cor é fixo por cartão 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 (parear-imagens.js) — os dois cartões 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-parear-imagens [data-estado="associado"][data-cor="0"] { border-color: rgb(245 158 11 / .8); background: rgb(245 158 11 / .1); }
.atividade-parear-imagens [data-estado="associado"][data-cor="1"] { border-color: rgb(139 92 246 / .8); background: rgb(139 92 246 / .1); }
.atividade-parear-imagens [data-estado="associado"][data-cor="2"] { border-color: rgb(6 182 212 / .8);   background: rgb(6 182 212 / .1); }
.atividade-parear-imagens [data-estado="associado"][data-cor="3"] { border-color: rgb(217 70 239 / .8);  background: rgb(217 70 239 / .1); }
.atividade-parear-imagens [data-estado="associado"][data-cor="4"] { border-color: rgb(20 184 166 / .8);  background: rgb(20 184 166 / .1); }
.atividade-parear-imagens [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
   parear-imagens.js), reforçando visualmente qual combinação é qual mesmo
   rolando a lista com os cartões fora da tela. */
.atividade-parear-imagens .pi-par { padding: .625rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.dark .atividade-parear-imagens .pi-par { border-color: #334155; }
.atividade-parear-imagens .pi-par-seta { color: #6366f1; font-weight: 700; }
.dark .atividade-parear-imagens .pi-par-seta { color: #818cf8; }

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