/* Puedes adaptar tus clases de botones aquí */
body {
  /* font-family: 'Lato', sans-serif; */
  font-family: 'Poppins', sans-serif;
}

.boton-audio {
  padding: 8px 12px;
  /*background-color:#A4B844;*/
  background-color:#D6B12B;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


.boton-chat {
  padding: 8px 12px;
  background-color: #000000;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 4px;
}

.boton-audio:hover {
  /* background-color:#CCD896; */
  background-color:#666666;
}

.boton-chat:hover {
  /* background-color: #B57B9C; */
  background-color:#666666;
}

.chat-input-area textarea {
  width: 100%;
  padding: 10px;
}


.cajatexto_respuesta {
	width:96%; 
	border:3px solid #0096C1; 
	border-radius:8px; 
	margin:5px; 
	height:65px;
	outline:none; 
	margin:1px 15px 15px 15px;
	/*color:#666666;*/
	color:#000000;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-size:16px;
	font-weight:normal;
	padding:5px;
}

.cajatexto_pregunta_chatbot {
	width:96%; 
	/* border:3px solid #A56384; */
	border:3px solid #000000; 
	border-radius:8px;  
	height:60px;
	outline:none; 
	margin:-8px 15px 15px 15px;
	padding:5px;
	/*color:#666666;*/
	color:#000000;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-size:16px;
	font-weight:normal;
}


.text_anexo {
	color:#A4B844;
	margin:5px 15px 5px 15px;
}

.text_pregunta {
	text-align:left; 
	margin:25px 15px 1px 15px; 
	font-weight:normal; 
	font-size:16px; 
}	
	
	
	
	
	

	
        .swiper {
            width: 100%;
            /*height: 300px;*/
            padding-bottom: 3rem;
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: #81014c;
        }
        .swiper-pagination-bullet-active {
            width: 26px;
            border-radius: 6px;
        }
        /* Estilos responsivos para los slides */
        @media (max-width: 576px) {
            .swiper-slide {
                width: 100%;
            }
        }
        @media (min-width: 577px) and (max-width: 768px) {
            .swiper-slide {
                width: 50%;
            }
        }
        @media (min-width: 769px) {
            .swiper-slide {
                width: 33.333%;
            }
        }
		
        .user-message {
            /*background-color: #A56384;*/
			background-color: #000000;
            align-self: flex-end;
            margin-left: auto;
			width:75%;
			border-top-left-radius:15px; 
			border-bottom-left-radius:15px;
			margin:10px 1px 10px 10px; text-align:left; 
			color:#FFFFFF; 
			padding:10px; 
			margin-left:auto;
        }
        .ai-message {
            background-color: #D6B12B;
            align-self: flex-start;
            margin-right: auto;
			width:75%;
			border-top-right-radius:15px; 
			border-bottom-right-radius:15px;
			margin:10px 10px 10px 1px; text-align:left; 
			color:#FFFFFF; 
			padding:10px; 
			
        }
		
		/*
		.boton-chat {
			font-size:14px; 
			background-color:#3949AB; 
			color:#FFFFFF;		
		}
		
		.boton-chat:hover {
		  background-color: #9BA5DD; 
		  color: #000000;
		}
		*/
		
		/*	
		.boton-audio {
			font-size:14px; 
			background-color:#66CC33;		
		}
		*/
		
		/*
		.boton-principal {
			background-color:#a5b844;
			padding:17px 27px 17px 27px;
			margin:5px;		
			
		}
		*/
		
		.boton-principal {
		  font-size: 18px;
		  background-color: #D6B12B;
		  color: #FFFFFF;
		  border: none;
		  border-radius: 30px;
		  padding: 15px 20px;
		  margin: 10px 10px 10px 0px;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		}
		
		.boton-secundario {
		  font-size: 16px;
		  background-color: #D6B12B;
		  color: #FFFFFF;
		  border: none;
		  border-radius: 30px;
		  padding: 10px 15px;
		  margin: 10px 10px 10px 0px;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		  width:230px;
		}		
		
		.cls-logo-minedu {
			display:block; 
			max-width:260px; 
			height:auto;
		}
		
		.cls-logo-fondep {
			width:180px; 
			height:auto;
		}
		
		.titulo-principal-1 {
			/* color:#9e62a3; */ 
			color:#FFCC00;
			font-size:50px; 
			margin-bottom:-50px;
		}
		
		.txt-cabecera-chat {
			color:#414260; 
			text-align:left;
		}
		
		.txt-cabecera-chat-2 {
			font-size:24px; 
			font-weight:bold;
		}	
		
		/*
		.chat-messages-contorno {
			border:solid; 
			border-width:medium; 
			height:300px; 
			border-color:#3949AB; 
			border-radius:10px; 
			overflow-y:auto;
		}
		
		.ai-msg-contorno {
			width:75%; 
			background-color:#3949AB; 
			border-top-right-radius:15px; 
			border-bottom-right-radius:15px; 
			margin:10px 10px 10px 1px; 
			text-align:left; 
			color:#FFFFFF; 
			padding:10px;
		}
		
		.chat-input-area-2 {
			border-color:#FFCCCC; 
			background-color:#FFFFFF;		
		}
		*/
		
		.txt-center-2 {
			color:#000000; 
			font-size:34px; 
			font-weight:normal; 
			margin-bottom:20px;
		}
		
		.cuadro-claro {
			border-style:solid; 
			border-color:#9BA5DD; 
			background-color:#EFF0FA; 
			min-height:460px;
		}
		
		.cuadro-oscuro {
			border-style:solid; 
			border-color:#9BA5DD; 
			background-color:#3949AB; 
			min-height:460px; 
			color:#FFECFF;
		}
		
		.btn-cuadro-claro {
		    background-color:#3949AB;
			margin-top:128px; 
			padding:10px; 
			font-size:14px; 
			width:200px;
		}
		
		.btn-cuadro-claro-2 {
			background-color:#3949AB;
			margin-top:74px; 
			padding:10px; 
			font-size:14px; 
			width:200px;
		}	
		
		.txt-categoria-cuadro {
			font-size:14px;
		}	
		
		.btn-cuadro-oscuro {
			margin-top:-7px; 
			padding:10px; 
			font-size:14px; 
			width:200px; 
			background-color:#FFE8FF; 
			color:#000000;
		}
		
		.ttapart {
			color:#FFCC00; 
			font-size:27px; 
			margin-bottom:-15px;
		}
		
		.txt-c-apartado {
			font-size:15px;
		}
		
		.txt-pie-p {
			color:#E9E9E9; 
			font-size:14px;
		}
		
		/*
		.cajatexto_respuesta {
			width:96%; 
			border:3px solid #3949AB; 
			border-radius:8px; 
			margin:5px; 
			height:65px;
			outline:none; 
			margin:1px 15px 15px 15px;
		}
		
		.text_anexo {
			color:#3949AB;
		}
		*/
        .loading-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}
		
		.loading-content {
			text-align: center;
			margin-top:200px;
			font-size:16px;
			font-weight:bold;
			color:#a5b844;
		}

		.spinner {
			width: 50px;
			height: 50px;
			border: 5px solid #000000;
			border-top-color: #D6B12B;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto 20px auto; /* Centra y separa del texto */
		}
		
		@keyframes spin {
			to { transform: rotate(360deg); }
		}
		
        .bullet-paragraphs p {
            position: relative;
            padding-left: 20px;
            font-size: 15px;
			
        }

        .bullet-paragraphs p::before {
            content: "-";
            position: absolute;
            left: 0;
            color: black; /* Puedes cambiar el color */
            font-weight: bold;
        }		
		
		
