@khipu/design-system 0.1.0-alpha.56 → 0.2.0-alpha.100

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-04T19:11:26.827Z
+ * Generated: 2026-07-07T13:01:50.848Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -48,15 +48,21 @@
   --kds-color-success-main: #2E7D32;
   --kds-color-success-light: #4CAF50;
   --kds-color-success-dark: #1B5E20;
+  --kds-color-success-contrast: #FFFFFF;
   --kds-color-warning-main: #EF6C00;
   --kds-color-warning-light: #FF9800;
   --kds-color-warning-dark: #E65100;
+  --kds-color-warning-contrast: #FFFFFF;
+  --kds-color-warning-warm: #8A6D1A;
   --kds-color-error-main: #D32F2F;
   --kds-color-error-light: #EF5350;
   --kds-color-error-dark: #C62828;
+  --kds-color-error-contrast: #FFFFFF;
   --kds-color-info-main: #0288D1;
   --kds-color-info-light: #03A9F4;
   --kds-color-info-dark: #01579B;
+  --kds-color-info-contrast: #FFFFFF;
+  --kds-color-info-blue: #5A5FE0;
 
   /* Text colors */
   --kds-color-text-primary: #333333;
@@ -133,15 +139,8 @@
   --kds-font-weight-semibold: 600;
   --kds-font-weight-bold: 700;
 
-  /* Font sizes */
-  --kds-font-size-xs: 0.75rem;
-  --kds-font-size-sm: 0.875rem;
-  --kds-font-size-base: 1rem;
-  --kds-font-size-lg: 1.125rem;
-  --kds-font-size-xl: 1.25rem;
-  --kds-font-size-2xl: 1.5rem;
-  --kds-font-size-3xl: 1.875rem;
-  --kds-font-size-4xl: 2.25rem;
+  /* Font sizes (base scale xs–4xl: see responsive section below) */
+  --kds-font-size-decimal-sup: 0.5em;
 
   /* Line heights */
   --kds-line-height-tight: 1.2;
@@ -156,9 +155,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 */
@@ -208,10 +207,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;
@@ -250,7 +249,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;
@@ -364,6 +363,17 @@
      RESPONSIVE TYPOGRAPHY (MOBILE BASE)
      ========================================================================== */
 
+  --kds-font-size-2xs: 0.5625rem;
+
+  /* Base font-size scale */
+  --kds-font-size-xs: 0.6875rem;
+  --kds-font-size-sm: 0.8125rem;
+  --kds-font-size-base: 0.875rem;
+  --kds-font-size-lg: 1rem;
+  --kds-font-size-xl: 1.125rem;
+  --kds-font-size-2xl: 1.25rem;
+  --kds-font-size-3xl: 1.5rem;
+  --kds-font-size-4xl: 1.875rem;
 
   /* Headings */
   --kds-font-size-h1: 1.75rem;
