/*ESTILOS A TODA LA PAGINA ENTERA*/
* {
  box-sizing: border-box;
}  
body{
  margin: 0;
  padding: 0;
}

/*ESTILOS A LOS SWEET ALERTS*/
.custom-swal-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
}
.custom-swal-text {
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
}
.custom-swal-button {
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
}

/*ESTILOS AL HEADER*/
.cabecera{
  width: 100%;
  height: 9vw;
  border-top: 1vw solid rgb(255, 255, 0);
  border-bottom: 0.7vw solid rgb(255, 255, 0);
  background-color: rgb(4, 62, 4);
  display: flex; 
  align-items: center; /*alinea logo y nombre al centro horizontalmente*/
  justify-content: space-between; /* Distribuye el espacio entre los elementos */
  padding: 0 20px;
}
.logo-container {
  display: flex;
  align-items: center;
  width: 60%; /* Ajusta según sea necesario */
  flex-wrap: wrap; /* Permite que el texto se ajuste */
}
#logo{
  width: 100%;
  max-width: 7vw;
}
#nombre_pagina{
  width: 100%;
  max-width: 35vw;
}
.login{
  margin-right: 10px;
  width: 40%;
}
.btn-log{
  width: 100%;
  max-width: 150px;
  margin-right: 20px;
  color: #ffff00;
  font-family: 'Kanit', sans-serif;
  font-size: 120%;
  border-radius: 5px;
  border: 4px solid #ffff00;
  background-color: rgb(7, 43, 7);
  float: right;
  cursor: pointer; /* Añadir cursor: pointer aquí */
}
.btn-log:hover{
  color: #ffffff;
  border: 4px solid #ffffff;
  background-color: rgb(233, 91, 40);
}

/*AVATAR*/
/* Menú de usuario */
.user-menu {
  margin-right: 2%; /* Distancia de 15px del borde derecho */
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#user-avatar {
  width: 7vw; /* Ajusta el tamaño del avatar según tus preferencias */
  height: 7vw; /* Mantiene la proporción de la imagen */
  border-radius: 50%; /* Hace la imagen redonda */
  border: 3px solid yellow;
  object-fit: cover; /* Asegura que la imagen se ajuste bien dentro del contenedor */
  background-color: yellow;
}
.profile-pic-avatar {
  width: 7vw; /* Ajusta el tamaño del avatar según tus preferencias */
  height: 7vw; /* Mantiene la proporción de la imagen */
  border-radius: 50%; /* Hace la imagen redonda */
  border: 3px solid yellow;
  object-fit: cover; /* Asegura que la imagen se ajuste bien dentro del contenedor */
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0; /* Alinea el menú desplegable al lado derecho del avatar */
  top: 100%; /* Coloca el menú debajo del avatar */
  background-color: rgb(68, 68, 68, 0.8);
  min-width: 150px; /* Anchura mínima del menú */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  text-align: center;
}
.dropdown-content a {
  color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: 'Kanit', sans-serif;
  font-size: 100%;
}
.dropdown-content a:hover {
  background: rgb(255, 255, 0, 0.7);
  color: #043E04;
}
/* Mostrar el menú desplegable al pasar el ratón por encima */
.user-menu:hover .dropdown-content {
  display: block;
}
.userName{
  padding: 5px 0;
  margin: 0;
  font-family:'Kanit', sans-serif;
  font-size: 130%;
  font-style: italic;
  color: yellow;
  background-color:rgb(86, 169, 86);
}
.userRole{
  padding: 5px 0;
  margin: 0;
  font-family:'Kanit', sans-serif;
  color: red;
  font-size: 120%;
  background-color: rgb(255, 255, 0, 0.8);
  border-bottom: 5px solid #043E04;
}

