/* Página de acompanhamento do pedido (pedido.html). Reaproveita o resumo do checkout (ck-*). */
body.pg { display: flex; flex-direction: column; min-height: 100dvh; --pad: var(--space-4); }
@media (min-width: 900px) { body.pg { --pad: var(--space-8); } }
.pg-top { background: var(--color-ink); color: var(--color-on-dark); padding-top: env(safe-area-inset-top); }
.pg-top__in { max-width: var(--size-ck-feito-max); margin: 0 auto; padding: var(--space-3) var(--pad); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pg-top__in > a:first-child { display: flex; }
.pg-top__logo { display: block; height: var(--size-logo); width: auto; }
@media (min-width: 900px) { .pg-top__logo { height: var(--size-logo-desktop); } }
.pg-top__link { display: inline-flex; align-items: center; height: var(--size-touch); padding: 0 var(--space-1-5); color: var(--color-on-dark); font-size: var(--fs-14); font-weight: var(--fw-bold); text-decoration: none; }
.pg-top__link:hover { color: var(--color-brand); }
.pg-main { flex: 1; width: 100%; max-width: var(--size-ck-feito-max); margin: 0 auto; padding: var(--space-5) var(--pad) var(--space-10); display: flex; flex-direction: column; gap: var(--space-3-5); }

.ac-card { position: relative; overflow: hidden; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.ac-h { margin: 0 0 var(--space-3-5); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: var(--fs-17); font-weight: var(--fw-extrabold); }
.ac-h span { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-ink-3); }

.ac-topo { box-shadow: var(--shadow-2); padding-top: var(--space-6); }
.ac-topo__faixa { position: absolute; left: 0; right: 0; top: 0; height: var(--space-1-5); }
.ac-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ac-topo__num { margin: 0; font-size: var(--fs-26); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.ac-topo__data { margin: var(--space-1) 0 var(--space-4); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--color-ink-3); }
.ac-topo__data:has(+ .ac-selo) { margin-bottom: var(--space-2-5); }
.ac-selo { margin: 0 0 var(--space-4); display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--size-pill-lg); padding: 0 var(--space-3); border-radius: var(--radius-btn-sm); background: var(--color-bg); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-ink-2); white-space: nowrap; }
.ac-selo strong { color: var(--color-ink); font-weight: var(--fw-extrabold); }
.ac-selo--primeira { background: var(--color-ink); color: var(--color-on-dark-2); }
.ac-selo--primeira strong { color: var(--color-brand); }
.ac-status { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3-5); border-radius: var(--radius-bar-btn); background: var(--color-brand-50); border: var(--border-1) solid var(--color-brand-100); line-height: var(--lh-relaxed); }
.ac-status__ic { flex: none; width: var(--size-ck-ic); height: var(--size-ck-ic); border-radius: var(--radius-md); background: var(--color-brand); display: grid; place-items: center; }
.ac-status strong { display: block; font-size: var(--fs-18); font-weight: var(--fw-extrabold); }
.ac-status div > span:last-child { display: block; font-size: var(--fs-13-5); font-weight: var(--fw-medium); color: var(--color-ink-2); }
.ac-status__cap { display: block; font-size: var(--fs-12); font-weight: var(--fw-extrabold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-3); }
.ac-topo.is-cancelado .ac-status { background: var(--color-err-50); border-color: var(--color-err-50); }
.ac-topo.is-cancelado .ac-status__ic { background: var(--color-err); color: var(--color-on-dark); }