@@ -401,6 +411,17 @@
 /* Tablet (600px+) - Typography */
 @media (min-width: 600px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
+
+    /* Base font-size scale */
+    --kds-font-size-xs: 0.75rem;
+    --kds-font-size-sm: 0.875rem;
+    --kds-font-size-base: 1rem;
+    --kds-font-size-lg: 1.125rem;
+    --kds-font-size-xl: 1.25rem;
+    --kds-font-size-2xl: 1.5rem;
+    --kds-font-size-3xl: 1.875rem;
+    --kds-font-size-4xl: 2.25rem;
     --kds-font-size-h1: 2rem;
     --kds-font-size-h2: 1.75rem;
     --kds-font-size-h3: 1.5rem;
@@ -428,6 +449,17 @@
 /* Desktop (840px+) - Typography */
 @media (min-width: 840px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
+
+    /* Base font-size scale */
+    --kds-font-size-xs: 0.75rem;
+    --kds-font-size-sm: 0.875rem;
+    --kds-font-size-base: 1rem;
+    --kds-font-size-lg: 1.125rem;
+    --kds-font-size-xl: 1.25rem;
+    --kds-font-size-2xl: 1.5rem;
+    --kds-font-size-3xl: 1.875rem;
+    --kds-font-size-4xl: 2.25rem;
     --kds-font-size-h1: 2.5rem;
     --kds-font-size-h2: 2rem;
     --kds-font-size-h3: 1.75rem;
@@ -622,6 +654,7 @@ body.dark {
     /* Scroll Container Utilities */
     --kds-scroll-sm-height: 280px;
     --kds-scroll-md-height: 420px;
+
     --kds-scroll-lg-height: 600px;
 
     /* Stage Layout */
@@ -734,7 +767,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;
@@ -756,6 +789,10 @@ footer {
  * Source: design.khipu.com and Material Design 3 specifications
  */
 
+ * {
+    border-radius: 0;
+ }
+
 
 :has(>main) {
     background-color: transparent !important;
@@ -799,34 +836,45 @@ a.kds-btn {
     align-items: center;
     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 */
+    /* min-height además de height: en contenedores flex-column (p.ej. pantallas de
+       resultado/timeout) el botón es flex-item y, con solo `height`, flex-shrink lo
+       colapsaba a la altura del texto (~21px). min-height impide que se encoja. */
+    min-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-color var(--kds-transition-shorter) var(--kds-easing-standard),
+                color var(--kds-transition-shorter) var(--kds-easing-standard),
+                box-shadow var(--kds-transition-shorter) var(--kds-easing-standard),
+                transform var(--kds-transition-shortest) var(--kds-easing-standard);
     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 {
@@ -844,18 +892,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 */
@@ -953,7 +996,7 @@ a.kds-btn-text {
 
 button.kds-btn-text:hover:not(:disabled),
 a.kds-btn-text:hover:not(:disabled) {
-    background: var(--kds-color-primary-hover);  /* rgba(131, 71, 173, 0.04) */
+    color: var(--kds-color-primary-dark);
 }
 
 button.kds-btn-text:disabled,
@@ -963,6 +1006,30 @@ a.kds-btn-text:disabled {
     box-shadow: none;
 }
 
+/* Error text (destructive, ghost) — red text, no fill/border. Para acciones
+   destructivas secundarias que no deben competir con el CTA primario. */
+button.kds-btn-error-text,
+a.kds-btn-error-text {
+    background: transparent;
+    color: var(--kds-color-error-main);
+    border: none;
+    padding: 6px var(--kds-spacing-2);
+    min-height: 32px;
+    box-shadow: none;
+}
+
+button.kds-btn-error-text:hover:not(:disabled),
+a.kds-btn-error-text:hover:not(:disabled) {
+    color: var(--kds-color-error-dark);
+}
+
+button.kds-btn-error-text:disabled,
+a.kds-btn-error-text:disabled {
+    background: transparent;
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
 /* Icon wrapper - control size via span container */
 button.kds-btn > .kds-icon,
 a.kds-btn > .kds-icon {
@@ -984,7 +1051,12 @@ a.kds-btn > .kds-icon > i {
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
     line-height: 1;
-    top: 1px;
+}
+
+/* Full-width button */
+button.kds-btn.kds-btn-block,
+a.kds-btn.kds-btn-block {
+    width: 100%;
 }
 
 /* ========================================
@@ -1008,12 +1080,6 @@ a.kds-btn.kds-btn-md {
 
 /* Default .kds-btn uses --kds-spacing-button-min-height (50px) from base styles */
 
-/* Full-width button */
-button.kds-btn.kds-btn-block,
-a.kds-btn.kds-btn-block {
-    width: 100%;
-}
-
 /* ========================================
    Card Components (Material Design 3)
    ======================================== */
@@ -1026,6 +1092,7 @@ a.kds-btn.kds-btn-block {
     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,
@@ -1048,63 +1115,90 @@ a.kds-btn.kds-btn-block {
     }
 }
 
-/* Selection card */
+/* Selection card.
+   IMPORTANTE: este componente se renderiza como `<button>`. BeerCSS aplica al
+   `button` base: `display: inline-flex; align-items: center; justify-content: center;
+   block-size: 2.5rem; padding: 0 1rem; background: var(--primary); color: on-primary`.
+   Todas esas reglas hay que sobreescribirlas para que el card-selector funcione como
+   un contenedor flex column de altura variable y alineado a la izquierda.
+
+   Convención del DS: spacing entre hijos via `gap` del flex padre + padding.
+   Los elementos internos (.kds-card-selector-icon/-title/-description) NO usan margin. */
 .kds-card-selector {
+    /* Reset BeerCSS button */
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    block-size: auto;
+    inline-size: 100%;
+    text-align: left;
+    line-height: 1.5;
+    color: var(--kds-color-text-primary);
+    /* Estilos propios del card-selector */
     padding: var(--kds-spacing-3);
+    gap: var(--kds-spacing-1-5);
     border-radius: var(--kds-radius-md);
-    border: 2px solid var(--kds-border-light);
+    border: var(--kds-border-width-md) solid var(--kds-border-light);
     background: var(--kds-color-background-paper);
     transition: all 0.3s ease;
-    text-align: left;
     cursor: pointer;
-    display: flex;
-    flex-direction: column;
 }
 
-.kds-card-selector:hover {
-    border-color: #D1D5DB;  /* gray-300 */
+.kds-card-selector:hover:not(.selected) {
+    border-color: var(--kds-color-primary-light);
+    background: var(--kds-color-primary-hover);
+}
+
+/* Override del ripple/overlay default de BeerCSS:
+   `:is(.wave,.chip,.button,button,nav.tabbed>a,...):not([class*=ripple])::after`
+   tiene specificity (0,2,4) según DevTools (Chrome cuenta cada selector dentro
+   de :is() individualmente para algunos motores). Usamos !important — consistente
+   con cómo se overridean otros estilos de BeerCSS en este archivo (67 usos previos).
+   Antes pintaba negro porque `currentColor` resolvía a text-primary del card. */
+.kds-card-selector::after {
+    background-image: radial-gradient(circle, var(--kds-color-primary-main) 1%, transparent 1%) !important;
 }
 
 .kds-card-selector.selected {
-    border-color: #3B82F6;  /* blue-600 */
-    background: #EFF6FF;    /* blue-50 */
+    border-color: var(--kds-color-primary-main);
+    background: var(--kds-color-primary-faint);
     box-shadow: var(--kds-shadow-md);
 }
 
-/* Icon container */
+/* Icon container — spacing manejado por gap del padre, no margin */
 .kds-card-selector-icon {
-    width: 48px;
-    height: 48px;
-    background: #DBEAFE;  /* blue-100 */
-    border-radius: 8px;
+    width: var(--kds-spacing-6);
+    height: var(--kds-spacing-6);
+    background: var(--kds-color-primary-focus);
+    border-radius: var(--kds-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 16px;
 }
 
 .kds-card-selector-icon i,
 .kds-card-selector-icon svg {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    min-height: 24px;
-    color: #3B82F6;  /* blue-600 */
+    width: var(--kds-spacing-3);
+    height: var(--kds-spacing-3);
+    min-width: var(--kds-spacing-3);
+    min-height: var(--kds-spacing-3);
+    font-size: var(--kds-spacing-3);
+    color: var(--kds-color-primary-main);
 }
 
-/* Title */
+/* Title — spacing manejado por gap del padre, no margin */
 .kds-card-selector-title {
-    font-weight: 600;
+    font-weight: var(--kds-font-weight-semibold);
     color: var(--kds-color-text-primary);
-    margin-bottom: 8px;
-    font-size: 16px;
+    font-size: var(--kds-font-size-lg);
 }
 
 /* Description */
 .kds-card-selector-description {
-    font-size: 14px;
-    color: #4B5563;  /* gray-600 */
-    line-height: 1.5;
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    line-height: var(--kds-line-height-normal);
 }
 
 /* Selected state - visual feedback via border only */
@@ -1116,14 +1210,22 @@ a.kds-btn.kds-btn-block {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-2);
-    padding: var(--kds-spacing-4);
+    padding: var(--kds-spacing-2);
     border-radius: var(--kds-radius-lg);
     border: 2px solid var(--kds-border-medium);
-    max-width: 400px; /* Increased from 365px for better text spacing */
+    /* Ancho mínimo aplicado a TODOS los planes — así un plan sin badge en una
+       grilla con un plan recomendado mantiene la misma anchura, y el badge nunca
+       se superpone al título por estrechez del card. */
+    min-width: 260px;
+    max-width: 400px;
     background: var(--kds-surface-base);
     transition: all 0.3s ease;
     cursor: pointer;
-    height: 100%; /* Ensure cards fill grid height */
+    /* Alto fijo: el card se estira al alto de su row del grid (align-items stretch
+       es el default) — todas las cards de la misma fila quedan a la misma altura
+       sin importar el contenido. `align-self: stretch` lo hace explícito. */
+    height: 100%;
+    align-self: stretch;
 }
 
 .kds-card-plan:hover {
@@ -1143,18 +1245,19 @@ a.kds-btn.kds-btn-block {
     box-shadow: var(--kds-shadow-elevation-4);
 }
 
-/* Recommended Badge */
+/* Recommended Badge — inline dentro del card (no flotante).
+   Es el primer hijo del .kds-card-plan, así que aparece arriba de todo
+   el contenido, alineado a la izquierda. */
 .kds-card-plan-badge {
-    position: absolute;
-    top: -12px;
-    right: var(--kds-spacing-6);
-    padding: var(--kds-spacing-1) var(--kds-spacing-4);
+    align-self: flex-start;
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
     background: var(--primary);
     color: white;
-    font-size: var(--kds-font-size-sm);
+    font-size: var(--kds-font-size-xs);
     font-weight: var(--kds-font-weight-semibold);
+    line-height: 1;
     border-radius: var(--kds-radius-full);
-    box-shadow: var(--kds-shadow-elevation-1);
+    white-space: nowrap;
 }
 
 /* Plan Header */
@@ -1182,13 +1285,11 @@ a.kds-btn.kds-btn-block {
     display: flex;
     align-items: baseline;
     gap: var(--kds-spacing-2);
-    padding: var(--kds-spacing-4) 0;
     border-bottom: 1px solid var(--kds-border-light);
-    min-height: 88px; /* Standardize price area height */
 }
 
 .kds-price {
-    font-size: 42px;
+    font-size: var(--kds-font-size-4xl);
     font-weight: var(--kds-font-weight-bold);
     color: var(--primary);
     line-height: 1.1;
@@ -1443,6 +1544,10 @@ a.kds-btn.kds-btn-block {
     align-items: flex-end;
 }
 
+.kds-self-center {
+    align-self: center;
+}
+
 /* Gap utilities */
 .kds-gap-1 { gap: var(--kds-spacing-1); }
 .kds-gap-2 { gap: var(--kds-spacing-2); }
@@ -1479,6 +1584,7 @@ a.kds-btn.kds-btn-block {
 /* Spacing utilities - Margin */
 .kds-m-0 { margin: 0; }
 .kds-m-2 { margin: var(--kds-spacing-2); }
+.kds-m-2-5 { margin: var(--kds-spacing-2-5); }
 .kds-m-4 { margin: var(--kds-spacing-4); }
 .kds-m-6 { margin: var(--kds-spacing-6); }
 .kds-m-8 { margin: var(--kds-spacing-8); }
@@ -1492,6 +1598,7 @@ a.kds-btn.kds-btn-block {
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
 
 .kds-mb-0 { margin-bottom: 0; }
+.kds-mb-0-5 { margin-bottom: var(--kds-spacing-0-5); }
 .kds-mb-1 { margin-bottom: var(--kds-spacing-1); }
 .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
 .kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
@@ -1702,53 +1809,108 @@ a.kds-btn.kds-btn-block {
 }
 
 /* ========================================
-   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;
 }
 
 /* ========================================
@@ -1949,6 +2111,221 @@ a.kds-btn-google:disabled {
     height: var(--kds-spacing-button-icon-size);
 }
 
+/* ========================================
+   KDS LINEAR PROGRESS
+   Native <progress> (KdsLinearProgress). Additive over BeerCSS `progress`,
+   scoped to .kds-progress so other consumers are unaffected.
+   ======================================== */
+
+/* `progress` is inline-block by default → leaves a baseline (descender) gap
+   below the bar. Block removes that gap so it sits flush with siblings. */
+.kds-progress {
+    display: block;
+}
+
+/* Animate the filled value when it changes (e.g. advancing a step). BeerCSS
+   sets the value background but no transition, so the width jumps abruptly. */
+.kds-progress::-webkit-progress-value {
+    transition: width var(--kds-transition-standard) var(--kds-easing-standard);
+}
+
+.kds-progress::-moz-progress-bar {
+    transition: width var(--kds-transition-standard) var(--kds-easing-standard);
+}
+
+/* ========================================
+   KDS SECURE LOADER
+   Loader de espera: anillo circular + candado centrado + frases opcionales.
+   El anillo reutiliza el spinner circular de BeerCSS, escalado.
+   ======================================== */
+
+.kds-secure-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kds-spacing-4);
+    text-align: center;
+    /* Llena y centra dentro de contenedores flex (pantalla de carga); en flujo
+       normal (contenedor no-flex) se reduce a su contenido. */
+    flex: 1 1 auto;
+}
+
+.kds-secure-loader-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-25);
+}
+
+.kds-secure-loader-title {
+    margin: 0;
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-h6);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-snug);
+    color: var(--kds-color-text-primary);
+}
+
+.kds-secure-loader-message {
+    margin: 0;
+    font-family: var(--kds-font-family-secondary);
+    font-size: var(--kds-font-size-body1);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-primary-main);
+}
+
+/* Caja del spinner con tamaño fijo: la animación no altera el layout.
+   6.25rem (100px) = tamaño del loader original (CircularProgress size=100). */
+.kds-secure-loader-spinner {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--kds-secure-loader-size, 6.25rem);
+    block-size: var(--kds-secure-loader-size, 6.25rem);
+}
+
+/* Anillo: SVG nativo con arco vía stroke-dasharray, rotando. Replica el
+   CircularProgress original (viewBox 44u, thickness 2, arco ~63%, disableShrink). */
+.kds-secure-loader-ring {
+    inline-size: var(--kds-secure-loader-size, 6.25rem);
+    block-size: var(--kds-secure-loader-size, 6.25rem);
+    animation: kds-secure-loader-spin 1.2s linear infinite;
+}
+
+.kds-secure-loader-ring circle {
+    fill: none;
+    stroke: var(--kds-color-primary-main);
+    stroke-width: 2;
+    stroke-linecap: round;
+    /* circunferencia ≈ 2π·20.2 ≈ 127; arco visible ≈ 80 (~63%) */
+    stroke-dasharray: 80 127;
+}
+
+@keyframes kds-secure-loader-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Candado centrado sobre el anillo (~0.3 del diámetro). Centrado explícito
+   (top/left 50% + translate) para que no dependa del grid ni se recorte. */
+.kds-secure-loader-lock {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--kds-color-text-secondary);
+    font-size: calc(var(--kds-secure-loader-size, 6.25rem) * 0.3);
+    line-height: 1;
+    pointer-events: none;
+}
+
+/* ========================================
+   KDS COPY BUTTON
+   Chip compacto que muestra un valor + icono copy y lo copia al click.
+   Acción inline (distinto de KdsCopyRow). Look del copy button de khenshin.
+   ======================================== */
+
+.kds-copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-0-25) var(--kds-spacing-1-5);
+    /* No usar el alto de botón táctil de BeerCSS (~44px): es un chip compacto,
+       su alto lo define el contenido + padding. */
+    block-size: auto;
+    min-block-size: 0;
+    border: none;
+    border-radius: var(--kds-radius-button);
+    background: var(--kds-alert-info-bg);
+    color: var(--kds-color-info-dark);
+    font-family: var(--kds-font-family-secondary);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    cursor: pointer;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard),
+                color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+/* active = hover: sin el aro de focus/active (outline morado de BeerCSS). */
+.kds-copy-button:focus,
+.kds-copy-button:focus-visible,
+.kds-copy-button:active {
+    outline: none;
+}
+
+/* value y copiedText se apilan en la MISMA celda de grid: la celda toma el
+   ancho del texto más largo, por lo que el botón conserva su ancho al alternar
+   entre "valor" y "copiado" (sin reflow). */
+.kds-copy-button-label {
+    display: inline-grid;
+}
+
+.kds-copy-button-value,
+.kds-copy-button-copied {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+}
+
+/* Estado por defecto: visible el valor, oculto (pero ocupando espacio) el copiado */
+.kds-copy-button-copied {
+    visibility: hidden;
+}
+
+/* Al copiar se invierte la visibilidad; el ancho no cambia */
+.kds-copy-button.copied .kds-copy-button-value {
+    visibility: hidden;
+}
+
+.kds-copy-button.copied .kds-copy-button-copied {
+    visibility: visible;
+}
+
+.kds-copy-button .material-symbols-outlined {
+    font-size: 1rem;
+    color: var(--kds-color-info-main);
+    flex-shrink: 0;
+}
+
+.kds-copy-button.copied {
+    background: var(--kds-alert-success-bg);
+    color: var(--kds-alert-success-text);
+    animation: kds-copy-button-pulse var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+.kds-copy-button.copied .material-symbols-outlined {
+    color: var(--kds-color-success-main);
+    /* el check entra con un pop al copiar */
+    animation: kds-copy-button-pop var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+@keyframes kds-copy-button-pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.04);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes kds-copy-button-pop {
+    0% {
+        transform: scale(0.3);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1.25);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
 /* ========================================
    Link Styles
    ======================================== */
@@ -2050,6 +2427,16 @@ footer.primary a:hover {
     margin-right: var(--kds-spacing-2);
 }
 
+/* Ícono(s) en color primary. Para íconos MUI/SVG dentro del scope que, por el reset
+   `.kds-theme-root svg { fill: currentColor }`, terminan heredando el color de texto
+   (#333) en vez de su color propio — el `color="primary"` de MUI no le gana al contexto.
+   Aplica al contenedor y a sus i/svg hijos. */
+.kds-icon-primary,
+.kds-icon-primary i,
+.kds-icon-primary svg {
+    color: var(--kds-color-primary-main);
+}
+
 /* Section title icon */
 .kds-stage-section-title i {
     vertical-align: middle;
@@ -2081,9 +2468,28 @@ body.dark {
   transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
 }
 
-/* ==========================================
-   NOTCH VISIBILITY (opacity)
-   ========================================== */
+/* === 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;
+}
+
+/* Label en reposo (estado "abajo", como placeholder): font-size menor al 1rem de BeerCSS
+   para que un label largo no estorbe con un ícono (prefix/suffix) del input. Token sm
+   (13–14px, siempre < 1rem del input incluso en desktop). Al flotar, BeerCSS lo reduce a
+   .75rem con mayor especificidad, así que esto solo afecta el reposo. */
+.field.label > label {
+  font-size: var(--kds-font-size-sm);
+}
+
+/* ==========================================
+   NOTCH VISIBILITY (opacity)
+   ========================================== */
 
 /* Ocultar notch por defecto */
 .field.label.border:not(.fill) > label::after {
@@ -2168,12 +2574,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;
 }
 
 /* ==========================================
@@ -2198,6 +2608,23 @@ body.dark {
   color: var(--error);  /* Rojo error */
 }
 
+/* ==========================================
+   PASSWORD REVEAL TOGGLE (KdsTextField `revealable`)
+   El <a role="button"> reusa el posicionamiento de icono de BeerCSS
+   (.field > a, pointer-events: all). Aquí solo: color del icono
+   (on-surface-variant) y un focus ring accesible para el toggle
+   navegable por teclado (BeerCSS hace `outline: inherit` en <a>).
+   ========================================== */
+.field > a.kds-field-reveal {
+  color: var(--on-surface-variant);
+}
+
+.field > a.kds-field-reveal:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
 /* ==========================================
    LABEL COLOR
    Mantener sincronizado con border
@@ -2305,6 +2732,71 @@ body.dark {
     display: inline-flex;
 }
 
+/* ========================================
+   Radix Tooltip (.kds-tooltip)
+   Espejo de `.tooltip` pero para popovers de Radix:
+   bg oscuro, texto blanco, sombra + animación fade/slide direccional.
+   ======================================== */
+
+.kds-tooltip {
+    background-color: var(--kds-color-text-primary);
+    color: var(--kds-color-background-paper);
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    border-radius: var(--kds-radius-sm);
+    padding: var(--kds-spacing-0-75) var(--kds-spacing-1-5);
+    box-shadow: var(--kds-shadow-4);
+    max-width: 280px;
+    z-index: var(--kds-z-index-tooltip, 1500);
+    user-select: none;
+    /* Animación direccional según Radix data-side — coordinada con copy-row
+       (cubic-bezier 0.2, 0.8, 0.2, 1) para un feel consistente del DS. */
+    animation-duration: 240ms;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+    will-change: transform, opacity;
+}
+
+.kds-tooltip[data-state='closed'] {
+    animation-duration: 140ms;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+/* Direccional según data-side (Radix añade el attr en runtime).
+   Cada lado entra desde su dirección con ~8px de offset (más visible que 4px). */
+.kds-tooltip[data-side='top'][data-state='delayed-open'],
+.kds-tooltip[data-side='top'][data-state='instant-open']    { animation-name: kds-tooltip-in-top; }
+.kds-tooltip[data-side='bottom'][data-state='delayed-open'],
+.kds-tooltip[data-side='bottom'][data-state='instant-open'] { animation-name: kds-tooltip-in-bottom; }
+.kds-tooltip[data-side='left'][data-state='delayed-open'],
+.kds-tooltip[data-side='left'][data-state='instant-open']   { animation-name: kds-tooltip-in-left; }
+.kds-tooltip[data-side='right'][data-state='delayed-open'],
+.kds-tooltip[data-side='right'][data-state='instant-open']  { animation-name: kds-tooltip-in-right; }
+
+/* Fallback cuando no hay data-side resuelto aún */
+.kds-tooltip[data-state='delayed-open']:not([data-side]),
+.kds-tooltip[data-state='instant-open']:not([data-side]) {
+    animation-name: kds-tooltip-in-top;
+}
+
+.kds-tooltip[data-state='closed'] { animation-name: kds-tooltip-out; }
+
+@keyframes kds-tooltip-in-top    { from { opacity: 0; transform: translateY(8px)  scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-bottom { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-left   { from { opacity: 0; transform: translateX(8px)  scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-right  { from { opacity: 0; transform: translateX(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
+
+@keyframes kds-tooltip-out {
+    from { opacity: 1; transform: none; }
+    to   { opacity: 0; transform: scale(0.96); }
+}
+
+/* Arrow (SVG path generado por Radix) */
+.kds-tooltip-arrow {
+    fill: var(--kds-color-text-primary);
+}
+
 /* ========================================
    Material Symbols Icon Sizing
    ======================================== */
@@ -2339,6 +2831,16 @@ body.dark {
     width: 100%;
 }
 
+/* Truncado en una línea con ellipsis. Incluye min-width:0 para que funcione
+   dentro de contenedores flex/grid (el ítem puede encogerse por debajo de su
+   contenido). Útil para nombres/asuntos largos en headers y filas. */
+.kds-truncate {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .kds-max-w-sm {
     max-width: 400px;
 }
@@ -2382,6 +2884,11 @@ body.dark {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-3);
+    /* Reset del fieldset nativo: sin borde/padding/margin por defecto del navegador. */
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
 }
 
 /* Checkbox Label - BeerCSS override */
@@ -2393,7 +2900,7 @@ label.radio {
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
-    font-size: 16px;
+    font-size: var(--kds-font-size-sm);
     line-height: 1.5;
     color: var(--kds-color-text-primary);
 }
@@ -2431,6 +2938,42 @@ label.radio:has(input:disabled) {
     opacity: 0.6;
 }
 
+/* ========================================
+   RADIO GROUP — variante card (.kds-radio-group--card)
+   Cada opción como fila con borde (estilo selección de banco/cuenta),
+   manteniendo el control radio. Hover + opción seleccionada resaltada.
+   ======================================== */
+.kds-radio-group--card {
+    gap: var(--kds-spacing-2);
+}
+
+.kds-radio-group--card label.radio {
+    gap: var(--kds-spacing-1-5);
+    /* Vertical con un poco más de aire; horizontal reducido para pegar el radio a la izquierda. */
+    padding: var(--kds-spacing-2) var(--kds-spacing-1-5);
+    /* Bordes con los valores del bank selector. */
+    border: 1px solid var(--kds-color-border-subtle);
+    border-radius: var(--kds-radius-card);
+    background: var(--kds-color-surface);
+    transition: border-color 0.2s, background 0.2s;
+}
+
+/* Leve separación extra entre el radio y el texto de la opción. */
+.kds-radio-group--card label.radio span {
+    margin-left: var(--kds-spacing-0-5);
+}
+
+.kds-radio-group--card label.radio:hover {
+    border-color: var(--kds-color-border-default);
+}
+
+/* Seleccionada: poco color primario — solo un fondo faint sutil + borde gris
+   (el punto del radio ya comunica la selección). */
+.kds-radio-group--card label.radio:has(input:checked) {
+    border-color: var(--kds-color-border-default);
+    background: var(--kds-color-primary-faint);
+}
+
 /* ========================================
    ONBOARDING COMPONENTS
    Multi-stage onboarding flow with form validation
@@ -2721,7 +3264,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;
@@ -2927,19 +3471,17 @@ footer > .kds-container-center {
     display: flex;
     align-items: center;
     gap: var(--kds-spacing-1);
-    padding: var(--kds-spacing-2);
+    /* Padding compacto: vertical spacing-1 (8px), horizontal spacing-2 (16px). */
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
     border-radius: var(--kds-radius-md);
     border: 1px solid;
     font-family: var(--kds-font-family-primary);
     min-width: 0;
-    flex: 1 1 100%;
-}
-
-@media (min-width: 768px) {
-    .kds-alert {
-        padding: var(--kds-spacing-2);
-        flex: 1 1 auto;
-    }
+    /* Banner: ocupa siempre el ancho del contenedor. width explícito porque como
+       flex item de una columna con align-items:center el cross-axis no se estira.
+       Sin flex-grow para no estirarse verticalmente en contenedores flex-column. */
+    width: 100%;
+    flex: 0 1 auto;
 }
 
 .kds-alert:last-child {
@@ -2965,7 +3507,9 @@ footer > .kds-container-center {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-semibold);
     line-height: var(--kds-line-height-normal);
-    margin-bottom: var(--kds-spacing-0-5);
+    /* Solo margin-bottom: el padding del alert da el espaciado. Reset del resto para
+       evitar el margin-block que BeerCSS aplica a <p> dentro del scope. */
+    margin: 0 0 var(--kds-spacing-0-5);
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -2975,6 +3519,9 @@ footer > .kds-container-center {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-regular);
     line-height: var(--kds-line-height-relaxed);
+    /* Sin margen propio: el padding del alert es el único espaciado (evita el
+       margin-block de <p> de BeerCSS dentro del scope). */
+    margin: 0;
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -3020,6 +3567,32 @@ footer > .kds-container-center {
     color: var(--kds-color-error-dark);
 }
 
+/* Close button — icon-only, discreto, no usa kds-btn para no romper el flex layout del alert */
+.kds-alert-close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.kds-alert-close:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.kds-alert-close i {
+    font-size: 18px;
+    line-height: 1;
+}
+
 /* Lists inside alerts */
 .kds-alert ul {
     padding-left: var(--kds-spacing-2);
@@ -4016,6 +4589,14 @@ dialog#surveyModal button.circle {
     text-align: center;
 }
 
+.kds-text-left {
+    text-align: left;
+}
+
+.kds-text-right {
+    text-align: right;
+}
+
 .kds-text-underline {
     text-decoration: underline;
 }
@@ -4028,10 +4609,187 @@ dialog#surveyModal button.circle {
     color: var(--on-surface-variant);
 }
 
+.kds-text-primary {
+    color: var(--kds-color-primary-main);
+}
+
 .kds-text-sm {
     font-size: var(--kds-font-size-sm);
 }
 
+/* ── Font-size scale utilities (additive — opt-in companions to .kds-text-sm) ── */
+.kds-text-base {
+    font-size: var(--kds-font-size-base);
+}
+
+.kds-text-lg {
+    font-size: var(--kds-font-size-lg);
+}
+
+.kds-text-xl {
+    font-size: var(--kds-font-size-xl);
+}
+
+.kds-text-2xl {
+    font-size: var(--kds-font-size-2xl);
+}
+
+/* ── Font-weight utilities ── */
+.kds-fw-regular {
+    font-weight: var(--kds-font-weight-regular);
+}
+
+.kds-fw-medium {
+    font-weight: var(--kds-font-weight-medium);
+}
+
+.kds-fw-semibold {
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-fw-bold {
+    font-weight: var(--kds-font-weight-bold);
+}
+
+/* ── Text-transform utilities ── */
+.kds-text-transform-none {
+    text-transform: none;
+}
+
+/* ── Soft background utilities (semantic muted backgrounds for callouts) ── */
+.kds-bg-warning-soft {
+    background-color: var(--kds-color-warning-soft);
+}
+
+.kds-bg-info-soft {
+    background-color: var(--kds-color-info-soft);
+}
+
+/* ── Typography variants ── */
+.kds-text-display1 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-4xl, 36px);
+    font-weight: var(--kds-font-weight-bold, 700);
+    line-height: var(--kds-line-height-tight, 1.2);
+    letter-spacing: var(--kds-letter-spacing-tight, -0.025em);
+}
+
+.kds-text-display2 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-3xl, 30px);
+    font-weight: var(--kds-font-weight-bold, 700);
+    line-height: var(--kds-line-height-tight, 1.2);
+    letter-spacing: var(--kds-letter-spacing-tight, -0.025em);
+}
+
+.kds-text-heading1 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-2xl, 24px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-snug, 1.375);
+}
+
+.kds-text-heading2 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-xl, 20px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-snug, 1.375);
+}
+
+.kds-text-heading3 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-lg, 18px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-body-large {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-base, 16px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-relaxed, 1.66);
+}
+
+.kds-text-body {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 14px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-body-small {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 12px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-label {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 12px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+    letter-spacing: var(--kds-letter-spacing-widest, 1px);
+    text-transform: uppercase;
+}
+
+.kds-text-label-small {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-xs, 10px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+    letter-spacing: var(--kds-letter-spacing-widest, 1px);
+    text-transform: uppercase;
+}
+
+/* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro). */
+.kds-text-value {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-relaxed);
+    color: var(--kds-color-gray-800);
+}
+
+/* Code — texto tipo código/referencia (mono, uppercase, gris), como el "CÓDIGO" del header. */
+.kds-text-code {
+    font-family: var(--kds-font-family-mono);
+    font-size: var(--kds-font-size-xs);
+    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;
+}
+
+/* Caption — texto muy chico y liviano para pie de página (ej. número de versión). */
+.kds-text-caption {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-2xs);
+    font-weight: var(--kds-font-weight-regular);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-gray-400);
+}
+
+.kds-text-link {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: inherit;
+    font-weight: var(--kds-font-weight-medium, 500);
+    color: var(--kds-color-primary-main, #8347AD);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.kds-text-link:hover {
+    color: var(--kds-color-primary-dark, #5B3179);
+}
+
+/* Inline emphasis: bold weight only, inherits size/color/family from context so it
+   works as a highlighted fragment inside any other variant (body, heading, etc.). */
+.kds-text-strong {
+    font-weight: var(--kds-font-weight-bold, 700);
+}
+
 /* Display utilities */
 .kds-hidden {
     display: none;
@@ -4152,7 +4910,9 @@ dialog#surveyModal button.circle {
    ======================================== */
 
 .kds-badge {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     padding: 2px 8px;
     border-radius: var(--kds-radius-sm);
     font-size: var(--kds-font-size-xs);
@@ -4160,6 +4920,40 @@ dialog#surveyModal button.circle {
     line-height: 1.5;
 }
 
+/* Icon prefix inside chip — small inline icon */
+.kds-badge > i.material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+}
+
+/* Deletable chip close button — discreto, sin kds-btn (eso lo agrandaba ridículo) */
+.kds-badge-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: -2px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.15s, background-color 0.15s;
+}
+
+.kds-badge-close:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.kds-badge-close i {
+    font-size: 14px;
+    line-height: 1;
+}
+
 .kds-badge.success {
     background-color: var(--kds-color-success-container);
     color: var(--kds-color-success-dark);
@@ -4371,21 +5165,46 @@ dialog#surveyModal button.circle {
     flex-shrink: 0;
 }
 
-/* Merchant tile with logo variant */
+/* Merchant tile with logo variant — el logo (avatar del comercio) llena TODO el tile.
+   `display: block` evita el desborde del auto-grid; `overflow: hidden` recorta la imagen
+   a las esquinas redondeadas del tile. La imagen va CUADRADA (sin border-radius propio):
+   solo el contenedor recorta, evitando el hairline sub-pixel del doble redondeo. El fondo
+   se deja transparente bajo el logo como respaldo (no debe verse púrpura en los bordes). */
 .kds-merchant-tile.logo {
-    padding: var(--kds-spacing-0-5);
+    padding: 0;
+    display: block;
+    overflow: hidden;
+    background: transparent;
 }
 
 .kds-merchant-tile.logo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: var(--kds-radius-md);
+    border-radius: 0;
+    display: block;
+}
+
+/* Variante para logos que traen su propio marco/forma (logos de comercio/servicio,
+   no fotos): `contain` + padding para que el logo entre completo sin recortar sus
+   esquinas. Opt-in: pasar className="kds-merchant-tile--contain". */
+.kds-merchant-tile.logo.kds-merchant-tile--contain {
+    padding: var(--kds-spacing-1);
+}
+.kds-merchant-tile.logo.kds-merchant-tile--contain img {
+    object-fit: contain;
 }
 
 .kds-merchant-meta {
     display: flex;
     flex-direction: column;
+    gap: var(--kds-spacing-0-5);
+}
+
+/* El meta controla su propio espaciado: anula el margin sibling de BeerCSS
+   (`… + :is(p,h*,…) { margin-block-start: 1rem }`) que separaba de más las líneas. */
+.kds-merchant-meta > * {
+    margin-block: 0 !important;
 }
 
 .kds-merchant-label {
@@ -4438,6 +5257,11 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-text-primary);
 }
 
+/* Opt-in color modifier — switches the value to the LigoPay/khipu-blue tone */
+.kds-amount-value--info {
+    color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
 .kds-amount-value small {
     font-size: 18px;
     font-weight: 500;
@@ -4535,14 +5359,26 @@ dialog#surveyModal button.circle {
 
 .field.locked > input,
 .field.locked > textarea {
-    background: var(--kds-color-shell);
-    color: var(--kds-color-text-secondary);
+    color: var(--kds-color-text-disabled);
     cursor: default;
-    border-color: var(--kds-color-divider);
+    pointer-events: none;
 }
 
 .field.locked > label {
-    color: var(--kds-color-text-hint);
+    color: var(--kds-color-text-disabled);
+}
+
+/* Locked: suppress all hover/focus visual changes */
+.field.label.border:not(.fill).locked:hover:not(:focus-within) > label::after,
+.field.label.border:not(.fill).locked:focus-within > label::after {
+    border-block-start-color: var(--outline);
+}
+.field.label.border:not(.fill).locked:hover:not(:focus-within) > :is(input, textarea, select),
+.field.label.border:not(.fill).locked:focus-within > :is(input, textarea, select) {
+    border-color: var(--outline);
+}
+.field.label.locked:hover:not(:focus-within) > label {
+    color: var(--kds-color-text-disabled);
 }
 
 .field.locked > i {
@@ -4712,23 +5548,161 @@ dialog#surveyModal button.circle {
 }
 
 /* ========================================
-   09 - SUCCESS MARK (.kds-success-mark)
-   Large success icon for completion screens
+   08b - FAB (.kds-fab)
+   Circular, icon-only floating action button with an animated hide state.
+   Presentational: drive `.kds-fab--hidden` from useHideOnScroll for scroll-away.
    ======================================== */
 
-.kds-success-mark {
-    width: 64px;
-    height: 64px;
+.kds-fab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-spacing-5);
+    height: var(--kds-spacing-5);
+    padding: 0;
+    border: none;
     border-radius: var(--kds-radius-full);
-    background: var(--kds-color-success-soft);
-    border: 2px solid var(--kds-color-success-main);
-    display: grid;
-    place-items: center;
-    color: var(--kds-color-success-main);
-    animation: kds-pop 0.45s ease-out;
-    margin: 0 auto;
-}
-
+    background: var(--kds-color-background-paper);
+    color: var(--kds-color-text-primary);
+    box-shadow: var(--kds-shadow-elevated);
+    cursor: pointer;
+    z-index: 100;
+    /* Neutralize native button rendering so the pressed state doesn't flash a square. */
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity var(--kds-transition-short) ease, transform var(--kds-transition-short) ease,
+                background-color var(--kds-transition-shorter) ease;
+}
+
+/* Keep the circle in EVERY interaction state. Uses `button.kds-fab` (element + class) to
+   out-specify BeerCSS's base `button`/`button:active` rules — same trick as `.kds-btn`. */
+button.kds-fab,
+button.kds-fab:hover,
+button.kds-fab:active,
+button.kds-fab:focus,
+button.kds-fab:focus-visible {
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-background-paper);
+}
+
+button.kds-fab:hover:not(:disabled) {
+    background: var(--kds-color-background-muted);
+}
+
+/* Subtle press feedback that preserves the round shape. */
+button.kds-fab:active:not(:disabled) {
+    transform: translateY(var(--kds-spacing-0-25));
+}
+
+button.kds-fab:focus-visible {
+    outline: var(--kds-spacing-0-25) solid var(--kds-color-primary-main);
+    outline-offset: var(--kds-spacing-0-25);
+}
+
+.kds-fab > i.material-symbols-outlined {
+    font-size: var(--kds-spacing-button-icon-size);
+    line-height: 1;
+}
+
+/* Pinned corners — fixed to the viewport (stays visible on scroll-up, iframe-friendly).
+   Horizontally the top-right FAB hugs the right edge of the centered content column set via
+   `--kds-fab-column-width` (default 100% → viewport edge). The consumer sets that var to its
+   widget width so on desktop the FAB overlaps the header's top-right corner instead of drifting
+   to the far viewport edge. `max(...)` keeps at least a token inset on narrow (mobile) viewports. */
+.kds-fab--top-right,
+.kds-fab--top-left,
+.kds-fab--bottom-right,
+.kds-fab--bottom-left {
+    position: fixed;
+}
+
+.kds-fab--top-right {
+    top: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--top-left {
+    top: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-right {
+    bottom: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-left {
+    bottom: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+/* Desktop: nudge the top-right FAB up so it sits partially over the header's top edge. */
+@media (min-width: 768px) {
+    .kds-fab--top-right {
+        top: var(--kds-spacing-1);
+    }
+}
+
+/* Corner-overlap: mount the FAB centered OVER the top-right corner of the content column
+   (`--kds-fab-column-width`), overlapping outward — vs `--top-right` which insets inside the
+   column. Mobile keeps a small inset from the viewport via the `--kds-fab-inset` token. */
+.kds-fab--corner {
+    --kds-fab-inset: 5px;
+    position: fixed;
+    top: var(--kds-fab-inset);
+    right: var(--kds-fab-inset);
+}
+
+@media (min-width: 768px) {
+    .kds-fab--corner {
+        right: max(
+            var(--kds-fab-inset),
+            calc((100% - var(--kds-fab-column-width, 100%)) / 2 - var(--kds-spacing-5) / 2)
+        );
+    }
+}
+
+/* Hidden (scroll-away) state — fade + slide toward the nearest edge */
+.kds-fab--hidden {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--kds-spacing-1))) scale(0.9);
+    pointer-events: none;
+}
+
+.kds-fab--bottom-right.kds-fab--hidden,
+.kds-fab--bottom-left.kds-fab--hidden {
+    transform: translateY(var(--kds-spacing-1)) scale(0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-fab {
+        transition: opacity var(--kds-transition-short) ease;
+    }
+
+    .kds-fab--hidden {
+        transform: none;
+    }
+}
+
+/* ========================================
+   09 - SUCCESS MARK (.kds-success-mark)
+   Large success icon for completion screens
+   ======================================== */
+
+.kds-success-mark {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-success-soft);
+    border: 2px solid var(--kds-color-success-main);
+    display: grid;
+    place-items: center;
+    color: var(--kds-color-success-main);
+    animation: kds-pop 0.45s ease-out;
+    margin: 0 auto;
+}
+
 .kds-success-mark i {
     font-size: 32px;
     font-weight: 700;
@@ -4783,20 +5757,76 @@ 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);
+/* Footer SIEMPRE fuera del card body (desktop y mobile): el footer interno
+   (variant="inside") queda oculto en todos los breakpoints; se muestra el
+   externo, hermano directo del card bajo `.kds-screen`. */
+.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;
+}
+
+/* Footer externo adyacente a la card: cancela el gap del .kds-screen para que
+   quede pegado debajo de la card y no flotando lejos. Las dos cards
+   (header/body) sí conservan su separación. */
+.kds-screen > .kds-secure-footer {
+    margin-top: calc(-1 * var(--kds-spacing-3));
+}
+
+.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;
+    /* Corrección óptica: la masa visible del wordmark (el cuerpo de "Khipu") queda sobre el
+       centro geométrico de su viewBox (45x15) porque el descendente de la "p" ocupa la parte
+       baja. Al centrar por caja (align-items:center) el logo se ve ~1px alto respecto al texto,
+       así que se baja 0.75px para alinear el centro óptico. Alto fijo (11px) → nudge consistente. */
+    position: relative;
+    top: 0.75px;
+}
+
+/* Divisor entre el logo de Khipu y el del PSP ("Khipu | klap") */
+.kds-secure-footer-sep {
+    width: 1px;
+    height: 0.85em;
+    background: currentColor;
+    opacity: 0.35;
+    flex: 0 0 auto;
+}
+
+/* Logo del PSP (proveedor de pagos): lo provee el consumidor, lo alineamos al mismo
+   alto que el mark de Khipu. Sirve para <img> o un elemento con .kds-psp-mark. */
+.kds-secure-footer img,
+.kds-secure-footer .kds-psp-mark {
+    height: 11px;
+    width: auto;
+    flex: 0 0 auto;
+    display: block;
+    object-fit: contain;
 }
 
 .kds-secure-footer-code {
@@ -4811,26 +5841,46 @@ dialog#surveyModal button.circle {
 .kds-expand-toggle {
     background: none;
     border: 0;
-    padding: var(--kds-spacing-0-5) 0;
+    padding: 0;
+    /* Reset del bare `button { height: 2.5rem }` de BeerCSS (scoped en .kds-theme-root):
+       sin esto el toggle quedaba en una caja de 40px con el texto centrado → espacio
+       irregular arriba (pegado al resumen) y abajo (~26px hasta el panel). Con height
+       auto el botón ajusta a su contenido y el ritmo lo gobiernan los márgenes. */
+    height: auto;
     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;
 }
 
 .kds-expand-toggle i {
     font-size: var(--kds-font-size-base);
+    /* BeerCSS estiliza el `i` bare como caja flex de 30px (height/width/min: 30px), que
+       inflaba el toggle y dejaba aire vertical de más alrededor del label. La achicamos a
+       1.25em MANTENIENDO el centrado flex de BeerCSS (display:flex/align/justify) — así el
+       caret queda compacto Y ópticamente centrado con el texto (no usar height:auto ni
+       line-height:1: descentran el glifo). */
+    width: 1.25em;
+    height: 1.25em;
+    min-width: 0;
+    min-height: 0;
     transition: transform var(--kds-transition-shorter, 0.2s);
 }
 
@@ -4850,8 +5900,11 @@ dialog#surveyModal button.circle {
 }
 
 .kds-expand-panel.open {
-    max-height: 800px;
-    margin-top: var(--kds-spacing-1);
+    /* Fallback cap for no-JS consumers. With JS (React useExpandToggle / vanilla
+       initExpandToggle) the panel's inline max-height is set to its exact scrollHeight,
+       which overrides this and prevents clipping regardless of content length. */
+    max-height: 2000px;
+    margin-top: 0;
 }
 
 /* ========================================
@@ -4968,13 +6021,17 @@ dialog#surveyModal button.circle {
 
 .kds-status-block {
     text-align: center;
-    padding: var(--kds-spacing-6) 0;
+    /* Padding vertical estándar: spacing-2 (16px), el mismo rhythm inter-elementos
+       que usan kds-btn-stack y kds-hr-dashed. NO usar spacing-6 (48px): genera
+       demasiado espacio cuando el bloque se compone con header/divider alrededor. */
+    padding: var(--kds-spacing-2) 0;
 }
 
 .kds-status-block-icon {
     width: var(--kds-status-icon-size);
     height: var(--kds-status-icon-size);
-    margin: 0 auto var(--kds-spacing-3);
+    /* spacing-1 (8px) icono→título: elementos relacionados dentro del bloque. */
+    margin: 0 auto var(--kds-spacing-1);
     border-radius: var(--kds-radius-full);
     display: grid;
     place-items: center;
@@ -4990,12 +6047,18 @@ dialog#surveyModal button.circle {
     font-weight: var(--kds-font-weight-bold);
     color: var(--kds-color-text-primary);
     margin: 0 0 var(--kds-spacing-1);
+    /* El reset global :where(h2) usa estas vars con !important; así se overridea. */
+    --kds-typography-h2-margin-block-end: var(--kds-spacing-1);
 }
 
 .kds-status-block-description {
     font-size: var(--kds-font-size-sm);
     color: var(--kds-color-text-secondary);
     margin: 0;
+    /* !important: anula el auto-espaciado de hermanos de BeerCSS
+       (margin-block-start: 1rem, especificidad 0,5,1 imposible de igualar).
+       La separación título→descripción la da el margin-bottom del título. */
+    margin-top: 0 !important;
 }
 
 /* Variant: success */
@@ -5005,11 +6068,11 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-success-main);
 }
 
