#IntroP select[name="ccaa"] {
	grid-column: 2 / 4;
	justify-self: end;
	min-width: auto;
	 
}


.contenedor.meteoro { 
	/*width:100%; 
	padding: 0 0 1em 0; 
	margin:0; 
	height:auto;  
	display: flex;*/
	flex-flow: column nowrap;
	gap: 0;
	align-content: stretch;
	
}


#TABulador {
	font-size: calc(0.7em + calc(var(--ancho) / 2));
	display: flex;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: stretch;
	gap: calc(var(--ancho) / 2);
	font-family: var(--ffamH);
}
#TABulador a { 
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--bkB_bg);
	color:var(--bkB_f);
	padding: calc(var(--ancho) / 2) var(--ancho);
}
#TABulador a > span {
	display: none;	
} 
#TABulador :is(a:hover, a.selected) { color:var(--bk_f); background: var(--bk_bg);  }

#TABulador a.selected {  
	margin: 0 calc(var(--ancho) / 2); 
}


#tabuIn { 
  
  display: flex;
  flex-flow:row wrap;
  gap: var(--ancho);
	background-color:#ffffff; 
	justify-content: center;
 
	font-size:1em;  
	text-align: center; 
	border-top:var(--alto) solid var(--bk_bg); 

}

#tabuIn>.ficha {
	flex: inherit;
	font-size: 1em;  
	text-align: justify; 	
}
.meteoro .ficha:not(.full){
	max-width: 900px;
}
.meteoro .ficha.full{
	min-width: 100%;
}
#tabuIn [id^=banner]{
	height: auto;
	min-height: 100px;
	display: block;
	text-align: center;
}

#tabuIn>[id^=banner]{
	width: 100%;
	flex: inherit;
}

#tabuIn>.ficha [id^=banner] { 
	width: calc(100% - 4em); 
	margin: var(--alto) 2em; 
}


/*#tabuIn>.ficha > header {
	font-size:1.2em; color:var(--bk_bg); margin:0; text-align:center; padding:.3em 0; text-indent: 0; border-bottom:1px dotted var(--bk_bg); font-family:var(--ffamH);
}*/
#tabuIn>.ficha p { margin: 0.5vh 2em var(--alto) 2em; font-size: calc(1em + calc(var(--ancho) * 0.2)); }

#tabuIn>.ficha p.desc { 
	font-size: calc(.7 + calc(var(--ancho) * 0.2)); 
	overflow: hidden;
/*	-webkit-hyphens: auto;
	-moz-hyphens: auto;
 	-ms-hyphens: auto;
 	hyphens: auto;	*/
 }
 @media screen and (max-width:1279px){
	 #tabuIn>.ficha p.desc.cl { 	
	 	text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; 
	  	line-clamp: 2;
	}
	/*#tabuIn>.ficha p.desc.cl::after {
		display: block;
		font-size: 200%;
		text-align: center;
		width: auto;
		padding: var(--ancho);
		border-radius:50%;
		background: ;
		content: "+";
		color: #FFF;	
		
	}*/ 
}



#tabuIn>.ficha > .temperaturas { 
	width: calc(100% - calc(var(--ancho) * 2)); 
	font-size:1em; 
	margin:0 var(--ancho);  
}
#tabuIn>.ficha > .temperaturas > div { 
	display:flex;
	justify-content: space-between;
	gap: 0;
	color:#3f4a3b;
	margin:1px 0;  
}
#tabuIn>.ficha > .temperaturas > div > span {
	flex: calc(20% - var(--ancho));
	text-align: center;
	background:var(--bkB_bg);
	color:#1b6498;  
	padding:.2em 0; 
	font-size: 1.2em;
	font-weight: bold;	
}
#tabuIn>.ficha > .temperaturas > div > span::after {
	content: "ºC";
	font-size: 80%;
	padding-left: 5px;	
}


#tabuIn>.ficha > .temperaturas > div > span:first-of-type {
 	flex: calc(60% - calc(var(--ancho) * 2));
 	font-size: 1em;
 	font-weight: normal;
 	text-align:left;
 	text-indent:1em;
 	color: var(--bkB_f);
 	
}
#tabuIn>.ficha > .temperaturas > div > span:first-of-type::after { content: none; }

