/* Variables */
:root {
    --altura-titulo: 30px;
    --altura-herramientas: 35px;
    --separacion-filas: 5px;
    --separacion-columnas: 5px;
    --mitad-altura-titulo: calc(var(--altura-titulo) / 2);
    --mitad-altura-herramientas: calc(var(--altura-herramientas) / 2);
}

.titulo-pagina {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
}




/* Contenedor que se ajusta al espacio disponible, se considera que el encabezado mide 50px */
.contenedor-ventana-disponible {
    height: calc(100vh - 50px);
    width: 100%;
}

.padding-lbr-10px {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

.amplitud-columna-2 {
    grid-column-start: span 2
}


/* 1 col 3 filas, titulo herramientas contenido */
.grid-1x3-t-h-c {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: var(--altura-titulo) var(--altura-herramientas) calc(100% - var(--altura-titulo) - var(--altura-herramientas));
    row-gap: var(--separacion-filas);
    /* restamos la suma de gaps*/
    height: calc(100% - var(--separacion-filas) - var(--separacion-filas));
    width: 100%;
}
/*.grid-1x3-t-h-c {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 34px 40px calc(100% - 34px - 40px);
    row-gap: 10px;*/
    /* restamos la suma de gaps*/
    /*height: calc(100% - 20px);
    width: 100%;
}*/


.titulo-pagina-1x1 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
}
/** ------------------------------------- */



/* ------------ grid 2 columnas y 4 filas */
.grid-2x4-t-h-c-c {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: var(--altura-titulo) var(--altura-herramientas) calc(60% - var(--mitad-altura-titulo) - var(--mitad-altura-herramientas)) calc(40% - var(--mitad-altura-titulo) - var(--mitad-altura-herramientas));
    row-gap: var(--separacion-filas);
    column-gap: var(--separacion-columnas);
    /* restamos la suma de gaps*/
    height: calc(100% - var(--separacion-filas) - var(--separacion-filas) - var(--separacion-filas));
    width: calc(100% - var(--separacion-columnas));
}
/*.grid-2x4-t-h-c-c {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: 34px 40px calc(60% - 17px - 20px) calc(40% - 17px - 20px);
    row-gap: 10px;
    column-gap: 10px;*/
    /* restamos la suma de gaps*/
    /*height: calc(100% - 30px);
    width: calc(100% - 10px);
}*/

.titulo-pagina-1x2 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    grid-column-start: span 2
}

.barra-herramientas-1x2 {
    grid-column-start: span 2
}
/** ------------------------------------- */



/* grid-1cx2f-6fr-4fr */
.grid-1cx2f-6fr-4fr {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 6fr 4fr;
    row-gap: 10px;
    height: calc(100% - 10px);
    width: 100%;
}





@media (max-width: 640px) {

    /* ------------ grid 2 columnas y 4 filas */
    .grid-2x4-t-h-c-c {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 34px 40px 50% 50% 50% 50%;
        row-gap: 10px;
        width: 100%;
    }

    .titulo-pagina-1x2 {
        grid-column-start: span 1
    }

    .barra-herramientas-1x2 {
        grid-column-start: span 1
    }
    /** ------------------------------------- */



}