-/* Variant: pending (animated spinner) */
+/* Variant: pending (animated blue spinner, sin icono interno) */
 .kds-status-block[data-status="pending"] .kds-status-block-icon {
     background: transparent;
     border: 3px solid var(--kds-color-divider);
-    border-top-color: var(--kds-color-primary-main);
+    border-top-color: var(--kds-color-info-main);
     animation: kds-spin 1s linear infinite;
 }
 
@@ -5027,12 +6090,21 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-error-main);
 }
 
+/* Variant: info — usar SIEMPRE con icon "info_i" (i minúscula sin glyph circular)
+   para que solo se vea nuestro círculo decorativo. Iconos como "info" tienen
+   su propio círculo built-in → causarían doble círculo. */
+.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;
 }
 
@@ -5074,6 +6146,9 @@ dialog#surveyModal button.circle {
 .kds-bottom-sheet {
     width: 100%;
     max-width: var(--kds-bottom-sheet-max-width);
+    max-height: 90dvh;
+    display: flex;
+    flex-direction: column;
     background: var(--kds-color-background-paper);
     border-radius: var(--kds-radius-2xl) var(--kds-radius-2xl) 0 0;
     padding: var(--kds-spacing-3-5) var(--kds-spacing-3) var(--kds-spacing-3);
@@ -5094,6 +6169,42 @@ dialog#surveyModal button.circle {
     background: var(--kds-color-divider);
 }
 
