From 37aff33b11e9337dbf4bd5e7492af30db95c4810 Mon Sep 17 00:00:00 2001
From: llara <llara@localhost>
Date: Wed, 19 Feb 2025 16:26:12 +0100
Subject: [PATCH] refs #1551 Apply global button styles to all components

---
 .../app/components/admin/admin.component.css  |  10 --
 .../app/components/admin/admin.component.html |   4 +-
 .../components/admin/admin.component.spec.ts  |   9 --
 .../admin/env-vars/env-vars.component.css     |   4 -
 .../admin/env-vars/env-vars.component.html    |   4 +-
 .../add-role-modal.component.css              |  14 +-
 .../add-role-modal.component.html             |   6 +-
 .../admin/roles/roles/roles.component.html    |   2 +-
 .../add-user-modal.component.css              |  36 ++----
 .../add-user-modal.component.html             |   6 +-
 .../change-password-modal.component.css       |  11 +-
 .../change-password-modal.component.html      |   8 +-
 .../admin/users/users/users.component.html    |   2 +-
 .../calendar/calendar.component.html          |   4 +-
 .../components/calendar/calendar.component.ts |   2 +-
 .../create-calendar-rule.component.css        |   7 +
 .../create-calendar-rule.component.html       |   6 +-
 .../create-calendar.component.css             |  11 +-
 .../create-calendar.component.html            |   8 +-
 .../commands-groups.component.html            |   4 +-
 .../create-command-group.component.css        |   7 +
 .../create-command-group.component.html       |   6 +-
 .../detail-command-group.component.css        |  29 +----
 .../detail-command-group.component.html       |   8 +-
 .../commands-task.component.html              |   2 +-
 .../create-task/create-task.component.css     |   1 +
 .../create-task/create-task.component.html    |  13 +-
 .../detail-task/detail-task.component.css     |  22 ----
 .../detail-task/detail-task.component.html    |   2 +-
 .../input-dialog/input-dialog.component.html  |   2 +-
 .../task-logs/task-logs.component.html        |   2 +-
 .../main-commands/commands.component.html     |   2 +-
 .../create-command.component.css              |  12 +-
 .../create-command.component.html             |   6 +-
 .../execute-command.component.html            |   2 +-
 .../execute-command.component.ts              |   6 -
 .../components/groups/groups.component.css    |  37 ++----
 .../components/groups/groups.component.html   |  11 +-
 .../create-client.component.html              |   4 +-
 .../manage-organizational-unit.component.css  |   6 -
 .../manage-organizational-unit.component.html |   4 +-
 .../app/layout/header/header.component.css    |  53 +++++---
 .../app/layout/header/header.component.html   |  49 ++++---
 ogWebconsole/src/styles.css                   | 120 +++++++++++++-----
 44 files changed, 283 insertions(+), 281 deletions(-)

diff --git a/ogWebconsole/src/app/components/admin/admin.component.css b/ogWebconsole/src/app/components/admin/admin.component.css
index 30a016d..8c90c1c 100644
--- a/ogWebconsole/src/app/components/admin/admin.component.css
+++ b/ogWebconsole/src/app/components/admin/admin.component.css
@@ -14,16 +14,6 @@
   margin: 0 10px;
 }
 
-/* Estilos de los botones */
-button {
-  height: 150px;
-  width: 150px;
-  margin: 5px;
-  padding: 5px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
 /* Estilos del texto debajo de los botones */
 span{
   margin: 0;
diff --git a/ogWebconsole/src/app/components/admin/admin.component.html b/ogWebconsole/src/app/components/admin/admin.component.html
index cf2f0aa..bf2ca78 100644
--- a/ogWebconsole/src/app/components/admin/admin.component.html
+++ b/ogWebconsole/src/app/components/admin/admin.component.html
@@ -1,9 +1,9 @@
 <div class="container">
-  <button mat-fab color="primary" class="fab-button" routerLink="/users">
+  <button class="action-button" routerLink="/users">
     <mat-icon>group</mat-icon>
     <span>{{ 'labelUsers' | translate }}</span>
   </button>
-  <button mat-fab color="primary" class="fab-button" routerLink="/user-groups">
+  <button class="action-button" routerLink="/user-groups">
     <mat-icon>admin_panel_settings</mat-icon>
     <span>{{ 'labelRoles' | translate }}</span>
   </button>
diff --git a/ogWebconsole/src/app/components/admin/admin.component.spec.ts b/ogWebconsole/src/app/components/admin/admin.component.spec.ts
index 5bd5fe2..2ed2fec 100644
--- a/ogWebconsole/src/app/components/admin/admin.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/admin.component.spec.ts
@@ -45,13 +45,4 @@ describe('AdminComponent', () => {
     expect(button).toBeTruthy();
     expect(button.querySelector('mat-icon').textContent.trim()).toBe('group');
   });
-
-
-  it('debería aplicar la clase "fab-button" a ambos botones', () => {
-    const buttons = fixture.nativeElement.querySelectorAll('button');
-    buttons.forEach((button: HTMLElement) => {
-      expect(button.classList).toContain('fab-button');
-    });
-  });
-  
 });
