/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(38, 92%, 58%);
  --first-color-light: hsl(38, 100%, 78%);
  --first-color-alt: hsl(32, 75%, 50%);
  --second-color: hsl(195, 75%, 52%);
  --dark-color: hsl(212, 40%, 12%);
  --white-color: hsl(212, 4%, 95%);
  --body-color: hsl(0deg 0% 100%);
  --container-color: hsl(212, 42%, 20%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Bai Jamjuree", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: 1rem;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--white-color);
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/*=============== CARD ===============*/
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/

}
.card__container{
  padding-block: 0.1rem;

}
.card__content{
  margin-inline: -0.25rem;
  border-radius: 0rem;
  overflow: hidden;
  
}
.card__article{
  width: 388px;
  border-radius: 8px;
  overflow: hidden;
  justify-content: left;
}

.card__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Cambia el número de líneas según tu preferencia */
}


.card__image{
  position: relative;
  /* background-color: var(--first-color-light); */
  /* padding-top: 1.5rem; */
  margin-bottom: -0.75rem;
}
.card__data{
  background-color: hsl(0deg 0% 63.92%);
  padding: 0.8rem;
  border-radius: 0rem;
  text-align: -webkit-match-parent;
  position: relative;
  z-index: 15;
  line-height: 1.7;
}
.card__data h3 {
  color: black; /* Cambia el color del texto a negro */
  font-size: 15px;

  /* Ocultar lineas de Titulo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Cambia el número de líneas según tu preferencia */
}

.card__data p {
  color: black; /* Cambia el color del texto a negro */
  font-size: 13px;

  /* Ocultar lineas de Titulo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Cambia el número de líneas según tu preferencia */
}

.card__img{
    width: 100%;
    /* margin: 0 auto; */
    position: relative;
    z-index: 5;
}

.car__name{
  font-size: var(--h2-font-size);
  color: var(--second-color);
  margin-bottom: .75rem;
}
.card__description{
  font-weight: 500;
  margin-bottom: 1.75rem;

}
.card__button{
  display: inline-block;
  background-color: #cae464;
  padding: .75rem 1.5rem;
  border-radius: .25rem;
  color: var(--dark-color);
  font-weight: 600;
}


.tips-card__article {
  background-color: #4f4f4f;
  color: white;
  width: 300px; /* Ajusta el ancho según tus necesidades */
  height: 300px; /* Ajusta la altura según tus necesidades */
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  padding: 0.6rem;
  overflow-y: scroll; 
}

.tips-card__article::-webkit-scrollbar{
  width: 5px;
  border-radius: 1rem;
  background: #cae464;
  overflow-y: scroll;
}


.tips-card__article .tips-card__name {
  margin: 0; /* Elimina el margen predeterminado del h3 */
  text-align: left; /* Centra el texto horizontalmente dentro del card */
  color: white;
  padding: 0.5rem;
  line-height: 1.5;
}



.centered {
  text-align: center; /* Centra el contenido horizontalmente */
  margin-top: 10px; /* Añade un poco de espacio superior */
}


/* Swiper class */
.swiper-button-prev::after,
.swiper-button-next::after{
  content: '';
}

.swiper-button-next,
.swiper-button-prev{
  width: initial;
  height: initial;
  font-size: 3rem;
  color: var(--second-color);
  display: none;
}

.swiper-button-prev{
  left: 0;

}

.swiper-button-next{
  right: 0;
}



