/* grid-contenedor-body */

@supports(display: grid ) {

  .grid-contenedor-body {
    display: grid;
    min-height: 100%;
    grid-template-columns: 12fr;
    grid-template-areas: "header"
                         "contenido";
    /* Incluye: header y main */
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-body {
      margin: 0 auto;
      grid-template-columns: 1fr 10fr 1fr;
      grid-template-areas: "header header header"
                           "left-panel contenido right-panel";
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-body {
      grid-template-columns: 0.25fr 11.5fr 0.25fr;
    }
  }

  @media screen and (min-width: 1200px) {

    .grid-contenedor-body {
      grid-template-columns: 1fr 1200px 1fr;
    }
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: contenido;
  }

  .left-panel {
    grid-area: left-panel;
  }

  .right-panel {
    grid-area: left-panel;
  }
}

/* -> grid-contenedor-body */


/* grid-contenedor-franja-logo-buscador */

@supports(display: grid ) {

  .grid-contenedor-franja-logo-buscador {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "panel-logos"
                         "panel-gestor"
                         "panel-buscador";
    /* No es necesario grid-gap: 10px */
  }

  @media screen and (min-width: 576px) {

    .grid-contenedor-franja-logo-buscador {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "panel-logos panel-logos"
                           "panel-gestor panel-gestor"
                           "panel-buscador panel-buscador";
    }
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-franja-logo-buscador {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "panel-logos panel-logos"
                           "panel-gestor panel-buscador";
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-franja-logo-buscador {
      grid-template-columns: 1fr 2fr;
      grid-template-areas: "panel-logos panel-logos"
                           "panel-gestor panel-buscador";
    }
  }

  @media screen and (min-width: 1280px) {

    .xxxxgrid-contenedor-franja-logo-buscador {
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-areas: "panel-gestor panel-logos panel-buscador";
    }
  }

  .panel-gestor {
    grid-area: panel-gestor;
  }

  .panel-logos {
    grid-area: panel-logos;
  }

  .panel-buscador {
    grid-area: panel-buscador;
  }

}

/* -> grid-contenedor-franja-logo-buscador */


/* grid-contenedor-panel-gestor */

@supports(display: grid ) {

  .grid-contenedor-panel-gestor {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "side-menu titulo-gestor";
    /* No es necesario grid-gap: 10px */
  }

  .side-menu {
    grid-area: side-menu;
  }

  .titulo-gestor {
    grid-area: titulo-gestor;
  }

}

/* -> grid-contenedor-panel-gestor */


/* grid-contenedor-panel-logos */

@supports(display: grid ) {

  .grid-contenedor-panel-logos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo-cra"
                         "logo-ministerio";
    grid-row-gap: 10px;
    /* No es necesario grid-gap: 10px */
  }

  @media screen and (min-width: 576px) {

    .grid-contenedor-panel-logos {
      margin: 0 auto;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "logo-cra logo-ministerio";
      grid-gap: 0;
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-panel-logos {
      grid-gap: 1rem;
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-panel-logos {
      grid-gap: 2rem;
    }
  }

  @media screen and (min-width: 1280px) {

    .grid-contenedor-panel-logos {
      grid-gap: 3rem;
    }
  }

  @media screen and (min-width: 1680px) {

    .grid-contenedor-panel-logos {
      grid-gap: 4rem;
    }
  }

  @media screen and (min-width: 1980px) {

    .grid-contenedor-panel-logos {
      grid-gap: 6rem;
    }
  }

  .logo-cra {
    grid-area: logo-cra;
  }

  .logo-ministerio {
    grid-area: logo-ministerio;
  }

}

/* -> grid-contenedor-panel-gestor */

/* grid-contenedor-barra-botones */

@supports(display: grid ) {

  .grid-contenedor-barra-botones {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
    grid-template-areas: "boton-contraste boton-ayuda boton-buscar";
  }

  .boton-contraste {
    grid-area: boton-contraste;
  }

  .boton-ayuda {
    grid-area: boton-ayuda;
  }

  .boton-buscar {
    grid-area: boton-buscar;
  }

}

/* -> grid-contenedor-barra-botones */


/* grid-contenedor-contenido */

@supports(display: grid ) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "seleccion-modulo"
                         "navegacion-modulos"
                         "seleccion-categoria-documentos"
                         "navegacion-categorias-documentos";
    /* Incluye: seleccion-modulo, navegacion-modulos, seleccion-categoria-documentos y navegacion-categorias-documentos */
  }

  .seleccion-modulo {
    grid-area: seleccion-modulo;
  }

  .navegacion-modulos {
    grid-area: navegacion-modulos;
  }

  .seleccion-categoria-documentos {
    grid-area: seleccion-categoria-documentos;
  }

  .navegacion-categorias-documentos {
    grid-area: navegacion-categorias-documentos;
  }
}

/* -> grid-contenedor-contenido */


/* grid-contenedor-navegacion-modulos */

@supports(display: grid ) {

  .grid-contenedor-navegacion-modulos {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: minmax(100px, 270px);
    grid-auto-flow: row;
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(2, minmax(100px, 270px));
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(3, minmax(100px, 270px));
    }
  }

  @media screen and (min-width: 1280px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(4, minmax(100px, 270px));
    }
  }

}