/*ESTILOS AL NAV-BAR*/
#menu{
  width: 100%;
  min-height: 4vw;
  height: auto;
  padding-left: 18px;
  background-color: rgb(32, 31, 31);
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: left;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 10vh; /*alto de fondo del navbar*/
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 100%; /*tamaño letra del menu*/
  font-family: 'Kanit', sans-serif;
}
/* #menu a.dropdown-arrow:after {
	content: "\23F7";
	margin-left: 5px;
} */
#menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px; /* Grosor del subrayado */
  background-color: rgb(255, 255, 0); /* Color del subrayado */
  left: 0;
  bottom: 12px;
  transition: width 0.3s ease-in-out; /* Duración de la animación */
}
#menu a:hover::after {
  width: 100%; /* Hace que el subrayado se extienda por completo */
}
#menu li a:hover {
	color: rgb(255, 255, 0);
	/* background: rgb(255, 255, 0,0.7); */
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 10vh;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 10vh;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 100%;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}
/*Submenues*/
/* Estilo base de la flecha */
.arrow {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}
/* Cuando el usuario pasa el mouse sobre el elemento padre */
#menu li:hover > a .arrow,
#menu li:focus-within > a .arrow {
  transform: rotate(180deg);
}
#menu ul.sub-menus{
	height: auto;
	/* overflow: hidden; */
	width: 150%;
	background: rgba(63, 61, 61, 0.8);
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: centre;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 100%; /*Tamaño letra del menu classes*/
  text-align: center;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: rgb(4, 62, 4, 0.7);
	color: yellow;
}

/*MAIN*/
.cuerpo{
  margin: 0;
  padding: 0;
}
/*ESTILOS A SECCION BIENVENIDA*/
.welcome-message {
  margin: 0;
  height: 100%;
  min-height: 500px;
  font-family: 'Kanit', sans-serif;
  background-image: url('/img/cotton.jpg');
  background-size: cover;
  background-position: center;
}
.welcome-message h1 {
  margin: 0;
  padding: 100px 30px 50px 30px;
  font-family: "Agbalumo", system-ui;
  color: #FFFFFF;
  width: 100%;
  font-size: 5vw; /* Tamaño de fuente responsivo */
  text-align: center;
  /* Efecto de luces de neón intercalado */
  text-shadow: 
    0 0 5px #043E04,  
    0 0 10px #043E04, 
    0 0 20px #043E04, 
    0 0 30px #FFD700, 
    0 0 40px #FFD700, 
    0 0 50px #FFD700, 
    0 0 60px #FFD700; 

  animation: neonGlow 1s ease-in-out infinite alternate; /* Animación */
}
/* Animación intercalando verde oscuro y amarillo */
@keyframes neonGlow {
  0% {
    text-shadow: 
      0 0 5px #043E04, 
      0 0 10px #043E04, 
      0 0 20px #043E04, 
      0 0 30px #FFD700, 
      0 0 40px #FFD700, 
      0 0 50px #FFD700, 
      0 0 60px #FFD700;
  }
  100% {
    text-shadow: 
      0 0 2px #FFD700, 
      0 0 4px #FFD700, 
      0 0 8px #FFD700, 
      0 0 12px #043E04, 
      0 0 16px #043E04, 
      0 0 20px #043E04, 
      0 0 25px #043E04;
  }
}
.subtext {
  font-family: 'Kanit', sans-serif;
  color: #ffffff;
  margin: 0 auto; 
  padding: 20px;
  text-align: center; /* Alinea el texto al centro */
  font-size: 2.2vw; /* Tamaño de fuente responsivo */
  background-color: rgba(59, 53, 53, 0.6);
  width: 60%;
  position: relative;
  border-radius: 15px; /* Bordes redondeados */

  /* Borde difuminado suave */
  box-shadow: 0 0 30px 20px rgba(59, 53, 53, 0.6);
}
.subtext p{
  padding: 0;
  margin: 0;
}
.profesor {
  font-size: 1.5vw; /* Tamaño de fuente responsivo */
}