/* Para dispositivos móviles */
@media (max-width: 768px) {
  .card__article {
    width: calc(100% - 2rem); /* Utiliza el 100% del ancho menos los márgenes */
    max-width: 230px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 auto 2rem; /* Centra las tarjetas y agrega un margen inferior */
    width: 300px;
  }

  .card__content {
    padding: 1rem; /* Reduce el relleno del contenedor */
  }

  .card__data {
    padding: 0.5rem; /* Reduce el relleno del contenedor de datos */
  }

  .card__img {
    width: 100%; /* Ajusta el ancho de la imagen para que ocupe todo el contenedor */
  }

  .card__name {
    font-size: 0.9rem; /* Reduce el tamaño del nombre */
    margin-bottom: 0.25rem; /* Reduce el margen inferior del nombre */
  }

  .card__description {
    font-size: 0.7rem; /* Reduce el tamaño de la descripción */
    margin-bottom: 0.5rem; /* Reduce el margen inferior de la descripción */
  }

  .card__button {
    font-size: 0.7rem; /* Reduce el tamaño del botón */
    padding: 0.25rem 0.75rem; /* Reduce el relleno del botón */
  }

  .carousel-title-clases {
    text-align: left; /* Alinea el texto a la izquierda en dispositivos móviles */
     margin-left: 20px; /* Aplica un margen a la izquierda en dispositivos móviles */
     margin-top: 0; /* Elimina el margen superior en dispositivos móviles */
     color: rgb(255, 255, 255); /* Cambia el color del texto a negro en dispositivos móviles */
  }
}



/* For medium devices */
/* Para tabletas */
@media (min-width: 768px) and (max-width: 992px) {
  .card__article {
    width: calc(50% - 2rem); /* Utiliza el 50% del ancho menos los márgenes */
    max-width: 290px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 1rem 2rem; /* Agrega un margen en los lados y un margen inferior */
    width: 300px;
  }

  .card__name {
    font-size: 1rem; /* Tamaño de fuente normal para el nombre */
    margin-bottom: 0.5rem; /* Margen inferior normal para el nombre */
  }

  .card__description {
    font-size: 0.9rem; /* Tamaño de fuente normal para la descripción */
    margin-bottom: 1rem; /* Margen inferior normal para la descripción */
  }

  .card__button {
    font-size: 0.9rem; /* Tamaño de fuente normal para el botón */
    padding: 0.5rem 1rem; /* Relleno normal para el botón */
  }

  .carousel-title-clases {
    text-align: left; /* Alinea el texto a la izquierda en dispositivos grandes */
    margin-left: 20px; /* Aplica un margen a la izquierda en dispositivos grandes */
    color: rgb(255, 255, 255); /* Cambia el color del texto a negro en dispositivos móviles */
}

  .swiper-button-next,
  .swiper-button-prev{
    display: block;
  }
}

/* For large devices */
@media (min-width: 992px) {
  .card__article {
    width: calc(33.33% - 2rem); /* Utiliza el 33.33% del ancho menos los márgenes */
    max-width: 290px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 1rem 2rem; /* Agrega un margen en los lados y un margen inferior */
    width: 300px;
  }

  .card__name {
    font-size: 1rem; /* Tamaño de fuente normal para el nombre */
    margin-bottom: 0.5rem; /* Margen inferior normal para el nombre */
  }

  .card__description {
    font-size: 0.9rem; /* Tamaño de fuente normal para la descripción */
    margin-bottom: 1rem; /* Margen inferior normal para la descripción */
  }

  .card__button {
    font-size: 0.9rem; /* Tamaño de fuente normal para el botón */
    padding: 0.5rem 1rem; /* Relleno normal para el botón */
  }

  .carousel-title-clases {
    text-align: left; /* Alinea el texto a la izquierda en dispositivos grandes */
     margin-left: 20px; /* Aplica un margen a la izquierda en dispositivos grandes */
     color: rgb(255, 255, 255); /* Cambia el color del texto a negro en dispositivos móviles */
  }
  .swiper-button-next,
  .swiper-button-prev{
    display: block;
  }
}




/*=============== Navigation ===============*/
.navigation {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff; /* Ajusta el color de fondo según sea necesario */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Asegura que la barra de navegación esté por debajo del chat y el botón */
}





.navigation ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.navigation ul li {
  position: relative;
  width: 70px;
  height: 100px;
  list-style: none;
  z-index: 1;
}

.navigation ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

/* Cambié la siguiente regla para que el icono siempre sea negro */
.navigation ul li.active a .icon {
  /* color: #ffffff; */
  color: #000; /* El icono permanecerá negro cuando esté activo */
  transform: scale(1.5); /* Hacer que el icono crezca un 20% */
}