#tabuIn>.ficha > .temperaturas > div > span:last-of-type { color: #cb3d03; }


#tabuIn>.ficha > .temperaturas > div > div { 
flex: calc(20% - var(--ancho));
text-align: center; 	
background:var(--bk_bg);
color: var(--bk_f);
overflow: hidden;
display: flex;
align-items: center;
justify-content:center;
}
#tabuIn>.ficha > .temperaturas > div > div:first-of-type {
 	flex: calc(60% - calc(var(--ancho) * 2));
}

#tabuIn>.ficha p.datos {
	padding: var(--ancho);
	margin: 0 0 var(--alto) 0;
	text-indent: 0;
	overflow: hidden;
	display: flex;
	flex-flow: row wrap;	
	justify-content:flex-start;
	align-items: flex-start;
	
	
	background: var(--bkB_bg);
	color: var(--bkB_f);
	font-size: 1em;
}
#tabuIn>.ficha p.datos span { display: inline-flex; min-width:200px; text-align:left; }
#tabuIn>.ficha p.datos span::before { padding-right: 1em; }



.leyendas {
	flex: 0 0 100%;
	/*display: flex;
	flex-flow:row wrap;
	gap: 2em;
	align-items: flex-start;*/
	
}
.leyendas > header {
	/*min-width: 96%;*/
	margin-bottom: calc(var(--alto) * 2);
}

.leyendas div { float:left; margin: var(--alto) calc(var(--ancho) * 2); /*flex: 2 0 70%;*/ }
.leyendas div [data-icono] { font-size: 0; } 
.leyendas div [data-icono]::before { font-size: calc(2rem + var(--ancho)); } 

 .leyendas p { /*flex: 2 0 70%;*/ text-align: justify; line-height: 2em; margin: var(--alto) calc(var(--ancho) * 2); }
.leyendas p a { font-weight: bold; text-decoration: underline; }

.leyendas p [data-icono] { font-size: 200%; vertical-align: bottom; color: #999; padding:0 1px; }


 .leyendas ul { text-align: left; list-style: none; display: flex; flex-flow: row wrap; gap: var(--ancho); }
  .leyendas ul > li { display: inline-flex; justify-content:flex-start; align-items: center; line-height: 2em; border: 1px solid #CCC; padding: 5px 10px; border-radius:1em; }	
 .leyendas ul > li::before { font-size: 2em; padding-right: var(--ancho); }
 
	

[data-icono="logo_aemet"] {
		color: #6273b3;
		cursor: pointer;	
}
[data-icono="logo_aemet"]:hover {
		color: var(--high);
}

.meteoro header  { 
	min-width: 100%; 
	flex: inherit;
	display: inline-block;
	vertical-align: middle;
	/*display: flex;
	justify-content: center;
	align-items: center;*/ 
	gap: var(--ancho);
	font-size:calc(0.8rem + calc(var(--ancho) / 2)); 
	color:var(--bk_f); 
	margin:0; 
	text-align:center; 
	line-height: 2em;
	padding: var(--alto) 0;  
	background:var(--bk_bg);
	font-family: var(--ffamH); 
	
			
		
		
}



.meteoro header::before {
	display: block; 
	font-size:200%; 
	vertical-align: baseline;
	padding: 0;
}



.meteoro header label { 
	font-size: 60%; 
}
.meteoro header select { 
	font-size: calc(0.7rem + calc(var(--ancho) / 2));  
	text-indent: .5em; 
}

.meteoro header :is(a:link, a:visited) { 
	color: var(--bk_f);
	text-decoration: underline;
	padding-bottom: 3px;
}
.meteoro header a:hover {
	color:var(--high);
}


#canvas_meteo { 
	 flex: 100%;
	 overflow: hidden;
	 max-width: 900px;
	 display: grid; 
	 justify-content:stretch;
	 align-items:center;
	 grid-template-columns: 100%;
	 grid-template-rows: auto auto auto auto; 
	 gap:0;  
}


#canvas_meteo .leaflet-container { background: var(--bkB_bg); }


#canvas_meteo>header {
		grid-row:2;
		grid-column:1; 
		padding-bottom: 0;
}
#canvas_meteo>header >span {
font-size: 80%;
}
#canvas_meteo>header >span.dat { 
	font-family: var(--ffam);  
	display: block; 
	text-align:center;
	/*width: calc(100% - calc(var(--ancho) * 2));*/
	margin: var(--ancho) 0 0 0;
	padding: var(--ancho);
	background-color: var(--bkB_bg);
	color: var(--bkB_f);
}
/*#canvas_meteo>header >span::before { font-family:"Materiales"; content: "schedule"; padding-right:5px; }*/