/*ESTILOS A SECCION CURSOS*/
.cursos {
  margin: 0;
  border-top: 1vw solid #043E04;
  font-family: 'Kanit', sans-serif;
  padding:  40px 0;
  overflow-x: hidden;
  background-image: url('/img/fondoverdeoscuro.jpg');
  background-size: cover;
  background-position: center;
}
.cursos h1{
  margin: 0;
  padding-bottom: 10px;
  color: #FFFFFF;
  text-align: center;
  font-size: 3vw;
}
.carousel {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: auto;
  overflow: hidden;
}
.carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
  position: relative;
  text-align: center; /* Centra el contenido dentro del carrusel */
  overflow: hidden; /* Oculta el contenido que se desborda */
  border-radius: 10px;
}
.carousel-item img {
  width: 100%;
  height: 400px; /* Establece la altura deseada */
  object-fit: cover; /* Ajusta la imagen para cubrir el área sin distorsionar */
  display: block;
}
.carousel-caption {
  position: absolute;
  width: 30%;
  bottom: 20px; /* Ajusta según tus necesidades */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta el elemento al centro */
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
  text-align: center; /* Centra el texto dentro del caption */
}
.carousel-caption h3 {
  margin: 0;
  font-size: 150%;
}
.carousel .btn {
  display: inline-block;
  width: 50%;
  margin-top: 10px;
  padding: 5px;
  color: yellow;
  font-size: 100%;
  background-color: rgb(4, 62, 4, 0.8);
  text-decoration: none;
  border-radius: 5px;
}
.carousel .btn:hover {
  background-color: rgb(7, 187, 7, 0.8);
  color: #ffffff;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background-color 0.3s;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/*SECCION TIMETABLE*/
.horarios{
  background-color: #043E04;
  border-top: 0.5vw solid yellow;
  border-bottom: 0.8vw solid yellow;
  padding: 7% 0;
}
.horarios h1{
  padding: 0 2%;
}
.timetable{
  margin-top: 0; /*distancia de altura desde el borde superior al top de pantalla*/
  font-size: 200%;
  color:#FFFFFF;
  text-align: center;
  font-family: 'Kanit', sans-serif;
}
table{
  width: 100%;
  margin-top: 2%;
  border-collapse: collapse; /*Elimina la doble linea combinadolas en una*/
  margin-left: auto;
  margin-right: auto;
}
th, td{
  border: 3px solid rgb(4, 62, 4);
  padding: 10px;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}
.days{
  color: white;
  font-size: 1.3vw;
  text-shadow: 0px 0px 3px black;
  font-style: italic;
  background-color: rgb(6, 252, 6);
}
.hora{
  background-color: orange;
  font-style: italic;
  font-size: 1.3vw;
}
.clase{
  background-color: rgb(253, 253, 86);
  font-size: 1.3vw;
}
.vacio{
  background-color: black;
}

/*SECTION CALENDAR y CALENDAR-EVENTS*/
.calendario {
  width: 100%;
  margin: 0;
  padding-bottom: 40px;
  font-family: 'Kanit', sans-serif;
  background-image: url('/img/wheat.jpg');
  background-size: cover;
  background-position: center;
}
.calendario h1 {
  text-align: center;
  margin: 0;
  padding: 40px 0 20px 0;
  font-size: 3vw;
  color: #043E04;
}
.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: #043E04;
  width: 90%;
  margin: 0 auto;
}
#prev-month, #next-month {
  background-color: transparent;
  border: none;
  color: yellow;
  font-size: 2em;
  font-weight: 900; /* Texto más bold */
  cursor: pointer; /* Agregar el pointer cursor */
  transition: color 0.3s, transform 0.3s; /* Transición suave */
}
#prev-month:hover, #next-month:hover {
  color: orangered; /* Color de texto en hover */
  transform: scale(1.1); /* Efecto de aumento al hacer hover */
}
.calendar-header h2 {
  font-size: 2em;
  font-weight: bold;
  color: yellow;
}
.calendar {
  margin: 0 auto 40px auto; 
  width: 90%;
  border-collapse: collapse;
}
.calendar th, .calendar td {
  border: 2px solid #043E04;
  text-align: center;
  padding: 10px;
  width: calc(100% / 7); /* Asegura que cada columna ocupe el mismo ancho */
  position: relative; /* Establece la posición relativa para las celdas */
  background-color: rgba(233, 230, 230, 0.5);
}
/* Posicionar los números en la parte superior derecha de la celda */
.calendar td span {
  position: absolute;
  top: 5px; /* Distancia desde el borde superior */
  left: 5px; /* Distancia desde el borde derecho */
  font-weight: bold;
  color: #333;
}
.calendar td.today {
  background-color: rgb(255, 255, 0, 0.6); /* Opcional: fondo ligero para destacar el día */
}
.calendar th {
  background-color: orangered;
  color: white;
}
.calendar td {
  height: 120px; /* Ajusta la altura según lo que necesites */
  min-height: 80px; /* Para asegurar que no se reduzca demasiado */
  vertical-align: top; /* Asegura que el contenido quede alineado arriba si hay texto */
  cursor: pointer;
}
.calendar td:hover {
  background-color: rgb(127, 120, 120, 0.7);
}
/* Estilo para el texto de los eventos dentro de las celdas */
.event-label {
  /* position: relative; */ /*LE QUITO ESTO PARA QUE LO ESCRITO SE INCERTE DENTRO DE LA CELDA*/
  bottom: 5px;
  left: 5px;
  background-color: rgb(255, 255, 255, 0.5);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 1em;
  color: black;
  font-weight: bold;
  font-family: 'Kanit', sans-serif;
}
/*Referencias del calendario*/
.calendar-legend {
  margin: 20px auto 0 auto; /* margen arriba y centrado horizontal */
  padding: 10px;
  border: 1px solid #ccc;
  width: fit-content;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.calendar-legend h3{
  margin: 3px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}
.color-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 1px solid #000;
}
.color-box.holiday {
  background-color: yellow;
}
.color-box.exam {
  background-color: #05F401;
}