.navigation ul li a .icon {
  position: relative;
  display: block;
  line-height: 100px;
  font-size: 1.5em;
  text-align: center;
  color: #000;
  transition: color 0.2s, transform 0.2s; /* Transición para el color del icono y la escala */
}

/* Establezco el texto como transparente */
.navigation ul li a .text {
  position: absolute;
  color: transparent; /* Hago que el texto sea transparente */
  font-weight: 400;
  font-size: .75em;
  letter-spacing: .05em;
  opacity: 0; /* Establezco la opacidad en 0 */
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s; /* Transiciones combinadas */
}

.navigation ul li.active a .text {
  opacity: 1; /* Hago que el texto sea visible cuando está activo */
  transform: translateY(10px);
}

.navigation ul li:nth-child(1).active~.indicator {
  transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active~.indicator {
  transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active~.indicator {
  transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active~.indicator {
  transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active~.indicator {
  transform: translateX(calc(70px * 4));
}






/* Para dispositivos móviles */

@media (max-width: 768px) {
  .navigation {
    height: 65px; /* Reducir la altura del menú para dispositivos móviles */
  }
  .navigation ul {
    width: 100%; /* Ajustar el ancho de la lista de elementos del menú */
    justify-content: space-around; /* Distribuir los elementos del menú de manera uniforme */
  }
  .navigation ul li {
    width: auto; /* Permitir que los elementos del menú ocupen el ancho necesario */
  }
  .navigation ul li a .icon {
    font-size: 1.8em; /* Reducir el tamaño del icono del menú */
  }
  .navigation ul li a .text {
    font-size: 0.8em; /* Reducir el tamaño del texto del menú */
    margin-top: -2em; /* Ajustar el espaciado superior del texto */
  }
  .navigation ul li a .circle {
    width: 30px; /* Reducir el tamaño del círculo indicador */
    height: 30px;
    transform: translateY(-20px) scale(0); /* Ajustar la posición y tamaño del círculo indicador */
  }
  .navigation ul li.active a .circle {
    transform: translateY(-36px) scale(1.5); /* Ajustar la posición y tamaño del círculo indicador activo */
  }
  .indicator {
    top: calc(-5% - 26px); /* Centrar verticalmente el indicador en tabletas */
  }
  .indicator::before, .indicator::after {
    top: calc(50% - 10px); /* Ajustar la posición vertical de los elementos antes y después del indicador */
  }
}

/* Para tabletas */
@media (min-width: 768px) and (max-width: 992px) {
  .navigation ul li a .icon {
    font-size: 2.5em; /* Ajustar el tamaño del icono del menú para tabletas */
  }
  .navigation ul li a .text {
    font-size: 0.8em; /* Ajustar el tamaño del texto del menú para tabletas */
    margin-top: 0.3em; /* Ajustar el espaciado superior del texto para tabletas */
  }
  .navigation ul li a .circle {
    width: 40px; /* Ajustar el tamaño del círculo indicador para tabletas */
    height: 40px;
    transform: translateY(-25px) scale(0); /* Ajustar la posición y tamaño del círculo indicador para tabletas */
  }
  .navigation ul li.active a .circle {
    transform: translateY(-33px) scale(1.8); /* Ajustar la posición y tamaño del círculo indicador activo para tabletas */
  }
  .indicator {
    top: calc(-5% - 26px); /* Centrar verticalmente el indicador en tabletas */
  }
  .indicator::before, .indicator::after {
    top: calc(50% - 10px); /* Ajustar la posición vertical de los elementos antes y después del indicador */
  }
  
}

/* Para dispositivos grandes */
@media (min-width: 992px) {
  .navigation ul li a .icon {
    font-size: 2.5em; /* Ajustar el tamaño del icono del menú para dispositivos grandes */
  }
  .navigation ul li a .text {
    font-size: 1em; /* Ajustar el tamaño del texto del menú para dispositivos grandes */
    margin-top: 0.5em; /* Ajustar el espaciado superior del texto para dispositivos grandes */
  }
  .navigation ul li a .circle {
    width: 50px; /* Ajustar el tamaño del círculo indicador para dispositivos grandes */
    height: 50px;
    transform: translateY(-30px) scale(0); /* Ajustar la posición y tamaño del círculo indicador para dispositivos grandes */
  }
  .navigation ul li.active a .circle {
    transform: translateY(-38px) scale(1.8); /* Ajustar la posición y tamaño del círculo indicador activo para dispositivos grandes */
  }
}








/*=============== login ===============*/

.container_sign_in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.container_logo_above, .container_logo_below {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.container_logo_above img, .container_logo_below img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

#login-box {
  background: linear-gradient(45deg, #d9d9d9, #4f4f4f);
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 0 auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

#login-box h3 {
  margin-bottom: 20px;
  text-align: center;
}

#login-box form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#login-box .form-group {
  position: relative;
  margin-bottom: 20px;
}

#login-box input {
  width: 100%;
  padding-right: 40px; /* Espacio para el botón del ojo */
  height: 40px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#login-box .input-group-append {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}

#login-box .input-group-append .btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 100%;
}

#login-box .input-group-append .btn .fas {
  color: #888;
  font-size: 18px;
}

#login-box .input-group-append .btn:hover .fas {
  color: #333;
}

#login-box button {
  cursor: pointer;
  background-color: #030305;
  color: white;
  border: none;
  padding: 0.6rem;
  font-size: 16px;
  border-radius: 4px;
}