#canvas_meteo>header >span.dat > span:not(.player) { font-weight: bold; font-size: 150%; }
#canvas_meteo>header >span.dat > span.player { font-size: 300%; padding-left:calc(var(--ancho) * 3); vertical-align: bottom; }
#canvas_meteo>header >span.dat > span.player[data-icono=carro_pause] { color: var(--high) !important; }






#meteoro_map {
		grid-row:4;
		grid-column:1; 
		position: relative; 
		width: 100%; 
		height:100%; 
		flex: inherit;
		min-width: var(--anchoC);
		min-height:var(--anchoC);
		
		/*width:calc(100% - calc(var(--ancho) * 2));
		min-width:calc(var(--min) - calc(var(--ancho) * 2)); 
		min-height:calc(var(--min) - calc(var(--ancho) * 2)); 
		box-shadow: 0 0 var(--ancho) rgba(0,0,0,0.3); 
		margin: var(--ancho); */
}


#load_map { 
	position: absolute; 
	top: 0; 
	right: 0; 
	left:0; 
	bottom: 0; 
	background: var(--bkB_bg); 
	color: var(--bkB_f); 
	display: flex; 
	justify-content: center; 
	align-items:center; 
	z-index: 1100;	
}

#canvas_meteo #load_map::before { content: "Cargando datos..."; font-size:1rem; display: block; }

.leaflet-bottom.leaflet-left { bottom:2em; }

#salas_but, #nav_horas {
	grid-column:1; 
	display: flex;
	font-size: 1.4em;
	padding: calc(var(--ancho) / 2);
	background: #F1F1F1;
	
}
#salas_but { 
	grid-row:1; 
	overflow-x: scroll; 
	flex-flow:row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap:0;
	min-width: calc(48px + var(--ancho));
}
#nav_horas {
	grid-row:3;
	flex-flow:column nowrap;
	justify-content: space-between;
	align-items: stretch;
	gap:5px;
	font-size: calc(0.6em + 0.3vw);
	min-width: calc(calc(60px + var(--ancho)) * 2);
}


#salas_but div {
	color: var(--bk_bg);
}

:is(#salas_but, #nav_horas) div[onclick] {
	cursor:pointer;
	display: inline-flex;
	justify-content:center;
	align-items: center;
}

#salas_but div.on { color: var(--high); }
#salas_but div.void { 
	opacity: 0.5; 
	cursor:not-allowed; 
	width:48px; 
	height:48px;
	flex:48px; 
	display: inline-flex;
	justify-content:center;
	align-items: center; 
} 

#nav_horas>.horario {
	display: flex;
	position:relative;
	font-size: 1em;
	justify-content: flex-start;
	order: 2;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	gap:5px;
}
#nav_horas>.player::before { font-size: 3em; }

#nav_horas [data-icono=carro_pause] { color: var(--high) !important; }

#nav_horas>.horario>div {
	display: flex;
	/*justify-content:space-between;*/
	/*justify-content: stretch;*/
	gap:5px;
}
#nav_horas :is(.clock div,.dia,.franja){
	background: var(--bkB_bg);
	color: rgba(var(--bk_bg_rgb), 0.5);
	text-decoration: none;
	/*padding: calc(var(--ancho) / 2) 0;*/
}
#nav_horas :is(.dia , .clock div, .franja):not([onclick]){ 
	text-decoration: line-through;
}

