@charset "utf-8";
/* CSS Document */

	 
	 
	
	body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
	
	/


    
		 /* Estilos del contenido */
  /*------------------------------ slide------------*/	  
		
	  .contenedor {
        margin: 20px auto; /* Centrar los contenedores horizontalmente */
        padding: 2px; /* Espaciado interno de los contenedores */
       /* border: 0px solid #ccc;  Borde de los contenedores */
        background-color: #fff; /* Color de fondo de los contenedores */
        max-width: 1170px; /* Ancho máximo del contenedor */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
	 
	 .contenedor_wrapper {
        margin: 20px auto; /* Centrar los contenedores horizontalmente */
        padding: 2px; /* Espaciado interno de los contenedores */
        border: 0px solid #ccc; /* Borde de los contenedores */
       /* background-color: #f0f0f0; /* Color de fondo de los contenedores */
        max-width: 1170px; /* Ancho máximo del contenedor */
       
        justify-content: space-between;
    }

		
		
	/*-------------------------------------------------*/



hr {
	
	width: auto;
	
}




		
  .caja {
      background: #fafaf9;
	  border-color: #d1d0d0;
   border-width: 1px;
   border-style: solid;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(33% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .caja {
        flex: 1 1 300px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .caja {
        flex: 1 1 300px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .caja {
        flex: 1 1 300px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}










.cajita {
	border-color: #004f88;
   border-width: 2px;
   border-style: solid;
    color: black;
    padding: 5px;
    margin: 5px;
	flex: 1 1 100px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	cursor: pointer;
	transition: background-color 1s ease, color 1s ease; /* Animación lenta */
	
	
    }


.cajita:hover {
   border-color: #51a0f9;
   border-width: 2px;
   border-style: solid;
	color: white;
      
    }
/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .cajita {
        flex: 1 1 100px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .cajita {
        flex: 1 1 100px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .cajita {
        flex: 1 1 100px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}


.cajita1 {
	border-color: #0f172a;
   border-width: 1px;
   border-style: solid;
    color: black;
    padding: 2px;
    margin: 5px;
	flex: 1 1 260px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	cursor: pointer;
	transition: background-color 1s ease, color 1s ease; /* Animación lenta */
	
	
    }


.cajita1:hover {
     /* background-color: #51a0f9;*/
 background-color: #1cc2e7;
  border-color: #1cc2e7;
  border-width: 1px;
  border-style: solid;
  color: white;
  transition: opacity 0.5s ease; /* Transición suave */
/*	transform: scale(1.03);  Agranda la caja al 120% de su tamaño original */
	
 }
    
    
    
    /* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .cajita1 {
        flex: 1 1 260px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .cajita1 {
        flex: 1 1 260px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .cajita {
        flex: 1 1 260px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}







.caja1 {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(98% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

.caja1a {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(57% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


 

.caja3 {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(50% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

.cajaDGI {
     
    background-color: #0d3e4c;
    color: white;
    padding: 20px;
    margin: 5px;
    flex: 1 1 200px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	
    }


/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .cajaDGI {
        flex: 1 1 150px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .cajaDGI {
        flex: 1 1 100px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .cajaDGI {
        flex: 1 1 80px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}


.caja2 {
    background-color: #d9f5fd;
    color: black;
    padding: 20px;
    margin: 5px;
    flex: 1 1 250px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	
    }

.caja2:hover {
            background-color: #0d3e4c;
            color: #fdd180;
	 /*cursor: pointer;*/
        }






/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .caja2 {
        flex: 1 1 300px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .caja2 {
        flex: 1 1 300px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .caja2 {
        flex: 1 1 300px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}


.caja2b {
    background-color: #c2e6f0;
    color: black;
    padding: 20px;
    margin: 5px;
    flex: 1 1 250px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	
    }


/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .caja2b {
        flex: 1 1 300px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .caja2b {
        flex: 1 1 300px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .caja2b {
        flex: 1 1 300px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}






.caja2a {
    background-color: #0f172a;
    
    color: black;
	width: 300px;
    padding: 2px;
    margin: 2px;
    flex: 1 1 250px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
    transition: background-color 1s ease, color 1s ease; /* Animación lenta */

	
    }
    
    
    
  .caja2a:hover {
    background-color: #ffffff;
    border-width: 1px;
  	border-style: solid;
    color: black;
   	width: 300px;
    padding: 2px;
    margin: 2px;
    flex: 1 1 250px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    border-radius: 15px;
    text-align: center;
	transition: opacity 0.5s ease; /* Transición suave */
	transition: background-color 1s ease, color 1s ease; /* Animación lenta */
    cursor:pointer;


    }

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .caja2a {
        flex: 1 1 300px; /* Ancho base mínimo de 150px en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .caja2a {
        flex: 1 1 300px; /* Ancho base mínimo de 100px en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .caja2a {
        flex: 1 1 300px; /* Ancho base mínimo de 80px en pantallas muy pequeñas */
    }
}




.cajaDGIG {
      /*background-color: #fcf8ee;*/
	
	background-color: #fafaf9;
	
      color: black;
      margin: 0px;
      padding: 20px;
      border-radius: 15px;
      width: calc(100%); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

.cajaDJI {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(20% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }




img.izquierda {
  float: left;
 margin: 0px 15px 5px 0px;
	
}



    .row {
      display: flex;
      flex-wrap: wrap;
    }
    @media only screen and (max-width: 768px) {
      .caja {
        width: 240px; 
      }
    }
    @media only screen and (max-width: 480px) {
      .caja {
		  
		  width: 240px; 
       
      }
    }
		
	
		




.cajabop {
      background-color: #d9f5fd;
      color: black;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
      width: calc(43% - 20px); /* Esto asegura que haya espacio entre las cajas */
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }


   
    @media only screen and (max-width: 768px) {
      
	.caja3 {
        width: calc(100% - 20px);
      }	
		
		 }
		
		
    }
/**********************Estadisticas************************/



.chart {
    width: 300px;
    margin: 20px auto;
}

.bar {
    height: 30px;
    background-color: #3498db;
    margin-bottom: 5px;
    position: relative;
}

.bar::before {
    content: attr(data-value);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}

.bar:nth-child(1) {
    width: 80%;
}

.bar:nth-child(2) {
    width: 60%;
}

.bar:nth-child(3) {
    width: 90%;
}

.bar:nth-child(4) {
    width: 70%;
}

.bar:nth-child(5) {
    width: 50%;
}







/*------------------REDES --------------------*/


.icon-red {
             color: #ffffff;
	padding-left: 85px;
        }


.icon-red:hover {
             color: #fdd180;
	padding-left: 85px;
	cursor: pointer;
        }