@charset "utf-8";

@font-face{
	font-family:OpenSans-Light;
	src:url(../fonts/OpenSans-Light.ttf);
}

@font-face{
	font-family:OpenSans-Regular;
	src:url(../fonts/OpenSans-Regular.ttf);
}

@font-face{
	font-family:Roboto-Regular;
	src:url(../fonts/Roboto-Regular.ttf);
}

@font-face{
	font-family:Droid_Sans_Mono_Dotted_for_Powerline;
	src:url(../fonts/Droid_Sans_Mono_Dotted_for_Powerline.ttf);
}

@font-face{
	font-family:Rubik-Regular;
	src:url(../fonts/Rubik-Regular.ttf);
}

@font-face{
	font-family:Sansation_Regular;
	src:url(../fonts/Sansation_Regular.ttf);
}

@font-face{
	font-family:Gotham_Regular;
	src:url(../fonts/Gotham_Regular.otf);
}

/*========================================================================================================================*/
/*========================================================================================================================*/

body {
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}

.tabla-fondo {
    background: 
        linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), 
        url('../images/lotificacion.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tabla-transparente tr td:first-child {
    background-color: rgba(255, 255, 255, 0.5);
}

.tableBorderUpColor1{
	border-top: 5px solid #FFC107;
}

.tableBorderDownColor1{
	border-bottom: 3px solid #FFC107;
}

tr{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
}

td {
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
}

form {
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	margin: 0px;
	padding: 10px;
	height: auto;
	width: 100%;
	border: thin none #000;
	box-sizing:border-box;
	display:block;
}

label{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	box-sizing:border-box;
	display:block;
}

input, textarea, select {
	font-family: OpenSans-Regular;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	background-color: #FFFFFF;
	padding: 8px;
	height: auto;
	width: 90%;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin solid #999;
	box-sizing: border-box;
	display: block;
	border-radius: 5px;
}

.button1{
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #F7931E;
	text-align: center;
	height: auto;
	width: auto;
	padding: 15px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	border: thin solid #F7931E;
	cursor: pointer;
	box-sizing: border-box;
	display:inline-block;
	border-radius: 5px;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}

.button1:hover{
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
	background-color: #FFD957;
	color: #2B2B2B;
	border: thin solid #FFD957;
}

.button2{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #07264C;
	text-align: center;
	height: auto;
	width: auto;
	padding: 10px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	border: thin solid #07264C;
	cursor: pointer;
	box-sizing: border-box;
	display:inline-block;
	border-radius: 5px;
}

