/* GENERAL */

p{
font-family:Trebuchet MS;font-size:13px; color: white
	}

a:link {
	text-decoration: none;
	}

img{
	vertical-align:middle;
	border-style:none;
	}

a{
	color:inherit
	}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
	}

.SupermenuMaps {
	background: -webkit-linear-gradient(#283D53,#283D53,#283D53,#7AC1D3);
	background: -moz-linear-gradient(#283D53,#283D53,#283D53,#7AC1D3);
	background: -o-linear-gradient(#283D53,#283D53,#283D53,#7AC1D3);
	background: linear-gradient(#283D53,#283D53,#283D53,#7AC1D3);
	color: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-top: 3px solid orange;
	border-bottom: 0px solid black;
	border-left: 0px solid black;
	border-right: 0px solid black;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 5px 5px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	width: auto;
	margin-bottom:10px;
	}

.ObservadorMaps {
	align-content: center;
	box-shadow:inset -1px -1px 1px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	padding: 2px;
	width:100%;
	height:80px;
	}
	
.WebcamObservadorMaps {
	align-content: center;
	box-shadow:inset -1px -1px 1px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	padding: 2px;
	width:180px;
	height:90px;
	}
.QuadreWROESTFOTO {
	text-align: center;
	align-content: center;
	box-shadow:inset -5px -5px 5px rgba(0,0,0,.3), inset 4px 4px 4px rgba(255,255,255,.2);
	background-color: #283D53;
	color: white;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid black;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	width:150px;
	height:70px;
	}


 
/* Ajustes del mapa */
#mapid {
	height: calc(100vh); /* Ajusta la altura del mapa para dejar espacio para la barra de colores y controles */
	margin: 0; /* Elimina márgenes */
	padding: 0; /* Elimina padding */
	border: 2px solid orange;
	border-radius: 5px;
}
 
/* Ajuste de la posición del timestamp */
#timestamp {
	text-align: center;
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	z-index: 1000;
	font-size: 9px;
	margin: 0;
}
 
/* Estilos de los controles personalizados */
.custom-controls {
	padding: 1px;
	border-radius: 50px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 1000;
	background: #283D53;
	border: 1px solid orange;
}
 
.custom-controls button {
	display: inline-block;
	font-size: 10px;
	color: black;
	margin: 1px;
	border: 1px solid orange;
	border-radius: 50px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	background: lightblue;
}
#custom-footer {
	position: fixed;
	bottom: 40px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
	color: #ffffff; /* Cambia el color del texto a rojo */
	background-color: rgba(255, 255, 255, 0.0);
	padding: 1px 0;
	z-index: 1001;
}
 
/* Cambiar el color de los enlaces dentro del footer */
#custom-footer a {
	color: #ffffff; /* Cambia el color de los enlaces a rojo */
	text-decoration: none; /* Opcional: Elimina el subrayado de los enlaces */
}
 
#custom-footer a:hover {
	text-decoration: underline; /* Opcional: Subraya los enlaces al pasar el ratón por encima */
}
 
/* Añadir algo de estilo CSS para el control de capas y el botón
/* Estilo del contenedor de la leyenda */
.info.legend {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90vw;
	max-width: 1500px;
	background: rgba(0, 0, 0, 0.6);
	padding: 3px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1000;
	}
 
/* Ajustar el tamaño de las barras dentro del contenedor de la leyenda */
.info.legend .color-bar {
	width: 100%;
	height: 18px;
	margin-bottom: 2px;
	position: relative;
	}
 
/* Estilo de las etiquetas en la barra de colores */
.info.legend .labels {
	position: absolute;
	top: -15px; /* Subir las etiquetas un poco por encima de la barra */
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 6px;
	box-sizing: border-box;
	}
 
.info.legend .labels .label {
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	font-size: 9px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50px;
	padding: 2px 3px;
	white-space: nowrap;
	opacity: 1;
	border: 1px solid orange;
	}

