/* ==========================================================================
   Exteriorízate — Rutas UI (style-rutas.css)
   ========================================================================== */


/* =========================
   1) CONTENEDORES & RESETS
   ========================= */
.rutas-map-wrap .wpb_wrapper,
.rutas-map-wrap .vc_column-inner,
#rutas-buscador .wpb_wrapper,
#rutas-buscador .vc_column-inner {
  overflow: visible !important;
}

/* Si hay overlays flotantes de filtros/placers que tapen clics */
.rutas-map-overlay,
.rutas-filters-overlay { pointer-events: none !important; }

.rutas-map-wrap,
#rutas-buscador { position: relative; z-index: 100; }

/* Ocultar lista bajo el mapa (si alguien la añade) */
#rutas-lista { display: none !important; }

/* Insignias en popups del mapa */
.ribbon-circle .ribbon-text { font-size: 14px; color: #000000 !important; }

/* Popups Leaflet: enlaces sin subrayado/efectos del tema */
#rutas-map .leaflet-popup-content a,
#rutas-map .leaflet-popup-content a:hover,
#rutas-map .leaflet-popup-content a:focus,
#rutas-map .leaflet-popup-content a:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: inherit;
}

/* Contenedor del buscador (full width) */
.rutas-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Popup Leaflet: padding general */
.leaflet-popup-content-wrapper { padding: 8px 10px; }


/* ============================================================
   2) BUSCADOR – CONTENCIÓN & STACKING (el mapa no se sale)
   ============================================================ */
#rutas-buscador,
#rutas-buscador .buscador-grid,
#rutas-buscador main,
#rutas-buscador .buscador-filtros {
  position: relative;
  isolation: isolate;   /* stacking context */
  z-index: 0;
}

/* Grid estable (filtro izquierda / mapa derecha) */
#rutas-buscador .buscador-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: start;
  gap: 1rem;
}
@media (max-width: 1024px){
  #rutas-buscador .buscador-grid { grid-template-columns: 1fr; }
}

/* Contenedor del mapa “encajado” (clip panes de Leaflet) */
#rutas-buscador #rutas-map {
  position: relative !important;
  height: 60vh !important;
  min-height: 420px !important;
  max-height: 85vh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Asegurar que la instancia no crezca más allá del contenedor */
#rutas-buscador #rutas-map.leaflet-container,
#rutas-buscador .rutas-map-frame > .leaflet-container {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Normaliza stacking de filas del tema (no afecta single) */
.page .container-wrap,
.page .main-content,
.wpb_row {
  position: relative;
  z-index: 0;
}


/* =======================================
   3) SINGLE RUTA – LAYOUT Y TIPOGRAFÍA
   ======================================= */
.ruta-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr; /* izquierda / derecha */
  gap: 24px;
  align-items: start;
}

/* Columna izquierda */
.ruta-left { min-height: 100%; }
.ruta-title { margin: 0 0 .5rem; }
.ruta-intro { margin: .5rem 0 1rem; font-size: 1.05rem; }

/* Slider sencillo */
.ruta-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 8px;
  border-radius: 12px;
}
.ruta-slide { scroll-snap-align: center; position: relative; overflow: hidden; border-radius: 12px; }
.ruta-slide img { width: 100%; height: auto; display: block; }

/* Ficha técnica (FA list) */
.ruta-ficha{
  background:#efefef;
  border-radius:12px;
  padding:20px;
  margin:12px 0;
  overflow: visible; /* tooltips gráfico */
}
.ruta-ficha h3{ margin:6px 0 12px; }

.article-list.list-unstyled{ list-style:none; margin:0; padding:0; }
.article-list-info .article-list-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid #e0e0e0;
}
.article-list-info .article-list-item:last-child{ border-bottom:none; }
.article-list-info .field-wrapper{ display:flex; gap:8px; flex-wrap:wrap; }
.article-list-info .field{ font-weight:600; }
.article-list-info .text-featured{ font-weight:700; }
.hide-accessible{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Ficha de datos */
.ruta-data { margin: 1rem 0; }
.ruta-data__row { display: flex; gap: .5rem; align-items: center; margin: .25rem 0; }
.ruta-data__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .75rem;
  margin-top: .5rem;
}
.ruta-data__item { display: flex; gap: .5rem; align-items: center; }

/* Gráfica de elevación */
.ruta-elevacion{ position: relative; display: block; margin: 12px 0; }

#elevation-div{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
#elevation-div .elevation,
#elevation-div .elevation-control{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
#elevation-div svg{ width: 100% !important; }

#elevation-div .elevation-control{
  position: static !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}
#elevation-div .elevation-toggle-icon{ display: none !important; }

