table {
  border-collapse: collapse;
  border: 0px solid black;
  width: 80%;
  margin-left: auto;
  margin-right: auto;}

table td {
  border: 0px solid black;
  padding: 10px;}

th {
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	text-align: center;
	padding: 10px;}

table tr:last-child{
	border-bottom: 2px solid #000;}
	
tr:hover {
  background-color: #f0f0f0; /* Color de fondo de resaltado (cambialo a tu gusto) */
}
  
  /* 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;
	width: 50%;
	margin-top: 0px;
}

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

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

.caja_simple {
  width: 80%;  /* Define el ancho del contenedor */
  margin: 0 auto;    /* Centra el contenedor horizontalmente */
  background-color: #f4f4f4;  /* Color de fondo del contenedor */
  padding: 20px;  /* Espacio interior alrededor del contenido */
  box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Sombra alrededor del contenedor */
}

body.dark .caja_simple {
	background-color: #222;
	color: #cccccc;
}

.caja_compleja {
  width: 70%; /* Ancho del 70% de la página */
  margin: 0 auto; /* Centrado horizontalmente */
  padding: 20px; /* Márgenes internos de 20px */
  background: linear-gradient(to right, yellow, turquoise); /* Fondo degradado amarillo a turquesa */
  border-radius: 20px; /* Bordes suavemente curvos */
  box-shadow: 10px 10px rgba(0, 0, 0, 0.2) /* Sombra degradada a la derecha y hacia abajo */
}

.titulo {
  text-align: center; /* Centrado horizontalmente */
  font-weight: bold; /* Negrita */
  font-size: 40px; /* Tamaño de fuente 20px */
}

body.dark .caja_compleja {
	color: #000;
}

/* Diseño de la letra inicial del párrafo de texto con tamaño 60px */
p.letra1:first-letter { 
	font-size: 60px; 
	display: block; 
	float: left; 
	line-height: 0.5; 
	margin: 15px 15px 10px 0;
}

/* Texto 3D con Claude */
.texto-3d {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 0 #ddd,
               2px 2px 0 #ccc,
               3px 3px 0 #bbb,
               4px 4px 0 #aaa,
               5px 5px 0 #999,
               6px 6px 0 #888,
               7px 7px 0 #777,
               8px 8px 16px rgba(0, 0, 0, 0.5);
}	

/* Texto 3D con ChatGPT */
.texto-3d-2 {
  color: #fff; /* Color del texto */
  font-size: 48px; /* Tamaño del texto */
  font-weight: bold; /* Negrita para que el efecto sea más visible */
  text-align: center; /* Centrar el texto */
  text-shadow: 
    1px 1px 0 #000, /* Sombra hacia la derecha y abajo */
    2px 2px 0 #000, /* Sombra más pronunciada hacia la derecha y abajo */
    3px 3px 0 #000, /* Sombra aún más pronunciada hacia la derecha y abajo */
    4px 4px 0 #000; /* Sombra máxima hacia la derecha y abajo */
}

/* Texto 3D con codegemma-7b */
.texto-3d-3 {
  font-family: Arial, sans-serif; /* Tipo de letra */
  font-size: 24px; /* Tamaño de letra */
  text-transform: uppercase; /* Convertir a mayúsculas */
  letter-spacing: 3px; /* Espacio entre letras */
  word-spacing: 5px; /* Espacio entre palabras */
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa; /* Sombra de texto */
}

/* Texto 3D con ChatGPT 3.5 */
.texto-animado {
    display: inline-block;
    padding-left: 100%; /* Empieza la animación fuera del contenedor visible */
	width:900px;
    animation: deslizar 10s linear infinite; /* Define el tiempo y el tipo de animación */
}

@keyframes deslizar {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%); /* Mueve el texto el 50% de su ancho hacia la izquierda */
    }
}

