@khipu/design-system 0.2.0-alpha.2 → 0.2.0-alpha.22

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-05-05T20:41:24.239Z
+ * Generated: 2026-05-25T18:59:02.134Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -147,9 +147,9 @@
   --kds-letter-spacing-widest: 1px;
 
   /* Button typography */
-  --kds-typography-button-font-size: 0.9375rem;
+  --kds-typography-button-font-size: 0.875rem;
   --kds-typography-button-font-weight: 500;
-  --kds-typography-button-line-height: 26px;
+  --kds-typography-button-line-height: 1.5;
   --kds-typography-button-letter-spacing: 0.46px;
 
   /* Typography margins */
@@ -199,10 +199,10 @@
   --kds-spacing-input-padding-y: 16px;
   --kds-spacing-input-padding-x: 12px;
   --kds-spacing-input-padding: 16px 12px;
-  --kds-spacing-button-padding-y: 8px;
-  --kds-spacing-button-padding-x: 22px;
-  --kds-spacing-button-padding: 8px 22px;
-  --kds-spacing-button-min-height: 50px;
+  --kds-spacing-button-padding-y: 0;
+  --kds-spacing-button-padding-x: 16px;
+  --kds-spacing-button-padding: 0 16px;
+  --kds-spacing-button-min-height: 44px;
   --kds-spacing-button-icon-size: 20px;
   --kds-spacing-sidebar-width: 280px;
   --kds-spacing-sidebar-width-collapsed: 72px;
@@ -241,7 +241,7 @@
   --kds-radius-full: 9999px;
 
   /* Component-specific radii */
-  --kds-radius-button: 4px;
+  --kds-radius-button: 10px;
   --kds-radius-input: 4px;
   --kds-radius-card: 14px;
   --kds-radius-modal: 20px;