#elevation-div .background,
#elevation-div .background rect,
#elevation-div .canvas-plot{
  background: transparent !important;
  background-color: transparent !important;
  fill: transparent !important;
}
#elevation-div .ele-tooltip{
  color:#222 !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12);
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* Fix color perfil + ejes */
#elevation-div .elevation-control svg { color: #666 !important; }
#elevation-div .elevation-control .area path.altitude,
#elevation-div .elevation-control path.altitude.area,
#elevation-div .elevation-control .altitude.area,
#elevation-div .elevation-control .altitude.area[fill="custom"] {
  fill: var(--ele-area, #4682B4) !important;
  fill-opacity: .8 !important;
  stroke: var(--ele-line, #000) !important;
  stroke-opacity: 1 !important;
}
#elevation-div .elevation-control mask rect,
#elevation-div .elevation-control mask rect.zoom { fill: #fff !important; }
#elevation-div .elevation-control .grid line,
#elevation-div .elevation-control .grid .domain {
  stroke: #666 !important; stroke-opacity: .8 !important; shape-rendering: crispEdges;
}
#elevation-div .elevation-control .area .canvas-plot { pointer-events: none !important; }

/* Descargas */
.ruta-descargas{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .5rem 0 1.25rem;
}
.ruta-descargas .btn {
  display: inline-flex;
  align-items: center;
  padding: .5rem .8rem;
  border: 1px solid var(--nectar-accent-color, #ccc);
  border-radius: 6px;
}

/* Puntos de interés (lista bajo el mapa en single) */
.ruta-pois { margin: 1.25rem 0; }
.ruta-pois__list { display: grid; gap: 12px; }
.ruta-poi {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 10px;
}
.ruta-poi img { width: 100%; height: auto; border-radius: 8px; }
.ruta-poi h3 { margin: .1rem 0 .25rem; font-size: 1rem; }

/* Columna derecha: mapa sticky SOLO en desktop */
@media (min-width: 1000px){
  .ruta-right{
    position: sticky;
    top: 80px;                       /* tu ajuste bueno */
    height: calc(100vh - 80px);      /* mismo offset → sin hueco abajo */
    overflow: visible;
  }
  .ruta-map{
    width: 100%;
    height: 100%;
    min-height: unset;               /* no forzar mínimo en desktop sticky */
    border-radius: 0;                /* sin esquinas en desktop */
    overflow: hidden;
  }
}

/* Tablet & móvil: SIN sticky, layout normal */
@media (max-width: 999px){
  .ruta-right{
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .ruta-map{
    width: 100%;
    height: 60vh;        /* ajusta si prefieres otro alto en móvil */
    min-height: 50vh;    /* margen de seguridad */
    border-radius: 12px; /* sí con esquinas en móvil */
    overflow: hidden;
  }
}


/* Descripción larga */
.ruta-descripcion-larga { margin: 1.5rem 0; font-size: 1.05rem; line-height: 1.6; color: #333; }
.ruta-contenido { margin-top: 1.5rem; }

/* Responsive single */
@media (max-width: 999px) {
  .ruta-grid { grid-template-columns: 1fr; }
  .ruta-right { position: static; height: auto; }
  .ruta-map { min-height: 50vh; }
  .ruta-data__grid { grid-template-columns: 1fr; }
  .ruta-poi { grid-template-columns: 1fr; }
}

/* Permite desactivar el sticky cuando el footer entra (lo hace el JS) */
body.single-rutas .ruta-right.no-sticky { position: static !important; height: auto; }


/* =========================
   4) POPUPS TIPO TARJETA
   ========================= */
.hito-popup .popup-card{display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden}
.hito-popup .popup-image-wrapper{position:relative;display:block;height:140px;background-size:cover;background-position:center}
.hito-popup .popup-image-wrapper img{width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.hito-popup .popup-body{display:block;padding:10px;background:#fff}
.hito-popup .popup-title{display:block;font-weight:700;margin:0 0 4px}
.hito-popup .popup-description{display:block;font-size:13px;color:#333}

/* POPUPS (estilos comunes) */
.poi-popup .leaflet-popup-content-wrapper{
  padding: 0 !important;
  border: none !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: #fff;
}
.poi-popup .leaflet-popup-content{ margin: 0 !important; }
.poi-popup .leaflet-popup-tip{
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.poi-popup .leaflet-popup-tip-container{ margin-top: -1px; }

.poi-popup .popup-card{ display:block; text-decoration:none; color:inherit; }
.poi-popup .popup-image-wrapper{
  display:block; width:100%; height:100px;
  background-size:cover; background-position:center;
}
.poi-popup .popup-image-wrapper img{ display:none; }
.poi-popup .popup-body{ display:block; padding:10px 12px; background:#fff; }
.poi-popup .popup-subtitle{ display:block; font-size:12px; opacity:.7; margin-bottom:4px; }
.poi-popup .popup-description{ display:block; font-size:13px; color: #333; }

/* Ocultar el resumen inline del control de elevación si apareciera */
.elevation-summary{ display:none !important; }

/* Leyenda Elevation */
#elevation-div .elevation-control .legend .legend-item.legend-altitude rect.area {
  fill: var(--ele-area, #4682B4) !important; fill-opacity: 0.8 !important;
  stroke: var(--ele-line, #000) !important; stroke-opacity: 1 !important;
}
#elevation-div .elevation-control .mouse-focus-label-text { fill: #000 !important; }
#elevation-div .elevation-control .mouse-focus-label-rect {
  fill: #fff !important; fill-opacity: 0.95 !important; stroke: #444 !important;
}


/* =========================
   5) MARCADORES & ICONOS
   ========================= */
.marker-wrapper { width: 26px; height: 30px; }
.marker-wrapper .marker-icon {
  width: 26px; height: 30px; position: relative;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.marker-wrapper .marker-icon.marker-icon-poi-min{
  background-image: url('/wp-content/themes/salient-child/assets/vendor/leaflet/images/marker-poi-min.png');
}
.marker-wrapper .marker-icon i {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -58%); font-size: 14px; line-height: 1; color: #fff;
  text-shadow: none !important; pointer-events: none;
}

/* Inicio / Fin */
.leaflet-marker-pane .marker-wrapper,
.leaflet-marker-pane .marker-wrapper .marker-icon { z-index: 500 !important; }
.marker-wrapper .marker-icon.marker-icon-start-min{
  background-image: url('/wp-content/themes/salient-child/assets/vendor/leaflet/images/marker-start.png');
}
.marker-wrapper .marker-icon.marker-icon-end-min{
  background-image: url('/wp-content/themes/salient-child/assets/vendor/leaflet/images/marker-end.png');
}
.marker-wrapper .marker-icon.marker-icon-start-min > i.fas.fa-bicycle{ color: #006db0; }
.marker-wrapper .marker-icon.marker-icon-end-min   > i.fas.fa-bicycle{ color: #aa0825; }

/* Iconos en ficha técnica */
.article-list-info .article-list-item > .fas,
.article-list-info .article-list-item > .far,
.article-list-info .article-list-item > .fal,
.article-list-info .article-list-item > .fa-solid,
.article-list-info .article-list-item > i.fas,
.article-list-info .article-list-item > i.far,
.article-list-info .article-list-item > i.fal {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-size: 16px;
  line-height: 1.1;
  margin-top: 2px;
  color: #000;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}


/* ================================================================
   6) BUSCADOR: ruta rosa + popups + eventos en paths GPX
   ================================================================ */

/* Desactiva eventos en capas que no deben recibir clics (no tocar paths) */
#rutas-buscador .leaflet-marker-icon,
#rutas-buscador .leaflet-marker-shadow,
#rutas-buscador .leaflet-image-layer,
#rutas-buscador .leaflet-tile-container { pointer-events: none; }

/* Estilo base de la ruta */
#rutas-buscador .leaflet-container path.leaflet-interactive {
  stroke: #ff0090 !important;
  stroke-opacity: .9 !important;
  stroke-width: 3px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  pointer-events: auto !important;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

/* Resalto opcional (si lo usas por clase) */
#rutas-buscador .leaflet-container path.leaflet-interactive.bordered-polyline-white {
  stroke: #ff0090 !important;
  stroke-opacity: 1 !important;
  stroke-width: 5px !important;
  vector-effect: non-scaling-stroke;
  filter: none !important;
}

/* Rehabilitar clics en polilíneas del overlay (las rutas GPX) */
#rutas-buscador .leaflet-overlay-pane svg path { pointer-events: auto !important; cursor: pointer; }

/* Popups buscador (ancho + “X”) */
#rutas-buscador .poi-popup .leaflet-popup-content-wrapper{
  padding: 0 !important; border: none !important; border-radius: 12px;
  overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
#rutas-buscador .poi-popup .leaflet-popup-content{ margin: 0 !important; width: 225px !important; }

/* “X” buscador */
#rutas-buscador .leaflet-container a.leaflet-popup-close-button{
  top:8px !important; right:8px !important;
  width:18px !important; height:18px !important; padding:0 !important;
  line-height:16px !important; text-align:center !important;
  border-radius:6px !important; background:#fff !important; color:#000 !important;
  border:1px solid #ddd !important; opacity:1 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}

#rutas-buscador .leaflet-popup-tip { background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); }
#rutas-buscador .leaflet-popup-content a{ text-decoration:none !重要; color:inherit; display:block; }

/* Fade correcto */
.leaflet-fade-anim .leaflet-popup { opacity: 0; transition: opacity .2s linear; }
.leaflet-fade-anim .leaflet-popup-pane .leaflet-popup { opacity: 1; }

/* Ocultado preventivo de cualquier listado que aparezca */
#rutas-buscador main > ul,
#rutas-buscador main ul {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Jerarquía típica de Leaflet (tile<overlay<marker<popup)) */
#rutas-buscador .leaflet-tile-pane    { z-index: 200 !important; }
#rutas-buscador .leaflet-overlay-pane { z-index: 400 !important; }
#rutas-buscador .leaflet-marker-pane  { z-index: 600 !important; }
#rutas-buscador .leaflet-popup-pane   { z-index: 10000 !important; }

/* Controles arriba del todo, pero dentro del mapa */
#rutas-buscador .leaflet-top,
#rutas-buscador .leaflet-bottom { z-index: 1000 !important; }

/* Ultimate fix: “X” visible y contenido también */
#rutas-buscador .poi-popup { font-size: 14px !important; line-height: 1.35 !important; }
#rutas-buscador .poi-popup .leaflet-popup-content-wrapper,
#rutas-buscador .poi-popup .leaflet-popup-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  background: #fff !important;
}

/* Estructura visible */
#rutas-buscador .poi-popup .popup-card { display:block !important; position: static !important; }
#rutas-buscador .poi-popup .popup-image-wrapper { height: 140px !important; background-size: cover !important; background-position: center !important; }
#rutas-buscador .poi-popup .popup-image-wrapper img { display: none !important; }

/* Evitar colapsos de altura por reset agresivos */
#rutas-buscador .poi-popup .leaflet-popup-content > * { display: block !important; }

/* Tarjeta con imagen a sangre + badge km */
.poi-card{ display:block; text-decoration:none; color:inherit; background:#fff; }
.poi-card-img{ position:relative; display:block; width:100%; height:auto; }
.poi-card-img img{ display:block; width:100%; height:auto; margin:0; }

/* Título estilo de referencia (aplica a .poi-title y .popup-title) */
#rutas-buscador .poi-popup .poi-title,
#rutas-buscador .poi-popup .popup-title{
  display:block !important;
  color:#36a53e !important;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif !important;
  font-weight:600 !important;
  line-height:1.2em !important;
  font-size:1em !important;
  margin:0 0 .5em !important;
  word-break:break-word !important;
}

/* Badge km */
.poi-km-badge{
  position:absolute; top:8px; left:8px;
  padding:6px 8px; border-radius:999px;
  background:#fff; color:#000; font-weight:700; font-size:.85rem; line-height:1;
  white-space:nowrap; border:1px solid rgba(0,0,0,.15); box-shadow:0 2px 6px rgba(0,0,0,.12);
}

.poi-card-body{ padding:10px 10px 12px; background:#fff; }
.poi-row{ display:flex; align-items:center; gap:.45rem; font-size:.75rem; margin:.25rem 0; }
.poi-row i{
  width:18px; min-width:18px; text-align:center;
  font-family:"Font Awesome 5 Free" !important;
  font-weight:900 !important;
}

/* Medios dentro del popup limitados a su contenedor */
#rutas-buscador .poi-popup img,
#rutas-buscador .poi-popup video,
#rutas-buscador .poi-popup canvas,
#rutas-buscador .poi-popup svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Imagen header ocupa exactamente el ancho */
#rutas-buscador .poi-popup .poi-card-img { width: 100% !important; overflow: hidden; }
#rutas-buscador .poi-popup .poi-card-img img { display: block !important; width: 100% !important; height: auto !important; }

/* Quitar sombra del icono sobre los pines start/end */
#rutas-buscador .pin i{ text-shadow: none !important; }

/* Botón Buscar: transición sin efectos raros */
#rutas-buscador .btn.btn-buscar{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
  box-shadow: none !important;
  transform: none !important;
}
#rutas-buscador .btn.btn-buscar:hover,
#rutas-buscador .btn.btn-buscar:focus,
#rutas-buscador .btn.btn-buscar:active{
  box-shadow: none !important;
  transform: none !important;
  top: 0 !important;
}
#rutas-buscador .btn.btn-buscar::before,
#rutas-buscador .btn.btn-buscar::after{
  box-shadow: none !important;
  transform: none !important;
}

/* El buscador ocupa todo el ancho disponible del wrapper */
.wpb_wrapper #rutas-buscador.container{
  width: 100% !important;
  max-width: 100% !important;   /* anula el inline max-width:1200px */
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ==================================
   7) SINGLE – MAPA Y POPUPS (POI)
   ================================== */

/* Colores iconos inicio/fin */
.leaflet-marker-pane .marker-icon-start-min i { color: #006db0 !important; }
.leaflet-marker-pane .marker-icon-end-min i { color: #aa0523 !important; }

/* Forzar fuente de FA en ::before por si el tema pisa */
.marker-wrapper .marker-icon i::before{
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free" !important;
  font-weight: 900;
}

/* Popup de hito en SINGLE: ancho + “X” */
body.single-rutas .poi-popup .leaflet-popup-content { width: 180px !important; }
body.single-rutas .leaflet-container .poi-popup a.leaflet-popup-close-button {
  top:8px !important; right:8px !important;
  width:18px !important; height:18px !important; padding:0 !important;
  line-height:16px !important; text-align:center !important;
  border-radius:6px !important; background:#fff !important; color:#000 !important;
  border:1px solid #ddd !important; opacity:1 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}

/* POPUPS – título en POI (single, más pequeño) */
body.single-rutas .poi-popup .popup-title {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  color: #000 !important;
  margin: 0 0 3px !important;
  display: block !important;
}

.row .col img {
  margin-bottom: 0px !important;
  max-width: 100%;
  height: auto;
}

/* Buscador: popup con esquinas redondeadas como en single */
#rutas-buscador .leaflet-popup.poi-popup {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

#rutas-buscador .leaflet-popup.poi-popup .leaflet-popup-content-wrapper{
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
#rutas-buscador .leaflet-popup.poi-popup .leaflet-popup-content{
  border-radius: 12px !important; /* cinturón y tirantes */
}

/* Punta del popup */
#rutas-buscador .leaflet-popup-tip {
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
#rutas-buscador .leaflet-popup-tip-container { margin-top: -1px; }

/* Alineación vertical de iconos en ficha técnica (single rutas) */
body.single-rutas .article-list-info .article-list-item > .fas,
body.single-rutas .article-list-info .article-list-item > .far,
body.single-rutas .article-list-info .article-list-item > .fal,
body.single-rutas .article-list-info .article-list-item > .fa-solid,
body.single-rutas .article-list-info .article-list-item > i.fas,
body.single-rutas .article-list-info .article-list-item > i.far,
body.single-rutas .article-list-info .article-list-item > i.fal,
body.single-rutas .article-list-info .article-list-item > i.fa-solid {
  margin-top: 7px !important;
  line-height: 1;
  display: inline-block;
}


/* ============================================================
   8) OVERRIDES PARA PINES CLICKABLE EN EL BUSCADOR
   ============================================================ */
#rutas-buscador .leaflet-marker-pane { z-index: 800 !important; }

/* Los pines de inicio/fin (.pin) SÍ reciben eventos */
#rutas-buscador .leaflet-marker-icon.pin {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* El click se dirige al contenedor del pin */
#rutas-buscador .leaflet-marker-icon.pin i { pointer-events: none !important; }

/* Botón Buscar: colores consistentes en todos los estados */
#rutas-buscador .btn.btn-buscar{
  background:#fff !important;
  color:#000 !important;
  border:1px solid #ddd !important;
}
#rutas-buscador .btn.btn-buscar:hover,
#rutas-buscador .btn.btn-buscar:focus,
#rutas-buscador .btn.btn-buscar:active,
#rutas-buscador .btn.btn-buscar:focus-visible,
#rutas-buscador .btn.btn-buscar.is-active,
#rutas-buscador .btn.btn-buscar[aria-pressed="true"]{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
  outline: none !important;
}

/* El icono y el texto heredan el color del botón */
#rutas-buscador .btn.btn-buscar i,
#rutas-buscador .btn.btn-buscar span{
  color: inherit !important;
}

/* Evitar efectos del tema (sombra/movimiento) */
#rutas-buscador .btn.btn-buscar{
  box-shadow:none !important;
  transform:none !important;
}
#rutas-buscador .btn.btn-buscar:hover,
#rutas-buscador .btn.btn-buscar:focus,
#rutas-buscador .btn.btn-buscar:active{
  box-shadow:none !important;
  transform:none !important;
  top:0 !important;
}

/* Ocultar banderita de atribución */
.leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }

/* Mantén Buscar y Limpiar en una sola línea */
#rutas-buscador .buscador-filtros .btn-row{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap;
  align-items:center;
}

/* Evitar cortes de texto y ensanches por defecto */
#rutas-buscador .btn{
  white-space:nowrap;
  min-width:auto;
}

/* Botón Buscar: padding compacto */
#rutas-buscador .btn.btn-buscar{
  padding:.35rem .3rem !important;
  font-size:.95rem;
  line-height:1.1;
  box-shadow:none !important;
  transform:none !important;
}
/* Si el tema insiste con [data-form-submit] */
body[data-form-submit] #rutas-buscador .btn.btn-buscar{
  padding:.35rem .9rem !important;
}

