body {
    margin: 0;
    padding: 0;
    gap: 0;
    width: 100%;
    height: 100vh; /* Hace que el body ocupe el 100% de la altura del viewport */
    overflow: hidden; /* Evita barras de desplazamiento innecesarias */
    font-family: Arial, sans-serif;
  }
.contenedor {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    justify-content: center;
    align-items: center; /* Centra horizontalmente los elementos hijos */
  }  
main{
  flex: 1;
  display: flex;
  justify-content: center; 
  align-items: flex-start;  
  width: 100%;
  max-height: 75vh; /* Define la altura máxima como la altura de la pantalla */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho del contenedor */
}
/* +++++++ captura de resumen +++++++   */
#CContainer {
  display: flex;
  width: 90vw; /* Asegura que el contenedor ocupe 90% del ancho del viewport */
  min-height: 75vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  justify-content: center;
  gap: 10px;
}
#CIngreso {
  /* border: 2px double blue; */
  text-align:left; 
  padding-left: 25px;
  width: 30vw; 
  font-size:medium; 
  font-weight:bold;
  padding-top: 15vh;
  min-height: 60vh;
  color: var(--title-color, #0B610B);
  box-sizing: border-box; /* Incluye padding y border en el ancho total */ 
}
#CSeleccion {
  display: flex;
  min-height: 60vh;
  /* border: 2px solid rgb(242, 255, 0); */
  width: 15vw; /* Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  justify-content: center;
  flex-direction: column;
  font-weight:bold;
  font-size:medium;
  color: var(--title-color, #0B610B);
  transition: transform 0.5s ease-in-out;
  position: absolute;
  text-align: center;
  gap: 10px;
}
#CContenido {
  min-height: 60vh;
  max-height: 65vh;
  /*border: 2px solid red;*/
  width: 77vw; /* Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  position: absolute;
  left: 100%; /* Inicialmente fuera de la pantalla */
  transition: left 0.5s ease-in-out;
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}
#CContenido::-webkit-scrollbar-button:vertical:start:decrement {
  background-color: red;
}
#CContenido::-webkit-scrollbar-button:vertical:end:increment {
  background-color: red;
}
#CSeleccion.active {
  transform: translateX(-270%);
}
#CContenido.active {
  left: 18vw; /* Mueve el contenido dentro de la pantalla */
  display: block; /* Asegura que se muestre */
}
#CBotones {
  display: flex;
  min-height: 10vh;
  max-height: 10vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  margin-top: auto;
  align-items: center; /* Centra verticalmente los elementos hijos: center; */
  /* border: 4px double blue; */
}
/* +++++++ texto de inicio +++++++   */
.contenedorInicio { /*  Incluye textoInicio y contentDesintegracion  */
  display:flex; 
  justify-content: center; 
  align-items: flex-start; 
  align-content: center;
  margin-top: 3%;
}
.textoInicio{
  display: none;
  width:550px; 
  margin: 0; 
  color: var(--title-color, #0B610B); 
  text-align: center; 
  padding: 5% 0% 2% 0%;
  
  /* border: none;
  border-radius: 15px; /* Esquinas medio redondeadas */
  /* background-color: rgba(255, 255, 255, 0.3); /* Color background blanco transparente #8F7E2C */
  /*
  background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 30%, transparent 80%),
        radial-gradient(circle at 70% 70%, rgba(143, 126, 44, 0.4) 30%, transparent 80%);
  box-shadow:
      -5px -5px 10px rgba(255, 255, 255, 0.5) inset,
      5px 5px 10px rgba(143, 126, 44, 0.5) inset;
  */  
 
}
h1 span {
  position: relative;
  display: inline-block;
}
h1 span ::before {
  right: -8px;
  top: 50%;
  content: "";
  position: absolute;
  transform: transalateY(-45%);
  animation: blink 0.7s infinite;
}
h1 span.stop-blinking::before {
  animation: none;
}
@keyframes blink { 
  50% {opacity: 0;}
}

/* ++++++++++++++++++++  Los botones verdes +++++++++++++++++++++++++++  */
.button {
  padding: 0px 10px;
  font-size: small;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: var(--button-color, #0B610B); 
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #999;
  margin-bottom: 5px;
  /* float: right; */        
  }
.button:hover {background-color: #AEC0CD}
.button:active {
  background-color: #D0D0D0;
  box-shadow: 0 4px #666;
  transform: translateY(4px);
              }
/* +++++++++++++++++  Para input radio buttons ++++++++++++++++++++++++ */
  
input {
  accent-color: #8F7E2C;
}
textarea.word_count {
  accent-color: #8F7E2C;
  border: 2px solid #0B610B;
  border-radius: 10px;
}
textarea.word_count:focus {
  border-color: #8F7E2C;
  border-width: 2px;
  outline: none;
}
/* ++++++++++ para colocar una imagen dentro de input +++++++++++  */
.input-icon {
  position: relative;
  display: inline-block;
}
.input-icon i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: small; /* Ajusta el tamaño del icono */
}
.input-icon input {
  padding-left: 30px; /* Espacio para el icono */
  border: 2px solid #1A4F31; /* Borde verde */
  border-radius: 4px; /* Borde redondeado (opcional) */
  outline: none; /* Eliminar borde azul al hacer clic */
  transition: border-color 0.3s; /* Transición suave para el cambio de color del borde */
  font-size: small;
  cursor: pointer;
}
.input-icon input:focus {
  border-color: #8F7E2C; /* Cambia a color oro cuando el input está enfocado */
}
/* ++++++++ select ul ++++++++++  */
.input-icon .options-list {
  position: absolute;
  top: calc(100% + 1px); /* Posiciona la lista debajo del input */
  left: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #1A4F31; /* Borde verde */
  border-top: none;
  border-radius: 0 0 4px 4px; /* Borde redondeado */
  display: none; /* Ocultar la lista por defecto */
  background-color: #fff; /* Color de fondo de la lista */
  z-index: 10;
  font-size: 0.75em;
}
.input-icon .options-list li {
  padding: 0px 5px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  transition: background-color 0.3s; /* Transición suave del color de fondo */
}
.input-icon .options-list li:hover,
.input-icon .options-list li.highlighted {
  background-color: #8F7E2C; /* Cambia el color de fondo al pasar el mouse */
  cursor: pointer; /* Cambia el cursor al hacer hover */
}
/* ++++ poner x en input del ul +++++++ */
.clear-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #1A4F31; /* Color verde */
  font-size: 16px;
  display: none; /* Ocultar el icono por defecto */
}

/* ++++++++++ particles +++++++++++  */
#particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    top: 0;
    left: 0;
    z-index: -1; 
}
/* +++++++ pie de página ++++++++  */
footer {
  width: 90%;
}
/* +++++++++ encabezado ++++++++++  */
header {
  display: flex;
  width: 90%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 1% 2% 0% 2%;
  height: 80px;
}
header img {
  width: 6%;
  height: auto;
}
.titulo {
  text-align: center;
  font-size: xx-large;
  font-weight: bold;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--title-color, #0B610B);
}
nav {
  flex-grow: 1; /* Permite que nav ocupe más espacio */
  display: flex;
  justify-content: flex-end; /* Alinea el contenido del nav a la derecha */
}
/*  ++++ iconos de navegación +++++++ */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 23%; /* Ajusta el ancho del ul */
  justify-content: space-between; /* Distribuye los elementos uniformemente */
  gap: 2%;
} 
 /* Estilos para los íconos */
