@khipu/design-system 0.1.0-alpha.30 → 0.1.0-alpha.31

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-03-27T13:16:02.917Z
+ * Generated: 2026-04-01T17:47:56.079Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -138,6 +138,20 @@
   --kds-typography-button-line-height: 26px;
   --kds-typography-button-letter-spacing: 0.46px;
 
+  /* Typography margins */
+  --kds-typography-h1-margin-block-start: 0;
+  --kds-typography-h1-margin-block-end: 0;
+  --kds-typography-h2-margin-block-start: 0;
+  --kds-typography-h2-margin-block-end: 0;
+  --kds-typography-h3-margin-block-start: 0;
+  --kds-typography-h3-margin-block-end: 0;
+  --kds-typography-h4-margin-block-start: 0;
+  --kds-typography-h4-margin-block-end: 0;
+  --kds-typography-h5-margin-block-start: 0;
+  --kds-typography-h5-margin-block-end: 0;
+  --kds-typography-h6-margin-block-start: 0;
+  --kds-typography-h6-margin-block-end: 0;
+
   /* ==========================================================================
      SPACING TOKENS
      ========================================================================== */
@@ -175,6 +189,7 @@
   --kds-spacing-sidebar-nav-item-gap: 12px;
   --kds-spacing-sidebar-submenu-indent: 64px;
   --kds-spacing-sidebar-icon-size: 24px;
+  --kds-spacing-sidebar-icon-size-md: 32px;
   --kds-spacing-sidebar-icon-container-size: 40px;
   --kds-spacing-sidebar-label-padding-x: 24px;
   --kds-spacing-sidebar-label-padding-y: 8px;
@@ -225,6 +240,7 @@
   --kds-shadow-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
   --kds-shadow-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
   --kds-shadow-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
+  --kds-shadow-6: 0px 3px 4px -2px rgba(0,0,0,0.2), 0px 6px 7px 0px rgba(0,0,0,0.14), 0px 2px 12px 1px rgba(0,0,0,0.12);
   --kds-shadow-8: 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);
   --kds-shadow-16: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
   --kds-shadow-24: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
@@ -374,6 +390,42 @@
   }
 }
 
+/* ============================================================================
+   BASE TYPOGRAPHY STYLES
+   Reset default browser margins using design tokens
+   Higher specificity to override BeerCSS framework
+   ============================================================================ */
+
+:where(h1) {
+  margin-block-start: var(--kds-typography-h1-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h1-margin-block-end) !important;
+}
+
+:where(h2) {
+  margin-block-start: var(--kds-typography-h2-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h2-margin-block-end) !important;
+}
+
+:where(h3) {
+  margin-block-start: var(--kds-typography-h3-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h3-margin-block-end) !important;
+}
+
+:where(h4) {
+  margin-block-start: var(--kds-typography-h4-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h4-margin-block-end) !important;
+}
+
+:where(h5) {
+  margin-block-start: var(--kds-typography-h5-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h5-margin-block-end) !important;
+}
+
+:where(h6) {
+  margin-block-start: var(--kds-typography-h6-margin-block-start) !important;
+  margin-block-end: var(--kds-typography-h6-margin-block-end) !important;
+}
+
 
 
 /* Khipu BeerCSS Variable Mappings */
@@ -462,8 +514,8 @@ body.dark {
 
     /* Modal Base */
     --kds-modal-bg: var(--kds-color-background-paper);
-    --kds-modal-padding: var(--kds-spacing-6);
-    --kds-modal-padding-mobile: var(--kds-spacing-4);
+    --kds-modal-padding: var(--kds-spacing-4);
+    --kds-modal-padding-mobile: var(--kds-spacing-2);
     --kds-modal-border-radius: var(--kds-radius-lg);
     --kds-modal-shadow: var(--kds-shadow-4);
     --kds-modal-backdrop: rgba(0, 0, 0, 0.5);
@@ -504,6 +556,22 @@ body.dark {
     --kds-onboarding-max-width: 800px;
     --kds-onboarding-padding: var(--kds-spacing-6);
     --kds-onboarding-gap: var(--kds-spacing-6);
+
+    /* Button Size Variants */
+    --kds-button-sm-min-height: 36px;
+    --kds-button-sm-padding-y: 6px;
+    --kds-button-sm-padding-x: 16px;
+    --kds-button-sm-padding: 6px 16px;
+
+    --kds-button-md-min-height: 42px;
+    --kds-button-md-padding-y: 8px;
+    --kds-button-md-padding-x: 20px;
+    --kds-button-md-padding: 8px 20px;
+
+    /* Scroll Container Utilities */
+    --kds-scroll-sm-height: 280px;
+    --kds-scroll-md-height: 420px;
+    --kds-scroll-lg-height: 600px;
 }
 
 /* ========================================
@@ -561,6 +629,32 @@ footer {
     background-color: transparent !important;
 }
 
+/* ========================================
+   TEXT UTILITIES OVERRIDE
+   Fix BeerCSS classes that use wrong color tokens
+   ======================================== */
+
+/* BeerCSS confuses theme colors (primary/secondary/tertiary) with text colors.
+   We must use !important to override BeerCSS's !important declarations */
+
+/* Primary text - should be almost black, not purple */
+body .primary-text,
+.primary-text.primary-text {
+    color: var(--kds-color-text-primary) !important;
+}
+
+/* Secondary text - should be gray, not green */
+body .secondary-text,
+.secondary-text.secondary-text {
+    color: var(--kds-color-text-secondary) !important;
+}
+
+/* Tertiary text - should be disabled/hint color, not tertiary theme color */
+body .tertiary-text,
+.tertiary-text.tertiary-text {
+    color: var(--kds-color-text-disabled) !important;
+}
+
 /* ========================================
    KHIPU BUTTON SYSTEM
    Custom button components - don't modify BeerCSS classes
@@ -720,7 +814,7 @@ a.kds-btn-text {
     background: transparent;
     color: var(--kds-color-primary-main);
     border: none;
-    padding: 6px 16px;  /* Menor padding para text variant */
+    padding: 6px var(--kds-spacing-2);  /* Menor padding para text variant */
     min-height: 32px;   /* Menor altura para text variant */
     box-shadow: none;
 }
@@ -758,8 +852,30 @@ a.kds-btn > .kds-icon > i {
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
     line-height: 1;
+    top: 1px;
+}
+
+/* ========================================
+   Button Size Variants
+   ======================================== */
+
+/* Small button - for compact contexts (cards with side-by-side actions) */
+button.kds-btn.kds-btn-sm,
+a.kds-btn.kds-btn-sm {
+    min-height: var(--kds-button-sm-min-height);
+    padding: var(--kds-button-sm-padding);
+    font-size: var(--kds-font-size-sm);
+}
+
+/* Medium button - balanced size between small and default */
+button.kds-btn.kds-btn-md,
+a.kds-btn.kds-btn-md {
+    min-height: var(--kds-button-md-min-height);
+    padding: var(--kds-button-md-padding);
 }
 
+/* Default .kds-btn uses --kds-spacing-button-min-height (50px) from base styles */
+
 /* ========================================
    Card Components (Material Design 3)
    ======================================== */
@@ -767,34 +883,34 @@ a.kds-btn > .kds-icon > i {
 /* Base elevated card */
 .kds-card-elevated,
 .khipu-card-elevated {
-    background: #FFFFFF;
-    border-radius: 16px;
-    padding: 32px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-2);
+    box-shadow: var(--kds-shadow-card);
     transition: box-shadow 0.3s ease;
 }
 
 .kds-card-elevated:hover,
 .khipu-card-elevated:hover {
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--kds-shadow-6);
 }
 
 /* Main content card (centered, max-width) */
 .kds-card-main {
-    background: #FFFFFF;
-    border-radius: 16px;
-    padding: 32px;
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-2);
     max-width: 800px;
