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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/beercss/khipu-beercss.css +1714 -1473
  2. package/dist/beercss/khipu-beercss.min.css +1 -1
  3. package/dist/beercss/metadata.json +4 -4
  4. package/dist/index.d.mts +26 -0
  5. package/dist/index.d.ts +26 -0
  6. package/dist/index.js +19 -6
  7. package/dist/index.mjs +19 -6
  8. package/package.json +2 -1
package/dist/beercss/khipu-beercss.css CHANGED
@@ -11,7 +11,7 @@
11
11
  *
12
12
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
13
13
  * Source: design-system/src/tokens/tokens.json
14
- * Generated: 2026-03-27T13:16:02.917Z
14
+ * Generated: 2026-04-06T17:40:39.111Z
15
15
  *
16
16
  * To regenerate:
17
17
  * cd design-system && npm run tokens:generate
@@ -138,6 +138,20 @@
138
138
  --kds-typography-button-line-height: 26px;
139
139
  --kds-typography-button-letter-spacing: 0.46px;
140
140
 
141
+ /* Typography margins */
142
+ --kds-typography-h1-margin-block-start: 0;
143
+ --kds-typography-h1-margin-block-end: 0;
144
+ --kds-typography-h2-margin-block-start: 0;
145
+ --kds-typography-h2-margin-block-end: 0;
146
+ --kds-typography-h3-margin-block-start: 0;
147
+ --kds-typography-h3-margin-block-end: 0;
148
+ --kds-typography-h4-margin-block-start: 0;
149
+ --kds-typography-h4-margin-block-end: 0;
150
+ --kds-typography-h5-margin-block-start: 0;
151
+ --kds-typography-h5-margin-block-end: 0;
152
+ --kds-typography-h6-margin-block-start: 0;
153
+ --kds-typography-h6-margin-block-end: 0;
154
+
141
155
  /* ==========================================================================
142
156
  SPACING TOKENS
143
157
  ========================================================================== */
@@ -175,6 +189,7 @@
175
189
  --kds-spacing-sidebar-nav-item-gap: 12px;
176
190
  --kds-spacing-sidebar-submenu-indent: 64px;
177
191
  --kds-spacing-sidebar-icon-size: 24px;
192
+ --kds-spacing-sidebar-icon-size-md: 32px;
178
193
  --kds-spacing-sidebar-icon-container-size: 40px;
179
194
  --kds-spacing-sidebar-label-padding-x: 24px;
180
195
  --kds-spacing-sidebar-label-padding-y: 8px;
@@ -225,6 +240,7 @@
225
240
  --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);
226
241
  --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);
227
242
  --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);
243
+ --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);
228
244
  --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);
229
245
  --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);
230
246
  --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 @@
374
390
  }
375
391
  }
376
392
 
393
+ /* ============================================================================
394
+ BASE TYPOGRAPHY STYLES
395
+ Reset default browser margins using design tokens
396
+ Higher specificity to override BeerCSS framework
397
+ ============================================================================ */
398
+
399
+ :where(h1) {
400
+ margin-block-start: var(--kds-typography-h1-margin-block-start) !important;
401
+ margin-block-end: var(--kds-typography-h1-margin-block-end) !important;
402
+ }
403
+
404
+ :where(h2) {
405
+ margin-block-start: var(--kds-typography-h2-margin-block-start) !important;
406
+ margin-block-end: var(--kds-typography-h2-margin-block-end) !important;
407
+ }
408
+
409
+ :where(h3) {
410
+ margin-block-start: var(--kds-typography-h3-margin-block-start) !important;
411
+ margin-block-end: var(--kds-typography-h3-margin-block-end) !important;
412
+ }
413
+
414
+ :where(h4) {
415
+ margin-block-start: var(--kds-typography-h4-margin-block-start) !important;
416
+ margin-block-end: var(--kds-typography-h4-margin-block-end) !important;
417
+ }
418
+
419
+ :where(h5) {
420
+ margin-block-start: var(--kds-typography-h5-margin-block-start) !important;
421
+ margin-block-end: var(--kds-typography-h5-margin-block-end) !important;
422
+ }
423
+
424
+ :where(h6) {
425
+ margin-block-start: var(--kds-typography-h6-margin-block-start) !important;
426
+ margin-block-end: var(--kds-typography-h6-margin-block-end) !important;
427
+ }
428
+
377
429
 
378
430
 
379
431
  /* Khipu BeerCSS Variable Mappings */
@@ -462,8 +514,8 @@ body.dark {
462
514
 
463
515
  /* Modal Base */
464
516
  --kds-modal-bg: var(--kds-color-background-paper);
465
- --kds-modal-padding: var(--kds-spacing-6);
466
- --kds-modal-padding-mobile: var(--kds-spacing-4);
517
+ --kds-modal-padding: var(--kds-spacing-4);
518
+ --kds-modal-padding-mobile: var(--kds-spacing-2);
467
519
  --kds-modal-border-radius: var(--kds-radius-lg);
468
520
  --kds-modal-shadow: var(--kds-shadow-4);
469
521
  --kds-modal-backdrop: rgba(0, 0, 0, 0.5);
@@ -504,6 +556,22 @@ body.dark {
504
556
  --kds-onboarding-max-width: 800px;
505
557
  --kds-onboarding-padding: var(--kds-spacing-6);
506
558
  --kds-onboarding-gap: var(--kds-spacing-6);
559
+
560
+ /* Button Size Variants */
561
+ --kds-button-sm-min-height: 36px;
562
+ --kds-button-sm-padding-y: 6px;
563
+ --kds-button-sm-padding-x: 16px;
564
+ --kds-button-sm-padding: 6px 16px;
565
+
566
+ --kds-button-md-min-height: 42px;
567
+ --kds-button-md-padding-y: 8px;
568
+ --kds-button-md-padding-x: 20px;
569
+ --kds-button-md-padding: 8px 20px;
570
+
571
+ /* Scroll Container Utilities */
572
+ --kds-scroll-sm-height: 280px;
573
+ --kds-scroll-md-height: 420px;
574
+ --kds-scroll-lg-height: 600px;
507
575
  }
508
576
 
509
577
  /* ========================================
@@ -561,6 +629,32 @@ footer {
561
629
  background-color: transparent !important;
562
630
  }
563
631
 
632
+ /* ========================================
633
+ TEXT UTILITIES OVERRIDE
634
+ Fix BeerCSS classes that use wrong color tokens
635
+ ======================================== */
636
+
637
+ /* BeerCSS confuses theme colors (primary/secondary/tertiary) with text colors.
638
+ We must use !important to override BeerCSS's !important declarations */
639
+
640
+ /* Primary text - should be almost black, not purple */
641
+ body .primary-text,
642
+ .primary-text.primary-text {
643
+ color: var(--kds-color-text-primary) !important;
644
+ }
645
+
646
+ /* Secondary text - should be gray, not green */
647
+ body .secondary-text,
648
+ .secondary-text.secondary-text {
649
+ color: var(--kds-color-text-secondary) !important;
650
+ }
651
+
652
+ /* Tertiary text - should be disabled/hint color, not tertiary theme color */
653
+ body .tertiary-text,
654
+ .tertiary-text.tertiary-text {
655
+ color: var(--kds-color-text-disabled) !important;
656
+ }
657
+
564
658
  /* ========================================
565
659
  KHIPU BUTTON SYSTEM
566
660
  Custom button components - don't modify BeerCSS classes
@@ -720,7 +814,7 @@ a.kds-btn-text {
720
814
  background: transparent;
721
815
  color: var(--kds-color-primary-main);
722
816
  border: none;
723
- padding: 6px 16px; /* Menor padding para text variant */
817
+ padding: 6px var(--kds-spacing-2); /* Menor padding para text variant */
724
818
  min-height: 32px; /* Menor altura para text variant */
725
819
  box-shadow: none;
726
820
  }
@@ -758,8 +852,30 @@ a.kds-btn > .kds-icon > i {
758
852
  min-width: var(--kds-spacing-button-icon-size);
759
853
  min-height: var(--kds-spacing-button-icon-size);
760
854
  line-height: 1;
855
+ top: 1px;
856
+ }
857
+
858
+ /* ========================================
859
+ Button Size Variants
860
+ ======================================== */
861
+
862
+ /* Small button - for compact contexts (cards with side-by-side actions) */
863
+ button.kds-btn.kds-btn-sm,
864
+ a.kds-btn.kds-btn-sm {
865
+ min-height: var(--kds-button-sm-min-height);
866
+ padding: var(--kds-button-sm-padding);
867
+ font-size: var(--kds-font-size-sm);
868
+ }
869
+
870
+ /* Medium button - balanced size between small and default */
871
+ button.kds-btn.kds-btn-md,
872
+ a.kds-btn.kds-btn-md {
873
+ min-height: var(--kds-button-md-min-height);
874
+ padding: var(--kds-button-md-padding);
761
875
  }
762
876
 
877
+ /* Default .kds-btn uses --kds-spacing-button-min-height (50px) from base styles */
878
+
763
879
  /* ========================================
764
880
  Card Components (Material Design 3)
765
881
  ======================================== */