/* También compacta el "Limpiar filtros" */
#rutas-buscador #btn-limpiar{
  padding:.35rem .5rem !important;
  font-size:.95rem;
  line-height:1.1;
}


/* ============================================================
   9) FONDO ESPECÍFICO — BUSCADOR AIARALDEA
   ============================================================ */
/* Varias estructuras soportadas */
#rutas-buscador.region-aiaraldea .buscador-filtros,
#region-aiaraldea #rutas-buscador .buscador-filtros,
.rutas-buscador[data-region="aiaraldea"] .buscador-filtros,
[data-region="aiaraldea"] #rutas-buscador .buscador-filtros {
  background-color: #00524f !important;
}
/* Fondo solo en /aiaraldea/ */
body.page-aiaraldea #rutas-buscador .buscador-filtros {
  background: #00524f !important;
}
/* Fondo SOLO cuando la URL es /aiaraldea/ */
.aiaraldea-path #rutas-buscador .buscador-filtros{
  background:#00524f !important;
  border: 1px solid #00524f;
}
/* Texto de ayuda en blanco solo en Aiaraldea */
.aiaraldea-path #rutas-buscador .buscador-filtros .form-help {
  color: #fff !important;
}

/* Desktop (>=1024px): altura fija del mapa del buscador */
@media (min-width: 1024px) {
  #rutas-buscador main > #rutas-map.leaflet-container.leaflet-touch[aria-label="Mapa de rutas"]{
    height: 655px !important;
    min-height: 655px !important;
    max-height: none !important; /* anula el 85vh */
  }
  /* La grid no estira por alto */
  #rutas-buscador .buscador-grid { align-items: start !important; }
}