.ac-pag { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-pag--ok .ac-status { background: var(--color-ok-50); border-color: var(--color-ok-100); }
.ac-pag--ok .ac-status__ic { background: var(--color-ok); color: var(--color-on-dark); }
.ac-pag .btn { justify-content: center; gap: var(--space-1-5); }
.ac-pag__nota { margin: 0; text-align: center; font-size: var(--fs-12-5); font-weight: var(--fw-medium); color: var(--color-ink-3); }
.ac-pag__nota a { color: inherit; font-weight: var(--fw-bold); }
.ac-pag__erro { margin: 0; font-size: var(--fs-13-5); font-weight: var(--fw-semibold); color: var(--color-err); }

.ac-rastreio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-on-dark); }
.ac-rastreio .ac-status__cap { color: var(--color-on-dark-3); }
.ac-rastreio__txt { flex: 1 1 200px; }
.ac-rastreio__cod { display: block; font-size: var(--fs-22); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-label); color: var(--color-brand); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-rastreio__acoes { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ac-rastreio__acoes .btn { flex: 1 1 140px; justify-content: center; text-decoration: none; gap: var(--space-1-5); }

/* etapas do pedido em cartões (também usadas no admin) */
.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.etapa { position: relative; --st: var(--color-ink-3); --st-50: var(--color-bg); }
.etapa:not(:first-child)::before {
  content: ""; position: absolute;
  left: calc(var(--space-4) + var(--size-ck-ic) / 2 - var(--border-1)); top: calc(-1 * var(--space-5)); height: var(--space-5);
  width: var(--border-2); background: var(--color-line-2);
}
.etapa--azul { --st: var(--color-st-azul); --st-50: var(--color-st-azul-50); }
.etapa--ambar { --st: var(--color-st-ambar); --st-50: var(--color-st-ambar-50); }
.etapa--laranja { --st: var(--color-st-laranja); --st-50: var(--color-st-laranja-50); }
.etapa--roxo { --st: var(--color-st-roxo); --st-50: var(--color-st-roxo-50); }
.etapa--indigo { --st: var(--color-st-indigo); --st-50: var(--color-st-indigo-50); }
.etapa--verde { --st: var(--color-st-verde); --st-50: var(--color-st-verde-50); }
.etapa__card {
  width: 100%; display: flex; align-items: flex-start; gap: var(--space-3-5);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-bg); border: var(--border-1) solid var(--color-line);
  font: inherit; color: var(--color-ink); text-align: left; line-height: var(--lh-relaxed);
}
.etapa__ic {
  flex: none; width: var(--size-ck-ic); height: var(--size-ck-ic); border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--st-50); color: var(--st);
}
.etapa__txt { min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); padding-top: var(--space-0-5); }
.etapa__tit { display: block; font-size: var(--fs-15); font-weight: var(--fw-extrabold); }
.etapa__tit > span { margin-left: var(--space-2); vertical-align: middle; }
.etapa__desc { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--color-ink-2); }
.etapa__extra { font-size: var(--fs-12-5); font-weight: var(--fw-semibold); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.etapa__extra strong { color: var(--color-ink); }
.etapa__ok, .etapa__cadeado { display: inline-flex; color: var(--color-ink-3); white-space: nowrap; }
.etapa__atual {
  display: inline-flex; align-items: center; height: var(--size-pill-sm); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); border: var(--border-1) solid var(--color-ok-100); background: var(--color-surface);
  font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-ok);
}
.etapa.is-atual { --st: var(--color-ok); --st-50: transparent; }
.etapa.is-atual .etapa__card { background: var(--color-ok-50); border-color: var(--color-ok-100); }
.etapa.is-atual .etapa__tit { color: var(--color-ok); }
.etapa.is-futuro .etapa__card, .etapa.is-bloqueado .etapa__card { background: var(--color-surface); border-style: dashed; }
.etapa.is-futuro .etapa__ic, .etapa.is-bloqueado .etapa__ic { background: var(--color-bg); color: var(--color-ink-3); }
.etapa.is-futuro .etapa__tit, .etapa.is-bloqueado .etapa__tit { color: var(--color-ink-3); font-weight: var(--fw-bold); }
.etapa.is-futuro .etapa__desc, .etapa.is-bloqueado .etapa__desc { color: var(--color-ink-3); }

.ac-itens { padding: var(--space-5) 0 0; }
.ac-itens .ac-h { padding: 0 var(--space-5); }
.ac-itens .ck-grupo { padding-inline: var(--space-5); }
.ac-totais { margin-top: var(--space-2); padding-inline: var(--space-5); padding-bottom: var(--space-5); }
.ac-end { margin: 0; display: flex; gap: var(--space-2-5); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--color-ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.ac-end strong { color: var(--color-ink); }
.ac-end svg { margin-top: var(--inset-3); }
.ac-wa { text-decoration: none; }

/* Guardar o link do pedido */
.ac-link { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-link__txt { display: flex; flex-direction: column; gap: var(--space-1); }
.ac-link__txt strong { font-size: var(--fs-16); font-weight: var(--fw-extrabold); }
.ac-link__txt span { font-size: var(--fs-13-5); font-weight: var(--fw-medium); color: var(--color-ink-2); }
.ac-link__txt a { color: inherit; font-weight: var(--fw-bold); }
.ac-link__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ac-link__acoes .btn { flex: 1 1 180px; justify-content: center; gap: var(--space-1-5); }
.ac-link__acoes .ac-link__wa { flex: 1 1 100%; text-decoration: none; }

/* Acompanhar pedido sem o link: nº + e-mail */
.ac-busca { display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; width: 100%; margin: 0 auto; }
.ac-busca__tit { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-extrabold); }
.ac-busca__sub, .ac-busca__nota { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--color-ink-2); }
.ac-busca__nota { font-size: var(--fs-13); color: var(--color-ink-3); }
.ac-busca__nota a { color: inherit; font-weight: var(--fw-bold); }
.ac-busca__form { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-busca__form .btn { justify-content: center; gap: var(--space-1-5); }
.ac-busca__erro { margin: 0; font-size: var(--fs-13-5); font-weight: var(--fw-semibold); color: var(--color-err); }
.ac-busca__ultimo { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-brand-50); box-shadow: inset 0 0 0 var(--border-1) var(--color-brand-600); color: inherit; font-size: var(--fs-14); font-weight: var(--fw-semibold); text-decoration: none; }
.ac-busca__ultimo span { flex: 1; }
.ac-nota { margin: 0; text-align: center; font-size: var(--fs-12-5); font-weight: var(--fw-medium); color: var(--color-ink-3); }
.ac-erro__img { height: var(--size-ck-mascote); width: auto; }
.ac-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-skel__l1 { height: var(--space-7); width: 55%; border-radius: var(--radius-skel); }
.ac-skel__l2 { height: var(--space-4); width: 35%; border-radius: var(--radius-skel); }
.ac-skel__l3 { height: var(--space-14); border-radius: var(--radius-md); }
.pg-rodape { justify-content: center; text-align: center; }