#login-box button:hover {
  background-color: #007bff;
}

.centered {
  text-align: center;
  margin-top: 10px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  #login-box {
    width: 100%;
    padding: 15px;
  }

  .container_logo_above {
    max-width: 270px;
    height: auto;
    margin-top: 2px;
    margin-bottom: 3px;
  }
  
  .container_logo_below {
    max-width: 160px;
    height: auto;
    margin-top: 2px;
    margin-bottom: 3px;
  }
}

/* Estilos para tabletas */
@media (min-width: 768px) and (max-width: 992px) {
  #login-box {
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Estilos para dispositivos grandes */
@media (min-width: 992px) {
  #login-box {
    width: 50%;
    max-width: 600px;
    margin: 0 auto;
  }
}



/*=============== Buscador Y Logo ===============*/


.container_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  padding: 10px;
  background-color: #0a0a0a;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.logo img {
    /* margin-bottom: 0px; */
    max-width: 135px;
    border-radius: 10px; /* Añadir esquinas redondeadas al logo */
}


.search {
  /*display: flex;*/
  align-items: center;
}

.search input {
  padding: 8px;
  border: 1px solid #000;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search button {
  padding: 8px 15px;
  background-color: #555;
  color: #fff;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.exit-button {
  padding: 8px 15px;
  background-color: #555;
  color: #fff;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  margin-left: 5px; /* Añadir un margen izquierdo para separarlo del botón de búsqueda */
}


/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .container_header {
    /*flex-direction: column;*/
    text-align: center;
  }

  .search {
    margin-top: 10px;
  }

  #search-input {
    display: var(--normal-font-size); /* Oculta el campo de entrada de texto en dispositivos móviles */
  }

  .logo img {
    margin-bottom: 0px; /* Añadir un margen inferior al logo en dispositivos móviles */
  }
}








/*=============== Selection Menu ===============*/
.card-container_selec_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px;
  align-items: center;
  height: 90vh;
  padding: 0 10px; /* Ajusta el padding lateral para todos los dispositivos */
  margin-bottom: 0px; /* Añade un espacio inferior al contenedor */
  padding-bottom: 50px; /* Añade un padding inferior al contenedor */
}

.card_selec_menu {
  width: calc(50% - 20px); /* Ajusta el ancho de los cards al 50% del contenedor con un espacio entre ellos */
  margin-bottom: 20px; /* Añade un espacio inferior entre los cards */
  padding: 40px;
  border-radius: 10px;
  background-color: #a3a3a3; /* Verde */
}

.card_selec_menu h2 {
  color: rgb(3, 3, 3);
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: center;
}