/* Alinear "Limpiar filtros" a la derecha */
#rutas-buscador .buscador-filtros .btn-row {
  display: flex;
  align-items: center;
}
#rutas-buscador .buscador-filtros #btn-limpiar {
  margin-left: auto;
}

/* Desktop (>=1025px): solapado hacia arriba */
@media (min-width: 1025px) {
  .aiaraldea-path #rutas-buscador #rutas-map {
    margin-top: -6rem !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
}
/* Tablet & Mobile (<=1024px): espacio hacia abajo */
@media (max-width: 1024px) {
  .aiaraldea-path #rutas-buscador #rutas-map {
    margin-top: 2rem !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
}

/* Altura fija para la imagen de la tarjeta en los popups del buscador */
#rutas-buscador .poi-popup .poi-card-img { height: 141px !important; }
#rutas-buscador .poi-popup .poi-card-img img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover; /* recorta sin deformar */
}

/* Quitar subrayado de los iconos + y - del control de zoom de Leaflet */
#rutas-buscador .leaflet-control-zoom a,
#rutas-buscador .leaflet-control-zoom a:hover,
#rutas-buscador .leaflet-control-zoom a:focus {
  text-decoration: none !important;
}


/* =================================================================
   10) MÁSCARA CIRCULAR ANCLADA AL ASIDE (encima del mapa)
   ================================================================= */

