/**************************************************************************/
/******                     fondo de la página                        *****/
/**************************************************************************/

body {
  /* -image: url('../img/fondoSitio3.JPG?cachebuster=${Math.random()}'); */
  background-color: #f8f8f8; /* Color de respaldo */
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  background-attachment: fixed; /* Opcional, evita reajustes al hacer scroll */
  transition: background-image 0.8s ease-in-out; /* Suaviza el cambio */ 
}




/**************************************************************************/
/***                     Estructura de la página                        ***/
/**************************************************************************/
  .lasPaginas {
    max-height: 65vh;
  }
  header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 90vw;
    align-items: flex-start;
    padding: 1% 2% 0% 2%;
    height: 80px;
    overflow: visible;
    
  }
  header > *:nth-child(1) {
    grid-column: 1;
  }
  
  header > *:nth-child(2) {
    grid-column: 2;
    justify-self: center;
  }
  
  header > *:nth-child(3) {
    grid-column: 3;
    justify-self: end;
  }
main {    
    height: 68vh;
    width: 95vw;
}
.secciones {
    min-height: 65vh;
    max-height: 65vh;
    padding: 0 4% 0 8%;
    width: 95vw; /* Ajusta el ancho del div */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    overflow-y: hidden; /*  despliega la barra en caso necesario */
    scrollbar-gutter: stable; /* Reserva espacio para el scrollbar */
    overflow-x: hidden;
    scrollbar-color: #8F7E2C #FFFFFF;
    display: none;
}
.lineamientos {
  min-height: 65vh;
  max-height: 65vh;
  padding: 0 4% 0 8%;
  width: 85vw; /* Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: auto; /*  despliega la barra en caso necesario */
  scrollbar-gutter: stable; /* Reserva espacio para el scrollbar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C #FFFFFF;
}
.agendaColoquio { 
  text-align:center;
  font-size: small;
  min-height: 35vh;
  max-height: 40vh;
  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);
}
/**************************************************************************/
/***                            Botones                                ***/
/**************************************************************************/
/* ++++++++++++++++++++  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);
              }
.button-small {
  padding: 0px 10px;
  font-size: xx-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; */        
  }

/* +++++++++++++++++  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 */
}
/**************************************************************************/
/***                       Captura de resumen                           ***/
/**************************************************************************/ 
/* +++++++ captura de resumen +++++++   */
#CContainer {
  display: flex;
  width: 85vw; /* Asegura que el contenedor ocupe 90% del ancho del viewport */
  min-height: 65vh;
  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: 50vh;
  max-height: 55vh;
  /*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; */
}
/* ++++++++++ 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 la izquierda al pasar el cursor */
}
/* +++++++++++ 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 */

}
/**************************************************************************/
/***                             loaders                                ***/
/**************************************************************************/ 

/* +++++++++++ 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);
  }
} 
/* +++++++++++ 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}
}

/**************************************************************************/
/***                             tooltip                                ***/
/**************************************************************************/
/* 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;
}
/* Tooltip para los íconos agregar-quitar */
tooltip_asignaEvaluador {
  visibility: hidden; /* Inicialmente oculto */
  opacity: 0;
  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 */
  transition: opacity 0.3s;
  font-size: x-small;
  font-weight: bold;
  white-space: nowrap;
}
.tooltip_asignaEvaluador:hover .tooltip {
  visibility: visible; /* Muestra el tooltip al pasar el ratón sobre el botón */
  opacity: 1;
}

/**************************************************************************/
/***                        Revisa Resumenes                            ***/
/**************************************************************************/
/* +++++++++++ Revisa resumenes +++++++++++++++++++++  */
#ContenedorPPRevisaResumenes {
  max-height: 75vh;
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}

#pantallaInfoDelTrabajo {
  max-height: 65vh;
  overflow-y: scroll; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}