/* Gradiente específico para la capa 1 Tempertaura*/
.color-bar-layer1 {
	background: linear-gradient(
		to right, /* Dirección del gradiente */
		#ff66b2 0%,     /* Rosa */
		#006bb3 10%,    /* Azul oscuro ajustado */
		#0077e6 20%,    /* Azul claro ajustado */
		#029bde 30%,    /* Azul más oscuro ajustado */
		#01ecbd 40%,    /* Verde claro */
		#00ff11 50%,    /* Verde lima */
		#d7f800 60%,    /* Amarillo claro */
		#f7c000 70%,    /* Amarillo */
		#f28e00 80%,    /* Naranja */
		#d3001c 90%,    /* Rojo */
		#380001 100%    /* Rojo oscuro */
	);
}


 
.color-bar-layer2 { 
   background: linear-gradient(
	to right, 
	#ffffff 0%,        /* Blanco (sin lluvia) */
	#ccffff 1%,        /* Azul muy claro (lluvia ligera) */
	#0000ff 10%,       /* Azul claro (lluvia ligera) */
	#00ff00 30%,       /* Verde (lluvia moderada) */
	#ffff00 50%,       /* Amarillo (lluvia moderada) */
	#ffa500 70%,       /* Naranja (lluvia intensa) */
	#ff0000 85%,       /* Rojo (lluvia peligrosa) */
	#800000 100%       /* Marrón oscuro (lluvia catastrófica) */
	); 
	}
 
/* Gradiente específico para la capa 3 Humedad*/
.color-bar-layer3 {
	background: linear-gradient(
	to right,
	#ff8c00 0%,      /* Naranja oscuro (muy baja humedad) */
	#ff9800 12.5%,   /* Naranja */
	#ffb74d 25%,     /* Naranja claro */
	#ffcc80 37.5%,   /* Amarillo anaranjado claro */
	#ffe0b2 50%,     /* Amarillo pálido */
	#b3e5fc 62.5%,   /* Azul claro */
	#81d4fa 75%,     /* Azul medio */
	#4fc3f7 87.5%,   /* Azul profundo */
	#0288d1 100%     /* Azul oscuro (alta humedad) */
	);
	}   
 
/* Gradiente específico para la capa 4 Viento */
.color-bar-layer4 {
	background: linear-gradient(
	to right,
	#04ddfe 0%,
	#01ecbd 12.5%,
	#00ff11 25%,
	#d7f800 37.5%,
	#f7c000 50%,
	#f28e00 62.5%,
	#ff5e00 75%,
	#d3001c 87.5%,
	#380001 100%
	);
	}
 
/* Gradiente específico para la capa 5 presion */
.color-bar-layer5 {
	background: linear-gradient(
	to right,
	#b0d6f4 0.0%,   /* Azul metálico claro */
	#90c4d4 12.5%,  /* Azul metálico suave */
	#6fb3e0 25.0%,  /* Azul metálico medio */
	#4b8cc9 37.5%,  /* Azul metálico profundo */
	#c6a300 50.0%,  /* Naranja metálico claro */
	#f5a300 62.5%,  /* Naranja metálico medio */
	#e57f00 75.0%,  /* Naranja metálico intenso */
	#d85a00 87.5%,  /* Naranja metálico brillante */
	#c03d00 100%    /* Naranja metálico oscuro */
	);
	}
 
/* Gradiente específico para la capa 6 RSolar */
.color-bar-layer6 {
	background: linear-gradient(
	to right,
	#ffffe0 0.0%,   /* Amarillo muy pálido */
	#ffffb3 12.5%,  /* Amarillo pálido */
	#ffff66 25.0%,  /* Amarillo claro */
	#ffff00 37.5%,  /* Amarillo */
	#ffeb3b 50.0%,  /* Amarillo intenso */
	#fdd835 62.5%,  /* Amarillo dorado */
	#fbc02d 75.0%,  /* Amarillo dorado más oscuro */
	#f9a825 87.5%,  /* Amarillo anaranjado */
	#f57f17 100.0%  /* Amarillo oscuro */
	);
	}
 