/* Variables ajustables */
:root {
  --rutas-mask-size: 520px;       /* diámetro desktop */
  --rutas-mask-color: #00524f;    /* color de la máscara */
  --rutas-mask-top: 50%;          /* posición vertical relativa al aside */
  --rutas-mask-left: 50%;         /* posición horizontal relativa al aside */
  --rutas-mask-tx: -50%;          /* translateX */
  --rutas-mask-ty: -50%;          /* translateY */
}

/* Evitar recortes por wrappers del tema */
#rutas-buscador,
#rutas-buscador .buscador-grid,
#rutas-buscador .row,
#rutas-buscador .wpb_row,
#rutas-buscador .wpb_column {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Orden de apilado: mapa debajo, aside (y su máscara) encima */
#rutas-buscador .buscador-grid main,
#rutas-buscador .buscador-grid .map-wrap,
#rutas-buscador .buscador-grid #rutas-map,
#rutas-buscador .buscador-grid .leaflet-container {
  position: relative !important;
  z-index: 100 !important;
}
#rutas-buscador .buscador-grid .buscador-filtros {
  position: relative !important;
  z-index: 3000 !important;
  overflow: visible !important;
}

/* Máscara anclada al aside (debajo de sus campos, encima del mapa) */
#rutas-buscador .buscador-grid .buscador-filtros::before {
  content: "";
  position: absolute;
  width: var(--rutas-mask-size);
  height: var(--rutas-mask-size);
  background: var(--rutas-mask-color);
  border-radius: 50%;
  top: var(--rutas-mask-top);
  left: var(--rutas-mask-left);
  transform: translate(var(--rutas-mask-tx), var(--rutas-mask-ty));
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* Contenido del aside por encima de la máscara */
#rutas-buscador .buscador-grid .buscador-filtros > * {
  position: relative;
  z-index: 1;
}

