@khipu/design-system 0.2.0-alpha.99 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/beercss/arch.svg +1 -0
  2. package/dist/beercss/arrow.svg +1 -0
  3. package/dist/beercss/boom.svg +1 -0
  4. package/dist/beercss/bun.svg +1 -0
  5. package/dist/beercss/burst.svg +1 -0
  6. package/dist/beercss/circle.svg +1 -0
  7. package/dist/beercss/clamshell.svg +1 -0
  8. package/dist/beercss/diamond.svg +1 -0
  9. package/dist/beercss/fan.svg +1 -0
  10. package/dist/beercss/flower.svg +1 -0
  11. package/dist/beercss/gem.svg +1 -0
  12. package/dist/beercss/ghost-ish.svg +1 -0
  13. package/dist/beercss/heart.svg +1 -0
  14. package/dist/beercss/khipu-beercss.css +868 -98
  15. package/dist/beercss/khipu-beercss.js +75 -0
  16. package/dist/beercss/khipu-beercss.min.css +1 -1
  17. package/dist/beercss/khipu-beercss.min.js +1 -1
  18. package/dist/beercss/khipu-beercss.scoped.css +868 -98
  19. package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
  20. package/dist/beercss/leaf-clover4.svg +1 -0
  21. package/dist/beercss/leaf-clover8.svg +1 -0
  22. package/dist/beercss/loading-indicator.svg +1 -0
  23. package/dist/beercss/material-symbols-outlined.woff2 +0 -0
  24. package/dist/beercss/material-symbols-rounded.woff2 +0 -0
  25. package/dist/beercss/material-symbols-sharp.woff2 +0 -0
  26. package/dist/beercss/material-symbols-subset.woff2 +0 -0
  27. package/dist/beercss/metadata.json +5 -5
  28. package/dist/beercss/oval.svg +1 -0
  29. package/dist/beercss/pentagon.svg +1 -0
  30. package/dist/beercss/pill.svg +1 -0
  31. package/dist/beercss/pixel-circle.svg +1 -0
  32. package/dist/beercss/pixel-triangle.svg +1 -0
  33. package/dist/beercss/puffy-diamond.svg +1 -0
  34. package/dist/beercss/puffy.svg +1 -0
  35. package/dist/beercss/semicircle.svg +1 -0
  36. package/dist/beercss/sided-cookie12.svg +1 -0
  37. package/dist/beercss/sided-cookie4.svg +1 -0
  38. package/dist/beercss/sided-cookie6.svg +1 -0
  39. package/dist/beercss/sided-cookie7.svg +1 -0
  40. package/dist/beercss/sided-cookie9.svg +1 -0
  41. package/dist/beercss/slanted.svg +1 -0
  42. package/dist/beercss/soft-boom.svg +1 -0
  43. package/dist/beercss/soft-burst.svg +1 -0
  44. package/dist/beercss/square.svg +1 -0
  45. package/dist/beercss/sunny.svg +1 -0
  46. package/dist/beercss/triangle.svg +1 -0
  47. package/dist/beercss/very-sunny.svg +1 -0
  48. package/dist/beercss/wavy-circle.svg +1 -0
  49. package/dist/beercss/wavy.svg +1 -0
  50. package/dist/index.d.mts +128 -6
  51. package/dist/index.d.ts +128 -6
  52. package/dist/index.js +394 -156
  53. package/dist/index.mjs +373 -146
  54. package/package.json +3 -2
package/dist/beercss/khipu-beercss.scoped.css CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  /* Khipu BeerCSS Bundle - Combined CSS */
4
4
 
5
+ @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');
6
+
5
7
  /* BeerCSS v4.0.1 */