.card_selec_menu p {
  color: black;
}

/* Media queries para dispositivos más pequeños */
@media screen and (max-width: 768px) {
  /* Ajusta el ancho de los cards al 100% del contenedor con un espacio entre ellos */
  .card_selec_menu {
    width: calc(100% - 20px);
  }
}

/* Media queries para tabletas */
@media screen and (min-width: 768px) and (max-width: 992px) {

  .card-container_selec_menu {

    gap: 20px;

  }

  /* Ajusta el ancho de los cards al 50% del contenedor con un espacio entre ellos */
  .card_selec_menu {
    width: calc(50% - 20px);
    padding: 50px;
  }

  
}

/* Media queries para dispositivos grandes */
@media screen and (min-width: 992px) {

  .card-container_selec_menu {

    gap: 20px;

  }

  /* Ajusta el ancho de los cards al 100% del contenedor con un espacio entre ellos */
  .card_selec_menu {
    width: calc(25% - 20px);
    padding: 50px;
  }
}




/*=============== setting ===============*/
.card-container_setting {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px;
  align-items: center;
  height: 100vh;
  padding: 0 10px; /* Ajusta el padding lateral para todos los dispositivos */
  margin-bottom: 0px; /* Añade un espacio inferior al contenedor */
  padding-bottom: 50px; /* Añade un padding inferior al contenedor */
}

.card_setting {
  width: calc(50% - 20px); /* Ajusta el ancho de los cards al 50% del contenedor con un espacio entre ellos */
  margin-bottom: 20px; /* Añade un espacio inferior entre los cards */
  padding: 40px;
  border-radius: 10px;
  background-color: #a3a3a3; /* Verde */
}

.card_setting h2 {
  color: black;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: center;
}

.card_setting p {
  color: black;
}

/* Media queries para dispositivos más pequeños */
@media screen and (max-width: 768px) {
  .card-container_setting {
    padding: 41% 10px; /* Ajusta el padding lateral para todos los dispositivos */

  }
  /* Ajusta el ancho de los cards al 100% del contenedor con un espacio entre ellos */
  .card_setting {
    width: calc(100% - 20px);
  }
}

/* Media queries para tabletas */
@media screen and (min-width: 768px) and (max-width: 992px) {

  .card-container_setting {

    gap: 20px;

  }

  /* Ajusta el ancho de los cards al 50% del contenedor con un espacio entre ellos */
  .card_setting {
    width: calc(50% - 20px);
    padding: 50px;
  }

  
}

/* Media queries para dispositivos grandes */
@media screen and (min-width: 992px) {

  .card-container_setting {

    gap: 20px;

  }

  /* Ajusta el ancho de los cards al 100% del contenedor con un espacio entre ellos */
  .card_setting {
    width: calc(25% - 20px);
    padding: 50px;
  }
}






/*=============== Video Player ===============*/


.container_header_video_player {
  display: flex;
  align-items: center;
  height: 75px;
  padding: 10px;
  background-color: #fff;
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 1000;
}

.logo_video_player img {
  width: 70px; /* Ajusta el ancho según sea necesario */
  height: auto; /* Mantiene la proporción de aspecto */
  margin-right: 10px; /* Espacio entre la imagen y el texto */
}

.title_video_player h2 {
  margin: 0; /* Elimina el margen superior e inferior del título */
  text-align: left;
  color: black;
  font-size: 15px;
}

.container_video {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.player-container_video {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#player {
  width: 100%;
  height: 360px;
}

.video-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.video-list li {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Suaviza el cambio de color */
}

.video-list li:hover {
  background-color: #f2f2f2;
}

.video-list li a {
  text-decoration: none;
  color: #333;
}

.video-list li a:hover {
  text-decoration: underline;
}

.titleAndClass {
  text-align: left;
  color: black;
}

.titleAndClass h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.titleAndClass p {
  font-size: 21px;
}

.options {
  text-align: center;
  padding-top: 10px;
}

.options ul {
  list-style: none;
  padding: 0;
}

.options ul li {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid #ccc; /* Añade borde gris a los elementos li */
  border-radius: 5px; /* Bordes redondeados para los elementos li */
}

.options ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 5px 10px; /* Ajusta el espacio entre el texto y el borde */
  background-color: #f2f2f2; /* Color de fondo gris claro */
  border: 1px solid #ccc;
  border-radius: 5px;
}

