/* ============================================================
   A esteira do ativo — palco que avança sozinho.
   Da nota fiscal ao certificado de descarte, uma etapa por vez.

   🔴 FRONTEIRA: mostra a JORNADA (efeito). A etapa 3 (Autorização)
   é deliberadamente uma caixa fechada.
   Ver .planning/FRONTEIRA-DE-DIVULGACAO.md §4.
   ============================================================ */

.esteira-palco {
  margin-top: 2rem;
  background:
    radial-gradient(64rem 26rem at 12% -20%, color-mix(in srgb, var(--roxo) 34%, transparent), transparent 70%),
    radial-gradient(48rem 24rem at 92% 120%, color-mix(in srgb, var(--rosa) 22%, transparent), transparent 68%),
    var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* ---------- o trilho de etapas ---------- */

.esteira-trilho {
  list-style: none; margin: 0; padding: 1.4rem clamp(1rem,2.5vw,1.8rem) 0;
  display: flex; gap: 0; position: relative;
  overflow-x: auto; scrollbar-width: thin;
}

/* fio de base + fio de progresso */
.esteira-trilho::before,
.esteira-trilho::after {
  content: ""; position: absolute;
  left: clamp(1rem,2.5vw,1.8rem); top: calc(1.4rem + 15px);
  height: 2px; border-radius: 2px;
}
.esteira-trilho::before { right: clamp(1rem,2.5vw,1.8rem); background: var(--line); }
.esteira-trilho::after {
  width: var(--avanco, 0%);
  background: linear-gradient(90deg, var(--roxo), var(--rosa));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rosa) 60%, transparent);
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}

.esteira-trilho li { flex: 1 0 auto; min-width: 5.6rem; }

.esteira-trilho button {
  all: unset; cursor: pointer; display: grid; justify-items: start; gap: .55rem;
  padding-right: 1rem; width: 100%;
}
.esteira-trilho .no {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--fg-faint);
  font: 700 .72rem/1 var(--mono); font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
  transition: border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.esteira-trilho .rot {
  font: 400 .74rem/1.25 var(--mono); letter-spacing: .02em; color: var(--fg-faint);
  /* 28/09 · rótulo em UMA linha: o `max-width: 8ch` quebrava «Nota / fiscal» e «A / entrega» */
  white-space: nowrap; transition: color .3s ease;
}
.esteira-trilho button:hover .no,
.esteira-trilho button:focus-visible .no { border-color: var(--rosa); color: var(--fg); }
.esteira-trilho button:hover .rot { color: var(--fg-soft); }

/* já percorrida */
.esteira-trilho li[data-passou] .no { border-color: color-mix(in srgb, var(--rosa) 55%, transparent); color: var(--fg-soft); }

/* ativa */
.esteira-trilho li[aria-current="step"] .no {
  border-color: var(--rosa); color: #fff; transform: scale(1.18);
  background: linear-gradient(150deg, var(--roxo), var(--rosa));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rosa) 18%, transparent);
}
.esteira-trilho li[aria-current="step"] .rot { color: var(--fg); }

/* o portão, mesmo inativo, se anuncia */
.esteira-trilho li[data-portao] .no { border-style: dashed; border-color: var(--azul); }
.esteira-trilho li[data-portao][aria-current="step"] .no {
  background: linear-gradient(150deg, var(--roxo), var(--azul));
  border-color: var(--azul); border-style: solid;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--azul) 20%, transparent);
}

/* ---------- o palco ---------- */

.esteira-palcos {
  position: relative;
  padding: clamp(1.6rem,3.5vw,2.6rem) clamp(1rem,2.5vw,1.8rem) clamp(1.2rem,2.5vw,1.8rem);
  min-height: 17rem;
}

