/*
 * Módulo "Cómo viajar" de las páginas de ruta: mapa con el recorrido y duraciones aproximadas por medio.
 * Se inserta por JS bajo el bloque de la ruta (assets/js/route-premium.js).
 */
.rp {
  margin: 28px 0 8px;
  border: 1px solid var(--border, rgba(20, 21, 26, 0.14));
  border-radius: 18px;
  background: var(--surface, #fff);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 21, 26, 0.06);
}
.rp-head { padding: 20px 22px 4px; }
.rp-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #55565f);
  font-weight: 600;
}
.rp-title {
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #14151a);
}
.rp-map {
  height: 290px;
  margin-top: 16px;
  background: #eef0f4;
  position: relative;
}
.rp-map .leaflet-container { background: #eef0f4; font-family: inherit; }
.rp-map .leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.07); }
.rp-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.8); }
.rp-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C10016;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(20, 21, 26, 0.35);
}
.rp-pin.is-end { background: #FB6B6C; }
.rp-tip.leaflet-tooltip {
  background: #fff;
  color: #14151a;
  border: 0;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(20, 21, 26, 0.18);
}
.rp-tip.leaflet-tooltip::before { display: none; }
.rp-modes { padding: 6px 22px 6px; }
.rp-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--border, rgba(20, 21, 26, 0.14));
}
.rp-row:first-child { border-top: 0; }
.rp-ico { width: 28px; height: 28px; color: #55565f; }
.rp-row.is-train .rp-ico { color: #C10016; }
.rp-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rp-label { font-size: 14px; font-weight: 600; color: var(--text, #14151a); }
.rp-bar { height: 6px; margin-top: 7px; border-radius: 6px; background: rgba(20, 21, 26, 0.08); overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: 6px; background: #9aa0ad; }
.rp-row.is-train .rp-bar i { background: linear-gradient(90deg, #C10016, #FB6B6C); }
.rp-time { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text, #14151a); }
.rp-note { margin: 0; padding: 4px 22px 18px; font-size: 12px; line-height: 1.5; color: var(--muted, #55565f); }
@media (max-width: 600px) {
  .rp-head { padding: 18px 16px 2px; }
  .rp-modes, .rp-note { padding-left: 16px; padding-right: 16px; }
  .rp-map { height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .rp-bar i { transition: none; } }

/* Tarjeta compacta del planificador (assets/js/planner-info.js) */
.pi { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, rgba(20, 21, 26, 0.14)); }
.pi .rp-modes { padding: 2px 0 0; }
.pi .rp-row { padding: 10px 0; }
.pi .rp-note { padding: 6px 0 0; }
.pi-guide {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 14px; font-weight: 600; color: #A8000F; text-decoration: none;
  border-bottom: 1px solid rgba(168, 0, 15, 0.35);
}
.pi-guide:hover { border-bottom-color: #A8000F; }
.pi-guide:focus-visible { outline: 2px solid #14151a; outline-offset: 3px; }

/* Tarjeta "Guía de la ruta" (window.glosxGuideCard en planner-info.js) */
.pi-gcard {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px;
  margin-top: 14px; padding: 12px 18px 12px 12px; border: 1px solid rgba(20, 21, 26, 0.14); border-radius: 14px;
  background: #fff; color: #14151a; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pi-gcard:hover { border-color: rgba(168, 0, 15, 0.45); box-shadow: 0 6px 18px rgba(20, 21, 26, 0.08); transform: translateY(-1px); }
.pi-gcard:focus-visible { outline: 2px solid #14151a; outline-offset: 3px; }
.pi-gcard-img { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: #eceae6; }
.pi-gcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-gcard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pi-gcard-eye { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #6b6c75; }
.pi-gcard-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.pi-gcard-meta { font-size: 13px; color: #4a4b55; font-variant-numeric: tabular-nums; }
.pi-gcard-arrow { font-size: 22px; font-weight: 700; color: #A8000F; transition: transform .15s; }
.pi-gcard:hover .pi-gcard-arrow { transform: translateX(3px); }
@media (max-width: 560px) {
  .pi-gcard { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 10px 12px 10px 10px; }
  .pi-gcard-img { width: 72px; height: 60px; }
  .pi-gcard-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pi-gcard, .pi-gcard-arrow { transition: none; } .pi-gcard:hover { transform: none; } }

/* en la tarjeta de un solo tramo de la portada el panel ocupa todo el ancho, bajo el encabezado */
body.home-v2 .search-card .ai-segment > .pi { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
@media (max-width: 760px) {
  body.home-v2 .search-card .ai-segment > .pi { grid-column: 1; grid-row: auto; }
}

/* precio orientativo bajo la duración */
.rp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rp-price { font-size: 12px; font-weight: 500; color: var(--muted, #55565f); white-space: nowrap; font-variant-numeric: tabular-nums; }