.header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "logoizquierda logocentro logoderecha";
}
.principal {
    /*background-color: lightblue;*/
    grid-area: principal;
    display: grid;
    grid-gap: 0.5em;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "contentprincipal";
    border-top: 1px solid gray;
    margin-top: 10px;
}

.footer {
    display: grid;
    grid-area: footer;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "footerizquierda footercentro footerderecha";
    background-color: #F2F2F2;
}

.grid {
    height: 100vh;
    margin: 0%;
    display: grid;
    grid-gap: 0.5em;
    grid-template-columns: 4fr 2fr 4fr;
    grid-template-rows: 1fr 18fr 1fr;
    grid-template-areas:
        "header header header"
        "principal principal principal"
        "footer footer footer ";
}
.contentPrincipal {
    grid-area: contentprincipal;
    background-image: url('Images/Fondos/fondoSistema.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 20px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 7fr 2fr;
    grid-template-areas:
        "principalheader principalheader principalheader"
        "principalcontent principalcontent principalcontent"
        "principalfooterizquierda principalfootercentro principalfooterderecha";
}

.logoIzquierda {
    grid-area: logoizquierda;
    background-image: url('Images/Logos/LogoPrincipal.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: 200px;
    height: 100px;
}


.logoCentro {
    grid-area: logocentro;
    background-image: url('Images/Logos/LogoCentro.png');
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
}

.logoDerecha {
    grid-area: logoderecha;
    background-image: url('Images/Logos/LogoSecundario50.png');
    background-repeat: no-repeat;
    background-position: right;
    align-content: end;
    background-size: 200px;
    height: 100px;
}

.footerIzquierda {
    grid-area: footerizquierda;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 150px;
    height: 100px;
}

.footerCentro {
    grid-area: footercentro;
    background-image: url('Images/Logos/footerCentro.png');
    background-repeat: no-repeat;
    background-position: center;
    align-content: end;
    background-size: 500px;
    height: 100px;
}

.footerDerecha {
    grid-area: footerderecha;
    height: 100px;
}

/* Areas Contenedor Principal */
.principalHeader {
    grid-area: principalheader;
}

.principalContent {
    grid-area: principalcontent;
    /*   background-image: url('Images/Fondos/tituloSistema.png');*/
    background-repeat: no-repeat;
    background-position: left;
    align-content: end;
}

.principalFooterIzquierda {
    grid-area: principalfooterizquierda;
    background-color: #C4BFBA;
    align-content: center;
    align-items: center;
    width: 400px;
    position: relative;
    left: 100px;
    height: fit-content;
    border-radius: 20px;
}

.principalfooterCentro {
    grid-area: principalfootercentro;
}

.principalfooterDerecha {
    grid-area: principalfooterderecha;
    background-image: url('Images/fondos/tituloFooter.png');
    background-repeat: no-repeat;
    background-position: center;
    align-content: end;
    background-size: 550px;
    height: 100px;
}

.boton {
    background-color: #F7CD46;
    border-radius: 20px;
    box-shadow: 3px 3px gray;
}

@media only screen and (max-width: 768px) {
    .grid {
        height: 100vh;
        margin: 0%;
        display: grid;
        grid-gap: 0.5em;
        grid-template-columns: 100%;
        grid-template-rows: 120px 280px 100px;
        grid-template-areas:
            "header"
            "principal"
            "footer";
    }
    .header {
        grid-area: header;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 120px;
        grid-template-areas:
            "logocentro";
    }

    .logoCentro {
        grid-area: logocentro;
        background-image: url('Images/Logos/LogoCentro.png');
        background-repeat: no-repeat;
        background-position: center;
        height: 100px;
        margin-top: 10px;
    }

    .principal {
        grid-area: principal;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 220px;
        grid-template-areas:
            "contentprincipal"
    }
    .contentPrincipal {
        grid-area: contentprincipal;
        background-image: url('Images/Fondos/FondoPrincipalLogin.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        border-radius: 80px;
        margin-top: 3px;
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: 200px;
        grid-template-areas:
            "principalcontent"
            "principalfooterizquierda";
    }
    .principalFooterIzquierda {
        grid-area: principalfooterizquierda;
        background-color: #C4BFBA;
        align-content: center;
        align-items: center;
        width: 200px;
        position:relative;
        left: 10px;
        height: fit-content;
        border-radius: 20px;
        display:grid;
    }
    .footer {
        display: grid;
        grid-area: footer;
        grid-template-columns: 100%;
        grid-template-rows: 100px;
        grid-template-areas:
            "footercentro";
        background-color: #F2F2F2;
    }
    .footerCentro {
        grid-area: footercentro;
        background-image: url('Images/Logos/footerCentro360.png');
        background-repeat: no-repeat;
        background-position: center;
        align-content: end;
        background-size: 360px;
        height: 100px;
    }
}