body 
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}


.ContenedorBody
{
	width: 100%;
	grid-area: ContenedorBody;
	padding: 20px 10px 10px 20px;
}


.ContenedorMenu
{
	width: 100%;
	/*display: flex;*/
	/*flex-direction: row;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	grid-area: ContenedorMenu;
	background:rgb(255, 255, 255);
}

.ContenedorPublicidadDer
{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	grid-area: ContenedorPublicidadDer;
	background:rgb(255, 255, 255);
}


.ContenedorPublicidadSup
{
	background:rgb(255, 255, 255);
	height: 20vh;
	grid-area: ContenedorPublicidadSup;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.ContenedorPublicidadInf
{
	background:rgb(255, 255, 255);
	height: 20vh;
	grid-area: ContenedorPublicidadInf;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.ContenedorFooter
{
	width:99vw;
	background:rgb(220, 237, 252);
	/*max-height: 90px;*/
	grid-area: ContenedorFooter;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

}

.ContenedorHeader
{
	/* background:rgb(229, 229, 255); */
	max-height: 200px;
    width:100%;
	grid-area: ContenedorHeader;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.SubHeder
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items:center;
}



.ContenedorAccesoDirecto
{
	/*background:rgba(104, 59, 124, 0.2);*/
	background:rgb(220, 237, 252);
	width: 99vw;
	height: 31px;
	grid-area: ContenedorAccesoDirecto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}


.FormatoArchivo
{
	/*background:rgba(104, 59, 124, 0.2);*/
	background:rgb(255, 255, 255);
	height: 31px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin: 10px;
}


/**************************************  CONTENEDORES  *********************************************/
.Contenedor
{
	width: 100%;
	margin: 0px auto;
	display: grid;
	align-content: flex-start;

	grid-template-areas: "ContenedorHeader ContenedorHeader ContenedorHeader ContenedorHeader"
						 "ContenedorAccesoDirecto ContenedorAccesoDirecto ContenedorAccesoDirecto ContenedorAccesoDirecto"
                         "ContenedorPublicidadSup ContenedorPublicidadSup ContenedorPublicidadSup ContenedorPublicidadSup"
                         "ContenedorMenu ContenedorBody ContenedorBody ContenedorPublicidadDer"
                         "ContenedorPublicidadInf ContenedorPublicidadInf ContenedorPublicidadInf ContenedorPublicidadInf"
						 "ContenedorFooter ContenedorFooter ContenedorFooter ContenedorFooter";

}

.divFlex
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
}




.Brillar:hover
{
	filter: saturate(180%);
	/*filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));*/
}

.Mano
{
	cursor:pointer;
	text-decoration:none;
}

.SinDecorar
{
	cursor: pointer;
	color:#031a36;
	text-decoration:none;
}


.EtiquetaTipo
{
	Font: 15px Tahoma;
	color:rgb(71, 122, 105);
	height: 20px;
	font-weight: bold;
	text-decoration:none;
}

.EtiquetaNombre
{
	Font: 15px Tahoma;
	color:#2764AE;
	height: 40px;
	text-decoration:none;
}


.caja-redonda 
{
  border-radius: 15px; 
  border: 2px solid #ccc;
  padding: 5px;
  width: 400px;
}

.boton-redondo 
{
  border-radius: 15px; 
  border: 2px solid #ccc;
  padding: 5px;
  width: 100px;
  cursor: pointer;
}

.contenedor 
{
	position: absolute;
	top: 130px;
    width: 100%;
    border: 0px;
    padding: 10px;
	text-align: center;
}


.EncabezadoMenu
{
	color:rgb(255, 255, 255);
	background:#3a559fff;
	text-align:center;
	/*border-radius: 10px 10px 10px 10px;*/
}

.Subfamilia
{
	font-family: "Arial";
	color:#5a0505;
	text-align:center;
	cursor: pointer;
	text-decoration:none;
	font-weight: bold; /* Grosor de la fuente */
}

.Clase
{
	font-family: "Arial";
	color:#22436bf3;
	text-align:center;
	cursor: pointer;
	text-decoration:none;
	padding-left: 10px;
}


.FlexColumna
{
  display: flex; /* Activa la caja flexible */
  flex-direction: column;
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.Flex
{
  display: flex; /* Activa la caja flexible */
  flex-direction: row;
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.FlexFila
{
  display: flex; /* Activa la caja flexible */
  flex-direction: row;
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.FlexEspaciado
{
  width: 100vw;
  display: flex; /* Activa la caja flexible */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.circulo-texto 
{
  width: 30px; /* Ancho del círculo */
  height: 30px; /* Alto del círculo (debe ser igual al ancho) */
  background-color: #3a559fff; /* Color de fondo */
  color: white; /* Color del texto */
  border-radius: 50%; /* Convierte el cuadrado en un círculo */
  font-family: Arial, sans-serif; /* Tipo de letra */
  font-weight: bold; /* Grosor de la fuente */
  display: flex; /* Activa la caja flexible */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.FullScreen
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	transition: opacity 0.5s ease;
	display: flex;
  	justify-content: center; 
  	align-items: center;     
	display: none;
}

.VentanaModal
{
  font-family: Arial, Helvetica, sans-serif;
  width: 600px;
  height: 400px;
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 20px;   
}

.TextoJustificado
{
	text-align: justify;
	line-height: 1.3;
	
}


.ImagenAncha
{
	width: 10vw;
	object-fit: contain;
}

.ImagenAlta
{
	height: 20vh;
	object-fit: contain;
}

.ImagenAnchaDescarga
{
	width: 25vw;
	max-height: 30vh;
	object-fit: contain;
}

.ImagenAltaDescarga
{
	height: 38vh;
	max-width: 20vw;
	object-fit: contain;
}

.ImagenCuadrada
{
	height: 18vh;
	width: 8vw;
	object-fit: contain;
}

.ImagenCuadradaDescarga
{
	height: 20vh;
	width: 20vw;
	object-fit: contain;
}


.FondoAzul
{
	border: 1px solid rgba(137, 212, 255, 0.5);
	width: 15vw;
	height: 35vh;
	border-radius: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);	
	background: #3a559fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}


.FondoBlanco
{
	background:rgb(255, 255, 255);
	width: 14vw;
	height: 28vh;
	padding: 10px;
	border-radius: 10px 10px 10px 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}


.FondoAzulDescarga
{
	position: relative;
	border: 1px solid rgba(137, 212, 255, 0.5);
	width: 30vw;
	height: 55vh;
	border-radius: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);	
	background: #3a559fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}


.FondoBlancoDescarga
{
	background:rgb(255, 255, 255);
	width: 28vw;
	height: 50vh;
	padding: 10px;
	border-radius: 10px 10px 10px 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}