/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:-moz-ui-invalid {
	box-shadow:none !important;	
}

/***********************************  FIN DEL RESET *******************************/

/********************************** DECLARACIÓN DE FUENTES ************************/
@font-face {
	font-family: "Montserrat";
	src: url('/fonts/Montserrat-Regular.ttf');
	font-style:normal;
	font-weight:400;
}

@font-face {
	font-family: "Montserrat";
	src: url('/fonts/Montserrat-Bold.ttf');
	font-style:normal;
	font-weight:600;
}

@font-face {
	font-family: "Montserrat";
	src: url('/fonts/Montserrat-Italic.ttf');
	font-style:italic;
	font-weight:400;
}

@font-face {
	font-family: "Montserrat";
	src: url('/fonts/Montserrat-BoldItalic.ttf');
	font-style:italic;
	font-weight:600;
}
/**************************************************************************************/
* {
	box-sizing:border-box;	
}

body {
	min-height:100vh;
	display:grid;
	grid-template-areas:
		"header"
		"main"
		"footer";
	grid-template-rows: 90px auto 50px;
	font-family:"Montserrat",Arial;
	font-size:16px;
	background-color:#fdfdfd;
}

footer,main {
	display:flex;
	justify-content:center;
}

header,footer {
	box-shadow:0 0 5px #555555;
	background-color:#555555;
	z-index:999;
}

header {
	background-color:#fff;
	position:fixed;
	top:0;
	left:0;
	width:100%;
}

.container {
	width:100%;
	min-width:360px;
	max-width:1600px;
	padding:10px;
	margin:auto;
}

header .container, footer .container {
	display:flex;
	justify-content:space-between;
	align-items:center;	
}

header * {
	color:#000;
	text-decoration:none;
}

header .info-grid {
	background-color:#555555;

}

header .info-grid p {
	display:block;
	color:#fff !important;
	text-align:right;
	font-size:0.8rem;	
}

header .info-grid * {
	color:#fff;	
}

header .info-grid #dateTime * {
	display:inline-block;
	text-align:center;
	width:1.35rem;
}

header .container img {
	grid-area:logo;	
}

header .container nav {
	grid-area:menu;	
	justify-self:end;
	position:relative;	
	font-size:0.9rem;
}

header .container nav #menu-mov{
	display:none;
	font-size:1rem;
}

header .container nav ul {
	display:flex;
	align-items:center;
}

header .container nav ul li {
	margin:0.25rem;
}

header .container nav ul li:last-child {
	margin-right:0;
}

header .container nav ul li a {
	padding:10px 10px;
}
header .container nav ul li a:hover {
	color:#555555;
}

header .container nav ul li a.active {
	background-color:#000;	
	color:white;
}


main {
	grid-area:main;
	align-self:start;
	margin-bottom: 30px;
}

main .container {
	margin-top:1.5rem;	
}

main .container {
	display:grid;
	grid-template-areas: "menuSection" "infoSection";
}

main .container #menuSection,
main .container #searchSection {
	grid-area: menuSection;
	border-bottom:1px solid #555555;
	padding-bottom:20px;
	position:relative;
	transition:all ease-in-out 300ms;
	margin-bottom:1rem;
}

main .container #menuSection ul {
	display:flex;
	flex-wrap:wrap;	
	opacity:1;
	overflow:hidden;
}

main .container #menuSection ul li {
	width:calc(100%/6);
	padding:4px;
}
main .container #menuSection ul li a {
	color: #555555;	
	text-decoration:none;
	display:block;
	border-radius:5px;
	border:1px solid #555555;
	padding:8px 5px;
	text-align:center;
	transition:all ease-in-out 300ms;
}

main .container #menuSection ul li a.activeMenuSection {
	background-color:#555555;
	color:#fff;	
}

main .container #menuSection ul li a:hover {
	background-color: #555555;
	color:#fff;
}

main .container #menuSection #bToggle, main .container #searchSection #bToggleSearch {
	position:absolute;
	bottom:-2px;
	right:0;
	text-decoration:none;
	font-size:1.35rem;
}

main .container #menuSection #bToggle:after,  main .container #searchSection #bToggleSearch:after {
	content: "\f151";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	color: #555555;
}

main .container #menuSection #bToggle.intercambiarB:after,  main .container #searchSection #bToggleSearch.intercambiarB:after {
	content: "\f150";	
}

main .container #menuSection ul.intercambiarM, main .container #searchSection form.intercambiarM {
	height:0;
	opacity:0;
	display:none;
}

main .container #infoSection {
	grid-area: infoSection;	
}

main .container.movil-oper {
	max-width:1023px;
}

main .container h1 {
	font-size:2rem;
	text-align:center;
	font-weight:400;
	text-decoration:underline;
	margin:1.5rem auto;	
}

footer {
	grid-area:footer;
	font-size:0.9rem;
}
footer * {
	color:#fff;	
}


