/*==========================================================================================================================================
  Desarrollador: Angélica María Rodríguez Cabello
  Estilos para la sección PUBLICACIONES
==========================================================================================================================================*/

/* Contenedor que tendrá el banner con el título PUBLICACIONES */
.publicaciones-banner-container {
  width: 100%;
  position: relative;
  text-align: center;
  color: white;
}

/* Imagen del banner de publicaciones */
#banner-publicaciones {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* Agregamos padding al botón de consultar */
.padd {
  padding-top: 10px;
  padding-bottom: 30px;
}

/* Texto que dice PUBLICACIONES en el banner */
.centered-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-bottom: 4px solid white;
  width: 500px;
}

/* Segunda línea debajo del título PUBLICACIONES del banner */
.second-underline, .underline-docs-interes {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 8px solid white;
  width: 160px;
}

/* Cuadrícula de las opciones del paginador */
.publicaciones-opciones-header {
  width: 1305px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 118px 273px 293px 273px 288px;
  grid-template-columns: 118px 273px 293px 273px 288px;
  height: 80px;
  margin: 0 auto;
  position: relative;
  border-bottom: 2px solid lightgray;
  overflow: hidden;
}

/* Clase del contenedor de opciones del header */
.tab {
  overflow: hidden;
}

/* Clase para dar estilo a los botones de las opciones del header */
.tablinks {
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  background-color: white;
}

/* Agregamos efecto al pasar el mouse por los botones del header */
.tablinks:hover {
  opacity: 0.5;
  cursor: pointer;
  color: white;
  background-color: lightgray;
}

/* Contenedores de los botones del header del paginador */
.todas { -ms-grid-row: 1; -ms-grid-column: 1; }
.movilidad { -ms-grid-row: 1; -ms-grid-column: 2;  }
.desarrollo-urbano { -ms-grid-row: 1; -ms-grid-column: 3; }
.medio-ambiente { -ms-grid-row: 1; -ms-grid-column: 4; }
.desarrollo-social { -ms-grid-row: 1; -ms-grid-column: 5; }

/* Imagen que se encuentra al lado izquierdo del título de cada botón */
.f-l {
  float: left;
  text-align: center;
}

/* Texto que se encuentra al lado derecho de cada imagen del header */
.f-r {
  margin-left: -50px;
  float: right;
  text-align: center;
  padding-top: 10px;
}

