/* ─────────────────────────────────────────────────────────────────────────
   A LINHA DO TEMPO — um fluxo acontecendo, em tempo real

   *"vamos colocar um fluxo em tempo real com animações e setas, formato linha
   temporal"* + *"existem vários fluxos dentro do nosso app que podem se
   beneficiar muito positivamente dessa animação, como por exemplo ao emitir
   uma venda com e sem nota fiscal no PDV"* (Marcos, 24/09/2026).

   ⚠️⚠️ ELA NÃO SABE O QUE É UMA DEVOLUÇÃO. Recebe passos e qual está andando.
   Quem sabe o que cada passo significa é a tela — é isso que faz o PDV plugar
   os passos dele sem tocar numa linha daqui. Ver `static/js/linha_do_tempo.js`.

   ⚠️ **Vertical, um layout só.** Uma "linha temporal" horizontal precisaria de
   um segundo desenho pro celular, e o detalhe de cada passo (o número do
   pedido, a recusa da SEFAZ) não caberia em nenhum dos dois. Vertical cabe a
   390px sem compromisso e sobra espaço pro que cada passo tem a dizer.
   ───────────────────────────────────────────────────────────────────────── */

.ldt {
  --ldt-marca: 26px;          /* diâmetro do marcador */
  --ldt-trilho: 2px;          /* espessura do fio entre os passos */
  --ldt-vao: 8px;             /* respiro entre marcador e fio */
  --ldt-feito: #16a34a;
  --ldt-agora: #b45309;
  --ldt-parou: #b91c1c;
  --ldt-futuro: #9ca3af;
  --ldt-fio: #e5e7eb;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ldt-p {
  position: relative;
  display: grid;
  grid-template-columns: var(--ldt-marca) minmax(0, 1fr);
  gap: 12px;
  /* O espaço entre um passo e o outro É o trilho: encurtar isto encurta a seta. */
  padding-bottom: 18px;
}
.ldt-p:last-child { padding-bottom: 0; }

/* ── o fio e a seta ──────────────────────────────────────────────────────
   O trilho desce do marcador até o passo seguinte. A seta é um chevron
   desenhado no fim dele — é ela que diz que isto TEM direção, que é o que
   separa uma linha do tempo de uma lista com bolinhas. */
.ldt-p::before {
  content: '';
  position: absolute;
  left: calc(var(--ldt-marca) / 2 - var(--ldt-trilho) / 2);
  top: calc(var(--ldt-marca) + var(--ldt-vao));
  bottom: var(--ldt-vao);
  width: var(--ldt-trilho);
  background: var(--ldt-fio);
  border-radius: var(--ldt-trilho);
}
.ldt-p:last-child::before { display: none; }

.ldt-p::after {
  content: '';
  position: absolute;
  left: calc(var(--ldt-marca) / 2 - 3px);
  bottom: calc(var(--ldt-vao) - 1px);
  width: 6px;
  height: 6px;
  border-right: var(--ldt-trilho) solid var(--ldt-fio);
  border-bottom: var(--ldt-trilho) solid var(--ldt-fio);
  transform: rotate(45deg);
}
.ldt-p:last-child::after { display: none; }

/* ── o marcador ───────────────────────────────────────────────────────── */
.ldt-marca {
  width: var(--ldt-marca);
  height: var(--ldt-marca);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: inset 0 0 0 var(--ldt-trilho) var(--ldt-fio);
  color: var(--ldt-futuro);
  position: relative;
}
.ldt-marca svg { width: 14px; height: 14px; display: block; }

