.turibusroute {
  --turibusroute-color: #DA291C;
  position: relative;
}
/* Siempre oculto por defecto, en cualquier tamaño */
.turibusroute__fabBackToMap {
  display: none !important;
}

/* =========================
   MAPA
   ========================= */
/* .turibusroute__mapWrap {
  position: relative;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
} */
.turibusroute__mapWrap {
    position: relative;
    border: 1px solid var(--turibusroute-color);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.turibusroute__map {
  height: 100%;
}

/* =========================
   OVERLAY (DESKTOP)
   ========================= */
.turibusroute__overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  bottom: 18px; /* se ajusta a la altura del mapa */
  /* width: min(360px, calc(100% - 36px)); */
  width: min(var(--turibusroute-overlay-width, 360px), calc(100% - 36px));
  overflow: hidden; /* el scroll va dentro del contenido */
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  padding: 14px 14px 16px 14px;
  z-index: 1200; /* por encima de controles Leaflet */
  display: flex;
  flex-direction: column;
}

.turibusroute__overlayClose {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.turibusroute__overlayTitle {
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 2px 36px 6px 0;
  color: var(--turibusroute-color);
  text-transform: uppercase;
}

.turibusroute__overlayMeta {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.turibusroute__overlayBody p {
  margin: 0;
  opacity: 0.85;
}

/* Badge número en título del overlay */
.turibusroute__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--turibusroute-color);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin-right: 10px;
  flex: 0 0 auto;
}

.turibusroute__overlayH3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--turibusroute-color);
  text-transform: uppercase;

  display: flex;
  align-items: center;
  gap: 0; /* ya usamos margin-right en badge */
}

.turibusroute__overlayTitleText {
  min-width: 0;
}

/* =========================
   MODO FLUID (full width)
   ========================= */

.turibusroute--fluid .turibusroute__mapWrap {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(0,0,0,.18);
}

.turibusroute--fluid .turibusroute__overlay {
  /* sin márgenes alrededor: pegado a los bordes del mapa */
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 14px 14px 16px 14px; /* mantenemos padding interno */
  box-shadow: 10px 0 18px rgba(0,0,0,.18);
}

.turibusroute--fluid .turibusroute__overlay {
  width: min(var(--turibusroute-overlay-width, 33vw), 100%);
}

/* Contenedor del overlay: layout en columna */
.turibusroute__overlay {
  display: flex;
  flex-direction: column;
}

/* El H3 no hace scroll */
.turibusroute__overlayH3 {
  flex: 0 0 auto;
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--turibusroute-color);
  text-transform: uppercase;
}

/* Aquí NO hay scroll */
.turibusroute__overlayContent {
  flex: 1 1 auto;
  min-height: 0;          /* clave para que el iframe pueda “encajar” */
  overflow: hidden;       /* clave: evita el scroll externo */
  border-radius: 10px;
}

/* El iframe ocupa el alto disponible y hace su propio scroll interno */
.turibusroute__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================
   LISTADO PARADAS (NUEVO ESTILO)
   ========================= */