.nav-icon {
  font-size: 20px; /* Tamaño de fuente para los íconos */
  color: var(--icon-color, #fff); /* Color del ícono (blanco en este ejemplo) */
  background-color: var(--circle-color, #0B610B); /* Fondo verde para el botón */
  background:
    radial-gradient(circle at 25% 50%, rgba(143, 126, 44, 1)    15%, transparent 90%),
    radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 0.4) 15%, transparent 90%);
  border: none;
  border-radius: 50%; /* Hacer el botón circular */
  width: 40px; /* Ancho del botón */
  height: 40px; /* Alto del botón */
  display: flex; /* Usar flexbox para centrar el contenido */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  cursor: pointer; /* Cambiar el cursor a puntero */
  outline: none; /* Sin contorno al hacer clic */
  padding: 0; /* Sin padding interno */
  margin: 0; /* Sin margen */
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.8); /* Sombra para dar profundidad */
}
.nav-icon {
  position: relative; /* Asegura que el contenedor sea relativo para posicionar el tooltip */
}
/* Tooltip para los íconos */
.nav-icon .tooltip {
  visibility: hidden; /* Inicialmente oculto */
  background-color: var(--backtooltip-color, #8F7E2C); 
  color: var(--texttooltip-color, #0B610B);
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  position: absolute;
  z-index: 3;
  top: 125%; /* Posiciona el tooltip abajo del botón */
  left: 50%; /* Centra el tooltip horizontalmente */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: medium; /* Tamaño de letra más pequeño */
  font-weight: bold;
}
.nav-icon:hover .tooltip {
  visibility: visible; /* Muestra el tooltip al pasar el ratón sobre el botón */
  opacity: 1;
}
/* Tooltip para los íconos agregar-quitar */
.input-icon .tooltip {
  visibility: hidden; /* Inicialmente oculto */
  background-color: var(--backtooltip-color, #8F7E2C); 
  color: var(--texttooltip-color, #0B610B);
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  position: absolute;
  z-index: 3;
  top: 40%; /* Centra el tooltip verticalmente */
  right: 200%; /* Coloca el tooltip a la derecha del icono */
  transform: translateY(-50%); /* Ajusta la posición vertical para centrar */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: x-small;
  font-weight: bold;
  white-space: nowrap;
}
.input-icon:hover .tooltip {
  visibility: visible; /* Muestra el tooltip al pasar el ratón sobre el botón */
  opacity: 1;
}
/* +++++  Transiciones al cargar una "página"  no usado+++++ */
.muestraEnFadeIn{
    display:flex;
    animation: transitionIn 2s;
}
@keyframes transitionIn {
      from {
          opacity: 0;
          transform: rotateX('-10deg');          
      }
      to {
        opacity: 1;
        transform: rotateX('0deg');
      }
}
/* +++++++++++ desintegration +++++++++++++++++++++  */
.contentDesintegracion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dust {
  position: absolute;
  top: 0;
  left: 0;
} 
/* +++++++++++ loader Oppositive +++++++++++++++++++++  */
.loaderopo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #0B610B;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loaderopo::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border-left: 4px solid #8F7E2C;
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
/* +++++++++++ etiquetas captura de resumenes +++++++++++++++++++++  */
.etiqueta {
   font-size: medium;
   font-weight: bold;
   font-style: italic;
   font-stretch: extra-condensed;
}

#modalCapturaResumen {
  background-color: #fff; 
  width: 400px; 
  height: auto; 
  padding: 5px; 
  border: 2px solid #0B610B; 
  border-radius: 10px; 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: small;
  font-family: Arial, sans-serif;
  max-height: 45vh; /* Opcional, para evitar que el modal sea demasiado alto */
  overflow-y: auto; /* Opcional, para agregar una barra de desplazamiento vertical si el contenido es demasiado alto */

}
/* +++++++++++ Revisa resumenes +++++++++++++++++++++  */
#ContenedorPPRevisaResumenes {
  max-height: 75vh;
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}
/* +++++++++++ Loader Progress +++++++++++++++++++++  */
/* HTML: <div class="loaderProgress"></div> */
.loaderProgress {
  width: 80px;
  height: 10px;
  border-radius: 20px;
  color: #8F7E2C;
  border: 2px solid;
  border-color:#0B610B;
  position: relative;
  display:none;
  margin: 0 auto;
}
.loaderProgress::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: l6 2s infinite;
}
@keyframes l6 {
    100% {inset:0}
}
/* +++++++++++ Input gral +++++++++++++++++++++  */
.input-gral {
  border: 2px solid #1A4F31; /* Borde verde */
  border-radius: 4px; /* Borde redondeado (opcional) */
  outline: none; /* Eliminar borde azul al hacer clic */
  transition: border-color 0.3s; /* Transición suave para el cambio de color del borde */
  font-size: small;
  cursor: pointer;
}
.input-gral:focus {
  border-color: #8F7E2C; /* Cambia a color oro cuando el input está enfocado */
}
/* +++++++++++ ChexkBox a círculo +++++++++++++++++++++  */
.checkbox-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #1A4F31;
  display: inline-block;
  position: relative;
  margin-top: 3px;
}