6
8
  .kds-theme-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==)}.kds-theme-root.dark{--image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==)}.kds-theme-root{font-size:var(--size)}.kds-theme-root{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){.kds-theme-root ::-webkit-scrollbar,.kds-theme-root ::-webkit-scrollbar-thumb,.kds-theme-root ::-webkit-scrollbar-button{background:none;inline-size:.4rem;block-size:.4rem}.kds-theme-root :is(:focus,:hover)::-webkit-scrollbar-thumb,.kds-theme-root :has(:focus,:hover)::-webkit-scrollbar-thumb{background:var(--outline);border-radius:1rem}}@media(pointer:coarse){.kds-theme-root:has(dialog[open],dialog.active),.kds-theme-root: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}}.kds-theme-root,.kds-theme-root.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}.kds-theme-root.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")}.kds-theme-root, .kds-theme-root *{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0;border-radius:inherit;box-sizing:border-box}.kds-theme-root *:after,.kds-theme-root *:before{all:unset}.kds-theme-root label{font-size:.75rem;vertical-align:baseline}.kds-theme-root a,.kds-theme-root b,.kds-theme-root i,.kds-theme-root span,.kds-theme-root strong,.kds-theme-root em,.kds-theme-root code{vertical-align:baseline}.kds-theme-root a,.kds-theme-root button,.kds-theme-root .button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}.kds-theme-root :is(nav,.tabs,.field)>a,.kds-theme-root button,.kds-theme-root .button,.kds-theme-root .chip,.kds-theme-root i,.kds-theme-root label{-webkit-user-select:none;user-select:none}.kds-theme-root :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}.kds-theme-root :has(>[class*=margin]){padding:.1px}.kds-theme-root :is(a,button,.button,.chip,summary):focus-visible{outline:.125rem solid var(--primary);outline-offset:.25rem}.kds-theme-root :is(nav,.row,li).group>:focus-visible{z-index:1}.kds-theme-root :is(button,.button,.chip)>:is(span,i,img,svg){pointer-events:none}.kds-theme-root div:is(:not([class]),[class=active]):has(>:not(.responsive)~:is(menu,.tooltip,input)){display:inline-flex}.kds-theme-root .middle-align{display:flex;align-items:center!important}.kds-theme-root .bottom-align{display:flex;align-items:flex-end!important}.kds-theme-root .top-align{display:flex;align-items:flex-start!important}.kds-theme-root .left-align{text-align:start;justify-content:flex-start!important}.kds-theme-root .right-align{text-align:end;justify-content:flex-end!important}.kds-theme-root .center-align{text-align:center;justify-content:center!important}.kds-theme-root [class*=blur],.kds-theme-root [class*=blur].light{--_blur: 1rem;-webkit-backdrop-filter:blur(var(--_blur));backdrop-filter:blur(var(--_blur));color:var(--on-surface);background-color:#ffffff80!important}.kds-theme-root .dark [class*=blur],.kds-theme-root [class*=blur].dark{background-color:#00000080!important}.kds-theme-root .small-blur{--_blur: .5rem}.kds-theme-root .large-blur{--_blur: 1.5rem}.kds-theme-root .horizontal{display:inline-flex;flex-direction:row!important;gap:1rem;inline-size:auto!important;max-inline-size:none!important}.kds-theme-root .horizontal>*{margin-block:0!important}.kds-theme-root .vertical{display:flex;flex-direction:column!important}.kds-theme-root :is(a,button,.button,.chip).vertical{display:inline-flex;gap:.25rem;block-size:auto!important;max-block-size:none!important;padding-block:.5rem}.kds-theme-root .vertical>*{margin-inline:0!important}.kds-theme-root .no-elevate{box-shadow:none!important}.kds-theme-root .small-elevate,.kds-theme-root .elevate{box-shadow:var(--elevate1)!important}.kds-theme-root .medium-elevate{box-shadow:var(--elevate2)!important}.kds-theme-root .large-elevate{box-shadow:var(--elevate3)!important}.kds-theme-root .round,.kds-theme-root [class*=-round]{--_round: 2rem;border-radius:var(--_round)!important}.kds-theme-root .small-round{--_round: .5rem}.kds-theme-root .large-round{--_round: 3.5rem}.kds-theme-root .no-round,.kds-theme-root .square,.kds-theme-root .top-round,.kds-theme-root .bottom-round,.kds-theme-root .left-round,.kds-theme-root .right-round{border-radius:.5rem!important}.kds-theme-root .top-round{border-start-start-radius:var(--_round)!important;border-start-end-radius:var(--_round)!important}.kds-theme-root .bottom-round{border-end-end-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.kds-theme-root .left-round{border-start-start-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.kds-theme-root .right-round{border-start-end-radius:var(--_round)!important;border-end-end-radius:var(--_round)!important}.kds-theme-root .circle:not(.extend){border-radius:50%}.kds-theme-root :is(.circle,.square):is(button,.button,.chip){padding:0;block-size:var(--_size);inline-size:var(--_size)}.kds-theme-root :is(.circle,.square)>span:not([class]){display:none}.kds-theme-root :is(.circle,.square).round{border-radius:1rem!important}.kds-theme-root .border:not(table,.field,.list,menu,article){box-sizing:border-box;border:.0625rem solid var(--outline);background-color:transparent;box-shadow:none}.kds-theme-root .no-border{border-color:transparent!important}.kds-theme-root .margin,.kds-theme-root [class*=-margin]:not(.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin){margin:var(--_margin)!important}.kds-theme-root .margin,.kds-theme-root [class*=-margin]{--_margin: 1rem}.kds-theme-root .no-margin{--_margin: 0}.kds-theme-root .auto-margin{--_margin: auto}.kds-theme-root .tiny-margin{--_margin: .25rem}.kds-theme-root .small-margin{--_margin: .5rem}.kds-theme-root .large-margin{--_margin: 1.5rem}.kds-theme-root .left-margin,.kds-theme-root .horizontal-margin{margin-inline-start:var(--_margin)!important}.kds-theme-root .right-margin,.kds-theme-root .horizontal-margin{margin-inline-end:var(--_margin)!important}.kds-theme-root .top-margin,.kds-theme-root .vertical-margin{margin-block-start:var(--_margin)!important}.kds-theme-root .bottom-margin,.kds-theme-root .vertical-margin{margin-block-end:var(--_margin)!important}.kds-theme-root .no-opacity{opacity:0!important}.kds-theme-root .small-opacity{opacity:.25!important}.kds-theme-root .medium-opacity{opacity:.5!important}.kds-theme-root .large-opacity{opacity:.75!important}.kds-theme-root .opacity{opacity:1!important}.kds-theme-root .padding,.kds-theme-root [class*=-padding]:not(.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding){padding:var(--_padding)!important}.kds-theme-root .padding,.kds-theme-root [class*=-padding]{--_padding: 1rem}.kds-theme-root .no-padding{--_padding: 0 !important}.kds-theme-root .tiny-padding{--_padding: .25rem !important}.kds-theme-root .small-padding{--_padding: .5rem !important}.kds-theme-root .large-padding{--_padding: 1.5rem !important}.kds-theme-root .left-padding,.kds-theme-root .horizontal-padding{padding-inline-start:var(--_padding)!important}.kds-theme-root .right-padding,.kds-theme-root .horizontal-padding{padding-inline-end:var(--_padding)!important}.kds-theme-root .top-padding,.kds-theme-root .vertical-padding{padding-block-start:var(--_padding)!important}.kds-theme-root .bottom-padding,.kds-theme-root .vertical-padding{padding-block-end:var(--_padding)!important}.kds-theme-root .front{z-index:10!important}.kds-theme-root .back{z-index:-10!important}.kds-theme-root .left{inset-inline-start:0}.kds-theme-root .right{inset-inline-end:0}.kds-theme-root .top{inset-block-start:0}.kds-theme-root .bottom{inset-block-end:0}.kds-theme-root .center{inset-inline-start:50%;transform:translate(-50%)}.kds-theme-root [dir=rtl] .center{transform:translate(50%)}.kds-theme-root .middle{inset-block-start:50%;transform:translateY(-50%)}.kds-theme-root .middle.center{transform:translate(-50%,-50%)}.kds-theme-root [dir=rtl] .middle.center{transform:translate(50%,-50%)}.kds-theme-root [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}.kds-theme-root .ripple{--_duration: .6s}.kds-theme-root .fast-ripple{--_duration: .2s}.kds-theme-root .slow-ripple{--_duration: 1.8s}.kds-theme-root .ripple-js{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.kds-theme-root .ripple-js>div{position:absolute;border-radius:50%;background:currentColor;opacity:.3;transform:scale(0);animation:to-ripple var(--_duration) linear}.kds-theme-root .scroll{overflow:auto}.kds-theme-root .no-scroll{overflow:hidden}.kds-theme-root .shadow{background-color:#00000050}.kds-theme-root :is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow){background-color:transparent!important}.kds-theme-root .left-shadow{background-image:linear-gradient(to right,black,transparent)!important}.kds-theme-root .right-shadow{background-image:linear-gradient(to left,black,transparent)!important}.kds-theme-root .bottom-shadow{background-image:linear-gradient(to top,black,transparent)!important}.kds-theme-root .top-shadow{background-image:linear-gradient(to bottom,black,transparent)!important}.kds-theme-root [class*=-width]{max-inline-size:100%}.kds-theme-root .auto-width{inline-size:auto}.kds-theme-root .small-width{inline-size:12rem!important}.kds-theme-root .medium-width{inline-size:24rem!important}.kds-theme-root .large-width{inline-size:36rem!important}.kds-theme-root .auto-height{block-size:auto}.kds-theme-root .small-height{block-size:12rem!important}.kds-theme-root .medium-height{block-size:24rem!important}.kds-theme-root .large-height{block-size:36rem!important}.kds-theme-root .wrap{display:block;white-space:normal}.kds-theme-root .no-wrap:not(menu){display:flex;white-space:nowrap}.kds-theme-root .tiny-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:.5rem}.kds-theme-root :is(.space,.small-space):not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:1rem}.kds-theme-root .medium-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:2rem}.kds-theme-root .large-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:3rem}.kds-theme-root .extra-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:4rem}.kds-theme-root .responsive{inline-size:-webkit-fill-available;inline-size:-moz-available}@media only screen and (max-width:600px){.kds-theme-root :is(.m,.l):not(.s){display:none!important}}@media only screen and (min-width:601px)and (max-width:992px){.kds-theme-root :is(.s,.l):not(.m){display:none!important}}@media only screen and (min-width:993px){.kds-theme-root :is(.m,.s):not(.l){display:none!important}}.kds-theme-root h1,.kds-theme-root h2,.kds-theme-root h3,.kds-theme-root h4,.kds-theme-root h5,.kds-theme-root h6,.kds-theme-root .h1,.kds-theme-root .h2,.kds-theme-root .h3,.kds-theme-root .h4,.kds-theme-root .h5,.kds-theme-root .h6{font-weight:400;display:block;align-items:center;line-height:normal}.kds-theme-root h1,.kds-theme-root .h1{font-size:3.5625rem}.kds-theme-root h2,.kds-theme-root .h2{font-size:2.8125rem}.kds-theme-root h3,.kds-theme-root .h3{font-size:2.25rem}.kds-theme-root h4,.kds-theme-root .h4{font-size:2rem}.kds-theme-root h5,.kds-theme-root .h5{font-size:1.75rem}.kds-theme-root h6,.kds-theme-root .h6{font-size:1.5rem}.kds-theme-root :is(h1,.h1).small{font-size:3.0625rem}.kds-theme-root :is(h2,.h2).small{font-size:2.3125rem}.kds-theme-root :is(h3,.h3).small{font-size:1.75rem}.kds-theme-root :is(h4,.h4).small{font-size:1.5rem}.kds-theme-root :is(h5,.h5).small{font-size:1.25rem}.kds-theme-root :is(h6,.h6).small{font-size:1rem}.kds-theme-root :is(h1,.h1).large{font-size:4.0625rem}.kds-theme-root :is(h2,.h2).large{font-size:3.3125rem}.kds-theme-root :is(h3,.h3).large{font-size:2.75rem}.kds-theme-root :is(h4,.h4).large{font-size:2.5rem}.kds-theme-root :is(h5,.h5).large{font-size:2.25rem}.kds-theme-root :is(h6,.h6).large{font-size:2rem}.kds-theme-root .link{color:var(--primary)!important}.kds-theme-root .inverse-link{color:var(--inverse-primary)!important}.kds-theme-root .truncate{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis;flex:inherit}.kds-theme-root .truncate>*{white-space:nowrap!important}.kds-theme-root .small-text{font-size:.75rem}.kds-theme-root .medium-text{font-size:.875rem}.kds-theme-root .large-text{font-size:1rem}.kds-theme-root .upper{text-transform:uppercase}.kds-theme-root .lower{text-transform:lowercase}.kds-theme-root .capitalize{text-transform:capitalize}.kds-theme-root .bold{font-weight:700}.kds-theme-root .overline{text-decoration:line-through}.kds-theme-root .underline{text-decoration:underline}.kds-theme-root .italic{font-style:italic}.kds-theme-root p{margin:.5rem 0}.kds-theme-root .no-line{line-height:normal}.kds-theme-root .tiny-line{line-height:1.25rem}.kds-theme-root .small-line{line-height:1.5rem}.kds-theme-root .medium-line{line-height:1.75rem}.kds-theme-root .large-line{line-height:2rem}.kds-theme-root .extra-line{line-height:2.25rem}.kds-theme-root 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}.kds-theme-root blockquote{border-radius:0;padding:1rem;border-inline-start:.25rem solid var(--primary);font-family:inherit}.kds-theme-root code{border-radius:0;background-color:var(--surface-container);white-space:pre-wrap;padding:.25rem}.kds-theme-root pre>code,.kds-theme-root blockquote>code{padding:0}.kds-theme-root .scroll>code{white-space:pre}.kds-theme-root pre:has(>code){direction:ltr;text-align:start}.kds-theme-root sub{vertical-align:sub}.kds-theme-root sup{vertical-align:super}.kds-theme-root :is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>a:after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:after,.kds-theme-root nav:is(.left,.right,.bottom,.top):not(.max)>a>i:after,.kds-theme-root 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}.kds-theme-root :is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):is(:focus-visible,:hover):after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>a:not(.button,.chip):is(:focus-visible,:hover):after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:not(.button,.chip):is(:focus-visible,:hover):after,.kds-theme-root nav:is(.left,.right,.bottom,.top):not(.max)>a:not(.button,.chip):is(:focus-visible,:hover)>i:after,.kds-theme-root 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}.kds-theme-root :is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a,nav.max>a):not([class*=ripple]):active:after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>a:active:after,.kds-theme-root nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:active:after,.kds-theme-root nav:is(.left,.right,.bottom,.top):not(.max)>a:active>i:after,.kds-theme-root nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a:active>i:after{background-size:0%;opacity:0;transition:none}.kds-theme-root .no-wave:after,.kds-theme-root .no-wave:is(:hover,:active):after{display:none}.kds-theme-root .zoom,.kds-theme-root .tiny-zoom{zoom:2}.kds-theme-root .small-zoom{zoom:3}.kds-theme-root .medium-zoom{zoom:4}.kds-theme-root .large-zoom{zoom:5}.kds-theme-root .extra-zoom{zoom:6}.kds-theme-root .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)}.kds-theme-root .badge.top{--_y: -100%}.kds-theme-root .badge.bottom{--_y: 0}.kds-theme-root .badge.left{--_x: -100%}.kds-theme-root .badge.right{--_x: 0}.kds-theme-root .badge.border{border-color:var(--error);color:var(--error);background-color:var(--surface)}.kds-theme-root .badge:is(.circle,.square){text-align:center;inline-size:auto;block-size:auto;padding:0 .25rem;border-radius:1rem}.kds-theme-root .badge.square{border-radius:0}.kds-theme-root .badge.min>*{display:none}.kds-theme-root .badge.min{clip-path:circle(18.75% at 50% 50%)}.kds-theme-root nav:is(.left,.right,.top,.bottom)>a>.badge,.kds-theme-root nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a>.badge{inset:1rem auto auto 50%}.kds-theme-root .badge.none{inset:auto!important;transform:none;position:relative;margin:0 .125rem}.kds-theme-root header,.kds-theme-root footer{display:grid;align-content:center;border-radius:0;padding:0 1rem}.kds-theme-root :is(dialog,article)>:is(header,footer){padding-inline:0;top:0;right:0;bottom:0;left:0}.kds-theme-root header{min-block-size:4rem}.kds-theme-root footer{min-block-size:5rem}.kds-theme-root :is(header,footer,menu>*).fixed{position:sticky;top:0;right:0;bottom:0;left:0;z-index:11;background-color:inherit}.kds-theme-root header.fixed{inset:calc(-1 * var(--_padding, 0)) 0 0 0;margin-block-start:calc(-1 * var(--_padding, 0))}.kds-theme-root footer.fixed{inset:0 0 calc(-1 * var(--_padding, 0)) 0;margin-block-end:calc(-1 * var(--_padding, 0))}.kds-theme-root :is(header,footer).fixed.min{margin-inline:auto}.kds-theme-root dialog>:is(header,footer){background:none}.kds-theme-root dialog>:is(header,footer).fixed{background-color:inherit}.kds-theme-root :is(main,header,footer,section).responsive{max-inline-size:min(100vw,75rem);margin:0 auto}.kds-theme-root :is(main,header,footer,section).responsive.max{max-inline-size:none}.kds-theme-root :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}.kds-theme-root :has(>main)>header{padding-block-start:var(--top, 0)}.kds-theme-root :has(>main)>footer{padding-block-end:var(--bottom, 0)}.kds-theme-root nav.top~header,.kds-theme-root nav.bottom~footer{padding-block:0}.kds-theme-root nav.top~header.fixed{inset-block:calc(var(--top, 0) + 4.5rem) 0}.kds-theme-root nav.bottom~footer.fixed{inset-block:0 calc(var(--bottom, 0) + 4.5rem)}.kds-theme-root :is(nav,.row)>header{background-color:inherit}.kds-theme-root .button,.kds-theme-root 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}.kds-theme-root :is(button,.button).small{--_size: 2rem;--_padding: .75rem}.kds-theme-root :is(button,.button).large{--_size: 3rem;--_padding: 1.25rem}.kds-theme-root :is(.button,button):is(.extra,.extend){--_size: 3.5rem;font-size:1rem;--_padding: 1.5rem}.kds-theme-root :is(button,.button):is(.square,.circle){--_padding: 0}.kds-theme-root :is(button,.button).border{border-color:var(--outline-variant);color:var(--primary)}.kds-theme-root .extend>span:not([class]){display:none}.kds-theme-root .extend:is(:hover,.active){inline-size:auto;--_padding: 1.5rem;padding:0 var(--_padding)}.kds-theme-root .extend:is(:hover,.active)>i+span{display:inherit;margin-inline-start:var(--_padding)}.kds-theme-root .extend:is(:hover,.active)>:is(img,svg)+span{display:inherit;margin-inline-start:calc(1rem + var(--_padding, 0))}.kds-theme-root :is(.button,button)[disabled]{opacity:.5;cursor:not-allowed}.kds-theme-root .button[disabled]{pointer-events:none}.kds-theme-root :is(.button,button)[disabled]:before,.kds-theme-root :is(.button,button)[disabled]:after{display:none}.kds-theme-root :is(.button,button):not(.chip,.extend).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.kds-theme-root :is(.button,button):not(.chip,.extend).active{background-color:var(--primary-container);color:var(--on-primary-container)}.kds-theme-root :is(.button,button):not(.chip,.extend).fill.active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.kds-theme-root :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}.kds-theme-root :is(.button,button):not(.chip):active,.kds-theme-root :is(.button,button):not(.chip).active{border-radius:.5rem!important}.kds-theme-root 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)}.kds-theme-root article.small{block-size:12rem}.kds-theme-root article.medium{block-size:20rem}.kds-theme-root article.large{block-size:32rem}.kds-theme-root article.border{box-shadow:none;border:.0625rem solid var(--outline-variant)}.kds-theme-root .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}.kds-theme-root .chip.medium{--_size: 2.5rem;--_padding: 1rem}.kds-theme-root .chip.large{--_padding: 1.25rem;--_size: 3rem}.kds-theme-root .chip.fill{border:none}.kds-theme-root 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}.kds-theme-root dialog.small{inline-size:25%;block-size:25%}.kds-theme-root dialog.medium{inline-size:50%;block-size:50%}.kds-theme-root dialog.large{inline-size:75%;block-size:75%}.kds-theme-root dialog:is(.active,[open]){visibility:visible;opacity:1;transform:translate(-50%)}.kds-theme-root dialog:popover-open{visibility:visible;opacity:1;transform:translate(-50%)}.kds-theme-root dialog:is(.top,.right,.bottom,.left,.max){--_padding: 1rem}.kds-theme-root dialog:is(.top,.bottom){opacity:1;block-size:auto;inline-size:100%;min-inline-size:auto;max-block-size:100%}.kds-theme-root dialog.top{inset:0 auto auto 0;transform:translateY(-100%);border-radius:0 0 1rem 1rem;padding-block-start:var(--_top)}.kds-theme-root dialog.bottom{inset:auto auto 0 0;transform:translateY(100%);border-radius:1rem 1rem 0 0;padding-block-end:var(--_bottom)}.kds-theme-root 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)}.kds-theme-root [dir=rtl] dialog.right,.kds-theme-root dialog.left{inset:0 auto auto 0;border-radius:0 1rem 1rem 0;transform:translate(-100%)}.kds-theme-root [dir=rtl] dialog.left,.kds-theme-root dialog.right{inset:0 0 auto auto;border-radius:1rem 0 0 1rem;transform:translate(100%)}.kds-theme-root 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)}.kds-theme-root dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max){transform:translate(0)}.kds-theme-root dialog:popover-open:is(.left,.right,.top,.bottom,.max){transform:translate(0)}.kds-theme-root dialog.small:is(.left,.right){inline-size:20rem}.kds-theme-root dialog.medium:is(.left,.right){inline-size:32rem}.kds-theme-root dialog.large:is(.left,.right){inline-size:44rem}.kds-theme-root dialog.small:is(.top,.bottom){block-size:16rem}.kds-theme-root dialog.medium:is(.top,.bottom){block-size:24rem}.kds-theme-root dialog.large:is(.top,.bottom){block-size:32rem}.kds-theme-root hr,.kds-theme-root [class*=divider]{all:unset;inline-size:-webkit-fill-available;min-block-size:auto;block-size:.0625rem;background-color:var(--outline-variant);display:block}.kds-theme-root hr+*,.kds-theme-root [class*=divider]+*{margin:0!important}.kds-theme-root hr.medium,.kds-theme-root .medium-divider{margin:1rem 0!important}.kds-theme-root hr.large,.kds-theme-root .large-divider{margin:1.5rem 0!important}.kds-theme-root hr.small,.kds-theme-root .small-divider{margin:.5rem 0!important}.kds-theme-root 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}.kds-theme-root :is(hr,.divider).vertical,.kds-theme-root 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}.kds-theme-root summary{list-style-type:none;cursor:pointer}.kds-theme-root summary::-webkit-details-marker{display:none}.kds-theme-root summary>*{pointer-events:none;margin:0}.kds-theme-root li>details>summary+.list{margin:0!important}.kds-theme-root .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}.kds-theme-root .field.fill{--_background: var(--surface-variant);background-color:unset!important;color:unset!important}.kds-theme-root .field.fill>:is(input,select,textarea){background-color:var(--_background);z-index:0}.kds-theme-root .field.small{--_input: 2.5rem;--_start: 1rem}.kds-theme-root .field.large{--_input: 3.5rem;--_start: 1.4rem}.kds-theme-root .field.extra{--_input: 4rem;--_start: 1.6rem}.kds-theme-root .field.border{border-radius:.25rem}.kds-theme-root .field[class*=round].small{border-radius:1.25rem}.kds-theme-root .field[class*=round]{border-radius:1.5rem}.kds-theme-root .field[class*=round].large{border-radius:1.75rem}.kds-theme-root .field[class*=round].extra{border-radius:2rem}.kds-theme-root .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}.kds-theme-root .field>:is(a,.front){pointer-events:all!important}.kds-theme-root .field>a>:is(i,img,svg,progress.circle,a){inline-size:1.5rem;block-size:1.5rem}.kds-theme-root .field>:is(i,img,svg,progress.circle,a),.kds-theme-root [dir=rtl] .field>:is(i,img,svg,progress.circle,a):first-child{inset:calc(var(--_middle, 0) - .75rem) 1rem auto auto}.kds-theme-root .field>:is(i,img,svg,progress.circle,a):first-child,.kds-theme-root [dir=rtl] .field>:is(i,img,svg,progress.circle,a){inset:calc(var(--_middle, 0) - .75rem) auto auto 1rem}.kds-theme-root .field.invalid>i{color:var(--error)}.kds-theme-root .field>progress.circle{border-width:.1875rem}.kds-theme-root .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}.kds-theme-root input::-webkit-date-and-time-value{text-align:start}.kds-theme-root :is(input,select,textarea):is(:-webkit-autofill,:autofill){-webkit-background-clip:text;-webkit-text-fill-color:var(--on-surface)}.kds-theme-root .field>:is(input,textarea,select):focus{border:.125rem solid transparent;padding-inline:.875rem}.kds-theme-root .field>textarea:not([rows]){field-sizing:content;max-block-size:12rem}.kds-theme-root input[type=file],.kds-theme-root input[type=color],.kds-theme-root :not(.field)>input:is([type^=date],[type^=time],[type=month],[type=week]),.kds-theme-root 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){.kds-theme-root .field>input::-webkit-calendar-picker-indicator{z-index:-1!important}}.kds-theme-root input::-webkit-search-decoration,.kds-theme-root input::-webkit-search-cancel-button,.kds-theme-root input::-webkit-search-results-button,.kds-theme-root input::-webkit-search-results-decoration,.kds-theme-root input::-webkit-inner-spin-button,.kds-theme-root input::-webkit-outer-spin-button{display:none}.kds-theme-root input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.kds-theme-root .field.border>:is(input,textarea,select){border-color:var(--outline)}.kds-theme-root .field.border>:is(input,textarea,select):focus{border-color:var(--primary)}.kds-theme-root .field[class*=round]>:is(input,textarea,select){padding-inline:1.4376rem}.kds-theme-root .field[class*=round]>:is(input,textarea,select):focus{padding-inline:1.375rem}.kds-theme-root .field.prefix>:is(input,textarea,select){padding-inline-start:2.9375rem}.kds-theme-root .field.prefix>.slider{margin-inline-start:3.5rem}.kds-theme-root .field.prefix>:is(input,textarea,select):focus{padding-inline-start:2.875rem}.kds-theme-root .field.suffix>:is(input,textarea,select){padding-inline-end:2.9375rem}.kds-theme-root .field.suffix>.slider{margin-inline-end:3.5rem}.kds-theme-root .field.suffix>:is(input,textarea,select):focus{padding-inline-end:2.875rem}.kds-theme-root .field:not(.border,[class*=round])>:is(input,textarea,select){border-block-end-color:var(--outline)}.kds-theme-root .field:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--primary)}.kds-theme-root .field[class*=round]:not(.border,.fill)>:is(input,textarea,select),.kds-theme-root .field[class*=round]:not(.border)>:is(input,textarea,select):focus{box-shadow:var(--elevate1)}.kds-theme-root .field[class*=round]:not(.border,.fill)>:is(input,textarea,select):focus{box-shadow:var(--elevate2)}.kds-theme-root .field.invalid:not(.border,[class*=round])>:is(input,textarea,select),.kds-theme-root .field.invalid:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--error)}.kds-theme-root .field.invalid.border>:is(input,textarea,select),.kds-theme-root .field.invalid.border>:is(input,textarea,select):focus{border-color:var(--error)}.kds-theme-root .field:has(>:disabled){opacity:.5;cursor:not-allowed}.kds-theme-root .field>:disabled{cursor:not-allowed}.kds-theme-root .field>select{-webkit-user-select:none;user-select:none}@-moz-document url-prefix(){.kds-theme-root .field>select:focus{background-color:var(--surface)}.kds-theme-root .field.fill>select:focus{background-color:var(--surface-variant)}.kds-theme-root .field>select:focus+label{z-index:1}}.kds-theme-root .field>select>option{background-color:var(--surface)}.kds-theme-root .field>:is(input,select){padding-block-start:1rem}.kds-theme-root .field:not(.label)>:is(input,select),.kds-theme-root .field.border:not(.fill)>:is(input,select){padding-block-start:0}.kds-theme-root .field>textarea{padding-block-start:var(--_start)!important}.kds-theme-root .field>textarea:focus{padding-block-start:calc(var(--_start, 0) - .01rem)!important}.kds-theme-root .field:not(.label)>textarea,.kds-theme-root .field.border:not(.fill)>textarea{padding-block-start:calc(var(--_start, 0) - .5rem)!important}.kds-theme-root .field:not(.label)>textarea:focus,.kds-theme-root .field.border:not(.fill)>textarea:focus{padding-block-start:calc(var(--_start, 0) - .51rem)!important}.kds-theme-root .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}.kds-theme-root [dir=rtl] .field.label>label{inset:-.5rem calc(var(--_start) - .0625rem) 0 .9375rem}.kds-theme-root .field.label[class*=round]>label{inset:-.5rem 1.9375rem 0 var(--_start)}.kds-theme-root [dir=rtl] .field.label[class*=round]>label{inset:-.5rem var(--_start) 0 1.9375rem}.kds-theme-root .field.label.border.prefix:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1rem}.kds-theme-root .field.label[class*=round]>label,.kds-theme-root .field.label.border.prefix[class*=round]:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1.5rem}.kds-theme-root .field.label.prefix>label{--_start: 3rem}.kds-theme-root .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}.kds-theme-root .field.label.border:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){block-size:1rem;line-height:1rem}.kds-theme-root .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}.kds-theme-root .field.label.border:not(.fill)>:focus+label:after{border-block-start:.125rem solid var(--primary)}.kds-theme-root .field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.kds-theme-root .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%)}.kds-theme-root [dir=rtl] .field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.kds-theme-root [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%)}.kds-theme-root .field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.kds-theme-root .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%)}.kds-theme-root [dir=rtl] .field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.kds-theme-root [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%)}.kds-theme-root .field.label>:focus+label{color:var(--primary)}.kds-theme-root .field.label.invalid>label,.kds-theme-root .field.label.invalid>label:after{color:var(--error)!important;border-color:var(--error)!important}.kds-theme-root .field.label>label>a{block-size:inherit;line-height:inherit;inline-size:1rem}.kds-theme-root .field.label>label>a>:is(i,img,svg){block-size:1rem;line-height:1rem;inline-size:1rem;font-size:1rem}.kds-theme-root .field>output{display:inline-block;font-size:.75rem;background:none!important;padding:.25rem 1rem;line-height:1.25rem;align-self:start}.kds-theme-root .field>output.invalid{color:var(--error)!important}.kds-theme-root .field[class*=round]>output{padding:.25rem 1.5rem}.kds-theme-root .field.invalid>output:not(.invalid),.kds-theme-root .field:not(.invalid)>output.invalid{display:none}.kds-theme-root .field.invalid>output.invalid~menu,.kds-theme-root .field:not(.invalid)>output:not(.invalid)~menu{inset:auto auto 1.75rem 0}.kds-theme-root table td>.field{margin:0}.kds-theme-root fieldset{border-radius:.25rem;padding:1rem;border:.0625rem solid var(--outline-variant)}.kds-theme-root fieldset>legend{margin:0 -.25rem;padding:0 .25rem}.kds-theme-root fieldset>legend+*{margin-block-start:0!important}.kds-theme-root .grid{--_gap: 1rem;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--_gap);block-size:auto}.kds-theme-root .grid.no-space{--_gap: 0rem}.kds-theme-root .grid.medium-space{--_gap: 1.5rem}.kds-theme-root .grid.large-space{--_gap: 2rem}.kds-theme-root .grid>*{margin:0}.kds-theme-root .s1{grid-area:auto/span 1}.kds-theme-root .s2{grid-area:auto/span 2}.kds-theme-root .s3{grid-area:auto/span 3}.kds-theme-root .s4{grid-area:auto/span 4}.kds-theme-root .s5{grid-area:auto/span 5}.kds-theme-root .s6{grid-area:auto/span 6}.kds-theme-root .s7{grid-area:auto/span 7}.kds-theme-root .s8{grid-area:auto/span 8}.kds-theme-root .s9{grid-area:auto/span 9}.kds-theme-root .s10{grid-area:auto/span 10}.kds-theme-root .s11{grid-area:auto/span 11}.kds-theme-root .s12{grid-area:auto/span 12}@media only screen and (min-width:601px){.kds-theme-root .m1{grid-area:auto/span 1}.kds-theme-root .m2{grid-area:auto/span 2}.kds-theme-root .m3{grid-area:auto/span 3}.kds-theme-root .m4{grid-area:auto/span 4}.kds-theme-root .m5{grid-area:auto/span 5}.kds-theme-root .m6{grid-area:auto/span 6}.kds-theme-root .m7{grid-area:auto/span 7}.kds-theme-root .m8{grid-area:auto/span 8}.kds-theme-root .m9{grid-area:auto/span 9}.kds-theme-root .m10{grid-area:auto/span 10}.kds-theme-root .m11{grid-area:auto/span 11}.kds-theme-root .m12{grid-area:auto/span 12}}@media only screen and (min-width:993px){.kds-theme-root .l1{grid-area:auto/span 1}.kds-theme-root .l2{grid-area:auto/span 2}.kds-theme-root .l3{grid-area:auto/span 3}.kds-theme-root .l4{grid-area:auto/span 4}.kds-theme-root .l5{grid-area:auto/span 5}.kds-theme-root .l6{grid-area:auto/span 6}.kds-theme-root .l7{grid-area:auto/span 7}.kds-theme-root .l8{grid-area:auto/span 8}.kds-theme-root .l9{grid-area:auto/span 9}.kds-theme-root .l10{grid-area:auto/span 10}.kds-theme-root .l11{grid-area:auto/span 11}.kds-theme-root .l12{grid-area:auto/span 12}}.kds-theme-root i,.kds-theme-root :is(.checkbox,.radio,.switch)>span:before,.kds-theme-root :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}.kds-theme-root i:has(.badge){overflow:unset}.kds-theme-root i.tiny{--_size: 1rem}.kds-theme-root .chip>i,.kds-theme-root i.small{--_size: 1.25rem}.kds-theme-root i.medium{--_size: 1.5rem}.kds-theme-root i.large{--_size: 1.75rem}.kds-theme-root i.extra{--_size: 2rem}.kds-theme-root i.fill,.kds-theme-root a.active>i,.kds-theme-root button.active>i{font-variation-settings:"FILL" 1}.kds-theme-root 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}.kds-theme-root i[class*=fa-]{font-size:calc(var(--_size, 0) * .85);line-height:normal;block-size:auto;min-block-size:auto}.kds-theme-root .absolute{position:absolute}.kds-theme-root .fixed{position:fixed}.kds-theme-root :is(.absolute,.fixed).left.right{inline-size:auto}.kds-theme-root :is(.absolute,.fixed).left.right.small{block-size:20rem}.kds-theme-root :is(.absolute,.fixed).left.right.medium{block-size:28rem}.kds-theme-root :is(.absolute,.fixed).left.right.large{block-size:44rem}.kds-theme-root :is(.absolute,.fixed).top.bottom.small{inline-size:20rem}.kds-theme-root :is(.absolute,.fixed).top.bottom.medium{inline-size:28rem}.kds-theme-root :is(.absolute,.fixed).top.bottom.large{inline-size:44rem}.kds-theme-root .list{display:flex;flex-direction:column;padding:0;margin:0;flex:1}.kds-theme-root .list>li,.kds-theme-root .list>li>details>summary,.kds-theme-root .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}.kds-theme-root .list>li:has(ul,ol,details[open],a:only-child){padding:0}.kds-theme-root .list>li>.list{padding:0 0 0 1rem}.kds-theme-root .list>li>*,.kds-theme-root .list>li>a:only-child>*{margin:0}.kds-theme-root .list>li>:is(details,.max),.kds-theme-root .list>li>a:only-child>.max,.kds-theme-root .list>li>details>summary>.max{flex:1}.kds-theme-root .list.border>li:not(:last-child):before,.kds-theme-root .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}.kds-theme-root .list.no-space>li,.kds-theme-root .list.no-space>li>details>summary{min-block-size:2.5rem}.kds-theme-root .list.medium-space>li,.kds-theme-root .list.medium-space>li>details>summary{min-block-size:4.5rem}.kds-theme-root .list.large-space>li,.kds-theme-root .list.large-space>li>details>summary{min-block-size:5.5rem}.kds-theme-root .list>li:focus-visible,.kds-theme-root .list>li>a:only-child:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.25rem}.kds-theme-root :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)}.kds-theme-root nav.left{grid-area:left}.kds-theme-root nav.right{grid-area:right}.kds-theme-root nav.top{grid-area:top}.kds-theme-root nav.bottom{grid-area:bottom}.kds-theme-root header{grid-area:header}.kds-theme-root footer{grid-area:footer}.kds-theme-root main{--_padding: .5rem;grid-area:main;padding:var(--_padding);overflow:clip}.kds-theme-root aside{z-index:1}.kds-theme-root aside:not(.fixed,.absolute).right{float:right}.kds-theme-root aside:not(.fixed,.absolute).left{float:left}.kds-theme-root svg{fill:currentcolor}.kds-theme-root :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)}.kds-theme-root :is(img,svg,video).round{--_round: .5rem}.kds-theme-root :is(img,svg,video).tiny{--_size: 2rem}.kds-theme-root :is(img,svg,video).small{--_size: 2.5rem}.kds-theme-root :is(img,svg,video).large{--_size: 3.5rem}.kds-theme-root :is(img,svg,video).extra{--_size: 4rem}.kds-theme-root :is(img,svg,video).responsive{--_size: 100%;margin:0 auto}.kds-theme-root :is(img,svg,video).responsive.tiny{inline-size:100%;block-size:4rem}.kds-theme-root :is(img,svg,video).responsive.small{inline-size:100%;block-size:8rem}.kds-theme-root :is(img,svg,video).responsive.medium{inline-size:100%;block-size:12rem}.kds-theme-root :is(img,svg,video).responsive.large{inline-size:100%;block-size:16rem}.kds-theme-root :is(img,svg,video).responsive.extra{inline-size:100%;block-size:20rem}.kds-theme-root :is(img,svg,video).responsive.round{--_round: 2rem}.kds-theme-root :is(img,svg,video).empty-state{max-inline-size:100%;inline-size:24rem}.kds-theme-root :is(button,.button,.chip):not(.transparent)>.responsive{border:.25rem solid transparent}.kds-theme-root :is(button,.button,.chip,.field)>:is(img,svg):not(.responsive),.kds-theme-root .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}.kds-theme-root :is(button,.button,.chip):not(.extend)>.responsive:first-child{margin-inline-start:calc(-1 * var(--_padding, 0))}.kds-theme-root :is(button,.button,.chip):not(.extend)>.responsive:not(:first-child){margin-inline-end:calc(-1 * var(--_padding, 0))}.kds-theme-root :is(button,.button,.chip,.circle,.square,.extend)>.responsive{--_size: inherit;margin:0 auto}.kds-theme-root .extend>:is(.responsive,i){margin:0;position:absolute;inset-inline:1rem;z-index:1}.kds-theme-root .extend>.responsive{inset-inline:0;inline-size:3.5rem}.kds-theme-root .extend.border>.responsive{inline-size:3.375rem}.kds-theme-root 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}.kds-theme-root menu.no-space{gap:0}.kds-theme-root menu.small-space{gap:.25rem}.kds-theme-root menu.medium-space{gap:.375rem}.kds-theme-root menu.large-space{gap:.5rem}.kds-theme-root menu.extra-space{gap:.625rem}.kds-theme-root [dir=rtl] menu{inset:auto 0 0 auto}.kds-theme-root menu.no-wrap{inline-size:max-content!important;white-space:nowrap!important}.kds-theme-root menu.active,.kds-theme-root :not([data-ui]):focus-within>menu,.kds-theme-root menu>li:hover>menu,.kds-theme-root menu>li>menu:hover{opacity:1;visibility:visible;transform:scale(1) translateY(100%);transition:all var(--speed2),background-color 0s}.kds-theme-root menu.top.active,.kds-theme-root :not([data-ui]):focus-within>menu.top,.kds-theme-root menu>li:hover>menu.top,.kds-theme-root menu>li>menu.top:hover{transform:scale(1) translateY(-100%)}.kds-theme-root menu:is(.min,.max).active,.kds-theme-root :not([data-ui]):focus-within>menu:is(.min,.max){transform:scale(1)}.kds-theme-root menu *{white-space:inherit!important}.kds-theme-root menu>li,.kds-theme-root 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)}.kds-theme-root menu>li:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.kds-theme-root menu>li:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.kds-theme-root menu>li:hover{background-color:color-mix(in srgb,currentColor 10%,transparent)}.kds-theme-root menu>li.active{background-color:var(--tertiary-container);color:var(--on-tertiary-container)}.kds-theme-root menu>li:is(.active,:active){border-radius:.75rem}.kds-theme-root menu>li>:is(.max,.field),.kds-theme-root menu>li>a:only-child>.max,.kds-theme-root menu>li:has(.field,a:only-child){flex:1;padding:0;margin:0}.kds-theme-root menu.min{inset:0 0 auto 0;transform:scale(.8)}.kds-theme-root [dir=rtl] menu.min.right,.kds-theme-root menu.min.left,.kds-theme-root menu.top.left{inset:0 0 auto auto}.kds-theme-root [dir=rtl] menu.min.left,.kds-theme-root menu.min.right,.kds-theme-root menu.top,.kds-theme-root menu.top.right{inset:0 auto auto 0}.kds-theme-root 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}.kds-theme-root menu.max>li{flex:none!important}.kds-theme-root menu.no-wrap:is(.min,.max){min-inline-size:16rem}.kds-theme-root [dir=rtl] menu.right,.kds-theme-root [dir=rtl] menu.top.min.right,.kds-theme-root menu.left,.kds-theme-root menu.top.min.left{inset:auto 0 0 auto}.kds-theme-root [dir=rtl] menu.left,.kds-theme-root [dir=rtl] menu.top.min.left,.kds-theme-root menu.right,.kds-theme-root menu.top.min{inset:auto auto 0 0}.kds-theme-root menu.top{transform:scale(.8) translateY(-120%)}.kds-theme-root menu:has(menu){--_child: 1;--_type: 0;overflow:unset;white-space:nowrap;inline-size:auto;min-inline-size:12rem;max-block-size:none}.kds-theme-root menu>li>:is(menu,menu.right),.kds-theme-root [dir=rtl] menu>li>menu.left{inset:auto auto calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100%}.kds-theme-root [dir=rtl] menu>li>:is(menu,menu.right),.kds-theme-root menu>li>menu.left{inset:auto 100% calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto}.kds-theme-root menu>li>:is(menu.top,menu.top.right),.kds-theme-root [dir=rtl] menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto auto 100%}.kds-theme-root [dir=rtl] menu>li>:is(menu.top,menu.top.right),.kds-theme-root menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto}.kds-theme-root menu.group{padding:.5rem 0;inline-size:100%;min-inline-size:auto;max-block-size:none;overflow:unset;background:none;box-shadow:none}.kds-theme-root menu.group>li{box-shadow:none;padding:0;min-block-size:auto}.kds-theme-root menu.group>li:hover{background:none}.kds-theme-root menu.group>li>menu,.kds-theme-root 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}.kds-theme-root menu.group>li:last-child>menu{border-radius:.5rem .5rem 1rem 1rem}.kds-theme-root menu>li:nth-last-child(2){--_child: 2}.kds-theme-root menu>li:nth-last-child(3){--_child: 3}.kds-theme-root menu>li:nth-last-child(4){--_child: 4}.kds-theme-root menu>li:nth-last-child(5){--_child: 5}.kds-theme-root menu>li:nth-last-child(6){--_child: 6}.kds-theme-root menu>li:nth-last-child(7){--_child: 7}.kds-theme-root menu>li:nth-last-child(8){--_child: 8}.kds-theme-root menu>li:nth-last-child(9){--_child: 9}.kds-theme-root menu>li:nth-last-child(10){--_child: 10}.kds-theme-root menu>li:nth-last-child(11){--_child: 11}.kds-theme-root menu>li:nth-last-of-type(2){--_type: 1}.kds-theme-root menu>li:nth-last-of-type(3){--_type: 2}.kds-theme-root menu>li:nth-last-of-type(4){--_type: 3}.kds-theme-root menu>li:nth-last-of-type(5){--_type: 4}.kds-theme-root menu>li:nth-last-of-type(6){--_type: 5}.kds-theme-root menu>li:nth-last-of-type(7){--_type: 6}.kds-theme-root menu>li:nth-last-of-type(8){--_type: 7}.kds-theme-root menu>li:nth-last-of-type(9){--_type: 8}.kds-theme-root menu>li:nth-last-of-type(10){--_type: 9}.kds-theme-root menu>li:nth-last-of-type(11){--_type: 10}@media(pointer:coarse){.kds-theme-root :not(menu,[data-ui]):hover>menu{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}.kds-theme-root :not(menu,[data-ui]):hover>menu.top{transform:scale(1) translateY(-100%)}}.kds-theme-root nav>:is(ol,ul),.kds-theme-root nav>:is(ol,ul)>li{all:unset}.kds-theme-root nav,.kds-theme-root .row,.kds-theme-root 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}.kds-theme-root a.row,.kds-theme-root nav.row{min-block-size:3rem;margin:0}.kds-theme-root :is(nav,.row,.max)>:only-child,.kds-theme-root :is(nav,.row,.max)>span>*,.kds-theme-root nav>:is(ol,ul)>li>:only-child,.kds-theme-root nav>:is(ol,ul)>li>span>*{margin:0}.kds-theme-root :is(nav,.row)>:not(ul,ol,header,footer){margin:0;white-space:normal;flex:none}.kds-theme-root :is(nav,.row).min{display:inline-flex}.kds-theme-root :is(nav,.row,li).no-space{gap:0}.kds-theme-root :is(nav,.row,li).tiny-space{gap:.5rem}.kds-theme-root :is(nav,.row,li).medium-space{gap:1.5rem}.kds-theme-root :is(nav,.row,li).large-space{gap:2rem}.kds-theme-root :is(nav,.row)>.max,.kds-theme-root :is(nav,.row)>:is(ol,ul)>.max{flex:1}.kds-theme-root :is(nav,.row).wrap{display:flex;flex-wrap:wrap}.kds-theme-root :is(header,footer)>:is(nav,.row){min-block-size:inherit}.kds-theme-root 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}.kds-theme-root 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)}.kds-theme-root 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}.kds-theme-root nav.top{block-size:calc(var(--top, 0) + 4.5rem);padding-block-start:var(--_top)}.kds-theme-root nav.bottom{block-size:calc(var(--bottom, 0) + 4.5rem);padding-block-end:var(--_bottom)}.kds-theme-root nav>header{min-block-size:auto;padding:0;margin:0 0 1rem;align-items:flex-start;gap:1rem;background:none!important}.kds-theme-root nav:is(.top,.bottom)>header{flex-direction:row;align-items:center;margin:0 1rem 0 0}.kds-theme-root nav>header>*{margin:0;transition:none}.kds-theme-root nav.max>header>*{transition:all var(--speed1)}.kds-theme-root nav>header>.extend:hover{--_padding: 0;inline-size:var(--_size)}.kds-theme-root nav>header>.extend:hover>span:not([class]){display:none}.kds-theme-root nav>:is(ol,ul){all:inherit;min-inline-size:auto;margin:0;padding:0;flex:auto}.kds-theme-root 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}.kds-theme-root nav.max>:is(ol,ul){padding:0}.kds-theme-root nav.max>header{margin:0 0 1.25rem}.kds-theme-root nav.max:is(.top,.bottom)>header{margin:0 1.25rem 0 0}.kds-theme-root nav.max>header>.extend{--_padding: 1.5rem;inline-size:auto;padding:0 var(--_padding)}.kds-theme-root nav.max>header>.extend>span:not([class]){display:block;margin-inline-start:var(--_padding)}.kds-theme-root nav.max>header>.extend>:is(img,svg)+span{margin-inline-start:calc(1rem + var(--_padding, 0))}.kds-theme-root nav.max:is(.top,.bottom){padding:0 .5rem;align-items:center;min-inline-size:auto;max-inline-size:none}.kds-theme-root nav:is(.left,.right,.top,.bottom)>a:not(.button,.chip),.kds-theme-root 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}.kds-theme-root nav:not(.max):is(.left,.right,.top,.bottom)>a:not(.button,.chip)>i,.kds-theme-root 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}.kds-theme-root nav.max:is(.left,.right,.top,.bottom)>a:not(.button,.chip),.kds-theme-root 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}.kds-theme-root nav:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),.kds-theme-root nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip){transition:padding var(--speed1) linear}.kds-theme-root nav.max:is(.top,.bottom)>a:not(.button,.chip),.kds-theme-root nav.max:is(.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){gap:.25rem;block-size:2.5rem;font-size:.8rem}.kds-theme-root nav.max:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),.kds-theme-root nav.max:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip),.kds-theme-root nav:is(.left,.right,.top,.bottom):not(.max)>a.active:not(.button,.chip)>i,.kds-theme-root 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)}.kds-theme-root nav.vertical>:is(ol,ul){align-items:normal}.kds-theme-root :is(nav,.row):is(.left-align,.top-align,.vertical){justify-content:flex-start}.kds-theme-root :is(nav,.row):is(.right-align,.bottom-align){justify-content:flex-end}.kds-theme-root :is(nav,.row):is(.center-align,.middle-align){justify-content:center}.kds-theme-root :is(nav,.row):is(.left-align,.top-align,.vertical).vertical{align-items:flex-start}.kds-theme-root :is(nav,.row):is(.right-align,.bottom-align).vertical{align-items:flex-end}.kds-theme-root :is(nav,.row):is(.center-align,.middle-align).vertical{align-items:center}.kds-theme-root nav:not(.left,.right)>.space{inline-size:.5rem}.kds-theme-root nav:not(.left,.right)>.medium-space{inline-size:1rem}.kds-theme-root nav:not(.left,.right)>.large-space{inline-size:1.5rem}.kds-theme-root nav.tabbed{background-color:var(--surface-container);border-radius:4rem!important;gap:0rem;block-size:4rem}.kds-theme-root nav.tabbed.small{block-size:3rem}.kds-theme-root nav.tabbed.large{block-size:5rem}.kds-theme-root 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}.kds-theme-root nav.tabbed>a.active{background-color:var(--primary-container)}.kds-theme-root 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}.kds-theme-root nav.toolbar>a{display:inline-flex;gap:.5rem;min-inline-size:2.5rem;min-block-size:2.5rem;border-radius:1.75rem}.kds-theme-root nav.toolbar>a:has(>:not(i)){padding:0 1rem}.kds-theme-root nav.toolbar>a.active{background-color:var(--secondary-container);color:var(--on-secondary-container)}.kds-theme-root nav.toolbar.fill{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.kds-theme-root nav.toolbar.fill>a.active{background-color:var(--surface-container)!important;color:var(--on-surface)!important}.kds-theme-root nav.toolbar.vertical{flex-direction:column!important;min-inline-size:4rem;padding:1rem 0;align-self:center;align-items:center!important}.kds-theme-root nav.toolbar.vertical>a{inline-size:2.5rem;block-size:2.5rem}.kds-theme-root nav.toolbar.vertical>a>:is(div,span):not(.badge,.tooltip){display:none}.kds-theme-root nav.toolbar.max{border-radius:0;display:flex}.kds-theme-root nav.group{background:none!important}.kds-theme-root nav.group:is(.connected,.split){gap:.125rem}.kds-theme-root nav.group:not(.split)>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}.kds-theme-root nav.group:not(.split)>:is(.button,button).active{background-color:var(--primary);color:var(--on-primary)}.kds-theme-root nav.group.connected>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}.kds-theme-root nav.group.connected>:is(.button,button).active{background-color:var(--secondary-container);color:var(--on-secondary-container)}.kds-theme-root nav.group:is(.connected,.split)>:is(.button,button).active,.kds-theme-root nav.split>:is(.button,button):active{border-radius:2rem!important}.kds-theme-root :not(nav)>:is(ul,ol){all:revert}.kds-theme-root :is(.scroll,.no-scroll,.no-space,.tabs,.tabbed)>:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.125rem}.kds-theme-root nav.split>:is(.button,button):not(.chip,.fill,.border){background-color:var(--primary);color:var(--on-primary)}@media only screen and (max-width:600px){.kds-theme-root nav.top,.kds-theme-root nav.bottom{justify-content:space-around}}.kds-theme-root .overlay,.kds-theme-root 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}.kds-theme-root .overlay.active{opacity:1;visibility:visible}.kds-theme-root dialog:popover-open::backdrop{opacity:1;visibility:visible}.kds-theme-root .overlay+dialog::backdrop,.kds-theme-root .snackbar::backdrop{display:none}.kds-theme-root [popover]{border:0}.kds-theme-root .page{--_transform: translate(0, 0);opacity:0;position:absolute;display:none}.kds-theme-root .page.active{opacity:1;position:relative;display:block;animation:var(--speed4) to-page ease}.kds-theme-root .page.active.top{--_transform: translate(0, -4rem)}.kds-theme-root .page.active.bottom{--_transform: translate(0, 4rem)}.kds-theme-root .page.active.left{--_transform: translate(-4rem, 0)}.kds-theme-root .page.active.right{--_transform: translate(4rem, 0)}.kds-theme-root 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}.kds-theme-root progress.small{--_size: .25rem}.kds-theme-root progress.medium{--_size: .35rem}.kds-theme-root progress.large{--_size: .45rem}.kds-theme-root progress.indeterminate{--_value: 100;animation:3.2s to-indeterminate-progress ease infinite}.kds-theme-root 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}.kds-theme-root progress:not(.circle,[value])::-moz-progress-bar{animation:3.2s to-linear-progress ease infinite}.kds-theme-root progress:not(.circle,[value])::-webkit-progress-value{animation:3.2s to-linear-progress ease infinite}.kds-theme-root progress::-webkit-progress-bar{background:none}.kds-theme-root progress::-webkit-progress-value{background:currentColor}.kds-theme-root progress::-moz-progress-bar{background:currentColor}.kds-theme-root 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)}.kds-theme-root progress.wavy::-webkit-progress-value,.kds-theme-root 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%}.kds-theme-root 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%}.kds-theme-root 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%)}.kds-theme-root progress.circle::-webkit-progress-value{background:none}.kds-theme-root progress.circle::-moz-progress-bar{background:none}.kds-theme-root 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)}.kds-theme-root progress.circle.small{inline-size:1.5rem;block-size:1.5rem}.kds-theme-root progress.circle.large{inline-size:3.5rem;block-size:3.5rem}.kds-theme-root progress.circle:not([value]),.kds-theme-root progress.circle.indeterminate{--_value: 50;animation:to-rotate 1s infinite linear}.kds-theme-root :is(nav,.row,.field)>progress:not(.circle,.small,.medium,.large){flex:auto}.kds-theme-root 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}.kds-theme-root progress.max[class*=-text]{opacity:1}.kds-theme-root progress.max+*{margin-block-start:0}.kds-theme-root :is(.button,button,.chip)>progress.circle{color:inherit}.kds-theme-root .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}.kds-theme-root .transparent>.shape>i{filter:invert(1)}.kds-theme-root .shape.tiny-space{-webkit-mask-size:90%;mask-size:90%}.kds-theme-root .shape.space,.kds-theme-root .shape.small-space{-webkit-mask-size:80%;mask-size:80%}.kds-theme-root .shape.medium-space{-webkit-mask-size:70%;mask-size:70%}.kds-theme-root .shape.large-space{-webkit-mask-size:60%;mask-size:60%}.kds-theme-root .shape.extra-space{-webkit-mask-size:50%;mask-size:50%}.kds-theme-root .shape.tiny{block-size:2.5rem;inline-size:2.5rem}.kds-theme-root .shape.medium{block-size:4.5rem;inline-size:4.5rem}.kds-theme-root .shape.large{block-size:5.5rem;inline-size:5.5rem}.kds-theme-root .shape.extra{block-size:6.5rem;inline-size:6.5rem}.kds-theme-root .shape.max,.kds-theme-root .shape>.responsive,.kds-theme-root .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}.kds-theme-root .shape>.responsive{background:inherit;color:inherit}.kds-theme-root .shape.rotate{animation:linear to-rotate infinite 12s}.kds-theme-root .shape.rotate>*{animation:linear to-rotate infinite 12s reverse}.kds-theme-root .shape.fast-rotate{animation:linear to-rotate infinite 6s}.kds-theme-root .shape.fast-rotate>*{animation:linear to-rotate infinite 6s reverse}.kds-theme-root .shape.slow-rotate{animation:linear to-rotate infinite 24s}.kds-theme-root .shape.slow-rotate>*{animation:linear to-rotate infinite 24s reverse}.kds-theme-root :is(button,.button,.chip):has(>.shape)>.responsive{border:none}.kds-theme-root .shape.arch{-webkit-mask-image:url(arch.svg);mask-image:url(arch.svg)}.kds-theme-root .shape.arrow{-webkit-mask-image:url(arrow.svg);mask-image:url(arrow.svg)}.kds-theme-root .shape.boom{-webkit-mask-image:url(boom.svg);mask-image:url(boom.svg)}.kds-theme-root .shape.bun{-webkit-mask-image:url(bun.svg);mask-image:url(bun.svg)}.kds-theme-root .shape.burst{-webkit-mask-image:url(burst.svg);mask-image:url(burst.svg)}.kds-theme-root .shape.circle{-webkit-mask-image:url(circle.svg);mask-image:url(circle.svg)}.kds-theme-root .shape.clamshell{-webkit-mask-image:url(clamshell.svg);mask-image:url(clamshell.svg)}.kds-theme-root .shape.diamond{-webkit-mask-image:url(diamond.svg);mask-image:url(diamond.svg)}.kds-theme-root .shape.fan{-webkit-mask-image:url(fan.svg);mask-image:url(fan.svg)}.kds-theme-root .shape.flower{-webkit-mask-image:url(flower.svg);mask-image:url(flower.svg)}.kds-theme-root .shape.gem{-webkit-mask-image:url(gem.svg);mask-image:url(gem.svg)}.kds-theme-root .shape.ghost-ish{-webkit-mask-image:url(ghost-ish.svg);mask-image:url(ghost-ish.svg)}.kds-theme-root .shape.heart{-webkit-mask-image:url(heart.svg);mask-image:url(heart.svg)}.kds-theme-root .shape.leaf-clover4{-webkit-mask-image:url(leaf-clover4.svg);mask-image:url(leaf-clover4.svg)}.kds-theme-root .shape.leaft-clover8{-webkit-mask-image:url(leaf-clover8.svg);mask-image:url(leaf-clover8.svg)}.kds-theme-root .shape.loading-indicator{-webkit-mask-image:url(loading-indicator.svg);mask-image:url(loading-indicator.svg)}.kds-theme-root .shape.oval{-webkit-mask-image:url(oval.svg);mask-image:url(oval.svg)}.kds-theme-root .shape.pentagon{-webkit-mask-image:url(pentagon.svg);mask-image:url(pentagon.svg)}.kds-theme-root .shape.pill{-webkit-mask-image:url(pill.svg);mask-image:url(pill.svg)}.kds-theme-root .shape.pixel-circle{-webkit-mask-image:url(pixel-circle.svg);mask-image:url(pixel-circle.svg)}.kds-theme-root .shape.pixel-triangle{-webkit-mask-image:url(pixel-triangle.svg);mask-image:url(pixel-triangle.svg)}.kds-theme-root .shape.puffy{-webkit-mask-image:url(puffy.svg);mask-image:url(puffy.svg)}.kds-theme-root .shape.puffy-diamond{-webkit-mask-image:url(puffy-diamond.svg);mask-image:url(puffy-diamond.svg)}.kds-theme-root .shape.semicircle{-webkit-mask-image:url(semicircle.svg);mask-image:url(semicircle.svg)}.kds-theme-root .shape.sided-cookie4{-webkit-mask-image:url(sided-cookie4.svg);mask-image:url(sided-cookie4.svg)}.kds-theme-root .shape.sided-cookie6{-webkit-mask-image:url(sided-cookie6.svg);mask-image:url(sided-cookie6.svg)}.kds-theme-root .shape.sided-cookie7{-webkit-mask-image:url(sided-cookie7.svg);mask-image:url(sided-cookie7.svg)}.kds-theme-root .shape.sided-cookie9{-webkit-mask-image:url(sided-cookie9.svg);mask-image:url(sided-cookie9.svg)}.kds-theme-root .shape.sided-cookie12{-webkit-mask-image:url(sided-cookie12.svg);mask-image:url(sided-cookie12.svg)}.kds-theme-root .shape.slanted{-webkit-mask-image:url(slanted.svg);mask-image:url(slanted.svg)}.kds-theme-root .shape.soft-boom{-webkit-mask-image:url(soft-boom.svg);mask-image:url(soft-boom.svg)}.kds-theme-root .shape.soft-burst{-webkit-mask-image:url(soft-burst.svg);mask-image:url(soft-burst.svg)}.kds-theme-root .shape.square{-webkit-mask-image:url(square.svg);mask-image:url(square.svg)}.kds-theme-root .shape.sunny{-webkit-mask-image:url(sunny.svg);mask-image:url(sunny.svg)}.kds-theme-root .shape.triangle{-webkit-mask-image:url(triangle.svg);mask-image:url(triangle.svg)}.kds-theme-root .shape.very-sunny{-webkit-mask-image:url(very-sunny.svg);mask-image:url(very-sunny.svg)}.kds-theme-root .checkbox,.kds-theme-root .radio,.kds-theme-root .switch{--_size: 1.5rem;inline-size:auto;block-size:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}.kds-theme-root .switch{direction:ltr}.kds-theme-root :is(.checkbox,.radio,.switch).small{--_size: 1rem}.kds-theme-root :is(.checkbox,.radio,.switch).large{--_size: 2rem}.kds-theme-root :is(.checkbox,.radio,.switch).extra{--_size: 2.5rem}.kds-theme-root :is(.checkbox,.radio)>input{inline-size:var(--_size);block-size:var(--_size);opacity:0}.kds-theme-root .switch>input{inline-size:3.25rem;block-size:2rem;opacity:0}.kds-theme-root :is(.checkbox,.radio,.switch)>span{display:inline-flex;align-items:center;color:var(--on-surface);font-size:.875rem}.kds-theme-root :is(.checkbox,.radio)>span:not(:empty){padding-inline-start:.25rem}.kds-theme-root :is(.checkbox,.radio,.switch)>span:before,.kds-theme-root :is(.checkbox,.radio,.switch)>span>i,.kds-theme-root :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}.kds-theme-root [dir=rtl] :is(.checkbox,.radio)>span:before,.kds-theme-root [dir=rtl] :is(.checkbox,.radio)>span>i,.kds-theme-root [dir=rtl] :is(.checkbox,.radio)>span:after{--_size: inherit;inset:auto calc(var(--_size, 0) * -1) auto auto}.kds-theme-root .switch>span:before,.kds-theme-root .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)}.kds-theme-root .switch>span:before,.kds-theme-root .switch.icon>span>i{transform:translate(-3rem,-50%) scale(.6)}.kds-theme-root .switch.icon>span>i{transform:translate(-3rem,-50%) scale(1)}.kds-theme-root .checkbox>span:before{content:"check_box_outline_blank"}.kds-theme-root .checkbox>input:checked+span:before{content:"check_box";font-variation-settings:"FILL" 1}.kds-theme-root .checkbox>input:indeterminate+span:before{content:"indeterminate_check_box"}.kds-theme-root .radio>span:before{content:"radio_button_unchecked"}.kds-theme-root .radio>input:checked+span:before{content:"radio_button_checked"}.kds-theme-root :is(.radio,.checkbox,.switch).icon>span:before{content:""!important;font-variation-settings:unset!important}.kds-theme-root :is(.checkbox,.radio)>span:after{transition:all var(--speed1);background-color:currentColor;box-shadow:0 0 0 0 currentColor;opacity:0}.kds-theme-root :is(.checkbox,.radio):is(:hover)>input:not(:disabled)+span:after,.kds-theme-root :is(.checkbox,.radio)>input:not(:disabled):is(:focus)+span:after{box-shadow:0 0 0 .5rem currentColor;opacity:.1}.kds-theme-root .switch>input:not(:disabled):is(:focus,:hover)+span:before,.kds-theme-root .switch.icon>input:not(:disabled):is(:focus,:hover)+span>i{box-shadow:0 0 0 .5rem var(--active)}.kds-theme-root :is(.checkbox,.radio)>input:checked+span:before,.kds-theme-root :is(.checkbox,.radio).icon>input:checked+span>i{color:var(--primary)}.kds-theme-root .icon>input:checked+span>i:first-child,.kds-theme-root .icon>span>i:last-child{opacity:0}.kds-theme-root .icon>input:checked+span>i:last-child,.kds-theme-root .icon>span>i:first-child{opacity:1}.kds-theme-root .switch>input:checked+span:after{border:none;background-color:var(--primary)}.kds-theme-root .switch>input:checked+span:before,.kds-theme-root .switch.icon>input:checked+span>i{content:"check";color:var(--primary);background-color:var(--on-primary);transform:translate(-1.75rem,-50%) scale(1)}.kds-theme-root .switch>input:active:not(:disabled)+span:before,.kds-theme-root .switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(1.2)}.kds-theme-root [dir=rtl] .switch>input:active:not(:disabled)+span:before,.kds-theme-root [dir=rtl] .switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(-1.2)}.kds-theme-root .switch>input:active:checked:not(:disabled)+span:before,.kds-theme-root .switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(1.2)}.kds-theme-root [dir=rtl] .switch>input:active:checked:not(:disabled)+span:before,.kds-theme-root [dir=rtl] .switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(-1.2)}.kds-theme-root :is(.checkbox,.radio,.switch)>input:disabled+span{opacity:.5;cursor:not-allowed}.kds-theme-root .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%)}.kds-theme-root .field>:is(nav,.row){flex-grow:1;padding:0 1rem}.kds-theme-root .field.round>:is(nav,.row){flex-grow:1;padding:0 1.5rem}.kds-theme-root [dir=rtl] .switch{transform:scale(-1)}.kds-theme-root [dir=rtl] .switch>span:before,.kds-theme-root [dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-.6)}.kds-theme-root [dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-1)}.kds-theme-root [dir=rtl] .switch>input:checked+span:before,.kds-theme-root [dir=rtl] .switch.icon>input:checked+span>i{transform:translate(-1.75rem,-50%) scale(-1)}.kds-theme-root .switch>:focus-visible+span:after{outline:.125rem solid var(--primary);outline-offset:.25rem}.kds-theme-root :is(.checkbox,.radio)>:focus-visible+span:before{outline:.125rem solid var(--primary);outline-offset:.375rem}.kds-theme-root .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)}.kds-theme-root [dir=rtl] .slider{transform:scaleX(-1)}.kds-theme-root .slider.vertical{flex-direction:row!important;margin:.5rem auto!important;padding:50% 0;transform:rotate(-90deg);inline-size:100%}.kds-theme-root .slider.tiny{--_track: 1rem}.kds-theme-root .slider.small{--_track: 1.5rem}.kds-theme-root .slider.medium{--_track: 2.5rem}.kds-theme-root .slider.large{--_track: 3.5rem}.kds-theme-root .slider.extra{--_track: 6rem}.kds-theme-root .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}.kds-theme-root .slider>input:only-of-type{pointer-events:all}.kds-theme-root .slider>input~input{position:absolute}.kds-theme-root .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}.kds-theme-root .slider>input::-webkit-slider-thumb:active{cursor:grabbing}.kds-theme-root .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}.kds-theme-root .slider>input::-moz-range-thumb:active{cursor:grabbing}.kds-theme-root .slider>input:not(:disabled):is(:focus)::-webkit-slider-thumb{transform:scaleX(.6)}.kds-theme-root .slider>input:not(:disabled):is(:focus)::-moz-range-thumb{transform:scaleX(.6)}.kds-theme-root .slider>input:disabled{cursor:not-allowed;opacity:1}.kds-theme-root .slider>input:disabled::-webkit-slider-thumb{background:var(--outline);cursor:not-allowed}.kds-theme-root .slider>input:disabled::-moz-range-thumb{background:var(--outline);cursor:not-allowed}.kds-theme-root .slider>input:disabled~span:not([class]){background:var(--outline)}.kds-theme-root .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)}.kds-theme-root .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)}.kds-theme-root .field>.slider{inline-size:100%}.kds-theme-root .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)}.kds-theme-root .slider:has(>[disabled]):before{background:var(--active)}.kds-theme-root .slider:has([disabled]){opacity:.62}.kds-theme-root .slider>span>i{position:absolute;block-size:auto;inset:0 auto 0 .5rem;color:var(--inverse-primary);z-index:1}.kds-theme-root .slider:not(.medium,.large,.extra)>span>i{display:none}.kds-theme-root .slider.vertical>i{transform:rotate(90deg)}.kds-theme-root .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}.kds-theme-root .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}.kds-theme-root [dir=rtl] .slider>.tooltip{transform:translate(-50%,-25%) scaleX(-1)!important}.kds-theme-root [dir=rtl] .slider>.tooltip.bottom{transform:translate(-50%,25%) scaleX(-1)!important}.kds-theme-root .slider>.tooltip+.tooltip{inset:.25rem calc(100% - var(--_start, 0)) auto auto;transform:translate(50%,-25%)!important}.kds-theme-root .slider>.tooltip+.tooltip.bottom{inset:auto calc(100% - var(--_start, 0)) -.25rem auto;transform:translate(50%,25%)!important}.kds-theme-root [dir=rtl] .slider>.tooltip+.tooltip{transform:translate(50%,-25%) scaleX(-1)!important}.kds-theme-root [dir=rtl] .slider>.tooltip+.tooltip.bottom{transform:translate(50%,25%) scaleX(-1)!important}.kds-theme-root .slider>.tooltip:before{content:var(--_value1)}.kds-theme-root .slider>.tooltip+.tooltip:before{content:var(--_value2)}.kds-theme-root .slider>:focus~.tooltip{inset-block:-1rem auto;opacity:1!important;visibility:visible!important}.kds-theme-root .slider>:focus~.tooltip.bottom{inset-block:auto -1rem}.kds-theme-root .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}.kds-theme-root .slider.vertical>.tooltip.bottom{inset-block:auto;margin-block:0 calc(-1 * var(--_thumb, 0))!important;transform:rotate(90deg) translate(75%,50%)!important}.kds-theme-root .slider.vertical>.tooltip+.tooltip{transform:rotate(90deg) translate(-75%,-50%)!important}.kds-theme-root .slider.vertical>.tooltip+.tooltip.bottom{transform:rotate(90deg) translate(75%,-50%)!important}.kds-theme-root :is(nav,.row,.field)>.slider:not(.circle,.small,.medium,.large){flex:auto}.kds-theme-root .slider.max,.kds-theme-root .slider.max.vertical,.kds-theme-root .slider.max>input,.kds-theme-root .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%}.kds-theme-root .slider.max:before{display:none}.kds-theme-root .slider.max.vertical>input{writing-mode:vertical-lr;transform:rotate(-180deg)}.kds-theme-root .slider.max>input::-webkit-slider-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.kds-theme-root .slider.max>input::-moz-range-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.kds-theme-root .slider.max>span:not([class]){block-size:auto!important;inset:0 var(--_end) 0 var(--_start);background:currentcolor;color:inherit;border-radius:0}.kds-theme-root .slider.max.vertical>span:not([class]){inset:var(--_end) 0 var(--_start) 0}.kds-theme-root .slider>input:focus-visible::-webkit-slider-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.kds-theme-root .slider>input:focus-visible::-moz-range-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.kds-theme-root .slider.max>input:focus-visible{outline:.1875rem solid var(--primary);outline-offset:-.125rem}@media(pointer:coarse){.kds-theme-root .slider>:hover~.tooltip{inset-block:-1rem auto!important;opacity:1!important;visibility:visible!important}.kds-theme-root .slider>:hover~.tooltip.bottom{inset-block:auto -1rem!important}}.kds-theme-root .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}.kds-theme-root .snackbar.top{inset:6rem auto auto 50%}.kds-theme-root .snackbar:is(.active){visibility:visible;transform:translate(-50%);opacity:1}.kds-theme-root .snackbar:popover-open{visibility:visible;transform:translate(-50%);opacity:1}.kds-theme-root .snackbar>.max{flex:auto}@media only screen and (min-width:993px){.kds-theme-root .snackbar{inline-size:40%}}.kds-theme-root table{inline-size:100%;border-spacing:0;font-size:.875rem;text-align:start}.kds-theme-root .scroll>table,.kds-theme-root table :is(thead,tbody,tfoot,tr,th,td){background-color:inherit;color:inherit}.kds-theme-root :is(th,td){inline-size:auto;text-align:inherit;padding:.5rem;border-radius:0}.kds-theme-root :is(th,td)>*{vertical-align:middle}.kds-theme-root table.border>tbody>tr:not(:last-child)>td,.kds-theme-root thead>tr>th{border-block-end:.0625rem solid var(--outline)}.kds-theme-root tfoot>tr>th{border-block-start:.0625rem solid var(--outline)}.kds-theme-root table.stripes>tbody>tr:nth-child(odd){background-color:var(--active)}.kds-theme-root table.no-space :is(th,td){padding:0}.kds-theme-root table.medium-space :is(th,td){padding:.75rem}.kds-theme-root table.large-space :is(th,td){padding:1rem}.kds-theme-root table>.fixed,.kds-theme-root th.fixed{position:sticky;z-index:1;inset-block-start:0}.kds-theme-root tfoot.fixed,.kds-theme-root tfoot th.fixed{inset-block-end:0}.kds-theme-root :is(td,th).min{inline-size:.1%;white-space:nowrap}.kds-theme-root .tabs{display:flex;white-space:nowrap;border-block-end:.0625rem solid var(--surface-variant);border-radius:0}.kds-theme-root .tabs:not(.left-align,.right-align,.center-align){justify-content:space-around}.kds-theme-root .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}.kds-theme-root .tabs.small>a{min-block-size:2rem}.kds-theme-root .tabs.large>a{min-block-size:4rem}.kds-theme-root .tabs>a.active,.kds-theme-root .tabs>a.active>i{color:var(--primary)}.kds-theme-root .tabs>a.active:before{content:"";position:absolute;inset:auto 0 0 0;block-size:.125rem;background-color:var(--primary)}.kds-theme-root .tabs.min>a.active:before{margin:0 auto;max-inline-size:min(100%,4rem)}.kds-theme-root .tabs:is(.left-align,.center-align,.right-align)>a{inline-size:auto}.kds-theme-root .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)}.kds-theme-root .tooltip:not(.max):hover{visibility:hidden;opacity:0}.kds-theme-root .tooltip.left{inset:50% auto auto 0;transform:translate(-100%,-50%) scale(.9)}.kds-theme-root .tooltip.right{inset:50% 0 auto auto;transform:translate(100%,-50%) scale(.9)}.kds-theme-root .tooltip.bottom{inset:auto auto 0 50%;transform:translate(-50%,100%) scale(.9)}.kds-theme-root .tooltip.small{inline-size:8rem;white-space:normal}.kds-theme-root .tooltip.medium{inline-size:12rem;white-space:normal}.kds-theme-root .tooltip.large{inline-size:16rem;white-space:normal}.kds-theme-root :hover>.tooltip{visibility:visible;opacity:1;transform:translate(-50%,-100%) scale(1)}.kds-theme-root :hover>.tooltip.left{transform:translate(-100%,-50%) scale(1)}.kds-theme-root :hover>.tooltip.right{transform:translate(100%,-50%) scale(1)}.kds-theme-root :hover>.tooltip.bottom{transform:translate(-50%,100%) scale(1)}.kds-theme-root .tooltip.no-space{--_space: 0}.kds-theme-root .tooltip.medium-space{--_space: -1rem}.kds-theme-root .tooltip.large-space{--_space: -1.5rem}.kds-theme-root .tooltip:not(.left,.right,.bottom){margin-block-start:var(--_space)!important}.kds-theme-root .tooltip.left,.kds-theme-root .tooltip.right{margin-inline:var(--_space)!important}.kds-theme-root .tooltip.bottom{margin-block-end:var(--_space)!important}.kds-theme-root menu:active~.tooltip,.kds-theme-root :is(button,.button):focus>menu~.tooltip,.kds-theme-root .field>:focus~menu~.tooltip{visibility:hidden}.kds-theme-root .slider>.tooltip{--_space: -1.25rem}.kds-theme-root .slider.vertical>.tooltip{--_space: -.75rem}.kds-theme-root .slider.vertical>.tooltip:is(.left,.right){--_space: -.5rem}.kds-theme-root .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)}.kds-theme-root .transparent{background-color:transparent!important;box-shadow:none!important;color:inherit!important}.kds-theme-root .primary{background-color:var(--primary)!important;color:var(--on-primary)!important}.kds-theme-root .primary-text{color:var(--primary)!important}.kds-theme-root .primary-border{border-color:var(--primary)!important}.kds-theme-root .primary-container{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.kds-theme-root .secondary{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.kds-theme-root .secondary-text{color:var(--secondary)!important}.kds-theme-root .secondary-border{border-color:var(--secondary)!important}.kds-theme-root .secondary-container{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.kds-theme-root .tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.kds-theme-root .tertiary-text{color:var(--tertiary)!important}.kds-theme-root .tertiary-border{border-color:var(--tertiary)!important}.kds-theme-root .tertiary-container{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.kds-theme-root .error{background-color:var(--error)!important;color:var(--on-error)!important}.kds-theme-root .error-text{color:var(--error)!important}.kds-theme-root .error-border{border-color:var(--error)!important}.kds-theme-root .error-container{background-color:var(--error-container)!important;color:var(--on-error-container)!important}.kds-theme-root .background{background-color:var(--background)!important;color:var(--on-background)!important}.kds-theme-root .surface,.kds-theme-root .surface-dim,.kds-theme-root .surface-bright,.kds-theme-root .surface-container-lowest,.kds-theme-root .surface-container-low,.kds-theme-root .surface-container,.kds-theme-root .surface-container-high,.kds-theme-root .surface-container-highest{background-color:var(--surface)!important;color:var(--on-surface)!important}.kds-theme-root .surface-variant{background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.kds-theme-root .inverse-surface{background-color:var(--inverse-surface);color:var(--inverse-on-surface)}.kds-theme-root .inverse-primary{background-color:var(--inverse-primary);color:var(--primary)}.kds-theme-root .inverse-primary-text{color:var(--inverse-primary)!important}.kds-theme-root .inverse-primary-border{border-color:var(--inverse-primary)!important}.kds-theme-root .surface-dim{background-color:var(--surface-dim)!important}.kds-theme-root .surface-bright{background-color:var(--surface-bright)!important}.kds-theme-root .surface-container-lowest{background-color:var(--surface-container-lowest)!important}.kds-theme-root .surface-container{background-color:var(--surface-container)!important}.kds-theme-root .surface-container-high{background-color:var(--surface-container-high)!important}.kds-theme-root .surface-container-highest{background-color:var(--surface-container-highest)!important}.kds-theme-root .surface-container-low{background-color:var(--surface-container-low)!important}.kds-theme-root .black{background-color:#000!important}.kds-theme-root .black-border{border-color:#000!important}.kds-theme-root .black-text{color:#000!important}.kds-theme-root .white{background-color:#fff!important}.kds-theme-root .white-border{border-color:#fff!important}.kds-theme-root .white-text{color:#fff!important}.kds-theme-root .transparent-border{border-color:transparent!important}.kds-theme-root .transparent-text{color:transparent!important}.kds-theme-root .fill:not(i){background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.kds-theme-root nav.primary-container>button,.kds-theme-root :is(nav,menu).primary>:is(button,a,li).active{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.kds-theme-root nav.primary>button,.kds-theme-root :is(nav,menu).primary-container>:is(button,a,li).active{background-color:var(--primary)!important;color:var(--on-primary)!important}.kds-theme-root nav.secondary-container>button,.kds-theme-root :is(nav,menu).secondary>:is(button,a,li).active{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.kds-theme-root nav.secondary>button,.kds-theme-root :is(nav,menu).secondary-container>:is(button,a,li).active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.kds-theme-root nav.tertiary-container>button,.kds-theme-root :is(nav,menu).tertiary>:is(button,a,li).active{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.kds-theme-root nav.tertiary>button,.kds-theme-root :is(nav,menu).tertiary-container>:is(button,a,li).active{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.kds-theme-root .red,.kds-theme-root .red6{background-color:#f44336!important}.kds-theme-root .red-border{border-color:#f44336!important}.kds-theme-root .red-text{color:#f44336!important}.kds-theme-root .red1{background-color:#ffebee!important}.kds-theme-root .red2{background-color:#ffcdd2!important}.kds-theme-root .red3{background-color:#ef9a9a!important}.kds-theme-root .red4{background-color:#e57373!important}.kds-theme-root .red5{background-color:#ef5350!important}.kds-theme-root .red7{background-color:#e53935!important}.kds-theme-root .red8{background-color:#d32f2f!important}.kds-theme-root .red9{background-color:#c62828!important}.kds-theme-root .red10{background-color:#b71c1c!important}.kds-theme-root .pink,.kds-theme-root .pink6{background-color:#e91e63!important}.kds-theme-root .pink-border{border-color:#e91e63!important}.kds-theme-root .pink-text{color:#e91e63!important}.kds-theme-root .pink1{background-color:#fce4ec!important}.kds-theme-root .pink2{background-color:#f8bbd0!important}.kds-theme-root .pink3{background-color:#f48fb1!important}.kds-theme-root .pink4{background-color:#f06292!important}.kds-theme-root .pink5{background-color:#ec407a!important}.kds-theme-root .pink7{background-color:#d81b60!important}.kds-theme-root .pink8{background-color:#c2185b!important}.kds-theme-root .pink9{background-color:#ad1457!important}.kds-theme-root .pink10{background-color:#880e4f!important}.kds-theme-root .purple,.kds-theme-root .purple6{background-color:#9c27b0!important}.kds-theme-root .purple-border{border-color:#9c27b0!important}.kds-theme-root .purple-text{color:#9c27b0!important}.kds-theme-root .purple1{background-color:#f3e5f5!important}.kds-theme-root .purple2{background-color:#e1bee7!important}.kds-theme-root .purple3{background-color:#ce93d8!important}.kds-theme-root .purple4{background-color:#ba68c8!important}.kds-theme-root .purple5{background-color:#ab47bc!important}.kds-theme-root .purple7{background-color:#8e24aa!important}.kds-theme-root .purple8{background-color:#7b1fa2!important}.kds-theme-root .purple9{background-color:#6a1b9a!important}.kds-theme-root .purple10{background-color:#4a148c!important}.kds-theme-root .deep-purple,.kds-theme-root .deep-purple6{background-color:#673ab7!important}.kds-theme-root .deep-purple-border{border-color:#673ab7!important}.kds-theme-root .deep-purple-text{color:#673ab7!important}.kds-theme-root .deep-purple1{background-color:#ede7f6!important}.kds-theme-root .deep-purple2{background-color:#d1c4e9!important}.kds-theme-root .deep-purple3{background-color:#b39ddb!important}.kds-theme-root .deep-purple4{background-color:#9575cd!important}.kds-theme-root .deep-purple5{background-color:#7e57c2!important}.kds-theme-root .deep-purple7{background-color:#5e35b1!important}.kds-theme-root .deep-purple8{background-color:#512da8!important}.kds-theme-root .deep-purple9{background-color:#4527a0!important}.kds-theme-root .deep-purple10{background-color:#311b92!important}.kds-theme-root .indigo,.kds-theme-root .indigo6{background-color:#3f51b5!important}.kds-theme-root .indigo-border{border-color:#3f51b5!important}.kds-theme-root .indigo-text{color:#3f51b5!important}.kds-theme-root .indigo1{background-color:#e8eaf6!important}.kds-theme-root .indigo2{background-color:#c5cae9!important}.kds-theme-root .indigo3{background-color:#9fa8da!important}.kds-theme-root .indigo4{background-color:#7986cb!important}.kds-theme-root .indigo5{background-color:#5c6bc0!important}.kds-theme-root .indigo7{background-color:#3949ab!important}.kds-theme-root .indigo8{background-color:#303f9f!important}.kds-theme-root .indigo9{background-color:#283593!important}.kds-theme-root .indigo10{background-color:#1a237e!important}.kds-theme-root .blue,.kds-theme-root .blue6{background-color:#2196f3!important}.kds-theme-root .blue-border{border-color:#2196f3!important}.kds-theme-root .blue-text{color:#2196f3!important}.kds-theme-root .blue1{background-color:#e3f2fd!important}.kds-theme-root .blue2{background-color:#bbdefb!important}.kds-theme-root .blue3{background-color:#90caf9!important}.kds-theme-root .blue4{background-color:#64b5f6!important}.kds-theme-root .blue5{background-color:#42a5f5!important}.kds-theme-root .blue7{background-color:#1e88e5!important}.kds-theme-root .blue8{background-color:#1976d2!important}.kds-theme-root .blue9{background-color:#1565c0!important}.kds-theme-root .blue10{background-color:#0d47a1!important}.kds-theme-root .light-blue,.kds-theme-root .light-blue6{background-color:#03a9f4!important}.kds-theme-root .light-blue-border{border-color:#03a9f4!important}.kds-theme-root .light-blue-text{color:#03a9f4!important}.kds-theme-root .light-blue1{background-color:#e1f5fe!important}.kds-theme-root .light-blue2{background-color:#b3e5fc!important}.kds-theme-root .light-blue3{background-color:#81d4fa!important}.kds-theme-root .light-blue4{background-color:#4fc3f7!important}.kds-theme-root .light-blue5{background-color:#29b6f6!important}.kds-theme-root .light-blue7{background-color:#039be5!important}.kds-theme-root .light-blue8{background-color:#0288d1!important}.kds-theme-root .light-blue9{background-color:#0277bd!important}.kds-theme-root .light-blue10{background-color:#01579b!important}.kds-theme-root .cyan,.kds-theme-root .cyan6{background-color:#00bcd4!important}.kds-theme-root .cyan-border{border-color:#00bcd4!important}.kds-theme-root .cyan-text{color:#00bcd4!important}.kds-theme-root .cyan1{background-color:#e0f7fa!important}.kds-theme-root .cyan2{background-color:#b2ebf2!important}.kds-theme-root .cyan3{background-color:#80deea!important}.kds-theme-root .cyan4{background-color:#4dd0e1!important}.kds-theme-root .cyan5{background-color:#26c6da!important}.kds-theme-root .cyan7{background-color:#00acc1!important}.kds-theme-root .cyan8{background-color:#0097a7!important}.kds-theme-root .cyan9{background-color:#00838f!important}.kds-theme-root .cyan10{background-color:#006064!important}.kds-theme-root .teal,.kds-theme-root .teal6{background-color:#009688!important}.kds-theme-root .teal-border{border-color:#009688!important}.kds-theme-root .teal-text{color:#009688!important}.kds-theme-root .teal1{background-color:#e0f2f1!important}.kds-theme-root .teal2{background-color:#b2dfdb!important}.kds-theme-root .teal3{background-color:#80cbc4!important}.kds-theme-root .teal4{background-color:#4db6ac!important}.kds-theme-root .teal5{background-color:#26a69a!important}.kds-theme-root .teal7{background-color:#00897b!important}.kds-theme-root .teal8{background-color:#00796b!important}.kds-theme-root .teal9{background-color:#00695c!important}.kds-theme-root .teal10{background-color:#004d40!important}.kds-theme-root .green,.kds-theme-root .green6{background-color:#4caf50!important}.kds-theme-root .green-border{border-color:#4caf50!important}.kds-theme-root .green-text{color:#4caf50!important}.kds-theme-root .green1{background-color:#e8f5e9!important}.kds-theme-root .green2{background-color:#c8e6c9!important}.kds-theme-root .green3{background-color:#a5d6a7!important}.kds-theme-root .green4{background-color:#81c784!important}.kds-theme-root .green5{background-color:#66bb6a!important}.kds-theme-root .green7{background-color:#43a047!important}.kds-theme-root .green8{background-color:#388e3c!important}.kds-theme-root .green9{background-color:#2e7d32!important}.kds-theme-root .green10{background-color:#1b5e20!important}.kds-theme-root .light-green,.kds-theme-root .light-green6{background-color:#8bc34a!important}.kds-theme-root .light-green-border{border-color:#8bc34a!important}.kds-theme-root .light-green-text{color:#8bc34a!important}.kds-theme-root .light-green1{background-color:#f1f8e9!important}.kds-theme-root .light-green2{background-color:#dcedc8!important}.kds-theme-root .light-green3{background-color:#c5e1a5!important}.kds-theme-root .light-green4{background-color:#aed581!important}.kds-theme-root .light-green5{background-color:#9ccc65!important}.kds-theme-root .light-green7{background-color:#7cb342!important}.kds-theme-root .light-green8{background-color:#689f38!important}.kds-theme-root .light-green9{background-color:#558b2f!important}.kds-theme-root .light-green10{background-color:#33691e!important}.kds-theme-root .lime,.kds-theme-root .lime6{background-color:#cddc39!important}.kds-theme-root .lime-border{border-color:#cddc39!important}.kds-theme-root .lime-text{color:#cddc39!important}.kds-theme-root .lime1{background-color:#f9fbe7!important}.kds-theme-root .lime2{background-color:#f0f4c3!important}.kds-theme-root .lime3{background-color:#e6ee9c!important}.kds-theme-root .lime4{background-color:#dce775!important}.kds-theme-root .lime5{background-color:#d4e157!important}.kds-theme-root .lime7{background-color:#c0ca33!important}.kds-theme-root .lime8{background-color:#afb42b!important}.kds-theme-root .lime9{background-color:#9e9d24!important}.kds-theme-root .lime10{background-color:#827717!important}.kds-theme-root .yellow,.kds-theme-root .yellow6{background-color:#ffeb3b!important}.kds-theme-root .yellow-border{border-color:#ffeb3b!important}.kds-theme-root .yellow-text{color:#ffeb3b!important}.kds-theme-root .yellow1{background-color:#fffde7!important}.kds-theme-root .yellow2{background-color:#fff9c4!important}.kds-theme-root .yellow3{background-color:#fff59d!important}.kds-theme-root .yellow4{background-color:#fff176!important}.kds-theme-root .yellow5{background-color:#ffee58!important}.kds-theme-root .yellow7{background-color:#fdd835!important}.kds-theme-root .yellow8{background-color:#fbc02d!important}.kds-theme-root .yellow9{background-color:#f9a825!important}.kds-theme-root .yellow10{background-color:#f57f17!important}.kds-theme-root .amber,.kds-theme-root .amber6{background-color:#ffc107!important}.kds-theme-root .amber-border{border-color:#ffc107!important}.kds-theme-root .amber-text{color:#ffc107!important}.kds-theme-root .amber1{background-color:#fff8e1!important}.kds-theme-root .amber2{background-color:#ffecb3!important}.kds-theme-root .amber3{background-color:#ffe082!important}.kds-theme-root .amber4{background-color:#ffd54f!important}.kds-theme-root .amber5{background-color:#ffca28!important}.kds-theme-root .amber7{background-color:#ffb300!important}.kds-theme-root .amber8{background-color:#ffa000!important}.kds-theme-root .amber9{background-color:#ff8f00!important}.kds-theme-root .amber10{background-color:#ff6f00!important}.kds-theme-root .orange,.kds-theme-root .orange6{background-color:#ff9800!important}.kds-theme-root .orange-border{border-color:#ff9800!important}.kds-theme-root .orange-text{color:#ff9800!important}.kds-theme-root .orange1{background-color:#fff3e0!important}.kds-theme-root .orange2{background-color:#ffe0b2!important}.kds-theme-root .orange3{background-color:#ffcc80!important}.kds-theme-root .orange4{background-color:#ffb74d!important}.kds-theme-root .orange5{background-color:#ffa726!important}.kds-theme-root .orange7{background-color:#fb8c00!important}.kds-theme-root .orange8{background-color:#f57c00!important}.kds-theme-root .orange9{background-color:#ef6c00!important}.kds-theme-root .orange10{background-color:#e65100!important}.kds-theme-root .deep-orange,.kds-theme-root .deep-orange6{background-color:#ff5722!important}.kds-theme-root .deep-orange-border{border-color:#ff5722!important}.kds-theme-root .deep-orange-text{color:#ff5722!important}.kds-theme-root .deep-orange1{background-color:#fbe9e7!important}.kds-theme-root .deep-orange2{background-color:#ffccbc!important}.kds-theme-root .deep-orange3{background-color:#ffab91!important}.kds-theme-root .deep-orange4{background-color:#ff8a65!important}.kds-theme-root .deep-orange5{background-color:#ff7043!important}.kds-theme-root .deep-orange7{background-color:#f4511e!important}.kds-theme-root .deep-orange8{background-color:#e64a19!important}.kds-theme-root .deep-orange9{background-color:#d84315!important}.kds-theme-root .deep-orange10{background-color:#bf360c!important}.kds-theme-root .brown,.kds-theme-root .brown6{background-color:#795548!important}.kds-theme-root .brown-border{border-color:#795548!important}.kds-theme-root .brown-text{color:#795548!important}.kds-theme-root .brown1{background-color:#efebe9!important}.kds-theme-root .brown2{background-color:#d7ccc8!important}.kds-theme-root .brown3{background-color:#bcaaa4!important}.kds-theme-root .brown4{background-color:#a1887f!important}.kds-theme-root .brown5{background-color:#8d6e63!important}.kds-theme-root .brown7{background-color:#6d4c41!important}.kds-theme-root .brown8{background-color:#5d4037!important}.kds-theme-root .brown9{background-color:#4e342e!important}.kds-theme-root .brown10{background-color:#3e2723!important}.kds-theme-root .blue-grey,.kds-theme-root .blue-grey6{background-color:#607d8b!important}.kds-theme-root .blue-grey-border{border-color:#607d8b!important}.kds-theme-root .blue-grey-text{color:#607d8b!important}.kds-theme-root .blue-grey1{background-color:#eceff1!important}.kds-theme-root .blue-grey2{background-color:#cfd8dc!important}.kds-theme-root .blue-grey3{background-color:#b0bec5!important}.kds-theme-root .blue-grey4{background-color:#90a4ae!important}.kds-theme-root .blue-grey5{background-color:#78909c!important}.kds-theme-root .blue-grey7{background-color:#546e7a!important}.kds-theme-root .blue-grey8{background-color:#455a64!important}.kds-theme-root .blue-grey9{background-color:#37474f!important}.kds-theme-root .blue-grey10{background-color:#263238!important}.kds-theme-root .grey,.kds-theme-root .grey6{background-color:#9e9e9e!important}.kds-theme-root .grey-border{border-color:#9e9e9e!important}.kds-theme-root .grey-text{color:#9e9e9e!important}.kds-theme-root .grey1{background-color:#fafafa!important}.kds-theme-root .grey2{background-color:#f5f5f5!important}.kds-theme-root .grey3{background-color:#eee!important}.kds-theme-root .grey4{background-color:#e0e0e0!important}.kds-theme-root .grey5{background-color:#bdbdbd!important}.kds-theme-root .grey7{background-color:#757575!important}.kds-theme-root .grey8{background-color:#616161!important}.kds-theme-root .grey9{background-color:#424242!important}.kds-theme-root .grey10{background-color:#212121!important}
