/* grid-contenedor-body */

@supports(display: grid ) {

  .grid-contenedor-body {
    display: grid;
    grid-template-columns: 12fr;
    grid-template-areas: "header"
                         "contenido";
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-body {
      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 1140px 1fr;
    }
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: contenido;
  }

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

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

/* -> grid-contenedor-body */


/* grid-contenedor-contenido */

@supports(display: grid ) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-migas"
                         "seleccion-modulo"
                         "panel-casilla-busqueda-index"
                         "navegacion-modulos";
  }

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

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

  .panel-casilla-busqueda-index {
    grid-area: panel-casilla-busqueda-index;
  }

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

}

/* -> grid-contenedor-contenido */


/* grid-contenedor-seleccion-modulo */

@supports(display: grid ) {

  .grid-contenedor-seleccion-modulo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-principal"
                         "titulo-auxiliar"
                         "titulo-buscador";
  }

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

    .grid-contenedor-seleccion-modulo {
      grid-template-columns: 0.1fr 1fr 0.1fr;
      grid-template-areas: "left-margin-seleccion-modulo titulo-principal right-margin-seleccion-modulo"
                           "left-margin-seleccion-modulo titulo-auxiliar right-margin-seleccion-modulo"
                           "left-margin-seleccion-modulo titulo-buscador right-margin-seleccion-modulo";
    }

  }

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

    .grid-contenedor-seleccion-modulo {
      grid-template-columns: 0.15fr 1fr 0.15fr;
    }

  }

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

    .grid-contenedor-seleccion-modulo {
      grid-template-columns: 0.25fr 1fr 0.25fr;
    }

  }

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

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

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

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

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

}

/* -> grid-contenedor-seleccion-modulo */


/* grid-contenedor-panel-casilla-busqueda-index */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-busqueda-index {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "panel-casilla-botones-index"
                         "panel-terminos-sugeridos-index"
                         "panel-documentos-sugeridos-index";
  }

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

    .grid-contenedor-panel-casilla-busqueda-index {
      grid-template-columns: 0.1fr 1fr 0.1fr;
      grid-template-areas: "left-margin-casilla panel-casilla-botones-index right-margin-casilla"
                           "left-margin-casilla panel-terminos-sugeridos-index right-margin-casilla"
                           "left-margin-casilla panel-documentos-sugeridos-index right-margin-casilla";
    }

  }

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

    .grid-contenedor-panel-casilla-busqueda-index {
      grid-template-columns: 0.15fr 1fr 0.15fr;
    }

  }

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

    .grid-contenedor-panel-casilla-busqueda-index {
      grid-template-columns: 0.25fr 1fr 0.25fr;
    }

  }

  .panel-casilla-botones-index {
    grid-area: panel-casilla-botones-index;
  }

  .panel-terminos-sugeridos-index {
    grid-area: panel-terminos-sugeridos-index;
  }

  .panel-documentos-sugeridos-index {
    grid-area: panel-documentos-sugeridos-index;
  }

  .left-margin-casilla {
    grid-area: left-margin-casilla;
  }

  .right-margin-casilla {
    grid-area: right-margin-casilla;
  }

}

/* -> grid-contenedor-panel-casilla-busqueda-index */


/* grid-contenedor-panel-casilla-botones-index */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-botones-index {
    display: grid;
    grid-template-columns: 1fr 80px;
    grid-template-areas: "input-casilla-busqueda-index boton-buscar-texto-index";
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-panel-casilla-botones-index {
      grid-template-columns: 1fr 70px; /* No se asigna margen a la derecha */
      grid-template-areas: "input-casilla-busqueda-index boton-buscar-texto-index";
    }

  }

  .input-casilla-busqueda-index {
    grid-area: input-casilla-busqueda-index;
  }

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

/* -> grid-contenedor-panel-casilla-botones-index */


/* grid-contenedor-panel-terminos-sugeridos-index */

@supports(display: grid ) {

  .grid-contenedor-panel-terminos-sugeridos-index {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "titulo-terminos-sugeridos-index"
                         "terminos-sugeridos-index";
  }

  .titulo-terminos-sugeridos-index {
    grid-area: titulo-terminos-sugeridos-index;
  }

  .terminos-sugeridos-index {
    grid-area: terminos-sugeridos-index;
  }

}

/* -> grid-contenedor-panel-terminos-sugeridos-index */


/* grid-contenedor-terminos-sugeridos-index */

@supports(display: grid ) {

  .grid-contenedor-terminos-sugeridos-index {
    display: grid;
    grid-template-columns: auto;
  }

}

/* -> grid-contenedor-terminos-sugeridos-index */


/* grid-contenedor-documentos-sugeridos-index */

@supports(display: grid ) {

  .grid-contenedor-documentos-sugeridos-index {
    display: grid;
    grid-template-columns: auto;
  }

}

/* -> grid-contenedor-documentos-sugeridos-index */


/* grid-contenedor-item-documentos-sugeridos-index */

@supports(display: grid ) {

  .grid-contenedor-item-documentos-sugeridos-index {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: auto;
    grid-template-areas: "texto-item-documentos-sugeridos-index";
  }

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

    .grid-contenedor-item-documentos-sugeridos-index {
      grid-template-columns: auto 145px; /* 10px de márgenes izquierdo y derecho del texto del botón + 23px de margen derecho del botón + aproximadamente 75px de ancho del texto con el tamaño original + un margen cuando se aumenta el tamaño del texto */
      grid-template-areas: "texto-item-documentos-sugeridos-index boton-abrir-documento-index";
    }
  }

  .texto-item-documentos-sugeridos-index {
    grid-area: texto-item-documentos-sugeridos-index;
  }

  .boton-abrir-documento-index {
    grid-area: boton-abrir-documento-index;
  }

}

/* -> grid-contenedor-item-documentos-sugeridos-index */