/* grid-contenedor-header */

@supports(display: grid ) {

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

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

    .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: 1fr;
        grid-template-areas: "logo-gov-co-header";
    }

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

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


/* grid-contenedor-franja-logos-header */

@supports(display: grid) {

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

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

    .contenido-logos-header {
        grid-area: contenido-logos-header;
    }

    .left-franja-logos-header {
        grid-area: left-franja-logos-header;
    }

    .right-franja-logos-header {
        grid-area: right-franja-logos-header
    }
}

/* -> grid-contenedor-franja-logos-header */


/* grid-contenedor-logo-buscador */

@supports(display: grid ) {

    .grid-contenedor-logo-buscador {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "panel-logo-entidad";
        grid-gap: 15px;
    }

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

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

/* -> 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 1140px 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: 1070px) {
        .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-gestor */

@supports(display: grid ) {

    .grid-contenedor-panel-gestor {
        display: grid;
        grid-template-columns: auto 1fr;
        /* grid-template-areas: "side-menu titulo-gestor"; */
        grid-template-areas: "titulo-gestor";
    }

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

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

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


/* 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 */