/* Gradiente específico para la capa 7 UVI */
.color-bar-layer7 {
	background: linear-gradient(
	to right,
	#fff3e0 0.0%,   /* Naranja muy pálido */
	#ffe0b2 12.5%,  /* Naranja claro */
	#ffcc80 25.0%,  /* Naranja claro */
	#ffb74d 37.5%,  /* Naranja medio */
	#ffa726 50.0%,  /* Naranja */
	#fb8c00 62.5%,  /* Naranja intenso */
	#f57c00 75.0%,  /* Naranja más oscuro */
	#ef6c00 87.5%,  /* Naranja profundo */
	#e65100 100.0%  /* Naranja oscuro */
	);
	}
 
/* Especificar las posiciones exactas de las etiquetas para cada barra */
	#colorBarLayer1 .label:nth-child(1) { left: 0%; }
	#colorBarLayer1 .label:nth-child(2) { left: 25%; }
	#colorBarLayer1 .label:nth-child(3) { left: 50%; }
	#colorBarLayer1 .label:nth-child(4) { left: 75%; }
	#colorBarLayer1 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer2 .label:nth-child(1) { left: 0%; }
	#colorBarLayer2 .label:nth-child(2) { left: 25%; }
	#colorBarLayer2 .label:nth-child(3) { left: 50%; }
	#colorBarLayer2 .label:nth-child(4) { left: 75%; }
	#colorBarLayer2 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer3 .label:nth-child(1) { left: 0%; }
	#colorBarLayer3 .label:nth-child(2) { left: 25%; }
	#colorBarLayer3 .label:nth-child(3) { left: 50%; }
	#colorBarLayer3 .label:nth-child(4) { left: 75%; }
	#colorBarLayer3 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer4 .label:nth-child(1) { left: 0%; }
	#colorBarLayer4 .label:nth-child(2) { left: 25%; }
	#colorBarLayer4 .label:nth-child(3) { left: 50%; }
	#colorBarLayer4 .label:nth-child(4) { left: 75%; }
	#colorBarLayer4 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer5 .label:nth-child(1) { left: 0%; }
	#colorBarLayer5 .label:nth-child(2) { left: 25%; }
	#colorBarLayer5 .label:nth-child(3) { left: 50%; }
	#colorBarLayer5 .label:nth-child(4) { left: 75%; }
	#colorBarLayer5 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer6 .label:nth-child(1) { left: 0%; }
	#colorBarLayer6 .label:nth-child(2) { left: 25%; }
	#colorBarLayer6 .label:nth-child(3) { left: 50%; }
	#colorBarLayer6 .label:nth-child(4) { left: 75%; }
	#colorBarLayer6 .label:nth-child(5) { left: 100%; }
	
	#colorBarLayer7 .label:nth-child(1) { left: 0%; }
	#colorBarLayer7 .label:nth-child(2) { left: 25%; }
	#colorBarLayer7 .label:nth-child(3) { left: 50%; }
	#colorBarLayer7 .label:nth-child(4) { left: 75%; }
	#colorBarLayer7 .label:nth-child(5) { left: 100%; }
 
 /***********Style the close button***********/
 
