.lista1 li {
  margin-left: 20px;
  padding-left: 30px;
  padding-bottom:4px;	
  list-style:none;
  background-image: url("../images/listas/flecha.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
  margin-left: 20px;
}
.lista2 li {
  padding-left: 45px;
  padding-bottom:15px;	
  list-style:none;
  background-image: url("../images/listas/flecha.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
  margin-left: -10px;
}

/*--esquema ec cuaddraticas con chatgpt-->*/

.contenecuacion {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        max-width: 540px;
    }
    .title-box {
        background-color: #ff7043;
        padding: 12px;
        border-radius: 109px;
        margin-bottom: 10px;
        color: white;
        font-size: 0.95em;
        font-weight: bold;
        text-align: center;
        width: 90%;
    }
    .main-box {
        display: flex;
        justify-content: space-between;
        width: 90%;
    }
    .box {
        background-color: #ff8c42;
        padding: 30px;
        border-radius: 30px;
        margin: 10px;
        font-size: 0.9em;
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 50%;
        height: auto;
    }
    .box-incompletas {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;
       
    }
    .sub-box {
        background-color: #ffd180;
        padding: 10px;
        border-radius: 20px;
        margin: 5px 0;
        cursor: pointer;
        position: relative;
        width: 100%;
        font-size: 0.9em;
        text-align: center;
    }
    .example {
        display: none;
        position: relative;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(237, 240, 129, 0.99);
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        width: 200px;
        height: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    .box:hover .example, .sub-box:hover .example {
        display: block;
    }





/*--para probar como queda texto motivacional-->*/
.motivational-text {
        color: #4259de; /* Color texto azul */
        font-size: 0.9em; 
        font-weight: normal;
        line-height: 1.3; /* Espaciado entre líneas */
        background-color: #e0e7e6; /* Fondo verde claro */
        padding: 40px;
        border-left: 15px solid #4CAF50; /* Barra decorativa en el borde izquierdo */
        border-radius: 15px;
        font-family:  sans-serif;
       padding-left: 5px;
    }
    .motivational-text strong {
     padding-left: 5px;
        font-weight: bold; /* Negrita para destacar algunas palabras */
        color: #388E3C; /* Verde más oscuro para el texto destacado */
    }

/*--para objetos interactivos de GeoGebra-->*/
.sin_boton {
border: 1px; 
background-color: rgba(1,1,1,0);
}

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


.contflex {
  display: flex;
  /* Habilitar diseño flexbox */
}
.textod{
    flex: 1; /* Permitir que el texto crezca para llenar el espacio restante */
}


.caja1{
width: 200px;
margin-right:20px;
margin-left:-5px;
text-align:center;
background-color: #88C1FF;
box-shadow: 6px 6px 8px #404040;
border-radius: 5px;
padding:10px;
/*--height:50px;-->*/
}


.caja2{
background-color: rgba(120, 208, 236, 0.5);
box-shadow: 6px 6px 8px rgba(31, 74, 148, 0.79);
border-radius: 30px;	
text-align:center;
padding:15px;
}
.caja2a{
background-color: rgba(120, 208, 236, 0.5);
box-shadow: 6px 6px 8px rgba(31, 74, 148, 0.79);
border-radius: 30px;	
padding:8px;
align-content: auto;
}
.caja3{
width: 540px;
background-color: #88C1FF;
box-shadow: 6px 6px 8px #404040;
border-radius: 22px;	
text-align:center;
padding:15px;
}
.caja3a{
width: auto;
background-color: #88C1FF;
box-shadow: 6px 6px 8px #404040;
border-radius: 22px;	
text-align:center;
padding: 0.8em;
}
.caja4{
width: 380px;
margin-left: 730px;
background-color: rgba(128, 182, 167, 0.44);
box-shadow: 6px 6px 8px #181819;
border-radius: 35px;	
font-size: 18px;
padding:30px;
}



body.dark .caja1 {
     color:maroon;	 
}
/* ver si utilizo o no esta tabla */
table,td,tr{
	padding:12px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:14px;
	border:2px solid white;
	color:black;
	
}
td,tr,th{
 border-color:rgba(127, 179,213);
 border-collapse:separate;
 vertical-align:middle;
}

th{
	background-color:rgba(31, 74, 148, 0.79);
   font-size:16px;
    padding:12px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	border:2px solid white;
    color:white;
}
	
tr:nth-child(even){
	background-color:rgba(235, 245, 251  );
}
tr:nth-child(odd){
	background-color:rgba(214, 238, 248   );
}
body.dark .table {
     color:maroon;
}


/* uso de IA para contenedor */
.container {
  margin: 10px;
  width: auto; /* Ajusta el ancho del contenedor como necesites */
  height: auto;
  background: linear-gradient(to right bottom, #007bff, #5cb85c); /* Degradado diagonal */
  border-radius: 20px; /* Bordes redondeados */
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.8); /* Sombra tenue */
  padding: 20px; /* Agrega espacio entre el borde y el contenido */
}

.imagen-flotada {
  float: left; /* Hace que la imagen flote a la izquierda */
  margin: 0 10px 20px -10px; /* Agrega márgenes alrededor de la imagen */
  max-width: 20%; /* Limita el ancho de la imagen al 50% del contenedor */
  height: auto; /* Mantiene la proporción de aspecto de la imagen */
}
.container-interno {
  width: auto;
  height: auto;
  background-color: #E2802A;
  margin: 30px auto; /* Centra el contenedor interno dentro del contenedor externo */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
}
.container-tabla {
  width: auto; /* Ajusta el ancho del contenedor como necesites */
  height: auto;
  background: linear-gradient(to right bottom, #007bff, #5cb85c); /* Degradado diagonal */
  border-radius: 20px; /* Bordes redondeados */
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.8); /* Sombra tenue */
  padding: 10px; /* Agrega espacio entre el borde y el contenido */
}

/* prueba IA lunes 20 de mayo */
.contenedor {
  width: 200px; /* Ajusta el ancho del contenedor */
  height: 200px; /* Ajusta la altura del contenedor */
  position: relative; /* Permite posicionar el círculo */
}

.contenedor img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease; /* Animación de opacidad */
}

.circulo {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Crea la forma circular */
  background-color: transparent; /* Permite ver la imagen */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra el círculo */
}

.circulo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Aplica la forma circular a la imagen */
  opacity: 0; /* Oculta la imagen por defecto */
  transition: opacity 0.5s ease; /* Animación de opacidad */
}

.contenedor:hover .circulo img {
  opacity: 1; /* Muestra la imagen secundaria al pasar el cursor */
}

/* pag 10 alternativo al genially IA */
.conten-principal {
  display: flex; /* Permite que los contenedores se alineen horizontalmente */
  flex-wrap: wrap; /* Permite que los contenedores se envuelvan en varias filas si es necesario */
  width: 500px; /* Ajusta el ancho total de la caja */
  margin: 0 auto; /* Centra la caja horizontalmente */
}
.columna {
  display: flex; /* Permite que los contenedores se alineen en columnas */
  /*flex-basis: 33%; /* Ajusta el ancho de cada columna al 33% */
  margin: 1px; /* Agrega espacio entre cada columna */
}

.conten {
  width: 80%; /* Ajusta el ancho de cada contenedor individual */
  height:80%; /* Ajusta la altura de cada contenedor individual */
  margin: 0; /* Agrega espacio entre cada contenedor */
  position: relative; /* Permite posicionar la imagen secundaria */
}

.conten img {
  display: block;
  width: 80%;
  height: 80%;
  transition: opacity 0.5s ease; /* Animación de opacidad */
}

.conten img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  opacity: opacity 0.5s ease; 
}

