/* UniTracker · palco de avisos (primeira dobra, colunas 6 a 12)
   Só seletores com prefixo .palco. Cores, raios, sombras e curvas vêm de tokens.css.
   Regra do palco: todo cartão é opaco. O histórico recua em escala e esmaece por cor, nunca por transparência. */

.palco {
  --palco-delta: 46px;          /* quanto cada recibo de trás aparece acima do aviso da frente */
  --palco-visiveis: 3;          /* o aviso da frente e dois recibos */
  --palco-venda-h: 160px;       /* alturas fixas: nada de layout durante o movimento */
  --palco-ajuste-h: 166px;
  --palco-frente-h: max(var(--palco-venda-h), var(--palco-ajuste-h));
  --palco-recibo-h: 60px;
  --palco-pad: 18px;
  --palco-icone-app: 46px;      /* ícone de app em quadrado arredondado */
  --palco-titulo: 1.1875rem;    /* 19px: o aviso da frente em escala de foco */
  --palco-origem: 0.9375rem;
  --palco-no: 36px;             /* nó do rastro */
  --palco-botao-h: 44px;
  --palco-linhas: 1;            /* fileiras de fichas: uma no computador, duas no celular */
  --palco-ficha-h: 36px;
  --palco-ficha-vao: 4px;
  --palco-ficha-vao-l: 3px;
  --palco-ficha-r: 2px;
  --palco-grupo-vao: 14px;      /* vão entre as colunas de cada anúncio */

  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 680px;
  min-height: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  font-family: var(--f-texto);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.palco:focus { outline: none; }
.palco.is-montando *,
.palco.is-montando *::after { transition: none !important; }

.palco__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.palco__icone {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- pilha ---------- */

.palco__topo { position: relative; }

.palco__pilha {
  position: relative;
  height: calc(var(--palco-delta) * (var(--palco-visiveis) - 1) + var(--palco-frente-h));
}

.palco__aviso,
.palco__recibo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--palco-delta) * (var(--palco-visiveis) - 1));
  box-sizing: border-box;
  transform-origin: 50% 0;
}

/* recibo: o aviso já entregue, recolhido, só com a linha do título à mostra */
.palco__recibo {
  height: var(--palco-recibo-h);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px 0;
  background: var(--cartao);
  color: var(--tinta);
  border-radius: var(--r-aviso);
  box-shadow: var(--sombra-widget);
  transition:
    transform 520ms var(--ease-saida),
    background-color 420ms var(--ease-saida),
    color 420ms var(--ease-saida),
    box-shadow 420ms var(--ease-saida);
}
.palco__recibo-app {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  border-radius: 7px;
}
.palco__recibo-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--t-ui);
  line-height: 26px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.palco__recibo-mini {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--papel-fundo);
}
.palco__recibo-hora {
  flex: none;
  font-size: var(--t-rotulo);
  line-height: 26px;
  color: var(--tinta-3);
  transition: color 420ms var(--ease-saida);
}
.palco__recibo img { transition: opacity 420ms var(--ease-saida); }
.palco__recibo[data-recuo="1"] {
  background: color-mix(in srgb, var(--cartao) 55%, var(--papel));
  color: var(--tinta-2);
}
.palco__recibo[data-recuo="2"] {
  background: color-mix(in srgb, var(--cartao) 15%, var(--papel));
  color: var(--tinta-3);
}
.palco__recibo[data-recuo="2"] img { opacity: 0.75; }
.palco__recibo[data-recuo="fora"] {
  background: var(--papel);
  color: var(--papel);
  box-shadow: none;
}
.palco__recibo[data-recuo="fora"] .palco__recibo-hora { color: var(--papel); }
.palco__recibo[data-recuo="fora"] img { opacity: 0; }

