body 		
{ background-color: #ffffff; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}


table
{ border: 0px solid #ddeeff; border-radius: 10px; border-style: solid; }

td
{ border: 0px; border-radius: 10px; }


#Barra_Tabla    { background-color: ffffff; margin: 0px 0px 0px 0px; border-style: solid; border: 10px;}

#Barra_Azul_Cla { background-color: deebf7; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #1a2e52; text-align: center; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Azul_Osc	{ background-color: 1a2e52; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #deebf7; text-align: center; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Not_Tit	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Not	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_0	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 12pt; line-height: 20pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_1	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 12pt; line-height: 20pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_2	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_3	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_4	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Tabla_5	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Blan_Neg	{ background-color: ffffff; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Violeta_Cla { background-color: #E3D7F4; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #fffffd; text-align: center; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Violeta_Bla { background-color: #EDE1FF; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #2d4575; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Violeta_Osc { background-color: #D1C6E0; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #2d4575; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}

#Barra_Azul_Sua { background-color: #CAE2E8; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 13pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Gris_Sua { background-color: #F2F2F2; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 12pt; line-height: 18pt; color: #203464; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Barra_Gris_Azu { background-color: #e5eef0; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #2d4575; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Seleccion { background-color: #AFC4C9; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 12pt; line-height: 18pt; color: #fffffd; text-align: center; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}

#Lista_Color_1 { background-color: f0f0f0; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #808080; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}
#Lista_Color_2 { background-color: fcfcfc; font-family: Comfortaa,Verdana,Arial; font-style: normal; font-weight: normal; font-size: 11pt; line-height: 18pt; color: #808080; text-align: justify; margin: 0px 0px 0px 0px; border-style: solid; border: 0px;}

a.ex0:link { text-decoration: none; color: #000080 }
a.ex0:visited { text-decoration: none; color: #000080 }
a.ex0:active { text-decoration: none; color: #000080 }
a.ex0:hover { text-decoration: none; color: #000080; background: #ffffff; font-weight: bold; font-family: Comfortaa,Verdana,Arial; }

a.ex1:link { text-decoration: none; color: #2d4575}
a.ex1:visited { text-decoration: none; color: #2d4575 }
a.ex1:active { text-decoration: none; color: #2d4575 }
a.ex1:hover { text-decoration: none; color: #2d4575; background: #deebf7; font-weight: normal; font-family: Comfortaa,Verdana,Arial; }

a.ex2:link { text-decoration: none; color: #203464 }
a.ex2:visited { text-decoration: none; color: #203464 }
a.ex2:active { text-decoration: none; color: #203464 }
a.ex2:hover { text-decoration: none; color: #000080; background: #deebf7; font-weight: normal; font-family: Comfortaa,Verdana,Arial; }

a.ex3:link { text-decoration: none; color: #000080 }
a.ex3:visited { text-decoration: none; color: #2d4575 }
a.ex3:active { text-decoration: none; color: #ff0000 }
a.ex3:hover { text-decoration: none; color: #ff0000; background: #dedede; font-weight: normal; font-family: Comfortaa,Verdana,Arial; }

a.ex4:link { text-decoration: none; color: #ffff00 }
a.ex4:visited { text-decoration: none; color: #ffff00 }
a.ex4:active { text-decoration: none; color: #ffff00 }
a.ex4:hover { text-decoration: none; color: #000080; background: #ffff00; font-weight: normal; font-family: Comfortaa,Verdana,Arial; }


object.svg-img {
   width: 100%; 
   height: auto; /* Mantener la proporción de aspecto */
}

img.png-img {
   width: 100%; 
   height: auto; /* Mantener la proporción de aspecto */
}

.ds_box {
	background-color: #FFF;
	border: 1px solid #000;
	position: absolute;
	z-index: 32767;
}

.ds_tbl {
	background-color: #FFF;
}

.ds_head {
	background-color: #333;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}

.ds_cell {
	background-color: #EEE;
	color: #000;
	font-size: 13px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}

.ds_cell:hover {
	background-color: #F3F3F3;
} /* This hover code won't work for IE */

.cuadro_subtema
{
  padding: 25px 0px 0px 0px;
  background-color:#cadbee;
  border:1px dotted #7bb0ec;
  box-shadow:0 0 5px #7bb0ec;
  width:190px;
  height:150px;
  border-radius:10px;
  text-align: center;
}

.cuadro_becas
{
  padding: 5px 0px 0px 0px;
  background-color:#7bb0ec;
  border:1px dotted #000080;
  box-shadow:5px 5px 5px #7bb0ec;
  width:300px;
  height:20px;
  border-radius:12px;
  text-align: center;
}


#barra_home
{
  opacity: 0.60;

  -webkit-opacity: 0.60;
  -moz-opacity: 0.60;
  -o-opacity: 0.60;
  -ms-opacity:0.60;

  transition:opacity 0.15s ease-out 0.15s;
  -webkit-transition:opacity 0.15s ease-out 0.15s;
  -moz-transition:opacity 0.15s ease-out 0.15s;
  -o-transition:opacity 0.15s ease-out 0.15s;
  -ms-transition:opacity 0.15s ease-out 0.15s;

  border-radius: 35%; /* Borde redondeado */
  box-shadow: 10px 10px 10px #cdcdcd; /* Sombra */
  padding:0;
  border:0;
}

#barra_home:hover
{

  opacity: 1;	

  -webkit-opacity: 1;
  -moz-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;

  box-shadow: 0;
  border-radius: 0;

  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  cursor:pointer;
}



#Lap
{
  border-radius: 50% 0; /* Borde redondeado */
  box-shadow: 0px 0px 15px #000; /* Sombra */
  padding:15px; /* Espacio entre la imagen y el borde */
  background:#FFF; /* Color de fondo que se ve entre el espacio */
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
}

#LAP:hover
{
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.card-container 
{
  cursor: pointer;
  height: 64px;
  width: 750px;
  perspective: 600;
  position: relative;

}

.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}

.card:hover 
{
  transform: rotateY(180deg);
}

.card .side 
{
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.card .back 
{
  background: #ffffff;
  transform: rotateY(180deg);
}

 
 
 
    /* Estilos del carrusel */
    .carousel {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .carousel-images {
        display: flex;
        transition: transform 0.5s ease;
        width: 100%; 
        flex-shrink: 0;
    }

    .carousel-images a {
        display: block;
        width: 20%; 
        height: auto;
        flex-shrink: 0;
    }

    .carousel-images img {
        width: 100%; 
        height: auto;
        display: block;
        flex-shrink: 0;
    }

    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 1;
    }

    .arrow-left {
        left: 10px;
    }

    .arrow-right {
        right: 10px;
    }