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