/* ============= UTILIDADES DE LAYOUT (de styles.css) ============= */
.txt-rt {
  text-align: right !important;
}

.txt-lt {
  text-align: left !important;
}

.txt-center {
  text-align: center !important;
}

.float-rt {
  float: right !important;
}

.float-lt {
  float: left !important;
}

.clear {
  clear: both !important;
}

.pos-relative {
  position: relative !important;
}

.pos-absolute {
  position: absolute !important;
}

.vertical-base {
  vertical-align: baseline !important;
}

.vertical-top {
  vertical-align: top !important;
}

/* ============= INPUTS MODERNOS CON ANIMACIONES ============= */
.input-animado {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 100;
  width: 94.5%;
  display: block;
  border: none;
  padding: 0.8em;
  border: solid 1px rgba(255, 255, 255, 0.37);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #007bff 4%);
  background-position: -800px 0;
  background-size: 100%;
  background-repeat: no-repeat;
}

.input-animado:focus {
  background-position: 0 0;
  outline: none;
}

.input-animado:focus::placeholder {
  color: rgba(0, 123, 255, 0.7);
  transform: translateY(-25px);
  font-size: 0.8em;
  transition: all 0.3s ease;
}

/* ============= CHECKBOX PERSONALIZADO ============= */
.checkbox-custom {
  background: #007bff;
  cursor: pointer;
  width: 1.2em;
  height: 1.2em;
  position: relative;
}

.checkbox-custom:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #007bff;
  transition: 0.4s ease-in-out;
}

.checkbox-custom:checked:after {
  transform: rotate(-45deg);
  height: 0.5rem;
  border-color: #007bff;
  border-top-color: transparent;
  border-right-color: transparent;
}

