/* Esteira de fábrica · Desenrole.me · só CSS (transform/opacity), sem biblioteca.
   Movimento só com a classe .mov-on na raiz (o JS liga se o sistema permite ou se a pessoa clicar em "Ativar movimento"). */
.esteira-wrap { container-type: inline-size; }
.fabrica {
  --indigo: #14113F; --indigo2: #1d1a55; --violeta: #6D5BFF; --lima: #C8F53C; --nevoa: #F4F3FF;
  --apagado: rgba(244, 243, 255, .66);
  background: radial-gradient(120% 90% at 20% 0%, var(--indigo2), var(--indigo));
  color: var(--nevoa); border-radius: 20px; padding: 18px 0 20px; position: relative; overflow: hidden;
  font-family: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
}
.fabrica .topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 8px; flex-wrap: wrap; }
.fabrica .topo h3 { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.fabrica .topo .sub { font-size: .8rem; color: var(--apagado); }
.motion-toggle { font: inherit; font-size: .78rem; color: var(--nevoa); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.motion-toggle:hover { background: rgba(255, 255, 255, .16); }
.motion-toggle:focus-visible, .esteira:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

/* faixas de grupo */
.grupos { display: flex; position: absolute; top: 0; left: 22px; right: 22px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.grupos span { flex: var(--q) 1 0; border-top: 2px solid rgba(255, 255, 255, .22); padding-top: 5px; }
.grupos span + span { margin-left: 6px; border-top-color: var(--lima); color: var(--lima); }

.esteira { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; padding-bottom: 6px; }
.pista { --h: 98px; position: relative; padding: 70px 22px 4px; min-width: calc(var(--n) * 114px + 44px); }
.trilho { list-style: none; margin: 0; padding: 0; display: flex; }
.trilho > li { flex: 1 1 0; min-width: 0; position: relative; text-align: center; padding: 0 4px; }

/* correia */
.correia { position: absolute; left: calc(22px + (100% - 44px) / (var(--n) * 2)); right: calc(22px + (100% - 44px) / (var(--n) * 2)); top: 90px; height: 12px; border-radius: 99px; background: #0b0930; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
.correia i { position: absolute; inset: 0 -40px 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 10px, transparent 10px 20px); }
.correia b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--prog) * 1%); background: linear-gradient(90deg, rgba(200, 245, 60, .55), rgba(200, 245, 60, .85)); border-radius: 99px; }
.mov-on .correia i { animation: andar 1.1s linear infinite; }
.mov-on .parada-geral .correia i { animation-play-state: paused; }
@keyframes andar { to { transform: translateX(40px); } }
@keyframes andar-v { to { transform: translateY(40px); } }