7
9
 
@@ -13,15 +15,13 @@
13
15
  *
14
16
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
17
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-07-06T20:11:54.646Z
18
+ * Generated: 2026-08-04T17:30:50.532Z
17
19
  *
18
20
  * To regenerate:
19
21
  * cd design-system && npm run tokens:generate
20
22
  */
21
23
 
22
24
  /* Font imports - must be at the top of the file */
23
- @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');
24
-
25
25
  .kds-theme-root {
26
26
  /* ==========================================================================
27
27
  COLOR TOKENS
@@ -77,6 +77,7 @@
77
77
  --kds-color-background-paper: #FFFFFF;
78
78
  --kds-color-background-elevated: #FAFAFA;
79
79
  --kds-color-background-muted: #F4F4F7;
80
+ --kds-color-background-brand-subtle: #F0F0FA;
80
81
 
81
82
  /* Action colors */
82
83
  --kds-color-action-active: rgba(0, 0, 0, 0.56);
@@ -395,6 +396,112 @@
395
396
 
396
397
  }
397
398
 
399
+ /* ============================================================================
400
+ DARK MODE COLOR TOKENS
401
+ Override only color variables; everything else inherits from :root.
402
+ Activated via [data-theme="dark"] on <html>, <body>, or a wrapper.
403
+ ============================================================================ */
404
+
405
+ .kds-theme-root [data-theme="dark"] {
406
+
407
+ /* Primary palette - Khipu brand */
408
+ --kds-color-primary-main: #E3B5FF;
409
+ --kds-color-primary-light: #F1D6FF;
410
+ --kds-color-primary-dark: #4C0676;
411
+ --kds-color-primary-contrast: rgba(76, 6, 118, 0.87);
412
+ --kds-color-primary-hover: rgba(227, 181, 255, 0.08);
413
+ --kds-color-primary-selected: rgba(227, 181, 255, 0.16);
414
+ --kds-color-primary-focus: rgba(227, 181, 255, 0.24);
415
+ --kds-color-primary-focus-visible: rgba(227, 181, 255, 0.40);
416
+ --kds-color-primary-outlined-border: rgba(227, 181, 255, 0.50);
417
+
418
+ /* Secondary palette */
419
+ --kds-color-secondary-main: #B5EAFF;
420
+ --kds-color-secondary-light: #D6F3FF;
421
+ --kds-color-secondary-dark: #065676;
422
+ --kds-color-secondary-contrast: rgba(6, 86, 118, 0.87);
423
+
424
+ /* Semantic colors */
425
+ --kds-color-success-main: #2E7D32;
426
+ --kds-color-success-light: #4CAF50;
427
+ --kds-color-success-dark: #1B5E20;
428
+ --kds-color-success-contrast: #FFFFFF;
429
+ --kds-color-warning-main: #EF6C00;
430
+ --kds-color-warning-light: #FF9800;
431
+ --kds-color-warning-dark: #E65100;
432
+ --kds-color-warning-contrast: #FFFFFF;
433
+ --kds-color-warning-warm: #8A6D1A;
434
+ --kds-color-error-main: #D32F2F;
435
+ --kds-color-error-light: #EF5350;
436
+ --kds-color-error-dark: #C62828;
437
+ --kds-color-error-contrast: #FFFFFF;
438
+ --kds-color-info-main: #0288D1;
439
+ --kds-color-info-light: #03A9F4;
440
+ --kds-color-info-dark: #01579B;
441
+ --kds-color-info-contrast: #FFFFFF;
442
+ --kds-color-info-blue: #5A5FE0;
443
+
444
+ /* Text colors */
445
+ --kds-color-text-primary: rgba(255, 255, 255, 1);
446
+ --kds-color-text-secondary: rgba(255, 255, 255, 0.70);
447
+ --kds-color-text-disabled: rgba(255, 255, 255, 0.38);
448
+ --kds-color-text-hint: rgba(255, 255, 255, 0.38);
449
+
450
+ /* Background colors */
451
+ --kds-color-background-default: #181818;
452
+ --kds-color-background-paper: #121212;
453
+ --kds-color-background-elevated: #2C2C2C;
454
+ --kds-color-background-muted: #1E1E1E;
455
+ --kds-color-background-brand-subtle: #1E1030;
456
+
457
+ /* Action colors */
458
+ --kds-color-action-active: rgba(255, 255, 255, 0.56);
459
+ --kds-color-action-hover: rgba(255, 255, 255, 0.08);
460
+ --kds-color-action-selected: rgba(255, 255, 255, 0.16);
461
+ --kds-color-action-disabled: rgba(255, 255, 255, 0.38);
462
+ --kds-color-action-disabled-bg: rgba(255, 255, 255, 0.12);
463
+ --kds-color-action-focus: rgba(255, 255, 255, 0.12);
464
+
465
+ /* Divider */
466
+ --kds-color-divider: rgba(255, 255, 255, 0.12);
467
+
468
+ /* Gray palette - Neutral colors */
469
+ --kds-color-gray-50: #F9FAFB;
470
+ --kds-color-gray-100: #F3F4F6;
471
+ --kds-color-gray-200: #E5E7EB;
472
+ --kds-color-gray-300: #D1D5DB;
473
+ --kds-color-gray-400: #9CA3AF;
474
+ --kds-color-gray-500: #6B7280;
475
+ --kds-color-gray-600: #4B5563;
476
+ --kds-color-gray-700: #374151;
477
+ --kds-color-gray-800: #1F2937;
478
+ --kds-color-gray-900: #111827;
479
+
480
+ /* Input borders */
481
+ --kds-color-input-enabled-border: rgba(255, 255, 255, 0.23);
482
+ --kds-color-input-hover-border: rgba(255, 255, 255, 1);
483
+
484
+ /* Snackbar backgrounds */
485
+ --kds-snackbar-success-bg: rgba(76, 175, 80, 0.16);
486
+ --kds-snackbar-warning-bg: rgba(255, 152, 0, 0.16);
487
+ --kds-snackbar-error-bg: rgba(239, 83, 80, 0.16);
488
+ --kds-snackbar-info-bg: rgba(3, 169, 244, 0.16);
489
+
490
+ /* Alert backgrounds */
491
+ --kds-alert-info-bg: rgba(2, 136, 209, 0.12);
492
+ --kds-alert-warning-bg: rgba(239, 108, 0, 0.12);
493
+ --kds-alert-success-bg: rgba(46, 125, 50, 0.12);
494
+ --kds-alert-error-bg: rgba(211, 47, 47, 0.12);
495
+ --kds-alert-success-text: #6AE079;
496
+ --kds-alert-warning-text: #FFB74D;
497
+ --kds-alert-error-text: #EF9A9A;
498
+ --kds-alert-info-text: #4FC3F7;
499
+ --kds-alert-success-border: #4CAF50;
500
+ --kds-alert-warning-border: #FF9800;
501
+ --kds-alert-error-border: #EF5350;
502
+ --kds-alert-info-border: #03A9F4;
503
+ }
504
+
398
505
  /* ============================================================================
399
506
  RESPONSIVE TOKENS (Mobile-First)
400
507
  ============================================================================ */