+/* Close button — top-right discreto, NO usa kds-btn (rompía el flex layout) */
+.kds-bottom-sheet-close {
+    position: absolute;
+    top: var(--kds-spacing-1);
+    right: var(--kds-spacing-1);
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--kds-color-text-secondary);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.kds-bottom-sheet-close:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.kds-bottom-sheet-close i {
+    font-size: 20px;
+    line-height: 1;
+}
+
+/* Body container — separa el content del title/actions */
+.kds-bottom-sheet-body {
+    text-align: left;
+    margin-top: var(--kds-spacing-1);
+    overflow-y: auto;
+    min-height: 0;
+}
+
 .kds-bottom-sheet-icon {
     font-size: var(--kds-font-size-4xl);
 }
@@ -5140,6 +6251,19 @@ dialog#surveyModal button.circle {
     to { opacity: 1; }
 }
 
+/* Botón con llenado progresivo (feedback visual de auto-cierre).
+   Duración parametrizable con --kds-fill-duration (default 12s). */
+.kds-btn-fill-progress {
+    background-image: linear-gradient(to right, var(--kds-color-primary-dark), var(--kds-color-primary-dark));
+    background-repeat: no-repeat;
+    background-size: 0% 100%;
+    animation: kds-btn-fill var(--kds-fill-duration, 12s) linear forwards;
+}
+
+@keyframes kds-btn-fill {
+    to { background-size: 100% 100%; }
+}
+
 @keyframes kds-rise {
     from { transform: translateY(var(--kds-spacing-2-5)); opacity: 0.4; }
     to { transform: none; opacity: 1; }
@@ -5187,6 +6311,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;
 }