@@ -643,6 +643,7 @@ body.dark {
     /* Scroll Container Utilities */
     --kds-scroll-sm-height: 280px;
     --kds-scroll-md-height: 420px;
+
     --kds-scroll-lg-height: 600px;
 
     /* Stage Layout */
@@ -755,7 +756,7 @@ footer {
    ======================================== */
 :root {
     /* Scroll-linked collapse range (mobile sticky invoice) */
-    --kds-scroll-collapse-end: 150px;
+    --kds-scroll-collapse-end: 60px;
 
     /* Merchant tile: normal and collapsed sizes (from source prototype) */
     --kds-merchant-size: 64px;
@@ -777,6 +778,10 @@ footer {
  * Source: design.khipu.com and Material Design 3 specifications
  */
 
+ * {
+    border-radius: 0;
+ }
+
 
 :has(>main) {
     background-color: transparent !important;
@@ -821,34 +826,37 @@ a.kds-btn {
     justify-content: center;
     gap: 8px;
     text-align: center;
+    width: 100%;
 
     /* Typography - Using design tokens */
     font-family: var(--kds-font-family-secondary);
-    font-weight: var(--kds-font-weight-medium);      /* 500, no 600 */
-    font-size: var(--kds-typography-button-font-size);          /* 0.9375rem = 15px */
-    line-height: var(--kds-typography-button-line-height);      /* 26px, no 1 */
+    font-weight: var(--kds-font-weight-medium);      /* 500 */
+    font-size: var(--kds-typography-button-font-size);          /* 0.875rem = 14px */
+    line-height: var(--kds-typography-button-line-height);      /* 1.5 */
     letter-spacing: var(--kds-typography-button-letter-spacing); /* 0.46px */
     text-transform: uppercase;
 
     /* Spacing - Using design tokens */
-    padding: var(--kds-spacing-button-padding);      /* 8px 22px */
-    min-height: var(--kds-spacing-button-min-height); /* 50px */
-    height: auto;  /* Remove fixed height, let content + padding define it */
+    padding: var(--kds-spacing-button-padding);      /* 0 16px */
+    height: var(--kds-spacing-button-min-height);    /* 44px */
 
     /* Border - Using design token */
-    border-radius: var(--kds-radius-button);  /* 4px */
+    border-radius: var(--kds-radius-button);  /* 10px */
     border: none;
 
     /* Interaction */
     cursor: pointer;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background .15s, box-shadow .15s, transform .05s;
     box-sizing: border-box;
     vertical-align: middle;
 }
 
+/* Active state - add subtle press effect */
+button.kds-btn:active:not(:disabled),
+a.kds-btn:active:not(:disabled) {
+    transform: translateY(1px);
+}
+
 /* Disabled state - colores específicos en lugar de opacity */
 button.kds-btn:disabled,
 a.kds-btn:disabled {
@@ -866,18 +874,13 @@ a.kds-btn-primary {
     background: var(--kds-color-primary-main);     /* #8347AD */
     color: white;
     border: none;
-    box-shadow: 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);  /* elevation/2 */
+    box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
 }
 
-/* Hover State - background más oscuro + elevation/4 */
+/* Hover State - background más oscuro */
 button.kds-btn-primary:hover:not(:disabled),
 a.kds-btn-primary:hover:not(:disabled) {
-    background: var(--kds-color-primary-dark);     /* #6A3A8C */
-    box-shadow: 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);  /* elevation/4 */
+    background: var(--kds-color-primary-dark);     /* #5B3179 */
 }
 
 /* Active/Focus State */
@@ -1047,6 +1050,7 @@ a.kds-btn.kds-btn-md {
     padding: var(--kds-spacing-2);
     box-shadow: var(--kds-shadow-card);
     transition: box-shadow 0.3s ease;
+    margin-block-start: 0 !important;
 }
 
 .kds-card-elevated:hover,
@@ -1723,53 +1727,108 @@ a.kds-btn.kds-btn-md {
 }
 
 /* ========================================
-   Snackbar Positioning
+   Snackbar Positioning & Styling
    ======================================== */
 
 .snackbar {
     position: fixed;
-    bottom: var(--kds-spacing-3);
-    left: 50%;
-    transform: translateX(-50%);
     z-index: var(--kds-z-index-snackbar);
     min-width: 344px;
     max-width: var(--kds-snackbar-max-width);
     box-shadow: var(--kds-shadow-8);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-1-5) var(--kds-spacing-2);
+    gap: var(--kds-spacing-1);
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-body2);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    letter-spacing: var(--kds-letter-spacing-normal);
+    overflow: hidden;
 }
 
 /* Snackbar active state - ensure visibility when toggled via JS */
 .snackbar.active {
     visibility: visible !important;
     opacity: 1 !important;
-    transform: translateX(-50%) !important;
 }
 
-/* Snackbar semantic variants - background + text/icon color */
+/* Snackbar semantic variants
+   All use white text (--kds-color-primary-contrast) on solid semantic backgrounds */
 .snackbar.error {
     background-color: var(--kds-color-error-main) !important;
-    color: var(--on-error, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 .snackbar.error i {
-    color: var(--on-error, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 .snackbar.info {
     background-color: var(--kds-color-info-main) !important;
-    color: var(--on-info, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 .snackbar.info i {
-    color: var(--on-info, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 .snackbar.success {
     background-color: var(--kds-color-success-main) !important;
-    color: var(--on-success, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 .snackbar.success i {
-    color: var(--on-success, var(--kds-color-primary-contrast)) !important;
+    color: var(--kds-color-primary-contrast) !important;
+}
+
+/* Snackbar progress bar — animated timer for auto-dismiss */
+.snackbar[data-auto-dismiss]::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.35);
+    border-radius: 0 0 var(--kds-radius-md) var(--kds-radius-md);
+    animation: kds-snackbar-timer var(--kds-snackbar-duration, 5s) linear forwards;
+}
+
+@keyframes kds-snackbar-timer {
+    from { width: 100%; }
+    to { width: 0; }
+}
+
+/* Snackbar close button */
+.kds-snackbar-close {
+    background: none !important;
+    border: none !important;
+    color: var(--kds-color-primary-contrast) !important;
+    cursor: pointer;
+    padding: var(--kds-spacing-0-5) !important;
+    margin: calc(-1 * var(--kds-spacing-0-5)) !important;
+    margin-left: 0 !important;
+    border-radius: var(--kds-radius-full) !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    opacity: 0.7;
+    transition: opacity 150ms;
+    min-width: auto !important;
+    width: auto !important;
+    height: auto !important;
+}
+
+.kds-snackbar-close:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.15) !important;
+}
+
+.kds-snackbar-close i {
+    font-size: 18px !important;
+    color: var(--kds-color-primary-contrast) !important;
 }
 
 /* ========================================
@@ -2102,6 +2161,17 @@ body.dark {
   transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
 }
 
+/* === TEXTAREA FIX === */
+/* BeerCSS base sets minimal block padding; add breathing room for textarea */
+.field > textarea {
+  padding-block: 0.75rem;
+  resize: vertical;
+}
+
+.field.label > textarea {
+  padding-block-start: 1.5rem;
+}
+
 /* ==========================================
    NOTCH VISIBILITY (opacity)
    ========================================== */
@@ -2189,12 +2259,16 @@ body.dark {
    Asegurar que el dropdown arrow sea visible
    ========================================== */
 
-/* Select: mantener appearance nativa para mostrar el dropdown arrow */
+/* Select: reset nativo + arrow custom via SVG (iOS Safari ignora estilos con appearance:auto) */
 .field select {
-  /* BeerCSS puede estar ocultando el arrow, aseguramos que sea visible */
-  appearance: auto;
-  -webkit-appearance: auto;
-  -moz-appearance: auto;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--kds-spacing-1) center;
+  background-size: 20px;
+  padding-right: var(--kds-spacing-4) !important;
 }
 
 /* ==========================================
@@ -2742,7 +2816,8 @@ dialog.modal .field.border:focus-within {
         padding: var(--kds-spacing-2);
     }
 
-    .snackbar {
+    .snackbar,
+    .snackbar.active {
         min-width: calc(100% - 32px);
         left: 16px;
         right: 16px;
@@ -4906,20 +4981,50 @@ dialog#surveyModal button.circle {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--kds-spacing-1);
-    color: var(--kds-color-text-disabled);
+    gap: var(--kds-spacing-0-5);
+    color: var(--kds-color-gray-400);
     font-size: var(--kds-font-size-xs);
+    letter-spacing: var(--kds-letter-spacing-wide);
     padding: var(--kds-spacing-1) 0;
 }
 
-.kds-secure-footer i {
-    font-size: var(--kds-font-size-sm);
+/* Desktop: footer inside card hidden; Mobile: footer outside card hidden */
+.kds-card-elevated > .kds-secure-footer {
+    display: none;
 }
 
-/* Inside a card: push to bottom with auto margin, subtle top spacing */
-.kds-secure-footer.inside {
-    margin-top: auto;
-    padding-top: var(--kds-spacing-3);
+.kds-screen > form {
+    margin-block-start: 0 !important;
+}
+
+@media (max-width: 767px) {
+    .kds-card-elevated > .kds-secure-footer {
+        display: flex;
+    }
+    .kds-screen > .kds-secure-footer {
+        display: none;
+    }
+}
+
+.kds-secure-footer-lock {
+    width: 12px;
+    height: 12px;
+    flex: 0 0 auto;
+    display: block;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.kds-secure-footer .khipu-mark {
+    height: 11px;
+    width: auto;
+    flex: 0 0 auto;
+    display: block;
+    object-fit: contain;
+    overflow: visible;
 }
 
 .kds-secure-footer-code {
@@ -4934,21 +5039,27 @@ dialog#surveyModal button.circle {
 .kds-expand-toggle {
     background: none;
     border: 0;
-    padding: var(--kds-spacing-0-5) 0;
+    padding: 0;
     color: var(--kds-color-primary-main);
     font-weight: var(--kds-font-weight-medium);
     font-size: var(--kds-font-size-sm);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
-    gap: var(--kds-spacing-0-75);
+    gap: 0;
 }
 
-.kds-expand-toggle:hover {
+.kds-expand-toggle:hover,
+.kds-expand-toggle:focus,
+.kds-expand-toggle:active {
     background: transparent;
+    outline: none;
+    box-shadow: none;
 }
 
-.kds-expand-toggle:hover span {
+.kds-expand-toggle:hover span,
+.kds-expand-toggle:focus span,
+.kds-expand-toggle:active span {
     text-decoration: underline;
 }
 
@@ -4974,7 +5085,7 @@ dialog#surveyModal button.circle {
 
 .kds-expand-panel.open {
     max-height: 800px;
-    margin-top: var(--kds-spacing-1);
+    margin-top: 0;
 }
 
 /* ========================================
@@ -5150,12 +5261,19 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-error-main);
 }
 
+/* Variant: info */
+.kds-status-block[data-status="info"] .kds-status-block-icon {
+    background: var(--kds-color-info-soft);
+    border: var(--kds-border-width-md) solid var(--kds-color-info-main);
+    color: var(--kds-color-info-main);
+}
+
 /* Inline variant: icon left + text right */
 .kds-status-block.inline {
     text-align: left;
     display: flex;
     align-items: center;
-    gap: var(--kds-spacing-3);
+    gap: var(--kds-spacing-2);
     padding: var(--kds-spacing-1) 0;
 }
 
@@ -5310,6 +5428,7 @@ dialog#surveyModal button.circle {
     background: var(--kds-color-background-muted);
     border-radius: var(--kds-radius-lg);
     padding: var(--kds-spacing-0-25);
+    margin-bottom: var(--kds-spacing-2);
     display: flex;
     position: relative;
 }
@@ -5451,7 +5570,13 @@ dialog#surveyModal button.circle {
         opacity: calc(1 - var(--collapse-progress) * 1.5);
     }
 
-    /* Amount: NO font-size change (source keeps 30px always) */
+    /* Amount: 30px → 24px (progressive) */
+    .kds-invoice-sticky .kds-invoice-amount {
+        font-size: calc(
+            var(--kds-font-size-3xl) -
+            (var(--kds-font-size-3xl) - var(--kds-font-size-2xl)) * var(--collapse-progress)
+        );
+    }
 
     /* Merchant tile: 64×64px → 50×50px, radius 8px → 6px (progressive) */
     .kds-invoice-sticky .kds-invoice-merchant {
@@ -5477,10 +5602,11 @@ dialog#surveyModal button.circle {
         );
     }
 
-    /* Code: margin-top 4px → 0 (progressive). Font-size stays 12px. */
+    /* Code: margin-top 8px → 0, font-size 12px → 11px (progressive) */
     .kds-invoice-sticky .kds-invoice-code {
         margin-top: calc(var(--kds-spacing-1) * (1 - var(--collapse-progress)));
         margin-bottom: 0;
+        font-size: calc(var(--kds-font-size-xs) - 1px * var(--collapse-progress));
     }
 
     /* Pull all siblings after sticky wrapper up to fill clipped gap.
@@ -5510,23 +5636,19 @@ dialog#surveyModal button.circle {
 
 /* -- Invoice Collapsible (kv rows below header) -- */
 .kds-invoice-collapsible {
-    margin-top: var(--kds-spacing-1-5);
+    margin-top: var(--kds-spacing-1);
 }
 
-/* -- Invoice Summary (kv + expand toggle side by side) -- */
+/* -- Invoice Summary -- */
 .kds-invoice-summary {
     display: flex;
     align-items: flex-end;
-    gap: var(--kds-spacing-2);
+    gap: var(--kds-spacing-1);
 }
 .kds-invoice-summary .kds-kv {
     flex: 1;
     min-width: 0;
 }
-.kds-invoice-summary .kds-expand-toggle {
-    flex-shrink: 0;
-    white-space: nowrap;
-}
 
 /* -- Invoice Header (amount + merchant tile) -- */
 /* Compound selector overrides BeerCSS `header { padding:0 1rem; display:grid; align-content:center }` */
@@ -5542,6 +5664,13 @@ div.kds-invoice-header,
     align-content: initial;
 }
 
+/* Mobile collapsed state: center-align so merchant tile aligns with the smaller amount */
+@media (max-width: 767px) {
+    .kds-invoice-sticky.is-collapsed .kds-invoice-header {
+        align-items: center;
+    }
+}
+
 /* Reset BeerCSS sibling margin on <p> inside invoice header — specificity (0,4,1) ties BeerCSS, wins by source order */
 .kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-amount,
 .kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-code {
@@ -5549,11 +5678,11 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-amount {
-    font-weight: 700;
-    font-size: 30px;
-    line-height: 1.25;
-    letter-spacing: 0.4px;
-    color: var(--kds-color-text-primary);
+    font-weight: var(--kds-font-weight-semibold);
+    font-size: var(--kds-font-size-3xl);
+    line-height: var(--kds-line-height-tight);
+    letter-spacing: var(--kds-letter-spacing-wide);
+    color: var(--kds-color-gray-900);
     margin: 0;
 }
 
@@ -5562,10 +5691,25 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-code {
+    font-family: var(--kds-font-family-mono);
     font-size: var(--kds-font-size-xs);
-    color: var(--kds-color-text-hint);
+    font-weight: var(--kds-font-weight-regular);
+    letter-spacing: var(--kds-letter-spacing-wider);
+    font-variant-numeric: tabular-nums;
+    color: var(--kds-color-gray-400);
+    text-transform: uppercase;
     margin: 0;
-    margin-top: var(--kds-spacing-1);
+    margin-block: unset;
+    display: flex;
+    gap: var(--kds-spacing-1-5);
+}
+
+.kds-invoice-code-value {
+    color: var(--kds-color-gray-400);
+}
+
+.kds-invoice-code-value--lowercase {
+    text-transform: lowercase;
 }
 
 .kds-invoice-merchant {
@@ -5595,29 +5739,36 @@ div.kds-invoice-header,
     line-height: 1;
 }
 
+.kds-invoice-merchant img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--kds-radius-md);
+}
+
 /* -- Card Title -- */
 .kds-card-title {
-    font-weight: 700;
+    font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-base);
     line-height: 1.5;
     letter-spacing: -0.31px;
     color: var(--kds-color-text-primary);
-    margin: 0 0 var(--kds-spacing-2);
+    margin-bottom: var(--kds-spacing-2) !important;
 }
 
 /* -- Key-Value Grid -- */
 .kds-kv {
     display: grid;
     grid-template-columns: auto 1fr;
-    row-gap: var(--kds-spacing-1);
-    column-gap: var(--kds-spacing-1-5);
+    column-gap: var(--kds-spacing-1);
     align-items: baseline;
 }
 
 .kds-kv dt {
     font-size: var(--kds-font-size-xs);
-    letter-spacing: 0.2px;
-    color: var(--kds-color-text-hint);
+    line-height: var(--kds-line-height-relaxed);
+    letter-spacing: normal;
+    color: var(--kds-color-text-secondary);
     text-transform: uppercase;
     margin: 0;
 }
@@ -5625,8 +5776,14 @@ div.kds-invoice-header,
 .kds-kv dd {
     margin: 0;
     font-size: var(--kds-font-size-sm);
-    font-weight: 600;
-    color: var(--kds-color-text-primary);
+    line-height: var(--kds-line-height-relaxed);
+    font-weight: var(--kds-font-weight-semibold);
+    letter-spacing: normal;
+    color: var(--kds-color-gray-800);
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* -- Dividers -- */
@@ -5648,13 +5805,19 @@ div.kds-invoice-header,
 .kds-detail-list {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-1-75);
-    margin: var(--kds-spacing-1-75) 0 0;
+    gap: var(--kds-spacing-1-5);
+    margin: 0;
     padding: 0;
 }
 
+@media (max-width: 767px) {
+    .kds-detail-list {
+        padding-bottom: var(--kds-spacing-2);
+    }
+}
+
 .kds-detail-group {
-    margin-bottom: var(--kds-spacing-1-75);
+    margin-bottom: var(--kds-spacing-1-5);
 }
 
 .kds-detail-group:last-child {
@@ -5663,16 +5826,15 @@ div.kds-invoice-header,
 
 .kds-detail-group dt {
     font-size: var(--kds-font-size-xs);
-    letter-spacing: 0.2px;
+    letter-spacing: var(--kds-letter-spacing-wide);
     color: var(--kds-color-text-hint);
     text-transform: uppercase;
-    margin: 0 0 var(--kds-spacing-0-5);
 }
 
 .kds-detail-group dd {
     margin: 0;
     font-size: var(--kds-font-size-sm);
-    line-height: 1.45;
+    line-height: var(--kds-line-height-normal);
     color: var(--kds-color-text-primary);
 }
 
@@ -5813,6 +5975,8 @@ button.kds-btn-success::after {
 /* -- Alert inline (borderless, used inside cards) -- */
 .kds-alert-inline {
     border: none;
+    padding: var(--kds-spacing-1) var(--kds-spacing-1-5);
+    margin-bottom: var(--kds-spacing-1-5);
 }
 
 /* -- Card dimmed (behind overlays) -- */
@@ -5834,7 +5998,11 @@ button.kds-btn-success::after {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-1);
-    margin-top: var(--kds-spacing-1);
+    margin-bottom: var(--kds-spacing-1);
+}
+
+.kds-bank-list:last-child {
+    margin-bottom: 0;
 }
 
 /* -- Field group spacing -- */
@@ -5888,6 +6056,159 @@ button.kds-btn-success::after {
     margin-top: var(--kds-spacing-2-5);
 }
 
+/* -- PSP Banner -- */
+.kds-psp-banner {
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-25);
+    font-size: var(--kds-font-size-sm);
+    border-radius: var(--kds-radius-sm);
+    margin-top: var(--kds-spacing-1-5);
+}
+
+/* -- Bill Description -- */
+.kds-bill-description-body {
+    font-family: inherit;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--kds-color-text-secondary);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-normal);
+}
+
+.kds-bill-description-picture {
+    max-width: 100px;
+    object-fit: contain;
+    background: var(--kds-color-background-paper);
+    margin-top: var(--kds-spacing-1-25);
+    display: block;
+    box-sizing: content-box;
+}
+
+/* -- Bill Attachments -- */
+.kds-bill-attachments {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-75);
+}
+
+.kds-bill-attachment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    color: var(--kds-color-info-main);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    text-decoration: none;
+}
+
+.kds-bill-attachment:hover span {
+    text-decoration: underline;
+}
+
+.kds-bill-attachment i {
+    font-size: var(--kds-font-size-lg);
+    min-width: unset;
+    justify-content: flex-start;
+}
+
+/* -- Share Card (mustContinue) -- */
+.kds-share-card {
+    margin-top: var(--kds-spacing-2);
+    padding: var(--kds-spacing-2);
+    border: var(--kds-border-width-sm) solid var(--kds-color-gray-200);
+    border-radius: var(--kds-radius-lg);
+    background: var(--kds-color-background-paper);
+}
+
+.kds-share-eyebrow {
+    font-size: var(--kds-font-size-caption);
+    letter-spacing: var(--kds-letter-spacing-wide);
+    color: var(--kds-color-gray-500);
+    text-transform: uppercase;
+    font-weight: var(--kds-font-weight-bold);
+    margin: 0 0 var(--kds-spacing-0-75);
+}
+
+.kds-share-copy {
+    font-size: var(--kds-font-size-body1);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-gray-800);
+    margin: 0 0 var(--kds-spacing-1-5);
+}
+
+.kds-share-divider {
+    height: 0;
+    border: 0;
+    border-top: var(--kds-border-width-sm) dashed var(--kds-color-gray-200);
+    margin: var(--kds-spacing-1-5) 0;
+}
+
+.kds-share-link {
+    display: block;
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    word-break: break-all;
+    margin: 0 0 var(--kds-spacing-1-5);
+}
+
+.kds-share-link:hover {
+    text-decoration: underline;
+}
+
+.kds-share-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kds-spacing-0-75);
+    background: none;
+    border: 0;
+    padding: var(--kds-spacing-0-75) var(--kds-spacing-1-25);
+    cursor: pointer;
+    color: var(--kds-color-text-primary);
+    font-size: var(--kds-font-size-sm);
+    font-family: inherit;
+    border-radius: var(--kds-radius-sm);
+    margin: 0 auto;
+}
+
+.kds-share-action:hover {
+    background: var(--kds-color-primary-hover);
+    color: var(--kds-color-primary-main);
+}
+
+.kds-share-action .material-symbols-outlined {
+    font-size: var(--kds-font-size-2xl);
+}
+
+/* -- Participants List (mustContinue) -- */
+.kds-participants {
+    margin: 0 0 var(--kds-spacing-2);
+    padding: var(--kds-spacing-1-5) var(--kds-spacing-1-75);
+    background: var(--kds-alert-success-bg);
+    border-radius: var(--kds-radius-md);
+}
+
+.kds-participants-label {
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-bold);
+    color: var(--kds-alert-success-text);
+    margin: 0 0 var(--kds-spacing-0-75);
+    text-transform: uppercase;
+    letter-spacing: var(--kds-letter-spacing-wide);
+}
+
+.kds-participants-list {
+    margin: 0;
+    padding-left: var(--kds-spacing-2);
+    color: var(--kds-alert-success-text);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+}
+
 /* ================================================================
    PAYMENT FLOW LAYOUT
    Stage, flow container, brand row, screen transitions
@@ -5905,6 +6226,14 @@ button.kds-btn-success::after {
     padding-top: 0;
     padding-bottom: 0;
 }
+
+/* Reset BeerCSS sibling margin on form/section inside payment cards.
+   BeerCSS sets `:not(.grid,nav,.row) > … + form/section { margin-block-start:1rem }`
+   which adds unwanted spacing inside cards that contain forms. */
+.kds-payment-flow .kds-card-elevated > form,
+.kds-payment-flow .kds-card-elevated > section {
+    margin-block-start: 0;
+}
 .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
     padding-top: var(--kds-spacing-1);
     padding-bottom: 0;
