@khipu/design-system 0.2.0-alpha.100 → 0.2.0-alpha.102

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-07-07T13:01:50.848Z
+ * Generated: 2026-07-07T13:35:39.708Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2168,6 +2168,9 @@ a.kds-btn-google:disabled {
 
 .kds-secure-loader-message {
     margin: 0;
+    /* !important: anula el auto-espaciado de hermanos de BeerCSS (0,5,1);
+       la separación con el título la da el gap del contenedor (spacing-0-25). */
+    margin-top: 0 !important;
     font-family: var(--kds-font-family-secondary);
     font-size: var(--kds-font-size-body1);
     line-height: var(--kds-line-height-normal);
@@ -2184,12 +2187,13 @@ a.kds-btn-google:disabled {
     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). */
+/* Anillo: SVG nativo con arco vía stroke-dasharray. Replica el CircularProgress
+   original (viewBox 44u, thickness 2, arco ~63%, disableShrink). El giro se anima
+   con stroke-dashoffset (el círculo queda estático y nítido); rotar el SVG con
+   transform rasteriza el anillo y se ve irregular durante el giro. */
 .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 {
@@ -2197,13 +2201,14 @@ a.kds-btn-google:disabled {
     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;
+    /* circunferencia = 2π·20.2 ≈ 126.92; arco visible 80 (~63%) + hueco 46.92 */
+    stroke-dasharray: 80 46.92;
+    animation: kds-secure-loader-dash 1.2s linear infinite;
 }
 
-@keyframes kds-secure-loader-spin {
+@keyframes kds-secure-loader-dash {
     to {
-        transform: rotate(360deg);
+        stroke-dashoffset: -126.92;
     }
 }
 
@@ -7340,11 +7345,6 @@ 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
@@ -7360,9 +7360,8 @@ button.kds-btn-success::after {
 
 }
 
-/* Desktop: restore card padding and full border-radius on invoice sticky */
+/* Desktop: restore sticky header 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);