@@ -523,7 +630,8 @@
523
630
  /* Import core design tokens (auto-generated) */
524
631
  .kds-theme-root,
525
632
  .kds-theme-root.light,
526
- .kds-theme-root.dark {
633
+ .kds-theme-root.dark,
634
+ .kds-theme-root [data-theme="dark"] {
527
635
  /* ========================================
528
636
  Map core tokens to BeerCSS-specific names
529
637
  (BeerCSS may use different naming conventions)
@@ -701,7 +809,8 @@
701
809
  --kds-color-danger-soft: var(--kds-alert-error-bg); /* #FEF2F2 */
702
810
 
703
811
  /* Bottom Sheet */
704
- --kds-bottom-sheet-max-width: 480px;
812
+ /* Mismo ancho que la card principal del flujo (stage narrow). */
813
+ --kds-bottom-sheet-max-width: var(--kds-stage-narrow-max-width);
705
814
  --kds-bottom-sheet-shadow: 0 -8px var(--kds-spacing-3-5) rgba(0, 0, 0, 0.18);
706
815
 
707
816
  /* Status Block */
@@ -720,26 +829,70 @@
720
829
  --kds-qr-avatar-radius: 10px; /* Avatar border radius */
721
830
  --kds-qr-badge-bg: var(--kds-color-primary-main); /* Badge background */
722
831
  --kds-qr-badge-text: #FFFFFF; /* Badge text color */
832
+
833
+ /* Highlighted Field */
834
+ --kds-field-highlight-bg: var(--kds-color-info-soft); /* Header band surface */
835
+ --kds-field-highlight-border: rgba(2, 136, 209, 0.5); /* Dashed accent border (info @ 50%) */
836
+ --kds-field-highlight-label: var(--kds-color-info-dark); /* Eyebrow label */
837
+ /* Doubles as the band's own padding, so its text lines up with the fields */
838
+ --kds-field-highlight-padding: var(--kds-spacing-2);
839
+ --kds-field-highlight-radius: var(--kds-radius-card);
723
840
  }
724
841
 
725
842
  /* ========================================
726
- Force Light Mode Only
843
+ Dark mode overrides — extended payment-flow tokens
844
+ These were authored as light-only literals in the group above (subtle
845
+ surfaces, soft backgrounds, borders, hovers, shell). Give them dark-aware
846
+ values so selected states / rows / hovers adapt. Additive: the light
847
+ :root / body.light values above are unchanged. Tokens already defined as
848
+ var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
849
+ body.dark is included on purpose: the light group above also matches
850
+ body.dark (specificity 0,1,1), so a bare [data-theme] override (0,1,0)
851
+ would lose on a body that carries the transitional dark class.
727
852
  ======================================== */
853
+ .kds-theme-root.dark,
854
+ .kds-theme-root [data-theme="dark"] {
855
+ --kds-color-primary-faint: #1E1030; /* dark brand-tinted subtle surface (selected rows/cards) */
856
+ --kds-color-info-soft: var(--kds-alert-info-bg); /* dark translucent blue */
857
+ --kds-color-success-soft: var(--kds-alert-success-bg); /* dark translucent green */
858
+ --kds-color-border-subtle: rgba(255, 255, 255, 0.08); /* subtle divider on dark */
859
+ --kds-color-border-default: rgba(255, 255, 255, 0.16); /* standard border on dark */
860
+ --kds-color-hover-bg: rgba(255, 255, 255, 0.04); /* subtle row hover on dark */
861
+ --kds-color-shell: var(--kds-color-background-default); /* neutral page background */
862
+
863
+ /* QR featured row — dark mirror of the light purple→blue gradient (the
864
+ light literals painted a light surface under adaptive white text). */
865
+ --kds-qr-bg-gradient: linear-gradient(135deg, #1E1030 0%, #101C2C 100%);
866
+ --kds-qr-border: rgba(227, 181, 255, 0.28); /* dark primary @ same alpha as light */
867
+ --kds-qr-focus-ring: rgba(227, 181, 255, 0.35);
868
+ --kds-qr-avatar-bg: var(--kds-color-background-elevated);
869
+ --kds-qr-avatar-border: rgba(227, 181, 255, 0.3);
870
+ --kds-qr-badge-text: var(--kds-color-primary-contrast); /* dark text on the lavender badge */
871
+
872
+ /* Highlighted field — info-soft still resolves to a near-white band on
873
+ dark, so mirror it as translucent info over the dark background. */
874
+ --kds-field-highlight-bg: rgba(2, 136, 209, 0.12);
875
+ --kds-field-highlight-border: rgba(125, 211, 252, 0.45);
876
+ --kds-field-highlight-label: #7DD3FC; /* light info, readable on dark */
877
+ }
728
878
 
729
- /* Force light mode - disable dark mode */
879
+ /* ========================================
880
+ Color Scheme (explicit opt-in to dark)
881
+ ======================================== */
882
+
883
+ /* Default to light regardless of OS preference. Because we use `light` (not
884
+ `light dark`), the system dark-mode preference never auto-applies — dark is
885
+ reached only by an explicit [data-theme="dark"] / body.dark opt-in. */
730
886
  .kds-theme-root,
731
887
  .kds-theme-root,
732
888
  .kds-theme-root {
733
- color-scheme: light only;
889
+ color-scheme: light;
734
890
  }
735
891
 
736
- /* Override system dark mode preference */
737
- @media (prefers-color-scheme: dark) {
738
- .kds-theme-root,
739
- .kds-theme-root,
740
- .kds-theme-root {
741
- color-scheme: light only;
742
- }
892
+ /* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
893
+ .kds-theme-root [data-theme="dark"],
894
+ .kds-theme-root.dark {
895
+ color-scheme: dark;
743
896
  }
744
897
 
745
898
  /* ========================================
@@ -851,10 +1004,12 @@
851
1004
 
852
1005
  /* Spacing - Using design tokens */
853
1006
  padding: var(--kds-spacing-button-padding); /* 0 16px */
854
- height: var(--kds-spacing-button-min-height); /* 44px */
855
- /* min-height además de height: en contenedores flex-column (p.ej. pantallas de
856
- resultado/timeout) el botón es flex-item y, con solo `height`, flex-shrink lo
857
- colapsaba a la altura del texto (~21px). min-height impide que se encoja. */
1007
+ /* Respiro vertical solo relevante con label multilinea; en una linea manda min-height. */
1008
+ padding-block: var(--kds-spacing-1);
1009
+ /* height:auto + min-height (no height fija): si el label envuelve en pantallas
1010
+ angostas el botón crece en vez de recortar el texto; min-height ademas impide
1011
+ que flex-shrink lo colapse como flex-item en contenedores flex-column. */
1012
+ height: auto;
858
1013
  min-height: var(--kds-spacing-button-min-height); /* 44px */
859
1014
 
860
1015
  /* Border - Using design token */
@@ -871,6 +1026,17 @@
871
1026
  vertical-align: middle;
872
1027
  }
873
1028
 
1029
+ /* Sin anillo de focus en botones: decision de diseno (KTUF-210) — el estado de
1030
+ focus/active se comunica solo con el cambio de fondo de cada variante. */
1031
+ .kds-theme-root button.kds-btn:focus,
1032
+ .kds-theme-root button.kds-btn:focus-visible,
1033
+ .kds-theme-root a.kds-btn:focus,
1034
+ .kds-theme-root a.kds-btn:focus-visible,
1035
+ .kds-theme-root button.kds-fab:focus,
1036
+ .kds-theme-root button.kds-fab:focus-visible {
1037
+ outline: none;
1038
+ }
1039
+
874
1040
  /* Active state - add subtle press effect */
875
1041
  .kds-theme-root button.kds-btn:active:not(:disabled),
876
1042
  .kds-theme-root a.kds-btn:active:not(:disabled) {
@@ -892,7 +1058,7 @@
892
1058
  .kds-theme-root button.kds-btn-primary,
893
1059
  .kds-theme-root a.kds-btn-primary {
894
1060
  background: var(--kds-color-primary-main); /* #8347AD */
895
- color: white;
1061
+ color: var(--kds-color-primary-contrast); /* #FFF light / dark-purple on dark (lavender bg) */
896
1062
  border: none;
897
1063
  box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
898
1064
  }
@@ -909,8 +1075,18 @@
909
1075
  .kds-theme-root a.kds-btn-primary:active:not(:disabled),
910
1076
  .kds-theme-root a.kds-btn-primary:focus-visible:not(:disabled) {
911
1077
  background: var(--kds-color-primary-dark);
912
- outline: 2px solid var(--kds-color-primary-main);
913
- outline-offset: 2px;
1078
+ }
1079
+
1080
+ /* Dark mode: the button is a light lavender with dark text, so hover/active must
1081
+ LIGHTEN (not darken) — else primary-dark bg + dark contrast text = invisible.
1082
+ Additive override; the light-mode rules above stay unchanged. */
1083
+ .kds-theme-root [data-theme="dark"] button.kds-btn-primary:hover:not(:disabled),
1084
+ .kds-theme-root [data-theme="dark"] a.kds-btn-primary:hover:not(:disabled),
1085
+ .kds-theme-root [data-theme="dark"] button.kds-btn-primary:active:not(:disabled),
1086
+ .kds-theme-root [data-theme="dark"] button.kds-btn-primary:focus-visible:not(:disabled),
1087
+ .kds-theme-root [data-theme="dark"] a.kds-btn-primary:active:not(:disabled),
1088
+ .kds-theme-root [data-theme="dark"] a.kds-btn-primary:focus-visible:not(:disabled) {
1089
+ background: var(--kds-color-primary-light);
914
1090
  }
915
1091
 
916
1092
  /* Override disabled para primary */
@@ -985,14 +1161,13 @@
985
1161
  opacity: 0.9;
986
1162
  }
987
1163
 
988
- /* Text button */
1164
+ /* Text button — mismo tamaño que el resto de variantes (hereda min-height/padding
1165
+ del base): solo cambia la superficie, no la caja. */
989
1166
  .kds-theme-root button.kds-btn-text,
990
1167
  .kds-theme-root a.kds-btn-text {
991
1168
  background: transparent;
992
1169
  color: var(--kds-color-primary-main);
993
1170
  border: none;
994
- padding: 6px var(--kds-spacing-2); /* Menor padding para text variant */
995
- min-height: 32px; /* Menor altura para text variant */
996
1171
  box-shadow: none;
997
1172
  }
998
1173
 
@@ -1001,6 +1176,12 @@
1001
1176
  color: var(--kds-color-primary-dark);
1002
1177
  }
1003
1178
 
1179
+ /* Dark: hover must lighten — primary-dark text is near-invisible on dark bg. */
1180
+ .kds-theme-root [data-theme="dark"] button.kds-btn-text:hover:not(:disabled),
1181
+ .kds-theme-root [data-theme="dark"] a.kds-btn-text:hover:not(:disabled) {
1182
+ color: var(--kds-color-primary-light);
1183
+ }
1184
+
1004
1185
  .kds-theme-root button.kds-btn-text:disabled,
1005
1186
  .kds-theme-root a.kds-btn-text:disabled {
1006
1187
  background: transparent;
@@ -1015,8 +1196,6 @@
1015
1196
  background: transparent;
1016
1197
  color: var(--kds-color-error-main);
1017
1198
  border: none;
1018
- padding: 6px var(--kds-spacing-2);
1019
- min-height: 32px;
1020
1199
  box-shadow: none;
1021
1200
  }
1022
1201
 
@@ -1032,9 +1211,16 @@
1032
1211
  box-shadow: none;
1033
1212
  }
