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

package/dist/beercss/khipu-beercss.scoped.css

@@ -13,7 +13,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-02T20:44:15.394Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5638,6 +5638,25 @@
     }
 }
 
+/* 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-theme-root .kds-fab--corner {
+    --kds-fab-inset: 5px;
+    position: fixed;
+    top: var(--kds-fab-inset);
+    right: var(--kds-fab-inset);
+}
+
+@media (min-width: 768px) {
+    .kds-theme-root .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-theme-root .kds-fab--hidden {
     opacity: 0;
@@ -5739,7 +5758,9 @@
     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-theme-root .kds-card-elevated > .kds-secure-footer {
     display: none;
 }
@@ -5748,22 +5769,13 @@
     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-theme-root .kds-screen > .kds-secure-footer {
     margin-top: calc(-1 * var(--kds-spacing-3));
 }
 
-@media (max-width: 767px) {
-    .kds-theme-root .kds-card-elevated > .kds-secure-footer {
-        display: flex;
-    }
-    .kds-theme-root .kds-screen > .kds-secure-footer {
-        display: none;
-    }
-}
-
 .kds-theme-root .kds-secure-footer-lock {
     width: 12px;
     height: 12px;
@@ -6409,6 +6421,30 @@
     /* No max-height — clip-path on parent handles visual collapse without layout changes */
     .kds-theme-root .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-theme-root .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar {
+        width: 4px;
+    }
+    .kds-theme-root .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar-thumb {
+        background: var(--kds-color-gray-300);
+        border-radius: var(--kds-radius-full);
+    }
+    .kds-theme-root .kds-invoice-sticky .kds-invoice-collapsible::-webkit-scrollbar-track {
+        background: transparent;
     }
 
     /* Amount: 30px → 24px (progressive) */