/* Seguimiento de pedido */

.mp-seg{ padding-block:var(--mp-e6) var(--mp-e7); max-width:44rem }
.mp-seg__cab{ margin-bottom:var(--mp-e5) }
.mp-seg__tit{ margin:0 0 .6rem }
.mp-seg__bajada{ color:var(--mp-tinta-2); max-width:34rem }

.mp-seg__form{ display:grid; gap:var(--mp-e3); max-width:26rem }
.mp-seg__campo{ display:flex; flex-direction:column; gap:.4rem }
.mp-seg__campo label{ font-size:.8125rem; color:var(--mp-tinta-2) }
.mp-seg__campo input{
  /* 16px o iOS hace zoom al enfocar */
  font-size:16px; padding:.7rem .8rem; border:1px solid var(--mp-hilo);
  background:var(--mp-papel); color:var(--mp-tinta); border-radius:0;
}
.mp-seg__campo input:focus{ outline:2px solid transparent; outline-offset:2px; border-color:var(--mp-tinta); box-shadow:0 0 0 1px var(--mp-tinta) }

.mp-seg__error{
  margin-top:var(--mp-e3); padding:.85rem 1rem;
  background:var(--mp-lino); border-left:3px solid var(--mp-vino); color:var(--mp-tinta);
}

.mp-seg__res{ margin-top:var(--mp-e6); border-top:1px solid var(--mp-hilo); padding-top:var(--mp-e5) }
.mp-seg__res-cab{ margin-bottom:var(--mp-e5) }
.mp-seg__res-tit{ margin:0 0 .25rem }

/* la línea de tiempo: un punto por paso, unidos por una línea que solo se pinta
   hasta donde el pedido llegó de verdad */
.mp-seg__linea{ list-style:none; margin:0 0 var(--mp-e5); padding:0 }
.mp-seg__paso{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:1rem; padding-bottom:1.6rem }
.mp-seg__paso:last-child{ padding-bottom:0 }
.mp-seg__paso::before{
  content:""; position:absolute; left:5px; top:1.1rem; bottom:-.2rem;
  width:1px; background:var(--mp-hilo);
}
.mp-seg__paso:last-child::before{ display:none }
.mp-seg__paso.is-hecho::before{ background:var(--mp-tinta) }
.mp-seg__punto{
  width:11px; height:11px; border-radius:50%; margin-top:.35rem;
  border:1px solid var(--mp-hilo); background:var(--mp-papel);
}
.mp-seg__paso.is-hecho .mp-seg__punto{ background:var(--mp-tinta); border-color:var(--mp-tinta) }
.mp-seg__paso.is-actual .mp-seg__punto{ box-shadow:0 0 0 4px rgba(115,41,60,.15); background:var(--mp-vino); border-color:var(--mp-vino) }
.mp-seg__paso p{ margin:.2rem 0 0 }
.mp-seg__paso:not(.is-hecho) strong,
.mp-seg__paso:not(.is-hecho) p{ color:var(--mp-tinta-3) }
.mp-seg__fecha{ color:var(--mp-tinta-2) }

.mp-seg__envio{ background:var(--mp-lino); padding:1.1rem 1.2rem; margin-bottom:var(--mp-e5) }
.mp-seg__envio p{ margin:.35rem 0 }
.mp-seg__envio .mp-seg__boton{ margin-top:.8rem }

.mp-seg__items ul{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.4rem }
.mp-seg__total{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--mp-hilo) }
.mp-seg__ayuda{ margin-top:var(--mp-e5); color:var(--mp-tinta-2) }

@media (max-width:640px){
  .mp-seg__form{ max-width:none }
}

/* El botón sigue el patrón del tema: no hay una clase de botón compartida, cada
   componente define el suyo (mp-home__boton, mp-hero__boton). */
.mp-seg__boton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.6rem; background:var(--mp-tinta); color:var(--mp-papel);
  font-size:.8125rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; border:1px solid var(--mp-tinta); cursor:pointer;
  justify-self:start; text-decoration:none;
  transition:background-color var(--mp-rapido) var(--mp-easing), border-color var(--mp-rapido) var(--mp-easing);
}
.mp-seg__boton:hover{ background:var(--mp-vino); border-color:var(--mp-vino); color:var(--mp-papel) }
.mp-seg__boton--linea{ background:transparent; color:var(--mp-tinta) }
.mp-seg__boton--linea:hover{ background:var(--mp-tinta); color:var(--mp-papel) }