/* ============= ANIMACIONES AVANZADAS ============= */
@keyframes rippling {
  50% {
    border-left-color: #007bff;
  }

  100% {
    border-bottom-color: #007bff;
    border-left-color: #007bff;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}


.fondo-contenedor {
  height: auto;
  background-size: cover;
}

.tipoenlace {
  transition: transform .3s;
  /* Animation */
  width: 6vh;
  height: 6vh;
  border-radius: 15%;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.466);
  margin: 0 auto;

}

.tipoenlace:hover {
  transform: scale(1.2);
  /* (110% zoom  */
}

.tipoenlace-local {
  transition: transform .3s;
  /* Animation */
  width: 7vh;
  height: 7vh;
}

.tipoenlace-local:hover {
  transform: scale(1.2);
  /* (110% zoom  */
}

.textoenlace {
  width: 7vh;
  color: black;
  font-size: 0.9em;
  text-align: center;
  text-shadow: 3px 3px 3px 3px #ffffff;
  overflow: hidden;
  font-size: 0.9em;
  line-height: 1;
}


.zoom_ad {
  transition: transform .5s;
  /* Animation */
  width: 80px;
  height: 90px;
  margin: 0 auto;
}

.zoom_ad:hover {
  transform: scale(1.2);
  /* (110% zoom  */
}

.zoom_cu {
  transition: transform .5s;
  /* Animation */
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.zoom_cu:hover {
  transform: scale(1.2);
  /* (110% zoom  */
}

.zoom_de {
  transition: transform .3s;
  /* Animation */
  width: 100px;
  height: 80px;
  margin: 0 auto;
}

.zoom_de:hover {
  transform: scale(1.2);
  /* (110% zoom  */
}

.zoom_btn_panel {
  transition: transform .5s;
  /* Animation */
  margin: 0 auto;
}

.zoom_btn_panel:hover {
  transform: scale(1.1);
  /* (110% zoom  */
}

.zoom_btn_estado {
  transition: transform .5s;
  /* Animation */
  margin: 0 auto;
}

.zoom_btn_estado:hover {
  transform: scale(1.3);
  /* (110% zoom  */
}

.zoom_nota {
  transition: transform .3s;
  /* Animation */
  margin: 0 auto;
}

.zoom_nota:hover {
  transform: scale(1.4);
  /* (110% zoom  */
}

.zoom_s_btn_panel {
  transition: transform .3s;
  /* Animation */
  margin: 0 auto;
}

.zoom_s_btn_panel:hover {
  transform: scale(1.02);
  /* (110% zoom  */
}

.zoom_pestana {
  transition: transform .5s;
  /* Animation */
  margin: 0 auto;
}

.zoom_pestana:hover {
  transform: scale(1.1);
  /* (110% zoom  */
}

.boton-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Si también quieres centrar horizontalmente */
  height: 35px;
  width: 100px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 0.8em;
  border-radius: 20px 20px 20px 20px;
  line-height: 1.1;
  /* Estilos específicos del botón */
  background-color: #969595;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  /* Quitar subrayado */
  padding: 0.25rem !important;
  /* espaciado de relleno (p-1), !important para asegurar la prioridad */
  cursor: pointer !important;
  /* Estilo del cursor como un puntero */

  /* margin: 0.25rem !important; /* margen (mx-1), !important para asegurar la prioridad */
  /* margin-bottom: 0.5rem !important; /* margen (mx-1), !important para asegurar la prioridad */

  /* Estilos de transición y transformación para el efecto de zoom */
  transition: transform .5s;
  /* Animación de la transición */
  margin: 0 auto;
  /* Centrar automáticamente */
  /* Asegurar que el contenido interno no bloquee los eventos */
  pointer-events: auto !important;
  /* Forzar contexto de apilamiento para Windows */
  position: relative;
  z-index: 1;
  isolation: isolate;

  /* Mejorar rendering en Windows */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hacer que todo el contenido interno del botón no capture eventos */
.boton-texto * {
  pointer-events: none !important;
  user-select: none;
}

.boton-texto:hover {
  /* Efecto de escala al pasar el ratón por encima para el zoom */
  transform: scale(1.1);
  /* Zoom de 110% */
  text-decoration: none;
  /* Quitar subrayado */
}

/* Variante para botones de carga de archivos: ancho 180px */
.boton-texto-file {
  width: 180px !important;
  min-width: 150px !important;
  justify-content: center;
  text-align: center;
}

.boton-texto-file label {
  cursor: pointer;
  margin: 0;
  width: 100%;
}

/* Variante para botones de IA: ancho 120px, alto 40px */
.boton-texto-ia {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Si también quieres centrar horizontalmente */
  height: 40px;
  width: 120px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 0.8em;
  border-radius: 20px 20px 20px 20px;
  line-height: 1.1;
  /* Estilos específicos del botón */
  background-color: #4f73f6;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  /* Quitar subrayado */
  padding: 0.25rem !important;
  /* espaciado de relleno (p-1), !important para asegurar la prioridad */
  cursor: pointer;
  /* Estilo del cursor como un puntero */

  margin: 0.25rem !important;
  /* margen (mx-1), !important para asegurar la prioridad */
  margin-bottom: 0.5rem !important;
  /* margen (mx-1), !important para asegurar la prioridad */

  /* Estilos de transición y transformación para el efecto de zoom */
  transition: transform .5s;
  /* Animación de la transición */
  margin: 0 auto;
  /* Centrar automáticamente */
}

.boton-texto-ia:hover {
  /* Efecto de escala al pasar el ratón por encima para el zoom */
  transform: scale(1.1);
  /* Zoom de 110% */
  text-decoration: none;
  /* Quitar subrayado */
  color: white;
}


h1 {
  font-size: 1.7em;
  letter-spacing: 0px;
}

.container-cinta {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  vertical-align: top;
}

.flex-container-cinta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  vertical-align: top;
  justify-content: center;
}

.flex-container-cintalat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.flex-container-cintafoot {
  display: flex;
  flex-wrap: wrap;
  vertical-align: top;
  align-items: center;
  justify-content: center;

}

.flex-container-recursos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  align-content: center;

}

.flex-container-programas {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  vertical-align: top;
  justify-content: left;
}

.flex-container-grupos {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  vertical-align: top;
  justify-content: left;
}

.flex-container-programa {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  vertical-align: bottom;
  justify-content: center;
}

.barra-botones {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  vertical-align: top;
  justify-content: center;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgb(206, 206, 206);
}

label {
  font-size: 0.8em;
  color: rgb(50, 50, 50);
}

/* Reglas más específicas para labels en formularios */
.card label,
.form-group label,
div label {
  color: rgb(30, 30, 30) !important;
  font-weight: 600;
}

input[type="text"] {
  font-size: 1em;
}

