/*
   definicion de layouts en CSS-grid a nivel de pagina
*/
[class ^="gridLayoutPagina"] {
   display: grid;
   grid-auto-flow: row;
   min-height: 100%;
   height: 100%;
   max-height: 100%;
   min-width: 100%;
   max-width: 100%;
   width: 100%;
}

/*
   definicion de areas en CSS-grid de layouts a nivel de pagina
*/
[class ^="gridAreaPagina"] {
   display: flex;
   justify-items: center;
   align-items: center;
   align-content: center;
   justify-content: center;
   text-align: center;
   overflow: auto;
}

/*
   paginas sin menu
*/
.gridLayoutPaginaSinMenu {
   background-color: transparent;
   grid-template-columns: 15fr;
   grid-template-rows: 1fr;
   grid-template-areas:
      "cuerpo"
      "pie";
   gap: 0;
   opacity: 1;
}

.gridAreaPaginaCuerpoSinMenu {
   grid-area: cuerpo;
}

.gridAreaPaginaPieSinMenu {
   grid-area: pie;
   flex-direction: row;
}

/*
   paginas con menu
*/
.gridLayoutPaginaConMenu {
   grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
   grid-template-rows: 4.2vh 2.9vh 4.7vh 6.3vh 1fr 4vh;
   grid-template-areas:
      "gridAreaLogoAplicacion gridAreaInfoEmpresa   gridAreaInfoEmpresa     gridAreaInfoEmpresa     gridAreaMenuUsuario"
      "gridAreaLogoAplicacion gridAreaInfoEmpresa   gridAreaInfoEmpresa     gridAreaInfoEmpresa     gridAreaInfoPrivilegioPerfil"
      "gridAreaMenuSistema    gridAreaMenuSistema   gridAreaMenuSistema     gridAreaMenuSistema     gridAreaMenuSistema"
      "gridAreaMensajes       gridAreaMensajes      gridAreaTituloPagina    gridAreaProcesando      gridAreaProcesando"
      "gridAreaZonaTrabajo    gridAreaZonaTrabajo   gridAreaZonaTrabajo     gridAreaZonaTrabajo     gridAreaZonaTrabajo"
      "gridAreaCopyright      gridAreaCopyright     gridAreaAvisoPrivacidad gridAreaLogoK4b         gridAreaLogoK4b";
   gap: .1rem;
}

.gridAreaPaginaLogoAplicacion {
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
   grid-area: gridAreaLogoAplicacion;
}

.gridAreaPaginaInfoEmpresa {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   grid-area: gridAreaInfoEmpresa;
   gap: 0;
}

.gridAreaPaginaMenuUsuario {
   grid-area: gridAreaMenuUsuario;
   overflow: visible;
   justify-items: start;
   align-items: start;
   text-align: start;
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   gap: 0;
}

.gridAreaPaginaInfoPrivilegioPerfil {
   grid-area: gridAreaInfoPrivilegioPerfil;
   justify-items: center;
   align-items: center;
   text-align: center;
   align-content: center;
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   gap: 0;
   font-size: .6rem;
   padding: 0;
   margin: 0;
}

.gridAreaPaginaMenuSistema {
   grid-area: gridAreaMenuSistema;
   overflow: visible;
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
}

.gridAreaPaginaTituloPagina {
   grid-area: gridAreaTituloPagina;
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
}

.gridAreaPaginaMensajes {
   grid-area: gridAreaMensajes;
   background-color: var(--colorParaFondoPagina4);
   color: var(--colorParaTextoPagina);
   overflow: auto;
}

.gridAreaPaginaProcesando {
   background-color: var(--colorParaFondoPagina4);
   color: var(--colorParaTextoPagina);
   grid-area: gridAreaProcesando;
}

.gridAreaPaginaZonaTrabajo {
   background-color: var(--colorParaFondoPagina2);
   color: var(--colorParaTextoPagina);
   grid-area: gridAreaZonaTrabajo;
}

.gridAreaPaginaCopyright {
   grid-area: gridAreaCopyright;
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
   font-size: 0.7rem;
   display: flex;
   flex-direction: row;
   justify-content: start;
   justify-items: start;
   text-align: start;
   align-content: center;
   gap: 0;
}

.gridAreaPaginaAvisoPrivacidad {
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
   grid-area: gridAreaAvisoPrivacidad;
   font-size: 0.7rem;
   gap: 0;
}

.gridAreaPaginaLogoK4b {
   grid-area: gridAreaLogoK4b;
   background-color: var(--colorParaFondoPagina0);
   color: var(--colorParaTextoPagina);
}