/* aviso da frente */
.palco__aviso {
  padding: var(--palco-pad);
  display: grid;
  grid-template-columns: var(--palco-icone-app) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 14px;
  background: var(--cartao);
  border-radius: var(--r-aviso);
  box-shadow: var(--sombra-aviso);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.palco__aviso--venda { height: var(--palco-venda-h); }
.palco__aviso--ajuste { height: var(--palco-ajuste-h); }
.palco__aviso.is-voando { pointer-events: none; }

.palco__app {
  grid-row: 1;
  width: var(--palco-icone-app);
  height: var(--palco-icone-app);
  display: block;
  border-radius: calc(var(--palco-icone-app) * 0.24);
}

.palco__cabeca { grid-row: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }

.palco__linha-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.palco__titulo {
  margin: 0;
  font-size: var(--palco-titulo);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.palco__hora {
  flex: none;
  font-size: var(--t-rotulo);
  line-height: 18px;
  color: var(--tinta-3);
}

.palco__origem {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: var(--palco-origem);
  line-height: 22px;
  color: var(--tinta-2);
  white-space: nowrap;
}
.palco__origem > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.palco__mini {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: var(--papel-fundo);
}

.palco__caminho {
  margin: 0;
  font-size: var(--t-rotulo);
  line-height: 18px;
  color: var(--tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palco__sinal { display: inline-flex; }
.palco__sinal--cai { color: var(--coral-texto); }
.palco__sinal--sobe { color: var(--verde-texto); }

/* rastro: clique, etiqueta, venda, envio e o selo */
.palco__rastro {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(var(--palco-no) + 2px);
}

.palco__no {
  width: var(--palco-no);
  height: var(--palco-no);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta-3);
  transition: background-color 220ms var(--ease-saida), color 220ms var(--ease-saida);
}
.palco__no .palco__icone { width: calc(var(--palco-no) * 0.5); height: calc(var(--palco-no) * 0.5); }
.palco__no.is-aceso { background: var(--cobalto-claro); color: var(--cobalto); }

.palco__fio {
  position: relative;
  flex: 1 1 8px;
  min-width: 6px;
  height: 2px;
  margin-inline: 5px;
  border-radius: 2px;
  background: var(--cobalto-claro);
  overflow: hidden;
}
.palco__fio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cobalto);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 160ms linear;
}
.palco__fio.is-aceso::after { transform: scaleX(1); }

.palco__selo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px 0 11px;
  border-radius: var(--r-controle);
  background: var(--verde-claro);
  color: var(--verde-texto);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 260ms var(--ease-saida), transform 360ms var(--ease-mola);
}
.palco__selo .palco__icone { color: var(--verde); stroke-width: 2.25; }
.palco__selo.is-aceso { opacity: 1; transform: none; }

/* aviso de ajuste */
.palco__aviso--ajuste .palco__linha-titulo { align-items: flex-start; }
.palco__aviso--ajuste .palco__titulo {
  white-space: normal;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* "esperando seu OK": a linha existe desde o começo, só aparece quando ninguém tocou */
.palco__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--t-rotulo);
  line-height: 18px;
  font-weight: 600;
  color: var(--ambar-texto);
  visibility: hidden;
}
.palco__status .palco__icone { width: 14px; height: 14px; stroke-width: 2; }
.palco__aviso--ajuste.is-esperando[data-estado="pergunta"] .palco__status { visibility: visible; }

.palco__acoes {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  position: relative;
  height: var(--palco-botao-h);
}

.palco__estado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms var(--ease-saida), visibility 0s linear 220ms;
}
.palco__aviso[data-estado="pergunta"] .palco__estado--pergunta,
.palco__aviso[data-estado="feito"] .palco__estado--feito,
.palco__aviso[data-estado="mantido"] .palco__estado--mantido {
  visibility: visible;
  opacity: 1;
  transition: opacity 220ms var(--ease-saida), visibility 0s;
}

.palco__pergunta {
  margin-right: auto;
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--tinta);
}

.palco__nota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--tinta-2);
}
.palco__nota--ok { color: var(--verde-texto); }

.palco__botao {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--palco-botao-h);
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-controle);
  font: 600 0.9375rem/1 var(--f-texto);
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    transform 140ms var(--ease-saida),
    box-shadow 160ms ease;
}
.palco__botao--sim { background: var(--cobalto); color: var(--cartao); }
.palco__botao--nao { background: var(--papel-fundo); color: var(--tinta); }
.palco__botao--volta { background: var(--cobalto-claro); color: var(--cobalto); }
.palco__botao--volta .palco__icone { width: 15px; height: 15px; }
.palco__sim-longo { display: none; }

@media (hover: hover) and (pointer: fine) {
  .palco__botao--sim:hover { background: var(--cobalto-forte); }
  .palco__botao--nao:hover { background: var(--fio); }
  .palco__botao--volta:hover { background: var(--cobalto-medio); color: var(--cobalto-forte); }
}
.palco__botao:active { transform: scale(0.96); }
.palco__botao:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 2px;
}

/* aviso estreito: a pergunta entra no botão, o resto do caminho da campanha sai */
@container (max-width: 460px) {
  .palco__pergunta { display: none; }
  .palco__estado--pergunta .palco__botao { flex: 1 1 0; padding: 0 12px; }
  .palco__sim-curto { display: none; }
  .palco__sim-longo { display: inline; }
  .palco__aviso--ajuste .palco__hora { display: none; }
  .palco__conjunto { display: none; }
}
@container (max-width: 300px) {
  .palco__hora { display: none; }
}

