/*
   definicion de layouts en CSS-grid a nivel de zona de trabajo
*/
[class ^="gridLayoutZonaTrabajo"] {
   display: grid;
   grid-auto-flow: row;
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   min-width: 100%;
   max-width: 100%;
   width: 100%;
   gap: .2rem;
   overflow: auto;
   align-content: start;
   align-items: start;
   justify-content: start;
   justify-items: start;
   padding: 0;
   margin: 0;
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
}

/*clase para layout de area de trabajo con
  un encabezado,y una zona media y
  dos columnas 
*/
.gridLayoutZonaTrabajoEncMedColCol {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content min-content 1fr;
   grid-template-areas:
      "colDEncabezado colDEncabezado"
      "colDMedio      colDMedio "
      "colICuerpo     colDCuerpo";
}


/*clase para layout de area de trabajo con
  una columna, un encabezado y una zona media
  en la columna unica
*/
.gridLayoutZonaTrabajoColEnc {
   grid-template-columns: 1fr;
   grid-template-rows: max-content 1fr;
   grid-template-areas:
      "colDEncabezado"
      "colDCuerpo";
}

/*clase para layout de area de trabajo con
  una columna, un encabezado y una zona media
  en la columna unica
*/
.gridLayoutZonaTrabajoColEncMed {
   grid-template-columns: 1fr;
   grid-template-rows: 30vh min-content 1fr;
   grid-template-areas:
      "colDEncabezado"
      "colDMedio"
      "colDCuerpo";
}

/*clase para layout de area de trabajo con
  una columna, un encabezado y una zona media
  en la columna unica
*/
.gridLayoutZonaTrabajoColEncMedCue {
   grid-template-columns: 1fr;
   grid-template-rows: min-content 20vh min-content 1fr;
   grid-template-areas:
      "colDEncabezado"
      "colDMedio"
      "colDCuerpo"
      "colDPie";
}

/*
   clase para layout de area de trabajo con dos columnas
*/
.gridLayoutZonaTrabajoColCol {
   grid-template-columns: 3fr 7fr;
   grid-template-rows: 1fr;
   grid-template-areas:
      "colICuerpo     colDCuerpo";
}

/*
   clase para layout de area de trabajo con encabezado comun y dos columnas
*/
.gridLayoutZonaTrabajoEncColCol {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: max-content 1fr;
   grid-template-areas:
      "colDEncabezado colDEncabezado"
      "colICuerpo     colDCuerpo";
}

/*clase para layout de area de trabajo con
  dos columnas, un encabezado en la columna derecha
*/
.gridLayoutZonaTrabajoColColEnc {
   grid-template-columns: 3fr 7fr;
   grid-template-rows: min-content min-content 1fr;
   grid-template-areas:
      "colICuerpo colDEncabezado"
      "colICuerpo colDCuerpo"
      "colICuerpo colDCuerpo";
}


/*clase para layout de area de trabajo con
  dos columnas, un encabezado y una zona media
  en la columna derecha
*/
.gridLayoutZonaTrabajoColColEncMed {
   grid-template-columns: 3fr 7fr;
   grid-template-rows: 40vh min-content 1fr;
   grid-template-areas:
      "colICuerpo colDEncabezado"
      "colICuerpo colDMedio"
      "colICuerpo colDCuerpo";
}

/*clase para layout de area de trabajo con
  dos columnas, un encabezado, una zona media,
   una zona cuerpo y una zona pie
  en la columna derecha
*/
.gridLayoutZonaTrabajoColColEncMedCue {
   grid-template-columns: 1fr 9fr;
   grid-template-rows: 20vh 20vh min-content 1fr;
   grid-template-areas:
      "colICuerpo colDEncabezado"
      "colICuerpo colDMedio"
      "colICuerpo colDCuerpo"
      "colICuerpo colDPie";
}

/*clase base para layout de area de trabajo con
  dos columnas, un encabezado en cada columna
*/
[class ^="gridLayoutZonaTrabajoColEncColEnc"] {
   grid-template-columns: 3fr 7fr;
   grid-template-rows: min-content min-content 1fr;
}

