/* Espera da busca de placa. Tudo sob o prefixo .bpg-, para não encostar no
   layout da tela de resultados. Paleta e raios seguem os da plataforma. */

.bpg-raiz {
  text-align: left;
  color: #1e293b;
  padding: 4px 2px 2px;
}

/* ------------------------------------------------------------------ topo */

.bpg-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.bpg-placa {
  flex-shrink: 0;
  min-width: 108px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .08em;
  text-align: center;
}
.bpg-placa-vazia { display: block; height: 22px; border-radius: 5px; }
.bpg-topo-texto { display: grid; gap: 8px; flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- passos */

.bpg-estado { margin: 16px 0 14px; }
.bpg-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bpg-passos li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
}
.bpg-icone { width: 17px; text-align: center; flex-shrink: 0; font-size: 13px; }

.bpg-feito { color: #047857; }
.bpg-feito .bpg-icone { color: #059669; }
.bpg-agora { color: #3730a3; font-weight: 600; }
.bpg-agora .bpg-icone { color: #4f46e5; }
.bpg-espera { color: #94a3b8; }

.bpg-detalhe { color: #64748b; font-weight: 400; }

/* ------------------------------------------------------------- esqueleto */

.bpg-linhas { display: grid; gap: 10px; }
.bpg-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.bpg-foto { width: 74px; height: 50px; border-radius: 8px; flex-shrink: 0; }
.bpg-texto { flex: 1; display: grid; gap: 8px; min-width: 0; }
.bpg-barra { height: 11px; border-radius: 6px; max-width: 100%; }
.bpg-barra-fina { height: 9px; opacity: .75; }

/* O brilho que atravessa os blocos. É o que separa "carregando" de "quebrado":
   um retângulo cinza parado parece conteúdo que falhou. */
.bpg-brilho {
  background: linear-gradient(90deg, #e9eef5 25%, #f4f7fb 37%, #e9eef5 63%);
  background-size: 400% 100%;
  animation: bpg-passa 1.4s ease-in-out infinite;
}
@keyframes bpg-passa {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------- demora */

.bpg-demora {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12.5px;
  line-height: 1.5;
}
.bpg-demora[hidden] { display: none !important; }

/* -------------------------------------------------------- responsividade */

@media (max-width: 520px) {
  .bpg-topo { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .bpg-placa { font-size: 16px; min-width: 92px; }
  .bpg-linha { gap: 10px; padding: 10px; }
  .bpg-foto { width: 56px; height: 40px; }
  .bpg-passos li { font-size: 13px; }
}

/* Quem pediu menos animação no sistema não leva o brilho correndo: os blocos
   ficam parados, com um cinza um pouco mais claro para ainda lerem como
   "chegando" e não como "erro". */
@media (prefers-reduced-motion: reduce) {
  .bpg-brilho { animation: none; background: #eef2f7; }
  .bpg-agora .fa-spin { animation: none; }
}