@khipu/design-system 0.2.0-alpha.14 → 0.2.0-alpha.140

package/dist/beercss/khipu-beercss.css

@@ -1,5 +1,7 @@
 /* Khipu BeerCSS Bundle - Combined CSS */
 
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');
+
 /* BeerCSS v4.0.1 */
 :root{--size: 1rem;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;--font-icon: "Material Symbols Outlined";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s;--active: rgb(128 128 128 / .192);--overlay: rgb(0 0 0 / .5);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);--top: env(safe-area-inset-top);--bottom: env(safe-area-inset-bottom);--left: env(safe-area-inset-left);--right: env(safe-area-inset-right);--image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==)}body.dark{--image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==)}html{font-size:var(--size)}body{color:var(--on-surface);background-color:var(--surface);overflow-x:hidden;font-family:var(--font);font-size:.875rem;line-height:1.5rem;letter-spacing:.0313rem}@media(pointer:fine){body ::-webkit-scrollbar,body ::-webkit-scrollbar-thumb,body ::-webkit-scrollbar-button{background:none;inline-size:.4rem;block-size:.4rem}body :is(:focus,:hover)::-webkit-scrollbar-thumb,body :has(:focus,:hover)::-webkit-scrollbar-thumb{background:var(--outline);border-radius:1rem}}@media(pointer:coarse){body:has(dialog[open],dialog.active),body:has(input[type=range]:focus){overflow:hidden}}@keyframes to-page{0%{opacity:0;transform:var(--_transform)}to{opacity:1;transform:translate(0)}}@keyframes to-linear-progress{0%{margin:0 0 0 -100%}50%{margin:0}to{margin:0 0 0 100%}}@keyframes to-indeterminate-progress{0%{padding:0 100% 0 0}50%{padding:0}to{padding:0 0 0 100%}}@keyframes to-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes to-ripple{to{transform:scale(4);opacity:0}}:root,body.light{--primary: #6750a4;--on-primary: #ffffff;--primary-container: #e9ddff;--on-primary-container: #22005d;--secondary: #625b71;--on-secondary: #ffffff;--secondary-container: #e8def8;--on-secondary-container: #1e192b;--tertiary: #7e5260;--on-tertiary: #ffffff;--tertiary-container: #ffd9e3;--on-tertiary-container: #31101d;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #410002;--background: #fffbff;--on-background: #1c1b1e;--surface: #fdf8fd;--on-surface: #1c1b1e;--surface-variant: #e7e0eb;--on-surface-variant: #49454e;--outline: #7a757f;--outline-variant: #cac4cf;--shadow: #000000;--scrim: #000000;--inverse-surface: #313033;--inverse-on-surface: #f4eff4;--inverse-primary: #cfbcff;--surface-dim: #ddd8dd;--surface-bright: #fdf8fd;--surface-container-lowest: #ffffff;--surface-container-low: #f7f2f7;--surface-container: #f2ecf1;--surface-container-high: #ece7eb;--surface-container-highest: #e6e1e6}body.dark{--primary: #cfbcff;--on-primary: #381e72;--primary-container: #4f378a;--on-primary-container: #e9ddff;--secondary: #cbc2db;--on-secondary: #332d41;--secondary-container: #4a4458;--on-secondary-container: #e8def8;--tertiary: #efb8c8;--on-tertiary: #4a2532;--tertiary-container: #633b48;--on-tertiary-container: #ffd9e3;--error: #ffb4ab;--on-error: #690005;--error-container: #93000a;--on-error-container: #ffb4ab;--background: #1c1b1e;--on-background: #e6e1e6;--surface: #141316;--on-surface: #e6e1e6;--surface-variant: #49454e;--on-surface-variant: #cac4cf;--outline: #948f99;--outline-variant: #49454e;--shadow: #000000;--scrim: #000000;--inverse-surface: #e6e1e6;--inverse-on-surface: #313033;--inverse-primary: #6750a4;--surface-dim: #141316;--surface-bright: #3a383c;--surface-container-lowest: #0f0e11;--surface-container-low: #1c1b1e;--surface-container: #201f22;--surface-container-high: #2b292d;--surface-container-highest: #363438}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-outlined.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-outlined.woff2) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-rounded.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-rounded.woff2) format("woff2")}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-sharp.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-sharp.woff2) format("woff2")}@font-face{font-family:Material Symbols Subset;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-subset.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-subset.woff2) format("woff2")}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0;border-radius:inherit;box-sizing:border-box}*:after,*:before{all:unset}label{font-size:.75rem;vertical-align:baseline}a,b,i,span,strong,em,code{vertical-align:baseline}a,button,.button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}:is(nav,.tabs,.field)>a,button,.button,.chip,i,label{-webkit-user-select:none;user-select:none}:not(.grid,nav,.row)>:not(progress.max)+:is(address,article,blockquote,code,.field,fieldset,form,.grid,h1,h2,h3,h4,h5,h6,nav,ol,p,pre,.row,section,aside,table,.tabs,ul):not([class*=margin],.right,.left,.top,.bottom){margin-block-start:1rem}:has(>[class*=margin]){padding:.1px}:is(a,button,.button,.chip,summary):focus-visible{outline:.125rem solid var(--primary);outline-offset:.25rem}:is(nav,.row,li).group>:focus-visible{z-index:1}:is(button,.button,.chip)>:is(span,i,img,svg){pointer-events:none}div:is(:not([class]),[class=active]):has(>:not(.responsive)~:is(menu,.tooltip,input)){display:inline-flex}.middle-align{display:flex;align-items:center!important}.bottom-align{display:flex;align-items:flex-end!important}.top-align{display:flex;align-items:flex-start!important}.left-align{text-align:start;justify-content:flex-start!important}.right-align{text-align:end;justify-content:flex-end!important}.center-align{text-align:center;justify-content:center!important}[class*=blur],[class*=blur].light{--_blur: 1rem;-webkit-backdrop-filter:blur(var(--_blur));backdrop-filter:blur(var(--_blur));color:var(--on-surface);background-color:#ffffff80!important}.dark [class*=blur],[class*=blur].dark{background-color:#00000080!important}.small-blur{--_blur: .5rem}.large-blur{--_blur: 1.5rem}.horizontal{display:inline-flex;flex-direction:row!important;gap:1rem;inline-size:auto!important;max-inline-size:none!important}.horizontal>*{margin-block:0!important}.vertical{display:flex;flex-direction:column!important}:is(a,button,.button,.chip).vertical{display:inline-flex;gap:.25rem;block-size:auto!important;max-block-size:none!important;padding-block:.5rem}.vertical>*{margin-inline:0!important}.no-elevate{box-shadow:none!important}.small-elevate,.elevate{box-shadow:var(--elevate1)!important}.medium-elevate{box-shadow:var(--elevate2)!important}.large-elevate{box-shadow:var(--elevate3)!important}.round,[class*=-round]{--_round: 2rem;border-radius:var(--_round)!important}.small-round{--_round: .5rem}.large-round{--_round: 3.5rem}.no-round,.square,.top-round,.bottom-round,.left-round,.right-round{border-radius:.5rem!important}.top-round{border-start-start-radius:var(--_round)!important;border-start-end-radius:var(--_round)!important}.bottom-round{border-end-end-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.left-round{border-start-start-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.right-round{border-start-end-radius:var(--_round)!important;border-end-end-radius:var(--_round)!important}.circle:not(.extend){border-radius:50%}:is(.circle,.square):is(button,.button,.chip){padding:0;block-size:var(--_size);inline-size:var(--_size)}:is(.circle,.square)>span:not([class]){display:none}:is(.circle,.square).round{border-radius:1rem!important}.border:not(table,.field,.list,menu,article){box-sizing:border-box;border:.0625rem solid var(--outline);background-color:transparent;box-shadow:none}.no-border{border-color:transparent!important}.margin,[class*=-margin]:not(.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin){margin:var(--_margin)!important}.margin,[class*=-margin]{--_margin: 1rem}.no-margin{--_margin: 0}.auto-margin{--_margin: auto}.tiny-margin{--_margin: .25rem}.small-margin{--_margin: .5rem}.large-margin{--_margin: 1.5rem}.left-margin,.horizontal-margin{margin-inline-start:var(--_margin)!important}.right-margin,.horizontal-margin{margin-inline-end:var(--_margin)!important}.top-margin,.vertical-margin{margin-block-start:var(--_margin)!important}.bottom-margin,.vertical-margin{margin-block-end:var(--_margin)!important}.no-opacity{opacity:0!important}.small-opacity{opacity:.25!important}.medium-opacity{opacity:.5!important}.large-opacity{opacity:.75!important}.opacity{opacity:1!important}.padding,[class*=-padding]:not(.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding){padding:var(--_padding)!important}.padding,[class*=-padding]{--_padding: 1rem}.no-padding{--_padding: 0 !important}.tiny-padding{--_padding: .25rem !important}.small-padding{--_padding: .5rem !important}.large-padding{--_padding: 1.5rem !important}.left-padding,.horizontal-padding{padding-inline-start:var(--_padding)!important}.right-padding,.horizontal-padding{padding-inline-end:var(--_padding)!important}.top-padding,.vertical-padding{padding-block-start:var(--_padding)!important}.bottom-padding,.vertical-padding{padding-block-end:var(--_padding)!important}.front{z-index:10!important}.back{z-index:-10!important}.left{inset-inline-start:0}.right{inset-inline-end:0}.top{inset-block-start:0}.bottom{inset-block-end:0}.center{inset-inline-start:50%;transform:translate(-50%)}[dir=rtl] .center{transform:translate(50%)}.middle{inset-block-start:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}[dir=rtl] .middle.center{transform:translate(50%,-50%)}[class*=ripple]:is(:hover,:focus-visible):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;opacity:.1;border-radius:inherit}.ripple{--_duration: .6s}.fast-ripple{--_duration: .2s}.slow-ripple{--_duration: 1.8s}.ripple-js{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.ripple-js>div{position:absolute;border-radius:50%;background:currentColor;opacity:.3;transform:scale(0);animation:to-ripple var(--_duration) linear}.scroll{overflow:auto}.no-scroll{overflow:hidden}.shadow{background-color:#00000050}:is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow){background-color:transparent!important}.left-shadow{background-image:linear-gradient(to right,black,transparent)!important}.right-shadow{background-image:linear-gradient(to left,black,transparent)!important}.bottom-shadow{background-image:linear-gradient(to top,black,transparent)!important}.top-shadow{background-image:linear-gradient(to bottom,black,transparent)!important}[class*=-width]{max-inline-size:100%}.auto-width{inline-size:auto}.small-width{inline-size:12rem!important}.medium-width{inline-size:24rem!important}.large-width{inline-size:36rem!important}.auto-height{block-size:auto}.small-height{block-size:12rem!important}.medium-height{block-size:24rem!important}.large-height{block-size:36rem!important}.wrap{display:block;white-space:normal}.no-wrap:not(menu){display:flex;white-space:nowrap}.tiny-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:.5rem}:is(.space,.small-space):not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:1rem}.medium-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:2rem}.large-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:3rem}.extra-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:4rem}.responsive{inline-size:-webkit-fill-available;inline-size:-moz-available}@media only screen and (max-width:600px){:is(.m,.l):not(.s){display:none!important}}@media only screen and (min-width:601px)and (max-width:992px){:is(.s,.l):not(.m){display:none!important}}@media only screen and (min-width:993px){:is(.m,.s):not(.l){display:none!important}}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:400;display:block;align-items:center;line-height:normal}h1,.h1{font-size:3.5625rem}h2,.h2{font-size:2.8125rem}h3,.h3{font-size:2.25rem}h4,.h4{font-size:2rem}h5,.h5{font-size:1.75rem}h6,.h6{font-size:1.5rem}:is(h1,.h1).small{font-size:3.0625rem}:is(h2,.h2).small{font-size:2.3125rem}:is(h3,.h3).small{font-size:1.75rem}:is(h4,.h4).small{font-size:1.5rem}:is(h5,.h5).small{font-size:1.25rem}:is(h6,.h6).small{font-size:1rem}:is(h1,.h1).large{font-size:4.0625rem}:is(h2,.h2).large{font-size:3.3125rem}:is(h3,.h3).large{font-size:2.75rem}:is(h4,.h4).large{font-size:2.5rem}:is(h5,.h5).large{font-size:2.25rem}:is(h6,.h6).large{font-size:2rem}.link{color:var(--primary)!important}.inverse-link{color:var(--inverse-primary)!important}.truncate{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis;flex:inherit}.truncate>*{white-space:nowrap!important}.small-text{font-size:.75rem}.medium-text{font-size:.875rem}.large-text{font-size:1rem}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.bold{font-weight:700}.overline{text-decoration:line-through}.underline{text-decoration:underline}.italic{font-style:italic}p{margin:.5rem 0}.no-line{line-height:normal}.tiny-line{line-height:1.25rem}.small-line{line-height:1.5rem}.medium-line{line-height:1.75rem}.large-line{line-height:2rem}.extra-line{line-height:2.25rem}pre{border-radius:0;background-color:var(--surface-container);white-space:pre-wrap;padding:1rem;border-inline-start:.25rem solid var(--primary);font-family:inherit}blockquote{border-radius:0;padding:1rem;border-inline-start:.25rem solid var(--primary);font-family:inherit}code{border-radius:0;background-color:var(--surface-container);white-space:pre-wrap;padding:.25rem}pre>code,blockquote>code{padding:0}.scroll>code{white-space:pre}pre:has(>code){direction:ltr;text-align:start}sub{vertical-align:sub}sup{vertical-align:super}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):after,nav:is(.left,.right,.bottom,.top).max>a:after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:after,nav:is(.left,.right,.bottom,.top):not(.max)>a>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a>i:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;inline-size:100%;block-size:100%;background-position:center;background-image:radial-gradient(circle,currentColor 1%,transparent 1%);opacity:0;transition:none;pointer-events:none}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top).max>a:not(.button,.chip):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:not(.button,.chip):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top):not(.max)>a:not(.button,.chip):is(:focus-visible,:hover)>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a:not(.button,.chip):is(:focus-visible,:hover)>i:after{background-size:22500%;opacity:.1;transition:background-size var(--speed2) linear}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a,nav.max>a):not([class*=ripple]):active:after,nav:is(.left,.right,.bottom,.top).max>a:active:after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:active:after,nav:is(.left,.right,.bottom,.top):not(.max)>a:active>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a:active>i:after{background-size:0%;opacity:0;transition:none}.no-wave:after,.no-wave:is(:hover,:active):after{display:none}.zoom,.tiny-zoom{zoom:2}.small-zoom{zoom:3}.medium-zoom{zoom:4}.large-zoom{zoom:5}.extra-zoom{zoom:6}.badge{--_x: 0;--_y: -100%;display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:.6875rem;z-index:2;padding:0 .25rem;min-block-size:1rem;min-inline-size:1rem;background-color:var(--error);color:var(--on-error);line-height:normal;border-radius:1rem;inset:50% auto auto 50%;transform:translate(var(--_x, 50%),var(--_y, -50%));font-family:var(--font)}.badge.top{--_y: -100%}.badge.bottom{--_y: 0}.badge.left{--_x: -100%}.badge.right{--_x: 0}.badge.border{border-color:var(--error);color:var(--error);background-color:var(--surface)}.badge:is(.circle,.square){text-align:center;inline-size:auto;block-size:auto;padding:0 .25rem;border-radius:1rem}.badge.square{border-radius:0}.badge.min>*{display:none}.badge.min{clip-path:circle(18.75% at 50% 50%)}nav:is(.left,.right,.top,.bottom)>a>.badge,nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a>.badge{inset:1rem auto auto 50%}.badge.none{inset:auto!important;transform:none;position:relative;margin:0 .125rem}header,footer{display:grid;align-content:center;border-radius:0;padding:0 1rem}:is(dialog,article)>:is(header,footer){padding-inline:0;top:0;right:0;bottom:0;left:0}header{min-block-size:4rem}footer{min-block-size:5rem}:is(header,footer,menu>*).fixed{position:sticky;top:0;right:0;bottom:0;left:0;z-index:11;background-color:inherit}header.fixed{inset:calc(-1 * var(--_padding, 0)) 0 0 0;margin-block-start:calc(-1 * var(--_padding, 0))}footer.fixed{inset:0 0 calc(-1 * var(--_padding, 0)) 0;margin-block-end:calc(-1 * var(--_padding, 0))}:is(header,footer).fixed.min{margin-inline:auto}dialog>:is(header,footer){background:none}dialog>:is(header,footer).fixed{background-color:inherit}:is(main,header,footer,section).responsive{max-inline-size:min(100vw,75rem);margin:0 auto}:is(main,header,footer,section).responsive.max{max-inline-size:none}:has(>main)>:is(header,footer).fixed{transform:none;box-sizing:content-box;position:sticky;top:0;right:0;bottom:0;left:0;z-index:12}:has(>main)>header{padding-block-start:var(--top, 0)}:has(>main)>footer{padding-block-end:var(--bottom, 0)}nav.top~header,nav.bottom~footer{padding-block:0}nav.top~header.fixed{inset-block:calc(var(--top, 0) + 4.5rem) 0}nav.bottom~footer.fixed{inset-block:0 calc(var(--bottom, 0) + 4.5rem)}:is(nav,.row)>header{background-color:inherit}.button,button{--_padding: 1rem;--_size: 2.5rem;--_round: calc(var(--_size) / 2) !important;box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;block-size:var(--_size);font-size:.875rem;font-weight:500;color:var(--on-primary);padding:0 var(--_padding);background-color:var(--primary);border-radius:1.25rem;transition:transform var(--speed3),border-radius var(--speed2),padding var(--speed3);-webkit-user-select:none;user-select:none;gap:.5rem;line-height:normal}:is(button,.button).small{--_size: 2rem;--_padding: .75rem}:is(button,.button).large{--_size: 3rem;--_padding: 1.25rem}:is(.button,button):is(.extra,.extend){--_size: 3.5rem;font-size:1rem;--_padding: 1.5rem}:is(button,.button):is(.square,.circle){--_padding: 0}:is(button,.button).border{border-color:var(--outline-variant);color:var(--primary)}.extend>span:not([class]){display:none}.extend:is(:hover,.active){inline-size:auto;--_padding: 1.5rem;padding:0 var(--_padding)}.extend:is(:hover,.active)>i+span{display:inherit;margin-inline-start:var(--_padding)}.extend:is(:hover,.active)>:is(img,svg)+span{display:inherit;margin-inline-start:calc(1rem + var(--_padding, 0))}:is(.button,button)[disabled]{opacity:.5;cursor:not-allowed}.button[disabled]{pointer-events:none}:is(.button,button)[disabled]:before,:is(.button,button)[disabled]:after{display:none}:is(.button,button):not(.chip,.extend).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}:is(.button,button):not(.chip,.extend).active{background-color:var(--primary-container);color:var(--on-primary-container)}:is(.button,button):not(.chip,.extend).fill.active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}:is(.button,button):not(.chip,.extend).border.active{background-color:var(--inverse-surface)!important;color:var(--inverse-on-surface)!important;border-color:var(--inverse-surface)!important}:is(.button,button):not(.chip):active,:is(.button,button):not(.chip).active{border-radius:.5rem!important}article{--_padding: 1rem;box-shadow:var(--elevate1);background-color:var(--surface-container-low);color:var(--on-surface);padding:var(--_padding);border-radius:.75rem;display:block;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3)}article.small{block-size:12rem}article.medium{block-size:20rem}article.large{block-size:32rem}article.border{box-shadow:none;border:.0625rem solid var(--outline-variant)}.chip{--_padding: .75rem;--_size: 2rem;--_round: calc(var(--_size) / 2) !important;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;block-size:var(--_size);min-inline-size:var(--_size);font-size:.875rem;font-weight:500;background-color:transparent;border:.0625rem solid var(--outline-variant);color:var(--on-surface-variant);padding:0 var(--_padding);border-radius:.5rem;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3);-webkit-user-select:none;user-select:none;gap:.5rem;line-height:normal;letter-spacing:normal}.chip.medium{--_size: 2.5rem;--_padding: 1rem}.chip.large{--_padding: 1.25rem;--_size: 3rem}.chip.fill{border:none}dialog{--_padding: 1.5rem;--_top: calc(var(--_padding, 0) + var(--top, 0));--_bottom: calc(var(--_padding, 0) + var(--bottom, 0));display:block;visibility:hidden;border:none;opacity:0;position:fixed;box-shadow:var(--elevate2);color:var(--on-surface);background-color:var(--surface-container-high);padding:var(--_padding);z-index:100;inset:10% auto auto 50%;min-inline-size:20rem;max-inline-size:100%;max-block-size:80%;overflow-x:hidden;overflow-y:auto;transition:all var(--speed3),0s background-color;border-radius:1.75rem;transform:translate(-50%,-4rem);outline:none}dialog.small{inline-size:25%;block-size:25%}dialog.medium{inline-size:50%;block-size:50%}dialog.large{inline-size:75%;block-size:75%}dialog:is(.active,[open]){visibility:visible;opacity:1;transform:translate(-50%)}dialog:popover-open{visibility:visible;opacity:1;transform:translate(-50%)}dialog:is(.top,.right,.bottom,.left,.max){--_padding: 1rem}dialog:is(.top,.bottom){opacity:1;block-size:auto;inline-size:100%;min-inline-size:auto;max-block-size:100%}dialog.top{inset:0 auto auto 0;transform:translateY(-100%);border-radius:0 0 1rem 1rem;padding-block-start:var(--_top)}dialog.bottom{inset:auto auto 0 0;transform:translateY(100%);border-radius:1rem 1rem 0 0;padding-block-end:var(--_bottom)}dialog:is(.left,.right){opacity:1;inset:0 auto auto 0;inline-size:auto;block-size:100%;max-block-size:100%;background-color:var(--surface);padding-block:var(--_top) var(--_bottom)}[dir=rtl] dialog.right,dialog.left{inset:0 auto auto 0;border-radius:0 1rem 1rem 0;transform:translate(-100%)}[dir=rtl] dialog.left,dialog.right{inset:0 0 auto auto;border-radius:1rem 0 0 1rem;transform:translate(100%)}dialog.max{inset:0 auto auto 0;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;transform:translateY(4rem);background-color:var(--surface);border-radius:0;padding-block:var(--_top) var(--_bottom)}dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog:popover-open:is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog.small:is(.left,.right){inline-size:20rem}dialog.medium:is(.left,.right){inline-size:32rem}dialog.large:is(.left,.right){inline-size:44rem}dialog.small:is(.top,.bottom){block-size:16rem}dialog.medium:is(.top,.bottom){block-size:24rem}dialog.large:is(.top,.bottom){block-size:32rem}hr,[class*=divider]{all:unset;inline-size:-webkit-fill-available;min-block-size:auto;block-size:.0625rem;background-color:var(--outline-variant);display:block}hr+*,[class*=divider]+*{margin:0!important}hr.medium,.medium-divider{margin:1rem 0!important}hr.large,.large-divider{margin:1.5rem 0!important}hr.small,.small-divider{margin:.5rem 0!important}li:has(>:is(hr,.divider)){padding:0!important;align-self:normal!important;min-inline-size:auto!important;min-block-size:auto!important;inline-size:-webkit-fill-available;background:none!important}:is(hr,.divider).vertical,li:has(>:is(hr,.divider).vertical){padding:0!important;align-self:center!important;min-inline-size:auto;min-block-size:1.5rem;inline-size:.0625rem}summary{list-style-type:none;cursor:pointer}summary::-webkit-details-marker{display:none}summary>*{pointer-events:none;margin:0}li>details>summary+.list{margin:0!important}.field{--_input: 3rem;--_start: 1.2rem;--_middle: calc(var(--_input, 0) / 2);border-radius:.25rem .25rem 0 0;min-block-size:var(--_input);display:flex;flex-direction:column}.field.fill{--_background: var(--surface-variant);background-color:unset!important;color:unset!important}.field.fill>:is(input,select,textarea){background-color:var(--_background);z-index:0}.field.small{--_input: 2.5rem;--_start: 1rem}.field.large{--_input: 3.5rem;--_start: 1.4rem}.field.extra{--_input: 4rem;--_start: 1.6rem}.field.border{border-radius:.25rem}.field[class*=round].small{border-radius:1.25rem}.field[class*=round]{border-radius:1.5rem}.field[class*=round].large{border-radius:1.75rem}.field[class*=round].extra{border-radius:2rem}.field>:is(i,img,svg,progress.circle,a){position:absolute;inset:calc((var(--_input, 0) / 2) - .75rem) auto auto auto;cursor:pointer;z-index:10;inline-size:1.5rem;block-size:1.5rem;margin:auto 0;pointer-events:none}.field>:is(a,.front){pointer-events:all!important}.field>a>:is(i,img,svg,progress.circle,a){inline-size:1.5rem;block-size:1.5rem}.field>:is(i,img,svg,progress.circle,a),[dir=rtl] .field>:is(i,img,svg,progress.circle,a):first-child{inset:calc(var(--_middle, 0) - .75rem) 1rem auto auto}.field>:is(i,img,svg,progress.circle,a):first-child,[dir=rtl] .field>:is(i,img,svg,progress.circle,a){inset:calc(var(--_middle, 0) - .75rem) auto auto 1rem}.field.invalid>i{color:var(--error)}.field>progress.circle{border-width:.1875rem}.field>:is(input,textarea,select){all:unset;position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:inherit;border:.0625rem solid transparent;padding:0 .9375rem;font-family:inherit;font-size:1rem;min-block-size:var(--_input);outline:none;z-index:1;background:none;resize:none;text-align:start;cursor:text}input::-webkit-date-and-time-value{text-align:start}:is(input,select,textarea):is(:-webkit-autofill,:autofill){-webkit-background-clip:text;-webkit-text-fill-color:var(--on-surface)}.field>:is(input,textarea,select):focus{border:.125rem solid transparent;padding-inline:.875rem}.field>textarea:not([rows]){field-sizing:content;max-block-size:12rem}input[type=file],input[type=color],:not(.field)>input:is([type^=date],[type^=time],[type=month],[type=week]),input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;outline:0;z-index:2!important}@media(pointer:fine){.field>input::-webkit-calendar-picker-indicator{z-index:-1!important}}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration,input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{display:none}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field.border>:is(input,textarea,select){border-color:var(--outline)}.field.border>:is(input,textarea,select):focus{border-color:var(--primary)}.field[class*=round]>:is(input,textarea,select){padding-inline:1.4376rem}.field[class*=round]>:is(input,textarea,select):focus{padding-inline:1.375rem}.field.prefix>:is(input,textarea,select){padding-inline-start:2.9375rem}.field.prefix>.slider{margin-inline-start:3.5rem}.field.prefix>:is(input,textarea,select):focus{padding-inline-start:2.875rem}.field.suffix>:is(input,textarea,select){padding-inline-end:2.9375rem}.field.suffix>.slider{margin-inline-end:3.5rem}.field.suffix>:is(input,textarea,select):focus{padding-inline-end:2.875rem}.field:not(.border,[class*=round])>:is(input,textarea,select){border-block-end-color:var(--outline)}.field:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--primary)}.field[class*=round]:not(.border,.fill)>:is(input,textarea,select),.field[class*=round]:not(.border)>:is(input,textarea,select):focus{box-shadow:var(--elevate1)}.field[class*=round]:not(.border,.fill)>:is(input,textarea,select):focus{box-shadow:var(--elevate2)}.field.invalid:not(.border,[class*=round])>:is(input,textarea,select),.field.invalid:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--error)}.field.invalid.border>:is(input,textarea,select),.field.invalid.border>:is(input,textarea,select):focus{border-color:var(--error)}.field:has(>:disabled){opacity:.5;cursor:not-allowed}.field>:disabled{cursor:not-allowed}.field>select{-webkit-user-select:none;user-select:none}@-moz-document url-prefix(){.field>select:focus{background-color:var(--surface)}.field.fill>select:focus{background-color:var(--surface-variant)}.field>select:focus+label{z-index:1}}.field>select>option{background-color:var(--surface)}.field>:is(input,select){padding-block-start:1rem}.field:not(.label)>:is(input,select),.field.border:not(.fill)>:is(input,select){padding-block-start:0}.field>textarea{padding-block-start:var(--_start)!important}.field>textarea:focus{padding-block-start:calc(var(--_start, 0) - .01rem)!important}.field:not(.label)>textarea,.field.border:not(.fill)>textarea{padding-block-start:calc(var(--_start, 0) - .5rem)!important}.field:not(.label)>textarea:focus,.field.border:not(.fill)>textarea:focus{padding-block-start:calc(var(--_start, 0) - .51rem)!important}.field.label>label{--_start: 1rem;position:absolute;inset:-.5rem .9375rem 0 var(--_start);display:flex;block-size:calc(var(--_input, 0) + 1rem);line-height:calc(var(--_input, 0) + 1rem);font-size:1rem;transition:all .2s;gap:.25rem;white-space:nowrap;pointer-events:none}[dir=rtl] .field.label>label{inset:-.5rem calc(var(--_start) - .0625rem) 0 .9375rem}.field.label[class*=round]>label{inset:-.5rem 1.9375rem 0 var(--_start)}[dir=rtl] .field.label[class*=round]>label{inset:-.5rem var(--_start) 0 1.9375rem}.field.label.border.prefix:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1rem}.field.label[class*=round]>label,.field.label.border.prefix[class*=round]:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1.5rem}.field.label.prefix>label{--_start: 3rem}.field.label>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){block-size:2.5rem;line-height:2.5rem;font-size:.75rem}.field.label.border:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){block-size:1rem;line-height:1rem}.field.label.border:not(.fill)>label:after{content:"";display:block;margin:.5rem 0 0;border-block-start:.0625rem solid var(--outline);block-size:1rem;transition:none;flex:auto}.field.label.border:not(.fill)>:focus+label:after{border-block-start:.125rem solid var(--primary)}.field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 1rem) .5rem,calc(100% - 1rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,1rem -2%,1rem .5rem,calc(100% - .75rem) .5rem,calc(100% - .75rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border[class*=round]:not(.fill)>select{clip-path:polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 2rem) .5rem,calc(100% - 2rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border[class*=round]:not(.fill)>select{clip-path:polygon(-2% -2%,2rem -2%,2rem .5rem,calc(100% - 1.25rem) .5rem,calc(100% - 1.25rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label>:focus+label{color:var(--primary)}.field.label.invalid>label,.field.label.invalid>label:after{color:var(--error)!important;border-color:var(--error)!important}.field.label>label>a{block-size:inherit;line-height:inherit;inline-size:1rem}.field.label>label>a>:is(i,img,svg){block-size:1rem;line-height:1rem;inline-size:1rem;font-size:1rem}.field>output{display:inline-block;font-size:.75rem;background:none!important;padding:.25rem 1rem;line-height:1.25rem;align-self:start}.field>output.invalid{color:var(--error)!important}.field[class*=round]>output{padding:.25rem 1.5rem}.field.invalid>output:not(.invalid),.field:not(.invalid)>output.invalid{display:none}.field.invalid>output.invalid~menu,.field:not(.invalid)>output:not(.invalid)~menu{inset:auto auto 1.75rem 0}table td>.field{margin:0}fieldset{border-radius:.25rem;padding:1rem;border:.0625rem solid var(--outline-variant)}fieldset>legend{margin:0 -.25rem;padding:0 .25rem}fieldset>legend+*{margin-block-start:0!important}.grid{--_gap: 1rem;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--_gap);block-size:auto}.grid.no-space{--_gap: 0rem}.grid.medium-space{--_gap: 1.5rem}.grid.large-space{--_gap: 2rem}.grid>*{margin:0}.s1{grid-area:auto/span 1}.s2{grid-area:auto/span 2}.s3{grid-area:auto/span 3}.s4{grid-area:auto/span 4}.s5{grid-area:auto/span 5}.s6{grid-area:auto/span 6}.s7{grid-area:auto/span 7}.s8{grid-area:auto/span 8}.s9{grid-area:auto/span 9}.s10{grid-area:auto/span 10}.s11{grid-area:auto/span 11}.s12{grid-area:auto/span 12}@media only screen and (min-width:601px){.m1{grid-area:auto/span 1}.m2{grid-area:auto/span 2}.m3{grid-area:auto/span 3}.m4{grid-area:auto/span 4}.m5{grid-area:auto/span 5}.m6{grid-area:auto/span 6}.m7{grid-area:auto/span 7}.m8{grid-area:auto/span 8}.m9{grid-area:auto/span 9}.m10{grid-area:auto/span 10}.m11{grid-area:auto/span 11}.m12{grid-area:auto/span 12}}@media only screen and (min-width:993px){.l1{grid-area:auto/span 1}.l2{grid-area:auto/span 2}.l3{grid-area:auto/span 3}.l4{grid-area:auto/span 4}.l5{grid-area:auto/span 5}.l6{grid-area:auto/span 6}.l7{grid-area:auto/span 7}.l8{grid-area:auto/span 8}.l9{grid-area:auto/span 9}.l10{grid-area:auto/span 10}.l11{grid-area:auto/span 11}.l12{grid-area:auto/span 12}}i,:is(.checkbox,.radio,.switch)>span:before,:is(.checkbox,.radio,.switch)>span>i{--_size: 1.5rem;font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(--_size);letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;inline-size:var(--_size);min-inline-size:var(--_size);block-size:var(--_size);min-block-size:var(--_size);box-sizing:content-box;line-height:normal;border-radius:0}i:has(.badge){overflow:unset}i.tiny{--_size: 1rem}.chip>i,i.small{--_size: 1.25rem}i.medium{--_size: 1.5rem}i.large{--_size: 1.75rem}i.extra{--_size: 2rem}i.fill,a.active>i,button.active>i{font-variation-settings:"FILL" 1}i>:is(img,svg){inline-size:100%;block-size:100%;background-size:100%;border-radius:inherit;position:absolute;inset:0 auto auto 0;padding:inherit}i[class*=fa-]{font-size:calc(var(--_size, 0) * .85);line-height:normal;block-size:auto;min-block-size:auto}.absolute{position:absolute}.fixed{position:fixed}:is(.absolute,.fixed).left.right{inline-size:auto}:is(.absolute,.fixed).left.right.small{block-size:20rem}:is(.absolute,.fixed).left.right.medium{block-size:28rem}:is(.absolute,.fixed).left.right.large{block-size:44rem}:is(.absolute,.fixed).top.bottom.small{inline-size:20rem}:is(.absolute,.fixed).top.bottom.medium{inline-size:28rem}:is(.absolute,.fixed).top.bottom.large{inline-size:44rem}.list{display:flex;flex-direction:column;padding:0;margin:0;flex:1}.list>li,.list>li>details>summary,.list>li>a:only-child{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;align-self:normal;text-align:start;justify-content:flex-start;white-space:nowrap;gap:1rem;min-block-size:3.5rem;padding:.5rem 1rem;cursor:pointer;flex:1}.list>li:has(ul,ol,details[open],a:only-child){padding:0}.list>li>.list{padding:0 0 0 1rem}.list>li>*,.list>li>a:only-child>*{margin:0}.list>li>:is(details,.max),.list>li>a:only-child>.max,.list>li>details>summary>.max{flex:1}.list.border>li:not(:last-child):before,.list.border>li>details[open]>summary:before{content:"";position:absolute;background-color:var(--outline-variant);inset:auto 0 0 0;block-size:.0625rem;inline-size:auto}.list.no-space>li,.list.no-space>li>details>summary{min-block-size:2.5rem}.list.medium-space>li,.list.medium-space>li>details>summary{min-block-size:4.5rem}.list.large-space>li,.list.large-space>li>details>summary{min-block-size:5.5rem}.list>li:focus-visible,.list>li>a:only-child:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.25rem}:has(>main){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"left top right" "left header right" "left main right" "left footer right" "left bottom right";min-block-size:100dvh;box-sizing:border-box;background-color:var(--surface)}nav.left{grid-area:left}nav.right{grid-area:right}nav.top{grid-area:top}nav.bottom{grid-area:bottom}header{grid-area:header}footer{grid-area:footer}main{--_padding: .5rem;grid-area:main;padding:var(--_padding);overflow:clip}aside{z-index:1}aside:not(.fixed,.absolute).right{float:right}aside:not(.fixed,.absolute).left{float:left}svg{fill:currentcolor}:is(img,svg,video):is(.small,.medium,.large,.tiny,.extra,.round,.circle,.square,.responsive){--_size: 3rem;object-fit:cover;object-position:center;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3);block-size:var(--_size);inline-size:var(--_size)}:is(img,svg,video).round{--_round: .5rem}:is(img,svg,video).tiny{--_size: 2rem}:is(img,svg,video).small{--_size: 2.5rem}:is(img,svg,video).large{--_size: 3.5rem}:is(img,svg,video).extra{--_size: 4rem}:is(img,svg,video).responsive{--_size: 100%;margin:0 auto}:is(img,svg,video).responsive.tiny{inline-size:100%;block-size:4rem}:is(img,svg,video).responsive.small{inline-size:100%;block-size:8rem}:is(img,svg,video).responsive.medium{inline-size:100%;block-size:12rem}:is(img,svg,video).responsive.large{inline-size:100%;block-size:16rem}:is(img,svg,video).responsive.extra{inline-size:100%;block-size:20rem}:is(img,svg,video).responsive.round{--_round: 2rem}:is(img,svg,video).empty-state{max-inline-size:100%;inline-size:24rem}:is(button,.button,.chip):not(.transparent)>.responsive{border:.25rem solid transparent}:is(button,.button,.chip,.field)>:is(img,svg):not(.responsive),.tabs :is(img,svg):not(.responsive){min-inline-size:1.5rem;max-inline-size:1.5rem;min-block-size:1.5rem;max-block-size:1.5rem}:is(button,.button,.chip):not(.extend)>.responsive:first-child{margin-inline-start:calc(-1 * var(--_padding, 0))}:is(button,.button,.chip):not(.extend)>.responsive:not(:first-child){margin-inline-end:calc(-1 * var(--_padding, 0))}:is(button,.button,.chip,.circle,.square,.extend)>.responsive{--_size: inherit;margin:0 auto}.extend>:is(.responsive,i){margin:0;position:absolute;inset-inline:1rem;z-index:1}.extend>.responsive{inset-inline:0;inline-size:3.5rem}.extend.border>.responsive{inline-size:3.375rem}menu{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--elevate2);background-color:var(--surface-container);z-index:13;inset:auto auto 0 0;inline-size:100%;max-block-size:50vh;max-inline-size:none!important;overflow-x:hidden;overflow-y:auto;font-size:.875rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:start;border-radius:1rem;transform:scale(.8) translateY(120%);transition:all var(--speed2) var(--speed2);justify-content:flex-start;padding:.25rem;display:flex;flex-direction:column;gap:.125rem}menu.no-space{gap:0}menu.small-space{gap:.25rem}menu.medium-space{gap:.375rem}menu.large-space{gap:.5rem}menu.extra-space{gap:.625rem}[dir=rtl] menu{inset:auto 0 0 auto}menu.no-wrap{inline-size:max-content!important;white-space:nowrap!important}menu.active,:not([data-ui]):focus-within>menu,menu>li:hover>menu,menu>li>menu:hover{opacity:1;visibility:visible;transform:scale(1) translateY(100%);transition:all var(--speed2),background-color 0s}menu.top.active,:not([data-ui]):focus-within>menu.top,menu>li:hover>menu.top,menu>li>menu.top:hover{transform:scale(1) translateY(-100%)}menu:is(.min,.max).active,:not([data-ui]):focus-within>menu:is(.min,.max){transform:scale(1)}menu *{white-space:inherit!important}menu>li,menu>li>a:only-child{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;align-self:normal;text-align:start;justify-content:inherit;white-space:nowrap;gap:1rem;padding:.5rem 1rem;min-block-size:2.75rem;flex:1;margin:0!important;cursor:pointer;border-radius:.25rem;transition:border-radius var(--speed2)}menu>li:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}menu>li:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}menu>li:hover{background-color:color-mix(in srgb,currentColor 10%,transparent)}menu>li.active{background-color:var(--tertiary-container);color:var(--on-tertiary-container)}menu>li:is(.active,:active){border-radius:.75rem}menu>li>:is(.max,.field),menu>li>a:only-child>.max,menu>li:has(.field,a:only-child){flex:1;padding:0;margin:0}menu.min{inset:0 0 auto 0;transform:scale(.8)}[dir=rtl] menu.min.right,menu.min.left,menu.top.left{inset:0 0 auto auto}[dir=rtl] menu.min.left,menu.min.right,menu.top,menu.top.right{inset:0 auto auto 0}menu.max{position:fixed;top:0;right:0;bottom:0;left:0;block-size:100%;max-block-size:none;min-block-size:auto;z-index:100;transform:scale(.8);border-radius:0}menu.max>li{flex:none!important}menu.no-wrap:is(.min,.max){min-inline-size:16rem}[dir=rtl] menu.right,[dir=rtl] menu.top.min.right,menu.left,menu.top.min.left{inset:auto 0 0 auto}[dir=rtl] menu.left,[dir=rtl] menu.top.min.left,menu.right,menu.top.min{inset:auto auto 0 0}menu.top{transform:scale(.8) translateY(-120%)}menu:has(menu){--_child: 1;--_type: 0;overflow:unset;white-space:nowrap;inline-size:auto;min-inline-size:12rem;max-block-size:none}menu>li>:is(menu,menu.right),[dir=rtl] menu>li>menu.left{inset:auto auto calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100%}[dir=rtl] menu>li>:is(menu,menu.right),menu>li>menu.left{inset:auto 100% calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto}menu>li>:is(menu.top,menu.top.right),[dir=rtl] menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto auto 100%}[dir=rtl] menu>li>:is(menu.top,menu.top.right),menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto}menu.group{padding:.5rem 0;inline-size:100%;min-inline-size:auto;max-block-size:none;overflow:unset;background:none;box-shadow:none}menu.group>li{box-shadow:none;padding:0;min-block-size:auto}menu.group>li:hover{background:none}menu.group>li>menu,menu.group>li>menu:hover{opacity:1;visibility:visible;position:relative;top:0;right:0;bottom:0;left:0;max-block-size:none;transform:none;transition:none;border-radius:1rem 1rem .5rem .5rem;z-index:auto;flex:1}menu.group>li:last-child>menu{border-radius:.5rem .5rem 1rem 1rem}menu>li:nth-last-child(2){--_child: 2}menu>li:nth-last-child(3){--_child: 3}menu>li:nth-last-child(4){--_child: 4}menu>li:nth-last-child(5){--_child: 5}menu>li:nth-last-child(6){--_child: 6}menu>li:nth-last-child(7){--_child: 7}menu>li:nth-last-child(8){--_child: 8}menu>li:nth-last-child(9){--_child: 9}menu>li:nth-last-child(10){--_child: 10}menu>li:nth-last-child(11){--_child: 11}menu>li:nth-last-of-type(2){--_type: 1}menu>li:nth-last-of-type(3){--_type: 2}menu>li:nth-last-of-type(4){--_type: 3}menu>li:nth-last-of-type(5){--_type: 4}menu>li:nth-last-of-type(6){--_type: 5}menu>li:nth-last-of-type(7){--_type: 6}menu>li:nth-last-of-type(8){--_type: 7}menu>li:nth-last-of-type(9){--_type: 8}menu>li:nth-last-of-type(10){--_type: 9}menu>li:nth-last-of-type(11){--_type: 10}@media(pointer:coarse){:not(menu,[data-ui]):hover>menu{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}:not(menu,[data-ui]):hover>menu.top{transform:scale(1) translateY(-100%)}}nav>:is(ol,ul),nav>:is(ol,ul)>li{all:unset}nav,.row,a.row{display:flex;align-items:center;align-self:normal;text-align:start;justify-content:flex-start;white-space:nowrap;gap:1rem;border-radius:0}a.row,nav.row{min-block-size:3rem;margin:0}:is(nav,.row,.max)>:only-child,:is(nav,.row,.max)>span>*,nav>:is(ol,ul)>li>:only-child,nav>:is(ol,ul)>li>span>*{margin:0}:is(nav,.row)>:not(ul,ol,header,footer){margin:0;white-space:normal;flex:none}:is(nav,.row).min{display:inline-flex}:is(nav,.row,li).no-space{gap:0}:is(nav,.row,li).tiny-space{gap:.5rem}:is(nav,.row,li).medium-space{gap:1.5rem}:is(nav,.row,li).large-space{gap:2rem}:is(nav,.row)>.max,:is(nav,.row)>:is(ol,ul)>.max{flex:1}:is(nav,.row).wrap{display:flex;flex-wrap:wrap}:is(header,footer)>:is(nav,.row){min-block-size:inherit}nav:is(.left,.right,.top,.bottom){--_padding: .5rem;--_top: calc(var(--_padding, 0) + var(--top, 0));--_bottom: calc(var(--_padding, 0) + var(--bottom, 0));position:sticky;top:0;right:0;bottom:0;left:0;border:0;color:var(--on-surface);transform:none;z-index:100;text-align:center;padding:var(--_padding);margin:0}nav:is(.left,.right){justify-content:flex-start;flex-direction:column;background-color:var(--surface);block-size:100dvh;min-inline-size:6rem;padding-block:var(--_top) var(--_bottom)}nav:is(.top,.bottom){position:sticky;top:0;right:0;bottom:0;left:0;padding:.5rem;justify-content:center;flex-direction:row;background-color:var(--surface-container);block-size:auto;min-block-size:4.5rem}nav.top{block-size:calc(var(--top, 0) + 4.5rem);padding-block-start:var(--_top)}nav.bottom{block-size:calc(var(--bottom, 0) + 4.5rem);padding-block-end:var(--_bottom)}nav>header{min-block-size:auto;padding:0;margin:0 0 1rem;align-items:flex-start;gap:1rem;background:none!important}nav:is(.top,.bottom)>header{flex-direction:row;align-items:center;margin:0 1rem 0 0}nav>header>*{margin:0;transition:none}nav.max>header>*{transition:all var(--speed1)}nav>header>.extend:hover{--_padding: 0;inline-size:var(--_size)}nav>header>.extend:hover>span:not([class]){display:none}nav>:is(ol,ul){all:inherit;min-inline-size:auto;margin:0;padding:0;flex:auto}nav.max:is(.left,.right,.top,.bottom){gap:0;inline-size:auto;align-items:flex-start;min-inline-size:12.75rem;padding:var(--_top) 1.25rem var(--_bottom) 1.25rem}nav.max>:is(ol,ul){padding:0}nav.max>header{margin:0 0 1.25rem}nav.max:is(.top,.bottom)>header{margin:0 1.25rem 0 0}nav.max>header>.extend{--_padding: 1.5rem;inline-size:auto;padding:0 var(--_padding)}nav.max>header>.extend>span:not([class]){display:block;margin-inline-start:var(--_padding)}nav.max>header>.extend>:is(img,svg)+span{margin-inline-start:calc(1rem + var(--_padding, 0))}nav.max:is(.top,.bottom){padding:0 .5rem;align-items:center;min-inline-size:auto;max-inline-size:none}nav:is(.left,.right,.top,.bottom)>a:not(.button,.chip),nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){display:flex;flex-direction:column;gap:.25rem;line-height:normal;inline-size:3.5rem;font-size:.8rem}nav:not(.max):is(.left,.right,.top,.bottom)>a:not(.button,.chip)>i,nav:not(.max):is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip)>i{padding:.25rem 1rem;border-radius:2rem;margin:0 auto}nav.max:is(.left,.right,.top,.bottom)>a:not(.button,.chip),nav.max:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){flex-direction:row;gap:.5rem;inline-size:auto;block-size:3.5rem;padding:0 1rem;border-radius:2rem;font-size:inherit}nav:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip){transition:padding var(--speed1) linear}nav.max:is(.top,.bottom)>a:not(.button,.chip),nav.max:is(.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){gap:.25rem;block-size:2.5rem;font-size:.8rem}nav.max:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),nav.max:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip),nav:is(.left,.right,.top,.bottom):not(.max)>a.active:not(.button,.chip)>i,nav:is(.left,.right,.top,.bottom):not(.max)>:is(ol,ul)>li>a.active:not(.button,.chip)>i{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.vertical>:is(ol,ul){align-items:normal}:is(nav,.row):is(.left-align,.top-align,.vertical){justify-content:flex-start}:is(nav,.row):is(.right-align,.bottom-align){justify-content:flex-end}:is(nav,.row):is(.center-align,.middle-align){justify-content:center}:is(nav,.row):is(.left-align,.top-align,.vertical).vertical{align-items:flex-start}:is(nav,.row):is(.right-align,.bottom-align).vertical{align-items:flex-end}:is(nav,.row):is(.center-align,.middle-align).vertical{align-items:center}nav:not(.left,.right)>.space{inline-size:.5rem}nav:not(.left,.right)>.medium-space{inline-size:1rem}nav:not(.left,.right)>.large-space{inline-size:1.5rem}nav.tabbed{background-color:var(--surface-container);border-radius:4rem!important;gap:0rem;block-size:4rem}nav.tabbed.small{block-size:3rem}nav.tabbed.large{block-size:5rem}nav.tabbed>a{border-radius:inherit;block-size:inherit;display:inline-flex;align-items:center;padding-inline:1rem;gap:.5rem;font-size:1rem;flex:1}nav.tabbed>a.active{background-color:var(--primary-container)}nav.toolbar{display:inline-flex;justify-content:space-around;border-radius:2rem;background-color:var(--surface-container);color:var(--on-surface);padding:0 1rem;gap:.5rem;min-block-size:4rem;min-inline-size:4rem}nav.toolbar>a{display:inline-flex;gap:.5rem;min-inline-size:2.5rem;min-block-size:2.5rem;border-radius:1.75rem}nav.toolbar>a:has(>:not(i)){padding:0 1rem}nav.toolbar>a.active{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.toolbar.fill{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}nav.toolbar.fill>a.active{background-color:var(--surface-container)!important;color:var(--on-surface)!important}nav.toolbar.vertical{flex-direction:column!important;min-inline-size:4rem;padding:1rem 0;align-self:center;align-items:center!important}nav.toolbar.vertical>a{inline-size:2.5rem;block-size:2.5rem}nav.toolbar.vertical>a>:is(div,span):not(.badge,.tooltip){display:none}nav.toolbar.max{border-radius:0;display:flex}nav.group{background:none!important}nav.group:is(.connected,.split){gap:.125rem}nav.group:not(.split)>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}nav.group:not(.split)>:is(.button,button).active{background-color:var(--primary);color:var(--on-primary)}nav.group.connected>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}nav.group.connected>:is(.button,button).active{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.group:is(.connected,.split)>:is(.button,button).active,nav.split>:is(.button,button):active{border-radius:2rem!important}:not(nav)>:is(ul,ol){all:revert}:is(.scroll,.no-scroll,.no-space,.tabs,.tabbed)>:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.125rem}nav.split>:is(.button,button):not(.chip,.fill,.border){background-color:var(--primary);color:var(--on-primary)}@media only screen and (max-width:600px){nav.top,nav.bottom{justify-content:space-around}}.overlay,dialog::backdrop{display:block!important;opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;color:var(--on-surface);background-color:var(--overlay);z-index:100;transition:all var(--speed3),0s background-color;border-radius:0}.overlay.active{opacity:1;visibility:visible}dialog:popover-open::backdrop{opacity:1;visibility:visible}.overlay+dialog::backdrop,.snackbar::backdrop{display:none}[popover]{border:0}.page{--_transform: translate(0, 0);opacity:0;position:absolute;display:none}.page.active{opacity:1;position:relative;display:block;animation:var(--speed4) to-page ease}.page.active.top{--_transform: translate(0, -4rem)}.page.active.bottom{--_transform: translate(0, 4rem)}.page.active.left{--_transform: translate(-4rem, 0)}.page.active.right{--_transform: translate(4rem, 0)}progress{--_size: .25rem;position:relative;inline-size:100%;block-size:var(--_size);color:var(--primary);background:var(--image);border-radius:1rem;flex:none;border:none;overflow:hidden;writing-mode:horizontal-tb;direction:ltr;-webkit-appearance:none;-moz-appearance:none;appearance:none}progress.small{--_size: .25rem}progress.medium{--_size: .35rem}progress.large{--_size: .45rem}progress.indeterminate{--_value: 100;animation:3.2s to-indeterminate-progress ease infinite}progress:not(.circle,[value]):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;clip-path:none;background:currentcolor;animation:3.2s to-linear-progress ease infinite}progress:not(.circle,[value])::-moz-progress-bar{animation:3.2s to-linear-progress ease infinite}progress:not(.circle,[value])::-webkit-progress-value{animation:3.2s to-linear-progress ease infinite}progress::-webkit-progress-bar{background:none}progress::-webkit-progress-value{background:currentColor}progress::-moz-progress-bar{background:currentColor}progress.wavy{block-size:calc(var(--_size, 0) * 2);background:none;background-image:var(--image);background-repeat:repeat-x;background-position:0 50%;background-size:auto calc(var(--_size, 0) / 2)}progress.wavy::-webkit-progress-value,progress.wavy:not(.circle,[value]):after{-webkit-mask-image:url(wavy.svg);mask-image:url(wavy.svg);-webkit-mask-position:0 50%;mask-position:0 50%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:auto 100%;mask-size:auto 100%}progress.wavy::-moz-progress-bar{-webkit-mask-image:url(wavy.svg);mask-image:url(wavy.svg);-webkit-mask-position:0 50%;mask-position:0 50%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:auto 100%;mask-size:auto 100%}progress.circle{--_value: attr(value type(<number>), 50);inline-size:2.5rem;block-size:2.5rem;background:conic-gradient(currentColor calc(var(--_value, 0) * 1%),var(--active) 0%);border-radius:50%;-webkit-mask-image:radial-gradient(circle at center,transparent 57%,currentColor 60%);mask-image:radial-gradient(circle at center,transparent 57%,currentColor 60%)}progress.circle::-webkit-progress-value{background:none}progress.circle::-moz-progress-bar{background:none}progress.circle.wavy{background:conic-gradient(currentColor calc(var(--_value, 0) * 1%),var(--active) 0);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(wavy-circle.svg);mask-image:url(wavy-circle.svg)}progress.circle.small{inline-size:1.5rem;block-size:1.5rem}progress.circle.large{inline-size:3.5rem;block-size:3.5rem}progress.circle:not([value]),progress.circle.indeterminate{--_value: 50;animation:to-rotate 1s infinite linear}:is(nav,.row,.field)>progress:not(.circle,.small,.medium,.large){flex:auto}progress.max{display:unset;position:absolute;inline-size:100%!important;block-size:100%!important;color:currentColor;background:none;top:0;right:0;bottom:0;left:0;border-radius:inherit;animation:none;writing-mode:horizontal-tb;opacity:.33}progress.max[class*=-text]{opacity:1}progress.max+*{margin-block-start:0}:is(.button,button,.chip)>progress.circle{color:inherit}.shape{display:flex;align-items:center;justify-content:center;color:var(--on-primary);background-color:var(--primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;border-radius:0;block-size:3.5rem;inline-size:3.5rem;margin:0!important;padding:0!important;border:0!important}.transparent>.shape>i{filter:invert(1)}.shape.tiny-space{-webkit-mask-size:90%;mask-size:90%}.shape.space,.shape.small-space{-webkit-mask-size:80%;mask-size:80%}.shape.medium-space{-webkit-mask-size:70%;mask-size:70%}.shape.large-space{-webkit-mask-size:60%;mask-size:60%}.shape.extra-space{-webkit-mask-size:50%;mask-size:50%}.shape.tiny{block-size:2.5rem;inline-size:2.5rem}.shape.medium{block-size:4.5rem;inline-size:4.5rem}.shape.large{block-size:5.5rem;inline-size:5.5rem}.shape.extra{block-size:6.5rem;inline-size:6.5rem}.shape.max,.shape>.responsive,.shape>.responsive>.responsive{position:absolute;top:0;right:0;bottom:0;left:0;block-size:100%;inline-size:100%;margin:0!important;padding:0!important;border:0!important}.shape>.responsive{background:inherit;color:inherit}.shape.rotate{animation:linear to-rotate infinite 12s}.shape.rotate>*{animation:linear to-rotate infinite 12s reverse}.shape.fast-rotate{animation:linear to-rotate infinite 6s}.shape.fast-rotate>*{animation:linear to-rotate infinite 6s reverse}.shape.slow-rotate{animation:linear to-rotate infinite 24s}.shape.slow-rotate>*{animation:linear to-rotate infinite 24s reverse}:is(button,.button,.chip):has(>.shape)>.responsive{border:none}.shape.arch{-webkit-mask-image:url(arch.svg);mask-image:url(arch.svg)}.shape.arrow{-webkit-mask-image:url(arrow.svg);mask-image:url(arrow.svg)}.shape.boom{-webkit-mask-image:url(boom.svg);mask-image:url(boom.svg)}.shape.bun{-webkit-mask-image:url(bun.svg);mask-image:url(bun.svg)}.shape.burst{-webkit-mask-image:url(burst.svg);mask-image:url(burst.svg)}.shape.circle{-webkit-mask-image:url(circle.svg);mask-image:url(circle.svg)}.shape.clamshell{-webkit-mask-image:url(clamshell.svg);mask-image:url(clamshell.svg)}.shape.diamond{-webkit-mask-image:url(diamond.svg);mask-image:url(diamond.svg)}.shape.fan{-webkit-mask-image:url(fan.svg);mask-image:url(fan.svg)}.shape.flower{-webkit-mask-image:url(flower.svg);mask-image:url(flower.svg)}.shape.gem{-webkit-mask-image:url(gem.svg);mask-image:url(gem.svg)}.shape.ghost-ish{-webkit-mask-image:url(ghost-ish.svg);mask-image:url(ghost-ish.svg)}.shape.heart{-webkit-mask-image:url(heart.svg);mask-image:url(heart.svg)}.shape.leaf-clover4{-webkit-mask-image:url(leaf-clover4.svg);mask-image:url(leaf-clover4.svg)}.shape.leaft-clover8{-webkit-mask-image:url(leaf-clover8.svg);mask-image:url(leaf-clover8.svg)}.shape.loading-indicator{-webkit-mask-image:url(loading-indicator.svg);mask-image:url(loading-indicator.svg)}.shape.oval{-webkit-mask-image:url(oval.svg);mask-image:url(oval.svg)}.shape.pentagon{-webkit-mask-image:url(pentagon.svg);mask-image:url(pentagon.svg)}.shape.pill{-webkit-mask-image:url(pill.svg);mask-image:url(pill.svg)}.shape.pixel-circle{-webkit-mask-image:url(pixel-circle.svg);mask-image:url(pixel-circle.svg)}.shape.pixel-triangle{-webkit-mask-image:url(pixel-triangle.svg);mask-image:url(pixel-triangle.svg)}.shape.puffy{-webkit-mask-image:url(puffy.svg);mask-image:url(puffy.svg)}.shape.puffy-diamond{-webkit-mask-image:url(puffy-diamond.svg);mask-image:url(puffy-diamond.svg)}.shape.semicircle{-webkit-mask-image:url(semicircle.svg);mask-image:url(semicircle.svg)}.shape.sided-cookie4{-webkit-mask-image:url(sided-cookie4.svg);mask-image:url(sided-cookie4.svg)}.shape.sided-cookie6{-webkit-mask-image:url(sided-cookie6.svg);mask-image:url(sided-cookie6.svg)}.shape.sided-cookie7{-webkit-mask-image:url(sided-cookie7.svg);mask-image:url(sided-cookie7.svg)}.shape.sided-cookie9{-webkit-mask-image:url(sided-cookie9.svg);mask-image:url(sided-cookie9.svg)}.shape.sided-cookie12{-webkit-mask-image:url(sided-cookie12.svg);mask-image:url(sided-cookie12.svg)}.shape.slanted{-webkit-mask-image:url(slanted.svg);mask-image:url(slanted.svg)}.shape.soft-boom{-webkit-mask-image:url(soft-boom.svg);mask-image:url(soft-boom.svg)}.shape.soft-burst{-webkit-mask-image:url(soft-burst.svg);mask-image:url(soft-burst.svg)}.shape.square{-webkit-mask-image:url(square.svg);mask-image:url(square.svg)}.shape.sunny{-webkit-mask-image:url(sunny.svg);mask-image:url(sunny.svg)}.shape.triangle{-webkit-mask-image:url(triangle.svg);mask-image:url(triangle.svg)}.shape.very-sunny{-webkit-mask-image:url(very-sunny.svg);mask-image:url(very-sunny.svg)}.checkbox,.radio,.switch{--_size: 1.5rem;inline-size:auto;block-size:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}.switch{direction:ltr}:is(.checkbox,.radio,.switch).small{--_size: 1rem}:is(.checkbox,.radio,.switch).large{--_size: 2rem}:is(.checkbox,.radio,.switch).extra{--_size: 2.5rem}:is(.checkbox,.radio)>input{inline-size:var(--_size);block-size:var(--_size);opacity:0}.switch>input{inline-size:3.25rem;block-size:2rem;opacity:0}:is(.checkbox,.radio,.switch)>span{display:inline-flex;align-items:center;color:var(--on-surface);font-size:.875rem}:is(.checkbox,.radio)>span:not(:empty){padding-inline-start:.25rem}:is(.checkbox,.radio,.switch)>span:before,:is(.checkbox,.radio,.switch)>span>i,:is(.checkbox,.radio)>span:after{--_size: inherit;content:"";inline-size:var(--_size);block-size:var(--_size);box-sizing:border-box;margin:0 auto;outline:none;color:var(--primary);position:absolute;inset:auto auto auto calc(var(--_size, 0) * -1);border-radius:50%;-webkit-user-select:none;user-select:none;z-index:1}[dir=rtl] :is(.checkbox,.radio)>span:before,[dir=rtl] :is(.checkbox,.radio)>span>i,[dir=rtl] :is(.checkbox,.radio)>span:after{--_size: inherit;inset:auto calc(var(--_size, 0) * -1) auto auto}.switch>span:before,.switch.icon>span>i{position:absolute;inset:50% auto auto 0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--speed2);font-size:calc(var(--_size, 0) - .5rem);-webkit-user-select:none;user-select:none;min-inline-size:var(--_size);min-block-size:var(--_size);content:"";color:var(--surface-variant);background-color:var(--outline)}.switch>span:before,.switch.icon>span>i{transform:translate(-3rem,-50%) scale(.6)}.switch.icon>span>i{transform:translate(-3rem,-50%) scale(1)}.checkbox>span:before{content:"check_box_outline_blank"}.checkbox>input:checked+span:before{content:"check_box";font-variation-settings:"FILL" 1}.checkbox>input:indeterminate+span:before{content:"indeterminate_check_box"}.radio>span:before{content:"radio_button_unchecked"}.radio>input:checked+span:before{content:"radio_button_checked"}:is(.radio,.checkbox,.switch).icon>span:before{content:""!important;font-variation-settings:unset!important}:is(.checkbox,.radio)>span:after{transition:all var(--speed1);background-color:currentColor;box-shadow:0 0 0 0 currentColor;opacity:0}:is(.checkbox,.radio):is(:hover)>input:not(:disabled)+span:after,:is(.checkbox,.radio)>input:not(:disabled):is(:focus)+span:after{box-shadow:0 0 0 .5rem currentColor;opacity:.1}.switch>input:not(:disabled):is(:focus,:hover)+span:before,.switch.icon>input:not(:disabled):is(:focus,:hover)+span>i{box-shadow:0 0 0 .5rem var(--active)}:is(.checkbox,.radio)>input:checked+span:before,:is(.checkbox,.radio).icon>input:checked+span>i{color:var(--primary)}.icon>input:checked+span>i:first-child,.icon>span>i:last-child{opacity:0}.icon>input:checked+span>i:last-child,.icon>span>i:first-child{opacity:1}.switch>input:checked+span:after{border:none;background-color:var(--primary)}.switch>input:checked+span:before,.switch.icon>input:checked+span>i{content:"check";color:var(--primary);background-color:var(--on-primary);transform:translate(-1.75rem,-50%) scale(1)}.switch>input:active:not(:disabled)+span:before,.switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(1.2)}[dir=rtl] .switch>input:active:not(:disabled)+span:before,[dir=rtl] .switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(-1.2)}.switch>input:active:checked:not(:disabled)+span:before,.switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(1.2)}[dir=rtl] .switch>input:active:checked:not(:disabled)+span:before,[dir=rtl] .switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(-1.2)}:is(.checkbox,.radio,.switch)>input:disabled+span{opacity:.5;cursor:not-allowed}.switch>span:after{content:"";position:absolute;inset:50% auto auto 0;background-color:var(--active);border:.125rem solid var(--outline);box-sizing:border-box;inline-size:3.25rem;block-size:2rem;border-radius:2rem;transform:translate(-3.25rem,-50%)}.field>:is(nav,.row){flex-grow:1;padding:0 1rem}.field.round>:is(nav,.row){flex-grow:1;padding:0 1.5rem}[dir=rtl] .switch{transform:scale(-1)}[dir=rtl] .switch>span:before,[dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-.6)}[dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-1)}[dir=rtl] .switch>input:checked+span:before,[dir=rtl] .switch.icon>input:checked+span>i{transform:translate(-1.75rem,-50%) scale(-1)}.switch>:focus-visible+span:after{outline:.125rem solid var(--primary);outline-offset:.25rem}:is(.checkbox,.radio)>:focus-visible+span:before{outline:.125rem solid var(--primary);outline-offset:.375rem}.slider{--_start: 0%;--_end: 0%;--_value1: "";--_value2: "";--_track: 1rem;--_thumb: max(2.5rem, calc(var(--_track, 0) + .5rem));display:flex;align-items:center!important;inline-size:auto;block-size:var(--_thumb);flex:none;direction:ltr;margin:0 1.25rem;color:var(--primary)}[dir=rtl] .slider{transform:scaleX(-1)}.slider.vertical{flex-direction:row!important;margin:.5rem auto!important;padding:50% 0;transform:rotate(-90deg);inline-size:100%}.slider.tiny{--_track: 1rem}.slider.small{--_track: 1.5rem}.slider.medium{--_track: 2.5rem}.slider.large{--_track: 3.5rem}.slider.extra{--_track: 6rem}.slider>input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:none;inline-size:100%;block-size:var(--_track);background:none;z-index:1;padding:0;margin:0;transform:rotate(0);touch-action:none}.slider>input:only-of-type{pointer-events:all}.slider>input~input{position:absolute}.slider>input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:var(--_thumb);inline-size:.25rem;border-radius:.25rem;background:currentColor;cursor:grab;margin:0;z-index:1}.slider>input::-webkit-slider-thumb:active{cursor:grabbing}.slider>input::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:2.75rem;inline-size:.25rem;border-radius:.25rem;background:var(--primary);cursor:grab;margin:0}.slider>input::-moz-range-thumb:active{cursor:grabbing}.slider>input:not(:disabled):is(:focus)::-webkit-slider-thumb{transform:scaleX(.6)}.slider>input:not(:disabled):is(:focus)::-moz-range-thumb{transform:scaleX(.6)}.slider>input:disabled{cursor:not-allowed;opacity:1}.slider>input:disabled::-webkit-slider-thumb{background:var(--outline);cursor:not-allowed}.slider>input:disabled::-moz-range-thumb{background:var(--outline);cursor:not-allowed}.slider>input:disabled~span:not([class]){background:var(--outline)}.slider>span:not([class]){position:absolute;block-size:var(--_track);border-radius:1rem 0 0 1rem;background:currentColor;color:currentColor;z-index:0;inset:calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + .5rem) auto var(--_start)}.slider>input[type=range]+input[type=range]~span:not([class]){border-radius:0;inset:calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + .5rem) auto calc(var(--_start) + .5rem)}.field>.slider{inline-size:100%}.slider:before{content:"";position:absolute;inline-size:100%;block-size:var(--_track);border-radius:1rem;background:var(--active);clip-path:polygon(calc(var(--_start, 0) - .5rem) 0,0 0,0 100%,calc(var(--_start, 0) - .5rem) 100%,calc(var(--_start, 0) - .5rem) 0,calc(100% - var(--_end, 0) + .5rem) 0,100% 0,100% 100%,calc(100% - var(--_end, 0) + .5rem) 100%,calc(100% - var(--_end, 0) + .5rem) 0)}.slider:has(>[disabled]):before{background:var(--active)}.slider:has([disabled]){opacity:.62}.slider>span>i{position:absolute;block-size:auto;inset:0 auto 0 .5rem;color:var(--inverse-primary);z-index:1}.slider:not(.medium,.large,.extra)>span>i{display:none}.slider.vertical>i{transform:rotate(90deg)}.slider>.tooltip{visibility:hidden!important;opacity:0!important;inset:0 auto auto calc(100% - var(--_end, 0));border-radius:2rem;transition:top var(--speed2) ease,opacity var(--speed2) ease;transform:translate(-50%,-25%)!important;padding:.75rem 1rem}.slider>.tooltip.bottom{inset:auto auto 0 calc(100% - var(--_end, 0));transition:bottom var(--speed2) ease,opacity var(--speed2) ease;transform:translate(-50%,25%)!important}[dir=rtl] .slider>.tooltip{transform:translate(-50%,-25%) scaleX(-1)!important}[dir=rtl] .slider>.tooltip.bottom{transform:translate(-50%,25%) scaleX(-1)!important}.slider>.tooltip+.tooltip{inset:.25rem calc(100% - var(--_start, 0)) auto auto;transform:translate(50%,-25%)!important}.slider>.tooltip+.tooltip.bottom{inset:auto calc(100% - var(--_start, 0)) -.25rem auto;transform:translate(50%,25%)!important}[dir=rtl] .slider>.tooltip+.tooltip{transform:translate(50%,-25%) scaleX(-1)!important}[dir=rtl] .slider>.tooltip+.tooltip.bottom{transform:translate(50%,25%) scaleX(-1)!important}.slider>.tooltip:before{content:var(--_value1)}.slider>.tooltip+.tooltip:before{content:var(--_value2)}.slider>:focus~.tooltip{inset-block:-1rem auto;opacity:1!important;visibility:visible!important}.slider>:focus~.tooltip.bottom{inset-block:auto -1rem}.slider.vertical>.tooltip{inset-block:auto;block-size:2.5rem;inline-size:2.5rem;margin-block:calc(-1 * var(--_thumb, 0)) 0!important;transform:rotate(90deg) translate(-75%,50%)!important}.slider.vertical>.tooltip.bottom{inset-block:auto;margin-block:0 calc(-1 * var(--_thumb, 0))!important;transform:rotate(90deg) translate(75%,50%)!important}.slider.vertical>.tooltip+.tooltip{transform:rotate(90deg) translate(-75%,-50%)!important}.slider.vertical>.tooltip+.tooltip.bottom{transform:rotate(90deg) translate(75%,-50%)!important}:is(nav,.row,.field)>.slider:not(.circle,.small,.medium,.large){flex:auto}.slider.max,.slider.max.vertical,.slider.max>input,.slider.max.vertical>input{all:unset;margin:0!important;position:absolute;color:var(--primary);top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;z-index:2;cursor:grab;inline-size:100%;block-size:100%}.slider.max:before{display:none}.slider.max.vertical>input{writing-mode:vertical-lr;transform:rotate(-180deg)}.slider.max>input::-webkit-slider-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.slider.max>input::-moz-range-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.slider.max>span:not([class]){block-size:auto!important;inset:0 var(--_end) 0 var(--_start);background:currentcolor;color:inherit;border-radius:0}.slider.max.vertical>span:not([class]){inset:var(--_end) 0 var(--_start) 0}.slider>input:focus-visible::-webkit-slider-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.slider>input:focus-visible::-moz-range-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.slider.max>input:focus-visible{outline:.1875rem solid var(--primary);outline-offset:-.125rem}@media(pointer:coarse){.slider>:hover~.tooltip{inset-block:-1rem auto!important;opacity:1!important;visibility:visible!important}.slider>:hover~.tooltip.bottom{inset-block:auto -1rem!important}}.snackbar{position:fixed;inset:auto auto 6rem 50%;inline-size:80%;block-size:auto;z-index:200;visibility:hidden;display:flex;box-shadow:var(--elevate2);color:var(--inverse-on-surface);background-color:var(--inverse-surface);padding:1rem;cursor:pointer;text-align:start;align-items:center;border-radius:.25rem;gap:.5rem;transition:all var(--speed2);transform:translate(-50%,1rem);opacity:0}.snackbar.top{inset:6rem auto auto 50%}.snackbar:is(.active){visibility:visible;transform:translate(-50%);opacity:1}.snackbar:popover-open{visibility:visible;transform:translate(-50%);opacity:1}.snackbar>.max{flex:auto}@media only screen and (min-width:993px){.snackbar{inline-size:40%}}table{inline-size:100%;border-spacing:0;font-size:.875rem;text-align:start}.scroll>table,table :is(thead,tbody,tfoot,tr,th,td){background-color:inherit;color:inherit}:is(th,td){inline-size:auto;text-align:inherit;padding:.5rem;border-radius:0}:is(th,td)>*{vertical-align:middle}table.border>tbody>tr:not(:last-child)>td,thead>tr>th{border-block-end:.0625rem solid var(--outline)}tfoot>tr>th{border-block-start:.0625rem solid var(--outline)}table.stripes>tbody>tr:nth-child(odd){background-color:var(--active)}table.no-space :is(th,td){padding:0}table.medium-space :is(th,td){padding:.75rem}table.large-space :is(th,td){padding:1rem}table>.fixed,th.fixed{position:sticky;z-index:1;inset-block-start:0}tfoot.fixed,tfoot th.fixed{inset-block-end:0}:is(td,th).min{inline-size:.1%;white-space:nowrap}.tabs{display:flex;white-space:nowrap;border-block-end:.0625rem solid var(--surface-variant);border-radius:0}.tabs:not(.left-align,.right-align,.center-align){justify-content:space-around}.tabs>a{display:flex;font-size:.875rem;font-weight:500;color:var(--on-surface-variant);padding:.5rem 1rem;text-align:center;min-block-size:3rem;inline-size:100%;gap:.25rem}.tabs.small>a{min-block-size:2rem}.tabs.large>a{min-block-size:4rem}.tabs>a.active,.tabs>a.active>i{color:var(--primary)}.tabs>a.active:before{content:"";position:absolute;inset:auto 0 0 0;block-size:.125rem;background-color:var(--primary)}.tabs.min>a.active:before{margin:0 auto;max-inline-size:min(100%,4rem)}.tabs:is(.left-align,.center-align,.right-align)>a{inline-size:auto}.tooltip{--_space: -.5rem;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--inverse-surface);color:var(--inverse-on-surface);font-size:.75rem;text-align:center;border-radius:.25rem;padding:.5rem;position:absolute;z-index:200;inset:0 auto auto 50%;inline-size:auto;white-space:nowrap;font-weight:500;opacity:0;transition:all var(--speed2);line-height:normal;transform:translate(-50%,-100%) scale(.9)}.tooltip:not(.max):hover{visibility:hidden;opacity:0}.tooltip.left{inset:50% auto auto 0;transform:translate(-100%,-50%) scale(.9)}.tooltip.right{inset:50% 0 auto auto;transform:translate(100%,-50%) scale(.9)}.tooltip.bottom{inset:auto auto 0 50%;transform:translate(-50%,100%) scale(.9)}.tooltip.small{inline-size:8rem;white-space:normal}.tooltip.medium{inline-size:12rem;white-space:normal}.tooltip.large{inline-size:16rem;white-space:normal}:hover>.tooltip{visibility:visible;opacity:1;transform:translate(-50%,-100%) scale(1)}:hover>.tooltip.left{transform:translate(-100%,-50%) scale(1)}:hover>.tooltip.right{transform:translate(100%,-50%) scale(1)}:hover>.tooltip.bottom{transform:translate(-50%,100%) scale(1)}.tooltip.no-space{--_space: 0}.tooltip.medium-space{--_space: -1rem}.tooltip.large-space{--_space: -1.5rem}.tooltip:not(.left,.right,.bottom){margin-block-start:var(--_space)!important}.tooltip.left,.tooltip.right{margin-inline:var(--_space)!important}.tooltip.bottom{margin-block-end:var(--_space)!important}menu:active~.tooltip,:is(button,.button):focus>menu~.tooltip,.field>:focus~menu~.tooltip{visibility:hidden}.slider>.tooltip{--_space: -1.25rem}.slider.vertical>.tooltip{--_space: -.75rem}.slider.vertical>.tooltip:is(.left,.right){--_space: -.5rem}.tooltip.max{display:block;font-size:inherit;white-space:normal;text-align:start;inline-size:20rem;border-radius:.5rem;padding:1rem;box-shadow:var(--elevate2)}.transparent{background-color:transparent!important;box-shadow:none!important;color:inherit!important}.primary{background-color:var(--primary)!important;color:var(--on-primary)!important}.primary-text{color:var(--primary)!important}.primary-border{border-color:var(--primary)!important}.primary-container{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.secondary{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.secondary-text{color:var(--secondary)!important}.secondary-border{border-color:var(--secondary)!important}.secondary-container{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.tertiary-text{color:var(--tertiary)!important}.tertiary-border{border-color:var(--tertiary)!important}.tertiary-container{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.error{background-color:var(--error)!important;color:var(--on-error)!important}.error-text{color:var(--error)!important}.error-border{border-color:var(--error)!important}.error-container{background-color:var(--error-container)!important;color:var(--on-error-container)!important}.background{background-color:var(--background)!important;color:var(--on-background)!important}.surface,.surface-dim,.surface-bright,.surface-container-lowest,.surface-container-low,.surface-container,.surface-container-high,.surface-container-highest{background-color:var(--surface)!important;color:var(--on-surface)!important}.surface-variant{background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.inverse-surface{background-color:var(--inverse-surface);color:var(--inverse-on-surface)}.inverse-primary{background-color:var(--inverse-primary);color:var(--primary)}.inverse-primary-text{color:var(--inverse-primary)!important}.inverse-primary-border{border-color:var(--inverse-primary)!important}.surface-dim{background-color:var(--surface-dim)!important}.surface-bright{background-color:var(--surface-bright)!important}.surface-container-lowest{background-color:var(--surface-container-lowest)!important}.surface-container{background-color:var(--surface-container)!important}.surface-container-high{background-color:var(--surface-container-high)!important}.surface-container-highest{background-color:var(--surface-container-highest)!important}.surface-container-low{background-color:var(--surface-container-low)!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.fill:not(i){background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}nav.primary-container>button,:is(nav,menu).primary>:is(button,a,li).active{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}nav.primary>button,:is(nav,menu).primary-container>:is(button,a,li).active{background-color:var(--primary)!important;color:var(--on-primary)!important}nav.secondary-container>button,:is(nav,menu).secondary>:is(button,a,li).active{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}nav.secondary>button,:is(nav,menu).secondary-container>:is(button,a,li).active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}nav.tertiary-container>button,:is(nav,menu).tertiary>:is(button,a,li).active{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}nav.tertiary>button,:is(nav,menu).tertiary-container>:is(button,a,li).active{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.red,.red6{background-color:#f44336!important}.red-border{border-color:#f44336!important}.red-text{color:#f44336!important}.red1{background-color:#ffebee!important}.red2{background-color:#ffcdd2!important}.red3{background-color:#ef9a9a!important}.red4{background-color:#e57373!important}.red5{background-color:#ef5350!important}.red7{background-color:#e53935!important}.red8{background-color:#d32f2f!important}.red9{background-color:#c62828!important}.red10{background-color:#b71c1c!important}.pink,.pink6{background-color:#e91e63!important}.pink-border{border-color:#e91e63!important}.pink-text{color:#e91e63!important}.pink1{background-color:#fce4ec!important}.pink2{background-color:#f8bbd0!important}.pink3{background-color:#f48fb1!important}.pink4{background-color:#f06292!important}.pink5{background-color:#ec407a!important}.pink7{background-color:#d81b60!important}.pink8{background-color:#c2185b!important}.pink9{background-color:#ad1457!important}.pink10{background-color:#880e4f!important}.purple,.purple6{background-color:#9c27b0!important}.purple-border{border-color:#9c27b0!important}.purple-text{color:#9c27b0!important}.purple1{background-color:#f3e5f5!important}.purple2{background-color:#e1bee7!important}.purple3{background-color:#ce93d8!important}.purple4{background-color:#ba68c8!important}.purple5{background-color:#ab47bc!important}.purple7{background-color:#8e24aa!important}.purple8{background-color:#7b1fa2!important}.purple9{background-color:#6a1b9a!important}.purple10{background-color:#4a148c!important}.deep-purple,.deep-purple6{background-color:#673ab7!important}.deep-purple-border{border-color:#673ab7!important}.deep-purple-text{color:#673ab7!important}.deep-purple1{background-color:#ede7f6!important}.deep-purple2{background-color:#d1c4e9!important}.deep-purple3{background-color:#b39ddb!important}.deep-purple4{background-color:#9575cd!important}.deep-purple5{background-color:#7e57c2!important}.deep-purple7{background-color:#5e35b1!important}.deep-purple8{background-color:#512da8!important}.deep-purple9{background-color:#4527a0!important}.deep-purple10{background-color:#311b92!important}.indigo,.indigo6{background-color:#3f51b5!important}.indigo-border{border-color:#3f51b5!important}.indigo-text{color:#3f51b5!important}.indigo1{background-color:#e8eaf6!important}.indigo2{background-color:#c5cae9!important}.indigo3{background-color:#9fa8da!important}.indigo4{background-color:#7986cb!important}.indigo5{background-color:#5c6bc0!important}.indigo7{background-color:#3949ab!important}.indigo8{background-color:#303f9f!important}.indigo9{background-color:#283593!important}.indigo10{background-color:#1a237e!important}.blue,.blue6{background-color:#2196f3!important}.blue-border{border-color:#2196f3!important}.blue-text{color:#2196f3!important}.blue1{background-color:#e3f2fd!important}.blue2{background-color:#bbdefb!important}.blue3{background-color:#90caf9!important}.blue4{background-color:#64b5f6!important}.blue5{background-color:#42a5f5!important}.blue7{background-color:#1e88e5!important}.blue8{background-color:#1976d2!important}.blue9{background-color:#1565c0!important}.blue10{background-color:#0d47a1!important}.light-blue,.light-blue6{background-color:#03a9f4!important}.light-blue-border{border-color:#03a9f4!important}.light-blue-text{color:#03a9f4!important}.light-blue1{background-color:#e1f5fe!important}.light-blue2{background-color:#b3e5fc!important}.light-blue3{background-color:#81d4fa!important}.light-blue4{background-color:#4fc3f7!important}.light-blue5{background-color:#29b6f6!important}.light-blue7{background-color:#039be5!important}.light-blue8{background-color:#0288d1!important}.light-blue9{background-color:#0277bd!important}.light-blue10{background-color:#01579b!important}.cyan,.cyan6{background-color:#00bcd4!important}.cyan-border{border-color:#00bcd4!important}.cyan-text{color:#00bcd4!important}.cyan1{background-color:#e0f7fa!important}.cyan2{background-color:#b2ebf2!important}.cyan3{background-color:#80deea!important}.cyan4{background-color:#4dd0e1!important}.cyan5{background-color:#26c6da!important}.cyan7{background-color:#00acc1!important}.cyan8{background-color:#0097a7!important}.cyan9{background-color:#00838f!important}.cyan10{background-color:#006064!important}.teal,.teal6{background-color:#009688!important}.teal-border{border-color:#009688!important}.teal-text{color:#009688!important}.teal1{background-color:#e0f2f1!important}.teal2{background-color:#b2dfdb!important}.teal3{background-color:#80cbc4!important}.teal4{background-color:#4db6ac!important}.teal5{background-color:#26a69a!important}.teal7{background-color:#00897b!important}.teal8{background-color:#00796b!important}.teal9{background-color:#00695c!important}.teal10{background-color:#004d40!important}.green,.green6{background-color:#4caf50!important}.green-border{border-color:#4caf50!important}.green-text{color:#4caf50!important}.green1{background-color:#e8f5e9!important}.green2{background-color:#c8e6c9!important}.green3{background-color:#a5d6a7!important}.green4{background-color:#81c784!important}.green5{background-color:#66bb6a!important}.green7{background-color:#43a047!important}.green8{background-color:#388e3c!important}.green9{background-color:#2e7d32!important}.green10{background-color:#1b5e20!important}.light-green,.light-green6{background-color:#8bc34a!important}.light-green-border{border-color:#8bc34a!important}.light-green-text{color:#8bc34a!important}.light-green1{background-color:#f1f8e9!important}.light-green2{background-color:#dcedc8!important}.light-green3{background-color:#c5e1a5!important}.light-green4{background-color:#aed581!important}.light-green5{background-color:#9ccc65!important}.light-green7{background-color:#7cb342!important}.light-green8{background-color:#689f38!important}.light-green9{background-color:#558b2f!important}.light-green10{background-color:#33691e!important}.lime,.lime6{background-color:#cddc39!important}.lime-border{border-color:#cddc39!important}.lime-text{color:#cddc39!important}.lime1{background-color:#f9fbe7!important}.lime2{background-color:#f0f4c3!important}.lime3{background-color:#e6ee9c!important}.lime4{background-color:#dce775!important}.lime5{background-color:#d4e157!important}.lime7{background-color:#c0ca33!important}.lime8{background-color:#afb42b!important}.lime9{background-color:#9e9d24!important}.lime10{background-color:#827717!important}.yellow,.yellow6{background-color:#ffeb3b!important}.yellow-border{border-color:#ffeb3b!important}.yellow-text{color:#ffeb3b!important}.yellow1{background-color:#fffde7!important}.yellow2{background-color:#fff9c4!important}.yellow3{background-color:#fff59d!important}.yellow4{background-color:#fff176!important}.yellow5{background-color:#ffee58!important}.yellow7{background-color:#fdd835!important}.yellow8{background-color:#fbc02d!important}.yellow9{background-color:#f9a825!important}.yellow10{background-color:#f57f17!important}.amber,.amber6{background-color:#ffc107!important}.amber-border{border-color:#ffc107!important}.amber-text{color:#ffc107!important}.amber1{background-color:#fff8e1!important}.amber2{background-color:#ffecb3!important}.amber3{background-color:#ffe082!important}.amber4{background-color:#ffd54f!important}.amber5{background-color:#ffca28!important}.amber7{background-color:#ffb300!important}.amber8{background-color:#ffa000!important}.amber9{background-color:#ff8f00!important}.amber10{background-color:#ff6f00!important}.orange,.orange6{background-color:#ff9800!important}.orange-border{border-color:#ff9800!important}.orange-text{color:#ff9800!important}.orange1{background-color:#fff3e0!important}.orange2{background-color:#ffe0b2!important}.orange3{background-color:#ffcc80!important}.orange4{background-color:#ffb74d!important}.orange5{background-color:#ffa726!important}.orange7{background-color:#fb8c00!important}.orange8{background-color:#f57c00!important}.orange9{background-color:#ef6c00!important}.orange10{background-color:#e65100!important}.deep-orange,.deep-orange6{background-color:#ff5722!important}.deep-orange-border{border-color:#ff5722!important}.deep-orange-text{color:#ff5722!important}.deep-orange1{background-color:#fbe9e7!important}.deep-orange2{background-color:#ffccbc!important}.deep-orange3{background-color:#ffab91!important}.deep-orange4{background-color:#ff8a65!important}.deep-orange5{background-color:#ff7043!important}.deep-orange7{background-color:#f4511e!important}.deep-orange8{background-color:#e64a19!important}.deep-orange9{background-color:#d84315!important}.deep-orange10{background-color:#bf360c!important}.brown,.brown6{background-color:#795548!important}.brown-border{border-color:#795548!important}.brown-text{color:#795548!important}.brown1{background-color:#efebe9!important}.brown2{background-color:#d7ccc8!important}.brown3{background-color:#bcaaa4!important}.brown4{background-color:#a1887f!important}.brown5{background-color:#8d6e63!important}.brown7{background-color:#6d4c41!important}.brown8{background-color:#5d4037!important}.brown9{background-color:#4e342e!important}.brown10{background-color:#3e2723!important}.blue-grey,.blue-grey6{background-color:#607d8b!important}.blue-grey-border{border-color:#607d8b!important}.blue-grey-text{color:#607d8b!important}.blue-grey1{background-color:#eceff1!important}.blue-grey2{background-color:#cfd8dc!important}.blue-grey3{background-color:#b0bec5!important}.blue-grey4{background-color:#90a4ae!important}.blue-grey5{background-color:#78909c!important}.blue-grey7{background-color:#546e7a!important}.blue-grey8{background-color:#455a64!important}.blue-grey9{background-color:#37474f!important}.blue-grey10{background-color:#263238!important}.grey,.grey6{background-color:#9e9e9e!important}.grey-border{border-color:#9e9e9e!important}.grey-text{color:#9e9e9e!important}.grey1{background-color:#fafafa!important}.grey2{background-color:#f5f5f5!important}.grey3{background-color:#eee!important}.grey4{background-color:#e0e0e0!important}.grey5{background-color:#bdbdbd!important}.grey7{background-color:#757575!important}.grey8{background-color:#616161!important}.grey9{background-color:#424242!important}.grey10{background-color:#212121!important}
 
@@ -11,15 +13,13 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-05-18T19:35:17.082Z
+ * Generated: 2026-08-04T15:24:23.823Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
  */
 
 /* Font imports - must be at the top of the file */
-@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');
-
 :root {
   /* ==========================================================================
      COLOR TOKENS
@@ -48,15 +48,21 @@
   --kds-color-success-main: #2E7D32;
   --kds-color-success-light: #4CAF50;
   --kds-color-success-dark: #1B5E20;
+  --kds-color-success-contrast: #FFFFFF;
   --kds-color-warning-main: #EF6C00;
   --kds-color-warning-light: #FF9800;
   --kds-color-warning-dark: #E65100;
+  --kds-color-warning-contrast: #FFFFFF;
+  --kds-color-warning-warm: #8A6D1A;
   --kds-color-error-main: #D32F2F;
   --kds-color-error-light: #EF5350;
   --kds-color-error-dark: #C62828;
+  --kds-color-error-contrast: #FFFFFF;
   --kds-color-info-main: #0288D1;
   --kds-color-info-light: #03A9F4;
   --kds-color-info-dark: #01579B;
+  --kds-color-info-contrast: #FFFFFF;
+  --kds-color-info-blue: #5A5FE0;
 
   /* Text colors */
   --kds-color-text-primary: #333333;
@@ -69,6 +75,7 @@
   --kds-color-background-paper: #FFFFFF;
   --kds-color-background-elevated: #FAFAFA;
   --kds-color-background-muted: #F4F4F7;
+  --kds-color-background-brand-subtle: #F0F0FA;
 
   /* Action colors */
   --kds-color-action-active: rgba(0, 0, 0, 0.56);
@@ -134,6 +141,8 @@
   --kds-font-weight-bold: 700;
 
   /* Font sizes (base scale xs–4xl: see responsive section below) */
+  --kds-font-size-decimal-sup: 0.5em;
+
   /* Line heights */
   --kds-line-height-tight: 1.2;
   --kds-line-height-snug: 1.375;
@@ -355,6 +364,7 @@
      RESPONSIVE TYPOGRAPHY (MOBILE BASE)
      ========================================================================== */
 
+  --kds-font-size-2xs: 0.5625rem;
 
   /* Base font-size scale */
   --kds-font-size-xs: 0.6875rem;
@@ -384,6 +394,112 @@
 
 }
 
+/* ============================================================================
+   DARK MODE COLOR TOKENS
+   Override only color variables; everything else inherits from :root.
+   Activated via [data-theme="dark"] on <html>, <body>, or a wrapper.
+   ============================================================================ */
+
+[data-theme="dark"] {
+
+  /* Primary palette - Khipu brand */
+  --kds-color-primary-main: #E3B5FF;
+  --kds-color-primary-light: #F1D6FF;
+  --kds-color-primary-dark: #4C0676;
+  --kds-color-primary-contrast: rgba(76, 6, 118, 0.87);
+  --kds-color-primary-hover: rgba(227, 181, 255, 0.08);
+  --kds-color-primary-selected: rgba(227, 181, 255, 0.16);
+  --kds-color-primary-focus: rgba(227, 181, 255, 0.24);
+  --kds-color-primary-focus-visible: rgba(227, 181, 255, 0.40);
+  --kds-color-primary-outlined-border: rgba(227, 181, 255, 0.50);
+
+  /* Secondary palette */
+  --kds-color-secondary-main: #B5EAFF;
+  --kds-color-secondary-light: #D6F3FF;
+  --kds-color-secondary-dark: #065676;
+  --kds-color-secondary-contrast: rgba(6, 86, 118, 0.87);
+
+  /* Semantic colors */
+  --kds-color-success-main: #2E7D32;
+  --kds-color-success-light: #4CAF50;
+  --kds-color-success-dark: #1B5E20;
+  --kds-color-success-contrast: #FFFFFF;
+  --kds-color-warning-main: #EF6C00;
+  --kds-color-warning-light: #FF9800;
+  --kds-color-warning-dark: #E65100;
+  --kds-color-warning-contrast: #FFFFFF;
+  --kds-color-warning-warm: #8A6D1A;
+  --kds-color-error-main: #D32F2F;
+  --kds-color-error-light: #EF5350;
+  --kds-color-error-dark: #C62828;
+  --kds-color-error-contrast: #FFFFFF;
+  --kds-color-info-main: #0288D1;
+  --kds-color-info-light: #03A9F4;
+  --kds-color-info-dark: #01579B;
+  --kds-color-info-contrast: #FFFFFF;
+  --kds-color-info-blue: #5A5FE0;
+
+  /* Text colors */
+  --kds-color-text-primary: rgba(255, 255, 255, 1);
+  --kds-color-text-secondary: rgba(255, 255, 255, 0.70);
+  --kds-color-text-disabled: rgba(255, 255, 255, 0.38);
+  --kds-color-text-hint: rgba(255, 255, 255, 0.38);
+
+  /* Background colors */
+  --kds-color-background-default: #181818;
+  --kds-color-background-paper: #121212;
+  --kds-color-background-elevated: #2C2C2C;
+  --kds-color-background-muted: #1E1E1E;
+  --kds-color-background-brand-subtle: #1E1030;
+
+  /* Action colors */
+  --kds-color-action-active: rgba(255, 255, 255, 0.56);
+  --kds-color-action-hover: rgba(255, 255, 255, 0.08);
+  --kds-color-action-selected: rgba(255, 255, 255, 0.16);
+  --kds-color-action-disabled: rgba(255, 255, 255, 0.38);
+  --kds-color-action-disabled-bg: rgba(255, 255, 255, 0.12);
+  --kds-color-action-focus: rgba(255, 255, 255, 0.12);
+
+  /* Divider */
+  --kds-color-divider: rgba(255, 255, 255, 0.12);
+
+  /* Gray palette - Neutral colors */
+  --kds-color-gray-50: #F9FAFB;
+  --kds-color-gray-100: #F3F4F6;
+  --kds-color-gray-200: #E5E7EB;
+  --kds-color-gray-300: #D1D5DB;
+  --kds-color-gray-400: #9CA3AF;
+  --kds-color-gray-500: #6B7280;
+  --kds-color-gray-600: #4B5563;
+  --kds-color-gray-700: #374151;
+  --kds-color-gray-800: #1F2937;
+  --kds-color-gray-900: #111827;
+
+  /* Input borders */
+  --kds-color-input-enabled-border: rgba(255, 255, 255, 0.23);
+  --kds-color-input-hover-border: rgba(255, 255, 255, 1);
+
+  /* Snackbar backgrounds */
+  --kds-snackbar-success-bg: rgba(76, 175, 80, 0.16);
+  --kds-snackbar-warning-bg: rgba(255, 152, 0, 0.16);
+  --kds-snackbar-error-bg: rgba(239, 83, 80, 0.16);
+  --kds-snackbar-info-bg: rgba(3, 169, 244, 0.16);
+
+  /* Alert backgrounds */
+  --kds-alert-info-bg: rgba(2, 136, 209, 0.12);
+  --kds-alert-warning-bg: rgba(239, 108, 0, 0.12);
+  --kds-alert-success-bg: rgba(46, 125, 50, 0.12);
+  --kds-alert-error-bg: rgba(211, 47, 47, 0.12);
+  --kds-alert-success-text: #6AE079;
+  --kds-alert-warning-text: #FFB74D;
+  --kds-alert-error-text: #EF9A9A;
+  --kds-alert-info-text: #4FC3F7;
+  --kds-alert-success-border: #4CAF50;
+  --kds-alert-warning-border: #FF9800;
+  --kds-alert-error-border: #EF5350;
+  --kds-alert-info-border: #03A9F4;
+}
+
 /* ============================================================================
    RESPONSIVE TOKENS (Mobile-First)
    ============================================================================ */
@@ -402,6 +518,7 @@
 /* Tablet (600px+) - Typography */
 @media (min-width: 600px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
 
     /* Base font-size scale */
     --kds-font-size-xs: 0.75rem;
@@ -439,6 +556,7 @@
 /* Desktop (840px+) - Typography */
 @media (min-width: 840px) {
   :root {
+    --kds-font-size-2xs: 0.625rem;
 
     /* Base font-size scale */
     --kds-font-size-xs: 0.75rem;
@@ -510,7 +628,8 @@
 /* Import core design tokens (auto-generated) */
 :root,
 body.light,
-body.dark {
+body.dark,
+[data-theme="dark"] {
     /* ========================================
        Map core tokens to BeerCSS-specific names
        (BeerCSS may use different naming conventions)
@@ -688,7 +807,8 @@ body.dark {
     --kds-color-danger-soft: var(--kds-alert-error-bg);      /* #FEF2F2 */
 
     /* Bottom Sheet */
-    --kds-bottom-sheet-max-width: 480px;
+    /* Mismo ancho que la card principal del flujo (stage narrow). */
+    --kds-bottom-sheet-max-width: var(--kds-stage-narrow-max-width);
     --kds-bottom-sheet-shadow: 0 -8px var(--kds-spacing-3-5) rgba(0, 0, 0, 0.18);
 
     /* Status Block */
@@ -707,26 +827,70 @@ body.dark {
     --kds-qr-avatar-radius: 10px;                         /* Avatar border radius */
     --kds-qr-badge-bg: var(--kds-color-primary-main);     /* Badge background */
     --kds-qr-badge-text: #FFFFFF;                         /* Badge text color */
+
+    /* Highlighted Field */
+    --kds-field-highlight-bg: var(--kds-color-info-soft); /* Header band surface */
+    --kds-field-highlight-border: rgba(2, 136, 209, 0.5); /* Dashed accent border (info @ 50%) */
+    --kds-field-highlight-label: var(--kds-color-info-dark);  /* Eyebrow label */
+    /* Doubles as the band's own padding, so its text lines up with the fields */
+    --kds-field-highlight-padding: var(--kds-spacing-2);
+    --kds-field-highlight-radius: var(--kds-radius-card);
+}
+
+/* ========================================
+   Dark mode overrides — extended payment-flow tokens
+   These were authored as light-only literals in the group above (subtle
+   surfaces, soft backgrounds, borders, hovers, shell). Give them dark-aware
+   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,
+[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 */
+    --kds-color-success-soft: var(--kds-alert-success-bg);  /* dark translucent green */
+    --kds-color-border-subtle: rgba(255, 255, 255, 0.08);   /* subtle divider on dark */
+    --kds-color-border-default: rgba(255, 255, 255, 0.16);  /* standard border on dark */
+    --kds-color-hover-bg: rgba(255, 255, 255, 0.04);        /* subtle row hover on dark */
+    --kds-color-shell: var(--kds-color-background-default);  /* neutral page background */
+
+    /* QR featured row — dark mirror of the light purple→blue gradient (the
+       light literals painted a light surface under adaptive white text). */
+    --kds-qr-bg-gradient: linear-gradient(135deg, #1E1030 0%, #101C2C 100%);
+    --kds-qr-border: rgba(227, 181, 255, 0.28);              /* dark primary @ same alpha as light */
+    --kds-qr-focus-ring: rgba(227, 181, 255, 0.35);
+    --kds-qr-avatar-bg: var(--kds-color-background-elevated);
+    --kds-qr-avatar-border: rgba(227, 181, 255, 0.3);
+    --kds-qr-badge-text: var(--kds-color-primary-contrast);  /* dark text on the lavender badge */
+
+    /* Highlighted field — info-soft still resolves to a near-white band on
+       dark, so mirror it as translucent info over the dark background. */
+    --kds-field-highlight-bg: rgba(2, 136, 209, 0.12);
+    --kds-field-highlight-border: rgba(125, 211, 252, 0.45);
+    --kds-field-highlight-label: #7DD3FC;                    /* light info, readable on dark */
 }
 
 /* ========================================
-   Force Light Mode Only
+   Color Scheme (explicit opt-in to dark)
    ======================================== */
 
-/* Force light mode - disable dark mode */
+/* Default to light regardless of OS preference. Because we use `light` (not
+   `light dark`), the system dark-mode preference never auto-applies — dark is
+   reached only by an explicit [data-theme="dark"] / body.dark opt-in. */
 :root,
 html,
 body {
-    color-scheme: light only;
+    color-scheme: light;
 }
 
-/* Override system dark mode preference */
-@media (prefers-color-scheme: dark) {
-    :root,
-    html,
-    body {
-        color-scheme: light only;
-    }
+/* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
+[data-theme="dark"],
+body.dark {
+    color-scheme: dark;
 }
 
 /* ========================================
@@ -838,7 +1002,13 @@ a.kds-btn {
 
     /* Spacing - Using design tokens */
     padding: var(--kds-spacing-button-padding);      /* 0 16px */
-    height: var(--kds-spacing-button-min-height);    /* 44px */
+    /* Respiro vertical solo relevante con label multilinea; en una linea manda min-height. */
+    padding-block: var(--kds-spacing-1);
+    /* height:auto + min-height (no height fija): si el label envuelve en pantallas
+       angostas el botón crece en vez de recortar el texto; min-height ademas impide
+       que flex-shrink lo colapse como flex-item en contenedores flex-column. */
+    height: auto;
+    min-height: var(--kds-spacing-button-min-height);    /* 44px */
 
     /* Border - Using design token */
     border-radius: var(--kds-radius-button);  /* 10px */
@@ -846,11 +1016,25 @@ a.kds-btn {
 
     /* Interaction */
     cursor: pointer;
-    transition: background .15s, box-shadow .15s, transform .05s;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard),
+                color var(--kds-transition-shorter) var(--kds-easing-standard),
+                box-shadow var(--kds-transition-shorter) var(--kds-easing-standard),
+                transform var(--kds-transition-shortest) var(--kds-easing-standard);
     box-sizing: border-box;
     vertical-align: middle;
 }
 
+/* Sin anillo de focus en botones: decision de diseno (KTUF-210) — el estado de
+   focus/active se comunica solo con el cambio de fondo de cada variante. */
+button.kds-btn:focus,
+button.kds-btn:focus-visible,
+a.kds-btn:focus,
+a.kds-btn:focus-visible,
+button.kds-fab:focus,
+button.kds-fab:focus-visible {
+    outline: none;
+}
+
 /* Active state - add subtle press effect */
 button.kds-btn:active:not(:disabled),
 a.kds-btn:active:not(:disabled) {
@@ -872,7 +1056,7 @@ a.kds-btn:disabled {
 button.kds-btn-primary,
 a.kds-btn-primary {
     background: var(--kds-color-primary-main);     /* #8347AD */
-    color: white;
+    color: var(--kds-color-primary-contrast);      /* #FFF light / dark-purple on dark (lavender bg) */
     border: none;
     box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
 }
@@ -889,8 +1073,18 @@ button.kds-btn-primary:focus-visible:not(:disabled),
 a.kds-btn-primary:active:not(:disabled),
 a.kds-btn-primary:focus-visible:not(:disabled) {
     background: var(--kds-color-primary-dark);
-    outline: 2px solid var(--kds-color-primary-main);
-    outline-offset: 2px;
+}
+
+/* Dark mode: the button is a light lavender with dark text, so hover/active must
+   LIGHTEN (not darken) — else primary-dark bg + dark contrast text = invisible.
+   Additive override; the light-mode rules above stay unchanged. */
+[data-theme="dark"] button.kds-btn-primary:hover:not(:disabled),
+[data-theme="dark"] a.kds-btn-primary:hover:not(:disabled),
+[data-theme="dark"] button.kds-btn-primary:active:not(:disabled),
+[data-theme="dark"] button.kds-btn-primary:focus-visible:not(:disabled),
+[data-theme="dark"] a.kds-btn-primary:active:not(:disabled),
+[data-theme="dark"] a.kds-btn-primary:focus-visible:not(:disabled) {
+    background: var(--kds-color-primary-light);
 }
 
 /* Override disabled para primary */
@@ -965,20 +1159,25 @@ a.kds-btn-outlined-white:hover:not(:disabled) {
     opacity: 0.9;
 }
 
-/* Text button */
+/* 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,
 a.kds-btn-text {
     background: transparent;
     color: var(--kds-color-primary-main);
     border: none;
-    padding: 6px var(--kds-spacing-2);  /* Menor padding para text variant */
-    min-height: 32px;   /* Menor altura para text variant */
     box-shadow: none;
 }
 
 button.kds-btn-text:hover:not(:disabled),
 a.kds-btn-text:hover:not(:disabled) {
-    background: var(--kds-color-primary-hover);  /* rgba(131, 71, 173, 0.04) */
+    color: var(--kds-color-primary-dark);
+}
+
+/* Dark: hover must lighten — primary-dark text is near-invisible on dark bg. */
+[data-theme="dark"] button.kds-btn-text:hover:not(:disabled),
+[data-theme="dark"] a.kds-btn-text:hover:not(:disabled) {
+    color: var(--kds-color-primary-light);
 }
 
 button.kds-btn-text:disabled,
@@ -988,9 +1187,38 @@ a.kds-btn-text:disabled {
     box-shadow: none;
 }
 
+/* Error text (destructive, ghost) — red text, no fill/border. Para acciones
+   destructivas secundarias que no deben competir con el CTA primario. */
+button.kds-btn-error-text,
+a.kds-btn-error-text {
+    background: transparent;
+    color: var(--kds-color-error-main);
+    border: none;
+    box-shadow: none;
+}
+
+button.kds-btn-error-text:hover:not(:disabled),
+a.kds-btn-error-text:hover:not(:disabled) {
+    color: var(--kds-color-error-dark);
+}
+
+button.kds-btn-error-text:disabled,
+a.kds-btn-error-text:disabled {
+    background: transparent;
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+/* Label: al envolver en pantallas angostas las lineas quedan parejas y el icono
+   (inline, dentro del label) fluye con el texto en vez de anclarse al borde. */
+button.kds-btn .kds-btn-label,
+a.kds-btn .kds-btn-label {
+    text-wrap: balance;
+}
+
 /* Icon wrapper - control size via span container */
-button.kds-btn > .kds-icon,
-a.kds-btn > .kds-icon {
+button.kds-btn .kds-icon,
+a.kds-btn .kds-icon {
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
     width: var(--kds-spacing-button-icon-size);
@@ -1001,10 +1229,22 @@ a.kds-btn > .kds-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    vertical-align: middle;
+}
+
+/* El gap del boton no aplica al icono inline: el respiro icono-texto sale del margen. */
+button.kds-btn .kds-icon-start,
+a.kds-btn .kds-icon-start {
+    margin-inline-end: var(--kds-spacing-1);
+}
+
+button.kds-btn .kds-icon-end,
+a.kds-btn .kds-icon-end {
+    margin-inline-start: var(--kds-spacing-1);
 }
 
-button.kds-btn > .kds-icon > i,
-a.kds-btn > .kds-icon > i {
+button.kds-btn .kds-icon > i,
+a.kds-btn .kds-icon > i {
     font-size: var(--kds-spacing-button-icon-size);
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
@@ -1073,63 +1313,90 @@ a.kds-btn.kds-btn-md {
     }
 }
 
-/* Selection card */
+/* Selection card.
+   IMPORTANTE: este componente se renderiza como `<button>`. BeerCSS aplica al
+   `button` base: `display: inline-flex; align-items: center; justify-content: center;
+   block-size: 2.5rem; padding: 0 1rem; background: var(--primary); color: on-primary`.
+   Todas esas reglas hay que sobreescribirlas para que el card-selector funcione como
+   un contenedor flex column de altura variable y alineado a la izquierda.
+
+   Convención del DS: spacing entre hijos via `gap` del flex padre + padding.
+   Los elementos internos (.kds-card-selector-icon/-title/-description) NO usan margin. */
 .kds-card-selector {
+    /* Reset BeerCSS button */
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    block-size: auto;
+    inline-size: 100%;
+    text-align: left;
+    line-height: 1.5;
+    color: var(--kds-color-text-primary);
+    /* Estilos propios del card-selector */
     padding: var(--kds-spacing-3);
+    gap: var(--kds-spacing-1-5);
     border-radius: var(--kds-radius-md);
-    border: 2px solid var(--kds-border-light);
+    border: var(--kds-border-width-md) solid var(--kds-border-light);
     background: var(--kds-color-background-paper);
     transition: all 0.3s ease;
-    text-align: left;
     cursor: pointer;
-    display: flex;
-    flex-direction: column;
 }
 
-.kds-card-selector:hover {
-    border-color: #D1D5DB;  /* gray-300 */
+.kds-card-selector:hover:not(.selected) {
+    border-color: var(--kds-color-primary-light);
+    background: var(--kds-color-primary-hover);
+}
+
+/* Override del ripple/overlay default de BeerCSS:
+   `:is(.wave,.chip,.button,button,nav.tabbed>a,...):not([class*=ripple])::after`
+   tiene specificity (0,2,4) según DevTools (Chrome cuenta cada selector dentro
+   de :is() individualmente para algunos motores). Usamos !important — consistente
+   con cómo se overridean otros estilos de BeerCSS en este archivo (67 usos previos).
+   Antes pintaba negro porque `currentColor` resolvía a text-primary del card. */
+.kds-card-selector::after {
+    background-image: radial-gradient(circle, var(--kds-color-primary-main) 1%, transparent 1%) !important;
 }
 
 .kds-card-selector.selected {
-    border-color: #3B82F6;  /* blue-600 */
-    background: #EFF6FF;    /* blue-50 */
+    border-color: var(--kds-color-primary-main);
+    background: var(--kds-color-primary-faint);
     box-shadow: var(--kds-shadow-md);
 }
 
-/* Icon container */
+/* Icon container — spacing manejado por gap del padre, no margin */
 .kds-card-selector-icon {
-    width: 48px;
-    height: 48px;
-    background: #DBEAFE;  /* blue-100 */
-    border-radius: 8px;
+    width: var(--kds-spacing-6);
+    height: var(--kds-spacing-6);
+    background: var(--kds-color-primary-focus);
+    border-radius: var(--kds-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 16px;
 }
 
 .kds-card-selector-icon i,
 .kds-card-selector-icon svg {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    min-height: 24px;
-    color: #3B82F6;  /* blue-600 */
+    width: var(--kds-spacing-3);
+    height: var(--kds-spacing-3);
+    min-width: var(--kds-spacing-3);
+    min-height: var(--kds-spacing-3);
+    font-size: var(--kds-spacing-3);
+    color: var(--kds-color-primary-main);
 }
 
-/* Title */
+/* Title — spacing manejado por gap del padre, no margin */
 .kds-card-selector-title {
-    font-weight: 600;
+    font-weight: var(--kds-font-weight-semibold);
     color: var(--kds-color-text-primary);
-    margin-bottom: 8px;
-    font-size: 16px;
+    font-size: var(--kds-font-size-lg);
 }
 
 /* Description */
 .kds-card-selector-description {
-    font-size: 14px;
-    color: #4B5563;  /* gray-600 */
-    line-height: 1.5;
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    line-height: var(--kds-line-height-normal);
 }
 
 /* Selected state - visual feedback via border only */
@@ -1141,14 +1408,22 @@ a.kds-btn.kds-btn-md {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-2);
-    padding: var(--kds-spacing-4);
+    padding: var(--kds-spacing-2);
     border-radius: var(--kds-radius-lg);
     border: 2px solid var(--kds-border-medium);
-    max-width: 400px; /* Increased from 365px for better text spacing */
+    /* Ancho mínimo aplicado a TODOS los planes — así un plan sin badge en una
+       grilla con un plan recomendado mantiene la misma anchura, y el badge nunca
+       se superpone al título por estrechez del card. */
+    min-width: 260px;
+    max-width: 400px;
     background: var(--kds-surface-base);
     transition: all 0.3s ease;
     cursor: pointer;
-    height: 100%; /* Ensure cards fill grid height */
+    /* Alto fijo: el card se estira al alto de su row del grid (align-items stretch
+       es el default) — todas las cards de la misma fila quedan a la misma altura
+       sin importar el contenido. `align-self: stretch` lo hace explícito. */
+    height: 100%;
+    align-self: stretch;
 }
 
 .kds-card-plan:hover {
@@ -1168,18 +1443,19 @@ a.kds-btn.kds-btn-md {
     box-shadow: var(--kds-shadow-elevation-4);
 }
 
-/* Recommended Badge */
+/* Recommended Badge — inline dentro del card (no flotante).
+   Es el primer hijo del .kds-card-plan, así que aparece arriba de todo
+   el contenido, alineado a la izquierda. */
 .kds-card-plan-badge {
-    position: absolute;
-    top: -12px;
-    right: var(--kds-spacing-6);
-    padding: var(--kds-spacing-1) var(--kds-spacing-4);
+    align-self: flex-start;
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
     background: var(--primary);
-    color: white;
-    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-primary-contrast);    /* contrast adapts: #FFF light / dark on dark */
+    font-size: var(--kds-font-size-xs);
     font-weight: var(--kds-font-weight-semibold);
+    line-height: 1;
     border-radius: var(--kds-radius-full);
-    box-shadow: var(--kds-shadow-elevation-1);
+    white-space: nowrap;
 }
 
 /* Plan Header */
@@ -1207,13 +1483,11 @@ a.kds-btn.kds-btn-md {
     display: flex;
     align-items: baseline;
     gap: var(--kds-spacing-2);
-    padding: var(--kds-spacing-4) 0;
     border-bottom: 1px solid var(--kds-border-light);
-    min-height: 88px; /* Standardize price area height */
 }
 
 .kds-price {
-    font-size: 42px;
+    font-size: var(--kds-font-size-4xl);
     font-weight: var(--kds-font-weight-bold);
     color: var(--primary);
     line-height: 1.1;
@@ -1440,6 +1714,10 @@ a.kds-btn.kds-btn-md {
     flex-wrap: wrap;
 }
 
+.kds-grow {
+    flex-grow: 1;
+}
+
 .kds-justify-start {
     justify-content: flex-start;
 }
@@ -1468,7 +1746,63 @@ a.kds-btn.kds-btn-md {
     align-items: flex-end;
 }
 
+.kds-self-center {
+    align-self: center;
+}
+
+/* Botón "pelado": neutraliza el chrome de button de BeerCSS (pill 2.5rem,
+   radius, fondo y hover) para botones de terceros con su propio look,
+   p.ej. los share buttons de react-share (ícono circular). */
+.kds-btn-bare,
+.kds-btn-bare:hover,
+.kds-btn-bare:focus,
+.kds-btn-bare:active {
+    background: none !important;
+    block-size: auto !important;
+    inline-size: auto !important;
+    min-inline-size: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    border-radius: var(--kds-radius-full) !important;
+    box-sizing: border-box !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+.kds-btn-bare::before,
+.kds-btn-bare::after {
+    display: none !important;
+}
+
+/* BeerCSS también encoge los íconos hijos de button a 1.5rem (min/max);
+   un botón pelado respeta el tamaño propio del ícono. */
+.kds-btn-bare > :is(img, svg) {
+    max-block-size: none !important;
+    max-inline-size: none !important;
+    min-block-size: 0 !important;
+    min-inline-size: 0 !important;
+}
+
+/* Versión de la app anclada al fondo del card body (flex column): margin-top
+   auto absorbe el espacio libre; el padding garantiza respiro mínimo cuando el
+   contenido llena la card. */
+.kds-card-version {
+    margin-top: auto;
+    padding-top: var(--kds-spacing-2);
+    text-align: center;
+}
+
+/* Separador vertical (entre chips/logos hermanos en una fila). */
+.kds-vr {
+    width: 1px;
+    height: var(--kds-spacing-3);
+    background: var(--kds-color-divider);
+    flex: 0 0 auto;
+}
+
 /* Gap utilities */
+.kds-gap-0-25 { gap: var(--kds-spacing-0-25); }
 .kds-gap-1 { gap: var(--kds-spacing-1); }
 .kds-gap-2 { gap: var(--kds-spacing-2); }
 .kds-gap-3 { gap: var(--kds-spacing-3); }
@@ -1504,6 +1838,7 @@ a.kds-btn.kds-btn-md {
 /* Spacing utilities - Margin */
 .kds-m-0 { margin: 0; }
 .kds-m-2 { margin: var(--kds-spacing-2); }
+.kds-m-2-5 { margin: var(--kds-spacing-2-5); }
 .kds-m-4 { margin: var(--kds-spacing-4); }
 .kds-m-6 { margin: var(--kds-spacing-6); }
 .kds-m-8 { margin: var(--kds-spacing-8); }
@@ -1517,6 +1852,7 @@ a.kds-btn.kds-btn-md {
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
 
 .kds-mb-0 { margin-bottom: 0; }
+.kds-mb-0-5 { margin-bottom: var(--kds-spacing-0-5); }
 .kds-mb-1 { margin-bottom: var(--kds-spacing-1); }
 .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
 .kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
@@ -1753,33 +2089,35 @@ a.kds-btn.kds-btn-md {
     opacity: 1 !important;
 }
 
-/* Snackbar semantic variants
-   All use white text (--kds-color-primary-contrast) on solid semantic backgrounds */
+/* Snackbar semantic variants — white text on solid semantic backgrounds.
+   Use each semantic's own *-contrast token (always #FFFFFF, both modes) rather
+   than --kds-color-primary-contrast, which flips to dark purple in dark mode
+   and made the text illegible on the colored surface. */
 .snackbar.error {
     background-color: var(--kds-color-error-main) !important;
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-error-contrast) !important;
 }
 
 .snackbar.error i {
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-error-contrast) !important;
 }
 
 .snackbar.info {
     background-color: var(--kds-color-info-main) !important;
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-info-contrast) !important;
 }
 
 .snackbar.info i {
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-info-contrast) !important;
 }
 
 .snackbar.success {
     background-color: var(--kds-color-success-main) !important;
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-success-contrast) !important;
 }
 
 .snackbar.success i {
-    color: var(--kds-color-primary-contrast) !important;
+    color: var(--kds-color-success-contrast) !important;
 }
 
 /* Snackbar progress bar — animated timer for auto-dismiss */
@@ -2030,92 +2368,340 @@ a.kds-btn-google:disabled {
 }
 
 /* ========================================
-   Link Styles
+   KDS LINEAR PROGRESS
+   Native <progress> (KdsLinearProgress). Additive over BeerCSS `progress`,
+   scoped to .kds-progress so other consumers are unaffected.
    ======================================== */
 
-/* Explicit link class */
-.kds-link {
-    color: var(--kds-color-primary-main);
-    text-decoration: none;
-    cursor: pointer;
-    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
-}
-
-.kds-link:hover {
-    color: var(--kds-color-primary-dark);
-    text-decoration: underline;
+/* `progress` is inline-block by default → leaves a baseline (descender) gap
+   below the bar. Block removes that gap so it sits flush with siblings. */
+.kds-progress {
+    display: block;
 }
 
-/* Contextual links inside cards and stage forms */
-.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]),
-.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]) {
-    color: var(--kds-color-primary-main);
-    text-decoration: none;
-    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
+/* Animate the filled value when it changes (e.g. advancing a step). BeerCSS
+   sets the value background but no transition, so the width jumps abruptly. */
+.kds-progress::-webkit-progress-value {
+    transition: width var(--kds-transition-standard) var(--kds-easing-standard);
 }
 
-.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
-.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover {
-    color: var(--kds-color-primary-dark);
-    text-decoration: underline;
+.kds-progress::-moz-progress-bar {
+    transition: width var(--kds-transition-standard) var(--kds-easing-standard);
 }
 
 /* ========================================
-   Flex Layout System (Body + Container + Sidebar)
+   KDS SECURE LOADER
+   Loader de espera: anillo circular + candado centrado + frases opcionales.
+   El anillo reutiliza el spinner circular de BeerCSS, escalado.
    ======================================== */
 
-/* Body flex-column layout */
-body.kds-layout {
+.kds-secure-loader {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
-    margin: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kds-spacing-4);
+    text-align: center;
+    /* 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;
 }
 
-/* Layout container (flex-row) - below header */
-.kds-layout-container {
+.kds-secure-loader-text {
     display: flex;
-    flex-direction: row;
-    flex: 1;
-    overflow: hidden;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-25);
 }
-/* ========================================
-   Footer Customization
-   ======================================== */
 
-footer.primary {
-    background: var(--primary);
-    padding: var(--kds-spacing-4) var(--kds-spacing-3);
-    color: var(--on-primary);
+.kds-secure-loader-title {
+    margin: 0;
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-h6);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-snug);
+    color: var(--kds-color-text-primary);
 }
 
-footer.primary h6 {
-    color: var(--on-primary);
-    font-weight: var(--kds-font-weight-semibold);
-    margin-bottom: var(--kds-spacing-2);
+.kds-secure-loader-message {
+    margin: 0;
+    /* !important: anula el auto-espaciado de hermanos de BeerCSS (0,5,1);
+       la separación con el título la da el gap del contenedor (spacing-0-25). */
+    margin-top: 0 !important;
+    font-family: var(--kds-font-family-secondary);
+    font-size: var(--kds-font-size-body1);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-primary-main);
 }
 
-footer.primary a {
-    color: var(--on-primary);
-    text-decoration: none;
-    display: block;
-    padding: var(--kds-spacing-0-5) 0;
-    transition: opacity var(--kds-transition-shorter) var(--kds-easing-standard);
-    text-align: center;
+/* Caja del spinner con tamaño fijo: la animación no altera el layout.
+   6.25rem (100px) = tamaño del loader original (CircularProgress size=100). */
+.kds-secure-loader-spinner {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--kds-secure-loader-size, 6.25rem);
+    block-size: var(--kds-secure-loader-size, 6.25rem);
 }
 
-footer.primary a:hover {
-    opacity: 0.8;
+/* Anillo: SVG nativo con arco vía stroke-dasharray. Replica el CircularProgress
+   original (viewBox 44u, thickness 2, arco ~63%, disableShrink). El giro se anima
+   con stroke-dashoffset (el círculo queda estático y nítido); rotar el SVG con
+   transform rasteriza el anillo y se ve irregular durante el giro. */
+.kds-secure-loader-ring {
+    inline-size: var(--kds-secure-loader-size, 6.25rem);
+    block-size: var(--kds-secure-loader-size, 6.25rem);
 }
 
-/* ========================================
-   Form Inputs (Material Design 3)
-   ======================================== */
+.kds-secure-loader-ring circle {
+    fill: none;
+    stroke: var(--kds-color-primary-main);
+    stroke-width: 2;
+    stroke-linecap: round;
+    /* circunferencia = 2π·20.2 ≈ 126.92; arco visible 80 (~63%) + hueco 46.92 */
+    stroke-dasharray: 80 46.92;
+    animation: kds-secure-loader-dash 1.2s linear infinite;
+}
 
-/* Form labels */
-.field label,
-.kds-form-label {
-    font-size: 14px;
+@keyframes kds-secure-loader-dash {
+    to {
+        stroke-dashoffset: -126.92;
+    }
+}
+
+/* Candado centrado sobre el anillo (~0.3 del diámetro). Centrado explícito
+   (top/left 50% + translate) para que no dependa del grid ni se recorte. */
+.kds-secure-loader-lock {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--kds-color-text-secondary);
+    font-size: calc(var(--kds-secure-loader-size, 6.25rem) * 0.3);
+    line-height: 1;
+    pointer-events: none;
+}
+
+/* ========================================
+   KDS COPY BUTTON
+   Chip compacto que muestra un valor + icono copy y lo copia al click.
+   Acción inline (distinto de KdsCopyRow). Look del copy button de khenshin.
+   ======================================== */
+
+.kds-copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-0-25) var(--kds-spacing-1-5);
+    /* No usar el alto de botón táctil de BeerCSS (~44px): es un chip compacto,
+       su alto lo define el contenido + padding. */
+    block-size: auto;
+    min-block-size: 0;
+    border: none;
+    border-radius: var(--kds-radius-button);
+    background: var(--kds-alert-info-bg);
+    color: var(--kds-color-info-dark);
+    font-family: var(--kds-font-family-secondary);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    cursor: pointer;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard),
+                color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+/* active = hover: sin el aro de focus/active (outline morado de BeerCSS). */
+.kds-copy-button:focus,
+.kds-copy-button:focus-visible,
+.kds-copy-button:active {
+    outline: none;
+}
+
+/* value y copiedText se apilan en la MISMA celda de grid: la celda toma el
+   ancho del texto más largo, por lo que el botón conserva su ancho al alternar
+   entre "valor" y "copiado" (sin reflow). */
+.kds-copy-button-label {
+    display: inline-grid;
+}
+
+.kds-copy-button-value,
+.kds-copy-button-copied {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+}
+
+/* Estado por defecto: visible el valor, oculto (pero ocupando espacio) el copiado */
+.kds-copy-button-copied {
+    visibility: hidden;
+}
+
+/* Al copiar se invierte la visibilidad; el ancho no cambia */
+.kds-copy-button.copied .kds-copy-button-value {
+    visibility: hidden;
+}
+
+.kds-copy-button.copied .kds-copy-button-copied {
+    visibility: visible;
+}
+
+.kds-copy-button .material-symbols-outlined {
+    font-size: 1rem;
+    color: var(--kds-color-info-main);
+    flex-shrink: 0;
+}
+
+/* Dark mode: info-dark text is near-invisible on the dark translucent chip.
+   Use the alert info text token (light blue in dark), same pattern as KdsAlert;
+   the copied state already uses alert-success-text and adapts on its own. */
+[data-theme="dark"] .kds-copy-button {
+    color: var(--kds-alert-info-text);
+}
+
+[data-theme="dark"] .kds-copy-button .material-symbols-outlined {
+    color: var(--kds-alert-info-text);
+}
+
+.kds-copy-button.copied {
+    background: var(--kds-alert-success-bg);
+    color: var(--kds-alert-success-text);
+    animation: kds-copy-button-pulse var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+.kds-copy-button.copied .material-symbols-outlined {
+    color: var(--kds-color-success-main);
+    /* el check entra con un pop al copiar */
+    animation: kds-copy-button-pop var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+@keyframes kds-copy-button-pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.04);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes kds-copy-button-pop {
+    0% {
+        transform: scale(0.3);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1.25);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+/* ========================================
+   Link Styles
+   ======================================== */
+
+/* Explicit link class */
+.kds-link {
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-link:hover {
+    color: var(--kds-color-primary-dark);
+    text-decoration: underline;
+}
+
+/* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
+[data-theme="dark"] .kds-link:hover {
+    color: var(--kds-color-primary-light);
+}
+
+/* Contextual links inside cards and stage forms */
+.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]),
+.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]),
+label.checkbox a:not(.kds-btn):not([class*="kds-btn"]),
+label.radio a:not(.kds-btn):not([class*="kds-btn"]) {
+    color: var(--kds-color-primary-main);
+    text-decoration: none;
+    transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
+.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
+label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
+label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
+    color: var(--kds-color-primary-dark);
+    text-decoration: underline;
+}
+
+/* Dark: hover must lighten (primary-dark is near-invisible on a dark surface). */
+[data-theme="dark"] .kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
+[data-theme="dark"] .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
+[data-theme="dark"] label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
+[data-theme="dark"] label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
+    color: var(--kds-color-primary-light);
+}
+
+/* ========================================
+   Flex Layout System (Body + Container + Sidebar)
+   ======================================== */
+
+/* Body flex-column layout */
+body.kds-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+}
+
+/* Layout container (flex-row) - below header */
+.kds-layout-container {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
+}
+/* ========================================
+   Footer Customization
+   ======================================== */
+
+footer.primary {
+    background: var(--primary);
+    padding: var(--kds-spacing-4) var(--kds-spacing-3);
+    color: var(--on-primary);
+}
+
+footer.primary h6 {
+    color: var(--on-primary);
+    font-weight: var(--kds-font-weight-semibold);
+    margin-bottom: var(--kds-spacing-2);
+}
+
+footer.primary a {
+    color: var(--on-primary);
+    text-decoration: none;
+    display: block;
+    padding: var(--kds-spacing-0-5) 0;
+    transition: opacity var(--kds-transition-shorter) var(--kds-easing-standard);
+    text-align: center;
+}
+
+footer.primary a:hover {
+    opacity: 0.8;
+}
+
+/* ========================================
+   Form Inputs (Material Design 3)
+   ======================================== */
+
+/* Form labels */
+.field label,
+.kds-form-label {
+    font-size: 14px;
     font-weight: 500;
     color: var(--kds-color-text-primary);
     margin-bottom: 8px;
@@ -2130,6 +2716,16 @@ footer.primary a:hover {
     margin-right: var(--kds-spacing-2);
 }
 
+/* Ícono(s) en color primary. Para íconos MUI/SVG dentro del scope que, por el reset
+   `.kds-theme-root svg { fill: currentColor }`, terminan heredando el color de texto
+   (#333) en vez de su color propio — el `color="primary"` de MUI no le gana al contexto.
+   Aplica al contenedor y a sus i/svg hijos. */
+.kds-icon-primary,
+.kds-icon-primary i,
+.kds-icon-primary svg {
+    color: var(--kds-color-primary-main);
+}
+
 /* Section title icon */
 .kds-stage-section-title i {
     vertical-align: middle;
@@ -2144,7 +2740,8 @@ footer.primary a:hover {
 /* === VARIABLES GLOBALES === */
 :root,
 body.light,
-body.dark {
+body.dark,
+[data-theme="dark"] {
   --primary: var(--kds-color-primary-main);          /* Purple Khipu - Focus */
   --outline: var(--kds-color-input-enabled-border);  /* Gris normal - Unfocused */
   --error: var(--kds-color-error-main);              /* Rojo - Invalid */
@@ -2172,6 +2769,14 @@ body.dark {
   padding-block-start: 1.5rem;
 }
 
+/* Label en reposo (estado "abajo", como placeholder): font-size menor al 1rem de BeerCSS
+   para que un label largo no estorbe con un ícono (prefix/suffix) del input. Token sm
+   (13–14px, siempre < 1rem del input incluso en desktop). Al flotar, BeerCSS lo reduce a
+   .75rem con mayor especificidad, así que esto solo afecta el reposo. */
+.field.label > label {
+  font-size: var(--kds-font-size-sm);
+}
+
 /* ==========================================
    NOTCH VISIBILITY (opacity)
    ========================================== */
@@ -2293,6 +2898,23 @@ body.dark {
   color: var(--error);  /* Rojo error */
 }
 
+/* ==========================================
+   PASSWORD REVEAL TOGGLE (KdsTextField `revealable`)
+   El <a role="button"> reusa el posicionamiento de icono de BeerCSS
+   (.field > a, pointer-events: all). Aquí solo: color del icono
+   (on-surface-variant) y un focus ring accesible para el toggle
+   navegable por teclado (BeerCSS hace `outline: inherit` en <a>).
+   ========================================== */
+.field > a.kds-field-reveal {
+  color: var(--on-surface-variant);
+}
+
+.field > a.kds-field-reveal:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
 /* ==========================================
    LABEL COLOR
    Mantener sincronizado con border
@@ -2303,9 +2925,9 @@ body.dark {
   color: var(--kds-color-text-secondary);
 }
 
-/* Hover SIN focus: más oscuro (70% opacity) */
+/* Hover SIN focus: máxima emphasis (adapta a blanco en dark) */
 .field.label:hover:not(:focus-within) > label {
-  color: rgba(0, 0, 0, 0.7);
+  color: var(--kds-color-text-primary);
 }
 
 /* Focus: primary purple (BeerCSS ya lo hace, pero aseguramos) */
@@ -2400,6 +3022,71 @@ body.dark {
     display: inline-flex;
 }
 
+/* ========================================
+   Radix Tooltip (.kds-tooltip)
+   Espejo de `.tooltip` pero para popovers de Radix:
+   bg oscuro, texto blanco, sombra + animación fade/slide direccional.
+   ======================================== */
+
+.kds-tooltip {
+    background-color: var(--kds-color-text-primary);
+    color: var(--kds-color-background-paper);
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    border-radius: var(--kds-radius-sm);
+    padding: var(--kds-spacing-0-75) var(--kds-spacing-1-5);
+    box-shadow: var(--kds-shadow-4);
+    max-width: 280px;
+    z-index: var(--kds-z-index-tooltip, 1500);
+    user-select: none;
+    /* Animación direccional según Radix data-side — coordinada con copy-row
+       (cubic-bezier 0.2, 0.8, 0.2, 1) para un feel consistente del DS. */
+    animation-duration: 240ms;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+    will-change: transform, opacity;
+}
+
+.kds-tooltip[data-state='closed'] {
+    animation-duration: 140ms;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+/* Direccional según data-side (Radix añade el attr en runtime).
+   Cada lado entra desde su dirección con ~8px de offset (más visible que 4px). */
+.kds-tooltip[data-side='top'][data-state='delayed-open'],
+.kds-tooltip[data-side='top'][data-state='instant-open']    { animation-name: kds-tooltip-in-top; }
+.kds-tooltip[data-side='bottom'][data-state='delayed-open'],
+.kds-tooltip[data-side='bottom'][data-state='instant-open'] { animation-name: kds-tooltip-in-bottom; }
+.kds-tooltip[data-side='left'][data-state='delayed-open'],
+.kds-tooltip[data-side='left'][data-state='instant-open']   { animation-name: kds-tooltip-in-left; }
+.kds-tooltip[data-side='right'][data-state='delayed-open'],
+.kds-tooltip[data-side='right'][data-state='instant-open']  { animation-name: kds-tooltip-in-right; }
+
+/* Fallback cuando no hay data-side resuelto aún */
+.kds-tooltip[data-state='delayed-open']:not([data-side]),
+.kds-tooltip[data-state='instant-open']:not([data-side]) {
+    animation-name: kds-tooltip-in-top;
+}
+
+.kds-tooltip[data-state='closed'] { animation-name: kds-tooltip-out; }
+
+@keyframes kds-tooltip-in-top    { from { opacity: 0; transform: translateY(8px)  scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-bottom { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-left   { from { opacity: 0; transform: translateX(8px)  scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes kds-tooltip-in-right  { from { opacity: 0; transform: translateX(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
+
+@keyframes kds-tooltip-out {
+    from { opacity: 1; transform: none; }
+    to   { opacity: 0; transform: scale(0.96); }
+}
+
+/* Arrow (SVG path generado por Radix) */
+.kds-tooltip-arrow {
+    fill: var(--kds-color-text-primary);
+}
+
 /* ========================================
    Material Symbols Icon Sizing
    ======================================== */
@@ -2410,8 +3097,13 @@ body.dark {
         'wght' 400,
         'GRAD' 0,
         'opsz' 24;
-    min-width: 30px;
-    min-height: 30px;
+    /* La caja debe seguir al font-size (1em): una caja fija (30px, o el --_size de Beer via
+       overflow:hidden en `i`) recorta los glifos mayores y descentra los menores junto a texto. */
+    width: 1em;
+    height: 1em;
+    min-width: 1em;
+    min-height: 1em;
+    line-height: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2434,6 +3126,16 @@ body.dark {
     width: 100%;
 }
 
+/* Truncado en una línea con ellipsis. Incluye min-width:0 para que funcione
+   dentro de contenedores flex/grid (el ítem puede encogerse por debajo de su
+   contenido). Útil para nombres/asuntos largos en headers y filas. */
+.kds-truncate {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .kds-max-w-sm {
     max-width: 400px;
 }
@@ -2477,6 +3179,11 @@ body.dark {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-3);
+    /* Reset del fieldset nativo: sin borde/padding/margin por defecto del navegador. */
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
 }
 
 /* Checkbox Label - BeerCSS override */
@@ -2488,7 +3195,7 @@ label.radio {
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
-    font-size: 16px;
+    font-size: var(--kds-font-size-sm);
     line-height: 1.5;
     color: var(--kds-color-text-primary);
 }
@@ -2526,6 +3233,42 @@ label.radio:has(input:disabled) {
     opacity: 0.6;
 }
 
+/* ========================================
+   RADIO GROUP — variante card (.kds-radio-group--card)
+   Cada opción como fila con borde (estilo selección de banco/cuenta),
+   manteniendo el control radio. Hover + opción seleccionada resaltada.
+   ======================================== */
+.kds-radio-group--card {
+    gap: var(--kds-spacing-2);
+}
+
+.kds-radio-group--card label.radio {
+    gap: var(--kds-spacing-1-5);
+    /* Vertical con un poco más de aire; horizontal reducido para pegar el radio a la izquierda. */
+    padding: var(--kds-spacing-2) var(--kds-spacing-1-5);
+    /* Bordes con los valores del bank selector. */
+    border: 1px solid var(--kds-color-border-subtle);
+    border-radius: var(--kds-radius-card);
+    background: var(--kds-color-surface);
+    transition: border-color 0.2s, background 0.2s;
+}
+
+/* Leve separación extra entre el radio y el texto de la opción. */
+.kds-radio-group--card label.radio span {
+    margin-left: var(--kds-spacing-0-5);
+}
+
+.kds-radio-group--card label.radio:hover {
+    border-color: var(--kds-color-border-default);
+}
+
+/* Seleccionada: poco color primario — solo un fondo faint sutil + borde gris
+   (el punto del radio ya comunica la selección). */
+.kds-radio-group--card label.radio:has(input:checked) {
+    border-color: var(--kds-color-border-default);
+    background: var(--kds-color-primary-faint);
+}
+
 /* ========================================
    ONBOARDING COMPONENTS
    Multi-stage onboarding flow with form validation
@@ -2722,7 +3465,7 @@ dialog.modal .field.border:focus-within {
     background: var(--kds-accordion-bg-open);
     font-size: var(--kds-font-size-sm);
     line-height: 1.6;
-    color: #374151;
+    color: var(--kds-color-text-primary);
 }
 
 .kds-contract-accordion-content h4 {
@@ -3023,19 +3766,17 @@ footer > .kds-container-center {
     display: flex;
     align-items: center;
     gap: var(--kds-spacing-1);
-    padding: var(--kds-spacing-2);
+    /* Padding compacto: vertical spacing-1 (8px), horizontal spacing-2 (16px). */
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
     border-radius: var(--kds-radius-md);
     border: 1px solid;
     font-family: var(--kds-font-family-primary);
     min-width: 0;
-    flex: 1 1 100%;
-}
-
-@media (min-width: 768px) {
-    .kds-alert {
-        padding: var(--kds-spacing-2);
-        flex: 1 1 auto;
-    }
+    /* Banner: ocupa siempre el ancho del contenedor. width explícito porque como
+       flex item de una columna con align-items:center el cross-axis no se estira.
+       Sin flex-grow para no estirarse verticalmente en contenedores flex-column. */
+    width: 100%;
+    flex: 0 1 auto;
 }
 
 .kds-alert:last-child {
@@ -3061,7 +3802,9 @@ footer > .kds-container-center {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-semibold);
     line-height: var(--kds-line-height-normal);
-    margin-bottom: var(--kds-spacing-0-5);
+    /* Solo margin-bottom: el padding del alert da el espaciado. Reset del resto para
+       evitar el margin-block que BeerCSS aplica a <p> dentro del scope. */
+    margin: 0 0 var(--kds-spacing-0-5);
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -3071,6 +3814,9 @@ footer > .kds-container-center {
     font-size: var(--kds-font-size-sm);
     font-weight: var(--kds-font-weight-regular);
     line-height: var(--kds-line-height-relaxed);
+    /* Sin margen propio: el padding del alert es el único espaciado (evita el
+       margin-block de <p> de BeerCSS dentro del scope). */
+    margin: 0;
     word-break: normal;
     overflow-wrap: break-word;
 }
@@ -3116,11 +3862,58 @@ footer > .kds-container-center {
     color: var(--kds-color-error-dark);
 }
 
-/* Lists inside alerts */
-.kds-alert ul {
-    padding-left: var(--kds-spacing-2);
-    margin-top: var(--kds-spacing-1);
-    margin-bottom: 0;
+/* Dark mode: the semantic *-dark shades used for text/icons above are too dark
+   on the dark translucent alert surfaces (poor visibility). Use the alert
+   *-text tokens (light shades in dark) so title, description and icon stay
+   legible. Title/description inherit this color. Additive — light unchanged. */
+[data-theme="dark"] .kds-alert.kds-info,
+[data-theme="dark"] .kds-alert.kds-info .kds-alert-icon {
+    color: var(--kds-alert-info-text);
+}
+[data-theme="dark"] .kds-alert.kds-success,
+[data-theme="dark"] .kds-alert.kds-success .kds-alert-icon {
+    color: var(--kds-alert-success-text);
+}
+[data-theme="dark"] .kds-alert.kds-warning,
+[data-theme="dark"] .kds-alert.kds-warning .kds-alert-icon {
+    color: var(--kds-alert-warning-text);
+}
+[data-theme="dark"] .kds-alert.kds-error,
+[data-theme="dark"] .kds-alert.kds-error .kds-alert-icon {
+    color: var(--kds-alert-error-text);
+}
+
+/* Close button — icon-only, discreto, no usa kds-btn para no romper el flex layout del alert */
+.kds-alert-close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.kds-alert-close:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.kds-alert-close i {
+    font-size: 18px;
+    line-height: 1;
+}
+
+/* Lists inside alerts */
+.kds-alert ul {
+    padding-left: var(--kds-spacing-2);
+    margin-top: var(--kds-spacing-1);
+    margin-bottom: 0;
 }
 
 /* Links inside alerts */
@@ -3718,6 +4511,11 @@ footer > .kds-container-center {
     color: var(--kds-color-primary-dark);
 }
 
+/* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
+[data-theme="dark"] .page-card-link:hover {
+    color: var(--kds-color-primary-light);
+}
+
 .page-card-link i {
     font-size: var(--kds-font-size-xl);
     transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
@@ -4112,6 +4910,14 @@ dialog#surveyModal button.circle {
     text-align: center;
 }
 
+.kds-text-left {
+    text-align: left;
+}
+
+.kds-text-right {
+    text-align: right;
+}
+
 .kds-text-underline {
     text-decoration: underline;
 }
@@ -4124,10 +4930,62 @@ dialog#surveyModal button.circle {
     color: var(--on-surface-variant);
 }
 
+.kds-text-primary {
+    color: var(--kds-color-primary-main);
+}
+
 .kds-text-sm {
     font-size: var(--kds-font-size-sm);
 }
 
+/* ── Font-size scale utilities (additive — opt-in companions to .kds-text-sm) ── */
+.kds-text-base {
+    font-size: var(--kds-font-size-base);
+}
+
+.kds-text-lg {
+    font-size: var(--kds-font-size-lg);
+}
+
+.kds-text-xl {
+    font-size: var(--kds-font-size-xl);
+}
+
+.kds-text-2xl {
+    font-size: var(--kds-font-size-2xl);
+}
+
+/* ── Font-weight utilities ── */
+.kds-fw-regular {
+    font-weight: var(--kds-font-weight-regular);
+}
+
+.kds-fw-medium {
+    font-weight: var(--kds-font-weight-medium);
+}
+
+.kds-fw-semibold {
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-fw-bold {
+    font-weight: var(--kds-font-weight-bold);
+}
+
+/* ── Text-transform utilities ── */
+.kds-text-transform-none {
+    text-transform: none;
+}
+
+/* ── Soft background utilities (semantic muted backgrounds for callouts) ── */
+.kds-bg-warning-soft {
+    background-color: var(--kds-color-warning-soft);
+}
+
+.kds-bg-info-soft {
+    background-color: var(--kds-color-info-soft);
+}
+
 /* ── Typography variants ── */
 .kds-text-display1 {
     font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
@@ -4205,7 +5063,50 @@ dialog#surveyModal button.circle {
     text-transform: uppercase;
 }
 
+/* KV label — label del par clave↔valor (letra del dt de .kds-kv: "PAGO A" / "ASUNTO").
+   line-height tight: en pares apilados el relaxed infla la separación de tinta. */
+.kds-text-kv-label {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-regular);
+    line-height: var(--kds-line-height-tight);
+    letter-spacing: normal;
+    text-transform: uppercase;
+    color: var(--kds-color-text-secondary);
+}
+
+/* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro).
+   line-height tight: se usa en pares apilados y el relaxed infla la separación. */
+.kds-text-value {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+    line-height: var(--kds-line-height-tight);
+    color: var(--kds-color-gray-800);
+}
+
+/* Code — texto tipo código/referencia (mono, uppercase, gris), como el "CÓDIGO" del header. */
+.kds-text-code {
+    font-family: var(--kds-font-family-mono);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-regular);
+    letter-spacing: var(--kds-letter-spacing-wider);
+    font-variant-numeric: tabular-nums;
+    color: var(--kds-color-gray-400);
+    text-transform: uppercase;
+}
+
+/* Caption — texto muy chico y liviano para pie de página (ej. número de versión). */
+.kds-text-caption {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-2xs);
+    font-weight: var(--kds-font-weight-regular);
+    line-height: var(--kds-line-height-normal);
+    color: var(--kds-color-gray-400);
+}
+
 .kds-text-link {
+    cursor: pointer;
     font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
     font-size: inherit;
     font-weight: var(--kds-font-weight-medium, 500);
@@ -4218,6 +5119,12 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-primary-dark, #5B3179);
 }
 
+/* Inline emphasis: bold weight only, inherits size/color/family from context so it
+   works as a highlighted fragment inside any other variant (body, heading, etc.). */
+.kds-text-strong {
+    font-weight: var(--kds-font-weight-bold, 700);
+}
+
 /* Display utilities */
 .kds-hidden {
     display: none;
@@ -4243,13 +5150,13 @@ dialog#surveyModal button.circle {
 
 /* Color utilities (solo para casos específicos de demo) */
 .kds-text-warning {
-    color: #92400E;
+    color: var(--kds-alert-warning-text);   /* #663C00 light / #FFB74D dark */
 }
 
 .kds-list-warning {
     margin: 0;
     padding-left: var(--kds-spacing-5);
-    color: #78350F;
+    color: var(--kds-alert-warning-text);    /* #663C00 light / #FFB74D dark */
 }
 
 /* ========================================
@@ -4307,7 +5214,25 @@ dialog#surveyModal button.circle {
     flex-shrink: 0;
 }
 
+/* Versión de la app anclada al fondo del card body (flex column): margin-top
+   auto absorbe el espacio libre; el padding garantiza respiro mínimo cuando el
+   contenido llena la card. */
+.kds-card-version {
+    margin-top: auto;
+    padding-top: var(--kds-spacing-2);
+    text-align: center;
+}
+
+/* Separador vertical (entre chips/logos hermanos en una fila). */
+.kds-vr {
+    width: 1px;
+    height: var(--kds-spacing-3);
+    background: var(--kds-color-divider);
+    flex: 0 0 auto;
+}
+
 /* Gap utilities */
+.kds-gap-0-25 { gap: var(--kds-spacing-0-25); }
 .kds-gap-1 { gap: var(--kds-spacing-1); }
 .kds-gap-2 { gap: var(--kds-spacing-2); }
 .kds-gap-3 { gap: var(--kds-spacing-3); }
@@ -4338,7 +5263,9 @@ dialog#surveyModal button.circle {
    ======================================== */
 
 .kds-badge {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     padding: 2px 8px;
     border-radius: var(--kds-radius-sm);
     font-size: var(--kds-font-size-xs);
@@ -4346,6 +5273,40 @@ dialog#surveyModal button.circle {
     line-height: 1.5;
 }
 
+/* Icon prefix inside chip — small inline icon */
+.kds-badge > i.material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+}
+
+/* Deletable chip close button — discreto, sin kds-btn (eso lo agrandaba ridículo) */
+.kds-badge-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: -2px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.15s, background-color 0.15s;
+}
+
+.kds-badge-close:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.kds-badge-close i {
+    font-size: 14px;
+    line-height: 1;
+}
+
 .kds-badge.success {
     background-color: var(--kds-color-success-container);
     color: var(--kds-color-success-dark);
@@ -4371,6 +5332,30 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-primary-dark);
 }
 
+/* Dark: semantic *-dark text is near-invisible on dark surfaces (and the
+   *-container background tokens are not generated). Use the alert bg/text
+   pairs, which are dark-aware; primary uses selected/light. */
+[data-theme="dark"] .kds-badge.success {
+    background-color: var(--kds-alert-success-bg);
+    color: var(--kds-alert-success-text);
+}
+[data-theme="dark"] .kds-badge.error {
+    background-color: var(--kds-alert-error-bg);
+    color: var(--kds-alert-error-text);
+}
+[data-theme="dark"] .kds-badge.warning {
+    background-color: var(--kds-alert-warning-bg);
+    color: var(--kds-alert-warning-text);
+}
+[data-theme="dark"] .kds-badge.info {
+    background-color: var(--kds-alert-info-bg);
+    color: var(--kds-alert-info-text);
+}
+[data-theme="dark"] .kds-badge.primary {
+    background-color: var(--kds-color-primary-selected);
+    color: var(--kds-color-primary-light);
+}
+
 /* ========================================
    DIVIDER WITH TEXT
    Separator with optional text
@@ -4557,21 +5542,46 @@ dialog#surveyModal button.circle {
     flex-shrink: 0;
 }
 
-/* Merchant tile with logo variant */
+/* Merchant tile with logo variant — el logo (avatar del comercio) llena TODO el tile.
+   `display: block` evita el desborde del auto-grid; `overflow: hidden` recorta la imagen
+   a las esquinas redondeadas del tile. La imagen va CUADRADA (sin border-radius propio):
+   solo el contenedor recorta, evitando el hairline sub-pixel del doble redondeo. El fondo
+   se deja transparente bajo el logo como respaldo (no debe verse púrpura en los bordes). */
 .kds-merchant-tile.logo {
-    padding: var(--kds-spacing-0-5);
+    padding: 0;
+    display: block;
+    overflow: hidden;
+    background: transparent;
 }
 
 .kds-merchant-tile.logo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: var(--kds-radius-md);
+    border-radius: 0;
+    display: block;
+}
+
+/* Variante para logos que traen su propio marco/forma (logos de comercio/servicio,
+   no fotos): `contain` + padding para que el logo entre completo sin recortar sus
+   esquinas. Opt-in: pasar className="kds-merchant-tile--contain". */
+.kds-merchant-tile.logo.kds-merchant-tile--contain {
+    padding: var(--kds-spacing-1);
+}
+.kds-merchant-tile.logo.kds-merchant-tile--contain img {
+    object-fit: contain;
 }
 
 .kds-merchant-meta {
     display: flex;
     flex-direction: column;
+    gap: var(--kds-spacing-0-5);
+}
+
+/* El meta controla su propio espaciado: anula el margin sibling de BeerCSS
+   (`… + :is(p,h*,…) { margin-block-start: 1rem }`) que separaba de más las líneas. */
+.kds-merchant-meta > * {
+    margin-block: 0 !important;
 }
 
 .kds-merchant-label {
@@ -4624,6 +5634,11 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-text-primary);
 }
 
+/* Opt-in color modifier — switches the value to the LigoPay/khipu-blue tone */
+.kds-amount-value--info {
+    color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
 .kds-amount-value small {
     font-size: 18px;
     font-weight: 500;
@@ -4830,6 +5845,26 @@ dialog#surveyModal button.circle {
     background: var(--kds-color-hover-bg);
 }
 
+/* BeerCSS forces `border-radius: .5rem !important` on button:active
+   (:is(.button,button):not(.chip):active — specificity 0,3,0). Keep each
+   row-button's own radius in the active state: doubled class matches that
+   specificity and this file loads after beer.css, so these win. */
+.kds-bank-row.kds-bank-row:active {
+    border-radius: var(--kds-radius-card) !important;
+}
+.kds-qr-row.kds-qr-row:active {
+    border-radius: var(--kds-radius-card) !important;
+}
+.kds-copy-row.kds-copy-row:active {
+    border-radius: var(--kds-radius-row) !important;
+}
+.kds-copyable-table-row.kds-copyable-table-row:active {
+    border-radius: var(--kds-spacing-0-75) !important;
+}
+.kds-bank-item.kds-bank-item:active {
+    border-radius: var(--kds-radius-lg) !important;
+}
+
 .kds-bank-row-logo {
     width: 40px;
     height: 40px;
@@ -4887,7 +5922,7 @@ dialog#surveyModal button.circle {
     display: flex;
     gap: var(--kds-spacing-1-25);
     padding: var(--kds-spacing-2);
-    background: #FFFFFF;
+    background: var(--kds-color-background-default);   /* #FFF light / #181818 dark */
     border-top: 1px solid var(--kds-color-divider);
     padding-bottom: calc(var(--kds-spacing-2) + env(safe-area-inset-bottom));
     z-index: 100;
@@ -4909,6 +5944,144 @@ dialog#surveyModal button.circle {
     box-shadow: 0 -4px 16px rgba(16,24,40,.08);
 }
 
+/* ========================================
+   08b - FAB (.kds-fab)
+   Circular, icon-only floating action button with an animated hide state.
+   Presentational: drive `.kds-fab--hidden` from useHideOnScroll for scroll-away.
+   ======================================== */
+
+.kds-fab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-spacing-5);
+    height: var(--kds-spacing-5);
+    padding: 0;
+    border: none;
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-background-paper);
+    color: var(--kds-color-text-primary);
+    box-shadow: var(--kds-shadow-elevated);
+    cursor: pointer;
+    z-index: 100;
+    /* Neutralize native button rendering so the pressed state doesn't flash a square. */
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity var(--kds-transition-short) ease, transform var(--kds-transition-short) ease,
+                background-color var(--kds-transition-shorter) ease;
+}
+
+/* Keep the circle in EVERY interaction state. BeerCSS forces
+   `border-radius: .5rem !important` on button:active (specificity 0,3,0), so
+   plain specificity is not enough — match it with a doubled class AND
+   !important; this file loads after beer.css, so these win. */
+button.kds-fab.kds-fab,
+button.kds-fab.kds-fab:hover,
+button.kds-fab.kds-fab:active,
+button.kds-fab.kds-fab.active,
+button.kds-fab.kds-fab:focus,
+button.kds-fab.kds-fab:focus-visible {
+    border-radius: var(--kds-radius-full) !important;
+    background: var(--kds-color-background-paper);
+}
+
+button.kds-fab:hover:not(:disabled) {
+    background: var(--kds-color-background-muted);
+}
+
+/* Subtle press feedback that preserves the round shape. */
+button.kds-fab:active:not(:disabled) {
+    transform: translateY(var(--kds-spacing-0-25));
+}
+
+
+
+.kds-fab > i.material-symbols-outlined {
+    font-size: var(--kds-spacing-button-icon-size);
+    line-height: 1;
+}
+
+/* Pinned corners — fixed to the viewport (stays visible on scroll-up, iframe-friendly).
+   Horizontally the top-right FAB hugs the right edge of the centered content column set via
+   `--kds-fab-column-width` (default 100% → viewport edge). The consumer sets that var to its
+   widget width so on desktop the FAB overlaps the header's top-right corner instead of drifting
+   to the far viewport edge. `max(...)` keeps at least a token inset on narrow (mobile) viewports. */
+.kds-fab--top-right,
+.kds-fab--top-left,
+.kds-fab--bottom-right,
+.kds-fab--bottom-left {
+    position: fixed;
+}
+
+.kds-fab--top-right {
+    top: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--top-left {
+    top: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-right {
+    bottom: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-left {
+    bottom: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+/* Desktop: nudge the top-right FAB up so it sits partially over the header's top edge. */
+@media (min-width: 768px) {
+    .kds-fab--top-right {
+        top: var(--kds-spacing-1);
+    }
+}
+
+/* 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-fab--corner {
+    --kds-fab-inset: 5px;
+    position: fixed;
+    top: var(--kds-fab-inset);
+    right: var(--kds-fab-inset);
+}
+
+@media (min-width: 768px) {
+    .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-fab--hidden {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--kds-spacing-1))) scale(0.9);
+    pointer-events: none;
+}
+
+.kds-fab--bottom-right.kds-fab--hidden,
+.kds-fab--bottom-left.kds-fab--hidden {
+    transform: translateY(var(--kds-spacing-1)) scale(0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-fab {
+        transition: opacity var(--kds-transition-short) ease;
+    }
+
+    .kds-fab--hidden {
+        transform: none;
+    }
+}
+
 /* ========================================
    09 - SUCCESS MARK (.kds-success-mark)
    Large success icon for completion screens
@@ -4988,22 +6161,22 @@ dialog#surveyModal button.circle {
     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;
 }
 
-@media (max-width: 767px) {
-    .kds-card-elevated > .kds-secure-footer {
-        display: flex;
-    }
-    .kds-screen > .kds-secure-footer {
-        display: none;
-    }
+.kds-screen > form {
+    margin-block-start: 0 !important;
+}
 
-    .kds-screen > form {
-        margin-block-start: 0 !important;
-    }
+/* 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));
 }
 
 .kds-secure-footer-lock {
@@ -5025,6 +6198,32 @@ dialog#surveyModal button.circle {
     display: block;
     object-fit: contain;
     overflow: visible;
+    /* 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") */
+.kds-secure-footer-sep {
+    width: 1px;
+    height: 0.85em;
+    background: currentColor;
+    opacity: 0.35;
+    flex: 0 0 auto;
+}
+
+/* Logo del PSP (proveedor de pagos): lo provee el consumidor, lo alineamos al mismo
+   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;
 }
 
 .kds-secure-footer-code {
@@ -5040,6 +6239,11 @@ dialog#surveyModal button.circle {
     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);
@@ -5049,16 +6253,36 @@ dialog#surveyModal button.circle {
     gap: 0;
 }
 
-.kds-expand-toggle:hover {
+.kds-expand-toggle:hover,
+.kds-expand-toggle:focus,
+.kds-expand-toggle:active {
     background: transparent;
+    outline: none;
+    box-shadow: none;
 }
 
-.kds-expand-toggle:hover span {
+.kds-expand-toggle:hover span,
+.kds-expand-toggle:focus span,
+.kds-expand-toggle:active span {
     text-decoration: underline;
 }
 
 .kds-expand-toggle i {
     font-size: var(--kds-font-size-base);
+    /* BeerCSS estiliza el `i` bare como caja flex de 30px (height/width/min: 30px), que
+       inflaba el toggle y dejaba aire vertical de más alrededor del label. La achicamos a
+       1.25em MANTENIENDO el centrado flex de BeerCSS (display:flex/align/justify) — así el
+       caret queda compacto Y ópticamente centrado con el texto (no usar height:auto ni
+       line-height:1: descentran el glifo). */
+    width: 1.25em;
+    height: 1.25em;
+    min-width: 0;
+    min-height: 0;
+    /* Correccion optica: la tinta de expand_more vive en la zona alta del em, asi que
+       centrado geometrico contra el label (con ascendentes) se percibe montado; este
+       nudge lo baja al centro de las minusculas. No usar transform: lo pisa el rotate. */
+    position: relative;
+    top: 0.09em;
     transition: transform var(--kds-transition-shorter, 0.2s);
 }
 
@@ -5078,7 +6302,10 @@ dialog#surveyModal button.circle {
 }
 
 .kds-expand-panel.open {
-    max-height: 800px;
+    /* Fallback cap for no-JS consumers. With JS (React useExpandToggle / vanilla
+       initExpandToggle) the panel's inline max-height is set to its exact scrollHeight,
+       which overrides this and prevents clipping regardless of content length. */
+    max-height: 2000px;
     margin-top: 0;
 }
 
@@ -5196,13 +6423,27 @@ dialog#surveyModal button.circle {
 
 .kds-status-block {
     text-align: center;
-    padding: var(--kds-spacing-6) 0;
+    /* Padding vertical estándar: spacing-2 (16px), el mismo rhythm inter-elementos
+       que usan kds-btn-stack y kds-hr-dashed. NO usar spacing-6 (48px): genera
+       demasiado espacio cuando el bloque se compone con header/divider alrededor. */
+    padding: var(--kds-spacing-2) 0;
+}
+
+/* En el borde compartido con el card el rhythm lo aporta el padding del propio card:
+   como primer/último hijo directo el padding del bloque no debe sumarse al del padre. */
+.kds-card-elevated > .kds-status-block:first-child {
+    padding-top: 0;
+}
+
+.kds-card-elevated > .kds-status-block:last-child {
+    padding-bottom: 0;
 }
 
 .kds-status-block-icon {
     width: var(--kds-status-icon-size);
     height: var(--kds-status-icon-size);
-    margin: 0 auto var(--kds-spacing-3);
+    /* spacing-1 (8px) icono→título: elementos relacionados dentro del bloque. */
+    margin: 0 auto var(--kds-spacing-1);
     border-radius: var(--kds-radius-full);
     display: grid;
     place-items: center;
@@ -5215,15 +6456,22 @@ dialog#surveyModal button.circle {
 
 .kds-status-block-title {
     font-size: var(--kds-font-size-xl);
-    font-weight: var(--kds-font-weight-bold);
+    font-weight: var(--kds-font-weight-semibold);
     color: var(--kds-color-text-primary);
     margin: 0 0 var(--kds-spacing-1);
+    /* El reset global :where(h2) usa estas vars con !important; así se overridea. */
+    --kds-typography-h2-margin-block-end: var(--kds-spacing-1);
 }
 
 .kds-status-block-description {
     font-size: var(--kds-font-size-sm);
-    color: var(--kds-color-text-secondary);
+    /* Mismo color que el título: título y subtítulo parejos en resultados. */
+    color: var(--kds-color-text-primary);
     margin: 0;
+    /* !important: anula el auto-espaciado de hermanos de BeerCSS
+       (margin-block-start: 1rem, especificidad 0,5,1 imposible de igualar).
+       La separación título→descripción la da el margin-bottom del título. */
+    margin-top: 0 !important;
 }
 
 /* Variant: success */
@@ -5233,11 +6481,11 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-success-main);
 }
 
-/* Variant: pending (animated spinner) */
+/* Variant: pending (animated blue spinner, sin icono interno) */
 .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-primary-main);
+    border-top-color: var(--kds-color-info-main);
     animation: kds-spin 1s linear infinite;
 }
 
@@ -5255,7 +6503,9 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-error-main);
 }
 
-/* Variant: info */
+/* Variant: info — usar SIEMPRE con icon "info_i" (i minúscula sin glyph circular)
+   para que solo se vea nuestro círculo decorativo. Iconos como "info" tienen
+   su propio círculo built-in → causarían doble círculo. */
 .kds-status-block[data-status="info"] .kds-status-block-icon {
     background: var(--kds-color-info-soft);
     border: var(--kds-border-width-md) solid var(--kds-color-info-main);
@@ -5267,7 +6517,7 @@ dialog#surveyModal button.circle {
     text-align: left;
     display: flex;
     align-items: center;
-    gap: var(--kds-spacing-3);
+    gap: var(--kds-spacing-2);
     padding: var(--kds-spacing-1) 0;
 }
 
@@ -5309,6 +6559,9 @@ dialog#surveyModal button.circle {
 .kds-bottom-sheet {
     width: 100%;
     max-width: var(--kds-bottom-sheet-max-width);
+    max-height: 90dvh;
+    display: flex;
+    flex-direction: column;
     background: var(--kds-color-background-paper);
     border-radius: var(--kds-radius-2xl) var(--kds-radius-2xl) 0 0;
     padding: var(--kds-spacing-3-5) var(--kds-spacing-3) var(--kds-spacing-3);
@@ -5329,6 +6582,42 @@ dialog#surveyModal button.circle {
     background: var(--kds-color-divider);
 }
 
+/* Close button — top-right discreto, NO usa kds-btn (rompía el flex layout) */
+.kds-bottom-sheet-close {
+    position: absolute;
+    top: var(--kds-spacing-1);
+    right: var(--kds-spacing-1);
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--kds-color-text-secondary);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.kds-bottom-sheet-close:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.kds-bottom-sheet-close i {
+    font-size: 20px;
+    line-height: 1;
+}
+
+/* Body container — separa el content del title/actions */
+.kds-bottom-sheet-body {
+    text-align: left;
+    margin-top: var(--kds-spacing-1);
+    overflow-y: auto;
+    min-height: 0;
+}
+
 .kds-bottom-sheet-icon {
     font-size: var(--kds-font-size-4xl);
 }
@@ -5375,6 +6664,19 @@ dialog#surveyModal button.circle {
     to { opacity: 1; }
 }
 
+/* Botón con llenado progresivo (feedback visual de auto-cierre).
+   Duración parametrizable con --kds-fill-duration (default 12s). */
+.kds-btn-fill-progress {
+    background-image: linear-gradient(to right, var(--kds-color-primary-dark), var(--kds-color-primary-dark));
+    background-repeat: no-repeat;
+    background-size: 0% 100%;
+    animation: kds-btn-fill var(--kds-fill-duration, 12s) linear forwards;
+}
+
+@keyframes kds-btn-fill {
+    to { background-size: 100% 100%; }
+}
+
 @keyframes kds-rise {
     from { transform: translateY(var(--kds-spacing-2-5)); opacity: 0.4; }
     to { transform: none; opacity: 1; }
@@ -5476,6 +6778,65 @@ dialog#surveyModal button.circle {
 }
 
 
+/* ========================================
+   17 - HIGHLIGHTED FIELD (.kds-field-highlight)
+   Calls out an optional or conditional block of
+   fields inside a form. The colour lives in a
+   header band, never behind the fields: BeerCSS
+   floats the label ONTO the field outline (it cuts
+   the input with clip-path and redraws that
+   stretch of border in label::after), so anything
+   painted behind a field shows through the notch,
+   right under the label. Keeping the fields on the
+   page surface means they render exactly as they
+   do anywhere else in the form, with no override.
+   ======================================== */
+
+.kds-field-highlight {
+    padding-inline: var(--kds-field-highlight-padding);
+    padding-block-end: var(--kds-field-highlight-padding);
+    border: var(--kds-border-width-sm) dashed var(--kds-field-highlight-border);
+    border-radius: var(--kds-field-highlight-radius);
+}
+
+/* Optional — omit it and the fields sit alone in the box. Breaks out to the box
+   edges so it reads as a header band, then takes the box's own inset back as
+   padding: the eyebrow ends up flush with the fields below, and the band's
+   horizontal padding matches the fields' own. */
+.kds-field-highlight-header {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    margin-inline: calc(-1 * var(--kds-field-highlight-padding));
+    margin-block-end: var(--kds-field-highlight-padding);
+    padding-block: var(--kds-spacing-1-25);
+    padding-inline: var(--kds-field-highlight-padding);
+    background: var(--kds-field-highlight-bg);
+    border-start-start-radius: calc(
+        var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
+    );
+    border-start-end-radius: calc(
+        var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
+    );
+}
+
+.kds-field-highlight-eyebrow {
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-semibold);
+    letter-spacing: var(--kds-letter-spacing-widest);
+    line-height: 1.4;
+    text-transform: uppercase;
+    color: var(--kds-field-highlight-label);
+}
+
+/* The header already supplies the gap — the first field must not add its own */
+.kds-field-highlight > .kds-field-highlight-header + .kds-field-group,
+.kds-field-highlight > .kds-field-group:first-child {
+    margin-block-start: 0;
+}
+
+
 /* ========================================
    PAYMENT FLOW — DOMAIN COMPONENTS
    Invoice header, KV grid, dividers,
@@ -5562,6 +6923,30 @@ dialog#surveyModal button.circle {
     /* 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) */
@@ -5633,6 +7018,14 @@ dialog#surveyModal button.circle {
     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-invoice-collapsible > .kds-expand-toggle {
+    margin-top: var(--kds-spacing-2);
+}
+
 /* -- Invoice Summary -- */
 .kds-invoice-summary {
     display: flex;
@@ -5656,6 +7049,22 @@ div.kds-invoice-header,
     padding: 0;
     border-radius: 0;
     align-content: initial;
+    /* Override BeerCSS `header { min-height: ... }` — el header debe ajustarse a su
+       contenido (sigue el alto del merchant tile: 64px→50px al colapsar). Sin esto
+       quedaba un min-height fijo de 64px → hueco muerto debajo al colapsar en mobile. */
+    min-height: 0;
+}
+
+/* Mobile: center-align el header (merchant tile vs bloque monto+código) tanto
+   expandido como colapsado. Al quitar el logo del header, el bloque de texto quedaba
+   más bajo que el merchant tile y con `flex-start` dejaba hueco abajo; centrado los
+   alinea. CSS-only (no depende de la clase .is-collapsed, que el JS de collapse no setea). */
+@media (max-width: 767px) {
+    header.kds-invoice-header,
+    div.kds-invoice-header,
+    .kds-invoice-header {
+        align-items: center;
+    }
 }
 
 /* Reset BeerCSS sibling margin on <p> inside invoice header — specificity (0,4,1) ties BeerCSS, wins by source order */
@@ -5677,6 +7086,16 @@ div.kds-invoice-header,
     color: var(--kds-color-success-main);
 }
 
+/* Sufijo inline del monto, ej. "$25.000 por cargo" */
+.kds-invoice-amount small {
+    /* Spec kw-2: 14px / 700 / ls 0.4 — la altura de linea la da el propio monto (inline). */
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-bold);
+    letter-spacing: var(--kds-letter-spacing-wide);
+    color: var(--kds-color-text-secondary);
+    margin-left: var(--kds-spacing-0-5);
+}
+
 .kds-invoice-code {
     font-family: var(--kds-font-family-mono);
     font-size: var(--kds-font-size-xs);
@@ -5684,15 +7103,19 @@ div.kds-invoice-header,
     letter-spacing: var(--kds-letter-spacing-wider);
     font-variant-numeric: tabular-nums;
     color: var(--kds-color-gray-400);
-    text-transform: none;
+    text-transform: uppercase;
     margin: 0;
     margin-block: unset;
-    margin: var(--kds-spacing-1) 0;
+    display: flex;
+    gap: var(--kds-spacing-1-5);
 }
 
 .kds-invoice-code-value {
+    color: var(--kds-color-gray-400);
+}
+
+.kds-invoice-code-value--lowercase {
     text-transform: lowercase;
-    color: var(--kds-text-primary);
 }
 
 .kds-invoice-merchant {
@@ -5704,6 +7127,7 @@ div.kds-invoice-header,
     place-items: center;
     color: #fff;
     flex-shrink: 0;
+    overflow: hidden;
 }
 
 .kds-invoice-merchant i {
@@ -5716,6 +7140,12 @@ div.kds-invoice-header,
     color: var(--kds-color-text-primary);
 }
 
+/* Neutro oscuro para logos claros (detección de luminancia — KTUF-204). */
+.kds-invoice-merchant-neutral.dark {
+    background: var(--kds-color-gray-800);
+    border-color: var(--kds-color-gray-700);
+}
+
 .kds-invoice-merchant.initials {
     font-weight: 700;
     font-size: 11px;
@@ -5723,27 +7153,42 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-merchant img {
+    /* `contain` sobre el fondo neutro: el logo se muestra completo y las
+       transparencias no quedan sobre el color de marca (KTUF-204). */
     width: 100%;
     height: 100%;
-    object-fit: cover;
-    border-radius: var(--kds-radius-md);
+    object-fit: contain;
+    padding: var(--kds-spacing-0-5);
 }
 
 /* -- Card Title -- */
 .kds-card-title {
-    font-weight: 700;
+    font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-base);
     line-height: 1.5;
     letter-spacing: -0.31px;
     color: var(--kds-color-text-primary);
-    margin-bottom: var(--kds-spacing-2) !important;
+    /* sin !important: no hay regla de margin-bottom para h1 en BeerCSS que competir, y así un
+       consumidor puede anularlo (p.ej. FormTitle dentro de un Stack que ya da el espacio). */
+    margin-bottom: var(--kds-spacing-2);
+}
+
+/* Opt-in size modifiers (additive — do NOT change default 16/600) */
+.kds-card-title--lg {
+    font-size: var(--kds-font-size-xl);       /* 20px */
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-card-title--xl {
+    font-size: var(--kds-font-size-2xl);      /* 24px */
+    font-weight: var(--kds-font-weight-semibold);
 }
 
 /* -- Key-Value Grid -- */
 .kds-kv {
     display: grid;
     grid-template-columns: auto 1fr;
-    column-gap: var(--kds-spacing-1-5);
+    column-gap: var(--kds-spacing-1);
     align-items: baseline;
 }
 
@@ -5752,7 +7197,7 @@ div.kds-invoice-header,
     line-height: var(--kds-line-height-relaxed);
     letter-spacing: normal;
     color: var(--kds-color-text-secondary);
-    text-transform: none;
+    text-transform: uppercase;
     margin: 0;
 }
 
@@ -5769,6 +7214,31 @@ div.kds-invoice-header,
     text-overflow: ellipsis;
 }
 
+/* Dark: these primary-content texts use absolute gray-800/900 (near-black in
+   both modes) — switch to the adaptive text token so they read on dark cards.
+   Covers the invoice amount ($X.XXX), kv values (PAGO A / ASUNTO) and the
+   other gray-800 body texts. */
+[data-theme="dark"] .kds-invoice-amount,
+[data-theme="dark"] .kds-kv dd,
+[data-theme="dark"] .kds-text-value,
+[data-theme="dark"] .kds-share-copy {
+    color: var(--kds-color-text-primary);
+}
+
+/* -- Summary panel --
+   Recuadro de datos del pago en pantallas de resultado: contenido en columna
+   (gap spacing-2, típicamente pares kv) dentro de un borde sutil. */
+.kds-summary-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-2);
+    width: 100%;
+    padding: var(--kds-spacing-2);
+    border: var(--kds-border-width-sm) solid var(--kds-color-border-default);
+    border-radius: var(--kds-radius-card);
+    text-align: left;
+}
+
 /* -- Dividers -- */
 .kds-hr {
     height: 1px;
@@ -5788,16 +7258,28 @@ div.kds-invoice-header,
 .kds-detail-list {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-1-5);
+    /* spacing-2 entre grupos del detalle (separación estándar entre piezas de info
+       distintas, ej. "Emisor cobro" vs "Descripción"). El padding-top da la misma
+       separación spacing-2 arriba del primer grupo (Asunto↔Emisor cobro). */
+    gap: var(--kds-spacing-2);
     margin: 0;
-    padding: 0 0 var(--kds-spacing-2);
+    padding: var(--kds-spacing-2) 0 0;
 }
 
-.kds-detail-group {
-    margin-bottom: var(--kds-spacing-1-5);
+@media (max-width: 767px) {
+    .kds-detail-list {
+        padding-bottom: var(--kds-spacing-2);
+    }
 }
 
-.kds-detail-group:last-child {
+.kds-detail-group {
+    /* 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;
 }
 
@@ -5805,7 +7287,8 @@ div.kds-invoice-header,
     font-size: var(--kds-font-size-xs);
     letter-spacing: var(--kds-letter-spacing-wide);
     color: var(--kds-color-text-hint);
-    text-transform: none;
+    text-transform: uppercase;
+    margin: 0;
 }
 
 .kds-detail-group dd {
@@ -5815,6 +7298,19 @@ div.kds-invoice-header,
     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-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-amount-row {
     display: flex;
@@ -5874,16 +7370,16 @@ div.kds-invoice-header,
     font-size: var(--kds-font-size-sm);
 }
 
-.kds-recap-list .k {
+.kds-recap-list .kds-key {
     color: var(--kds-color-text-secondary);
 }
 
-.kds-recap-list .v {
+.kds-recap-list .kds-value {
     color: var(--kds-color-text-primary);
     font-weight: 500;
 }
 
-.kds-recap-list .v.placeholder {
+.kds-recap-list .kds-value.placeholder {
     color: var(--kds-color-text-hint);
 }
 
@@ -5910,6 +7406,68 @@ a.kds-btn-success:disabled {
     box-shadow: none;
 }
 
+/* -- Button Warning (amber CTA) -- */
+button.kds-btn-warning,
+a.kds-btn-warning {
+    background: var(--kds-color-warning-main);
+    color: var(--kds-color-warning-contrast);
+    border: none;
+}
+
+button.kds-btn-warning:hover:not(:disabled),
+a.kds-btn-warning:hover:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+}
+
+button.kds-btn-warning:active:not(:disabled),
+button.kds-btn-warning:focus-visible:not(:disabled),
+a.kds-btn-warning:active:not(:disabled),
+a.kds-btn-warning:focus-visible:not(:disabled) {
+    background: var(--kds-color-warning-dark);
+}
+
+button.kds-btn-warning:disabled,
+a.kds-btn-warning:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+button.kds-btn-warning::after {
+    display: none;
+}
+
+/* -- Button Error (red / destructive CTA) -- */
+button.kds-btn-error,
+a.kds-btn-error {
+    background: var(--kds-color-error-main);
+    color: var(--kds-color-error-contrast);
+    border: none;
+}
+
+button.kds-btn-error:hover:not(:disabled),
+a.kds-btn-error:hover:not(:disabled) {
+    background: var(--kds-color-error-dark);
+}
+
+button.kds-btn-error:active:not(:disabled),
+button.kds-btn-error:focus-visible:not(:disabled),
+a.kds-btn-error:active:not(:disabled),
+a.kds-btn-error:focus-visible:not(:disabled) {
+    background: var(--kds-color-error-dark);
+}
+
+button.kds-btn-error:disabled,
+a.kds-btn-error:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+}
+
+button.kds-btn-error::after {
+    display: none;
+}
+
 /* -- Field Helper Text -- */
 .kds-field-helper {
     font-size: var(--kds-font-size-xs);
@@ -5952,6 +7510,8 @@ button.kds-btn-success::after {
 /* -- Alert inline (borderless, used inside cards) -- */
 .kds-alert-inline {
     border: none;
+    padding: var(--kds-spacing-1) var(--kds-spacing-1-5);
+    margin-bottom: var(--kds-spacing-1-5);
 }
 
 /* -- Card dimmed (behind overlays) -- */
@@ -6020,6 +7580,25 @@ button.kds-btn-success::after {
     fill: none;
 }
 
+/* BeerCSS fuerza fill:currentcolor en todo svg, pisando el atributo de
+   presentación; un SVG que declara fill="none" (ilustraciones de trazo)
+   debe conservarlo. */
+svg[fill='none'] {
+    fill: none;
+}
+
+/* -- Bottom sheet centered content --
+   Contenido escueto centrado verticalmente con altura mínima estable, para que
+   el sheet no encoja cuando la vista tiene pocos elementos (p.ej. drawer de
+   autorización: título + ilustración + timer). */
+.kds-bottom-sheet-centered-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--kds-bottom-sheet-content-min-height, 21rem);
+}
+
 /* -- Bottom sheet description (subtle / smaller) -- */
 .kds-bottom-sheet-description-subtle {
     color: var(--kds-color-text-secondary);
@@ -6053,17 +7632,42 @@ button.kds-btn-success::after {
 }
 
 .kds-bill-description-picture {
-    width: 120px;
-    height: 120px;
+    max-width: 100px;
     object-fit: contain;
     background: var(--kds-color-background-paper);
-    padding: var(--kds-spacing-1-25);
-    border-radius: var(--kds-radius-md);
-    margin-top: var(--kds-spacing-1);
+    margin-top: var(--kds-spacing-1-25);
     display: block;
     box-sizing: content-box;
 }
 
+/* -- Bill Attachments -- */
+.kds-bill-attachments {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-75);
+}
+
+.kds-bill-attachment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    color: var(--kds-color-info-main);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    text-decoration: none;
+}
+
+.kds-bill-attachment:hover span {
+    text-decoration: underline;
+}
+
+.kds-bill-attachment i {
+    font-size: var(--kds-font-size-lg);
+    min-width: unset;
+    justify-content: flex-start;
+}
+
 /* -- Share Card (mustContinue) -- */
 .kds-share-card {
     margin-top: var(--kds-spacing-2);
@@ -6173,8 +7777,10 @@ button.kds-btn-success::after {
    Desktop (min-width: 768px) restores padding + full border-radius. */
 .kds-payment-flow .kds-card-elevated {
     margin-top: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+    /* Vertical > lateral: la card del flujo respira arriba/abajo (spacing-3)
+       manteniendo el padding lateral del base (spacing-2 / spacing-3 mobile). */
+    padding-top: var(--kds-spacing-3);
+    padding-bottom: var(--kds-spacing-3);
 }
 
 /* Reset BeerCSS sibling margin on form/section inside payment cards.
@@ -6189,12 +7795,43 @@ button.kds-btn-success::after {
     padding-bottom: 0;
 }
 
-/* Payment stage — full-viewport centered wrapper */
+/* Body card: alto mínimo estable para que NO salte entre estados de distinta altura
+   (loader/progress ↔ formulario). Solo la body card = hijo directo de `.kds-screen`
+   (los headers van dentro de `.kds-invoice-sticky-wrap`, no la afecta).
+   Flex-column para que el contenido quede arriba y el footer interno (versión / secure
+   footer) pueda pinearse al fondo con `margin-top: auto` aunque el contenido sea corto. */
+.kds-screen > .kds-card-elevated {
+    min-height: 36rem;
+    display: flex;
+    flex-direction: column;
+    /* mismo radio que el header (invoice-sticky usa radius-card); el base card-elevated
+       es radius-md (8px) y quedaba distinto al header en desktop. */
+    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. */
+/* Tope plano SOLO en mobile (< 768px): la body card se pega al borde superior del widget
+   (igual que el header sticky, que también aplana el tope solo en mobile). En desktop la card
+   va centrada y separada, así que conserva el border-radius superior redondeado. */
+@media (max-width: 767px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
+    .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. */
 .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);
 }
 
 /* Payment flow — narrow column */
@@ -6228,23 +7865,23 @@ button.kds-btn-success::after {
         width: 100%;
     }
 
-    .kds-payment-flow .kds-card-elevated {
-        padding-top: var(--kds-spacing-2);
-        padding-bottom: var(--kds-spacing-2);
-    }
-
-    /* Invoice sticky card: progressive padding-top (expanded 20px → collapsed 8px).
-       Overrides base rule at same specificity; source order wins here. */
+    /* Invoice sticky card padding (mobile).
+       Top: estático 12px. Bottom: progresivo 16px (expandido, = desktop) → 8px (colapsado).
+       El padding-bottom animado se reduce al colapsar — sin depender de que el clip-path
+       corte el padding abruptamente. */
     .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
         padding-top: var(--kds-spacing-1-5);
+        padding-bottom: calc(
+            var(--kds-spacing-2)
+            - var(--kds-spacing-1) * var(--collapse-progress, 0)
+        );
     }
 
 
 }
 
-/* Desktop: restore card padding and full border-radius on invoice sticky */
+/* Desktop: restore sticky header padding and full border-radius on invoice sticky */
 @media (min-width: 768px) {
-    .kds-payment-flow .kds-card-elevated,
     .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
         padding-top: var(--kds-spacing-2);
         padding-bottom: var(--kds-spacing-2);
@@ -6348,6 +7985,28 @@ button.kds-btn-success::after {
     background: rgba(255, 255, 255, .08);
 }
 
+/* Icon-only arrows: kill the BeerCSS button active/focus ring (stray halo). */
+.kds-proto-nav-arrow:active,
+.kds-proto-nav-arrow:focus,
+.kds-proto-nav-arrow:focus-visible {
+    outline: none;
+    border: 0;
+    box-shadow: none;
+}
+
+/* Dark: the pill inverts to a LIGHT surface (bg = text-primary = white), so
+   its contents need dark ink — the white-alpha tokens above become invisible. */
+[data-theme="dark"] .kds-proto-nav-label {
+    color: var(--kds-color-gray-500);
+}
+[data-theme="dark"] .kds-proto-nav-arrow {
+    color: var(--kds-color-gray-600);
+}
+[data-theme="dark"] .kds-proto-nav-arrow:hover {
+    color: var(--kds-color-gray-900);
+    background: rgba(0, 0, 0, .08);
+}
+
 /* Tweaks panel — floating config panel */
 .kds-proto-tweaks {
     position: fixed;
@@ -6548,11 +8207,21 @@ button.kds-btn-success::after {
     display: none;
 }
 
-.kds-bank-modal-search {
-    padding: 0 var(--kds-spacing-2) var(--kds-spacing-1-5);
+/* Icon-only close: kill the BeerCSS button active/focus ring (stray border). */
+.kds-bank-modal-close:active,
+.kds-bank-modal-close:focus,
+.kds-bank-modal-close:focus-visible {
+    outline: none;
+    border: 0;
+    box-shadow: none;
+}
+
+.kds-bank-modal-close:hover {
+    background: var(--kds-color-action-hover);
 }
 
-.kds-bank-modal-search input {
+/* Search field reutilizable (standalone o dentro del KdsBankModal). */
+.kds-search-field {
     width: 100%;
     padding: var(--kds-spacing-1-25) var(--kds-spacing-1-5);
     border: 1px solid var(--kds-color-divider);
@@ -6564,15 +8233,57 @@ button.kds-btn-success::after {
     background: var(--kds-color-surface);
 }
 
-.kds-bank-modal-search input::placeholder {
+.kds-search-field::placeholder {
     color: var(--kds-color-text-hint);
 }
 
-.kds-bank-modal-search input:focus {
+.kds-search-field:focus {
     border-color: var(--kds-color-primary-main);
     box-shadow: 0 0 0 2px var(--kds-color-primary-faint);
 }
 
+/* Variante con ícono (withIcon): lupa posicionada DENTRO del input, a la derecha. */
+.kds-search-field-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.kds-search-field-icon {
+    position: absolute;
+    right: var(--kds-spacing-1-5);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 20px;
+    color: var(--kds-color-text-hint);
+    pointer-events: none;
+}
+
+/* Espacio a la derecha del texto para no solaparse con la lupa. */
+.kds-search-field-wrapper .kds-search-field {
+    padding-right: calc(var(--kds-spacing-1-5) + var(--kds-spacing-3));
+}
+
+/* Variante angosta del field (prop `narrow` de KdsTextField): ancho reducido y texto
+   centrado, para inputs de pocos caracteres dispuestos en fila (ej. segmentos de
+   coordenadas o código). No crece ni se encoge dentro de un flex row. */
+.field.kds-field--narrow {
+    width: 6rem;
+    flex: 0 0 auto;
+    /* En fila horizontal no aplica el margin vertical que BeerCSS da a fields
+       hermanos (regla de "flow" `... + :is(.field,...)`, specificity ~0,3,1);
+       sin el reset los siguientes quedan desalineados hacia abajo. `!important`
+       para ganarle a esa regla de framework. */
+    margin-block: 0 !important;
+}
+
+.field.kds-field--narrow > input {
+    text-align: center;
+}
+
+.kds-bank-modal-search {
+    padding: 0 var(--kds-spacing-2) var(--kds-spacing-1-5);
+}
+
 .kds-bank-modal-body {
     flex: 1;
     overflow-y: auto;
@@ -6670,7 +8381,7 @@ button.kds-btn-success::after {
     min-width: 0;
 }
 
-.kds-qr-text .title {
+.kds-qr-text .kds-qr-title {
     font-family: var(--kds-font-family-primary);
     font-weight: 600;
     font-size: var(--kds-font-size-sm);
@@ -6678,10 +8389,15 @@ button.kds-btn-success::after {
     color: var(--kds-color-text-primary);
 }
 
-.kds-qr-text .sub {
+.kds-qr-text .kds-qr-subtitle {
     font-family: var(--kds-font-family-primary);
     font-size: var(--kds-font-size-caption);
     color: var(--kds-color-text-secondary);
+    /* Trunca con ellipsis en lugar de wrap a 2 líneas — evita apretar el row
+       cuando el contenedor es angosto (mobile o decorator constrained). */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /* QR Badge - "Rápido" indicator */
@@ -6704,46 +8420,26 @@ button.kds-btn-success::after {
     font-size: 20px;
 }
 
-/* Mobile responsive: Ajustes para pantallas pequeñas */
+/* Mobile responsive (≤480px): respira más — mantenemos padding/gap/avatar igual
+   que desktop y solo agregamos truncation al subtitle y `flex-shrink: 0` en los
+   ítems que deben mantener su tamaño (avatar, badge, chevron). */
 @media (max-width: 480px) {
-    .kds-qr-row {
-        gap: var(--kds-spacing-1-5);
-        padding: var(--kds-spacing-1-5);
-    }
-
     .kds-qr-avatar {
-        width: var(--kds-spacing-4-5);
-        height: var(--kds-spacing-4-5);
         flex-shrink: 0;
     }
 
-    .kds-qr-avatar .material-symbols-outlined,
-    .kds-qr-avatar .material-icons-round {
-        font-size: var(--kds-font-size-lg);
-    }
-
-    .kds-qr-text .title {
-        font-size: var(--kds-font-size-xs);
-        line-height: var(--kds-line-height-tight);
-    }
-
     .kds-qr-text .sub {
-        font-size: var(--kds-font-size-caption);
-        line-height: var(--kds-line-height-tight);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     .kds-qr-badge {
-        font-size: var(--kds-font-size-caption);
-        padding: var(--kds-spacing-0-25) var(--kds-spacing-0-75);
         flex-shrink: 0;
     }
 
     .kds-qr-row .material-symbols-outlined:last-child,
     .kds-qr-row .material-icons-round:last-child {
-        font-size: var(--kds-font-size-base);
         flex-shrink: 0;
     }
 }
@@ -6772,7 +8468,11 @@ button.kds-btn-success::after {
     border-radius: var(--kds-spacing-0-75);
     font-size: var(--kds-font-size-sm);
     cursor: pointer;
-    transition: background 0.12s ease;
+    /* Transición más amplia y suave: bg + color + border ease-out */
+    transition:
+        background-color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        border-top-color 280ms ease-out;
     position: relative;
     user-select: none;
 }
@@ -6781,19 +8481,21 @@ button.kds-btn-success::after {
     border-top: 0;
 }
 
-.kds-copyable-table-row:hover {
+/* Hover NO aplica mientras la row esté en `.copied` o `.settling`
+   (evita el flicker del hover state al desaparecer el verde de "copiado") */
+.kds-copyable-table-row:not(.copied):not(.settling):hover {
     background: var(--kds-color-primary-faint);
 }
 
-.kds-copyable-table-row:hover + .kds-copyable-table-row {
+.kds-copyable-table-row:not(.copied):not(.settling):hover + .kds-copyable-table-row {
     border-top-color: transparent;
 }
 
-.kds-copyable-table-row:active {
+.kds-copyable-table-row:not(.copied):not(.settling):active {
     background: var(--kds-color-primary-selected);
 }
 
-.kds-copyable-table-row .k {
+.kds-copyable-table-row .kds-key {
     color: var(--kds-color-text-secondary);
     font-size: var(--kds-font-size-caption);
     letter-spacing: 0.3px;
@@ -6802,7 +8504,7 @@ button.kds-btn-success::after {
     flex: 0 0 auto;
 }
 
-.kds-copyable-table-row .v {
+.kds-copyable-table-row .kds-value {
     color: var(--kds-color-text-primary);
     font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
     font-weight: var(--kds-font-weight-medium);
@@ -6818,17 +8520,18 @@ button.kds-btn-success::after {
     flex: 1 1 auto;
 }
 
-.kds-copyable-table-row .v::after {
+.kds-copyable-table-row .kds-value::after {
     content: 'content_copy';
     font-family: 'Material Symbols Outlined';
     font-size: var(--kds-font-size-sm);
     color: var(--kds-color-primary-main);
     opacity: 0;
-    transition: opacity 0.12s ease;
+    /* Transición coordinada con la row */
+    transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
     flex: 0 0 auto;
 }
 
-.kds-copyable-table-row:hover .v::after {
+.kds-copyable-table-row:not(.copied):not(.settling):hover .kds-value::after {
     opacity: 0.7;
 }
 
@@ -6836,22 +8539,83 @@ button.kds-btn-success::after {
     background: var(--kds-color-success-soft);
 }
 
-.kds-copyable-table-row.copied .v {
+.kds-copyable-table-row.copied .kds-value {
     color: var(--kds-color-success-dark);
 }
 
-.kds-copyable-table-row.copied .v::after {
+.kds-copyable-table-row.copied .kds-value::after {
     content: 'check';
     font-family: 'Material Symbols Outlined';
     color: var(--kds-color-success-dark);
     opacity: 1;
 }
 
+/* Dark: success-dark text is near-invisible on the dark translucent success
+   surface — use the alert success text token (light green in dark). */
+[data-theme="dark"] .kds-copyable-table-row.copied .kds-value,
+[data-theme="dark"] .kds-copyable-table-row.copied .kds-value::after {
+    color: var(--kds-alert-success-text);
+}
+
+/* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
+   activar hover. Dura lo mismo que la transición (~300ms) y se aplica
+   desde React tras quitar `.copied`. */
+.kds-copyable-table-row.settling .kds-value::after {
+    /* Mantén el check con opacity 0 mientras settling, fade out suave */
+    opacity: 0;
+}
+
 /* Disable BeerCSS ripple on copyable table rows */
 .kds-copyable-table-row::after {
     display: none;
 }
 
+/* ========================================
+   GRID VARIANT (.kds-copyable-table--grid)
+   Read-only grid of N text cells per row. No copy,
+   no role=button, no "copy all". Cells share the row
+   width equally. Used inside radio options, etc.
+   ======================================== */
+
+/* La grilla es solo columnas de texto (como el DataTable original): sin caja,
+   borde, fondo ni sombra del contenedor copyable. */
+.kds-copyable-table--grid {
+    border: 0;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+    box-shadow: none;
+}
+
+.kds-copyable-table-row--grid {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1-5);
+    padding: 0;
+    /* Sin el divisor border-top que trae la fila base del copyable. */
+    border-top: 0;
+    cursor: default;
+    user-select: text;
+}
+
+/* Separación entre filas de la grilla (sin divisores). */
+.kds-copyable-table-row--grid + .kds-copyable-table-row--grid {
+    margin-top: var(--kds-spacing-0-5);
+}
+
+.kds-grid-cell {
+    flex: 1 1 0;
+    min-width: 0;
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    color: var(--kds-color-text-primary);
+    word-break: break-word;
+}
+
+.kds-grid-cell--disabled {
+    color: var(--kds-color-text-disabled);
+}
+
 /* ========================================
    COPY-ALL BUTTON (.kds-copy-all-btn)
    Modifier for kds-btn kds-btn-outlined that adds
@@ -6883,6 +8647,15 @@ a.kds-copy-all-btn.copied:hover {
     border-color: var(--kds-color-success-border-light);
 }
 
+/* Dark: lighten the "Datos copiados" text/border on the dark success surface. */
+[data-theme="dark"] button.kds-copy-all-btn.copied,
+[data-theme="dark"] button.kds-copy-all-btn.copied:hover,
+[data-theme="dark"] a.kds-copy-all-btn.copied,
+[data-theme="dark"] a.kds-copy-all-btn.copied:hover {
+    color: var(--kds-alert-success-text);
+    border-color: var(--kds-alert-success-border);
+}
+
 /* ========================================
    SECTION NOTE (.kds-section-note)
    Lightweight inline note for contextual caveats.
@@ -6917,6 +8690,17 @@ a.kds-copy-all-btn.copied:hover {
 .kds-section-note.kds-error         { color: var(--kds-color-error-dark); }
 .kds-section-note.kds-error > i     { color: var(--kds-color-error-dark); }
 
+/* Dark: the semantic *-dark shades are near-invisible on the dark page bg —
+   use the alert *-text tokens (light shades in dark). Base note is warning. */
+[data-theme="dark"] .kds-section-note,
+[data-theme="dark"] .kds-section-note > i                    { color: var(--kds-alert-warning-text); }
+[data-theme="dark"] .kds-section-note.kds-info,
+[data-theme="dark"] .kds-section-note.kds-info > i          { color: var(--kds-alert-info-text); }
+[data-theme="dark"] .kds-section-note.kds-success,
+[data-theme="dark"] .kds-section-note.kds-success > i       { color: var(--kds-alert-success-text); }
+[data-theme="dark"] .kds-section-note.kds-error,
+[data-theme="dark"] .kds-section-note.kds-error > i         { color: var(--kds-alert-error-text); }
+
 /* ========================================
    INFO TOOLTIP (.kds-info-tip)
    Inline info button with hover/click tooltip bubble.
@@ -7012,7 +8796,7 @@ a.kds-copy-all-btn.copied:hover {
 .kds-monto-row {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: flex-start;
     padding: var(--kds-spacing-1-75) 0 var(--kds-spacing-1);
     border-top: 1px dashed var(--kds-color-divider);
     margin-top: var(--kds-spacing-1-75);
@@ -7036,3 +8820,360 @@ a.kds-copy-all-btn.copied:hover {
     color: var(--kds-color-text-primary);
 }
 
+/* ========================================
+   PAYMENT TOTAL (.kds-payment-total)
+   Bloque "monto a pagar" para QR view y email templates.
+   Portado desde paylink-ligopay → <kh:paymentTotal> + materialize-config.css.
+   Variantes:
+     - default: amount grande (3rem) en color primario Khipu.
+     - email:   amount compacto (1.5rem) en color texto primario.
+   Responsive (default): mobile (≤ 1024px) centra y oculta titleMobile.
+   ======================================== */
+
+.kds-payment-total {
+    /* Component-scoped tokens — overrideables sin tocar el CSS global. */
+    --kds-payment-total-title-size: var(--kds-font-size-2xl);    /* 24px */
+    --kds-payment-total-label-size: var(--kds-font-size-xl);     /* 20px */
+    --kds-payment-amount-size: 3rem;                              /* 48px — destacado */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-primary-main);
+    --kds-payment-amount-weight: var(--kds-font-weight-medium);
+
+    text-align: left;
+}
+
+.kds-payment-total-title,
+.kds-payment-total-title-mobile {
+    font-size: var(--kds-payment-total-title-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total-title-mobile {
+    display: none;
+}
+
+.kds-payment-total .kds-payment-label {
+    font-size: var(--kds-payment-total-label-size);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    margin-bottom: var(--kds-spacing-1);
+    padding-top: 0;
+}
+
+.kds-payment-total .kds-payment-amount {
+    font-size: var(--kds-payment-amount-size);
+    font-weight: var(--kds-payment-amount-weight);
+    line-height: var(--kds-payment-amount-line-height);
+    color: var(--kds-payment-amount-color);
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-payment-total .kds-payment-amount .kds-payment-total-decimal-sup,
+.kds-invoice-amount .kds-payment-total-decimal-sup {
+    font-size: var(--kds-font-size-decimal-sup);
+    font-weight: var(--kds-font-weight-semibold);
+    position: relative;
+    top: 0;
+}
+
+/* Variante email: amount compacto en color texto primario, alineación izquierda fija */
+.kds-payment-total--email {
+    --kds-payment-amount-size: var(--kds-font-size-2xl);  /* 24px */
+    --kds-payment-amount-line-height: var(--kds-line-height-snug);
+    --kds-payment-amount-color: var(--kds-color-text-primary);
+    --kds-payment-amount-weight: var(--kds-font-weight-semibold);
+}
+
+/* Tone modifier: swaps the amount color to the khipu-blue / LigoPay info blue.
+   Combinable with --email or with the default variant. */
+.kds-payment-total--tone-info {
+    --kds-payment-amount-color: var(--kds-color-info-blue);  /* #5A5FE0 */
+}
+
+/* Centered modifier: removes the asymmetric desktop padding (which exists for
+   LigoPay QR view) and centers all internal text. Composable with --email and
+   --tone-info. */
+.kds-payment-total--centered {
+    padding-left: 0;
+    padding-top: 0;
+    text-align: center;
+}
+.kds-payment-total--centered .kds-payment-total-title,
+.kds-payment-total--centered .kds-payment-total-title-mobile,
+.kds-payment-total--centered .kds-payment-label,
+.kds-payment-total--centered .kds-payment-amount {
+    text-align: center;
+}
+
+/* Responsive: mobile ≤ 1024px — centra y conmuta los títulos (sólo variante default) */
+@media (max-width: 1024px) {
+    .kds-payment-total {
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-total-title {
+        display: none;
+    }
+
+    .kds-payment-total .kds-payment-total-title-mobile {
+        display: block;
+        text-align: center;
+    }
+
+    .kds-payment-total .kds-payment-label,
+    .kds-payment-total .kds-payment-amount {
+        text-align: center;
+    }
+
+    /* Email mantiene alineación izquierda incluso en mobile (matchea email clients) */
+    .kds-payment-total--email,
+    .kds-payment-total--email .kds-payment-label,
+    .kds-payment-total--email .kds-payment-amount {
+        text-align: left;
+    }
+}
+
+/* ==========================================================================
+   GRID UTILITIES — semantic aliases for BeerCSS .grid / .s* / .m* / .l*
+
+   Estas utilidades son ALIAS de las clases cortas de BeerCSS para que
+   consumers (payment, LigoPay, Grails legacy) puedan escribir markup con
+   nombres descriptivos sin renunciar al grid de 12 columnas de BeerCSS.
+
+   Convención (estilo Bootstrap responsive):
+   - kds-grid              → .grid (12-col CSS grid + 1rem gap)
+   - kds-col-sm-{1..12}    → .s{1..12}  (mobile, siempre aplica)
+   - kds-col-md-{1..12}    → .m{1..12}  (>=601px)
+   - kds-col-lg-{1..12}    → .l{1..12}  (>=993px)
+
+   Las definiciones originales de BeerCSS NO se tocan; estas son aditivas.
+   ========================================================================== */
+
+.kds-grid {
+    --_gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--_gap);
+    block-size: auto;
+}
+
+.kds-grid.kds-grid-no-space { --_gap: 0rem; }
+.kds-grid.kds-grid-medium-space { --_gap: 1.5rem; }
+.kds-grid.kds-grid-large-space { --_gap: 2rem; }
+
+.kds-grid > * { margin: 0; }
+
+.kds-col-sm-1  { grid-area: auto/span 1; }
+.kds-col-sm-2  { grid-area: auto/span 2; }
+.kds-col-sm-3  { grid-area: auto/span 3; }
+.kds-col-sm-4  { grid-area: auto/span 4; }
+.kds-col-sm-5  { grid-area: auto/span 5; }
+.kds-col-sm-6  { grid-area: auto/span 6; }
+.kds-col-sm-7  { grid-area: auto/span 7; }
+.kds-col-sm-8  { grid-area: auto/span 8; }
+.kds-col-sm-9  { grid-area: auto/span 9; }
+.kds-col-sm-10 { grid-area: auto/span 10; }
+.kds-col-sm-11 { grid-area: auto/span 11; }
+.kds-col-sm-12 { grid-area: auto/span 12; }
+
+@media only screen and (min-width: 601px) {
+    .kds-col-md-1  { grid-area: auto/span 1; }
+    .kds-col-md-2  { grid-area: auto/span 2; }
+    .kds-col-md-3  { grid-area: auto/span 3; }
+    .kds-col-md-4  { grid-area: auto/span 4; }
+    .kds-col-md-5  { grid-area: auto/span 5; }
+    .kds-col-md-6  { grid-area: auto/span 6; }
+    .kds-col-md-7  { grid-area: auto/span 7; }
+    .kds-col-md-8  { grid-area: auto/span 8; }
+    .kds-col-md-9  { grid-area: auto/span 9; }
+    .kds-col-md-10 { grid-area: auto/span 10; }
+    .kds-col-md-11 { grid-area: auto/span 11; }
+    .kds-col-md-12 { grid-area: auto/span 12; }
+}
+
+@media only screen and (min-width: 993px) {
+    .kds-col-lg-1  { grid-area: auto/span 1; }
+    .kds-col-lg-2  { grid-area: auto/span 2; }
+    .kds-col-lg-3  { grid-area: auto/span 3; }
+    .kds-col-lg-4  { grid-area: auto/span 4; }
+    .kds-col-lg-5  { grid-area: auto/span 5; }
+    .kds-col-lg-6  { grid-area: auto/span 6; }
+    .kds-col-lg-7  { grid-area: auto/span 7; }
+    .kds-col-lg-8  { grid-area: auto/span 8; }
+    .kds-col-lg-9  { grid-area: auto/span 9; }
+    .kds-col-lg-10 { grid-area: auto/span 10; }
+    .kds-col-lg-11 { grid-area: auto/span 11; }
+    .kds-col-lg-12 { grid-area: auto/span 12; }
+}
+
+/* === Form icon chip ================================================== */
+/* Chip cuadrado con el icono del formulario (SecureForm, headers OIDC). */
+
+.kds-form-icon-container {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-1);
+    justify-content: center;
+    padding: 0 var(--kds-spacing-2);
+}
+
+.kds-form-icon-box {
+    align-items: center;
+    background: var(--kds-color-background-brand-subtle, #f0f0fa);
+    border-radius: var(--kds-radius-md);
+    display: flex;
+    height: 52px;
+    justify-content: center;
+    padding: var(--kds-spacing-1);
+    width: 52px;
+}
+
+.kds-form-icon-box .kds-form-icon,
+.kds-form-icon-box > img,
+.kds-form-icon-box > svg {
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    height: 32px;
+    width: 32px;
+}
+
+@media (min-width: 600px) {
+    .kds-form-icon-box {
+        height: 56px;
+        width: 56px;
+    }
+
+    .kds-form-icon-box .kds-form-icon,
+    .kds-form-icon-box > img,
+    .kds-form-icon-box > svg {
+        height: 30px;
+        width: 30px;
+    }
+}
+
+@media (min-width: 900px) {
+    .kds-form-icon-box {
+        height: 60px;
+        width: 60px;
+    }
+
+    .kds-form-icon-box .kds-form-icon,
+    .kds-form-icon-box > img,
+    .kds-form-icon-box > svg {
+        height: 32px;
+        width: 32px;
+    }
+}
+
+/* === Accordion (componente KdsAccordion) ============================= */
+/* El bundle solo estilaba .kds-contract-accordion; estas son las clases
+   que emite el componente React (details/summary con chevron propio). */
+
+.kds-accordion {
+    border: 1px solid var(--kds-accordion-border);
+    border-radius: var(--kds-radius-md);
+    overflow: hidden;
+}
+
+.kds-accordion + .kds-accordion {
+    margin-top: var(--kds-spacing-1);
+}
+
+.kds-accordion-summary {
+    align-items: center;
+    background: var(--kds-accordion-header-bg);
+    color: var(--kds-color-text-primary);
+    cursor: pointer;
+    display: flex;
+    font-weight: var(--kds-font-weight-semibold);
+    justify-content: space-between;
+    list-style: none;
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+    transition: background 0.2s ease;
+}
+
+.kds-accordion-summary::-webkit-details-marker {
+    display: none;
+}
+
+.kds-accordion-summary:hover {
+    background: var(--kds-color-background-elevated);
+}
+
+.kds-accordion-summary > .material-symbols-outlined {
+    transition: transform 0.3s ease;
+}
+
+.kds-accordion[open] > .kds-accordion-summary > .material-symbols-outlined {
+    transform: rotate(180deg);
+}
+
+.kds-accordion[open] > .kds-accordion-summary {
+    background: var(--kds-accordion-bg-open);
+    border-bottom: 1px solid var(--kds-accordion-border);
+}
+
+.kds-accordion-details {
+    background: var(--kds-accordion-bg-open);
+    color: var(--kds-color-text-secondary);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+}
+
+.kds-accordion-details ul,
+.kds-accordion-details ol {
+    margin: 0;
+    padding-inline-start: var(--kds-spacing-2);
+}
+
+/* === Display utilities ================================================ */
+
+.kds-block {
+    display: block;
+}
+
+.kds-inline {
+    display: inline;
+}
+
+.kds-inline-block {
+    display: inline-block;
+}
+
+.kds-pre-wrap {
+    white-space: pre-wrap;
+}
+
+/* -- Empty State (sin resultados en búsquedas/listas filtradas) -- */
+.kds-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--kds-spacing-1);
+}
+
+.kds-empty-state > i {
+    /* La caja del material-symbol sigue al font-size (1em). */
+    font-size: var(--kds-font-size-4xl);
+    color: var(--kds-color-text-secondary);
+}
+
+/* Textos agrupados con el mismo ritmo compacto que kds-secure-loader-text. */
+.kds-empty-state-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-25);
+}
+
+.kds-empty-state-text p {
+    /* BeerCSS aplica margin-block-start !important a los <p>; hay que igualarlo. */
+    margin: 0 !important;
+    line-height: var(--kds-line-height-snug);
+}
+