/* Página pública de rastreio — identidade Viva Vinho (carvão + creme + esmeralda). */
:root{
  --carvao:#1a1a1a;
  --tinta:#2a2a2a;
  --creme:#f6f4f1;
  --branco:#fff;
  --cinza:#727273;
  --cinza-claro:#e7e4df;
  --esmeralda:#126156;
  --esmeralda-escuro:#0e4a41;
  --ambar:#9a6b31;
  --azul:#3f6079;
  --sombra:0 10px 40px rgba(0,0,0,.08);
  --radio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--creme);color:var(--tinta);line-height:1.5;
  min-height:100vh;display:flex;flex-direction:column;
}

/* cabeçalho */
.topo{background:var(--carvao);padding:20px 16px;text-align:center}
.topo__logo{display:inline-block}
.topo__logo img{height:32px;width:auto;display:block}

/* corpo */
.conteudo{flex:1;width:100%;max-width:600px;margin:0 auto;padding:32px 16px}

/* cartão */
.cartao{background:var(--branco);border-radius:var(--radio);box-shadow:var(--sombra);padding:32px 28px}
.cartao--form{text-align:center}
.titulo{font-size:1.5rem;font-weight:600;color:var(--carvao);margin-bottom:8px;letter-spacing:-.01em}
.subtitulo{color:var(--cinza);font-size:.95rem;margin-bottom:24px}
.rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cinza)}
.codigo{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.7rem;font-weight:600;color:var(--carvao);letter-spacing:.06em;margin:2px 0 20px}

/* estado / badge */
.estado{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-weight:600;font-size:.95rem;background:var(--cinza-claro);color:var(--tinta)}
.estado__ponto{width:9px;height:9px;border-radius:50%;background:currentColor}
.estado--entregue{background:rgba(18,97,86,.12);color:var(--esmeralda)}
.estado--em_transito{background:rgba(63,96,121,.14);color:var(--azul)}
.estado--pronto{background:rgba(154,107,49,.14);color:var(--ambar)}
.estado--em_preparacao{background:#ecebe8;color:var(--cinza)}
.estado__descricao{margin-top:14px;font-size:1.05rem;color:var(--tinta)}
.meta{margin-top:8px;color:var(--cinza);font-size:.9rem}

/* formulário */
.form{margin-top:8px}
.form__label{display:block;text-align:left;font-size:.85rem;color:var(--cinza);margin-bottom:6px}
.form__linha{display:flex;gap:10px}
.form__input{flex:1;min-width:0;padding:14px 16px;border:1.5px solid var(--cinza-claro);border-radius:12px;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;background:#fbfaf8;transition:border-color .15s}
.form__input:focus{outline:none;border-color:var(--esmeralda)}
.form__input::placeholder{text-transform:none;letter-spacing:0;color:#b8b4ad}
.botao{padding:14px 22px;border:0;border-radius:12px;background:var(--esmeralda);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.botao:hover{background:var(--esmeralda-escuro)}
.form__erro{margin-top:12px;color:#a13b32;font-size:.9rem}

/* aviso (não encontrado) */
.aviso{margin-bottom:22px}
.aviso__icone{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#ecebe8;color:var(--cinza);font-size:1.8rem;font-weight:700;margin-bottom:16px}

/* secção */
.seccao{margin:28px 0 16px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cinza);border-top:1px solid var(--cinza-claro);padding-top:20px}

/* linha do tempo (etapas) */
.timeline{list-style:none}
.timeline__item{position:relative;padding:0 0 22px 26px;border-left:2px solid var(--cinza-claro)}
.timeline__item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline__marca{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--cinza-claro);border:2px solid var(--branco)}
.timeline__item--atual .timeline__marca{background:var(--esmeralda);box-shadow:0 0 0 3px rgba(18,97,86,.15)}
.timeline__titulo{font-weight:600;color:var(--carvao);font-size:.98rem}
.timeline__data{color:var(--cinza);font-size:.85rem;margin-top:2px}

/* eventos da transportadora */
.eventos{list-style:none}
.eventos__item{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;border-bottom:1px solid #f0eeea;font-size:.9rem}
.eventos__item:last-child{border-bottom:0}
.eventos__desc{font-weight:500;color:var(--tinta)}
.eventos__local{color:var(--cinza)}
.eventos__data{margin-left:auto;color:var(--cinza);font-variant-numeric:tabular-nums}

/* rodapé + navegação */
.voltar{margin-top:24px;text-align:center}
.voltar a{color:var(--esmeralda);text-decoration:none;font-weight:500;font-size:.9rem}
.voltar a:hover{text-decoration:underline}
.rodape{text-align:center;padding:24px 16px;color:var(--cinza);font-size:.82rem}

/* telemóvel */
@media (max-width:480px){
  .conteudo{padding:20px 12px}
  .cartao{padding:24px 18px}
  .form__linha{flex-direction:column}
  .botao{width:100%}
  .codigo{font-size:1.4rem}
  .titulo{font-size:1.3rem}
}