.caja1 {
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: rgba(30,210,40,0.4);
padding: 15px;
text-align: center;
font-size: 22px;
border-radius: 15px;
box-shadow: 2px 2px 1px black;
margin-bottom:15px;
margin-top:15px;
}

.caja2 {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgba(230,210,40,0.4);
padding: 15px;
text-align: center;
font-size: 22px;
border-radius: 15px;
box-shadow: 2px 2px 1px black;
margin-bottom:15px;
margin-top:15px;
}

.lista1 li {
  list-style: none;
  background-image: url("listas/plantilla.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 35px;
  padding-left: 45px;
  margin-left:-20px;
  padding-top:5px;
  
  }
  
.lista2 li {
  list-style: none;
  background-image: url("listas/contenido.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 35px;
  padding-left: 45px;
  margin-left:-20px;
  padding-top:5px;
  
  }
  
.lista3 li {
  list-style: none;
  background-image: url("listas/diapositivas.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 35px;
  padding-left: 45px;
  margin-left:-20px;
  padding-top:5px;
  
  }  
 
.lista4 li {
  list-style: none;
  background-image: url("listas/chatbot.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 35px;
  padding-left: 45px;
  margin-left:-20px;
  padding-top:5px;
  
  }

.lista5 li {
  list-style: none;
  background-image: url("listas/www.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 35px;
  padding-left: 45px;
  margin-left:-20px;
  padding-top:5px;
  
  }

.lista6 li {
  list-style: none;
  background-image: url("listas/websim.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 23px;
  padding-left: 35px;
  margin-left:-20px;
  padding-top:5px;
  
  } 

.lista7 li {
  list-style: none;
  background-image: url("listas/infografia.png");
  background-repeat: no-repeat;
  background-position: left 10px;
  background-size: 30px;
  padding-left: 40px;
  margin-left:-20px;
  padding-top:5px;
  
  }   
 
.sin_boton {
border: 0px; 
background-color: rgba(1,1,1,0);
}

.sin_boton .btn_expand {
border: 0px solid red;
background-color: rgba(1,1,1,0);
opacity: 0.1;
}

.sin_boton2 {
border: 0px; 
background-color: rgba(1,1,1,0);
}

.sin_boton2 .btn_expand {
border: 0px solid red;
background-color: rgba(1,1,1,0);
opacity: 0;
}

/* Incorporación de imagen flotando a la izquierda o derecha, se diseñó para ocupar un ancho del 50%, con ancho de imagen del 100% (para valores menores, hay que poner un estilo que modifique las márgenes */
.flota_i {
	float: left;
	margin: 0px 20px 0px 5px;
	padding: 5px;
	border: 1px solid rgba(1, 1, 1, 0);
	width: 50%;
}

.flota_i figcaption {
	text-align: center;
	margin-bottom: 0px;
	color: var(--text-color);
}

.flota_d {
	float: right;
	margin: 0px -10px 0px 15px;
	padding: 5px;
	border: 1px solid rgba(1, 1, 1, 0);
	width: 50%;
	margin-top: 0px;
	}

.flota_d figcaption {
	text-align: center;
	color: var(--text-color);
	margin-bottom: 0;
}

.caja5 {
  background: rgba(1,1,1,0);
}
   
.caja5 h5 {
  padding: .3rem .5rem;
  margin: 0;
  color: white;
  text-align: center;
  font-size: 28px;
  margin-left:auto; 
  margin-right: auto; 
  border-radius: 5px; 
  
}

.caja5 .content {
  text-align: center; 
  padding: 5px; 
  padding-left: 7px; 
  background-color: rgba(20,219,39,0.5); 
  border-radius: 15px; 
   
}

body.dark .caja5 .content {
	color: white;
}

.caja5 figcaption {
	margin-top: -15px;
	margin-bottom: -10px;
	
}

.caja5 .modo1 {
  background: rgb(31,120,31);
  text-shadow: 2px 2px 3px black;
}

.caja5 .modo2 {
  background: rgba(120,50,250,0.9);
  text-shadow: 2px 2px 3px  black;
  background-repeat: no-repeat;
  
}

.caja5 .modo3 {
  background: #8DAE63;
  text-shadow: 2px 2px 3px  black;
  background-repeat: no-repeat;
  
}

.caja5 .modo4 {
  background: #E65100;
  text-shadow: 2px 2px 3px black;
  background-repeat: no-repeat;
}

.caja5 .modo5 {
  background: #D81B60;
  text-shadow: 2px 2px 3px black;
  
}

.caja5 .modo6 {
  background: #5E35B1;
  text-shadow: 2px 2px 3px black;
  background-repeat: no-repeat;
}

.caja5 .modo7 {
  background: #301400;
  text-shadow: 2px 2px 3px black;
  background-repeat: no-repeat;
}

.destaca {
  font-size: 20px;
  width: 90%;
  color: var(--h1-color);
  text-shadow: 1px 1px rgba(92, 90, 90, 0.15);
  margin-left: auto;
  margin-right: auto;
}


table, th, td {
	border: 2px solid black;
	border-collapse: collapse;
	text-align: left;
	font-size:18px;
}
th, td {
	padding: 2px 3px 2px 3px;
	vertical-align: middle;
}

table {
	width:100%;
}
th {
	background: rgb(79,112,197);
	color: white;
	text-align: center;
	vertical-align:middle;
	font-weight: bold;
}

tr:hover {
            background-color: #c5f5f5;
            transition: background-color 0.3s ease;
}

table img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }
        table img:hover {
            transform: scale(1.2);
        }
		
		
tr:nth-child(even) {background-color: rgba(20,120,230,0.1);}

.contendor10 {
            position: relative;
            cursor: pointer;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9; /* Color de fondo inicial */
            transition: background-color 0.5s ease; /* Transición suave para el fondo */
        }

        .respuesta {
            visibility: hidden;
            height: 0;
            margin-top: 10px;
            font-size: 2em; /* Doble tamaño de fuente */
            color: #006400; /* Color verde oscuro */
            opacity: 0;
            transition: visibility 0s 0.5s, height 0.5s ease, opacity 0.5s ease; /* Transición suave para la visibilidad, altura y opacidad */
        }

        .contendor10:hover {
            background-color: #e0f7fa; /* Nuevo color de fondo al pasar el cursor */
        }

        .contendor10:hover .respuesta {
            visibility: visible;
            height: auto;
            opacity: 1;
            transition-delay: 0s, 0s, 0.5s; /* Sin retardo para visibilidad y altura, retardo para opacidad */
        }
		
	#tool_colores {
	width: 45px;
	height: 45px;
	background-image: url("iconos/paleta_claro.png");
	}
	body.dark #tool_colores {
	background-image: url("iconos/paleta_oscuro.png");
	}
	
	#tool_websim {
	width: 96px;
	height: 54px;
	background-image: url("iconos/websim.png");
	}
	body.dark #tool_websim {
	background-image: url("iconos/websim.png");
	}
	
	#tool_flux {
	width: 96px;
	height: 54px;
	background-image: url("iconos/flux2.png");
	}
	body.dark #tool_flux {
	background-image: url("iconos/flux.png");
	}
	
	#tool_scispace {
	width: 54px;
	height: 54px;
	background-image: url("iconos/scispace-logo.svg");
	}
	
	#tool_chatgpt {
	width: 54px;
	height: 54px;
	background-image: url("iconos/chatgpt.png");
	}
	
	#tool_escribe {
	width: 54px;
	height: 54px;
	background-image: url("iconos/escribe.png");
	}