-    margin: 24px auto;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    margin: var(--kds-spacing-3) auto;
+    box-shadow: var(--kds-shadow-card);
 }
 
 @media (max-width: 768px) {
     .kds-card-elevated,
     .khipu-card-elevated,
     .kds-card-main {
-        padding: 24px;
-        border-radius: 12px;
+        padding: var(--kds-spacing-3);
+        border-radius: var(--kds-radius-md);
     }
 }
 
@@ -802,16 +918,16 @@ a.kds-btn > .kds-icon > i {
     .kds-card-elevated,
     .khipu-card-elevated,
     .kds-card-main {
-        padding: 12px;
+        padding: var(--kds-spacing-2);
     }
 }
 
 /* Selection card */
 .kds-card-selector {
-    padding: 24px;
-    border-radius: 12px;
-    border: 2px solid #E5E7EB;  /* gray-200 */
-    background: #FFFFFF;
+    padding: var(--kds-spacing-3);
+    border-radius: var(--kds-radius-md);
+    border: 2px solid var(--kds-border-light);
+    background: var(--kds-color-background-paper);
     transition: all 0.3s ease;
     text-align: left;
     cursor: pointer;
@@ -853,7 +969,7 @@ a.kds-btn > .kds-icon > i {
 /* Title */
 .kds-card-selector-title {
     font-weight: 600;
-    color: #111827;  /* gray-900 */
+    color: var(--kds-color-text-primary);
     margin-bottom: 8px;
     font-size: 16px;
 }
@@ -1025,29 +1141,34 @@ a.kds-btn > .kds-icon > i {
 
 /* Card sections (header, body, footer) */
 .kds-card-header {
-    padding-bottom: var(--kds-spacing-3);
-    border-bottom: 1px solid var(--kds-border-light);
     margin-bottom: var(--kds-spacing-3);
 }
 
 .kds-card-header h2,
 .kds-card-header h3 {
     margin: 0;
-    font-weight: var(--kds-font-weight-bold);
+    font-weight: var(--kds-font-weight-semibold);
+    font-size: var(--kds-font-size-lg);
+    word-break: break-word;
+}
+
+.kds-card-header i {
+    margin-bottom: 0;
+    font-size: var(--kds-spacing-sidebar-icon-size-md);
+    height: var(--kds-spacing-sidebar-icon-size-md);
+    width: var(--kds-spacing-sidebar-icon-size-md);
 }
 
 .kds-card-body {
     padding: 0;
-    margin-bottom: var(--kds-spacing-3);
 }
 
 .kds-card-footer {
-    padding-top: var(--kds-spacing-3);
-    border-top: 1px solid var(--kds-border-light);
     margin-top: 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: var(--kds-spacing-2);
+    margin-top: var(--kds-spacing-3);
 }
 
 .kds-card-footer button,
@@ -1073,7 +1194,7 @@ a.kds-btn > .kds-icon > i {
 .khipu-hero {
     background: linear-gradient(135deg, var(--khipu-primary) 0%, var(--khipu-primary-dark) 100%);
     color: white;
-    padding: 64px 24px;
+    padding: var(--kds-spacing-8) var(--kds-spacing-3);
     text-align: center;
     border-radius: 0 0 24px 24px;
     margin-bottom: 32px;
@@ -1099,12 +1220,12 @@ a.kds-btn > .kds-icon > i {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--kds-spacing-4);
-    align-items: start;
+    align-items: stretch;
 }
 
 @media (min-width: 768px) {
     .kds-grid-2col {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
 
@@ -1128,13 +1249,13 @@ a.kds-btn > .kds-icon > i {
 
 @media (min-width: 768px) {
     .kds-grid-3col {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }
 
 @media (min-width: 1024px) {
     .kds-grid-3col {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }
 
@@ -1146,16 +1267,27 @@ a.kds-btn > .kds-icon > i {
 
 @media (min-width: 768px) {
     .kds-grid-4col {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
 
 @media (min-width: 1024px) {
     .kds-grid-4col {
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }
 
+/* Grid cell stretch - ensures all cards in grid have same height */
+.kds-grid-cell-stretch {
+    display: flex;
+}
+
+.kds-grid-cell-stretch > * {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 /* Flex utilities */
 .kds-flex {
     display: flex;
@@ -1169,6 +1301,10 @@ a.kds-btn > .kds-icon > i {
     flex-direction: row;
 }
 
+.kds-flex-wrap {
+    flex-wrap: wrap;
+}
+
 .kds-justify-start {
     justify-content: flex-start;
 }
@@ -1206,6 +1342,30 @@ a.kds-btn > .kds-icon > i {
 .kds-gap-6 { gap: var(--kds-spacing-6); }
 .kds-gap-8 { gap: var(--kds-spacing-8); }
 
+/* Scroll container utilities */
+.kds-scroll-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.kds-scroll-sm {
+    max-height: var(--kds-scroll-sm-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.kds-scroll-md {
+    max-height: var(--kds-scroll-md-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.kds-scroll-lg {
+    max-height: var(--kds-scroll-lg-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
 /* Spacing utilities - Margin */
 .kds-m-0 { margin: 0; }
 .kds-m-2 { margin: var(--kds-spacing-2); }
@@ -1252,6 +1412,7 @@ a.kds-btn > .kds-icon > i {
 .kds-pt-6 { padding-top: var(--kds-spacing-6); }
 .kds-pt-8 { padding-top: var(--kds-spacing-8); }
 
+.kds-pb-0 { padding-bottom: var(--kds-spacing-0) !important; }
 .kds-pb-4 { padding-bottom: var(--kds-spacing-4); }
 .kds-pb-6 { padding-bottom: var(--kds-spacing-6); }
 .kds-pb-8 { padding-bottom: var(--kds-spacing-8); }
@@ -1288,9 +1449,8 @@ a.kds-btn > .kds-icon > i {
     align-items: flex-start;
     gap: 0;
     position: relative;
-    padding: 24px 0;
-    background: #FFFFFF;
-    border-bottom: 1px solid #E5E7EB;
+    padding: var(--kds-spacing-3) 0;
+    background: var(--kds-color-background-paper);
 }
 
 /* Progress line connecting steps */
@@ -1301,7 +1461,7 @@ a.kds-btn > .kds-icon > i {
     right: 10%;
     top: 44px;
     height: 2px;
-    background: #E5E7EB;
+    background: var(--kds-color-background-elevated);
     z-index: 0;
 }
 
@@ -1322,14 +1482,14 @@ a.kds-btn > .kds-icon > i {
     height: 40px;
     border-radius: 50%;
     margin: 0 auto;
-    background: #E5E7EB;  /* Pending state - light gray */
+    background: var(--kds-color-background-elevated);  /* Pending state - light gray */
     position: relative;
     z-index: 2;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     font-size: 0;  /* Hide number by default */
     font-weight: 600;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1339,7 +1499,7 @@ a.kds-btn > .kds-icon > i {
 .kds-step-label {
     margin-top: 12px;
     font-weight: 400;
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     line-height: 1.25;
     font-size: 14px;
     transition: color 0.3s ease;
@@ -1354,7 +1514,7 @@ a.kds-btn > .kds-icon > i {
 }
 
 .kds-step.current .kds-step-label {
-    color: #111827;
+    color: var(--kds-color-text-primary);
     font-weight: 500;
 }
 
@@ -1365,7 +1525,7 @@ a.kds-btn > .kds-icon > i {
 }
 
 .kds-step.completed .kds-step-label {
-    color: #111827;
+    color: var(--kds-color-text-primary);
 }
 
 /* Checkmark for completed steps - Material Symbols icon */
@@ -1384,13 +1544,13 @@ a.kds-btn > .kds-icon > i {
 
 /* Pending step */
 .kds-step .kds-step-indicator {
-    background: #E5E7EB;
+    background: var(--kds-color-background-elevated);
 }
 
 /* Responsive - Tablet */
 @media (max-width: 768px) {
     .kds-stepper {
-        padding: 24px 0;
+        padding: var(--kds-spacing-3) 0;
     }
 
     .kds-step-indicator {
@@ -1495,8 +1655,8 @@ body.kds-layout {
 
 footer.primary {
     background: var(--surface-container-high, #F5F5F5);
-    padding: 32px 24px;
-    margin-top: 48px;
+    padding: var(--kds-spacing-4) var(--kds-spacing-3);
+    margin-top: var(--kds-spacing-6);
 }
 
 footer.primary h6 {
@@ -1526,9 +1686,11 @@ footer.primary a:hover {
 .kds-form-label {
     font-size: 14px;
     font-weight: 500;
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: 8px;
     display: block;
+    display: flex;
+    gap: 5px;
 }
 
 /* Icon utilities for inline icons */
@@ -1661,12 +1823,6 @@ body.dark {
   appearance: auto;
   -webkit-appearance: auto;
   -moz-appearance: auto;
-
-  /* Asegurar que el arrow nativo tenga espacio */
-  padding-right: var(--kds-spacing-10);  /* 40px */
-  background-position: right var(--kds-spacing-4) center;  /* 16px desde el borde */
-  background-repeat: no-repeat;
-  background-size: var(--kds-spacing-5);  /* 20px */
 }
 
 /* ==========================================
@@ -1780,44 +1936,64 @@ body.dark {
 }
 
 /* Snackbar Variants */
-.kds-snackbar.success {
+.kds-snackbar.kds-success {
     background: var(--kds-snackbar-success-bg);
     border: 1px solid var(--kds-color-success-main);
-    color: var(--kds-color-success-main);
+    color: var(--kds-color-success-dark);
+}
+
+.kds-snackbar.kds-success .kds-snackbar-icon {
+    color: var(--kds-color-success-dark);
 }
 
-.kds-snackbar.success .kds-snackbar-icon {
-    color: var(--kds-color-success-main);
+.kds-snackbar.kds-success .kds-snackbar-action button,
+.kds-snackbar.kds-success .kds-snackbar-action .kds-btn {
+    color: var(--kds-color-success-dark);
 }
 
-.kds-snackbar.warning {
+.kds-snackbar.kds-warning {
     background: var(--kds-snackbar-warning-bg);
     border: 1px solid var(--kds-color-warning-main);
-    color: var(--kds-color-warning-main);
+    color: var(--kds-color-warning-dark);
 }
 
-.kds-snackbar.warning .kds-snackbar-icon {
-    color: var(--kds-color-warning-main);
+.kds-snackbar.kds-warning .kds-snackbar-icon {
+    color: var(--kds-color-warning-dark);
 }
 
-.kds-snackbar.error {
+.kds-snackbar.kds-warning .kds-snackbar-action button,
+.kds-snackbar.kds-warning .kds-snackbar-action .kds-btn {
+    color: var(--kds-color-warning-dark);
+}
+
+.kds-snackbar.kds-error {
     background: var(--kds-snackbar-error-bg);
     border: 1px solid var(--kds-color-error-main);
-    color: var(--kds-color-error-main);
+    color: var(--kds-color-error-dark);
+}
+
+.kds-snackbar.kds-error .kds-snackbar-icon {
+    color: var(--kds-color-error-dark);
 }
 
-.kds-snackbar.error .kds-snackbar-icon {
-    color: var(--kds-color-error-main);
+.kds-snackbar.kds-error .kds-snackbar-action button,
+.kds-snackbar.kds-error .kds-snackbar-action .kds-btn {
+    color: var(--kds-color-error-dark);
 }
 
-.kds-snackbar.info {
+.kds-snackbar.kds-info {
     background: var(--kds-snackbar-info-bg);
     border: 1px solid var(--kds-color-info-main);
-    color: var(--kds-color-info-main);
+    color: var(--kds-color-info-dark);
 }
 
-.kds-snackbar.info .kds-snackbar-icon {
-    color: var(--kds-color-info-main);
+.kds-snackbar.kds-info .kds-snackbar-icon {
+    color: var(--kds-color-info-dark);
+}
+
+.kds-snackbar.kds-info .kds-snackbar-action button,
+.kds-snackbar.kds-info .kds-snackbar-action .kds-btn {
+    color: var(--kds-color-info-dark);
 }
 
 /* Static variant for showcase/demo purposes */
@@ -1830,6 +2006,12 @@ body.dark {
     animation: none;
 }
 
+/* Top position variant - for notifications that should appear at top */
+.kds-snackbar-top {
+    top: var(--kds-spacing-4);
+    bottom: auto;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
     .kds-snackbar {
@@ -1852,6 +2034,32 @@ body.dark {
     }
 }
 
+/* ========================================
+   TOOLTIPS - Personaliza Beer CSS .tooltip
+   ======================================== */
+
+/*
+ * Beer CSS tiene la funcionalidad de .tooltip
+ * Aquí sobrescribimos colores y estilos con tokens de Khipu
+ */
+
+.tooltip {
+    background-color: var(--kds-color-text-primary);
+    color: var(--kds-color-background-paper);
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    border-radius: var(--kds-radius-sm);
+    padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-2);
+    box-shadow: var(--kds-shadow-4);
+}
+
+/* Tooltip wrapper for inline icons - matches demo pattern */
+.kds-tooltip-icon {
+    position: relative;
+    display: inline-flex;
+}
+
 /* ========================================
    Material Symbols Icon Sizing
    ======================================== */
@@ -1890,6 +2098,10 @@ body.dark {
     max-width: 400px;
 }
 
+.kds-max-w-500 {
+    max-width: 500px;
+}
+
 .kds-max-w-md {
     max-width: 600px;
 }
@@ -1973,26 +2185,18 @@ label.checkbox,
 label.radio {
     display: flex;
     align-items: center;
-    padding: var(--kds-spacing-3) var(--kds-spacing-4);
+    padding: var(--kds-spacing-2) 0;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
     font-size: 16px;
     line-height: 1.5;
-    color: #111827;
-}
-
-label.checkbox:hover,
-label.radio:hover {
-    background-color: #F9FAFB;
+    color: var(--kds-color-text-primary);
 }
 
 /* Checkbox/Radio Input */
 label.checkbox input[type="checkbox"],
 label.radio input[type="radio"] {
-    width: 20px;
-    height: 20px;
-    margin-right: var(--kds-spacing-3);
     cursor: pointer;
     flex-shrink: 0;
 }
@@ -2038,8 +2242,8 @@ label.radio:has(input:disabled) {
 
 /* Onboarding Header - Contains stepper and progress */
 .kds-onboarding-header {
-    background: #FFFFFF;
-    border-bottom: 1px solid #E5E7EB;
+    background: var(--kds-color-background-paper);
+    border-bottom: 1px solid var(--kds-border-light);
     position: sticky;
     top: 0;
     z-index: 100;
@@ -2056,8 +2260,8 @@ label.radio:has(input:disabled) {
 /* Onboarding Footer - Action buttons */
 .kds-onboarding-footer {
     flex-shrink: 0;
-    background: #FFFFFF;
-    border-top: 1px solid #E5E7EB;
+    background: var(--kds-color-background-paper);
+    border-top: 1px solid var(--kds-border-light);
     padding: var(--kds-spacing-4) var(--kds-spacing-6);
     display: flex;
     justify-content: space-between;
@@ -2099,15 +2303,17 @@ label.radio:has(input:disabled) {
 
 /* Stage Header - Title and subtitle */
 .kds-stage-header {
-    text-align: center;
-    margin-bottom: var(--kds-spacing-8);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--kds-spacing-1);
+    margin-bottom: var(--kds-spacing-2);
 }
 
 /* Stage Content - Main form/content area */
 .kds-stage-content {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-onboarding-gap);
 }
 
 /* Stage Actions - Bottom button area (if not using sticky footer) */
@@ -2115,7 +2321,6 @@ label.radio:has(input:disabled) {
     display: flex;
     justify-content: space-between;
     gap: var(--kds-spacing-3);
-    margin-top: var(--kds-spacing-8);
 }
 
 @media (max-width: 768px) {
@@ -2130,10 +2335,10 @@ label.radio:has(input:disabled) {
 
 /* Stage Section - Grouping related fields */
 .kds-stage-section {
-    background: #FFFFFF;
+    background: var(--kds-color-background-paper);
     border-radius: var(--kds-radius-lg);
     padding: var(--kds-spacing-6);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--kds-shadow-card);
 }
 
 .kds-stage-section + .kds-stage-section {
@@ -2143,13 +2348,13 @@ label.radio:has(input:disabled) {
 .kds-stage-section-title {
     font-size: var(--kds-font-size-lg);
     font-weight: var(--kds-font-weight-semibold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: var(--kds-spacing-4);
 }
 
 .kds-stage-section-description {
     font-size: var(--kds-font-size-sm);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     margin-bottom: var(--kds-spacing-4);
     line-height: 1.5;
 }
@@ -2212,7 +2417,7 @@ label.radio:has(input:disabled) {
 .kds-file-upload-text {
     font-size: var(--kds-font-size-base);
     font-weight: var(--kds-font-weight-medium);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: var(--kds-spacing-2);
 }
 
@@ -2229,14 +2434,14 @@ label.radio:has(input:disabled) {
 
 .kds-file-upload-helper {
     font-size: var(--kds-font-size-sm);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     display: block;
     margin-top: var(--kds-spacing-1);
 }
 
 .kds-file-upload-hint {
     font-size: var(--kds-font-size-sm);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
 }
 
 /* Hidden file input */
@@ -2298,7 +2503,7 @@ label.radio:has(input:disabled) {
 .kds-file-upload-item-name {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-medium);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2306,13 +2511,13 @@ label.radio:has(input:disabled) {
 
 .kds-file-upload-item-meta {
     font-size: var(--kds-font-size-xs);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     margin-top: 2px;
 }
 
 .kds-file-upload-item-size {
     font-size: var(--kds-font-size-xs);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     margin-top: 2px;
 }
 
@@ -2358,7 +2563,7 @@ label.radio:has(input:disabled) {
 /* Progress bar (for async uploads) */
 .kds-file-upload-progress {
     height: 4px;
-    background: #E5E7EB;
+    background: var(--kds-color-background-elevated);
     border-radius: 2px;
     overflow: hidden;
     margin-top: var(--kds-spacing-2);
@@ -2393,7 +2598,7 @@ label.radio:has(input:disabled) {
     background: var(--kds-otp-digit-bg);
     transition: all 0.2s ease;
     outline: none;
-    color: #111827;
+    color: var(--kds-color-text-primary);
 }
 
 .kds-otp-digit:focus {
@@ -2445,7 +2650,7 @@ label.radio:has(input:disabled) {
 
 @media (max-width: 480px) {
     .kds-bank-grid {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: var(--kds-spacing-2);
     }
 }
@@ -2460,7 +2665,7 @@ label.radio:has(input:disabled) {
     padding: var(--kds-spacing-3);
     border: 2px solid var(--kds-bank-item-border);
     border-radius: var(--kds-radius-lg);
-    background: #FFFFFF;
+    background: var(--kds-color-background-paper);
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
@@ -2491,7 +2696,7 @@ label.radio:has(input:disabled) {
 .kds-bank-item-name {
     font-size: var(--kds-font-size-xs);
     font-weight: var(--kds-font-weight-medium);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     text-align: center;
     line-height: 1.3;
 }
@@ -2556,12 +2761,43 @@ dialog.modal {
     padding: var(--kds-modal-padding);
     max-width: var(--kds-modal-max-width);
     box-shadow: var(--kds-modal-shadow);
+    z-index: 1000;
 }
 
 dialog.modal::backdrop {
     background: var(--kds-modal-backdrop);
 }
 
+/* ========================================
+   MODAL FIELD STYLES
+   Consistent input/select styling for all modals
+   ======================================== */
+
+dialog.modal .field {
+    margin-bottom: var(--kds-spacing-4);
+    box-sizing: border-box;
+}
+
+dialog.modal .field.border {
+    border: var(--kds-border-width-sm) solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-md);
+    background: var(--kds-color-background-paper);
+    padding: 0;
+}
+
+dialog.modal .field.border select,
+dialog.modal .field.border input {
+    font-size: var(--kds-font-size-md);
+    box-sizing: border-box;
+}
+
+/* Focus state - use outline to prevent width change */
+dialog.modal .field.border:focus-within {
+    outline: var(--kds-border-width-md) solid var(--kds-color-primary-main);
+    outline-offset: 0;
+    border-color: var(--kds-color-primary-main);
+}
+
 /* ========================================
    KYC BLOCKING MODAL
    Warning modal for high-risk sectors
@@ -2798,7 +3034,7 @@ dialog.modal::backdrop {
     background: var(--kds-accordion-header-bg);
     cursor: pointer;
     font-weight: var(--kds-font-weight-semibold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     list-style: none;
     display: flex;
     justify-content: space-between;
@@ -2811,7 +3047,7 @@ dialog.modal::backdrop {
 }
 
 .kds-contract-accordion summary:hover {
-    background: #E5E7EB;
+    background: var(--kds-color-background-elevated);
 }
 
 .kds-contract-accordion summary::after {
@@ -2889,7 +3125,7 @@ dialog.modal::backdrop {
 
 .kds-signature-clear {
     background: transparent !important;
-    color: #6B7280 !important;
+    color: var(--kds-color-text-secondary) !important;
     border: 1px solid #D1D5DB !important;
 }
 
@@ -2962,7 +3198,7 @@ dialog.modal::backdrop {
 
 .kds-summary-card {
     background: white;
-    border: 1px solid #E5E7EB;
+    border: 1px solid var(--kds-border-light);
     border-radius: var(--kds-radius-lg);
     padding: var(--kds-spacing-5);
     margin-bottom: var(--kds-spacing-4);
@@ -2983,7 +3219,7 @@ dialog.modal::backdrop {
     gap: var(--kds-spacing-2);
     font-size: var(--kds-font-size-lg);
     font-weight: var(--kds-font-weight-semibold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
 }
 
 .kds-summary-card-edit {
@@ -3011,13 +3247,13 @@ dialog.modal::backdrop {
     flex: 0 0 140px;
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-medium);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
 }
 
 .kds-summary-value {
     flex: 1;
     font-size: var(--kds-font-size-sm);
-    color: #111827;
+    color: var(--kds-color-text-primary);
 }
 
 .kds-summary-value.badge {
@@ -3077,20 +3313,20 @@ dialog.modal::backdrop {
 .kds-success-title {
     font-size: var(--kds-font-size-3xl);
     font-weight: var(--kds-font-weight-bold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: var(--kds-spacing-3);
 }
 
 .kds-success-subtitle {
     font-size: var(--kds-font-size-lg);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     margin-bottom: var(--kds-spacing-8);
     max-width: 600px;
 }
 
 .kds-next-steps {
     background: white;
-    border: 1px solid #E5E7EB;
+    border: 1px solid var(--kds-border-light);
     border-radius: var(--kds-radius-xl);
     padding: var(--kds-spacing-6);
     max-width: 700px;
@@ -3102,7 +3338,7 @@ dialog.modal::backdrop {
 .kds-next-steps-title {
     font-size: var(--kds-font-size-xl);
     font-weight: var(--kds-font-weight-semibold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: var(--kds-spacing-4);
     display: flex;
     align-items: center;
@@ -3141,13 +3377,13 @@ dialog.modal::backdrop {
 .kds-step-title {
     font-size: var(--kds-font-size-base);
     font-weight: var(--kds-font-weight-semibold);
-    color: #111827;
+    color: var(--kds-color-text-primary);
     margin-bottom: 4px;
 }
 
 .kds-step-description {
     font-size: var(--kds-font-size-sm);
-    color: #6B7280;
+    color: var(--kds-color-text-secondary);
     line-height: 1.5;
 }
 
@@ -3191,7 +3427,7 @@ dialog.modal::backdrop {
     }
 
     .khipu-card-elevated {
-        padding: 16px;
+        padding: var(--kds-spacing-2);
     }
 
     .snackbar {
@@ -3208,10 +3444,74 @@ dialog.modal::backdrop {
 
 /* Container utilities */
 .kds-container-center {
+    width: 100%;
+    max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
 }
 
+/* Nav should have no padding - only background color */
+nav {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* When inside nav, inherit flex behavior and override BeerCSS margin: 0 */
+nav > .kds-container-center {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-4);
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: var(--kds-spacing-4);
+    padding-right: var(--kds-spacing-4);
+    padding-top: var(--kds-spacing-2);
+    padding-bottom: var(--kds-spacing-2);
+}
+
+footer,
+footer.primary {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* Footer nav columns - vertical links */
+footer nav.kds-footer-nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-1);
+}
+
+footer nav.kds-footer-nav a {
+    font-size: var(--kds-font-size-sm);
+    padding: 0;
+    justify-content: flex-start;
+}
+
+/* When inside footer, add padding to align with main content */
+footer > .kds-container-center {
+    padding-left: var(--kds-spacing-4);
+    padding-right: var(--kds-spacing-4);
+    padding-top: var(--kds-spacing-8);
+    padding-bottom: var(--kds-spacing-8);
+}
+
+@media (min-width: 768px) {
+    nav > .kds-container-center {
+        padding-left: var(--kds-spacing-6);
+        padding-right: var(--kds-spacing-6);
+        padding-top: var(--kds-spacing-2);
+        padding-bottom: var(--kds-spacing-2);
+    }
+
+    footer > .kds-container-center {
+        padding-left: var(--kds-spacing-6);
+        padding-right: var(--kds-spacing-6);
+        padding-top: var(--kds-spacing-10);
+        padding-bottom: var(--kds-spacing-10);
+    }
+}
+
 .max-w-500 {
     max-width: 500px;
 }
@@ -3286,12 +3586,6 @@ dialog.modal::backdrop {
 .kds-stage-section-description {
     margin-bottom: var(--kds-spacing-4);
 }
-
-/* Stage header */
-.kds-stage-header {
-    margin-bottom: var(--kds-spacing-8);
-}
-
 .kds-stage-title {
     margin-bottom: var(--kds-spacing-2);
 }
@@ -3328,32 +3622,150 @@ dialog.modal::backdrop {
     margin-bottom: 0; /* Grid gap handles spacing */
 }
 
-/* Alerts have margin */
+/* ========================================
+   ALERTS - Información contextual
+   ======================================== */
+
+/* Base alert structure */
 .kds-alert {
-    margin-bottom: var(--kds-spacing-6);
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-2);
+    border-radius: var(--kds-radius-md);
+    border: 1px solid;
+    font-family: var(--kds-font-family-primary);
+    min-width: 0;
+    flex: 1 1 100%;
+}
+
+@media (min-width: 768px) {
+    .kds-alert {
+        padding: var(--kds-spacing-2);
+        flex: 1 1 auto;
+    }
 }
 
 .kds-alert:last-child {
     margin-bottom: 0;
 }
 
-
-/* Modal actions (buttons at bottom) */
-.modal .kds-kyc-modal-content + div,
-.modal .kds-alert + div {
-    margin-top: var(--kds-spacing-6);
+/* Icon styling */
+.kds-alert-icon {
+    flex-shrink: 0;
+    font-size: var(--kds-spacing-button-icon-size);
+    min-width: var(--kds-spacing-button-icon-size);
+    min-height: var(--kds-spacing-button-icon-size);
 }
 
-/* ===========================================================================
+/* Content container */
+.kds-alert-content {
+    flex: 1;
+    min-width: 0;
+}
 
-/* ============================================
-   SIDEBAR NAVIGATION (Simple & Sticky)
+/* Title (bold) */
+.kds-alert-title {
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-normal);
+    margin-bottom: calc(var(--kds-spacing-1) / 2);
+    word-break: normal;
+    overflow-wrap: break-word;
+}
+
+/* Description (regular) */
+.kds-alert-description {
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-regular);
+    line-height: var(--kds-line-height-relaxed);
+    word-break: normal;
+    overflow-wrap: break-word;
+}
+
+/* Alert Variants */
+.kds-alert.kds-info {
+    background: var(--kds-alert-info-bg);
+    border-color: var(--kds-color-info-main);
+    color: var(--kds-color-info-dark);
+}
+
+.kds-alert.kds-info .kds-alert-icon {
+    color: var(--kds-color-info-dark);
+}
+
+.kds-alert.kds-success {
+    background: var(--kds-alert-success-bg);
+    border-color: var(--kds-color-success-main);
+    color: var(--kds-color-success-dark);
+}
+
+.kds-alert.kds-success .kds-alert-icon {
+    color: var(--kds-color-success-dark);
+}
+
+.kds-alert.kds-warning {
+    background: var(--kds-alert-warning-bg);
+    border-color: var(--kds-color-warning-main);
+    color: var(--kds-color-warning-dark);
+}
+
+.kds-alert.kds-warning .kds-alert-icon {
+    color: var(--kds-color-warning-dark);
+}
+
+.kds-alert.kds-error {
+    background: var(--kds-alert-error-bg);
+    border-color: var(--kds-color-error-main);
+    color: var(--kds-color-error-dark);
+}
+
+.kds-alert.kds-error .kds-alert-icon {
+    color: var(--kds-color-error-dark);
+}
+
+/* Lists inside alerts */
+.kds-alert ul {
+    padding-left: var(--kds-spacing-2);
+    margin-top: var(--kds-spacing-1);
+    margin-bottom: 0;
+}
+
+/* Links inside alerts */
+.kds-alert a {
+    text-decoration: underline;
+}
+
+.kds-alert a:hover {
+    text-decoration: none;
+}
+
+
+/* Modal actions (buttons at bottom) */
+.modal .kds-kyc-modal-content + div,
+.modal .kds-alert + div {
+    margin-top: var(--kds-spacing-6);
+}
+
+/* ===========================================================================
+
+/* ============================================
+   SIDEBAR NAVIGATION (Simple & Sticky)
    ============================================ */
 
 /* Page layout - Flexbox horizontal */
 .kds-page-layout {
     display: flex;
     min-height: 100vh;
+    padding-left: var(--kds-spacing-4);
+    padding-right: var(--kds-spacing-4);
+}
+
+@media (min-width: 768px) {
+    .kds-page-layout {
+        padding-left: var(--kds-spacing-6);
+        padding-right: var(--kds-spacing-6);
+    }
 }
 
 /* Sidebar - Sticky flotante a la izquierda */
@@ -3366,8 +3778,8 @@ dialog.modal::backdrop {
     position: sticky;
     top: var(--kds-spacing-4);
     margin: var(--kds-spacing-4);
+    margin-left: 0;
     height: fit-content;
-    overflow-y: auto;
     box-shadow: var(--kds-shadow-2);
 }
 
@@ -3515,15 +3927,13 @@ dialog.modal::backdrop {
 /* Main content */
 .kds-main-content {
     flex: 1;
-    padding: var(--kds-spacing-8);
+    min-width: 0;
     overflow-y: auto;
-}
-
-@media (max-width: 768px) {
-
-    .kds-main-content {
-        padding: var(--kds-spacing-4)
-    }
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    padding-top: var(--kds-spacing-4);
+    padding-bottom: var(--kds-spacing-4);
 }
 
 /* ============================================
@@ -3558,14 +3968,16 @@ dialog.modal::backdrop {
     color: var(--kds-color-text-primary);
 }
 
-/* Botón hamburger */
+/* Botón hamburger - oculto en desktop, visible en mobile */
 .kds-hamburger-btn {
+    display: none;
     width: var(--kds-spacing-sidebar-icon-container-size);
     height: var(--kds-spacing-sidebar-icon-container-size);
     border: none;
     background: transparent;
     border-radius: var(--kds-radius-sm);
     cursor: pointer;
+    padding: 0;
     transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard);
 }
 
@@ -3580,6 +3992,13 @@ dialog.modal::backdrop {
 
 /* Mobile (≤ 768px) */
 @media (max-width: 768px) {
+    /* Mostrar hamburger button en nav */
+    .kds-hamburger-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     /* Mostrar topbar */
     .kds-mobile-topbar {
         display: flex;
@@ -3663,6 +4082,12 @@ dialog.modal::backdrop {
     margin-bottom: 0;
 }
 
+/* List without bullets */
+.kds-list-unstyled {
+    list-style: none;
+    padding-left: 0;
+}
+
 /* Code block for displaying code snippets */
 .kds-code-block {
     background: var(--kds-color-background-elevated);
@@ -3713,3 +4138,931 @@ dialog.modal::backdrop {
     line-height: var(--kds-line-height-relaxed);
 }
 
+/* ========================================
+   GALLERY / SHOWCASE COMPONENTS
+   Componentes para páginas de demostración
+   ======================================== */
+
+/* Gallery Hero Section */
+.gallery-hero {
+    background: linear-gradient(135deg, #8347AD 0%, #9333EA 100%);
+    color: white;
+    padding: var(--kds-spacing-12) var(--kds-spacing-6);
+    text-align: center;
+}
+
+.gallery-hero h1 {
+    font-size: var(--kds-font-size-4xl);
+    font-weight: var(--kds-font-weight-bold);
+    margin: 0 0 var(--kds-spacing-4);
+    line-height: 1.2;
+}
+
+.gallery-hero p {
+    font-size: var(--kds-font-size-lg);
+    margin: 0 0 var(--kds-spacing-8);
+    opacity: 0.95;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.gallery-hero-actions {
+    display: flex;
+    gap: var(--kds-spacing-4);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+/* Gallery Container */
+.gallery-container {
+    padding: var(--kds-spacing-12) var(--kds-spacing-6);
+}
+
+.gallery-header {
+    text-align: center;
+    margin-bottom: var(--kds-spacing-10);
+}
+
+.gallery-header h2 {
+    font-size: var(--kds-font-size-3xl);
+    font-weight: var(--kds-font-weight-bold);
+    color: var(--kds-color-text-primary);
+    margin: 0 0 var(--kds-spacing-4);
+}
+
+.gallery-header p {
+    font-size: var(--kds-font-size-lg);
+    color: var(--kds-color-text-secondary);
+    margin: 0;
+}
+
+/* Gallery Grid */
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: var(--kds-spacing-8);
+    margin-bottom: var(--kds-spacing-12);
+}
+
+@media (max-width: 768px) {
+    .gallery-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Page Card */
+.page-card {
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-lg);
+    overflow: hidden;
+    box-shadow: var(--kds-shadow-2);
+    transition: all var(--kds-transition-standard) var(--kds-easing-standard);
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.page-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--kds-shadow-8);
+}
+
+.page-card-preview {
+    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.page-card-preview::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(131, 71, 173, 0.1) 0%, transparent 70%);
+    animation: pulse 3s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 0.5; }
+    50% { transform: scale(1.1); opacity: 0.8; }
+}
+
+.page-card-preview i {
+    font-size: 80px;
+    min-width: 80px;
+    min-height: 80px;
+    color: var(--kds-color-primary-main);
+    position: relative;
+    z-index: 1;
+}
+
+.page-card-content {
+    padding: var(--kds-spacing-6);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.page-card-step {
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--kds-color-primary-main);
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.page-card-title {
+    font-size: var(--kds-font-size-2xl);
+    font-weight: var(--kds-font-weight-bold);
+    color: var(--kds-color-text-primary);
+    margin: 0 0 var(--kds-spacing-3);
+}
+
+.page-card-description {
+    font-size: var(--kds-font-size-md);
+    color: var(--kds-color-text-secondary);
+    line-height: var(--kds-line-height-relaxed);
+    margin: 0 0 var(--kds-spacing-5);
+    flex: 1;
+}
+
+.page-card-components {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kds-spacing-2);
+    margin-bottom: var(--kds-spacing-5);
+}
+
+.component-tag {
+    font-size: var(--kds-font-size-xs);
+    padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-3);
+    background: var(--kds-color-background-default);
+    color: var(--kds-color-text-secondary);
+    border-radius: var(--kds-radius-full);
+    font-weight: var(--kds-font-weight-medium);
+}
+
+.page-card-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--kds-font-size-md);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    padding-top: var(--kds-spacing-4);
+    border-top: 1px solid var(--kds-color-divider);
+}
+
+.page-card-link:hover {
+    color: var(--kds-color-primary-dark);
+}
+
+.page-card-link i {
+    font-size: var(--kds-font-size-xl);
+    transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.page-card:hover .page-card-link i {
+    transform: translateX(4px);
+}
+
+/* Component Showcase CTA */
+.showcase-cta {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-10) var(--kds-spacing-8);
+    text-align: center;
+    color: white;
+    margin-top: var(--kds-spacing-12);
+}
+
+.showcase-cta h2 {
+    font-size: var(--kds-font-size-3xl);
+    font-weight: var(--kds-font-weight-bold);
+    margin: 0 0 var(--kds-spacing-4);
+}
+
+.showcase-cta p {
+    font-size: var(--kds-font-size-lg);
+    margin: 0 0 var(--kds-spacing-8);
+    opacity: 0.95;
+}
+
+/* Gallery Footer */
+.gallery-footer {
+    background: var(--kds-color-background-paper);
+    border-top: 1px solid var(--kds-color-divider);
+    padding: var(--kds-spacing-10) var(--kds-spacing-6);
+    text-align: center;
+    margin-top: var(--kds-spacing-12);
+}
+
+.gallery-footer p {
+    color: var(--kds-color-text-secondary);
+    margin: 0 0 var(--kds-spacing-2);
+}
+
+.gallery-footer a {
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.gallery-footer a:hover {
+    text-decoration: underline;
+}
+
+/* Utility: Remove top padding */
+.kds-pt-0 {
+    padding-top: 0 !important;
+}
+
+/* Highlighted page card (para destacar items especiales) */
+.page-card-highlighted {
+    border: 2px solid var(--kds-color-primary-main);
+}
+
+.page-card-preview-alt {
+    background: linear-gradient(135deg, rgba(131, 71, 173, 0.1) 0%, rgba(147, 51, 234, 0.15) 100%);
+}
+
+/* ========================================
+   SURVEY MODAL
+   Modal personalizado para encuesta de bienvenida
+   ======================================== */
+
+/* Modal container */
+dialog#surveyModal {
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-5);
+    max-width: 400px;
+    width: 100%;
+    box-shadow: var(--kds-shadow-16);
+    box-sizing: border-box;
+    border: none;
+}
+
+dialog#surveyModal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+/* Form styling */
+dialog#surveyModal form {
+    margin: 0;
+    padding: 0;
+}
+
+/* Clean input styling - remove BeerCSS underlines */
+dialog#surveyModal .field {
+    margin-bottom: var(--kds-spacing-4);
+    box-sizing: border-box;
+}
+
+dialog#surveyModal .field.border {
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-md);
+    background: var(--kds-color-background-paper);
+    padding: 0;
+}
+
+dialog#surveyModal .field.border select,
+dialog#surveyModal .field.border input {
+    border: none;
+    border-bottom: none;
+    padding: var(--kds-spacing-3) var(--kds-spacing-4);
+    background: transparent;
+    color: var(--kds-color-text-primary);
+    font-size: var(--kds-font-size-md);
+}
+
+dialog#surveyModal .field.border:focus-within {
+    outline: 2px solid var(--kds-color-primary-main);
+    outline-offset: 0;
+    border-color: var(--kds-color-primary-main);
+}
+
+dialog#surveyModal .field label {
+    position: static;
+    display: block;
+    margin-bottom: var(--kds-spacing-2);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    color: var(--kds-color-text-primary);
+    background: transparent;
+    padding: 0;
+}
+
+dialog#surveyModal .field.border {
+    position: relative;
+}
+
+/* Button styling */
+dialog#surveyModal button.primary {
+    width: 100%;
+    max-width: 100%;
+    padding: var(--kds-spacing-3) var(--kds-spacing-5);
+    font-size: var(--kds-font-size-md);
+    font-weight: var(--kds-font-weight-semibold);
+    border-radius: var(--kds-radius-md);
+    transition: all var(--kds-transition-short) var(--kds-easing-standard);
+    height: auto;
+    min-height: auto;
+    line-height: 1.5;
+    box-sizing: border-box;
+    margin: 0;
+    border: none;
+}
+
+dialog#surveyModal button.primary:disabled {
+    background: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    cursor: not-allowed;
+}
+
+dialog#surveyModal button.primary:not(:disabled):hover {
+    background: var(--kds-color-primary-dark);
+}
+
+/* Close button - hidden */
+dialog#surveyModal button.circle {
+    display: none;
+}
+
+/* Help text */
+#surveyHelpText {
+    margin-top: var(--kds-spacing-2);
+    text-align: center;
+    font-size: var(--kds-font-size-xs);
+    color: var(--kds-color-text-secondary);
+}
+
+/* ========================================
+   SHOWCASE / DEMO COMPONENTS
+   Componentes para páginas de demostración y showcase
+   ======================================== */
+
+/* Showcase Header */
+.showcase-header {
+    background: linear-gradient(135deg, #8347AD 0%, #6A2B93 100%);
+    color: white;
+    padding: var(--kds-spacing-12) var(--kds-spacing-6);
+    text-align: center;
+}
+
+.showcase-content {
+    padding: var(--kds-spacing-8) var(--kds-spacing-6);
+}
+
+/* Component Grid (para showcase de componentes) */
+.component-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--kds-spacing-6);
+    margin-top: var(--kds-spacing-8);
+}
+
+/* Demo Header */
+.demo-header {
+    background: var(--kds-color-primary-main);
+    color: white;
+    padding: var(--kds-spacing-8) var(--kds-spacing-6);
+    text-align: center;
+}
+
+/* Demo Navigation Grid */
+.demo-nav-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--kds-spacing-4);
+    padding: var(--kds-spacing-8);
+}
+
+/* Demo Stage Card */
+.demo-stage-card {
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-6);
+    box-shadow: var(--kds-shadow-1);
+    transition: all var(--kds-transition-standard) var(--kds-easing-standard);
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+}
+
+.demo-stage-card:hover {
+    box-shadow: var(--kds-shadow-4);
+    transform: translateY(-2px);
+}
+
+.demo-stage-number,
+.demo-stage-icon {
+    width: 48px;
+    height: 48px;
+    background: rgba(131, 71, 173, 0.1);
+    color: var(--kds-color-primary-main);
+    border-radius: var(--kds-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--kds-font-size-2xl);
+    font-weight: var(--kds-font-weight-bold);
+}
+
+.demo-stage-number {
+    font-size: var(--kds-font-size-xl);
+}
+
+.demo-stage-icon {
+    width: 64px;
+    height: 64px;
+}
+
+.demo-stage-icon i {
+    width: auto;
+    height: auto;
+    font-size: var(--kds-font-size-2xl);
+}
+
+.demo-stage-title {
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+}
+
+.demo-stage-description {
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    line-height: var(--kds-line-height-relaxed);
+}
+
+/* ========================================
+   SUMMARY CARD (Validation page)
+   ======================================== */
+
+.kds-summary-card {
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-5);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-summary-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--kds-spacing-4);
+    padding-bottom: var(--kds-spacing-3);
+    border-bottom: 1px solid var(--kds-color-divider);
+}
+
+.kds-summary-card-title {
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+}
+
+.kds-summary-card-row {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--kds-spacing-2) 0;
+}
+
+.kds-summary-card-label {
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+}
+
+.kds-summary-card-value {
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    color: var(--kds-color-text-primary);
+}
+
+/* ========================================
+   CONTRACT CONTENT (Contract page)
+   ======================================== */
+
+.kds-contract-content {
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-6);
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.kds-contract-content details {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-contract-content summary {
+    cursor: pointer;
+    font-weight: var(--kds-font-weight-semibold);
+    font-size: var(--kds-font-size-md);
+    color: var(--kds-color-text-primary);
+    padding: var(--kds-spacing-3);
+    border-radius: var(--kds-radius-md);
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-contract-content summary:hover {
+    background: var(--kds-color-action-hover);
+}
+
+.kds-contract-content details[open] summary {
+    margin-bottom: var(--kds-spacing-3);
+}
+
+.kds-contract-content p {
+    margin: var(--kds-spacing-2) 0;
+    line-height: var(--kds-line-height-relaxed);
+    color: var(--kds-color-text-secondary);
+}
+
+/* ========================================
+   BANK GRID (Bank connection page)
+   ======================================== */
+
+.kds-bank-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: var(--kds-spacing-4);
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.kds-bank-item {
+    aspect-ratio: 1;
+    border: 2px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-4);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--kds-transition-short) var(--kds-easing-standard);
+    background: var(--kds-color-background-paper);
+}
+
+.kds-bank-item:hover {
+    border-color: var(--kds-color-primary-main);
+    box-shadow: var(--kds-shadow-2);
+}
+
+.kds-bank-item.selected {
+    border-color: var(--kds-color-primary-main);
+    background: rgba(131, 71, 173, 0.05);
+}
+
+.kds-bank-item img {
+    max-width: 80%;
+    max-height: 60%;
+    object-fit: contain;
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.kds-bank-item-name {
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    color: var(--kds-color-text-primary);
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .kds-bank-grid {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: var(--kds-spacing-3);
+    }
+}
+
+/* ========================================
+   UTILITY CLASSES
+   Clases utilitarias para evitar estilos inline
+   ======================================== */
+
+/* Icon utilities - alineación con texto */
+.kds-icon-inline {
+    vertical-align: middle;
+    margin-right: var(--kds-spacing-2);
+}
+
+/* Text utilities */
+.kds-text-center {
+    text-align: center;
+}
+
+.kds-text-underline {
+    text-decoration: underline;
+}
+
+.kds-text-no-decoration {
+    text-decoration: none;
+}
+
+/* Spacing utilities */
+.kds-mt-2 { margin-top: var(--kds-spacing-2); }
+.kds-mt-3 { margin-top: var(--kds-spacing-3); }
+.kds-mt-4 { margin-top: var(--kds-spacing-4); }
+.kds-mt-6 { margin-top: var(--kds-spacing-6); }
+.kds-mt-8 { margin-top: var(--kds-spacing-8); }
+
+.kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
+.kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
+.kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
+.kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
+.kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
+
+/* Display utilities */
+.kds-hidden {
+    display: none;
+}
+
+.kds-w-full {
+    width: 100%;
+}
+
+/* Icon sizes */
+.kds-icon-sm { font-size: 18px; }
+.kds-icon-md { font-size: 32px; }
+.kds-icon-lg { font-size: 48px; }
+.kds-icon-xl { font-size: 64px; }
+.kds-icon-xxl { font-size: 80px; }
+
+/* Position utilities */
+.kds-absolute-top-right {
+    position: absolute;
+    top: var(--kds-spacing-4);
+    right: var(--kds-spacing-4);
+}
+
+/* Color utilities (solo para casos específicos de demo) */
+.kds-text-warning {
+    color: #92400E;
+}
+
+.kds-list-warning {
+    margin: 0;
+    padding-left: var(--kds-spacing-5);
+    color: #78350F;
+}
+
+/* ========================================
+   LAYOUT FLEXBOX UTILITIES
+   Utilities for flexbox layouts
+   ======================================== */
+
+.kds-flex {
+    display: flex;
+}
+
+.kds-flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.kds-flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.kds-items-start {
+    align-items: flex-start;
+}
+
+.kds-items-center {
+    align-items: center;
+}
+
+.kds-items-end {
+    align-items: flex-end;
+}
+
+.kds-justify-start {
+    justify-content: flex-start;
+}
+
+.kds-justify-center {
+    justify-content: center;
+}
+
+.kds-justify-between {
+    justify-content: space-between;
+}
+
+.kds-justify-end {
+    justify-content: flex-end;
+}
+
+.kds-flex-1 {
+    flex: 1;
+}
+
+.kds-flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+/* Gap utilities */
+.kds-gap-1 { gap: var(--kds-spacing-1); }
+.kds-gap-2 { gap: var(--kds-spacing-2); }
+.kds-gap-3 { gap: var(--kds-spacing-3); }
+.kds-gap-4 { gap: var(--kds-spacing-4); }
+.kds-gap-5 { gap: var(--kds-spacing-5); }
+.kds-gap-6 { gap: var(--kds-spacing-6); }
+.kds-gap-8 { gap: var(--kds-spacing-8); }
+
+/* ========================================
+   OPACITY UTILITIES
+   ======================================== */
+
+.kds-opacity-60 {
+    opacity: 0.6;
+}
+
+.kds-opacity-80 {
+    opacity: 0.8;
+}
+
+.kds-opacity-90 {
+    opacity: 0.9;
+}
+
+/* ========================================
+   BADGE COMPONENT
+   Small chips/badges for labels and status
+   ======================================== */
+
+.kds-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: var(--kds-radius-sm);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: 1.5;
+}
+
+.kds-badge.success {
+    background-color: var(--kds-color-success-container);
+    color: var(--kds-color-success-dark);
+}
+
+.kds-badge.error {
+    background-color: var(--kds-color-error-container);
+    color: var(--kds-color-error-dark);
+}
+
+.kds-badge.warning {
+    background-color: var(--kds-color-warning-container);
+    color: var(--kds-color-warning-dark);
+}
+
+.kds-badge.info {
+    background-color: var(--kds-color-info-container);
+    color: var(--kds-color-info-dark);
+}
+
+.kds-badge.primary {
+    background-color: var(--kds-color-primary-container);
+    color: var(--kds-color-primary-dark);
+}
+
+/* ========================================
+   DIVIDER WITH TEXT
+   Separator with optional text
+   ======================================== */
+
+.kds-divider-text {
+    text-align: center;
+    margin: var(--kds-spacing-6) 0;
+    color: var(--kds-color-text-secondary);
+    position: relative;
+    font-size: var(--kds-font-size-sm);
+}
+
+.kds-divider-text span {
+    background: var(--kds-color-background-default);
+    padding: 0 var(--kds-spacing-2);
+    position: relative;
+    z-index: 1;
+}
+
+.kds-divider-text::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--kds-color-divider);
+}
+
+/* ========================================
+   CARD ICON CONTENT PATTERN
+   Card with icon on left and content on right
+   ======================================== */
+
+.kds-card-icon-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--kds-spacing-4);
+}
+
+.kds-card-icon-content-text {
+    flex: 1;
+    min-width: 0;
+}
+
+/* ========================================
+   CARD COMPONENT UTILITIES
+   Padding variants for cards
+   ======================================== */
+
+.kds-card-elevated.kds-p-0 { padding: 0; }
+.kds-card-elevated.kds-p-2 { padding: var(--kds-spacing-2); }
+.kds-card-elevated.kds-p-3 { padding: var(--kds-spacing-3); }
+.kds-card-elevated.kds-p-4 { padding: var(--kds-spacing-4); }
+.kds-card-elevated.kds-p-5 { padding: var(--kds-spacing-5); }
+.kds-card-elevated.kds-p-6 { padding: var(--kds-spacing-6); }
+.kds-card-elevated.kds-p-8 { padding: var(--kds-spacing-8); }
+
+/* ========================================
+   SNACKBAR UTILITIES
+   Position variants for snackbar/toast messages
+   ======================================== */
+
+/* Snackbar positioned at top (above modals) */
+.snackbar.kds-snackbar-top {
+    top: var(--kds-spacing-4);
+    bottom: auto;
+    z-index: 1400; /* Above modals (1300) */
+}
+
+/* ========================================
+   DIRECTIONAL SPACING UTILITIES
+   Margin and padding for individual sides
+   ======================================== */
+
+/* Margin Left */
+.kds-ml-0 { margin-left: 0; }
+.kds-ml-1 { margin-left: var(--kds-spacing-1); }
+.kds-ml-2 { margin-left: var(--kds-spacing-2); }
+.kds-ml-3 { margin-left: var(--kds-spacing-3); }
+.kds-ml-4 { margin-left: var(--kds-spacing-4); }
+.kds-ml-5 { margin-left: var(--kds-spacing-5); }
+.kds-ml-6 { margin-left: var(--kds-spacing-6); }
+.kds-ml-8 { margin-left: var(--kds-spacing-8); }
+
+/* Margin Right */
+.kds-mr-0 { margin-right: 0; }
+.kds-mr-1 { margin-right: var(--kds-spacing-1); }
+.kds-mr-2 { margin-right: var(--kds-spacing-2); }
+.kds-mr-3 { margin-right: var(--kds-spacing-3); }
+.kds-mr-4 { margin-right: var(--kds-spacing-4); }
+.kds-mr-5 { margin-right: var(--kds-spacing-5); }
+.kds-mr-6 { margin-right: var(--kds-spacing-6); }
+.kds-mr-8 { margin-right: var(--kds-spacing-8); }
+
+/* Padding Left */
+.kds-pl-0 { padding-left: 0; }
+.kds-pl-1 { padding-left: var(--kds-spacing-1); }
+.kds-pl-2 { padding-left: var(--kds-spacing-2); }
+.kds-pl-3 { padding-left: var(--kds-spacing-3); }
+.kds-pl-4 { padding-left: var(--kds-spacing-4); }
+.kds-pl-5 { padding-left: var(--kds-spacing-5); }
+.kds-pl-6 { padding-left: var(--kds-spacing-6); }
+.kds-pl-8 { padding-left: var(--kds-spacing-8); }
+
+/* Padding Right */
+.kds-pr-0 { padding-right: 0; }
+.kds-pr-1 { padding-right: var(--kds-spacing-1); }
+.kds-pr-2 { padding-right: var(--kds-spacing-2); }
+.kds-pr-3 { padding-right: var(--kds-spacing-3); }
+.kds-pr-4 { padding-right: var(--kds-spacing-4); }
+.kds-pr-5 { padding-right: var(--kds-spacing-5); }
+.kds-pr-6 { padding-right: var(--kds-spacing-6); }
+.kds-pr-8 { padding-right: var(--kds-spacing-8); }
+
+/* Colors */
+.kds-error-text {
+  color: var(--kds-color-error-main) !important;
+}
+
+/* Z-index */
+
+.z-1000 {
+    z-index: 1000;
+}