1034
1213
 
1214
+ /* Label: al envolver en pantallas angostas las lineas quedan parejas y el icono
1215
+ (inline, dentro del label) fluye con el texto en vez de anclarse al borde. */
1216
+ .kds-theme-root button.kds-btn .kds-btn-label,
1217
+ .kds-theme-root a.kds-btn .kds-btn-label {
1218
+ text-wrap: balance;
1219
+ }
1220
+
1035
1221
  /* Icon wrapper - control size via span container */
1036
- .kds-theme-root button.kds-btn > .kds-icon,
1037
- .kds-theme-root a.kds-btn > .kds-icon {
1222
+ .kds-theme-root button.kds-btn .kds-icon,
1223
+ .kds-theme-root a.kds-btn .kds-icon {
1038
1224
  min-width: var(--kds-spacing-button-icon-size);
1039
1225
  min-height: var(--kds-spacing-button-icon-size);
1040
1226
  width: var(--kds-spacing-button-icon-size);
@@ -1045,10 +1231,22 @@
1045
1231
  display: inline-flex;
1046
1232
  align-items: center;
1047
1233
  justify-content: center;
1234
+ vertical-align: middle;
1235
+ }
1236
+
1237
+ /* El gap del boton no aplica al icono inline: el respiro icono-texto sale del margen. */
1238
+ .kds-theme-root button.kds-btn .kds-icon-start,
1239
+ .kds-theme-root a.kds-btn .kds-icon-start {
1240
+ margin-inline-end: var(--kds-spacing-1);
1241
+ }
1242
+
1243
+ .kds-theme-root button.kds-btn .kds-icon-end,
1244
+ .kds-theme-root a.kds-btn .kds-icon-end {
1245
+ margin-inline-start: var(--kds-spacing-1);
1048
1246
  }
1049
1247
 
1050
- .kds-theme-root button.kds-btn > .kds-icon > i,
1051
- .kds-theme-root a.kds-btn > .kds-icon > i {
1248
+ .kds-theme-root button.kds-btn .kds-icon > i,
1249
+ .kds-theme-root a.kds-btn .kds-icon > i {
1052
1250
  font-size: var(--kds-spacing-button-icon-size);
1053
1251
  min-width: var(--kds-spacing-button-icon-size);
1054
1252
  min-height: var(--kds-spacing-button-icon-size);
@@ -1254,7 +1452,7 @@
1254
1452
  align-self: flex-start;
1255
1453
  padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
1256
1454
  background: var(--primary);
1257
- color: white;
1455
+ color: var(--kds-color-primary-contrast); /* contrast adapts: #FFF light / dark on dark */
1258
1456
  font-size: var(--kds-font-size-xs);
1259
1457
  font-weight: var(--kds-font-weight-semibold);
1260
1458
  line-height: 1;
@@ -1518,6 +1716,10 @@
1518
1716
  flex-wrap: wrap;
1519
1717
  }
1520
1718
 
1719
+ .kds-theme-root .kds-grow {
1720
+ flex-grow: 1;
1721
+ }
1722
+
1521
1723
  .kds-theme-root .kds-justify-start {
1522
1724
  justify-content: flex-start;
1523
1725
  }
@@ -1550,7 +1752,59 @@
1550
1752
  align-self: center;
1551
1753
  }
1552
1754
 
1755
+ /* Botón "pelado": neutraliza el chrome de button de BeerCSS (pill 2.5rem,
1756
+ radius, fondo y hover) para botones de terceros con su propio look,
1757
+ p.ej. los share buttons de react-share (ícono circular). */
1758
+ .kds-theme-root .kds-btn-bare,
1759
+ .kds-theme-root .kds-btn-bare:hover,
1760
+ .kds-theme-root .kds-btn-bare:focus,
1761
+ .kds-theme-root .kds-btn-bare:active {
1762
+ background: none !important;
1763
+ block-size: auto !important;
1764
+ inline-size: auto !important;
1765
+ min-inline-size: 0 !important;
1766
+ padding: 0 !important;
1767
+ margin: 0 !important;
1768
+ border: 0 !important;
1769
+ border-radius: var(--kds-radius-full) !important;
1770
+ box-sizing: border-box !important;
1771
+ box-shadow: none !important;
1772
+ transform: none !important;
1773
+ }
1774
+
1775
+ .kds-theme-root .kds-btn-bare::before,
1776
+ .kds-theme-root .kds-btn-bare::after {
1777
+ display: none !important;
1778
+ }
1779
+
1780
+ /* BeerCSS también encoge los íconos hijos de button a 1.5rem (min/max);
1781
+ un botón pelado respeta el tamaño propio del ícono. */
1782
+ .kds-theme-root .kds-btn-bare > :is(img, svg) {
1783
+ max-block-size: none !important;
1784
+ max-inline-size: none !important;
1785
+ min-block-size: 0 !important;
1786
+ min-inline-size: 0 !important;
1787
+ }
1788
+
1789
+ /* Versión de la app anclada al fondo del card body (flex column): margin-top
1790
+ auto absorbe el espacio libre; el padding garantiza respiro mínimo cuando el
1791
+ contenido llena la card. */
1792
+ .kds-theme-root .kds-card-version {
1793
+ margin-top: auto;
1794
+ padding-top: var(--kds-spacing-2);
1795
+ text-align: center;
1796
+ }
1797
+
1798
+ /* Separador vertical (entre chips/logos hermanos en una fila). */
1799
+ .kds-theme-root .kds-vr {
1800
+ width: 1px;
1801
+ height: var(--kds-spacing-3);
1802
+ background: var(--kds-color-divider);
1803
+ flex: 0 0 auto;
1804
+ }
1805
+
1553
1806
  /* Gap utilities */
1807
+ .kds-theme-root .kds-gap-0-25 { gap: var(--kds-spacing-0-25); }
1554
1808
  .kds-theme-root .kds-gap-1 { gap: var(--kds-spacing-1); }
1555
1809
  .kds-theme-root .kds-gap-2 { gap: var(--kds-spacing-2); }
1556
1810
  .kds-theme-root .kds-gap-3 { gap: var(--kds-spacing-3); }
@@ -1837,33 +2091,35 @@
1837
2091
  opacity: 1 !important;
1838
2092
  }