.topright {
	box-shadow:inset -2px -2px 2px rgba(0,0,0,.3), inset 3px 3px 3px rgba(255,255,255,.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-align: right;
	display: block;
	text-align: center;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-right: 0%;
	padding: 1px 5px;
	text-decoration: none;
	font-size: 15px;
	float: right;
	cursor: pointer;
	}




/* Fet per Víctor required styles */

.mycluster {
    background-color: transparent;
    color: transparent;
    border-radius: 30%;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    border: 1px solid transparent;
	}

.number-icon{
	background-size: 30px 30px;
	background-repeat: no-repeat;
	text-align:center;
	color:#3c7682;
	font-size: 12px;
	font-weight: bold;
	opacity: 1;
	line-height:20px;
    /* Ajustes de centrado */
    display: flex;
    align-items: center;
    justify-content: center;
	}

/* Estilo general para los nuevo siconos 2024 */

.newnumber-icon {
    border-radius: 50%;
    font-size: 12px;
	position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
    box-shadow: 0 0 0 0.5px rgb(255, 255, 255);
}
.newnumber-icon:hover {
	transform: scale(1.5);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}

.newpressure-icon {
    border-radius: 20%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 25px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}
.newpressure-icon:hover {
	transform: scale(1.5);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}


/* Gota de agua estilizada */
.humidity-drop {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 50% / 10% 10% 80% 80%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.8);
    font-weight: bold;
}


.humidity-cloud {
    font-size: 60px;           /* Tamaño de la nube */
    position: absolute;        /* Posiciona la nube sobre el icono */
    top: 15px;                /* Ajusta la posición hacia arriba */
    left: 50%;                 /* Centra horizontalmente la nube */
    transform: translateX(-50%); /* Compensa el 50% para centrar */
	color: #808080;
	z-index: -1;
	opacity: 0.5;
	filter: blur(0.5px);
}
.rain-cloud {
    font-size: 40px;           /* Tamaño de la nube */
    position: absolute;        /* Posiciona la nube sobre el icono */
    top: -25px;                /* Ajusta la posición hacia arriba */
    left: 50%;                 /* Centra horizontalmente la nube */
    transform: translateX(-50%); /* Compensa el 50% para centrar */
	z-index: -1;
	opacity: 0.8;
}

.water-drop {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
    padding: 0;
}

.water-drop::before {
    content: '';
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 25%;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(132, 138, 252, 0.3); /* Suave resaltado en la parte superior */
}

.water-drop::after {
    content: '';
    position: absolute;
    bottom: 0px; /* Mueve un poco la sombra hacia abajo */
    left: 50%;
    width: 50%; /* Ancho un poco mayor que la gota */
    height: 15%; /* Ajusta la altura para que parezca más equilibrada */
    background: rgba(7, 61, 212, 0.5); /* Sombra más oscura */
    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(0px); /* Suaviza la sombra */
}

.water-drop:hover {
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(7, 61, 212, 0.3); /* Sombra más difusa y clara */
}


