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

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-04-01T17:47:56.079Z
+ * Generated: 2026-04-06T19:00:54.492Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -78,6 +78,18 @@
   /* Divider */
   --kds-color-divider: rgba(0, 0, 0, 0.12);
 
+  /* Gray palette - Neutral colors */
+  --kds-color-gray-50: #F9FAFB;
+  --kds-color-gray-100: #F3F4F6;
+  --kds-color-gray-200: #E5E7EB;
+  --kds-color-gray-300: #D1D5DB;
+  --kds-color-gray-400: #9CA3AF;
+  --kds-color-gray-500: #6B7280;
+  --kds-color-gray-600: #4B5563;
+  --kds-color-gray-700: #374151;
+  --kds-color-gray-800: #1F2937;
+  --kds-color-gray-900: #111827;
+
   /* Input borders */
   --kds-color-input-enabled-border: rgba(0, 0, 0, 0.23);
   --kds-color-input-hover-border: rgba(0, 0, 0, 0.87);
@@ -169,6 +181,14 @@
   --kds-spacing-10: 80px;
   --kds-spacing-11: 88px;
   --kds-spacing-12: 96px;
+  --kds-spacing-20: 160px;
+  --kds-spacing-0-5: 4px;
+  --kds-spacing-0-75: 6px;
+  --kds-spacing-1-5: 12px;
+  --kds-spacing-2-5: 20px;
+  --kds-spacing-3-5: 28px;
+  --kds-spacing-4-5: 36px;
+  --kds-spacing-5-5: 44px;
 
   /* Semantic spacing */
   --kds-spacing-input-padding-y: 16px;
@@ -233,6 +253,19 @@
   --kds-border-medium: #999999;
   --kds-border-dark: #666666;
 
+  /* ==========================================================================
+     SEMANTIC ALIASES
+     ========================================================================== */
+
+
+  /* Surface aliases */
+  --kds-surface-base: var(--kds-color-background-default);
+
+  /* Text aliases */
+  --kds-text-primary: var(--kds-color-text-primary);
+  --kds-text-secondary: var(--kds-color-text-secondary);
+  --kds-text-disabled: var(--kds-color-text-disabled);
+
   /* ==========================================================================
      SHADOW TOKENS
      ========================================================================== */
@@ -895,20 +928,9 @@ a.kds-btn.kds-btn-md {
     box-shadow: var(--kds-shadow-6);
 }
 
