/* 07-rastreio.css — Rastreamento: iPhone com a conferência, cartões que saltam e anel de progresso.
   Os arquivos css/ são carregados em ordem numérica pelo index.html: a ordem importa (cascata). */
/* ---------- Rastreamento em 3D (substitui o feed simples) ----------
   Cena em perspectiva: o iPhone com a tela de conferência do sistema
   (CheckinDetailPage, visão do cliente) e, ao lado, balões flutuando em outra
   camada de profundidade, ligados por linha ao item que acabou de ser atualizado.
   Quadro fixo de 560x530 reduzido com zoom (--k, JS): texto nítido em qualquer largura.
   Regras copiadas do sistema e mantidas aqui:
   - cada ITEM fica fixo na lista e é atualizado no lugar a cada recebimento;
   - status do item = receiving_status: Pendente / Parcial / Completo / Sobra; na visão do
     cliente texto e barra ficam neutros e só a faixa lateral do cartão muda de cor
     (CheckinDetailPage.css); devolução aparece como "Devolvido";
   - progresso em ITENS ("x de N itens conferidos"), trava em 99% até fechar
     (completion.ts); o status da carga fica no caminho da página (Carregamento → Encerrado). */
.trk3d {
  position: relative;
  aspect-ratio: 560/530;
  --t-bg: #fff;
  --t-tx: #183f3b;
  --t-mu: #647b7c;
  --t-bd: #dee7e8;
  --t-ac: #1d704b;
  --t-ok: #16a34a;
  --t-part: #d97706;
  --t-ret: #ef4444;
  --t-st: #625d58; /* status e barra do item na visão do cliente (--login-muted) */
}
.t3-scene {
  position: absolute;
  inset: 0;
}
.t3-fit {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 530px;
  zoom: var(--k, 1);
  transform-style: preserve-3d;
}
.t3-rig {
  position: absolute;
  inset: 0;
}
.t3-sway {
  position: absolute;
  inset: 0;
  animation: t3Float 6s ease-in-out infinite;
}
@keyframes t3Float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.trk3d.t3-off .t3-rig {
  transform: translateY(70px) scale(0.94);
  opacity: 0;
}
.t3-rig {
  opacity: 1;
  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
}

/* celular: moldura oficial do iPhone 17 Pro Max (Apple Design Resources, via pacote
   npm @mockifydev/react, MIT) em midia/dispositivos/iphone-17-pro-max-silver.webp. A tela fica
   por baixo do PNG, na área transparente: left 5,2381%, top 2,2667%,
   largura 89,4558%, altura 95,4333%, raio 13,6054% da largura da moldura. */
.t3-phone {
  position: absolute;
  left: 24px;
  top: 8px;
  width: 252px;
  height: 514px;
}
.t3-phone .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.5));
}
/* fundo preto sob a tela, escondido pela borda da moldura: cobre a fresta de ~1px
   entre a tela e a moldura, para o fundo da seção não aparecer em volta da tela */
.t3-phone::before {
  content: '';
  position: absolute;
  inset: 2% 4.35%;
  border-radius: 15.5% / 7.2%;
  background: #000;
}
.t3-screen {
  position: absolute;
  left: 5.2381%;
  top: 2.2667%;
  width: 89.4558%;
  height: 95.4333%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--t-bg);
}
.t3-status {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 30px 0 34px;
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--t-tx);
}
.t3-status span:last-child {
  display: flex;
  gap: 5px;
  align-items: center;
}
.t3-app {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 697px;
  zoom: 0.699;
  background: var(--t-bg);
  color: var(--t-tx);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
}
.t3-app .hd {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--t-bd);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
}
.t3-app .hd > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.t3-app .hd em {
  font-style: normal;
  color: #24843b;
  margin-left: -6px;
}
.t3-app .hd img {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.t3-app .av {
  width: 40px;
  height: 40px;
  border: 1px solid var(--t-bd);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
}
.t3-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 106px;
  bottom: 0;
  overflow: hidden;
}
.t3-roll {
  position: relative;
  padding: 8px 14px 30px;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.t3-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font-size: 12px;
  color: var(--t-mu);
}
.t3-crumb b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  color: var(--t-ac);
  font-weight: 700;
}
.t3-roll h5 {
  margin: 4px 0 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t-tx);
}
.t3-sub {
  display: block;
  color: var(--t-mu);
  font-size: 12px;
  margin-top: 5px;
}
.t3-prog {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 7px;
  font-size: 12px;
  color: var(--t-mu);
}
.t3-prog b {
  color: var(--t-tx);
  font: 700 12px 'DM Mono', ui-monospace, monospace;
}
.t3-bar {
  height: 6px;
  background: var(--t-bd);
  overflow: hidden;
}
.t3-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--t-ac);
  transition: width 0.5s ease;
}
.t3-tab {
  margin: 12px 0;
  height: 44px;
  border-bottom: 1px solid var(--t-bd);
  box-shadow: inset 0 -2px var(--t-ac);
  color: var(--t-ac);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.t3-search {
  height: 44px;
  border: 1px solid var(--t-bd);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--t-mu);
  font-size: 13px;
  margin-bottom: 12px;
}
/* item (cartão .check-item do CheckinDetailPage) */
.t3-it {
  --c: transparent;
  position: relative;
  padding: 15px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--t-bd);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 3px 0 var(--c);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1),
    box-shadow 0.35s,
    background 0.35s;
}
.t3-it.hot {
  transform: scale(1.03);
  box-shadow:
    inset 3px 0 var(--c),
    0 0 0 2px var(--t-ac),
    0 14px 28px -10px rgba(0, 0, 0, 0.35);
}
.t3-it .nm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
}
.t3-it .pill {
  color: var(--t-st);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.t3-it .sup {
  display: block;
  color: var(--t-mu);
  font-size: 11px;
  margin-top: 3px;
}
.t3-it .rc {
  margin-top: 12px;
  white-space: nowrap;
}
.t3-it .rc i {
  display: block;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-mu);
}
.t3-it .rc b {
  display: block;
  width: fit-content;
  margin-top: 3px;
  font: 700 20px 'DM Mono', ui-monospace, monospace;
}
.t3-it .ln {
  height: 5px;
  background: var(--t-bd);
  overflow: hidden;
  margin-top: 12px;
}
.t3-it .ln i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--t-st);
  transition: width 0.35s ease;
}
.t3-it .ft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--t-mu);
}
.t3-it .ft strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--t-tx);
}
.t3-it .last {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid var(--t-bd);
  border-left: 3px solid var(--t-ac);
  border-radius: 10px;
  background: #f4f8f6;
  font-size: 12px;
  font-weight: 700;
}
.t3-it .last:empty {
  display: none;
}
.t3-it .last[data-kind='return'] {
  border-left-color: #b83232;
  background: #fbf4f4;
}
.t3-it[data-st='PARTIAL'] {
  --c: var(--t-part);
}
.t3-it[data-st='COMPLETE'],
.t3-it[data-st='SURPLUS'] {
  --c: var(--t-ok);
  background: #f4f9f6;
}
.t3-it[data-st='DEVOLVIDO'] {
  --c: var(--t-ret);
}
.t3-bump {
  animation: t3Bump 0.45s ease;
}
@keyframes t3Bump {
  35% {
    transform: scale(1.14);
  }
}

