/* Sequenciar Imagens: sequência editável com clique e arraste, inserção em
   qualquer posição — mesma técnica de indicador usada em Ordenação de
   Eventos (event-sequencing.css), só que a linha fica na lateral (esquerda/
   direita) em vez de em cima/embaixo, porque aqui os itens correm na
   horizontal. */
.atividade-sequenciar-imagens .si-item[data-insercao="antes"]::before,
.atividade-sequenciar-imagens .si-item[data-insercao="depois"]::after {
  content: '';
  position: absolute;
  top: .25rem;
  bottom: .25rem;
  width: 3px;
  border-radius: 9999px;
  background: #6366f1;
}
.atividade-sequenciar-imagens .si-item[data-insercao="antes"]::before { left: -.3rem; }
.atividade-sequenciar-imagens .si-item[data-insercao="depois"]::after { right: -.3rem; }

/* Selo de posição: só existe visualmente enquanto a imagem está dentro da
   sequência construída — na bandeja de disponíveis a posição ainda não
   existe, então o selo fica escondido lá. */
.atividade-sequenciar-imagens .si-posicao {
  display: none;
  align-items: center;
  justify-content: center;
}
.atividade-sequenciar-imagens .si-item.si-na-sequencia .si-posicao {
  display: flex;
}