/* Caja (borde en color de ruta como el ejemplo) */
/* .turibusroute__stopsBox {
  margin-top: 14px;
  border: 1px solid var(--turibusroute-color);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
} */
.turibusroute__stopsBox {
    border: 1px solid var(--turibusroute-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 14px 16px;
    background: #fff;
}

/* Título */
.turibusroute__stopsTitle {
  font-weight: 800;
  color: var(--turibusroute-color);
  letter-spacing: 0.4px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-size: 14px;
}

/* Grid compacto */
.turibusroute__stops {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 6px;
}
/* Desktop: tantas columnas como quepan, con un mínimo razonable */
@media (min-width: 992px) {
  .turibusroute__stops {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    column-gap: 22px;
    row-gap: 6px;
  }
}

/* Item: sin “pill”, monocromo */
.turibusroute__stops li {
  margin: 0;
  padding: 0;

  display: flex;
  align-items: baseline;
  gap: 8px;

  cursor: pointer;

  /* Todo en el color de ruta */
  color: var(--turibusroute-color);

  /* Compacto */
  font-size: 13px;
  line-height: 1.25;

  /* Permite ellipsis en el nombre */
  min-width: 0; /* clave dentro de grid/flex */
}

/* Hover suave (sin cambiar color, solo subrayado como en leyendas) */
.turibusroute__stops li:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Seleccionada: SOLO negrita */
.turibusroute__stops li.is-active, .turibusroute__stops li.is-active span {
  font-weight: 800;
  background: transparent;
  outline: none;
  letter-spacing: 0.08em;
}

/* Número: pequeño, alineado, mismo color */
.turibusroute__stops .n {
  display: inline-block;
  min-width: 18px;
  text-align: right;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  color: var(--turibusroute-color);
}

/* Texto */
.turibusroute__stops li .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Nombre: ellipsis */
.turibusroute__stops li {
  white-space: nowrap;
}

.turibusroute__stops li .label,
.turibusroute__stops li {
  /* como el texto está en el li (tras el span.n),
     hacemos ellipsis aplicando a un wrapper si lo tienes;
     si NO lo tienes, aplicamos al propio li con min-width:0 (arriba) */
}

.turibusroute__stops li {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   MODO FLUID PARADAS (full width)
   ========================= */
/* Listado plano (sin radios, sin bordes laterales) */
.turibusroute--fluid .turibusroute__stopsBox {
  margin-top: 0;              /* pegado al mapa */
  border: 0;                    /* sin borde */
  border-radius: 0;             /* plano */
  /* box-shadow: 0 8px 14px rgba(0,0,0,.10);  */
  border-bottom: 1px solid rgba(0,0,0,.18);
}

/* =========================
   MOBILE: SIN OVERLAY + CONTENIDO INLINE
   ========================= */

.turibusroute__mobileContent {
  display: none;
}

@media (max-width: 768px) {

  .turibusroute {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Overlay no se usa en móvil */
  .turibusroute__overlay {
    display: none !important;
  }

  /* Mapa más bajo */
  .turibusroute__mapWrap {
    height: 240px !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(0,0,0,.18);
  }

  /* Contenido SPPB inline debajo del mapa */
  .turibusroute__mobileContent {
    display: block;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border: none;
    margin-top: 12px;
    height: auto !important;
    overflow: visible !important;
  }

  .turibusroute__mobileContent .turibusroute__iframe {
    height: 50vh;
    min-height: 50vh;
  }

  .turibusroute__stopsBox {
    display: none !important;
  }

  .turibusroute__backToMap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 14px;
    border-radius: 20px;
    border: 0;
    background: var(--turibusroute-color, #DA291C);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .turibusroute__backToMap {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .turibusroute__fabBackToMap {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 9999;

    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;

    align-items: center;
    justify-content: center;

    background: var(--turibusroute-color, #DA291C);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
  }

  .turibusroute__fabBackToMap.is-visible {
    display: inline-flex !important;
  }

  .turibusroute__fabIcon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1;
  }

  /* feedback de interacción */
  .turibusroute__fabBackToMap:active {
    transform: scale(0.98);
  }

  /* Accesibilidad: foco visible */
  .turibusroute__fabBackToMap:focus-visible {
    outline: 3px solid rgba(0,0,0,.25);
    outline-offset: 3px;
  } 

  .turibusroute__mobileHeader{
    display:flex;
    align-items:center;
    gap:10px;
    margin: 12px 0;
  }
  .turibusroute__mobileH3{
    margin:0;
    font-size: 18px;
    line-height: 1.2;
  }
  .turibusroute__mobileMessage{
    margin: 10px 0 16px;
    opacity: .85;
  }

}

/* =========================
   MARKERS NUMERADOS
   ========================= */

.turibusroute__markerWrap {
  background: none;
  border: 0;
}

.turibusroute__marker {
  width: 28px;
  height: 28px;
  background: var(--turibusroute-color);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.turibusroute__marker.is-main {
  outline: 3px solid rgba(255,255,255,.9);
}

/* =========================
   Marker seleccionado
   ========================= */

.turibusroute__markerWrap.is-selected .turibusroute__marker {
  background: #fff;
  color: var(--turibusroute-color);
  border: 2px solid var(--turibusroute-color);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* H3 dentro del overlay */
.turibusroute__overlayH3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--turibusroute-color);
  text-transform: uppercase;
}

.turibusroute__markerWrap.is-selected .turibusroute__marker {
  transform: scale(1.1);
  transition: transform .15s ease;
}

/* =========================
   Spinner
   ========================= */

/* Para poder superponer el loader encima del iframe */
.turibusroute__overlayContent {
  position: relative;
}

/* Loader superpuesto ocupando todo el área disponible del overlayContent */
.turibusroute__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.6;
  z-index: 2;
  background: #fff; /* opcional: si quieres que tape el “blanco” de debajo */
}
.turibusroute__loading i {
  font-size: 24px;
  opacity: 0.7;
}

/* Suaviza la aparición del iframe */
.turibusroute__iframe {
  transition: opacity .2s ease;
}