/* Estilos para imágenes */
.contenedor-derecha {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 825px;
    background-image: url('../images/cap2/dalle3.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.contenedor-izquierda {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 825px;
    background-image: url('../images/cap2/dalle3.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* Estilo para contenedor */
.contenedor {
  width: 90%;
  margin: 0 auto;
  background-color: rgba(255, 0, 0, 0.7); /* Fondo semitransparente al 70% */
  background-image: conic-gradient(red, orange, yellow, green, blue, indigo, violet); /* Degradado de fondo del arco iris */
  border: 10px solid brown; /* Borde marrón de 10 px */
  border-radius: 15px; /* Esquinas redondeadas con 15px */
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); /* Sombra hacia la derecha y hacia abajo */
  text-align: center;
  padding: 10px;
}

.contenedor h1 {
  font-size: 36px; /* Tamaño de letra de 36 px para el título principal */
  color: lightgreen; /* Título en verde claro */
}

.contenedor h2 {
  font-size: 32px; /* Tamaño de letra de 32 px para el título secundario */
  color: yellow;
}

.contenedor p {
  font-size: 28px; /* Tamaño de letra de 28 px para el texto */
  color: lightgray;
}

/* Estilos de las celdas */
table.content-table td, table.content-table th {
    border: 1px solid red; /* Cambio de borde a rojo */
    padding: 5px;
    transition: all 0.5s; /* Retardo de 0.5 segundos */
}

/* Cambio de color al pasar el ratón */
table.content-table td:hover {
    background-color: blue; /* Cambio de fondo a azul */
    color: gray; /* Cambio de letra a gris */
    border-width: 8px; /* Cuadruplicar el grosor del borde */
    font-size: 200%; /* Cambio de tamaño de letra al doble */
}	

.animated-text {
  overflow: hidden;
  font-size: 40px; /* Tamaño inicial del texto */  
  white-space: nowrap;
  animation: slide 10s linear infinite;
}

@keyframes slide {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

  /* Texto en movimiento*/			
          .animated-text3 {
            font-size: 40px; /* Tamaño inicial del texto */
            animation: shrink-grow-rotate 4s infinite alternate;
        }

        @keyframes shrink-grow-rotate {
            0% {
                transform: scale(1); /* Tamaño normal */
            }
            50% {
                transform: scale(0.5); /* Tamaño reducido a la mitad */
            }
            100% {
                transform: scale(1) rotate(360deg); /* Tamaño normal y rotación completa */
            }
        }
		
  /* Texto que cambia de color*/			
        .random-color-text {
            animation: changeColor 5s infinite alternate;
            font-size: 40px; /* Tamaño inicial del texto */			
        }

        @keyframes changeColor {
            0% {
                color: #ff0000; /* Rojo */
            }
            25% {
                color: #00ff00; /* Verde */
            }
            50% {
                color: #0000ff; /* Azul */
            }
            75% {
                color: #ff00ff; /* Magenta */
            }
            100% {
                color: #ffff00; /* Amarillo */
            }
        }		
		
  /* Efecto chulo*/			
        .texto-chulo {
            font-size: 40px;
            color: #4CAF50; /* Color principal del texto */
            text-shadow: 2px 2px 2px #000000; /* Sombra del texto */
            animation: chulo 2s ease-in-out infinite alternate; /* Animación */
        }

        @keyframes chulo {
            from {
                text-shadow: 2px 2px 2px #000000; /* Sombra inicial */
            }
            to {
                text-shadow: 6px 6px 6px #4CAF50, -2px -2px 6px #FF5722; /* Sombra final */
            }
        }	
		
		/* Estilo para el contenedor de imágenes*/
   .container {
    position: relative;
    width: 390px;
    height: 390px;
    margin: auto;
    overflow: hidden;
    border: 10px solid #000;
    border-radius: 20px;
    transition: border-color 1s ease, border-width 1s ease;
  }

  .container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1s ease;
  }

  .container img.second {
    opacity: 0;
  }

  .container:hover img.first {
    opacity: 0;
  }

  .container:hover img.second {
    opacity: 1;
  }

  .container:hover {
    border-color: #f00;
    border-width: 20px;
  }
  
   /* Estilos pregunta-respuesta*/
        .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 */
        }
		
 /* Estilos para reemplazo de texto*/
  
        .contenedor-texto {
            position: relative;
            display: inline-block;
            text-align: center;		
            width: 100%; /* Asegura que el contenedor tome el 100% del ancho del padre */
        }

        .texto-original, .texto-cambiado {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .texto-original {
            color: green;
            font-size: 40px;
        }

        .texto-cambiado {
            color: red;
            font-size: 30px;
            visibility: hidden;
        }

        .contenedor-texto:hover .texto-original {
            visibility: hidden;
        }

        .contenedor-texto:hover .texto-cambiado {
            visibility: visible;
        }			
		
  /* Texto que cambia de color*/			
        .random-color-text {
            animation: changeColor 5s infinite alternate;
            font-size: 50px;
			text-align: center;
			width: 80%;
			margin-left: auto;
			margin-right: auto;
        }

        @keyframes changeColor {
            0% {
                color: #ff0000; /* Rojo */
            }
            25% {
                color: #00ff00; /* Verde */
            }
            50% {
                color: #0000ff; /* Azul */
            }
            75% {
                color: #ff00ff; /* Magenta */
            }
            100% {
                color: #ffff00; /* Amarillo */
            }
        }		
		
       .slideshow-container {
            position: relative;
            width: 100%;
            max-width: 540px;
            max-height: 730px;
            overflow: hidden;
        }
        .mySlides {
            display: none;
            width: 100%;
            height: 100%;		
        }
        .mySlides img {
            width: 100%;
            height: auto;
            max-height: 730px;		
        }
        .active {
            display: block;
        }		
		
        .contenedor-diapositivas {
            position: relative;
            width: 100%;
            max-width: 540px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .diapositiva {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .diapositiva-actual {
            opacity: 1;
        }
        .diapositiva img {
            max-width: 100%;
            height: auto;
        }
		
		#container {
    width: 560px;
    height: 650px;
    position: relative;
    background-color: #fff;
    border: 0px solid #ccc;
    overflow: hidden;
}

#image {
    width: 190px; /* Ajusta el tamaño según tu necesidad */
    height: 190px;
    background-image: url('../images/cap2/openart-01.jpg'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -70%);
    animation: moveImage 10s linear infinite;
}

@keyframes moveImage {
    0%, 100% { top: 50%; left: 50%; }
    25% { top: 20%; left: 20%; }
    50% { top: 20%; left: 80%; }
    75% { top: 80%; left: 20%; }
}




	/* Contenedor móvil de imágen 2*/

.image-wrapper {
  position: relative;
  width: 250px; /* ajusta el ancho y alto según tu imagen */
  height: 250px;
  overflow: hidden;
  margin: 0 auto; /* Para centrar horizontalmente */
  text-align: center; /* Para centrar horizontalmente */
}

.circle-click-animation {
  width: 100%;
  height: 100%;
  transition: transform 2s ease; /* Animación más lenta */
}

.circle-click-animation:hover {
  transform: rotate(720deg); /* Dos vueltas completas */
}


	/* Contenedor móvil de imágen 3*/

.img-container img {
  max-width: 100%; /* Ajusta el tamaño máximo de la imagen al 100% del contenedor */
  width: 170px; /* Puedes ajustar este valor según tus necesidades */
  height: auto; /* Mantiene la proporción de la imagen */
}

/* Animación de oscilación */
@keyframes oscilar {
  0% { transform: translateX(0); }
  50% { transform: translateX(380px); }
  100% { transform: translateX(0); }
}

/* Animación de parpadeo */
@keyframes parpadear {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Clase para la animación combinada */
.oscilante-parpadeante {
  display: inline-block;
  animation: oscilar 8s infinite linear, parpadear 1s infinite step-start;
}

.oscilante-parpadeante:hover {
  animation-play-state: paused;
}

/* 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;
}

/* Estilos para el control de audio modificado  */
.audio1::-webkit-media-controls-panel {
  background-color: #56AEFF; /* Fondo turquesa */
  color: #333; /* Texto gris oscuro */
  border: 1px solid #ccc; /* Borde gris claro */
}

.audio1::-webkit-media-controls-play-button {
  background-color: #B1D4E0; /* azul claro */
  color: white; /* Texto blanco */
  border-radius: 50%;
}

.audio1::-webkit-media-controls-pause-button {
  background-color: #f44336; /* Rojo */
  color: white; /* Texto blanco */
  border: none;
}

.audio1::-webkit-media-controls-mute-button {
  background-color: #ff9800; /* Naranja */
  color: white; /* Texto blanco */
  border-radius: 25px;
}

.audio1::-webkit-media-controls-volume-slider {
  background-color: #ddd; /* Gris claro */
  border-radius: 25px;
}

.audio1::-webkit-media-controls-volume-slider-thumb {
  background-color: #999; /* Gris oscuro */
  border-radius: 25px;
  cursor: pointer;
}

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

.audio1::-webkit-media-controls-timeline-progress-bar {
  background-color: #007bff; /* Azul */
  border: none;
}

/* Ancho del control de audio */
.audio1 {
  width: 400px; /* Ancho del control */
}

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

/* Estilos para el control de audio dado por Gemini*/
.audio2::-webkit-media-controls-panel {
  background-color: #f0f0f0; /* Fondo gris claro */
  color: #333; /* Texto gris oscuro */
  border: 1px solid #ccc; /* Borde gris claro */
}

.audio2::-webkit-media-controls-play-button {
  background-color: #4CAF50; /* Verde */
  color: white; /* Texto blanco */
  border: none;
}

.audio2::-webkit-media-controls-pause-button {
  background-color: #f44336; /* Rojo */
  color: white; /* Texto blanco */
  border: none;
}

.audio2::-webkit-media-controls-mute-button {
  background-color: #ff9800; /* Naranja */
  color: white; /* Texto blanco */
  border: none;
}

.audio2::-webkit-media-controls-volume-slider {
  background-color: #ddd; /* Gris claro */
  border: none;
}

.audio2::-webkit-media-controls-volume-slider-thumb {
  background-color: #999; /* Gris oscuro */
  border: none;
  cursor: pointer;
}

.audio2::-webkit-media-controls-timeline {
  background-color: #eee; /* Gris claro */
  border: none;
}

.audio2::-webkit-media-controls-timeline-progress-bar {
  background-color: #007bff; /* Azul */
  border: none;
}

/* Ancho del control de audio */
.audio2 {
  width: 300px; /* Ancho del control */
}



/* Estilos para el control de audio dado por Copilot*/

/* Estiliza el elemento audio */
.audio3 {
    width: 80%; /* Ajusta el ancho según tus necesidades */
    max-width: 600px; /* Ajusta el ancho máximo según tus necesidades */
    border-radius: 15px;
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Fondo degradado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para un efecto más elegante */
    outline: none; /* Remueve el borde del focus */
}

/* Estiliza los controles del audio */
.audio3::-webkit-media-controls-panel {
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: white; /* Color de los controles */
}

.audio3::-webkit-media-controls-play-button,
.audio3::-webkit-media-controls-pause-button,
.audio3::-webkit-media-controls-mute-button,
.audio3::-webkit-media-controls-timeline,
.audio3::-webkit-media-controls-current-time-display,
.audio3::-webkit-media-controls-time-remaining-display,
.audio3::-webkit-media-controls-volume-slider,
.audio3::-webkit-media-controls-fullscreen-button {
    color: white; /* Color de los íconos y texto */
}

.audio3::-webkit-media-controls-volume-slider,
.audio3::-webkit-media-controls-seek-back-button,
.audio3::-webkit-media-controls-seek-forward-button {
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3); /* Fondo semitransparente */
}

/* Para navegadores que no son Webkit */
.audio3 {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: white; /* Color de los controles */
}