@khipu/design-system 0.2.0-alpha.87 → 0.2.0-alpha.88

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-01T20:06:40.901Z
+ * Generated: 2026-07-02T19:08:15.112Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5738,7 +5738,9 @@ button.kds-fab:focus-visible {
     padding: var(--kds-spacing-1) 0;
 }
 
-/* Desktop: footer inside card hidden; Mobile: footer outside card hidden */
+/* 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;
 }
@@ -5747,22 +5749,13 @@ button.kds-fab:focus-visible {
     margin-block-start: 0 !important;
 }
 
-/* Footer externo (desktop) 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
+/* 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));
 }
 
-@media (max-width: 767px) {
-    .kds-card-elevated > .kds-secure-footer {
-        display: flex;
-    }
-    .kds-screen > .kds-secure-footer {
-        display: none;
-    }
-}
-
 .kds-secure-footer-lock {
     width: 12px;
     height: 12px;
@@ -6408,6 +6401,30 @@ button.kds-fab:focus-visible {
     /* 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: 30px → 24px (progressive) */