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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/beercss/arch.svg +1 -0
  2. package/dist/beercss/arrow.svg +1 -0
  3. package/dist/beercss/boom.svg +1 -0
  4. package/dist/beercss/bun.svg +1 -0
  5. package/dist/beercss/burst.svg +1 -0
  6. package/dist/beercss/circle.svg +1 -0
  7. package/dist/beercss/clamshell.svg +1 -0
  8. package/dist/beercss/diamond.svg +1 -0
  9. package/dist/beercss/fan.svg +1 -0
  10. package/dist/beercss/flower.svg +1 -0
  11. package/dist/beercss/gem.svg +1 -0
  12. package/dist/beercss/ghost-ish.svg +1 -0
  13. package/dist/beercss/heart.svg +1 -0
  14. package/dist/beercss/khipu-beercss.css +868 -98
  15. package/dist/beercss/khipu-beercss.js +75 -0
  16. package/dist/beercss/khipu-beercss.min.css +1 -1
  17. package/dist/beercss/khipu-beercss.min.js +1 -1
  18. package/dist/beercss/khipu-beercss.scoped.css +868 -98
  19. package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
  20. package/dist/beercss/leaf-clover4.svg +1 -0
  21. package/dist/beercss/leaf-clover8.svg +1 -0
  22. package/dist/beercss/loading-indicator.svg +1 -0
  23. package/dist/beercss/material-symbols-outlined.woff2 +0 -0
  24. package/dist/beercss/material-symbols-rounded.woff2 +0 -0
  25. package/dist/beercss/material-symbols-sharp.woff2 +0 -0
  26. package/dist/beercss/material-symbols-subset.woff2 +0 -0
  27. package/dist/beercss/metadata.json +5 -5
  28. package/dist/beercss/oval.svg +1 -0
  29. package/dist/beercss/pentagon.svg +1 -0
  30. package/dist/beercss/pill.svg +1 -0
  31. package/dist/beercss/pixel-circle.svg +1 -0
  32. package/dist/beercss/pixel-triangle.svg +1 -0
  33. package/dist/beercss/puffy-diamond.svg +1 -0
  34. package/dist/beercss/puffy.svg +1 -0
  35. package/dist/beercss/semicircle.svg +1 -0
  36. package/dist/beercss/sided-cookie12.svg +1 -0
  37. package/dist/beercss/sided-cookie4.svg +1 -0
  38. package/dist/beercss/sided-cookie6.svg +1 -0
  39. package/dist/beercss/sided-cookie7.svg +1 -0
  40. package/dist/beercss/sided-cookie9.svg +1 -0
  41. package/dist/beercss/slanted.svg +1 -0
  42. package/dist/beercss/soft-boom.svg +1 -0
  43. package/dist/beercss/soft-burst.svg +1 -0
  44. package/dist/beercss/square.svg +1 -0
  45. package/dist/beercss/sunny.svg +1 -0
  46. package/dist/beercss/triangle.svg +1 -0
  47. package/dist/beercss/very-sunny.svg +1 -0
  48. package/dist/beercss/wavy-circle.svg +1 -0
  49. package/dist/beercss/wavy.svg +1 -0
  50. package/dist/index.d.mts +128 -6
  51. package/dist/index.d.ts +128 -6
  52. package/dist/index.js +394 -156
  53. package/dist/index.mjs +373 -146
  54. package/package.json +3 -2
package/dist/beercss/khipu-beercss.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:11:54.646Z
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);
721
838
  }
722
839
 
723
840
  /* ========================================
724
- Force Light Mode Only
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.
725
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 */
875
+ }
726
876
 
727
- /* Force light mode - disable dark mode */
877
+ /* ========================================
878
+ Color Scheme (explicit opt-in to dark)
879
+ ======================================== */
880
+
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;
1233
+ }
1234
+
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);
1046
1244
  }
1047
1245
 
1048
- button.kds-btn > .kds-icon > i,
1049
- a.kds-btn > .kds-icon > i {
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);
@@ -4742,12 +5063,25 @@ dialog#surveyModal button.circle {
4742
5063
  text-transform: uppercase;
4743
5064
  }
4744
5065
 
4745
- /* 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. */
4746
5080
  .kds-text-value {
4747
5081
  font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
4748
5082
  font-size: var(--kds-font-size-sm);
4749
5083
  font-weight: var(--kds-font-weight-semibold);
4750
- line-height: var(--kds-line-height-relaxed);
5084
+ line-height: var(--kds-line-height-tight);
4751
5085
  color: var(--kds-color-gray-800);
4752
5086
  }
4753
5087
 