.bullet-paragraphs2 ul {
  list-style-type: disc !important;
  list-style-position: relative !important;
  padding-left: 20px !important;
  margin: 0;
}

.bullet-paragraphs2 li {
  margin-bottom: 10px;
  font-size: 15px;
  /*color: #000;*/
}				
				
		/*iconos flotantes*/
		.floating-icons {
		  position: fixed;
		  bottom: 95px;
		  right: 20px;
		  display: flex;
		  flex-direction: column;
		  gap: 15px;
		  z-index: 1040;
		}
		
		.floating-icon {
		  position: relative;
		  width: 60px;
		  height: 60px;
		  border-radius: 50%;
		  background-color: #D6B12B;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  text-decoration: none;
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		  transition: background-color 0.3s, transform 0.2s;
		  cursor: pointer;
		}
		
		.floating-icon:hover {
		  background-color: #008AB3;
		  transform: scale(1.1);
		}
		
		.floating-icon img {
		  width: 40px;
		  height: 40px;
		}
		
		/* Tooltip con animación deslizante */
		.tooltip {
		  position: absolute;
		  right: 70px;
		  top: 50%;
		  transform: translateY(-50%) translateX(10px); /* empieza desplazado */
		  background-color: #b3d1e3;
		  color: #000000;
		  padding: 6px 12px;
		  border-radius: 6px;
		  white-space: nowrap;
		  opacity: 0;
		  pointer-events: none;
		  transition: opacity 0.3s ease, transform 0.3s ease;
		  font-size: 14px;
		  font-weight: bold;
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		  font-family: 'Poppins', sans-serif;
		}
		
		.floating-icon:hover .tooltip {
		  opacity: 1;
		  transform: translateY(-50%) translateX(0); /* se desliza a su lugar */
		}		
			
		
		.content_icono_flotante {
		  padding: 40px;
		}			
		
		.boton-generar {
		  font-size: 18px;
		  background-color: #A4B844;
		  color: #FFFFFF;
		  border: none;
		  border-radius: 30px;
		  padding: 15px 20px;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		}
		
		.boton-generar:hover {
		  background-color: #8aa134; /* Un tono más oscuro al pasar el mouse */
		}


		.boton-generar-cerrar {
		  font-size: 18px;
		  background-color: #888;
		  color: #FFFFFF;
		  border: none;
		  border-radius: 30px;
		  padding: 15px 20px;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		}

	
