/* Indicador de slide do Carrossel de Imagens. O JS so escreve data-estado;
   esta folha vem depois do tailwind.css e define cor e largura nos dois temas.
   O ponto ativo e mais largo — a diferenca nao pode ser so de cor. */
.atividade-image-carousel .carrossel-dot[data-estado="inativo"] { background: #e2e8f0; }
.atividade-image-carousel .carrossel-dot[data-estado="inativo"]:hover { background: #94a3b8; }
.atividade-image-carousel .carrossel-dot[data-estado="ativo"]   { background: #6366f1; width: 1rem; }

.dark .atividade-image-carousel .carrossel-dot[data-estado="inativo"] { background: #334155; }
.dark .atividade-image-carousel .carrossel-dot[data-estado="inativo"]:hover { background: #475569; }