diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..d746fb8be 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
+@import './width.scss';
 
 a {
     text-decoration: none;
@@ -14,6 +15,17 @@ a {
     color: $orange-4;
 }
 
+.q-card {
+    width: 100%;
+    max-width: $width-md;
+}
+
+@media screen and (max-width: $width-md) {
+    .q-form > div {
+        flex-direction: column; // Cambia la dirección cuando pase de cierto tamaño
+    }
+}
+
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
diff --git a/src/css/variables.scss b/src/css/variables.scss
new file mode 100644
index 000000000..0a74c8277
--- /dev/null
+++ b/src/css/variables.scss
@@ -0,0 +1,136 @@
+$font-size: 11pt;
+$menu-width: 256px;
+$topbar-height: 56px;
+$mobile-width: 800px;
+$float-spacing: 20px;
+
+// Width
+
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
+
+// Spacing
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 32px;
+$spacing-xl: 70px;
+
+// Light theme
+
+/* $color-primary: #f7931e;
+$color-secondary: $color-primary;
+
+$color-font: #222;
+$color-font-light: #555;
+$color-font-secondary: #9b9b9b;
+$color-font-dark: white;
+$color-font-link: #005a9a;
+$color-font-bg: rgba(0, 0, 0, .7);
+$color-font-bg-marginal: rgba(0, 0, 0, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #e5e5e5;
+$color-bg-dark: #3d3d3d;
+$color-active: #3d3d3d;
+$color-active-font: $color-font-dark;
+$color-bg-panel: white;
+$color-main: $color-primary;
+$color-marginal: #ccc;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #f42121;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(0, 0, 0, .3);
+$color-spacer-light: rgba(0, 0, 0, .12);
+$color-input-underline: rgba(0, 0, 0, .12);
+$color-input-underline-hover: rgba(0, 0, 0, .6);
+$color-shadow: rgba(0, 0, 0, .2);
+$color-hightlight: rgba(0, 0, 0, .05);
+$color-hover-cd: rgba(0, 0, 0, .1);
+$color-hover-dc: .7;
+$color-disabled: .6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%); */
+/**/
+
+// Dark theme
+$color-primary: #ec8916;
+$color-secondary: $color-primary;
+
+$color-font: #eee;
+$color-font-light: #aaa;
+$color-font-secondary: #777;
+$color-font-dark: white;
+$color-font-link: #66bfff;
+$color-font-bg: rgba(0, 0, 0, .8);
+$color-font-bg-marginal: rgba(255, 255, 255, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #222;
+$color-bg-dark: #222;
+$color-active: #666;
+$color-active-font: white;
+$color-bg-panel: #3c3b3b;
+$color-main: $color-primary;
+$color-marginal: #222;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #fa3939;
+$color-pink: #ff99cc;
+$color-yellow: #ffff00;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(255, 255, 255, .3);
+$color-spacer-light: rgba(255, 255, 255, .12);
+$color-input-underline: rgba(255, 255, 255, .12);
+$color-input-underline-hover: rgba(255, 255, 255, .6);
+$color-shadow: rgba(0, 0, 0, .2);
+$color-border: rgba(0, 0, 0, .3);
+$color-hightlight: rgba(255, 255, 255, .15);
+$color-hover-cd: rgba(255, 255, 255, .1);
+$color-hover-dc: .7;
+$color-disabled: .6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%);
+/**/
+
+// Border
+
+$border-thin: 1px solid $color-border;
+$border-thin-light: 1px solid $color-spacer-light;
+$border: 2px solid $color-border;
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
diff --git a/src/css/width.scss b/src/css/width.scss
new file mode 100644
index 000000000..e017de3ea
--- /dev/null
+++ b/src/css/width.scss
@@ -0,0 +1,26 @@
+@import "./variables";
+
+%margin-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+.vn-w-xs {
+    @extend %margin-auto;
+    max-width: $width-xs;
+}
+.vn-w-sm {
+    @extend %margin-auto;
+    max-width: $width-sm;
+}
+.vn-w-md {
+    @extend %margin-auto;
+    max-width: $width-md;
+}
+.vn-w-lg {
+    @extend %margin-auto;
+    max-width: $width-lg;
+}
+.vn-w-xl {
+    @extend %margin-auto;
+    max-width: $width-xl;
+}
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index ddf669dd0..3dc5b0a59 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -218,10 +218,3 @@ const statesFilter = {
         </QCard>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.q-card {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index ffd3c3476..889dc2376 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -171,8 +171,4 @@ const filterOptions = {
     </div>
 </template>
 
-<style lang="scss" scoped>
-.q-card {
-    width: 800px;
-}
-</style>
+<style lang="scss" scoped></style>