.caja0 {
  background-color: Lavender;
  width: 300px;
  border: 5px solid DarkViolet;
  padding: 30px;
} 


.caja1 {
	font-size: 22px;
	text-align: center;
	padding: 25px;
	margin: 20px;
	box-shadow: 6px 6px 10px #c2c2c2; 
	width: 70%;
	background-color: hsl(250 10% 90%);
	margin-left: auto;
	margin-right: auto;
}

.flota {
	float: right;
  
  margin: -12px 0 -18px -15px;
  padding: 0px;
  border: 1px solid rgba(1,1,1,0);
  text-align: center;
  width: 60%;
}

.flota2 {
	float: left;
  
  margin: -12px -15px -10px -15px;
  padding: 5px;
  border: 1px solid rgba(1,1,1,0);
  text-align: center;
  width: 100%;
}

/* 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 10px -15px -5px;
	padding: 5px;
	border: 1px solid rgba(1,1,1,0);
	width: 50%;
	margin-top:-10px;
}

.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:10px;
	
}

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

body.dark .caja1 {
	background-color: hsl(250 10% 10%);
	color: #cccccc;
}

.caja2 {
	width: 60%;
	background-color: Cornsilk;
    box-shadow: 6px 6px 10px #000;
    border-radius: 20px;
    padding: 25px;
	padding-top:15px;
	padding-bottom:10px;
	font-size: 22px;
	color:black;
    margin-left: auto;
    margin-right: auto;
}

body.dark .caja2 {
	background-color: rgba(50,250,250,0.75);
	color: white;
}

.caja3 {
	width: 500px;
	height: 330px;
	background-image: url("../images/fondo1.jpg");
	background-repeat: no-repeat;
    box-shadow: 6px 6px 10px #000;
    border-radius: 20px;
    padding: 25px;
	padding-top:15px;
	padding-bottom:10px;
	font-size: 28px;
	color:white;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	text-shadow: 2px 1px black;
}

.caja4 {
  background: rgba(200,200,200,0.5);
  border-radius: 10px;
  overflow: hidden;
  margin: 0.65em 0;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-color);
}

 .caja4 h1 {
 color:white;
 background: hsl(150 80% 40%);
 padding:5px 0px 15px 0px;
 margin:0;
 text-shadow: 2px 2px 5px black;
 text-align: center;
 }  

 .caja4 .contenido {
 padding: 0 1rem;
 
 
 }

.caja5 {
  background: hsl(250 30% 90%);
  border-radius: .3rem;
  overflow: hidden;
  margin: 0.65em 0;
  color:var(--raro-color);
  width:80%;
  margin-left:10%;
  
}
   
.caja5 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: hsl(250 80% 90%);
  color: white;
  font-size: 20px;
  text-align: center;
  
}

.caja5 .content {
  padding: 20px;
   
}

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

.caja5 .modo1 {
  background: rgb(31,31,180);
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
  padding: 10px;
}

.caja5 .modo2 {
  background: #8D6E63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo3 {
  background: #8DAE63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo4 {
  background: #E65100;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
}

.caja5 .modo5 {
  background: #D81B60;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
}

.caja5 .modo6 {
  background: #5E35B1;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat;
}

.caja5 .modo7 {
  background: #301400;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/rytr.png");
  background-repeat: no-repeat;
}




.caja6 {
  margin:30px 0px;
  background-image: url("../images/ejemplo1.png");
  background-repeat: no-repeat; 
  background-color: rgba(250,250,250,0.15);
  box-shadow: 6px 6px 10px #000;
  border-radius: 10px;
  padding: 25px;
  padding-top: 70px;
  padding-bottom: 10px;
  font-size: 20px;
}

.caja7 {
  margin:30px 0px;
  background: linear-gradient(to top right, red,yellow, green, blue);
  box-shadow: 6px 6px 10px #000;
  border-radius: 15px;
  padding: 10px;
  font-size: 24px;
  color: white;
  text-shadow: 2px 1px 5px black;
}

.lista1 li {
  list-style: none;
  background-image: url("listas/ai2.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 30px;
  padding-left: 45px;
  padding-top: -5px;
  margin-left:-30px;
  margin-top: 10px;
  
  }
  
.lista2 li {
  list-style: none;
  background-image: url("listas/multimedia.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 30px;
  padding-left: 35px;
  margin-left:-30px;
  padding-top:0px;
    
  }
  
.lista3 li {
  list-style: none;
  background-image: url("listas/AI.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 25px;
  background-position: left top;
  padding-left: 35px;
  margin-left:-10px;
  padding-top:-5px;
    
  }
  
.lista4 li {
  list-style: none;
  background-image: url("listas/ia.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 35px;
  padding-left: 50px;
  margin-left:-30px;
  
    
  }
  
  .lista5 li {
  list-style: none;
  background-image: url("listas/robot.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 35px;
  padding-left: 40px;
  margin-left:-45px;
  padding-top:-15px;
    
  }
  
  .lista6 li {
  list-style: none;
  background-image: url("listas/bard.gif");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 30px;
  padding-left: 40px;
  margin-left:-10px;
  padding-top:0px;
  
  }
  
   .lista7 li {
  list-style: none;
  background-image: url("listas/androide.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 45px;
  padding-left: 48px;
  margin-left:-10px;
  padding-top:0px;
  
  }
  
  .lista8 li {
  list-style: none;
  background-image: url("listas/guitarra.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 30px;
  padding-left: 40px;
  margin-left:-10px;
  padding-top:0px;
  
  }
 
  .lista9 li {
  list-style: none;
  background-image: url("listas/leonardo.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 32px 31px;
  padding-left: 35px;
  margin-left:-45px;
  padding-top:-15px;
    
  }

  .lista10 li {
  list-style: none;
  background-image: url("listas/tools.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 33px 33px;
  padding-left: 45px;
  margin-left:-45px;
  padding-top:-15px;
    
  }
  
   .lista11 li {
  list-style: none;
  background-image: url("listas/papel-moneda.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 36px;
  padding-left: 45px;
  margin-left:-10px;
  padding-top:-10px;
  padding-bottom: 10px;
  margin-bottom: -2px;
    
  } 
 
.foto {
clip-path: circle(50%);
}


.foto2 {
clip-path: circle(150px at 50% 150px);
}

.foto3 {
float: left;
background: url(../images/fondo1.jpg);
shape-outside: circle(100px at 0px 100px);
}

figcaption {
	margin-top: -10px;
	
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/* Estilos para la etiqueta audio */

