@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

body {
	width: 100%;
	min-height: 100vh;
	
	display: grid;											/* Contenedor principal definido como un grid */
	grid-gap: 0;												/* Separación entre zonas */		
	grid-template-rows: 50px 1fr 30px;	/* Filas que conforman nuestra maqueta */
	grid-template-columns: auto /*375px*/ 1fr; 	/* Columnas que conforman nuestra maqueta */
	grid-template-areas: 								/* Areas que componen nuestra maqueta */
		"cabecera mapa"
		"herramientas mapa"
		"pie mapa";
}

	/* Asignamos, a un elemento del HTML, cada una de las areas definidas en nuestra maqueta grid */
	header {grid-area: cabecera;}
	aside {grid-area: herramientas;}
	main {grid-area: mapa;}
	footer {grid-area: pie;}

/* Colores para identificar zonas durante el diseño */
/*aside { background-color: #F3E2A9; }
main { background-color: orange; }
header { background-color: lightyellow; }
section#seccion-informe { background-color: white; }*/


body {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
  color: black;
  background-color: white;
}

aside {
	padding: 10px;
}

header {
	margin: 15px 0 7px 0;
	text-align: center;
}

footer {
	margin: 0 auto;
}


/* Tipografías: tamaños, grosores */

h1 { /* Título principal, junto al logo, en el panel de herramientas */ 
  font-weight: 400;
  vertical-align: middle;
  /*font-size personalizada desde config.js */ 
  font-size: 25px; /* *** Quitar *** */
}

h2 { /* Título de sección */
  font-size: 20px;
  font-weight: 400;
}

h3 { /* Título de recurso localizable, junto a la imagen de la marca o imagen representativa del área */
	font-size: 16px;
	font-weight: 300;
	padding-right: 7px;
}

a,p,div,label,select,input {
	font-weight: 300;
}

label { font-size: 15px; }

a {
	color: black;
	text-decoration: none; 
}

a:hover {
	color: gray;
}

b,strong {
	font-weight: 500;
}


/* GLOBOS */

.globos > a {
	font-size: 15px;
}

.globos {
	width: auto;
	font-size: 16px;
	padding: 5px;
}

.tituloMensaGlobo {
	width: auto;
	font-size: 21px;
	/*padding: 7px;*/
	padding-bottom: 5px;
	border-bottom: 0.5px solid black;
	margin-bottom: 9px;
}

.tituloMensaGlobo img {
	height: 25px;
	float: left;
	margin-right: 5px;
}

.comoLlegar, .anyadiraInforme, .leerMas { 
	display: inline-block;
	margin: 10px 10px 0 0;
}


/* ********* ASIDE:  Panel de herramientas ****************** */

#logo, #titulo {
	display: inline-block;
	margin-right: 5px;
} 

.input-wrapper {
	position: relative;
	width: 100%;
}

input#pon-direccion {
	width: 100%;
	padding: 6px 11px 6px 35px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #f5f5f5;   
  /*z-index: 20;*/
}

input#pon-direccion:focus {
	height: 33px; /* la misma del input, para que no varíe al aumentar el borde */
	border: 2px solid #1a73e8;
}

.input-icon {
	position: absolute;
	width: 20px;
	height: 20px;
	left: 7px;
	top: 40%;
	transform: translateY(-40%);
	filter: invert(89%) sepia(0%) saturate(0%) hue-rotate(91deg) brightness(89%) contrast(84%);
}


/*
    Clearable text inputs
*/
.clearable{
  /*background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;*/
  background: #fff url(img/cerrar.svg) no-repeat right -30px center;
  border: 1px solid #999;
  /*padding: 3px 18px 3px 3px;*/ /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */




form#tipo-busqueda {
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: center;
}		

form#tipo-busqueda input[type="radio"] {
  display: none;
}

form#tipo-busqueda label/*[for="TipBusDir"]*/ img { 
	height: 25px;
	width: auto;
	margin-right: 15px;
}

form#tipo-busqueda input[type="radio"]:checked + label img {
  filter: invert(65%) sepia(79%) saturate(376%) hue-rotate(28deg) brightness(89%) contrast(90%);
}


form#tipo-busqueda select {
	margin-left: -12px;
	margin-right: 15px;
	font-size: 16px;
	background-color: #ffffff;  
}

img#iconoAyuda {
	position: relative;
	width: 14px;
	height: 14px;
	right: -10px;
	top: -5px;
}

img#iconoAyuda:hover {
  filter: invert(89%) sepia(0%) saturate(0%) hue-rotate(91deg) brightness(89%) contrast(84%);
}

a#cerrar-ayuda {
	position: absolute;
	top: 10px;
	right: 15px;
}

a#cerrar-ayuda img {
	width: 30px;
}

section#ayuda {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	margin: 20px 20%;
	padding: 30px;
	width: 60%;
	min-height: 100vh;
	background-color: white;
	box-shadow: 5px 5px 20px; 
	display: none;
}

