/* ════════════════════════════════════════════════════════════
   ACOMPANHAR — a página de quem comprou sem conta
   ------------------------------------------------------------
   Uma coluna, do celular ao desktop. A hierarquia responde, nesta
   ordem, as quatro perguntas de quem abre o link: é o meu pedido,
   onde está, e agora, com quem falo.

   ⚠️ O ESTADO É O MAIOR ELEMENTO DA PÁGINA. Não um selo de 11px
   perdido numa tabela — é a pergunta que trouxe a pessoa aqui.
   ════════════════════════════════════════════════════════════ */

.pagina-acompanhar { background: #f6f7f9; }

/* ⚠️ O `base.css` reserva 116px no topo do `main` para o cabeçalho fixo do
   site. Esta página não tem aquele cabeçalho — ela tem uma barra própria, com
   a marca e mais nada —, e o espaço reservado virava uma faixa cinza vazia
   antes do logo. Medido na bancada. */
.pagina-acompanhar main { padding-top: 0; }

.acp-topo {
  padding: 22px 0;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}
.acp-marca { display: inline-flex; }
.acp-marca img { display: block; height: 30px; width: auto; }

.acp-raiz { padding: 32px 0 64px; }
.acp-carregando { color: #6b7280; }

.acp-pedido {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 28px 26px;
}

/* ── O CABEÇALHO ─────────────────────────────────────────── */
.acp-numero { margin: 0 0 6px; font-size: .9rem; color: #4b5563; }
.acp-numero strong { color: #111827; }
.acp-fraco { color: #8a93a3; font-weight: 400; }

.acp-cab h1 {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #0a3d91;
}
.acp-proximo {
  margin: 10px 0 0;
  color: #374151;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 46ch;
}

/* ── A RÉGUA ─────────────────────────────────────────────────
   Sem trilho colorido e sem bolinha numerada: uma marca por passo,
   e o passo atual carrega o peso. O que já passou fica quieto. */
.acp-trilha {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #eef0f4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acp-passo { display: flex; align-items: center; gap: 11px; font-size: .95rem; }
.acp-passo-marca {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d3d8e0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.acp-passo--feito .acp-passo-marca { background: #0a3d91; border-color: #0a3d91; }
.acp-passo--feito .acp-passo-nome { color: #4b5563; }
.acp-passo--agora .acp-passo-marca {
  border-color: #0a3d91;
  border-width: 5px;
  background: #fff;
}
.acp-passo--agora .acp-passo-nome { color: #111827; font-weight: 700; }
.acp-passo--adiante .acp-passo-nome { color: #9aa2b1; }

/* ── OS FATOS ────────────────────────────────────────────────
   Entrega e pagamento lado a lado no desktop, empilhados no
   celular. Dois blocos, não dois cards. */
.acp-fatos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #eef0f4;
}
.acp-rot {
  display: block;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #8a93a3; font-weight: 700; margin-bottom: 5px;
}
.acp-entrega, .acp-pagamento { display: flex; flex-direction: column; gap: 3px; font-size: .93rem; }
.acp-pag-linha { color: #374151; }
.acp-pago { color: #146c43; }
.acp-pendente { color: #9a6700; }
.acp-pag-data { color: #8a93a3; font-size: .85rem; }

/* ── OS ITENS ────────────────────────────────────────────────
   Fechados no celular para não empurrar o estado para fora da
   tela; abertos no desktop, onde há espaço de sobra. */
.acp-itens { margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef0f4; }
.acp-itens summary {
  cursor: pointer; font-weight: 600; color: #0a3d91; font-size: .93rem;
  padding: 4px 0;
}
.acp-itens ul { list-style: none; margin: 14px 0 0; padding: 0; }
.acp-itens li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 11px 0;
  border-bottom: 1px solid #f1f3f6;
  font-size: .9rem;
}
.acp-item-nome { grid-column: 1; color: #111827; }
.acp-item-var { color: #6b7280; }
.acp-item-medida { grid-column: 1; color: #8a93a3; font-size: .85rem; }
.acp-item-valor { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #374151; }

.acp-conta {
  display: grid; grid-template-columns: 1fr auto;
  gap: 7px 16px; margin-top: 16px; font-size: .9rem; color: #4b5563;
}
.acp-conta .acp-total { font-weight: 700; color: #111827; font-size: 1.05rem; padding-top: 6px; }

/* ── O QUE JÁ ACONTECEU ───────────────────────────────────── */
.acp-marcos { margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef0f4; }
.acp-marcos h2, .acp-ajuda h2 {
  margin: 0 0 12px;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: #8a93a3; font-weight: 700;
}
.acp-marcos ol { list-style: none; margin: 0; padding: 0; }
.acp-marcos li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid #f1f3f6;
  font-size: .9rem; color: #374151;
}
.acp-marcos li:last-child { border-bottom: 0; }

.acp-ajuda { margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef0f4; }
.acp-ajuda p { margin: 0 0 14px; color: #4b5563; font-size: .93rem; }

/* ── O VAZIO ─────────────────────────────────────────────────
   Quem chega com link ruim precisa saber o que fazer, não só que
   deu errado. */
.acp-vazio {
  max-width: 520px;
  margin: 0 auto; background: #fff;
  border: 1px solid #e4e7ec; border-radius: 10px; padding: 34px 28px;
}
.acp-vazio h1 { margin: 0 0 10px; font-size: 1.4rem; color: #111827; letter-spacing: -.01em; }
.acp-vazio p { margin: 0 0 12px; color: #4b5563; line-height: 1.6; }
.acp-vazio-ajuda { color: #6b7280; font-size: .93rem; }
.acp-vazio .btn { margin-top: 10px; }

/* ── CELULAR ─────────────────────────────────────────────────
   Uma coluna, respiro menor nas bordas, e os fatos empilham. */
@media (max-width: 600px) {
  .acp-raiz { padding: 20px 0 48px; }
  .acp-pedido, .acp-vazio { padding: 22px 18px; border-radius: 8px; }
  .acp-fatos { grid-template-columns: 1fr; gap: 16px; }
}

/* No desktop os itens já vêm abertos: há espaço, e esconder o que
   cabe obrigaria um clique sem motivo. */
@media (min-width: 601px) {
  .acp-itens[open] summary { margin-bottom: 2px; }
}