@@ -4772,6 +5106,7 @@ dialog#surveyModal button.circle {
4772
5106
  }
4773
5107
 
4774
5108
  .kds-text-link {
5109
+ cursor: pointer;
4775
5110
  font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
4776
5111
  font-size: inherit;
4777
5112
  font-weight: var(--kds-font-weight-medium, 500);
@@ -4815,13 +5150,13 @@ dialog#surveyModal button.circle {
4815
5150
 
4816
5151
  /* Color utilities (solo para casos específicos de demo) */
4817
5152
  .kds-text-warning {
4818
- color: #92400E;
5153
+ color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
4819
5154
  }
4820
5155
 
4821
5156
  .kds-list-warning {
4822
5157
  margin: 0;
4823
5158
  padding-left: var(--kds-spacing-5);
4824
- color: #78350F;
5159
+ color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
4825
5160
  }
4826
5161
 
4827
5162
  /* ========================================
@@ -4879,7 +5214,25 @@ dialog#surveyModal button.circle {
4879
5214
  flex-shrink: 0;
4880
5215
  }
4881
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
+
4882
5234
  /* Gap utilities */
5235
+ .kds-gap-0-25 { gap: var(--kds-spacing-0-25); }
4883
5236
  .kds-gap-1 { gap: var(--kds-spacing-1); }
4884
5237
  .kds-gap-2 { gap: var(--kds-spacing-2); }
4885
5238
  .kds-gap-3 { gap: var(--kds-spacing-3); }
@@ -4979,6 +5332,30 @@ dialog#surveyModal button.circle {
4979
5332
  color: var(--kds-color-primary-dark);
4980
5333
  }
4981
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
+
4982
5359
  /* ========================================
4983
5360
  DIVIDER WITH TEXT
4984
5361
  Separator with optional text
@@ -5468,6 +5845,26 @@ dialog#surveyModal button.circle {
5468
5845
  background: var(--kds-color-hover-bg);
5469
5846
  }
5470
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
+
5471
5868
  .kds-bank-row-logo {
5472
5869
  width: 40px;
5473
5870
  height: 40px;
@@ -5525,7 +5922,7 @@ dialog#surveyModal button.circle {
5525
5922
  display: flex;
5526
5923
  gap: var(--kds-spacing-1-25);
5527
5924
  padding: var(--kds-spacing-2);
5528
- background: #FFFFFF;
5925
+ background: var(--kds-color-background-default); /* #FFF light / #181818 dark */
5529
5926
  border-top: 1px solid var(--kds-color-divider);
5530
5927
  padding-bottom: calc(var(--kds-spacing-2) + env(safe-area-inset-bottom));
5531
5928
  z-index: 100;
@@ -5575,14 +5972,17 @@ dialog#surveyModal button.circle {
5575
5972
  background-color var(--kds-transition-shorter) ease;
5576
5973
  }
5577
5974
 
5578
- /* Keep the circle in EVERY interaction state. Uses `button.kds-fab` (element + class) to
5579
- out-specify BeerCSS's base `button`/`button:active` rules — same trick as `.kds-btn`. */
5580
- button.kds-fab,
5581
- button.kds-fab:hover,
5582
- button.kds-fab:active,
5583
- button.kds-fab:focus,
5584
- button.kds-fab:focus-visible {
5585
- 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;
5586
5986
  background: var(--kds-color-background-paper);
5587
5987
  }
5588
5988
 
@@ -5595,10 +5995,7 @@ button.kds-fab:active:not(:disabled) {
5595
5995
  transform: translateY(var(--kds-spacing-0-25));
5596
5996
  }
5597
5997
 
5598
- button.kds-fab:focus-visible {
5599
- outline: var(--kds-spacing-0-25) solid var(--kds-color-primary-main);
5600
- outline-offset: var(--kds-spacing-0-25);
5601
- }
5998
+
5602
5999
 