.categoria_programa {
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgba(138, 129, 54, 0.553);
  border-radius: 5px;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.tipo-curso {
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 34, 146, 0.466);
  /* border-radius: 0 50% 0 50%; */
}

.campus-case {
  height: 5vh;
  font-size: 1.7vh;
  text-align: Center;
  color: white;
  background-color: #003bb17a;
  /* border-radius: 0 0 10px 10px; */
}


.programa-case {
  height: 5vh;
  font-size: 1.8vh;
  margin: 0;
  text-align: left;
  color: white;
  background-color: #00000077;
  /* border-radius: 0 0 10px 10px;*/
}

.nivel-case {
  height: 5vh;
  font-size: 1.5vh;
  text-align: center;
  color: white;
  background-color: #7387e070;
  /* border-radius: 0 0 10px 10px; */
}

.area-case {
  height: 5vh;
  font-size: 1.3vh;
  text-align: left;
  color: white;
  background-color: #00000079;
  /* border-radius: 0 0 10px 10px; */
}

.duracion-case {
  height: 5vh;
  font-size: 1.2vh;
  text-align: center;
  color: white;
  background-color: #00000065;
  /* border-radius: 0 0 10px 10px;*/
}

.periodo-case {
  height: 5vh;
  font-size: 1.4vh;
  text-align: center;
  color: white;
  background-color: #00000096;
  /* border-radius: 0 0 10px 10px; */
}

.tipo-case {
  height: 5vh;
  font-size: 1.7vh;
  margin: 0;
  text-align: left;
  color: white;
  background-color: #012452c2;
  /* border-radius: 0 0 10px 10px;*/
}

.estado-case {
  height: 5vh;
  font-size: 1.8vh;
  text-align: left;
  color: white;
  background-color: #18834e;
  /* border-radius: 0 0 10px 10px; */
}

.estadoasen-case {
  height: 5vh;
  text-align: left;
  color: white;
  background-color: #858312;
  /* border-radius: 0 0 10px 10px; */
}

.grupo-case {
  height: 5vh;
  font-size: 1.5vh;
  margin: 0;
  vertical-align: middle;
  text-align: center;
  color: white;
  background-color: #0000665b;
  border-radius: 10px 10px 10px 10px;
}

.tag-case {
  font-size: 1vh;
  text-align: left;
  color: rgb(255, 255, 255);
}

.recurso {

  border-radius: 15%;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.466);
}

.vertical-text {
  -ms-transform: rotate(-90deg);
  /* IE 9 */
  transform: rotate(-90deg);
}

.vertical-text-tprograma {
  color: white;
  font-size: 2.5vh;
  text-shadow: 1px 1px 1px #000000;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

textarea.form-control {
  max-width: 100%;
  max-height: 200px;
  padding: 10px 10px 0 0;
  resize: none;
  border: none;
  border-bottom: 2px solid #E3E3E3;
  border-radius: 5px;
  line-height: 1.5;
}

.ico_estado_sobre {
  position: absolute;
  top: 0px;
  right: 0px;
  border: none;
  z-index: 10;
}

.ico_curso_sobre {
  position: absolute;
  top: 0px;
  right: 0px;
  border: none;
}

.embed-container {
  position: relative;
  /* padding-bottom: 75%; */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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

.globo_i {
  border: 0px;
  border-radius: 0px 20px 20px 20px;
  /* curvas */
  padding: 10px;
  /* espacio dentro del globo */
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
}

.globo_d {
  border: 0px;
  border-radius: 20px 20px 0 20px;
  /* curvas */
  padding: 10px;
  /* espacio dentro del globo */
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
}

/*  nuevas con ninja */

.container {
  position: relative;
}

#copyButton {
  position: absolute;
  top: 0;
  right: 0;
}

/* para tomar asistencia */


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 5px;
  padding: 5px;
  align-items: start;
  vertical-align: top;
}


.grid-item {
  width: 120px;
  height: 150px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  position: relative;
  /* Agrega esta línea */
}

.grid-item text {
  font-size: 1em;
  max-height: 30px;
  width: 100%;
  height: 100%;
}