@@ -5284,8 +6409,8 @@ dialog#surveyModal button.circle {
         /* Symmetric padding */
         padding: var(--kds-spacing-2);
 
-        /* Static border-radius on all corners */
-        border-radius: var(--kds-radius-card);
+        /* Bottom-only border-radius — top is flush so the brand-inner logo isn't clipped */
+        border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
 
         /* Override .kds-card-elevated transition — scroll drives the animation, not CSS transitions */
         transition: none;
@@ -5297,10 +6422,8 @@ dialog#surveyModal button.circle {
         /* clip-path clips the card from the bottom to hide the collapsible space.
            This is VISUAL ONLY — no layout change — prevents scroll feedback loop.
            Safari 13.1+ compatible (inset + round)
-           When collapsed (progress=1): bottom corners get border-radius,
-           top stays flush with screen edge. */
-        /* Bottom inset = collapsible height + half the card padding to tighten
-           the gap between "Código" and the visible bottom edge when collapsed. */
+           round uses bottom-only radii (0 top, card-radius bottom) to match
+           border-radius and avoid clipping the brand logo at the top corners. */
         clip-path: inset(
             0 0
             calc(
@@ -5308,7 +6431,7 @@ dialog#surveyModal button.circle {
                 + var(--kds-spacing-1) * var(--collapse-progress)
             )
             0
-            round var(--kds-radius-card)
+            round 0 0 var(--kds-radius-card) var(--kds-radius-card)
         );
 
         /* Suppress card's own shadow — wrapper handles it */
