@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LSideBar.js

@@ -0,0 +1,1749 @@
+import { alpha as r } from "@mui/material/styles";
+const t = (o) => ({
+  M4LSideBar: {
+    styleOverrides: {
+      /* Estilos y funcionamiento general  */
+      "&.M4LSideBar-root": {
+        "&.M4LSideBar-collapsed": {
+          /* '& .M4LSideBar-contentDesktop:not(.M4LSideBar-overlapping)': {
+                          width: '0',
+                          transition: 'all 0.2s',
+                      } */
+        },
+        // Funcionamiento escritorio expandir y colapsar
+        "& .M4LSideBar-wrapperSideBar": {
+          height: "100%",
+          transition: "all 0.3s",
+          width: "240px",
+          "& .M4LSideBar-areaExpandMenu": {
+            position: "absolute",
+            // fixed
+            zIndex: "99999",
+            height: "100%",
+            transition: "all 0.3s",
+            width: "240px",
+            "& .M4LSideBar-contentDesktop": {
+              display: "flex",
+              width: "100%",
+              height: "100%",
+              boxShadow: o.vars.customShadows?.z2,
+              transition: "all 0.3s",
+              /*  padding: '0 8px', */
+              "& .M4LSideBar-containerContentGroupsFooter": {
+                flexGrow: "1",
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+                position: "relative",
+                borderRight: "1px solid",
+                borderColor: o.vars.palette?.border.default,
+                backgroundColor: o.vars.palette.background.default,
+                "& .M4LSideBar-contentGroups": {
+                  padding: "32px 12px",
+                  "& .M4LSideBar-wrapperGroup": {
+                    overflow: "visible",
+                    padding: "8px",
+                    borderTop: "1px solid",
+                    borderBottom: "1px solid",
+                    borderColor: o.vars.palette?.border.secondary,
+                    height: "fit-content",
+                    width: "100%",
+                    "& .M4LSideBar-navItemRootContent": {
+                      overflow: "hidden",
+                      height: "36px",
+                      padding: "0px 8px",
+                      display: "flex",
+                      alignItems: "center"
+                    }
+                  }
+                },
+                "& .M4LSideBar-footer": {
+                  display: "flex",
+                  padding: "10px 5px",
+                  borderTop: "1px solid",
+                  borderColor: o.vars.palette?.border.disabled,
+                  justifyContent: "center",
+                  gap: "24px",
+                  alignItems: "center",
+                  height: "48px",
+                  minHeight: "48px",
+                  flexDirection: "row-reverse",
+                  overflow: "hidden",
+                  "& .M4LSideBar-wrapperLogoFooter": {
+                    width: "100%",
+                    height: "100%",
+                    "& .M4LSideBar-containerLogoButtonLogo": {
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center"
+                    }
+                  }
+                }
+              },
+              "& .M4LSideBar-collapseButtonSecondary": {
+                height: "100%",
+                cursor: "pointer"
+              }
+            }
+          }
+        }
+      },
+      "&.M4LSideBar-root.M4LSideBar-variantDefault": {
+        height: "100%",
+        background: o.vars.palette.background.default,
+        position: "relative",
+        "& .M4LIconButton-sizeSmall": {
+          width: "20px",
+          height: "20px",
+          minWidth: "20px",
+          minHeight: "20px",
+          "& .MuiButtonBase-root": {
+            padding: "0px",
+            width: "20px",
+            height: "20px"
+          }
+        },
+        /* Condición para visualizar el botón de colapsar en caso de estar en estado colapsado */
+        "&:hover": {
+          "& .M4LSideBar-collapseButton": {
+            opacity: "1!important",
+            transition: "all 0.3s"
+          }
+        },
+        "& .M4LSideBar-collapseButton": {
+          position: "absolute",
+          top: "16px",
+          right: "-8px",
+          borderRadius: "4px",
+          backgroundColor: `${o.vars.palette.background.default}!important`,
+          transition: "all 0.3s",
+          boxShadow: o.vars.customShadows.z1,
+          zIndex: "1"
+        },
+        /* Condición para ocultar el botón de colapsar en estado expandido. */
+        "&:not(.M4LSideBar-collapsed) .M4LSideBar-collapseButton": {
+          opacity: 0,
+          transition: "all 0.3s"
+        },
+        "& .M4LSideBar-subItemActive": {
+          padding: "0px",
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+          }
+        },
+        "&.M4LSideBar-collapsed": {
+          "& .M4LSideBar-wrapperSideBar": {
+            "& .M4LSideBar-contentDesktop": {
+              "& .M4LSideBar-containerSideBarLogo": {
+                marginTop: "0px",
+                "& .M4LSideBar-containerLogo": {
+                  gap: "24px",
+                  paddingLeft: "24px",
+                  width: "100%",
+                  "& .M4LImage-root": {
+                    minWidth: "40px !important",
+                    minHeight: "40px !important"
+                  }
+                }
+              }
+            }
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          width: "0px",
+          height: "0px",
+          padding: "0px"
+        },
+        "& .M4LSideBar-wrapperSideBar": {
+          "& .M4LSideBar-containerSideBarLogo": {
+            display: "flex",
+            justifyContent: "flex-start",
+            marginTop: "12px",
+            "& .M4LSideBar-containerLogo": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fitContent: "100%",
+              boxSizing: "contentBox",
+              paddingTop: "8px",
+              paddingBottom: "8px",
+              gap: "16px",
+              paddingLeft: "24px",
+              "& .M4LTypography-root": {
+                display: "flex",
+                width: "100%",
+                "& .MuiTypography-root": {
+                  with: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  textWrap: "nowrap"
+                }
+              },
+              "& .M4LImage-root": {
+                position: "relative",
+                padding: "6px",
+                minWidth: "50px !important",
+                minHeight: "50px !important"
+              }
+            }
+          },
+          "& .M4LSideBar-contentGroups": {
+            overflow: "hidden",
+            flexGrow: "1",
+            display: "flex",
+            flexDirection: "column",
+            "& .M4LSideBar-contentGroupsLine": {
+              display: "flex",
+              height: "2px",
+              marginRight: "14px",
+              marginLeft: "14px",
+              backgroundColor: "none"
+            },
+            "& .M4LSideBar-wrapperGroup": {
+              height: "100%",
+              "& .M4LScrollBar-root": {
+                overflow: "hidden",
+                height: "100%",
+                gap: "8px"
+              },
+              "& .M4LSideBar-wrapperGroupTitle": {
+                height: "28px",
+                padding: "0px 0px 0px 12px",
+                display: "flex",
+                alignItems: "center",
+                "& .M4LTypography-root": {
+                  display: "flex",
+                  width: "100%",
+                  "& .MuiTypography-root": {
+                    with: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap",
+                    ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                    textTransform: "capitalize",
+                    fontWeight: "700"
+                  }
+                }
+              },
+              "& .M4LSideBar-itemListMainRoot": {
+                display: "flex",
+                borderRadius: "4px 0px 0px 4px",
+                justifyContent: "flex-start",
+                flexDirection: "column",
+                gap: "4px",
+                //paddingBottom: '4px',
+                height: "auto",
+                marginBottom: "2px",
+                "& .M4LSideBar-navItemMainRoot": {
+                  backgroundColor: "transparent",
+                  borderRadius: "4px",
+                  "&:hover": {
+                    background: o.vars.palette.background.hover,
+                    cursor: "pointer"
+                  }
+                },
+                "&.M4LSideBar-itemMainActive": {
+                  borderRadius: "4px",
+                  height: "auto",
+                  overflow: "hidden",
+                  "& .M4LSideBar-navItemMainRoot": {
+                    background: o.vars.palette.primary.opacity,
+                    border: "1px solid",
+                    borderColor: o.vars.palette.primary.opacity,
+                    boxShadow: o.shadows[1],
+                    "&:hover": {
+                      background: r(
+                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                        0.24
+                      ),
+                      // Validar implementación desde la creación del tema.
+                      cursor: "pointer"
+                    }
+                  },
+                  "& .M4LSideBar-navItemRootContent": {
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      alignItems: "center",
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      },
+                      "& .M4LTypography-root": {
+                        "& .MuiTypography-root": {
+                          color: o.vars.palette.primary.focusVisible
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot": {
+                      "& .M4LIcon-root": {
+                        "& .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        }
+                      }
+                    },
+                    "&::before": {
+                      content: '""',
+                      width: "3px",
+                      height: "50%",
+                      //revisar
+                      top: "25%",
+                      bottom: "25%",
+                      left: "0px",
+                      backgroundColor: o.vars.palette.primary.focusVisible,
+                      borderRadius: "0px 4px 4px 0px",
+                      position: "absolute"
+                    }
+                  }
+                },
+                "& .M4LSideBar-navItemRootContent": {
+                  display: "flex",
+                  padding: "12px 8px",
+                  borderRadius: "4px 0px 0px 4px",
+                  position: "relative",
+                  "& .M4LSideBar-navItemRootContentIconTypo": {
+                    display: "flex",
+                    gap: "8px",
+                    width: "100%",
+                    "& .M4LIcon-icon": {
+                      backgroundColor: o.vars.palette.text.secondary,
+                      width: "18px",
+                      height: "18px"
+                    },
+                    "& .M4LTypography-root": {
+                      display: "flex",
+                      flexGrow: "1",
+                      overflow: "hidden",
+                      "& .MuiTypography-root": {
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
+                        textWrap: "nowrap",
+                        textOverflow: "ellipsis",
+                        display: "block",
+                        overflow: "hidden"
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                      backgroundColor: o.vars.palette.text.primary
+                    }
+                  },
+                  "& .M4LSideBar-arrowIconRoot": {
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        background: o.vars.palette.text.primary
+                      }
+                    }
+                  }
+                },
+                "& .M4LSideBar-containerListSubItem": {
+                  paddingLeft: "0px"
+                },
+                "& .M4LSideBar-navListSubItemRoot": {
+                  gap: "8px",
+                  padding: "0px",
+                  "& .M4LSideBar-navSubItemContentRoot ": {
+                    padding: "0px 8px",
+                    width: "100%",
+                    height: "32px",
+                    borderRadius: "4px",
+                    gap: "8px",
+                    "&.M4LSideBar-subItemCollapseActive": {
+                      backgroundColor: o.vars.palette.primary.opacity,
+                      gap: "8px",
+                      border: "1px solid",
+                      borderColor: o.vars.palette.primary.opacity,
+                      "& .MuiButtonBase-root": {
+                        padding: "0px",
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: o.vars.palette.primary.focusVisible
+                          }
+                        }
+                      }
+                    },
+                    "& .M4LSideBar-subItemActive": {
+                      "& .MuiButtonBase-root": {
+                        padding: "0px",
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {}
+                        },
+                        "& .M4LTypography-root": {
+                          "& .MuiTypography-root": {}
+                        }
+                      },
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        height: "14px",
+                        borderRadius: "4px",
+                        backgroundColor: o.vars.palette.primary.focusVisible,
+                        gap: "8px"
+                      }
+                    },
+                    "&:hover": {
+                      background: o.vars.palette.background.default,
+                      // Validar implementación desde la creación del tema.
+                      padding: "0 8px"
+                    }
+                  },
+                  "& .M4LSideBar-navSubItemContentRoot": {
+                    gap: "8px",
+                    margin: "0px 0px 0px 0px",
+                    //padding: '16px',
+                    "& .M4LSideBar-navSubItemContentBullet": {
+                      minWidth: "5px",
+                      minHeight: "5px",
+                      borderRadius: "50%",
+                      backgroundColor: o.vars.palette.text.primary
+                    },
+                    "& .M4LTypography-root": {
+                      display: "flex",
+                      width: "100%",
+                      "& .MuiTypography-root": {
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
+                        with: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        textWrap: "nowrap"
+                      }
+                    },
+                    "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
+                      "& .M4LTypography-root": {
+                        color: o.vars.palette.primary.focusVisible,
+                        "& .MuiTypography-root": {
+                          color: o.vars.palette.primary.focusVisible
+                        }
+                      }
+                    }
+                  }
+                },
+                "& .MuiCollapse-root": {
+                  marginLeft: "8px"
+                }
+              }
+            },
+            "& .M4LIcon-root .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.primary
+            }
+          },
+          "& .M4LSideBar-footer": {
+            "& .M4LSideBar-containerLogoButton": {
+              display: "flex",
+              gap: "14px",
+              width: "120px"
+            },
+            "& .M4LSideBar-containerLogoButtonLogo": {
+              minWidth: "120px",
+              height: "32px"
+            }
+          }
+        }
+      },
+      "&.M4LSideBar-root.M4LSideBar-variantComercial": {
+        //boxShadow: theme.customShadows?.z2,
+        "& .M4LSideBar-subItemActive": {
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+          }
+        },
+        "&.M4LSideBar-collapsed": {
+          "& .M4LSideBar-wrapperSideBar": {
+            width: "50px",
+            "& .M4LSideBar-contentDesktop": {
+              "& .M4LSideBar-containerSideBarLogo": {
+                marginTop: "0px",
+                "& .M4LSideBar-containerLogo": {
+                  gap: "24px",
+                  paddingLeft: "24px",
+                  width: "100%",
+                  "& .M4LImage-root": {
+                    minWidth: "40px !important",
+                    minHeight: "40px !important"
+                  }
+                }
+              }
+            }
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          width: "0px",
+          height: "0px",
+          padding: "0px"
+        },
+        "& .M4LSideBar-wrapperSideBar": {
+          "& .M4LSideBar-containerSideBarLogo": {
+            display: "flex",
+            justifyContent: "flex-start",
+            marginTop: "12px",
+            "& .M4LSideBar-containerLogo": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fitContent: "100%",
+              boxSizing: "contentBox",
+              paddingTop: "8px",
+              paddingBottom: "8px",
+              gap: "16px",
+              paddingLeft: "24px",
+              "& .M4LTypography-root": {
+                display: "flex",
+                width: "100%",
+                "& .MuiTypography-root": {
+                  with: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  textWrap: "nowrap"
+                }
+              },
+              "& .M4LImage-root": {
+                position: "relative",
+                padding: "6px",
+                minWidth: "50px !important",
+                minHeight: "50px !important"
+              }
+            }
+          },
+          "& .M4LSideBar-contentGroups": {
+            overflow: "hidden",
+            flexGrow: "1",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            "& .M4LSideBar-contentGroupsLine": {
+              display: "flex",
+              height: "2px",
+              marginRight: "14px",
+              marginLeft: "14px",
+              backgroundColor: "none"
+            },
+            "& .M4LSideBar-wrapperGroup": {
+              height: "100%",
+              "& .M4LSideBar-wrapperGroupTitle": {
+                height: "60px",
+                paddingLeft: "10px",
+                "& .M4LTypography-root": {
+                  display: "flex",
+                  width: "100%",
+                  "& .MuiTypography-root": {
+                    with: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  }
+                }
+              },
+              "& .M4LSideBar-itemListMainRoot": {
+                display: "flex",
+                borderRadius: "4px 0px 0px 4px",
+                justifyContent: "center",
+                flexDirection: "column",
+                padding: "0px 0px 8px 0px",
+                gap: "0px",
+                "& .M4LSideBar-navItemMainRoot": {
+                  backgroundColor: "transparent",
+                  borderRadius: "4px",
+                  "&:hover": {
+                    background: o.vars.palette.background.hover,
+                    cursor: "pointer"
+                  }
+                },
+                "&.M4LSideBar-itemMainActive": {
+                  background: o.vars.palette.primary.opacity,
+                  borderRadius: "4px",
+                  border: "1px solid",
+                  borderColor: o.vars.palette?.border.disabled,
+                  "& .M4LSideBar-navItemMainRoot": {
+                    background: o.vars.palette.primary.opacity,
+                    "&:hover": {
+                      background: r(
+                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                        0.24
+                      ),
+                      // Validar implementación desde la creación del tema.
+                      cursor: "pointer"
+                    }
+                  },
+                  "& .M4LSideBar-navItemRootContent": {
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      },
+                      "& .M4LTypography-root": {
+                        "& .MuiTypography-root": {
+                          color: o.vars.palette.primary.focusVisible
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot": {
+                      "& .M4LIcon-root": {
+                        "& .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        }
+                      }
+                    },
+                    "&::before": {
+                      content: '""',
+                      width: "4px",
+                      top: "0px",
+                      bottom: "0px",
+                      right: "0px",
+                      backgroundColor: o.vars.palette.primary.focusVisible,
+                      borderRadius: "4px 0px 0px 4px",
+                      position: "absolute"
+                    }
+                  }
+                },
+                "& .M4LSideBar-navItemRootContent": {
+                  display: "flex",
+                  padding: "8px",
+                  justifyContent: "center",
+                  borderRadius: "4px 0px 0px 4px",
+                  position: "relative",
+                  "& .M4LSideBar-navItemRootContentIconTypo": {
+                    display: "flex",
+                    gap: "8px",
+                    width: "100%",
+                    "& .M4LIcon-icon": {
+                      backgroundColor: o.vars.palette.text.primary,
+                      width: "18px",
+                      height: "18px"
+                    },
+                    "& .M4LTypography-root": {
+                      display: "flex",
+                      flexGrow: "1",
+                      overflow: "hidden",
+                      "& .MuiTypography-root": {
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
+                        textWrap: "nowrap",
+                        textOverflow: "ellipsis",
+                        display: "block",
+                        overflow: "hidden"
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                      backgroundColor: o.vars.palette.text.primary
+                    }
+                  },
+                  "& .M4LSideBar-arrowIconRoot": {
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        background: o.vars.palette.text.primary
+                      }
+                    }
+                  }
+                },
+                "& .M4LSideBar-containerListSubItem": {
+                  paddingLeft: "0px"
+                },
+                "& .M4LSideBar-navListSubItemRoot": {
+                  gap: "12px",
+                  padding: "0px",
+                  "& .M4LSideBar-navSubItemContentRoot ": {
+                    width: "100%",
+                    height: "32px",
+                    borderRadius: "4px",
+                    gap: "8px",
+                    "&.M4LSideBar-subItemCollapseActive": {
+                      backgroundColor: o.vars.palette.primary.opacity,
+                      gap: "8px",
+                      "& .MuiButtonBase-root": {
+                        paddingLeft: "0",
+                        padding: "0px",
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: o.vars.palette.primary.focusVisible
+                          }
+                        }
+                      }
+                    },
+                    "& .M4LSideBar-subItemActive": {
+                      "& .MuiButtonBase-root": {
+                        paddingLeft: "0px",
+                        padding: "0px",
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                          }
+                        }
+                      },
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        height: "14px",
+                        borderRadius: "4px",
+                        backgroundColor: o.vars.palette.primary.focusVisible,
+                        gap: "8px"
+                      }
+                    },
+                    "&:hover": {
+                      padding: "0 8px",
+                      background: o.vars.palette.background.default
+                      // Validar implementación desde la creación del tema.
+                    }
+                  },
+                  "& .M4LSideBar-navSubItemContentRoot": {
+                    gap: "12px",
+                    margin: "0px 0px 0px 0px",
+                    padding: "16px",
+                    "& .M4LSideBar-navSubItemContentBullet": {
+                      minWidth: "5px",
+                      minHeight: "5px",
+                      borderRadius: "50%",
+                      backgroundColor: o.vars.palette.text.primary
+                    },
+                    "& .M4LTypography-root": {
+                      display: "flex",
+                      width: "100%",
+                      "& .MuiTypography-root": {
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
+                        with: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        textWrap: "nowrap"
+                      }
+                    }
+                  }
+                },
+                "& .MuiCollapse-root": {
+                  marginLeft: "18px"
+                }
+              }
+            },
+            "& .M4LIcon-root .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.primary
+            }
+          },
+          "& .M4LSideBar-footer": {
+            "& .M4LSideBar-containerLogoButton": {
+              display: "flex",
+              gap: "14px",
+              width: "120px"
+            },
+            "& .M4LSideBar-containerLogoButtonLogo": {
+              minWidth: "120px",
+              height: "32px",
+              "& .M4LSideBar-containerLogoButtonIcon": {
+                display: "flex",
+                alignItems: "center"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LSideBarPopover: {
+    styleOverrides: {
+      "&.M4LSideBar-popover.M4LSideBar-variantDefault": {
+        "& .M4LSideBar-subItemActive": {
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+          }
+        },
+        "& .M4LSideBar-navListSubItemRoot": {
+          width: "120px",
+          height: "fit-content",
+          "& .M4LSideBar-navSubItemContentRoot": {
+            gap: "8px",
+            padding: "8px",
+            height: "fit-content",
+            borderRadius: "4px",
+            "&.M4LSideBar-subItemCollapseActive": {
+              backgroundColor: o.vars.palette.primary.opacity
+            },
+            "& .M4LTypography-root": {
+              display: "flex",
+              width: "100%",
+              "& .MuiTypography-root": {
+                ...o.colorSchemes.finalTheme.typography.paragraph,
+                color: o.vars.palette.text.secondary,
+                with: "100%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                textWrap: "nowrap"
+              }
+            },
+            // subitems en sidebar colapsado
+            "& .MuiPaper-root": {
+              "& .M4LSideBar-navListSubItemRoot": {
+                "& .M4LSideBar-subItemActive": {
+                  "& .MuiButtonBase-root": {
+                    padding: "0px",
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "& .M4LSideBar-subItemActive": {
+              height: "fit-content",
+              "& .MuiButtonBase-root": {
+                padding: "0px",
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                  }
+                }
+              },
+              "& .M4LSideBar-navSubItemContentBullet": {
+                height: "14px",
+                borderRadius: "10px",
+                backgroundColor: o.vars.palette.primary.focusVisible
+              }
+            },
+            "& .M4LSideBar-navSubItemContentBullet": {
+              minWidth: "5px",
+              minHeight: "5px",
+              borderRadius: "50%",
+              backgroundColor: o.vars.palette.text.primary
+            },
+            "&:hover": {
+              padding: "0 8px",
+              background: o.vars.palette.background.default
+              // Validar implementación desde la creación del tema.
+            }
+          }
+        }
+      },
+      "&.M4LSideBar-popover.M4LSideBar-variantComercial": {
+        "& .M4LSideBar-subItemActive": {
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+          }
+        },
+        "& .M4LSideBar-navListSubItemRoot": {
+          width: "120px",
+          height: "fit-content",
+          "& .M4LSideBar-navSubItemContentRoot": {
+            gap: "8px",
+            padding: "8px",
+            height: "fit-content",
+            borderRadius: "4px",
+            "&.M4LSideBar-subItemCollapseActive": {
+              backgroundColor: o.vars.palette.primary.opacity,
+              Text: "iufbivecf"
+            },
+            "& .M4LTypography-root": {
+              display: "flex",
+              width: "100%",
+              "& .MuiTypography-root": {
+                ...o.colorSchemes.finalTheme.typography.paragraph,
+                color: o.vars.palette.text.secondary,
+                with: "100%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                textWrap: "nowrap"
+              }
+            },
+            // subitems en sidebar colapsado
+            "& .MuiPaper-root": {
+              "& .M4LSideBar-navListSubItemRoot": {
+                "& .M4LSideBar-subItemActive": {
+                  "& .MuiButtonBase-root": {
+                    padding: "0px",
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.primary.focusVisible
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "& .M4LSideBar-subItemActive": {
+              height: "fit-content",
+              "& .MuiButtonBase-root": {
+                padding: "0px",
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                  }
+                }
+              },
+              "& .M4LSideBar-navSubItemContentBullet": {
+                height: "14px",
+                borderRadius: "10px",
+                backgroundColor: o.vars.palette.primary.focusVisible
+              }
+            },
+            "& .M4LSideBar-navSubItemContentBullet": {
+              minWidth: "5px",
+              minHeight: "5px",
+              borderRadius: "50%",
+              backgroundColor: o.vars.palette.text.primary
+            },
+            "&:hover": {
+              padding: "0 8px",
+              background: o.vars.palette.background.default
+              // Validar implementación desde la creación del tema.
+            }
+          }
+        }
+      }
+    }
+  },
+  //Mobile
+  M4LSideBarDrawer: {
+    styleOverrides: {
+      "&.M4LSideBar-drawer": {
+        "&.M4LSideBar-variantDefault": {
+          "& .M4LSideBar-subItemActive": {
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+            },
+            "& .M4LTypography-root": {
+              "& .MuiTypography-root": {
+                color: `${o.vars.palette.primary.focusVisible} !important`
+              }
+            }
+          },
+          "& .M4LSideBar-contentMobile": {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            padding: "8px",
+            "& .M4LSideBar-containerSideBarLogo": {
+              display: "flex",
+              justifyContent: "flex-start",
+              marginTop: "12px",
+              "& .M4LSideBar-containerLogo": {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                fitContent: "100%",
+                boxSizing: "contentBox",
+                paddingTop: "8px",
+                paddingBottom: "8px",
+                gap: "16px",
+                paddingLeft: "24px",
+                "& .M4LTypography-root": {
+                  display: "flex",
+                  width: "100%",
+                  "& .MuiTypography-root": {
+                    with: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  }
+                },
+                "& .M4LImage-root": {
+                  position: "relative",
+                  background: o.vars.palette.background.default,
+                  boxShadow: o.vars.customShadows?.z2,
+                  padding: "6px",
+                  borderRadius: "6px",
+                  minWidth: "50px !important",
+                  minHeight: "50px !important"
+                }
+              }
+            },
+            "& .M4LSideBar-contentGroups": {
+              overflow: "hidden",
+              flexGrow: "1",
+              display: "flex",
+              flexDirection: "column",
+              "& .M4LSideBar-contentGroupsLine": {
+                display: "flex",
+                height: "2px",
+                marginRight: "14px",
+                marginLeft: "14px",
+                backgroundColor: "none"
+              },
+              "& .M4LSideBar-wrapperGroup": {
+                height: "100%",
+                "& .M4LSideBar-wrapperGroupTitle": {
+                  height: "28px",
+                  padding: "0px 0px 0px 12px",
+                  "& .M4LTypography-root": {
+                    display: "flex",
+                    width: "100%",
+                    "& .MuiTypography-root": {
+                      with: "100%",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      textWrap: "nowrap",
+                      ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                      textTransform: "capitalize"
+                    }
+                  }
+                },
+                "& .M4LSideBar-itemListMainRoot": {
+                  display: "flex",
+                  borderRadius: "4px 0px 0px 4px",
+                  justifyContent: "flex-start",
+                  flexDirection: "column",
+                  paddingBottom: "4px",
+                  gap: "0px",
+                  height: "auto",
+                  "& .M4LSideBar-navItemMainRoot": {
+                    backgroundColor: "transparent",
+                    borderRadius: "4px",
+                    "&:hover": {
+                      background: o.vars.palette.background.hover,
+                      cursor: "pointer"
+                    }
+                  },
+                  "&.M4LSideBar-itemMainActive": {
+                    borderRadius: "4px",
+                    background: o.vars.palette.primary.opacity,
+                    border: "1px solid",
+                    borderColor: o.vars.palette.primary.opacity,
+                    "& .M4LSideBar-navItemMainRoot": {
+                      background: o.vars.palette.primary.focusActive,
+                      "&:hover": {
+                        background: r(
+                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                          0.24
+                        ),
+                        // Validar implementación desde la creación del tema.
+                        cursor: "pointer"
+                      }
+                    },
+                    "& .M4LSideBar-navItemRootContent": {
+                      "& .M4LSideBar-navItemRootContentIconTypo": {
+                        alignItems: "center",
+                        "& .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        },
+                        "& .M4LTypography-root": {
+                          "& .MuiTypography-root": {
+                            color: o.vars.palette.primary.focusVisible
+                          }
+                        },
+                        "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot": {
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: o.vars.palette.primary.focusVisible
+                          }
+                        }
+                      },
+                      "&::before": {
+                        content: '""',
+                        width: "2px",
+                        top: "0px",
+                        bottom: "0px",
+                        left: "0px",
+                        backgroundColor: o.vars.palette.primary.focusVisible,
+                        borderRadius: "4px 0px 0px 4px",
+                        position: "absolute"
+                      }
+                    }
+                  },
+                  "& .M4LSideBar-navItemRootContent": {
+                    display: "flex",
+                    padding: "8px",
+                    justifyContent: "center",
+                    borderRadius: "4px 0px 0px 4px",
+                    position: "relative",
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      display: "flex",
+                      gap: "8px",
+                      width: "100%",
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.text.primary,
+                        width: "18px",
+                        height: "18px"
+                      },
+                      "& .M4LTypography-root": {
+                        display: "flex",
+                        flexGrow: "1",
+                        overflow: "hidden",
+                        "& .MuiTypography-root": {
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
+                          textWrap: "nowrap",
+                          textOverflow: "ellipsis",
+                          display: "block",
+                          overflow: "hidden"
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.text.primary
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot": {
+                      "& .M4LIcon-root": {
+                        "& .M4LIcon-icon": {
+                          background: o.vars.palette.text.primary
+                        }
+                      }
+                    }
+                  },
+                  "& .M4LSideBar-containerListSubItem": {
+                    paddingLeft: "0px"
+                  },
+                  "& .M4LSideBar-navListSubItemRoot": {
+                    gap: "12px",
+                    padding: "0px",
+                    "& .M4LSideBar-navSubItemContentRoot ": {
+                      width: "100%",
+                      height: "32px",
+                      borderRadius: "4px",
+                      gap: "8px",
+                      padding: "0px",
+                      "&.M4LSideBar-subItemCollapseActive": {
+                        backgroundColor: o.vars.palette.primary.opacity,
+                        gap: "8px",
+                        padding: "0px",
+                        "& .MuiButtonBase-root": {
+                          padding: "0px",
+                          "& .M4LIcon-root": {
+                            "& .M4LIcon-icon": {
+                              backgroundColor: o.vars.palette.primary.focusVisible
+                            }
+                          }
+                        }
+                      },
+                      "& .M4LSideBar-subItemActive": {
+                        "& .MuiButtonBase-root": {
+                          padding: "0px",
+                          "& .M4LIcon-root": {
+                            "& .M4LIcon-icon": {
+                              backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                            }
+                          }
+                        },
+                        "& .M4LSideBar-navSubItemContentBullet": {
+                          height: "14px",
+                          borderRadius: "4px",
+                          backgroundColor: o.vars.palette.primary.focusVisible,
+                          gap: "8px"
+                        }
+                      },
+                      "&:hover": {
+                        padding: "0 8px",
+                        background: o.vars.palette.background.default
+                        // Validar implementación desde la creación del tema.
+                      }
+                    },
+                    "& .M4LSideBar-navSubItemContentRoot": {
+                      gap: "12px",
+                      margin: "0px 0px 0px 0px",
+                      padding: "8px",
+                      "& .M4LIcon-root": {
+                        minHeight: "24px",
+                        minWwidth: "24px",
+                        "& .M4LIcon-icon": {
+                          minHeight: "24px",
+                          minWidth: "24px"
+                        }
+                      },
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        minWidth: "5px",
+                        minHeight: "5px",
+                        borderRadius: "50%",
+                        backgroundColor: o.vars.palette.text.primary
+                      },
+                      "& .M4LTypography-root": {
+                        display: "flex",
+                        width: "100%",
+                        "& .MuiTypography-root": {
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
+                          with: "100%",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          textWrap: "nowrap"
+                        }
+                      }
+                    }
+                  },
+                  "& .MuiCollapse-root": {
+                    marginLeft: "0px"
+                  }
+                }
+              },
+              "& .M4LIcon-root .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.primary
+              }
+            },
+            "& .M4LSideBar-footer": {
+              "& .M4LSideBar-containerLogoButton": {
+                display: "flex",
+                gap: "14px",
+                width: "120px"
+              },
+              "& .M4LSideBar-containerLogoButtonLogo": {
+                minWidth: "120px",
+                height: "32px",
+                "& .M4LSideBar-containerLogoButtonIcon": {
+                  display: "flex",
+                  alignItems: "center"
+                }
+              }
+            }
+          }
+        },
+        "&.M4LSideBar-variantComercial": {
+          /* '& .MuiBackdrop-root': {
+                          background: 'transparent',
+                          backgroundColor: `rgba(0, 0, 0, 0.5) !important`,
+                          transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+                      }, */
+          "& .M4LSideBar-contentMobile": {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            "& .M4LSideBar-containerSideBarLogo": {
+              display: "flex",
+              justifyContent: "flex-start",
+              marginTop: "12px",
+              "& .M4LSideBar-containerLogo": {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                fitContent: "100%",
+                boxSizing: "contentBox",
+                paddingTop: "8px",
+                paddingBottom: "8px",
+                gap: "16px",
+                paddingLeft: "24px",
+                "& .M4LTypography-root": {
+                  display: "flex",
+                  width: "100%",
+                  "& .MuiTypography-root": {
+                    with: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  }
+                },
+                "& .M4LImage-root": {
+                  position: "relative",
+                  padding: "6px",
+                  borderRadius: "6px",
+                  minWidth: "215px !important",
+                  minHeight: "50px !important"
+                }
+              }
+            },
+            "& .M4LSideBar-contentGroups": {
+              overflow: "hidden",
+              flexGrow: "1",
+              display: "flex",
+              flexDirection: "column",
+              "& .M4LSideBar-contentGroupsLine": {
+                display: "flex",
+                height: "2px",
+                marginRight: "14px",
+                marginLeft: "14px",
+                backgroundColor: "none"
+              },
+              "& .M4LSideBar-wrapperGroup": {
+                height: "auto",
+                paddingLeft: "10px",
+                "& .M4LSideBar-wrapperGroupTitle": {
+                  "& .M4LTypography-root": {
+                    display: "flex",
+                    width: "100%",
+                    "& .MuiTypography-root": {
+                      with: "100%",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      textWrap: "nowrap",
+                      fontWeight: "700",
+                      fontSize: "14px !important"
+                    }
+                  }
+                },
+                "& .M4LSideBar-itemListMainRoot": {
+                  display: "flex",
+                  borderRadius: "4px 0px 0px 4px",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  padding: "0px 0px 8px 0px",
+                  gap: "0",
+                  "& .M4LSideBar-navItemMainRoot": {
+                    backgroundColor: "transparent",
+                    borderRadius: "4px",
+                    "&:hover": {
+                      background: o.vars.palette.background.hover,
+                      cursor: "pointer"
+                    }
+                  },
+                  "&.M4LSideBar-itemMainActive": {
+                    borderRadius: "4px",
+                    background: o.vars.palette.primary.opacity,
+                    border: "1px solid",
+                    borderColor: o.vars.palette.primary.opacity,
+                    "& .M4LSideBar-navItemMainRoot": {
+                      background: o.vars.palette.primary.opacity,
+                      "&:hover": {
+                        background: r(
+                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                          0.24
+                        ),
+                        // Validar implementación desde la creación del tema.
+                        cursor: "pointer"
+                      }
+                    },
+                    "& .M4LSideBar-navItemRootContent": {
+                      "& .M4LSideBar-navItemRootContentIconTypo": {
+                        fontSize: "14px !important",
+                        "& .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        },
+                        "& .M4LTypography-root": {
+                          "& .MuiTypography-root": {
+                            color: o.vars.palette.primary.focusVisible
+                          }
+                        },
+                        "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                          backgroundColor: o.vars.palette.primary.focusVisible
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot": {
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: o.vars.palette.primary.focusVisible
+                          }
+                        }
+                      },
+                      "&::before": {
+                        content: '""',
+                        width: "4px",
+                        top: "0px",
+                        bottom: "0px",
+                        right: "0px",
+                        backgroundColor: o.vars.palette.primary.focusVisible,
+                        borderRadius: "4px 0px 0px 4px",
+                        position: "absolute"
+                      }
+                    }
+                  },
+                  "& .M4LSideBar-navItemRootContent": {
+                    display: "flex",
+                    padding: "8px",
+                    justifyContent: "center",
+                    borderRadius: "4px 0px 0px 4px",
+                    position: "relative",
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      display: "flex",
+                      gap: "8px",
+                      width: "100%",
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.text.primary,
+                        width: "18px",
+                        height: "18px"
+                      },
+                      "& .M4LTypography-root": {
+                        display: "flex",
+                        flexGrow: "1",
+                        overflow: "hidden",
+                        "& .MuiTypography-root": {
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
+                          textWrap: "nowrap",
+                          textOverflow: "ellipsis",
+                          display: "block",
+                          overflow: "hidden",
+                          fontSize: "14px !important"
+                        }
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.vars.palette.text.primary
+                      }
+                    },
+                    "& .M4LSideBar-arrowIconRoot": {
+                      "& .M4LIcon-root": {
+                        "& .M4LIcon-icon": {
+                          background: o.vars.palette.text.primary
+                        }
+                      }
+                    }
+                  },
+                  "& .M4LSideBar-containerListSubItem": {
+                    paddingLeft: "0px"
+                  },
+                  "& .M4LSideBar-navListSubItemRoot": {
+                    gap: "12px",
+                    padding: "0px",
+                    "& .M4LSideBar-navSubItemContentRoot ": {
+                      width: "100%",
+                      height: "32px",
+                      borderRadius: "4px",
+                      gap: "8px",
+                      padding: "0px",
+                      "&.M4LSideBar-subItemCollapseActive": {
+                        backgroundColor: o.vars.palette.primary.opacity,
+                        gap: "8px",
+                        "& .MuiButtonBase-root": {
+                          padding: "0px",
+                          "& .M4LIcon-root": {
+                            "& .M4LIcon-icon": {
+                              backgroundColor: o.vars.palette.primary.focusVisible
+                            }
+                          }
+                        }
+                      },
+                      "& .M4LSideBar-subItemActive": {
+                        "& .MuiButtonBase-root": {
+                          padding: "0px",
+                          "& .M4LIcon-root": {
+                            "& .M4LIcon-icon": {
+                              backgroundColor: `${o.vars.palette.primary.focusVisible}!important`
+                            }
+                          }
+                        },
+                        "& .M4LSideBar-navSubItemContentBullet": {
+                          height: "14px",
+                          borderRadius: "4px",
+                          backgroundColor: o.vars.palette.primary.focusVisible,
+                          gap: "8px"
+                        }
+                      },
+                      "&:hover": {
+                        padding: "0 8px",
+                        background: o.vars.palette.background.default
+                        // Validar implementación desde la creación del tema.
+                      }
+                    },
+                    "& .M4LSideBar-navSubItemContentRoot": {
+                      gap: "12px",
+                      margin: "0px 0px 0px 0px",
+                      padding: "0px",
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        minWidth: "5px",
+                        minHeight: "5px",
+                        borderRadius: "50%",
+                        backgroundColor: o.vars.palette.text.primary
+                      },
+                      "& .M4LTypography-root": {
+                        display: "flex",
+                        width: "100%",
+                        "& .MuiTypography-root": {
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
+                          with: "100%",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          textWrap: "nowrap",
+                          fontSize: "14px !important"
+                        }
+                      }
+                    }
+                  },
+                  "& .MuiCollapse-root": {
+                    marginLeft: "18px",
+                    "&.M4LSideBar-drawer.M4LSideBar-variantComercial": {
+                      /* '& .MuiBackdrop-root': {
+                                                                          '& .MuiModal-backdrop': {
+                      
+                                                                              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                      
+                                                                          }
+                                                                      }, */
+                      "& .M4LSideBar-subItemActive": {
+                        "& .M4LIcon-icon": {
+                          backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                        }
+                      },
+                      "& .M4LSideBar-contentMobile": {
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        flexDirection: "column",
+                        "& .M4LSideBar-containerSideBarLogo": {
+                          display: "flex",
+                          justifyContent: "flex-start",
+                          marginTop: "12px",
+                          "& .M4LSideBar-containerLogo": {
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            fitContent: "100%",
+                            boxSizing: "contentBox",
+                            paddingTop: "8px",
+                            paddingBottom: "8px",
+                            gap: "16px",
+                            paddingLeft: "24px",
+                            "& .M4LTypography-root": {
+                              display: "flex",
+                              width: "100%",
+                              "& .MuiTypography-root": {
+                                with: "100%",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                textWrap: "nowrap"
+                              }
+                            },
+                            "& .M4LImage-root": {
+                              position: "relative",
+                              background: o.vars.palette.background.default,
+                              boxShadow: o.vars.customShadows?.z2,
+                              padding: "6px",
+                              borderRadius: "6px",
+                              minWidth: "50px !important",
+                              minHeight: "50px !important"
+                            }
+                          }
+                        },
+                        "& .M4LSideBar-contentGroups": {
+                          overflow: "hidden",
+                          flexGrow: "1",
+                          display: "flex",
+                          flexDirection: "column",
+                          "& .M4LSideBar-contentGroupsLine": {
+                            display: "flex",
+                            height: "2px",
+                            marginRight: "14px",
+                            marginLeft: "14px",
+                            backgroundColor: "none"
+                          },
+                          "& .M4LSideBar-wrapperGroup": {
+                            height: "100%",
+                            paddingLeft: "10px",
+                            "& .M4LSideBar-wrapperGroupTitle": {
+                              "& .M4LTypography-root": {
+                                display: "flex",
+                                width: "100%",
+                                "& .MuiTypography-root": {
+                                  with: "100%",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  textWrap: "nowrap"
+                                }
+                              }
+                            },
+                            "& .M4LSideBar-itemListMainRoot": {
+                              display: "flex",
+                              borderRadius: "4px 0px 0px 4px",
+                              justifyContent: "center",
+                              flexDirection: "column",
+                              padding: "0px 0px 8px 0px",
+                              gap: "4px",
+                              "& .M4LSideBar-navItemMainRoot": {
+                                backgroundColor: "transparent",
+                                borderRadius: "4px",
+                                "&:hover": {
+                                  background: o.vars.palette.background.hover,
+                                  cursor: "pointer"
+                                }
+                              },
+                              "&.M4LSideBar-itemMainActive": {
+                                borderRadius: "4px",
+                                background: o.vars.palette.primary.opacity,
+                                border: "1px solid",
+                                borderColor: o.vars.palette.primary.opacity,
+                                "& .M4LSideBar-navItemMainRoot": {
+                                  background: o.vars.palette.primary.opacity,
+                                  "&:hover": {
+                                    background: r(
+                                      o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                                      0.24
+                                    ),
+                                    // Validar implementación desde la creación del tema.
+                                    cursor: "pointer"
+                                  }
+                                },
+                                "& .M4LSideBar-navItemRootContent": {
+                                  "& .M4LSideBar-navItemRootContentIconTypo": {
+                                    "& .M4LIcon-icon": {
+                                      backgroundColor: o.vars.palette.primary.focusVisible
+                                    },
+                                    "& .M4LTypography-root": {
+                                      "& .MuiTypography-root": {
+                                        color: o.vars.palette.primary.focusVisible
+                                      }
+                                    },
+                                    "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                                      backgroundColor: o.vars.palette.primary.focusVisible
+                                    }
+                                  },
+                                  "& .M4LSideBar-arrowIconRoot": {
+                                    "& .M4LIcon-root": {
+                                      "& .M4LIcon-icon": {
+                                        backgroundColor: o.vars.palette.primary.focusVisible
+                                      }
+                                    }
+                                  },
+                                  "&::before": {
+                                    content: '""',
+                                    width: "4px",
+                                    top: "0px",
+                                    bottom: "0px",
+                                    right: "0px",
+                                    backgroundColor: o.vars.palette.primary.focusVisible,
+                                    borderRadius: "4px 0px 0px 4px",
+                                    position: "absolute"
+                                  }
+                                }
+                              },
+                              "& .M4LSideBar-navItemRootContent": {
+                                display: "flex",
+                                padding: "8px",
+                                justifyContent: "center",
+                                borderRadius: "4px 0px 0px 4px",
+                                position: "relative",
+                                "& .M4LSideBar-navItemRootContentIconTypo": {
+                                  display: "flex",
+                                  gap: "8px",
+                                  width: "100%",
+                                  "& .M4LIcon-icon": {
+                                    backgroundColor: o.vars.palette.text.primary,
+                                    width: "18px",
+                                    height: "18px"
+                                  },
+                                  "& .M4LTypography-root": {
+                                    display: "flex",
+                                    flexGrow: "1",
+                                    overflow: "hidden",
+                                    "& .MuiTypography-root": {
+                                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                                      color: o.vars.palette.text.primary,
+                                      textWrap: "nowrap",
+                                      textOverflow: "ellipsis",
+                                      display: "block",
+                                      overflow: "hidden"
+                                    }
+                                  },
+                                  "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                                    backgroundColor: o.vars.palette.text.primary
+                                  }
+                                },
+                                "& .M4LSideBar-arrowIconRoot": {
+                                  "& .M4LIcon-root": {
+                                    "& .M4LIcon-icon": {
+                                      background: o.vars.palette.text.primary
+                                    }
+                                  }
+                                }
+                              },
+                              "& .M4LSideBar-containerListSubItem": {
+                                paddingLeft: "0px"
+                              },
+                              "& .M4LSideBar-navListSubItemRoot": {
+                                gap: "12px",
+                                padding: "0px",
+                                "& .M4LSideBar-navSubItemContentRoot ": {
+                                  width: "100%",
+                                  height: "32px",
+                                  borderRadius: "4px",
+                                  gap: "8px",
+                                  padding: "0px",
+                                  "&.M4LSideBar-subItemCollapseActive": {
+                                    backgroundColor: o.vars.palette.primary.opacity,
+                                    gap: "8px",
+                                    "& .MuiButtonBase-root": {
+                                      padding: "0px",
+                                      "& .M4LIcon-root": {
+                                        "& .M4LIcon-icon": {
+                                          backgroundColor: o.vars.palette.primary.focusVisible
+                                        }
+                                      }
+                                    }
+                                  },
+                                  "& .M4LSideBar-subItemActive": {
+                                    "& .MuiButtonBase-root": {
+                                      padding: "0px",
+                                      "& .M4LIcon-root": {
+                                        "& .M4LIcon-icon": {
+                                          backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
+                                        }
+                                      }
+                                    },
+                                    "& .M4LSideBar-navSubItemContentBullet": {
+                                      height: "14px",
+                                      borderRadius: "4px",
+                                      backgroundColor: o.vars.palette.primary.focusVisible,
+                                      gap: "8px"
+                                    }
+                                  },
+                                  "&:hover": {
+                                    background: o.vars.palette.background.default,
+                                    // Validar implementación desde la creación del tema.
+                                    padding: "0 8px"
+                                  }
+                                },
+                                "& .M4LSideBar-navSubItemContentRoot": {
+                                  gap: "12px",
+                                  margin: "0px 0px 0px 0px",
+                                  padding: "0px",
+                                  "& .M4LSideBar-navSubItemContentBullet": {
+                                    minWidth: "5px",
+                                    minHeight: "5px",
+                                    borderRadius: "50%",
+                                    backgroundColor: o.vars.palette.text.primary
+                                  },
+                                  "& .M4LTypography-root": {
+                                    display: "flex",
+                                    width: "100%",
+                                    "& .MuiTypography-root": {
+                                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                                      color: o.colorSchemes.finalTheme.palette.text.primary,
+                                      with: "100%",
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis",
+                                      textWrap: "nowrap"
+                                    }
+                                  }
+                                }
+                              },
+                              "& .MuiCollapse-root": {
+                                marginLeft: "18px"
+                              }
+                            }
+                          },
+                          "& .M4LIcon-root .M4LIcon-icon": {
+                            backgroundColor: o.vars.palette.text.primary
+                          }
+                        },
+                        "& .M4LSideBar-footer": {
+                          "& .M4LSideBar-containerLogoButton": {
+                            display: "flex",
+                            gap: "14px",
+                            width: "120px"
+                          },
+                          "& .M4LSideBar-containerLogoButtonLogo": {
+                            minWidth: "120px",
+                            height: "32px",
+                            "& .M4LSideBar-containerLogoButtonIcon": {
+                              display: "flex",
+                              alignItems: "center"
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              "& .M4LIcon-root .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.primary
+              }
+            },
+            "& .M4LSideBar-footer": {
+              "& .M4LSideBar-containerLogoButton": {
+                display: "flex",
+                gap: "14px",
+                width: "120px"
+              },
+              "& .M4LSideBar-containerLogoButtonLogo": {
+                minWidth: "120px",
+                height: "32px",
+                "& .M4LSideBar-containerLogoButtonIcon": {
+                  display: "flex",
+                  alignItems: "center"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};