.options ul li a:hover {
  background-color: #888; /* Cambia el color de fondo al pasar el mouse */
  color: white; /* Cambia el color del texto al pasar el mouse */
}

.content-container {
  display: none;
}
.content-container.active {
  display: block;
}

/* Estilo para resaltar el video activo */
.active-video {
  color: white;
  font-weight: bold;
  border: 2px solid #a3a3a3;
}

.active-video a {
  color: white;
}

.active-video a:hover {
  text-decoration: none;
}

/* Estilo cuando el video está activo pero no hay hover */
.video-list li.active-video:hover {
  background-color: #a3a3a3; /* Ligeramente más oscuro cuando se hace hover en el video activo */
}





/* Formulario de completado del curso */
.course-completion-form {
  text-align: center;
  margin-top: 0px;
}

.course-completion-form h3 {
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 15px;
}

.course-completion-form form {
  background-color: #1d1f26;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.course-completion-form input[type="checkbox"] {
  display: none;
}

.course-completion-form input[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 18px;
  color: #ffffff;
}

.course-completion-form input[type="checkbox"] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #4CAF50;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.course-completion-form input[type="checkbox"]:checked + label:before {
  background-color: #4CAF50;
}

.course-completion-form input[type="checkbox"]:checked + label:after {
  content: '\2713'; /* Checkmark */
  position: absolute;
  left: 5px;
  top: -2px;
  font-size: 18px;
  color: white;
}

.course-completion-form button {
  margin-top: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.course-completion-form button:hover {
  background-color: #45a049;
}

.course-completion-form button:focus {
  outline: none;
  box-shadow: 0 0 5px #4CAF50;
}



@media screen and (max-width: 768px) {
  .container_video {
    padding: 0px;
  }


  #player {
      height: 240px;
  }

  .title_And_Resource_Container {
    background-color: white;
    padding: 20px;
    width: 100%; /* Ajuste para que el contenedor ocupe todo el ancho */
  
  }

  .video-list {
    margin-top: 0px;
    padding: 10px;
  }
  
}

/* Media queries para tabletas */
@media screen and (min-width: 768px) and (max-width: 992px) {

  .container_video {
    padding: 0px;
  }
  #player {
      height: 450px;
  }
  .title_And_Resource_Container {
    background-color: white;
    padding: 20px;
    width: 100%; /* Ajuste para que el contenedor ocupe todo el ancho */
  }

  .video-list {
    margin-top:0px;
    padding: 10px;
  }

  
}

/* Media queries para dispositivos grandes */
@media screen and (min-width: 992px) {

  .container_video {
    padding: 0px;
  }
  #player {
      height: 450px;
  }
  .title_And_Resource_Container {
    background-color: white;
    padding: 20px;
    width: 100%; /* Ajuste para que el contenedor ocupe todo el ancho */

  }
  .video-list {
    margin-top:0px;
     padding: 10px;
  }

}





/*=============== Usuario.php ===============*/
.settings-icon {
  margin-left: auto; /* Empuja el icono a la derecha */
  font-size: 35px; /* Tamaño del icono */
}

.settings-icon a {
  text-decoration: none; /* Quitar subrayado del enlace */
  color: #000; /* Color del icono */
}

.settings-icon a:hover {
  color: #333; /* Color del icono al pasar el ratón */
}


.container_user {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Hace la imagen redonda */
  overflow: hidden; /* Asegura que la imagen no salga de los límites del círculo */
  margin-right: 20px;
  position: relative;
  display: inline-block; /* Para que el contenedor no ocupe toda la anchura */
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen al tamaño del círculo */
}