/* anel de progresso (fora do celular, à direita) */
.t3-ring {
  position: absolute;
  left: 300px;
  top: 14px;
  width: 240px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--t-bg);
  color: var(--t-tx);
  border: 1px solid var(--t-bd);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.6);
}
.t3-ring svg {
  flex: none;
  width: 66px;
  height: 66px;
  transform: rotate(-90deg);
}
.t3-ring .bg {
  fill: none;
  stroke: var(--t-bd);
  stroke-width: 7;
}
.t3-ring .fg {
  fill: none;
  stroke: var(--t-ac);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transition:
    stroke-dashoffset 0.6s ease,
    stroke 0.4s;
}
.trk3d.t3-done .t3-ring .fg {
  stroke: var(--t-ok);
}
.t3-ring .num {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 21px;
}
.t3-ring .tx i {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #c0392b;
  text-transform: uppercase;
}
.t3-ring .tx i::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s infinite;
}
.trk3d.t3-done .t3-ring .tx i {
  color: var(--t-ok);
}
.trk3d.t3-done .t3-ring .tx i::before {
  animation: none;
}
.t3-ring .tx b {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  margin-top: 3px;
}
.t3-ring .tx small {
  display: block;
  font-size: 12px;
  color: var(--t-mu);
}
/* cartão que salta da tela: cópia do item, sai do celular e vira balão ao lado.
   No balão o cartão usa o layout de telas largas do sistema (recebido à direita, dados em linha). */
.t3-pop {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  color: var(--t-tx);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  transition:
    transform 0.8s cubic-bezier(0.34, 1.25, 0.64, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
}
.t3-pop .t3-it {
  zoom: 0.699;
  width: 300px;
  margin: 0;
  padding: 12px 14px;
  box-shadow:
    inset 3px 0 var(--c),
    0 26px 44px -16px rgba(0, 0, 0, 0.6);
}
.t3-pop .r1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.t3-pop .nm {
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.t3-pop .pill {
  font-size: 10px;
}
.t3-pop .rc {
  margin: 0;
  text-align: right;
}
.t3-pop .rc b {
  margin-left: auto;
  font-size: 16px;
}
.t3-pop .ln,
.t3-pop .ft {
  margin-top: 9px;
}
.t3-pop .ft {
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
}
.t3-pop .ft strong {
  font-size: 13px;
}
.t3-pop .last {
  display: none;
}
.t3-pop.old {
  opacity: 0.82;
  filter: saturate(0.75) brightness(0.97);
}
.t3-pop.gone {
  opacity: 0;
}
/* carimbo final */
.t3-stamp {
  position: absolute;
  left: 52px;
  top: 220px;
  padding: 8px 18px;
  border: 4px solid var(--t-ok);
  border-radius: 12px;
  color: var(--t-ok);
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: rotate(-12deg) scale(2.2);
  pointer-events: none;
  z-index: 5;
}
.trk3d.t3-stamped .t3-stamp {
  animation: t3Stamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes t3Stamp {
  to {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trk3d * {
    animation: none !important;
    transition: none !important;
  }
}