.grid-item img {
  max-height: 120px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.grid-item i {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 35px;
  /* Ajusta el tamaño del ícono aquí */
  color: green;
}

.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.table-container {
  width: 100%;
  /* Ancho del contenedor */
  max-height: 100vh;
  /* Altura máxima del contenedor. Puede ajustar esto según lo que necesite */
  overflow-y: scroll;
  /* Hace que el contenido desbordado sea desplazable en el eje vertical */
  border: 0px solid #ccc;
  /* Opcional: un borde ligero para que puedas ver el contenedor */
}

/* Estilo para el menú desplegable en dispositivos móviles */

@media (max-width: 991px) {
  .navbar-collapse {
    width: 200px;
    /* Ajusta este valor según la anchura deseada para el menú */
    position: absolute;
    top: 100%;
    /* Se posiciona justo debajo de la barra de navegación */
    left: 0;
    /* Alinea el menú a la derecha */
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 46, 92, 0.813);
    /* Cambia esto al color de fondo que prefieras */
    z-index: 1000;
    /* Se asegura de que el menú esté por encima de otros elementos */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Sombra suave alrededor del menú */
  }
}

#main-navbar {
  position: fixed;
  /* Mantiene la barra fija en la posición */
  top: 0;
  /* Alinea la barra en la parte superior de la ventana */
  left: 0;
  /* Alinea la barra al lado izquierdo de la ventana */
  width: 100%;
  /* La barra se extenderá a lo ancho de la ventana */
  z-index: 9998;
  /* Asegura que la barra esté por debajo del menú desplegable, pero por encima de otros elementos */
}

body {
  margin-top: 0px;
  /* valor según la altura real de barra de navegación */
}

/* Estilo para la barra de Navegación */
#barra-navegacion {
  position: fixed;
  /* Mantiene la barra fija en la posición */
  top: 0;
  /* Alinea la barra en la parte inferior de la ventana */
  left: 0;
  /* Alinea la barra en el lado izquierdo de la ventana */
  width: 100%;
  /* La barra se extenderá a lo ancho de la ventana */
  height: 60px;
  /* Altura de la barra de estado */

  color: #FFF;
  /* Color del texto */
  text-align: center;
  /* Centra el texto */
  /*  line-height: 50px;     Centra verticalmente el texto */
  z-index: 9998;
  /* Asegura que la barra esté por encima de otros elementos */
}

/* Estilo para la barra de estado */
#barra-estado {
  position: fixed;
  /* Mantiene la barra fija en la posición */
  bottom: 0;
  /* Alinea la barra en la parte inferior de la ventana */
  left: 0;
  /* Alinea la barra en el lado izquierdo de la ventana */
  width: 100%;
  /* La barra se extenderá a lo ancho de la ventana */
  height: 50px;
  /* Altura de la barra de estado */
  color: #FFF;
  /* Color del texto */
  text-align: center;
  /* Centra el texto */
  /*  line-height: 50px;     Centra verticalmente el texto */
  z-index: 9999;
  /* Asegura que la barra esté por encima de otros elementos */
}

#barra-estado-ia {
  position: fixed;
  /* Mantiene la barra fija en la posición */
  bottom: 0;
  /* Alinea la barra en la parte inferior de la ventana */
  left: 0;
  /* Alinea la barra en el lado izquierdo de la ventana */
  width: 100%;
  /* La barra se extenderá a lo ancho de la ventana */
  min-height: 60px;
  /* Altura de la barra de estado */
  background-color: rgb(0, 45, 113);
  /* Color de fondo */
  color: #FFF;
  /* Color del texto */
  text-align: center;
  /* Centra el texto */
  z-index: 9998;
  /* Asegura que la barra esté por encima de otros elementos */
}

.fluid-container.full-altura {
  min-height: 100vh;
  /* Asegura que el div tenga al menos la altura de la ventana del navegador */
  display: flex;
  flex-direction: column;
}

.flex-container-cinto {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  vertical-align: top;

}

.container-cinta {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  vertical-align: top;
}

/* Estilo general para el contenedor */
.dropdown {
  position: relative;
  display: inline-block;
  /* Esto hace que el contenedor sea del tamaño del contenido */
}

/* Estilo para el menú desplegable oculto por defecto */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  /* Esto hace que el menú comience justo debajo del botón */
  /* Alinea el menú con el lado izquierdo del botón */
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #78787898;
}

.divider {
  height: 1px;
  /* Controla el grosor del divisor */
  background-color: #e0e0e0;
  /* Color del divisor */
  margin: 8px 0;
  /* Espaciado arriba y abajo del divisor */
}