/* Responsive máscara */
@media (max-width: 1200px) {
  :root { --rutas-mask-size: 480px; }
}
@media (max-width: 992px) {
  :root { --rutas-mask-size: 700px; }
}
@media (max-width: 768px) {
  :root {
    --rutas-mask-size: 650px;
    /* Ejemplo opcional:
    --rutas-mask-left: 85%;
    --rutas-mask-tx: -70%;
    */
  }
}
@media (max-width: 640px) {
  :root {
    --rutas-mask-size: 550px;
    /* Ejemplo opcional:
    --rutas-mask-left: 60%;
    --rutas-mask-tx: -60%;
    */
  }
}

/* Presets de posición útiles (descomenta si lo necesitas) */
/*
#rutas-buscador .buscador-grid .buscador-filtros {
  --rutas-mask-top: 45%;
  --rutas-mask-left: 100%;
  --rutas-mask-tx: -25%;
  --rutas-mask-ty: -50%;
}
*/


/* =================================================================
   11) LÍNEA AMARILLA + TEXTO PERSONALIZADO EN .form-help
   ================================================================= */

/* Base: ocultar texto original visualmente y reemplazar con ::after */
#rutas-buscador .buscador-filtros .form-help {
  position: relative;
  display: block;
  margin: 0 0 .75rem !important;
  text-align: center;
  line-height: 1.35;
  font-size: 0 !important; /* oculta el texto original */
}