#ayuda-localizador h2 {
	margin-top: 40px;
	margin-bottom: 5px;
	border-bottom: 1px solid black;
}

#ayuda-informe h2 {
	margin-top: 20px;
	margin-bottom: 5px;
	border-bottom: 1px solid black;
}

section#ayuda ul li {
	list-style: none;
}

img.icono-modo-busqueda,
img.icono-boton-informe {
	height: 25px;
}

img.icono-modo-busqueda-radio {
	height: 28px;
}

section#ayuda span {
	line-height: 40px;
	vertical-align: top;
}

#ayuda-informe span {
	vertical-align: middle !important;
}

img.esquema-modo-busqueda {
	margin-left: 15px;
}

section#recursos {
  padding: 0 5px;
  margin-top: 10px;
  width: 100%;
  background-color: #ffffff;
}

.seccion {
	margin-top: 7px; 
	width: 100%;
	border-bottom: 1px solid black;
}
.boton-replegar {
	display: block;
	float: left;
	margin: 1px 0 auto 2px;
	width: 20px;
	background-image: url("img/seccion-replegar.svg");
	background-repeat: no-repeat;
	background-position: center center;
  background-size: 20px;
  text-indent: -9999px;
  cursor: pointer;
}
.boton-desplegar {
	background-image: url("img/seccion-desplegar.svg");
  background-size: 20px;
  cursor: pointer;
}
.seccion h2 {
	padding: 1px 1px 1px 25px; 
}

.contenido-seccion {
	padding: 7px;
}


/* Info y controles de cada recurso localizable  */
.tipo-rec {
	width: 100%;
	margin-top: 5px;
	/*Estructura grid*/
	display: grid;	/* Contenedor principal definido como un grid */
	grid-gap: 5px;	/* Separación entre zonas */
	grid-template-rows: 30px; 									/* Filas que conforman la info y controles de cada recurso localizable  */
	grid-template-columns: 30px auto 20px 32px; /* Columnas que conforman la info y controles de cada recurso localizable */
	grid-template-areas: /* Areas que componen nuestra maqueta */
		"icono etiqueta-recurso color-cluster boton-toogle";
}	

	/* Asignación de áreas a cada elemento */
	.tipo-rec-icon {grid-area: icono;}
	.contenido-seccion h3 {grid-area: etiqueta-recurso;}
	.tipo-rec-contenedor-cluster {grid-area: color-cluster;}
	.tipo-rec-toggle {grid-area: boton-toogle;}


.tipo-rec-icon img {
	display: block;
	max-height: 29px;
	width: auto;
	margin: 0 auto; /* Centrado horizontal */
	transition: transform 0.2s;
}

.tipo-rec-icon img:hover {transform: scale(1.5);}

.tipo-rec h3 {
	margin: auto 0; /* Centrado vertical */
}

.tipo-rec-contenedor-cluster {
	padding-right: 5px;
}

.tipo-rec-cluster {
	margin-top: 9px;
	height: 13px;
	width: 13px;
	border: 1px solid #d6d6d6;
	border-radius: 13px;
}

/* Botón Toggle */

.tipo-rec-toggle {
	padding-top: 7px;
	padding-right: 3px;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle {
  isolation: isolate;
  position: relative;
  height: 16px;
  width: 32px;
  border-radius: 15px;
  /*border: 1px solid #d6d6d6;*/
  background: #d6d6d6;
  overflow: hidden;
}

.toggle-inner {
  z-index: 2;
  position: absolute;
  top: 1px;
  left: 1px;
  height: 14px; 
  width: 30px;
  border-radius: 15px;
  overflow: hidden;
}

.active-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  /*background: #a0b42f;*/ /* Personalizado desde config.js */
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.05s linear 0.17s;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: #f5f5f5;/*white;*/
  /*border: 1px solid #d6d6d6;*/
  border-radius: 13px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.35s cubic-bezier(0.85, 0.05, 0.18, 1.35);
}

.toggle-state:checked ~ .active-bg {
   transform: translate3d(-50%, 0, 0);
}

.toggle-state:checked ~ .toggle-inner .indicator {
   transform: translate3d(25%, 0, 0);
}

/* Fin Botón Toggle */


/* Select tipo subcategorizado */
.selectTSub {
	margin-left: 35px;
	margin-top: -8px;
}

.selectTSub select {
	background-color: #ffffff;
}


/* Sección informe */
	
section#seccion-informe {
  padding: 0 5px;
  margin-top: 10px;
  width: 100%;
}

#encabezado-seccion-informe {
	border-bottom: 1px solid black;
	/*Estructura grid*/
	display: grid;	/* Contenedor definido como un grid */
	grid-gap: 2px;	/* Separación entre zonas */
	grid-template-rows: 25px; 												/* Filas que conforman la info y controles de cada recurso localizable  */
	grid-template-columns: 20px auto 27px 16px 20px; 	/* Columnas que conforman la info y controles de cada recurso localizable */
	grid-template-areas: /* Areas que componen nuestra maqueta */
		"boton-replegar titulo-seccion boton-vaciar boton-vista-previa boton-imprimir";
}	

	/* Asignación de áreas a cada elemento */
	#brInforme	{grid-area: boton-replegar;}
	#encabezado-seccion-informe h2 {grid-area: titulo-seccion;}
	a#boton-vaciar {grid-area: boton-vaciar;}
	a#boton-vista-previa {grid-area: boton-vista-previa;}
	a#boton-imprimir {grid-area: boton-imprimir;}

