:root {
  --fundo: #faf8f5;
  --cartao: #ffffff;
  --texto: #1c1b1a;
  --suave: #6f6a64;
  --linha: #e7e2db;
  --destaque: #1c1b1a;
  --andamento: #1c1b1a;
  --atencao: #a5620c;
  --atencao-fundo: #fdf3e4;
  --concluido: #2f6b3f;
  --concluido-fundo: #ebf4ed;
  --encerrado: #6f6a64;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topo {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid var(--linha);
  background: var(--cartao);
}
.marca { font-size: 15px; letter-spacing: 0.32em; font-weight: 600; }

.conteudo { max-width: 560px; margin: 0 auto; padding: 24px 16px 8px; }
.carregando { color: var(--suave); text-align: center; padding: 48px 0; }

.numero { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.numero-data { font-weight: 400; color: var(--suave); }

.situacao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--andamento);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin-bottom: 20px;
}
.situacao h1 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; font-weight: 600; }
.situacao p { margin: 0; color: var(--suave); }
.tom-atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.tom-concluido { border-left-color: var(--concluido); background: var(--concluido-fundo); }
.tom-encerrado { border-left-color: var(--encerrado); }

.etapas { list-style: none; margin: 0 0 20px; padding: 0 4px; }
.etapa { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before {
  content: "";
  position: absolute;
  left: 6px; top: 18px; bottom: 0;
  width: 2px;
  background: var(--linha);
}
.etapa:last-child::before { display: none; }
.etapa.feita::before { background: var(--destaque); }
.marcador {
  flex: none;
  width: 14px; height: 14px; margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--linha);
  background: var(--fundo);
  position: relative; z-index: 1;
}
.feita .marcador { background: var(--destaque); border-color: var(--destaque); }
.atual .marcador { border-color: var(--destaque); box-shadow: 0 0 0 4px rgba(28, 27, 26, 0.12); }
.etapa-texto { display: flex; flex-direction: column; }
.etapa-titulo { color: var(--suave); }
.feita .etapa-titulo, .atual .etapa-titulo { color: var(--texto); font-weight: 600; }
.etapa-data { font-size: 13px; color: var(--suave); }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.cartao h2 {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--suave);
}

.envio dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.envio dt { color: var(--suave); font-size: 14px; }
.envio dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.botao {
  display: block;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--destaque);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.item { display: flex; gap: 14px; align-items: center; }
.foto {
  flex: none;
  width: 64px; height: 80px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--linha);
}
.item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-nome { font-weight: 600; font-size: 15px; }
.item-detalhe { font-size: 14px; color: var(--suave); }
.selo {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--atencao-fundo);
  color: var(--atencao);
  font-size: 12px; font-weight: 600;
}

.nota { margin: 4px 0 8px; color: var(--suave); font-size: 14px; text-align: center; }
.atualizado { margin: 16px 0 0; color: var(--suave); font-size: 12px; text-align: center; }

.rodape {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  text-align: center;
  font-size: 14px;
  color: var(--suave);
}
.rodape a { color: var(--texto); }

.consulta form { display: grid; gap: 12px; margin-top: 24px; }
.consulta label { font-weight: 600; }
.consulta input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.consulta input:focus-visible, .consulta button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.consulta button { cursor: pointer; font: inherit; }
.consulta button:disabled { opacity: .6; cursor: wait; }