:root {
   --blanco: #ffffff;
   --oscuro: #212121;
   --primario: #0f4276;
   --primarioclaro: #006899;
   --degradado: #e2e3e4;
   --secundario: #fa8d26;
   --gris: #757575;
   --gris-claro: #e1e1e2;
}

/* Globales*/
html {
   font-size: 62.5%;
}

body {
   font-size: 16px;
   /* 1rem = 10px*/
   font-family: 'Lucida Sans Unicode', sans-serif;
   background-color: var(--blanco);
   line-height: 1.8rem;
}

body {
   font-size: 16px;
   /* 1rem = 10px*/
   font-family: 'Myriad Pro/regular', sans-serif;
   background-color: var(--blanco);
   line-height: 1.8rem;
}


.contenedor {
   max-width: 120rem;
   margin: 0 auto;
}

.imagenes {
   justify-content: center;
}

/* Tipografia */
.parrafo {
   text-align: justify;
}

h1 {
   font-size: 2.0rem;
   margin: 0 0 3rem 0;
}

h2 {
   font-size: 1.8rem;
   margin: 0 0 3rem 0;
}

h3 {
   font-size: 1.5rem;
   margin: 0 0 3rem 0;
}


h1,
h2,
h3 {
   text-align: center;
   color: #0c457a;
}

.titulo-1 {
   font-size: 1.3rem;
   color: #0c457a;
   font-weight: bold;
}

.titulo-2 {
   font-size: 1.8rem;
   color: #0c457a;
   font-weight: bold;
}

.titulo-3 {
   font-size: 2rem;
   color: #0c457a;
   font-weight: bold;
}

/* header*/
.header {
   display: flex;
   justify-content: center;
   background-color: var(--primario);
}

.header__logo {
   max-width: 120rem;
   width: 100%;
}


/**Navegacion**/
.navegacion {
   background-color: var(--primario);
   padding: 1.2rem 0;
   display: flex;
   justify-content: center;
   gap: 2rem;
   margin: 0 0 1.2rem 0;
   /*gap: 2rem; * Separacion forma nueva en 2022 ahorita en 2023 lo soporta mejor pero Internet explorer aun no**/
}

.navegacion-principal {
   font-family: var(--fuentePrincipal);
   color: var(--blanco);
   font-size: 1.3rem;
   font-weight: 400;
   margin-right: 2rem;
   text-decoration: none;
}


/* Encabezado*/
.crossmark {
   padding: 0 2rem 0 0;
   margin: 0 0 0 1rem;
}

.id,
.doi,
.tipo-articulo {
   font-family: var(--fuentePrincipal);
   font-size: 1.3rem;
   font-weight: bold;
   margin: 0 0 0 1rem;
}

.doi {
   color: #0f4276;
}

.tipo-articulo {
   text-align: right;
   margin: 0 1rem 2rem 0;
}

/*Autores*/
.autores {
   justify-content: center;
   text-align: center;
   font-size: 1.3rem;
   margin: 5rem 0 6rem 0;
}

.afiliaciones {
   background-color: transparent;
   justify-content: center;
   text-align: left;
   font-size: 1.3rem;
}

@media (min-width: 768px) {
   .afiliaciones {
      margin: 0 30rem 2rem 30rem;
      padding: 1rem;
   }
}

/*Highlights*/
.highlights {
   background-color: var(--gris-claro);
   justify-content: center;
   text-align: justify;
   font-size: 1.2rem;
}

@media (min-width:720px) {
   .highlights {
      margin: 2rem 18rem 2rem 18rem;
      padding: 4rem 4rem 4rem 5rem;
   }
}

/*Citacion*/
.citacion {
   background-color: transparent;
   justify-content: justify;
   text-align: left;
   font-size: 1.3rem;
}

@media (min-width: 768px) {
   .citacion {
      margin: 0 16rem 2rem 16rem;
      padding: 0rem 3rem 0rem 4rem;
   }
}

/** Fechas e ISSN**/
.nosotros {
   display: grid;
   grid-template-rows: repeat(2, auto);
}

@media (min-width: 768px) {
   .nosotros {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
   }
}

.nosotros__contenido {
   font-size: 1.5rem;
   line-height: 1.2;
   text-align: justify;
}

