Cambio de colores, tipo de letra y diseño de la interfaz, asi como tambien se agrego una nueva vista de configuracion donde se pueden cambiar todos estos parametros

src/main/frontend/themes/sistema-mantenimiento/styles.css

@@ -1,11 +1,10 @@
 @import url('./main-layout.css');
 
-
-
-/* ----------- Estilos para el MainLayout.java ----------- */
-/* Estilos para el DrawerToggle*/
-.drawer-toggle {
-    background-color: #bc955b;
+:root {
+    --lumo-primary-color: #BC955B;
+    --lumo-primary-text-color: #BC955B;
+    --lumo-border-radius: 15px;
+    --lumo-font-family: 'Montserrat';
 }
 
 /* Estilos para el encabezado */
@@ -25,14 +24,6 @@
 .drawer-logo {
     width: 300px;
 }
-
-/* Estilos para el fondo de la aplicacion */
-.app-layout {
-    background-image: url('/images/bckgndNvo.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-}
 /* ------------------ FIN -------------------------------------- */
 /*
 /*
@@ -59,19 +50,6 @@
     font-size: 18px;
     color: #ddc9a3;
 }
-
-/* Estilo para el campo de texto nomenclatura */
-.nomenclatura-txt {
-    margin-top: 15px;
-    margin-right: 15px;
-}
-
-/* Estilo para el logo CELAYA */
-.celaya-logo {
-    width: 100px;
-    margin-left: 15px;
-    margin-top: 15px;
-}
 /* ------------------------ FIN -------------------------- */
 /*
 /*
@@ -90,176 +68,21 @@
     text-align: center;
 }
 
-/* Estilo para el grid */
-.act-diaria-grid {
-    margin-top: 20px;
-}
-/* ---------------------------- FIN------------------------ */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* Estilos especificos para el TextField, TextArea y Fecha*/
-vaadin-text-field::part(label), vaadin-text-area::part(label), vaadin-date-picker::part(label) {
-    color: #691b31; /* Color de la etiqueta */
-}
-
-vaadin-text-field::part(input-field), vaadin-text-area::part(input-field), vaadin-password-field::part(input-field),
-vaadin-number-field::part(input-field), vaadin-date-picker::part(input-field) {
-    border: 1px solid #691b31; /* Color del borde */
-    color: #691b31; /* Color del texto */
-}
-
-
-vaadin-month-calendar::part(date) {
-    color: #691b31; /* Color para los dias del calendario */
-}
-
-vaadin-button {
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(105, 27, 49, 0.28), 0 2px 8px rgba(0, 0, 0, 0.13);
-    transition: box-shadow 0.2s, border 0.2s;
-}
-
-vaadin-button::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: rgba(240,223,223,0.2);
-    opacity: 0;
-    transition: opacity 0.2s;
-    pointer-events: none;
-}
-
-vaadin-button:hover::after {
-    box-shadow: 0 16px 36px rgba(105,27,49,0.35), 0 4px 16px rgba(0,0,0,0.18);
-    border-color: #BC955B;
-    opacity: 1;
-}
-
-vaadin-month-calendar::part(date):hover /* Estilos para cuando se posiciona el puntero sobre el dia */{
-    background-color: #a02142;
-    opacity: 50%;
-    border-radius: 5px;
-}
-
-vaadin-month-calendar::part(date focused) {
-    background-color: #ddc9a3; /* Color de la fecha seleccionada */
-}
-
-
-vaadin-date-picker-overlay-content > vaadin-button, vaadin-date-picker-year::part(year-number) {
-    color: #691b31;
-}
-
-    /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* Estilos específicos para el Upload */
 vaadin-upload > vaadin-button {
     color: #691b31;
 }
 
-
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* Estilos específicos para el ComboBox */
-vaadin-combo-box::part(input-field) {
-    background-color: #ddc9a3; /* Color de fondo */
-    color: #691b31; /* Color del texto */
-    border: 1px solid #691b31; /* Color del borde */
-}
-
-vaadin-combo-box::part(label) {
-    color: #691b31; /* Color de las etiquetas */
-}
-
-vaadin-combo-box::part(dropdown) {
-    background-color: rgba(221, 201, 163, 1); /* Color del fondo del dropdown */
-}
-
-vaadin-combo-box-item::part(checkmark)::before, vaadin-combo-box-item:hover
-{
-    color: #691b31;
-}
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) INDICADOR DE CARGA DE LA APLICACION (*)(*) (*)(*) */
-.v-loading-indicator { /* Cambiar el color de la barra de carga que sale cuando la aplicacion esta cargando */
-    background: #691b31 !important;
-}
-
-
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) ESTILOS PARA LA SIDEBAR (*)(*) (*)(*) */
-vaadin-side-nav-item[aria-current="page"]::part(content) {
-    color: #691b31; /* Color de texto seleccionado */
-}
-
-vaadin-side-nav-item:hover::part(content) {
-    background-color: #ddc9a3; /* Color de fondo al hacer hover*/
-    fill-opacity: 50%;
-    border-radius: 5px;
-}
-
-vaadin-side-nav-item::part(content) {
-    color: #a02142; /* Color del texto deseado */
-}
-
-
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/*Estilos especificos para el Grid */
-vaadin-grid::part(selected-row-cell) {
-    background-color: rgba(221, 201, 163, 0.7);
-}
-
-vaadin-grid::part(selected-row) {
-    color: #691b31;
-    font-weight: bold;
-}
-
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/*Estilos especificos para los botones */
-vaadin-button[theme~="primary"] {
-    background-color: #691b31;
-}
-
-vaadin-button:not([theme]) {
-    color: #a02142;
-}
-
-
-vaadin-button[theme~="tertiary-inline"], vaadin-button[theme~="icon"] {
-    color: #a02142;
-}
-
 /* Estilos para el theme personalizado 'subir-archivo' */
 vaadin-button[theme~="subir-archivo"] {
     background-color: #691b31;
     color: #ffffff;
 }
 
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
-/*Estilos especificos para los CheckBox y RadioButtons */
-vaadin-checkbox[checked]::part(checkbox) {
-    background-color: #691b31; /* Cambia el color del CheckBox */
-}
-
-vaadin-checkbox-group::part(label), vaadin-radio-group::part(label) {
-    color: #691b31;
-}
-
-vaadin-radio-button[checked]::part(radio) {
-    background-color: #691b31;
-}
-
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */
 /* (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) (*)(*) */

