/* ============================================================
   DB COURIER · SIGUE TU PEDIDO (estilos específicos)
   ============================================================ */

/* ---------- Buscador ---------- */
.buscador .seg{margin-top:0;margin-bottom:16px}
.buscador .search-row{display:flex;gap:12px;flex-wrap:wrap}
.buscador .search-row .inputbox{flex:1;min-width:220px}
.buscador .search-row .calc-btn{margin-top:0;width:auto;flex:none;padding:16px 26px;white-space:nowrap}

/* ---------- Estados vacío / error ---------- */
.estado-msg{
  margin-top:24px;border-radius:16px;padding:20px 22px;font-weight:600;
  display:none;gap:12px;align-items:flex-start;
}
.estado-msg.show{display:flex}
.estado-msg.info{background:var(--ok-bg);border:1.5px solid var(--tint-2);color:#33456e}
.estado-msg.err{background:#FFF4F5;border:1.5px solid #FAD1D6;color:var(--texto)}
.estado-msg a{color:var(--azul);font-weight:800;text-decoration:none}
.estado-msg a:hover{text-decoration:underline}

/* ---------- Resultado del pedido ---------- */
.tracker{margin-top:26px;display:none}
.tracker.show{display:block;animation:aparece .4s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.tracker__head{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  padding-bottom:18px;border-bottom:1px dashed var(--tint-2);
}
.tracker__head .guia{font-weight:900;font-size:1.25rem;letter-spacing:.01em}
.tracker__head .guia small{display:block;color:var(--gris);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.badge{
  font-weight:800;font-size:.82rem;padding:8px 16px;border-radius:999px;
  background:var(--tint);color:var(--azul);
}
.badge.done{background:#E7F7EE;color:#1B8A4B}

/* Meta datos */
.tracker__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:20px 0 6px}
.tracker__meta .m{background:var(--tint);border:1px solid var(--linea);border-radius:12px;padding:12px 14px}
.tracker__meta .m--full{grid-column:1 / -1}
.tracker__meta .m .k{color:var(--gris);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.tracker__meta .m .v{font-weight:700;font-size:.98rem;margin-top:3px}

/* ---------- Stepper (reutiliza el motivo de la ruta de vuelo) ---------- */
.stepper{
  margin:30px 0 6px;display:flex;justify-content:space-between;position:relative;gap:6px;
}
/* línea base tras los bullets (alineada a los centros de los dots) */
.stepper::before{
  content:"";position:absolute;left:8.333%;right:8.333%;top:16px;height:3px;border-radius:3px;
  background:var(--tint-2);z-index:0;
}
/* línea de progreso (roja punteada, como la ruta) */
.stepper::after{
  content:"";position:absolute;left:8.333%;top:16px;height:3px;border-radius:3px;z-index:1;
  width:var(--progreso,0%);
  background-image:linear-gradient(90deg,var(--rojo) 0 60%,transparent 0);
  background-size:12px 3px;background-repeat:repeat-x;
  transition:width .5s ease;
}
.step{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:8px;min-width:0;
}
.step .bullet{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--tint-2);color:var(--gris);
  font-weight:800;font-size:.85rem;transition:.2s;
}
.step .lbl{font-weight:700;font-size:.72rem;color:var(--gris);line-height:1.25;max-width:12ch}
.step.done .bullet{background:var(--azul);border-color:var(--azul);color:#fff}
.step.done .lbl{color:var(--azul-oscuro)}
.step.current .bullet{
  background:var(--rojo);border-color:var(--rojo);color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 5px rgba(230,0,18,.15);
}
.step.current .lbl{color:var(--rojo);font-weight:800}

/* Avión que viaja sobre la línea de progreso */
.stepper .plane-mark{
  position:absolute;top:16px;left:calc(8.333% + var(--progreso,0%));z-index:3;
  transform:translate(-50%,-50%);color:var(--rojo);transition:left .5s ease;
}

@media (max-width:640px){
  .tracker__meta{grid-template-columns:1fr}
  /* input y botón a ancho completo, uno debajo del otro */
  .buscador .search-row{flex-direction:column}
  .buscador .search-row .inputbox{min-width:0}
  .buscador .search-row .calc-btn{width:100%}
  /* Stepper vertical en móvil */
  .stepper{flex-direction:column;gap:0;padding-left:6px}
  .stepper::before{left:22px;right:auto;top:8.333%;bottom:8.333%;width:3px;height:auto}
  .stepper::after{
    left:22px;top:8.333%;width:3px;height:var(--progreso,0%);
    background-image:linear-gradient(180deg,var(--rojo) 0 60%,transparent 0);
    background-size:3px 12px;background-repeat:repeat-y;
  }
  .step{flex-direction:row;align-items:center;gap:14px;text-align:left;padding:10px 0}
  .step .lbl{max-width:none;font-size:.86rem}
  .stepper .plane-mark{display:none}
}