/*clase para layout de area de trabajo con
  dos columnas, un encabezado en cada columna,
   el encabezado de la columna derecha posiblemente mas alto
*/
.gridLayoutZonaTrabajoColEncColEncD {
   grid-template-areas:
      "colIEncabezado colDEncabezado"
      "colICuerpo     colDEncabezado"
      "colICuerpo     colDCuerpo";
}

/*clase para layout de area de trabajo con
  dos columnas, un encabezado en cada columna,
   el encabezado de la columna izquierda posiblemente mas alto
*/
.gridLayoutZonaTrabajoColEncColEncI {
   grid-template-areas:
      "colIEncabezado colDEncabezado"
      "colIEncabezado colDCuerpo"
      "colICuerpo     colDCuerpo";
}

/*clase para layout de area de trabajo con
  dos columnas, un encabezado, una zona media,
   una zona cuerpo y una zona pie
  en la columna derecha
*/
.gridLayoutZonaTrabajoColEncMedCueColEncMedCue {
   grid-template-columns: 50% 50%;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-areas:
      "colIEncabezado colDEncabezado"
      "colIMedio      colDMedio"
      "colICuerpo     colDCuerpo"
      "colIPie        colDPie";
}

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

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

.gridLayoutZonaTrabajoRowMinContent_30vh_Row1fr {
   grid-template-rows: min-content 30vh 1fr;
}

.gridLayoutZonaTrabajoRowMinContent_20vh_Row1fr {
   grid-template-rows: min-content 20vh 1fr;
}

.gridLayoutZonaTrabajoRow17vh_1fr_maxContent {
   grid-template-rows: 17vh 1fr max-content;
}

.gridLayoutZonaTrabajoRow20vh_RowMinContent_Row1fr {
   grid-template-rows: 20vh min-content 1fr;
}

.gridLayoutZonaTrabajoRow10vh_20vh_Row1fr {
   grid-template-rows: 10vh 20vh 1fr;
}

.gridLayoutZonaTrabajoRowMinContent_15vh_Row1fr {
   grid-template-rows: min-content 15vh 1fr;
}

.gridLayoutZonaTrabajoCol2_Col8 {
   grid-template-columns: 2fr 8fr;
}

.gridLayoutZonaTrabajoCol1_Col9 {
   grid-template-columns: 1fr 9fr;
}

.gridLayoutZonaTrabajoCol1_Col1 {
   grid-template-columns: 1fr 1fr;
}

/*clase para layout de area de trabajo con
  tres columnas
*/
.gridLayoutZonaTrabajoColColCol {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr;
   grid-template-areas:
      "colICuerpo col1Cuerpo colDCuerpo";
}

/*clase para layout de area de trabajo con
  un encabezado y tres columnas
*/
.gridLayoutZonaTrabajoEncColColCol {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: max-content 1fr;
   grid-template-areas:
      "colDEncabezado colDEncabezado  colDEncabezado"
      "colICuerpo     col1Cuerpo      colDCuerpo";
}


/*clase para layout de area de trabajo con
  cuatro columnas, un encabezado y una zona media
  en lastres columnas de la derecha
*/
.gridLayoutZonaTrabajoColEncColEncColEncColEnc {
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: min-content 1fr;
   grid-template-areas:
      "colIEncabezado col1Encabezado  col2Encabezado  colDEncabezado"
      "colICuerpo     col1Cuerpo      col2Cuerpo      colDCuerpo    ";
}

/*clase para layout de area de trabajo con
  cuatro columnas, un encabezado y una zona media
  en lastres columnas de la derecha
*/
.gridLayoutZonaTrabajoColColEncMedColEncMedColEncMed {
   grid-template-columns: 1fr 3fr 3fr 3fr;
   grid-template-rows: min-content 25vh 1fr;
   grid-template-areas:
      "colICuerpo col1Encabezado  col2Encabezado  colDEncabezado"
      "colICuerpo col1Medio       col2Medio       colDMedio     "
      "colICuerpo col1Cuerpo      col2Cuerpo      colDCuerpo    ";
}

