/* Estados da Simulacao de Processo. data-estado no .sp-etapa e a unica fonte
   do visual; esta folha vem depois do tailwind.css e pinta os dois temas.
   A etapa concluida perde a opacidade reduzida da pendente — a diferenca entre
   feita, atual e por fazer nao pode depender so da cor da borda. */

/* --- pendente --- */
.atividade-process-simulation .sp-etapa[data-estado="pendente"] { border-color: #cbd5e1; background: #f1f5f9; opacity: .4; }
.atividade-process-simulation .sp-etapa[data-estado="pendente"] .sp-icone { border-color: #94a3b8; background: #f1f5f9; color: #64748b; }

/* --- ativa --- */
.atividade-process-simulation .sp-etapa[data-estado="ativo"] { border-color: rgb(168 85 247 / .5); background: rgb(168 85 247 / .06); opacity: 1; }
.atividade-process-simulation .sp-etapa[data-estado="ativo"] .sp-icone { border-color: #a855f7; background: rgb(168 85 247 / .12); color: #7e22ce; }

/* --- concluida --- */
.atividade-process-simulation .sp-etapa[data-estado="concluido"] { border-color: #cbd5e1; background: #f1f5f9; opacity: 1; }
.atividade-process-simulation .sp-etapa[data-estado="concluido"] .sp-icone { border-color: #16a34a; background: rgb(22 163 74 / .12); color: #15803d; }

/* --- tema escuro --- */
.dark .atividade-process-simulation .sp-etapa[data-estado="pendente"] { border-color: rgb(51 65 85 / .6); background: rgb(30 41 59 / .3); }
.dark .atividade-process-simulation .sp-etapa[data-estado="pendente"] .sp-icone { border-color: #475569; background: #1e293b; color: #94a3b8; }

.dark .atividade-process-simulation .sp-etapa[data-estado="ativo"] .sp-icone { color: #d8b4fe; }

.dark .atividade-process-simulation .sp-etapa[data-estado="concluido"] { border-color: rgb(51 65 85 / .6); background: rgb(30 41 59 / .3); }
.dark .atividade-process-simulation .sp-etapa[data-estado="concluido"] .sp-icone { border-color: #16a34a; background: rgb(20 83 45 / .35); color: #4ade80; }