src/main/java/mx/gob/jumapacelaya/Application.java

@@ -4,6 +4,7 @@ import com.vaadin.flow.component.page.AppShellConfigurator;
 import com.vaadin.flow.component.page.Push;
 import com.vaadin.flow.server.PWA;
 import com.vaadin.flow.theme.Theme;
+import com.vaadin.flow.theme.lumo.Lumo;
 import mx.gob.jumapacelaya.services.DatabaseService;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
@@ -19,7 +20,7 @@ import org.springframework.boot.autoconfigure.validation.ValidationAutoConfigura
  */
 @SpringBootApplication
 @Push
-@Theme(value = "sistema-mantenimiento")
+@Theme(value = "sistema-mantenimiento", variant = Lumo.LIGHT)
 @PWA(name = "Aplicacion de Mantenimiento de Equipo de Computo", shortName = "Mantenimiento de Computo", iconPath = "icons/icon.png")
 public class Application implements AppShellConfigurator {
 

src/main/java/mx/gob/jumapacelaya/ui/ActDiariaView.java

@@ -98,7 +98,7 @@ public class ActDiariaView extends VerticalLayout {
         opcionesLyt.getStyle()
                 .set("box-shadow", "0 4px 8px rgba(0,0,0,0.2)")
                 .set("border-radius", "10px")
-                .set("background-color", "white")
+                //.set("background-color", "white")
                 .set("padding", "1rem")
                 .set("margin", "1rem auto");
 
@@ -270,7 +270,6 @@ public class ActDiariaView extends VerticalLayout {
         grid.addComponentColumn(ticket -> {
             Button btnVer = new Button(new Icon(VaadinIcon.EYE));
             btnVer.addClickListener(event -> showDescription(ticket));
-            btnVer.getStyle().set("color", "#A02142");
             return btnVer;
         });
 

src/main/java/mx/gob/jumapacelaya/ui/ConfiguracionView.java

@@ -0,0 +1,265 @@
+package mx.gob.jumapacelaya.ui;
+
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.combobox.ComboBox;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H2;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
+import com.vaadin.flow.data.renderer.ComponentRenderer;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.server.VaadinSession;
+import jakarta.annotation.security.PermitAll;
+
+import java.util.List;
+
+@PermitAll
+@PageTitle("Configuración del sistema")
+@Route(value = "configuracion", layout = MainLayout.class)
+public class ConfiguracionView extends VerticalLayout {
+
+    private static final String THEME_SESSION_KEY = "userTheme";
+    private static final String THEME_LOCALSTORAGE_KEY = "appThemePreference";
+
+    private final List<ColorOptions> primaryTextColorOptions = List.of(
+            new ColorOptions("Color 1", "#A02142"),
+            new ColorOptions("Color 2", "#691B31"),
+            new ColorOptions("Color 3", "#BC955B"),
+            new ColorOptions("Color 4", "#DDC9A3"),
+            new ColorOptions("Color 5", "#6F7271")
+    );
+
+    private final List<ColorOptions> primaryColorOptions = List.of(
+            new ColorOptions("Color 1", "#A02142"),
+            new ColorOptions("Color 2", "#691B31"),
+            new ColorOptions("Color 3", "#BC955B"),
+            new ColorOptions("Color 4", "#DDC9A3"),
+            new ColorOptions("Color 5", "#6F7271")
+    );
+
+
+    public ConfiguracionView() {
+        setSpacing(true);
+
+        loadCustomVariablesOnStartup();
+
+        // Selector de modo claro u obscuro
+        RadioButtonGroup<String> themeSelector = createThemeSelector();
+
+        // Selector de colores de texto primarios
+        ComboBox<ColorOptions> primaryTextColorSelector = createPrimaryTextColorComboBox();
+        primaryTextColorSelector.setWidth("250px");
+
+        // Selector del color primario
+        ComboBox<ColorOptions> primaryColorSelector = createPrimaryColorComboBox();
+        primaryColorSelector.setWidth("250px");
+
+        HorizontalLayout layout1 = new HorizontalLayout(themeSelector);
+        layout1.setWidthFull();
+
+        HorizontalLayout layout2 = new HorizontalLayout(primaryColorSelector, primaryTextColorSelector);
+        layout2.setWidthFull();
+
+        VerticalLayout layoutPadre = new VerticalLayout(layout1, layout2);
+        layoutPadre.getStyle()
+                .set("border-radius", "10px")
+                .set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.2)");
+        add(layoutPadre);
+    }
+
+    private void applyTheme(String themeAttribute) {
+        String js = """
+            if ('%s' === 'dark') {
+                document.documentElement.setAttribute('theme', 'dark');
+                localStorage.setItem('%s', 'dark');
+            } else {
+                document.documentElement.removeAttribute('theme');
+                localStorage.setItem('%s', 'light');
+            }
+        """.formatted(
+                    themeAttribute,
+                    THEME_LOCALSTORAGE_KEY,
+                    THEME_LOCALSTORAGE_KEY
+        );
+
+        UI.getCurrent().getPage().executeJs(js);
+
+        VaadinSession.getCurrent().setAttribute(
+                THEME_SESSION_KEY,
+                themeAttribute.isEmpty() ? "light" : "dark"
+        );
+    }
+
+    private ComboBox<ColorOptions> createPrimaryColorComboBox() {
+        ComboBox<ColorOptions> selector = new ComboBox<>("Color Primario");
+        selector.setItems(primaryColorOptions);
+        selector.setClearButtonVisible(false);
+        selector.setAllowCustomValue(false);
+
+        final String cssVariable = "--lumo-primary-color";
+
+        UI.getCurrent().getPage().executeJs(String.format("return localStorage.getItem('config:%s');", cssVariable))
+                .then(String.class, savedHex -> {
+                    ColorOptions savedOption = primaryTextColorOptions.stream()
+                            .filter(opt -> opt.getHexValue().equalsIgnoreCase(savedHex))
+                            .findFirst()
+                            .orElse(primaryTextColorOptions.get(0));
+
+                    selector.setValue(savedOption);
+                });
+
+        selector.addValueChangeListener(event -> {
+            ColorOptions selectedOption = event.getValue();
+            if (selectedOption != null) {
+                applyCssVariable(cssVariable, selectedOption.getHexValue());
+            }
+        });
+
+        selector.setRenderer(new ComponentRenderer<>(colorOptions -> {
+            Div div = new Div();
+            div.setText(colorOptions.getName());
+            div.getStyle().set("display", "flex")
+                    .set("align-items", "center");
+
+            Div colorSwatch = new Div();
+            colorSwatch.getStyle().set("background-color", colorOptions.getHexValue())
+                    .set("width", "16px")
+                    .set("height", "16px")
+                    .set("border-radius", "50%")
+                    .set("margin-right", "8px")
+                    .set("border", "1px solid var(--lumo-border-color)");
+
+            div.addComponentAsFirst(colorSwatch);
+            return div;
+        }));
+
+        return selector;
+    }
+
+    private ComboBox<ColorOptions> createPrimaryTextColorComboBox() {
+        ComboBox<ColorOptions> selector = new ComboBox<>("Color de los textos");
+        selector.setItems(primaryTextColorOptions);
+        selector.setClearButtonVisible(false);
+        selector.setAllowCustomValue(false);
+
+        final String cssVariable = "--lumo-primary-text-color";
+
+        UI.getCurrent().getPage().executeJs(String.format("return localStorage.getItem('config:%s');", cssVariable))
+                .then(String.class, savedHex -> {
+                    ColorOptions savedOption = primaryTextColorOptions.stream()
+                            .filter(opt -> opt.getHexValue().equalsIgnoreCase(savedHex))
+                            .findFirst()
+                            .orElse(primaryTextColorOptions.get(0));
+
+                    selector.setValue(savedOption);
+                });
+
+        selector.addValueChangeListener(event -> {
+            ColorOptions selectorOption = event.getValue();
+            if (selectorOption != null) {
+                applyCssVariable(cssVariable, selectorOption.getHexValue());
+            }
+        });
+
+        selector.setRenderer(new ComponentRenderer<>(colorOptions -> {
+            Div div = new Div();
+            div.setText(colorOptions.getName());
+            div.getStyle().set("display", "flex")
+                    .set("align-items", "center");
+
+            Div colorSwatch = new Div();
+            colorSwatch.getStyle().set("background-color", colorOptions.getHexValue())
+                    .set("width","15px")
+                    .set("height","15px")
+                    .set("border-radius","50%")
+                    .set("margin-right","10px")
+                    .set("border","1px solid var(--lumo-border-color)");
+
+            div.addComponentAsFirst(colorSwatch);
+            return div;
+        }));
+
+        return selector;
+    }
+
+    private RadioButtonGroup<String> createThemeSelector() {
+        RadioButtonGroup<String> themeSelector = new RadioButtonGroup<>("Modo de interfaz (Tema)");
+        themeSelector.setItems("Claro (predeterminado)", "Oscuro");
+
+        String currentTheme = (String) VaadinSession.getCurrent().getAttribute(THEME_SESSION_KEY);
+        themeSelector.setValue(
+                "dark".equals(currentTheme)
+                        ? "Oscuro"
+                        : "Claro (predeterminado)"
+        );
+
+        themeSelector.addValueChangeListener(e -> {
+            String selection = e.getValue();
+            String themeAttribute = selection.contains("Oscuro") ? "dark" : "";
+
+            applyTheme(themeAttribute);
+        });
+
+        return themeSelector;
+    }
+
+
+
+    public static class ColorOptions {
+        private final String name;
+        private final String hexValue;
+
+        public ColorOptions(String name, String hexValue) {
+            this.name = name;
+            this.hexValue = hexValue;
+        }
+
+        public String getName() { return name; }
+        public String getHexValue() { return hexValue; }
+
+        @Override
+        public String toString() { return name; }
+    }
+
+    private void applyCssVariable(String variableName, String colorValue) {
+        String jsSetVar = String.format(
+                "document.documentElement.style.setProperty('%s', '%s');",
+                variableName,
+                colorValue
+        );
+
+        String jsSetStorage = String.format(
+                "localStorage.setItem('config:%s', '%s');",
+                variableName,
+                colorValue
+        );
+
+        UI.getCurrent().getPage().executeJs(jsSetVar, jsSetStorage);
+        VaadinSession.getCurrent().setAttribute(variableName, colorValue);
+    }
+
+    private void loadCustomVariablesOnStartup() {
+        final String[] customVariables = {
+                "--lumo-primary-text-color",
+                "--lumo-primary-color"
+        };
+
+        StringBuilder jsLoadScript = new StringBuilder();
+
+        for (String cssVariable : customVariables) {
+            String storageKey = "config:" + cssVariable;
+
+            jsLoadScript.append(String.format(
+                    "const saved_%1$s = localStorage.getItem('%2$s');" +
+                            "if (saved_%1$s) { document.documentElement.style.setProperty('%3$s', saved_%1$s); }",
+                    cssVariable.replace("-", "_"),
+                    storageKey,
+                    cssVariable
+            ));
+        }
+
+        UI.getCurrent().getPage().executeJs(jsLoadScript.toString());
+    }
+}

src/main/java/mx/gob/jumapacelaya/ui/DetallesMantView.java

@@ -102,7 +102,6 @@ public class DetallesMantView extends VerticalLayout implements BeforeEnterObser
         mainLayout.getStyle()
                 .set("box-shadow","0 4px 8px rgba(0,0,0,0.2)")
                 .set("border-radius", "12px")
-                .set("background-color", "white")
                 .set("padding", "1rem")
                 .set("margin", "1rem auto");
 

src/main/java/mx/gob/jumapacelaya/ui/MainLayout.java

@@ -1,5 +1,6 @@
 package mx.gob.jumapacelaya.ui;
 
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
 import com.vaadin.flow.component.button.Button;
@@ -13,12 +14,15 @@ import com.vaadin.flow.component.orderedlayout.Scroller;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.sidenav.SideNav;
 import com.vaadin.flow.component.sidenav.SideNavItem;
+import com.vaadin.flow.router.BeforeEnterEvent;
+import com.vaadin.flow.router.BeforeEnterObserver;
+import com.vaadin.flow.server.menu.MenuConfiguration;
 import com.vaadin.flow.theme.lumo.LumoUtility;
 import mx.gob.jumapacelaya.services.SecurityService;
 
 
 @CssImport("./themes/sistema-mantenimiento/styles.css")
-public class MainLayout extends AppLayout {
+public class MainLayout extends AppLayout implements BeforeEnterObserver {
 
     private H2 viewTitle;
     private  final SecurityService securityService;
@@ -45,7 +49,7 @@ public class MainLayout extends AppLayout {
 
         String u = securityService.getAuthenticatedUser();
         Span usrNameLabel = new Span(u);
-        usrNameLabel.getStyle().set("color", "#691b31");
+        //usrNameLabel.getStyle().set("color", "#691b31");
         usrNameLabel.getStyle().set("font-weight", "bold");
         usrNameLabel.getStyle().set("font-size", "20px");
 
@@ -70,7 +74,7 @@ public class MainLayout extends AppLayout {
         headerLayout.setPadding(true);
         headerLayout.setSpacing(false);
         headerLayout.setAlignItems(FlexComponent.Alignment.CENTER);
-        headerLayout.getStyle().set("background-color", "#DDC9A3");
+        //headerLayout.getStyle().set("background-color", "#DDC9A3");
 
         Image imgLogo = new Image("images/LOGO_900X160.png", "Logo");
         imgLogo.setWidthFull();
@@ -78,7 +82,7 @@ public class MainLayout extends AppLayout {
         headerLayout.add(imgLogo);
 
         Scroller scroller = new Scroller(createNavigation());
-        scroller.getStyle().set("background-color", "#691b31");
+        //scroller.getStyle().set("background-color", "#691b31");
 
         addToDrawer(headerLayout, scroller, createFooter());
     }
@@ -89,9 +93,9 @@ public class MainLayout extends AppLayout {
         nav.addItem(new SideNavItem("Plan Anual", PlanAnualView.class, VaadinIcon.CALENDAR.create()));
         nav.addItem(new SideNavItem("Listado de Actividades", ActDiariaView.class, VaadinIcon.EDIT.create()));
         nav.addItem(new SideNavItem("Mantenimiento Correctivo", MantCorrectivoView.class, VaadinIcon.WRENCH.create()));
-        nav.getStyle().set("background-color", "white");
+        nav.addItem(new SideNavItem("Configuración del sistema", ConfiguracionView.class, VaadinIcon.COG.create()));
+
         nav.getStyle().set("border-radius", "5px");
-        nav.getStyle().set("opacity", "0.9");
         return nav;
     }
 
@@ -101,9 +105,25 @@ public class MainLayout extends AppLayout {
         return layout;
     }
 
+    private String getCurrentPageTitle() {
+        return MenuConfiguration.getPageHeader(getContent()).orElse("");
+    }
+
     @Override
     protected void afterNavigation() {
         super.afterNavigation();
-        viewTitle.setText("Mantenimiento de Hardware");
+        viewTitle.setText(getCurrentPageTitle());
+    }
+
+    @Override
+    public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
+        UI.getCurrent().getPage().executeJs("""
+            const theme = localStorage.getItem('appThemePreference');
+            if (theme === 'dark') {
+                document.documentElement.setAttribute('theme', 'dark');
+            } else {
+                document.documentElement.removeAttribute('theme');
+            }
+        """);
     }
 }

src/main/java/mx/gob/jumapacelaya/ui/MantCorrectivoView.java

@@ -96,7 +96,6 @@ public class MantCorrectivoView extends VerticalLayout {
         headerLayout.getStyle()
                 .set("box-shadow", "0 4px 8px rgba(0,0,0,0.2)")
                 .set("border-radius", "10px")
-                .set("background-color", "white")
                 .set("padding", "1rem")
                 .set("margin", "1rem auto");
 
@@ -107,7 +106,6 @@ public class MantCorrectivoView extends VerticalLayout {
         mainLayout.getStyle()
                 .set("box-shadow", "0 4px 8px rgba(0,0,0,0.2)")
                 .set("border-radius", "12px")
-                .set("background-color", "white")
                 .set("padding", "1rem")
                 .set("margin", "1rem auto");
 

src/main/java/mx/gob/jumapacelaya/ui/MantenimientoView.java

@@ -98,7 +98,6 @@ public class MantenimientoView extends VerticalLayout implements BeforeEnterObse
         mainLayout.getStyle()
                 .set("box-shadow","0 4px 8px rgba(0,0,0,0.2)")
                 .set("border-radius", "12px")
-                .set("background-color", "white")
                 .set("padding", "1rem")
                 .set("margin", "1rem auto");
 

src/main/java/mx/gob/jumapacelaya/ui/PlanAnualView.java

@@ -281,7 +281,6 @@ public class PlanAnualView extends VerticalLayout {
             if ("PENDIENTE".equalsIgnoreCase(estado)) {
                 btn = new Button(new Icon(VaadinIcon.EDIT));
                 btn.setTooltipText("Realizar mantenimiento");
-                btn.getStyle().set("color", "#A02142");
 
                 btn.addClickListener(event -> {
                     int idPlananual = planAnual.getNumero();
@@ -303,7 +302,6 @@ public class PlanAnualView extends VerticalLayout {
             } else if ("REALIZADO".equalsIgnoreCase(estado)) {
                 btn = new Button(new Icon(VaadinIcon.EYE));
                 btn.setTooltipText("Ver detalles");
-                btn.getStyle().set("color", "#A02142");
 
                 btn.addClickListener(event -> {
                     int idPlananual = planAnual.getNumero();
@@ -1080,7 +1078,7 @@ public class PlanAnualView extends VerticalLayout {
 
     private void showEncuestasDialog(String mes, int anio) {
         Dialog dialog = new Dialog();
-        dialog.setWidth("90%");
+        dialog.setWidth("95%");
         dialog.setHeight("90%");
         dialog.setHeaderTitle("Encuestas pendientes por enviar...");
 
@@ -1090,17 +1088,18 @@ public class PlanAnualView extends VerticalLayout {
                                 .setAutoWidth(true);
 
         grid.addColumn(item -> item.getFecha().format(DateTimeFormatter.ofPattern("dd/MM/yyyy")))
-                .setHeader("Fecha");
+                .setHeader("Fecha")
+                        .setAutoWidth(true);
 
         grid.addColumn(MantenimientosSinEncuesta::getPeriodo)
-                .setHeader("Periodo");
+                .setHeader("Periodo")
+                        .setAutoWidth(true);
 
         grid.addColumn(createStatusRender())
                 .setHeader("Encuesta");
 
         grid.addColumn(MantenimientosSinEncuesta::getDepartamento)
-                .setHeader("Departamento")
-                        .setAutoWidth(true);
+                .setHeader("Departamento");
 
         grid.addColumn(MantenimientosSinEncuesta::getNomUsuario)
                 .setHeader("Usuario")
@@ -1124,11 +1123,13 @@ public class PlanAnualView extends VerticalLayout {
             });
 
             return btnEnviar;
-        }).setHeader("Accion");
+        }).setHeader("Accion")
+                .setFrozen(true);
 
         List<MantenimientosSinEncuesta> lista = databaseService.getEncuestPendientes(mes, anio);
 
         grid.setItems(lista);
+        grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
         dialog.add(grid);
         dialog.getFooter().add(new Button("Cerrar", LineAwesomeIcon.TIMES_SOLID.create(), e -> dialog.close()));