.etapa-palco {
  position: absolute; inset: clamp(1.6rem,3.5vw,2.6rem) clamp(1rem,2.5vw,1.8rem) auto;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.etapa-palco[data-ativa] { opacity: 1; transform: none; pointer-events: auto; position: relative; inset: auto; }

/* o número, gigante, como marca-d'água */
.etapa-palco .indice {
  font: 800 clamp(3.4rem, 9vw, 6.4rem)/.82 var(--display);
  letter-spacing: -.05em;
  background: linear-gradient(150deg, var(--rosa), color-mix(in srgb, var(--roxo) 70%, var(--fg)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}

.etapa-palco h3 {
  font: 800 clamp(1.5rem,3vw,2.15rem)/1.05 var(--display);
  letter-spacing: -.035em; margin: 0 0 .5rem; color: var(--fg);
}
.etapa-palco .impacto {
  font-size: clamp(1.02rem,1.9vw,1.22rem); line-height: 1.45;
  color: var(--fg); max-width: 46ch; margin: 0 0 .9rem; text-wrap: balance;
}
.etapa-palco .detalhe { font-size: .96rem; color: var(--fg-soft); max-width: 54ch; margin: 0; }

/* faixas de destaque */
.etapa-palco .faixa {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  margin-top: 1.1rem; padding: .7rem .95rem;
  border-left: 2px solid var(--rosa);
  background: color-mix(in srgb, var(--rosa) 9%, transparent);
  font-size: .93rem; color: var(--fg); max-width: 52ch; line-height: 1.5;
}
.etapa-palco .faixa b {
  font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--rosa-texto); flex: none;
}
/* 🔴 16/09 · O `min-width: 0` que faltava, e sem ele a faixa inteira vazava pela direita.
   Relato do titular com foto: a frase «Sem a credencial de domínio no endpoint. A senha
   é…» sumia na borda. Em 390px de largura o vazamento medido chegava a 1.108px.

   A causa é a regra que quase todo layout em flex paga uma vez: um item flex tem
   `min-width: auto`, e isso significa *«nunca menor que o meu conteúdo intrínseco»*. O
   `max-width: 52ch` do pai não vence isso — o texto não quebra linha, ele TRANSBORDA, e
   o `overflow: hidden` do palco corta o que passou.
   *A caixa parecia respeitar o limite porque o limite estava escrito nela; quem não
   respeitava era o filho, e o CSS não reclama disso em lugar nenhum.* */
.etapa-palco .faixa > span { min-width: 0; }
.etapa-palco .faixa.limite { border-left-color: var(--warn-line); background: var(--warn-bg); }
.etapa-palco .faixa.limite b { color: var(--warn-fg); }
.etapa-palco .faixa.portao { border-left-color: var(--azul-texto); background: color-mix(in srgb, var(--azul) 12%, transparent); }
.etapa-palco .faixa.portao b { color: var(--azul-texto); }

/* ---------- controles ---------- */

.esteira-controles {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: 0 clamp(1rem,2.5vw,1.8rem) 1.3rem;
}
.esteira-controles button {
  all: unset; cursor: pointer; display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--fg);
  font: 700 .78rem/1 var(--mono);
  transition: background .16s ease;
}
.esteira-controles button:hover { background: var(--bg-inset); }
.esteira-controles .conta {
  font: 400 .74rem/1 var(--mono); letter-spacing: .1em; color: var(--fg-faint);
  font-variant-numeric: tabular-nums; margin-left: .3rem;
}
.esteira-controles .dica { margin-left: auto; font: 400 .72rem/1 var(--mono); color: var(--fg-faint); }

/* barra de tempo da etapa */
.esteira-tempo { height: 2px; background: var(--line); margin: 0 clamp(1rem,2.5vw,1.8rem) 1.1rem; }
.esteira-tempo i { display: block; height: 100%; width: 0; background: var(--rosa); }
.esteira-palco[data-tocando] .esteira-tempo i { animation: esteira-tempo var(--passo, 7s) linear forwards; }
@keyframes esteira-tempo { from { width: 0; } to { width: 100%; } }

/* legenda */
.esteira-legenda {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  padding: 0 clamp(1rem,2.5vw,1.8rem) 1.4rem;
  margin: 0; font: 400 .76rem/1.5 var(--mono); color: var(--fg-faint);
}
.esteira-legenda span { display: inline-flex; align-items: center; gap: .45rem; }
.esteira-legenda i { width: 9px; height: 9px; border-radius: 50%; background: var(--rosa); }
.esteira-legenda i.fechado { background: linear-gradient(150deg, var(--roxo), var(--azul)); }

/* ---------- telas estreitas ---------- */

@media (max-width: 720px) {
  .esteira-trilho .rot { display: none; }
  /* 28/09 · em 375 px as dez bolinhas cabem na largura, sem rolagem lateral */
  .esteira-trilho li { min-width: 0; flex: 1 1 0; }
  .esteira-trilho button { padding-right: 0; justify-items: center; }
  .esteira-trilho .no { width: 28px; height: 28px; }
  .esteira-palcos { min-height: 21rem; }
  .esteira-controles .dica { display: none; }
}

/* ---------- menos movimento: tudo visível, nada anda ---------- */

@media (prefers-reduced-motion: reduce) {
  .etapa-palco { position: relative; inset: auto; opacity: 1; transform: none; transition: none;
                 padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .etapa-palco:last-child { border-bottom: 0; }
  .esteira-palcos { min-height: 0; }
  .esteira-tempo, .esteira-controles { display: none; }
  .esteira-trilho::after { transition: none; }
}