1839
2093
 
1840
- /* Snackbar semantic variants
1841
- All use white text (--kds-color-primary-contrast) on solid semantic backgrounds */
2094
+ /* Snackbar semantic variants — white text on solid semantic backgrounds.
2095
+ Use each semantic's own *-contrast token (always #FFFFFF, both modes) rather
2096
+ than --kds-color-primary-contrast, which flips to dark purple in dark mode
2097
+ and made the text illegible on the colored surface. */
1842
2098
  .kds-theme-root .snackbar.error {
1843
2099
  background-color: var(--kds-color-error-main) !important;
1844
- color: var(--kds-color-primary-contrast) !important;
2100
+ color: var(--kds-color-error-contrast) !important;
1845
2101
  }
1846
2102
 
1847
2103
  .kds-theme-root .snackbar.error i {
1848
- color: var(--kds-color-primary-contrast) !important;
2104
+ color: var(--kds-color-error-contrast) !important;
1849
2105
  }
1850
2106
 
1851
2107
  .kds-theme-root .snackbar.info {
1852
2108
  background-color: var(--kds-color-info-main) !important;
1853
- color: var(--kds-color-primary-contrast) !important;
2109
+ color: var(--kds-color-info-contrast) !important;
1854
2110
  }
1855
2111
 
1856
2112
  .kds-theme-root .snackbar.info i {
1857
- color: var(--kds-color-primary-contrast) !important;
2113
+ color: var(--kds-color-info-contrast) !important;
1858
2114
  }
1859
2115
 
1860
2116
  .kds-theme-root .snackbar.success {
1861
2117
  background-color: var(--kds-color-success-main) !important;
1862
- color: var(--kds-color-primary-contrast) !important;
2118
+ color: var(--kds-color-success-contrast) !important;
1863
2119
  }
1864
2120
 
1865
2121
  .kds-theme-root .snackbar.success i {
1866
- color: var(--kds-color-primary-contrast) !important;
2122
+ color: var(--kds-color-success-contrast) !important;
1867
2123
  }
1868
2124
 
1869
2125
  /* Snackbar progress bar — animated timer for auto-dismiss */
@@ -2170,6 +2426,9 @@
2170
2426
 
2171
2427
  .kds-theme-root .kds-secure-loader-message {
2172
2428
  margin: 0;
2429
+ /* !important: anula el auto-espaciado de hermanos de BeerCSS (0,5,1);
2430
+ la separación con el título la da el gap del contenedor (spacing-0-25). */
2431
+ margin-top: 0 !important;
2173
2432
  font-family: var(--kds-font-family-secondary);
2174
2433
  font-size: var(--kds-font-size-body1);
2175
2434
  line-height: var(--kds-line-height-normal);
@@ -2186,12 +2445,13 @@
2186
2445
  block-size: var(--kds-secure-loader-size, 6.25rem);
2187
2446
  }
2188
2447
 
2189
- /* Anillo: SVG nativo con arco vía stroke-dasharray, rotando. Replica el
2190
- CircularProgress original (viewBox 44u, thickness 2, arco ~63%, disableShrink). */
2448
+ /* Anillo: SVG nativo con arco vía stroke-dasharray. Replica el CircularProgress
2449
+ original (viewBox 44u, thickness 2, arco ~63%, disableShrink). El giro se anima
2450
+ con stroke-dashoffset (el círculo queda estático y nítido); rotar el SVG con
2451
+ transform rasteriza el anillo y se ve irregular durante el giro. */
2191
2452
  .kds-theme-root .kds-secure-loader-ring {
2192
2453
  inline-size: var(--kds-secure-loader-size, 6.25rem);
2193
2454
  block-size: var(--kds-secure-loader-size, 6.25rem);
2194
- animation: kds-secure-loader-spin 1.2s linear infinite;
2195
2455
  }
2196
2456
 
2197
2457
  .kds-theme-root .kds-secure-loader-ring circle {
@@ -2199,13 +2459,14 @@
2199
2459
  stroke: var(--kds-color-primary-main);
2200
2460
  stroke-width: 2;
2201
2461
  stroke-linecap: round;
2202
- /* circunferencia ≈ 2π·20.2 ≈ 127; arco visible ≈ 80 (~63%) */
2203
- stroke-dasharray: 80 127;
2462
+ /* circunferencia = 2π·20.2 ≈ 126.92; arco visible 80 (~63%) + hueco 46.92 */
2463
+ stroke-dasharray: 80 46.92;
2464
+ animation: kds-secure-loader-dash 1.2s linear infinite;
2204
2465
  }
2205
2466
 
2206
- @keyframes kds-secure-loader-spin {
2467
+ @keyframes kds-secure-loader-dash {
2207
2468
  to {
2208
- transform: rotate(360deg);
2469
+ stroke-dashoffset: -126.92;
2209
2470
  }
2210
2471
  }
2211
2472
 
@@ -2290,6 +2551,17 @@
2290
2551
  flex-shrink: 0;
2291
2552
  }
2292
2553
 
2554
+ /* Dark mode: info-dark text is near-invisible on the dark translucent chip.
2555
+ Use the alert info text token (light blue in dark), same pattern as KdsAlert;
2556
+ the copied state already uses alert-success-text and adapts on its own. */
2557
+ .kds-theme-root [data-theme="dark"] .kds-copy-button {
2558
+ color: var(--kds-alert-info-text);
2559
+ }
2560
+
2561
+ .kds-theme-root [data-theme="dark"] .kds-copy-button .material-symbols-outlined {
2562
+ color: var(--kds-alert-info-text);
2563
+ }
2564
+
2293
2565
  .kds-theme-root .kds-copy-button.copied {
2294
2566
  background: var(--kds-alert-success-bg);
2295
2567
  color: var(--kds-alert-success-text);
@@ -2345,20 +2617,37 @@
2345
2617
  text-decoration: underline;
2346
2618
  }
2347
2619
 
2620
+ /* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
2621
+ .kds-theme-root [data-theme="dark"] .kds-link:hover {
2622
+ color: var(--kds-color-primary-light);
2623
+ }
2624
+
2348
2625
  /* Contextual links inside cards and stage forms */
2349
2626
  .kds-theme-root .kds-card-body a:not(.kds-btn):not([class*="kds-btn"]),
