body{
	position:relative;
	font-family:Arial,sans-serif;
	font-size:12px;
	

}
form{
	border:#ccc 1px dotted;
	padding:2rem;
}

textarea{
	width:100%;
}

#Monitor{
	width:100%;
	height:12rem;
	padding:1rem;
	color:#666;
	border:#999 1px solid;
}


menu{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
	background-color:#ccc;
	color:#666;
	padding:0;
}
menu li{
	list-style:none;
}
menu a{
	display:block;
	padding:.4rem .6rem;
	font-size:1.3rem;
	margin:0;
	color:#fff;
	text-decoration:none;

}

button, input[type='button'], input[type='submit'], a.boton{
	padding:.2rem .6rem;
	background:#666;
	color:#ddd;
	font-size:1.1rem;
	font-weight:bold;
	text-shadow:#333 1px 1px 1px;
	border-radius:.3rem;
	cursor:pointer;
	text-decoration:none;
}
button.cancelar, input[type='button'].cancelar, input[type='submit'].cancelar, a.boton.cancelar{
	background:#999;
}
button.borrador, input[type='button'].borrador, input[type='submit'].borrador, a.boton.borrador{
	background:#f0eba6;
	color:#332233;
	text-shadow:none;
}

a.boton.ligero{
	font-size:.9rem;
	font-style:normal;
}

.center{
	text-align:center;
}


header{
	font-size:2rem;

}
header a{
		text-decoration:none;
}
header.fontDark{
	color:#222222;
}
header.fontClear{
	color:#f4f4f4;
}
header.fontDark a{
	color:#222222;
}
header.fontClear a{
	color:#f4f4f4;
}


.center{
	text-align:center;
}

	.TablaScroller{
	width:100%;
	}



#FondoModal{
	position:fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index:100;


	background:url(img/opaco.png) top left repeat;
	display:flex;
	justify-content:center;
	align-items:center;
	
}
#Dialogo{

	min-width:50vw;
	min-height:30vh;
	max-height:90vh;
	border:#333 1px solid;
	border-radius:1rem;
	padding:1rem;
	font-size:1rem;
	background:#fff;
}
#Dialogo .barraCerrar{
	height:1.3rem;
		text-align:right;
}
#Dialogo .cerrarDialogo{
	background:red;
	color:white;
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	border-radius:1rem;
	width:1.8rem;
	cursor:pointer;
	padding:.1rem .3rem;
}




.TablaScroller{
	overflow:auto;
	max-height:400px;

}


.Tabla{
width:100%;	
		border-collapse:collapse;
}
.Tabla th{
	background:#eee;
	padding:.2rem 1rem .4rem 1rem;
}
.Tabla td{

	padding:.2rem 1rem;
	border:grey 1px solid;
}
.Tabla td .edit{
	display:block;
	width:24px;
	height:24px;
	cursor:pointer;
	background:url(img/editar.png) top left no-repeat;
}
.Tabla td .delete{
	display:block;
		width:24px;
	height:24px;
	cursor:pointer;

	background:url(img/eliminar.png) top left no-repeat;
}
.Tabla tr.inactivo{
	background:#ccc;
}


.RFormulario{
	margin:0;
}
.RFormulario .Campo{
	padding:.2rem 0;
}


#MenuLateral{

	height:100%;
	border-right:#ccc 2px solid;
	background:#ddd;
	color:#666;
	font-size:1rem;
}
#MenuLateral .Sub{
	background:#999;
	color:#ddd;
	font-weight:bold;
	text-align:center;
	padding:.5rem 0;
	text-shadow:#666 1px 1px 2px;
}
#MenuLateral .Bots{
	text-align:center;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	gap:.2rem;
	padding:1rem 0;
}
#MenuLateral h3{
	font-size:1.3rem;
	font-weight:bold;
	color:#888;
	margin: 0;
	padding: 1rem 0;
	text-align:center; 
	}
#MenuLateral p{
margin:0;
padding:.3rem 0;	
}
	
#MenuLateral .interno{
	padding-left:1rem;
	padding-right:1rem;
}


.ReactiveLayout{
	display:grid;
	grid-template-columns:14rem 1fr;
	grid-column-gap:1rem;
	align-items:start;
}
.ReactiveLayout > section{
	font-size:1rem;
}

.logoLateral{
	width:6rem;
	height:6rem;
	margin:1rem auto;
}

.ReactiveLayout.Three{
	grid-template-columns:14rem 1fr 24rem;

}




.Filtros{
	display:flex;
	gap:2rem;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:flex-start;
}

@media all and (max-width:900px){
	
	.ReactiveLayout{
	width:100%;
	display:block;
	/*
	grid-template-columns:1fr;
	grid-column-gap:1rem;
	align-items:start;
	grid-auto-flow: dense;
	*/
	}
	.ReactiveLayout.Three{
	grid-template-columns:1fr;
	grid-template-rows:auto;
	grid-template-areas:
	"cont prev" 
	"menu menu";
		
	}
	#ContentCol{

	grid-area:cont;
	}
	#MenuCol{

	grid-area:menu;
	}
	#PreviewCol{
	grid-area:prev;
	}
	
	#MenuLateral{
	width:96vw;
	}
	
	.Tabla{
	font-size:.85rem;
	}
	.TablaScroller{
	width:96vw;
	}
	
	ul.paginacion, .paginacion a{
	font-size:.9rem;
	}
	ul.paginacion li{
	margin:0 .3rem;
	}
	
}


@media all and (max-width:520px){
	
	.ReactiveLayout.Three{
	grid-template-areas:"cont"
	"prev"
	"menu";
	}
}