/*para los menus de sistema y usuario, estilo base*/
.controlMenuSistema, .controlMenuUsuario {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   justify-items: start;
   justify-content: start;
   align-items: center;
   align-content: center;
   font-size: 1rem;
   text-align: left;
   width: 100%;
   min-height: 100%;
   max-height: 100%;
   height: 100%;
   padding: var(--paddingMenu);
}

.controlMenuUsuario {
   background-color: Transparent;
}

/*param los items que section despliegan en cada submenu*/
.menuSistemaDynamicMenuItem,
.menuSistemaDynamicMenu,
.menuSistemaStaticMenuItem,
.menuSistemaStaticMenu,
.menuUsuarioDynamicMenuItem,
.menuUsuarioDynamicMenu,
.menuUsuarioStaticMenuItem,
.menuUsuarioStaticMenu {
   background-color: var(--colorParaFondoPrincipal);
   color: var(--colorParaTextoPrincipal);
   /*border: none;*/
   padding: var(--paddingMenu);
}

/*opciones de menu raiz*/
.menuSistemaStaticMenuItem,
.menuUsuarioStaticMenuItem {
   padding: var(--paddingMenu);
}

/*la barra completa de menu raiz*/
.menuSistemaStaticMenu,
.menuUsuarioStaticMenu {
}

/*opciones de menu que se despliegan*/
.menuSistemaDynamicMenuItem {
   padding: var(--paddingMenu);
}
.menuUsuarioDynamicMenuItem {
   padding: var(--paddingMenu);
   margin-left: -10rem;
}

/*los cuadros completos donde se despliegan submenus u opciones de menu*/
.menuSistemaDynamicMenu,
.menuUsuarioDynamicMenu {
   padding: var(--paddingMenu);
}

/*
   jojo aparentemente no funciona usar estas referencias a clases CSS en la definicion del skin
   <DynamicHoverStyle CssClass="menuSistemaDynamicHover"/>
   <DynamicSelectedStyle CssClass="menuSistemaDynamicSelected"/>
   <StaticHoverStyle CssClass="menuSistemaStaticHover"/>
   <StaticSelectedStyle CssClass="menuSistemaStaticSelected"/>
*/
.menuSistemaDynamicHover,
.menuSistemaDynamicSelected,
.menuSistemaStaticHover,
.menuSistemaStaticSelected {
   background-color: var(--colorParaFondoOpcionMenuSeleccionada);
   color: var(--colorParaTextoOpcionMenuSeleccionada);
   padding: var(--paddingMenu);
}

/*submenu u opcion de menu hover*/
.menuSistemaDynamicHover {
}

.menuSistemaDynamicSelected {
}

.menuSistemaStaticSelected {
}

/*el menu raiz seleccionado*/
.menuSistemaStaticHover {
}