.upload-text {
  position: absolute;
  bottom: 0; /* Alinear con la parte inferior */
  left: 0;
  width: 100%; /* Cubrir toda la anchura del contenedor */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo opaco */
  color: #fff;
  padding: 5px 10px;
  border-radius: 0 0 5px 5px; /* Borde redondeado solo en la parte inferior */
  font-size: 12px;
  text-align: center;
}


.user-name h2 {
  margin: 0;
  color: #ffffff;
}

.classes_user, .qr-code, h3 {
  margin-bottom: 20px;
  color: #ffffff;
}

.classes_user ul {
  list-style-type: none;
  padding: 0;
}

.classes_user li {
  position: relative; /* Para agregar la línea absoluta */
}

.classes_user li:not(:last-child):after {
  content: '';
  position: absolute;
  width: calc(100% - 40px); /* Ajusta la longitud de la línea */
  height: 1px;
  background-color: rgb(255, 255, 255);
  bottom: 0;
  left: 20px; /* Ajusta el desplazamiento de la línea */
}

.classes_user a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  margin-top: 10px;
}

.ver-mas-container {
  text-align: center;
}
.ver-mas {
  background-color: #a3a3a3; /* Color de fondo gris claro */
}

.qr-code img {
  max-width: 200px;
  display: block; /* Para centrar la imagen */
  margin: 0 auto; /* Para centrar la imagen */
}

.qr-code {
  text-align: center;
  margin: 20px;
}
.button-container {
  margin-top: 10px;
}
.button-container button {
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}



