/* El bloque ocupa el ancho de su contenedor. Para aprovechar todo el ancho en escritorio, pon el shortcode en una fila/columna de ancho completo. */
.vp-mruta { box-sizing: border-box; width: 100%; --vp-mruta-borde: var(--vp-mruta-acento, currentColor); }
.vp-mruta__form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: center; }
.vp-mruta__form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.vp-mruta__form input { padding: .5rem .6rem; font: inherit; }

/* Botones (envío y «Reservar»): mismo estilo, independiente de cómo trate el tema a <button> y <a>. */
.vp-mruta .vp-mruta__boton {
  display: block; box-sizing: border-box; margin: 0; padding: .7rem 1.4rem; text-align: center; cursor: pointer;
  background: transparent; color: var(--vp-mruta-acento, inherit); border: 1px solid var(--vp-mruta-borde); border-radius: 4px;
  font: inherit; font-size: .85rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  -webkit-appearance: none; appearance: none; box-shadow: none;
}
.vp-mruta .vp-mruta__boton:hover,
.vp-mruta .vp-mruta__boton:focus-visible { background: color-mix(in srgb, var(--vp-mruta-borde) 10%, transparent); text-decoration: none; }
.vp-mruta .vp-mruta__tarjeta a.vp-mruta__boton { margin-top: auto; }

.vp-mruta__estado { margin: .8rem 0 0; font-size: .9rem; text-align: center; }
.vp-mruta__resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 1rem; }
.vp-mruta__tarjeta { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.vp-mruta__nombre { margin: 0; font-size: 1.05rem; }
.vp-mruta__datos, .vp-mruta__nota { margin: 0; font-size: .9rem; color: #555; }
.vp-mruta__precio { margin: .4rem 0 0; font-size: 1.3rem; }
.vp-mruta__tachado { color: #888; font-size: .9rem; }
.vp-mruta__agotado { color: #a33; }