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

table {
	width:100%;
}
th {
	text-align: center;
	vertical-align:middle;
	font-weight: bold;
	
}
tr:nth-child(even) {background-color: #d2e2d2;}

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


  
  /* 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: auto;
	margin-right:35px;/espacio entre imagen y texto*/
	margin-botom:10px;
	max-width: 35% /*tamaño máximo de la imagen*/
}

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

.flota_d {
	float: right;
	margin: auto;
	margin-left:20px;/espacio entre imagen y texto*/
	margin-botom:8px;
	max-width: 40% /*tamaño máximo de la imagen*/
	
}

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

.foto2{
position:absolute;
left:1px; 
top:2.5px;
height:840px;
width:240px;
background-image:url("../imagenes/A20241023.jpg");
background-size:320px 840px;
background-position:0px 0px;
padding:10px;
}
.foto3{
position:absolute;
left:52px; 
top:120px;
height:440px;
width:240px;
background-image:url("../imagenes/B20241023.jpg");
background-size:240px 440px;
background-position:0px 0px;
border-radius:19px;
padding:10px;
}
.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 */
}
.vertical-margin {
    position: fixed;
    top: 50px; /* Posición del margen vertical desde arriba */
    left: 0;
    width: 50px; /* Ancho del margen vertical */
    height: 100%;
    background-image: url('images/roseta.png'); /* Ruta de la imagen vertical */
    background-repeat: repeat-y; /* Repetir la imagen verticalmente */
}

.horizontal-margin {
    position: fixed;
    top: 0;
    left: 50px; /* Posición del margen horizontal desde la izquierda */
    width: 100%;
    height: 50px; /* Altura del margen horizontal */
    background-image: url('images/roseta.png'); /* Ruta de la imagen horizontal */
    background-repeat: repeat-x; /* Repetir la imagen horizontalmente */
}

.content {
    margin-top: 40px; /* Ajustar el margen superior del contenido para evitar solapamiento */
    margin-left: 50px; /* Ajustar el margen izquierdo del contenido para evitar solapamiento */
    font-weight: bold; /* Negrita */
    font-size: 20px; /* Tamaño de fuente 20px */
    /* Agregar otros estilos según sea necesario */
}

.lista1 li{
	list-style: none;
	background-image: url("listas/catleya1.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 35px;
	padding-left: 45px;
	margin-left: -40px;
}
.lista1a li{
	list-style: none;
	background-image: url("listas/2.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 50px;
	padding-left: 55px;
	margin-left: -40px;
}
.lista1b li{
	list-style: none;
	background-image: url("listas/3.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 35px;
	padding-left: 45px;
	margin-left: -40px;
}
/* Tooltip contenedor (selector)*/
.Tooltip {
  position: relative;  
  display: inline-block;
  border-bottom: 1px dotted black;
  font-size:110%;
}

/* Texto (contenido) del Tooltip */
.Tooltip .TooltipText {
  visibility: hidden;
  width:200px;
  background-color: rgb(250,250,250);
  color: #000;
  box-shadow: 15px 15px 20px #aaa;
  font-size: 10pt;
  text-align:center;
  border-radius: 15px;
  padding:5px 5px;
  /* Posiciona el Tooltip abajo*/
  position: absolute;
  z-index: 1;
  bottom: 95%;
  left: 80%;
  margin-left: -100px;
  }
/* Muestra el texto del Tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del Tooltip*/
.Tooltip:hover .TooltipText  {
  visibility: visible;
}
/* 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 */
}
.container {
    position: relative;
    width: 380px;
    height: 380px;
    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;
  }
.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;
}
.caja5 {
  background: hsl(250 30% 90%);
  border-radius: .3rem;
  overflow: hidden;
  margin: 0.65em 0;
  
  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;
  background-image: linear-gradient(-225deg, #FF7F11 0%, #FFB733 40%, #00FF73 80%, #00D656 100%);
	border: 1px solid orange;

}

.caja5 .modo5 {
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  background-image: linear-gradient(-225deg, #FF7F11 0%, #FFB733 40%, #00FF73 80%, #00D656 100%);
  
  
}

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