.chat-messages-contorno {
	border:solid; 
	border-width:medium; 
	height:300px; 
	/*border-color:#D6B12B; */
	border-color:#000000;
	border-radius:10px; 
	overflow-y:auto;
}

.ai-msg-contorno {
	width:75%; 
	background-color:#D6B12B; 
	border-top-right-radius:15px; 
	border-bottom-right-radius:15px; 
	margin:10px 10px 10px 1px; 
	text-align:left; 
	color:#FFFFFF; 
	padding:10px;
}

.chat-input-area-2 {
	border-color:#D6B12B;
	background-color:#FFFFFF;		
}

/*
.user-message {
	background-color: #91A33D;
	align-self: flex-end;
	margin-left: auto;
	width:75%;
	border-top-left-radius:15px; 
	border-bottom-left-radius:15px;
	margin:10px 1px 10px 10px; 
	text-align:left; 
	color:#FFFFFF; 
	padding:10px; 
	margin-left:auto;
}
.ai-message {
	background-color: #007B9F;
	align-self: flex-start;
	margin-right: auto;
	width:75%;
	border-top-right-radius:15px; 
	border-bottom-right-radius:15px;
	margin:10px 10px 10px 1px; 
	text-align:left; 
	color:#FFFFFF; 
	padding:10px; 
	
}	
*/


  table.timer {
  	
    width: 240px;
    border-collapse: separate;
    border-spacing: 1px;
  }

  table.timer td {
    width: 40px;
    padding: 1px;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    background-color: #FFFFFF; /* opcional */
  }
  
  table.timer td:first-child {
    width: auto; /* o puedes fijarlo si quieres */
    text-align: center;
  }
  
  table.timer span {
    font-weight: bold;
    font-size: 25px;
  }			
		
   .tabla_celda_ancho{
	 width:60px; 
	  
   }