#nav_horas, #nav_horas>.horario>div {
	flex-flow:column nowrap;
	align-items: stretch;
	justify-content:stretch;
}
#nav_horas>.horario>div>.clock {
	display: flex;
	width: auto;
	align-items: stretch;
	gap: calc(var(--ancho) / 2);
	align-self: stretch;
}	
#nav_horas>.horario>div>.clock div {
	min-width: 48px;
	min-height: 48px;
	display: inline-flex;
	justify-content:center;
	align-items:center;
}
#nav_horas>.horario>div>.franja {
	justify-self: stretch;
	width: 100%;
	text-align: center;

}
#nav_horas>.horario>div>div>span {
	font-size: 70%;
	vertical-align: baseline;
}

#nav_horas>.dia {
	order: 1;
	display:  flex;
	align-items: center;
	justify-content: center;

}

#nav_horas .on {
	background: var(--high) !important;	
	color: black !important;
	text-decoration: none;
	font-weight: bold;
}

#nav_horas :not(.on)[onclick] { cursor:pointer; color: var(--link); background-color:#FFF; text-decoration: none; }




/*ICONOS DE MAPA - LEAFLET*/
@media screen and (min-width:10px){


/*#meteoro_map .leaflet-marker-icon[class*=meteo-] { width: auto; height: auto; font-size:1em; }*/
/*#map .meteo-t { background: #FF0000; color:#FFF; }*/

/*#meteoro_map .leaflet-marker-icon[class*=meteo-]>div { 
	display: flex;
	flex-flow:column wrap; 
	justify-content: center; 
	align-items:center; 
}	*/

#meteoro_map .leaflet-div-icon { background: none; border:0; }
#meteoro_map :is(.leaflet-div-icon:hover, .leaflet-div-icon:focus)  { z-index:3000 !important; }

#meteoro_map [class*=meteo-] {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	font-size: calc(0.7em + calc(var(--ancho) * 0.2));
	width: 3em;
	height: 3em;
	margin-top: calc(-1.5em + 6px);
	margin-left: calc(-1.5em + 6px);
	gap:0;
}
#meteoro_map [class*=meteo-] > div {
	grid-column: 1;
	grid-row:1;
	text-shadow: 2px 2px 5px #000000;
	z-index:153;
	font-size: 1em;
	color: var(--bk_f);
}

#meteoro_map [class*=meteo-] > span { 
			display: inline-grid;
			z-index:152;
			align-self:start;
			justify-self:center; 
			text-align:center; 
			/*min-width: var(--min);*/
			grid-column: 1; 
			grid-row:2;
			background: none;
			padding: 0;
			margin: 0;
			color: var(--bk_f);

			/*	overflow: hidden;
   			text-overflow: ellipsis;
  				display: -webkit-box;
  				-webkit-box-orient: vertical;
  				line-clamp: 1;
  				-webkit-line-clamp: 1;*/
}

#meteoro_map [class*=meteo-] .v { 
	justify-self:center;	
	display:flex;
	justify-content: center; 
	align-items:center;
	width: 2em;
	height: 2em;
	font-size:1.2em; 
	margin:0;
	background-color: rgba(0, 184, 230,1); 
	font-weight:bold;
	border-radius:50%;
}
#meteoro_map :is(.meteo-t,.meteo-s) .v { background-color: rgba(230,0,0,1); }
#meteoro_map .meteo-r .v { background-color: rgba(172, 0, 230, 1); }

#meteoro_map [class*=meteo-]:is(:hover,:focus) .v { box-shadow: 0 0 2px 2px rgba(255,255,255,1); color: var(--high);  }

#meteoro_map [class*=meteo-]:is(:hover,:focus) span { color: var(--bk_bg); background: var(--bk_f); padding: 1px;  }



#meteoro_map .meteo-c > div { font-size: 2.5em; }
#meteoro_map .meteo-c > div[data-icono="meteo_dia"] { color: #EEEE22; z-index:151; }
#meteoro_map .meteo-c > div[data-icono="meteo_noche"] { 
	z-index:151;
	color: #FEFEFF; 