@@ -5319,7 +6442,8 @@ dialog#surveyModal button.circle {
     .kds-invoice-sticky .kds-brand-inner {
         margin-bottom: calc(var(--kds-spacing-1) * (1 - var(--collapse-progress)) + var(--kds-spacing-0-5) * var(--collapse-progress));
     }
-    .kds-invoice-sticky .kds-brand-inner svg {
+    .kds-invoice-sticky .kds-brand-inner svg,
+    .kds-invoice-sticky .kds-brand-inner img {
         height: calc(22px - 5px * var(--collapse-progress));
     }
 
@@ -5327,9 +6451,39 @@ dialog#surveyModal button.circle {
     /* No max-height — clip-path on parent handles visual collapse without layout changes */
     .kds-invoice-sticky .kds-invoice-collapsible {
         opacity: calc(1 - var(--collapse-progress) * 1.5);
+
+        /* Scroll interno discreto (mobile): cuando el detalle abierto excede el viewport, el
+           collapsible scrollea internamente (monto/merchant quedan fijos arriba) para poder leer
+           todo el detalle. Al tocar el fondo, `overscroll-behavior: auto` ENCADENA el gesto al
+           scroll del body → dispara useStickyInvoiceCollapse → colapsa el header y aparece el form
+           (flujo natural). Se auto-desactiva con el detalle cerrado (contenido más corto que el
+           max-height → sin scroll ni efecto visual). */
+        max-height: calc(100vh - var(--kds-spacing-12) - var(--kds-spacing-4));
+        max-height: calc(100dvh - var(--kds-spacing-12) - var(--kds-spacing-4));
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--kds-color-gray-300) transparent;
+    }
+    .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar {
+        width: 4px;
+    }
+    .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar-thumb {
+        background: var(--kds-color-gray-300);
+        border-radius: var(--kds-radius-full);
+    }
+    .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar-track {
+        background: transparent;
     }
 
-    /* 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 {
@@ -5355,10 +6509,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.
@@ -5380,32 +6535,64 @@ dialog#surveyModal button.circle {
     }
 }
 
+/* Invoice sticky: mobile-first — bottom-only border-radius to prevent clipping the brand logo.
+   Desktop restores full border-radius (see min-width:768px block below). */
+.kds-card-elevated.kds-invoice-sticky {
+    border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
+}
+
 /* -- Invoice Collapsible (kv rows below header) -- */
 .kds-invoice-collapsible {
-    margin-top: var(--kds-spacing-1-5);
+    margin-top: var(--kds-spacing-1);
+}
+
+/* Ritmo uniforme alrededor del toggle: spacing-2 arriba (resumen↔"Ver detalle")
+   iguala el padding-top spacing-2 que la .kds-detail-list da debajo
+   ("Ver detalle"↔primer label del panel). Antes el alto fijo del bare button
+   (40px) hacía que el espacio de arriba y de abajo fueran distintos. */
+.kds-invoice-collapsible > .kds-expand-toggle {
+    margin-top: var(--kds-spacing-2);
 }
 
-/* -- 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 }` */
+header.kds-invoice-header,
+div.kds-invoice-header,
 .kds-invoice-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--kds-spacing-2);
+    padding: 0;
+    border-radius: 0;
+    align-content: initial;
+    /* Override BeerCSS `header { min-height: ... }` — el header debe ajustarse a su
+       contenido (sigue el alto del merchant tile: 64px→50px al colapsar). Sin esto
+       quedaba un min-height fijo de 64px → hueco muerto debajo al colapsar en mobile. */
+    min-height: 0;
+}
+
+/* Mobile: center-align el header (merchant tile vs bloque monto+código) tanto
+   expandido como colapsado. Al quitar el logo del header, el bloque de texto quedaba
+   más bajo que el merchant tile y con `flex-start` dejaba hueco abajo; centrado los
+   alinea. CSS-only (no depende de la clase .is-collapsed, que el JS de collapse no setea). */
+@media (max-width: 767px) {
+    header.kds-invoice-header,
+    div.kds-invoice-header,
+    .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 */
@@ -5415,11 +6602,11 @@ dialog#surveyModal button.circle {
 }
 
 .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;
 }
 
@@ -5428,10 +6615,25 @@ dialog#surveyModal button.circle {
 }
 
 .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 {
@@ -5443,6 +6645,9 @@ dialog#surveyModal button.circle {
     place-items: center;
     color: #fff;
     flex-shrink: 0;
+    /* Clip the slightly-oversized logo (see `.kds-invoice-merchant img`) to the
+       rounded square so it can fully cover the deep-purple background. */
+    overflow: hidden;
 }
 
 .kds-invoice-merchant i {
@@ -5461,29 +6666,52 @@ dialog#surveyModal button.circle {
     line-height: 1;
 }
 
+.kds-invoice-merchant img {
+    /* Slightly larger than the container (+2px, centered by the grid) so the
+       logo overflows under the parent's rounded clip and the deep-purple
+       background never peeks through at the corners when the logo shrinks. */
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    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);
+    /* sin !important: no hay regla de margin-bottom para h1 en BeerCSS que competir, y así un
+       consumidor puede anularlo (p.ej. FormTitle dentro de un Stack que ya da el espacio). */
+    margin-bottom: var(--kds-spacing-2);
+}
+
+/* Opt-in size modifiers (additive — do NOT change default 16/600) */
+.kds-card-title--lg {
+    font-size: var(--kds-font-size-xl);       /* 20px */
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-card-title--xl {
+    font-size: var(--kds-font-size-2xl);      /* 24px */
+    font-weight: var(--kds-font-weight-semibold);
 }
 
 /* -- 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;
 }
@@ -5491,8 +6719,14 @@ dialog#surveyModal button.circle {
 .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 -- */
@@ -5514,34 +6748,59 @@ dialog#surveyModal button.circle {
 .kds-detail-list {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-1-75);
-    margin: var(--kds-spacing-1-75) 0 0;
-    padding: 0;
+    /* spacing-2 entre grupos del detalle (separación estándar entre piezas de info
+       distintas, ej. "Emisor cobro" vs "Descripción"). El padding-top da la misma
+       separación spacing-2 arriba del primer grupo (Asunto↔Emisor cobro). */
+    gap: var(--kds-spacing-2);
+    margin: 0;
+    padding: var(--kds-spacing-2) 0 0;
 }
 
-.kds-detail-group {
-    margin-bottom: var(--kds-spacing-1-75);
+@media (max-width: 767px) {
+    .kds-detail-list {
+        padding-bottom: var(--kds-spacing-2);
+    }
 }
 
-.kds-detail-group:last-child {
+.kds-detail-group {
+    /* El espacio ENTRE grupos lo da el `gap` de .kds-detail-list (spacing-2).
+       Dentro del grupo, label↔value llevan un gap chico (spacing-0-5) para un
+       ritmo parejo: antes el dt iba pegado al dd (0px) y se veía desigual frente
+       a los 16px entre los demás elementos del panel. */
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-5);
     margin-bottom: 0;
 }
 
 .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);
+    margin: 0;
 }
 
 .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);
 }
 
+/* Imagen adjunta del cobro dentro del panel de detalle (ej. comprobante/producto).
+   Reemplaza los inline styles del antiguo modal MerchantInfo: ancho contenido, borde
+   y radio del DS. Va como un grupo más de la .kds-detail-list (hereda su gap). */
+.kds-detail-image {
+    display: block;
+    max-width: 100%;
+    width: 160px;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--kds-radius-md);
+    border: 1px solid var(--kds-color-border);
+}
+
 /* -- Amount Summary Row -- */
 .kds-amount-row {
     display: flex;
@@ -5601,16 +6860,16 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
 }
 
