/* custom-leaflet.css */

.custom-leaflet-map {
  height: 600px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.leaflet-popup-content{
	margin: 0px !important;
	/*padding: 5px 15px 10px 15px;*/
}

.leaflet-popup-tip {
    background: transparent;
}
/* ─── Sidebar ─── */
.poi-sidebar {
  padding: 12px;
  background: #f9f9f9;
  overflow-y: auto;
}
/* Sidebar del mapa */

.poi-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  border-top: 2px solid transparent;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background-color 0.4s ease;
  position: relative;
  padding: 12px;
}

/* Tarjeta seleccionada: fondo ligero */
.poi-card.selected {
  background-color: rgba(var(--route-color-rgb), 0.12);
  animation: glowBorder 0.8s ease-out forwards;
}

/* (Opcional) animación de entrada por deslizamiento horizontal */
@keyframes glowBorder   {
  0% {
    box-shadow: 0 0 0 rgba(var(--route-color-rgb), 0);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--route-color-rgb), 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(var(--route-color-rgb), 0);
  }
}
.poi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--border-color, transparent);
}

.poi-card-header {
  display: flex;
  align-items: center;
  padding: 8px;
}
.poi-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}
.poi-info h4 {
  margin: 0;
  font-size: 16px;
  color: #150b02;
}
.poi-info p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #666;
}

/* “Ver más” button */
.poi-button {
  margin: 10px;
  padding: 8px 0;
  background: #150b02;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.poi-button:hover {
  background: #110801;
}

/* Detalles de POIs anidados */
.poi-children {
  padding: 0 12px 10px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #444;
}
.poi-children summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
}
.poi-children ul.poi-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.poi-children ul.poi-list li {
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}
.poi-children ul.poi-list li:last-child {
  border-bottom: none;
}
/* Título de Cruces */
.poi-cross-title {
  margin: 16px 0 8px;
  font-size: 18px;
  color: #150b02;
  /*border-bottom: 2px solid #150b02;*/
  padding-bottom: 4px;
}
/* Clústeres */
.cluster-icon, .cluster-icon-poi {
  position: relative;
}
.cluster-icon img, .cluster-icon-poi img {
  display: block;
}
.cluster-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: #68b51b;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Ruta / Cruce Card */
.poi-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.poi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Header */
.poi-card-header {
  display: flex;
  align-items: center;
  padding: 5px;
}

/* Botón de geolocalización */
.locate-btn { background: #fff; border: none; font-size: 13px; padding: 6px; cursor: pointer; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.locate-btn:hover { background: #f0f0f0; }
/* Popups de experiencias */
.popup-experiencias {
	margin-top: 12px; 
	max-width: 320px; 
	position: relative; 
	overflow: hidden; 
	
}
.popup-experiencias h4 { 
	margin-bottom: 8px; 
	font-size: 16px; 
}

/* Estilo de la cajita que envuelve las experiencia en el pop-up de los cruces de camino */
.exp-container { 
	width: 100% !important; 
	box-sizing: border-box; 
}
.exp-container .swiper-wrapper { 
	display: flex; 
}
.exp-container .swiper-slide { 
	flex: 0 0 100%; 
	display: flex; 
	align-items: center !important; 
	padding: 4px; }
.popup-experiencias .swiper-pagination { 
	position: absolute; 
	bottom: 8px; 
	width: 100%; 
	display: flex; 
	justify-content: center !important; 
	gap: 10px; 
	z-index: 10; }
.popup-experiencias .swiper-pagination-bullet { 
	width: 8px; 
	height: 8px; 
	background: #150b02; 
	border-radius: 50%; 
	opacity: 1; 
	transition: background 0.3s; }
.popup-experiencias .swiper-pagination-bullet-active { 
	background: #818181; 
}
/* estilos del apartado de expriencia dentro del pop-up de cruces */
.exp-slide img { 
	width: 40px; 
	height: 40px; 
	object-fit: cover; 
	border-radius: 4px; 
	margin-right: 8px; 
}
.exp-slide a { 
	color: #150b02 !important; 
	font-weight: bold; 
	font-size: 12px; 
	text-decoration: none; 
}
/* wrapper general */
.alltrails-popup {
  display: flex;
  flex-direction: column;
  color: #333;
}

/* imagen en la parte superior con bordes redondeados*/
.alltrails-popup__image img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* contenido */
.alltrails-popup__content {
  padding: 5px 15px 10px 15px;
}

/* título destacado */
.alltrails-popup__title {
  margin: 4px 0 4px;
  font-size: 18px;
  line-height: 1.2;
}

/* descripción */
.alltrails-popup__desc {
  font-size: 14px;
  margin-bottom: 8px;
  color: #555;
}

/* botón “Ver detalle” estilo AllTrails */
.alltrails-popup__btn_comollegar {
  display: block;          /* para poder darle ancho fijo */
  width: 100%;              /* ocupa el 80% del ancho del popup */
  margin: 25px auto 0;     /* margen superior y centrado horizontal */
  padding: 8px 0;          /* altura cómoda */
  background: #150b02;
  color: #fff;
  border: none;
  border-radius: 4px 4px 0px 0px;
  font-size: 12px;
  cursor: pointer;
}
.alltrails-popup__btn_comollegar:hover {
  background: #110801;
}

/* botón “Como llegar” estilo AllTrails */
.alltrails-popup__btn {
  display: block;          /* para poder darle ancho fijo */
  width: 100%;              /* ocupa el 80% del ancho del popup */
  margin: 5px auto 0;     /* margen superior y centrado horizontal */
  padding: 8px 0;          /* altura cómoda */
  background: #150b02;
  color: #fff;
  border: none;
  border-radius: 0px 0px 4px 4px;
  font-size: 12px;
  cursor: pointer;
}
.alltrails-popup__btn:hover {
  background: #110801;
}
.leaflet-popup-close-button{
	background: #150b02 !important;
	color: #fff !important;
	border-radius: 0px 4px 0px 0px;
}

/* ====================
   Popup de Cruce: Rutas con icono idéntico
   ==================== */
.cross-popup__routes {
  margin: 16px 0;
}
.cross-popup__routes h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #150b02;
  padding-bottom: 4px;
}