h1{
	font-family: OpenSans-Regular;
	font-size: 22px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h2{
	font-family: OpenSans-Light;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h3{
	font-family: OpenSans-Regular;
	font-size: 35px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h4{
	font-family: OpenSans-Light;
	font-size: 25px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #161616;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h5{
	font-family:  OpenSans-Regular;
	font-size: 40px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h6{
	font-family: OpenSans-Regular;
	font-size: 35px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

h7{
	font-family: OpenSans-Light;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-weight:bold;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

h8{
	font-family: OpenSans-Regular;
	font-size: 25px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #161616;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

h9{
	font-family: Gotham_Regular;
	font-size: 35px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFC107;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	text-shadow: 1px 1px 5px #1B1B1B;
	border-bottom: 3px solid #000000;
}

h10{
	font-family: Gotham_Regular;
	font-size: 35px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #161616;
	text-decoration: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border-bottom: 3px solid #000000;
}

hr {
  height: 1px; /* Define el grosor del <hr> */
  width: 90%; /* Define el ancho */
  border: none; /* Elimina cualquier estilo de borde predeterminado */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  margin: 20px auto; /* Centra el <hr> */
}

a:link {
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}
a:visited {
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}
a:hover {
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFC107;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}
a:active {
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}

.span1{
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #2E2E2E;
	text-decoration: none;	
}

.span2{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #2E2E2E;
	text-decoration: none;	
}

.span3{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;	
}

.span3:hover{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFC107;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in 0ms;
	-moz-transition: all 300ms ease-in 0ms;
	-ms-transition: all 300ms ease-in 0ms;
	-o-transition: all 300ms ease-in 0ms;
	transition: all 300ms ease-in 0ms;
}

.spanTitulo{
	font-family: Rubik-Regular;
	font-size: 22px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
}

.span4{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	/*text-align:justify;*/
}

ul {
  font-family: OpenSans-Regular;
  font-size: 15px;
  list-style: none; /* quitamos el disc por defecto */
  padding-left: 20px; /* dejamos espacio para el icono */
}

li {
  font-family: OpenSans-Regular;
  font-size: 15px;
  position: relative;
  margin-bottom: 8px; /* separa un poco las líneas */
}

li::before {
  content: "";
  position: absolute;
  left: -20px; /* posición a la izquierda del texto */
  top: 4px;    /* ajusta verticalmente según el tamaño */
  width: 20px;
  height: 20px;
  background-image: url("../images/play_15px.png");
  background-size: contain;
  background-repeat: no-repeat;
}


#messageGreen{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	text-decoration: none;
	background-color: #D4EDDA;
	padding: 10px;
	height: auto;
	width: 100%;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin none #D4EDDA;
	box-sizing:border-box;
	border-radius:5px;
}

#messageGreen #buttonGreen{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
	background-color: #28A745;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
	height: auto;
	width: auto;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin solid #28A745;
	cursor: pointer;
	box-sizing: border-box;
	display: block;
	border-radius: 5px;
}

#messageRed{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #900;
	text-decoration: none;
	background-color: #F8D7DA;
	padding: 10px;
	height: auto;
	width: 100%;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin none #F8D7DA;
	box-sizing:border-box;
	border-radius:5px;
}

#messageRed #buttonRed{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
	background-color: #DC3545;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
	height: auto;
	width: auto;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin solid #DC3545;
	cursor: pointer;
	box-sizing: border-box;
	display: block;
	border-radius: 5px;
}

#messageYellow{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #856404;
	text-decoration: none;
	background-color: #FFF3CD;
	padding: 10px;
	height: auto;
	width: 100%;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 1px;
	margin-left: 0px;
	border: thin none #FFF3CD;
	box-sizing:border-box;
	border-radius:5px;
}

#messageYellow #buttonYellow{
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	background-color: #FFC107;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
	height: auto;
	width: auto;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: thin solid #FFC107;
	cursor: pointer;
	box-sizing: border-box;
	display: block;
	border-radius: 5px;
}

.circle-bg {
  width: 120px;           /* un poco más grande que la imagen */
  height: 120px;
  background-color: #FFC107; /* el color que quieras */
  border-radius: 50%;    /* hace el fondo circular */
  display: flex;
  align-items: center;
  justify-content: center;
}

.imageBorderRound {
    border-radius: 50%; 
    overflow: hidden;   /* Mantiene el recorte circular */
    object-fit: cover;  /* Asegura que la imagen se ajuste bien al círculo */
}

.imageBorderRound2 {
    border-radius: 10px; 
    overflow: hidden;   /* Mantiene el recorte circular */
    object-fit: cover;  /* Asegura que la imagen se ajuste bien al círculo */
}

.imageShadow {
    box-shadow: 1px 1px 10px #000; /* Ajusta estos valores para obtener el efecto deseado */
}

.imageZoom {
    transition: transform 0.3s ease; /* Controla la velocidad de la animación */
}

.imageZoom:hover {
    transform: scale(1.03); /* Ajusta el valor para aumentar o reducir el zoom */
}

.header-container {
    position: relative; /* contenedor relativo para que el logo absoluto se base en él */
}

.logo-container {
    position: absolute;  
    top: -60px;          
    left: 23%;           
    transform: translateX(-50%);
    min-width: 220px;
    min-height: 270px;
    background-color: #000000;
    display: flex;       
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10;         

    clip-path: polygon(
        0 0,   
        100% 0, 
        100% 85%, 
        50% 100%, 
        0 85%     
    );

    outline: 4px solid #000000; /* borde simulado */
    outline-offset: -4px;       /* lo metes dentro del recorte */
}

/* Estilo para hacer la imagen de fondo responsivas */
.responsive-banner-Index {
  width: 100%;
  height: 750px;
  background-image: url('../images/bannerIndex.png');
  background-size: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.responsive-banner-acercaDe {
  width: 100%;
  height: 250px;
  background-image: url('../images/banAcerca.png');
  background-size: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.responsive-banner-acercaDe2 {
  width: 100%;
  height: 160px;
  background-image: url('../images/grey.png');
  background-size: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.responsive-banner-scrollTable {
  width: 100%;
  height: 100px;
  background-image: url('../images/scrollTable.png');
  background-size: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.responsive-banner-Footer {
  width: 100%;
  height: 300px;
  background-image: url('../images/footer.png');
  background-size: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
} 
/* Estilo para hacer la imagen de fondo responsivas */

/*PARA FIJAR LA TABLA AL REALIZAR SCROLL CON SOMBRA*/
.fixed-table-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000; /* Para asegurar que esté por encima de otros elementos */
	/*background-color: #28A745; Para que el fondo sea del mismo color */
	background: linear-gradient(140deg, #28A745 30%, #022147 50%); /* Degradado de color */
	transition: box-shadow 0.3s ease-in-out; /* Transición suave para la sombra */
	filter: blur(0px); /* Asegura que no haya un blur aplicado */
	backdrop-filter: none;/*blur(5px); Asegura que no haya blur aplicado a un fondo detrás */
}
		
.fixed-table-container.shadow {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra cuando se hace scroll */
}
/*PARA FIJAR LA TABLA AL REALIZAR SCROLL CON SOMBRA*/