/*
   definicion de areas en CSS-grid de layouts a nivel de zona de trabajo
   El area ocupa el total disponible en el layout
*/
[class ^="gridAreaZonaTrabajo"] {
   /*justify-self: initial;*/
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   min-width: 100%;
   max-width: 100%;
   width: 100%;
   justify-items: start;
   justify-content: start;
   align-items: start;
   align-content: start;
   text-align: start;
   overflow: auto;
   padding-left: 0;
}

/*subarea de trabajo columaIzquierdaEncabezado*/
.gridAreaZonaTrabajoColumnaIEncabezado {
   grid-area: colIEncabezado;
   background-color: var(--colorParaFondoPagina1);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaIMedio {
   grid-area: colIMedio;
   background-color: var(--colorParaFondoPagina2);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaICuerpo {
   grid-area: colICuerpo;
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaIPie {
   grid-area: colIPie;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna1Encabezado {
   grid-area: col1Encabezado;
   background-color: var(--colorParaFondoPagina2);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna1Medio {
   grid-area: col1Medio;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna1Cuerpo {
   grid-area: col1Cuerpo;
   background-color: var(--colorParaFondoPagina4);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna2Encabezado {
   grid-area: col2Encabezado;
   background-color: var(--colorParaFondoPagina2);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna2Medio {
   grid-area: col2Medio;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumna2Cuerpo {
   grid-area: col2Cuerpo;
   background-color: var(--colorParaFondoPagina4);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaDEncabezado {
   grid-area: colDEncabezado;
   background-color: var(--colorParaFondoPagina1);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaDMedio {
   grid-area: colDMedio;
   background-color: var(--colorParaFondoPagina2);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaDCuerpo {
   grid-area: colDCuerpo;
   background-color: var(--colorParaFondoPagina3);
   color: var(--colorParaTextoPagina);
}

.gridAreaZonaTrabajoColumnaDPie {
   grid-area: colDPie;
   background-color: var(--colorParaFondoPagina4);
   color: var(--colorParaTextoPagina);
}

/*el div del UpdatePanel*/
.gridAreaZonaTrabajoColumnaICuerpo > .updatePanel,
.gridAreaZonaTrabajoColumna1Cuerpo > .updatePanel,
.gridAreaZonaTrabajoColumna2Cuerpo > .updatePanel,
.gridAreaZonaTrabajoColumnaDCuerpo > .updatePanel {
   display: flex;
   flex-direction: column;
   min-height: 1rem;
   height: auto;
   max-height: 100%;
   min-width: 100%;
   width: 100%;
   max-width: 100%;
   align-content: end;
   align-items: end;
   overflow: auto;
}

.gridAreaZonaTrabajoColumna1Cuerpo > .updatePanel,
.gridAreaZonaTrabajoColumna2Cuerpo > .updatePanel {
   align-content: center;
   align-items: center;
}

.gridAreaZonaTrabajoColumnaDCuerpo > .updatePanel {
   align-content: start;
   align-items: start;
}

   .gridAreaZonaTrabajoColumnaICuerpo > .updatePanel[class~="height100"],
   .gridAreaZonaTrabajoColumna1Cuerpo > .updatePanel[class~="height100"],
   .gridAreaZonaTrabajoColumna2Cuerpo > .updatePanel[class~="height100"],
   .gridAreaZonaTrabajoColumnaDCuerpo > .updatePanel[class~="height100"] {
      display: flex;
      flex-direction: column;
      min-height: 1rem;
      height: 100%;
      max-height: 100%;
      min-width: 100%;
      width: 100%;
      max-width: 100%;
      align-content: end;
      align-items: end;
   }

.gridAreaBloqueItemEncabezado span,
.gridAreaBloqueItemCuerpo span,
.gridAreaBloqueItemBotones span {
   padding-right: .3rem;
}