a#boton-vaciar { 
  height: 20px;
  width: 20px;
  margin-bottom: 2px;
  padding-right: 7px;
  background-image:url(img/boton-vaciar_informe.svg);
  background-repeat: no-repeat;
}

a#boton-vista-previa {
  height: 16px;
  width: 16px;
  margin-top: 2px;
  background-image:url(img/boton-vista_previa.svg);
  background-repeat: no-repeat;
}

a#boton-imprimir { 
  height: 20px;
  width: 20px;
  background-image:url(img/boton-imprimir.svg);
  background-repeat: no-repeat;
}


/* Sombra en el mapa junto al panel de herramientas */

#map:before {
  box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.5) inset;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 7px;
  z-index: 90;
}


/* PIE DE PÁGINA */

#enlaces {
	display: inline-block;
	margin: auto;
	font-size: 13px;
}
#enlaces a {
	color: black;
	text-decoration: none; 
}
#enlaces a:hover {
	color: gray;
}
#enlace-administracion, 
#enlace-generador, 
#enlace-contacto {
	float: left;
	margin-right: 10px;
}
#logo-LSweb {
	margin-left: 10px;
	float: right;
	height: 15px;
	width: 34px;
	background-image: url(img/logo-LSweb.png);
	background-size: cover;
	transition: transform 0.5s;
}
#logo-LSweb:hover { transform: scale(1.5); }



/* Revisar a partir de aquí */

#informe { 
	height: 0;
  width: 0; 
  visibility:hidden;
  overflow:auto;
}

#listaInforme { 
  margin-top: 8px;
}

#listaInforme li { 
  margin-left: -5px;
}


/* Flecha para hacer la pagina hacia arriba */
.ir-arriba {
  display:none;
  background-repeat:no-repeat;
  font-size:20px;
  color:black;
  cursor:pointer;
  position:fixed;
  bottom:70px;
  right:5px;
  z-index:2;
}

.boton-rojo a {
	color: #fff !important; /* Texto blanco */
	font-weight: 500;
}
.boton-rojo {
    background-color: #cd222d !important; /* Rojo */
	margin: 10px 0;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s; /* Transición suave */
}

.boton-rojo:hover {
    background-color: #cc0000; /* Rojo más oscuro al pasar el ratón */
 }



/* Reglas responsive */

@media (max-width: 575.99px) {
    
    body {
			width: 100%;
			min-height: 200vh;
			
			display: grid;														/* Contenedor principal definido como un grid */
			grid-gap: 0;															/* Separación entre zonas */		
			grid-template-rows: 50px 1fr 30px 100vh;	/* Filas que conforman nuestra maqueta */
			grid-template-columns: 1fr; 							/* Columnas que conforman nuestra maqueta */
			grid-template-areas: 											/* Areas que componen nuestra maqueta */
				"cabecera"
				"herramientas"
				"pie"
				"mapa";
		}

			/* Asignamos, a un elemento del HTML, cada una de las areas definidas en nuestra maqueta grid */
			header {grid-area: cabecera;}
			aside {grid-area: herramientas;}
			main {grid-area: mapa;}
			footer {grid-area: pie;}


    #map:before { /* Quitamos la sombra que había en el mapa junto al panel de herramientas */
      width: 0;
    }

    .comoLlegar, .anyadiraInforme, .leerMas { 
			display: inline-block;
			/*margin-bottom: 10px;*/
		}

    section#seccion-informe, 
    .anyadiraInforme, 
    #ayuda-informe { 
    	display: none; 
    }

    section#ayuda {
			margin: 3%;
			padding: 10px;
			width: 94%;
		}

		section#ayuda span {
			line-height: 16px;
			vertical-align: bottom;
		}

		img.esquema-modo-busqueda {
			margin-top: 10px;
		}

		#ayuda ol {
			list-style-position: outside;
			margin-left: 15px;
		}
		

    /* Establecemos un ancho máximo para las imágenes de la ayuda de manera que no desborden el ancho disponible */
    #ayuda img {
    	max-width: 90%;
    }

}

@media (min-width: 576px) {

	form#tipo-busqueda input[type="radio"]:hover + label img {
	  filter: invert(89%) sepia(0%) saturate(0%) hue-rotate(91deg) brightness(89%) contrast(84%);
	}

}

/*@media (min-width: 769px) and (max-width: 1024px) {*/
    /* CSS in here for tablet only */
/*}
@media (min-width: 1025px) {*/
    /* CSS in here for desktop only */
/*}*/