/* Estilo del círculo interno cuando está seleccionado */
.checkbox-container input:checked + .checkmark {
  background-color: #8F7E2C; /* Color del círculo cuando está seleccionado */
}

/* Estilo del check (puedes personalizarlo) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked + .checkmark:after {
  display: block;
}

/* Estilo del check (el tic que aparece dentro del círculo) */
.checkbox-container .checkmark:after {
  left: 4px;
  top: 2px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* +++++++++++++++++++++++ Foto del Usuario ++++++++++++++++++++++++++++++++  */
.fotoUsuario {
  width: 150px;
  height: auto;
  border-radius: 10px; /* esquinas redondeadas */
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white ;
}
.videoUsuario {
  border-radius: 10px; /* esquinas redondeadas */
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white ;
}
/* +++++++++++ Revisión de resumenes. Foto-video +++++++++++++++++++++  */
.ContenedorFotoVideo {
  min-height: 70vh;
  max-height: 75vh;
  width: 90vw; /* Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
  display:none;
}

/* ++++++++++ Estilizar <p> captura resumen +++++++++++++++++++++  */
.capturaR {
  display: inline-block; /* Muestra el elemento como un bloque en línea */
  padding: 5px;
  border: none; /* Elimina el borde */
  border-radius: 10px; /* Bordes redondeados */
  background-color: rgba(143, 126, 44, 0.6); /* Fondo semitransparente */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  transition: background-color 0.3s, transform 0.3s; /* Transición suave */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* Sombra */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
  
}

.capturaR:hover {
  background-color: rgba(143, 126, 44, 0.8); /* Fondo más oscuro al pasar el cursor */
  transform: translateX(-20px); /* Desplaza el botón hacia arriba al pasar el cursor */
}
/* +++++++++++++ Estilizar <td> en edita información del sistema +++++++++++++++++++++  */
.editable:focus  {
  outline: 2px solid #8F7E2C;
}
/* +++++++++++++ Pantalla de Opciones +++++++++++++++++++++  */
.editaInfoSistema {
  min-height: 70vh;
  max-height: 75vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}
/* +++++++++++++ Pantalla ABC Usuarios +++++++++++++++++++++  */
.ContenedorPPeditaUsuarios {
  padding-top: 15px;
  text-align:center;
  min-height: 70vh;
  max-height: 75vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}
/* +++++++++++++ Mantener el escudo UAEMex de un tamaño +++++++++++++++++++++  */
#elEscudoUAMEX {
  width: 63px; /* Tamaño normal del escudo */
  height: auto;
}

/* Media query para pantallas pequeñas (celulares) */
@media (max-width: 768px) {
  #elEscudoUAMEX {
    width: 50px; /* Tamaño reducido del escudo para celulares */
    height: auto;
  }
}
@media (max-width: 768px) { /* Reduce los botones en celulares */
  .nav-icon {
    width: 20px; /* Tamaño reducido del escudo para celulares */
    height: auto;
  }
}

.lineamientosColoquio {
  padding: 1% 15%;
  text-align:center;
  font-size: small;
  min-height: 70vh;
  max-height: 75vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
  background-color: rgba(255, 255, 255, 0.75);
}

.agendaColoquio {
  
  text-align:center;
  font-size: small;
  min-height: 50vh;
  max-height: 55vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
  background-color: rgba(255, 255, 255, 0.75);
}