/*ESTILOS AL DICCIONARIO */
.diccionario{
  width: 100%;
  border-top: 1vw solid yellow;
  padding: 7% 0;
  background-image: url('/img/blue.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center; /*Centra todo lo que esta en la columna: textos e imagenes*/
  font-family: Arial, Helvetica, sans-serif;
}
.translator{ /*IMAGEN principal del traductor*/
  width: 30%;
  border-radius: 5px;
  margin-top: 30px;
  box-shadow: 1px 1px 5px rgb(4, 62, 4);
}
.diccionario h2{
  color: yellow;
  font-size: 3vw;
  padding: 0 2%;
  margin-top: 15px;
  margin-bottom: 15px;
}
.diccionario p{
  padding: 0 2%;
  font-size: 1.5vw;
}
.spanishdict-enlace{
  width: 30%;
  padding-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.boton-enlace {
  padding: 1% 2%;
  font-size: 2vw;
  text-align: center;
  text-decoration: none;
  background-color: #4CAF50; /* Color de fondo del botón, puedes cambiarlo según tus preferencias */
  color: white; /* Color del texto del botón */
  border: 2px solid yellow; /* Borde del botón */
  border-radius: 5px; /* Bordes redondeados del botón */
  transition: background-color 0.3s; /* Efecto de transición para el color de fondo */
  cursor: pointer;
}
.boton-enlace:hover {
  background-color: rgb(4, 62, 4); /* Cambia el color de fondo al pasar el mouse sobre el botón */
  color: yellow; /* Cambia el color del texto al pasar el mouse sobre el botón */
}

/* FOOTER */
footer {
  width: 100%;
  border-top: 1.3vw solid rgb(32, 31, 31);
  border-bottom: 1vw solid yellow;
  background-color: rgb(4, 62, 4);
  padding-top: 1%;
}
footer p {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 100%;
  text-align: center;
}
.icon-envelope, .icon-whatsapp {
  margin-right: 10px;
}
.redes {
  margin-top: 25px;
  padding-bottom: 3%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.logo-escuela, .escuela {
  width: 12%;
  border-radius: 10px 0px;
  margin-bottom: 15px;
  box-shadow: 0 0 5px yellow;
}
.escuela {
  width: 35%;
  margin-bottom: 30px;
}
.iconos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
a {
  text-decoration: none; /* para quitar los subrayados a los enlaces */
}
.icon-facebook2, .icon-instagram {
  font-size: 150%; /* Tamaño de los iconos en font */
  color: yellow;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.icon-facebook2:hover, .icon-instagram:hover {
  color: orange;
  transform: scale(1.2);
}

/*-----------------------------------------------------------------------------------------------------------------*/

/* MEDIA QUERIES PARA RESPONSIVIDAD */

/* PARA TELÉFONOS -------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  
  /*ESTILOS AL HEADER*/
  .cabecera{
    height: 17vw;
    border-top: 2vw solid rgb(255, 255, 0);
    border-bottom: 1.2vw solid rgb(255, 255, 0);
    padding: 0 10px;
  }
  .logo-container {
    width: 70%; /* Ajusta según sea necesario */
  }
  #logo{
    max-width: 12vw;
  }
  #nombre_pagina{
    max-width: 45vw;
  }
  .login{
    width: 30%;
  }
  .btn-log{
    max-width: 70px;
    margin-right: 0px;
    font-size: 90%;
    border-radius: 5px;
    border: 2px solid #ffff00;
  }
  .btn-log:hover{
    border: 2px solid #ffffff;
  }

  /*AVATAR*/
  /* Menú de usuario */
  .user-menu {
    margin-right: 2%; /* Distancia de 15px del borde derecho */ 
  }
  #user-avatar {
    width: 12vw; /* Ajusta el tamaño del avatar según tus preferencias */
    height: 12vw; /* Mantiene la proporción de la imagen */
  }
  .profile-pic-avatar {
    width: 12vw; /* Ajusta el tamaño del avatar según tus preferencias */
    height: 12vw; /* Mantiene la proporción de la imagen */
  }
  
  /*ESTILOS AL NAV-BAR*/
  #menu {position: relative; height: 10vw; display: flex; align-items: center;}
  #menu input, #menu label {position:absolute; display:block; left: 0; } /*Menu hamburguesa alineado a la izq*/
  #menu input {z-index:4}
  #menu input:checked + label {color:#FFFFFF;}
  #menu input:checked + label:before {content:"\00d7"} /*Caracter de una X */
  #menu input:checked ~ ul {display:block}
  #menu label:before{font-size: 5vw;} /* Ajusta este valor para cambiar el tamaño del ícono */
  #menu ul {background:rgba(47, 48, 48, 0.8);position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
  #menu ul.sub-menus {width:100%;position:static;}
  #menu ul.sub-menus a {padding-left:30px;}
  #menu li {display:block;float:none;width:auto;}
  
  /*MAIN*/
  /*ESTILOS A SECCION BIENVENIDA*/
  .welcome-message h1 {
    font-size: 10vw; 
  }
  .subtext {
    font-size: 4vw; 
    width: 90%;
  }
  .profesor {
    font-size: 3vw; 
  }

  /*ESTILOS A SECCION CURSOS*/
  .cursos {
    border-top: 3vw solid #043E04;
  }
  .cursos h1{
    font-size: 6vw;
  }
  .carousel {
    max-width: 300px; 
  }
  .carousel-item img {
    height: 300px; /* Establece la altura deseada */
  }
  .carousel-caption {
    width: 50%;
  }
  .carousel-caption h3 {
    font-size: 4vw;
  }
  
  /*SECCION TIMETABLE*/
  .horarios{
    border-top: 3vw solid yellow;
    border-bottom: 2vw solid yellow;
  }
  .timetable{
    font-size: 3.5vw;
  }
  .days{
    font-size: 1.6vw;
  }
  .hora{
    font-size: 1.6vw;
  }
  .clase{
    font-size: 1.6vw;
  }
  
  /*SECTION CALENDAR y CALENDAR-EVENTS*/
  .calendario h1 {
    font-size: 5vw;
  }
  .calendar-header {
    width: 100%;
  }
  #prev-month, #next-month {
    font-size: 1.5em;
  }
  .calendar-header h2 {
    font-size: 1.5em;
  }
  .calendar {
    width: 100%;
    margin-bottom: 15px;
  }
  .calendar th {
    font-size: 1.7vw;
  }
  .calendar td {
    height: 100px; /* Ajusta la altura según lo que necesites */
    padding: 20px 0 0 0;
    font-size: 2vw;
  }
  /* Estilo para el texto de los eventos dentro de las celdas */
  .event-label {
    padding: 0;
    font-size: 1.6vw;
    font-weight: 100;
  }

  /*ESTILOS AL DICCIONARIO */
  .diccionario{
    border-top: 3vw solid yellow;
  }
  .translator{ /*IMAGEN principal del traductor*/
    width: 40%;
  }
  .diccionario h2{
    font-size: 5vw;
  }
  .diccionario p{
    font-size: 2.5vw;
  }
  .spanishdict-enlace{
    width: 50%;
  }
  .boton-enlace {
    font-size: 3vw;
  }
 
  /* FOOTER */
  footer {
    border-top: 3vw solid rgb(32, 31, 31);
    border-bottom: 2vw solid yellow;
  }
}