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

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:05:55.906Z
+ * Generated: 2026-07-02T19:08:15.112Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5739,7 +5739,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 +5750,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;
@@ -5783,8 +5776,12 @@
     display: block;
     object-fit: contain;
     overflow: visible;
-    /* La tinta del wordmark ocupa casi todo su viewBox (45x15), así que el centro de caja
-       coincide con el óptico: se alinea por `align-items: center` del footer, sin nudge. */
+    /* 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") */
@@ -6405,6 +6402,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) */