/*	background-image: linear-gradient(45deg, #AAAAFF, #EEEEFF); 
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;*/
}

#meteoro_map .meteo-c > div[data-icono="meteo_cubierto"] { color: #BBBBBB; z-index:151; }
#meteoro_map .meteo-c > div[data-icono="meteo_cubierto"].muy { color: #FEFEFE; }
#meteoro_map .meteo-c > div[data-icono^="meteo_lluvia"] { color: #99ddff; z-index:154; opacity: 1; }

#meteoro_map .meteo-c > div[data-icono="meteo_lluvia"]::before { animation: lluvia 500ms infinite; }
#meteoro_map .meteo-c:nth-child(even) > div[data-icono="meteo_lluvia"]::before { animation-delay: 250ms; }

#meteoro_map .meteo-c > div[data-icono="meteo_lluvia_escasa"]::before { animation: lluvia_escasa 1s infinite; }
#meteoro_map .meteo-c:nth-child(even) > div[data-icono="meteo_lluvia_escasa"]::before { animation-delay: 500ms; }

#meteoro_map .meteo-c > div[data-icono="meteo_tormenta"] { color: #FFCC33; z-index:156; }
#meteoro_map .meteo-c > div[data-icono="meteo_tormenta"]::before { animation: meteo_tormenta 2s infinite; }
#meteoro_map .meteo-c:nth-child(even) > div[data-icono="meteo_tormenta"]::before { animation-delay: 1s; }


#meteoro_map .meteo-c > div[data-icono="meteo_nieve"] { color: #FFFFFF; z-index:154; }
#meteoro_map .meteo-c > div[data-icono="meteo_heladas"] { color: #DDDDFF; z-index:154; }
#meteoro_map .meteo-c > div[data-icono="meteo_niebla"] { opacity: 0.6; color: #e6f7ff; }
#meteoro_map .meteo-c > div.niebla { color: #FFCC00; opacity:0.9; } 
#meteoro_map .meteo-c > div[data-icono="meteo_bruma"] { opacity: 0.6; color: #e6f7ff; }

#meteoro_map .meteo-c > div[data-icono="meteo_cubierto"]+div[data-icono="meteo_nubes_altas"] { color: #999999; }

#meteoro_map .meteo-c > span { grid-row: 1; align-self: center; margin-top: 2em;  }



/*#meteoro_map .leaflet-marker-icon[class*=meteo-]>div .n { display:none; }*/







/*#meteoro_map .leaflet-marker-icon[class*=meteo-]>div>span:first-of-type { font-weight:bold; background-color: red; color:white; font-size:1.2em;  }*/

/*#meteoro_map .leaflet-marker-icon[class*=meteo-]>div:hover span.n { display:block; }*/

/*.leaflet-marker-icon[class*=meteo-]>div>span>span { font-size: 50%; }*/

/*#meteoro_map .meteo-v>div { background: none; padding:0; }*/



#meteoro_map .meteo-v>div::before { font-size: 3em; display: block; text-shadow: -2px 2px 0 #000000;    } 
#meteoro_map .meteo-v>div:hover::before { color: var(--high); }

/*#meteoro_map .meteo-v .dirO::before {
	margin-top: -1em;
}*/


#meteoro_map .meteo-v .dirE::before {
	transform: scale(-1, 1); 
}
#meteoro_map .meteo-v .dirS::before {
	transform: rotate(-90deg); 
}
#meteoro_map .meteo-v .dirSO::before {
	transform: rotate(-30deg);
}
#meteoro_map .meteo-v .dirNO::before {
	transform: rotate(30deg);
}

#meteoro_map .meteo-v .dirN::before {
	transform: scale(-1, 1) rotate(90deg);
		
}
#meteoro_map .meteo-v .dirSE::before {
	transform: scale(-1, 1) rotate(-30deg);
	
}
#meteoro_map .meteo-v .dirNE::before {
	transform: scale(-1, 1) rotate(30deg);
	
}