/* Línea amarilla encima del texto */
#rutas-buscador .buscador-filtros .form-help::before {
  content: "";
  display: block;
  height: 4px;
  width: clamp(48px, 8vw, 80px);
  margin: 0 auto 10px auto;
  background-color: #fac400;
  border-radius: 2px;
}

/* Texto por defecto (GENÉRICO) */
#rutas-buscador .buscador-filtros .form-help::after {
  content: "Explora y filtra tus rutas de senderismo";
  display: inline-block;
  font-size: .95rem;
  color: #333;
}

/* Variante AIARALEA (panel oscuro) */
.aiaraldea-path #rutas-buscador .buscador-filtros .form-help::after {
  content: "Filtra en el buscador o busca en el mapa tu ruta de senderismo en Aiaraldea";
  color: #fff;
}

/* Aiaraldea: panel de filtros sin fondo ni bordes (sobre la máscara) */
.aiaraldea-path #rutas-buscador .buscador-grid .buscador-filtros {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Aiaraldea (≤992px): filtros máx 500px y centrados */
@media (max-width: 992px) {
  .aiaraldea-path #rutas-buscador .buscador-grid {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .aiaraldea-path #rutas-buscador .buscador-grid .buscador-filtros {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto 1rem auto !important;
  }
}

/* === Map height override en móviles (iPhone SE y similares) === */
@media (max-width: 600px) {
  /* Igualamos la especificidad que te estaba pisando */
  #rutas-buscador #rutas-map.leaflet-container,
  #rutas-buscador .rutas-map-frame > .leaflet-container#rutas-map,
  #rutas-buscador #rutas-map {
    height: 85vh !important;
    min-height: 575px !important;
    max-height: none !important;
  }

  /* Asegura que los contenedores padres no limitan la altura */
  #rutas-buscador .buscador-grid .map-wrap,
  #rutas-buscador .rutas-map-frame {
    height: auto !important;
    min-height: 575px !important;
  }
}
/* === Map height override en tablets (iPad Air, hasta 1024px) === */
@media (max-width: 1024px) {
  #rutas-buscador #rutas-map.leaflet-container,
  #rutas-buscador .rutas-map-frame > .leaflet-container#rutas-map,
  #rutas-buscador #rutas-map {
    height: 75vh !important;      /* aprovecha más pantalla en tablet */
    min-height: 620px !important; /* asegura altura mínima */
    max-height: none !important;
  }

  #rutas-buscador .buscador-grid .map-wrap,
  #rutas-buscador .rutas-map-frame {
    height: auto !important;
    min-height: 620px !important;
  }
}

#rutas-list.routes-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
  margin-top: 1rem;
}
@media (max-width: 980px){
  #rutas-list.routes-row { grid-template-columns: 1fr; }
}

#rutas-list .card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* etc. (el estilo que ya te pasé antes para títulos, cintas km, campos, hover…) */

/* ===== Grid externo: 4 → 2 → 1 columnas ===== */
#rutas-list.routes-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 1rem;
}
@media (max-width: 1200px){
  #rutas-list.routes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  #rutas-list.routes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  #rutas-list.routes-row { grid-template-columns: 1fr; }
}

/* ===== Fichas con el mismo estilo que el popup ===== */
#rutas-list .route.item-card .poi-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Imagen 16:9 con cover (similar a cómo “llena” el popup) */
#rutas-list .poi-card-img img{
  display:block;
  width:100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Reutilizamos las clases ya inyectadas por JS:
   .poi-km-badge, .poi-card-body, .poi-title, .poi-row (ya tienen estilos) */

/* Opcional: al pasar el ratón, remarcar como hover del popup */
#rutas-list .route.item-card:hover .poi-card,
#rutas-list .route.item-card:focus-within .poi-card{
  outline: 2px solid rgba(0,0,0,.12);
  outline-offset: 2px;
}

/* Grid de tarjetas externas */
#rutas-list.routes-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px !important;   /* ← aumento de separación */
  margin-top: 1rem;
}

/* Grid de tarjetas externas: 4 columnas en desktop */
#rutas-list.routes-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px !important;
  margin-top: 1rem;
}

/* En tablets y pantallas medianas → 2 columnas */
@media (max-width: 980px){
  #rutas-list.routes-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px !important; /* un poco menos de separación */
  }
}

/* En móviles pequeños → 1 columna */
@media (max-width: 600px){
  #rutas-list.routes-row {
    grid-template-columns: 1fr;
    gap: 20px !important;
  }
}

/* Reducir tamaño de título en las fichas externas */
#rutas-list .poi-title {
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 600; /* igual que el popup */
  margin: 0 0 .5em;
  text-align: left;
}

.page-id-aiaraldea .nectar-global-section.before-footer {
  display: none !important;
}