/* estação */
.no { position: relative; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); border: 2px dashed rgba(244, 243, 255, .42); color: rgba(244, 243, 255, .62); z-index: 1; }
.no svg { width: 24px; height: 24px; }
.feita .no { background: var(--lima); border: 2px solid var(--lima); color: var(--indigo); }
.feita .no::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgba(200, 245, 60, .65); transform: rotate(-14deg); } /* carimbo */
.atual .no { background: var(--violeta); border: 2px solid #fff; color: #fff; box-shadow: 0 0 0 4px rgba(109, 91, 255, .35); }
.atual .no::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--violeta); opacity: .0; }
.mov-on .atual .no::before { animation: pulsa 1.8s ease-out infinite; }
@keyframes pulsa { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.atual .engr { position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--indigo); display: grid; place-items: center; color: var(--lima); border: 1.5px solid var(--lima); }
.atual .engr svg { width: 15px; height: 15px; }
.mov-on .atual .engr svg { animation: gira 4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.espera .no { background: var(--indigo); border: 2px dashed var(--violeta); color: var(--nevoa); box-shadow: 0 0 0 4px rgba(109, 91, 255, .25); }
.espera .engr { color: var(--nevoa); border-color: var(--nevoa); }
.espera .no::before { animation: none !important; opacity: 0; }

/* rótulo */
.rot { display: block; margin-top: 12px; font-size: .78rem; line-height: 1.25; color: var(--apagado); overflow-wrap: normal; hyphens: none; }
.feita .rot { color: var(--nevoa); }
.atual .rot { color: #fff; font-weight: 700; }
@container (max-width: 640px) { .atual .rot { padding-right: 58px; } }
.rot em { display: block; font-style: normal; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; color: var(--lima); }
.espera .rot em { color: #CFC8FF; }
.rot em.ok { color: var(--lima); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* peça */
.peca { position: absolute; left: 50%; top: -48px; width: 44px; height: 48px; margin-left: -22px; z-index: 3; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.peca svg { display: block; }
.mov-on .peca { animation: pula 1.4s ease-in-out infinite; }
@keyframes pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mov-on .peca .roda { transform-box: fill-box; transform-origin: center; animation: gira 1.2s linear infinite; }
.espera .peca { animation: none; opacity: .85; }
.fantasma { position: absolute; left: 50%; top: -46px; width: 44px; height: 44px; margin-left: -22px; border: 2px dashed rgba(200, 245, 60, .7); border-radius: 12px; display: grid; place-items: center; font-size: .6rem; color: var(--lima); text-align: center; line-height: 1.1; z-index: 3; }

/* marco / comemoração */
.marco { position: absolute; right: calc(50% - 38px); top: -6px; z-index: 4; width: 22px; height: 22px; border-radius: 50%; background: var(--lima); color: var(--indigo); display: grid; place-items: center; }
.marco svg { width: 14px; height: 14px; stroke-width: 2.2; }
.festa { position: absolute; left: 50%; top: 26px; width: 0; height: 0; z-index: 5; pointer-events: none; }
.festa u { position: absolute; left: -4px; top: -4px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; background: var(--lima); }
.festa u:nth-child(3n+2) { background: #fff; }
.festa u:nth-child(3n) { background: var(--violeta); }
.mov-on .festa.disparo u { animation: estoura 1.5s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes estoura { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* painel de detalhe */
.detalhe { margin: 14px 22px 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.detalhe h4 { margin: 0 0 6px; font-size: 1.02rem; }
.detalhe .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.detalhe .chip { font-size: .72rem; padding: 3px 9px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); color: var(--nevoa); }
.detalhe .chip.lima { background: var(--lima); border-color: var(--lima); color: var(--indigo); font-weight: 700; }
.detalhe .chip.viol { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.detalhe p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--nevoa); }
.detalhe p.eq { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--lima); color: #fff; }
.detalhe p.eq small { display: block; color: var(--apagado); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.detalhe .aviso { margin-top: 8px; font-size: .78rem; color: #E4E0FF; }
.vazio-msg { text-align: center; padding: 6px 10px; }

/* celular: esteira vertical (container query: vale para a largura do bloco, não da tela) */
@container (max-width: 640px) {
  .grupos { display: none; }
  .esteira { overflow-x: visible; }
  .pista { min-width: 0; padding: 14px 18px 6px; }
  .trilho { flex-direction: column; }
  .trilho > li { flex: none; height: var(--h); display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 0; }
  .trilho > li[data-grupo]::before { content: attr(data-grupo); grid-column: 1 / -1; align-self: end; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin-bottom: 2px; margin-top: -6px; position: absolute; left: 66px; top: 0; }
  .trilho > li[data-grupo="Projeto"]::before { color: var(--lima); }
  .no { margin: 0; }
  .rot { margin-top: 0; font-size: .86rem; }
  .correia { left: calc(18px + 26px - 6px); right: auto; width: 12px; top: calc(14px + var(--h) / 2); bottom: calc(6px + var(--h) / 2); height: auto; }
  .correia i { inset: 0 0 -40px 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 10px, transparent 10px 20px); }
  .correia b { width: auto; right: 0; height: calc(var(--prog) * 1%); top: 0; bottom: auto; background: linear-gradient(180deg, rgba(200, 245, 60, .55), rgba(200, 245, 60, .85)); }
  .mov-on .correia i { animation-name: andar-v; }
  .peca { left: auto; right: 6px; top: 50%; margin: -24px 0 0; }
  .fantasma { left: auto; right: 6px; top: 50%; margin: -22px 0 0; }
  .marco { right: auto; left: 40px; top: calc(50% - 30px); }
  .festa { left: 26px; top: 50%; }
  .detalhe { margin: 12px 14px 0; }
  .fabrica .topo { padding: 0 16px 6px; }
}

/* sem movimento: nenhuma animação existe fora de .mov-on; rótulos e formas já não dependem de cor */

/* Ajuste do Telis: o portal.css tem uma classe .chip propria (fundo branco, cursor de botao) que vazava para os chips do painel de detalhe */
.detalhe .chip { background: transparent; font-weight: 400; cursor: default; }