@khipu/design-system 0.2.0-alpha.76 → 0.2.0-alpha.78

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-06-25T20:08:50.316Z
+ * Generated: 2026-06-26T12:31:16.193Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -849,6 +849,10 @@
     /* Spacing - Using design tokens */
     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);  /* 10px */
@@ -5649,6 +5653,11 @@
     background: none;
     border: 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);
@@ -6288,6 +6297,14 @@
     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-theme-root .kds-invoice-collapsible > .kds-expand-toggle {
+    margin-top: var(--kds-spacing-2);
+}
+
 /* -- Invoice Summary -- */
 .kds-theme-root .kds-invoice-summary {
     display: flex;
@@ -6497,9 +6514,13 @@
 }
 
 .kds-theme-root .kds-detail-group {
-    /* El espacio entre grupos lo da el `gap` de .kds-detail-list (spacing-1-5).
-       No agregar margin-bottom acá: se sumaba al gap → doble espacio entre grupos
-       (p. ej. entre "Emisor cobro" y "Descripción"). */
+    /* 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;
 }
 
@@ -6508,6 +6529,7 @@
     letter-spacing: var(--kds-letter-spacing-wide);
     color: var(--kds-color-text-hint);
     text-transform: uppercase;
+    margin: 0;
 }
 
 .kds-theme-root .kds-detail-group dd {
@@ -6517,6 +6539,19 @@
     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-theme-root .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-theme-root .kds-amount-row {
     display: flex;
@@ -6998,6 +7033,15 @@
     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. */
+.kds-theme-root .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
+.kds-theme-root .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. */