#meteoro_map a { color: var(--bk_bg); }
#meteoro_map a:hover { color: var(--high); }
#meteoro_map .leaflet-bar { border:0; margin: calc(var(--ancho) * 2); display: flex; gap: var(--ancho); }

#meteoro_map .leaflet-bar a {
	background: rgba(var(--bk_bg_rgb),0.6); 
	color: var(--bk_f);
	border-radius:50%;
	box-shadow: 0 0 1px 2px #FFF;
	display: inline-flex;
	justify-content:center;
	align-items:center;
	font-size: 2em; 
	padding:0; 

}
#meteoro_map .leaflet-bar a.leaflet-disabled { opacity: 0.3; cursor: not-allowed; }

#meteoro_map .leaflet-bar a:hover {
	color: var(--bk_bg); background: var(--bk_f);		
}

#meteoro_map .leaflet-control-attribution { display: flex; align-items: flex-start; justify-content:flex-end; gap: 2vw; padding: 5px 2vw; }
#meteoro_map .leaflet-control-attribution > span {
	display: flex;
	flex-flow:column nowrap;
	align-items: center;
	justify-content: center;	
}
#meteoro_map .leaflet-control-attribution { font-size: 1em; }
#meteoro_map .leaflet-control-attribution [data-icono]::before { font-size: 2em; padding: 0; }




#meteoro_map .leaflet-popup-content {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}
#meteoro_map .leaflet-popup-content h1 { align-self: stretch; background: var(--bk_bg); color: var(--bk_f); text-align: center; padding: 0.5vh 0; font-weight: bold; }
#meteoro_map .leaflet-popup-content p { text-indent: 0; margin: 0; }
#meteoro_map .leaflet-popup-content p::first-letter { text-transform: capitalize; }

#meteoro_map .leaflet-popup [class*=meteo-] { margin: var(--alto) 0; font-size: 2em; }
#meteoro_map .leaflet-popup .meteo-v > div { color: var(--bk_bg); } 

}}/*LIMPIA*/

 
 
@media screen and (min-width:500px){
	#tabuIn > .ficha p.datos { justify-content: space-between; }
} 


@media screen and (min-width:800px){
	#canvas_meteo { 
		grid-template-rows: auto auto;
		grid-template-columns: auto 1fr auto;
		align-items: flex-start;
		justify-content: center;
	}
	#canvas_meteo>* { 
		max-height: 600px;
	}
	#canvas_meteo>header {
		grid-column: 1 / 4;
		grid-row:1;
	}
	.meteoro header::before { display: inline; width: auto; padding-right: var(--ancho); font-size:200%; vertical-align:bottom; }
	/*#meteoro_map { flex:content; min-width:500px; max-width:100%; min-height:500px; max-height:800px; }*/

	#meteoro_map { 
		grid-column: 2;
		grid-row:2; 
		padding: calc(var(--ancho) / 2); /*igualamos el padding con el de los controles para que coincidan en alto*/
		max-width: 600px; 
	}	
	#tabuIn>.ficha p.datos {
		justify-content:space-between;	
	}
	
	/*flex: 3 3 10%;*/
		/*align-self:stretch;*/
	/*#tabuIn [id^=banner]:not(.banfull) {
		
		width: 100%;
		min-width: 200px;
		max-width: 100%;
		overflow: hidden;	
	}
	#tabuIn [id^=banner].banfull {
		flex: 100%;
	}*/
	.leyendas {
		flex: 2 1 50%;
		/*min-width: 800px;*/
	} 
	
	#salas_but, #nav_horas {
		grid-row:2;
		flex-flow:column nowrap; 
		align-self: stretch;
	}

	
	#salas_but { 
		grid-column: 1;
		justify-content: flex-start; 
		align-items: center; 	
		gap:var(--alto); 
		overflow-y: scroll;
		/*padding: var(--alto) calc(var(--ancho) / 2);*/
		font-size: 2em;
	} 
	#nav_horas { 
		grid-column: 3;
		justify-content: stretch; 
		align-items: center;
		gap:5px; 
	}
	 	
	
	/*#nav_horas :is(.clock,.dia,.franja){
		padding: 0 calc(var(--ancho) / 2);
	}*/
	#nav_horas>.horario {
		flex-flow:column nowrap;
		overflow-y: auto;
		overflow-x: hidden;
		order: 1;
		align-items: center;
		height: 100%;
		gap: calc(var(--ancho) / 2);	
	}
	#nav_horas>.horario>div {
		flex-flow:row nowrap;
		align-items: flex-start;
		gap: calc(var(--ancho) / 2);
	}
	#nav_horas>.horario>div>.clock {
		flex-flow:column nowrap;
		align-items: center;
		gap:0;
		min-width: 48px;
		
	}
	#nav_horas>.horario>div>.franja {
		align-self: stretch;
		text-align: center;
		min-width: 48px;
	}


	

	#nav_horas .franja {
		writing-mode: vertical-rl;
	}
	#nav_horas>.dia {
		order: 2;
		align-self: stretch;
		margin: var(--ancho);
	}
	
	
	#meteoro_map [class*=meteo-] { font-size: 1em; }
	
	
	/*subimos tamaño de iconos*/
	#meteoro_map .meteo-c > div { font-size: 3em; }
}

