/* =============================
Configuraciones estructura
================================

Division vertical del screen 3 secciones
-menu: auto
-body: 1f
-footer: auto
============================= */

.mookup {
    background-color: var(--backgroundColor);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

nav {
    padding: 5px;
}

main {
    section {
        display: flex;
        justify-content: center;
        padding: 30px 10px;
    }
}

.footer {
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    text-align: center;
}


/* =============================
Distribucion columnas por dispositivo

cel: vista para celular
tab: vista para tablet
desk: vista para desktop
============================= */

.celOcultar {
    display: none;
}

.cel1Col {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}

.cel2Col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.cel3Col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}



/* =============================
Configuraciones de distribucion
============================= */

.w100 {
    width: 100%;
}

.w80 {
    width: 80%;
}

.viewPc,
.maxWidth {
    margin: auto;
    max-width: var(--maxWidth);
}

.padding5px {
    padding: 5px;
}

.padding10px {
    padding: 10px;
}

.padding15px {
    padding: 15px;
}



article {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}


/* =============================
Vista Tablet
============================= */
@media (min-width: 768px) {

    .tabOcultar {
        display: none;
    }

    .tab1Col {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tab2Col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .tab3Col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .tab4Col {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}



/* =============================
Vista Desktop
============================= */
@media (min-width: 1024px) {

    .deskOcultar {
        display: none;
    }

    .desk2Col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .desk3Col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 5px;
    }

    .desk4Col {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 5px;
    }

    .dashboard {
        display: grid;
        grid-template-columns: auto 85%;
    }

    .grafica {
        display: grid;
        grid-template-columns: 1fr 20%;
    }

    .content {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}