-.kds-recap-list .k {
+.kds-recap-list .kds-key {
     color: var(--kds-color-text-secondary);
 }
 
-.kds-recap-list .v {
+.kds-recap-list .kds-value {
     color: var(--kds-color-text-primary);
     font-weight: 500;
 }
 
-.kds-recap-list .v.placeholder {
+.kds-recap-list .kds-value.placeholder {
     color: var(--kds-color-text-hint);
 }
 
@@ -5637,15 +6896,81 @@ a.kds-btn-success:disabled {
     box-shadow: none;
 }
 
-/* -- Field Helper Text -- */
-.kds-field-helper {
-    font-size: var(--kds-font-size-xs);
-    color: var(--kds-color-text-secondary);
-    margin: var(--kds-spacing-0-75) var(--kds-spacing-1-75) 0;
+/* -- Button Warning (amber CTA) -- */
+button.kds-btn-warning,
+a.kds-btn-warning {
+    background: var(--kds-color-warning-main);
+    color: var(--kds-color-warning-contrast);
+    border: none;
 }
 
-/* -- Bank Row Avatar with initials -- */
-.kds-bank-row-logo.initials {
+button.kds-btn-warning:hover:not(:disabled),
+a.kds-btn-warning:hover:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+}
+
+button.kds-btn-warning:active:not(:disabled),
+button.kds-btn-warning:focus-visible:not(:disabled),
+a.kds-btn-warning:active:not(:disabled),
+a.kds-btn-warning:focus-visible:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+    outline: 2px solid var(--kds-color-warning-main);
+    outline-offset: 2px;
+}
+
+button.kds-btn-warning:disabled,
+a.kds-btn-warning:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+button.kds-btn-warning::after {
+    display: none;
+}
+
+/* -- Button Error (red / destructive CTA) -- */
+button.kds-btn-error,
+a.kds-btn-error {
+    background: var(--kds-color-error-main);
+    color: var(--kds-color-error-contrast);
+    border: none;
+}
+
+button.kds-btn-error:hover:not(:disabled),
+a.kds-btn-error:hover:not(:disabled) {
+    background: var(--kds-color-error-dark);
+}
+
+button.kds-btn-error:active:not(:disabled),
+button.kds-btn-error:focus-visible:not(:disabled),
+a.kds-btn-error:active:not(:disabled),
+a.kds-btn-error:focus-visible:not(:disabled) {
+    background: var(--kds-color-error-dark);
+    outline: 2px solid var(--kds-color-error-main);
+    outline-offset: 2px;
+}
+
+button.kds-btn-error:disabled,
+a.kds-btn-error:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+button.kds-btn-error::after {
+    display: none;
+}
+
+/* -- Field Helper Text -- */
+.kds-field-helper {
+    font-size: var(--kds-font-size-xs);
+    color: var(--kds-color-text-secondary);
+    margin: var(--kds-spacing-0-75) var(--kds-spacing-1-75) 0;
+}
+
+/* -- Bank Row Avatar with initials -- */
+.kds-bank-row-logo.initials {
     border-radius: var(--kds-radius-full);
     color: #fff;
     font-weight: 700;
@@ -5679,6 +7004,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) -- */
@@ -5700,9 +7027,12 @@ 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 -- */
 .kds-field-group {
@@ -5755,6 +7085,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
@@ -5765,12 +7248,65 @@ button.kds-btn-success::after {
     box-shadow: var(--kds-shadow-card);
 }
 
-/* Payment stage — full-viewport centered wrapper */
+/* Payment flow cards — mobile-first: no vertical padding.
+   Desktop (min-width: 768px) restores padding + full border-radius. */
+.kds-payment-flow .kds-card-elevated {
+    margin-top: 0;
+    /* Vertical > lateral: la card del flujo respira arriba/abajo (spacing-3)
+       manteniendo el padding lateral del base (spacing-2 / spacing-3 mobile). */
+    padding-top: var(--kds-spacing-3);
+    padding-bottom: var(--kds-spacing-3);
+}
+
+/* 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;
+}
+
+/* Body card: alto mínimo estable para que NO salte entre estados de distinta altura
+   (loader/progress ↔ formulario). Solo la body card = hijo directo de `.kds-screen`
+   (los headers van dentro de `.kds-invoice-sticky-wrap`, no la afecta).
+   Flex-column para que el contenido quede arriba y el footer interno (versión / secure
+   footer) pueda pinearse al fondo con `margin-top: auto` aunque el contenido sea corto. */
+.kds-screen > .kds-card-elevated {
+    min-height: 36rem;
+    display: flex;
+    flex-direction: column;
+    /* mismo radio que el header (invoice-sticky usa radius-card); el base card-elevated
+       es radius-md (8px) y quedaba distinto al header en desktop. */
+    border-radius: var(--kds-radius-card);
+}
+
+/* Variante sin radio superior: pantallas de resultado (éxito/fallo/timeout) que van
+   SIN header arriba — la body card va sola y su tope queda plano (flush) en vez de
+   con esquinas redondeadas sueltas. El padding del card sigue manejando el inset. */
+/* Tope plano SOLO en mobile (< 768px): la body card se pega al borde superior del widget
+   (igual que el header sticky, que también aplana el tope solo en mobile). En desktop la card
+   va centrada y separada, así que conserva el border-radius superior redondeado. */
+@media (max-width: 767px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
+    .kds-card-elevated.kds-card-elevated--flush-top {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+}
+
+/* Payment stage — full-viewport centered wrapper.
+   Fondo muted (gris) para que las cards blancas (header + body) y el gap entre
+   ellas se distingan; sin esto, card blanca sobre fondo blanco se funden. */
 .kds-payment-stage {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     padding: var(--kds-spacing-2-5) var(--kds-spacing-2) var(--kds-spacing-8);
+    background: var(--kds-color-background-muted);
 }
 
 /* Payment flow — narrow column */
@@ -5785,6 +7321,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;
     }
@@ -5794,7 +7331,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;
@@ -5803,6 +7340,36 @@ 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 padding (mobile).
+       Top: estático 12px. Bottom: progresivo 16px (expandido, = desktop) → 8px (colapsado).
+       El padding-bottom animado se reduce al colapsar — sin depender de que el clip-path
+       corte el padding abruptamente. */
+    .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
+        padding-top: var(--kds-spacing-1-5);
+        padding-bottom: calc(
+            var(--kds-spacing-2)
+            - var(--kds-spacing-1) * var(--collapse-progress, 0)
+        );
+    }
+
+
+}
+
+/* Desktop: restore card padding and full border-radius on invoice sticky */
+@media (min-width: 768px) {
+    .kds-payment-flow .kds-card-elevated,
+    .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
+        padding-top: var(--kds-spacing-2);
+        padding-bottom: var(--kds-spacing-2);
+    }
+    .kds-card-elevated.kds-invoice-sticky {
+        border-radius: var(--kds-radius-card);
+    }
 }
 
 /* Brand logo row (external, outside cards) */
@@ -5811,7 +7378,8 @@ button.kds-btn-success::after {
     display: flex;
     align-items: center;
 }
-.kds-brand-row svg {
+.kds-brand-row svg,
+.kds-brand-row img {
     height: 22px;
     display: block;
 }
@@ -5821,9 +7389,12 @@ button.kds-btn-success::after {
     display: none;
     align-items: center;
     margin-bottom: var(--kds-spacing-1);
+    border-radius: 0;
 }
-.kds-brand-inner svg {
-    height: 22px;
+.kds-brand-inner svg,
+.kds-brand-inner img {
+    width: calc(50px - 16px * var(--collapse-progress, 0));
+    height: auto;
     display: block;
 }
 
@@ -5835,6 +7406,7 @@ button.kds-btn-success::after {
     .kds-brand-inner {
         display: flex;
     }
+
 }
 
 /* Screen transitions (multi-step flows) */
@@ -5848,8 +7420,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; }
 }
 
 /* ================================================================
@@ -6041,7 +7613,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;
@@ -6069,7 +7641,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 {
@@ -6094,11 +7666,8 @@ button.kds-btn-success::after {
     display: none;
 }
 
-.kds-bank-modal-search {
-    padding: 0 var(--kds-spacing-2) var(--kds-spacing-1-5);
-}
-
-.kds-bank-modal-search input {
+/* Search field reutilizable (standalone o dentro del KdsBankModal). */
+.kds-search-field {
     width: 100%;
     padding: var(--kds-spacing-1-25) var(--kds-spacing-1-5);
     border: 1px solid var(--kds-color-divider);
@@ -6110,15 +7679,57 @@ button.kds-btn-success::after {
     background: var(--kds-color-surface);
 }
 
-.kds-bank-modal-search input::placeholder {
+.kds-search-field::placeholder {
     color: var(--kds-color-text-hint);
 }
 
-.kds-bank-modal-search input:focus {
+.kds-search-field:focus {
     border-color: var(--kds-color-primary-main);
     box-shadow: 0 0 0 2px var(--kds-color-primary-faint);
 }
 
+/* Variante con ícono (withIcon): lupa posicionada DENTRO del input, a la derecha. */
+.kds-search-field-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.kds-search-field-icon {
+    position: absolute;
+    right: var(--kds-spacing-1-5);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 20px;
+    color: var(--kds-color-text-hint);
+    pointer-events: none;
+}
+
+/* Espacio a la derecha del texto para no solaparse con la lupa. */
+.kds-search-field-wrapper .kds-search-field {
+    padding-right: calc(var(--kds-spacing-1-5) + var(--kds-spacing-3));
+}
+
+/* Variante angosta del field (prop `narrow` de KdsTextField): ancho reducido y texto
+   centrado, para inputs de pocos caracteres dispuestos en fila (ej. segmentos de
+   coordenadas o código). No crece ni se encoge dentro de un flex row. */
+.field.kds-field--narrow {
+    width: 6rem;
+    flex: 0 0 auto;
+    /* En fila horizontal no aplica el margin vertical que BeerCSS da a fields
+       hermanos (regla de "flow" `... + :is(.field,...)`, specificity ~0,3,1);
+       sin el reset los siguientes quedan desalineados hacia abajo. `!important`
+       para ganarle a esa regla de framework. */
+    margin-block: 0 !important;
+}
+
+.field.kds-field--narrow > input {
+    text-align: center;
+}
+
+.kds-bank-modal-search {
+    padding: 0 var(--kds-spacing-2) var(--kds-spacing-1-5);
+}
+
 .kds-bank-modal-body {
     flex: 1;
     overflow-y: auto;
@@ -6216,7 +7827,7 @@ button.kds-btn-success::after {
     min-width: 0;
 }
 
-.kds-qr-text .title {
+.kds-qr-text .kds-qr-title {
     font-family: var(--kds-font-family-primary);
     font-weight: 600;
     font-size: var(--kds-font-size-sm);
@@ -6224,10 +7835,15 @@ button.kds-btn-success::after {
     color: var(--kds-color-text-primary);
 }
 
-.kds-qr-text .sub {
+.kds-qr-text .kds-qr-subtitle {
     font-family: var(--kds-font-family-primary);
     font-size: var(--kds-font-size-caption);
     color: var(--kds-color-text-secondary);
+    /* Trunca con ellipsis en lugar de wrap a 2 líneas — evita apretar el row
+       cuando el contenedor es angosto (mobile o decorator constrained). */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /* QR Badge - "Rápido" indicator */
@@ -6250,46 +7866,26 @@ button.kds-btn-success::after {
     font-size: 20px;
 }
 
-/* Mobile responsive: Ajustes para pantallas pequeñas */
+/* Mobile responsive (≤480px): respira más — mantenemos padding/gap/avatar igual
+   que desktop y solo agregamos truncation al subtitle y `flex-shrink: 0` en los
+   ítems que deben mantener su tamaño (avatar, badge, chevron). */
 @media (max-width: 480px) {
-    .kds-qr-row {
-        gap: var(--kds-spacing-1-5);
-        padding: var(--kds-spacing-1-5);
-    }
-
     .kds-qr-avatar {
-        width: var(--kds-spacing-4-5);
-        height: var(--kds-spacing-4-5);
         flex-shrink: 0;
     }
 
-    .kds-qr-avatar .material-symbols-outlined,
-    .kds-qr-avatar .material-icons-round {
-        font-size: var(--kds-font-size-lg);
-    }
-
-    .kds-qr-text .title {
-        font-size: var(--kds-font-size-xs);
-        line-height: var(--kds-line-height-tight);
-    }
-
     .kds-qr-text .sub {
-        font-size: var(--kds-font-size-caption);
-        line-height: var(--kds-line-height-tight);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     .kds-qr-badge {
-        font-size: var(--kds-font-size-caption);
-        padding: var(--kds-spacing-0-25) var(--kds-spacing-0-75);
         flex-shrink: 0;
     }
 
     .kds-qr-row .material-symbols-outlined:last-child,
     .kds-qr-row .material-icons-round:last-child {
-        font-size: var(--kds-font-size-base);
         flex-shrink: 0;
     }
 }
@@ -6318,7 +7914,11 @@ button.kds-btn-success::after {
     border-radius: var(--kds-spacing-0-75);
     font-size: var(--kds-font-size-sm);
     cursor: pointer;
-    transition: background 0.12s ease;
+    /* Transición más amplia y suave: bg + color + border ease-out */
+    transition:
+        background-color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        border-top-color 280ms ease-out;
     position: relative;
     user-select: none;
 }
@@ -6327,19 +7927,21 @@ button.kds-btn-success::after {
     border-top: 0;
 }
 
-.kds-copyable-table-row:hover {
+/* Hover NO aplica mientras la row esté en `.copied` o `.settling`
+   (evita el flicker del hover state al desaparecer el verde de "copiado") */
+.kds-copyable-table-row:not(.copied):not(.settling):hover {
     background: var(--kds-color-primary-faint);
 }
 
-.kds-copyable-table-row:hover + .kds-copyable-table-row {
+.kds-copyable-table-row:not(.copied):not(.settling):hover + .kds-copyable-table-row {
     border-top-color: transparent;
 }
 
-.kds-copyable-table-row:active {
+.kds-copyable-table-row:not(.copied):not(.settling):active {
     background: var(--kds-color-primary-selected);
 }
 
-.kds-copyable-table-row .k {
+.kds-copyable-table-row .kds-key {
     color: var(--kds-color-text-secondary);
     font-size: var(--kds-font-size-caption);
     letter-spacing: 0.3px;
@@ -6348,7 +7950,7 @@ button.kds-btn-success::after {
     flex: 0 0 auto;
 }
 
-.kds-copyable-table-row .v {
+.kds-copyable-table-row .kds-value {
     color: var(--kds-color-text-primary);
     font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
     font-weight: var(--kds-font-weight-medium);
@@ -6364,17 +7966,18 @@ button.kds-btn-success::after {
     flex: 1 1 auto;
 }
 
-.kds-copyable-table-row .v::after {
+.kds-copyable-table-row .kds-value::after {
     content: 'content_copy';
     font-family: 'Material Symbols Outlined';
     font-size: var(--kds-font-size-sm);
     color: var(--kds-color-primary-main);
     opacity: 0;
-    transition: opacity 0.12s ease;
+    /* Transición coordinada con la row */
+    transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
     flex: 0 0 auto;
 }
 
-.kds-copyable-table-row:hover .v::after {
+.kds-copyable-table-row:not(.copied):not(.settling):hover .kds-value::after {
     opacity: 0.7;
 }
 
@@ -6382,22 +7985,76 @@ button.kds-btn-success::after {
     background: var(--kds-color-success-soft);
 }
 
-.kds-copyable-table-row.copied .v {
+.kds-copyable-table-row.copied .kds-value {
     color: var(--kds-color-success-dark);
 }
 
-.kds-copyable-table-row.copied .v::after {
+.kds-copyable-table-row.copied .kds-value::after {
     content: 'check';
     font-family: 'Material Symbols Outlined';
     color: var(--kds-color-success-dark);
     opacity: 1;
 }
 
+/* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
+   activar hover. Dura lo mismo que la transición (~300ms) y se aplica
+   desde React tras quitar `.copied`. */
+.kds-copyable-table-row.settling .kds-value::after {
+    /* Mantén el check con opacity 0 mientras settling, fade out suave */
+    opacity: 0;
+}
+
 /* Disable BeerCSS ripple on copyable table rows */
 .kds-copyable-table-row::after {
     display: none;
 }
 
+/* ========================================
+   GRID VARIANT (.kds-copyable-table--grid)
+   Read-only grid of N text cells per row. No copy,
+   no role=button, no "copy all". Cells share the row
+   width equally. Used inside radio options, etc.
+   ======================================== */
+
+/* La grilla es solo columnas de texto (como el DataTable original): sin caja,
+   borde, fondo ni sombra del contenedor copyable. */
+.kds-copyable-table--grid {
+    border: 0;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+    box-shadow: none;
+}
+
+.kds-copyable-table-row--grid {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1-5);
+    padding: 0;
+    /* Sin el divisor border-top que trae la fila base del copyable. */
+    border-top: 0;
+    cursor: default;
+    user-select: text;
+}
+
+/* Separación entre filas de la grilla (sin divisores). */
+.kds-copyable-table-row--grid + .kds-copyable-table-row--grid {
+    margin-top: var(--kds-spacing-0-5);
+}
+
+.kds-grid-cell {
+    flex: 1 1 0;
+    min-width: 0;
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    color: var(--kds-color-text-primary);
+    word-break: break-word;
+}
+
+.kds-grid-cell--disabled {
+    color: var(--kds-color-text-disabled);
+}
+
 /* ========================================
    COPY-ALL BUTTON (.kds-copy-all-btn)
    Modifier for kds-btn kds-btn-outlined that adds
@@ -6455,6 +8112,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.
@@ -6550,7 +8215,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);
@@ -6574,3 +8239,191 @@ a.kds-copy-all-btn.copied:hover {
     color: var(--kds-color-text-primary);
 }
 
+/* ========================================
+   PAYMENT TOTAL (.kds-payment-total)
+   Bloque "monto a pagar" para QR view y email templates.
+   Portado desde paylink-ligopay → <kh:paymentTotal> + materialize-config.css.
+   Variantes:
+     - default: amount grande (3rem) en color primario Khipu.
+     - email:   amount compacto (1.5rem) en color texto primario.
+   Responsive (default): mobile (≤ 1024px) centra y oculta titleMobile.
+   ======================================== */
+
+.kds-payment-total {
+    /* Component-scoped tokens — overrideables sin tocar el CSS global. */
+    --kds-payment-total-title-size: var(--kds-font-size-2xl);    /* 24px */
+    --kds-payment-total-label-size: var(--kds-font-size-xl);     /* 20px */
+    --kds-payment-amount-size: 3rem;                              /* 48px — destacado */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-primary-main);
+    --kds-payment-amount-weight: var(--kds-font-weight-medium);
+
+    text-align: left;
+}
+
+.kds-payment-total-title,
+.kds-payment-total-title-mobile {
+    font-size: var(--kds-payment-total-title-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total-title-mobile {
+    display: none;
+}
+
+.kds-payment-total .kds-payment-label {
+    font-size: var(--kds-payment-total-label-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-1);
+    padding-top: 0;
+}
+
+.kds-payment-total .kds-payment-amount {
+    font-size: var(--kds-payment-amount-size);
+    font-weight: var(--kds-payment-amount-weight);
+    line-height: var(--kds-payment-amount-line-height);
+    color: var(--kds-payment-amount-color);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total .kds-payment-amount .kds-payment-total-decimal-sup,
+.kds-invoice-amount .kds-payment-total-decimal-sup {
+    font-size: var(--kds-font-size-decimal-sup);
+    font-weight: var(--kds-font-weight-semibold);
+    position: relative;
+    top: 0;
+}
+
+/* Variante email: amount compacto en color texto primario, alineación izquierda fija */
+.kds-payment-total--email {
+    --kds-payment-amount-size: var(--kds-font-size-2xl);  /* 24px */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-text-primary);
+    --kds-payment-amount-weight: var(--kds-font-weight-semibold);
+}
+
+/* Tone modifier: swaps the amount color to the khipu-blue / LigoPay info blue.
+   Combinable with --email or with the default variant. */
+.kds-payment-total--tone-info {
+    --kds-payment-amount-color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
+/* Centered modifier: removes the asymmetric desktop padding (which exists for
+   LigoPay QR view) and centers all internal text. Composable with --email and
+   --tone-info. */
+.kds-payment-total--centered {
+    padding-left: 0;
+    padding-top: 0;
+    text-align: center;
+}
+.kds-payment-total--centered .kds-payment-total-title,
+.kds-payment-total--centered .kds-payment-total-title-mobile,
+.kds-payment-total--centered .kds-payment-label,
+.kds-payment-total--centered .kds-payment-amount {
+    text-align: center;
+}
+
+/* Responsive: mobile ≤ 1024px — centra y conmuta los títulos (sólo variante default) */
+@media (max-width: 1024px) {
+    .kds-payment-total {
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-total-title {
+        display: none;
+    }
+
+    .kds-payment-total .kds-payment-total-title-mobile {
+        display: block;
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-label,
+    .kds-payment-total .kds-payment-amount {
+        text-align: center;
+    }
+
+    /* Email mantiene alineación izquierda incluso en mobile (matchea email clients) */
+    .kds-payment-total--email,
+    .kds-payment-total--email .kds-payment-label,
+    .kds-payment-total--email .kds-payment-amount {
+        text-align: left;
+    }
+}
+
+/* ==========================================================================
+   GRID UTILITIES — semantic aliases for BeerCSS .grid / .s* / .m* / .l*
+
+   Estas utilidades son ALIAS de las clases cortas de BeerCSS para que
+   consumers (payment, LigoPay, Grails legacy) puedan escribir markup con
+   nombres descriptivos sin renunciar al grid de 12 columnas de BeerCSS.
+
+   Convención (estilo Bootstrap responsive):
+   - kds-grid              → .grid (12-col CSS grid + 1rem gap)
+   - kds-col-sm-{1..12}    → .s{1..12}  (mobile, siempre aplica)
+   - kds-col-md-{1..12}    → .m{1..12}  (>=601px)
+   - kds-col-lg-{1..12}    → .l{1..12}  (>=993px)
+
+   Las definiciones originales de BeerCSS NO se tocan; estas son aditivas.
+   ========================================================================== */
+
+.kds-grid {
+    --_gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--_gap);
+    block-size: auto;
+}
+
+.kds-grid.kds-grid-no-space { --_gap: 0rem; }
+.kds-grid.kds-grid-medium-space { --_gap: 1.5rem; }
+.kds-grid.kds-grid-large-space { --_gap: 2rem; }
+
+.kds-grid > * { margin: 0; }
+
+.kds-col-sm-1  { grid-area: auto/span 1; }
+.kds-col-sm-2  { grid-area: auto/span 2; }
+.kds-col-sm-3  { grid-area: auto/span 3; }
+.kds-col-sm-4  { grid-area: auto/span 4; }
+.kds-col-sm-5  { grid-area: auto/span 5; }
+.kds-col-sm-6  { grid-area: auto/span 6; }
+.kds-col-sm-7  { grid-area: auto/span 7; }
+.kds-col-sm-8  { grid-area: auto/span 8; }
+.kds-col-sm-9  { grid-area: auto/span 9; }
+.kds-col-sm-10 { grid-area: auto/span 10; }
+.kds-col-sm-11 { grid-area: auto/span 11; }
+.kds-col-sm-12 { grid-area: auto/span 12; }
+
+@media only screen and (min-width: 601px) {
+    .kds-col-md-1  { grid-area: auto/span 1; }
+    .kds-col-md-2  { grid-area: auto/span 2; }
+    .kds-col-md-3  { grid-area: auto/span 3; }
+    .kds-col-md-4  { grid-area: auto/span 4; }
+    .kds-col-md-5  { grid-area: auto/span 5; }
+    .kds-col-md-6  { grid-area: auto/span 6; }
+    .kds-col-md-7  { grid-area: auto/span 7; }
+    .kds-col-md-8  { grid-area: auto/span 8; }
+    .kds-col-md-9  { grid-area: auto/span 9; }
+    .kds-col-md-10 { grid-area: auto/span 10; }
+    .kds-col-md-11 { grid-area: auto/span 11; }
+    .kds-col-md-12 { grid-area: auto/span 12; }
+}
+
+@media only screen and (min-width: 993px) {
+    .kds-col-lg-1  { grid-area: auto/span 1; }
+    .kds-col-lg-2  { grid-area: auto/span 2; }
+    .kds-col-lg-3  { grid-area: auto/span 3; }
+    .kds-col-lg-4  { grid-area: auto/span 4; }
+    .kds-col-lg-5  { grid-area: auto/span 5; }
+    .kds-col-lg-6  { grid-area: auto/span 6; }
+    .kds-col-lg-7  { grid-area: auto/span 7; }
+    .kds-col-lg-8  { grid-area: auto/span 8; }
+    .kds-col-lg-9  { grid-area: auto/span 9; }
+    .kds-col-lg-10 { grid-area: auto/span 10; }
+    .kds-col-lg-11 { grid-area: auto/span 11; }
+    .kds-col-lg-12 { grid-area: auto/span 12; }
+}
+