/*RESETEAMOS LOS ESTILOS PREDETERMINADOS DEL RESPECTIVO NAVEGADOR
Fuente del reset: http://meyerweb.com/eric/tools/css/reset/ */
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: inherit;
	vertical-align:middle;
}

/* 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;
}
input [type="radio"], [type="checkbox"] {margin:0; padding:0;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*Y AHORA SÍ COMENZAMOS CON CSS DE LA WEB*/
:root {
/*Estoy viendo que la mejor forma de manejar el root de las variables es agrupándolas por colores:
pero revisar si funciona con guion medio (lo probé con guion bajo y no funciona). Después del guion, mejor dos o más caracteres para que quede fácil seleccionarlos con doble-click*/

/*GENERAL: Blancos, grises y negros*/
	--color-000: #000000;
	--color-333: #333333;
	--color-666: #666666;
	--color-999: #999999;
	--color-aaa: #aaaaaa; /*Color intermedio entre 999 y ccc*/
	--color-bbb: #bbbbbb; /*Color intermedio entre 999 y ccc*/
	--color-ccc: #cccccc;
	--color-fff: #ffffff;
	
/* FONDOS */
	--color-1A: #293364; /*Axul oscuro*/
	--color-2A: #ffffff; /*Blanco*/
	--color-3A: #ff8dae; /*Rosa*/
	--color-4A: #f3c040; /*Amarillo*/
	--color-5A: #6db467; /*Verde*/
	
/* ADMINISTRADORES */
	--color-1B: #99CCFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-2B: #FF99FF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-3B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-4B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-5B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-6B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-7B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-8B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-9B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/
	--color-10B: #FFFFFF;	/*Para botones de cita con uno u otro adm en Agenda*/

/*COLOR DE FILAS EN TABLAS CON DATOS DE BASE DE DATOS*/
	--color-fp: #ccc;	/*Filas pares*/
	--color-fi: #999;	/*Filas impares*/
	
/*FUENTES*/
/*Insertamos las nuevas denominaciones para tamaños de fuente, de la 0 a la 9*/
	--txt0: 0.9rem;
	--txt1: 1.0rem;
	--txt2: 1.1rem;
	--txt3: 1.2rem;
	--txt4: 1.3rem;
	--txt5: 1.4rem;
	--txt6: 1.5rem;
	--txt7: 1.6rem;
	--txt8: 1.7rem;
	--txt9: 1.8rem;

/* ********************************************************************* */

/*Formato para utilizar variables:

var(--color-1A);*/
}
html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:62.5%; /*NO CAMBIARLO*/
	background:transparent;
	/*	Para que la equivalencia entre píxeles y rem sea de 10px = 1 rem, el tamaño raíz debe estar dado en porcentaje, y ser 62.5%. Si se pone en px o pt, esa equivalencia se altera.
	*/
}
body {
	padding:0;margin:0;border:0; /*Regla de reseteo para eliminar esos estilos del agente de usuario, y que prevalezcan los del autor. CONVIENE USARLO EN TODAS LAS HOJAS DE ESTILO*/

	background-color: #293364;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight:normal;
	color: black;
	line-height: 20px;
	line-height: 2rem;

	/* Ponemos color de respaldo, por si el dispositivo no coge el gradient */
	background: #637275;
	background: #475757;

	/* Configuramos el fondo con color degradado radial */
	-webkit-background: radial-gradient(at 50% 50%,white,#475757);
	-moz-background: radial-gradient(at 50% 50%,white,#475757);
	-ms-background: radial-gradient(at 50% 50%,white,#475757);
	-o-background: radial-gradient(at 50% 50%,white,#475757);
	background: radial-gradient(at 50% 50%,white,#475757);

	/* Y dejamos el gradiente de fondo en posición fija */
	background-attachment: fixed;
}

a { /* Estilo del texto de enlace en reposo */
	color: #f3c040; /*Amarillo*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 10px;
	font-size: 1rem;
	text-decoration:none;
	cursor: pointer;
}
a:link { /* Estilo del texto de enlace en reposo */
	color: #f3c040; /*Amarillo*/
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem;
	font-style: italic;
	font-weight: bold;
	text-decoration:none;
}
a.AlfaEnlaces {/*Estilo para los los enlaces de las letras del alfabeto en los anclajes de listas*/
	color: #293364;
	color: var(--color-1A);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem;
	font-style: italic;
	font-weight: bold;
}
a.AlfaEnlaces:hover {/*Estilo para los los enlaces de las letras del alfabeto en los anclajes de listas*/
	background-color: var(--color-1A);
	color: white;
	font-size: 18px;
	font-size: 1.8rem;
}
a:hover { /* Estilo del texto de enlace al ubicar el ratón encima */
	color: #ff8dae;
	font-size: 12px;
	font-size: 1.2rem;
	font-style: italic;
	text-decoration:none;
}
a:active { /* Estilo del texto de enlace al hacer click sobre él */
	color: #f3c040; /*Amarillo*/
	font-size: 12px;
	font-size: 1.2rem;
	text-decoration: none;
	font-style: italic;
	text-decoration:none;
}
a:visited { /* Estilo del texto de los enlaces visitados */
	color: #f3c040; /*Amarillo*/
	font-size: 12px;
	font-size: 1.2rem;
	color: #f3c040;
	font-style: italic;
	text-decoration:none;
}

/*Enlaces con forma de botón*/
	a {margin: 0 auto; cursor: pointer;}

	a.boton {
		-ms-appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;

		text-decoration: none;
		background: #6db467; /*Verde medio*/
		width:50%;
		font-size:1.1rem;
		font-weight:bold;
		color: #222;
		border: 0px outset #CCC;
		padding: 0.5rem 1rem;
		cursor: hand;	
		border: #418936 0px solid;
		
		-ms-border-radius: 0.5rem;
		-webkit-border-radius: 0.5rem;
		-moz-border-radius: 0.5rem;
		-o-border-radius: 0.5rem;
		border-radius: 0.5rem;

		-ms-margin: 0.5rem 1rem;
		-webkit-margin: 0.5rem 1rem;
		-moz-margin: 0.5rem 1rem;
		-o-margin: 0.5rem 1rem;
		margin:0.5rem 1rem;
	}
	a.boton:hover {
	  background: #8DCD8D;
	  background: #8ECF85;
	}
	a.boton:active {
	  background: #6db467; /*Verde medio*/
	 }

	a.botonAgenda {
	  background: white; /*Blanco*/
	  width:50%;
	  font-family:Arial, Helvetica, sans-serif;
	  font-size:1.1rem;
	  font-style:normal;
	  color: #222;
	  text-decoration: none;
	  text-transform:capitalize;
	  border: 0px outset #CCC;
	  padding: 0.15rem 1rem;
	  margin: 0.1rem 1rem;
	
		border-radius: 0.5rem;
		-moz-border-radius: 0.5rem;
		-webkit-border-radius: 0.5rem;
		border: #418936 0px solid;
		border: #999 0.1rem solid;
	}
	a.botonAgenda:hover {
	  background: #8DCD8D;
	  background: #8ECF85;
	}
	a.botonAgenda:active {
	  background: #6db467; /*Verde medio*/
	 }
	 
	a.botonAgenda2 {
	  background: #6db467; /*Verde medio*/
	  background: #C9E263; /*Verde medio*/
	  width:50%;
	  font-family:Arial, Helvetica, sans-serif;
	  font-size:1.1rem;
	  font-style:normal;
	  color: #222;
	  text-decoration: none;
	  text-transform:capitalize;
	  border: 0px outset #CCC;
	  padding: 0.1rem 1rem;
	  margin: 0.1rem 1rem;
	
		border-radius: 0.2rem;
		-moz-border-radius: 0.2rem;
		-webkit-border-radius: 0.2rem;
		border: #418936 0px solid;
		
		/*Insertamos código para la sombra*/
		box-shadow: 0px 0px 2px 1px #999;
	}
	a.botonAgenda2:hover {
	  background: #8DCD8D;
	  background: #8ECF85;
	}
	a.botonAgenda2:active {
	  background: #6db467; /*Verde medio*/
	 }

.Alerta {background-color: yellow;}
#Alerta {font-size: 1.2rem;}

/*Css para forzar alineación a la izquierda*/
.AlignIzq { text-align:left !important /*DEI*/;}

.BordeRojo {
	border:1px solid red;
}

/*BOTONES NUEVOS.
Quise sustituir los css de los elementos a (enlaces), pero se me alteran muchas cosas, sobre todo de la Agenda, por lo cual desistí de la idea*/
.Boton1 {
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;

	border: 0px outset #CCC;
	width:auto;
	padding: 0.5rem 2rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8rem;
	font-weight:bold;
	font-style:italic;
	color: #222222 !important /*DEI*/;
	letter-spacing: 0.2rem;
	text-transform:uppercase;
	text-decoration: none;
	cursor: hand;	
	
	-ms-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

/*	-ms-margin: 0.5rem 1rem;
	-webkit-margin: 0.5rem 1rem;
	-moz-margin: 0.5rem 1rem;
	-o-margin: 0.5rem 1rem;
	margin:0.5rem 1rem;*/
	
	border: orange 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, var(--color-4A) 15%, var(--color-4A) 90%, white 100%);
}

.Boton1:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%) !important;

	border: orange 0.2rem solid !important;
}

.Boton2 {
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;

	margin:2rem 0 0 !important;
	height:2.5rem;
	width:auto;
	border: 0px outset #CCC;
	padding: 0.3rem 1.5rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1.1rem !important;
	font-weight:bold;
	font-style:italic;
	color: #222222 !important /*DEI*/;
	letter-spacing: 0.2rem;
	text-decoration: none;
	text-transform:none !important;
	cursor: hand;	
	
	-ms-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

/*	-ms-margin: 0.5rem 1rem;
	-webkit-margin: 0.5rem 1rem;
	-moz-margin: 0.5rem 1rem;
	-o-margin: 0.5rem 1rem;
	margin:0.5rem 1rem;*/
	
	 border: green 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, var(--color-5A) 15%, var(--color-5A) 90%, white 100%) !important;
}

.Boton2:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
	border: green 0.2rem solid !important;
}