/* -> grid-contenedor-navegacion-modulos */


/* grid-contenedor-modulo */

@supports(display: grid ) {

  .grid-contenedor-modulo {
    display: grid;
    grid-gap: 13px;
    grid-template-columns: 1fr;
    grid-template-areas: "imagen-modulo"
                         "titulo-modulo"
                         "ver-mas";
  }

  .imagen-modulo {
    grid-area: imagen-modulo;
  }

  .titulo-modulo {
    grid-area: titulo-modulo;
  }

  .ver-mas {
    grid-area: ver-mas;
  }

}

/* -> grid-contenedor-modulo */


/* grid-contenedor-navegacion-categorias-documentos */

@supports(display: grid ) {

  .grid-contenedor-navegacion-categorias-documentos {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-navegacion-categorias-documentos {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-navegacion-categorias-documentos {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (min-width: 1200px) {

    .grid-contenedor-navegacion-categorias-documentos {
      grid-template-columns: repeat(2, minmax(100px, 570px));
    }
  }

}

/* -> grid-contenedor-navegacion-categorias-documentos */


/* grid-contenedor-categoria */

@supports(display: grid ) {

  .grid-contenedor-categoria {
    display: grid;
    grid-gap: 13px;
    grid-template-columns: 0.75fr 3.50fr 1.75fr;
    grid-template-areas: "imagen-categoria titulo-categoria ver-mas-categoria";
  }

  .imagen-categoria {
    grid-area: imagen-categoria;
  }

  .titulo-categoria {
    grid-area: titulo-categoria;
  }

  .ver-mas-categoria {
    grid-area: ver-mas-categoria;
  }

}

/* -> grid-contenedor-categoria */


/* grid-contenedor-footer */

@supports(display: grid ) {

  .grid-contenedor-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-AJ"
                         "barra-final"
                         "franja-Gov-Co-footer";
  }

  .franja-AJ {
    grid-area: franja-AJ;
  }

  .barra-final {
    grid-area: barra-final;
  }

  .franja-Gov-Co-footer {
    grid-area: franja-Gov-Co-footer;
  }
}

/* -> grid-contenedor-footer */


/* grid-contenedor-panel-font-size-go-up */

@supports(display: grid ) {

  .grid-contenedor-franja-AJ {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto;
    grid-template-areas: "entidad"
                         "logo-aj-visible"
                         "nombre-obra"
                         "isbn"
                         "actualizacion"
                         "control-versiones"
                         "creditos"
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-franja-AJ {
      display: grid;
      grid-row-gap: 10px;
      grid-column-gap: 1rem;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "logo-aj-visible ."
                           "nombre-obra actualizacion"
                           "isbn control-versiones"
                           "creditos entidad";
    }
  }

  .logo-aj-visible {
    grid-area: logo-aj-visible;
  }

  .nombre-obra {
    grid-area: nombre-obra;
  }

  .actualizacion {
    grid-area: actualizacion;
  }

  .isbn {
    grid-area: isbn;
  }

  .control-versiones {
    grid-area: control-versiones;
  }

  .creditos {
    grid-area: creditos;
  }

  .entidad {
    grid-area: entidad;
  }
}

/* -> grid-contenedor-panel-font-size-go-up */


/* grid-contenedor-panel-botones-letter-size */

@supports(display: grid ) {

  .grid-contenedor-panel-inferior-botones-letter-size {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas: "panel-boton-font-menos-sencillo panel-boton-font-normal-sencillo panel-boton-font-mas-sencillo";
  }

  @media screen and (min-width: 768px) { /* El botón font-menos aparece para resoluciones mayores a 768px */

    .grid-contenedor-panel-inferior-botones-letter-size {
      grid-gap: 10px;
    }
  }

  .panel-boton-font-menos-sencillo {
    grid-area: panel-boton-font-menos-sencillo;
  }

  .panel-boton-font-normal-sencillo {
    grid-area: panel-boton-font-normal-sencillo;
  }

  .panel-boton-font-mas-sencillo {
    grid-area: panel-boton-font-mas-sencillo;
  }
}

/* -> grid-contenedor-panel-botones-acciones */


/* grid-contenedor-franjas-barra-final */

@supports(display: grid ) {

  .grid-contenedor-barra-final {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: repeat(var(--rows), 110px);
  }

  @media screen and (min-width: 340px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 100px);
    }
  }

  @media screen and (min-width: 400px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 95px);
    }
  }

  @media screen and (min-width: 460px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 85px);
    }
  }

  @media screen and (min-width: 576px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 84px);
    }
  }

  @media screen and (min-width: 630px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 85px);
    }
  }

  @media screen and (min-width: 700px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 70px);
    }
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 78px);
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 75px);
    }
  }

  @media screen and (min-width: 1100px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 70px);
    }
  }

  @media screen and (min-width: 1200px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 65px);
    }
  }

  @media screen and (min-width: 1300px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 65px);
    }
  }

  @media screen and (min-width: 1400px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 70px);
    }
  }

  @media screen and (min-width: 1600px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 62px);
    }
  }

  @media screen and (min-width: 1680px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 65px);
    }
  }

  @media screen and (min-width: 1800px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 65px);
    }
  }

  @media screen and (min-width: 1920px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 68px);
    }
  }

  @media screen and (min-width: 2100px) {

    .grid-contenedor-barra-final {
      grid-template-rows: repeat(var(--rows), 65px);
    }
  }

  .franja-blanca-inferior {
    grid-column-start: 1;
    grid-column-end: span var(--columns);
    grid-row-start: 1;
    grid-row-end: span 3;
  }

  .franja-roja-inferior {
    grid-column-start: 1;
    grid-column-end: span var(--columns);
    grid-row-start: 4;
    grid-row-end: span 7;
  }

  .contacto {
    grid-column-start: 2;
    grid-column-end: span calc(var(--columns) - 2);
    grid-row-start: 1;
    grid-row-end: span 9;
  }

  @media screen and (min-width: 768px) {

    .contacto {
      xxxxxgrid-row-start: 2; /* Hasta 20221006 estaba en 1 */ /* Agregado en 20221006 */
      xxxxxgrid-row-end: span 8; /* Hasta 20221006 estaba en 9 */ /* Agregado en 20221006 */
    }
  }

  @media screen and (min-width: 992px) {

    .contacto {
      grid-column-start: 3;
      grid-column-end: span calc(var(--columns) - 4);
      xxxxxgrid-row-start: 1; /* Agregado en 20221006 */
      xxxxxgrid-row-end: span 9; /* Agregado en 20221006 */
    }
  }

  @media screen and (min-width: 1280px) {

    .contacto {
      grid-column-start: 4;
      grid-column-end: span calc(var(--columns) - 6);
    }
  }

  @media screen and (min-width: 1680px) {

    .contacto {
      grid-column-start: 4; /* Hasta 20221006 estaba en 6 */
      grid-column-end: span calc(var(--columns) - 6); /* Hasta 20221006 estaba en - 10 */
    }
  }

  @media screen and (min-width: 1920px) {

    .contacto {
      grid-column-start: 6; /* Hasta 20221006 estaba en 8 */
      grid-column-end: span calc(var(--columns) - 10); /* Hasta 20221006 estaba en 14 */
    }
  }

}