-/* Main content card (centered, max-width) */
-.kds-card-main {
-    background: var(--kds-color-background-paper);
-    border-radius: var(--kds-radius-md);
-    padding: var(--kds-spacing-2);
-    max-width: 800px;
-    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 {
+    .khipu-card-elevated {
         padding: var(--kds-spacing-3);
         border-radius: var(--kds-radius-md);
     }
@@ -916,8 +938,7 @@ a.kds-btn.kds-btn-md {
 
 @media (max-width: 480px) {
     .kds-card-elevated,
-    .khipu-card-elevated,
-    .kds-card-main {
+    .khipu-card-elevated {
         padding: var(--kds-spacing-2);
     }
 }
@@ -989,8 +1010,8 @@ a.kds-btn.kds-btn-md {
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-6);
-    padding: var(--kds-spacing-8);
+    gap: var(--kds-spacing-2);
+    padding: var(--kds-spacing-4);
     border-radius: var(--kds-radius-lg);
     border: 2px solid var(--kds-border-medium);
     max-width: 400px; /* Increased from 365px for better text spacing */
@@ -1007,7 +1028,7 @@ a.kds-btn.kds-btn-md {
 }
 
 /* Recommended Plan */
-.kds-card-plan.recommended {
+.recommended {
     border-color: var(--primary);
     background: linear-gradient(to bottom, rgba(131, 71, 173, 0.05), var(--kds-surface-base));
     box-shadow: var(--kds-shadow-elevation-3);
@@ -1109,36 +1130,6 @@ a.kds-btn.kds-btn-md {
     color: var(--kds-text-disabled);
 }
 
-/* Verification/Status card (from onboarding patterns) */
-.kds-card-status {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 20px;
-    min-height: 80px;
-    border-radius: 6px;
-    border: 1px solid var(--kds-border-light);
-    gap: var(--kds-spacing-4);
-    background: var(--kds-surface-base);
-    transition: background 0.2s ease;
-}
-
-.kds-card-status.muted {
-    border-color: transparent;
-    background: var(--kds-surface-elevated);
-}
-
-.kds-card-status .status-icon {
-    flex-shrink: 0;
-    font-size: 24px;
-    min-width: 24px;
-    min-height: 24px;
-}
-
-.kds-card-status .status-content {
-    flex: 1;
-}
-
 /* Card sections (header, body, footer) */
 .kds-card-header {
     margin-bottom: var(--kds-spacing-3);
@@ -1867,173 +1858,6 @@ body.dark {
   color: var(--primary);
 }
 
-/* ========================================
-   Snackbar Components (Material Design 3)
-   Floating notifications at bottom of screen
-   ======================================== */
-
-/* Base snackbar - extends BeerCSS .snackbar */
-.kds-snackbar {
-    position: fixed;
-    bottom: var(--kds-spacing-3);
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: var(--kds-z-index-snackbar);
-
-    /* Layout */
-    display: flex;
-    align-items: center;
-    gap: var(--kds-spacing-2);
-
-    /* Sizing */
-    min-width: 344px;
-    max-width: 672px;
-    padding: var(--kds-spacing-2) var(--kds-spacing-3);
-
-    /* Styling */
-    border-radius: var(--kds-radius-sm);
-    box-shadow: var(--kds-shadow-8);
-
-    /* Typography */
-    font-family: var(--kds-font-family-primary);
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-medium);
-    line-height: var(--kds-line-height-normal);
-
-    /* Animation */
-    animation: kds-snackbar-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Snackbar animation */
-@keyframes kds-snackbar-in {
-    from {
-        transform: translateX(-50%) translateY(100px);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(-50%) translateY(0);
-        opacity: 1;
-    }
-}
-
-/* Icon */
-.kds-snackbar-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 */
-.kds-snackbar-content {
-    flex: 1;
-    min-width: 0;
-}
-
-/* Action button (optional) */
-.kds-snackbar-action {
-    flex-shrink: 0;
-}
-
-/* Snackbar Variants */
-.kds-snackbar.kds-success {
-    background: var(--kds-snackbar-success-bg);
-    border: 1px solid 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.kds-success .kds-snackbar-action button,
-.kds-snackbar.kds-success .kds-snackbar-action .kds-btn {
-    color: var(--kds-color-success-dark);
-}
-
-.kds-snackbar.kds-warning {
-    background: var(--kds-snackbar-warning-bg);
-    border: 1px solid var(--kds-color-warning-main);
-    color: var(--kds-color-warning-dark);
-}
-
-.kds-snackbar.kds-warning .kds-snackbar-icon {
-    color: var(--kds-color-warning-dark);
-}
-
-.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-dark);
-}
-
-.kds-snackbar.kds-error .kds-snackbar-icon {
-    color: var(--kds-color-error-dark);
-}
-
-.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.kds-info {
-    background: var(--kds-snackbar-info-bg);
-    border: 1px solid var(--kds-color-info-main);
-    color: var(--kds-color-info-dark);
-}
-
-.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 */
-.kds-snackbar.static {
-    position: relative;
-    left: auto;
-    bottom: auto;
-    transform: none;
-    margin-bottom: var(--kds-spacing-3);
-    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 {
-        min-width: calc(100vw - var(--kds-spacing-4));
-        max-width: calc(100vw - var(--kds-spacing-4));
-        left: var(--kds-spacing-2);
-        right: var(--kds-spacing-2);
-        transform: translateX(0);
-    }
-
-    @keyframes kds-snackbar-in {
-        from {
-            transform: translateY(100px);
-            opacity: 0;
-        }
-        to {
-            transform: translateY(0);
-            opacity: 1;
-        }
-    }
-}
-
 /* ========================================
    TOOLTIPS - Personaliza Beer CSS .tooltip
    ======================================== */
@@ -2050,7 +1874,7 @@ body.dark {
     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);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-2);
     box-shadow: var(--kds-shadow-4);
 }
 
@@ -2110,52 +1934,11 @@ body.dark {
     max-width: 800px;
 }
 
-/* Status card content styling */
-.kds-card-status .status-content strong {
-    display: block;
-    font-weight: var(--kds-font-weight-semibold);
-    margin-bottom: var(--kds-spacing-1);
-}
-
-.kds-card-status .status-content p {
-    margin: 0;
-    font-size: var(--kds-font-size-sm);
-    color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
-}
-
-/* Status icon colors */
-.kds-card-status .status-icon.success {
-    color: var(--kds-color-success);
-}
-
-.kds-card-status .status-icon.warning {
-    color: var(--kds-color-warning);
-}
-
-.kds-card-status .status-icon.error {
-    color: var(--kds-color-error);
-}
-
-.kds-card-status .status-icon.info {
-    color: var(--kds-color-info);
-}
-
 /* Card action buttons full width */
-.kds-card-flow button,
 .kds-card-plan button {
     width: 100%;
 }
 
-/* Flow card content spacing */
-.kds-card-flow h3 {
-    margin-top: 0;
-}
-
-.kds-card-flow ul {
-    margin: var(--kds-spacing-4) 0;
-    padding-left: var(--kds-spacing-5);
-}
-
 /* Plan card title */
 .kds-card-plan h3 {
     margin: 0;
@@ -2232,68 +2015,6 @@ label.radio:has(input:disabled) {
    Multi-stage onboarding flow with form validation
    ======================================== */
 
-/* Onboarding Container - Main wrapper for all stages */
-.kds-onboarding-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    background: var(--kds-surface-background);
-}
-
-/* Onboarding Header - Contains stepper and progress */
-.kds-onboarding-header {
-    background: var(--kds-color-background-paper);
-    border-bottom: 1px solid var(--kds-border-light);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-
-/* Onboarding Main - Content area */
-.kds-onboarding-main {
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    padding: var(--kds-onboarding-padding);
-}
-
-/* Onboarding Footer - Action buttons */
-.kds-onboarding-footer {
-    flex-shrink: 0;
-    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;
-    align-items: center;
-    gap: var(--kds-spacing-3);
-    position: sticky;
-    bottom: 0;
-    z-index: 100;
-}
-
-.kds-onboarding-footer .button-group {
-    display: flex;
-    gap: var(--kds-spacing-3);
-    align-items: center;
-}
-
-@media (max-width: 768px) {
-    .kds-onboarding-footer {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .kds-onboarding-footer .button-group {
-        width: 100%;
-        flex-direction: column;
-    }
-
-    .kds-onboarding-footer button {
-        width: 100% !important;
-    }
-}
-
 /* Stage Layout - Individual stage wrapper */
 .kds-stage {
     max-width: var(--kds-onboarding-max-width);
@@ -2360,544 +2081,58 @@ label.radio:has(input:disabled) {
 }
 
 /* ========================================
-   FILE UPLOAD COMPONENT
-   Drag-and-drop file upload with preview
+   MODAL BASE CONFIGURATION
+   Override BeerCSS modal defaults
    ======================================== */
 
-.kds-file-upload {
-    width: 100%;
-}
-
-/* Upload Zone - Drag and drop area */
-.kds-file-upload-zone {
-    border: 2px dashed var(--kds-upload-zone-border);
-    border-radius: var(--kds-radius-lg);
-    background: var(--kds-upload-zone-bg);
-    padding: var(--kds-spacing-8);
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
+dialog.modal {
+    background: var(--kds-modal-bg);
+    border: none;
+    border-radius: var(--kds-modal-border-radius);
+    padding: var(--kds-modal-padding);
+    max-width: var(--kds-modal-max-width);
+    box-shadow: var(--kds-modal-shadow);
+    z-index: 1000;
 }
 
-.kds-file-upload-zone:hover {
-    border-color: var(--kds-upload-zone-border-hover);
-    background: #F3F4F6;
+dialog.modal::backdrop {
+    background: var(--kds-modal-backdrop);
 }
 
-.kds-file-upload-zone.dragover {
-    border-color: var(--kds-upload-zone-border-drag);
-    background: var(--kds-color-primary-50);
-    box-shadow: 0 0 0 4px rgba(131, 71, 173, 0.1);
-}
+/* ========================================
+   MODAL FIELD STYLES
+   Consistent input/select styling for all modals
+   ======================================== */
 
-.kds-file-upload-zone.error {
-    border-color: var(--kds-upload-zone-border-error);
-    background: var(--kds-alert-error-bg);
+dialog.modal .field {
+    margin-bottom: var(--kds-spacing-4);
+    box-sizing: border-box;
 }
 
-.kds-file-upload-zone.success {
-    border-color: var(--kds-upload-zone-border-success);
-    background: var(--kds-alert-success-bg);
+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;
 }
 
-/* Upload zone content */
-.kds-file-upload-icon {
-    font-size: 48px;
-    min-width: 48px;
-    min-height: 48px;
-    color: #9CA3AF;
-    margin-bottom: var(--kds-spacing-3);
+dialog.modal .field.border select,
+dialog.modal .field.border input {
+    font-size: var(--kds-font-size-md);
+    box-sizing: border-box;
 }
 
-.kds-file-upload-zone.dragover .kds-file-upload-icon {
-    color: var(--kds-color-primary-500);
+/* 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);
 }
 
-.kds-file-upload-text {
-    font-size: var(--kds-font-size-base);
-    font-weight: var(--kds-font-weight-medium);
-    color: var(--kds-color-text-primary);
-    margin-bottom: var(--kds-spacing-2);
-}
-
-.kds-file-upload-button {
-    color: var(--primary);
-    text-decoration: underline;
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.kds-file-upload-button:hover {
-    color: var(--kds-color-primary-700);
-}
-
-.kds-file-upload-helper {
-    font-size: var(--kds-font-size-sm);
-    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: var(--kds-color-text-secondary);
-}
-
-/* Hidden file input */
-.kds-file-upload input[type="file"] {
-    display: none;
-}
-
-/* File Preview Area */
-.kds-file-upload-preview {
-    margin-top: var(--kds-spacing-4);
-    display: flex;
-    flex-direction: column;
-    gap: var(--kds-spacing-3);
-}
-
-/* Individual File Item */
-.kds-file-upload-item {
-    display: flex;
-    align-items: center;
-    gap: var(--kds-spacing-3);
-    padding: var(--kds-spacing-3);
-    background: var(--kds-upload-item-bg);
-    border: 1px solid var(--kds-upload-item-border);
-    border-radius: var(--kds-radius-md);
-    transition: all 0.2s ease;
-}
-
-.kds-file-upload-item:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* File icon */
-.kds-file-upload-item-icon {
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    min-height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--kds-color-primary-50);
-    border-radius: var(--kds-radius-md);
-    color: var(--kds-color-primary-500);
-    font-size: 20px;
-}
-
-.kds-file-upload-item-icon i {
-    min-width: 20px;
-    min-height: 20px;
-}
-
-/* File info */
-.kds-file-upload-item-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.kds-file-upload-item-name {
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-medium);
-    color: var(--kds-color-text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.kds-file-upload-item-meta {
-    font-size: var(--kds-font-size-xs);
-    color: var(--kds-color-text-secondary);
-    margin-top: 2px;
-}
-
-.kds-file-upload-item-size {
-    font-size: var(--kds-font-size-xs);
-    color: var(--kds-color-text-secondary);
-    margin-top: 2px;
-}
-
-/* File status */
-.kds-file-upload-item-status {
-    flex-shrink: 0;
-    font-size: 20px;
-}
-
-.kds-file-upload-item-status.success {
-    color: var(--kds-color-success);
-}
-
-.kds-file-upload-item-status.error {
-    color: var(--kds-color-error);
-}
-
-.kds-file-upload-item-status.uploading {
-    color: var(--kds-color-info);
-}
-
-/* Remove button */
-.kds-file-upload-item-remove {
-    flex-shrink: 0;
-    background: transparent;
-    border: none;
-    color: #9CA3AF;
-    cursor: pointer;
-    padding: var(--kds-spacing-1);
-    border-radius: var(--kds-radius-sm);
-    transition: all 0.2s ease;
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.kds-file-upload-item-remove:hover {
-    background: var(--kds-alert-error-bg);
-    color: var(--kds-color-error);
-}
-
-/* Progress bar (for async uploads) */
-.kds-file-upload-progress {
-    height: 4px;
-    background: var(--kds-color-background-elevated);
-    border-radius: 2px;
-    overflow: hidden;
-    margin-top: var(--kds-spacing-2);
-}
-
-.kds-file-upload-progress-bar {
-    height: 100%;
-    background: var(--kds-color-primary-500);
-    transition: width 0.3s ease;
-}
-
-/* ========================================
-   OTP INPUT COMPONENT
-   6-digit one-time password input
-   ======================================== */
-
-.kds-otp-input {
-    display: flex;
-    justify-content: center;
-    gap: var(--kds-spacing-3);
-    margin: var(--kds-spacing-6) 0;
-}
-
-.kds-otp-digit {
-    width: var(--kds-otp-digit-size);
-    height: var(--kds-otp-digit-height);
-    font-size: var(--kds-font-size-2xl);
-    font-weight: var(--kds-font-weight-bold);
-    text-align: center;
-    border: 2px solid var(--kds-otp-digit-border);
-    border-radius: var(--kds-radius-md);
-    background: var(--kds-otp-digit-bg);
-    transition: all 0.2s ease;
-    outline: none;
-    color: var(--kds-color-text-primary);
-}
-
-.kds-otp-digit:focus {
-    border-color: var(--kds-otp-digit-border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.kds-otp-digit:not(:placeholder-shown) {
-    background: var(--kds-otp-digit-bg-filled);
-    border-color: var(--kds-color-success);
-}
-
-.kds-otp-digit.error {
-    border-color: var(--kds-color-error);
-    background: var(--kds-alert-error-bg);
-}
-
-/* Mobile responsive */
-@media (max-width: 480px) {
-    .kds-otp-input {
-        gap: var(--kds-spacing-2);
-    }
-
-    .kds-otp-digit {
-        width: 48px;
-        height: 56px;
-        font-size: var(--kds-font-size-xl);
-    }
-}
-
-/* ========================================
-   BANK SELECTOR GRID
-   Grid of selectable bank cards
-   ======================================== */
-
-.kds-bank-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: var(--kds-spacing-4);
-    margin: var(--kds-spacing-4) 0;
-}
-
-@media (max-width: 768px) {
-    .kds-bank-grid {
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        gap: var(--kds-spacing-3);
-    }
-}
-
-@media (max-width: 480px) {
-    .kds-bank-grid {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: var(--kds-spacing-2);
-    }
-}
-
-/* Individual Bank Item */
-.kds-bank-item {
-    aspect-ratio: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--kds-spacing-3);
-    border: 2px solid var(--kds-bank-item-border);
-    border-radius: var(--kds-radius-lg);
-    background: var(--kds-color-background-paper);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
-}
-
-.kds-bank-item:hover {
-    border-color: var(--kds-bank-item-border-hover);
-    background: var(--kds-bank-item-bg-hover);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.kds-bank-item.selected {
-    border-color: var(--kds-bank-item-border-selected);
-    background: var(--kds-bank-item-bg-selected);
-    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
-}
-
-/* Bank logo */
-.kds-bank-item-logo {
-    width: 100%;
-    height: auto;
-    max-width: 80px;
-    margin-bottom: var(--kds-spacing-2);
-    object-fit: contain;
-}
-
-/* Bank name */
-.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;
-    line-height: 1.3;
-}
-
-/* Selected checkmark */
-.kds-bank-item-check {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 24px;
-    height: 24px;
-    background: var(--kds-color-primary-500);
-    border-radius: 50%;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 14px;
-}
-
-.kds-bank-item.selected .kds-bank-item-check {
-    display: flex;
-}
-
-.kds-bank-item-check::after {
-    content: "✓";
-    font-weight: 700;
-}
-
-/* Mobile adjustments */
-@media (max-width: 480px) {
-    .kds-bank-item {
-        padding: var(--kds-spacing-2);
-    }
-
-    .kds-bank-item-logo {
-        max-width: 60px;
-    }
-
-    .kds-bank-item-name {
-        font-size: 10px;
-    }
-
-    .kds-bank-item-check {
-        width: 20px;
-        height: 20px;
-        font-size: 12px;
-        top: 4px;
-        right: 4px;
-    }
-}
-
-/* ========================================
-   MODAL BASE CONFIGURATION
-   Override BeerCSS modal defaults
-   ======================================== */
-
-dialog.modal {
-    background: var(--kds-modal-bg);
-    border: none;
-    border-radius: var(--kds-modal-border-radius);
-    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
-   ======================================== */
-
-.kds-kyc-modal {
-    background: var(--kds-modal-bg);
-    border: none;
-    border-radius: var(--kds-modal-border-radius);
-    padding: var(--kds-modal-padding);
-    max-width: var(--kds-modal-max-width);
-    margin: 0 auto;
-    box-shadow: var(--kds-modal-shadow);
-}
-
-.kds-kyc-modal-icon {
-    text-align: center;
-    margin-bottom: var(--kds-spacing-4);
-}
-
-.kds-kyc-modal-icon i {
-    font-size: 64px;
-    min-width: 64px;
-    min-height: 64px;
-    color: var(--kds-modal-icon-warning);
-}
-
-.kds-kyc-modal-title {
-    font-size: var(--kds-font-size-2xl);
-    font-weight: var(--kds-font-weight-bold);
-    color: var(--kds-modal-title-color);
-    text-align: center;
-    margin-bottom: var(--kds-spacing-4);
-}
-
-.kds-kyc-modal-message {
-    font-size: var(--kds-font-size-base);
-    color: var(--kds-modal-text-color);
-    line-height: 1.6;
-    margin-bottom: var(--kds-spacing-6);
-    text-align: center;
-}
-
-.kds-kyc-modal-contact {
-    background: var(--kds-surface-elevated);
-    border-radius: var(--kds-radius-md);
-    padding: var(--kds-spacing-4);
-    margin-bottom: var(--kds-spacing-6);
-    border-left: 4px solid var(--primary);
-}
-
-.kds-kyc-modal-contact strong {
-    display: block;
-    font-weight: var(--kds-font-weight-semibold);
-    color: var(--kds-modal-title-color);
-    margin-bottom: var(--kds-spacing-2);
-}
-
-.kds-kyc-modal-contact a {
-    color: var(--kds-color-primary-500);
-    text-decoration: none;
-    font-weight: var(--kds-font-weight-medium);
-}
-
-.kds-kyc-modal-contact a:hover {
-    text-decoration: underline;
-}
-
-.kds-kyc-modal-actions {
-    display: flex;
-    gap: var(--kds-spacing-3);
-    justify-content: center;
-}
-
-@media (max-width: 480px) {
-    .kds-kyc-modal,
-    dialog.modal {
-        padding: var(--kds-modal-padding-mobile);
-        max-width: var(--kds-modal-max-width-mobile);
-    }
-
-    .kds-kyc-modal-icon i {
-        font-size: 48px;
-        min-width: 48px;
-        min-height: 48px;
-    }
-
-    .kds-kyc-modal-actions {
-        flex-direction: column;
-    }
-
-    .kds-kyc-modal-actions button {
-        width: 100% !important;
-    }
-}
-
-/* ========================================
-   WELCOME HERO SECTION
-   Full-width gradient hero with CTA
-   ======================================== */
+/* ========================================
+   WELCOME HERO SECTION
+   Full-width gradient hero with CTA
+   ======================================== */
 
 .kds-welcome-hero {
     background: linear-gradient(135deg, var(--kds-welcome-gradient-start) 0%, var(--kds-welcome-gradient-end) 100%);
@@ -3091,49 +2326,6 @@ dialog.modal .field.border:focus-within {
     padding-left: var(--kds-spacing-5);
 }
 
-/* ========================================
-   SIGNATURE PAD
-   Canvas-based signature capture
-   ======================================== */
-
-.kds-signature-pad {
-    width: 100%;
-}
-
-.kds-signature-canvas-wrapper {
-    border: 2px solid var(--kds-signature-border);
-    border-radius: var(--kds-radius-md);
-    background: var(--kds-signature-bg);
-    padding: var(--kds-spacing-2);
-    margin-bottom: var(--kds-spacing-3);
-}
-
-.kds-signature-canvas {
-    display: block;
-    width: 100%;
-    height: 200px;
-    border-radius: var(--kds-radius-sm);
-    cursor: crosshair;
-    touch-action: none;
-}
-
-.kds-signature-actions {
-    display: flex;
-    gap: var(--kds-spacing-2);
-    justify-content: flex-end;
-}
-
-.kds-signature-clear {
-    background: transparent !important;
-    color: var(--kds-color-text-secondary) !important;
-    border: 1px solid #D1D5DB !important;
-}
-
-.kds-signature-clear:hover {
-    background: #F3F4F6 !important;
-    border-color: #9CA3AF !important;
-}
-
 /* Form Grid - 2-column responsive layout for forms */
 .kds-form-grid {
     display: grid;
@@ -3191,228 +2383,6 @@ dialog.modal .field.border:focus-within {
     border-radius: var(--kds-radius-md);
 }
 
-/* ========================================
-   SUMMARY CARD (Review/Validation)
-   Used in validation stage to show user data
-   ======================================== */
-
-.kds-summary-card {
-    background: white;
-    border: 1px solid var(--kds-border-light);
-    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 #F3F4F6;
-}
-
-.kds-summary-card-title {
-    display: flex;
-    align-items: center;
-    gap: var(--kds-spacing-2);
-    font-size: var(--kds-font-size-lg);
-    font-weight: var(--kds-font-weight-semibold);
-    color: var(--kds-color-text-primary);
-}
-
-.kds-summary-card-edit {
-    color: var(--primary);
-    text-decoration: none;
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-medium);
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    transition: opacity 0.2s ease;
-}
-
-.kds-summary-card-edit:hover {
-    text-decoration: underline;
-    opacity: 0.8;
-}
-
-.kds-summary-row {
-    display: flex;
-    padding: var(--kds-spacing-2) 0;
-}
-
-.kds-summary-label {
-    flex: 0 0 140px;
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-medium);
-    color: var(--kds-color-text-secondary);
-}
-
-.kds-summary-value {
-    flex: 1;
-    font-size: var(--kds-font-size-sm);
-    color: var(--kds-color-text-primary);
-}
-
-.kds-summary-value.badge {
-    display: inline-block;
-    padding: 4px 12px;
-    background: var(--kds-color-primary-100);
-    color: var(--primary);
-    border-radius: var(--kds-radius-full);
-    font-weight: var(--kds-font-weight-medium);
-}
-
-/* ========================================
-   SUCCESS PAGE COMPONENTS
-   Celebration/completion page layout
-   ======================================== */
-
-.kds-success-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 80vh;
-    text-align: center;
-    padding: var(--kds-spacing-8);
-}
-
-.kds-success-icon {
-    width: 120px;
-    height: 120px;
-    background: #ECFDF5;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--kds-spacing-6);
-    animation: scaleIn 0.5s ease-out;
-}
-
-@keyframes scaleIn {
-    from {
-        transform: scale(0);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-.kds-success-icon i {
-    font-size: 80px;
-    min-width: 80px;
-    min-height: 80px;
-    color: var(--kds-color-success);
-}
-
-.kds-success-title {
-    font-size: var(--kds-font-size-3xl);
-    font-weight: var(--kds-font-weight-bold);
-    color: var(--kds-color-text-primary);
-    margin-bottom: var(--kds-spacing-3);
-}
-
-.kds-success-subtitle {
-    font-size: var(--kds-font-size-lg);
-    color: var(--kds-color-text-secondary);
-    margin-bottom: var(--kds-spacing-8);
-    max-width: 600px;
-}
-
-.kds-next-steps {
-    background: white;
-    border: 1px solid var(--kds-border-light);
-    border-radius: var(--kds-radius-xl);
-    padding: var(--kds-spacing-6);
-    max-width: 700px;
-    width: 100%;
-    margin-bottom: var(--kds-spacing-6);
-    text-align: left;
-}
-
-.kds-next-steps-title {
-    font-size: var(--kds-font-size-xl);
-    font-weight: var(--kds-font-weight-semibold);
-    color: var(--kds-color-text-primary);
-    margin-bottom: var(--kds-spacing-4);
-    display: flex;
-    align-items: center;
-    gap: var(--kds-spacing-2);
-}
-
-.kds-step-item {
-    display: flex;
-    gap: var(--kds-spacing-3);
-    padding: var(--kds-spacing-3) 0;
-    border-bottom: 1px solid #F3F4F6;
-}
-
-.kds-step-item:last-child {
-    border-bottom: none;
-}
-
-.kds-step-number {
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    background: var(--kds-color-primary-100);
-    color: var(--primary);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: var(--kds-font-weight-semibold);
-    font-size: var(--kds-font-size-sm);
-}
-
-.kds-step-content {
-    flex: 1;
-}
-
-.kds-step-title {
-    font-size: var(--kds-font-size-base);
-    font-weight: var(--kds-font-weight-semibold);
-    color: var(--kds-color-text-primary);
-    margin-bottom: 4px;
-}
-
-.kds-step-description {
-    font-size: var(--kds-font-size-sm);
-    color: var(--kds-color-text-secondary);
-    line-height: 1.5;
-}
-
-.kds-success-actions {
-    display: flex;
-    gap: var(--kds-spacing-3);
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-@media (max-width: 768px) {
-    .kds-success-title {
-        font-size: var(--kds-font-size-2xl);
-    }
-
-    .kds-success-subtitle {
-        font-size: var(--kds-font-size-base);
-    }
-
-    .kds-success-actions {
-        flex-direction: column;
-        width: 100%;
-    }
-
-    .kds-success-actions button {
-        width: 100%;
-    }
-}
-
 /* ========================================
    Responsive Utilities
    ======================================== */
@@ -3669,7 +2639,7 @@ footer > .kds-container-center {
     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);
+    margin-bottom: var(--kds-spacing-0-5);
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -3915,7 +2885,7 @@ footer > .kds-container-center {
     left: 0;
     top: 0;
     bottom: 0;
-    width: calc(var(--kds-spacing-1) / 2);
+    width: var(--kds-spacing-0-5);
     background: var(--kds-color-primary-main);
 }
 
@@ -4017,11 +2987,6 @@ footer > .kds-container-center {
         font-weight: var(--kds-font-weight-semibold);
     }
 
-    /* Layout con espacio para topbar */
-    .kds-page-layout {
-        padding-top: var(--kds-spacing-7);
-    }
-
     /* Sidebar = drawer full-width */
     .kds-sidebar {
         position: fixed;
@@ -4305,7 +3270,7 @@ footer > .kds-container-center {
 
 .component-tag {
     font-size: var(--kds-font-size-xs);
-    padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-3);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-3);
     background: var(--kds-color-background-default);
     color: var(--kds-color-text-secondary);
     border-radius: var(--kds-radius-full);
@@ -4609,50 +3574,6 @@ dialog#surveyModal button.circle {
     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)
    ======================================== */