/* Cuadrícula que contiene las publicaciones */
.publicaciones-container {
  width: 1160px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 290px 290px 290px 290px;
  grid-template-columns: 290px 290px 290px 290px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* Publicaciones de la primer fila */
#ir1 { -ms-grid-row: 1; -ms-grid-column: 1; }
#ir2 { -ms-grid-row: 1; -ms-grid-column: 2; }
#ir3 { -ms-grid-row: 1; -ms-grid-column: 3; }
#ir4 { -ms-grid-row: 1; -ms-grid-column: 4; }
#txr1 { -ms-grid-row: 2; -ms-grid-column: 1; }
#txr2 { -ms-grid-row: 2; -ms-grid-column: 2; }
#txr3 { -ms-grid-row: 2; -ms-grid-column: 3; }
#txr4 { -ms-grid-row: 2; -ms-grid-column: 4; }

/* Publicaciones de la segunda fila */
#ir5 { -ms-grid-row: 3; -ms-grid-column: 1; }
#ir6 { -ms-grid-row: 3; -ms-grid-column: 2; }
#ir7 { -ms-grid-row: 3; -ms-grid-column: 3; }
#ir8 { -ms-grid-row: 3; -ms-grid-column: 4; }
#txr5 { -ms-grid-row: 4; -ms-grid-column: 1; }
#txr6 { -ms-grid-row: 4; -ms-grid-column: 2; }
#txr7 { -ms-grid-row: 4; -ms-grid-column: 3; }
#txr8 { -ms-grid-row: 4; -ms-grid-column: 4; }

/* Publicaciones de la tercera fila */
#ir9 { -ms-grid-row: 5; -ms-grid-column: 1; }
#ir10 { -ms-grid-row: 5; -ms-grid-column: 2; }
#ir11 { -ms-grid-row: 5; -ms-grid-column: 3; }
#ir12 { -ms-grid-row: 5; -ms-grid-column: 4; }
#txr9 { -ms-grid-row: 6; -ms-grid-column: 1; }
#txr10 { -ms-grid-row: 6; -ms-grid-column: 2; }
#txr11 { -ms-grid-row: 6; -ms-grid-column: 3; }
#txr12 { -ms-grid-row: 6; -ms-grid-column: 4; }

/* Contenedor del paginador */
.pagination-control {
  width: 450px;
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 75px 75px 75px 75px 75px 75px;
  grid-template-columns: 75px 75px 75px 75px 75px 75px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* Divs dentro del contenedor de paginación */
.pagination-control > div {
  padding: 5px;
}

/* Posicionamos paginador */
.pagination-control { -ms-grid-row: 7; -ms-grid-column: 1; grid-column: 1 / span 6; -ms-grid-column-span: 6; }

/* Divs que contendrán los números de las páginas que contiene el paginador */
#l-l { -ms-grid-row: 1; -ms-grid-column: 1; }
#l-1 { -ms-grid-row: 1; -ms-grid-column: 2; }
#l-2 { -ms-grid-row: 1; -ms-grid-column: 3; }
#l-3 { -ms-grid-row: 1; -ms-grid-column: 4; }
#l-4 { -ms-grid-row: 1; -ms-grid-column: 5; }
#l-r { -ms-grid-row: 1; -ms-grid-column: 6; }

/* Flechas del paginador */
.right-arrow, .left-arrow {
  background-color: #daf1e6;
}

/* Asignamos tamaño para cada publicación */
.revista-publicacion {
  height: 200px;
  margin-top: 20px;
}

/* Padding a cada div de publicación */
.rev-p {
  padding: 3px 20px;
}

/* Estilo de portada vertical */
.portada-revista-vertical {
  box-shadow: 0px 0px 5px lightgrey;
  width: 120px;
  height: 160px;
  margin: 0px;
  padding: 10px;
}

/* Estilo de portada horizontal */
.portada-revista-horizontal {
  box-shadow: 0px 0px 5px lightgrey;
  width: 160px;
  height: 120px;
  margin: 0px;
  padding: 10px;
}

/* Asignamos estilo a cada botón del header */
.tab .button-label {
  border-radius: 25px;
  background-color: white;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
}

/* Agregamos efecto al pasar el mouse por cada botón del header */
.tab .button-label:hover {
  background-color: lightgray;
}

/* Agregamos color de fondo a cada botón del header activo */
.tab .button-label.active {
  background-color: lightgray;
}

/* Agregamos estilo a cada botón */
.button {
  border-radius: 25px;
  background-color: #01835F;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
}

/* Agregamos efecto al pasar el mouse por cada botón */
.button:hover {
  opacity: 0.7;
}

/* Botón para consultar cada publicación */
.derecha-btn {
  text-align: right;
  margin-top: 10px;
}

/* Pintamos de color verde la página actual */
.num-bg-green {
  background-color: #01835F;
  color: white;
}

/* Agregamos color de fondo a las flechas del paginador */
.arrow {
  background-color: #daf1e6;
}

/* Agregamos cursor al pasar el mouse por los links */
.sin-subrayar:hover {
  cursor: pointer;
}

/* Tablets */
@media only screen and (max-width: 1270px) {
  /* Texto de la derecha de la imagen del header */
  .f-r {
    padding-top: 0px;
  }

  /* Contenedores de los botones del header del paginador */
  .movilidad { margin-bottom: -4px; }
  .desarrollo-urbano { margin-bottom: -4px; }
  .medio-ambiente { margin-bottom: -4px; }
  .desarrollo-social { margin-bottom: -4px; }

  /* Cuadrícula de las opciones del paginador */
  .publicaciones-opciones-header {
    display: block;
    height: auto;
    text-align: center;
    width: 100%;
    padding-top: 0px;
  }

  /* Ocultar imágenes del header y sólo mostrar títulos */
  .imagen-header {
    display: none;
  }

  /* Alinear al centro */
  .left {
    text-align: center !important;
    width: 100%;
  }

  /* Contenedor que tendrá el banner con el título PUBLICACIONES y la imagen */
  #banner-publicaciones, .publicaciones-banner-container {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* Texto que dice PUBLICACIONES en el banner */
  .centered-text {
    top: 35%;
    width: 300px;
  }

  /* Segunda línea debajo del título PUBLICACIONES del banner */
  .second-underline {
    top: 57%;
    width: 100px;
  }

  /* Segunda línea debajo de documentos de interés */
  .underline-docs-interes {
    top: 67%;
    width: 100px;
  }

  /* Cuadrícula que contiene las publicaciones */
  .publicaciones-container {
    width: 582px;
    -ms-grid-columns: 291px 291px;
    grid-template-columns: 291px 291px;
  }

  /* Publicaciones de la primera fila */
  #ir1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; }
  #ir2 { -ms-grid-row: 1; -ms-grid-column: 2; grid-row: 1; grid-column: 2; }
  #ir3 { -ms-grid-row: 3; -ms-grid-column: 1; grid-row: 3; grid-column: 1; }
  #ir4 { -ms-grid-row: 3; -ms-grid-column: 2; grid-row: 3; grid-column: 2; }
  #txr1 { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; }
  #txr2 { -ms-grid-row: 2; -ms-grid-column: 2; grid-row: 2; grid-column: 2; }
  #txr3 { -ms-grid-row: 4; -ms-grid-column: 1; grid-row: 4; grid-column: 1; }
  #txr4 { -ms-grid-row: 4; -ms-grid-column: 2; grid-row: 4; grid-column: 2; }

  /* Publicaciones de la segunda fila */
  #ir5 { -ms-grid-row: 5; -ms-grid-column: 1; grid-row: 5; grid-column: 1; }
  #ir6 { -ms-grid-row: 5; -ms-grid-column: 2; grid-row: 5; grid-column: 2; }
  #ir7 { -ms-grid-row: 7; -ms-grid-column: 1; grid-row: 7; grid-column: 1; }
  #ir8 { -ms-grid-row: 7; -ms-grid-column: 2; grid-row: 7; grid-column: 2; }
  #txr5 { -ms-grid-row: 6; -ms-grid-column: 1; grid-row: 6; grid-column: 1; }
  #txr6 { -ms-grid-row: 6; -ms-grid-column: 2; grid-row: 6; grid-column: 2; }
  #txr7 { -ms-grid-row: 8; -ms-grid-column: 1; grid-row: 8; grid-column: 1; }
  #txr8 { -ms-grid-row: 8; -ms-grid-column: 2; grid-row: 8; grid-column: 2; }

  /* Publicaciones de la tercera fila */
  #ir9 { -ms-grid-row: 9; -ms-grid-column: 1; grid-row: 9; grid-column: 1; }
  #ir10 { -ms-grid-row: 9; -ms-grid-column: 2; grid-row: 9; grid-column: 2; }
  #ir11 { -ms-grid-row: 11; -ms-grid-column: 1; grid-row: 11; grid-column: 1; }
  #ir12 { -ms-grid-row: 11; -ms-grid-column: 2; grid-row: 11; grid-column: 2; }
  #txr9 { -ms-grid-row: 10; -ms-grid-column: 1; grid-row: 10; grid-column: 1; }
  #txr10 { -ms-grid-row: 10; -ms-grid-column: 2; grid-row: 10; grid-column: 2; }
  #txr11 { -ms-grid-row: 12; -ms-grid-column: 1; grid-row: 12; grid-column: 1; }
  #txr12 { -ms-grid-row: 12; -ms-grid-column: 2; grid-row: 12; grid-column: 2; }

  /* Posicionamos contenedor de paginador */
  .pagination-control { width: 582px; -ms-grid-row: 8; -ms-grid-column: 1; grid-column: 1 / span 6; -ms-grid-column-span: 6; }

  /* Contenedor del paginador */
  .pagination-control {
    -ms-grid-columns: 97px 97px 97px 97px 97px 97px;
    grid-template-columns: 97px 97px 97px 97px 97px 97px;
    margin: 0 auto;
    text-align: center;
  }

  /* Ocultar elemento */
  .no-mostrar-espacio-en-blanco {
    display: none;
  }
}

  /* Celulares */
@media only screen and (max-width: 615px) {
  /* Contenedor que tendrá el banner con el título PUBLICACIONES y la imagen */
  #banner-publicaciones, .publicaciones-banner-container {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  /* Texto que dice PUBLICACIONES en el banner */
  .centered-text {
    top: 35%;
    width: 230px;
  }

  /* Segunda línea debajo del título PUBLICACIONES del banner */
  .second-underline {
    top: 63%;
    width: 100px;
  }

  /* Segunda línea debajo del título DOCUMENTOS DE INTERÉS del banner */
  .underline-docs-interes {
    top: 78%;
    width: 100px;
  }

  /* Cuadrícula que contiene las publicaciones */
  .publicaciones-container {
    width: 290px;
    -ms-grid-columns: 290px;
    grid-template-columns: 290px;
  }

  /* Primera fila de publicaciones */
  #ir1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; }
  #ir2 { -ms-grid-row: 3; -ms-grid-column: 1; grid-row: 3; grid-column: 1; }
  #ir3 { -ms-grid-row: 5; -ms-grid-column: 1; grid-row: 5; grid-column: 1; }
  #ir4 { -ms-grid-row: 7; -ms-grid-column: 1; grid-row: 7; grid-column: 1; }
  #txr1 { -ms-grid-row: 2; -ms-grid-column: 1; grid-row: 2; grid-column: 1; }
  #txr2 { -ms-grid-row: 4; -ms-grid-column: 1; grid-row: 4; grid-column: 1; }
  #txr3 { -ms-grid-row: 6; -ms-grid-column: 1; grid-row: 6; grid-column: 1; }
  #txr4 { -ms-grid-row: 8; -ms-grid-column: 1; grid-row: 8; grid-column: 1; }

  /* Segunda fila de publicaciones */
  #ir5 { -ms-grid-row: 9; -ms-grid-column: 1; grid-row: 9; grid-column: 1; }
  #ir6 { -ms-grid-row: 11; -ms-grid-column: 1; grid-row: 11; grid-column: 1; }
  #ir7 { -ms-grid-row: 13; -ms-grid-column: 1; grid-row: 13; grid-column: 1; }
  #ir8 { -ms-grid-row: 15; -ms-grid-column: 1; grid-row: 15; grid-column: 1; }
  #txr5 { -ms-grid-row: 10; -ms-grid-column: 1; grid-row: 10; grid-column: 1; }
  #txr6 { -ms-grid-row: 12; -ms-grid-column: 1; grid-row: 12; grid-column: 1; }
  #txr7 { -ms-grid-row: 14; -ms-grid-column: 1; grid-row: 14; grid-column: 1; }
  #txr8 { -ms-grid-row: 16; -ms-grid-column: 1; grid-row: 16; grid-column: 1; }

  /* Tercera fila de publicaciones */
  #ir9 { -ms-grid-row: 17; -ms-grid-column: 1; grid-row: 17; grid-column: 1; }
  #ir10 { -ms-grid-row: 19; -ms-grid-column: 1; grid-row: 19; grid-column: 1; }
  #ir11 { -ms-grid-row: 21; -ms-grid-column: 1; grid-row: 21; grid-column: 1; }
  #ir12 { -ms-grid-row: 23; -ms-grid-column: 1; grid-row: 23; grid-column: 1; }
  #txr9 { -ms-grid-row: 18; -ms-grid-column: 1; grid-row: 18; grid-column: 1; }
  #txr10 { -ms-grid-row: 20; -ms-grid-column: 1; grid-row: 20; grid-column: 1; }
  #txr11 { -ms-grid-row: 22; -ms-grid-column: 1; grid-row: 22; grid-column: 1; }
  #txr12 { -ms-grid-row: 24; -ms-grid-column: 1; grid-row: 24; grid-column: 1; }

  /* Posicionamos contenedor de paginador */
  .pagination-control { width: 290px; -ms-grid-row: 8; -ms-grid-column: 1; grid-column: 1 / span 6; -ms-grid-column-span: 6; }

  /* Trazamos cuadrícula de paginador */
  .pagination-control {
    -ms-grid-columns: 48px 48px 48px 48px 48px 48px;
    grid-template-columns: 48px 48px 48px 48px 48px 48px;
    margin: 0 auto;
    text-align: center;
  }

  /* Ocultar elemento */
  .no-mostrar-espacio-en-blanco {
    display: none;
  }
}