/* ── o corpo ──────────────────────────────────────────────────────────── */
.ldt-corpo { min-width: 0; padding-top: 3px; }
.ldt-rotulo { margin: 0; font-size: .92rem; font-weight: 600; color: #6b7280; }
.ldt-det {
  margin: 2px 0 0;
  font-size: .82rem;
  color: #6b7280;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── os estados ───────────────────────────────────────────────────────── */
.ldt-p.is-feito .ldt-marca { box-shadow: inset 0 0 0 var(--ldt-marca) var(--ldt-feito); color: #fff; }
.ldt-p.is-feito .ldt-rotulo { color: #166534; }
/* ⚠️ O trecho JÁ PERCORRIDO fica verde: é o que mostra o quanto andou sem
   precisar contar bolinhas. */
.ldt-p.is-feito::before,
.ldt-p.is-feito::after { background: var(--ldt-feito); border-color: var(--ldt-feito); }
.ldt-p.is-feito::after { background: none; }

.ldt-p.is-agora .ldt-marca { box-shadow: inset 0 0 0 var(--ldt-trilho) var(--ldt-agora); color: var(--ldt-agora); }
.ldt-p.is-agora .ldt-rotulo { color: var(--ldt-agora); }

.ldt-p.is-parou .ldt-marca { box-shadow: inset 0 0 0 var(--ldt-marca) var(--ldt-parou); color: #fff; }
.ldt-p.is-parou .ldt-rotulo { color: #991b1b; }
.ldt-p.is-parou .ldt-det { color: #991b1b; }

.ldt-p.is-futuro .ldt-rotulo,
.ldt-p.is-futuro .ldt-det { color: var(--ldt-futuro); }

/* ── o que está acontecendo AGORA ────────────────────────────────────────
   Duas animações, e cada uma diz uma coisa: o anel pulsando diz "este passo
   está vivo", e o fio correndo diz "está indo pro próximo". Juntas, é a
   diferença entre uma tela parada e uma tela que a pessoa fica olhando. */
.ldt-p.is-agora .ldt-marca::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ldt-agora) 55%, transparent);
  animation: ldt-anel 1.9s ease-out infinite;
}

.ldt-p.is-agora::before {
  /* ⚠️ O gradiente é MAIOR que o trilho (300%) e corre por ele: é assim que um
     fio de 2px dá sensação de fluxo sem precisar de um elemento que se mova. */
  background: linear-gradient(180deg,
              var(--ldt-feito) 0%,
              var(--ldt-agora) 35%,
              var(--ldt-fio) 70%);
  background-size: 100% 300%;
  animation: ldt-fluxo 1.6s linear infinite;
}
.ldt-p.is-agora::after { border-color: var(--ldt-agora); }

@keyframes ldt-anel {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ldt-agora) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ldt-agora) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ldt-agora) 0%, transparent); }
}
@keyframes ldt-fluxo {
  from { background-position: 0 -100%; }
  to   { background-position: 0 100%; }
}

/* ⚠️ O visto é DESENHADO quando o passo fecha (traço correndo), não aparece de
   estalo: é o que faz "andou mais um" ser percebido sem a pessoa estar olhando
   fixo pro marcador. */
.ldt-p.is-feito .ldt-marca svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: ldt-visto .42s ease-out forwards;
}
@keyframes ldt-visto { to { stroke-dashoffset: 0; } }

/* ── tema escuro ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .ldt { --ldt-fio: #374151; --ldt-futuro: #6b7280; }
  .ldt-marca { background: #111827; }
}

/* ⚠️⚠️ ESTE BLOCO VEM POR ÚLTIMO, E É POR ISSO QUE ELE VALE.
   `@media` NÃO SOMA ESPECIFICIDADE: escrito antes das regras que ele desliga,
   ele vira CSS morto — válido, sem aviso de ferramenta nenhuma, e a
   acessibilidade some calada. Foi o que aconteceu com o `.vectra-shield-pulse`
   em 15/09/2026, e `test_reduzir_movimento_nao_e_regra_morta.py` existe por
   causa disso.

   ⚠️ E "reduzir movimento" NÃO É CONGELAR: quem pede isso quer evitar
   movimento VESTIBULAR (translação, escala, parallax). Uma linha do tempo
   parada não indica atividade nenhuma — ela não seria acessível, seria
   quebrada. Então o anel e o fio que CORREM saem, e no lugar fica um pulso de
   OPACIDADE, que não move nada. */
@media (prefers-reduced-motion: reduce) {
  .ldt-p.is-agora .ldt-marca::after { animation: none; box-shadow: none; }
  .ldt-p.is-feito .ldt-marca svg path { animation: none; stroke-dashoffset: 0; }
  .ldt-p.is-agora::before {
    background: var(--ldt-agora);
    background-size: auto;
    animation: ldt-respira 2.4s ease-in-out infinite;
  }
  .ldt-p.is-agora .ldt-marca { animation: ldt-respira 2.4s ease-in-out infinite; }
}
@keyframes ldt-respira {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}