:root {
	--letra-tipo: Arial, Helvetica, sans serif;
	--letra-tamano: 16px;
	--letra-color: #000;
	--letra-separacion: .2px;
	--letra-entrelineas: 23px;
}

* {
	box-sizing: border-box;
}
body {
	max-width: 100%; margin: 0px; padding: 0px;
	/* background-color: #efefff; */
	font-family: var(--letra-tipo); font-size: var(--letra-tamano); color: var(--letra-color);
	letter-spacing: var(--letra-separacion); line-height: var(--letra-entrelineas);
}
a, a:visited {
	color:blue; text-decoration: none;
}
a:hover {
	color: darkblue; text-decoration: underline;
}
big { font-size: 18px; }
small { font-size: 14px; }

.modal {
	display: none;
	position: fixed; top:0; right: 0; bottom: 0; left:0; z-index: 1;
	background-color: #000b;
}
.modal > button {
	position: absolute; top: 0; right: 0;
	background: none; border: none;
	margin: 0px; padding: 0px 6px 0px 0px;
	color: #ddd; font-size: 50px;
	cursor: pointer;
}
.modal > button:hover { color: #f99; }

#modal-principal {
	flex-wrap: wrap; justify-content: center; align-items: center;
}

.caja { background-color: #fff; border: 1px solid #ccc; border-radius: 6px;
	> * { border-bottom: 1px solid #ccc; }
	> *:last-child { border-bottom: none; }
}
.caja > header {
	display: grid; grid-template-columns: auto auto; justify-content: space-between;
	> div { display: flex; padding: 5px;
		> * { margin: 5px; padding: 6px 10px; border-radius: 5px; }
	}
	> div:first-child { justify-content: flex-start; align-items: center;
		> big:first-child { margin-left: 0px; }
	}
	> div:last-child { justify-content: flex-end; align-items: flex-start;
		
	}
	.boton-cerrar {
		background-color: #ffeeee;
	}
	.boton-cerrar:hover {
		background-color: #ffe2e2; color: #e00;
	}
}

.caja > nav {
	ul {
		margin: 14px 0px; padding-left: 36px;
		li { margin: 20px 0px; }
	}
}

table.formulario {
	border-collapse: separate; border-spacing: 11px;
	tbody {
		input, textarea { width: 100%; }
		textarea { resize: none; }
		label { margin: 0px 2px; }
	}
	.botones {
		display: grid; justify-content: space-between;
	}
	.botones.uno {
		grid-template-columns: auto; justify-content: right;
	}
	.botones.dos {
		grid-template-columns: auto auto;
	}
}

input, textarea { 
	padding: 7px 9px; 
	border: 1px solid #999; border-radius: 4px;
	font-size: var(--letra-tamano); font-family: var(--letra-tipo); 
	letter-spacing: var(--letra-separacion); line-height: var(--letra-entrelineas);
}
input[type=submit],
input[type=reset],
.boton {
	padding: 7px 16px;
	border: 1px solid #999; border-radius: 4px;
	background: linear-gradient( #fbfbfb, #ebebeb ); border: 1px solid #aaa;
	font-size: 15px;
	cursor: pointer;
}
input[type=reset]:hover { background: #fbfbfb; }
input[type=submit]:hover { background: linear-gradient( #ececff, #d3d3ff ); }

pre { overflow: auto; border: 1px solid #ccc; }

.formulario-centrado { display: flex; justify-content: center; }

/* ----------- */
/* Maquetación */
/* ----------- */

#mensaje-superior { display: grid; grid-template-columns: auto auto; 
	justify-content: space-between; grid-gap: 10px;
	position: fixed; top: 0; right: 0;
	background-color: #e1e1e1;
	.texto {
		padding: 10px 20px;
	}
	.cerrar { 
		display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
		margin: 10px;
		* { margin: 10px; }
	}
}
#mensaje-superior.ok { background-color: #cec; }
#mensaje-superior.error { background-color: #ecc; }

@media ( max-width: 650px ){
	#mensaje-superior { grid-template-columns: 100%; }
}

/* ---------- */
/* Encabezado */
/* ---------- */

#encabezado {
	display: grid; grid-template-columns: auto auto auto; 
	justify-content: space-between; align-items: center;
	background-color: white;
	a { color: #222; text-decoration: none; }
	a:hover { color: blue; }
	> picture {
		padding: 15px 10px;
		img { display: block; height: 44px; }
	}
	> nav {
		> ul { min-height: 45px;
			display: flex;
			margin: 0px; padding: 0px;
			background: linear-gradient( #fefefe, #f8f8f8 ); border: 1px solid #cbcbd1; border-radius: 7px;
			list-style-type: none;
			> li {
				display: flex; align-items: stretch;
				> a, 
				> span { 
					display: flex; align-items: center; padding: 7px 13px; line-height: 17px;
				}
				a:hover, span:hover { background-color: #f7f7f7; }
			}
			li:first-child > * { border-radius: 7px 0px 0px 7px; }
			li:last-child > * { border-radius: 0px 7px 7px 0px; }
		}
	}
	> div { display: flex;
		> * { margin: 5px; padding: 5px; }
		svg { height: 23px; }
		svg:hover { fill: blue; }
	}
}

@media ( max-width: 1270px ){
	#encabezado nav { display: none; }
	#encabezado { grid-template-columns: auto auto;
		nav { display: none; }
	}
}

@media ( max-width: 360px ){
	#encabezado {
		grid-template-columns: 100%; justify-content: space-around;
		> div {
			justify-content: space-between;
		}
	}
}

#migas {
	background-color: #ededff;
	padding: 7px 13px;
	color: #777; line-height: 30px;
}

/* --------- */
/* Principal */
/* --------- */

#principal { display: grid; grid-template-columns: 1fr 4fr 1fr;
	background-color: #fff;
	> * { min-width: 0; /* Permite que la columna sea más estrecha que su contenido */
	overflow: hidden; }
	> aside { padding: 10px 10px 0px 10px;
		> * { margin-bottom: 10px; }
	}
	/* > aside:first-child { background-color: #efe; }
	> aside:last-child { background-color: #fee; }	 */
} 

/* main { background-color: #eef; } */

main {
	h1, h2, h3, h4, h5, h6 { 
		letter-spacing: 0px;
		margin: 20px 0px;
	}
	h1 { font-size: 28px; line-height: 32px; }
	h2 { font-size: 24px; line-height: 30px; }
	h3 { font-size: 20px; line-height: 24px; }
	h4 { font-size: 16px; line-height: 20px; }
	h5 { font-size: 12px; line-height: 18px; }
	h6 { font-size: 10px; line-height: 14px; }
}


body > * { width: 100%; }
body > section { background-color: #fff; }
#ajuste { background-color: #fff; }

@media screen and ( max-width: 1355px ){
	#principal {
		grid-template-columns: 1fr 4fr;
		main { grid-row: span 2; padding-right: 10px; }
	}
}

@media screen and ( max-width: 1140px ){
	#principal { grid-template-columns: auto;
		main { grid-row: span 1; padding-left: 10px; }
	}
}

body > footer { 
	background-color: #5a5a66; padding: 10px; text-align: center; color: #ccc; line-height: 30px;
	a,
	a:visited { color: #ccc; }
	a:hover { color: #fff; }
}

/* --------------- */
/* En Construcción */
/* --------------- */

#en-construccion { display: grid; grid-template-columns: 50% 50%;
	> * { display: flex; align-items: center; }
	> div:nth-child(1) { 
		justify-content: center; align-items: center; padding: 0px 0px 25px 0px; 
		img { height: 270px; }
	}
	> div:nth-child(2) {  }
}

@media screen and ( max-width: 800px ){
	#en-construccion {
		grid-template-columns: auto;
		img { max-width: 100%; }
		> div:nth-child(1){ padding: 0px 0px 20px 0px; }
		> div:nth-child(2){ justify-content: center; padding: 0px 0px 30px 0px; }
	}
}