/*
   definicion de layouts en CSS-grid a nivel de columna
*/
[class ^="gridLayoutColumna"] {
   display: grid;
   /*grid-auto-flow: row;*/
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   min-width: 100%;
   width: 100%;
   max-width: 100%;
   gap: .2rem;
   overflow: auto;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
}

/*clase para layout de columna con:
   -  un encabezado
   - una zona media
   - una zona cuerpo
   - una zona pie
*/
.gridLayoutColumnaEncMedCuePie {
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content 1fr;
   grid-template-areas:
      "areaColumnaEncabezado"
      "areaColumnaMedio"
      "areaColumnaCuerpo"
      "areaColumnaPie";
}

.gridLayoutColumnaRowMaxContent_1fr_1fr_MaxContent {
   grid-template-rows: min-content min-content min-content 1fr;
}

/*
   definicion de areas en CSS-grid de layouts a nivel de columna
*/
[class ^="gridAreaColumna"] {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   min-width: 100%;
   width: 100%;
   max-width: 100%;
   justify-items: start;
   justify-content: start;
   align-items: center;
   align-content: center;
   text-align: center;
   overflow: auto;
   padding-left: 0;
}

.gridAreaColumnaEncabezado {
   grid-area: areaColumnaEncabezado;
   /*background-color: black;*/
}

.gridAreaColumnaMedio {
   grid-area: areaColumnaMedio;
   /*background-color: green;*/
}

.gridAreaColumnaCuerpo {
   grid-area: areaColumnaCuerpo;
   /*background-color: blue;*/
}

.gridAreaColumnaPie {
   grid-area: areaColumnaPie;
   /*background-color: black;*/
}