.snow-icon {
    position: relative;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.snow-icon:hover {
	transform: scale(1.5);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
.snow-icon .snow-symbol {
    width: 18px;
	height: 18px;
	margin-left: 5px;
}

	

/* Triángulo base para las flechas de dirección */
/* Contenedor de la bola y la flecha */
.wind-container {
    position: relative;
    width: 30px; /* Ajusta según el tamaño de la bola y la flecha */
    height: 30px; /* Ajusta según el tamaño de la bola y la flecha */
    display: flex;
    justify-content: center;
    align-items: center; /* Centrar la bola en el contenedor */
    /*background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);*/
}

/* Estilo de la bola del viento */
.wind-ball {
    position: absolute;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-align: center;
    z-index: 2; /* La bola está encima de la flecha */
    /*background-color: white;  Color de la bola, dinámico según el viento */
    box-shadow: 0 0 0 0.5px rgb(255, 255, 255);
}

/* Estilo de la flecha de dirección */
.wind-direction {
    position: absolute;
    width: 0;
    height: 0;
    border-left:10px solid transparent; /* Ajustado para centrar con la bola */
    border-right: 10px solid transparent; /* Ajustado para centrar con la bola */
    border-bottom: 22px solid rgb(0, 0, 0); /* Color de la flecha, ajustable dinámicamente */ 
	border-radius: 50%;
    transform-origin: bottom center;
    top: 50%;
    left: 50%;
    margin-top: -22px; /* Ajusta para que la base esté en el borde de la bola */
    margin-left: -10px; /* Ajusta para que la base esté centrada en la bola */
    z-index: 1; /* La flecha está detrás de la bola */
    box-shadow: 0 0 0 0.5px rgb(255, 255, 255);
}

.wind-ball:hover {
	transform: scale(1.5);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
	}

/*filtro mapa openterreno */
.custom-tile-layer {
	filter: 
	hue-rotate(0deg)       /* Mantener la tonalidad original */
	brightness(1.1)        /* Aumentar un poco el brillo */
	contrast(1)            /* Aumentar el contraste */
	saturate(1)            /* Mejorar ligeramente la saturación */
	grayscale(65%)         /* No convertir a escala de grises */
	sepia(20%)             /* No convertir a escala de grises */
	invert(15%)            /* No invertir colores */
	blur(0px);             /* Evitar el desenfoque */
	}


/*--------------------------------*/


/* Fins aqui */



/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 1000; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(https://www.climameteoinfo.com/js/leaflet/leaflet.css#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 12px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 2px;
	}
.leaflet-left .leaflet-control {
	margin-left: 5px;
	}
.leaflet-right .leaflet-control {
	margin-right: 5px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: white;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Trebuchet MS", Trebuchet MS;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-top.leaflet-left {
	top: 1px; /* Ajusta la distancia desde la parte superior */
	left: 1px; /* Ajusta la distancia desde la parte izquierda */
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	background: lightskyblue;
	border-radius: 50px;
	}


/* layers control Despegable*/

/* Botón de desactivación */
.leaflet-control-desactivar {
    background-color: #283D53;
    color: orange;
    border: none;
    padding: 4px;
    cursor: pointer;
    border: 1px solid orange;
    border-radius: 20px;
    font-size: 12px;
}

.leaflet-control-layers {
	background: #283D53;
	border-radius: 50px;
	}
.leaflet-control-layers-toggle {
	background-image: url(../../../logos/clima_negre_maps.png);
	width: 40px;
	height: 40px;
	border-radius: 50px;
	border: 5px solid orange;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(../../../logos/clima_negre_maps.png);
	width: 40px;
	height: 40px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 40px;
	height: 40px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
	
	/* Lista de capas */
.leaflet-control-layers-list {
	max-height: 200px; /* Aumentar altura máxima */
	overflow-y: auto; /* Permitir desplazamiento */
	padding: 5px; /* Mayor espacio interno */
	margin: 0px; /* Espacio alrededor */
	background: #283D53;
	border-radius: 5px; /* Bordes redondeados */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
	}

.leaflet-control-layers-expanded {
	padding: 1px 1px 1px 1px;
	color: white;
	background: rgba(0,0,0,0.7);
	border-radius: 15px;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 5px solid #ffffff;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(../../../js/leaflet/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: transparent;
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: white;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 5px solid rgba(0,0,0,0.1);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 32px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: center;
	border-top-left-radius: 15px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius:30px;
	}
.leaflet-popup-content {
	margin: 4px;
	line-height: 1.4;
	color: white;
	}
.leaflet-popup-content p {
	margin: 8px 0;
	}
.leaflet-popup-tip-container {
	width: 30px;
	height: 10px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	opacity:1;
	background: #283D53;
	border-width: 1px 1px 0 1px;
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	bottom: -6px; /* Ajusta la distancia desde la parte inferior */
	right: -6px; /* Ajusta la distancia desde la derecha */
	border: none;
	background: #283D53;
	border-radius: 50%;
	padding: 1px;
	text-align: center;
	width: 14px;
	height: 14px;
	font: 12px Trebuchet MS, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	transition: 0.3s;
	opacity:1;
	}
	
.leaflet-container a.leaflet-popup-close-button:hover {
	color: yellow;
	background-color: red;
	cursor: pointer;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #ffffff;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}