2350
- .kds-theme-root .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]) {
2627
+ .kds-theme-root .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]),
2628
+ .kds-theme-root label.checkbox a:not(.kds-btn):not([class*="kds-btn"]),
2629
+ .kds-theme-root label.radio a:not(.kds-btn):not([class*="kds-btn"]) {
2351
2630
  color: var(--kds-color-primary-main);
2352
2631
  text-decoration: none;
2353
2632
  transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
2354
2633
  }
2355
2634
 
2356
2635
  .kds-theme-root .kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
2357
- .kds-theme-root .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover {
2636
+ .kds-theme-root .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
2637
+ .kds-theme-root label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
2638
+ .kds-theme-root label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
2358
2639
  color: var(--kds-color-primary-dark);
2359
2640
  text-decoration: underline;
2360
2641
  }
2361
2642
 
2643
+ /* Dark: hover must lighten (primary-dark is near-invisible on a dark surface). */
2644
+ .kds-theme-root [data-theme="dark"] .kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
2645
+ .kds-theme-root [data-theme="dark"] .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
2646
+ .kds-theme-root [data-theme="dark"] label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
2647
+ .kds-theme-root [data-theme="dark"] label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
2648
+ color: var(--kds-color-primary-light);
2649
+ }
2650
+
2362
2651
  /* ========================================
2363
2652
  Flex Layout System (Body + Container + Sidebar)
2364
2653
  ======================================== */
@@ -2453,7 +2742,8 @@
2453
2742
  /* === VARIABLES GLOBALES === */
2454
2743
  .kds-theme-root,
2455
2744
  .kds-theme-root.light,
2456
- .kds-theme-root.dark {
2745
+ .kds-theme-root.dark,
2746
+ .kds-theme-root [data-theme="dark"] {
2457
2747
  --primary: var(--kds-color-primary-main); /* Purple Khipu - Focus */
2458
2748
  --outline: var(--kds-color-input-enabled-border); /* Gris normal - Unfocused */
2459
2749
  --error: var(--kds-color-error-main); /* Rojo - Invalid */
@@ -2637,9 +2927,9 @@
2637
2927
  color: var(--kds-color-text-secondary);
2638
2928
  }
2639
2929
 
2640
- /* Hover SIN focus: más oscuro (70% opacity) */
2930
+ /* Hover SIN focus: máxima emphasis (adapta a blanco en dark) */
2641
2931
  .kds-theme-root .field.label:hover:not(:focus-within) > label {
2642
- color: rgba(0, 0, 0, 0.7);
2932
+ color: var(--kds-color-text-primary);
2643
2933
  }
2644
2934
 
2645
2935
  /* Focus: primary purple (BeerCSS ya lo hace, pero aseguramos) */
@@ -2809,8 +3099,13 @@
2809
3099
  'wght' 400,
2810
3100
  'GRAD' 0,
2811
3101
  'opsz' 24;
2812
- min-width: 30px;
2813
- min-height: 30px;
3102
+ /* La caja debe seguir al font-size (1em): una caja fija (30px, o el --_size de Beer via
3103
+ overflow:hidden en `i`) recorta los glifos mayores y descentra los menores junto a texto. */
3104
+ width: 1em;
3105
+ height: 1em;
3106
+ min-width: 1em;
3107
+ min-height: 1em;
3108
+ line-height: 1;
2814
3109
  display: inline-flex;
2815
3110
  align-items: center;
2816
3111
  justify-content: center;
@@ -3172,7 +3467,7 @@
3172
3467
  background: var(--kds-accordion-bg-open);
3173
3468
  font-size: var(--kds-font-size-sm);
3174
3469
  line-height: 1.6;
3175
- color: #374151;
3470
+ color: var(--kds-color-text-primary);
3176
3471
  }
3177
3472
 
3178
3473
  .kds-theme-root .kds-contract-accordion-content h4 {
@@ -3569,6 +3864,27 @@
3569
3864
  color: var(--kds-color-error-dark);
3570
3865
  }
3571
3866
 
3867
+ /* Dark mode: the semantic *-dark shades used for text/icons above are too dark
3868
+ on the dark translucent alert surfaces (poor visibility). Use the alert
3869
+ *-text tokens (light shades in dark) so title, description and icon stay
3870
+ legible. Title/description inherit this color. Additive — light unchanged. */
3871
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-info,
3872
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-info .kds-alert-icon {
3873
+ color: var(--kds-alert-info-text);
3874
+ }
3875
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-success,
3876
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-success .kds-alert-icon {
3877
+ color: var(--kds-alert-success-text);
3878
+ }
3879
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-warning,
3880
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-warning .kds-alert-icon {
3881
+ color: var(--kds-alert-warning-text);
3882
+ }
3883
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-error,
3884
+ .kds-theme-root [data-theme="dark"] .kds-alert.kds-error .kds-alert-icon {
3885
+ color: var(--kds-alert-error-text);
3886
+ }
3887
+
3572
3888
  /* Close button — icon-only, discreto, no usa kds-btn para no romper el flex layout del alert */
3573
3889
  .kds-theme-root .kds-alert-close {
3574
3890
  flex-shrink: 0;
@@ -4197,6 +4513,11 @@
4197
4513
  color: var(--kds-color-primary-dark);
4198
4514
  }
4199
4515
 
4516
+ /* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
4517
+ .kds-theme-root [data-theme="dark"] .page-card-link:hover {
4518
+ color: var(--kds-color-primary-light);
4519
+ }
4520
+
4200
4521
  .kds-theme-root .page-card-link i {
4201
4522
  font-size: var(--kds-font-size-xl);
4202
4523
  transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
@@ -4744,12 +5065,25 @@
4744
5065
  text-transform: uppercase;
4745
5066
  }
4746
5067
 
4747
- /* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro). */
5068
+ /* KV label — label del par clave↔valor (letra del dt de .kds-kv: "PAGO A" / "ASUNTO").
5069
+ line-height tight: en pares apilados el relaxed infla la separación de tinta. */
5070
+ .kds-theme-root .kds-text-kv-label {
5071
+ font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
5072
+ font-size: var(--kds-font-size-xs);
5073
+ font-weight: var(--kds-font-weight-regular);
5074
+ line-height: var(--kds-line-height-tight);
5075
+ letter-spacing: normal;
5076
+ text-transform: uppercase;
5077
+ color: var(--kds-color-text-secondary);
5078
+ }
5079
+
5080
+ /* Value — dato/valor destacado (ej. nombre del comercio en el header del cobro).
5081
+ line-height tight: se usa en pares apilados y el relaxed infla la separación. */
4748
5082
  .kds-theme-root .kds-text-value {
4749
5083
  font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
4750
5084
  font-size: var(--kds-font-size-sm);
4751
5085
  font-weight: var(--kds-font-weight-semibold);
4752
- line-height: var(--kds-line-height-relaxed);
5086
+ line-height: var(--kds-line-height-tight);
4753
5087
  color: var(--kds-color-gray-800);
4754
5088
  }
4755
5089
 
@@ -4774,6 +5108,7 @@
4774
5108
  }
4775
5109
 
4776
5110
  .kds-theme-root .kds-text-link {
5111
+ cursor: pointer;
4777
5112
  font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
4778
5113
  font-size: inherit;
4779
5114
  font-weight: var(--kds-font-weight-medium, 500);
@@ -4817,13 +5152,13 @@
4817
5152
 
4818
5153
  /* Color utilities (solo para casos específicos de demo) */
4819
5154
  .kds-theme-root .kds-text-warning {
4820
- color: #92400E;
5155
+ color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
4821
5156
  }
4822
5157
 
4823
5158
  .kds-theme-root .kds-list-warning {
4824
5159
  margin: 0;
4825
5160
  padding-left: var(--kds-spacing-5);
4826
- color: #78350F;
5161
+ color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
4827
5162
  }
4828
5163
 
4829
5164
  /* ========================================
@@ -4881,7 +5216,25 @@
4881
5216
  flex-shrink: 0;
4882
5217
  }
4883
5218
 
5219
+ /* Versión de la app anclada al fondo del card body (flex column): margin-top
5220
+ auto absorbe el espacio libre; el padding garantiza respiro mínimo cuando el
5221
+ contenido llena la card. */
5222
+ .kds-theme-root .kds-card-version {
5223
+ margin-top: auto;
5224
+ padding-top: var(--kds-spacing-2);
5225
+ text-align: center;
5226
+ }
5227
+
5228
+ /* Separador vertical (entre chips/logos hermanos en una fila). */
5229
+ .kds-theme-root .kds-vr {
5230
+ width: 1px;
5231
+ height: var(--kds-spacing-3);
5232
+ background: var(--kds-color-divider);
5233
+ flex: 0 0 auto;
5234
+ }
5235
+
4884
5236
  /* Gap utilities */
5237
+ .kds-theme-root .kds-gap-0-25 { gap: var(--kds-spacing-0-25); }
4885
5238
  .kds-theme-root .kds-gap-1 { gap: var(--kds-spacing-1); }
4886
5239
  .kds-theme-root .kds-gap-2 { gap: var(--kds-spacing-2); }
4887
5240
  .kds-theme-root .kds-gap-3 { gap: var(--kds-spacing-3); }
@@ -4981,6 +5334,30 @@
4981
5334
  color: var(--kds-color-primary-dark);
4982
5335
  }
4983
5336
 
5337
+ /* Dark: semantic *-dark text is near-invisible on dark surfaces (and the
5338
+ *-container background tokens are not generated). Use the alert bg/text
5339
+ pairs, which are dark-aware; primary uses selected/light. */
5340
+ .kds-theme-root [data-theme="dark"] .kds-badge.success {
5341
+ background-color: var(--kds-alert-success-bg);
5342
+ color: var(--kds-alert-success-text);
5343
+ }
5344
+ .kds-theme-root [data-theme="dark"] .kds-badge.error {
5345
+ background-color: var(--kds-alert-error-bg);
5346
+ color: var(--kds-alert-error-text);
5347
+ }
5348
+ .kds-theme-root [data-theme="dark"] .kds-badge.warning {
5349
+ background-color: var(--kds-alert-warning-bg);
5350
+ color: var(--kds-alert-warning-text);
5351
+ }
5352
+ .kds-theme-root [data-theme="dark"] .kds-badge.info {
5353
+ background-color: var(--kds-alert-info-bg);
5354
+ color: var(--kds-alert-info-text);
5355
+ }
5356
+ .kds-theme-root [data-theme="dark"] .kds-badge.primary {
5357
+ background-color: var(--kds-color-primary-selected);
5358
+ color: var(--kds-color-primary-light);
5359
+ }
5360
+
4984
5361
  /* ========================================
4985
5362
  DIVIDER WITH TEXT
4986
5363
  Separator with optional text
@@ -5469,6 +5846,26 @@
5469
5846
  background: var(--kds-color-hover-bg);
5470
5847
  }
5471
5848
 
5849
+ /* BeerCSS forces `border-radius: .5rem !important` on button:active
5850
+ (:is(.button,button):not(.chip):active — specificity 0,3,0). Keep each
5851
+ row-button's own radius in the active state: doubled class matches that
5852
+ specificity and this file loads after beer.css, so these win. */
5853
+ .kds-theme-root .kds-bank-row.kds-bank-row:active {
5854
+ border-radius: var(--kds-radius-card) !important;
5855
+ }
5856
+ .kds-theme-root .kds-qr-row.kds-qr-row:active {
5857
+ border-radius: var(--kds-radius-card) !important;
5858
+ }
5859
+ .kds-theme-root .kds-copy-row.kds-copy-row:active {
5860
+ border-radius: var(--kds-radius-row) !important;
5861
+ }
5862
+ .kds-theme-root .kds-copyable-table-row.kds-copyable-table-row:active {
5863
+ border-radius: var(--kds-spacing-0-75) !important;
5864
+ }
5865
+ .kds-theme-root .kds-bank-item.kds-bank-item:active {
5866
+ border-radius: var(--kds-radius-lg) !important;
5867
+ }
5868
+
5472
5869
  .kds-theme-root .kds-bank-row-logo {
5473
5870
  width: 40px;
5474
5871
  height: 40px;
@@ -5526,7 +5923,7 @@
5526
5923
  display: flex;
5527
5924
  gap: var(--kds-spacing-1-25);
5528
5925
  padding: var(--kds-spacing-2);
5529
- background: #FFFFFF;
5926
+ background: var(--kds-color-background-default); /* #FFF light / #181818 dark */
5530
5927
  border-top: 1px solid var(--kds-color-divider);
5531
5928
  padding-bottom: calc(var(--kds-spacing-2) + env(safe-area-inset-bottom));
5532
5929
  z-index: 100;
@@ -5576,14 +5973,17 @@
5576
5973
  background-color var(--kds-transition-shorter) ease;
5577
5974
  }
5578
5975
 
5579
- /* Keep the circle in EVERY interaction state. Uses `button.kds-fab` (element + class) to
5580
- out-specify BeerCSS's base `button`/`button:active` rules — same trick as `.kds-btn`. */
5581
- .kds-theme-root button.kds-fab,
5582
- .kds-theme-root button.kds-fab:hover,
5583
- .kds-theme-root button.kds-fab:active,
5584
- .kds-theme-root button.kds-fab:focus,
5585
- .kds-theme-root button.kds-fab:focus-visible {
5586
- border-radius: var(--kds-radius-full);
5976
+ /* Keep the circle in EVERY interaction state. BeerCSS forces
5977
+ `border-radius: .5rem !important` on button:active (specificity 0,3,0), so
5978
+ plain specificity is not enough — match it with a doubled class AND
5979
+ !important; this file loads after beer.css, so these win. */
5980
+ .kds-theme-root button.kds-fab.kds-fab,
5981
+ .kds-theme-root button.kds-fab.kds-fab:hover,
5982
+ .kds-theme-root button.kds-fab.kds-fab:active,
5983
+ .kds-theme-root button.kds-fab.kds-fab.active,
5984
+ .kds-theme-root button.kds-fab.kds-fab:focus,
5985
+ .kds-theme-root button.kds-fab.kds-fab:focus-visible {
5986
+ border-radius: var(--kds-radius-full) !important;
5587
5987
  background: var(--kds-color-background-paper);
5588
5988
  }
5589
5989
 
@@ -5596,10 +5996,7 @@
5596
5996
  transform: translateY(var(--kds-spacing-0-25));
5597
5997
  }
5598
5998
 
5599
- .kds-theme-root button.kds-fab:focus-visible {
5600
- outline: var(--kds-spacing-0-25) solid var(--kds-color-primary-main);
5601
- outline-offset: var(--kds-spacing-0-25);
5602
- }
5999
+
5603
6000
 
5604
6001
  .kds-theme-root .kds-fab > i.material-symbols-outlined {
5605
6002
  font-size: var(--kds-spacing-button-icon-size);
@@ -5882,6 +6279,11 @@
5882
6279
  height: 1.25em;
5883
6280
  min-width: 0;
5884
6281
  min-height: 0;
6282
+ /* Correccion optica: la tinta de expand_more vive en la zona alta del em, asi que
6283
+ centrado geometrico contra el label (con ascendentes) se percibe montado; este
6284
+ nudge lo baja al centro de las minusculas. No usar transform: lo pisa el rotate. */
6285
+ position: relative;
6286
+ top: 0.09em;
5885
6287
  transition: transform var(--kds-transition-shorter, 0.2s);
5886
6288
  }
5887
6289
 
@@ -6028,6 +6430,16 @@
6028
6430
  padding: var(--kds-spacing-2) 0;
6029
6431
  }
6030
6432
 