/**************************************************************************/
/***                  Revisa Resumenes Foto/video                       ***/
/**************************************************************************/
/* +++++++++++++++++++++++ Foto del Usuario ++++++++++++++++++++++++++++++++  */
.fotoUsuario {
  width: 125px;
  height: auto;
  border-radius: 10px; /* esquinas redondeadas */
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white ;
}
.fotoUsuario2 {
  width: 88px;
  height: auto;
  border-radius: 6px; /* esquinas redondeadas */
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white ;
}
.video-container {
  position: relative;
  width: 100%; /* O el ancho que desees */
  height: 200px; /* Altura fija */
  overflow: hidden; /* Oculta cualquier desbordamiento */
}

.videoUsuario {
  border-radius: 10px; /* esquinas redondeadas */
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1);
  height: 100%; /* Ajusta la altura al 100% del contenedor */
  width: 100%; /* Ancho automático para mantener la proporción */
  object-fit: cover;
}
/* +++++++++++ Revisión de resumenes. Foto-video +++++++++++++++++++++  */
.ContenedorFotoVideo {
  min-height: 30vh;
  max-height: 30vh;
  width: 85vw; /* Ajusta el ancho del div */
  display:none;
}
.PantallaFotoVideo {
  min-height: 30vh;
  max-height: 30vh;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  
  overflow-x: hidden;
  scrollbar-color: #8F7E2C transparent;
}
/* +++++++++++ Revisión de resumenes. Foto-video +++++++++++++++++++++  */
.ContenedorMuestraResumen {
  min-height: 60vh;
  max-height: 60vh;
  width: 85vw; /* Ajusta el ancho del div */
  display:none;
}
.PantallaMuestraResumen {
  min-height: 50vh;
  max-height: 50vh;
  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;
}

/* Estilos para el modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Fijo en la pantalla */
  z-index: 1; /* Por encima de otros elementos */
  left: 10%;
  top: 15%;
  width: 80%; /* Ancho comple1to */
  height: 65%; /* Alto completo */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con opacidad */
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Centrar el modal */
  padding: 20px;
  border: 1px solid #8F7E2C;
  border-radius: 10px;
  width: 80%; /* Ancho del modal */
  max-width: 500px; /* Ancho máximo */
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Alinear los elementos en una columna */
  justify-content: center; /* Centrar verticalmente */
  align-items: center; /* Centrar horizontalmente */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-left: auto; /* manda el botón a la derecha */
}

.close:hover,
.close:focus {
  color: #0B610B;
  text-decoration: none;
  cursor: pointer;
}

#observacionesResumen {
  accent-color: #8F7E2C;
  border: 2px solid #0B610B;
  border-radius: 10px;
  margin: 6% auto 5px 11%;
  text-align: left;
  outline: none;
}
/* Placeholder styling */
#observacionesResumen::placeholder {
  color: #888; /* Color del placeholder */
  opacity: 1; /* Asegúrate de que sea completamente opaco */
}
#observacionesResumen:focus {
  border-color: #8F7E2C; /* Color cuando el textarea está enfocado */
}

.PantallaReenviaResumen {
  min-height: 50vh;
  max-height: 50vh;
  width: 80vw; /* Ajusta el ancho del div */
  padding: 0 4% 0 4%;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: auto; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C #FFFFFF;
}

/**************************************************************************/
/***                     Pantalla Evaluadores                           ***/
/**************************************************************************/

.pantallaJurados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px 20px 5px 20px;
  font-size: small;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.trabajosAevaluar {
  padding: 5px;
  margin: 5px;
  flex-basis: 300px; /* Ancho inicial fijo */
  flex-grow: 1; /* Permite que los elementos crezcan para llenar el espacio */
  box-sizing: border-box;
  text-align: center;
}
.trabajosAevaluar:first-child,
.trabajosAevaluar:last-child {
  flex-basis: 100%; /* El primer elemento ocupa todo el ancho */
}
.despliegatrabajos {
  padding: 5px;
  margin: 5px;
  flex-basis: 300px; /* Ancho inicial fijo */
  flex-grow: 1; /* Permite que los elementos crezcan para llenar el espacio */
  text-align: center;
  min-height: 40vh;
  max-height: 40vh;
  width: 80vw; /* Ajusta el ancho del div */
  padding: 0 4% 0 4%;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: auto; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C #FFFFFF;
}

