/* Indicador de passos. O marcador é um ponto terracota que desliza pela trilha e solta um anel ao chegar.
   No celular a linha rola na horizontal dentro dela mesma, sem criar rolagem horizontal na página. */
.indicador {
  --trilha: .5rem;
  flex: 1;
  min-width: 0;
  margin-inline: calc(var(--margem) * -1);
  padding-inline: var(--margem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* as bordas esmaecem, pra o nome cortado parecer rolagem e não defeito */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%);
}
.indicador::-webkit-scrollbar { display: none; }

.indicador-rolagem {
  position: relative;
  display: inline-block;
  min-width: 100%;
  height: var(--alto-topo);
  vertical-align: top;
}

.indicador-lista {
  display: flex;
  align-items: center;
  gap: var(--e5);
  height: 100%;
  padding-bottom: var(--e2);
  white-space: nowrap;
}

.passo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 .125rem;
  color: var(--grafite-claro);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease-suave);
}
@media (hover: hover) { .passo:hover { color: var(--grafite); } }
.passo[aria-current="step"],
.passo.concluido { color: var(--grafite); }

/* O visto: círculo vazio até o passo fechar; aí vira verde e o traço se desenha */
.passo-visto {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 1.5px solid var(--fio-campo);
  border-radius: 50%;
  color: #fff;
  transition: background-color 200ms var(--ease-suave), border-color 200ms var(--ease-suave);
}
.passo-visto svg { width: .75rem; height: .75rem; }
.passo[data-passo="ficha"] .passo-visto { display: none; }
.concluido .passo-visto { background: var(--certo); border-color: var(--certo); }
.concluido .passo-visto .visto path { animation: desenha 420ms var(--ease) 140ms forwards; }
.concluido.seco .passo-visto .visto path { animation: none; stroke-dashoffset: 0; }
.acabou-de-fechar .passo-visto { animation: visto-pop 520ms var(--mola); }
@keyframes visto-pop { from { transform: scale(.5); } }

.trilha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--trilha);
  height: 1px;
  overflow: hidden;
  background: var(--fio);
}
.trilha-feita {
  position: absolute;
  inset: 0;
  background: var(--grafite);
  transform: translateX(calc(var(--feito, 0px) - 100%));
  transition: transform 560ms var(--ease);
}

.marcador {
  position: absolute;
  left: 0;
  bottom: calc(var(--trilha) - .3125rem + .5px);
  width: .625rem;
  height: .625rem;
  margin-left: -.3125rem;
  transform: translateX(var(--x, 0px));
  transition: transform 560ms var(--mola);
}
.marcador-ponto,
.marcador-anel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.marcador-ponto { background: var(--terracota); }
.marcador-anel { border: 1.5px solid var(--terracota); opacity: 0; }
.marcador-anel.pulsa-uma-vez { animation: anel-pulsa 760ms var(--ease) both; }
.marcador.parado { opacity: .45; }
.sem-transicao .marcador,
.sem-transicao .trilha-feita { transition: none; }

@media (min-width: 67.5em) {
  .indicador {
    flex: none;
    margin: 0 0 0 auto;
    padding-inline: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .indicador-rolagem { min-width: 0; }
  .indicador-lista { gap: var(--e6); }
  .passo { font-size: 1rem; }
}