/* grid-contenedor-header */

@supports(display: grid ) {

  .grid-contenedor-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-logo-buscador"
                         "franja-menu-institucional"
                         "franja-migas";
  }

  .franja-logo-buscador {
    grid-area: franja-logo-buscador;
  }

  .franja-menu-institucional {
    grid-area: franja-menu-institucional;
  }

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

/* -> grid-contenedor-header */


/* grid-contenedor-franja-gov-co-header */

@supports(display: grid ) {

  .grid-contenedor-franja-gov-co-header {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-areas: "left-panel-franja-gov-co-header contenido-franja-gov-co-header right-panel-franja-gov-co-header";
  }

  @media screen and (min-width: 1200px) { /* 1140px + 30px x 2 */
    .grid-contenedor-franja-gov-co-header {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-gov-co-header {
    grid-area: contenido-franja-gov-co-header;
  }

  .left-panel-franja-gov-co-header {
    grid-area: left-panel-franja-gov-co-header;
  }

  .right-panel-franja-gov-co-header {
    grid-area: right-panel-franja-gov-co-header;
  }
}

/* -> grid-contenedor-franja-gov-co-header */


/* grid-contenedor-logo-gov-co-sencillo */

@supports(display: grid ) {

  .grid-contenedor-logo-gov-co-sencillo {
    display: grid;
    grid-template-columns: 1.3fr 4fr 4fr 2.5fr;
    grid-template-areas: ". logo-gov-co-header idioma-y-funcionarios ."
      ". buscador-header buscador-header .";
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-logo-gov-co-sencillo {
      grid-template-columns: 0.5fr 1fr 1.5fr 2fr 0.5fr;
      grid-template-areas: ". logo-gov-co-header idioma-y-funcionarios buscador-header .";
    }
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-logo-gov-co-sencillo {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "logo-gov-co-header idioma-y-funcionarios buscador-header";
    } 
  }

  .logo-gov-co-header {
    grid-area: logo-gov-co-header;
  }

  .idioma-y-funcionarios {
    grid-area: idioma-y-funcionarios;
  }

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

}

/* -> grid-contenedor-logo-gov-co-sencillo */


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

@supports(display: grid) {

  .grid-contenedor-franja-logo-buscador {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-logo-buscador contenido-logo-buscador right-panel-logo-buscador";
  }

  @media screen and (min-width: 1200px) { /* 1140px + 30px x 2 */
    .grid-contenedor-franja-logo-buscador {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-logo-buscador {
    grid-area: contenido-logo-buscador;
  }

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

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

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


/* grid-contenedor-logo-buscador */

@supports(display: grid ) {

  .grid-contenedor-logo-buscador {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "panel-logo-COPNIA ir-a"
                         "icon-menu-franja-menu-institucional icon-menu-franja-menu-institucional";
  }

  @media screen and (max-width: 400px) {
    .grid-contenedor-logo-buscador {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "panel-logo-COPNIA ir-a"
        "icon-menu-franja-menu-institucional icon-menu-franja-menu-institucional";
      column-gap: 27px;
    }
  }

  @media screen and (min-width: 576px) {
    .grid-contenedor-logo-buscador {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "panel-logo-COPNIA ir-a"
                           "icon-menu-franja-menu-institucional icon-menu-franja-menu-institucional";
      grid-gap: 15px;
    }
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-logo-buscador {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:  "panel-logo-COPNIA . ir-a"
                            "icon-menu-franja-menu-institucional icon-menu-franja-menu-institucional";
      grid-column-gap: 20px;
      grid-row-gap: 0px;
    }
  }

  .panel-logo-COPNIA {
    grid-area: panel-logo-COPNIA;
  }

  .panel-logo-entidad {
    grid-area: panel-logo-entidad;
  }

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

  .ir-a {
    grid-area: ir-a;
  }

  .icon-menu-franja-menu-institucional {
    grid-area: icon-menu-franja-menu-institucional;
  }

}

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


/* grid-contenedor-franja-menu-institucional */

@supports(display: grid ) {

  .grid-contenedor-franja-menu-institucional {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-menu-institucional contenido-franja-menu-institucional right-panel-franja-menu-institucional";
  }

  @media screen and (min-width: 1200px) { /* 1140px + 30px x 2 */
    .grid-contenedor-franja-menu-institucional {
      grid-template-columns: 1fr 32fr 1fr;
    }
  }

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

    /* 1140px + 30px x 2 */
    .grid-contenedor-franja-menu-institucional {
      grid-template-columns: 1fr 50fr 1fr;
    }
  }

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

    .grid-contenedor-franja-menu-institucional {
      grid-template-columns: 1fr 20fr 1fr;
    }
  }

  .contenido-franja-menu-institucional {
    grid-area: contenido-franja-menu-institucional;
  }

  .left-panel-franja-menu-institucional {
    grid-area: left-panel-franja-menu-institucional;
  }

  .right-panel-franja-menu-institucional {
    grid-area: right-panel-franja-menu-institucional;
  }
}

/* -> grid-contenedor-franja-menu-institucional */


/* grid-contenedor-menu-institucional */

@supports(display: grid ) {

  .grid-contenedor-menu-institucional {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "icon-menu-franja-menu-institucional"
                         "menu-vertical-franja-menu-institucional";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 1230px) { /* Límite igual en .grid-contenedor-menu-institucional, .menu-vertical-franja-menu-institucional y en .icon-menu-franja-menu-institucional */
    .grid-contenedor-menu-institucional {
      grid-template-columns: 1fr;
      grid-template-areas: "menu-horizontal-franja-menu-institucional";
    }
  }

  .menu-horizontal-franja-menu-institucional {
    grid-area: menu-horizontal-franja-menu-institucional;
  }

  .icon-menu-franja-menu-institucional {
    grid-area: icon-menu-franja-menu-institucional;
  }

  .menu-vertical-franja-menu-institucional {
    grid-area: menu-vertical-franja-menu-institucional;
  }

}

/* -> grid-contenedor-menu-institucional */


/* grid-contenedor-panel-casilla-botones-en-header */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-botones-en-header {
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-areas: "input-casilla-busqueda-en-header boton-buscar-texto-en-header";
    grid-row-gap: 0;
  }

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

  .input-casilla-busqueda-en-header {
    grid-area: input-casilla-busqueda-en-header;
  }

  .boton-buscar-texto-en-header {
    grid-area: boton-buscar-texto-en-header;
  }
}

/* -> grid-contenedor-panel-casilla-botones-en-header */


/* grid-contenedor-panel-casilla-botones-en-header */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-botones-en-header {
    display: grid;
    grid-template-columns: 1fr 16px 40px;
    grid-template-areas: "form-casilla-busqueda-en-header boton-clear-texto-en-header boton-buscar-texto-en-header";
    grid-row-gap: 0;
  }

  .form-casilla-busqueda-en-header {
    grid-area: form-casilla-busqueda-en-header;
  }

  .boton-clear-texto-en-header {
    grid-area: boton-clear-texto-en-header;
  }

  .boton-buscar-texto-en-header {
    grid-area: boton-buscar-texto-en-header;
  }
}

/* -> grid-contenedor-panel-casilla-botones-en-header */