SRC

sistema-mantenimiento-front/src/custom-theme.scss

@@ -0,0 +1,201 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+//@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$sistema-mantenimiento-front-primary: mat.define-palette(mat.$indigo-palette);
+$sistema-mantenimiento-front-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$sistema-mantenimiento-front-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$sistema-mantenimiento-front-theme: mat.define-light-theme((
+  color: (
+    primary: $sistema-mantenimiento-front-primary,
+    accent: $sistema-mantenimiento-front-accent,
+    warn: $sistema-mantenimiento-front-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($sistema-mantenimiento-front-theme);
+
+/*
+ * QUILL - SAMPLE OVERRIDES
+ */
+
+ quill-editor {
+  display: block;
+}
+
+.ql-editor:focus {
+  border: 1px solid #80bdff !important;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+}
+
+/*.ng-invalid {
+  border: 1px dashed red;
+}*/
+
+/* Set dropdown font-families */
+
+[quill-editor-toolbar] .ql-font span[data-label="Aref Ruqaa"]::before {
+  font-family: "Aref Ruqaa";
+}
+
+[quill-editor-toolbar] .ql-font span[data-label="Mirza"]::before {
+  font-family: "Mirza";
+}
+
+[quill-editor-toolbar] .ql-font span[data-label="Roboto"]::before {
+  font-family: "Roboto";
+}
+
+/* Set content font-families */
+
+.ql-font-mirza {
+  font-family: "Mirza";
+}
+
+.ql-font-aref {
+  font-family: "Aref Ruqaa";
+}
+
+.ql-font-roboto {
+  font-family: "Roboto";
+}
+
+.elevation-z8{
+  @include mat.elevation(8);
+}
+
+/*
+ * ANGULAR MATERIAL
+ */
+
+// Import library functions for theme creation.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+//@include mat-core();
+
+// Define the default theme (same as the example above).
+//$primary: mat-palette($mat-blue, A700);
+//$accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+//$warn:    mat-palette($mat-red);
+
+/*$theme:   mat-light-theme($primary, $accent);
+
+// Include the default theme styles.
+@include angular-material-theme($theme);
+
+/*
+ * COMPONENTS
+ */
+
+// make major example component children full width
+/*app-root > div > *,
+app-root > div > * > form,
+app-root > div > * > ng-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+app-root > div > * {
+  // any root element in an example component, but H3s
+  > *:not(h3) {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  // make major example component children full width
+  h4,
+  > div,
+  > .ql-container,
+  quill-editor,
+  .mat-form-field {
+    flex: 1;
+  }
+
+  h3 {
+    background: #e0e2e3;
+    font-family: sans-serif;
+    padding: 2rem;
+  }
+
+  h4 {
+    text-align: center;
+  }
+
+  > button {
+    flex: 1 1 32px;
+  }
+
+  // only style the example component pre, not quill's
+  > pre,
+  form > pre {
+    background-color: #fcfcfc;
+    border: 1px solid #b2b2b2;
+    color: #363030;
+    padding: 1.5rem;
+    white-space: normal;
+  }
+}
+
+/*
+ * Material Quill & MatFormField
+ * - demo overrides
+ */
+
+/*.mat-form-field {
+
+  // Since the default quill styles already provide padding
+  &-appearance-fill .mat-form-field {
+    &-flex {
+      padding: 0 !important;
+    }
+
+    &-infix {
+      border-top: 0;
+      padding: 0;
+    }
+  }
+
+  .ql-container {
+    // set quill caret to match current Angular Material theme
+    caret-color: mat-color($primary, text);
+
+    // Remove redundant quill snow-theme border
+    &.ql-snow {
+      border: none;
+    }
+
+    // Remove all default quill focus indicators
+    .ql-editor {
+      &:focus {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  // make sure any quill tooltips, bubbles, or popups aren't occluded
+  .ql-tooltip {
+    z-index: 1;
+  }
+}*/

sistema-mantenimiento-front/src/environments/environment.prod.ts

@@ -0,0 +1,32 @@
+export const environment = {
+  production: true
+};
+
+export const public_key = "WrBEGoJnMnMhC/2hiaYypcmPwP9Z4p4/bNex0T/WUWA=";
+export const secret_key = "CEIBkv7QG1WoAoBO7Ny5cqzyJ5yCUwBMhnFYUBbCeTk=";
+
+export const availableFiles = {
+  "250": ["zip", "tar", "rar", "7z", "mp3", "mpeg", "wav", "ogg", "opus", "jpg", "png", "gif", "bmp", "tiff", "svg",
+          "txt", "webm", "mp4", "3gp", "mov", "avi", "wmv", "flv", "dwg", "dxf", "3ds", "ai", "psd"],
+  "50" : ["doc", "docx", "vsd", "vsdx", "pdf"],
+  "75" : ["xls", "xlsx"],
+  "100": ["ppt", "pptx"],
+};
+
+export const docClassification = [
+  {category: 'Avisos', code: 'AV'},
+  {category: 'Audios', code: 'AU'},
+  {category: 'Catálogos', code: 'CA'},
+  {category: 'Certificaciones', code: 'CE'},
+  {category: 'Contratos', code: 'CO'},
+  {category: 'Diagramas o Planos', code: 'DP'},
+  {category: 'Facturas', code: 'FA'},
+  {category: 'Ficheros', code: 'FI'},
+  {category: 'Fotografías', code: 'FO'},
+  {category: 'Informes', code: 'IN'},
+  {category: 'Layouts', code: 'LA'},
+  {category: 'Órdenes', code: 'OR'},
+  {category: 'Plantillas', code: 'PL'},
+  {category: 'Referencias', code: 'RE'},
+  {category: 'Videos', code: 'VI'},
+]

sistema-mantenimiento-front/src/environments/environment.ts

@@ -0,0 +1,29 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+};
+
+export const apiUriQA = 'http://127.0.0.1:8000/api/';
+export const apiUriJean = 'http://192.168.1.4:8000/api';
+export const apiTemp = 'http://git.ittec.mx/sam/public/api/';
+
+//export const socket = 'http://git.ittec.mx/socket';
+export const socket = 'http://localhost:3200';
+//export const apiTemp = 'http://127.0.0.1:8000/api/';
+export const apiUriAlan = 'http://192.168.1.2:8000/api/';
+
+export const apiUriWorkflow = 'http://192.168.100.148:8004/api';
+export const public_key = 'WrBEGoJnMnMhC/2hiaYypcmPwP9Z4p4/bNex0T/WUWA=';
+export const secret_key = 'CEIBkv7QG1WoAoBO7Ny5cqzyJ5yCUwBMhnFYUBbCeTk=';
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

sistema-mantenimiento-front/src/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SistemaMantenimientoFront</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai-sublime.min.css" integrity="sha512-ade8vHOXH67Cm9z/U2vBpckPD1Enhdxl3N05ChXyFx5xikfqggrK4RrEele+VWY/iaZyfk7Bhk6CyZvlh7+5JQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js" integrity="sha512-yUUc0qWm2rhM7X0EFe82LNnv2moqArj5nro/w1bi05A09hRVeIZbN6jlMoyu0+4I/Bu4Ck/85JQIU82T82M28w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script>
+    hljs.configure({
+      languages: ['javascript', 'ruby', 'bash']
+    });
+  </script>
+
+  <!-- Math formulas support -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.6/katex.min.js" integrity="sha512-ZzM/Uqhj1eqNuEJogsoiJ502Z42nrIk1PS6NBSZswLpNSXyWyRBqxcM1S3Z5fP8ZmIXIpUFYWxgQHriLfGr1XQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.6/katex.min.css" integrity="sha512-kZNsJznccVXEWz7/xUNAv9kZb0rikSLqgv6s0KRa64HBdiTKODczgMh/a61gIFTsyEK7BlJeTdfptyeRucj0gA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

sistema-mantenimiento-front/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

sistema-mantenimiento-front/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

sistema-mantenimiento-front/src/styles.css

@@ -0,0 +1,1672 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import '../node_modules/quill/dist/quill.snow.css';
+
+/* Ocultar barra de Syncfusion */
+#js-licensing {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+html,
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* INPUTS */
+.input-filter {
+  font-size: 14px;
+  width: 90%;
+}
+
+.w-100 { width: 100% !important; }
+.w-95 { width: 95% !important; }
+.w-90 { width: 90% !important; }
+.w-85 { width: 85% !important; }
+.w-80 { width: 80% !important; }
+.w-75 { width: 75% !important; }
+.w-70 { width: 70% !important; }
+.w-65 { width: 65% !important; }
+.w-60 { width: 60% !important; }
+.w-55 { width: 55% !important; }
+.w-50 { width: 50% !important; }
+.w-45 { width: 45% !important; }
+.w-40 { width: 40% !important; }
+.w-35 { width: 35% !important; }
+.w-30 { width: 30% !important; }
+.w-25 { width: 25% !important; }
+.w-20 { width: 20% !important; }
+.w-15 { width: 15% !important; }
+.w-10 { width: 10% !important; }
+.w-5 { width: 5% !important; }
+
+.w-300p { width: 300px !important; }
+.w-250p { width: 250px !important; }
+.w-200p { width: 200px !important; }
+.w-150p { width: 150px !important; }
+.w-100p { width: 100px !important; }
+.w-50p { width: 50px !important; }
+
+
+.action-header {
+  display: inline-block;
+  width: 95%;
+  display: flex;
+  align-items: center;
+}
+
+/* TABLES */
+.table-screen {
+  width: 100%;
+}
+
+.nav-option{
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin-bottom: 15px;
+}
+
+.nav-action{
+  display: flex;
+  height: 56px;
+  align-items: center;
+}
+
+
+/* Material colors --> Usar los colores de esta paleta */
+/* ROJO */
+.red_primary_background {background-color: #F44336 !important;}
+.red_primary_font {color: #F44336 !important;}
+.red_light_background {background-color: #FF7961 !important;}
+.red_light_font {color: #FF7961 !important;}
+.red_dark_background {background-color: #BA000D !important;}
+.red_dark_font {color: #BA000D !important;}
+/* ROSA */
+.pink_primary_background {background-color: #E91E63 !important;}
+.pink_primary_font {color: #E91E63 !important;}
+.pink_light_background {background-color: #FF6090 !important;}
+.pink_light_font {color: #FF6090 !important;}
+.pink_dark_background {background-color: #B0003A !important;}
+.pink_dark_font {color: #B0003A !important;}
+/* MORADO */
+.purple_primary_background {background-color: #9C27B0 !important;}
+.purple_primary_font {color: #9C27B0 !important;}
+.purple_light_background {background-color: #D05CE3 !important;}
+.purple_light_font {color: #D05CE3 !important;}
+.purple_dark_background {background-color: #6A0080 !important;}
+.purple_dark_font {color: #6A0080 !important;}
+/* MORADO INTENSO */
+.deep_purple_primary_background {background-color: #673AB7 !important;}
+.deep_purple_primary_font {color: #673AB7 !important;}
+.deep_purple_light_background {background-color: #9A67EA !important;}
+.deep_purple_light_font {color: #9A67EA !important;}
+.deep_purple_dark_background {background-color: #320B86 !important;}
+.deep_purple_dark_font {color: #320B86 !important;}
+/* INDIGO */
+.indigo_primary_background {background-color: #3F51B5 !important;}
+.indigo_primary_font {color: #3F51B5 !important;}
+.indigo_light_background {background-color: #757DE8 !important;}
+.indigo_light_font {color: #757DE8 !important;}
+.indigo_dark_background {background-color: #002984 !important;}
+.indigo_dark_font {color: #002984 !important;}
+/* AZUL */
+.blue_primary_background {background-color: #2196F3 !important;}
+.blue_primary_font {color: #2196F3 !important;}
+.blue_light_background {background-color: #6EC6FF !important;}
+.blue_light_font {color: #6EC6FF !important;}
+.blue_dark_background {background-color: #0069C0 !important;}
+.blue_dark_font {color: #0069C0 !important;}
+/* AZUL CLARO */
+.light_blue_primary_background {background-color: #03A9F4 !important;}
+.light_blue_primary_font {color: #03A9F4 !important;}
+.light_blue_light_background {background-color: #67DAFF !important;}
+.light_blue_light_font {color: #67DAFF !important;}
+.light_blue_dark_background {background-color: #007AC1 !important;}
+.light_blue_dark_font {color: #007AC1 !important;}
+/* CYAN */
+.cyan_primary_background {background-color: #00BCD4 !important;}
+.cyan_primary_font {color: #00BCD4 !important;}
+.cyan_light_background {background-color: #62EFFF !important;}
+.cyan_light_font {color: #62EFFF !important;}
+.cyan_dark_background {background-color: #008BA3 !important;}
+.cyan_dark_font {color: #008BA3 !important;}
+/* TEAL */
+.teal_primary_background {background-color: #009688 !important;}
+.teal_primary_font {color: #009688 !important;}
+.teal_light_background {background-color: #52C7B8 !important;}
+.teal_light_font {color: #52C7B8 !important;}
+.teal_dark_background {background-color: #00675B !important;}
+.teal_dark_font {color: #00675B !important;}
+
+/* VERDE */
+.green_primary_background {background-color: #4CAF50 !important;}
+.green_primary_font {color: #4CAF50 !important;}
+.green_light_background {background-color: #80E27E !important;}
+.green_light_font {color: #80E27E !important;}
+.green_dark_background {background-color: #087F23 !important;}
+.green_dark_font {color: #087F23 !important;}
+/* VERDE CLARO */
+.light_green_primary_background {background-color: #8BC34A !important;}
+.light_green_primary_font {color: #8BC34A !important;}
+.light_green_light_background {background-color: #BEF67A !important;}
+.light_green_light_font {color: #BEF67A !important;}
+.light_green_dark_background {background-color: #5A9216 !important;}
+.light_green_dark_font {color: #5A9216 !important;}
+/* LIMA */
+.lime_primary_background {background-color: #CDDC39 !important;}
+.lime_primary_font {color: #CDDC39 !important;}
+.lime_light_background {background-color: #FFFF6E !important;}
+.lime_light_font {color: #FFFF6E !important;}
+.lime_dark_background {background-color: #99AA00 !important;}
+.lime_dark_font {color: #99AA00 !important;}
+/* AMARILLO */
+.yellow_primary_background {background-color: #FFEB3B !important;}
+.yellow_primary_font {color: #FFEB3B !important;}
+.yellow_light_background {background-color: #FFFF72 !important;}
+.yellow_light_font {color: #FFFF72 !important;}
+.yellow_dark_background {background-color: #C8B900 !important;}
+.yellow_dark_font {color: #C8B900 !important;}
+/* AMBAR */
+.amber_primary_background {background-color: #FFC107 !important;}
+.amber_primary_font {color: #FFC107 !important;}
+.amber_light_background {background-color: #FFF350 !important;}
+.amber_light_font {color: #FFF350 !important;}
+.amber_dark_background {background-color: #C79100 !important;}
+.amber_dark_font {color: #C79100 !important;}
+/* NARANJA */
+.orange_primary_background {background-color: #FF9800 !important;}
+.orange_primary_font {color: #FF9800 !important;}
+.orange_light_background {background-color: #FFC947 !important;}
+.orange_light_font {color: #FFC947 !important;}
+.orange_dark_background {background-color: #C66900 !important;}
+.orange_dark_font {color: #C66900 !important;}
+/* NARANJA INTENSO */
+.deep_orange_primary_background {background-color: #FF5722 !important;}
+.deep_orange_primary_font {color: #FF5722 !important;}
+.deep_orange_light_background {background-color: #FF8A50 !important;}
+.deep_orange_light_font {color: #FF8A50 !important;}
+.deep_orange_dark_background {background-color: #C41C00 !important;}
+.deep_orange_dark_font {color: #C41C00 !important;}
+/* CAFE */
+.brown_primary_background {background-color: #795548 !important;}
+.brown_primary_font {color: #795548 !important;}
+.brown_light_background {background-color: #A98274 !important;}
+.brown_light_font {color: #A98274 !important;}
+.brown_dark_background {background-color: #4B2C20 !important;}
+.brown_dark_font {color: #4B2C20 !important;}
+/* GRIS */
+.gray_primary_background {background-color: #9E9E9E !important;}
+.gray_primary_font {color: #9E9E9E !important;}
+.gray_light_background {background-color: #CFCFCF !important;}
+.gray_light_font {color: #CFCFCF !important;}
+.gray_dark_background {background-color: #707070 !important;}
+.gray_dark_font {color: #707070 !important;}
+/* GRIS AZUL */
+.blue_gray_primary_background {background-color: #607D8B !important;}
+.blue_gray_primary_font {color: #607D8B !important;}
+.blue_gray_light_background {background-color: #8EACBB !important;}
+.blue_gray_light_font {color: #8EACBB !important;}
+.blue_gray_dark_background {background-color: #34515E !important;}
+.blue_gray_dark_font {color: #34515E !important;}
+/* BLANCO */
+.white_background {background-color: white !important;}
+.white_font {color: white !important;}
+
+
+.mat-success { color: #FFFFFF !important; background-color: #00897b !important; }
+.mat-info { color: #FFFFFF !important; background-color: #00acc1 !important; }
+.mat-danger { color: #FFFFFF !important; background-color: #ffca2c !important; }
+.mat-warm { color: #FFFFFF !important; background-color: #f44336 !important; }
+.mat-rose { color: #FFFFFF !important; background-color: #E95EA2 !important; }
+/* .info { background-color: #0288d1 !important; color: white; } */
+/* .info:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */
+/* .secondary { background-color: #071d49 !important; color: white; } */
+/* .secondary:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */
+/* .success { background-color: #1faf71 !important; color: white !important; } */
+/* .success:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */
+
+.mat-success[disabled],
+.success[disabled],
+.mat-info[disabled],
+.info[disabled],
+.mat-danger[disabled],
+.pink_primary_background[disabled],
+.deep_purple_primary_background[disabled],
+.amber_dark_background[disabled],
+.blue_dark_background[disabled],
+.deep_purple_primary_background[disabled],
+.mat-rose[disabled],
+.cyan_dark_background[disabled],
+.teal_primary_background[disabled]
+{
+  background-color: #0000001f !important;
+  color: rgba(0, 0, 0, 0.38) !important;
+  box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f !important;
+}
+
+/* MÁRGENES */
+/* IZQUIERDA */
+.ml-a {margin-left: auto !important;}
+.ml-2 {margin-left: 2px !important;}
+.ml-4 {margin-left: 4px !important;}
+.ml-5 {margin-left: 5px !important;}
+.ml-8 {margin-left: 8px !important;}
+.ml-10 {margin-left: 10px !important;}
+.ml-16 {margin-left: 16px !important;}
+.ml-20 {margin-left: 20px !important;}
+.ml-30 {margin-left: 30px !important;}
+.ml-32 {margin-left: 32px !important;}
+.ml-40 {margin-left: 40px !important;}
+.ml-50 {margin-left: 50px !important;}
+.ml-60 {margin-left: 60px !important;}
+.ml-64 {margin-left: 64px !important;}
+.ml-70 {margin-left: 70px !important;}
+
+/* DERECHA */
+.mr-a {margin-right: auto !important;}
+.mr-2 {margin-right: 2px !important;}
+.mr-4 {margin-right: 4px !important;}
+.mr-8 {margin-right: 8px !important;}
+.mr-10 {margin-right: 10px !important;}
+.mr-16 {margin-right: 16px !important;}
+.mr-20 {margin-right: 20px !important;}
+.mr-30 {margin-right: 30px !important;}
+.mr-32 {margin-right: 32px !important;}
+.mr-40 {margin-right: 40px !important;}
+.mr-50 {margin-right: 50px !important;}
+.mr-60 {margin-right: 60px !important;}
+.mr-64 {margin-right: 64px !important;}
+.mr-70 {margin-right: 70px !important;}
+
+/* ARRIBA */
+.mt-a {margin-top: auto !important;}
+.mt-2 {margin-top: 2px !important;}
+.mt-4 {margin-top: 4px !important;}
+.mt-5 {margin-top: 5px !important;}
+.mt-8 {margin-top: 8px !important;}
+.mt-14 {margin-top: 14px !important;}
+.mt-15 {margin-top: 15px !important;}
+.mt-16 {margin-top: 16px !important;}
+.mt-20 {margin-top: 20px !important;}
+.mt-32 {margin-top: 32px !important;}
+.mt-50 {margin-top: 50px !important;}
+.mt-64 {margin-top: 64px !important;}
+
+/* ABAJO */
+.mb-2 {margin-bottom: 2px !important;}
+.mb-4 {margin-bottom: 4px !important;}
+.mb-8 {margin-bottom: 8px !important;}
+.mb-10 {margin-bottom: 10px !important;}
+.mb-15 {margin-bottom: 15px !important;}
+.mb-16 {margin-bottom: 16px !important;}
+.mb-17 {margin-bottom: 17px !important;}
+.mb-18 {margin-bottom: 18px !important;}
+.mb-19 {margin-bottom: 19px !important;}
+.mb-20 {margin-bottom: 20px !important;}
+.mb-30 {margin-bottom: 30px !important;}
+.mb-32 {margin-bottom: 32px !important;}
+.mb-40 {margin-bottom: 40px !important;}
+.mb-50 {margin-bottom: 50px !important;}
+.mb-60 {margin-bottom: 60px !important;}
+.mb-64 {margin-bottom: 64px !important;}
+.mb-70 {margin-bottom: 70px !important;}
+.mb-80 {margin-bottom: 80px !important;}
+.mb-90 {margin-bottom: 90px !important;}
+
+/* VERTICAL */
+.mv-2 {margin: 0 2px !important;}
+.mv-4 {margin: 0 4px !important;}
+.mv-8 {margin: 0 8px !important;}
+.mv-16 {margin: 0 16px !important;}
+.mv-32 {margin: 0 32px !important;}
+.mv-64 { margin: 0 64px !important;}
+
+/* HORIZONTAL */
+.mh-2 {margin: 2px 0 !important;}
+.mh-4 {margin: 4px 0 !important;}
+.mh-8 {margin: 8px 0 !important;}
+.mh-16 {margin: 16px 0 !important;}
+.mh-32 {margin: 32px 0 !important;}
+.mh-64 {margin: 64px 0 !important;}
+
+/* TODO */
+.m-0 { margin: 0 !important; }
+.m-2 {margin: 2px !important;}
+.m-4 {margin: 4px !important;}
+.m-8 {margin: 8px !important;}
+.m-16 {margin: 16px !important;}
+.m-32 {margin: 32px !important;}
+.m-64 {margin: 64px !important;}
+
+/* PADDINGS */
+/* IZQUIERDA */
+.pl-2 {padding-left: 2px !important;}
+.pl-4 {padding-left: 4px !important;}
+.pl-8 {padding-left: 8px !important;}
+.pl-16 {padding-left: 16px !important;}
+.pl-32 {padding-left: 32px !important;}
+.pl-64 {padding-left: 64px !important;}
+
+/* DERECHA */
+.pr-2 {padding-right: 2px !important;}
+.pr-4 {padding-right: 4px !important;}
+.pr-8 {padding-right: 8px !important;}
+.pr-16 {padding-right: 16px !important;}
+.pr-32 {padding-right: 32px !important;}
+.pr-64 {padding-right: 64px !important;}
+
+/* ARRIBA */
+.pt-2 {padding-top: 2px !important;}
+.pt-4 {padding-top: 4px !important;}
+.pt-8 {padding-top: 8px !important;}
+.pt-16 {padding-top: 16px !important;}
+.pt-32 {padding-top: 32px !important;}
+.pt-64 {padding-top: 64px !important;}
+
+/* ABAJO */
+.pb-2 {padding-bottom: 2px !important;}
+.pb-4 {padding-bottom: 4px !important;}
+.pb-8 {padding-bottom: 8px !important;}
+.pb-10 {padding-bottom: 10px !important;}
+.pb-16 {padding-bottom: 16px !important;}
+.pb-17 {padding-bottom: 17px !important;}
+.pb-18 {padding-bottom: 18px !important;}
+.pb-32 {padding-bottom: 32px !important;}
+.pb-64 {padding-bottom: 64px !important;}
+
+/* VERTICAL */
+.pv-2 {padding: 2px 0 !important;}
+.pv-4 {padding: 4px 0 !important;}
+.pv-8 {padding: 8px 0 !important;}
+.pv-16 {padding: 16px 0 !important;}
+.pv-32 {padding: 32px 0 !important;}
+.pv-64 {padding: 64px 0 !important;}
+
+/* HORIZONTAL */
+.ph-2 {padding: 0 2px !important;}
+.ph-4 {padding: 0 4px !important;}
+.ph-8 {padding: 0 8px !important;}
+.ph-16 {padding: 0 16px !important;}
+.ph-32 {padding: 0 32px !important;}
+.ph-64 {padding: 0 64px !important;}
+
+/* TODO */
+.p-0 {padding: 0 !important;}
+.p-2 {padding: 2px !important;}
+.p-4 {padding: 4px !important;}
+.p-8 {padding: 8px !important;}
+.p-16 {padding: 16px !important;}
+.p-20 {padding: 20px !important;}
+.p-32 {padding: 32px !important;}
+.p-40 {padding: 40px !important;}
+.p-64 {padding: 64px !important;}
+.p-80 {padding: 80px !important;}
+.p-90 {padding: 90px !important;}
+
+/* FONT SIZE*/
+.fz-12 {font-size: 12pt;}
+.fz-24 {font-size: 24pt;}
+
+.just-txt{text-align: justify; text-justify: inter-word;}
+
+/* Navigation-element */
+#navigation {
+  display: flex;
+  flex-direction: row;
+}
+
+.prev-page {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  align-items: center;
+  transition: all 0.25s ease;
+  height: 40px;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-radius: 32px;
+}
+
+.prev-page .page-name {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 36px;
+  color: white;
+}
+
+/* Alertas */
+.alerts {
+  text-align: center;
+  padding: 80px;
+}
+
+.is-loading {
+  text-align: center;
+  padding: 100px;
+}
+
+.is-loading mat-spinner {
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 20px;
+}
+
+.green_primary_font[disabled] {
+  /* color: #00000042 !important; */
+  color: #36363680 !important;
+}
+
+/* Estilo de tablas Dinámicas*/
+table { width: 100%; }
+
+tr.mat-header-row { height: 56px; }
+tr.mat-row, tr.mat-footer-row { height: 48px; }
+/* mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell { border-bottom-color: #0000001f; } */
+/* th.mat-header-cell, td.mat-cell, td.mat-footer-cell { padding: 0; border-bottom-width: 1px; border-bottom-style: solid; } */
+
+.btn-reload {
+  margin-bottom: 22px;
+  box-shadow: none !important;
+}
+
+.mat-card-title {
+  padding: 15px 0;
+  display: block !important;
+}
+all {
+  background-color: #002984;
+}
+/* Cards */
+.card-size-normal {
+  width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #FFFFFF !important;
+  height: calc(100% - 77px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+}
+
+
+
+.btn-navigate {
+  width: 75%;
+  margin-top: 14px !important;
+  margin-bottom: 8px !important;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn-navigate-90 {
+  width: 90%;
+  margin-top: 14px !important;
+  margin-bottom: 8px !important;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btnRegresar {
+  float: left !important;
+  margin: 9px !important;
+  box-shadow: none !important;
+}
+
+.actions-container {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+/* RECARGAR */
+.action-reload {
+  display: inline-block;
+  width: 90px;
+}
+
+.action-filter {
+  display: inline-block;
+  width: calc(80% - 90px);
+}
+
+.action-register {
+  display: inline-block;
+  width: 20%
+}
+
+.btn-new-register {
+  height: 56px !important;
+  margin-bottom: 22px;
+  font-size: 12pt;
+  box-shadow: none !important;
+}
+
+.action-register .btn-new-register {
+  width: 90%;
+}
+
+.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
+  color: #FFFFFF !important;
+}
+
+
+.action-filter mat-form-field {
+  width: 100%;
+}
+
+.action-filter-all {
+  display: inline-block;
+  width: 80%;
+}
+
+.action-filter-all mat-form-field {
+  width: 98%;
+}
+
+.itemInput {
+  width: 100% !important;
+}
+
+.inputFile {
+  width: 100% !important;
+  padding-bottom: 1.34375em;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px dashed #fdfdfd;
+  text-align: center;
+  background-color: #3f51b5;
+  cursor: pointer;
+  flex-direction: row;
+  display: inline-flex;
+  color: #FFFFFF;
+  justify-content: center;
+  align-items: center;
+}
+
+.mat-mdc-checkbox-disabled label {
+  color: #000000 !important;
+}
+
+.mdc-text-field--disabled .mdc-floating-label{
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.mdc-text-field--disabled .mdc-text-field__input{
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.title-card {
+  text-align: center;
+  font-weight: 500;
+}
+
+/* Formularios */
+.mat-grid-tile-content {
+  padding: 3px !important;
+}
+
+/* Animaciones */
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fast {
+  -webkit-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.icon-error {
+  color: #e53935;
+  transform: scale(5);
+  margin-bottom: 48px;
+  margin-top: 64px;
+}
+
+.table-header {
+  background-color: #eee;
+  padding: 8px 16px;
+  border-radius: 8px 8px 0 0;
+  border-color: #ccc;
+  border-width: 1px;
+  border-style: solid;
+  display: flex;
+  flex-direction: row;
+}
+
+.table-row-white {
+  padding: 8px 16px;
+  border-color: #ccc;
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  display: flex;
+  flex-direction: row;
+}
+
+.table-row-gray {
+  padding: 8px 16px;
+  border-color: #ccc;
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  display: flex;
+  flex-direction: row;
+  background-color: #eee;
+}
+
+.table-cell-header {
+  width: 100%;
+  font-weight: bold;
+}
+
+.table-cell {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.table-container {
+  width: 100%;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.loader-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-label {
+  margin-top: 16px;
+  animation-name: label-fade;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+.prevent-select {
+  user-select: none;
+}
+
+@keyframes label-fade {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.error-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.mat-chip-list-wrapper {
+  display: inline !important;
+}
+
+.mat-drawer-content {
+  position: static !important;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.centre {
+  text-align: center !important;
+}
+
+.mat-tool-bar {
+  background-color: #7c8cf4;
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+}
+
+.menu-align {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  padding: 10px 10px 30px 10px;
+}
+
+.headers-align .mat-expansion-panel-header-title,
+.headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headers-align .mat-form-field+.mat-form-field {
+  margin-left: 8px;
+}
+
+.module-options-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.module-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mat-input-element:disabled,
+.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
+  color: rgb(71, 71, 71) !important;
+}
+
+/*Scrollbar firefox*/
+* {
+  scrollbar-width: thin;
+}
+
+/*Scrollbar webwit*/
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #CCC;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #AAA;
+}
+
+.mat-horizontal-content-container {
+  padding: 0 24px 8px 24px !important;
+
+}
+
+
+/* Estilos del contenedor de submódulos */
+.menu-container {
+  width: calc(100% - 64px);
+  height: 100%;
+  margin: 0 auto;
+}
+
+.menu-card {
+  display: flex;
+  width: 100%;
+  height: calc(100% - 68px - 35px);
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  /* position: absolute; */
+  overflow: auto;
+  /* margin-bottom: 80px; */
+}
+
+.menu-card-item {
+  margin: 5px 30px;
+  width: 300px;
+  height: 213px;
+  border: 1px solid #CCC !important;
+  border-radius: 15px !important;
+  margin-bottom: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: box-shadow .3s;
+  box-shadow: none !important;
+}
+
+.menu-card-item:hover {
+  cursor: pointer;
+  border: 0px solid #FFF !important;
+  box-shadow: 0px 2px 20px rgb(33 33 33 / 20%) !important;
+}
+
+
+.menu-card-item img{
+  height: 145px;
+  width: auto;
+  max-width: 150px;
+  padding-bottom: 15px;
+}
+
+.menu-card-item mat-icon{
+  transform: scale(2.5);
+  color: #888;
+}
+
+.menu-title {
+  width: 100%;
+  padding-bottom: 15px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  /* position: absolute; */
+}
+
+.menu-title span {
+  font-weight: 500;
+  font-size: 25pt;
+}
+
+.menu-items {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+  padding: 12px 0;
+  box-sizing: border-box;
+  justify-content: space-evenly;
+}
+
+.menu-item-border {
+  width: 212px;
+  height: 212px;
+  background: rgb(255, 193, 227);
+  background: linear-gradient(90deg, rgba(255, 193, 227, 1) 0%, rgba(255, 119, 169, 1) 100%);
+  border-radius: 106px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(255, 119, 169, 0.5);
+  box-sizing: border-box;
+  position: relative;
+  margin: 8px;
+  box-shadow: 1.2px 2.4px 2.4px hsl(0deg 0% 0% / 0.46);
+  transition: all 0.4s;
+}
+
+.menu-item-border:hover {
+  box-shadow: 5.3px 10.6px 10.6px hsl(0deg 0% 0% / 0.34);
+  cursor: pointer;
+}
+
+.menu-item {
+  width: 188px;
+  height: 188px;
+  background-color: #ec407a;
+  border-radius: 100px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-direction: column;
+  padding: 32px;
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(255, 119, 169, 0.5);
+}
+
+.menu-item mat-icon {
+  transform: scale(4);
+  margin-bottom: 36px;
+  margin-top: 16px;
+}
+
+.menu-item p {
+  font-size: 18px;
+  text-align: center;
+}
+
+/* Estilos para la etiqueta card*/
+.card-normal {
+  width: 1300px;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card-small {
+  width: 1000px;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fast {
+  -webkit-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+/* Estilos para alinear*/
+
+.menu-align {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  padding: 10px 10px 30px 10px;
+}
+
+/* Estilo para los botones de "Registrar y Cancelar"*/
+.divBotones {
+  margin: 5px;
+}
+
+.clickable {
+  cursor: pointer !important;
+}
+.botonRC {
+  margin: 25px !important;
+}
+
+/* Disabled */
+.mat-input-element:disabled,
+.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
+  color: rgb(71, 71, 71) !important;
+}
+
+footer {
+  width: 100%;
+  z-index: 10;
+  text-align: center;
+  color: black;
+  position: fixed;
+  bottom: 0;
+  box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2);
+}
+
+/*.mat-tool-bar {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+}*/
+
+/* Toolbar */
+mat-toolbar-row,
+.mat-toolbar-single-row {
+  height: 100% !important;
+}
+
+.mat-toolbar-multiple-rows {
+  min-height: 64px;
+}
+
+/* Dialogos en general */
+.dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-icon mat-icon {
+  transform: scale(4);
+  margin-top: 28px;
+  margin-bottom: 32px;
+  color: #ffc107;
+}
+
+.dialog-desc {
+  text-align: center;
+  font-size: 16px;
+}
+
+.dialog-desc-2 {
+  text-align: center;
+  margin-top: 4px;
+  font-size: 14px;
+}
+
+/* Workflow */
+
+.searcher {
+  width: 90% !important;
+  font-size: 16px !important;
+}
+
+.data-empty {
+  position: relative;
+  background-color: #ddc8a2;
+  color: white;
+  font-size: 16pt;
+  text-align: center;
+  padding: 20px;
+  margin: 5px;
+}
+
+
+
+.btnMarginRight {
+  margin-right: 10px !important;
+}
+
+.vertical-flex-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.vertical-flex-container-item {
+  width: calc(50% - 16px);
+  background-color: white;
+  border-radius: 6px;
+  /*box-shadow: 1px 1px 16px -4px rgba(0, 0, 0, 0.75);*/
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.vertical-flex-container-item h2 {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 8px;
+}
+
+.users-container {
+  flex-grow: 1;
+}
+
+.user-info {
+  padding: 8px 8px 0 8px;
+  transition: all 0.25s ease;
+}
+
+.user-info h3 {
+  margin: 0;
+}
+
+.user-info p {
+  margin: 0;
+  margin-left: 18px;
+  margin-bottom: 8px;
+}
+
+.user-info:hover {
+  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.route-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+
+.back-element {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.back-element p,
+.actual-element p {
+  margin: 0;
+  font-size: 18px;
+}
+
+.back-element .icon,
+.actual-element .icon {
+  transform: scale(0.8);
+}
+
+.back-element .arrow {
+  margin: 0 4px;
+}
+
+.back-element:hover {
+  opacity: 0.85;
+}
+
+.actual-element {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: default;
+  box-sizing: border-box;
+}
+
+.table-content-container {
+  height: calc(100vh - 376px);
+  overflow-y: auto;
+}
+
+.table-content-container-with-actions {
+  height: calc(100vh - 372px - 56px);
+  overflow-y: auto;
+}
+
+.toolbar {
+  height: 64px;
+  background-color: #424242;
+  z-index: 1000;
+  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
+  position: relative;
+  /*padding: 8px;*/
+  /*overflow: hidden;*/
+}
+
+.mat-toolbar-row, .mat-toolbar-single-row{
+  align-items: flex-start !important;
+}
+
+/*Estilos para la ruta de navegación*/
+.items-container {
+  width: 75%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  box-sizing: border-box;
+}
+
+.items-container-full-width{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.route {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 18px;
+}
+
+.back {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+
+.back:hover {
+  color: #555;
+}
+
+.actual {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #333;
+}
+
+/* .mat-card-content-fill { */
+/* height: calc(100% - 76px); */
+
+.mat-card-content-fill {
+  height: calc(100% - 76px) !important;
+  overflow-y: auto;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.override-elevation-z8{
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
+}
+
+.mat-card-content-form{
+  height: calc(100vh - 280px) !important;
+}
+.main-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position:relative;
+}
+
+.override-card {
+  width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #FFFFFF !important;
+  height: calc(100% - 77px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.override-card-form{
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 15px;
+  background-color: #FFFFFF !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  /* transition: width 2s; */
+  margin-bottom: 20px;
+  padding: 0 !important;
+}
+
+.no-shadow { box-shadow: none !important; }
+.override-no-shadow{ box-shadow: none !important; }
+
+@media all and (max-width: 720px) {
+  .override-card {
+    width: 100%;
+    height: calc(100% - 62px);
+    box-shadow: none !important;
+    background-color: transparent !important;
+  }
+
+  .override-card-form{
+    width: 100%;
+    height: calc(100% - 62px);
+    box-shadow: none !important;
+    background-color: transparent !important;
+  }
+
+  .main-container{
+    background-color: #FFFFFF !important;
+  }
+  .btn-navigate{
+    margin-left: 10px;
+    /* position: absolute; */
+  }
+  .override-no-shadow{
+    box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%) !important;
+  }
+  @media all and (max-width: 442px) {
+    .override-card { height: calc(100% - 80px); }
+  }
+
+
+}
+
+.override-section{
+  width: 100%;
+  height: calc(100% - 75px);
+}
+.override-table{
+  width: 100%;
+  height: calc(100% - 77px - 44px);
+  overflow: auto;
+}
+
+.override-actions{
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.override-actions-right{
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 0 1.5%;
+}
+
+.override-buttons{
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.override-form{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.override-stepper-form{
+  width: 100%;
+}
+
+.override-content-dynamic{
+  padding: 0 24px 10px 24px !important;
+}
+
+.ql-container.ql-snow{
+  border: none !important;
+}
+
+.ql-toolbar.ql-snow{
+  border: none !important;
+  border-bottom: 1px solid #ccc !important;
+}
+.override-paginator{
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  z-index: 1;
+}
+
+.shine{
+  width: 100%;
+  height: 100%;
+  background: #f6f7f8;
+  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+  background-repeat: no-repeat;
+  display: inline-block;
+  position: relative;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+}
+
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -720px 0;
+  }
+
+  100% {
+    background-position: 720px 0;
+  }
+}
+.input-file{
+  width: 100% !important;
+  padding-bottom: 1.34375em;
+  padding: 15px;
+  border-radius: 4px;
+  border: 1px dashed #fdfdfd;
+  text-align: center;
+  background-color: #3f51b5;
+  cursor: pointer;
+  flex-direction: row;
+  display: inline-flex;
+  color: #FFFFFF;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 22px;
+}
+
+.hint-button{
+  font-weight: bold;
+  cursor: pointer;
+  color: #3F51B5;
+  transition: all 0.25s ease;
+}
+
+.hint-button:hover{
+  color: #757DE8;
+
+}
+
+.mat-sort-header-content{
+  text-align: left !important;
+}
+
+.flex-expanded-width{
+  flex-grow: 100;
+}
+
+/*Estilos para vista de calendario*/
+.main_calendar_view_flex{
+  display: flex;
+  flex-direction: row;
+}
+
+.main_calendar_view_relative{
+  position: relative;
+}
+
+.main_calendar_view{
+  width: 100%;
+  height: calc(100vh - 64px - 48px);
+}
+
+.calendar_panel_left_floating{
+  position: absolute;
+  z-index: 9999;
+  box-shadow: 5px 0px 5px -3px rgba(0, 0, 0, 0.2), 8px 0px 10px 1px rgba(0, 0, 0, 0.14), 3px 0px 14px 2px rgba(0, 0, 0, 0.12) !important;
+}
+
+.calendar_panel_left_flex{
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar_panel_left{
+  height: 100%;
+  width: 320px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.date-picker-calendar{
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.registered-jobs{
+  padding: 0 16px;
+}
+
+.main_calendar_container{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main_calendar_container_flex{
+  width: calc(100% - 320px);
+}
+
+.main_calendar_container_relative{
+  width: 100%;
+}
+
+.calendar_header{
+  background-color: white;
+  padding: 16px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.expanded-row{
+  flex-grow: 100;
+}
+
+.calendar_title{
+  margin: 0 !important;
+  font-size: 24px;
+}
+
+.calendar_days{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.calendar_days:hover{
+  background-color: rgba(0, 0, 0, 0.015);
+}
+
+.calendar_day{
+  width: calc(100% / 7);
+  text-align: center;
+  padding: 16px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.calendar_day:hover{
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.calendar_cell_border_right{
+  border-right-color: rgba(0, 0, 0, 0.12);
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+.calendar_cell_border_bottom{
+  border-bottom-color: rgba(0, 0, 0, 0.12);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.month_days_table{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.month_days_row{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.month_days_row:hover{
+  background-color: rgba(0, 0, 0, 0.015);
+}
+
+.month_days_cell{
+  padding: 16px;
+  width: calc(100% / 7);
+  height: 128px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+
+.month_days_cell:hover{
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.month_day_label{
+  height: 75%;
+}
+
+.month_day{
+  font-weight: 500;
+  font-size: 18px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.actual_day{
+  color: white;
+  font-weight: bold;
+  background-color: #3F51B5;
+  border-radius: 16px;
+}
+
+.animate_close{
+  animation: close-animation 0.5s forwards;
+}
+
+@keyframes close-animation{
+  from { transform: translate(0); }
+  to { transform: translate(-320px); }
+}
+
+.animate_open{
+  animation: open-animation 0.5s forwards;
+}
+
+@keyframes open-animation{
+  from { transform: translate(-320px); }
+  to { transform: translate(0); }
+}

sistema-mantenimiento-front/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);