6433
+ /* En el borde compartido con el card el rhythm lo aporta el padding del propio card:
6434
+ como primer/último hijo directo el padding del bloque no debe sumarse al del padre. */
6435
+ .kds-theme-root .kds-card-elevated > .kds-status-block:first-child {
6436
+ padding-top: 0;
6437
+ }
6438
+
6439
+ .kds-theme-root .kds-card-elevated > .kds-status-block:last-child {
6440
+ padding-bottom: 0;
6441
+ }
6442
+
6031
6443
  .kds-theme-root .kds-status-block-icon {
6032
6444
  width: var(--kds-status-icon-size);
6033
6445
  height: var(--kds-status-icon-size);
@@ -6045,7 +6457,7 @@
6045
6457
 
6046
6458
  .kds-theme-root .kds-status-block-title {
6047
6459
  font-size: var(--kds-font-size-xl);
6048
- font-weight: var(--kds-font-weight-bold);
6460
+ font-weight: var(--kds-font-weight-semibold);
6049
6461
  color: var(--kds-color-text-primary);
6050
6462
  margin: 0 0 var(--kds-spacing-1);
6051
6463
  /* El reset global :where(h2) usa estas vars con !important; así se overridea. */
@@ -6054,7 +6466,8 @@
6054
6466
 
6055
6467
  .kds-theme-root .kds-status-block-description {
6056
6468
  font-size: var(--kds-font-size-sm);
6057
- color: var(--kds-color-text-secondary);
6469
+ /* Mismo color que el título: título y subtítulo parejos en resultados. */
6470
+ color: var(--kds-color-text-primary);
6058
6471
  margin: 0;
6059
6472
  /* !important: anula el auto-espaciado de hermanos de BeerCSS
6060
6473
  (margin-block-start: 1rem, especificidad 0,5,1 imposible de igualar).
@@ -6366,6 +6779,65 @@
6366
6779
  }
6367
6780
 
6368
6781
 
6782
+ /* ========================================
6783
+ 17 - HIGHLIGHTED FIELD (.kds-field-highlight)
6784
+ Calls out an optional or conditional block of
6785
+ fields inside a form. The colour lives in a
6786
+ header band, never behind the fields: BeerCSS
6787
+ floats the label ONTO the field outline (it cuts
6788
+ the input with clip-path and redraws that
6789
+ stretch of border in label::after), so anything
6790
+ painted behind a field shows through the notch,
6791
+ right under the label. Keeping the fields on the
6792
+ page surface means they render exactly as they
6793
+ do anywhere else in the form, with no override.
6794
+ ======================================== */
6795
+
6796
+ .kds-theme-root .kds-field-highlight {
6797
+ padding-inline: var(--kds-field-highlight-padding);
6798
+ padding-block-end: var(--kds-field-highlight-padding);
6799
+ border: var(--kds-border-width-sm) dashed var(--kds-field-highlight-border);
6800
+ border-radius: var(--kds-field-highlight-radius);
6801
+ }
6802
+
6803
+ /* Optional — omit it and the fields sit alone in the box. Breaks out to the box
6804
+ edges so it reads as a header band, then takes the box's own inset back as
6805
+ padding: the eyebrow ends up flush with the fields below, and the band's
6806
+ horizontal padding matches the fields' own. */
6807
+ .kds-theme-root .kds-field-highlight-header {
6808
+ display: flex;
6809
+ align-items: center;
6810
+ gap: var(--kds-spacing-1);
6811
+ margin-inline: calc(-1 * var(--kds-field-highlight-padding));
6812
+ margin-block-end: var(--kds-field-highlight-padding);
6813
+ padding-block: var(--kds-spacing-1-25);
6814
+ padding-inline: var(--kds-field-highlight-padding);
6815
+ background: var(--kds-field-highlight-bg);
6816
+ border-start-start-radius: calc(
6817
+ var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
6818
+ );
6819
+ border-start-end-radius: calc(
6820
+ var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
6821
+ );
6822
+ }
6823
+
6824
+ .kds-theme-root .kds-field-highlight-eyebrow {
6825
+ font-family: var(--kds-font-family-primary);
6826
+ font-size: var(--kds-font-size-xs);
6827
+ font-weight: var(--kds-font-weight-semibold);
6828
+ letter-spacing: var(--kds-letter-spacing-widest);
6829
+ line-height: 1.4;
6830
+ text-transform: uppercase;
6831
+ color: var(--kds-field-highlight-label);
6832
+ }
6833
+
6834
+ /* The header already supplies the gap — the first field must not add its own */
6835
+ .kds-theme-root .kds-field-highlight > .kds-field-highlight-header + .kds-field-group,
6836
+ .kds-theme-root .kds-field-highlight > .kds-field-group:first-child {
6837
+ margin-block-start: 0;
6838
+ }
6839
+
6840
+
6369
6841
  /* ========================================
6370
6842
  PAYMENT FLOW — DOMAIN COMPONENTS
6371
6843
  Invoice header, KV grid, dividers,
@@ -6615,6 +7087,16 @@
6615
7087
  color: var(--kds-color-success-main);
6616
7088
  }
6617
7089
 
7090
+ /* Sufijo inline del monto, ej. "$25.000 por cargo" */
7091
+ .kds-theme-root .kds-invoice-amount small {
7092
+ /* Spec kw-2: 14px / 700 / ls 0.4 — la altura de linea la da el propio monto (inline). */
7093
+ font-size: var(--kds-font-size-sm);
7094
+ font-weight: var(--kds-font-weight-bold);
7095
+ letter-spacing: var(--kds-letter-spacing-wide);
7096
+ color: var(--kds-color-text-secondary);
7097
+ margin-left: var(--kds-spacing-0-5);
7098
+ }
7099
+
6618
7100
  .kds-theme-root .kds-invoice-code {
6619
7101
  font-family: var(--kds-font-family-mono);
6620
7102
  font-size: var(--kds-font-size-xs);
@@ -6646,8 +7128,6 @@
6646
7128
  place-items: center;
6647
7129
  color: #fff;
6648
7130
  flex-shrink: 0;
6649
- /* Clip the slightly-oversized logo (see `.kds-invoice-merchant img`) to the
6650
- rounded square so it can fully cover the deep-purple background. */
6651
7131
  overflow: hidden;
6652
7132
  }
6653
7133
 
@@ -6661,6 +7141,12 @@
6661
7141
  color: var(--kds-color-text-primary);
6662
7142
  }
6663
7143
 
7144
+ /* Neutro oscuro para logos claros (detección de luminancia — KTUF-204). */
7145
+ .kds-theme-root .kds-invoice-merchant-neutral.dark {
7146
+ background: var(--kds-color-gray-800);
7147
+ border-color: var(--kds-color-gray-700);
7148
+ }
7149
+
6664
7150
  .kds-theme-root .kds-invoice-merchant.initials {
6665
7151
  font-weight: 700;
6666
7152
  font-size: 11px;
@@ -6668,13 +7154,12 @@
6668
7154
  }
6669
7155
 
6670
7156
  .kds-theme-root .kds-invoice-merchant img {
6671
- /* Slightly larger than the container (+2px, centered by the grid) so the
6672
- logo overflows under the parent's rounded clip and the deep-purple
6673
- background never peeks through at the corners when the logo shrinks. */
6674
- width: calc(100% + 2px);
6675
- height: calc(100% + 2px);
6676
- object-fit: cover;
6677
- border-radius: var(--kds-radius-md);
7157
+ /* `contain` sobre el fondo neutro: el logo se muestra completo y las
7158
+ transparencias no quedan sobre el color de marca (KTUF-204). */
7159
+ width: 100%;
7160
+ height: 100%;
7161
+ object-fit: contain;
7162
+ padding: var(--kds-spacing-0-5);
6678
7163
  }
6679
7164
 
6680
7165
  /* -- Card Title -- */
@@ -6684,11 +7169,29 @@
6684
7169
  line-height: 1.5;
6685
7170
  letter-spacing: -0.31px;
6686
7171
  color: var(--kds-color-text-primary);
6687
- /* sin !important: no hay regla de margin-bottom para h1 en BeerCSS que competir, y así un
6688
- consumidor puede anularlo (p.ej. FormTitle dentro de un Stack que ya da el espacio). */
7172
+ /* sin !important, para que un consumidor pueda anularlo (p.ej. FormTitle dentro de un
7173
+ Stack que ya da el espacio). Ojo: sobre un heading este margen NO llega a aplicarse
7174
+ —el reset `:where(hN)` fija margin-block-end con !important desde el token y gana—,
7175
+ así que sólo surte efecto cuando el título no es un heading. Para recuperar la
7176
+ separación en un heading está el modificador opt-in .kds-card-title--spaced. */
6689
7177
  margin-bottom: var(--kds-spacing-2);
6690
7178
  }
6691
7179
 
7180
+ /* Opt-in spacing modifier (additive — do NOT change default 0 de los headings).
7181
+ `:where(hN)` resetea margin-block-end con !important a partir de un token, así que un
7182
+ margin-bottom normal no alcanza: hay que redefinir el token en el propio elemento, igual
7183
+ que hace .kds-status-block-title. Se cubren los seis niveles porque la clase no impone cuál
7184
+ usar. Es opt-in a propósito: aplicarlo por defecto cambiaría el espaciado de todos los
7185
+ consumidores que hoy ven 0. */
7186
+ .kds-theme-root .kds-card-title--spaced {
7187
+ --kds-typography-h1-margin-block-end: var(--kds-spacing-2);
7188
+ --kds-typography-h2-margin-block-end: var(--kds-spacing-2);
7189
+ --kds-typography-h3-margin-block-end: var(--kds-spacing-2);
7190
+ --kds-typography-h4-margin-block-end: var(--kds-spacing-2);
7191
+ --kds-typography-h5-margin-block-end: var(--kds-spacing-2);
7192
+ --kds-typography-h6-margin-block-end: var(--kds-spacing-2);
7193
+ }
7194
+
6692
7195
  /* Opt-in size modifiers (additive — do NOT change default 16/600) */
6693
7196
  .kds-theme-root .kds-card-title--lg {
6694
7197
  font-size: var(--kds-font-size-xl); /* 20px */
@@ -6730,6 +7233,31 @@
6730
7233
  text-overflow: ellipsis;
6731
7234
  }
6732
7235
 
7236
+ /* Dark: these primary-content texts use absolute gray-800/900 (near-black in
7237
+ both modes) — switch to the adaptive text token so they read on dark cards.
7238
+ Covers the invoice amount ($X.XXX), kv values (PAGO A / ASUNTO) and the
7239
+ other gray-800 body texts. */
7240
+ .kds-theme-root [data-theme="dark"] .kds-invoice-amount,
7241
+ .kds-theme-root [data-theme="dark"] .kds-kv dd,
7242
+ .kds-theme-root [data-theme="dark"] .kds-text-value,
7243
+ .kds-theme-root [data-theme="dark"] .kds-share-copy {
7244
+ color: var(--kds-color-text-primary);
7245
+ }
7246
+
7247
+ /* -- Summary panel --
7248
+ Recuadro de datos del pago en pantallas de resultado: contenido en columna
7249
+ (gap spacing-2, típicamente pares kv) dentro de un borde sutil. */
7250
+ .kds-theme-root .kds-summary-panel {
7251
+ display: flex;
7252
+ flex-direction: column;
7253
+ gap: var(--kds-spacing-2);
7254
+ width: 100%;
7255
+ padding: var(--kds-spacing-2);
7256
+ border: var(--kds-border-width-sm) solid var(--kds-color-border-default);
7257
+ border-radius: var(--kds-radius-card);
7258
+ text-align: left;
7259
+ }
7260
+
6733
7261
  /* -- Dividers -- */
6734
7262
  .kds-theme-root .kds-hr {
6735
7263
  height: 1px;
@@ -6915,8 +7443,6 @@
6915
7443
  .kds-theme-root a.kds-btn-warning:active:not(:disabled),
6916
7444
  .kds-theme-root a.kds-btn-warning:focus-visible:not(:disabled) {
6917
7445
  background: var(--kds-color-warning-dark);
6918
- outline: 2px solid var(--kds-color-warning-main);
6919
- outline-offset: 2px;
6920
7446
  }
6921
7447
 
6922
7448
  .kds-theme-root button.kds-btn-warning:disabled,
@@ -6948,8 +7474,6 @@
6948
7474
  .kds-theme-root a.kds-btn-error:active:not(:disabled),
6949
7475
  .kds-theme-root a.kds-btn-error:focus-visible:not(:disabled) {
6950
7476
  background: var(--kds-color-error-dark);
6951
- outline: 2px solid var(--kds-color-error-main);
6952
- outline-offset: 2px;
6953
7477
  }
6954
7478
 
6955
7479
  .kds-theme-root button.kds-btn-error:disabled,
@@ -7075,6 +7599,25 @@
7075
7599
  fill: none;
7076
7600
  }
7077
7601
 
7602
+ /* BeerCSS fuerza fill:currentcolor en todo svg, pisando el atributo de
7603
+ presentación; un SVG que declara fill="none" (ilustraciones de trazo)
7604
+ debe conservarlo. */
7605
+ .kds-theme-root svg[fill='none'] {
7606
+ fill: none;
7607
+ }
7608
+
7609
+ /* -- Bottom sheet centered content --
7610
+ Contenido escueto centrado verticalmente con altura mínima estable, para que
7611
+ el sheet no encoja cuando la vista tiene pocos elementos (p.ej. drawer de
7612
+ autorización: título + ilustración + timer). */
7613
+ .kds-theme-root .kds-bottom-sheet-centered-content {
7614
+ display: flex;
7615
+ flex-direction: column;
7616
+ align-items: center;
7617
+ justify-content: center;
7618
+ min-height: var(--kds-bottom-sheet-content-min-height, 21rem);
7619
+ }
7620
+
7078
7621
  /* -- Bottom sheet description (subtle / smaller) -- */
7079
7622
  .kds-theme-root .kds-bottom-sheet-description-subtle {
7080
7623
  color: var(--kds-color-text-secondary);
@@ -7253,8 +7796,10 @@
7253
7796
  Desktop (min-width: 768px) restores padding + full border-radius. */
7254
7797
  .kds-theme-root .kds-payment-flow .kds-card-elevated {
7255
7798
  margin-top: 0;
7256
- padding-top: 0;
7257
- padding-bottom: 0;
7799
+ /* Vertical > lateral: la card del flujo respira arriba/abajo (spacing-3)
7800
+ manteniendo el padding lateral del base (spacing-2 / spacing-3 mobile). */
7801
+ padding-top: var(--kds-spacing-3);
7802
+ padding-bottom: var(--kds-spacing-3);
7258
7803
  }
7259
7804
 
7260
7805
  /* Reset BeerCSS sibling margin on form/section inside payment cards.
@@ -7339,11 +7884,6 @@
7339
7884
  width: 100%;
7340
7885
  }
7341
7886
 
7342
- .kds-theme-root .kds-payment-flow .kds-card-elevated {
7343
- padding-top: var(--kds-spacing-2);
7344
- padding-bottom: var(--kds-spacing-2);
7345
- }
7346
-
7347
7887
  /* Invoice sticky card padding (mobile).
7348
7888
  Top: estático 12px. Bottom: progresivo 16px (expandido, = desktop) → 8px (colapsado).
7349
7889
  El padding-bottom animado se reduce al colapsar — sin depender de que el clip-path
@@ -7359,9 +7899,8 @@
7359
7899
 
7360
7900
  }
7361
7901
 
7362
- /* Desktop: restore card padding and full border-radius on invoice sticky */
7902
+ /* Desktop: restore sticky header padding and full border-radius on invoice sticky */
7363
7903
  @media (min-width: 768px) {
7364
- .kds-theme-root .kds-payment-flow .kds-card-elevated,
7365
7904
  .kds-theme-root .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
7366
7905
  padding-top: var(--kds-spacing-2);
7367
7906
  padding-bottom: var(--kds-spacing-2);
@@ -7465,6 +8004,28 @@
7465
8004
  background: rgba(255, 255, 255, .08);
7466
8005
  }
7467
8006
 
8007
+ /* Icon-only arrows: kill the BeerCSS button active/focus ring (stray halo). */
8008
+ .kds-theme-root .kds-proto-nav-arrow:active,
8009
+ .kds-theme-root .kds-proto-nav-arrow:focus,
8010
+ .kds-theme-root .kds-proto-nav-arrow:focus-visible {
8011
+ outline: none;
8012
+ border: 0;
8013
+ box-shadow: none;
8014
+ }
8015
+
8016
+ /* Dark: the pill inverts to a LIGHT surface (bg = text-primary = white), so
8017
+ its contents need dark ink — the white-alpha tokens above become invisible. */
8018
+ .kds-theme-root [data-theme="dark"] .kds-proto-nav-label {
8019
+ color: var(--kds-color-gray-500);
8020
+ }
8021
+ .kds-theme-root [data-theme="dark"] .kds-proto-nav-arrow {
8022
+ color: var(--kds-color-gray-600);
8023
+ }
8024
+ .kds-theme-root [data-theme="dark"] .kds-proto-nav-arrow:hover {
8025
+ color: var(--kds-color-gray-900);
8026
+ background: rgba(0, 0, 0, .08);
8027
+ }
8028
+
7468
8029
  /* Tweaks panel — floating config panel */
7469
8030
  .kds-theme-root .kds-proto-tweaks {
7470
8031
  position: fixed;
@@ -7665,6 +8226,19 @@
7665
8226
  display: none;
7666
8227
  }
7667
8228
 
8229
+ /* Icon-only close: kill the BeerCSS button active/focus ring (stray border). */
8230
+ .kds-theme-root .kds-bank-modal-close:active,
8231
+ .kds-theme-root .kds-bank-modal-close:focus,
8232
+ .kds-theme-root .kds-bank-modal-close:focus-visible {
8233
+ outline: none;
8234
+ border: 0;
8235
+ box-shadow: none;
8236
+ }
8237
+
8238
+ .kds-theme-root .kds-bank-modal-close:hover {
8239
+ background: var(--kds-color-action-hover);
8240
+ }
8241
+
7668
8242
  /* Search field reutilizable (standalone o dentro del KdsBankModal). */
7669
8243
  .kds-theme-root .kds-search-field {
7670
8244
  width: 100%;
@@ -7995,6 +8569,13 @@
7995
8569
  opacity: 1;
7996
8570
  }
7997
8571
 
8572
+ /* Dark: success-dark text is near-invisible on the dark translucent success
8573
+ surface — use the alert success text token (light green in dark). */
8574
+ .kds-theme-root [data-theme="dark"] .kds-copyable-table-row.copied .kds-value,
8575
+ .kds-theme-root [data-theme="dark"] .kds-copyable-table-row.copied .kds-value::after {
8576
+ color: var(--kds-alert-success-text);
8577
+ }
8578
+
7998
8579
  /* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
7999
8580
  activar hover. Dura lo mismo que la transición (~300ms) y se aplica
8000
8581
  desde React tras quitar `.copied`. */
@@ -8085,6 +8666,15 @@
8085
8666
  border-color: var(--kds-color-success-border-light);
8086
8667
  }
8087
8668
 
8669
+ /* Dark: lighten the "Datos copiados" text/border on the dark success surface. */
8670
+ .kds-theme-root [data-theme="dark"] button.kds-copy-all-btn.copied,
8671
+ .kds-theme-root [data-theme="dark"] button.kds-copy-all-btn.copied:hover,
8672
+ .kds-theme-root [data-theme="dark"] a.kds-copy-all-btn.copied,
8673
+ .kds-theme-root [data-theme="dark"] a.kds-copy-all-btn.copied:hover {
8674
+ color: var(--kds-alert-success-text);
8675
+ border-color: var(--kds-alert-success-border);
8676
+ }
8677
+
8088
8678
  /* ========================================
8089
8679
  SECTION NOTE (.kds-section-note)
8090
8680
  Lightweight inline note for contextual caveats.
@@ -8119,6 +8709,17 @@
8119
8709
  .kds-theme-root .kds-section-note.kds-error { color: var(--kds-color-error-dark); }
8120
8710
  .kds-theme-root .kds-section-note.kds-error > i { color: var(--kds-color-error-dark); }
8121
8711
 
8712
+ /* Dark: the semantic *-dark shades are near-invisible on the dark page bg —
8713
+ use the alert *-text tokens (light shades in dark). Base note is warning. */
8714
+ .kds-theme-root [data-theme="dark"] .kds-section-note,
8715
+ .kds-theme-root [data-theme="dark"] .kds-section-note > i { color: var(--kds-alert-warning-text); }
8716
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-info,
8717
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-info > i { color: var(--kds-alert-info-text); }
8718
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-success,
8719
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-success > i { color: var(--kds-alert-success-text); }
8720
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-error,
8721
+ .kds-theme-root [data-theme="dark"] .kds-section-note.kds-error > i { color: var(--kds-alert-error-text); }
8722
+
8122
8723
  /* ========================================
8123
8724
  INFO TOOLTIP (.kds-info-tip)
8124
8725
  Inline info button with hover/click tooltip bubble.
@@ -8426,6 +9027,175 @@
8426
9027
  .kds-theme-root .kds-col-lg-12 { grid-area: auto/span 12; }
8427
9028
  }
8428
9029
 
9030
+ /* === Form icon chip ================================================== */
9031
+ /* Chip cuadrado con el icono del formulario (SecureForm, headers OIDC). */
9032
+
9033
+ .kds-theme-root .kds-form-icon-container {
9034
+ align-items: center;
9035
+ align-self: stretch;
9036
+ display: flex;
9037
+ flex-direction: column;
9038
+ gap: var(--kds-spacing-1);
9039
+ justify-content: center;
9040
+ padding: 0 var(--kds-spacing-2);
9041
+ }
9042
+
9043
+ .kds-theme-root .kds-form-icon-box {
9044
+ align-items: center;
9045
+ background: var(--kds-color-background-brand-subtle, #f0f0fa);
9046
+ border-radius: var(--kds-radius-md);
9047
+ display: flex;
9048
+ height: 52px;
9049
+ justify-content: center;
9050
+ padding: var(--kds-spacing-1);
9051
+ width: 52px;
9052
+ }
9053
+
9054
+ .kds-theme-root .kds-form-icon-box .kds-form-icon,
9055
+ .kds-theme-root .kds-form-icon-box > img,
9056
+ .kds-theme-root .kds-form-icon-box > svg {
9057
+ aspect-ratio: 1 / 1;
9058
+ flex-shrink: 0;
9059
+ height: 32px;
9060
+ width: 32px;
9061
+ }
9062
+
9063
+ @media (min-width: 600px) {
9064
+ .kds-theme-root .kds-form-icon-box {
9065
+ height: 56px;
9066
+ width: 56px;
9067
+ }
9068
+
9069
+ .kds-theme-root .kds-form-icon-box .kds-form-icon,
9070
+ .kds-theme-root .kds-form-icon-box > img,
9071
+ .kds-theme-root .kds-form-icon-box > svg {
9072
+ height: 30px;
9073
+ width: 30px;
9074
+ }
9075
+ }
9076
+
9077
+ @media (min-width: 900px) {
9078
+ .kds-theme-root .kds-form-icon-box {
9079
+ height: 60px;
9080
+ width: 60px;
9081
+ }
9082
+
9083
+ .kds-theme-root .kds-form-icon-box .kds-form-icon,
9084
+ .kds-theme-root .kds-form-icon-box > img,
9085
+ .kds-theme-root .kds-form-icon-box > svg {
9086
+ height: 32px;
9087
+ width: 32px;
9088
+ }
9089
+ }
9090
+
9091
+ /* === Accordion (componente KdsAccordion) ============================= */
9092
+ /* El bundle solo estilaba .kds-contract-accordion; estas son las clases
9093
+ que emite el componente React (details/summary con chevron propio). */
9094
+
9095
+ .kds-theme-root .kds-accordion {
9096
+ border: 1px solid var(--kds-accordion-border);
9097
+ border-radius: var(--kds-radius-md);
9098
+ overflow: hidden;
9099
+ }
9100
+
9101
+ .kds-theme-root .kds-accordion + .kds-accordion {
9102
+ margin-top: var(--kds-spacing-1);
9103
+ }
9104
+
9105
+ .kds-theme-root .kds-accordion-summary {
9106
+ align-items: center;
9107
+ background: var(--kds-accordion-header-bg);
9108
+ color: var(--kds-color-text-primary);
9109
+ cursor: pointer;
9110
+ display: flex;
9111
+ font-weight: var(--kds-font-weight-semibold);
9112
+ justify-content: space-between;
9113
+ list-style: none;
9114
+ padding: var(--kds-spacing-1) var(--kds-spacing-2);
9115
+ transition: background 0.2s ease;
9116
+ }
9117
+
9118
+ .kds-theme-root .kds-accordion-summary::-webkit-details-marker {
9119
+ display: none;
9120
+ }
9121
+
9122
+ .kds-theme-root .kds-accordion-summary:hover {
9123
+ background: var(--kds-color-background-elevated);
9124
+ }
9125
+
9126
+ .kds-theme-root .kds-accordion-summary > .material-symbols-outlined {
9127
+ transition: transform 0.3s ease;
9128
+ }
9129
+
9130
+ .kds-theme-root .kds-accordion[open] > .kds-accordion-summary > .material-symbols-outlined {
9131
+ transform: rotate(180deg);
9132
+ }
9133
+
9134
+ .kds-theme-root .kds-accordion[open] > .kds-accordion-summary {
9135
+ background: var(--kds-accordion-bg-open);
9136
+ border-bottom: 1px solid var(--kds-accordion-border);
9137
+ }
9138
+
9139
+ .kds-theme-root .kds-accordion-details {
9140
+ background: var(--kds-accordion-bg-open);
9141
+ color: var(--kds-color-text-secondary);
9142
+ font-size: var(--kds-font-size-sm);
9143
+ line-height: var(--kds-line-height-relaxed);
9144
+ padding: var(--kds-spacing-1) var(--kds-spacing-2);
9145
+ }
9146
+
9147
+ .kds-theme-root .kds-accordion-details ul,
9148
+ .kds-theme-root .kds-accordion-details ol {
9149
+ margin: 0;
9150
+ padding-inline-start: var(--kds-spacing-2);
9151
+ }
9152
+
9153
+ /* === Display utilities ================================================ */
9154
+
9155
+ .kds-theme-root .kds-block {
9156
+ display: block;
9157
+ }
9158
+
9159
+ .kds-theme-root .kds-inline {
9160
+ display: inline;
9161
+ }
9162
+
9163
+ .kds-theme-root .kds-inline-block {
9164
+ display: inline-block;
9165
+ }
9166
+
9167
+ .kds-theme-root .kds-pre-wrap {
9168
+ white-space: pre-wrap;
9169
+ }
9170
+
9171
+ /* -- Empty State (sin resultados en búsquedas/listas filtradas) -- */
9172
+ .kds-theme-root .kds-empty-state {
9173
+ display: flex;
9174
+ flex-direction: column;
9175
+ align-items: center;
9176
+ text-align: center;
9177
+ gap: var(--kds-spacing-1);
9178
+ }
9179
+
9180
+ .kds-theme-root .kds-empty-state > i {
9181
+ /* La caja del material-symbol sigue al font-size (1em). */
9182
+ font-size: var(--kds-font-size-4xl);
9183
+ color: var(--kds-color-text-secondary);
9184
+ }
9185
+
9186
+ /* Textos agrupados con el mismo ritmo compacto que kds-secure-loader-text. */
9187
+ .kds-theme-root .kds-empty-state-text {
9188
+ display: flex;
9189
+ flex-direction: column;
9190
+ gap: var(--kds-spacing-0-25);
9191
+ }
9192
+
9193
+ .kds-theme-root .kds-empty-state-text p {
9194
+ /* BeerCSS aplica margin-block-start !important a los <p>; hay que igualarlo. */
9195
+ margin: 0 !important;
9196
+ line-height: var(--kds-line-height-snug);
9197
+ }
9198
+
8429
9199
 
8430
9200
  /* coexistence: scope wrapper must not impose layout on the host */
8431
9201
  .kds-theme-root{display:contents}