.cross-route-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cross-route-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px;
  background: #fcfcfc;
  border-top: 2px solid var(--route-color);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.2s;
}
.cross-route-list__item:last-child {
  border-radius: 4px;
  margin-bottom: 0;
}

/* Icono SVG coloreado y con sombra exacto igual a tu marcador */
.cross-route-list__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Se asume que el SVG ya trae su sombra, si no: */
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3));
}

/* Enlace */
.cross-route-list__link {
  color: #150b02 !important;
  text-decoration: none !important;
  font-size: 10px;
  flex: 1;
  transition: color 0.2s;
}
.cross-route-list__link:hover {
  color: var(--route-color);
}

/* Hover general de la fila */
.cross-route-list__item:hover {
  background: rgba(0,0,0,0.03);
  transform: translateY(-1px);
}



/* Estilos para clusters modernos */
.cluster-icon { position: relative; width: 30px; height: 40px; }
.cluster-icon img { display: block; width: 30px; height: 40px; }
.cluster-icon-poi { position: relative; width: 20px; height: 25px; }
.cluster-icon-poi img { display: block; width: 20px; height: 25px; }
.cluster-badge {/* estilo del elemento que indica el numero de iconos dentro de un cluster */
	position: absolute;        
	bottom: -6px;        
	right: -16px;        
	background: #68b51b;        
	color: #fff;        
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Coloca el panel a la izquierda, sin márgenes, y con transición */
.leaflet-control.filter-panel {
	position: absolute;
	top: 15px;
	left: 10px !important; /* fuerza el flush a la izquierda */
	margin: 0 !important;
	width: 300px;
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	transition: width 0.25s ease-in-out;
	z-index: 1000;
}

/* Estado cerrado: mostramos sólo el header como botón */
.leaflet-control.filter-panel.closed {
	width: 80px;            /* ancho del botón */
}
.leaflet-control.filter-panel.closed .filter-body {
	display: none;          /* ocultamos el cuerpo */
}
/* ESTILOS DEL BOTON DE FILTROS */
/* Header estilo “botón” */
.filter-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	color: #fff;
	cursor: pointer;
	background: #150b02;	
}
.filter-icon {
	color: #ffffff;          /* pinta el path de currentColor en blanco */
	vertical-align: middle;
	margin-right: 0.4em;	
}

/* Cuerpo con padding y disposición vertical */
.filter-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* opcional: animar la opacidad al abrir/cerrar */
	transition: opacity 0.2s ease-in-out;
	background: #fafafa;
}
.leaflet-control.filter-panel.closed .filter-body {
	opacity: 0;
}

