@khipu/design-system 0.3.5-alpha.3 → 0.3.5-alpha.31

package/dist/beercss/khipu-beercss.css

@@ -13,7 +13,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-08-13T16:19:44.738Z
+ * Generated: 2026-10-07T15:44:56.536Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -397,13 +397,13 @@
 /* ============================================================================
    DARK MODE COLOR TOKENS
    Override only color variables; everything else inherits from :root.
-   Activated via [data-theme="dark"] on <html>, <body>, or a wrapper —
-   or via the BeerCSS-style body.dark class. Both selectors are emitted so
-   a body.dark app gets the FULL dark theme (core + extended tokens); a
-   single source flipping only partially is how mixed light/dark bugs arise.
+   Activated ONLY via [data-theme="dark"] on <html>, <body>, or a wrapper.
+   body.dark is deliberately NOT a trigger: BeerCSS adds that class on its
+   own when the OS reports a dark preference, so honouring it turns dark on
+   for consumers that never opted in. Dark stays opt-in until an app sets
+   data-theme explicitly.
    ============================================================================ */
 
-body.dark,
 [data-theme="dark"] {
 
   /* Primary palette - Khipu brand */
@@ -879,11 +879,10 @@ body.dark,
    values so selected states / rows / hovers adapt. Additive: the light
    :root / body.light values above are unchanged. Tokens already defined as
    var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
-   body.dark is included on purpose: the light group above also matches
-   body.dark (specificity 0,1,1), so a bare [data-theme] override (0,1,0)
-   would lose on a body that carries the transitional dark class.
+   body.dark is deliberately NOT a trigger: BeerCSS adds that class on its own
+   when the OS reports a dark preference, so honouring it turns dark on for
+   consumers that never opted in. Dark stays opt-in via data-theme.
    ======================================== */
-body.dark,
 [data-theme="dark"] {
     --kds-color-primary-faint: #1E1030;                     /* dark brand-tinted subtle surface (selected rows/cards) */
     --kds-color-info-soft: var(--kds-alert-info-bg);        /* dark translucent blue */
@@ -917,7 +916,7 @@ body.dark,
    opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
    OS-dark device heuristically darkens SOME elements of a light page (mixed
    light/dark rendering in production apps). Dark is reached only by an
-   explicit [data-theme="dark"] / body.dark opt-in. */
+   explicit [data-theme="dark"] opt-in. */
 :root,
 html,
 body {
@@ -936,8 +935,7 @@ body {
 }
 
 /* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
-[data-theme="dark"],
-body.dark {
+[data-theme="dark"] {
     color-scheme: dark;
 }
 
@@ -999,6 +997,20 @@ footer {
     background-color: transparent !important;
 }
 
+/* Familia base del arbol del DS.
+   BeerCSS la pone en `body { font-family: var(--font) }`, y `--font` es un alias
+   declarado en :root. Una custom property se sustituye en el elemento que la declara,
+   asi que ese alias se congela con la familia de :root: una marca que define
+   --kds-font-family-primary mas abajo en el arbol no lo mueve, y el texto que solo
+   hereda de body se queda con la familia por defecto.
+
+   Resolviendo el token aca, en la raiz del arbol del DS, hereda todo lo de adentro con
+   la familia vigente en ese punto. Sin marca definida el valor es el mismo de siempre,
+   asi que no cambia nada para quien no la configura. */
+.kds-theme-root {
+    font-family: var(--kds-font-family-primary);
+}
+
 /* ========================================
    TEXT UTILITIES OVERRIDE
    Fix BeerCSS classes that use wrong color tokens
@@ -1210,6 +1222,29 @@ a.kds-btn-outlined-white:hover:not(:disabled) {
     opacity: 0.9;
 }
 
+/* Outlined success — compone con .kds-btn-outlined, igual que .kds-btn-outlined-white:
+   solo cambia superficie y color, la caja la aporta la variante base. */
+button.kds-btn-outlined-success,
+a.kds-btn-outlined-success {
+    background: transparent;
+    color: var(--kds-color-success-main);
+    border-color: var(--kds-color-success-main);
+}
+
+button.kds-btn-outlined-success:hover:not(:disabled),
+a.kds-btn-outlined-success:hover:not(:disabled) {
+    background: var(--kds-color-success-soft);
+    border-color: var(--kds-color-success-dark);
+    color: var(--kds-color-success-dark);
+}
+
+button.kds-btn-outlined-success:disabled,
+a.kds-btn-outlined-success:disabled {
+    background: transparent;
+    color: var(--kds-color-action-disabled);
+    border-color: var(--kds-color-action-disabled);
+}
+
 /* Text button — mismo tamaño que el resto de variantes (hereda min-height/padding
    del base): solo cambia la superficie, no la caja. */
 button.kds-btn-text,
@@ -1901,6 +1936,9 @@ a.kds-btn.kds-btn-md {
 .kds-mt-4 { margin-top: var(--kds-spacing-4); }
 .kds-mt-6 { margin-top: var(--kds-spacing-6); }
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
+/* Absorbe el espacio libre de un contenedor flex-column: ancla el elemento al fondo
+   (p.ej. las acciones de un form dentro de .kds-card-elevated--action). */
+.kds-mt-auto { margin-top: auto; }
 
 .kds-mb-0 { margin-bottom: 0; }
 .kds-mb-0-5 { margin-bottom: var(--kds-spacing-0-5); }
@@ -2354,28 +2392,35 @@ button.kds-locale-switcher-toggle:hover,
 }
 
 /* ========================================
-   Google Sign-In Button
-   Per Google Identity branding guidelines:
+   SSO Button (federated sign-in: Google, Microsoft, ...)
+   Neutral white button shared by every identity provider, styled per
+   Google Identity branding guidelines, which Microsoft's also satisfy:
    https://developers.google.com/identity/branding-guidelines
+   `.kds-btn-google` / `.kds-google-icon` are kept as aliases for
+   consumers pinned to earlier versions.
+   Colors go through --kds-btn-sso-* so the dark theme swaps all of them
+   together (background alone flipping left the label unreadable).
    ======================================== */
 
+button.kds-btn-sso,
+a.kds-btn-sso,
 button.kds-btn-google,
 a.kds-btn-google {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--kds-spacing-1-5);
+    gap: var(--kds-spacing-1-25);
     width: 100%;
-    background: var(--kds-color-background-paper);
-    color: #1F1F1F;
-    border: 1px solid #747775;
+    background: var(--kds-btn-sso-bg, #FFFFFF);
+    color: var(--kds-btn-sso-color, #1F1F1F);
+    border: 1px solid var(--kds-btn-sso-border, #747775);
     border-radius: var(--kds-radius-button);
     padding: var(--kds-spacing-1) var(--kds-spacing-1-5);
     min-height: var(--kds-spacing-button-min-height);
-    font-family: "Roboto", var(--kds-font-family-secondary);
+    font-family: var(--kds-font-family-secondary);
     font-weight: var(--kds-font-weight-medium);
     font-size: var(--kds-font-size-sm);
-    line-height: var(--kds-line-height-normal);
+    line-height: 20px; /* Google 14/20; no line-height token matches */
     letter-spacing: var(--kds-letter-spacing-normal);
     text-transform: none;
     cursor: pointer;
@@ -2385,17 +2430,34 @@ a.kds-btn-google {
     box-shadow: none;
 }
 
+button.kds-btn-sso:hover,
+a.kds-btn-sso:hover,
 button.kds-btn-google:hover,
 a.kds-btn-google:hover {
-    background: #F2F2F2;
+    background: var(--kds-btn-sso-bg-hover, #F2F2F2);
     box-shadow: var(--kds-shadow-1);
 }
 
+button.kds-btn-sso:active,
+a.kds-btn-sso:active,
 button.kds-btn-google:active,
 a.kds-btn-google:active {
-    background: #E8E8E8;
+    background: var(--kds-btn-sso-bg-active, #E8E8E8);
+}
+
+/* Dark theme per Google Identity guidelines; hover/active are 8% / 12%
+   state layers of the label color over the fill. */
+[data-theme="dark"] .kds-btn-sso,
+[data-theme="dark"] .kds-btn-google {
+    --kds-btn-sso-bg: #131314;
+    --kds-btn-sso-color: #E3E3E3;
+    --kds-btn-sso-border: #8E918F;
+    --kds-btn-sso-bg-hover: #242425;
+    --kds-btn-sso-bg-active: #2C2C2D;
 }
 
+button.kds-btn-sso:disabled,
+a.kds-btn-sso:disabled,
 button.kds-btn-google:disabled,
 a.kds-btn-google:disabled {
     background: var(--kds-color-action-disabled-bg);
@@ -2405,7 +2467,8 @@ a.kds-btn-google:disabled {
     box-shadow: none;
 }
 
-/* Google G icon container - white background per guidelines */
+/* Provider logo container */
+.kds-btn-sso .kds-sso-icon,
 .kds-btn-google .kds-google-icon {
     display: flex;
     align-items: center;
@@ -2413,6 +2476,7 @@ a.kds-btn-google:disabled {
     flex-shrink: 0;
 }
 
+.kds-btn-sso .kds-sso-icon svg,
 .kds-btn-google .kds-google-icon svg {
     width: var(--kds-spacing-button-icon-size);
     height: var(--kds-spacing-button-icon-size);
@@ -2456,12 +2520,24 @@ a.kds-btn-google:disabled {
     /* Llena y centra dentro de contenedores flex (pantalla de carga); en flujo
        normal (contenedor no-flex) se reduce a su contenido. */
     flex: 1 1 auto;
-    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la
-       card queda del alto del spinner y se lee como un recorte. Ocupa el body completo
-       de un telefono para que la pantalla de carga se lea como una pantalla y no como
-       una franja. Va aca y no en la card para que el minimo aplique solo a la carga:
-       el resto de las pantallas crece con su contenido. */
-    min-height: 36rem;
+    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la card
+       queda del alto del spinner y se lee como un recorte. Va aca y no en la card para que
+       el minimo aplique solo a la carga: el resto de las pantallas crece con su contenido.
+       El valor de escritorio es moderado a proposito: el minimo de telefono (36rem) dejaba
+       la card de la carga mucho mas alta que cualquier otra pantalla, y al entrar y salir
+       del loader el widget crecia y volvia a encoger.
+       .kds-card-elevated--action espeja este valor (y el de telefono): cambiarlos juntos. */
+    min-height: 18rem;
+}
+
+/* En telefono la carga es mas alta: ahi la card va a ancho completo y un loader corto se
+   lee como una franja perdida en el medio. 22rem (card de 400px con su padding) en vez de
+   los 36rem de antes (624px): con el header arriba, la pantalla entera cabe en el alto util
+   de la mayoria de los telefonos (KTUF-388). */
+@media (max-width: 767px) {
+    .kds-secure-loader {
+        min-height: 22rem;
+    }
 }
 
 .kds-secure-loader-text {
@@ -3271,12 +3347,33 @@ label.radio span {
     cursor: pointer;
 }
 
-/* Checked state */
+/* Checked state.
+   accent-color aplica al input nativo, que BeerCSS deja con opacity 0: no se ve.
+   Se mantiene igual por si algun consumidor no usa el markup de BeerCSS. */
 label.checkbox input[type="checkbox"]:checked,
 label.radio input[type="radio"]:checked {
     accent-color: var(--kds-color-accent, var(--primary));
 }
 
+/* El control que SI se ve lo dibuja BeerCSS como una ligadura de Material Symbols en
+   `> span::before`, coloreada con var(--primary). Estas dos reglas reproducen sus
+   selectores para que ese pseudo-elemento siga al rol accent.
+
+   Misma especificidad que el original y sin !important: este archivo va ultimo en el
+   bundle, asi que gana por orden. El fallback deja el valor anterior intacto cuando la
+   marca no define accent, que es el caso de todo consumidor actual.
+
+   No se toca `.switch`: es un control de encendido/apagado, no de seleccion, y el
+   contrato de marca no lo incluye. */
+:is(.checkbox, .radio) > span::before {
+    color: var(--kds-color-accent, var(--primary));
+}
+
+:is(.checkbox, .radio) > input:checked + span::before,
+:is(.checkbox, .radio).icon > input:checked + span > i {
+    color: var(--kds-color-accent, var(--primary));
+}
+
 /* Disabled state */
 label.checkbox input[type="checkbox"]:disabled,
 label.radio input[type="radio"]:disabled {
@@ -4330,14 +4427,16 @@ footer > .kds-container-center {
 
 /* Code block for displaying code snippets */
 .kds-code-block {
-    background: var(--kds-color-background-elevated);
-    padding: var(--kds-spacing-4);
+    background: var(--kds-color-background-muted);
+    border: 1px solid var(--kds-color-divider);
+    padding: var(--kds-spacing-2);
     border-radius: var(--kds-radius-md);
     overflow-x: auto;
-    font-family: 'Courier New', monospace;
+    font-family: var(--kds-font-family-mono);
     font-size: var(--kds-font-size-sm);
     line-height: var(--kds-line-height-relaxed);
     color: var(--kds-color-text-primary);
+    tab-size: 4;
 }
 
 /* ============================================
@@ -6279,13 +6378,39 @@ button.kds-fab:active:not(:disabled) {
    alto que el mark de Khipu. Sirve para <img> o un elemento con .kds-psp-mark. */
 .kds-secure-footer img,
 .kds-secure-footer .kds-psp-mark {
-    height: 11px;
     width: auto;
     flex: 0 0 auto;
     display: block;
     object-fit: contain;
 }
 
+/* Logo del PSP: dos perillas, las dos calibradas contra el asset real que sube un PSP
+   hoy (klap.png, 60x30, con 2px de aire transparente arriba y abajo).
+
+   Se nivela por LINEA DE BASE, no por caja ni por borde inferior de la tinta: los dos
+   wordmarks tienen descendente -la "p" de Khipu baja un 20% de su caja- asi que igualar
+   los bordes de abajo deja al logo del PSP flotando sobre la linea de Khipu.
+
+   - --kds-psp-mark-height: el alto de la caja. El ojo lee la tinta, no la caja, y el
+     aire del PNG se come parte del alto: a 11px la tinta de klap medía 9.5px contra los
+     11px de Khipu y se veia mas chico. A 15px la tinta llega a 13px y se leen iguales.
+   - --kds-psp-mark-top: cuanto baja para que su linea de base calce con la de Khipu.
+     Va como valor y no como formula a proposito: depende del aire y de la anatomia del
+     asset de cada PSP, y se termina de ajustar mirando la pantalla. */
+.kds-secure-footer {
+    --kds-psp-mark-height: 15px;
+    --kds-psp-mark-top: 1px;
+}
+
+.kds-secure-footer img,
+.kds-secure-footer .kds-psp-mark {
+    height: var(--kds-psp-mark-height);
+    position: relative;
+    top: var(--kds-psp-mark-top);
+}
+
+
+
 .kds-secure-footer-code {
     color: var(--kds-color-text-hint);
 }
@@ -6541,14 +6666,37 @@ button.kds-fab:active:not(:disabled) {
     color: var(--kds-color-success-main);
 }
 
-/* Variant: pending (animated blue spinner, sin icono interno) */
+/* Variant: pending (animated spinner, sin icono interno).
+   El acento sale de --kds-status-pending-accent, con el azul de info como
+   fallback: el valor por defecto no cambia, y una pantalla puede pedir otro
+   acento sin redefinir la regla ni recurrir a estilos inline. */
 .kds-status-block[data-status="pending"] .kds-status-block-icon {
     background: transparent;
     border: 3px solid var(--kds-color-divider);
-    border-top-color: var(--kds-color-info-main);
+    border-top-color: var(--kds-status-pending-accent, var(--kds-color-info-main));
     animation: kds-spin 1s linear infinite;
 }
 
+/* Spinner neutro, para esperas que acompañan al contenido sin reclamar
+   atención: el azul de info lee como un aviso y compite con la información
+   de la pantalla. */
+.kds-status-block.kds-accent-neutral {
+    --kds-status-pending-accent: var(--kds-color-text-primary);
+}
+
+/* Spinner fino, para bandas de una línea donde el trazo de 3px pesa demasiado.
+   El tamaño se pide por token y no por regla sobre el icono: así no compite en
+   especificidad con `.kds-status-block.inline .kds-status-block-icon`, que
+   marca igual y viene después. */
+.kds-status-block.kds-spinner-sm {
+    --kds-status-icon-size: var(--kds-spacing-3);
+    --kds-status-icon-size-sm: var(--kds-spacing-3);
+}
+
+.kds-status-block.kds-spinner-sm .kds-status-block-icon {
+    border-width: 2px;
+}
+
 /* Variant: warn */
 .kds-status-block[data-status="warn"] .kds-status-block-icon {
     background: var(--kds-color-warning-soft);
@@ -6592,6 +6740,60 @@ button.kds-fab:active:not(:disabled) {
     font-size: var(--kds-font-size-xl);
 }
 
+/* Inline without description: the title is the only thing next to the icon. Its
+   margin-bottom (spacing-1, which separates it from the description in the centered
+   variant) made the column taller, so align-items:center left the text ~4px above the
+   icon's center. */
+.kds-status-block.inline .kds-status-block-title:last-child {
+    margin-bottom: 0;
+    --kds-typography-h2-margin-block-end: 0;
+}
+
+/* Inline with description (KdsStatusBlock inline + description): the description is a
+   full-width paragraph below the icon+title row, spacing-1 under it. The block drops its
+   bottom padding and owns the gap to what follows (spacing-2), so consumers never add
+   margins around the description. kds-btn-stack and kds-share-card already carry that
+   top margin themselves. */
+.kds-status-block.inline.kds-status-block--described {
+    flex-wrap: wrap;
+    row-gap: var(--kds-spacing-1);
+    padding-bottom: 0;
+}
+
+.kds-status-block--described > .kds-status-block-description {
+    flex-basis: 100%;
+}
+
+.kds-status-block--described + .kds-alert,
+.kds-status-block--described + .kds-copy-row {
+    margin-top: var(--kds-spacing-2);
+}
+
+/* Banda: el bloque de estado sobre una superficie sutil, para cuando acompaña
+   al contenido en lugar de encabezar la pantalla. Va después de `.inline`
+   porque marca igual en especificidad y necesita ganarle el padding. */
+.kds-status-block.kds-banded {
+    /* 0.75rem = 12px, el valor que --kds-font-size-xs toma desde tablet. Va plano y no
+       sigue la escala responsiva a proposito: a 11px el mensaje de espera se parte en dos
+       lineas y el diseno lo quiere en una. Como custom property de la variante, siguiendo
+       el patron de kds-spinner-sm con --kds-status-icon-size. */
+    --kds-status-band-font-size: 0.75rem;
+    background: var(--kds-color-background-muted);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-1-5) var(--kds-spacing-2);
+}
+
+/* La banda de espera lleva su propia tipografia, por spec de Figma: 11px en bold.
+   Va scopeada a la variante y no a .kds-status-block-description, que la comparten
+   los bloques de resultado, donde 11px seria ilegible. El color se deja en el token
+   heredado: un #000 fijo se volveria invisible bajo modo oscuro, donde text-primary
+   pasa a blanco. */
+.kds-status-block.kds-banded .kds-status-block-description {
+    font-size: var(--kds-status-band-font-size);
+    font-weight: var(--kds-font-weight-bold);
+    line-height: normal;
+}
+
 @keyframes kds-spin {
     to { transform: rotate(360deg); }
 }
@@ -6678,6 +6880,48 @@ button.kds-fab:active:not(:disabled) {
     min-height: 0;
 }
 
+/* Variante alta (size="full"): contenido largo (documentos, textos legales) usa todo el alto
+   máximo del sheet y el body se estira para que un hijo lo llene. Los .kds-theme-root son
+   envoltorios transparentes que el consumidor puede meter entre el body y el contenido (p. ej.
+   un KdsRoot dentro de un div display:contents), así que se estiran a cualquier profundidad. */
+.kds-bottom-sheet-full {
+    height: 90vh;
+    height: 90dvh;
+}
+
+.kds-bottom-sheet-full .kds-bottom-sheet-body,
+.kds-bottom-sheet-full .kds-bottom-sheet-body .kds-theme-root {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
+
+/* ========================================
+   DOCUMENT FRAME (.kds-document-frame)
+   Documento embebido (iframe) que llena su contenedor. --kds-document-frame-scale achica
+   documentos pensados para un viewport de escritorio: el iframe se arma más ancho y se
+   escala, así letra, títulos y márgenes bajan juntos.
+   ======================================== */
+
+.kds-document-frame {
+    --kds-document-frame-scale: 1;
+    position: relative;
+    flex: 1;
+    min-height: var(--kds-document-frame-min-height, 12rem);
+    overflow: hidden;
+}
+
+.kds-document-frame > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% / var(--kds-document-frame-scale));
+    height: calc(100% / var(--kds-document-frame-scale));
+    border: 0;
+    transform: scale(var(--kds-document-frame-scale));
+    transform-origin: 0 0;
+}
+
 .kds-bottom-sheet-icon {
     font-size: var(--kds-font-size-4xl);
 }
@@ -6713,6 +6957,14 @@ button.kds-fab:active:not(:disabled) {
     color: var(--kds-color-primary-contrast);
 }
 
+/* El reset `.kds-bottom-sheet-actions button { border: 0 }` borra la caja de las
+   variantes outlined. Se restituye solo grosor y estilo: el color queda en
+   currentColor, que ya es el de cada variante (primary, success, etc.). */
+.kds-bottom-sheet-actions button.kds-btn-outlined {
+    border-style: solid;
+    border-width: var(--kds-border-width-sm, 1px);
+}
+
 .kds-bottom-sheet-actions .kds-btn-ghost {
     background: transparent;
     color: var(--kds-color-text-secondary);
@@ -6833,6 +7085,15 @@ button.kds-fab:active:not(:disabled) {
 }
 
 /* Auto-managed tab panels: hidden attribute must win over any display rule */
+/* `hidden` es semantica de plataforma: si el atributo esta, el elemento no se
+   renderiza. El UA lo aplica con display:none, pero cualquier regla de autor con
+   display lo pisa — .kds-btn y .kds-btn-stack son flex, asi que un boton con
+   hidden seguia ocupando lugar. El !important es deliberado: ninguna regla de
+   componente deberia poder anular el atributo. */
+[hidden] {
+    display: none !important;
+}
+
 [data-kds-tab-panel][hidden] {
     display: none;
 }
@@ -7223,6 +7484,57 @@ div.kds-invoice-header,
     padding: var(--kds-spacing-0-5);
 }
 
+/* -- Skeleton (KTUF-388) --
+   Gris pulsante que reserva el lugar de un contenido que aún no llega. La base solo pinta:
+   sobre un elemento que ya tiene tamaño (p.ej. .kds-invoice-merchant) conserva sus medidas,
+   radio y colapso, y solo cambia el fondo. */
+.kds-skeleton {
+    background: var(--kds-color-gray-200);
+    animation: kds-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+/* Texto: un texto de relleno con la tinta transparente, puesto DENTRO del elemento real
+   (p.kds-invoice-amount, dd, ...). Usa la fuente, el tamaño y el alto de línea del slot, así
+   que ancho y alto calzan con el contenido que reemplaza (también dentro de contenedores
+   flex, donde una caja de alto fijo perdía el alto de línea) y el cambio no desplaza nada. */
+.kds-skeleton--text {
+    color: transparent;
+    border-radius: var(--kds-radius-sm);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    user-select: none;
+    /* Inline, el gris cubre la altura de la letra; se recorta arriba y abajo para que las
+       barras de líneas vecinas no se toquen. Solo visual: el layout no cambia. Va inline
+       también dentro de un flex (envuelto en un span): como item de flex cubriría todo el
+       alto de línea y quedaría más grueso que el resto. */
+    -webkit-clip-path: inset(0.2em 0 round var(--kds-radius-sm));
+    clip-path: inset(0.2em 0 round var(--kds-radius-sm));
+}
+
+[data-theme="dark"] .kds-skeleton {
+    background: var(--kds-color-gray-700);
+}
+
+@keyframes kds-skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-skeleton {
+        animation: none;
+    }
+}
+
+/* Header de la factura mientras carga (KdsInvoiceHeaderSkeleton): mismo markup que el
+   header real. El "Detalle del cobro" es decorativo, no un botón: replica lo que da el alto
+   al toggle real (line-height normal de button + caret de 1.25em de font-size-base). */
+.kds-invoice-skeleton .kds-expand-toggle {
+    cursor: default;
+    line-height: normal;
+    min-height: calc(var(--kds-font-size-base) * 1.25);
+}
+
 /* Titulo del body de la card: alineado a la izquierda, sin importar que el consumidor
    traiga .kds-text-center. Va con especificidad de contexto (screen + card) a proposito:
    el centrado se venia pidiendo app por app y el resultado era inconsistente entre
@@ -7907,6 +8219,53 @@ svg[fill='none'] {
     border-radius: var(--kds-radius-card);
 }
 
+/* Body card con acción (opt-in, KTUF-388): mismo alto mínimo que el card de carga, para que
+   el card no salte de alto entre el loader, los pasos de progreso y los formularios, y la
+   acción (submit) quede anclada al fondo con `.kds-mt-auto`. No cambia el default de arriba:
+   solo lo toma quien pone el modificador (khenshin-web).
+   - Espeja el min-height de .kds-secure-loader (18rem / 22rem en teléfono) más el padding
+     vertical del card en el flujo (spacing-3 x2). Si cambia el del loader, cambia acá.
+   - Valores fijos, sin vh/dvh: en un iframe (KTUF-239) el viewport es el propio iframe, cuyo
+     alto lo da el RESIZE del contenido; un mínimo relativo al viewport se realimenta.
+   - El contenido directo (form) crece para que la acción baje dentro de él y no compita
+     con el `margin-top: auto` de .kds-card-version. */
+.kds-screen > .kds-card-elevated.kds-card-elevated--action {
+    min-height: calc(18rem + 2 * var(--kds-spacing-3));
+}
+
+@media (max-width: 767px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: calc(22rem + 2 * var(--kds-spacing-3));
+    }
+}
+
+.kds-card-elevated--action > form {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Pantallas cuyas acciones van en un .kds-btn-stack hijo directo del card (resultados:
+   éxito, fallo, timeout, pago manual): el stack se ancla al fondo como el submit de un form.
+   Su margen de siempre (spacing-2) pasa a padding para conservar el respiro mínimo, y la
+   versión que le sigue deja de absorber espacio; si no, el libre se repartía entre los dos
+   márgenes automáticos y el botón quedaba a media altura. */
+.kds-card-elevated--action > .kds-btn-stack {
+    margin-top: auto;
+    padding-top: var(--kds-spacing-2);
+}
+
+.kds-card-elevated--action > .kds-btn-stack ~ .kds-card-version {
+    margin-top: 0;
+}
+
+/* Un loader dentro del card (pasos de progreso) no suma su propio mínimo: ya lo da el card.
+   Si no, el card crecía el alto de la línea de versión en cada paso de carga y volvía a
+   encoger al llegar el formulario. El loader se centra en el alto que el card le deja. */
+.kds-card-elevated--action .kds-secure-loader {
+    min-height: 0;
+}
+
 /* 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. */
@@ -7923,13 +8282,20 @@ svg[fill='none'] {
 
 /* 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. */
+   ellas se distingan; sin esto, card blanca sobre fondo blanco se funden.
+
+   --kds-color-background-body es el fondo de la pantalla, y es lo que un comercio
+   cambia con su backgroundColor. Se resuelve aca, con muted como fallback, y no
+   como alias en :root: un alias se evalua en :root y queda con el valor de :root,
+   asi que la variable que el widget setea en body nunca llegaria a la etapa. Los
+   otros usos de muted (tabs, bloque de codigo, hover del FAB) no se tocan: son
+   superficies de componentes, no el fondo de la pantalla. */
 .kds-payment-stage {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     padding: var(--kds-spacing-2-5) var(--kds-spacing-2) var(--kds-spacing-8);
-    background: var(--kds-color-background-muted);
+    background: var(--kds-color-background-body, var(--kds-color-background-muted));
 }
 
 /* Payment flow — narrow column */
@@ -7998,6 +8364,18 @@ svg[fill='none'] {
 @media (hover: hover) and (pointer: fine) {
     .kds-card-elevated.kds-invoice-sticky {
         border-radius: var(--kds-radius-card);
+        /* El clip-path del colapso recorta con `round 0 0 R R` y eso PISA al
+           border-radius: aunque la card declare las cuatro esquinas, el recorte las
+           deja rectas arriba. Hay que redondearlas también acá o el fix no se ve. */
+        clip-path: inset(
+            0 0
+            calc(
+                var(--collapse-collapsible-h) * var(--collapse-progress)
+                + var(--kds-spacing-1) * var(--collapse-progress)
+            )
+            0
+            round var(--kds-radius-card)
+        );
     }
 
     .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
@@ -8336,8 +8714,11 @@ svg[fill='none'] {
     background: var(--kds-color-action-hover);
 }
 
-/* Search field reutilizable (standalone o dentro del KdsBankModal). */
-.kds-search-field {
+/* Search field reutilizable (standalone o dentro del KdsBankModal).
+   El selector de descendiente se mantiene por compatibilidad con los consumidores
+   que renderizan el input sin clase (payment lo arma a mano en GSP). */
+.kds-search-field,
+.kds-bank-modal-search input {
     width: 100%;
     padding: var(--kds-spacing-1-25) var(--kds-spacing-1-5);
     border: 1px solid var(--kds-color-divider);
@@ -8349,11 +8730,13 @@ svg[fill='none'] {
     background: var(--kds-color-surface);
 }
 
-.kds-search-field::placeholder {
+.kds-search-field::placeholder,
+.kds-bank-modal-search input::placeholder {
     color: var(--kds-color-text-hint);
 }
 
-.kds-search-field:focus {
+.kds-search-field:focus,
+.kds-bank-modal-search input:focus {
     border-color: var(--kds-color-primary-main);
     box-shadow: 0 0 0 2px var(--kds-color-primary-faint);
 }