.Boton3 {
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;

	height:1rem !important;
	border: 0px outset #CCC;
	width:auto;
	padding: 0.3rem 1.5rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.6rem;
	font-weight:bold;
	font-style:italic;
	color: #cccccc !important;
	text-transform:uppercase;
	letter-spacing: 0.2rem;
	text-decoration: none;
	cursor: hand;	
	
	-ms-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

/*	-ms-margin: 0.5rem 1rem;
	-webkit-margin: 0.5rem 1rem;
	-moz-margin: 0.5rem 1rem;
	-o-margin: 0.5rem 1rem;
	margin:0.5rem 1rem;*/
	
	 border: #aaaaaa 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: linear-gradient(var(--color0) 0%, var(--color0) 5%, var(--color3) 15%, var(--color3) 90%, var(--color0) 100%);
	background: linear-gradient(#ccc 0%, #ccc 5%, #293364 15%, #293364 90%, #ccc 100%);
}

.Boton3:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: linear-gradient(#ccc 0%, #ccc 5%, #253898 15%, #253898 90%, #ccc 100%) !important /*DEI*/;

	border: #253898 0.2rem solid !important;
	color:#eeeeee !important;
}


/*Section Botones, que reemplaza a la tblBotones*/
.SectionBotones div {margin:2rem auto; text-align:center;}

/*Calendario JQuery*/
/*Configuraciones específicas para el calendario. NO BORRAR*/
	/*Ubicación del calendario*/
	.ui-datepicker { 
	  margin-top: 3.5rem;
	  margin-left: -25rem;
	  z-index: 1000;
	}
	 /*Tamaño de la fuente de los números en las celdas de los días*/
	.ui-datepicker td a {
		font-size: 0.9em;
	}

.CentrarTexto {
	text-align: center !important;
}
.CentrarElemento { margin:0 auto; }

.ColorRojo {
	background-color: #FF0000;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
}
.ColorNaranja {
	background-color: #FF6600;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
}
.ColorVerde {
	background-color: #C9E263;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
}
.ColorGris {
	background-color: #999999;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
}
.ColorAmarillo {
	background-color: #faba71;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
}
.CopyHora1 { /* Clase sólo para aplicar javascript a selects que puedan repetirse*/
	font-size:11px;
	font-size: 1.1rem;
}
.CopyHora2 { /* Clase sólo para aplicar javascript a selects que puedan repetirse*/
	font-size:11px;
	font-size: 1.1rem;
}
.CopyHora3 { /* Clase sólo para aplicar javascript a selects que puedan repetirse*/
	font-size:11px;
	font-size: 1.1rem;
}
.CopyHora4 { /* Clase sólo para aplicar javascript a selects que puedan repetirse*/
	font-size:11px;
	font-size: 1.1rem;
}

/*Div sobre el que se muestran los registros bd para autocompletar en campos input, y que se aplican mediante la función js 'autoCompletar(idCampoAC)'*/
#DivAutoComp {
	position:relative;
	top:0.2rem; left:1rem;
	background:#aaa;
	padding:0;
	border: #4d90fe 0.1rem solid;
	text-align:left;
	z-index: 1000;
	max-width:20rem;

	/*Configuramos la curvatura de las esquinas*/
	-ms-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-o-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

/*Configuramos el css para los párrafos que van dentro del #DivAutoComp*/
#DivAutoComp p {margin:0 !important /*DEI*/; padding:0.3rem 1rem !important /*DEI*/;}
	#DivAutoComp p:nth-child(2n+1){ background:#ddd;}
	#DivAutoComp p:nth-child(2n+2){ background:#bbb;}

/*Configuramos el div donde se mostrará el color del admin*/
#DivColorAdm {width:4rem; height:4rem;}

/*Css para los div que contienen el nombre del campo*/
.NombreCampo { display:block; /*margin:1rem 0 0.5rem; */text-align:left;}
.NombreCampo p {text-align:left !important /*DEI*/;}

/*Css para los divs de las letras separadores en los anclajes*/
.DivAncla {
	font-size:1.9rem;
	font-size:var(--txt9);
	color:white;
	font-weight:bold;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
	padding:0.5rem 0;
}

/*Asignamos estilo para los div de error en la validación de los formularios*/
.DivError {margin-left:0; text-align:left; font-size:1.2rem; color:red;}

/*Css para los DivErrorTelefonos en la validación de los formularios*/
#DivErrorTelefonos, #DivErrorSexo {padding:0.5rem;}

.DivSeparador {padding:2rem 0; margin:0 auto;}
.DivSeparador1 {padding:1rem 0; margin:0 auto;}

/*Css para el texto de los campos que indican los campos asterisco (p. ej. campos requisito)*/
.DivCampoAsterisco p{ margin:2rem auto 1rem; font-size:1.2rem; font-size:var(--txt3); text-align:center;}
	
.FondoBlanco {
	background-color: #FFF;
}

/*Los css para los campos text, password y textarea están configurados según lo requerido por las funciones que muestra el placeholder en la parte superior del campo al comenzar a escribir en ellos.*/
input[type="text"],[type="password"] {
	height:1.5rem;
	min-width:5rem;
	padding-top:2rem;
	padding-bottom:1rem;
	padding-left:0.4rem;

	/*Insertamos css para crear bordes biselados*/
	 border-top: #999 0.3rem solid;
	 border-left: #999 0.3rem solid;
	 border-bottom: #e9e9e9 0.3rem solid;
	 border-right: #e9e9e9 0.3rem solid;
	 
	/*Configuramos la curvatura de las esquinas*/
	-ms-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-o-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

textarea {
	padding-left:1.8rem;
	padding-top:2rem !important /*DEI*/;

	/*Insertamos css para crear bordes biselados*/
	 border-top: #999 0.3rem solid;
	 border-left: #999 0.3rem solid;
	 border-bottom: #e9e9e9 0.3rem solid;
	 border-right: #e9e9e9 0.3rem solid;
	 
	/*Configuramos la curvatura de las esquinas*/
	-ms-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-o-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
} 


/*Css para las etiquetas placeholder que son hermanas de un textarea*/
textarea ~ .LabelPlaceholder {
	padding-left:1.8rem;
}

/*Creamos css para las etiquetas label y los divs que se relacionan con el placeholder*/
/*El div debe tener position relativa, para que se ubique normalmente dentro de su contenedor; pero el label debe tener position absoluta, para que se ubique arriba y la izquierda del DivPlaceholder que lo contiene, superponiéndose y haciéndose visible dentro del respectivo campo input.*/
.DivPlaceholder {position:relative; display:inline-block /*para que se ajuste al tamaño del campo*/;}

.LabelPlaceholder {
	position: absolute;
	top: 0.3rem; 
	left: 0.8rem;
	font-size:1.1rem;
	color:#999;
}

/*Cuando se ha marcado error es necesario bajar la ubicación de la etiqueta placeholder*/
.DivError ~ .LabelPlaceholder {
	top: 1.8rem !important /*DEI*/;
}

/*Si este css se cambia, hay que hacerlo también en el archivo FuncionesJs.js, en la función crearDivsLabelsPlaceholder()*/
/*.LabelCopia {
  position: absolute;
  bottom: 0.5rem; 
  left: 0.4rem;
  font-size:1.2rem;
  color:black;
  display:block;
}*/

/*Estilos para la SectionFunciones*/
#SectionFunciones div { display:inline-block; width:45%;}

/*Título de la pagina, que va en la primera tabla*/
h1 {
	font-size:1.6rem;
	font-weight: bold;
	letter-spacing:0.15rem;
	color:#FFFFFF;
	text-transform: uppercase;
	line-height:3rem;
	margin:0;
}
/*Título de tabla secundaria*/
h2 {
	font-size:14px;
	font-size:1.4rem;
	font-weight:bold;
	color:#475757;
	text-transform:uppercase;
	margin:2rem 0;
}
/*Título de acordeón*/
h3 {
	font-weight:bold;
	font-size:12px;
	font-size:1.2rem;
	color: #ff8dae;
	text-align:center;
	text-transform:uppercase;
	margin:0;
}	
/*Título de tabla BD*/
h4 {
	font-size:1.2rem;
	font-weight: bold;
	color: white;
	color: red;
	line-height:1.8rem;
	text-align:center;
	text-transform: uppercase;
	margin:0;
}
h5 {}	/*Título de texto principal*/
h6 {} /*Título de texto secundario*/

/*ESTILOS PARA LOS ELEMENTOS DEL ACORDEÓN*/
.tblAcordeon {width:100%; margin: 0 auto; /*padding-bottom:1rem;*/} /* Es la tabla en la que debe estar contenido el acordeón, y le dejo el ancho en 100% como predeterminado, pero puede variar en cada página y en cada acordeón*/
.tblAcordeon td{text-align:center; padding:0;}

.accordion {margin: 0 auto; width:100%;}

.accordion h3 {
	background: #9097C0;
	/*width: 200rem;*/
	width: 100%; /*Para que su ancho no dependa del texto que contenga, sino que se adapte al contenedor del section, que debe ser una tabla de clase "tblAcordeon", cuyo ancho será diferente para cada página y cada acordeón.*/
	font-weight:bold;
	font-size:14px;
	font-size:1.6rem;
	color: #ff8dae;
	color: #293364;
	text-align:center;
	text-transform:uppercase;
/*	display:table-cell; Lo quité porque sólo era útil para alinear verticalmente el título, pero daba problemas para el margin. Lo del título lo solucioné con padding-top
	vertical-align:middle;*/
	height:30px;
	height:3rem;
	cursor:pointer;
	padding:0; /*No se le puede poner padding lateral, porque se desborda*/
	padding-top:1rem; /*Para que el título quede centrado verticalmente*/
	/*padding-top:0;*/ /*Si este vuelve a fallar en otra página, toca modificarlo en cada página*/ /*En efecto falló en otra página, con lo cual toca modificarlo en cada página*/ /*Pero no puede ser. Me niego a creer que no se pueda configurar igual para todos los h3. Yo creo que es porque en algunas páginas no se lee la plantilla css actualizada, aunque le haga con Ctrl + F5. Lo dejo con padding-top:1rem hoy, 2018/01/08, para revisar después de algún tiempo a ver si siguen habiendo páginas que lo muestren distinto*/
	margin:0;
	/*margin-bottom:1.5rem;*/
	background:url("/Imagenes/Iconos/TrianguloSelect_Ord.png") no-repeat scroll right center #293364;
	background:url("/Imagenes/Iconos/TrianguloSelect_Ord.png") no-repeat scroll right center #9097C0;
	background:url("/Imagenes/Iconos/TrianguloSelect_Ord.png") no-repeat scroll right center #7C9885;
	background:url("/Imagenes/Iconos/TrianguloSelect_Ord.png") no-repeat scroll right center #A26769;
}

	/*Para separar los h3 cuando haya más de 1*/
	.accordion h3:not(:first-of-type) {margin-top:2rem}
	
.accordion .block {
	/*background-color: #999;*/
	background:#aaaaaa;
	background:var(--color-aaa);
	background:#A7BBEC;
	background:#FAF9F9;
	background:#AFDEDC;
	background:#D5B9B2;
 	margin:0 auto;
	width:95%;
	padding:1rem 0.5rem; /*Si se desborda el contenido, reducir el width en la respectiva página*/
	font-weight:normal;
	text-align:center;
}
.accordion h4 {
	background: #999;
	font-size:13px;
	font-size:1.3rem;
	font-weight:normal;
	width:100%;
	margin:0 auto;
	padding:1rem 0; /*No se le puede poner padding lateral, porque se desborda*/
}

/*Configuramos otros elementos que pueden ir dentro del block*/
.block p {margin:0 1rem; text-align:center;}
.block input[type="button"] { display:block; margin:1rem auto 2rem;}

/*Hacemos que cada botón se muestre en una línea aparte, y lo centramos*/
.accordion input[type="submit"],[type="reset"],[type="boton"],[type="buttom"],[type="button"]{display:inline-block; margin:0 auto;}

/*Configuramos css para acordeón que esté contenido en tblListaBD*/
.tblListaBD td .accordion h3 {
	-ms-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 0.5rem;

	height:2.2rem;
	padding-top:0.3rem;
	font-size:1rem;
}

	/*INSERTAMOS ESTILOS PARA LOS ELEMENTOS DE LAS SECTIONS DE FECHA*/
	.SectionFecha {}
		.SectionFecha article{display:block; width:100%;}
		.SectionFecha > p {margin: 1.5rem 0 0.5rem; display:block; width:100%; text-align:left;}
		.SectionFecha article div{display:table-cell !important /*DEI*/;}
			.SectionFecha article div:nth-child(1){ width:25%; margin:0;}
			.SectionFecha article div:nth-child(2){ width:30%; margin:0;}
			.SectionFecha article div:nth-child(3){ width:30%; margin:0;}

/*INSERTAMOS ESTILOS PARA LOS ELEMENTOS DE LAS SECTIONS DE SEXO y LAS SECTIONS SíNo*/
	.SectionSexo, .SectionSiNo {margin-left:1rem; width:100%;}
		.SectionSexo div, .SectionSiNo div {display:inline; max-width:90%; padding:0.5rem 1rem; }
		/*Aquí, por primera vez, aplicaremos la idea de utilizar variables css respaldadas con el valor en constante, como los px y los rem*/
		.SectionSexo p, .SectionSiNo p {display:inline; text-align:right; font-size:1.2rem; font-size:var(--txt4);}
		
.SectionSexo article, .SectionSiNo article{ width:100%; display:block;}
.SectionSexo div, .SectionSiNo div{ width:20% !important /*DEI*/; display:inline-block;}
	.SectionSexo div:nth-child(1), .SectionSiNo div:nth-child(1){text-align:left !important /*DEI*/;}
	.SectionSexo div:nth-child(2), .SectionSiNo div:nth-child(2){text-align:right !important /*DEI*/;}
.SectionSexo > p, .SectionSiNo > p {margin:1.5rem 0 0.5rem !important; font-size:1.4rem; font-size:var(--txt5);}
		
		
/*ESTILOS PARA BOTONES (LOS PASÉ AL FINAL)*/

.BotonSec {
	background-color: #6db467 !important; /*Verde*/
	font-size:1rem;
	font-weight:bold;
	font-style:italic;
	color:#555;
	color: #222;
	letter-spacing:1.8px;
	letter-spacing:0.0rem;
	padding:5px 10px;
	padding:0.2rem 1rem;
	cursor:pointer;
}
/*.BotónRojo {
	background-color: #FF0000;
	text-align: center;
	font-size: 11px;
	font-size: 1.1rem;
	cursor:pointer;
}
*/
/*Configuraciones genéricas para las tablas de las páginas de Errores y Ok*/
.PgErroresOk .tblFondo2 {width:60%;}
.PgErroresOk .tblContenido {width:80%;}
.PgErroresOk .tblContInt1 {width:75%;}

.LineSupCelda{
	border-top-width:medium;
	border-top:solid;
	border-top-color:#412718;
	padding-top:30px;
	padding-top:3rem;
}
.Logo {
	width:50%;
}

.Oculto {
	display:none;
}

/*PÁRRAFOS*/
p {margin:0;}

/*Separación entre párrafos (Dejar el important)*/
p + p {margin-top:2rem !important;}

/*Separación en párrafos que anteceden a type button*/
/*p ~ label input[type="button"]{margin-top:2rem;}*/
p ~ label textarea{margin-top:2rem;}

/*Párrafos que van inmediatamente después de una etiqueta label (de los input)*/
label ~ p { margin-top:3rem;}

/*Para párrafos que sean hijos directos de la tblContInt2*/
.tblContInt2 tr td > p {margin:0 auto; text-align:center;}

.parrafo:first-letter{
	text-transform: capitalize;
}

/* ----------- INSERTAMOS CSS PARA PÁGINAS EN LA NUEVA METODOLOGÍA DESECHANDO WORDPRESS ------- */

.DivPagina {
	margin-bottom:5rem;
}
.main-navigation {
	position:absolute;
	top:0rem;
	display:table;
	width:100%;
	margin:0 auto;
	background:black;
	opacity:0.7;
	margin-top:0;
}
.main-navigation div {
	display:table-cell;
	width:16.66%;
	font-size:1.2rem;
	color:#ccc;
	text-transform:uppercase;
	text-align:center;
	padding:2rem 0 1rem;
	transition: background 1s;
}
.main-navigation div:hover {
	background:var(--color-1A);
	opacity:1;
	color:white;
	cursor:pointer;
}
.SectionContenido {
	width:100%;
	margin-top:8rem;
}
.ArticleContenido {
	background:#ccc;
	width:70%;
	text-align:center;
	margin:0 auto;
	border: white 0.1rem solid;
	padding-bottom:3rem;
}
.ArticleContenido h3 {
	font-size:1.8rem;
	font-weight:bold;
	color:#293364;
	color:var(--color-1A);
	text-transform:uppercase;
	padding:2rem 1rem 4rem;
}
.ArticleContenido img {
	width:100px;
	height:300px;
}
.ArticleContenido p {
	text-align:left;
	margin-left:2rem;
	line-height:1rem;
}
img.ImgContenido {
	width:100%;
	height:auto;
}
.DivMapaContacto {
	display:inline-block;
	border: white 0.1rem solid;
	padding:2rem;
}

/* ----------- HASTA AQUÍ CSS PARA PÁGINAS EN LA NUEVA METODOLOGÍA DESECHANDO WORDPRESS ------- */

/*Insertamos css para páginas que se muestran en popup o ventana emergente*/
.PaginaPopup {font-size:1.4rem; font-size:var(--txt5);}

/*SECTION PRIVACIDAD*/
.ContenedorPrivacidad {display:table; margin:0 auto; width:55%;}
.SectionPrivacidad { margin:0 auto; width:100%}
	.SectionPrivacidad > article { text-align:center; padding:1rem;}
	.SectionPrivacidad > div { display:inline;}
	.SectionPrivacidad p { display:inline; margin:0; max-width:90%;}
	.SectionPrivacidad input[type="checkbox"] { margin:0 1rem;}

.RadiosDias { /* Clase sólo para aplicar javascript a radiobuttons que puedan repetirse*/
	font-size:11px;
	font-size: 1.1rem;
}
img.Reloj {
	width: 50px;
}
img.mediana{
  width: 50px; height: 50px;
}
#Reloj {width: 50px; height: 50px;;}

Select {
	height:4.5rem;
	padding: 3px;
	padding: 0.3rem;
	min-width:8rem;

	/*Insertamos css para crear bordes biselados*/
	 border-top: #999 0.3rem solid;
	 border-left: #999 0.3rem solid;
	 border-bottom: #e9e9e9 0.3rem solid;
	 border-right: #e9e9e9 0.3rem solid;
	 
	/*Configuramos la curvatura de las esquinas*/
	-ms-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-o-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

/*Los selects de #TablaHorarios no hace falta que sean tan altos como los del resto*/
#TablaHorarios select {height:3rem;}

Summary {
	background: #293364;
	width:550px;
	width:55rem;
	font-weight:bold;
	font-size:12px;
	font-size:1.2rem;
	color: #ff8dae;
	text-align:center;
	text-transform:uppercase;
	display:table-cell;
	vertical-align:middle;
	height:30px;
	height:3rem;
	cursor:pointer;
	padding-top: 1rem;
}

/*ATENCIÓN: LAS TABLAS LAS ORDENAREMOS POR ORDEN DE IMPORTANCIA, NO ALFABÉTICAMENTE
Y EN ESTA PLANTILLA TENDRÁN TODAS EL PADDING = 0, EXCEPTO EN LAS CELDAS DE TÍTULO (th), PORQUE ES MEJOR QUE LAS TABLAS SE LES DÉ FORMATO EN LA RESPECTIVA PÁGINA, PARA EVITAR PROBLEMAS CON CONFLICTOS DE CASCADA*/

/*OJO: Los padding genéricos de todas las tablas deben ser 0rem, porque si no luego da muchos problemas para cuadrarlos en las respectivas páginas. Los th sí pueden*/
.tblContenedorGral {
	width:100%;
	margin:0 auto;
	padding:0;
}

.tblCabecera {width:80%; margin: 1rem auto 0; height:3rem;}
	.tblCabecera td:first-child{text-align:left;}
	.tblCabecera td:last-child{text-align:right;}

.tblFondo2 { /*Tabla que contiene el color Nº, para contrastar con el color Nº 1*/
	background: #fff;
	background: transparent;
	width: 80%;
	margin:0 auto 5rem;
}
	/*.tblFondo2 td:nth-child(2n+1), .tblFondo2 td:nth-child(2n){padding:2rem 0 3rem;}*/
	.tblFondo2 td{padding:2rem 0 3rem;}

	/*Para las páginas sin cabecera (popup)*/
	.SinCabecera .tblFondo2 {margin-top:2rem;}
	
.tblContenido { /*Tabla de dos filas que contiene el título del contenido y el contenido mismo*/
 	background: #c8d2d2;
	width: 80%;
	border: black 0.1rem solid;
	margin: 0 auto;
	padding:0;
}
	.tblContenido th {
		background: #475757;
		font-size:1.6rem;
		font-weight: bold;
		letter-spacing:0.15rem;
		color:#FFFFFF;
		text-transform: uppercase;
		border-bottom: 15px solid;
		border-bottom: 0.15rem solid;
		border-bottom-color: #333;
		padding: 1.3rem;
	}
	.tblContenido td{padding:2rem 1rem;}

.tblContInt1 { /*Tabla de la segunda fila de la tblContenido, que contiene el contenido*/
	margin: 0 auto;
	border: white 2px solid;
	border: white 0.2rem solid;
	padding-bottom:4rem;
}
	.tblContInt1 td{padding: 2rem 1rem 1rem; text-align:center;}

.tblContInt2 {margin: 0rem auto 2rem;}

	.tblContInt2 th{ /*Formato celda de título*/
		background-color:#666;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: bold;
		color: white;
		text-transform: uppercase;
		border-bottom: white 1px solid;
		border-bottom: white 0.1rem solid;
	}

	.tblContInt2 td{padding:1rem;}
	
.tblContInt3 { /*Tabla contenida en tblContInt1, y que contiene un formulario pequeño tipo login*/
	margin:0rem 0rem;
	margin:0 auto;
	padding:0rem;
}

	.tblContInt3 td{padding:0;}
	
.tblContInt4 {width:70%; padding: 0;}
	.tblContInt4 td{ padding:0;}


.tblCeldaUnica {
	text-align:center;
	margin: 0 auto;
	padding:0rem;
}
	.tblCeldaUnica td{ padding:0;}

.tblListaBD { /*Tabla contenida en tblContInt1, y que contiene una lista con datos bd*/
	margin: 0 auto; /*Para centrar horizontalmente*/
	border: #999 0.1rem solid;
	padding:0rem;
}
	.tblListaBD th { /*Formato celda de título*/
		background-color:#293364;
		font-size:0.5rem;
		font-size:var(--txt3);
		font-weight: bold;
		color: white;
		line-height:1.8rem;
		text-align:center;
		text-transform: uppercase;
		border-bottom: white 0.25rem solid;
		padding:0.7rem 0;
		letter-spacing:0.05rem;
	}
	
	/*Coloreamos líneas divisorias entre celdas del título, excepto en la última celda*/
	.tblListaBD th{ border-right: #aaa 0.1rem solid;}
	/*La última celda no debe ir con borde*/
	.tblListaBD th:last-child{ border-right: 0;}

	.tblListaBD th:first-child {padding-left:1rem;} /*Formato celda de título*/
	.tblListaBD th:last-child {padding-right:1rem;} /*Formato celda de título*/

	/*Para fijar la primera fila cuando se haga scroll hacia abajo*/
	.tblListaBD th {
		-ms-position: sticky;
		-webkit-position: sticky;
		-moz-position: sticky;
		-o-position: sticky;
		position: sticky;

	  top: 0;
	  z-index: 2;
	}
	
	.tblListaBD td {padding:0.5rem 0;}
	
	/*Color de filas pares e impares*/
	/* .tblListaBD tr:nth-child(even) {background: #999;}
	.tblListaBD tr:nth-child(odd) {background: #CCC;} */

	.tblListaBD tr:nth-child(even) {background: #CEBEBE;}
	.tblListaBD tr:nth-child(odd) {background: #ECE2D0;}

	/*Insertamos código para que las p de los títulos de tablaBD no creen espacios encima y debajo*/
	.tblListaBD p {display:inline;}
	
	/*Estilos para las tablas ListaBD cuando están contenidas en un acordeón*/
	.accordion .tblListaBD {width:95%; border: #ccc 0.2rem solid;}
	.accordion .tblListaBD th{
		background-color:#666;
		height:3rem;
		font-size: 12px;
		font-size: 1.2rem;
		font-weight: bold;
		color: white;
		text-transform: uppercase;
		border-bottom: white 1px solid;
		border-bottom: white 0.1rem solid;
		padding:0.2rem;
	}
	
	.accordion .tblListaBD td{
		padding:0.2rem;
	}
	
	.tblListaBD td .block { padding:1rem 0 !important;}
	.tblListaBD td .block div { width:93% !important/*DEI*/; padding:0 0.5rem !important; text-align:left !important/*DEI*/;}


	/*En acordeones con divs dentro del block, alternamos los colores del div. Es necesario agregarles a los divs la clase ColoresAlternos*/
	.block div.ColoresAlternos:nth-child(2n+1) { background-color:#aaaaaa; background-color:var(--color-aaa);}
	.block div.ColoresAlternos:nth-child(2n+2) { background-color:#bbbbbb; background-color:var(--color-bbb);}

	.tblBotones {margin:0 auto;}
	
	/*Agregamos peso e important porque, al ir de última en la página, suele afectarse por tablas anteriores*/	
	.tblBotones tr td:nth-child(n){
		padding:1rem 0 !important; /*No quitar el important*/
		text-align:center;
	}
	
	/*Css para filas que contienen el checkbox de activar/desactivar las demás casillas*/
	table .FilaActivarCheck td{
		/*Primero lo fijamos arriba al hacer scroll*/
		-ms-position: sticky;
		-webkit-position: sticky;
		-moz-position: sticky;
		-o-position: sticky;
		position: sticky;

		top: 3rem;
		z-index: 2;
		
		/*Y luego le damos estilo al contenido*/
		background:#666;
		height:1.5rem;
		font-size: 1.2rem;
		font-size:var(--txt3);
		line-height:1.5rem;
		font-style:italic;
		font-weight:700;
		color:#e5e5e5;
	}

.ContAgenda {width:100%;}
	/*Formateamos filas de título*/
	.ContAgenda th {text-align:center; font-size: 1.3rem; font-weight:bold;}

	/*Formateamos filas normales*/
	.ContAgenda td {text-align:center; border-width:10px; font-size: 1.2rem; font-weight:normal; border: white 0.2rem solid !important;}

	/*Formateamos filas pares e impares con colores por defecto, en caso de que el dispositivo no coja las variables*/
	.ContAgenda tr:nth-child(2n) {background-color: #ccc;}
	.ContAgenda tr:nth-child(2n+1) {background-color: #999;}
	
	/*Formateamos filas pares e impares con variables*/
	.ContAgenda tr:nth-child(2n) {background-color: var(--color-fp);}
	.ContAgenda tr:nth-child(2n+1) {background-color: var(--color-fi);}
	
	/*Formateamos columnas primera y última*/
	.ContAgenda td:first-child {width:5%; font-weight:bold;}
	.ContAgenda td:last-child {width:5%; font-weight:bold;}

.tblCitas {
	width:100%;
	/*Los dos siguientes, border-spacing y border-collapse, son para separar las celdas, y equivalen a cellspacing en html, porque con padding y margin no funcionó*/
	border-spacing: 0.5rem;
	border-collapse: separate;
}

#tblColores{margin:0 auto; width:90%;}
	#tblColores td:nth-child(2n+1){ background-color: #ccc; width:15%; border: white 0.1rem solid;}
	#tblColores td:nth-child(2n+2){width:5%;}
#tblColores {border-collapse: separate; border-spacing:0 3rem;}
#tblColores tr td {height:3rem; padding:0; text-align:center;}

/*Css para los elementos relacionados con el boton para seleccionar el color del administrador*/
.DivBotonColor {
	/*Configuramos la curvatura de las esquinas*/
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;

	border: white 0.1rem solid;
	margin:1rem;
	display:inline-block;
	width:25%; background:#ccc;
	padding:0.5rem;
}
.DivBotonColor label { display:inline-block !important; padding:0 !important;}
.DivBotonColor label:nth-child(1) { width:65% !important;}
.DivBotonColor label:nth-child(2) { width:20% !important;}

.BotonColor {
	/*Configuramos la curvatura de las esquinas*/
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;

	/*Configuramos el grueso del borde para que quede iluminado arriba y a la izquierda y sombreado abajo y a la derecha*/
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	
	margin:1rem auto;
	height:3rem;
	width:100%;
	padding:0 1rem;
	text-align:center;
	font-style:normal !important /*DEI*/;
	font-weight:normal !important /*DEI*/;
}
#tblColores td { text-align:center; }

/*Los selects de la tabla tblDia pueden ser normales*/
.tblDia select { margin: 0.5rem 0; height: 3rem; }

/*Css para las tablas que contendrán selects para horarios de la semana*/
.TblDiasHoras {margin: 1.5rem auto !important /*Dejar el important*/; border: white 0.1rem solid; background:#ccc; width:70%;}
	.TblDiasHoras td{border:0; padding:2rem 0 !important  /*Dejar el important*/;}
	.TblDiasHoras tr td:first-child {width:5%; padding:0 !important; /*Dejar important*/}
	.TblDiasHoras tr td:nth-child(2n) {width:95%;}
	
	/*Configuramos el ancho de la columna que indicará los días de la semana*/
	.TblDiasHoras td:nth-child(1) {width:25% !important /*Dejar el important*/;}
	.TblDiasHoras tr:nth-child(2n+1) td { background:#ccc !important /*Dejar el important*/;}
	.TblDiasHoras tr:nth-child(2n+2) td { background:#999 !important /*Dejar el important*/;}
	
	/*Css para la imagen con el nombre del día de la semana*/
	.TblDiasHoras img {width:2rem !important /*Dejar el important*/; height:10rem !important;}
	

/*Evitamos que TblDiasHoras afecte a TablaHorarios pisando los valores necesarios*/
#TablaHorarios td:nth-child(2n+1){width:10%; border: 0;}
#TablaHorarios td:nth-child(2n+2){width:90%; border: 0;}
#TablaHorarios tr:nth-child(2n+1) td { background:transparent !important /*Dejar el important*/;}
#TablaHorarios tr:nth-child(2n+2) td { background:transparent !important /*Dejar el important*/;}

.tblFecha {width:97%;}
	.tblFecha td{ border: red 0.2rem solid;}
	.tblFecha td:nth-child(2n+1){ width:10%; border: blue 0.2rem solid;}
	.tblFecha td:nth-child(2){ width:15%; border: green 0.2rem solid;}
	.tblFecha td:nth-child(4){ width:35%; border: green 0.2rem solid;}
	.tblFecha td:nth-child(6){ width:20%; border: green 0.2rem solid;}

.tblFormulario1 {margin:0 auto; width:40%; max-width:90%;}
	.tblFormulario1 td{padding:1rem 0 !important; text-align:center;}
	
	/*Fue necesario agregar alineación de párrafos en tblFormularios*/
	.tblFormulario1 tr td:nth-child(2n+1):not(.CentrarTexto) > p {text-align:right;}
	.tblFormulario1 tr td:nth-child(2n+2):not(.CentrarTexto) > p {text-align:left;}

.tblFormulario2 {margin:0 auto; width:50%; max-width:90%;}
	.tblFormulario2 td{padding:1rem 0 !important;}
	.tblFormulario2 tr td:nth-child(1n){width:50%; text-align:left;}
	.tblFormulario2 tr td:nth-child(2n){width:50%; text-align:right;}
	.tblFormulario2 tr td:nth-child(3n){width:auto;}
	.tblFormulario2 tr td:nth-child(4n){width:auto;}
	
	/*Fue necesario agregar alineación de párrafos en tblFormularios*/
	.tblFormulario2 tr td:nth-child(2n+1):not(.CentrarTexto) > p {text-align:right;}
	.tblFormulario2 tr td:nth-child(2n+2):not(.CentrarTexto) > p {text-align:left;}

.tblVolver {
	width:90%;
}

/*Insertamos css para los elementos de la SectionTelefonos*/
.SectionTelefonos article{ width:96%; display:block;}
	/*Css para los div que están dentro de article*/
	.SectionTelefonos article div{ width:40% !important /*DEI*/; display:inline-block;}
	.SectionTelefonos div:nth-child(1){text-align:left !important /*DEI*/;}
	.SectionTelefonos div:nth-child(2){text-align:left !important /*DEI*/; margin-left:17%;}
	.SectionTelefonos p { font-size:1.3rem; font-size:var(--txt3);}

textarea {
	max-width:75%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	font-size: var(--txt3);
	padding: 1rem;
	resize: vertical;
}

/*Css para title, es decir, los textos de ayuda que se muestran al pasar el mouse por encima de la imagen que muestra un interrogante, en ordenador, o al hacer click en esa imagen, en móviles*/
.Title {
	background-color:#bbbbbb;
	background-color:var(--color-bbb);
	padding:0.5rem;
	font-size:1.2rem;
	font-style:italic;
	line-height:1.7rem;
	display:none;
}

#TotalesTabla { margin: 1rem auto; font-size:1.2rem;}

/*Css para las letras de la cabecera de los anclajes*/
.txtCabeceraAnclaje {
	background-color:#293364;
	background-color:var(--color-1A);
	font-size:2rem;
	color:white !important /*DEI*/;
	padding:0.4rem;
}
.txtAsterisco {
	font-size: 70%;
	line-height:1.1rem;
}
.txtExtraPequeno {
	font-size: 80%;
	line-height:1.3rem;
}
.txtPequeno {
	font-size: 90%;
	line-height:1.5rem;
}
.txtGrande {
	font-size: 110%;
	line-height:2.5rem;
}
.txtExtraGrande {
	font-size: 120%;
	line-height:3rem;
}
.txtAsterisco {
	font-size: 0.8rem;
	line-height:1.1rem;
}
.txtExtraPequeno {
	font-size: 1rem;
	line-height:1.3rem;
}
.txtPequeno {
	font-size: 1.2rem;
	line-height:1.5rem;
}
.txtNormal {
	font-size: 1.4rem;
	line-height:1.8rem;
}
.txtGrande {
	font-size: 1.6rem;
	line-height:2.5rem;
}
.txtExtraGrande {
	font-size: 1.8rem;
	line-height:3rem;
}
/*Insertamos las nuevas denominaciones para tamaños de fuente, de la 0 a la 9*/
.txt0 {
	font-size: 0.8rem;
	line-height:1.1rem;
}
.txt1 {
	font-size: 1rem;
	line-height:1.3rem;
}
.txt2 {
	font-size: 1.1rem;
	line-height:1.4rem;
}
.txt3 {
	font-size: 1.2rem;
	line-height:1.5rem;
}
.txt4 {
	font-size: 1.3rem;
	line-height:1.65rem;
}
.txt5 {
	font-size: 1.4rem;
	line-height:1.8rem;
}
.txt6 {
	font-size: 1.5rem;
	line-height:2.15rem;
}
.txt7 {
	font-size: 1.6rem;
	line-height:2.5rem;
}
.txt8 {
	font-size: 1.7rem;
	line-height:2.75rem;
}
.txt9 {
	font-size: 1.8rem;
	line-height:3rem;
}

.txtMayusculaSost {
	text-transform:uppercase;
}
.txtNormalCur {
	font-style: italic;
}
.txtNormalNeg {
	font-weight: bold;
	vertical-align:top;
}
.txtCursivaNegrilla {
	font-style: italic;
	font-weight: bold;
}
.txtColor4 { /*rosa*/
	color: #ff8dae;
}

.txtVertical {
	-ms-writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-moz-writing-mode: vertical-lr;
	-o-writing-mode: vertical-lr;
	writing-mode: vertical-lr;

	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.txtVolver {
	font-size: 11px;
	font-size: 1.1rem;
	color: #f3c040 /*Amarillo1*/
}
.txtCapital {
	text-transform: capitalize;
}
.txtParpadeo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	color: #FF0000;
	text-decoration: blink;
}
.txtResaltado {background:#f3c040;}
#WindowLoad /*Estilo de la capa que semioculta y bloquea la pantalla mientras se carga página*/
{
	-webkit-opacity: 0.65;
	-moz-opacity: 0.65;
 	-ms-opacity: 0.65;
	-o-opacity: 0.65;
	opacity: 0.65;
 
    position:fixed;
    top:0px;
    left:0px;
    z-index:3200;
    filter:alpha(opacity=65);
    background:#999;
}

/*BOTONES - LOS PONGO DE ÚLTIMOS, PORQUE EN MAYO DE 2018 CAMBIÉ EL ESTILO DE LOS BOTONES Y DE MOMENTO NO QUIERO BORRAR LOS ANTERIORES, SÓLO COMENTARLOS*/
/*BOTONES NUEVOS.
Quise sustituir los css de los elementos a (enlaces), pero se me alteran muchas cosas, sobre todo de la Agenda, por lo cual desistí de la idea*/
input[type="submit"], input[type="reset"], input[type="boton"], input[type="buttom"], input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;

	display:inline-block;
	margin:0 auto;
	height: 3rem;
	width:auto;
	border: 0px outset #CCC;
	padding: 0.5rem 2rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1rem;
	font-weight:bold;
	font-style:italic;
	color: #222222 !important /*DEI*/;
	letter-spacing: 0.2rem;
	text-transform:uppercase;
	text-decoration: none;
	cursor: pointer;	
	
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

	border: orange 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #f3c040 15%, #f3c040 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, #f3c040 15%, var(--color-4A) 15%, #f3c040 90%, var(--color-4A) 90%, white 100%);
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="boton"]:hover, input[type="buttom"]:hover, input[type="button"]:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%);
	background: linear-gradient(white 0%, white 5%, #feb601 15%, #feb601 90%, white 100%) !important;
}

input[class="BotonPeq"] {
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;

	margin:1rem auto !important;
	height:2.5rem;
	width:auto;
	border: 0px outset #CCC;
	padding: 0.3rem 1.5rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1.1rem !important;
	font-weight:bold;
	font-style:italic;
	color: #222222 !important /*DEI*/;
	letter-spacing: 0.2rem;
	text-decoration: none;
	text-transform:none !important;
	cursor: pointer;	
	
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

	 border: green 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%) !important;
	background: -moz-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%) !important;
	background: -ms-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%) !important;
	background: -o-linear-gradient(white 0%, white 5%, #6db467 15%, #6db467 90%, white 100%) !important;
	background: linear-gradient(white 0%, white 5%, var(--color-5A) 15%, var(--color-5A) 90%, white 100%) !important;
}

input[class="BotonPeq"]:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
	background: -moz-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
	background: -ms-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
	background: -o-linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
	background: linear-gradient(white 0%, white 5%, #60c957 15%, #60c957 90%, white 100%) !important;
}

.Boton3 {
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;

	height:1rem !important;
	border: 0px outset #CCC;
	width:auto;
	padding: 0.3rem 1.5rem;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.6rem;
	font-weight:bold;
	font-style:italic;
	color: #cccccc !important;
	text-transform:uppercase;
	letter-spacing: 0.2rem;
	text-decoration: none;
	cursor: hand;	
	
	-ms-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

/*	-ms-margin: 0.5rem 1rem;
	-webkit-margin: 0.5rem 1rem;
	-moz-margin: 0.5rem 1rem;
	-o-margin: 0.5rem 1rem;
	margin:0.5rem 1rem;*/
	
	 border: #aaaaaa 0.1rem solid !important;
	 
	background: -webkit-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #293364 15%, #293364 90%, white 100%);
	background: linear-gradient(var(--color0) 0%, var(--color0) 5%, var(--color3) 15%, var(--color3) 90%, var(--color0) 100%);
	background: linear-gradient(#ccc 0%, #ccc 5%, #293364 15%, #293364 90%, #ccc 100%);
}

.Boton3:hover {
	background: -webkit-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -moz-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -ms-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: -o-linear-gradient(white 0%, white 5%, #253898 15%, #253898 90%, white 100%);
	background: linear-gradient(#ccc 0%, #ccc 5%, #253898 15%, #253898 90%, #ccc 100%) !important /*DEI*/;
}

/*ESTILOS PARA ELEMENTOS DEL CALENDARIO*/
.ui-datepicker-trigger { 
	margin-top:0.1rem;
	margin-left: 0.5rem;
	margin-bottom:0px;
	position:absolute;
	z-index:1000;
}

.ui-datepicker select {
	height:2.6rem !important;
	padding:0 !important;
}

.DivLogoApp {
	display:block;
	margin:0 auto;
	width:25%;
	padding:10px;
	border:1px white solid;
}

.ResaltarRow {background-color:yellow;}
.ResaltarCol {background-color:lime;}