/* Importar la fuente Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
	--bg: #f0f0f0;
	--main: #3b71ca;
	--contrast: #ffc300;
	--header: #003049;
    --bottom: 350px;
    --botones: #023e8a;
}


/* Aplicar la fuente Open Sans a todo el cuerpo del documento */
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  background-color: var(--bg);
  width: 100%;
  height: 100%;
}

#map { /* Estilo para el contenedor del mapa */
    width: 100vw; /* 100% del ancho de la ventana */
    height: 100vh; /* 100% de la altura de la ventana */
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}






#flota {
	display: none;
	-webkit-flex-direction: column;
	height: 100%;
	top: 0px !important;
	background-color:#ffffff;
	width:100%;
	max-width: 400px;
	z-index: 99992147483647 !important;
	left:0px;
	visibility:visible;
	position: fixed;
	box-shadow: 2px 2px 30px rgba(0,0,0,0.7) !important;
	border: none;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	  
	float:left;
	overflow: hidden;
	display: none;
	margin: 0px;
	padding: 0px;

  }
  
  #myframe {
	  width:100%;
	  border-style:none;
	  padding: 0px;
	  margin: 0px;
	  height: 100%;
	  background-color: #e7eff6 ;

  }

  #dra {
	height:40px; 
	padding:5px;
	padding-top: 7px; 
	background-color: var(--main);
	text-align: right;
	width: 100%;
	padding-right: 10px;
}


.contenidos-arriba {
	background-color: var(--topdetalle);
	width: 100%;
	padding: 0px;
	text-align: center;
	color: var(--topdetalle-font);
	margin-top: 10px;
  }

  .contenidos-detalle {
	width: calc( 100% - 20px );
	background-color: var(--contenidos-detallebg);
	color: #1e1e1e;
	margin: 0px;
	padding: 10px;
  }


.label100{
	color: -var(--dlabel-color);
	background-color: white;
	width: calc( 100% - 10px );
	border-bottom-color: var(--azulstgo);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 5px;
	font-weight: bold;
}
.field100 {
	padding: 5px;
	width: 100%;
	color: #1e1e1e;
}


.leaflet-tooltip {
	width: 200px;
	white-space: normal;
}

.accesibilidad {
	text-align: center;
	padding: 3px;
	background-color: #415a77;
}


#header {
	background-color: var(--header);
	padding: 5px;
}

#header a:link, #header a:visited, #header a:hover, #header a:active {
	color: white !important;
	text-decoration: none;
}





.marker-cluster-small {
	background-color: #eddea4 !important;
}  
.marker-cluster-small div {
	background-color: #ffc22b !important;
	color: #000000 !important;
}

.marker-cluster-medium {
	background-color: #d8e2dc !important;
}  
.marker-cluster-medium div {
	background-color: #81b29a !important;
	color: #fff !important;
}

.marker-cluster-large {
	background-color: #f0a170 !important;
}  
.marker-cluster-large div {
	background-color: #e85d04 !important;
	color: #fff !important;
}



#casos {
	position: absolute;
	color:white;
	height: 25px;
	top: 75px; 
	right: 10px;
	width: 120px;
	z-index: 2;
	background-color: var(--botones); 
	box-shadow: 1px 1px 5px #333;
	text-align: center;
	padding: 1px;
}


#locate_sw {
	position: absolute;
	top: 75px; 
	left: 15px;
	height: 100px;
	z-index: 2;
	background-color: var(--botones);
	border-radius: 5px;
	vertical-align: middle;
	text-align: center;
	width: 45px;
	height: 40px;
	padding-top: 2px;
	cursor: pointer;
	box-shadow: 1px 1px 5px #333;
}

#contraste {
	position: absolute;
	top: 135px; 
	left: 15px;
	height: 100px;
	z-index: 2;
	background-color: var(--botones);
	border-radius: 5px;
	vertical-align: middle;
	text-align: center;
	width: 45px;
	height: 40px;
	padding-top: 0px;
	cursor: pointer;
	box-shadow: 1px 1px 5px #333;
}


#new {
	position: absolute;
	top: 195px; 
	left: 15px;
	height: 100px;
	z-index: 2;
	background-color: var(--botones);
	border-radius: 5px;
	vertical-align: middle;
	text-align: center;
	width: 45px;
	height: 40px;
	padding-top: 5px;
	cursor: pointer;
	box-shadow: 1px 1px 5px #333;
}

/* Estilos para invertir colores */
.estilos-invertidos {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}



/* Estilo para el control de zoom */
.leaflet-control-zoom a {
    background-color: var(--botones); /* Fondo color azul oscuro */
    color: white; /* Símbolos blancos */
    font-size: 18px; /* Ajusta el tamaño de los símbolos */
    border: none; /* Elimina el borde predeterminado si es necesario */
}

/* Opcional: ajusta el hover para mejorar la experiencia de usuario */
.leaflet-control-zoom a:hover {
    background-color: var(--main); /* Color más claro al pasar el ratón */
}