/*Contenido del articulo*/
.contenido {
   background-color: var(--gris-claro);
   justify-content: center;
   text-align: left;
   font-size: 1.3rem;
   padding: 5rem 5rem;
   margin: 3rem 8rem 3rem 8rem;
}

.tablas {
   justify-content: center;
   font-size: 1rem;
}

/*ventana modal Referencias*/
.modalDialog {
   position: fixed;
   font-family: Arial, Helvetica, sans-serif;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 99999;
   opacity: 0;
   -webkit-transition: opacity 400ms ease-in;
   -moz-transition: opacity 400ms ease-in;
   transition: opacity 400ms ease-in;
   pointer-events: none;
}

.modalDialog:target {
   opacity: 1;
   pointer-events: auto;
}

.modalDialog>div {
   width: 600px;
   position: relative;
   margin: 18% auto;
   padding: 10px 20px 13px 20px;
   border-radius: 8px;
   background: #fff;
   background: -moz-linear-gradient(#fff, #999);
   background: -webkit-linear-gradient(#fff, #999);
   background: -o-linear-gradient(#fff, #999);
   -webkit-transition: opacity 400ms ease-in;
   -moz-transition: opacity 400ms ease-in;
   transition: opacity 400ms ease-in;
}

.close {
   background: #606061;
   color: #FFFFFF;
   line-height: 25px;
   position: absolute;
   right: -12px;
   text-align: center;
   top: -10px;
   width: 24px;
   text-decoration: none;
   font-weight: bold;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -moz-box-shadow: 1px 1px 3px #000;
   -webkit-box-shadow: 1px 1px 3px #000;
   box-shadow: 1px 1px 3px #000;
}

.close:hover {
   background: #00d9ff;
}

/*ventana emergente afiliaciones (TOOLTIP)*/
.tooltip-container {
   position: relative;
   /*relative: los elementos se posicionan de forma relativa a su posición normal.*/
   display: inline-block;
}

.tooltip-text {
   visibility: hidden;
   width: 245px;
   background-color: #000;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px;
   position: absolute;
   z-index: 1;
   top: 125%;
   /* Posiciona el tooltip bajo del elemento */
   left: 50%;
   transform: translateX(-50%);
   opacity: 0;
   transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
   visibility: visible;
   opacity: 1;
}


/*tabla*/
.table-responsive {
   display: block;
   width: 10%;
   overflow-x: auto;
}

.table-responsive2 {
   display: block;
   width: 100%;
   height: 85%;
   overflow-y: scroll;
}

.categorias {
   text-align: left;
}

table {
   font-size: 0.9rem;
   border-spacing: 0;
   border-collapse: collapse;
   width: 880px;
   /*tamañotabla*/
   margin: 0px auto;
}

td,
th {
   border-top: 1.5px solid var(--primario);
   border-bottom: 1.5px solid var(--primario);
   padding: 1.5px;
   text-align: center;
   line-height: 1.4rem;
}

tr:nth-child(even) {
   background-color: #ffffff;
}

td:nth-child(n + 3),
th:nth-child(n + 3) {
   text-align: none;
   /* estaba en center*/
}

tbody tr:hover {
   background-color: rgb(235, 234, 234);
}

thead {
   background-color: rgb(252, 252, 252);
   color: var(--primario);
}

/*ESTO LO AGREGUE PARA VER SI FUNCIONA RESPONSIVE*/
.imagenes__fig {
   width: 100% !important;
   max-width: 70rem;
   /* Tamaño máximo en pantallas grandes */
   height: auto;
   display: block;
   margin: 0 auto;
   /* Centra la imagen */
}


/* Pantallas grandes */
/*imagenes*/
@media (min-width: 920px) {
   .imagenes__fig {
      max-width: 120rem;
      width: 100%;
   }
}

@media (min-width: 1080px) {
   .imagenes__fig {
      max-width: 70rem;
      width: 45%;
      /* editar tamaño fig*/
   }
}

@media (min-width: 1080px) {
   .imagenes__fig2 {
      max-width: 60rem;
      width: 100%;
   }
}

@media (min-width: 620px) {
   .imagenes__fig2 {
      max-width: 60rem;
      width: 100%;
   }
}

/*contenedortabla*/

.ventanatabla {
   background-color: #ebebeb;
   border-radius: 4px;
   color: #070707;
   position: relative;
   padding: 1rem 2rem 1rem 2rem;
   margin: 1rem 1rem 1rem 1rem;
   border: 1.2px #b9b8b8 solid;
}

.contenedor {
   max-width: 1000px;
   width: 95%;
   margin: 0 auto;
}

.entrada-blog a {
   display: inline-block;
   background-color: var(--primario);
   color: white;
   padding: 10px 20px;
   text-decoration: none;
   font-weight: lighter;
   text-transform: uppercase;
}

@media (min-width: 768px) {
   .dos--columnas {
      display: grid;
      grid-template-columns: 100%;
      width: 95%;
      margin: 1rem;

   }
}

/*ventanaemergentetabla*/

.ventana {
   background-color: rgb(255, 255, 255);
   width: 1080px;
   height: 280px;
   padding: 45px 0px 8px 0px;
   margin: 7% auto;
   position: relative;
}

.modal {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;
}

#IrVentanaFlotante:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana {
      width: 900px;
   }
}





/*tabla2*/


.ventana2 {
   background-color: rgb(255, 255, 255);
   width: 1800px;
   height: 280px;
   padding: 45px 0px;
   margin: 7% auto;
   position: relative;
}

.modal2 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;
}