.entrada-texto {
  width: 100%;
  padding: 2px 10px;
  margin: 5px 5px;
  box-sizing: border-box;
  /* Hace que el ancho del elemento incluya el relleno y el borde */
  font-size: 1em;
  background-color: rgb(247, 247, 247);
  border-top: 1px solid rgba(160, 160, 160, 0.8);
  border-left: 1px solid rgb(160, 160, 160, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255);
  border-right: 1px solid rgba(255, 255, 255);
  border-radius: 10px;
}

/* modulo presencial */
.modulo {
  background-color: rgba(221, 228, 252, 0.507);
  color: rgb(64, 69, 88);
  box-shadow: 0 2px 2px 0 rgba(78, 78, 78, 0.466);
}

/* modulo virtual */
.modulov {
  background-color: rgba(203, 247, 243, 0.507);
  color: rgba(46, 46, 46, 0.925);
  box-shadow: 0 2px 2px 0 rgba(78, 78, 78, 0.466);
  border-radius: 10px 5px 5px 30px;
}

/*  Hoverables */
.modulo-hoverable {
  background-color: rgba(221, 228, 252, 0.507);
  color: rgb(64, 69, 88);
  box-shadow: 0 2px 2px 0 rgba(78, 78, 78, 0.466);
  transition: background-color 0.3s ease;
  cursor: pointer;
  border-radius: 5px 5px 5px 5px;
}

.modulo-hoverable:hover {
  background-color: rgba(142, 142, 142, 0.5)
    /* Cambia esto al color que desees */
}

/* modulo virtual */
.modulov-hoverable {
  background-color: rgba(203, 247, 243, 0.507);
  color: rgba(46, 46, 46, 0.925);
  box-shadow: 0 2px 2px 0 rgba(78, 78, 78, 0.466);
  border-radius: 10px 5px 5px 30px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.modulov-hoverable:hover {
  background-color: rgba(172, 178, 199, 0.8)
    /* Cambia esto al color que desees */
}

.vertical-text {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/* PSCAL */

.dia_pscal {
  transition: transform .5s;
  /* Animation */
  cursor: pointer;
  border-right: 1px solid #808080;
  border-top: 1px solid #808080;
}

.dia_pscal:hover {
  transform: scale(1.1);
  /* Efecto de zoom */
  cursor: pointer;
  border: 1px solid black;
  z-index: 1;
  /* Traer al frente */
  box-shadow: 0px 10px 10px 0 rgba(0, 0, 0, 0.5);
  /* Agregar sombra */
}

.dia_pscal_semana_paso {
  min-height: 8vh;
  border: 1px solid rgba(92, 92, 92);
  ;
  background-color: rgba(255, 255, 255, 0.488);
}

.dia_pscal_semana {
  transition: transform .5s;
  /* Animation */
  cursor: pointer;
  min-height: 8vh;
  border: 1px solid rgba(92, 92, 92);
  ;
  background-color: rgba(255, 255, 255, 0.7);
}

.dia_pscal_semana:hover {
  transform: scale(1.01);
  /* Efecto de zoom */
  cursor: pointer;
  border: 1px solid black;
  z-index: 1;
  /* Traer al frente */
  box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.3);
  /* Agregar sombra */
}

.dia_pscal_main {
  transition: transform .5s;
  /* Animation */
  cursor: pointer;
  border: 1px solid rgb(188, 188, 188);
  ;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px 5px 5px 5px;
}

.dia_pscal_main:hover {
  transform: scale(1.01);
  /* Efecto de zoom */
  cursor: pointer;
  border: 1px solid rgb(129, 128, 128);
  z-index: 1;
  /* Traer al frente */
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.3);
  /* Agregar sombra */
}

:root {
  --header-height: 120px;
}

.barra-fija-new {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;

}

.spacer-header {
  height: var(--header-height);
}

@media (max-width: 768px) {
  :root {
    --header-height: 160px;
    /* Ajusta según necesites para tablets */
  }
}

@media (max-width: 576px) {
  :root {
    --header-height: 180px;
    /* Ajusta para pantallas pequeñas */
  }
}

@media (max-width: 400px) {
  :root {
    --header-height: 200px;
    /* Ajusta para pantallas muy pequeñas */
  }
}