@media screen and (min-width:1000px)  and (min-height: 800px){
	#canvas_meteo>* { 
		max-height: 700px;
	}
	#meteoro_map { 
		max-width: 700px; 
	}
}
@media screen and (min-width: 1200px)  and (min-height: 800px) {
	#tabuIn>.ficha {
		font-size:calc(0.6em + 0.3vw);  
		text-align: justify; 	
	}
	#tabuIn>.ficha:not(.full) {
		flex: 2 5 10%;
		max-width: 800px;
		min-width: 700px;
		
	}
	
	#canvas_meteo>* { 
		max-height: 800px;
	}
	#meteoro_map { 
		max-width: 800px; 
	}
	
}



@media screen and (min-width: 1600px) and (min-height: 800px) {
	#canvas_meteo, .meteoro .ficha:not(.full) { max-width: 1400px; min-width: 1000px; flex: inherit; }
	#tabuIn>.ficha {
		font-size:calc(0.6em + 0.3vw);  
		text-align: justify; 	
	}
	#tabuIn>.ficha:not(.full) {
		flex: 2 5 10%;
		max-width: 1200px;
		min-width: 1000px;	
	}


}









 
@keyframes meteo_tormenta {
 	from {
  		opacity: 1;
  		font-size: 1em;
	}
	2% { opacity: 0; }
	4% { opacity: 0; }
	5% { opacity: 1; font-size: 1.2em; margin: 0 0 0 -.1em; }  
	6% { opacity: 1; font-size: 1.6em; margin: 0 0 0 -.3em; }
	7%{ opacity: 0; }
	
	14% { opacity: 0; font-size: 0.8em; }
	15% { opacity: 1; font-size: 0.8em; margin: 0 0 0 0.1em; }  
	16% { opacity: 1; font-size: 1.2em; margin: 0 0 0 -.1em; }
	17%{ opacity: 0; }
	
	24% { opacity: 0; }
	25% { opacity: 0; font-size: 1.2em; margin: 0 0 0 -.1em; }  
	29% { opacity: 1; font-size: 1.6em; margin: 0 0 0 -.3em; }
	30% { opacity: 0; font-size: 1em; margin: 0 0 0 0;  }
  

  to{ opacity: 0;  }
 } 
 
 
 
@keyframes lluvia {
  from { 	content: "meteo_lluvia_a"; }
	33% { content: "meteo_lluvia";  }
  	66% { content: "meteo_lluvia_b"; }
  	to { 	content: "meteo_lluvia_a"; }
}
@keyframes lluvia_escasa {
	from { 	content: "meteo_lluvia_escasa_a"; }
	33% { content: "meteo_lluvia_escasa";  }
	66% { content: "meteo_lluvia_escasa_b"; }
	to { content: "meteo_lluvia_escasa_a"; } 
 }