#IrVentana2:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana2 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana2 {
      width: 900px;
   }
}

/*tabla3*/


.ventana3 {
   background-color: rgb(255, 255, 255);
   width: 100%;
   height: 280px;
   padding: 45px 0px;
   margin: 7% auto;
   position: relative;
}

.modal3 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;
}

#IrVentana3 :target {
   opacity: 1;
   pointer-events: auto;
}

#IrVentanaFlotante3:target {
   opacity: 1;
   pointer-events: auto;

}

@media (min-width:1080px) {
   .ventana3 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana3 {
      width: 900px;
   }
}


/*tabla4*/


.ventana4 {
   background-color: rgb(255, 255, 255);
   width: 650px;
   height: 280px;
   padding: 45px 0px 7px 0px;
   margin: 8% auto;
   position: relative;
}

.modal4 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;


}

#IrVentana4:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana4 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana4 {
      width: 900px;
   }
}

/*tabla5*/


.ventana5 {
   background-color: rgb(255, 255, 255);
   width: 650px;
   height: 380px;
   padding: 45px 0px 7px 0px;
   margin: 6% auto;
   position: relative;
}

.modal5 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;


}

#IrVentana5:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana5 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana5 {
      width: 900px;
   }
}

/*tabla6*/


.ventana6 {
   background-color: rgb(255, 255, 255);
   width: 650px;
   height: 380px;
   padding: 45px 0px 7px 0px;
   margin: 6% auto;
   position: relative;
}

.modal6 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;


}

#IrVentana6:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana6 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana6 {
      width: 900px;
   }
}

/*tabla7*/


.ventana7 {
   background-color: rgb(255, 255, 255);
   width: 600px;
   height: 380px;
   padding: 45px 0px 7px 0px;
   margin: 6% auto;
   position: relative;
}

.modal7 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;


}

#IrVentana7:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana7 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana7 {
      width: 900px;
   }
}

/*tabla8*/


.ventana8 {
   background-color: rgb(255, 255, 255);
   width: 600px;
   height: 380px;
   padding: 45px 0px 7px 0px;
   margin: 6% auto;
   position: relative;
}

.modal8 {
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   transition: all 1s;
   z-index: 100;


}

#IrVentana8:target {
   opacity: 1;
   pointer-events: auto;
}

@media (min-width:1080px) {
   .ventana8 {
      width: 1000px;
   }
}

@media (min-width:600px) {
   .ventana8 {
      width: 900px;
   }
}

.ref-azul {
   margin-left: -2px;
   /* Acerca el superíndice a la palabra */
}

este es de los superindices dentro de la tabla .ref-azul a {
   text-decoration: none;
   border: none;
   background: none;
   outline: none;
   color: blue;
}

.ref-azul {
   margin-left: 3px;
   /* Acerca el superíndice a la palabra */
}

.ref-azul a {
   text-decoration: none;
   color: #0000FF;
   border: none;
   background: none;
   outline: none;
   padding: 0;
   margin: 0;
}