/* Estilo para la tabla con scroll horizontal */
.fixed-container {
  width: 1200px;
  /* Establece el ancho fijo deseado */
  height: 800px;
  /* Establece la altura fija deseada */
  overflow: auto;
}

.circular-border {
  border: 2px solid white;
  /* Borde blanco de 2px */
  border-radius: 50%;
  /* Hace que el borde sea circular */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  /* Sombra leve */
}

/* nomina_quincena_col  */
.table-row {
  cursor: pointer;
}

.nomina-table-container {
  overflow-x: auto;
  background-color: rgba(255, 255, 255, 0.7);
}

.nomina-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 20px 0;
  min-width: 1800px;
  /* Ajusta este valor según sea necesario */
}

.nomina-table th,
.nomina-table td {
  border: none;
  padding: 2px;
  margin: 0, 10px;
  text-align: center;
  vertical-align: middle;
}

.nomina-table th {
  background-color: #35037a;
  color: yellow;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.nomina-table thead tr:nth-child(1) th {
  background-color: #6203c1;
  font-size: 1em;
  color: white;
}

.nomina-table thead tr:nth-child(2) th {
  background-color: #753fc0;
  font-size: 0.8em;
}

.highlighted-row {
  background-color: rgba(255, 255, 0, 0.541);
}

.hidden-column {
  display: none;
}

.nomina-table tbody tr {
  border-bottom: 1px solid grey;
}

.totales {
  font-weight: bold;
  background-color: #e0e0e0;
}

.totales td {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.modal-backdrop {
  z-index: 9999;
}

.modal {
  z-index: 10000;
}

/* ===========  horario_consulta ============= */


table.horario {
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.3);

}

table.horario th,
table.horario td {
  border: 1px solid #c2c2c2;
  text-align: center;
  vertical-align: middle;

}

table.horario th {
  background-color: rgba(100, 122, 157, 0.1);
  color: Black;
  font-weight: bold;

}

table.instacursos {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  /* Permite que las columnas se ajusten al contenido */
  background-color: rgba(255, 255, 255, 0.3);

}

table.instacursos th,
table.horario td {
  border: 1px solid #c2c2c2;
  text-align: center;
  vertical-align: middle;

}

table.instacursos th {
  background-color: rgba(100, 122, 157, 0.3);
  color: white;
  font-weight: bold;

}

/* Estilo para el día en vertical */
.dia {
  background-color: rgba(76, 76, 76, 0.338);
  color: white;
  font-size: 1em;
  width: 25px;
  /* Ajusta según tu preferencia */
  writing-mode: vertical-rl;
  /* Rotación vertical del texto */
  /* transform: rotate(180deg); */
  /* Ajusta la rotación si lo prefieres */
  white-space: nowrap;
}

.hora {
  background-color: rgba(212, 212, 212, 0.5);
  border: 1px solid #ffffff;
  font-size: 0.7em;
  width: 60px;
}

.curso {
  width: 200px;
  background-color: rgba(240, 232, 185, 0.5);
}

.lugar {
  width: 200px;
  background-color: rgba(251, 251, 185, 0.5);
}

.profesor {
  width: 200px;
  background-color: rgba(217, 234, 211, 0.5);
  color: #2c662d;
}

.empty {
  background-color: rgba(255, 255, 255, 0.3);
}

.grupo {
  width: 200px;
  background-color: rgba(229, 210, 250, 0.5);
  color: #300346;
}

/* Aibot */
body {
  padding: 0px;
}

.chat-box {
  max-width: 600px;
  margin: 0 auto;
  border: none;
  padding: 0px;
  flex: 1;
  width: 100%;
  max-height: 30vh;
  /* Altura máxima del chat-box */
  overflow-y: auto;
  /* Habilitar desplazamiento vertical */
  flex-direction: column-reverse;
  /* Invertir el orden de los elementos */
}

.message {
  padding: 8px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.user {
  background-color: #61fa8c49;
  text-align: left;
  margin-right: 50px;
}

.bot {
  background-color: #d1e7ffce;
  text-align: left;
  margin-left: 50px;
}

.input-container {
  display: flex;
  justify-content: center;
  padding: 3px;

}

#message {
  width: 100%;
  max-width: 600px;
  padding: 3px;
  margin-right: 10px;
}

#start-recording {
  display: flex;
  width: 100px;
  height: 100px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  /* Alinea el contenedor a la derecha */
}

