/* O widget `etapas` (FeitoWeb.Widgets.Dados, docs/telas.md §2). As etapas de um caminho, num CSS só para os três
   desenhos que a casca tinha copiado: .etapas.passos (os passos de um assistente: era a trilha .wz-* do
   cadastro.css), .etapas.funil (a barra das etapas do registro: era o .etapas do style.css) e .etapas.andamento (o
   que um processo está fazendo: eram as .ac-etapas do acessos.css). As duas telas que ainda escrevem a cópia à mão
   (o cadastro e o fim do cadastro) passam a usar o widget quando migrarem, e a cópia sai de lá. Trazido da casca na
   etapa 1 (26/10/2026). Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token
   (var(--…), com a cor de hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e
   acrílico). Ligado no layout raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca
   (visual.css, componentes.css, navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`)
   vestem por cima, como vestem tudo. Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

/* ------------------------------------------------------------------ o comum */
.etapas { list-style: none; padding: 0; }
.etapas ol { list-style: none; margin: 0; padding: 0; }
/* a etapa que é botão (ir a ela) tem a mesma cara da que não é */
button.etapas-item { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: inherit; cursor: pointer; border-radius: 8px; }
button.etapas-item:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.etapas-quando { font-weight: 400; }

/* ------------------------------------------------------------------ passos (de cadastro.css: a trilha .wz-*) */
.etapas.passos { position: relative; margin: 1.4rem 0 1.3rem; }
/* --marcos: quantos passos (o widget diz); a linha vai do centro da primeira bola ao da última */
.etapas.passos ol { display: grid; grid-template-columns: repeat(var(--marcos, 4), 1fr); }
.etapas.passos .etapas-item { box-sizing: border-box; width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: .4rem; }
.etapas.passos .etapas-bola { position: relative; z-index: 1; box-sizing: border-box; width: 2rem; height: 2rem;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--branco); color: var(--suave); border: 2px solid var(--linha);
  transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s; }
.etapas.passos .etapas-rotulo { font-size: .78rem; font-weight: 600; color: var(--suave); text-align: center;
  transition: color .3s; }
.etapas.passos .atual .etapas-bola { background: var(--verde); border-color: var(--verde); color: var(--e-sobre-cor, #fff);
  transform: scale(1.12); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--verde) 22%, transparent); }
.etapas.passos .atual .etapas-rotulo { color: var(--verde-esc); }
.etapas.passos .feita .etapas-bola { background: var(--verde); border-color: var(--verde); color: var(--e-sobre-cor, #fff);
  font-size: 0; }
.etapas.passos .feita .etapas-bola::before { content: "✓"; font-size: .95rem; }
.etapas.passos .pode:hover .etapas-bola { transform: scale(1.08); }
.etapas-linha { position: absolute; top: 1rem; left: calc(50% / var(--marcos, 4)); right: calc(50% / var(--marcos, 4));
  height: 2px; transform: translateY(-50%); background: var(--linha); }
.etapas-enche { display: block; width: 0; height: 100%; background: var(--verde);
  transition: width .45s cubic-bezier(.4, 0, .2, 1); }
/* a .passos antiga do style.css (a fileira de pílulas do Gestão, sem uso no Feito: `display: flex` e o fundo, o
   recheio e o canto de cada span) pegava aqui também — os passos ficavam espremidos à esquerda, com pílulas no escuro e
   a linha grossa (achado na vitrine do importar, 26/10/2026): o widget desfaz */
.etapas.passos { display: block; gap: 0; flex-wrap: nowrap; font-size: inherit; }
.etapas.passos :is(.etapas-item, .etapas-linha, .etapas-enche, .etapas-bola, .etapas-rotulo, .etapas-quando) {
  padding: 0; }
.etapas.passos :is(span.etapas-item, .etapas-rotulo, .etapas-quando) { background: none; border-radius: 0; }
.etapas.passos .etapas-linha { background: var(--linha); border-radius: 0; }
.etapas.passos .etapas-enche { background: var(--verde); border-radius: 0; }

/* ------------------------------------------------------------------ funil (de style.css: o .etapas) */
.etapas.funil { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.etapas.funil .etapas-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  width: 100%; font-size: .82rem; color: var(--e-suave, #6b7a72); }
.etapas.funil .etapas-bola { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--e-linha-forte, #cfdad3);
  display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--e-cartao, #fff); }
.etapas.funil .feita .etapas-item { color: var(--verde-esc); }
.etapas.funil .feita .etapas-bola { background: var(--verde); border-color: var(--verde); color: var(--e-sobre-cor, #fff); }
.etapas.funil .atual .etapas-item { color: var(--e-tinta, #1d2b24); font-weight: 600; }
.etapas.funil .atual .etapas-bola { border-color: var(--amarelo); color: var(--amarelo); }
.etapas.funil .etapas-quando { font-size: .72rem; color: var(--e-apagado, #8a978f); }
.etapas.funil button.etapas-item:hover .etapas-bola { border-color: var(--verde); }

/* ------------------------------------------------------------------ andamento (de acessos.css: as .ac-etapas) */
.etapas.andamento { margin: 0 0 .4rem; display: grid; gap: .7rem; }
.etapas.andamento > li { position: relative; padding-left: 2rem; color: var(--suave); }
.etapas.andamento > li::before { content: ""; position: absolute; left: 0; top: .1rem; box-sizing: border-box;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--linha); }
.etapas.andamento > li.feita { color: var(--tinta); }
.etapas.andamento > li.feita::before { content: "✓"; display: grid; place-items: center; font-size: .75rem;
  font-weight: 700; color: var(--e-sobre-cor, #fff); background: var(--verde); border-color: var(--verde); }
.etapas.andamento > li.atual { color: var(--tinta); font-weight: 600; }
.etapas.andamento > li.atual::before { border-color: var(--verde); border-right-color: transparent;
  animation: estado-gira .8s linear infinite; }
.etapas.andamento .etapas-quando { margin-left: .35em; color: var(--suave); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .etapas.passos :is(.etapas-bola, .etapas-rotulo, .etapas-enche) { transition: none; }
  .etapas.andamento > li.atual::before { animation: none; }
}