/* ==== LISTADO (debajo del mapa) ==== */
#rutas-list .route.item-card.poi-card {
  background: #fff !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
  will-change: transform, box-shadow;
}
#rutas-list .route.item-card.poi-card .poi-card-body,
#rutas-list .route.item-card.poi-card .poi-card-img {
  background: #fff !important;
}
#rutas-list .route.item-card.poi-card .poi-card-img img {
  display: block;
  width: 100%;
  height: auto;
}
#rutas-list .route.item-card.poi-card:hover,
#rutas-list .route.item-card.poi-card:focus-within {
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
#rutas-list .route.item-card.poi-card { cursor: default; }
#rutas-list .route.item-card.poi-card .poi-title .r-title-link {
  cursor: pointer; text-decoration: none;
}

/* ==== POPUPS EN EL MAPA (sin hover ni borde) ==== */
.poi-popup .poi-card {
  background: #fff !important;
  border-radius: 12px;       /* mantén el redondeo */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: none !important;   /* quita el borde gris */
  transform: none !important;
  transition: none !important;
}
.poi-popup .poi-card:hover,
.poi-popup .poi-card:focus-within {
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; /* sin elevación extra */
  transform: none !important;
}
.poi-popup .poi-card .poi-card-img {
  background: transparent !important; /* evita “reborde” visual */
}
.poi-popup .poi-card .poi-card-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 !important;
  box-shadow: none !important;
}

/* Por si el wrapper del popup añade margen/padding: ya lo anulamos arriba,
   pero reforzamos para evitar halos alrededor de la imagen */
.poi-popup .leaflet-popup-content { margin: 0 !important; }
.poi-popup .leaflet-popup-content-wrapper { padding: 0 !important; }

/* Espaciado extra bajo el título en desktop */
.ruta-title {
  margin-bottom: 25px !important;
}

/* En móviles (≤768px) lo dejamos más compacto */
@media (max-width: 768px) {
  .ruta-title {
    margin-bottom: 12px !important;
  }
}

/* Single rutas — tablet/móvil: sin huecos y mapa a 620px */
@media (max-width: 991px) {
  .single-rutas .ruta-grid {
    gap: 0 !important;
  }
  .single-rutas .ruta-left,
  .single-rutas .ruta-left > *:last-child,
  .single-rutas .ruta-left > .vc_column-inner,
  .single-rutas .ruta-left > .vc_column-inner > .wpb_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .single-rutas .ruta-right,
  .single-rutas .ruta-right > *:first-child,
  .single-rutas .ruta-right > .vc_column-inner,
  .single-rutas .ruta-right > .vc_column-inner > .wpb_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .single-rutas .ruta-right {
    height: auto !important;
    margin-bottom: 0px !important; /* aire respecto al footer */
  }
  .single-rutas .ruta-right #map,
  .single-rutas .ruta-right #map.leaflet-container {
    height: 620px !important;
    min-height: 620px !important;
  }
}

/* Single rutas — desktop: alinear final de la columna izquierda con el mapa */
@media (min-width: 992px) {
  .single-rutas .ruta-left {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* elimina margenes/paddings del ÚLTIMO bloque real dentro de la izquierda */
  .single-rutas .ruta-left > *:last-child,
  .single-rutas .ruta-left .ruta-descripcion-larga:last-child,
  .single-rutas .ruta-left .ruta-contenido:last-child,
  .single-rutas .ruta-left .ruta-slide:last-child,
  .single-rutas .ruta-left .ruta-ficha:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* por si el último contenido es un párrafo/lista/figura dentro de esos bloques */
  .single-rutas .ruta-left > *:last-child > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

#rutas-buscador .routes-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* Ajuste: quitar padding izquierdo en la ficha */
.ruta-ficha {
  padding-left: 0 !important;
  padding-top: 5px !important;
}

/* === SINGLE RUTAS — MOBILE/TABLET: mapa NO sticky y sin bleed === */
@media (max-width: 991px){

  /* 1) Orden normal: contenido primero, mapa después */
  .single-rutas .ruta-grid{
    display: block !important;        /* evita grid sticky raro */
  }

  /* 2) Anula sticky y alturas forzadas en toda la cadena derecha */
  .ruta-right.template-layout-map,
  .ruta-right.template-layout-map .ruta-map-stick,
  .ruta-right.template-layout-map .ruta-map-viewport{
    position: static !important;
    top: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 0 !important;
  }

  /* 3) El mapa vuelve a ser un bloque normal, encajado y con radios */
  .template-layout-map #map,
  .ruta-right.template-layout-map #map.ruta-map{
    position: relative !important;
    width: 100% !important;
    height: 60vh !important;
    min-height: 420px !important;
    border-radius: 12px !important;
    padding-right: 0 !important;      /* sin “safe area” en móvil */
    box-shadow: none !important;
  }

  /* 4) Por si queda algún “bleed” heredado: asegúralo */
  .template-layout-map #map { max-width: 100% !important; }

  /* 5) Un poco de aire con el bloque anterior */
  .ruta-right.template-layout-map{ margin-top: 16px !important; }

  /* 6) Que el header nunca quede por debajo del mapa */
  #header-outer{ position: relative; z-index: 1000; }

  /* 7) Controles/atribución del mapa no superen el header */
  .leaflet-top, .leaflet-bottom{ z-index: 10 !important; }
}