/* -> grid-contenedor-franjas-barra-final */


/* grid-contenedor-contacto */

@supports(display: grid ) {

  .grid-contenedor-contacto {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "left-panel-contacto"
                         "right-panel-contacto";
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-contacto {
      grid-template-columns: 1.25fr 0.75fr;
      grid-template-areas: "left-panel-contacto right-panel-contacto";
      grid-column-gap: 15px;
    }
  }

  @media screen and (min-width: 1400px) {

    .grid-contenedor-contacto {
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 20px;
    }
  }

  .left-panel-contacto {
    grid-area: left-panel-contacto;
  }

  .right-panel-contacto {
    grid-area: right-panel-contacto;
  }
}

/* -> grid-contenedor-contacto */


/* grid-contenedor-left-panel-contacto */

@supports(display: grid ) {

  .grid-contenedor-left-panel-contacto {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-principal-footer"
                         "titulo-auxiliar-footer"
                         "datos-contacto"
                         "redes-sociales"
                         "menu-inferior";
  }

  .titulo-principal-footer {
    grid-area: titulo-principal-footer;
  }

  .titulo-auxiliar-footer {
    grid-area: titulo-auxiliar-footer;
  }

  .datos-contacto {
    grid-area: datos-contacto;
  }

  .redes-sociales {
    grid-area: redes-sociales;
  }

  .menu-inferior {
    grid-area: menu-inferior;
  }
}

/* -> grid-contenedor-left-panel-contacto */