/* ---------- painel: duas barras na mesma escala ---------- */

.palco__painel {
  position: relative;
  padding: 12px 20px 20px;
  background: var(--cartao);
  border-radius: var(--r-widget);
  box-shadow: var(--sombra-widget);
}

.palco__painel-topo {
  display: flex;
  flex-wrap: wrap;               /* celular estreito: o controle desce para a linha de baixo, à direita */
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 -8px 10px 0;
}

.palco__periodo {
  margin: 0;
  font-size: var(--t-rotulo);
  line-height: 18px;
  color: var(--tinta-3);
  white-space: nowrap;
}

/* pausa da animação: controle de mídia discreto, sem o formato dos botões de decisão; a área de toque passa de 44 px */
.palco__controle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: var(--r-controle);
  background: transparent;
  color: var(--tinta-3);
  font: 500 var(--t-rotulo)/1 var(--f-texto);
  white-space: nowrap;
  margin-left: auto;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.palco__controle::before { content: ""; position: absolute; inset: -4px -2px; }
.palco__controle[hidden] { display: none; }
.palco__controle .palco__icone { width: 14px; height: 14px; stroke-width: 2; }
.palco__controle-pausa, .palco__controle-toca { display: inline-flex; }
.palco__controle-toca, .palco__controle.is-parado .palco__controle-pausa { display: none; }
.palco__controle.is-parado .palco__controle-toca { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .palco__controle:hover { background: var(--papel); color: var(--tinta); }
}
.palco__controle:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; }

.palco__linha + .palco__linha { margin-top: 18px; }

.palco__cab {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

.palco__rot {
  display: grid;
  margin: 0 auto 0 0;
  font-size: var(--t-ui);
  line-height: 20px;
  font-weight: 600;
  color: var(--tinta);
}

.palco__sigla {
  font-size: var(--t-rotulo);
  line-height: 16px;
  font-weight: 400;
  color: var(--tinta-3);
}

.palco__num {
  min-width: 2ch;
  text-align: right;
  font-size: 1.375rem;
  line-height: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  transition: opacity 200ms var(--ease-saida);
}
.palco__linha--meta .palco__num { color: var(--tinta-2); }
.palco__num.is-trocando { opacity: 0; }

.palco__ut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  margin-bottom: 2px;
  padding: 0 8px 0 4px;
  border-radius: var(--r-controle);
  background: var(--cobalto-claro);
  color: var(--cobalto);
  font-size: var(--t-rotulo);
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}
.palco__ut img { width: 16px; height: 16px; display: block; }

/* fichas: cada uma, uma venda. Enchem coluna por coluna (no celular, em duas fileiras) */
.palco__fichas {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--palco-linhas), minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--palco-ficha-vao);
  row-gap: var(--palco-ficha-vao-l);
  height: var(--palco-ficha-h);
}

.palco__ficha {
  display: block;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--palco-ficha-r);
  transform-origin: 50% 100%;
}
/* venda que ainda não chegou: lugar em branco, sem desenho. Só a vaga da Meta tem contorno */
.palco__ficha--m,
.palco__ficha--caixa {
  border: 1px solid transparent;
  transition: background-color 320ms var(--ease-saida), border-color 320ms var(--ease-saida);
}
.palco__ficha--m.is-vista,
.palco__ficha--caixa.is-pintada { background: var(--cobalto); border-color: var(--cobalto); }
.palco__ficha--m.is-falta { background: var(--coral-claro); border-color: var(--coral); }   /* o buraco: venda que a Meta não viu */
.palco__painel.is-recomecando .palco__ficha { transition-duration: 480ms; }

/* "faltam" fica embaixo do fim das vagas, que andam junto com o total do caixa */
.palco__linha--meta {
  --cols: round(up, calc(var(--palco-total) / var(--palco-linhas)), 1);
  --fim-col: round(up, calc(var(--fim) / var(--palco-linhas)), 1);
}
.palco__falta {
  margin: 6px 0 0;
  text-align: right;
  font-size: var(--t-rotulo);
  line-height: 18px;
  font-weight: 600;
  color: var(--coral-texto);
  transform: translateX(calc((var(--fim-col) - var(--cols)) * (100% + var(--palco-ficha-vao)) / var(--cols)));
  transition: transform 320ms var(--ease-saida);
}

/* caixa: uma coluna por anúncio, todas com a mesma largura de ficha */
.palco__grupos {
  --M: calc(var(--total) / var(--palco-linhas));
  display: flex;
  gap: var(--palco-grupo-vao);
}
.palco__grupo {
  --m: calc(var(--n) / var(--palco-linhas));
  flex: 0 0 calc((100% - (var(--grupos) - 1) * var(--palco-grupo-vao) - (var(--M) - var(--grupos)) * var(--palco-ficha-vao)) * var(--m) / var(--M) + (var(--m) - 1) * var(--palco-ficha-vao));
  min-width: 0;
}