@@ -5930,6 +6259,7 @@ button.kds-btn-success::after {
 /* Mobile: Cards full-width with rounded corners */
 @media (max-width: 767px) {
     .kds-payment-stage {
+        padding-top: 0;
         padding-left: 0;
         padding-right: 0;
     }
@@ -5939,7 +6269,7 @@ button.kds-btn-success::after {
         padding: 0;
     }
 
-    /* Cards: rounded corners, full width within padded stage */
+    /* Cards: rounded corners, full width, explicit vertical padding */
     .kds-card-elevated,
     .khipu-card-elevated {
         margin-left: 0;
@@ -5948,6 +6278,18 @@ button.kds-btn-success::after {
         width: 100%;
     }
 
+    .kds-payment-flow .kds-card-elevated {
+        padding-top: var(--kds-spacing-2);
+        padding-bottom: var(--kds-spacing-2);
+    }
+
+    /* Invoice sticky card: progressive padding-top (expanded 20px → collapsed 8px).
+       Overrides base rule at same specificity; source order wins here. */
+    .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
+        padding-top: var(--kds-spacing-1-5);
+    }
+
+
 }
 
 /* Desktop: restore card padding and full border-radius on invoice sticky */
@@ -5983,7 +6325,8 @@ button.kds-btn-success::after {
 }
 .kds-brand-inner svg,
 .kds-brand-inner img {
-    height: 22px;
+    width: calc(50px - 16px * var(--collapse-progress, 0));
+    height: auto;
     display: block;
 }
 
@@ -5995,6 +6338,7 @@ button.kds-btn-success::after {
     .kds-brand-inner {
         display: flex;
     }
+
 }
 
 /* Screen transitions (multi-step flows) */
@@ -6008,8 +6352,8 @@ button.kds-btn-success::after {
     gap: var(--kds-spacing-3);
 }
 @keyframes kds-fadein {
-    from { opacity: 0; transform: translateY(var(--kds-spacing-0-5)); }
-    to   { opacity: 1; transform: none; }
+    from { opacity: 0; }
+    to   { opacity: 1; }
 }
 
 /* ================================================================
@@ -6201,7 +6545,7 @@ button.kds-btn-success::after {
     inset: 0;
     background: var(--kds-modal-backdrop);
     display: none;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     z-index: var(--kds-z-index-modal, 50);
     animation: kds-fade 0.2s ease both;
@@ -6229,7 +6573,7 @@ button.kds-btn-success::after {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--kds-spacing-2) var(--kds-spacing-2) var(--kds-spacing-1);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2) var(--kds-spacing-1);
 }
 
 .kds-bank-modal-header h3 {
@@ -6615,6 +6959,14 @@ a.kds-copy-all-btn.copied:hover {
     min-height: unset;
 }
 
+/* Severity variants — default stays warning (backward-compatible) */
+.kds-section-note.kds-info          { color: var(--kds-color-info-dark); }
+.kds-section-note.kds-info > i      { color: var(--kds-color-info-dark); }
+.kds-section-note.kds-success       { color: var(--kds-color-success-dark); }
+.kds-section-note.kds-success > i   { color: var(--kds-color-success-dark); }
+.kds-section-note.kds-error         { color: var(--kds-color-error-dark); }
+.kds-section-note.kds-error > i     { color: var(--kds-color-error-dark); }
+
 /* ========================================
    INFO TOOLTIP (.kds-info-tip)
    Inline info button with hover/click tooltip bubble.
@@ -6710,7 +7062,7 @@ a.kds-copy-all-btn.copied:hover {
 .kds-monto-row {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: flex-start;
     padding: var(--kds-spacing-1-75) 0 var(--kds-spacing-1);
     border-top: 1px dashed var(--kds-color-divider);
     margin-top: var(--kds-spacing-1-75);