5603
6000
  .kds-fab > i.material-symbols-outlined {
5604
6001
  font-size: var(--kds-spacing-button-icon-size);
@@ -5881,6 +6278,11 @@ button.kds-fab:focus-visible {
5881
6278
  height: 1.25em;
5882
6279
  min-width: 0;
5883
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;
5884
6286
  transition: transform var(--kds-transition-shorter, 0.2s);
5885
6287
  }
5886
6288
 
@@ -6027,6 +6429,16 @@ button.kds-fab:focus-visible {
6027
6429
  padding: var(--kds-spacing-2) 0;
6028
6430
  }
6029
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
+
6030
6442
  .kds-status-block-icon {
6031
6443
  width: var(--kds-status-icon-size);
6032
6444
  height: var(--kds-status-icon-size);
@@ -6044,7 +6456,7 @@ button.kds-fab:focus-visible {
6044
6456
 
6045
6457
  .kds-status-block-title {
6046
6458
  font-size: var(--kds-font-size-xl);
6047
- font-weight: var(--kds-font-weight-bold);
6459
+ font-weight: var(--kds-font-weight-semibold);
6048
6460
  color: var(--kds-color-text-primary);
6049
6461
  margin: 0 0 var(--kds-spacing-1);
6050
6462
  /* El reset global :where(h2) usa estas vars con !important; así se overridea. */
@@ -6053,7 +6465,8 @@ button.kds-fab:focus-visible {
6053
6465
 
6054
6466
  .kds-status-block-description {
6055
6467
  font-size: var(--kds-font-size-sm);
6056
- 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);
6057
6470
  margin: 0;
6058
6471
  /* !important: anula el auto-espaciado de hermanos de BeerCSS
6059
6472
  (margin-block-start: 1rem, especificidad 0,5,1 imposible de igualar).
@@ -6365,6 +6778,65 @@ button.kds-fab:focus-visible {
6365
6778
  }
6366
6779
 
6367
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
+
6368
6840
  /* ========================================
6369
6841
  PAYMENT FLOW — DOMAIN COMPONENTS
6370
6842
  Invoice header, KV grid, dividers,
@@ -6614,6 +7086,16 @@ div.kds-invoice-header,
6614
7086
  color: var(--kds-color-success-main);
6615
7087
  }
6616
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
+
6617
7099
  .kds-invoice-code {
6618
7100
  font-family: var(--kds-font-family-mono);
6619
7101
  font-size: var(--kds-font-size-xs);
@@ -6645,8 +7127,6 @@ div.kds-invoice-header,
6645
7127
  place-items: center;
6646
7128
  color: #fff;
6647
7129
  flex-shrink: 0;
6648
- /* Clip the slightly-oversized logo (see `.kds-invoice-merchant img`) to the
6649
- rounded square so it can fully cover the deep-purple background. */
6650
7130
  overflow: hidden;
6651
7131
  }
6652
7132
 
@@ -6660,6 +7140,12 @@ div.kds-invoice-header,
6660
7140
  color: var(--kds-color-text-primary);
6661
7141
  }
6662
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
+
6663
7149
  .kds-invoice-merchant.initials {
6664
7150
  font-weight: 700;
6665
7151
  font-size: 11px;
@@ -6667,13 +7153,12 @@ div.kds-invoice-header,
6667
7153
  }
6668
7154
 
6669
7155
  .kds-invoice-merchant img {
6670
- /* Slightly larger than the container (+2px, centered by the grid) so the
6671
- logo overflows under the parent's rounded clip and the deep-purple
6672
- background never peeks through at the corners when the logo shrinks. */
6673
- width: calc(100% + 2px);
6674
- height: calc(100% + 2px);
6675
- object-fit: cover;
6676
- 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);
6677
7162
  }
6678
7163
 
6679
7164
  /* -- Card Title -- */
@@ -6683,11 +7168,29 @@ div.kds-invoice-header,
6683
7168
  line-height: 1.5;
6684
7169
  letter-spacing: -0.31px;
6685
7170
  color: var(--kds-color-text-primary);
6686
- /* sin !important: no hay regla de margin-bottom para h1 en BeerCSS que competir, y así un
6687
- 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. */
6688
7176
  margin-bottom: var(--kds-spacing-2);
6689
7177
  }
6690
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
+
6691
7194
  /* Opt-in size modifiers (additive — do NOT change default 16/600) */
6692
7195
  .kds-card-title--lg {
6693
7196
  font-size: var(--kds-font-size-xl); /* 20px */
@@ -6729,6 +7232,31 @@ div.kds-invoice-header,
6729
7232
  text-overflow: ellipsis;
6730
7233
  }
6731
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
+
6732
7260
  /* -- Dividers -- */
6733
7261
  .kds-hr {
6734
7262
  height: 1px;
@@ -6914,8 +7442,6 @@ button.kds-btn-warning:focus-visible:not(:disabled),
6914
7442
  a.kds-btn-warning:active:not(:disabled),
6915
7443
  a.kds-btn-warning:focus-visible:not(:disabled) {
6916
7444
  background: var(--kds-color-warning-dark);
6917
- outline: 2px solid var(--kds-color-warning-main);
6918
- outline-offset: 2px;
6919
7445
  }
6920
7446
 
6921
7447
  button.kds-btn-warning:disabled,
@@ -6947,8 +7473,6 @@ button.kds-btn-error:focus-visible:not(:disabled),
6947
7473
  a.kds-btn-error:active:not(:disabled),
6948
7474
  a.kds-btn-error:focus-visible:not(:disabled) {
6949
7475
  background: var(--kds-color-error-dark);
6950
- outline: 2px solid var(--kds-color-error-main);
6951
- outline-offset: 2px;
6952
7476
  }
6953
7477
 
6954
7478
  button.kds-btn-error:disabled,
@@ -7074,6 +7598,25 @@ button.kds-btn-success::after {
7074
7598
  fill: none;
7075
7599
  }
7076
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
+
7077
7620
  /* -- Bottom sheet description (subtle / smaller) -- */
7078
7621
  .kds-bottom-sheet-description-subtle {
7079
7622
  color: var(--kds-color-text-secondary);
@@ -7252,8 +7795,10 @@ button.kds-btn-success::after {
7252
7795
  Desktop (min-width: 768px) restores padding + full border-radius. */
7253
7796
  .kds-payment-flow .kds-card-elevated {
7254
7797
  margin-top: 0;
7255
- padding-top: 0;
7256
- 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);
7257
7802
  }
7258
7803
 
7259
7804
  /* Reset BeerCSS sibling margin on form/section inside payment cards.
@@ -7338,11 +7883,6 @@ button.kds-btn-success::after {
7338
7883
  width: 100%;
7339
7884
  }
7340
7885
 
7341
- .kds-payment-flow .kds-card-elevated {
7342
- padding-top: var(--kds-spacing-2);
7343
- padding-bottom: var(--kds-spacing-2);
7344
- }
7345
-
7346
7886
  /* Invoice sticky card padding (mobile).
7347
7887
  Top: estático 12px. Bottom: progresivo 16px (expandido, = desktop) → 8px (colapsado).
7348
7888
  El padding-bottom animado se reduce al colapsar — sin depender de que el clip-path
@@ -7358,9 +7898,8 @@ button.kds-btn-success::after {
7358
7898
 
7359
7899
  }
7360
7900
 
7361
- /* Desktop: restore card padding and full border-radius on invoice sticky */
7901
+ /* Desktop: restore sticky header padding and full border-radius on invoice sticky */
7362
7902
  @media (min-width: 768px) {
7363
- .kds-payment-flow .kds-card-elevated,
7364
7903
  .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
7365
7904
  padding-top: var(--kds-spacing-2);
7366
7905
  padding-bottom: var(--kds-spacing-2);
@@ -7464,6 +8003,28 @@ button.kds-btn-success::after {
7464
8003
  background: rgba(255, 255, 255, .08);
7465
8004
  }
7466
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
+
7467
8028
  /* Tweaks panel — floating config panel */
7468
8029
  .kds-proto-tweaks {
7469
8030
  position: fixed;
@@ -7664,6 +8225,19 @@ button.kds-btn-success::after {
7664
8225
  display: none;
7665
8226
  }
7666
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
+
7667
8241
  /* Search field reutilizable (standalone o dentro del KdsBankModal). */
7668
8242
  .kds-search-field {
7669
8243
  width: 100%;
@@ -7994,6 +8568,13 @@ button.kds-btn-success::after {
7994
8568
  opacity: 1;
7995
8569
  }
7996
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
+
7997
8578
  /* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
7998
8579
  activar hover. Dura lo mismo que la transición (~300ms) y se aplica
7999
8580
  desde React tras quitar `.copied`. */
@@ -8084,6 +8665,15 @@ a.kds-copy-all-btn.copied:hover {
8084
8665
  border-color: var(--kds-color-success-border-light);
8085
8666
  }
8086
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
+
8087
8677
  /* ========================================
8088
8678
  SECTION NOTE (.kds-section-note)
8089
8679
  Lightweight inline note for contextual caveats.
@@ -8118,6 +8708,17 @@ a.kds-copy-all-btn.copied:hover {
8118
8708
  .kds-section-note.kds-error { color: var(--kds-color-error-dark); }
8119
8709
  .kds-section-note.kds-error > i { color: var(--kds-color-error-dark); }
8120
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
+
8121
8722
  /* ========================================
8122
8723
  INFO TOOLTIP (.kds-info-tip)
8123
8724
  Inline info button with hover/click tooltip bubble.
@@ -8425,3 +9026,172 @@ a.kds-copy-all-btn.copied:hover {
8425
9026
  .kds-col-lg-12 { grid-area: auto/span 12; }
8426
9027
  }
8427
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
+