@@ -767,51 +883,39 @@ a.kds-btn > .kds-icon > i {
767
883
  /* Base elevated card */
768
884
  .kds-card-elevated,
769
885
  .khipu-card-elevated {
770
- background: #FFFFFF;
771
- border-radius: 16px;
772
- padding: 32px;
773
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
886
+ background: var(--kds-color-background-paper);
887
+ border-radius: var(--kds-radius-md);
888
+ padding: var(--kds-spacing-2);
889
+ box-shadow: var(--kds-shadow-card);
774
890
  transition: box-shadow 0.3s ease;
775
891
  }
776
892
 
777
893
  .kds-card-elevated:hover,
778
894
  .khipu-card-elevated:hover {
779
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
780
- }
781
-
782
- /* Main content card (centered, max-width) */
783
- .kds-card-main {
784
- background: #FFFFFF;
785
- border-radius: 16px;
786
- padding: 32px;
787
- max-width: 800px;
788
- margin: 24px auto;
789
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
895
+ box-shadow: var(--kds-shadow-6);
790
896
  }
791
897
 
792
898
  @media (max-width: 768px) {
793
899
  .kds-card-elevated,
794
- .khipu-card-elevated,
795
- .kds-card-main {
796
- padding: 24px;
797
- border-radius: 12px;
900
+ .khipu-card-elevated {
901
+ padding: var(--kds-spacing-3);
902
+ border-radius: var(--kds-radius-md);
798
903
  }
799
904
  }
800
905
 
801
906
  @media (max-width: 480px) {
802
907
  .kds-card-elevated,
803
- .khipu-card-elevated,
804
- .kds-card-main {
805
- padding: 12px;
908
+ .khipu-card-elevated {
909
+ padding: var(--kds-spacing-2);
806
910
  }
807
911
  }
808
912
 
809
913
  /* Selection card */
810
914
  .kds-card-selector {
811
- padding: 24px;
812
- border-radius: 12px;
813
- border: 2px solid #E5E7EB; /* gray-200 */
814
- background: #FFFFFF;
915
+ padding: var(--kds-spacing-3);
916
+ border-radius: var(--kds-radius-md);
917
+ border: 2px solid var(--kds-border-light);
918
+ background: var(--kds-color-background-paper);
815
919
  transition: all 0.3s ease;
816
920
  text-align: left;
817
921
  cursor: pointer;
@@ -853,7 +957,7 @@ a.kds-btn > .kds-icon > i {
853
957
  /* Title */
854
958
  .kds-card-selector-title {
855
959
  font-weight: 600;
856
- color: #111827; /* gray-900 */
960
+ color: var(--kds-color-text-primary);
857
961
  margin-bottom: 8px;
858
962
  font-size: 16px;
859
963
  }
@@ -873,8 +977,8 @@ a.kds-btn > .kds-icon > i {
873
977
  position: relative;
874
978
  display: flex;
875
979
  flex-direction: column;
876
- gap: var(--kds-spacing-6);
877
- padding: var(--kds-spacing-8);
980
+ gap: var(--kds-spacing-2);
981
+ padding: var(--kds-spacing-4);
878
982
  border-radius: var(--kds-radius-lg);
879
983
  border: 2px solid var(--kds-border-medium);
880
984
  max-width: 400px; /* Increased from 365px for better text spacing */
@@ -891,7 +995,7 @@ a.kds-btn > .kds-icon > i {
891
995
  }
892
996
 
893
997
  /* Recommended Plan */
894
- .kds-card-plan.recommended {
998
+ .recommended {
895
999
  border-color: var(--primary);
896
1000
  background: linear-gradient(to bottom, rgba(131, 71, 173, 0.05), var(--kds-surface-base));
897
1001
  box-shadow: var(--kds-shadow-elevation-3);
@@ -993,61 +1097,36 @@ a.kds-btn > .kds-icon > i {
993
1097
  color: var(--kds-text-disabled);
994
1098
  }
995
1099
 
996
- /* Verification/Status card (from onboarding patterns) */
997
- .kds-card-status {
998
- display: flex;
999
- align-items: center;
1000
- justify-content: space-between;
1001
- padding: 10px 20px;
1002
- min-height: 80px;
1003
- border-radius: 6px;
1004
- border: 1px solid var(--kds-border-light);
1005
- gap: var(--kds-spacing-4);
1006
- background: var(--kds-surface-base);
1007
- transition: background 0.2s ease;
1008
- }
1009
-
1010
- .kds-card-status.muted {
1011
- border-color: transparent;
1012
- background: var(--kds-surface-elevated);
1013
- }
1014
-
1015
- .kds-card-status .status-icon {
1016
- flex-shrink: 0;
1017
- font-size: 24px;
1018
- min-width: 24px;
1019
- min-height: 24px;
1020
- }
1021
-
1022
- .kds-card-status .status-content {
1023
- flex: 1;
1024
- }
1025
-
1026
1100
  /* Card sections (header, body, footer) */
1027
1101
  .kds-card-header {
1028
- padding-bottom: var(--kds-spacing-3);
1029
- border-bottom: 1px solid var(--kds-border-light);
1030
1102
  margin-bottom: var(--kds-spacing-3);
1031
1103
  }
1032
1104
 
1033
1105
  .kds-card-header h2,
1034
1106
  .kds-card-header h3 {
1035
1107
  margin: 0;
1036
- font-weight: var(--kds-font-weight-bold);
1108
+ font-weight: var(--kds-font-weight-semibold);
1109
+ font-size: var(--kds-font-size-lg);
1110
+ word-break: break-word;
1111
+ }
1112
+
1113
+ .kds-card-header i {
1114
+ margin-bottom: 0;
1115
+ font-size: var(--kds-spacing-sidebar-icon-size-md);
1116
+ height: var(--kds-spacing-sidebar-icon-size-md);
1117
+ width: var(--kds-spacing-sidebar-icon-size-md);
1037
1118
  }
1038
1119
 
1039
1120
  .kds-card-body {
1040
1121
  padding: 0;
1041
- margin-bottom: var(--kds-spacing-3);
1042
1122
  }
1043
1123
 
1044
1124
  .kds-card-footer {
1045
- padding-top: var(--kds-spacing-3);
1046
- border-top: 1px solid var(--kds-border-light);
1047
1125
  margin-top: 0;
1048
1126
  display: flex;
1049
- flex-direction: column;
1127
+ flex-direction: row;
1050
1128
  gap: var(--kds-spacing-2);
1129
+ margin-top: var(--kds-spacing-3);
1051
1130
  }
1052
1131
 
1053
1132
  .kds-card-footer button,
@@ -1073,7 +1152,7 @@ a.kds-btn > .kds-icon > i {
1073
1152
  .khipu-hero {
1074
1153
  background: linear-gradient(135deg, var(--khipu-primary) 0%, var(--khipu-primary-dark) 100%);
1075
1154
  color: white;
1076
- padding: 64px 24px;
1155
+ padding: var(--kds-spacing-8) var(--kds-spacing-3);
1077
1156
  text-align: center;
1078
1157
  border-radius: 0 0 24px 24px;
1079
1158
  margin-bottom: 32px;
@@ -1099,12 +1178,12 @@ a.kds-btn > .kds-icon > i {
1099
1178
  display: grid;
1100
1179
  grid-template-columns: 1fr;
1101
1180
  gap: var(--kds-spacing-4);
1102
- align-items: start;
1181
+ align-items: stretch;
1103
1182
  }
1104
1183
 
1105
1184
  @media (min-width: 768px) {
1106
1185
  .kds-grid-2col {
1107
- grid-template-columns: 1fr 1fr;
1186
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1108
1187
  }
1109
1188
  }
1110
1189
 
@@ -1128,13 +1207,13 @@ a.kds-btn > .kds-icon > i {
1128
1207
 
1129
1208
  @media (min-width: 768px) {
1130
1209
  .kds-grid-3col {
1131
- grid-template-columns: repeat(2, 1fr);
1210
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1132
1211
  }
1133
1212
  }
1134
1213
 
1135
1214
  @media (min-width: 1024px) {
1136
1215
  .kds-grid-3col {
1137
- grid-template-columns: repeat(3, 1fr);
1216
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1138
1217
  }
1139
1218
  }
1140
1219
 
@@ -1146,16 +1225,27 @@ a.kds-btn > .kds-icon > i {
1146
1225
 
1147
1226
  @media (min-width: 768px) {
1148
1227
  .kds-grid-4col {
1149
- grid-template-columns: repeat(2, 1fr);
1228
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1150
1229
  }
1151
1230
  }
1152
1231
 
1153
1232
  @media (min-width: 1024px) {
1154
1233
  .kds-grid-4col {
1155
- grid-template-columns: repeat(4, 1fr);
1234
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1156
1235
  }
1157
1236
  }
1158
1237
 
1238
+ /* Grid cell stretch - ensures all cards in grid have same height */
1239
+ .kds-grid-cell-stretch {
1240
+ display: flex;
1241
+ }
1242
+
1243
+ .kds-grid-cell-stretch > * {
1244
+ flex: 1;
1245
+ display: flex;
1246
+ flex-direction: column;
1247
+ }
1248
+
1159
1249
  /* Flex utilities */
1160
1250
  .kds-flex {
1161
1251
  display: flex;
@@ -1169,6 +1259,10 @@ a.kds-btn > .kds-icon > i {
1169
1259
  flex-direction: row;
1170
1260
  }
1171
1261
 
1262
+ .kds-flex-wrap {
1263
+ flex-wrap: wrap;
1264
+ }
1265
+
1172
1266
  .kds-justify-start {
1173
1267
  justify-content: flex-start;
1174
1268
  }
@@ -1206,6 +1300,30 @@ a.kds-btn > .kds-icon > i {
1206
1300
  .kds-gap-6 { gap: var(--kds-spacing-6); }
1207
1301
  .kds-gap-8 { gap: var(--kds-spacing-8); }
1208
1302
 
1303
+ /* Scroll container utilities */
1304
+ .kds-scroll-container {
1305
+ overflow-y: auto;
1306
+ overflow-x: hidden;
1307
+ }
1308
+
1309
+ .kds-scroll-sm {
1310
+ max-height: var(--kds-scroll-sm-height);
1311
+ overflow-y: auto;
1312
+ overflow-x: hidden;
1313
+ }
1314
+
1315
+ .kds-scroll-md {
1316
+ max-height: var(--kds-scroll-md-height);
1317
+ overflow-y: auto;
1318
+ overflow-x: hidden;
1319
+ }
1320
+
1321
+ .kds-scroll-lg {
1322
+ max-height: var(--kds-scroll-lg-height);
1323
+ overflow-y: auto;
1324
+ overflow-x: hidden;
1325
+ }
1326
+
1209
1327
  /* Spacing utilities - Margin */
1210
1328
  .kds-m-0 { margin: 0; }
1211
1329
  .kds-m-2 { margin: var(--kds-spacing-2); }
@@ -1252,6 +1370,7 @@ a.kds-btn > .kds-icon > i {
1252
1370
  .kds-pt-6 { padding-top: var(--kds-spacing-6); }
1253
1371
  .kds-pt-8 { padding-top: var(--kds-spacing-8); }
1254
1372
 
1373
+ .kds-pb-0 { padding-bottom: var(--kds-spacing-0) !important; }
1255
1374
  .kds-pb-4 { padding-bottom: var(--kds-spacing-4); }
1256
1375
  .kds-pb-6 { padding-bottom: var(--kds-spacing-6); }
1257
1376
  .kds-pb-8 { padding-bottom: var(--kds-spacing-8); }
@@ -1288,9 +1407,8 @@ a.kds-btn > .kds-icon > i {
1288
1407
  align-items: flex-start;
1289
1408
  gap: 0;
1290
1409
  position: relative;
1291
- padding: 24px 0;
1292
- background: #FFFFFF;
1293
- border-bottom: 1px solid #E5E7EB;
1410
+ padding: var(--kds-spacing-3) 0;
1411
+ background: var(--kds-color-background-paper);
1294
1412
  }
1295
1413
 
1296
1414
  /* Progress line connecting steps */
@@ -1301,7 +1419,7 @@ a.kds-btn > .kds-icon > i {
1301
1419
  right: 10%;
1302
1420
  top: 44px;
1303
1421
  height: 2px;
1304
- background: #E5E7EB;
1422
+ background: var(--kds-color-background-elevated);
1305
1423
  z-index: 0;
1306
1424
  }
1307
1425
 
@@ -1322,14 +1440,14 @@ a.kds-btn > .kds-icon > i {
1322
1440
  height: 40px;
1323
1441
  border-radius: 50%;
1324
1442
  margin: 0 auto;
1325
- background: #E5E7EB; /* Pending state - light gray */
1443
+ background: var(--kds-color-background-elevated); /* Pending state - light gray */
1326
1444
  position: relative;
1327
1445
  z-index: 2;
1328
1446
  transition: all 0.3s ease;
1329
1447
  display: flex;
1330
1448
  align-items: center;
1331
1449
  justify-content: center;
1332
- color: #6B7280;
1450
+ color: var(--kds-color-text-secondary);
1333
1451
  font-size: 0; /* Hide number by default */
1334
1452
  font-weight: 600;
1335
1453
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1339,7 +1457,7 @@ a.kds-btn > .kds-icon > i {
1339
1457
  .kds-step-label {
1340
1458
  margin-top: 12px;
1341
1459
  font-weight: 400;
1342
- color: #6B7280;
1460
+ color: var(--kds-color-text-secondary);
1343
1461
  line-height: 1.25;
1344
1462
  font-size: 14px;
1345
1463
  transition: color 0.3s ease;
@@ -1354,7 +1472,7 @@ a.kds-btn > .kds-icon > i {
1354
1472
  }
1355
1473
 
1356
1474
  .kds-step.current .kds-step-label {
1357
- color: #111827;
1475
+ color: var(--kds-color-text-primary);
1358
1476
  font-weight: 500;
1359
1477
  }
1360
1478
 
@@ -1365,7 +1483,7 @@ a.kds-btn > .kds-icon > i {
1365
1483
  }
1366
1484
 
1367
1485
  .kds-step.completed .kds-step-label {
1368
- color: #111827;
1486
+ color: var(--kds-color-text-primary);
1369
1487
  }
1370
1488
 
1371
1489
  /* Checkmark for completed steps - Material Symbols icon */
@@ -1384,13 +1502,13 @@ a.kds-btn > .kds-icon > i {
1384
1502
 
1385
1503
  /* Pending step */
1386
1504
  .kds-step .kds-step-indicator {
1387
- background: #E5E7EB;
1505
+ background: var(--kds-color-background-elevated);
1388
1506
  }
1389
1507
 
1390
1508
  /* Responsive - Tablet */
1391
1509
  @media (max-width: 768px) {
1392
1510
  .kds-stepper {
1393
- padding: 24px 0;
1511
+ padding: var(--kds-spacing-3) 0;
1394
1512
  }
1395
1513
 
1396
1514
  .kds-step-indicator {
@@ -1495,8 +1613,8 @@ body.kds-layout {
1495
1613
 
1496
1614
  footer.primary {
1497
1615
  background: var(--surface-container-high, #F5F5F5);
1498
- padding: 32px 24px;
1499
- margin-top: 48px;
1616
+ padding: var(--kds-spacing-4) var(--kds-spacing-3);
1617
+ margin-top: var(--kds-spacing-6);
1500
1618
  }
1501
1619
 
1502
1620
  footer.primary h6 {
@@ -1526,9 +1644,11 @@ footer.primary a:hover {
1526
1644
  .kds-form-label {
1527
1645
  font-size: 14px;
1528
1646
  font-weight: 500;
1529
- color: #111827;
1647
+ color: var(--kds-color-text-primary);
1530
1648
  margin-bottom: 8px;
1531
1649
  display: block;
1650
+ display: flex;
1651
+ gap: 5px;
1532
1652
  }
1533
1653
 
1534
1654
  /* Icon utilities for inline icons */
@@ -1661,12 +1781,6 @@ body.dark {
1661
1781
  appearance: auto;
1662
1782
  -webkit-appearance: auto;
1663
1783
  -moz-appearance: auto;
1664
-
1665
- /* Asegurar que el arrow nativo tenga espacio */
1666
- padding-right: var(--kds-spacing-10); /* 40px */
1667
- background-position: right var(--kds-spacing-4) center; /* 16px desde el borde */
1668
- background-repeat: no-repeat;
1669
- background-size: var(--kds-spacing-5); /* 20px */
1670
1784
  }
1671
1785
 
1672
1786
  /* ==========================================
@@ -1712,144 +1826,29 @@ body.dark {
1712
1826
  }
1713
1827
 
1714
1828
  /* ========================================
1715
- Snackbar Components (Material Design 3)
1716
- Floating notifications at bottom of screen
1829
+ TOOLTIPS - Personaliza Beer CSS .tooltip
1717
1830
  ======================================== */
1718
1831
 
1719
- /* Base snackbar - extends BeerCSS .snackbar */
1720
- .kds-snackbar {
1721
- position: fixed;
1722
- bottom: var(--kds-spacing-3);
1723
- left: 50%;
1724
- transform: translateX(-50%);
1725
- z-index: var(--kds-z-index-snackbar);
1726
-
1727
- /* Layout */
1728
- display: flex;
1729
- align-items: center;
1730
- gap: var(--kds-spacing-2);
1731
-
1732
- /* Sizing */
1733
- min-width: 344px;
1734
- max-width: 672px;
1735
- padding: var(--kds-spacing-2) var(--kds-spacing-3);
1736
-
1737
- /* Styling */
1738
- border-radius: var(--kds-radius-sm);
1739
- box-shadow: var(--kds-shadow-8);
1832
+ /*
1833
+ * Beer CSS tiene la funcionalidad de .tooltip
1834
+ * Aquí sobrescribimos colores y estilos con tokens de Khipu
1835
+ */
1740
1836
 
1741
- /* Typography */
1837
+ .tooltip {
1838
+ background-color: var(--kds-color-text-primary);
1839
+ color: var(--kds-color-background-paper);
1742
1840
  font-family: var(--kds-font-family-primary);
1743
- font-size: var(--kds-font-size-sm);
1841
+ font-size: var(--kds-font-size-xs);
1744
1842
  font-weight: var(--kds-font-weight-medium);
1745
- line-height: var(--kds-line-height-normal);
1746
-
1747
- /* Animation */
1748
- animation: kds-snackbar-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1749
- }
1750
-
1751
- /* Snackbar animation */
1752
- @keyframes kds-snackbar-in {
1753
- from {
1754
- transform: translateX(-50%) translateY(100px);
1755
- opacity: 0;
1756
- }
1757
- to {
1758
- transform: translateX(-50%) translateY(0);
1759
- opacity: 1;
1760
- }
1761
- }
1762
-
1763
- /* Icon */
1764
- .kds-snackbar-icon {
1765
- flex-shrink: 0;
1766
- font-size: var(--kds-spacing-button-icon-size);
1767
- min-width: var(--kds-spacing-button-icon-size);
1768
- min-height: var(--kds-spacing-button-icon-size);
1769
- }
1770
-
1771
- /* Content */
1772
- .kds-snackbar-content {
1773
- flex: 1;
1774
- min-width: 0;
1775
- }
1776
-
1777
- /* Action button (optional) */
1778
- .kds-snackbar-action {
1779
- flex-shrink: 0;
1780
- }
1781
-
1782
- /* Snackbar Variants */
1783
- .kds-snackbar.success {
1784
- background: var(--kds-snackbar-success-bg);
1785
- border: 1px solid var(--kds-color-success-main);
1786
- color: var(--kds-color-success-main);
1787
- }
1788
-
1789
- .kds-snackbar.success .kds-snackbar-icon {
1790
- color: var(--kds-color-success-main);
1791
- }
1792
-
1793
- .kds-snackbar.warning {
1794
- background: var(--kds-snackbar-warning-bg);
1795
- border: 1px solid var(--kds-color-warning-main);
1796
- color: var(--kds-color-warning-main);
1797
- }
1798
-
1799
- .kds-snackbar.warning .kds-snackbar-icon {
1800
- color: var(--kds-color-warning-main);
1801
- }
1802
-
1803
- .kds-snackbar.error {
1804
- background: var(--kds-snackbar-error-bg);
1805
- border: 1px solid var(--kds-color-error-main);
1806
- color: var(--kds-color-error-main);
1807
- }
1808
-
1809
- .kds-snackbar.error .kds-snackbar-icon {
1810
- color: var(--kds-color-error-main);
1811
- }
1812
-
1813
- .kds-snackbar.info {
1814
- background: var(--kds-snackbar-info-bg);
1815
- border: 1px solid var(--kds-color-info-main);
1816
- color: var(--kds-color-info-main);
1817
- }
1818
-
1819
- .kds-snackbar.info .kds-snackbar-icon {
1820
- color: var(--kds-color-info-main);
1843
+ border-radius: var(--kds-radius-sm);
1844
+ padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-2);
1845
+ box-shadow: var(--kds-shadow-4);
1821
1846
  }
1822
1847
 
1823
- /* Static variant for showcase/demo purposes */
1824
- .kds-snackbar.static {
1848
+ /* Tooltip wrapper for inline icons - matches demo pattern */
1849
+ .kds-tooltip-icon {
1825
1850
  position: relative;
1826
- left: auto;
1827
- bottom: auto;
1828
- transform: none;
1829
- margin-bottom: var(--kds-spacing-3);
1830
- animation: none;
1831
- }
1832
-
1833
- /* Mobile responsive */
1834
- @media (max-width: 768px) {
1835
- .kds-snackbar {
1836
- min-width: calc(100vw - var(--kds-spacing-4));
1837
- max-width: calc(100vw - var(--kds-spacing-4));
1838
- left: var(--kds-spacing-2);
1839
- right: var(--kds-spacing-2);
1840
- transform: translateX(0);
1841
- }
1842
-
1843
- @keyframes kds-snackbar-in {
1844
- from {
1845
- transform: translateY(100px);
1846
- opacity: 0;
1847
- }
1848
- to {
1849
- transform: translateY(0);
1850
- opacity: 1;
1851
- }
1852
- }
1851
+ display: inline-flex;
1853
1852
  }
1854
1853
 
1855
1854
  /* ========================================
@@ -1890,6 +1889,10 @@ body.dark {
1890
1889
  max-width: 400px;
1891
1890
  }
1892
1891
 
1892
+ .kds-max-w-500 {
1893
+ max-width: 500px;
1894
+ }
1895
+
1893
1896
  .kds-max-w-md {
1894
1897
  max-width: 600px;
1895
1898
  }
@@ -1898,52 +1901,11 @@ body.dark {
1898
1901
  max-width: 800px;
1899
1902
  }
1900
1903
 
1901
- /* Status card content styling */
1902
- .kds-card-status .status-content strong {
1903
- display: block;
1904
- font-weight: var(--kds-font-weight-semibold);
1905
- margin-bottom: var(--kds-spacing-1);
1906
- }
1907
-
1908
- .kds-card-status .status-content p {
1909
- margin: 0;
1910
- font-size: var(--kds-font-size-sm);
1911
- color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
1912
- }
1913
-
1914
- /* Status icon colors */
1915
- .kds-card-status .status-icon.success {
1916
- color: var(--kds-color-success);
1917
- }
1918
-
1919
- .kds-card-status .status-icon.warning {
1920
- color: var(--kds-color-warning);
1921
- }
1922
-
1923
- .kds-card-status .status-icon.error {
1924
- color: var(--kds-color-error);
1925
- }
1926
-
1927
- .kds-card-status .status-icon.info {
1928
- color: var(--kds-color-info);
1929
- }
1930
-
1931
1904
  /* Card action buttons full width */
1932
- .kds-card-flow button,
1933
1905
  .kds-card-plan button {
1934
1906
  width: 100%;
1935
1907
  }
1936
1908
 
1937
- /* Flow card content spacing */
1938
- .kds-card-flow h3 {
1939
- margin-top: 0;
1940
- }
1941
-
1942
- .kds-card-flow ul {
1943
- margin: var(--kds-spacing-4) 0;
1944
- padding-left: var(--kds-spacing-5);
1945
- }
1946
-
1947
1909
  /* Plan card title */
1948
1910
  .kds-card-plan h3 {
1949
1911
  margin: 0;
@@ -1973,26 +1935,18 @@ label.checkbox,
1973
1935
  label.radio {
1974
1936
  display: flex;
1975
1937
  align-items: center;
1976
- padding: var(--kds-spacing-3) var(--kds-spacing-4);
1938
+ padding: var(--kds-spacing-2) 0;
1977
1939
  border-radius: 8px;
1978
1940
  cursor: pointer;
1979
1941
  transition: background-color 0.2s;
1980
1942
  font-size: 16px;
1981
1943
  line-height: 1.5;
1982
- color: #111827;
1983
- }
1984
-
1985
- label.checkbox:hover,
1986
- label.radio:hover {
1987
- background-color: #F9FAFB;
1944
+ color: var(--kds-color-text-primary);
1988
1945
  }
1989
1946
 
1990
1947
  /* Checkbox/Radio Input */
1991
1948
  label.checkbox input[type="checkbox"],
1992
1949
  label.radio input[type="radio"] {
1993
- width: 20px;
1994
- height: 20px;
1995
- margin-right: var(--kds-spacing-3);
1996
1950
  cursor: pointer;
1997
1951
  flex-shrink: 0;
1998
1952
  }
@@ -2028,112 +1982,51 @@ label.radio:has(input:disabled) {
2028
1982
  Multi-stage onboarding flow with form validation
2029
1983
  ======================================== */
2030
1984
 
2031
- /* Onboarding Container - Main wrapper for all stages */
2032
- .kds-onboarding-container {
2033
- display: flex;
2034
- flex-direction: column;
2035
- min-height: 100vh;
2036
- background: var(--kds-surface-background);
2037
- }
2038
-
2039
- /* Onboarding Header - Contains stepper and progress */
2040
- .kds-onboarding-header {
2041
- background: #FFFFFF;
2042
- border-bottom: 1px solid #E5E7EB;
2043
- position: sticky;
2044
- top: 0;
2045
- z-index: 100;
1985
+ /* Stage Layout - Individual stage wrapper */
1986
+ .kds-stage {
1987
+ max-width: var(--kds-onboarding-max-width);
1988
+ margin: 0 auto;
1989
+ width: 100%;
2046
1990
  }
2047
1991
 
2048
- /* Onboarding Main - Content area */
2049
- .kds-onboarding-main {
2050
- flex: 1 0 auto;
1992
+ /* Stage Header - Title and subtitle */
1993
+ .kds-stage-header {
2051
1994
  display: flex;
2052
1995
  flex-direction: column;
2053
- padding: var(--kds-onboarding-padding);
1996
+ align-items: flex-start;
1997
+ gap: var(--kds-spacing-1);
1998
+ margin-bottom: var(--kds-spacing-2);
2054
1999
  }
2055
2000
 
2056
- /* Onboarding Footer - Action buttons */
2057
- .kds-onboarding-footer {
2058
- flex-shrink: 0;
2059
- background: #FFFFFF;
2060
- border-top: 1px solid #E5E7EB;
2061
- padding: var(--kds-spacing-4) var(--kds-spacing-6);
2001
+ /* Stage Content - Main form/content area */
2002
+ .kds-stage-content {
2062
2003
  display: flex;
2063
- justify-content: space-between;
2064
- align-items: center;
2065
- gap: var(--kds-spacing-3);
2066
- position: sticky;
2067
- bottom: 0;
2068
- z-index: 100;
2004
+ flex-direction: column;
2069
2005
  }
2070
2006
 
2071
- .kds-onboarding-footer .button-group {
2007
+ /* Stage Actions - Bottom button area (if not using sticky footer) */
2008
+ .kds-stage-actions {
2072
2009
  display: flex;
2010
+ justify-content: space-between;
2073
2011
  gap: var(--kds-spacing-3);
2074
- align-items: center;
2075
2012
  }
2076
2013
 
2077
2014
  @media (max-width: 768px) {
2078
- .kds-onboarding-footer {
2079
- flex-direction: column;
2080
- align-items: stretch;
2081
- }
2082
-
2083
- .kds-onboarding-footer .button-group {
2084
- width: 100%;
2015
+ .kds-stage-actions {
2085
2016
  flex-direction: column;
2086
2017
  }
2087
2018
 
2088
- .kds-onboarding-footer button {
2089
- width: 100% !important;
2090
- }
2091
- }
2092
-
2093
- /* Stage Layout - Individual stage wrapper */
2094
- .kds-stage {
2095
- max-width: var(--kds-onboarding-max-width);
2096
- margin: 0 auto;
2097
- width: 100%;
2098
- }
2099
-
2100
- /* Stage Header - Title and subtitle */
2101
- .kds-stage-header {
2102
- text-align: center;
2103
- margin-bottom: var(--kds-spacing-8);
2104
- }
2105
-
2106
- /* Stage Content - Main form/content area */
2107
- .kds-stage-content {
2108
- display: flex;
2109
- flex-direction: column;
2110
- gap: var(--kds-onboarding-gap);
2111
- }
2112
-
2113
- /* Stage Actions - Bottom button area (if not using sticky footer) */
2114
- .kds-stage-actions {
2115
- display: flex;
2116
- justify-content: space-between;
2117
- gap: var(--kds-spacing-3);
2118
- margin-top: var(--kds-spacing-8);
2119
- }
2120
-
2121
- @media (max-width: 768px) {
2122
- .kds-stage-actions {
2123
- flex-direction: column;
2124
- }
2125
-
2126
- .kds-stage-actions button {
2019
+ .kds-stage-actions button {
2127
2020
  width: 100% !important;
2128
2021
  }
2129
2022
  }
2130
2023
 
2131
2024
  /* Stage Section - Grouping related fields */
2132
2025
  .kds-stage-section {
2133
- background: #FFFFFF;
2026
+ background: var(--kds-color-background-paper);
2134
2027
  border-radius: var(--kds-radius-lg);
2135
2028
  padding: var(--kds-spacing-6);
2136
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
2029
+ box-shadow: var(--kds-shadow-card);
2137
2030
  }
2138
2031
 
2139
2032
  .kds-stage-section + .kds-stage-section {
@@ -2143,1573 +2036,1921 @@ label.radio:has(input:disabled) {
2143
2036
  .kds-stage-section-title {
2144
2037
  font-size: var(--kds-font-size-lg);
2145
2038
  font-weight: var(--kds-font-weight-semibold);
2146
- color: #111827;
2039
+ color: var(--kds-color-text-primary);
2147
2040
  margin-bottom: var(--kds-spacing-4);
2148
2041
  }
2149
2042
 
2150
2043
  .kds-stage-section-description {
2151
2044
  font-size: var(--kds-font-size-sm);
2152
- color: #6B7280;
2045
+ color: var(--kds-color-text-secondary);
2153
2046
  margin-bottom: var(--kds-spacing-4);
2154
2047
  line-height: 1.5;
2155
2048
  }
2156
2049
 
2157
2050
  /* ========================================
2158
- FILE UPLOAD COMPONENT
2159
- Drag-and-drop file upload with preview
2051
+ MODAL BASE CONFIGURATION
2052
+ Override BeerCSS modal defaults
2160
2053
  ======================================== */
2161
2054
 
2162
- .kds-file-upload {
2163
- width: 100%;
2055
+ dialog.modal {
2056
+ background: var(--kds-modal-bg);
2057
+ border: none;
2058
+ border-radius: var(--kds-modal-border-radius);
2059
+ padding: var(--kds-modal-padding);
2060
+ max-width: var(--kds-modal-max-width);
2061
+ box-shadow: var(--kds-modal-shadow);
2062
+ z-index: 1000;
2164
2063
  }
2165
2064
 
2166
- /* Upload Zone - Drag and drop area */
2167
- .kds-file-upload-zone {
2168
- border: 2px dashed var(--kds-upload-zone-border);
2169
- border-radius: var(--kds-radius-lg);
2170
- background: var(--kds-upload-zone-bg);
2171
- padding: var(--kds-spacing-8);
2172
- text-align: center;
2173
- cursor: pointer;
2174
- transition: all 0.3s ease;
2175
- position: relative;
2065
+ dialog.modal::backdrop {
2066
+ background: var(--kds-modal-backdrop);
2176
2067
  }
2177
2068
 
2178
- .kds-file-upload-zone:hover {
2179
- border-color: var(--kds-upload-zone-border-hover);
2180
- background: #F3F4F6;
2181
- }
2069
+ /* ========================================
2070
+ MODAL FIELD STYLES
2071
+ Consistent input/select styling for all modals
2072
+ ======================================== */
2182
2073
 
2183
- .kds-file-upload-zone.dragover {
2184
- border-color: var(--kds-upload-zone-border-drag);
2185
- background: var(--kds-color-primary-50);
2186
- box-shadow: 0 0 0 4px rgba(131, 71, 173, 0.1);
2074
+ dialog.modal .field {
2075
+ margin-bottom: var(--kds-spacing-4);
2076
+ box-sizing: border-box;
2187
2077
  }
2188
2078
 
2189
- .kds-file-upload-zone.error {
2190
- border-color: var(--kds-upload-zone-border-error);
2191
- background: var(--kds-alert-error-bg);
2079
+ dialog.modal .field.border {
2080
+ border: var(--kds-border-width-sm) solid var(--kds-color-divider);
2081
+ border-radius: var(--kds-radius-md);
2082
+ background: var(--kds-color-background-paper);
2083
+ padding: 0;
2192
2084
  }
2193
2085
 
2194
- .kds-file-upload-zone.success {
2195
- border-color: var(--kds-upload-zone-border-success);
2196
- background: var(--kds-alert-success-bg);
2086
+ dialog.modal .field.border select,
2087
+ dialog.modal .field.border input {
2088
+ font-size: var(--kds-font-size-md);
2089
+ box-sizing: border-box;
2197
2090
  }
2198
2091
 
2199
- /* Upload zone content */
2200
- .kds-file-upload-icon {
2201
- font-size: 48px;
2202
- min-width: 48px;
2203
- min-height: 48px;
2204
- color: #9CA3AF;
2205
- margin-bottom: var(--kds-spacing-3);
2092
+ /* Focus state - use outline to prevent width change */
2093
+ dialog.modal .field.border:focus-within {
2094
+ outline: var(--kds-border-width-md) solid var(--kds-color-primary-main);
2095
+ outline-offset: 0;
2096
+ border-color: var(--kds-color-primary-main);
2206
2097
  }
2207
2098
 
2208
- .kds-file-upload-zone.dragover .kds-file-upload-icon {
2209
- color: var(--kds-color-primary-500);
2099
+ /* ========================================
2100
+ WELCOME HERO SECTION
2101
+ Full-width gradient hero with CTA
2102
+ ======================================== */
2103
+
2104
+ .kds-welcome-hero {
2105
+ background: linear-gradient(135deg, var(--kds-welcome-gradient-start) 0%, var(--kds-welcome-gradient-end) 100%);
2106
+ color: white;
2107
+ padding: var(--kds-spacing-20) var(--kds-spacing-6);
2108
+ text-align: center;
2109
+ border-radius: 0;
2110
+ margin: 0;
2111
+ position: relative;
2112
+ overflow: hidden;
2210
2113
  }
2211
2114
 
2212
- .kds-file-upload-text {
2213
- font-size: var(--kds-font-size-base);
2214
- font-weight: var(--kds-font-weight-medium);
2215
- color: #111827;
2216
- margin-bottom: var(--kds-spacing-2);
2115
+ /* Decorative circles */
2116
+ .kds-welcome-hero::before,
2117
+ .kds-welcome-hero::after {
2118
+ content: "";
2119
+ position: absolute;
2120
+ border-radius: 50%;
2121
+ background: rgba(255, 255, 255, 0.1);
2217
2122
  }
2218
2123
 
2219
- .kds-file-upload-button {
2220
- color: var(--primary);
2221
- text-decoration: underline;
2222
- cursor: pointer;
2223
- font-weight: 600;
2124
+ .kds-welcome-hero::before {
2125
+ width: 400px;
2126
+ height: 400px;
2127
+ top: -200px;
2128
+ right: -100px;
2224
2129
  }
2225
2130
 
2226
- .kds-file-upload-button:hover {
2227
- color: var(--kds-color-primary-700);
2131
+ .kds-welcome-hero::after {
2132
+ width: 300px;
2133
+ height: 300px;
2134
+ bottom: -150px;
2135
+ left: -50px;
2228
2136
  }
2229
2137
 
2230
- .kds-file-upload-helper {
2231
- font-size: var(--kds-font-size-sm);
2232
- color: #6B7280;
2233
- display: block;
2234
- margin-top: var(--kds-spacing-1);
2138
+ .kds-welcome-hero-content {
2139
+ position: relative;
2140
+ z-index: 1;
2141
+ max-width: 800px;
2142
+ margin: 0 auto;
2235
2143
  }
2236
2144
 
2237
- .kds-file-upload-hint {
2238
- font-size: var(--kds-font-size-sm);
2239
- color: #6B7280;
2145
+ .kds-welcome-hero-icon {
2146
+ font-size: 80px;
2147
+ margin-bottom: var(--kds-spacing-4);
2148
+ opacity: 0.9;
2240
2149
  }
2241
2150
 
2242
- /* Hidden file input */
2243
- .kds-file-upload input[type="file"] {
2244
- display: none;
2151
+ .kds-welcome-hero-icon i {
2152
+ width: auto !important;
2153
+ height: auto !important;
2154
+ font-size: 80px !important;
2155
+ min-width: 80px;
2156
+ min-height: 80px;
2245
2157
  }
2246
2158
 
2247
- /* File Preview Area */
2248
- .kds-file-upload-preview {
2249
- margin-top: var(--kds-spacing-4);
2250
- display: flex;
2251
- flex-direction: column;
2252
- gap: var(--kds-spacing-3);
2159
+ /* Fix for benefit card icons - BeerCSS forces 24px, override for large icons */
2160
+ .kds-card-elevated i.icon-filled {
2161
+ width: auto !important;
2162
+ height: auto !important;
2163
+ min-width: 48px;
2164
+ min-height: 48px;
2253
2165
  }
2254
2166
 
2255
- /* Individual File Item */
2256
- .kds-file-upload-item {
2257
- display: flex;
2258
- align-items: center;
2259
- gap: var(--kds-spacing-3);
2260
- padding: var(--kds-spacing-3);
2261
- background: var(--kds-upload-item-bg);
2262
- border: 1px solid var(--kds-upload-item-border);
2263
- border-radius: var(--kds-radius-md);
2264
- transition: all 0.2s ease;
2167
+ .kds-welcome-hero-title {
2168
+ font-size: var(--kds-font-size-4xl);
2169
+ font-weight: var(--kds-font-weight-bold);
2170
+ margin-bottom: var(--kds-spacing-4);
2171
+ line-height: 1.2;
2265
2172
  }
2266
2173
 
2267
- .kds-file-upload-item:hover {
2268
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2174
+ .kds-welcome-hero-subtitle {
2175
+ font-size: var(--kds-font-size-xl);
2176
+ opacity: 0.95;
2177
+ margin-bottom: var(--kds-spacing-8);
2178
+ line-height: 1.5;
2269
2179
  }
2270
2180
 
2271
- /* File icon */
2272
- .kds-file-upload-item-icon {
2273
- flex-shrink: 0;
2274
- width: 40px;
2275
- height: 40px;
2276
- min-width: 40px;
2277
- min-height: 40px;
2181
+ .kds-welcome-hero-actions {
2278
2182
  display: flex;
2279
- align-items: center;
2183
+ gap: var(--kds-spacing-4);
2280
2184
  justify-content: center;
2281
- background: var(--kds-color-primary-50);
2282
- border-radius: var(--kds-radius-md);
2283
- color: var(--kds-color-primary-500);
2284
- font-size: 20px;
2285
2185
  }
2286
2186
 
2287
- .kds-file-upload-item-icon i {
2288
- min-width: 20px;
2289
- min-height: 20px;
2290
- }
2291
2187
 
2292
- /* File info */
2293
- .kds-file-upload-item-info {
2294
- flex: 1;
2295
- min-width: 0;
2296
- }
2188
+ @media (max-width: 768px) {
2189
+ .kds-welcome-hero {
2190
+ padding: var(--kds-spacing-12) var(--kds-spacing-4);
2191
+ }
2297
2192
 
2298
- .kds-file-upload-item-name {
2299
- font-size: var(--kds-font-size-sm);
2300
- font-weight: var(--kds-font-weight-medium);
2301
- color: #111827;
2302
- white-space: nowrap;
2303
- overflow: hidden;
2304
- text-overflow: ellipsis;
2305
- }
2193
+ .kds-welcome-hero-icon {
2194
+ font-size: 60px;
2195
+ }
2306
2196
 
2307
- .kds-file-upload-item-meta {
2308
- font-size: var(--kds-font-size-xs);
2309
- color: #6B7280;
2310
- margin-top: 2px;
2311
- }
2197
+ .kds-welcome-hero-title {
2198
+ font-size: var(--kds-font-size-3xl);
2199
+ }
2312
2200
 
2313
- .kds-file-upload-item-size {
2314
- font-size: var(--kds-font-size-xs);
2315
- color: #6B7280;
2316
- margin-top: 2px;
2317
- }
2201
+ .kds-welcome-hero-subtitle {
2202
+ font-size: var(--kds-font-size-lg);
2203
+ }
2318
2204
 
2319
- /* File status */
2320
- .kds-file-upload-item-status {
2321
- flex-shrink: 0;
2322
- font-size: 20px;
2205
+ .kds-welcome-hero-actions {
2206
+ flex-direction: column;
2207
+ align-items: stretch;
2208
+ }
2209
+
2210
+ .kds-welcome-hero-actions button {
2211
+ width: 100% !important;
2212
+ }
2323
2213
  }
2324
2214
 
2325
- .kds-file-upload-item-status.success {
2326
- color: var(--kds-color-success);
2215
+ /* ========================================
2216
+ CONTRACT ACCORDION
2217
+ Expandable terms and conditions
2218
+ ======================================== */
2219
+
2220
+ .kds-contract-accordion {
2221
+ border: 1px solid var(--kds-accordion-border);
2222
+ border-radius: var(--kds-radius-md);
2223
+ overflow: hidden;
2327
2224
  }
2328
2225
 
2329
- .kds-file-upload-item-status.error {
2330
- color: var(--kds-color-error);
2226
+ .kds-contract-accordion details {
2227
+ border-bottom: 1px solid var(--kds-accordion-border);
2331
2228
  }
2332
2229
 
2333
- .kds-file-upload-item-status.uploading {
2334
- color: var(--kds-color-info);
2230
+ .kds-contract-accordion details:last-child {
2231
+ border-bottom: none;
2335
2232
  }
2336
2233
 
2337
- /* Remove button */
2338
- .kds-file-upload-item-remove {
2339
- flex-shrink: 0;
2340
- background: transparent;
2341
- border: none;
2342
- color: #9CA3AF;
2234
+ .kds-contract-accordion summary {
2235
+ padding: var(--kds-spacing-4);
2236
+ background: var(--kds-accordion-header-bg);
2343
2237
  cursor: pointer;
2344
- padding: var(--kds-spacing-1);
2345
- border-radius: var(--kds-radius-sm);
2346
- transition: all 0.2s ease;
2347
- font-size: 20px;
2238
+ font-weight: var(--kds-font-weight-semibold);
2239
+ color: var(--kds-color-text-primary);
2240
+ list-style: none;
2348
2241
  display: flex;
2242
+ justify-content: space-between;
2349
2243
  align-items: center;
2350
- justify-content: center;
2244
+ transition: background 0.2s ease;
2351
2245
  }
2352
2246
 
2353
- .kds-file-upload-item-remove:hover {
2354
- background: var(--kds-alert-error-bg);
2355
- color: var(--kds-color-error);
2247
+ .kds-contract-accordion summary::-webkit-details-marker {
2248
+ display: none;
2356
2249
  }
2357
2250
 
2358
- /* Progress bar (for async uploads) */
2359
- .kds-file-upload-progress {
2360
- height: 4px;
2361
- background: #E5E7EB;
2362
- border-radius: 2px;
2363
- overflow: hidden;
2364
- margin-top: var(--kds-spacing-2);
2251
+ .kds-contract-accordion summary:hover {
2252
+ background: var(--kds-color-background-elevated);
2365
2253
  }
2366
2254
 
2367
- .kds-file-upload-progress-bar {
2368
- height: 100%;
2369
- background: var(--kds-color-primary-500);
2370
- transition: width 0.3s ease;
2255
+ .kds-contract-accordion summary::after {
2256
+ content: "expand_more";
2257
+ font-family: 'Material Symbols Outlined';
2258
+ font-size: 24px;
2259
+ transition: transform 0.3s ease;
2371
2260
  }
2372
2261
 
2373
- /* ========================================
2374
- OTP INPUT COMPONENT
2375
- 6-digit one-time password input
2376
- ======================================== */
2262
+ .kds-contract-accordion details[open] summary::after {
2263
+ transform: rotate(180deg);
2264
+ }
2377
2265
 
2378
- .kds-otp-input {
2379
- display: flex;
2380
- justify-content: center;
2381
- gap: var(--kds-spacing-3);
2382
- margin: var(--kds-spacing-6) 0;
2266
+ .kds-contract-accordion details[open] summary {
2267
+ background: var(--kds-accordion-bg-open);
2268
+ border-bottom: 1px solid var(--kds-accordion-border);
2383
2269
  }
2384
2270
 
2385
- .kds-otp-digit {
2386
- width: var(--kds-otp-digit-size);
2387
- height: var(--kds-otp-digit-height);
2388
- font-size: var(--kds-font-size-2xl);
2389
- font-weight: var(--kds-font-weight-bold);
2390
- text-align: center;
2391
- border: 2px solid var(--kds-otp-digit-border);
2392
- border-radius: var(--kds-radius-md);
2393
- background: var(--kds-otp-digit-bg);
2394
- transition: all 0.2s ease;
2395
- outline: none;
2396
- color: #111827;
2397
- }
2398
-
2399
- .kds-otp-digit:focus {
2400
- border-color: var(--kds-otp-digit-border-focus);
2401
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2271
+ .kds-contract-accordion-content {
2272
+ padding: var(--kds-spacing-4);
2273
+ background: var(--kds-accordion-bg-open);
2274
+ font-size: var(--kds-font-size-sm);
2275
+ line-height: 1.6;
2276
+ color: #374151;
2402
2277
  }
2403
2278
 
2404
- .kds-otp-digit:not(:placeholder-shown) {
2405
- background: var(--kds-otp-digit-bg-filled);
2406
- border-color: var(--kds-color-success);
2279
+ .kds-contract-accordion-content h4 {
2280
+ font-size: var(--kds-font-size-base);
2281
+ font-weight: var(--kds-font-weight-semibold);
2282
+ margin-top: var(--kds-spacing-4);
2283
+ margin-bottom: var(--kds-spacing-2);
2407
2284
  }
2408
2285
 
2409
- .kds-otp-digit.error {
2410
- border-color: var(--kds-color-error);
2411
- background: var(--kds-alert-error-bg);
2286
+ .kds-contract-accordion-content p {
2287
+ margin-bottom: var(--kds-spacing-3);
2412
2288
  }
2413
2289
 
2414
- /* Mobile responsive */
2415
- @media (max-width: 480px) {
2416
- .kds-otp-input {
2417
- gap: var(--kds-spacing-2);
2418
- }
2419
-
2420
- .kds-otp-digit {
2421
- width: 48px;
2422
- height: 56px;
2423
- font-size: var(--kds-font-size-xl);
2424
- }
2290
+ .kds-contract-accordion-content ul,
2291
+ .kds-contract-accordion-content ol {
2292
+ margin-bottom: var(--kds-spacing-3);
2293
+ padding-left: var(--kds-spacing-5);
2425
2294
  }
2426
2295
 
2427
- /* ========================================
2428
- BANK SELECTOR GRID
2429
- Grid of selectable bank cards
2430
- ======================================== */
2431
-
2432
- .kds-bank-grid {
2296
+ /* Form Grid - 2-column responsive layout for forms */
2297
+ .kds-form-grid {
2433
2298
  display: grid;
2434
- grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
2299
+ grid-template-columns: 1fr;
2435
2300
  gap: var(--kds-spacing-4);
2436
- margin: var(--kds-spacing-4) 0;
2437
2301
  }
2438
2302
 
2439
- @media (max-width: 768px) {
2440
- .kds-bank-grid {
2441
- grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
2442
- gap: var(--kds-spacing-3);
2303
+ @media (min-width: 768px) {
2304
+ .kds-form-grid {
2305
+ grid-template-columns: 1fr 1fr;
2443
2306
  }
2444
- }
2445
2307
 
2446
- @media (max-width: 480px) {
2447
- .kds-bank-grid {
2448
- grid-template-columns: repeat(3, 1fr);
2449
- gap: var(--kds-spacing-2);
2308
+ .kds-form-grid .field.full-width {
2309
+ grid-column: 1 / -1;
2450
2310
  }
2451
2311
  }
2452
2312
 
2453
- /* Individual Bank Item */
2454
- .kds-bank-item {
2455
- aspect-ratio: 1;
2456
- display: flex;
2457
- flex-direction: column;
2458
- align-items: center;
2459
- justify-content: center;
2460
- padding: var(--kds-spacing-3);
2461
- border: 2px solid var(--kds-bank-item-border);
2462
- border-radius: var(--kds-radius-lg);
2463
- background: #FFFFFF;
2464
- cursor: pointer;
2465
- transition: all 0.3s ease;
2466
- position: relative;
2313
+ /* Demo-specific helpers */
2314
+ .demo-color-box {
2315
+ padding: var(--kds-spacing-8);
2316
+ border-radius: var(--kds-radius-md);
2317
+ text-align: center;
2318
+ color: white;
2467
2319
  }
2468
2320
 
2469
- .kds-bank-item:hover {
2470
- border-color: var(--kds-bank-item-border-hover);
2471
- background: var(--kds-bank-item-bg-hover);
2472
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2321
+ .demo-color-box.primary-bg {
2322
+ background: var(--primary);
2473
2323
  }
2474
2324
 
2475
- .kds-bank-item.selected {
2476
- border-color: var(--kds-bank-item-border-selected);
2477
- background: var(--kds-bank-item-bg-selected);
2478
- box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
2325
+ .demo-color-box.secondary-bg {
2326
+ background: var(--secondary);
2479
2327
  }
2480
2328
 
2481
- /* Bank logo */
2482
- .kds-bank-item-logo {
2483
- width: 100%;
2484
- height: auto;
2485
- max-width: 80px;
2486
- margin-bottom: var(--kds-spacing-2);
2487
- object-fit: contain;
2329
+ .demo-color-box.accent-bg {
2330
+ background: var(--khipu-accent);
2488
2331
  }
2489
2332
 
2490
- /* Bank name */
2491
- .kds-bank-item-name {
2492
- font-size: var(--kds-font-size-xs);
2493
- font-weight: var(--kds-font-weight-medium);
2494
- color: #111827;
2333
+ .demo-grid-item {
2334
+ padding: var(--kds-spacing-4);
2335
+ border-radius: var(--kds-radius-md);
2495
2336
  text-align: center;
2496
- line-height: 1.3;
2497
2337
  }
2498
2338
 
2499
- /* Selected checkmark */
2500
- .kds-bank-item-check {
2501
- position: absolute;
2502
- top: 8px;
2503
- right: 8px;
2504
- width: 24px;
2505
- height: 24px;
2506
- background: var(--kds-color-primary-500);
2507
- border-radius: 50%;
2508
- display: none;
2509
- align-items: center;
2510
- justify-content: center;
2511
- color: white;
2512
- font-size: 14px;
2339
+ .demo-grid-item.primary-container-bg {
2340
+ background: var(--primary-container);
2513
2341
  }
2514
2342
 
2515
- .kds-bank-item.selected .kds-bank-item-check {
2516
- display: flex;
2343
+ .demo-grid-item.secondary-container-bg {
2344
+ background: var(--secondary-container);
2517
2345
  }
2518
2346
 
2519
- .kds-bank-item-check::after {
2520
- content: "✓";
2521
- font-weight: 700;
2347
+ .demo-surface-box {
2348
+ background: var(--surface-variant);
2349
+ padding: var(--kds-spacing-4);
2350
+ border-radius: var(--kds-radius-md);
2522
2351
  }
2523
2352
 
2524
- /* Mobile adjustments */
2525
- @media (max-width: 480px) {
2526
- .kds-bank-item {
2527
- padding: var(--kds-spacing-2);
2353
+ /* ========================================
2354
+ Responsive Utilities
2355
+ ======================================== */
2356
+
2357
+ @media (max-width: 768px) {
2358
+ .khipu-hero h1 {
2359
+ font-size: 2rem;
2528
2360
  }
2529
2361
 
2530
- .kds-bank-item-logo {
2531
- max-width: 60px;
2362
+ .khipu-hero p {
2363
+ font-size: 1rem;
2532
2364
  }
2533
2365
 
2534
- .kds-bank-item-name {
2535
- font-size: 10px;
2366
+ .khipu-card-elevated {
2367
+ padding: var(--kds-spacing-2);
2536
2368
  }
2537
2369
 
2538
- .kds-bank-item-check {
2539
- width: 20px;
2540
- height: 20px;
2541
- font-size: 12px;
2542
- top: 4px;
2543
- right: 4px;
2370
+ .snackbar {
2371
+ min-width: calc(100% - 32px);
2372
+ left: 16px;
2373
+ right: 16px;
2374
+ transform: none;
2544
2375
  }
2545
2376
  }
2546
2377
 
2547
2378
  /* ========================================
2548
- MODAL BASE CONFIGURATION
2549
- Override BeerCSS modal defaults
2379
+ UTILITY CLASSES
2550
2380
  ======================================== */
2551
2381
 
2552
- dialog.modal {
2553
- background: var(--kds-modal-bg);
2554
- border: none;
2555
- border-radius: var(--kds-modal-border-radius);
2556
- padding: var(--kds-modal-padding);
2557
- max-width: var(--kds-modal-max-width);
2558
- box-shadow: var(--kds-modal-shadow);
2559
- }
2560
-
2561
- dialog.modal::backdrop {
2562
- background: var(--kds-modal-backdrop);
2382
+ /* Container utilities */
2383
+ .kds-container-center {
2384
+ width: 100%;
2385
+ max-width: 1400px;
2386
+ margin-left: auto;
2387
+ margin-right: auto;
2563
2388
  }
2564
2389
 
2565
- /* ========================================
2566
- KYC BLOCKING MODAL
2567
- Warning modal for high-risk sectors
2568
- ======================================== */
2569
-
2570
- .kds-kyc-modal {
2571
- background: var(--kds-modal-bg);
2572
- border: none;
2573
- border-radius: var(--kds-modal-border-radius);
2574
- padding: var(--kds-modal-padding);
2575
- max-width: var(--kds-modal-max-width);
2576
- margin: 0 auto;
2577
- box-shadow: var(--kds-modal-shadow);
2390
+ /* Nav should have no padding - only background color */
2391
+ nav {
2392
+ padding-left: 0 !important;
2393
+ padding-right: 0 !important;
2578
2394
  }
2579
2395
 
2580
- .kds-kyc-modal-icon {
2581
- text-align: center;
2582
- margin-bottom: var(--kds-spacing-4);
2396
+ /* When inside nav, inherit flex behavior and override BeerCSS margin: 0 */
2397
+ nav > .kds-container-center {
2398
+ display: flex;
2399
+ align-items: center;
2400
+ gap: var(--kds-spacing-4);
2401
+ margin-left: auto !important;
2402
+ margin-right: auto !important;
2403
+ padding-left: var(--kds-spacing-4);
2404
+ padding-right: var(--kds-spacing-4);
2405
+ padding-top: var(--kds-spacing-2);
2406
+ padding-bottom: var(--kds-spacing-2);
2583
2407
  }
2584
2408
 
2585
- .kds-kyc-modal-icon i {
2586
- font-size: 64px;
2587
- min-width: 64px;
2588
- min-height: 64px;
2589
- color: var(--kds-modal-icon-warning);
2409
+ footer,
2410
+ footer.primary {
2411
+ padding-left: 0 !important;
2412
+ padding-right: 0 !important;
2590
2413
  }
2591
2414
 
2592
- .kds-kyc-modal-title {
2593
- font-size: var(--kds-font-size-2xl);
2594
- font-weight: var(--kds-font-weight-bold);
2595
- color: var(--kds-modal-title-color);
2596
- text-align: center;
2597
- margin-bottom: var(--kds-spacing-4);
2415
+ /* Footer nav columns - vertical links */
2416
+ footer nav.kds-footer-nav {
2417
+ display: flex;
2418
+ flex-direction: column;
2419
+ gap: var(--kds-spacing-1);
2598
2420
  }
2599
2421
 
2600
- .kds-kyc-modal-message {
2601
- font-size: var(--kds-font-size-base);
2602
- color: var(--kds-modal-text-color);
2603
- line-height: 1.6;
2604
- margin-bottom: var(--kds-spacing-6);
2605
- text-align: center;
2422
+ footer nav.kds-footer-nav a {
2423
+ font-size: var(--kds-font-size-sm);
2424
+ padding: 0;
2425
+ justify-content: flex-start;
2606
2426
  }
2607
2427
 
2608
- .kds-kyc-modal-contact {
2609
- background: var(--kds-surface-elevated);
2610
- border-radius: var(--kds-radius-md);
2611
- padding: var(--kds-spacing-4);
2612
- margin-bottom: var(--kds-spacing-6);
2613
- border-left: 4px solid var(--primary);
2428
+ /* When inside footer, add padding to align with main content */
2429
+ footer > .kds-container-center {
2430
+ padding-left: var(--kds-spacing-4);
2431
+ padding-right: var(--kds-spacing-4);
2432
+ padding-top: var(--kds-spacing-8);
2433
+ padding-bottom: var(--kds-spacing-8);
2614
2434
  }
2615
2435
 
2616
- .kds-kyc-modal-contact strong {
2617
- display: block;
2618
- font-weight: var(--kds-font-weight-semibold);
2619
- color: var(--kds-modal-title-color);
2620
- margin-bottom: var(--kds-spacing-2);
2621
- }
2436
+ @media (min-width: 768px) {
2437
+ nav > .kds-container-center {
2438
+ padding-left: var(--kds-spacing-6);
2439
+ padding-right: var(--kds-spacing-6);
2440
+ padding-top: var(--kds-spacing-2);
2441
+ padding-bottom: var(--kds-spacing-2);
2442
+ }
2622
2443
 
2623
- .kds-kyc-modal-contact a {
2624
- color: var(--kds-color-primary-500);
2625
- text-decoration: none;
2626
- font-weight: var(--kds-font-weight-medium);
2444
+ footer > .kds-container-center {
2445
+ padding-left: var(--kds-spacing-6);
2446
+ padding-right: var(--kds-spacing-6);
2447
+ padding-top: var(--kds-spacing-10);
2448
+ padding-bottom: var(--kds-spacing-10);
2449
+ }
2627
2450
  }
2628
2451
 
2629
- .kds-kyc-modal-contact a:hover {
2630
- text-decoration: underline;
2452
+ .max-w-500 {
2453
+ max-width: 500px;
2631
2454
  }
2632
2455
 
2633
- .kds-kyc-modal-actions {
2634
- display: flex;
2635
- gap: var(--kds-spacing-3);
2636
- justify-content: center;
2456
+ .max-w-1200 {
2457
+ max-width: 1200px;
2637
2458
  }
2638
2459
 
2639
- @media (max-width: 480px) {
2640
- .kds-kyc-modal,
2641
- dialog.modal {
2642
- padding: var(--kds-modal-padding-mobile);
2643
- max-width: var(--kds-modal-max-width-mobile);
2644
- }
2645
-
2646
- .kds-kyc-modal-icon i {
2647
- font-size: 48px;
2648
- min-width: 48px;
2649
- min-height: 48px;
2650
- }
2651
-
2652
- .kds-kyc-modal-actions {
2653
- flex-direction: column;
2654
- }
2655
-
2656
- .kds-kyc-modal-actions button {
2657
- width: 100% !important;
2658
- }
2460
+ /* Margin top utilities */
2461
+ .kds-mt-3 {
2462
+ margin-top: var(--kds-spacing-3);
2659
2463
  }
2660
2464
 
2661
2465
  /* ========================================
2662
- WELCOME HERO SECTION
2663
- Full-width gradient hero with CTA
2466
+ AUTOMATIC SPACING SYSTEM
2467
+ Components handle their own spacing
2664
2468
  ======================================== */
2665
2469
 
2666
- .kds-welcome-hero {
2667
- background: linear-gradient(135deg, var(--kds-welcome-gradient-start) 0%, var(--kds-welcome-gradient-end) 100%);
2668
- color: white;
2669
- padding: var(--kds-spacing-20) var(--kds-spacing-6);
2670
- text-align: center;
2671
- border-radius: 0;
2672
- margin: 0;
2673
- position: relative;
2674
- overflow: hidden;
2470
+ /* Component showcase sections */
2471
+ .component-section {
2472
+ margin-bottom: var(--kds-spacing-12);
2675
2473
  }
2676
2474
 
2677
- /* Decorative circles */
2678
- .kds-welcome-hero::before,
2679
- .kds-welcome-hero::after {
2680
- content: "";
2681
- position: absolute;
2682
- border-radius: 50%;
2683
- background: rgba(255, 255, 255, 0.1);
2475
+ .component-section > h2 {
2476
+ margin-bottom: var(--kds-spacing-6);
2684
2477
  }
2685
2478
 
2686
- .kds-welcome-hero::before {
2687
- width: 400px;
2688
- height: 400px;
2689
- top: -200px;
2690
- right: -100px;
2479
+ .component-item {
2480
+ margin-bottom: var(--kds-spacing-10);
2691
2481
  }
2692
2482
 
2693
- .kds-welcome-hero::after {
2694
- width: 300px;
2695
- height: 300px;
2696
- bottom: -150px;
2697
- left: -50px;
2483
+ .component-item > h3 {
2484
+ margin-bottom: var(--kds-spacing-2);
2698
2485
  }
2699
2486
 
2700
- .kds-welcome-hero-content {
2701
- position: relative;
2702
- z-index: 1;
2703
- max-width: 800px;
2704
- margin: 0 auto;
2487
+ .component-item > p {
2488
+ margin-bottom: var(--kds-spacing-4);
2705
2489
  }
2706
2490
 
2707
- .kds-welcome-hero-icon {
2708
- font-size: 80px;
2491
+ .component-demo {
2492
+ margin-bottom: var(--kds-spacing-6);
2493
+ }
2494
+
2495
+ .component-code {
2709
2496
  margin-bottom: var(--kds-spacing-4);
2710
- opacity: 0.9;
2711
2497
  }
2712
2498
 
2713
- .kds-welcome-hero-icon i {
2714
- width: auto !important;
2715
- height: auto !important;
2716
- font-size: 80px !important;
2717
- min-width: 80px;
2718
- min-height: 80px;
2719
- }
2720
-
2721
- /* Fix for benefit card icons - BeerCSS forces 24px, override for large icons */
2722
- .kds-card-elevated i.icon-filled {
2723
- width: auto !important;
2724
- height: auto !important;
2725
- min-width: 48px;
2726
- min-height: 48px;
2499
+ .usage-note,
2500
+ .grails-note {
2501
+ margin-top: var(--kds-spacing-4);
2502
+ margin-bottom: var(--kds-spacing-6);
2727
2503
  }
2728
2504
 
2729
- .kds-welcome-hero-title {
2730
- font-size: var(--kds-font-size-4xl);
2731
- font-weight: var(--kds-font-weight-bold);
2732
- margin-bottom: var(--kds-spacing-4);
2733
- line-height: 1.2;
2505
+ .usage-note > h4,
2506
+ .grails-note > h4 {
2507
+ margin-bottom: var(--kds-spacing-2);
2734
2508
  }
2735
2509
 
2736
- .kds-welcome-hero-subtitle {
2737
- font-size: var(--kds-font-size-xl);
2738
- opacity: 0.95;
2510
+ /* Onboarding stage sections */
2511
+ .kds-stage-section {
2739
2512
  margin-bottom: var(--kds-spacing-8);
2740
- line-height: 1.5;
2741
2513
  }
2742
2514
 
2743
- .kds-welcome-hero-actions {
2744
- display: flex;
2745
- gap: var(--kds-spacing-4);
2746
- justify-content: center;
2515
+ .kds-stage-section:last-child {
2516
+ margin-bottom: 0;
2747
2517
  }
2748
2518
 
2519
+ .kds-stage-section-title {
2520
+ margin-bottom: var(--kds-spacing-4);
2521
+ }
2749
2522
 
2750
- @media (max-width: 768px) {
2751
- .kds-welcome-hero {
2752
- padding: var(--kds-spacing-12) var(--kds-spacing-4);
2753
- }
2754
-
2755
- .kds-welcome-hero-icon {
2756
- font-size: 60px;
2757
- }
2758
-
2759
- .kds-welcome-hero-title {
2760
- font-size: var(--kds-font-size-3xl);
2761
- }
2523
+ .kds-stage-section-description {
2524
+ margin-bottom: var(--kds-spacing-4);
2525
+ }
2526
+ .kds-stage-title {
2527
+ margin-bottom: var(--kds-spacing-2);
2528
+ }
2762
2529
 
2763
- .kds-welcome-hero-subtitle {
2764
- font-size: var(--kds-font-size-lg);
2765
- }
2530
+ .kds-stage-subtitle {
2531
+ margin-bottom: 0;
2532
+ }
2766
2533
 
2767
- .kds-welcome-hero-actions {
2768
- flex-direction: column;
2769
- align-items: stretch;
2770
- }
2534
+ .kds-stage-header > button {
2535
+ margin-top: var(--kds-spacing-3);
2536
+ }
2771
2537
 
2772
- .kds-welcome-hero-actions button {
2773
- width: 100% !important;
2774
- }
2538
+ /* Showcase header */
2539
+ .showcase-header {
2540
+ margin-bottom: var(--kds-spacing-8);
2775
2541
  }
2776
2542
 
2777
- /* ========================================
2778
- CONTRACT ACCORDION
2779
- Expandable terms and conditions
2780
- ======================================== */
2543
+ .showcase-header h1 {
2544
+ margin-bottom: var(--kds-spacing-3);
2545
+ }
2781
2546
 
2782
- .kds-contract-accordion {
2783
- border: 1px solid var(--kds-accordion-border);
2784
- border-radius: var(--kds-radius-md);
2785
- overflow: hidden;
2547
+ /* Form groups and fields already have margin-bottom */
2548
+ .kds-field {
2549
+ margin-bottom: var(--kds-spacing-4);
2786
2550
  }
2787
2551
 
2788
- .kds-contract-accordion details {
2789
- border-bottom: 1px solid var(--kds-accordion-border);
2552
+ .kds-field:last-child {
2553
+ margin-bottom: 0;
2790
2554
  }
2791
2555
 
2792
- .kds-contract-accordion details:last-child {
2793
- border-bottom: none;
2556
+ /* Grids handle spacing between children */
2557
+ .kds-grid-2col > *,
2558
+ .kds-grid-3col > * {
2559
+ margin-bottom: 0; /* Grid gap handles spacing */
2794
2560
  }
2795
2561
 
2796
- .kds-contract-accordion summary {
2797
- padding: var(--kds-spacing-4);
2798
- background: var(--kds-accordion-header-bg);
2799
- cursor: pointer;
2800
- font-weight: var(--kds-font-weight-semibold);
2801
- color: #111827;
2802
- list-style: none;
2562
+ /* ========================================
2563
+ ALERTS - Información contextual
2564
+ ======================================== */
2565
+
2566
+ /* Base alert structure */
2567
+ .kds-alert {
2803
2568
  display: flex;
2804
- justify-content: space-between;
2805
2569
  align-items: center;
2806
- transition: background 0.2s ease;
2570
+ gap: var(--kds-spacing-1);
2571
+ padding: var(--kds-spacing-2);
2572
+ border-radius: var(--kds-radius-md);
2573
+ border: 1px solid;
2574
+ font-family: var(--kds-font-family-primary);
2575
+ min-width: 0;
2576
+ flex: 1 1 100%;
2807
2577
  }
2808
2578
 
2809
- .kds-contract-accordion summary::-webkit-details-marker {
2810
- display: none;
2579
+ @media (min-width: 768px) {
2580
+ .kds-alert {
2581
+ padding: var(--kds-spacing-2);
2582
+ flex: 1 1 auto;
2583
+ }
2811
2584
  }
2812
2585
 
2813
- .kds-contract-accordion summary:hover {
2814
- background: #E5E7EB;
2586
+ .kds-alert:last-child {
2587
+ margin-bottom: 0;
2815
2588
  }
2816
2589
 
2817
- .kds-contract-accordion summary::after {
2818
- content: "expand_more";
2819
- font-family: 'Material Symbols Outlined';
2820
- font-size: 24px;
2821
- transition: transform 0.3s ease;
2590
+ /* Icon styling */
2591
+ .kds-alert-icon {
2592
+ flex-shrink: 0;
2593
+ font-size: var(--kds-spacing-button-icon-size);
2594
+ min-width: var(--kds-spacing-button-icon-size);
2595
+ min-height: var(--kds-spacing-button-icon-size);
2822
2596
  }
2823
2597
 
2824
- .kds-contract-accordion details[open] summary::after {
2825
- transform: rotate(180deg);
2598
+ /* Content container */
2599
+ .kds-alert-content {
2600
+ flex: 1;
2601
+ min-width: 0;
2826
2602
  }
2827
2603
 
2828
- .kds-contract-accordion details[open] summary {
2829
- background: var(--kds-accordion-bg-open);
2830
- border-bottom: 1px solid var(--kds-accordion-border);
2604
+ /* Title (bold) */
2605
+ .kds-alert-title {
2606
+ font-size: var(--kds-font-size-sm);
2607
+ font-weight: var(--kds-font-weight-semibold);
2608
+ line-height: var(--kds-line-height-normal);
2609
+ margin-bottom: calc(var(--kds-spacing-1) / 2);
2610
+ word-break: normal;
2611
+ overflow-wrap: break-word;
2831
2612
  }
2832
2613
 
2833
- .kds-contract-accordion-content {
2834
- padding: var(--kds-spacing-4);
2835
- background: var(--kds-accordion-bg-open);
2614
+ /* Description (regular) */
2615
+ .kds-alert-description {
2836
2616
  font-size: var(--kds-font-size-sm);
2837
- line-height: 1.6;
2838
- color: #374151;
2617
+ font-weight: var(--kds-font-weight-regular);
2618
+ line-height: var(--kds-line-height-relaxed);
2619
+ word-break: normal;
2620
+ overflow-wrap: break-word;
2839
2621
  }
2840
2622
 
2841
- .kds-contract-accordion-content h4 {
2842
- font-size: var(--kds-font-size-base);
2843
- font-weight: var(--kds-font-weight-semibold);
2844
- margin-top: var(--kds-spacing-4);
2845
- margin-bottom: var(--kds-spacing-2);
2623
+ /* Alert Variants */
2624
+ .kds-alert.kds-info {
2625
+ background: var(--kds-alert-info-bg);
2626
+ border-color: var(--kds-color-info-main);
2627
+ color: var(--kds-color-info-dark);
2846
2628
  }
2847
2629
 
2848
- .kds-contract-accordion-content p {
2849
- margin-bottom: var(--kds-spacing-3);
2630
+ .kds-alert.kds-info .kds-alert-icon {
2631
+ color: var(--kds-color-info-dark);
2850
2632
  }
2851
2633
 
2852
- .kds-contract-accordion-content ul,
2853
- .kds-contract-accordion-content ol {
2854
- margin-bottom: var(--kds-spacing-3);
2855
- padding-left: var(--kds-spacing-5);
2634
+ .kds-alert.kds-success {
2635
+ background: var(--kds-alert-success-bg);
2636
+ border-color: var(--kds-color-success-main);
2637
+ color: var(--kds-color-success-dark);
2856
2638
  }
2857
2639
 
2858
- /* ========================================
2859
- SIGNATURE PAD
2860
- Canvas-based signature capture
2861
- ======================================== */
2640
+ .kds-alert.kds-success .kds-alert-icon {
2641
+ color: var(--kds-color-success-dark);
2642
+ }
2862
2643
 
2863
- .kds-signature-pad {
2864
- width: 100%;
2644
+ .kds-alert.kds-warning {
2645
+ background: var(--kds-alert-warning-bg);
2646
+ border-color: var(--kds-color-warning-main);
2647
+ color: var(--kds-color-warning-dark);
2865
2648
  }
2866
2649
 
2867
- .kds-signature-canvas-wrapper {
2868
- border: 2px solid var(--kds-signature-border);
2869
- border-radius: var(--kds-radius-md);
2870
- background: var(--kds-signature-bg);
2871
- padding: var(--kds-spacing-2);
2872
- margin-bottom: var(--kds-spacing-3);
2650
+ .kds-alert.kds-warning .kds-alert-icon {
2651
+ color: var(--kds-color-warning-dark);
2873
2652
  }
2874
2653
 
2875
- .kds-signature-canvas {
2876
- display: block;
2877
- width: 100%;
2878
- height: 200px;
2879
- border-radius: var(--kds-radius-sm);
2880
- cursor: crosshair;
2881
- touch-action: none;
2654
+ .kds-alert.kds-error {
2655
+ background: var(--kds-alert-error-bg);
2656
+ border-color: var(--kds-color-error-main);
2657
+ color: var(--kds-color-error-dark);
2882
2658
  }
2883
2659
 
2884
- .kds-signature-actions {
2885
- display: flex;
2886
- gap: var(--kds-spacing-2);
2887
- justify-content: flex-end;
2660
+ .kds-alert.kds-error .kds-alert-icon {
2661
+ color: var(--kds-color-error-dark);
2888
2662
  }
2889
2663
 
2890
- .kds-signature-clear {
2891
- background: transparent !important;
2892
- color: #6B7280 !important;
2893
- border: 1px solid #D1D5DB !important;
2664
+ /* Lists inside alerts */
2665
+ .kds-alert ul {
2666
+ padding-left: var(--kds-spacing-2);
2667
+ margin-top: var(--kds-spacing-1);
2668
+ margin-bottom: 0;
2894
2669
  }
2895
2670
 
2896
- .kds-signature-clear:hover {
2897
- background: #F3F4F6 !important;
2898
- border-color: #9CA3AF !important;
2671
+ /* Links inside alerts */
2672
+ .kds-alert a {
2673
+ text-decoration: underline;
2899
2674
  }
2900
2675
 
2901
- /* Form Grid - 2-column responsive layout for forms */
2902
- .kds-form-grid {
2903
- display: grid;
2904
- grid-template-columns: 1fr;
2905
- gap: var(--kds-spacing-4);
2676
+ .kds-alert a:hover {
2677
+ text-decoration: none;
2906
2678
  }
2907
2679
 
2908
- @media (min-width: 768px) {
2909
- .kds-form-grid {
2910
- grid-template-columns: 1fr 1fr;
2911
- }
2912
2680
 
2913
- .kds-form-grid .field.full-width {
2914
- grid-column: 1 / -1;
2915
- }
2681
+ /* Modal actions (buttons at bottom) */
2682
+ .modal .kds-kyc-modal-content + div,
2683
+ .modal .kds-alert + div {
2684
+ margin-top: var(--kds-spacing-6);
2916
2685
  }
2917
2686
 
2918
- /* Demo-specific helpers */
2919
- .demo-color-box {
2920
- padding: var(--kds-spacing-8);
2921
- border-radius: var(--kds-radius-md);
2922
- text-align: center;
2923
- color: white;
2924
- }
2687
+ /* ===========================================================================
2925
2688
 
2926
- .demo-color-box.primary-bg {
2927
- background: var(--primary);
2928
- }
2689
+ /* ============================================
2690
+ SIDEBAR NAVIGATION (Simple & Sticky)
2691
+ ============================================ */
2929
2692
 
2930
- .demo-color-box.secondary-bg {
2931
- background: var(--secondary);
2693
+ /* Page layout - Flexbox horizontal */
2694
+ .kds-page-layout {
2695
+ display: flex;
2696
+ min-height: 100vh;
2697
+ padding-left: var(--kds-spacing-4);
2698
+ padding-right: var(--kds-spacing-4);
2932
2699
  }
2933
2700
 
2934
- .demo-color-box.accent-bg {
2935
- background: var(--khipu-accent);
2701
+ @media (min-width: 768px) {
2702
+ .kds-page-layout {
2703
+ padding-left: var(--kds-spacing-6);
2704
+ padding-right: var(--kds-spacing-6);
2705
+ }
2936
2706
  }
2937
2707
 
2938
- .demo-grid-item {
2939
- padding: var(--kds-spacing-4);
2940
- border-radius: var(--kds-radius-md);
2941
- text-align: center;
2708
+ /* Sidebar - Sticky flotante a la izquierda */
2709
+ .kds-sidebar {
2710
+ width: var(--kds-spacing-sidebar-width);
2711
+ background: var(--kds-color-background-paper);
2712
+ border: 1px solid var(--kds-color-divider);
2713
+ border-radius: var(--kds-radius-lg);
2714
+ flex-shrink: 0;
2715
+ position: sticky;
2716
+ top: var(--kds-spacing-4);
2717
+ margin: var(--kds-spacing-4);
2718
+ margin-left: 0;
2719
+ height: fit-content;
2720
+ box-shadow: var(--kds-shadow-2);
2942
2721
  }
2943
2722
 
2944
- .demo-grid-item.primary-container-bg {
2945
- background: var(--primary-container);
2723
+ /* Sidebar Header */
2724
+ .kds-sidebar-header {
2725
+ display: flex;
2726
+ align-items: center;
2727
+ gap: var(--kds-spacing-3);
2728
+ padding: var(--kds-spacing-1) var(--kds-spacing-2);
2729
+ border-bottom: 1px solid var(--kds-color-divider);
2730
+ border-radius: var(--kds-radius-lg) var(--kds-radius-lg) 0 0;
2731
+ cursor: pointer;
2732
+ position: relative; /* ← Para anclar dropdown */
2733
+ transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
2946
2734
  }
2947
2735
 
2948
- .demo-grid-item.secondary-container-bg {
2949
- background: var(--secondary-container);
2736
+ .kds-sidebar-header:hover {
2737
+ background: var(--kds-color-action-hover);
2950
2738
  }
2951
2739
 
2952
- .demo-surface-box {
2953
- background: var(--surface-variant);
2954
- padding: var(--kds-spacing-4);
2955
- border-radius: var(--kds-radius-md);
2956
- }
2957
-
2958
- /* ========================================
2959
- SUMMARY CARD (Review/Validation)
2960
- Used in validation stage to show user data
2961
- ======================================== */
2962
-
2963
- .kds-summary-card {
2964
- background: white;
2965
- border: 1px solid #E5E7EB;
2966
- border-radius: var(--kds-radius-lg);
2967
- padding: var(--kds-spacing-5);
2968
- margin-bottom: var(--kds-spacing-4);
2969
- }
2970
-
2971
- .kds-summary-card-header {
2972
- display: flex;
2973
- justify-content: space-between;
2974
- align-items: center;
2975
- margin-bottom: var(--kds-spacing-4);
2976
- padding-bottom: var(--kds-spacing-3);
2977
- border-bottom: 1px solid #F3F4F6;
2978
- }
2979
-
2980
- .kds-summary-card-title {
2740
+ /* Avatar circular */
2741
+ .kds-sidebar-avatar {
2742
+ width: var(--kds-spacing-sidebar-icon-container-size);
2743
+ height: var(--kds-spacing-sidebar-icon-container-size);
2744
+ border-radius: var(--kds-radius-full);
2745
+ background: var(--kds-color-error-main);
2746
+ color: var(--kds-color-background-paper);
2981
2747
  display: flex;
2982
2748
  align-items: center;
2983
- gap: var(--kds-spacing-2);
2749
+ justify-content: center;
2984
2750
  font-size: var(--kds-font-size-lg);
2985
- font-weight: var(--kds-font-weight-semibold);
2986
- color: #111827;
2987
- }
2988
-
2989
- .kds-summary-card-edit {
2990
- color: var(--primary);
2991
- text-decoration: none;
2992
- font-size: var(--kds-font-size-sm);
2993
- font-weight: var(--kds-font-weight-medium);
2994
- display: flex;
2995
- align-items: center;
2996
- gap: 4px;
2997
- transition: opacity 0.2s ease;
2751
+ font-weight: var(--kds-font-weight-bold);
2752
+ flex-shrink: 0;
2998
2753
  }
2999
2754
 
3000
- .kds-summary-card-edit:hover {
3001
- text-decoration: underline;
3002
- opacity: 0.8;
2755
+ /* Header text */
2756
+ .kds-sidebar-header-text {
2757
+ flex: 1;
2758
+ overflow: hidden;
3003
2759
  }
3004
2760
 
3005
- .kds-summary-row {
3006
- display: flex;
3007
- padding: var(--kds-spacing-2) 0;
2761
+ .kds-sidebar-title {
2762
+ font-size: var(--kds-font-size-base);
2763
+ font-weight: var(--kds-font-weight-semibold);
2764
+ color: var(--kds-color-text-primary);
2765
+ white-space: nowrap;
2766
+ overflow: hidden;
2767
+ text-overflow: ellipsis;
3008
2768
  }
3009
2769
 
3010
- .kds-summary-label {
3011
- flex: 0 0 140px;
2770
+ .kds-sidebar-subtitle {
3012
2771
  font-size: var(--kds-font-size-sm);
3013
- font-weight: var(--kds-font-weight-medium);
3014
- color: #6B7280;
2772
+ color: var(--kds-color-text-secondary);
2773
+ white-space: nowrap;
2774
+ overflow: hidden;
2775
+ text-overflow: ellipsis;
3015
2776
  }
3016
2777
 
3017
- .kds-summary-value {
3018
- flex: 1;
3019
- font-size: var(--kds-font-size-sm);
3020
- color: #111827;
2778
+ /* Dropdown icon */
2779
+ .kds-sidebar-dropdown-icon {
2780
+ font-size: var(--kds-spacing-sidebar-icon-size);
2781
+ color: var(--kds-color-text-secondary);
2782
+ flex-shrink: 0;
2783
+ transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
3021
2784
  }
3022
2785
 
3023
- .kds-summary-value.badge {
3024
- display: inline-block;
3025
- padding: 4px 12px;
3026
- background: var(--kds-color-primary-100);
3027
- color: var(--primary);
3028
- border-radius: var(--kds-radius-full);
3029
- font-weight: var(--kds-font-weight-medium);
2786
+ /* Header Dropdown - Flotante */
2787
+ .kds-sidebar-header-dropdown {
2788
+ position: absolute;
2789
+ top: 100%;
2790
+ left: 0;
2791
+ right: 0;
2792
+ z-index: var(--kds-z-index-drawer);
2793
+ opacity: 0;
2794
+ visibility: hidden;
2795
+ pointer-events: none;
2796
+ transform: translateY(calc(var(--kds-spacing-1) * -1));
2797
+ transition: all var(--kds-transition-shorter) var(--kds-easing-standard);
3030
2798
  }
3031
2799
 
3032
- /* ========================================
3033
- SUCCESS PAGE COMPONENTS
3034
- Celebration/completion page layout
3035
- ======================================== */
2800
+ .kds-sidebar-header-dropdown.kds-dropdown-open {
2801
+ opacity: 1;
2802
+ visibility: visible;
2803
+ pointer-events: auto;
2804
+ transform: translateY(0);
2805
+ }
3036
2806
 
3037
- .kds-success-container {
3038
- display: flex;
2807
+ /* Navigation */
2808
+ .kds-sidebar-nav {
2809
+ padding: var(--kds-spacing-2) 0;
3039
2810
  flex-direction: column;
3040
- align-items: center;
3041
- justify-content: center;
3042
- min-height: 80vh;
3043
- text-align: center;
3044
- padding: var(--kds-spacing-8);
2811
+ align-items: flex-start;
3045
2812
  }
3046
2813
 
3047
- .kds-success-icon {
3048
- width: 120px;
3049
- height: 120px;
3050
- background: #ECFDF5;
3051
- border-radius: 50%;
2814
+ /* Nav item */
2815
+ .kds-sidebar-nav-item {
3052
2816
  display: flex;
3053
2817
  align-items: center;
3054
- justify-content: center;
3055
- margin-bottom: var(--kds-spacing-6);
3056
- animation: scaleIn 0.5s ease-out;
2818
+ gap: var(--kds-spacing-1);
2819
+ padding: var(--kds-spacing-1) var(--kds-spacing-2);
2820
+ color: var(--kds-color-text-primary);
2821
+ text-decoration: none;
2822
+ position: relative;
2823
+ transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
2824
+ width: 100%;
2825
+ justify-content: flex-start;
3057
2826
  }
3058
2827
 
3059
- @keyframes scaleIn {
3060
- from {
3061
- transform: scale(0);
3062
- opacity: 0;
3063
- }
3064
- to {
3065
- transform: scale(1);
3066
- opacity: 1;
3067
- }
2828
+ .kds-sidebar-nav-item:hover {
2829
+ background: var(--kds-color-action-hover);
3068
2830
  }
3069
2831
 
3070
- .kds-success-icon i {
3071
- font-size: 80px;
3072
- min-width: 80px;
3073
- min-height: 80px;
3074
- color: var(--kds-color-success);
2832
+ /* Nav item icon */
2833
+ .kds-sidebar-nav-item i {
2834
+ font-size: var(--kds-spacing-sidebar-icon-size);
2835
+ color: var(--kds-color-text-secondary);
3075
2836
  }
3076
2837
 
3077
- .kds-success-title {
3078
- font-size: var(--kds-font-size-3xl);
3079
- font-weight: var(--kds-font-weight-bold);
3080
- color: #111827;
3081
- margin-bottom: var(--kds-spacing-3);
2838
+ /* Nav item text */
2839
+ .kds-sidebar-nav-item span {
2840
+ font-size: var(--kds-font-size-base);
2841
+ font-weight: var(--kds-font-weight-medium);
3082
2842
  }
3083
2843
 
3084
- .kds-success-subtitle {
3085
- font-size: var(--kds-font-size-lg);
3086
- color: #6B7280;
3087
- margin-bottom: var(--kds-spacing-8);
3088
- max-width: 600px;
2844
+ /* Active state - barra morada a la izquierda */
2845
+ .kds-sidebar-nav-item.active {
2846
+ background: var(--kds-color-primary-hover);
3089
2847
  }
3090
2848
 
3091
- .kds-next-steps {
3092
- background: white;
3093
- border: 1px solid #E5E7EB;
3094
- border-radius: var(--kds-radius-xl);
3095
- padding: var(--kds-spacing-6);
3096
- max-width: 700px;
3097
- width: 100%;
3098
- margin-bottom: var(--kds-spacing-6);
3099
- text-align: left;
2849
+ .kds-sidebar-nav-item.active::before {
2850
+ content: '';
2851
+ position: absolute;
2852
+ left: 0;
2853
+ top: 0;
2854
+ bottom: 0;
2855
+ width: calc(var(--kds-spacing-1) / 2);
2856
+ background: var(--kds-color-primary-main);
3100
2857
  }
3101
2858
 
3102
- .kds-next-steps-title {
3103
- font-size: var(--kds-font-size-xl);
3104
- font-weight: var(--kds-font-weight-semibold);
3105
- color: #111827;
3106
- margin-bottom: var(--kds-spacing-4);
3107
- display: flex;
3108
- align-items: center;
3109
- gap: var(--kds-spacing-2);
2859
+ .kds-sidebar-nav-item.active i,
2860
+ .kds-sidebar-nav-item.active span {
2861
+ color: var(--kds-color-primary-main);
3110
2862
  }
3111
2863
 
3112
- .kds-step-item {
2864
+ /* Main content */
2865
+ .kds-main-content {
2866
+ flex: 1;
2867
+ min-width: 0;
2868
+ overflow-y: auto;
3113
2869
  display: flex;
3114
- gap: var(--kds-spacing-3);
3115
- padding: var(--kds-spacing-3) 0;
3116
- border-bottom: 1px solid #F3F4F6;
2870
+ flex-direction: column;
2871
+ overflow-x: hidden;
2872
+ padding-top: var(--kds-spacing-4);
2873
+ padding-bottom: var(--kds-spacing-4);
3117
2874
  }
3118
2875
 
3119
- .kds-step-item:last-child {
3120
- border-bottom: none;
3121
- }
2876
+ /* ============================================
2877
+ MOBILE RESPONSIVE SIDEBAR
2878
+ ============================================ */
3122
2879
 
3123
- .kds-step-number {
3124
- flex-shrink: 0;
3125
- width: 32px;
3126
- height: 32px;
3127
- background: var(--kds-color-primary-100);
3128
- color: var(--primary);
3129
- border-radius: 50%;
3130
- display: flex;
3131
- align-items: center;
3132
- justify-content: center;
3133
- font-weight: var(--kds-font-weight-semibold);
3134
- font-size: var(--kds-font-size-sm);
2880
+ /* Mobile Topbar - oculto en desktop */
2881
+ .kds-mobile-topbar {
2882
+ display: none;
3135
2883
  }
3136
2884
 
3137
- .kds-step-content {
3138
- flex: 1;
2885
+ /* Barra superior mobile del sidebar - oculta en desktop */
2886
+ .kds-sidebar-mobile-header {
2887
+ display: none;
3139
2888
  }
3140
2889
 
3141
- .kds-step-title {
3142
- font-size: var(--kds-font-size-base);
3143
- font-weight: var(--kds-font-weight-semibold);
3144
- color: #111827;
3145
- margin-bottom: 4px;
2890
+ /* Botón cerrar sidebar */
2891
+ .kds-sidebar-close-btn {
2892
+ border: none;
2893
+ background: transparent;
2894
+ border-radius: var(--kds-radius-sm);
2895
+ cursor: pointer;
2896
+ padding: 0;
3146
2897
  }
3147
2898
 
3148
- .kds-step-description {
3149
- font-size: var(--kds-font-size-sm);
3150
- color: #6B7280;
3151
- line-height: 1.5;
2899
+ .kds-sidebar-close-btn:hover {
2900
+ background: var(--kds-color-action-hover);
3152
2901
  }
3153
2902
 
3154
- .kds-success-actions {
3155
- display: flex;
3156
- gap: var(--kds-spacing-3);
3157
- flex-wrap: wrap;
3158
- justify-content: center;
2903
+ .kds-sidebar-close-btn i {
2904
+ font-size: var(--kds-spacing-sidebar-icon-size);
2905
+ color: var(--kds-color-text-primary);
3159
2906
  }
3160
2907
 
3161
- @media (max-width: 768px) {
3162
- .kds-success-title {
3163
- font-size: var(--kds-font-size-2xl);
3164
- }
3165
-
3166
- .kds-success-subtitle {
3167
- font-size: var(--kds-font-size-base);
3168
- }
3169
-
3170
- .kds-success-actions {
3171
- flex-direction: column;
3172
- width: 100%;
3173
- }
2908
+ /* Botón hamburger - oculto en desktop, visible en mobile */
2909
+ .kds-hamburger-btn {
2910
+ display: none;
2911
+ width: var(--kds-spacing-sidebar-icon-container-size);
2912
+ height: var(--kds-spacing-sidebar-icon-container-size);
2913
+ border: none;
2914
+ background: transparent;
2915
+ border-radius: var(--kds-radius-sm);
2916
+ cursor: pointer;
2917
+ padding: 0;
2918
+ transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard);
2919
+ }
3174
2920
 
3175
- .kds-success-actions button {
3176
- width: 100%;
3177
- }
2921
+ .kds-hamburger-btn:hover {
2922
+ background: var(--kds-color-action-hover);
3178
2923
  }
3179
2924
 
3180
- /* ========================================
3181
- Responsive Utilities
3182
- ======================================== */
2925
+ .kds-hamburger-btn i {
2926
+ font-size: var(--kds-spacing-sidebar-icon-size);
2927
+ color: var(--kds-color-text-primary);
2928
+ }
3183
2929
 
2930
+ /* Mobile (≤ 768px) */
3184
2931
  @media (max-width: 768px) {
3185
- .khipu-hero h1 {
3186
- font-size: 2rem;
3187
- }
3188
-
3189
- .khipu-hero p {
3190
- font-size: 1rem;
3191
- }
3192
-
3193
- .khipu-card-elevated {
3194
- padding: 16px;
2932
+ /* Mostrar hamburger button en nav */
2933
+ .kds-hamburger-btn {
2934
+ display: flex;
2935
+ align-items: center;
2936
+ justify-content: center;
3195
2937
  }
3196
2938
 
3197
- .snackbar {
3198
- min-width: calc(100% - 32px);
3199
- left: 16px;
3200
- right: 16px;
3201
- transform: none;
3202
- }
3203
- }
2939
+ /* Mostrar topbar */
2940
+ .kds-mobile-topbar {
2941
+ display: flex;
2942
+ align-items: center;
2943
+ gap: var(--kds-spacing-2);
2944
+ position: fixed;
2945
+ top: 0;
2946
+ left: 0;
2947
+ right: 0;
2948
+ height: var(--kds-spacing-7);
2949
+ padding: 0 var(--kds-spacing-2);
2950
+ background: var(--kds-color-background-paper);
2951
+ border-bottom: 1px solid var(--kds-color-divider);
2952
+ z-index: var(--kds-z-index-appbar);
2953
+ font-size: var(--kds-font-size-lg);
2954
+ font-weight: var(--kds-font-weight-semibold);
2955
+ }
3204
2956
 
3205
- /* ========================================
3206
- UTILITY CLASSES
3207
- ======================================== */
2957
+ /* Sidebar = drawer full-width */
2958
+ .kds-sidebar {
2959
+ position: fixed;
2960
+ top: 0;
2961
+ left: 0;
2962
+ bottom: 0;
2963
+ width: 100vw;
2964
+ margin: 0;
2965
+ height: 100%;
2966
+ transform: translateX(-100%);
2967
+ transition: transform var(--kds-transition-standard) var(--kds-easing-ease-out);
2968
+ z-index: var(--kds-z-index-drawer);
2969
+ border-radius: 0;
2970
+ }
3208
2971
 
3209
- /* Container utilities */
3210
- .kds-container-center {
3211
- margin-left: auto;
3212
- margin-right: auto;
3213
- }
2972
+ /* Barra superior mobile visible */
2973
+ .kds-sidebar-mobile-header {
2974
+ display: flex;
2975
+ align-items: center;
2976
+ justify-content: space-between;
2977
+ height: var(--kds-spacing-7);
2978
+ padding: 0 var(--kds-spacing-2);
2979
+ background: var(--kds-color-background-paper);
2980
+ border-bottom: 1px solid var(--kds-color-divider);
2981
+ font-size: var(--kds-font-size-lg);
2982
+ font-weight: var(--kds-font-weight-semibold);
2983
+ color: var(--kds-color-text-primary);
2984
+ }
3214
2985
 
3215
- .max-w-500 {
3216
- max-width: 500px;
2986
+ /* Sidebar abierto */
2987
+ .kds-sidebar-open {
2988
+ transform: translateX(0);
2989
+ }
2990
+
2991
+ /* Main content full-width */
2992
+ .kds-main-content {
2993
+ margin-left: 0;
2994
+ }
3217
2995
  }
3218
2996
 
3219
- .max-w-1200 {
3220
- max-width: 1200px;
2997
+ /* ============================================
2998
+ LIST UTILITIES
2999
+ ============================================ */
3000
+
3001
+ /* Standard list with compact spacing */
3002
+ .kds-list {
3003
+ margin: 0;
3004
+ padding-left: var(--kds-spacing-2);
3005
+ list-style-position: outside;
3006
+ line-height: var(--kds-line-height-relaxed);
3221
3007
  }
3222
3008
 
3223
- /* Margin top utilities */
3224
- .kds-mt-3 {
3225
- margin-top: var(--kds-spacing-3);
3009
+ .kds-list > li {
3010
+ margin-bottom: var(--kds-spacing-2);
3226
3011
  }
3227
3012
 
3228
- /* ========================================
3229
- AUTOMATIC SPACING SYSTEM
3230
- Components handle their own spacing
3231
- ======================================== */
3013
+ .kds-list > li:last-child {
3014
+ margin-bottom: 0;
3015
+ }
3232
3016
 
3233
- /* Component showcase sections */
3234
- .component-section {
3235
- margin-bottom: var(--kds-spacing-12);
3017
+ /* List without bullets */
3018
+ .kds-list-unstyled {
3019
+ list-style: none;
3020
+ padding-left: 0;
3236
3021
  }
3237
3022
 
3238
- .component-section > h2 {
3239
- margin-bottom: var(--kds-spacing-6);
3023
+ /* Code block for displaying code snippets */
3024
+ .kds-code-block {
3025
+ background: var(--kds-color-background-elevated);
3026
+ padding: var(--kds-spacing-4);
3027
+ border-radius: var(--kds-radius-md);
3028
+ overflow-x: auto;
3029
+ font-family: 'Courier New', monospace;
3030
+ font-size: var(--kds-font-size-sm);
3031
+ line-height: var(--kds-line-height-relaxed);
3032
+ color: var(--kds-color-text-primary);
3240
3033
  }
3241
3034
 
3242
- .component-item {
3243
- margin-bottom: var(--kds-spacing-10);
3035
+ /* ============================================
3036
+ DEMO PAGE STYLES (DEPRECATED - Use kds-card-* instead)
3037
+ ============================================ */
3038
+
3039
+ .demo-card {
3040
+ background: var(--kds-color-background-paper);
3041
+ border: 1px solid var(--kds-color-divider);
3042
+ border-radius: var(--kds-radius-lg);
3043
+ padding: var(--kds-spacing-6);
3044
+ margin-bottom: var(--kds-spacing-6);
3244
3045
  }
3245
3046
 
3246
- .component-item > h3 {
3247
- margin-bottom: var(--kds-spacing-2);
3047
+ .code-block {
3048
+ background: var(--kds-color-background-elevated);
3049
+ border: 1px solid var(--kds-color-divider);
3050
+ border-radius: var(--kds-radius-md);
3051
+ padding: var(--kds-spacing-4);
3052
+ font-family: var(--kds-font-family-mono);
3053
+ font-size: var(--kds-font-size-sm);
3054
+ line-height: var(--kds-line-height-relaxed);
3055
+ white-space: pre-wrap;
3056
+ word-wrap: break-word;
3057
+ overflow-x: auto;
3058
+ color: var(--kds-color-text-primary);
3248
3059
  }
3249
3060
 
3250
- .component-item > p {
3251
- margin-bottom: var(--kds-spacing-4);
3061
+ .kds-text-secondary-color {
3062
+ color: var(--kds-color-text-secondary);
3252
3063
  }
3253
3064
 
3254
- .component-demo {
3065
+ .kds-main-content > .kds-body-large {
3255
3066
  margin-bottom: var(--kds-spacing-6);
3256
3067
  }
3257
3068
 
3258
- .component-code {
3259
- margin-bottom: var(--kds-spacing-4);
3069
+ .kds-main-content > .demo-card ul {
3070
+ line-height: var(--kds-line-height-relaxed);
3260
3071
  }
3261
3072
 
3262
- .usage-note,
3263
- .grails-note {
3264
- margin-top: var(--kds-spacing-4);
3265
- margin-bottom: var(--kds-spacing-6);
3073
+ /* ========================================
3074
+ GALLERY / SHOWCASE COMPONENTS
3075
+ Componentes para páginas de demostración
3076
+ ======================================== */
3077
+
3078
+ /* Gallery Hero Section */
3079
+ .gallery-hero {
3080
+ background: linear-gradient(135deg, #8347AD 0%, #9333EA 100%);
3081
+ color: white;
3082
+ padding: var(--kds-spacing-12) var(--kds-spacing-6);
3083
+ text-align: center;
3266
3084
  }
3267
3085
 
3268
- .usage-note > h4,
3269
- .grails-note > h4 {
3270
- margin-bottom: var(--kds-spacing-2);
3086
+ .gallery-hero h1 {
3087
+ font-size: var(--kds-font-size-4xl);
3088
+ font-weight: var(--kds-font-weight-bold);
3089
+ margin: 0 0 var(--kds-spacing-4);
3090
+ line-height: 1.2;
3271
3091
  }
3272
3092
 
3273
- /* Onboarding stage sections */
3274
- .kds-stage-section {
3275
- margin-bottom: var(--kds-spacing-8);
3093
+ .gallery-hero p {
3094
+ font-size: var(--kds-font-size-lg);
3095
+ margin: 0 0 var(--kds-spacing-8);
3096
+ opacity: 0.95;
3097
+ max-width: 600px;
3098
+ margin-left: auto;
3099
+ margin-right: auto;
3276
3100
  }
3277
3101
 
3278
- .kds-stage-section:last-child {
3279
- margin-bottom: 0;
3102
+ .gallery-hero-actions {
3103
+ display: flex;
3104
+ gap: var(--kds-spacing-4);
3105
+ justify-content: center;
3106
+ flex-wrap: wrap;
3280
3107
  }
3281
3108
 
3282
- .kds-stage-section-title {
3283
- margin-bottom: var(--kds-spacing-4);
3109
+ /* Gallery Container */
3110
+ .gallery-container {
3111
+ padding: var(--kds-spacing-12) var(--kds-spacing-6);
3284
3112
  }
3285
3113
 
3286
- .kds-stage-section-description {
3287
- margin-bottom: var(--kds-spacing-4);
3114
+ .gallery-header {
3115
+ text-align: center;
3116
+ margin-bottom: var(--kds-spacing-10);
3288
3117
  }
3289
3118
 
3290
- /* Stage header */
3291
- .kds-stage-header {
3292
- margin-bottom: var(--kds-spacing-8);
3119
+ .gallery-header h2 {
3120
+ font-size: var(--kds-font-size-3xl);
3121
+ font-weight: var(--kds-font-weight-bold);
3122
+ color: var(--kds-color-text-primary);
3123
+ margin: 0 0 var(--kds-spacing-4);
3293
3124
  }
3294
3125
 
3295
- .kds-stage-title {
3296
- margin-bottom: var(--kds-spacing-2);
3126
+ .gallery-header p {
3127
+ font-size: var(--kds-font-size-lg);
3128
+ color: var(--kds-color-text-secondary);
3129
+ margin: 0;
3297
3130
  }
3298
3131
 
3299
- .kds-stage-subtitle {
3300
- margin-bottom: 0;
3132
+ /* Gallery Grid */
3133
+ .gallery-grid {
3134
+ display: grid;
3135
+ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
3136
+ gap: var(--kds-spacing-8);
3137
+ margin-bottom: var(--kds-spacing-12);
3301
3138
  }
3302
3139
 
3303
- .kds-stage-header > button {
3304
- margin-top: var(--kds-spacing-3);
3140
+ @media (max-width: 768px) {
3141
+ .gallery-grid {
3142
+ grid-template-columns: 1fr;
3143
+ }
3305
3144
  }
3306
3145
 
3307
- /* Showcase header */
3308
- .showcase-header {
3309
- margin-bottom: var(--kds-spacing-8);
3146
+ /* Page Card */
3147
+ .page-card {
3148
+ background: var(--kds-color-background-paper);
3149
+ border-radius: var(--kds-radius-lg);
3150
+ overflow: hidden;
3151
+ box-shadow: var(--kds-shadow-2);
3152
+ transition: all var(--kds-transition-standard) var(--kds-easing-standard);
3153
+ text-decoration: none;
3154
+ color: inherit;
3155
+ display: flex;
3156
+ flex-direction: column;
3157
+ height: 100%;
3310
3158
  }
3311
3159
 
3312
- .showcase-header h1 {
3313
- margin-bottom: var(--kds-spacing-3);
3160
+ .page-card:hover {
3161
+ transform: translateY(-4px);
3162
+ box-shadow: var(--kds-shadow-8);
3314
3163
  }
3315
3164
 
3316
- /* Form groups and fields already have margin-bottom */
3317
- .kds-field {
3318
- margin-bottom: var(--kds-spacing-4);
3165
+ .page-card-preview {
3166
+ background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
3167
+ height: 200px;
3168
+ display: flex;
3169
+ align-items: center;
3170
+ justify-content: center;
3171
+ position: relative;
3172
+ overflow: hidden;
3319
3173
  }
3320
3174
 
3321
- .kds-field:last-child {
3322
- margin-bottom: 0;
3175
+ .page-card-preview::before {
3176
+ content: '';
3177
+ position: absolute;
3178
+ top: -50%;
3179
+ left: -50%;
3180
+ width: 200%;
3181
+ height: 200%;
3182
+ background: radial-gradient(circle, rgba(131, 71, 173, 0.1) 0%, transparent 70%);
3183
+ animation: pulse 3s ease-in-out infinite;
3323
3184
  }
3324
3185
 
3325
- /* Grids handle spacing between children */
3326
- .kds-grid-2col > *,
3327
- .kds-grid-3col > * {
3328
- margin-bottom: 0; /* Grid gap handles spacing */
3186
+ @keyframes pulse {
3187
+ 0%, 100% { transform: scale(1); opacity: 0.5; }
3188
+ 50% { transform: scale(1.1); opacity: 0.8; }
3329
3189
  }
3330
3190
 
3331
- /* Alerts have margin */
3332
- .kds-alert {
3333
- margin-bottom: var(--kds-spacing-6);
3191
+ .page-card-preview i {
3192
+ font-size: 80px;
3193
+ min-width: 80px;
3194
+ min-height: 80px;
3195
+ color: var(--kds-color-primary-main);
3196
+ position: relative;
3197
+ z-index: 1;
3334
3198
  }
3335
3199
 
3336
- .kds-alert:last-child {
3337
- margin-bottom: 0;
3200
+ .page-card-content {
3201
+ padding: var(--kds-spacing-6);
3202
+ flex: 1;
3203
+ display: flex;
3204
+ flex-direction: column;
3338
3205
  }
3339
3206
 
3207
+ .page-card-step {
3208
+ font-size: var(--kds-font-size-xs);
3209
+ font-weight: var(--kds-font-weight-semibold);
3210
+ text-transform: uppercase;
3211
+ letter-spacing: 0.5px;
3212
+ color: var(--kds-color-primary-main);
3213
+ margin-bottom: var(--kds-spacing-2);
3214
+ }
3340
3215
 
3341
- /* Modal actions (buttons at bottom) */
3342
- .modal .kds-kyc-modal-content + div,
3343
- .modal .kds-alert + div {
3344
- margin-top: var(--kds-spacing-6);
3216
+ .page-card-title {
3217
+ font-size: var(--kds-font-size-2xl);
3218
+ font-weight: var(--kds-font-weight-bold);
3219
+ color: var(--kds-color-text-primary);
3220
+ margin: 0 0 var(--kds-spacing-3);
3345
3221
  }
3346
3222
 
3347
- /* ===========================================================================
3223
+ .page-card-description {
3224
+ font-size: var(--kds-font-size-md);
3225
+ color: var(--kds-color-text-secondary);
3226
+ line-height: var(--kds-line-height-relaxed);
3227
+ margin: 0 0 var(--kds-spacing-5);
3228
+ flex: 1;
3229
+ }
3348
3230
 
3349
- /* ============================================
3350
- SIDEBAR NAVIGATION (Simple & Sticky)
3351
- ============================================ */
3352
-
3353
- /* Page layout - Flexbox horizontal */
3354
- .kds-page-layout {
3231
+ .page-card-components {
3355
3232
  display: flex;
3356
- min-height: 100vh;
3233
+ flex-wrap: wrap;
3234
+ gap: var(--kds-spacing-2);
3235
+ margin-bottom: var(--kds-spacing-5);
3357
3236
  }
3358
3237
 
3359
- /* Sidebar - Sticky flotante a la izquierda */
3360
- .kds-sidebar {
3361
- width: var(--kds-spacing-sidebar-width);
3362
- background: var(--kds-color-background-paper);
3363
- border: 1px solid var(--kds-color-divider);
3364
- border-radius: var(--kds-radius-lg);
3365
- flex-shrink: 0;
3366
- position: sticky;
3367
- top: var(--kds-spacing-4);
3368
- margin: var(--kds-spacing-4);
3369
- height: fit-content;
3370
- overflow-y: auto;
3371
- box-shadow: var(--kds-shadow-2);
3238
+ .component-tag {
3239
+ font-size: var(--kds-font-size-xs);
3240
+ padding: calc(var(--kds-spacing-1) / 2) var(--kds-spacing-3);
3241
+ background: var(--kds-color-background-default);
3242
+ color: var(--kds-color-text-secondary);
3243
+ border-radius: var(--kds-radius-full);
3244
+ font-weight: var(--kds-font-weight-medium);
3372
3245
  }
3373
3246
 
3374
- /* Sidebar Header */
3375
- .kds-sidebar-header {
3247
+ .page-card-link {
3376
3248
  display: flex;
3377
3249
  align-items: center;
3378
- gap: var(--kds-spacing-3);
3379
- padding: var(--kds-spacing-1) var(--kds-spacing-2);
3380
- border-bottom: 1px solid var(--kds-color-divider);
3381
- border-radius: var(--kds-radius-lg) var(--kds-radius-lg) 0 0;
3382
- cursor: pointer;
3383
- position: relative; /* ← Para anclar dropdown */
3384
- transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
3250
+ justify-content: space-between;
3251
+ font-size: var(--kds-font-size-md);
3252
+ font-weight: var(--kds-font-weight-semibold);
3253
+ color: var(--kds-color-primary-main);
3254
+ text-decoration: none;
3255
+ padding-top: var(--kds-spacing-4);
3256
+ border-top: 1px solid var(--kds-color-divider);
3385
3257
  }
3386
3258
 
3387
- .kds-sidebar-header:hover {
3388
- background: var(--kds-color-action-hover);
3259
+ .page-card-link:hover {
3260
+ color: var(--kds-color-primary-dark);
3389
3261
  }
3390
3262
 
3391
- /* Avatar circular */
3392
- .kds-sidebar-avatar {
3393
- width: var(--kds-spacing-sidebar-icon-container-size);
3394
- height: var(--kds-spacing-sidebar-icon-container-size);
3395
- border-radius: var(--kds-radius-full);
3396
- background: var(--kds-color-error-main);
3397
- color: var(--kds-color-background-paper);
3398
- display: flex;
3399
- align-items: center;
3400
- justify-content: center;
3401
- font-size: var(--kds-font-size-lg);
3263
+ .page-card-link i {
3264
+ font-size: var(--kds-font-size-xl);
3265
+ transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
3266
+ }
3267
+
3268
+ .page-card:hover .page-card-link i {
3269
+ transform: translateX(4px);
3270
+ }
3271
+
3272
+ /* Component Showcase CTA */
3273
+ .showcase-cta {
3274
+ background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
3275
+ border-radius: var(--kds-radius-lg);
3276
+ padding: var(--kds-spacing-10) var(--kds-spacing-8);
3277
+ text-align: center;
3278
+ color: white;
3279
+ margin-top: var(--kds-spacing-12);
3280
+ }
3281
+
3282
+ .showcase-cta h2 {
3283
+ font-size: var(--kds-font-size-3xl);
3402
3284
  font-weight: var(--kds-font-weight-bold);
3403
- flex-shrink: 0;
3285
+ margin: 0 0 var(--kds-spacing-4);
3404
3286
  }
3405
3287
 
3406
- /* Header text */
3407
- .kds-sidebar-header-text {
3408
- flex: 1;
3409
- overflow: hidden;
3288
+ .showcase-cta p {
3289
+ font-size: var(--kds-font-size-lg);
3290
+ margin: 0 0 var(--kds-spacing-8);
3291
+ opacity: 0.95;
3410
3292
  }
3411
3293
 
3412
- .kds-sidebar-title {
3413
- font-size: var(--kds-font-size-base);
3414
- font-weight: var(--kds-font-weight-semibold);
3415
- color: var(--kds-color-text-primary);
3416
- white-space: nowrap;
3417
- overflow: hidden;
3418
- text-overflow: ellipsis;
3294
+ /* Gallery Footer */
3295
+ .gallery-footer {
3296
+ background: var(--kds-color-background-paper);
3297
+ border-top: 1px solid var(--kds-color-divider);
3298
+ padding: var(--kds-spacing-10) var(--kds-spacing-6);
3299
+ text-align: center;
3300
+ margin-top: var(--kds-spacing-12);
3419
3301
  }
3420
3302
 
3421
- .kds-sidebar-subtitle {
3422
- font-size: var(--kds-font-size-sm);
3303
+ .gallery-footer p {
3423
3304
  color: var(--kds-color-text-secondary);
3424
- white-space: nowrap;
3425
- overflow: hidden;
3426
- text-overflow: ellipsis;
3305
+ margin: 0 0 var(--kds-spacing-2);
3427
3306
  }
3428
3307
 
3429
- /* Dropdown icon */
3430
- .kds-sidebar-dropdown-icon {
3431
- font-size: var(--kds-spacing-sidebar-icon-size);
3432
- color: var(--kds-color-text-secondary);
3433
- flex-shrink: 0;
3434
- transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
3308
+ .gallery-footer a {
3309
+ color: var(--kds-color-primary-main);
3310
+ text-decoration: none;
3311
+ font-weight: var(--kds-font-weight-semibold);
3435
3312
  }
3436
3313
 
3437
- /* Header Dropdown - Flotante */
3438
- .kds-sidebar-header-dropdown {
3439
- position: absolute;
3440
- top: 100%;
3441
- left: 0;
3442
- right: 0;
3443
- z-index: var(--kds-z-index-drawer);
3444
- opacity: 0;
3445
- visibility: hidden;
3446
- pointer-events: none;
3447
- transform: translateY(calc(var(--kds-spacing-1) * -1));
3448
- transition: all var(--kds-transition-shorter) var(--kds-easing-standard);
3314
+ .gallery-footer a:hover {
3315
+ text-decoration: underline;
3449
3316
  }
3450
3317
 
3451
- .kds-sidebar-header-dropdown.kds-dropdown-open {
3452
- opacity: 1;
3453
- visibility: visible;
3454
- pointer-events: auto;
3455
- transform: translateY(0);
3318
+ /* Utility: Remove top padding */
3319
+ .kds-pt-0 {
3320
+ padding-top: 0 !important;
3456
3321
  }
3457
3322
 
3458
- /* Navigation */
3459
- .kds-sidebar-nav {
3460
- padding: var(--kds-spacing-2) 0;
3461
- flex-direction: column;
3462
- align-items: flex-start;
3323
+ /* Highlighted page card (para destacar items especiales) */
3324
+ .page-card-highlighted {
3325
+ border: 2px solid var(--kds-color-primary-main);
3463
3326
  }
3464
3327
 
3465
- /* Nav item */
3466
- .kds-sidebar-nav-item {
3467
- display: flex;
3468
- align-items: center;
3469
- gap: var(--kds-spacing-1);
3470
- padding: var(--kds-spacing-1) var(--kds-spacing-2);
3471
- color: var(--kds-color-text-primary);
3472
- text-decoration: none;
3473
- position: relative;
3474
- transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
3328
+ .page-card-preview-alt {
3329
+ background: linear-gradient(135deg, rgba(131, 71, 173, 0.1) 0%, rgba(147, 51, 234, 0.15) 100%);
3330
+ }
3331
+
3332
+ /* ========================================
3333
+ SURVEY MODAL
3334
+ Modal personalizado para encuesta de bienvenida
3335
+ ======================================== */
3336
+
3337
+ /* Modal container */
3338
+ dialog#surveyModal {
3339
+ background: var(--kds-color-background-paper);
3340
+ border-radius: var(--kds-radius-lg);
3341
+ padding: var(--kds-spacing-5);
3342
+ max-width: 400px;
3475
3343
  width: 100%;
3476
- justify-content: flex-start;
3344
+ box-shadow: var(--kds-shadow-16);
3345
+ box-sizing: border-box;
3346
+ border: none;
3477
3347
  }
3478
3348
 
3479
- .kds-sidebar-nav-item:hover {
3480
- background: var(--kds-color-action-hover);
3349
+ dialog#surveyModal::backdrop {
3350
+ background: rgba(0, 0, 0, 0.5);
3481
3351
  }
3482
3352
 
3483
- /* Nav item icon */
3484
- .kds-sidebar-nav-item i {
3485
- font-size: var(--kds-spacing-sidebar-icon-size);
3486
- color: var(--kds-color-text-secondary);
3353
+ /* Form styling */
3354
+ dialog#surveyModal form {
3355
+ margin: 0;
3356
+ padding: 0;
3487
3357
  }
3488
3358
 
3489
- /* Nav item text */
3490
- .kds-sidebar-nav-item span {
3491
- font-size: var(--kds-font-size-base);
3492
- font-weight: var(--kds-font-weight-medium);
3359
+ /* Clean input styling - remove BeerCSS underlines */
3360
+ dialog#surveyModal .field {
3361
+ margin-bottom: var(--kds-spacing-4);
3362
+ box-sizing: border-box;
3493
3363
  }
3494
3364
 
3495
- /* Active state - barra morada a la izquierda */
3496
- .kds-sidebar-nav-item.active {
3497
- background: var(--kds-color-primary-hover);
3365
+ dialog#surveyModal .field.border {
3366
+ border: 1px solid var(--kds-color-divider);
3367
+ border-radius: var(--kds-radius-md);
3368
+ background: var(--kds-color-background-paper);
3369
+ padding: 0;
3498
3370
  }
3499
3371
 
3500
- .kds-sidebar-nav-item.active::before {
3501
- content: '';
3502
- position: absolute;
3503
- left: 0;
3504
- top: 0;
3505
- bottom: 0;
3506
- width: calc(var(--kds-spacing-1) / 2);
3507
- background: var(--kds-color-primary-main);
3372
+ dialog#surveyModal .field.border select,
3373
+ dialog#surveyModal .field.border input {
3374
+ border: none;
3375
+ border-bottom: none;
3376
+ padding: var(--kds-spacing-3) var(--kds-spacing-4);
3377
+ background: transparent;
3378
+ color: var(--kds-color-text-primary);
3379
+ font-size: var(--kds-font-size-md);
3508
3380
  }
3509
3381
 
3510
- .kds-sidebar-nav-item.active i,
3511
- .kds-sidebar-nav-item.active span {
3512
- color: var(--kds-color-primary-main);
3382
+ dialog#surveyModal .field.border:focus-within {
3383
+ outline: 2px solid var(--kds-color-primary-main);
3384
+ outline-offset: 0;
3385
+ border-color: var(--kds-color-primary-main);
3513
3386
  }
3514
3387
 
3515
- /* Main content */
3516
- .kds-main-content {
3517
- flex: 1;
3518
- padding: var(--kds-spacing-8);
3519
- overflow-y: auto;
3388
+ dialog#surveyModal .field label {
3389
+ position: static;
3390
+ display: block;
3391
+ margin-bottom: var(--kds-spacing-2);
3392
+ font-size: var(--kds-font-size-sm);
3393
+ font-weight: var(--kds-font-weight-medium);
3394
+ color: var(--kds-color-text-primary);
3395
+ background: transparent;
3396
+ padding: 0;
3520
3397
  }
3521
3398
 
3522
- @media (max-width: 768px) {
3399
+ dialog#surveyModal .field.border {
3400
+ position: relative;
3401
+ }
3523
3402
 
3524
- .kds-main-content {
3525
- padding: var(--kds-spacing-4)
3526
- }
3403
+ /* Button styling */
3404
+ dialog#surveyModal button.primary {
3405
+ width: 100%;
3406
+ max-width: 100%;
3407
+ padding: var(--kds-spacing-3) var(--kds-spacing-5);
3408
+ font-size: var(--kds-font-size-md);
3409
+ font-weight: var(--kds-font-weight-semibold);
3410
+ border-radius: var(--kds-radius-md);
3411
+ transition: all var(--kds-transition-short) var(--kds-easing-standard);
3412
+ height: auto;
3413
+ min-height: auto;
3414
+ line-height: 1.5;
3415
+ box-sizing: border-box;
3416
+ margin: 0;
3417
+ border: none;
3527
3418
  }
3528
3419
 
3529
- /* ============================================
3530
- MOBILE RESPONSIVE SIDEBAR
3531
- ============================================ */
3420
+ dialog#surveyModal button.primary:disabled {
3421
+ background: var(--kds-color-action-disabled-bg);
3422
+ color: var(--kds-color-action-disabled);
3423
+ cursor: not-allowed;
3424
+ }
3532
3425
 
3533
- /* Mobile Topbar - oculto en desktop */
3534
- .kds-mobile-topbar {
3535
- display: none;
3426
+ dialog#surveyModal button.primary:not(:disabled):hover {
3427
+ background: var(--kds-color-primary-dark);
3536
3428
  }
3537
3429
 
3538
- /* Barra superior mobile del sidebar - oculta en desktop */
3539
- .kds-sidebar-mobile-header {
3430
+ /* Close button - hidden */
3431
+ dialog#surveyModal button.circle {
3540
3432
  display: none;
3541
3433
  }
3542
3434
 
3543
- /* Botón cerrar sidebar */
3544
- .kds-sidebar-close-btn {
3545
- border: none;
3546
- background: transparent;
3547
- border-radius: var(--kds-radius-sm);
3548
- cursor: pointer;
3549
- padding: 0;
3435
+ /* Help text */
3436
+ #surveyHelpText {
3437
+ margin-top: var(--kds-spacing-2);
3438
+ text-align: center;
3439
+ font-size: var(--kds-font-size-xs);
3440
+ color: var(--kds-color-text-secondary);
3550
3441
  }
3551
3442
 
3552
- .kds-sidebar-close-btn:hover {
3553
- background: var(--kds-color-action-hover);
3443
+ /* ========================================
3444
+ SHOWCASE / DEMO COMPONENTS
3445
+ Componentes para páginas de demostración y showcase
3446
+ ======================================== */
3447
+
3448
+ /* Showcase Header */
3449
+ .showcase-header {
3450
+ background: linear-gradient(135deg, #8347AD 0%, #6A2B93 100%);
3451
+ color: white;
3452
+ padding: var(--kds-spacing-12) var(--kds-spacing-6);
3453
+ text-align: center;
3554
3454
  }
3555
3455
 
3556
- .kds-sidebar-close-btn i {
3557
- font-size: var(--kds-spacing-sidebar-icon-size);
3558
- color: var(--kds-color-text-primary);
3456
+ .showcase-content {
3457
+ padding: var(--kds-spacing-8) var(--kds-spacing-6);
3559
3458
  }
3560
3459
 
3561
- /* Botón hamburger */
3562
- .kds-hamburger-btn {
3563
- width: var(--kds-spacing-sidebar-icon-container-size);
3564
- height: var(--kds-spacing-sidebar-icon-container-size);
3565
- border: none;
3566
- background: transparent;
3567
- border-radius: var(--kds-radius-sm);
3568
- cursor: pointer;
3569
- transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard);
3460
+ /* Component Grid (para showcase de componentes) */
3461
+ .component-grid {
3462
+ display: grid;
3463
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
3464
+ gap: var(--kds-spacing-6);
3465
+ margin-top: var(--kds-spacing-8);
3570
3466
  }
3571
3467
 
3572
- .kds-hamburger-btn:hover {
3573
- background: var(--kds-color-action-hover);
3468
+ /* Demo Header */
3469
+ .demo-header {
3470
+ background: var(--kds-color-primary-main);
3471
+ color: white;
3472
+ padding: var(--kds-spacing-8) var(--kds-spacing-6);
3473
+ text-align: center;
3574
3474
  }
3575
3475
 
3576
- .kds-hamburger-btn i {
3577
- font-size: var(--kds-spacing-sidebar-icon-size);
3578
- color: var(--kds-color-text-primary);
3476
+ /* Demo Navigation Grid */
3477
+ .demo-nav-grid {
3478
+ display: grid;
3479
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
3480
+ gap: var(--kds-spacing-4);
3481
+ padding: var(--kds-spacing-8);
3579
3482
  }
3580
3483
 
3581
- /* Mobile (≤ 768px) */
3582
- @media (max-width: 768px) {
3583
- /* Mostrar topbar */
3584
- .kds-mobile-topbar {
3585
- display: flex;
3586
- align-items: center;
3587
- gap: var(--kds-spacing-2);
3588
- position: fixed;
3589
- top: 0;
3590
- left: 0;
3591
- right: 0;
3592
- height: var(--kds-spacing-7);
3593
- padding: 0 var(--kds-spacing-2);
3594
- background: var(--kds-color-background-paper);
3595
- border-bottom: 1px solid var(--kds-color-divider);
3596
- z-index: var(--kds-z-index-appbar);
3597
- font-size: var(--kds-font-size-lg);
3598
- font-weight: var(--kds-font-weight-semibold);
3599
- }
3600
-
3601
- /* Layout con espacio para topbar */
3602
- .kds-page-layout {
3603
- padding-top: var(--kds-spacing-7);
3604
- }
3605
-
3606
- /* Sidebar = drawer full-width */
3607
- .kds-sidebar {
3608
- position: fixed;
3609
- top: 0;
3610
- left: 0;
3611
- bottom: 0;
3612
- width: 100vw;
3613
- margin: 0;
3614
- height: 100%;
3615
- transform: translateX(-100%);
3616
- transition: transform var(--kds-transition-standard) var(--kds-easing-ease-out);
3617
- z-index: var(--kds-z-index-drawer);
3618
- border-radius: 0;
3619
- }
3620
-
3621
- /* Barra superior mobile visible */
3622
- .kds-sidebar-mobile-header {
3623
- display: flex;
3624
- align-items: center;
3625
- justify-content: space-between;
3626
- height: var(--kds-spacing-7);
3627
- padding: 0 var(--kds-spacing-2);
3628
- background: var(--kds-color-background-paper);
3629
- border-bottom: 1px solid var(--kds-color-divider);
3630
- font-size: var(--kds-font-size-lg);
3631
- font-weight: var(--kds-font-weight-semibold);
3632
- color: var(--kds-color-text-primary);
3633
- }
3484
+ /* Demo Stage Card */
3485
+ .demo-stage-card {
3486
+ background: var(--kds-color-background-paper);
3487
+ border-radius: var(--kds-radius-lg);
3488
+ padding: var(--kds-spacing-6);
3489
+ box-shadow: var(--kds-shadow-1);
3490
+ transition: all var(--kds-transition-standard) var(--kds-easing-standard);
3491
+ text-decoration: none;
3492
+ color: inherit;
3493
+ display: flex;
3494
+ flex-direction: column;
3495
+ gap: var(--kds-spacing-3);
3496
+ }
3634
3497
 
3635
- /* Sidebar abierto */
3636
- .kds-sidebar-open {
3637
- transform: translateX(0);
3638
- }
3498
+ .demo-stage-card:hover {
3499
+ box-shadow: var(--kds-shadow-4);
3500
+ transform: translateY(-2px);
3501
+ }
3639
3502
 
3640
- /* Main content full-width */
3641
- .kds-main-content {
3642
- margin-left: 0;
3643
- }
3503
+ .demo-stage-number,
3504
+ .demo-stage-icon {
3505
+ width: 48px;
3506
+ height: 48px;
3507
+ background: rgba(131, 71, 173, 0.1);
3508
+ color: var(--kds-color-primary-main);
3509
+ border-radius: var(--kds-radius-md);
3510
+ display: flex;
3511
+ align-items: center;
3512
+ justify-content: center;
3513
+ font-size: var(--kds-font-size-2xl);
3514
+ font-weight: var(--kds-font-weight-bold);
3644
3515
  }
3645
3516
 
3646
- /* ============================================
3647
- LIST UTILITIES
3648
- ============================================ */
3517
+ .demo-stage-number {
3518
+ font-size: var(--kds-font-size-xl);
3519
+ }
3649
3520
 
3650
- /* Standard list with compact spacing */
3651
- .kds-list {
3652
- margin: 0;
3653
- padding-left: var(--kds-spacing-2);
3654
- list-style-position: outside;
3655
- line-height: var(--kds-line-height-relaxed);
3521
+ .demo-stage-icon {
3522
+ width: 64px;
3523
+ height: 64px;
3656
3524
  }
3657
3525
 
3658
- .kds-list > li {
3659
- margin-bottom: var(--kds-spacing-2);
3526
+ .demo-stage-icon i {
3527
+ width: auto;
3528
+ height: auto;
3529
+ font-size: var(--kds-font-size-2xl);
3660
3530
  }
3661
3531
 
3662
- .kds-list > li:last-child {
3663
- margin-bottom: 0;
3532
+ .demo-stage-title {
3533
+ font-size: var(--kds-font-size-lg);
3534
+ font-weight: var(--kds-font-weight-semibold);
3535
+ color: var(--kds-color-text-primary);
3664
3536
  }
3665
3537
 
3666
- /* Code block for displaying code snippets */
3667
- .kds-code-block {
3668
- background: var(--kds-color-background-elevated);
3669
- padding: var(--kds-spacing-4);
3670
- border-radius: var(--kds-radius-md);
3671
- overflow-x: auto;
3672
- font-family: 'Courier New', monospace;
3538
+ .demo-stage-description {
3673
3539
  font-size: var(--kds-font-size-sm);
3540
+ color: var(--kds-color-text-secondary);
3674
3541
  line-height: var(--kds-line-height-relaxed);
3675
- color: var(--kds-color-text-primary);
3676
3542
  }
3677
3543
 
3678
- /* ============================================
3679
- DEMO PAGE STYLES (DEPRECATED - Use kds-card-* instead)
3680
- ============================================ */
3544
+ /* ========================================
3545
+ CONTRACT CONTENT (Contract page)
3546
+ ======================================== */
3681
3547
 
3682
- .demo-card {
3548
+ .kds-contract-content {
3683
3549
  background: var(--kds-color-background-paper);
3684
3550
  border: 1px solid var(--kds-color-divider);
3685
3551
  border-radius: var(--kds-radius-lg);
3686
3552
  padding: var(--kds-spacing-6);
3687
- margin-bottom: var(--kds-spacing-6);
3553
+ max-height: 400px;
3554
+ overflow-y: auto;
3688
3555
  }
3689
3556
 
3690
- .code-block {
3691
- background: var(--kds-color-background-elevated);
3692
- border: 1px solid var(--kds-color-divider);
3557
+ .kds-contract-content details {
3558
+ margin-bottom: var(--kds-spacing-4);
3559
+ }
3560
+
3561
+ .kds-contract-content summary {
3562
+ cursor: pointer;
3563
+ font-weight: var(--kds-font-weight-semibold);
3564
+ font-size: var(--kds-font-size-md);
3565
+ color: var(--kds-color-text-primary);
3566
+ padding: var(--kds-spacing-3);
3693
3567
  border-radius: var(--kds-radius-md);
3694
- padding: var(--kds-spacing-4);
3695
- font-family: var(--kds-font-family-mono);
3696
- font-size: var(--kds-font-size-sm);
3568
+ transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
3569
+ }
3570
+
3571
+ .kds-contract-content summary:hover {
3572
+ background: var(--kds-color-action-hover);
3573
+ }
3574
+
3575
+ .kds-contract-content details[open] summary {
3576
+ margin-bottom: var(--kds-spacing-3);
3577
+ }
3578
+
3579
+ .kds-contract-content p {
3580
+ margin: var(--kds-spacing-2) 0;
3697
3581
  line-height: var(--kds-line-height-relaxed);
3698
- white-space: pre-wrap;
3699
- word-wrap: break-word;
3700
- overflow-x: auto;
3582
+ color: var(--kds-color-text-secondary);
3583
+ }
3584
+
3585
+ /* ========================================
3586
+ BANK GRID (Bank connection page)
3587
+ ======================================== */
3588
+
3589
+ .kds-bank-grid {
3590
+ display: grid;
3591
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
3592
+ gap: var(--kds-spacing-4);
3593
+ margin-bottom: var(--kds-spacing-6);
3594
+ }
3595
+
3596
+ .kds-bank-item {
3597
+ aspect-ratio: 1;
3598
+ border: 2px solid var(--kds-color-divider);
3599
+ border-radius: var(--kds-radius-lg);
3600
+ padding: var(--kds-spacing-4);
3601
+ display: flex;
3602
+ flex-direction: column;
3603
+ align-items: center;
3604
+ justify-content: center;
3605
+ cursor: pointer;
3606
+ transition: all var(--kds-transition-short) var(--kds-easing-standard);
3607
+ background: var(--kds-color-background-paper);
3608
+ }
3609
+
3610
+ .kds-bank-item:hover {
3611
+ border-color: var(--kds-color-primary-main);
3612
+ box-shadow: var(--kds-shadow-2);
3613
+ }
3614
+
3615
+ .kds-bank-item.selected {
3616
+ border-color: var(--kds-color-primary-main);
3617
+ background: rgba(131, 71, 173, 0.05);
3618
+ }
3619
+
3620
+ .kds-bank-item img {
3621
+ max-width: 80%;
3622
+ max-height: 60%;
3623
+ object-fit: contain;
3624
+ margin-bottom: var(--kds-spacing-2);
3625
+ }
3626
+
3627
+ .kds-bank-item-name {
3628
+ font-size: var(--kds-font-size-xs);
3629
+ font-weight: var(--kds-font-weight-medium);
3701
3630
  color: var(--kds-color-text-primary);
3631
+ text-align: center;
3702
3632
  }
3703
3633
 
3704
- .kds-text-secondary-color {
3634
+ @media (max-width: 768px) {
3635
+ .kds-bank-grid {
3636
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
3637
+ gap: var(--kds-spacing-3);
3638
+ }
3639
+ }
3640
+
3641
+ /* ========================================
3642
+ UTILITY CLASSES
3643
+ Clases utilitarias para evitar estilos inline
3644
+ ======================================== */
3645
+
3646
+ /* Icon utilities - alineación con texto */
3647
+ .kds-icon-inline {
3648
+ vertical-align: middle;
3649
+ margin-right: var(--kds-spacing-2);
3650
+ }
3651
+
3652
+ /* Text utilities */
3653
+ .kds-text-center {
3654
+ text-align: center;
3655
+ }
3656
+
3657
+ .kds-text-underline {
3658
+ text-decoration: underline;
3659
+ }
3660
+
3661
+ .kds-text-no-decoration {
3662
+ text-decoration: none;
3663
+ }
3664
+
3665
+ /* Spacing utilities */
3666
+ .kds-mt-2 { margin-top: var(--kds-spacing-2); }
3667
+ .kds-mt-3 { margin-top: var(--kds-spacing-3); }
3668
+ .kds-mt-4 { margin-top: var(--kds-spacing-4); }
3669
+ .kds-mt-6 { margin-top: var(--kds-spacing-6); }
3670
+ .kds-mt-8 { margin-top: var(--kds-spacing-8); }
3671
+
3672
+ .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
3673
+ .kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
3674
+ .kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
3675
+ .kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
3676
+ .kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
3677
+
3678
+ /* Display utilities */
3679
+ .kds-hidden {
3680
+ display: none;
3681
+ }
3682
+
3683
+ .kds-w-full {
3684
+ width: 100%;
3685
+ }
3686
+
3687
+ /* Icon sizes */
3688
+ .kds-icon-sm { font-size: 18px; }
3689
+ .kds-icon-md { font-size: 32px; }
3690
+ .kds-icon-lg { font-size: 48px; }
3691
+ .kds-icon-xl { font-size: 64px; }
3692
+ .kds-icon-xxl { font-size: 80px; }
3693
+
3694
+ /* Position utilities */
3695
+ .kds-absolute-top-right {
3696
+ position: absolute;
3697
+ top: var(--kds-spacing-4);
3698
+ right: var(--kds-spacing-4);
3699
+ }
3700
+
3701
+ /* Color utilities (solo para casos específicos de demo) */
3702
+ .kds-text-warning {
3703
+ color: #92400E;
3704
+ }
3705
+
3706
+ .kds-list-warning {
3707
+ margin: 0;
3708
+ padding-left: var(--kds-spacing-5);
3709
+ color: #78350F;
3710
+ }
3711
+
3712
+ /* ========================================
3713
+ LAYOUT FLEXBOX UTILITIES
3714
+ Utilities for flexbox layouts
3715
+ ======================================== */
3716
+
3717
+ .kds-flex {
3718
+ display: flex;
3719
+ }
3720
+
3721
+ .kds-flex-row {
3722
+ display: flex;
3723
+ flex-direction: row;
3724
+ }
3725
+
3726
+ .kds-flex-col {
3727
+ display: flex;
3728
+ flex-direction: column;
3729
+ }
3730
+
3731
+ .kds-items-start {
3732
+ align-items: flex-start;
3733
+ }
3734
+
3735
+ .kds-items-center {
3736
+ align-items: center;
3737
+ }
3738
+
3739
+ .kds-items-end {
3740
+ align-items: flex-end;
3741
+ }
3742
+
3743
+ .kds-justify-start {
3744
+ justify-content: flex-start;
3745
+ }
3746
+
3747
+ .kds-justify-center {
3748
+ justify-content: center;
3749
+ }
3750
+
3751
+ .kds-justify-between {
3752
+ justify-content: space-between;
3753
+ }
3754
+
3755
+ .kds-justify-end {
3756
+ justify-content: flex-end;
3757
+ }
3758
+
3759
+ .kds-flex-1 {
3760
+ flex: 1;
3761
+ }
3762
+
3763
+ .kds-flex-shrink-0 {
3764
+ flex-shrink: 0;
3765
+ }
3766
+
3767
+ /* Gap utilities */
3768
+ .kds-gap-1 { gap: var(--kds-spacing-1); }
3769
+ .kds-gap-2 { gap: var(--kds-spacing-2); }
3770
+ .kds-gap-3 { gap: var(--kds-spacing-3); }
3771
+ .kds-gap-4 { gap: var(--kds-spacing-4); }
3772
+ .kds-gap-5 { gap: var(--kds-spacing-5); }
3773
+ .kds-gap-6 { gap: var(--kds-spacing-6); }
3774
+ .kds-gap-8 { gap: var(--kds-spacing-8); }
3775
+
3776
+ /* ========================================
3777
+ OPACITY UTILITIES
3778
+ ======================================== */
3779
+
3780
+ .kds-opacity-60 {
3781
+ opacity: 0.6;
3782
+ }
3783
+
3784
+ .kds-opacity-80 {
3785
+ opacity: 0.8;
3786
+ }
3787
+
3788
+ .kds-opacity-90 {
3789
+ opacity: 0.9;
3790
+ }
3791
+
3792
+ /* ========================================
3793
+ BADGE COMPONENT
3794
+ Small chips/badges for labels and status
3795
+ ======================================== */
3796
+
3797
+ .kds-badge {
3798
+ display: inline-block;
3799
+ padding: 2px 8px;
3800
+ border-radius: var(--kds-radius-sm);
3801
+ font-size: var(--kds-font-size-xs);
3802
+ font-weight: var(--kds-font-weight-medium);
3803
+ line-height: 1.5;
3804
+ }
3805
+
3806
+ .kds-badge.success {
3807
+ background-color: var(--kds-color-success-container);
3808
+ color: var(--kds-color-success-dark);
3809
+ }
3810
+
3811
+ .kds-badge.error {
3812
+ background-color: var(--kds-color-error-container);
3813
+ color: var(--kds-color-error-dark);
3814
+ }
3815
+
3816
+ .kds-badge.warning {
3817
+ background-color: var(--kds-color-warning-container);
3818
+ color: var(--kds-color-warning-dark);
3819
+ }
3820
+
3821
+ .kds-badge.info {
3822
+ background-color: var(--kds-color-info-container);
3823
+ color: var(--kds-color-info-dark);
3824
+ }
3825
+
3826
+ .kds-badge.primary {
3827
+ background-color: var(--kds-color-primary-container);
3828
+ color: var(--kds-color-primary-dark);
3829
+ }
3830
+
3831
+ /* ========================================
3832
+ DIVIDER WITH TEXT
3833
+ Separator with optional text
3834
+ ======================================== */
3835
+
3836
+ .kds-divider-text {
3837
+ text-align: center;
3838
+ margin: var(--kds-spacing-6) 0;
3705
3839
  color: var(--kds-color-text-secondary);
3840
+ position: relative;
3841
+ font-size: var(--kds-font-size-sm);
3706
3842
  }
3707
3843
 
3708
- .kds-main-content > .kds-body-large {
3709
- margin-bottom: var(--kds-spacing-6);
3844
+ .kds-divider-text span {
3845
+ background: var(--kds-color-background-default);
3846
+ padding: 0 var(--kds-spacing-2);
3847
+ position: relative;
3848
+ z-index: 1;
3710
3849
  }
3711
3850
 
3712
- .kds-main-content > .demo-card ul {
3713
- line-height: var(--kds-line-height-relaxed);
3851
+ .kds-divider-text::before {
3852
+ content: '';
3853
+ position: absolute;
3854
+ top: 50%;
3855
+ left: 0;
3856
+ right: 0;
3857
+ height: 1px;
3858
+ background: var(--kds-color-divider);
3859
+ }
3860
+
3861
+ /* ========================================
3862
+ CARD ICON CONTENT PATTERN
3863
+ Card with icon on left and content on right
3864
+ ======================================== */
3865
+
3866
+ .kds-card-icon-content {
3867
+ display: flex;
3868
+ align-items: flex-start;
3869
+ gap: var(--kds-spacing-4);
3870
+ }
3871
+
3872
+ .kds-card-icon-content-text {
3873
+ flex: 1;
3874
+ min-width: 0;
3875
+ }
3876
+
3877
+ /* ========================================
3878
+ CARD COMPONENT UTILITIES
3879
+ Padding variants for cards
3880
+ ======================================== */
3881
+
3882
+ .kds-card-elevated.kds-p-0 { padding: 0; }
3883
+ .kds-card-elevated.kds-p-2 { padding: var(--kds-spacing-2); }
3884
+ .kds-card-elevated.kds-p-3 { padding: var(--kds-spacing-3); }
3885
+ .kds-card-elevated.kds-p-4 { padding: var(--kds-spacing-4); }
3886
+ .kds-card-elevated.kds-p-5 { padding: var(--kds-spacing-5); }
3887
+ .kds-card-elevated.kds-p-6 { padding: var(--kds-spacing-6); }
3888
+ .kds-card-elevated.kds-p-8 { padding: var(--kds-spacing-8); }
3889
+
3890
+ /* ========================================
3891
+ SNACKBAR UTILITIES
3892
+ Position variants for snackbar/toast messages
3893
+ ======================================== */
3894
+
3895
+ /* Snackbar positioned at top (above modals) */
3896
+ .snackbar.kds-snackbar-top {
3897
+ top: var(--kds-spacing-4);
3898
+ bottom: auto;
3899
+ z-index: 1400; /* Above modals (1300) */
3714
3900
  }
3715
3901
 
3902
+ /* ========================================
3903
+ DIRECTIONAL SPACING UTILITIES
3904
+ Margin and padding for individual sides
3905
+ ======================================== */
3906
+
3907
+ /* Margin Left */
3908
+ .kds-ml-0 { margin-left: 0; }
3909
+ .kds-ml-1 { margin-left: var(--kds-spacing-1); }
3910
+ .kds-ml-2 { margin-left: var(--kds-spacing-2); }
3911
+ .kds-ml-3 { margin-left: var(--kds-spacing-3); }
3912
+ .kds-ml-4 { margin-left: var(--kds-spacing-4); }
3913
+ .kds-ml-5 { margin-left: var(--kds-spacing-5); }
3914
+ .kds-ml-6 { margin-left: var(--kds-spacing-6); }
3915
+ .kds-ml-8 { margin-left: var(--kds-spacing-8); }
3916
+
3917
+ /* Margin Right */
3918
+ .kds-mr-0 { margin-right: 0; }
3919
+ .kds-mr-1 { margin-right: var(--kds-spacing-1); }
3920
+ .kds-mr-2 { margin-right: var(--kds-spacing-2); }
3921
+ .kds-mr-3 { margin-right: var(--kds-spacing-3); }
3922
+ .kds-mr-4 { margin-right: var(--kds-spacing-4); }
3923
+ .kds-mr-5 { margin-right: var(--kds-spacing-5); }
3924
+ .kds-mr-6 { margin-right: var(--kds-spacing-6); }
3925
+ .kds-mr-8 { margin-right: var(--kds-spacing-8); }
3926
+
3927
+ /* Padding Left */
3928
+ .kds-pl-0 { padding-left: 0; }
3929
+ .kds-pl-1 { padding-left: var(--kds-spacing-1); }
3930
+ .kds-pl-2 { padding-left: var(--kds-spacing-2); }
3931
+ .kds-pl-3 { padding-left: var(--kds-spacing-3); }
3932
+ .kds-pl-4 { padding-left: var(--kds-spacing-4); }
3933
+ .kds-pl-5 { padding-left: var(--kds-spacing-5); }
3934
+ .kds-pl-6 { padding-left: var(--kds-spacing-6); }
3935
+ .kds-pl-8 { padding-left: var(--kds-spacing-8); }
3936
+
3937
+ /* Padding Right */
3938
+ .kds-pr-0 { padding-right: 0; }
3939
+ .kds-pr-1 { padding-right: var(--kds-spacing-1); }
3940
+ .kds-pr-2 { padding-right: var(--kds-spacing-2); }
3941
+ .kds-pr-3 { padding-right: var(--kds-spacing-3); }
3942
+ .kds-pr-4 { padding-right: var(--kds-spacing-4); }
3943
+ .kds-pr-5 { padding-right: var(--kds-spacing-5); }
3944
+ .kds-pr-6 { padding-right: var(--kds-spacing-6); }
3945
+ .kds-pr-8 { padding-right: var(--kds-spacing-8); }
3946
+
3947
+ /* Colors */
3948
+ .kds-error-text {
3949
+ color: var(--kds-color-error-main) !important;
3950
+ }
3951
+
3952
+ /* Z-index */
3953
+
3954
+ .z-1000 {
3955
+ z-index: 1000;
3956
+ }