/* grid-contenedor-header */
@supports (display: grid) {
  .grid-contenedor-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-azul-header"
      "franja-blanca"
      "franja-menu"
      "franja-sub";

  }

  .franja-azul-header {
    grid-area: franja-azul-header;
  }

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

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

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

/* --> grid-contenedor-header */


/* grid-franja-azul */

@supports (display: grid) {
  .grid-contenedor-franja-azul-header {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-areas: "izquierda-franja-azul-header centro-franja-azul-header derecha-franja-azul-header";
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-franja-azul-header {
      grid-template-columns: 0.2fr 1140px 1fr;
    }
  }

  .izquierda-franja-azul-header {
    grid-area: izquierda-franja-azul-header;
  }

  .centro-franja-azul-header {
    grid-area: centro-franja-azul-header;
  }

  .derecha-franja-azul-header {
    grid-area: derecha-franja-azul-header;
  }
}

/* grid contenedor-logo-gov */
@supports (display: grid) {
  .grid-contenedor-logo-gov {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: " logo_co logo-gov-footer";
  }

  .logo_co {
    grid-area: logo_co;
  }

  .logo-gov-footer {
    grid-area: logo-gov-footer;
  }
}

@supports (display: grid) {
  .grid-contenedor-logo-gov {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo-gov-header";
  }

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


/* grid-contenedor-franja-blanca */

@supports (display: grid) {
  .grid-contenedor-franja-blanca {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-areas: "izquierda-franja-blanca centro-franja-blanca derecha-franja-blanca";
  }

  @media screen and(min-width: 1200px) {
    .grid-contenedor-franja-blanca {
      grid-template-columns: 0fr 1140px 1fr;
    }
  }

  .izquierda-franja-blanca {
    grid-area: izquierda-franja-blanca;
  }

  .centro-franja-blanca {
    grid-area: centro-franja-blanca;
  }

  .derecha-franja-blanca {
    grid-area: derecha-franja-blanca;
  }
}

/* --> grid-contenedor-franja-blanca */


/* grid-contenedor-logos-cra */
@supports (display: grid) {
  .grid-contenedor-logos-cra {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "panel-logo-cra panel-cra panel-buscador";
    grid-gap: 15px;
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-logos-cra {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "panel-logo-cra panel-cra panel-buscador";
    }
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-logos-cra {
      grid-template-columns: 0.5fr 1fr 0.5fr;
      grid-template-areas: "panel-logo-cra panel-cra panel-buscador";
      grid-column-gap: 20px;
      grid-row-gap: 0px;
    }
  }

  @media screen and (max-width: 760px) {
    .grid-contenedor-logos-cra {
      grid-template-columns: 1fr;
      grid-template-areas:
        "panel-logo-cra"
        "panel-cra"
        "panel-buscador";
      grid-gap: 10px;
    }

  }

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

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

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

}

/* --> grid-contenedor-logos-cra */

@supports(display: grid) {

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

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

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

  }

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

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

/* -> grid-contenedor-panel-casilla-botones */
/* === Grid principal de la franja del menú institucional === */
@supports(display: grid) {

  .grid-contenedor-franja-menu {
    display: grid;
    grid-template-columns: minmax(30px, 0.5fr) minmax(180px, 1140px) minmax(1px, 1fr);
    grid-template-areas: "izquierda-panel-franja-menu centro-panel-franja-menu derecha-panel-franja-menu";
  }

  /* === Grid interno del menú institucional === */
  .grid-contenedor-menu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto ;
    grid-template-areas:
      "icon-menu-franja-menu"
      "menu-vertical-franja-menu-institucional";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 980px) {
    .grid-contenedor-menu {
      grid-template-columns: minmax(10px, 0.5fr) minmax(300px, 1140px) minmax(10px, 1fr);
      grid-template-rows: 1fr;
      grid-template-areas:
        "izquierda-panel-franja-menu menu-horizontal-franja-menu derecha-panel-franja-menu";
    }
  }

  /* === Áreas individuales del grid === */
  .menu-horizontal-franja-menu {
    grid-area: menu-horizontal-franja-menu;
  }

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

  .izquierda-panel-franja-menu {
    grid-area: izquierda-panel-franja-menu;
  }

  .centro-panel-franja-menu {
    grid-area: centro-panel-franja-menu;
  }

  .derecha-panel-franja-menu {
    grid-area: derecha-panel-franja-menu;
  }
}


/* grid-contenedor-menu */


@supports(display: grid) {

  .grid-contenedor-menu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "icon-menu-franja-menu"
      "menu-vertical-franja-menu-institucional";
  }


  @media screen and (min-width: 980px) {
    .grid-contenedor-menu {
      grid-template-columns: minmax(10px, 1fr) minmax(300px, 1140px) minmax(10px, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
        "icon-menu-franja-menu menu-horizontal-franja-menu derecha-panel-franja-menu"
        "menu-vertical-franja-menu-institucional";
    }
  }


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

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

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

}


@supports (display: grid) {
  .grid-contenedor-franja-sub {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "izquierda-panel-sub centro-sub derecha-panel-sub";
  }

  .izquierda-panel-sub {
    grid-area: izquierda-panel-sub;
  }

  .centro-sub {
    grid-area: centro-sub;
  }

  .derecha-panel-sub {
    grid-area: derecha-panel-sub;
  }
}

@supports(display: grid) {

  .contenedor-miga-inicio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: " texto-miga-inicio imagen-miga-inicio"
  }

  .imagen-miga-inicio {
    grid-area: imagen-miga-inicio;
  }

  .texto-miga-inicio {
    grid-area: texto-miga-inicio;
  }

}

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

  @media screen and (min-width: 768px) {
    .grid-contenedor-panel-botones {
      grid-template-columns: 1fr 40px;
      grid-template-areas: "input-casilla-busqueda boton-buscar-texto";
    }
  }
}

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