diff --git a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
index 5dd7cdc..01287db 100644
--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
@@ -15,10 +15,6 @@
     gap: 16px;
     justify-content: flex-end;
     margin-top: 16px;
-
-    button {
-      min-width: 120px;
-    }
   }
 }
 
diff --git a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
index 47e71b8..f4fbbc0 100644
--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
@@ -27,7 +27,7 @@
   </mat-table>
 
   <div class="actions">
-    <button mat-raised-button color="primary" (click)="saveEnvVars()">Guardar Cambios</button>
-    <button mat-raised-button color="accent" (click)="loadEnvVars()">Recargar</button>
+    <button class="action-button" (click)="loadEnvVars()">Recargar</button>
+    <button class="submit-button" (click)="saveEnvVars()">Guardar Cambios</button>
   </div>
 </div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
index 13e2689..a4b2450 100644
--- a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
@@ -1,7 +1,9 @@
 .full-width {
   width: 100%;
 }
+
 .form-container {
+  margin-top: 2em;
   padding: 40px;
 }
 
@@ -15,16 +17,24 @@
   margin-bottom: 16px;
 }
 
-.checkbox-group  {
+.checkbox-group {
   margin: 15px 0;
   align-items: flex-start;
 }
 
 .time-fields {
   display: flex;
-  gap: 15px; /* Espacio entre los campos */
+  gap: 15px;
+  /* Espacio entre los campos */
 }
 
 .time-field {
   flex: 1;
 }
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
index 7fbef12..7a03e84 100644
--- a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
@@ -16,7 +16,7 @@
     </section>
   </form>
 </mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
index d5070fb..183d4ff 100644
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
@@ -3,7 +3,7 @@
     <h2>{{ 'adminRolesTitle' | translate }}</h2>
   </div>
   <div class="images-button-row">
-    <button mat-flat-button color="primary" (click)="addUser()">
+    <button class="action-button" (click)="addUser()">
       {{ 'addRole' | translate }}
     </button>
   </div>
diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
index 13e2689..2d45e90 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
@@ -1,30 +1,12 @@
-.full-width {
-  width: 100%;
-}
-.form-container {
-  padding: 40px;
-}
-
-.form-group {
-  margin-top: 20px;
-  margin-bottom: 26px;
-}
-
-.full-width {
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.checkbox-group  {
-  margin: 15px 0;
-  align-items: flex-start;
-}
-
-.time-fields {
+.user-form {
   display: flex;
-  gap: 15px; /* Espacio entre los campos */
+  flex-direction: column;
+  margin-top: 2rem;
 }
 
-.time-field {
-  flex: 1;
-}
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
index ad9efdb..b8cee9e 100644
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
@@ -29,7 +29,7 @@
     </mat-form-field>
   </form>
 </mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
index 8aefe41..d37ba39 100644
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
@@ -1,6 +1,6 @@
 .user-form .form-field {
-    display: block;
-    margin-bottom: 10px;
+  display: block;
+  margin-bottom: 10px;
 }
 
 .checkbox-group label {
@@ -17,3 +17,10 @@ mat-spinner {
   margin: 0 auto;
   align-self: center;
 }
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
index 17a0805..0a3aac7 100644
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
@@ -23,7 +23,7 @@
     </div>
   </form>
 </mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
-</mat-dialog-actions>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.html b/ogWebconsole/src/app/components/admin/users/users/users.component.html
index 7c2ccee..a1cd0ac 100644
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.html
@@ -3,7 +3,7 @@
     <h2>{{ 'adminUsersTitle' | translate }}</h2>
   </div>
   <div class="images-button-row">
-    <button mat-flat-button color="primary" (click)="addUser()">
+    <button class="action-button" (click)="addUser()">
       {{ 'addUser' | translate }}
     </button>
   </div>
diff --git a/ogWebconsole/src/app/components/calendar/calendar.component.html b/ogWebconsole/src/app/components/calendar/calendar.component.html
index d057115..706f2f4 100644
--- a/ogWebconsole/src/app/components/calendar/calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.html
@@ -6,8 +6,8 @@
     <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCalendarsTitle' | translate }}</h2>
   </div>
   <div class="calendar-button-row">
-    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" mat-flat-button color="primary"
-      (click)="addImage()">
+    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" class="action-button"
+      (click)="addCalendar()">
       {{ 'addCalendar' | translate }}
     </button>
   </div>
diff --git a/ogWebconsole/src/app/components/calendar/calendar.component.ts b/ogWebconsole/src/app/components/calendar/calendar.component.ts
index cbfb249..c24d9ea 100644
--- a/ogWebconsole/src/app/components/calendar/calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.ts
@@ -66,7 +66,7 @@ export class CalendarComponent implements OnInit {
     this.search();
   }
 
-  addImage(): void {
+  addCalendar(): void {
     const dialogRef = this.dialog.open(CreateCalendarComponent, {
       width: '400px'
     });
diff --git a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
index 13e2689..2f3d78a 100644
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
@@ -28,3 +28,10 @@
 .time-field {
   flex: 1;
 }
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
index 9fb31c2..b1de852 100644
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
@@ -56,10 +56,10 @@
   </div>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
   <button
-    mat-button
+    class="submit-button"
     (click)="submitRule()"
     cdkFocusInitial
     [disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
diff --git a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
index 722ef4f..fa815f9 100644
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
@@ -1,6 +1,3 @@
-.full-width {
-  width: 100%;
-}
 .form-container {
   padding: 40px;
 }
@@ -12,7 +9,7 @@
 
 .full-width {
   width: 100%;
-  margin-bottom: 16px;
+  margin-top: 16px;
 }
 
 .additional-form {
@@ -58,3 +55,9 @@
   cursor: pointer;
 }
 
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
index 2715aee..fd76357 100644
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
@@ -9,7 +9,7 @@
   
   <div style="display: flex; justify-content: space-between; align-items: center;">
     <div *ngIf="isEditMode" mat-subheader>{{ 'rulesHeader' | translate }}</div>
-    <button mat-flat-button color="primary" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
+    <button class="action-button" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
       {{ 'addRule' | translate }}
     </button>
   </div>
@@ -41,9 +41,9 @@
   </mat-list>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
     {{ 'buttonSave' | translate }}
   </button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
index 80d6d4b..3092715 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
@@ -6,7 +6,7 @@
     <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
   </div>
   <div class="command-groups-button-row">
-    <button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
+    <button class="action-button" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
       {{ 'addCommandGroup' | translate }}
     </button>
   </div>
@@ -35,7 +35,7 @@
         </ng-container>
 
         <ng-container *ngIf="column.columnDef === 'commands'" joyrideStep="viewCommandsStep" text="{{ 'viewCommandsStepText' | translate }}">
-          <button mat-button [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
+          <button class="action-button" [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
           <mat-menu #menu="matMenu">
             <button mat-menu-item *ngFor="let command of commandGroup.commands">
               {{ command.name }}
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
index 1f69044..d159a5b 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
@@ -98,3 +98,10 @@
     margin-bottom: 20px;
   }
 }
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
index f315ec9..3a38be1 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
@@ -53,7 +53,7 @@
   </form>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button (click)="close()">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
index dd408ba..6d252df 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
@@ -58,19 +58,6 @@
     padding: 10px 20px;
   }
 
-  button {
-    background-color: #3f51b5; /* Color primario */
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  button:hover {
-    background-color: #2c387e; /* Color primario oscuro */
-  }
-
   @media (max-width: 600px) {
     .mat-card {
       margin: 10px 0;
@@ -86,15 +73,6 @@
     }
   }
 
-  .cancel-button {
-    background-color: #dc3545;
-    color: white;
-    border-radius: 5px;
-  }
-  .cancel-button:hover {
-    opacity: 0.9;
-  }
-
   .create-command-group-container {
     padding: 20px;
   }
@@ -146,8 +124,9 @@
     color: #666;
   }
 
-  .command-group-actions {
-    margin-top: 20px;
+  .action-container {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
+    gap: 1em;
+    padding: 1.5em;
   }
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
index c8edddb..c3c7c7a 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
@@ -49,10 +49,10 @@
     </form>
   </div>
 
-  <div class="command-group-actions" *ngIf="!loading">
-    <button mat-flat-button color="primary" (click)="toggleClientSelect()">
+  <div class="action-container" *ngIf="!loading">
+    <button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
+    <button [ngClass]="showClientSelect ? 'submit-button' : 'action-button'" (click)="toggleClientSelect()">
       {{ showClientSelect ? ('execute' | translate) : ('scheduleExecution' | translate) }}
     </button>
-    <button mat-flat-button color="warn" (click)="close()">{{ 'buttonCancel' | translate }}</button>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
index a3a6ccc..86f3f8e 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
@@ -6,7 +6,7 @@
     <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
   </div>
   <div class="task-button-row">
-    <button mat-flat-button color="primary" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
+    <button class="action-button" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
       {{ 'addTask' | translate }}
     </button>
   </div>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
index 3c41e87..b69339e 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
@@ -14,6 +14,7 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
+  padding: 1.5rem;
 }
 
 mat-form-field {
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
index 8e5fdca..9d5b756 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
@@ -87,10 +87,6 @@
       </mat-select>
     </mat-form-field>
 
-    <div class="button-container">
-      <button mat-raised-button color="primary" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
-    </div>
-
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Selecciona Clientes</mat-label>
       <mat-select formControlName="selectedClients" multiple>
@@ -102,10 +98,9 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-
-    <div class="button-container">
-      <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
-    </div>
-
   </mat-dialog-content>
 </form>
+
+<div class="button-container">
+  <button class="submit-button" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
+</div>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css
index dce95aa..cabeb18 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css
@@ -57,26 +57,4 @@
     justify-content: flex-end;
     padding: 10px 20px;
   }
-  
-  button {
-    background-color: #3f51b5;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  
-  button:hover {
-    background-color: #2c387e;
-  }
-  
-  .cancel-button {
-    background-color: #dc3545;
-    color: white;
-  }
-  
-  .cancel-button:hover {
-    opacity: 0.9;
-  }
   
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
index 940cf2c..4217141 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
@@ -50,6 +50,6 @@
   </mat-card>
 
   <div class="task-actions">
-    <button mat-flat-button class="cancel-button" (click)="closeDialog()">{{ 'buttonClose' | translate }}</button>
+    <button class="ordinary-button" (click)="closeDialog()">Cancel</button>
   </div>
 </div>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
index e12c176..eed69e9 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
@@ -3,5 +3,5 @@
   <pre>{{ data.input | json }}</pre>
 </div>
 <div mat-dialog-actions align="end">
-  <button mat-button (click)="close()">{{ 'closeButton' | translate }}</button>
+  <button class="ordinary-button" (click)="close()">{{ 'closeButton' | translate }}</button>
 </div>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
index 9d1a425..8990735 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
@@ -9,7 +9,7 @@
   </div>
 
   <div class="images-button-row">
-    <button mat-flat-button color="primary" (click)="resetFilters()" joyrideStep="resetFiltersStep"
+    <button class="action-button" (click)="resetFilters()" joyrideStep="resetFiltersStep"
       text="{{ 'resetFiltersStepText' | translate }}">
       {{ 'resetFilters' | translate }}
     </button>
diff --git a/ogWebconsole/src/app/components/commands/main-commands/commands.component.html b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
index e92aee1..6aa5914 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
@@ -6,7 +6,7 @@
     <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
   </div>
   <div class="command-button-row" joyrideStep="addCommandStep" text="{{ 'addCommandStepText' | translate }}">
-    <button mat-flat-button color="primary" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
+    <button class="action-button" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
   </div>
 </div>
 
diff --git a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
index aefc820..c45022f 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
@@ -7,12 +7,6 @@
 
 .form-group {
   margin-top: 20px;
-  margin-bottom: 26px;
-}
-
-.full-width {
-  width: 100%;
-  margin-bottom: 16px;
 }
 
 .additional-form {
@@ -58,3 +52,9 @@
   cursor: pointer;
 }
 
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
index 60b8adf..6fe8575 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
@@ -23,7 +23,7 @@
   </form>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
-  <button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
+  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html b/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html
index 2e45e56..11353a8 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html
@@ -3,7 +3,7 @@
     <mat-icon>{{ icon }}</mat-icon>
   </button>
 
-  <button mat-flat-button [disabled]="clientData.length === 0"  *ngSwitchCase="'text'" mat-button color="primary" [matMenuTriggerFor]="commandMenu">
+  <button class="action-button" [disabled]="clientData.length === 0"  *ngSwitchCase="'text'" [matMenuTriggerFor]="commandMenu">
     {{ buttonText }}
   </button>
 </ng-container>
diff --git a/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts b/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts
index 9f6bdc9..bc7dd55 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts
@@ -47,12 +47,6 @@ export class ExecuteCommandComponent implements OnInit {
     this.clientData = this.clientData || [];
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['clientData']) {
-      console.log(this.clientData.length)
-    }
-  }
-
   onCommandSelect(action: any): void {
     if (action === 'partition') {
       this.openPartitionAssistant();
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index d2a5b90..ab06306 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -1,4 +1,3 @@
-
 .header-container {
   display: flex;
   justify-content: space-between;
@@ -24,14 +23,6 @@
   margin: 20px 0;
 }
 
-button[mat-raised-button] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: 16px;
-}
-
 .actions mat-icon {
   color: #757575;
   cursor: pointer;
@@ -87,10 +78,6 @@ button[mat-raised-button] {
   width: 100%;
 }
 
-button[mat-raised-button] {
-  align-self: flex-start;
-}
-
 @media (max-width: 1024px) {
   .card-container {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -391,14 +378,11 @@ mat-tree mat-tree-node.disabled:hover {
   color: #666;
 }
 
-button[mat-raised-button] {
-  margin-top: 15px;
-}
-
 .clients-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 4px; /* Espaciado reducido entre cards */
+  gap: 4px;
+  /* Espaciado reducido entre cards */
 }
 
 .clients-list {
@@ -423,8 +407,10 @@ button[mat-raised-button] {
 
 .clients-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr); /* 6 columnas por fila */
-  gap: 16px; /* Espaciado entre tarjetas */
+  grid-template-columns: repeat(6, 1fr);
+  /* 6 columnas por fila */
+  gap: 16px;
+  /* Espaciado entre tarjetas */
   padding: 20px;
 }
 
@@ -442,7 +428,8 @@ button[mat-raised-button] {
   margin-top: 10px;
 }
 
-.client-card, .list-item-content {
+.client-card,
+.list-item-content {
   border: 1px solid #ccc;
   border-radius: 5px;
 }
@@ -453,12 +440,8 @@ button[mat-raised-button] {
   margin-bottom: 0.5rem;
 }
 
-.back-button {
-  flex-shrink: 0;
-}
-
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .client-info {
@@ -523,4 +506,4 @@ button[mat-raised-button] {
   gap: 10px;
   margin-top: 1.5rem;
   margin-left: 1.6rem;
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index aff6c54..1273645 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -9,19 +9,18 @@
     </h2>
   </div>
   <div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
-    <button mat-flat-button color="primary" (click)="addOU($event)"
+    <button class="action-button" (click)="addOU($event)"
       matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
       {{ 'newOrganizationalUnitButton' | translate }}
     </button>
-    <button mat-flat-button color="primary" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate
-      }}</button>
+    <button class="action-button" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate }}</button>
     <mat-menu #menuClients="matMenu">
       <button mat-menu-item (click)="addClient($event)">{{ 'newSingleClientButton' | translate }}</button>
       <button mat-menu-item (click)="addMultipleClients($event)">{{ 'newMultipleClientButton' | translate }}</button>
     </mat-menu>
 
-    <button mat-flat-button (click)="openBottomSheet()" joyrideStep="keyStep" text="{{ 'keyStepText' | translate }}"
-      matTooltipShowDelay="1000">
+    <button class="ordinary-button" (click)="openBottomSheet()" joyrideStep="keyStep"
+      text="{{ 'keyStepText' | translate }}" matTooltipShowDelay="1000">
       {{ 'legendButton' | translate }}
     </button>
   </div>
@@ -347,4 +346,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
index 5bebae5..5994b10 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
@@ -108,7 +108,7 @@
   </div>
 
   <div mat-dialog-actions align="end">
-    <button mat-button (click)="onNoClick()" i18n="@@cancel-button">Cancelar</button>
-    <button mat-button [disabled]="!clientForm.valid" (click)="onSubmit()" i18n="@@add-button">Añadir</button>
+    <button class="ordinary-button" (click)="onNoClick()" i18n="@@cancel-button">Cancelar</button>
+    <button class="submit-button" [disabled]="!clientForm.valid" (click)="onSubmit()" i18n="@@add-button">Añadir</button>
   </div>
 </div>
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
index 01f846d..b786c8b 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
@@ -28,12 +28,6 @@ h1 {
     margin-right: 1em;
 }
 
-button {
-    text-transform: none;
-    font-size: 16px;
-    font-weight: 500;
-}
-
 .grid-form {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
index 5ced9bc..a3e1fac 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
@@ -165,8 +165,8 @@
     </form>
 </div>
 <div class="mat-dialog-actions">
-    <button mat-button (click)="onNoClick()">Cancelar</button>
-    <button mat-button (click)="onSubmit()"
+    <button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
+    <button class="submit-button" (click)="onSubmit()"
         [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
         isEditMode ? 'Editar' : 'Crear' }}</button>
 </div>
diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css
index dab15f9..b69be3a 100644
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@@ -1,29 +1,46 @@
-
 mat-toolbar {
-    height: 60px;
-    background-color: #3f51b5;
-    color: white;
-}
-
-.admin-button,
-.user-button{
-  background-color: #e0e0e0;
+  height: 60px;
+  background-color: #3f51b5;
+  color: white;
 }
 
 .trace-button .mat-icon {
-  color: #f0f0f0;
+  color: #ffffff;
 }
 
-.navbar-button-row {
-    display: flex;
-    justify-content: end;
-    flex-grow: 1;
+.navbar-actions-row {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  flex-grow: 1;
 }
 
-button[mat-flat-button] {
-    margin: 0 5px;
+.navbar-buttons-row {
+  display: flex;
+  gap: 1rem;
 }
 
-.navbar-title{
-    cursor: pointer;
+.navbar-title {
+  cursor: pointer;
 }
+
+.logout-button {
+  background-color: #f00e0e;
+  color: white;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: transform 0.3s ease;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.logout-button:hover:not(:disabled) {
+  background-color: #f00e0edc;
+}
+
+.logout-button:disabled {
+  background-color: #ced0df;
+  cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index fb44be4..852fa13 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -1,39 +1,48 @@
 <mat-toolbar>
-  <span class="navbar-title" i18n="@@webConsoleTitle" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
+  <span class="navbar-title" i18n="@@webConsoleTitle" matTooltip="Consola web de administración de Opengnsys"
+    matTooltipShowDelay="1000">
     Opengnsys webconsole
   </span>
 
-  <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral" matTooltipShowDelay="1000">
+  <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
+    matTooltipShowDelay="1000">
     <mat-icon class="navbar-icon">menu</mat-icon>
   </button>
 
-  <div class="navbar-button-row">
-    <button class="trace-button" routerLink="/commands-logs" mat-button i18n="@@admin"><mat-icon>notifications</mat-icon></button>
+  <div class="navbar-actions-row">
+    <button class="trace-button" routerLink="/commands-logs" mat-button
+      i18n="@@admin"><mat-icon>notifications</mat-icon></button>
 
-    <button class="admin-button" *ngIf="isSuperAdmin" mat-button [matMenuTriggerFor]="menu" i18n="@@admin"
-      matTooltip="Gestión de usuarios y roles de la aplicación" matTooltipShowDelay="1000">
-      Administración
-    </button>
+    <div class="navbar-buttons-row">
+      <button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu" i18n="@@admin"
+        matTooltip="Gestión de usuarios y roles de la aplicación" matTooltipShowDelay="1000">
+        Administración
+      </button>
 
-    <button class="user-button" mat-button *ngIf="!isSuperAdmin" (click)="editUser()" i18n="@@editUser"
-      matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
-      Editar usuario
-    </button>
+      <button class="ordinary-button" *ngIf="!isSuperAdmin" (click)="editUser()" i18n="@@editUser"
+        matTooltip="Editar tu información de usuario" matTooltipShowDelay="1000">
+        Editar usuario
+      </button>
+
+      <button class="logout-button" routerLink="/auth/login" i18n="@@logout"
+        matTooltip="Cerrar sesión y salir de la aplicación" matTooltipShowDelay="1000">
+        Salir
+      </button>
+    </div>
 
     <mat-menu #menu="matMenu">
-      <button mat-menu-item routerLink="/users" i18n="@@usersMenuItem" matTooltip="Ver y gestionar todos los usuarios" matTooltipShowDelay="1000">
+      <button mat-menu-item routerLink="/users" i18n="@@usersMenuItem" matTooltip="Ver y gestionar todos los usuarios"
+        matTooltipShowDelay="1000">
         Usuarios
       </button>
-      <button mat-menu-item routerLink="/user-groups" i18n="@@rolesMenuItem" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
+      <button mat-menu-item routerLink="/user-groups" i18n="@@rolesMenuItem" matTooltip="Gestionar roles de usuario"
+        matTooltipShowDelay="1000">
         Roles
       </button>
-      <button mat-menu-item routerLink="/env-vars" i18n="@@rolesMenuItem" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
+      <button mat-menu-item routerLink="/env-vars" i18n="@@rolesMenuItem" matTooltip="Gestionar variables de entorno"
+        matTooltipShowDelay="1000">
         Variables de entorno
       </button>
     </mat-menu>
-    <button mat-flat-button color="warn" routerLink="/auth/login" i18n="@@logout"
-      matTooltip="Cerrar sesión y salir de la aplicación" matTooltipShowDelay="1000">
-      Salir
-    </button>
   </div>
-</mat-toolbar>
+</mat-toolbar>
\ No newline at end of file
diff --git a/ogWebconsole/src/styles.css b/ogWebconsole/src/styles.css
index 984356e..28f1c65 100644
--- a/ogWebconsole/src/styles.css
+++ b/ogWebconsole/src/styles.css
@@ -1,36 +1,96 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
 
 
 /* Clase general para el contenedor de carga */
 .loading-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1000;
-    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
-    width: 100vw;
-    height: 100vh;
-  }
-  
-  /* Spinner de Angular Material */
-  .mat-spinner {
-    width: 100px;
-    height: 100px;
-  }
-  
-  /* Texto que acompaña al spinner */
-  .loading-container p {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #555;
-  }
-  
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.8);
+  /* Fondo semitransparente */
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Spinner de Angular Material */
+.mat-spinner {
+  width: 100px;
+  height: 100px;
+}
+
+/* Texto que acompaña al spinner */
+.loading-container p {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #555;
+}
+
+.submit-button {
+  background-color: #399b00;
+  color: white;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: transform 0.3s ease;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.ordinary-button {
+  background-color: #fafafa;
+  color: #5f5f5f;
+  padding: 8px 18px;
+  border: 1px solid #5f5f5f;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: transform 0.3s ease;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.action-button {
+  background-color: #3f51b5;
+  color: white;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: transform 0.3s ease;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.submit-button:hover:not(:disabled){
+  background-color: #399b00dc;
+}
+.ordinary-button:hover:not(:disabled){
+  background-color: #e6e6e6;
+}
+.action-button:hover:not(:disabled) {
+  background-color: #485ac0d7;
+}
+
+.submit-button:disabled,
+.ordinary-button:disabled,
+.action-button:disabled {
+  background-color: #ced0df;
+  cursor: not-allowed;
+}
\ No newline at end of file