/* Inputs y botones con estilo limpio */
.filter-input, .filter-select {
	padding: 8px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 4px !important;
	outline: none;
	border-color: #150b02;
}
.filter-input:focus, .filter-select:focus {
	border-color: #150b02;
}
.filter-clear {
	padding: 8px;
	background: #150b02;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.2s;
}
	.filter-clear:hover {
	  background: #110801;
	}

	/* Sugerencias con estilo más ligero ??*/
	.filter-suggestions {
	  max-height: 120px;
	  overflow-y: auto;
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}
	.filter-suggestions li {
	  padding: 6px 8px;
	  font-size: 14px;
	  cursor: pointer;
	  transition: background 0.15s;
	}
	.filter-suggestions li:hover {
	  background: rgba(21,11,2,0.05);
	}
/* Contenedor de cada checkbox + texto */
.filter-body .filter-checkbox {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

/* Ocultamos el checkbox nativo */
.filter-body .filter-checkbox input[type="checkbox"] {
	/* fallback para navegadores antiguos: */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--primary-color, #150b02);
	border-radius: 4px;
	margin-right: 8px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

/* Estado marcado: fondo y “check” */
.filter-body .filter-checkbox input[type="checkbox"]:checked {
  background-color: var(--primary-color, #150b02);
  border-color: var(--primary-color, #150b02);
}

.filter-body .filter-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; left: 6px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* El texto */
.filter-body .filter-checkbox span {
  line-height: 1;
  color: var(--text-color, #333);
}

.poi-marker {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #fff; /* opcional, borde blanco */
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 1) Asegúrate de que el contenedor padre reparta horizontalmente mapa+sidebar ?? */
.map-wrapper {
  display: flex;
}

/* 2) Sidebar de ancho fijo */
.poi-sidebar {
  width: 450px !important;
  border-radius: 8px !important;
}

/* 3) Cuando el wrapper tiene .fullwidth, oculta la sidebar y deja que el mapa crezca */
.map-wrapper.fullwidth .poi-sidebar {
  display: none;
}
.map-wrapper.fullwidth .custom-leaflet-map {
  flex: 1 1 auto;
}

/* 4) Evita que un width fijo sobre .custom-leaflet-map anule el flex */
.custom-leaflet-map {
  width: auto !important;
}
/* Popup Glassmorphism translúcido*/
.route-popup--glass .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.route-popup--glass h4 {
  margin: 0 0 4px;
  font-size: 16px;
}
.route-popup--glass p {
  margin: 0 8px 12px;
  font-size: 14px;
  color: #333;
}
.route-popup--glass .route-popup__btn {
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--route-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;	
}
.sidebar-toggle {
  display: none;
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1001;
  background: #150b02;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
}
/* altura por defecto (desktop) */
.map-layout .custom-leaflet-map,
.map-layout .poi-sidebar {
  height: 700px !important;
}

/* Contenedor de los dos botones en fila */
.popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center; 
}

/* Cada botón ocupa mitad y centra su icono */
.popup-action-btn {
  flex: 0 0 var(--btn-width, 50%);   /* por defecto 50%, pero lo que pongas en --btn-width */
  max-width: var(--btn-width, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #150b02;
  border: none;
  border-radius: 4px;
  padding: 5px 0;
  cursor: pointer;
  color: #fff;
}

.popup-action-btn:hover {
  background: #110801;
}

.popup-action-btn-como-llegar {
  flex: 0 0 var(--btn-width, 50%);   /* por defecto 50%, pero lo que pongas en --btn-width */
  max-width: var(--btn-width, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #150b02;
  border: none;
  border-radius: 4px;
  padding: 5px 0;
  cursor: pointer;
  color: #fff;
}

.popup-action-btn-como-llegar:hover {
  background: #110801;
}

.sidebar-popup-action-btn {
  flex: 0 0 var(--btn-width, 10%);   /* por defecto 50%, pero lo que pongas en --btn-width */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #150b02;
  border: none;
  border-radius: 4px;
  padding: 10px 0;
  cursor: pointer;
  color: #fff;
	  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background 0.2s;
}

.sidebar-popup-action-btn:hover {
    background: #110801;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* Asegura que la img del icono se transforme en blanco */
.popup-action-icon {
  width: 20px;
  height: 20px;
}

/*.fullscreen-toggle { //TODO: SI DA TIEMPO ACABAR DE DESARROLLAR LA PANTALLA COMPLETA
  position: absolute;
  top: 12px;
  right: 200px;
  z-index: 1200;
  background: rgba(21,11,2,0.8);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
}*/

/**** Estilos del boton de leyenda ****/
.leaflet-control.legend-panel {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  min-width: 85px;
  margin-bottom: 25px !important;
}

.legend-panel .filter-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	color: #fff;
	cursor: pointer;
	background: #150b02;	

}

.legend-panel .filter-header:hover {
  background: #150b02;
}

.legend-panel .filter-icon {
  margin-right: 6px;
}

.legend-panel .legend-content {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
}

.legend-panel.closed .legend-content {
  display: none;
}

.legend-panel .legend-content div {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.legend-panel .legend-content span {
  width: 100px;
  height: 14px;
  margin-right: 8px;
  border-radius: 3px;
  display: inline-block;
}

.legend-panel .legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  color: #150b02;
}
.legend-panel .legend-item img,
.legend-panel .legend-item .poi-marker {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}



@media (min-width: 768px) {
  /* Fila superior: miniatura + info + botón  */
  .poi-card-header,
  .poi-button {    
    align-items: flex-start !important; /* alineamos por arriba */
  }

  /* Encapsulamos header e info en un flex container */
  .poi-card-header {
    flex: 1;                /* ocupa todo el espacio disponible */
    gap: 12px;              /* espacio entre thumb e info */
    padding: 0;             /* ya tenemos padding en .poi-card */
    margin: 0;
  }

  /* Miniatura sin márgenes extra verticales */
  .poi-thumb {
    margin: 0;
    flex-shrink: 0;
  }

  /* Contenedor de texto ocupa resto de ancho */
  .poi-info {
    flex: 1;
  }

  /* H4 con margen controlado y line-height para dos líneas limpias */
  .poi-info h4 {
    margin: 0 0 4px;
    line-height: 1.2;
  }

  .poi-info p {
    margin: 0;
  }

  /* Botón “Ver más” integrado en la misma fila, a la derecha */
  .poi-button {
    margin: 0 0 0 0px;     /* separarlo ligeramente del header */
    padding: 8px 16px;      /* algo más de click‐area */
  }

  /* <details> en “segunda fila” con su propio margin */
  .poi-card > details.poi-children {
    margin: 12px 0 0;
  }
	
.poi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  /* El header sigue flex-row para imagen + texto */
  .poi-card-top .poi-card-header {
    flex: 1;  /* ocupa todo el espacio sobrante */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* El botón nunca se mueve */
  .poi-card-top .poi-button {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* El details va siempre abajo en block */
  .poi-card > details.poi-children {
    margin-top: 8px;
  }
}
/* === Layout general: en móvil, sidebar colapsada bajo el mapa === */
@media (max-width: 768px) {
  .map-wrapper {
    flex-direction: column;      /* apilar mapa encima de sidebar */
	position: relative; 
  }
  .poi-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 85%;
    max-width: 300px;
    background: rgba(249,249,249,0.95);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .poi-sidebar.open {
    transform: translateX(0);
  }
  .custom-leaflet-map {
    height: calc(100vh - 50px);  /* deja espacio para toggle */
  }
  /* Botón toggle */
  .sidebar-toggle {
    display: block;
  }
  .sidebar-toggle {
    position: absolute;
    top: 16px;     
	right: 20px;    /* <— ahora a la derecha */
    left: auto;     /* <— anulamos el “left” */
    z-index: 1100;
    background: #150b02;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
	min-width:40px;
	min-height:40px;
  }
  .map-layout .custom-leaflet-map,
  .map-layout .poi-sidebar {
    height: 480px !important;
  }
	/* ============ Ajustes para pop-ups en móvil ============ */
  .popup-experiencias {
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* 2) Asegura que el propio popup ocupe casi todo el ancho de la pantalla */
  .route-popup--glass .leaflet-popup-content-wrapper {
    width: 90vw !important;      /* 90% de la anchura de la ventana */
    max-width: 70vw !important;   /* nunca supere esa anchura */
    box-sizing: border-box;       /* incluye padding en el cálculo */
  }
	  /* 1) Forzar ancho completo al contenido */
  .route-popup--glass .leaflet-popup-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
	overflow-wrap: break-word;
  }


  /* 3) Los botones al 100% del ancho del popup */
  .alltrails-popup__btn,
  .alltrails-popup__btn_comollegar {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;    /* anula centrados previos */
    margin-right: 0 !important;
  }
	
	.sidebar-popup-action-btn {
	  margin: 10px;
	  width: 100%;
	  padding: 8px 0;
	  background: #150b02;
	  color: #fff;
	  border: none;
	  border-radius: 6px;
	  cursor: pointer;
	  font-size: 14px;
	  transition: background 0.2s;
	  max-width: var(--btn-width, 93%);
	}

	.sidebar-popup-action-btn:hover {
	  background: #110801;
	}
	
}