/* ==========================================================
   UNIPROTEL — rastreio.css
   Estilos da página pública de rastreio de RMA (rastreio.html).
   ========================================================== */

.track-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:32px; margin-bottom:32px; align-items:start;}
@media(max-width:900px){ .track-grid{grid-template-columns:1fr; gap:24px;} }
.track-grid .panel{margin-top:0;} /* cancela o .panel + .panel do style.css, que não deve valer aqui (lado a lado, não empilhado) */

.track-form{
  display:flex; flex-direction:column; gap:16px;
}
.tabs{display:flex; gap:8px; margin-bottom:4px;}
.tab-btn{
  flex:1; padding:10px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-muted); font-size:13.5px; cursor:pointer;
  font-family:var(--font-body); transition:border-color .2s, color .2s;
}
.tab-btn.active{border-color:var(--amber); color:var(--amber);}
.tab-pane{display:none;}
.tab-pane.active{display:flex; flex-direction:column; gap:14px;}

.result-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px; margin-top:24px;}
.result-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.result-head .codigo{font-family:var(--font-mono); color:var(--amber); font-size:15px;}
.result-head .data{font-size:12.5px; color:var(--text-muted);}

.item-block{border-top:1px solid var(--border); padding:22px 0;}
.item-block:first-of-type{border-top:none; padding-top:0;}
.item-block h3{font-size:16px; margin-bottom:2px;}
.item-block .serie{font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); margin-bottom:16px; display:block;}

/* Linha do tempo estilo rastreio de encomenda */
.timeline{display:flex; align-items:flex-start; margin:18px 0 20px; overflow-x:auto; padding-bottom:4px;}
.tl-step{flex:1; min-width:90px; text-align:center; position:relative;}
.tl-step .bar{
  position:absolute; top:8px; left:-50%; width:100%; height:2px; background:var(--border); z-index:0;
}
.tl-step:first-child .bar{display:none;}
.tl-step .dot{
  width:18px; height:18px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border);
  margin:0 auto 8px; position:relative; z-index:1;
}
.tl-step .label{font-size:10.5px; color:var(--text-muted); line-height:1.3; padding:0 4px;}
.tl-step.done .dot{background:var(--green); border-color:var(--green);}
.tl-step.done .bar{background:var(--green);}
.tl-step.current .dot{background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px rgba(242,169,59,.18);}
.tl-step.current .label{color:var(--amber); font-weight:600;}
.tl-step.done .label{color:var(--text);}

.rejected-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(232,88,106,.1); border:1px solid rgba(232,88,106,.35);
  color:var(--red); padding:10px 14px; border-radius:8px; font-size:13.5px; margin:14px 0;
}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:13.5px;}
@media(max-width:600px){ .detail-grid{grid-template-columns:1fr;} }
.detail-grid .label{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.05em; display:block; margin-bottom:4px;}
.detail-grid .value{color:var(--text);}
.detail-grid .full{grid-column:1/-1;}

.err-box{
  background:rgba(232,88,106,.08); border:1px solid rgba(232,88,106,.35); color:var(--red);
  padding:14px 16px; border-radius:8px; font-size:13.5px; margin-top:20px; display:none;
}
.err-box.show{display:block;}

/* Legenda "Como funciona" — 2 colunas pra não ficar muito mais alta que a caixa de busca */
.legend-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;}
@media(max-width:560px){ .legend-grid{grid-template-columns:1fr;} }
.legend-item{display:flex; gap:10px; align-items:flex-start;}
.legend-item .badge{
  flex-shrink:0; margin-top:2px;
  font-family:var(--font-mono); font-size:10px; color:var(--bg); background:var(--amber);
  padding:2px 7px; border-radius:4px; letter-spacing:.05em;
}
.legend-item strong{display:block; font-size:13.5px; margin-bottom:2px;}
.legend-item p{font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.45;}

/* Caixa de decisão de orçamento */
.decision-box{
  background:rgba(242,169,59,.06); border:1px solid rgba(242,169,59,.3); border-radius:10px;
  padding:16px 18px; margin-top:8px;
}
.decision-box p{font-size:13.5px; color:var(--text); margin-bottom:12px;}
.decision-actions{display:flex; gap:10px; flex-wrap:wrap;}
.decision-actions .btn{padding:9px 18px; font-size:13.5px;}