/**************************************************************************/
/***                  Pantalla asignar revisores                        ***/
/**************************************************************************/
.asignaRevisores {
  padding: 5px;
  margin: 5px;
  /* flex-basis: 300px; /* Ancho inicial fijo */
  /* flex-grow: 1; /* Permite que los elementos crezcan para llenar el espacio */
  text-align: center;
  min-height: 50vh;
  max-height: 50vh;
  /* width: 80vw; /* Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: auto; /* Agrega scroll bar */
  overflow-x: hidden;
  scrollbar-color: #8F7E2C #FFFFFF;
}
#auxPantallaAdministrador {
  min-height: 67vh; /* 67vh; */
  max-height: 67vh; /* 67vh; */
  /* width: 80vw;  Ajusta el ancho del div */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #8F7E2C #FFFFFF;
}

/**************************************************************************/
/***               Select simple construido con listas                  ***/
/**************************************************************************/
.custom-select {
  position: relative;
  width: auto;
  border: 2px solid #0B610B;
  border-radius: 5px;
  cursor: pointer;
  color: gray;
  font-size: x-small;
  font-style: italic;
}
.custom-select ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Ocultar la lista por defecto */
  position: absolute;
  width: auto;
  background-color: #fff;
  border: 2px solid #8F7E2C;
  border-radius: 5px;
  z-index: 1;
}
.custom-select li {
  padding: 2px 10px;
  color:#0B610B;
  cursor: pointer;
}
.custom-select li:hover {
  background-color: rgba(143, 126, 44, 0.25);
}
.custom-select.active ul {
  display: block; /* Mostrar la lista cuando el select está activo */
}
.custom-select.hidden ul {
  list-style: none; /* Ocultar la lista cuando el select está activo */
}
.custom-select:focus {
  border-color: #8F7E2C; /* Color de borde al enfocar */
}
/**************************************************************************/
/***                  Menú Hamburguesa celular                          ***/
/**************************************************************************/
.menu-btn {
  position: absolute; /* Posicionamiento absoluto */
  top: 7%; /* Centrar verticalmente */
  left: 50%; /* Centrar horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste fino para centrado perfecto */
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  padding: 5px;
  text-align: center;
}
.bar {
  width: 100%;
  height: 4px;
  background-color: #0B610B;
}
.bar:nth-child(1) {
  transform-origin: left top;
}
.bar:nth-child(2) {
  opacity: 1; /* Para la animación de la barra del medio */
}
.bar:nth-child(3) {
  transform-origin: left bottom;
}
.menu-btn.active .bar:nth-child(1) {
  transform: rotate(45deg);
}
.menu-btn.active .bar:nth-child(2) {
  opacity: 0; /* Ocultar la barra del medio */
}
.menu-btn.active .bar:nth-child(3) {
  transform: rotate(-45deg);
}
.menu-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  width: 25%;
  background-color: #8F7E2C;
  font-size: large;
  padding: 15px;
  position: absolute; /* Posicionamiento absoluto */
  top: 25%; /* Centrar verticalmente */
  left: 50%; /* Centrar horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste fino para centrado perfecto */
  border-radius: 15px; /* Opcional: bordes redondeados */
  z-index: 1000; /* Asegura que esté encima de otros elementos */
}
.menu-options li {
  padding: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.menu-options li:hover {
  background-color: #8F7E2C;
}
#content {
  padding: 20px;
  font-size: small;
}
/**************************************************************************/
/***             Select para evaluación jurados celular    m            ***/
/**************************************************************************/
.selectTotalPorRenglon {
    font-size: large;
    padding: 8px 15px 8px 15px;
}
/**************************************************************************/
/***                      Mostrar gafete en Celular                     ***/
/**************************************************************************/

.gafeteDiv { 
  /* background-image: url('../img/gafete.jpg'); */
  background-image: var(--imagen-gafete-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex; /* Usar flexbox para centrar la tabla */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  width: 87vw;
  height: 60vh;
  top: 0%;
  left: -4%;
  border: 2px solid #8F7E2C; 
  border-radius: 10%;
}
.gafeteImg {
  width: 82vw;
  height: 55vh;  
}
.nombreTxt {
  color: #0B610B;
  font-size: 1.3em;
}
.fotoImg {
  width: 26vw;
  height: auto;
}