.conten img.segunda {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* Oculta la imagen secundaria por defecto */
  transition: opacity 0.5s ease; /* Animación de opacidad */
}
	


 /* Contenedor principal para casos de ec cuadraticas */
    .cajadoble {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 540px; /* Ancho total */
      margin: 20px auto; /* Centrar la caja en la página */
      border: 1px solid #ccc; /* Línea para visualizar mejor */
      box-shadow: 5px 5px 8px rgba(13, 13, 86, 0.8); /* Sombra ligera */
      border-radius: 15px; /* Bordes redondeados */
    }
/* Columnas */
    .column {
      flex: 1; /* Ambas columnas ocupan la misma proporción del espacio disponible */
      padding: 10px;
      box-sizing: border-box; /* Incluir el padding en el tamaño total */
    }
/* Video responsivo */
    video {
      max-width: 100%; /* Ajusta al ancho de la columna */
      height: auto; /* Mantiene proporción */
      border-radius: 20px;
    }
/* Imagen responsiva */
    img {
      max-width: 100%; /* Ajusta al ancho de la columna */
      height: auto; /* Mantiene proporción */
      border-radius: 4px;
    }

/* para KaTeX */

.katex-display {
  line-height: 1.5; /* Ajusta el espacio entre líneas */
}

/* imagen a doble pagina*/
.foto1{
position:absolute;
left:-2px; 
top:-2px;
height:825px;
width:1280px;
background-size:1280px 825px;
padding-top:240px;
padding-left: 260px;
}
.foto2{
position:absolute;
left:-642px; 
top:-2px;
height:825px;
width:1280px;
background-size:1280px 825px;
padding-top:320px;
padding-right: -310px; 
  }

/* Estilos para la tabla */
        .custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-family: Arial, sans-serif;
            box-shadow: 0 0 20px rgba(50, 70, 72, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        /* Estilos para los encabezados */
        .custom-table thead tr {
            background-color: rgba(0, 55, 255, 0.69);
            color: #ffffff;
            text-align: center;
          font-size: smaller;
        }

        /* Estilos para las celdas de encabezado */
        .custom-table th {
            padding: 12px 15px;
            font-weight: bold;
          text-align: center;
           border: 1px solid #ffffff;
        }

        /* Estilos para las celdas de datos */
        .custom-table td {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(35, 49, 219, 0.83);
          font-size: 14px;
          text-align: center;
         
        }

        /* Efecto zebra para las filas */
        .custom-table tbody tr:nth-of-type(even) {
            background-color: rgba(136, 193, 255, 0.12);
        }

        /* Efecto hover en las filas */
        .custom-table tbody tr:hover {
            background-color: rgba(96, 138, 232, 0.78);
            transition: 0.5s ease;
        }

        /* Estilos responsivos */
        @media (max-width: 500px) {
            .custom-table {
                font-size: 14px;
            }
            
            .custom-table th,
            .custom-table td {
                padding: 8px 10px;
          }
}