#start-recording span {
  margin-top: 5px;
  font-size: 14px;
}

/* Estilo para cursos inactivos */
.inactive-course {
  opacity: 0.5;
}

/* Tabla con separación vertical entre filas */
.tabla-separada {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
  /* 2px como línea transparente entre filas */
  background: transparent !important;
}

/* Filas de datos: color base y efecto hover (anula w3-hoverable) */
.tabla-separada tbody tr.fila-grupo {
  background-color: rgba(255, 255, 255, 0.5) !important;
  /* base semitransparente para que se note la separación */
  transition: background-color .15s ease-in-out;
}

.tabla-separada tbody tr.fila-grupo:hover {
  background-color: rgba(59, 84, 168, 0.262) !important;
  /* blanco 0.8 al pasar el cursor */
}

/* Tabla con estilo semi-transparente */
.table th.tabla_header {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.table td.tabla_cell {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}


/* 
 * CSS de Compatibilidad para migración de now-ui-kit a Bootstrap 5
 * Mantiene los estilos más usados de now-ui-kit
 */

/* ============= BOTONES REDONDEADOS ============= */
.btn-round {
  border-radius: 30px !important;
  padding: 12px 30px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-round.btn-sm {
  padding: 8px 20px;
  font-size: 11px;
}

.btn-round.btn-lg {
  padding: 16px 40px;
  font-size: 14px;
}

/* ============= MEJORAS DE BOTONES ============= */
.btn {
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  padding: 12px 30px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn:focus {
  outline: none;
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* ============= COLORES ESPECÍFICOS ============= */
.btn-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}

.btn-info:hover {
  background-color: #138496;
  border-color: #117a8b;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* ============= FORMULARIOS ============= */
.form-control {
  border-radius: 20px;
  border: 1px solid #b0b0b0ff;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.4);
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  display: block;
}

/* Sobrescribir color de labels para mejor legibilidad */
.card label,
.form-group label,
label {
  color: rgb(30, 30, 30) !important;
  font-weight: 600 !important;
}


/* ============= CARDS MEJORADAS ============= */
.card {
  border-radius: 15px;
  border: none;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e3e3e3;
  border-radius: 8px 8px 0 0 !important;
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.5rem;
}

.card-title {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* ============= UTILIDADES ADICIONALES ============= */
.btn-block {
  width: 100%;
  display: block;
}


/* ============= RESPONSIVIDAD ============= */
@media (max-width: 576px) {
  .btn {
    padding: 10px 20px;
    font-size: 10px;
  }

  .btn-round {
    padding: 10px 25px;
  }
}

/* ============= COLORES ADICIONALES PARA COMPATIBILIDAD ============= */
.btn-secundary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.btn-secundary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* ============= ICONOS NOW-UI FALLBACK ============= */
.now-ui-icons {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
  font-weight: 900;
}

/* ============= COMPONENTES ESPECÍFICOS ============= */
.fondo-pagina {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============= INPUTS DE FECHA ============= */
input[type="date"].form-control {
  border-radius: 12px;
  padding: 8px 15px;
}

/* ============= INPUTS ESPECÍFICOS ============= */
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
textarea.form-control {
  border-radius: 12px;
}

/* ============= TEXTAREA ============= */
textarea.form-control {
  border-radius: 12px;
  min-height: 100px;
  resize: vertical;
}

/* ============= MEJORAR SELECTORES ============= */
select.form-control {
  border-radius: 12px;
  padding: 8px 15px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
}

/* ============= COMPATIBILIDAD BOOTSTRAP 4 → 5 ============= */
/* Clases de alineación de texto */
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

/* Clases de margin (Bootstrap 4 → 5) */
.ml-1 {
  margin-left: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mr-sm-2 {
  margin-right: 0.5rem !important;
}

/* Clases de padding (Bootstrap 4 → 5) */
.pl-1 {
  padding-left: 0.25rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

/* Clases de flotación */
.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

/* Clases de justificación de contenido (fallback) */
.justify-content-left {
  justify-content: flex-start !important;
}

.justify-content-right {
  justify-content: flex-end !important;
}

/* Image styling classes from now-ui-kit */
.img-raised {
  box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}

/* Reglas generales para imágenes responsivas */
img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 1px;
}

/* Clase específica para imágenes fluid */
.img-fluid {
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Reglas específicas para contenedores comunes */
.w3-container img,
.container img,
.col img {
  max-width: 100% !important;
  height: auto !important;
}

/* Para imágenes de perfil y iconos pequeños */
.rounded-circle {
  max-width: 100% !important;
  height: auto !important;
}

/* Para thumbnails */
.img-thumbnail {
  max-width: 100% !important;
  height: auto !important;
}

/* Remove underline from links - Enhanced specificity */
a,
a:link,
a:visited {
  text-decoration: none !important;
}

a:hover,
a:active,
a:focus {
  text-decoration: none !important;
}

/* For all anchor elements regardless of nesting */
* a {
  text-decoration: none !important;
}

/* Specific classes for removing underlines */
.no-underline {
  text-decoration: none !important;
}

.no-underline:hover {
  text-decoration: none !important;
}


/* Estilos para las pestañas de jornadas */
.nav-tabs .nav-link {
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(25, 1, 109, 0.8);
  border: none;
  border-radius: 8px 8px 0 0;
  margin-right: 2px;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: rgba(25, 1, 109, 1);
  border: none;
}

.nav-tabs .nav-link.active {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(25, 1, 109, 1);
  border: none;
}

.nav-tabs {
  border: none;
}

/* Estilos para ventanas modales */
.modal-agenda {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: none !important;
}

.modal-header-agenda {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* Contenedor con fondo blanco semitransparente y bordes redondeados */
.caja-base {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  border: 1px solid #d3d3d3 !important;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3) !important;
}


/* Estilos para las pestañas */
.nav-tabs .nav-link {
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  margin-right: 5px;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.nav-tabs .nav-link.active {
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.nav-tabs .nav-link i {
  margin-right: 5px;
}

.fondo-mosaico {
  min-height: 100vh !important;
  background-repeat: repeat !important;
  background-size: auto auto !important;
  background-position: 0 0 !important;
  background-attachment: scroll !important;
}

.fondo-ajustado {
  min-height: 100vh;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}

/* Forzar estilos de section-header si no se aplican */
.section-header {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(25, 1, 109, 0.5) !important;
  border-radius: 10px !important;
  padding-left: 1rem !important;
  text-align: left !important;
}

/*     para tarjeta_curso.html */
/* Tarjeta/Chiclet de curso - imagen para pensum ------------------ */
.caja-curso {
  --bg-color: #3b82f6;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-right-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  container-type: inline-size;
}

/* Capa de fondo sólida del curso */
.caja-curso-fondo {
  position: absolute;
  inset: 0;
  background: var(--bg-color);
  z-index: 0;
}

/* Brillo superior (20% del alto) */
.caja-curso-brillo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 20%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), transparent);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
  z-index: 1;
}

.caja-curso .contenido {
  position: relative;
  z-index: 2;
  height: 100%;
  gap: 12px;
  padding: 0 5%;
}

.caja-curso .icono img {
  height: 30%;
  width: auto;
  z-index: 2;
  object-fit: contain;
}

.caja-curso .titulo {
  color: #fff;
  font-weight: 300;
  line-height: 1.2;
  font-size: clamp(0.5rem, 7cqw, 2rem);
}


.boton-img {
  height: 40px;
  width: 40px;
  opacity: 0.6;
}

.icono-img {
  height: clamp(30px, 6vw, 80px);
  width: clamp(30px, 6vw, 80px);
}

/* Clases de texto responsivo */
.texto-titulo {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.texto-principal {
  font-size: clamp(0.9rem, 1.2vw, 1.3rem);
}

.texto-secundario {
  font-size: clamp(0.8rem, 1vw, 1.1rem);
}

.texto-principal-lg {
  font-size: clamp(0.95rem, 1.3vw, 1.4rem);
}

.texto-secundario-lg {
  font-size: clamp(0.85rem, 1.1vw, 1.2rem);
}

.texto-normal {
  font-size: clamp(0.9rem, 1vw, 1rem);
}

.cinta-diferidos {
  color: #2c5f7c;
  font-weight: 700;
  font-size: 1.5rem;
  border-radius: 10px 10px 0 0;
  background-color: #2c5f7c66;
}

/* Inner Icon Circle */
.icon-circle {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), inset 0 4px 8px rgba(255, 255, 255, 0.3), inset 0 -4px 8px rgba(0, 0, 0, 0.15);
}