/*=============== reel-player ===============*/
.container_reel {
  width: 100%; /* Ajusta el ancho según tus necesidades */
  /*max-width: 600px; */ /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.player-container_reel {
  position: relative;
  /* padding-bottom: 56.25%; */   /* Proporción 16:9 para el reproductor de video */
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.player-container_reel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}







/*=============== course_description.php ===============*/
.container_description_course {
  max-width: 95%;
  margin: 0px auto;
  background-color: hsl(0, 0%, 100%);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(255, 254, 254, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container_list_description {
  max-width: 95%;
  margin: 10px auto;
  background-color: #13161d;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(254, 254, 254, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.course-details {
  padding-right: 20px;
}

.course-details h1 {
  color: #000000;
}

.course-details .author {
  font-style: italic;
  color: #000000;
}

.course-details .description {
  color: #000000;
}

.start-button {
  background-color: #c8e363;
  color: rgb(255, 255, 255);
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.start-button:hover {
  background-color: #45a049;
}

.course-image {
  width: 100%; /* Ajustar el ancho de la imagen */
  order: -1; /* Colocar la imagen al principio del contenedor en móvil */
  max-width: 100%; /* Limitar el ancho máximo de la imagen */
}
.course-image img{
border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .container_description_course {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .course-details {
    flex: 1;
    padding-right: 0; /* Eliminar el relleno en tablet y pantalla grande */
    max-width: calc(50% - 10px); /* Limitar el ancho máximo del texto */
  }

  .course-image {
    order: 1; /* Colocar la imagen al final del contenedor en tablet y pantalla grande */
    max-width: calc(50% - 10px); /* Limitar el ancho máximo de la imagen */
  }
}




/*=============== course_by_subject.php ===============*/
.card__image_subjects{
  border-radius: 50%; /* Hacer la imagen circular */
  overflow: hidden;
  width: 100px; /* Ajustar el tamaño de la imagen */
  height: 100px; /* Ajustar el tamaño de la imagen */
  margin: 0 auto;
}
.card__img_subjects{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__article_subjects{
  width: 388px;
  border-radius: 8px;
  overflow: hidden;
  justify-content: left;
}

.card__data_subjects{
    /* background-color: hsl(0deg 0% 100%); */
    /* padding: 0.8rem; */
    border-radius: 0rem;
    text-align: -webkit-match-parent;
    position: relative;
    z-index: 15;
    line-height: 1.7;
    text-align: center;
    font-weight: 300;
}
.card__data_subjects h3,
.card__data_subjects p {
  color: rgb(255, 255, 255); /* Cambia el color del texto a negro */
  font-size: 15px;

  /* Ocultar lineas de Titulo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Cambia el número de líneas según tu preferencia */
}


.car__name_subjects{
  font-size: var(--h2-font-size);
  color: var(--second-color);
  margin-bottom: .75rem;
}

/* Para dispositivos móviles */
@media (max-width: 768px) {
  .card__article_subjects {
    width: calc(100% - 2rem); /* Utiliza el 100% del ancho menos los márgenes */
    max-width: 100px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 auto 2rem; /* Centra las tarjetas y agrega un margen inferior */
    width: 300px;
  }

  .card__data_subjects {
    padding: 0.5rem; /* Reduce el relleno del contenedor de datos */
  }

  .card__name_subjects {
    font-size: 0.9rem; /* Reduce el tamaño del nombre */
    margin-bottom: 0.25rem; /* Reduce el margen inferior del nombre */
  }


}



/* For medium devices */
/* Para tabletas */
@media (min-width: 768px) and (max-width: 992px) {
  .card__article_subjects {
    width: calc(50% - 2rem); /* Utiliza el 50% del ancho menos los márgenes */
    max-width: 120px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 1rem 2rem; /* Agrega un margen en los lados y un margen inferior */
    width: 300px;
  }

  .card__name_subjects {
    font-size: 1rem; /* Tamaño de fuente normal para el nombre */
    margin-bottom: 0.5rem; /* Margen inferior normal para el nombre */
  }

}

/* For large devices */
@media (min-width: 992px) {
  .card__article_subjects {
    width: calc(33.33% - 2rem); /* Utiliza el 33.33% del ancho menos los márgenes */
    max-width: 130px; /* Establece un ancho máximo para evitar que las tarjetas sean demasiado anchas */
    margin: 0 1rem 2rem; /* Agrega un margen en los lados y un margen inferior */
    width: 300px;
  }

  .card__name_subjects {
    font-size: 1rem; /* Tamaño de fuente normal para el nombre */
    margin-bottom: 0.5rem; /* Margen inferior normal para el nombre */
  }

}


/*=============== chat.php ===============*/
#chat-container {
  position: fixed;
  bottom: 140px; /* Ajusta el valor según el tamaño de la barra de navegación */
  left: 0;
  width: 100%;
  height: calc(100vh - 225px); /* Ajusta el valor según el tamaño de la barra de navegación y el espacio deseado */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow-y: auto;
  padding: 10px;
  z-index: 1001; /* Asegura que el chat esté por encima de la barra de navegación */
}

.message {
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 5px;
  max-width: 70%;
  word-wrap: break-word; /* Asegura que las palabras largas se rompan y no creen un desplazamiento horizontal */
}


.user-message {
  background-color: #DCF8C6;
  text-align: right;
  float: right;
  margin-bottom: 10px;
  clear: both;
  color: #000;
}

.bot-message {
  background-color: #E5E7EB;
  text-align: left;
  float: left;
  color: #000;
  margin-bottom: 20px;
}

.input-container {
  position: fixed;
  bottom: 70px; /* Ajusta el valor según el tamaño de la barra de navegación */
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1001; /* Asegura que el botón esté por encima de la barra de navegación */
}

.input-container input {
  width: calc(100% - 90px);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.input-container button {
  width: 70px;
  background-color: #c8e363;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 15px;
  cursor: pointer;
}


/* curriculum cv */

.cv-upload-form {
  margin-top: 20px;
}

.cv-upload {
  margin: 20px 0;
}
.cv-upload-text {
  position: relative;
  bottom: 0; /* Alinear con la parte inferior */
  left: 0;
  width: 100%; /* Cubrir toda la anchura del contenedor */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo opaco */
  color: #fff;
  padding: 5px 10px;
  border-radius: 0 0 5px 5px; /* Borde redondeado solo en la parte inferior */
  font-size: 12px;
  text-align: center;
}

.cv-label {
  cursor: pointer;
  display: block;
  padding: 10px 20px;
  /* background-color: #007bff; */
  color: white;
  border-radius: 5px;
  text-align: center;
}

.submit-container {
  text-align: center;
  margin-top: 20px;
}

.submit-button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}