/* Estilos audio1 */

/* centrado */
.audio1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Color del fondo */
.audio1::-webkit-media-controls-panel {
  background-color: #56AEFF;
}

.audio1::-webkit-media-controls-timeline {
  background-color: #B1D4E0;
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Estilo para el botón play */	
.audio1::-webkit-media-controls-play-button {
  background-color: #B1D4E0;
  border-radius: 50%;
}
.audio1::-webkit-media-controls-play-button:hover {
  background-color: rgba(177,212,224, .7);
}

/* Estilo para el tiempo transcurrido */
.audio1::-webkit-media-controls-current-time-display {
  color: #fff;
}


/* Estilos audio2, cambiando solo el color de fondo y centrado*/

/* Centrado */
.audio2 {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Color del fondo */
.audio2::-webkit-media-controls-panel {
  background-color: orange;
}

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:nth-child(even) {background-color: rgba(20,120,240,0.2);}

.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;
}

.gpt {
	width:95%;
	background-color: #10A37F;
	border-radius:25px;
	background-image: url("../images/gpt.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:40px 40px;
	background-position:10px 10px;
	padding-top:55px;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.gpt b {
	color: yellow;
}

.perple {
	width:500px;
	background-color: #ddd;
	border-radius:25px;
	background-image: url("../images/perple.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:170px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.pi {
	width:500px;
	background-color: #F9F4E8;
	border-radius:25px;
	background-image: url("../images/pi.gif");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:70px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.rytr {
	width:500px;
	background-color: white;
	border-radius:25px;
	 border-style: solid;
	border-width: 5px 20px;
	border-color: #301400;
	background-image: url("../images/rytr.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:109px 50px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.notion {
	width:500px;
	background-color: #ddd;
	border-radius:25px;
	background-image: url("../images/notion.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:35px 35px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.claude {
	width:500px;
	background-color: #CC9B7A;
	border-radius:25px;
	background-image: url("../images/claude.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:35px 35px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.sonic {
	width:500px;
	background-color: #4932EA;
	border-radius:25px;
	background-image: url("../images/sonic.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:140px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.bing {
	width:500px;
	background-color: #005cff;
	border-radius:25px;
	background-image: url("../images/bing2.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:250px 40px;
	background-position:15px 10px;
	padding-top:60px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.bing b {color: orange}
.bing a {color: yellow}
		
.you {
	width:500px;
	background-color: #b73d00;
	border-radius:25px;
	background-image: url("../images/you.svg");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:140px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.copilot {
	width:100%;
	background-color: #f5f5f5;
	border-radius:25px;
	background-image: url("listas/copilot.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:211px 65px;
	background-position:15px 0px;
	padding-top:70px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
} 
.destaca {
	color: var(--h1-color);
	font-weight: bold;
	font-size: 21px;
	text-align: center;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}


	.preg {
		font-size: 22px;
		color: var(--h1-color);
		text-align: center;
		margin-top:10px;
	
	
	
}

	body {
	--raro-color:#000;
	--nocambia-color:#000000;
	--caja0-color:#000000;
	--caja1-color:#000000;
	--caja2-color:#000000;
	--caja3-color:#000000;
	--caja5-color:#000000;
	}

	body.dark {  
	--raro-color:#000;
	--nocambia-color:#fff;
	--caja0-color:#358cd6;	
	--caja1-color:#3525d6;
	--caja2-color:#000;
	--caja3-color:#3525d6;
	--caja5-color:#3525d6;
	}
	
	/** Texto a dos columnas **/
.doscol {
  text-height: normal;
  column-count:2;
  column-fill: auto;
  column-gap: 30px
  }

/*** Texto a tres columnas ***/
.trescol {
  column-count:3;
  text-align: left;
  column-gap: 20px;
  column-fill: auto;
  
}

.item1 {
	color: #003b46;
}

body.dark .item1 {
	color: #c4efd6;
}

.item2 {
	color: #a43820;
}

body.dark .item2 {
	color: #ba5536;
}

.titulo_tabla {
	color: var(--h1-color);
	font-size: 18px;
	margin-bottom: 10px;
}

#tool_calculadora {
  width: 35px;
  height: 35px;
  background-image: url("iconos/icono_claro.svg");
}

body.dark #tool_calculadora {
  background-image: url("iconos/icono_oscuro.svg");
}



#tool_tabla {
  width: 35px;
  height: 35px;
  background-image: url("iconos/table_claro.png");
}

body.dark #tool_tabla {
  background-image: url("iconos/table_oscuro.png");
}

#tool_centroide {
  width: 35px;
  height: 35px;
  background-image: url("iconos/table2_claro.png");
}

body.dark #tool_centroide {
  background-image: url("iconos/table2_oscuro.png");
}

.cafe {
	color:rgb(209, 25, 7);
	font-size:22px;
	font-weight: bold;
	}

body.dark .cafe {
	color:orange;

}

.bard {
	width:540px;
	background-color: #a2d5ff;
	border-radius:25px;
	background-image: url("../images/bard.gif");
	background-repeat: no-repeat;
	padding: 15px;
	background-size:40px 40px;
	background-position:10px 10px;
	padding-top:55px;
	padding-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
	font-size: 19px;
	box-shadow: 2px 1px 3px black;
	
}

.dark .bard {
color: black;	
	
}

#tool_IA1 {
  width: 100px;
  height: 68px;
  background-image: url("iconos/ia1.png");
}
body.dark #tool_IA1 {
  background-image: url("iconos/ia1.png");
}