/**************  BOTON UP *******************/
#buttonUp {
	position:fixed;
	background-color:#58565BBB;
	color:#fff;
	font-size:1.5rem;
	font-weight:600;
	padding:10px;
	bottom:50px;
	right:10px;
	cursor:pointer;
	z-index:99999;
	transition: ease-out all 300ms;
}

#buttonUp:hover {
	background-color:#58565B;
}

/**************   NO ACCESS *****************/
div.no-access {
	text-align:center;
	color:red;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:50vh;
}

div.no-access p {
	font-size:1.5rem;
	margin-bottom:20px;
}


/***************   BOTONES *******************/
button,a.button {
	color:#fff;
	background-color: #555555;
	border-radius:5px;
	padding:10px 30px;
	display:inline-block;
	border-style: outset;
	border-width:2px;
	border-color:#555555;
	cursor:pointer;
	transition:ease-in-out 500ms;
	text-decoration:none;	
}

button:hover,a.button:hover {
	background-color: #fff;
	color: #555555;
}




/**************  RESPONSIVE ******************/
@media screen and (max-width:1023px) {
	header .container nav #menu-mov {
		display:block;
		text-align:right;
	}
	
	header .container nav ul {
		flex-direction:column;
		position:absolute;
		right:-10px;
		top:40px;
		background-color:#000000cf;
		padding:0px;
		height:0;
		width:100vw;
		overflow:hidden;
		transition:height ease-in 300ms;
	}
	header .container nav ul.visible {
		height:100vh;	
	}
	
	header .container nav ul li,header .container nav ul li:last-child {
		margin:1.5rem;
	}
	
	header .container nav ul li * {
		color:#fff;
	}
	
	header .container nav ul li a.active {
		color:#fff;
		background-color:transparent;
		text-decoration:underline;	
	}
	header .container nav ul li a:hover {
		color:#fff;
		text-decoration:underline;
	}
	
	main .container #menuSection ul li {
		width:calc(100%/4);
	}
}

@media screen and (max-width:767px) {
	body {
		grid-template-rows: 80px auto 80px;
	}
	main .container h1 {
		font-size:1.5rem;	
	}
	main .container #menuSection ul li {
		width:calc(100%/2);
	}
	#buttonUp {
		bottom:80px;	
	}
}

@media screen and (max-width:500px) {
	main {
		margin-top:25px;	
	}
	
	footer .container {
		flex-direction:column;
		justify-content:center;
	}
	
	footer .container p {
		margin:5px auto;
	}
	
	header .info-grid .container>span {
		display:block;
		text-align:center;	
		margin:3px auto;
	}
	
	header div.info-grid .container>span .divisor {
		display:none;	
	}
	main .container h1 {
		font-size:1.35rem;	
	}
	main .container #menuSection ul li {
		width:100%;
	}
	#buttonUp {
		bottom:30px;	
	}
}


/********* CONTROL CLASES RESPONSIVE *******/
.PcTabletMovil {display:inline-block;}
.noVisible {display:none;}
.Pc {display:inline-block;}
.PcMovil {display:inline-block;}
.PcTablet {display:inline-block;}
.Movil {display:none;}
.Tablet {display:none;}
.TabletMovil {display:none;}


@media screen and (max-width:1023px) {
	.Pc {display:none;}
	.PcMovil {display:none;}
	.PcTablet {display:inline-block;}
	.Movil {display:none;}
	.Tablet {display:inline-block;}
	.TabletMovil {display:inline-block;}		
}	

@media screen and (max-width:767px) {
	.Pc {display:none;}
	.PcMovil {display:inline-block;}
	.PcTablet {display:none;}
	.Movil {display:inline-block;}
	.Tablet {display:none;}
	.TabletMovil {display:inline-block;}		
}


/*** LISTA DE ERRORES ****/
h2.mensajeError {
	margin-bottom:1rem;
	color:#f00;
	line-height:1.5;
	font-size:1.5rem;
	text-align:center;	

}

#listaErrores {
	max-width:1023px;
	color:#f00;
	margin:auto;
	line-height:1.75;
}

#listaErrores h2 {
	font-size:1.5rem;
	text-align:center;
	text-decoration:underline;
	padding-bottom:0.5rem;	
	font-weight:600;
}

#listaErrores ul {
	font-size:1.15rem;
}

#listaErrores ul li:before {
	font-family:"Font Awesome 5 Free";
	content:"\f071";
	font-weight:bold;
	padding-right:0.25rem;	
}

#listaErrores p {
	font-size:1.35rem;
	margin:1rem auto;
	text-align: center;
}


#listaInfo {
	max-width:1023px;
	color:#41cd6b;
	margin:auto;
	line-height:1.75;
}

#listaInfo h2 {
	font-size:1.5rem;
	text-align:center;
	text-decoration:underline;
	padding-bottom:0.5rem;	
	font-weight:600;
}

#listaInfo ul {
	font-size:1.15rem;
}

#listaInfo ul li:before {
	font-family:"Font Awesome 5 Free";
	content:"\f00c";
	font-weight:bold;
	padding-right:0.25rem;	
}

#listaInfo p {
	font-size:1.35rem;
	margin:1rem auto;
	text-align: center;
}