.palco__chave {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 10px 0 0;
}
.palco__chave-img {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: var(--papel-fundo);
  transition: opacity 420ms var(--ease-saida);
}
.palco__chave-nome {
  min-width: 0;
  font-size: var(--t-rotulo);
  line-height: 18px;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palco__chave-conta {
  flex: none;
  display: inline-block;
  font-size: var(--t-ui);
  line-height: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  transition: opacity 200ms var(--ease-saida), color 420ms var(--ease-saida);
}
.palco__chave-conta.is-trocando { opacity: 0; }

/* selo verde de alta: aparece no canto da miniatura quando a pessoa toca em Investir mais */
.palco__alta {
  position: absolute;
  left: 12px;
  top: -6px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid var(--cartao);
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde-texto);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 220ms var(--ease-saida), transform 320ms var(--ease-mola);
}
.palco__alta .palco__icone { width: 10px; height: 10px; stroke-width: 2.5; }
.palco__chave.is-escalada .palco__alta { opacity: 1; transform: none; }
.palco__chave.is-pausada .palco__alta { opacity: 1; transform: none; background: var(--papel-fundo); color: var(--tinta-2); }
.palco__chave.is-pausada .palco__chave-img { opacity: 0.45; }
.palco__chave.is-pausada .palco__chave-conta { color: var(--tinta-3); }

/* ---------- render estático (movimento reduzido): o quadro completo, parado ---------- */

.palco--estatico .palco__pilha {
  height: auto;
  display: grid;
  gap: 12px;
}
.palco--estatico .palco__aviso { position: relative; top: auto; }
.palco--estatico .palco__aviso,
.palco--estatico .palco__estado,
.palco--estatico .palco__no,
.palco--estatico .palco__fio::after,
.palco--estatico .palco__selo,
.palco--estatico .palco__ficha,
.palco--estatico .palco__falta,
.palco--estatico .palco__chave-img,
.palco--estatico .palco__alta,
.palco--estatico .palco__chave-conta { transition: none; }

/* ---------- toque ---------- */

@media (pointer: coarse) {
  .palco__controle { height: 40px; }
}

/* ---------- celular ---------- */

@media (max-width: 760px) {
  .palco {
    --palco-delta: 40px;
    --palco-visiveis: 2;
    --palco-venda-h: 136px;
    --palco-ajuste-h: 166px;
    --palco-recibo-h: 54px;
    --palco-pad: 14px;
    --palco-icone-app: 40px;
    --palco-titulo: 1rem;
    --palco-origem: 0.875rem;
    --palco-no: 30px;
    --palco-linhas: 2;
    --palco-ficha-h: 30px;
    --palco-ficha-vao: 3px;
    --palco-ficha-vao-l: 3px;
    --palco-ficha-r: 1.5px;
    --palco-grupo-vao: 8px;
    max-width: none;
    min-height: 0;
    gap: 14px;
  }
  .palco__aviso { column-gap: 10px; row-gap: 10px; }
  .palco__recibo { padding: 10px 14px 0; gap: 8px; }
  .palco__selo { height: 28px; padding: 0 10px 0 8px; font-size: var(--t-rotulo); }
  .palco__fio { margin-inline: 3px; min-width: 4px; }
  .palco__painel { padding: 10px 14px 16px; }
  .palco__painel-topo { margin: 0 -6px 8px 0; }
  .palco__linha + .palco__linha { margin-top: 14px; }
  .palco__cab { gap: 8px; margin-bottom: 6px; }
  .palco__num { font-size: 1.125rem; line-height: 22px; }

  /* legenda de cada coluna em duas linhas: miniatura e contagem em cima, nome embaixo */
  .palco__chave {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "img conta" "nome nome";
    align-items: center;
    column-gap: 5px;
    row-gap: 3px;
    margin-top: 8px;
  }
  .palco__chave-img { grid-area: img; width: 20px; height: 20px; }
  .palco__chave-conta { grid-area: conta; }
  .palco__chave-nome { grid-area: nome; }
  .palco__recibo-titulo { font-size: 0.875rem; }
}

/* celular estreito: o recibo fica só com o título, para o valor nunca ser cortado */
@media (max-width: 400px) {
  .palco__recibo-hora { display: none; }
}

@media (max-width: 380px) {
  .palco { --palco-ficha-vao: 2px; --palco-grupo-vao: 6px; }
}