@khipu/design-system 0.1.0-alpha.26 → 0.1.0-alpha.29

package/dist/beercss/khipu-beercss.css

@@ -4,191 +4,399 @@
 :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}
 
 
-/* Khipu Design System Tokens & BeerCSS Variable Mappings */
-/* Khipu Material Design 3 Brand Tokens
- * Design system tokens extracted from Figma Make prototype
- * Implements OKLch color system, Material Design 3 typography, and spacing system
+/* Core Design System Tokens (auto-generated from src/tokens/index.ts) */
+/**
+ * Khipu Design System - CSS Custom Properties
+ * Use these variables for runtime theming and CSS-based styling
+ *
+ * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
+ * Source: design-system/src/tokens/tokens.json
+ * Generated: 2026-03-26T19:18:15.487Z
+ *
+ * To regenerate:
+ *   cd design-system && npm run tokens:generate
  */
 
-/* ========================================
-   OKLch Color System (from Figma Make)
-   ======================================== */
+/* Font imports - must be at the top of the file */
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');
 
 :root {
-    /* === Primary Scale (Purple) === */
-    --kds-color-primary-50: oklch(96% 0.02 295);
-    --kds-color-primary-100: oklch(92% 0.04 295);
-    --kds-color-primary-200: oklch(84% 0.08 295);
-    --kds-color-primary-300: oklch(76% 0.12 295);
-    --kds-color-primary-400: oklch(68% 0.16 295);
-    --kds-color-primary-500: oklch(60% 0.20 295);
-    --kds-color-primary-600: oklch(52% 0.18 295);
-    --kds-color-primary-700: oklch(44% 0.16 295);
-    --kds-color-primary-800: oklch(36% 0.14 295);
-    --kds-color-primary-900: oklch(28% 0.12 295);
-
-    /* === Secondary Scale (Blue from Figma Make) === */
-    --kds-color-secondary-50: oklch(96% 0.02 240);
-    --kds-color-secondary-100: oklch(92% 0.04 240);
-    --kds-color-secondary-500: #3B82F6;  /* Figma Make Blue */
-    --kds-color-secondary-900: oklch(32% 0.12 240);
-
-    /* === Semantic Colors === */
-    --kds-color-success: #10B981;  /* Green (only for success/completed states) */
-    --kds-color-error: oklch(48% 0.20 28);     /* Red #D32F2F */
-    --kds-color-warning: oklch(72% 0.18 90);   /* Amber #ED6C02 */
-    --kds-color-info: oklch(60% 0.18 240);     /* Blue #0288D1 */
-
-    /* === Alert/Validation Backgrounds === */
-    --kds-alert-info-bg: #EFF6FF;      /* Light blue */
-    --kds-alert-warning-bg: #FFFBEB;   /* Light amber */
-    --kds-alert-success-bg: #ECFDF5;   /* Light green */
-    --kds-alert-error-bg: #FEF2F2;     /* Light red */
-
-    /* === Surface Colors === */
-    --kds-surface-base: #FFFFFF;
-    --kds-surface-paper: #FFFFFF;
-    --kds-surface-elevated: oklch(98% 0.01 295);
-    --kds-surface-background: #F5F6FA;  /* Main background from Figma Make */
-
-    /* === Border Colors === */
-    --kds-border-light: #DDD;
-    --kds-border-medium: #999;
-    --kds-border-dark: #666;
-
-    /* === Typography Scale (Material Design 3) === */
-    --kds-font-family-primary: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-
-    --kds-font-size-xs: 0.75rem;    /* 12px */
-    --kds-font-size-sm: 0.875rem;   /* 14px */
-    --kds-font-size-base: 1rem;     /* 16px */
-    --kds-font-size-lg: 1.125rem;   /* 18px */
-    --kds-font-size-xl: 1.25rem;    /* 20px */
-    --kds-font-size-2xl: 1.5rem;    /* 24px */
-    --kds-font-size-3xl: 2rem;      /* 32px */
-    --kds-font-size-4xl: 3rem;      /* 48px */
-
-    --kds-font-weight-regular: 400;
-    --kds-font-weight-medium: 500;
-    --kds-font-weight-semibold: 600;
-    --kds-font-weight-bold: 700;
-
-    /* === Spacing System (4px base grid) === */
-    --kds-spacing-1: 4px;
-    --kds-spacing-2: 8px;
-    --kds-spacing-3: 12px;
-    --kds-spacing-4: 16px;
-    --kds-spacing-5: 20px;
-    --kds-spacing-6: 24px;
-    --kds-spacing-8: 32px;
-    --kds-spacing-10: 40px;
-    --kds-spacing-12: 48px;
-    --kds-spacing-16: 64px;
-    --kds-spacing-20: 80px;
-
-    /* === Shadows (Material Design 3 Elevation) === */
-    --kds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
-    --kds-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
-    --kds-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
-    --kds-shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
-    --kds-shadow-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
-    --kds-shadow-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
-    --kds-shadow-elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
-    --kds-shadow-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
-
-    /* === Border Radius === */
-    --kds-radius-none: 0;
-    --kds-radius-sm: 4px;
-    --kds-radius-md: 8px;
-    --kds-radius-lg: 12px;
-    --kds-radius-xl: 16px;
-    --kds-radius-2xl: 20px;
-    --kds-radius-full: 9999px;
+  /* ==========================================================================
+     COLOR TOKENS
+     ========================================================================== */
+
+
+  /* Primary palette - Khipu brand */
+  --kds-color-primary-main: #8347AD;
+  --kds-color-primary-light: #A066C9;
+  --kds-color-primary-dark: #6A3A8C;
+  --kds-color-primary-contrast: #FFFFFF;
+  --kds-color-primary-hover: rgba(131, 71, 173, 0.04);
+  --kds-color-primary-selected: rgba(131, 71, 173, 0.08);
+  --kds-color-primary-focus: rgba(131, 71, 173, 0.12);
+  --kds-color-primary-focus-visible: rgba(131, 71, 173, 0.30);
+
+  /* Secondary palette */
+  --kds-color-secondary-main: #4CAF50;
+  --kds-color-secondary-light: #81C784;
+  --kds-color-secondary-dark: #388E3C;
+  --kds-color-secondary-contrast: #FFFFFF;
+
+  /* Semantic colors */
+  --kds-color-success-main: #2E7D32;
+  --kds-color-success-light: #4CAF50;
+  --kds-color-success-dark: #1B5E20;
+  --kds-color-warning-main: #ED6C02;
+  --kds-color-warning-light: #FF9800;
+  --kds-color-warning-dark: #E65100;
+  --kds-color-error-main: #D32F2F;
+  --kds-color-error-light: #EF5350;
+  --kds-color-error-dark: #C62828;
+  --kds-color-info-main: #0288D1;
+  --kds-color-info-light: #03A9F4;
+  --kds-color-info-dark: #01579B;
+
+  /* Text colors */
+  --kds-color-text-primary: rgba(0, 0, 0, 0.87);
+  --kds-color-text-secondary: rgba(0, 0, 0, 0.60);
+  --kds-color-text-disabled: rgba(0, 0, 0, 0.38);
+  --kds-color-text-hint: rgba(0, 0, 0, 0.38);
+
+  /* Background colors */
+  --kds-color-background-default: #FFFFFF;
+  --kds-color-background-paper: #FFFFFF;
+  --kds-color-background-elevated: #FAFAFA;
+
+  /* Action colors */
+  --kds-color-action-active: rgba(0, 0, 0, 0.56);
+  --kds-color-action-hover: rgba(0, 0, 0, 0.04);
+  --kds-color-action-selected: rgba(0, 0, 0, 0.08);
+  --kds-color-action-disabled: rgba(0, 0, 0, 0.38);
+  --kds-color-action-disabled-bg: rgba(0, 0, 0, 0.12);
+  --kds-color-action-focus: rgba(0, 0, 0, 0.12);
+
+  /* Divider */
+  --kds-color-divider: rgba(0, 0, 0, 0.12);
+
+  /* Input borders */
+  --kds-color-input-enabled-border: rgba(0, 0, 0, 0.23);
+  --kds-color-input-hover-border: rgba(0, 0, 0, 0.87);
+
+  /* Snackbar backgrounds */
+  --kds-snackbar-success-bg: rgba(46, 125, 50, 0.08);
+  --kds-snackbar-warning-bg: rgba(237, 108, 2, 0.08);
+  --kds-snackbar-error-bg: rgba(211, 47, 47, 0.08);
+  --kds-snackbar-info-bg: rgba(2, 136, 209, 0.08);
+
+  /* Alert backgrounds */
+  --kds-alert-info-bg: #EFF6FF;
+  --kds-alert-warning-bg: #FFFBEB;
+  --kds-alert-success-bg: #ECFDF5;
+  --kds-alert-error-bg: #FEF2F2;
+
+  /* ==========================================================================
+     TYPOGRAPHY TOKENS
+     ========================================================================== */
+
+
+  /* Font families */
+  --kds-font-family-primary: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --kds-font-family-secondary: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --kds-font-family-mono: "Roboto Mono", "SF Mono", "Monaco", monospace;
+
+  /* Font weights */
+  --kds-font-weight-regular: 400;
+  --kds-font-weight-medium: 500;
+  --kds-font-weight-semibold: 600;
+  --kds-font-weight-bold: 700;
+
+  /* Font sizes */
+  --kds-font-size-xs: 0.75rem;
+  --kds-font-size-sm: 0.875rem;
+  --kds-font-size-base: 1rem;
+  --kds-font-size-lg: 1.125rem;
+  --kds-font-size-xl: 1.25rem;
+  --kds-font-size-2xl: 1.5rem;
+  --kds-font-size-3xl: 1.875rem;
+  --kds-font-size-4xl: 2.25rem;
+
+  /* Line heights */
+  --kds-line-height-tight: 1.2;
+  --kds-line-height-snug: 1.375;
+  --kds-line-height-normal: 1.5;
+  --kds-line-height-relaxed: 1.66;
+
+  /* Letter spacing */
+  --kds-letter-spacing-normal: 0.15px;
+  --kds-letter-spacing-wide: 0.4px;
+  --kds-letter-spacing-wider: 0.46px;
+  --kds-letter-spacing-widest: 1px;
+
+  /* Button typography */
+  --kds-typography-button-font-size: 0.9375rem;
+  --kds-typography-button-font-weight: 500;
+  --kds-typography-button-line-height: 26px;
+  --kds-typography-button-letter-spacing: 0.46px;
+
+  /* ==========================================================================
+     SPACING TOKENS
+     ========================================================================== */
+
+  --kds-spacing-0: 0px;
+  --kds-spacing-1: 8px;
+  --kds-spacing-2: 16px;
+  --kds-spacing-3: 24px;
+  --kds-spacing-4: 32px;
+  --kds-spacing-5: 40px;
+  --kds-spacing-6: 48px;
+  --kds-spacing-7: 56px;
+  --kds-spacing-8: 64px;
+  --kds-spacing-9: 72px;
+  --kds-spacing-10: 80px;
+  --kds-spacing-11: 88px;
+  --kds-spacing-12: 96px;
+
+  /* Semantic spacing */
+  --kds-spacing-input-padding-y: 16px;
+  --kds-spacing-input-padding-x: 12px;
+  --kds-spacing-input-padding: 16px 12px;
+  --kds-spacing-button-padding-y: 8px;
+  --kds-spacing-button-padding-x: 22px;
+  --kds-spacing-button-padding: 8px 22px;
+  --kds-spacing-button-min-height: 50px;
+  --kds-spacing-button-icon-size: 20px;
+  --kds-spacing-sidebar-width: 280px;
+  --kds-spacing-sidebar-width-collapsed: 72px;
+  --kds-spacing-sidebar-width-mobile: 100%;
+  --kds-spacing-sidebar-header-padding: 16px;
+  --kds-spacing-sidebar-nav-item-padding-y: 8px;
+  --kds-spacing-sidebar-nav-item-padding-x: 12px;
+  --kds-spacing-sidebar-nav-item-margin-x: 12px;
+  --kds-spacing-sidebar-nav-item-gap: 12px;
+  --kds-spacing-sidebar-submenu-indent: 64px;
+  --kds-spacing-sidebar-icon-size: 24px;
+  --kds-spacing-sidebar-icon-container-size: 40px;
+  --kds-spacing-sidebar-label-padding-x: 24px;
+  --kds-spacing-sidebar-label-padding-y: 8px;
+  --kds-spacing-sidebar-label-margin-top: 16px;
+  --kds-spacing-sidebar-label-font-size: 11px;
+  --kds-spacing-sidebar-z-index: 100;
+  --kds-spacing-sidebar-z-index-mobile: 1000;
+  --kds-spacing-sidebar-transition: 0.2s;
+  --kds-spacing-sidebar-collapsable-max-height: 500px;
+  --kds-spacing-section: 32px;
+  --kds-spacing-form-gap: 20px;
+  --kds-spacing-inline-gap: 8px;
+
+  /* ==========================================================================
+     BORDER RADIUS TOKENS
+     ========================================================================== */
+
+  --kds-radius-none: 0px;
+  --kds-radius-sm: 4px;
+  --kds-radius-md: 8px;
+  --kds-radius-lg: 12px;
+  --kds-radius-xl: 16px;
+  --kds-radius-2xl: 20px;
+  --kds-radius-full: 9999px;
+
+  /* Component-specific radii */
+  --kds-radius-button: 4px;
+  --kds-radius-input: 4px;
+  --kds-radius-card: 20px;
+  --kds-radius-modal: 20px;
+  --kds-radius-chip: 16px;
+  --kds-radius-iconContainer: 10px;
+
+  /* ==========================================================================
+     BORDER TOKENS
+     ========================================================================== */
+
+
+  /* Border colors */
+  --kds-border-light: #DDDDDD;
+  --kds-border-medium: #999999;
+  --kds-border-dark: #666666;
+
+  /* ==========================================================================
+     SHADOW TOKENS
+     ========================================================================== */
+
+  --kds-shadow-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+  --kds-shadow-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+  --kds-shadow-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
+  --kds-shadow-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+  --kds-shadow-16: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
+  --kds-shadow-24: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --kds-shadow-none: none;
+
+  /* Semantic shadows */
+  --kds-shadow-button: var(--kds-shadow-2);
+  --kds-shadow-card: var(--kds-shadow-1);
+  --kds-shadow-modal: var(--kds-shadow-24);
+  --kds-shadow-dropdown: var(--kds-shadow-8);
+
+  /* ==========================================================================
+     Z-INDEX TOKENS
+     ========================================================================== */
+
+  --kds-z-index-fab: 1050;
+  --kds-z-index-appbar: 1100;
+  --kds-z-index-drawer: 1200;
+  --kds-z-index-modal: 1300;
+  --kds-z-index-snackbar: 1400;
+  --kds-z-index-tooltip: 1500;
+
+  /* ==========================================================================
+     TRANSITION TOKENS
+     ========================================================================== */
+
+  --kds-transition-shortest: 150ms;
+  --kds-transition-shorter: 200ms;
+  --kds-transition-short: 250ms;
+  --kds-transition-standard: 300ms;
+  --kds-transition-complex: 375ms;
+  --kds-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --kds-easing-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
+  --kds-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --kds-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+
+  /* ==========================================================================
+     BREAKPOINTS
+     ========================================================================== */
+
+
+  /* Breakpoints */
+  --kds-breakpoint-mobile: 768px;
+  --kds-breakpoint-tablet: 1024px;
+  --kds-breakpoint-desktop: 1025px;
+
+}
+
+
+/* Khipu BeerCSS Variable Mappings */
+/* Khipu Material Design 3 Brand Tokens for BeerCSS
+ * Imports core tokens from css-variables.css (auto-generated from src/tokens/index.ts)
+ * This file only maps BeerCSS-specific variables to core design tokens
+ * Source: design.khipu.com and BeerCSS framework
+ */
+
+/* Import core design tokens (auto-generated) */
+:root,
+body.light,
+body.dark {
+    /* ========================================
+       Map core tokens to BeerCSS-specific names
+       (BeerCSS may use different naming conventions)
+       Same selector specificity as BeerCSS to ensure override
+       ======================================== */
+
+    /* Input border states */
+    --kds-input-border-hover: var(--kds-color-input-hover-border);
+
+    /* Override BeerCSS native font variable */
+    --font: var(--kds-font-family-primary);
 
     /* ========================================
-       Map KDS Tokens to BeerCSS Variables
+       Map Core Design Tokens to BeerCSS Variables
+       Material Design 3 Light Mode
        ======================================== */
 
-    /* Keep Khipu Purple as primary brand color */
-    --primary: var(--kds-color-primary-500);  /* Purple - Khipu brand */
-    --on-primary: #FFFFFF;
-    --primary-container: var(--kds-color-primary-100);
-    --on-primary-container: var(--kds-color-primary-900);
-
-    /* Use Figma Make Blue as secondary (call-to-action color) */
-    --secondary: var(--kds-color-secondary-500);  /* Blue #3B82F6 - CTA buttons */
-    --on-secondary: #FFFFFF;
-    --secondary-container: var(--kds-color-secondary-100);
-    --on-secondary-container: var(--kds-color-secondary-900);
-
-    /* Map semantic colors */
-    --success: var(--kds-color-success);
-    --error: var(--kds-color-error);
-    --warning: var(--kds-color-warning);
-    --info: var(--kds-color-info);
-
-    /* Background and surface colors */
-    --surface: var(--kds-surface-paper);
-    --on-surface: oklch(20% 0 0);
-    --surface-variant: var(--kds-surface-elevated);
-    --surface-container: var(--kds-surface-base);
-
-    /* Legacy Khipu color aliases (for backward compatibility) */
-    --khipu-primary: var(--kds-color-primary-500);
-    --khipu-primary-dark: var(--kds-color-primary-700);
-    --khipu-primary-light: var(--kds-color-primary-300);
-    --khipu-secondary: var(--kds-color-secondary-500);
-    --khipu-accent: #FF5722;
+    /* Primary - Khipu Purple brand */
+    --primary: var(--kds-color-primary-main);
+    --on-primary: var(--kds-color-primary-contrast);
+    --primary-container: var(--kds-color-primary-light);
+    --on-primary-container: var(--kds-color-primary-dark);
+
+    /* Secondary - Green for success/positive actions */
+    --secondary: var(--kds-color-secondary-main);
+    --on-secondary: var(--kds-color-secondary-contrast);
+    --secondary-container: var(--kds-color-secondary-light);
+    --on-secondary-container: var(--kds-color-secondary-dark);
+
+    /* Semantic colors */
+    --success: var(--kds-color-success-main);
+    --error: var(--kds-color-error-main);
+    --warning: var(--kds-color-warning-main);
+    --info: var(--kds-color-info-main);
+
+    /* Background and surface colors - Override BeerCSS purple defaults */
+    --background: var(--kds-color-background-default);
+    --surface: var(--kds-color-background-paper);
+    --surface-dim: var(--kds-color-background-elevated);
+    --surface-bright: var(--kds-color-background-paper);
+    --surface-variant: var(--kds-color-background-elevated);
+    --surface-container-lowest: var(--kds-color-background-default);
+    --surface-container-low: var(--kds-color-background-paper);
+    --surface-container: var(--kds-color-background-default);
+    --surface-container-high: var(--kds-color-background-elevated);
+    --surface-container-highest: var(--kds-color-background-elevated);
+    --on-surface: var(--kds-color-text-primary);
+    --on-surface-variant: var(--kds-color-action-active);
+    --outline: var(--kds-color-input-border);
+    --outline-variant: var(--kds-border-light);
 
     /* ========================================
        ONBOARDING COMPONENTS TOKENS
        ======================================== */
 
     /* File Upload States */
-    --kds-upload-zone-bg: #F9FAFB;              /* gray-50 */
-    --kds-upload-zone-border: #D1D5DB;          /* gray-300 */
-    --kds-upload-zone-border-hover: #3B82F6;    /* blue-500 */
-    --kds-upload-zone-border-drag: #8347AD;     /* primary-500 (purple) */
-    --kds-upload-zone-border-error: var(--kds-color-error);
-    --kds-upload-zone-border-success: var(--kds-color-success);
-    --kds-upload-item-bg: #FFFFFF;
-    --kds-upload-item-border: #E5E7EB;          /* gray-200 */
+    --kds-upload-zone-bg: var(--kds-color-background-elevated);
+    --kds-upload-zone-border: var(--kds-border-light);
+    --kds-upload-zone-border-hover: var(--kds-color-info-main);
+    --kds-upload-zone-border-drag: var(--kds-color-primary-main);
+    --kds-upload-zone-border-error: var(--kds-color-error-main);
+    --kds-upload-zone-border-success: var(--kds-color-success-main);
+    --kds-upload-item-bg: var(--kds-color-background-paper);
+    --kds-upload-item-border: var(--kds-border-light);
 
     /* OTP Input */
     --kds-otp-digit-size: 56px;
     --kds-otp-digit-height: 64px;
-    --kds-otp-digit-border: #D1D5DB;
-    --kds-otp-digit-border-focus: #3B82F6;
-    --kds-otp-digit-bg: #FFFFFF;
-    --kds-otp-digit-bg-filled: #F9FAFB;
-
-    /* KYC Blocking Modal */
-    --kds-kyc-block-bg: oklch(96% 0.02 60);     /* Amber-50 */
-    --kds-kyc-block-border: oklch(88% 0.08 60); /* Amber-200 */
-    --kds-kyc-block-text: oklch(40% 0.12 60);   /* Amber-800 */
-    --kds-kyc-block-icon: oklch(60% 0.15 60);   /* Amber-600 */
+    --kds-otp-digit-border: var(--kds-border-light);
+    --kds-otp-digit-border-focus: var(--kds-color-info-main);
+    --kds-otp-digit-bg: var(--kds-color-background-paper);
+    --kds-otp-digit-bg-filled: var(--kds-color-background-elevated);
+
+    /* Modal Base */
+    --kds-modal-bg: var(--kds-color-background-paper);
+    --kds-modal-padding: var(--kds-spacing-6);
+    --kds-modal-padding-mobile: var(--kds-spacing-4);
+    --kds-modal-border-radius: var(--kds-radius-lg);
+    --kds-modal-shadow: var(--kds-shadow-4);
+    --kds-modal-backdrop: rgba(0, 0, 0, 0.5);
+    --kds-modal-max-width: 600px;
+    --kds-modal-max-width-mobile: 95vw;
+
+    /* Modal Content Colors */
+    --kds-modal-title-color: var(--kds-color-text-primary);
+    --kds-modal-text-color: var(--kds-color-text-secondary);
+    --kds-modal-icon-warning: var(--kds-color-warning-main);
+    --kds-modal-icon-error: var(--kds-color-error-main);
+    --kds-modal-icon-success: var(--kds-color-success-main);
+    --kds-modal-icon-info: var(--kds-color-info-main);
 
     /* Welcome Gradient */
-    --kds-welcome-gradient-start: #3B82F6;      /* blue-500 */
-    --kds-welcome-gradient-end: #1D4ED8;        /* blue-700 */
+    --kds-welcome-gradient-start: var(--kds-color-primary-main);  /* Khipu purple */
+    --kds-welcome-gradient-end: var(--kds-color-primary-dark);    /* Khipu purple dark */
 
     /* Bank Selector */
-    --kds-bank-item-border: #E5E7EB;
-    --kds-bank-item-border-hover: #D1D5DB;
-    --kds-bank-item-border-selected: #3B82F6;
-    --kds-bank-item-bg-selected: #EFF6FF;        /* blue-50 */
-    --kds-bank-item-bg-hover: #F9FAFB;
+    --kds-bank-item-border: var(--kds-border-light);
+    --kds-bank-item-border-hover: var(--kds-border-light);
+    --kds-bank-item-border-selected: var(--kds-color-info-main);
+    --kds-bank-item-bg-selected: var(--kds-alert-info-bg);
+    --kds-bank-item-bg-hover: var(--kds-color-background-elevated);
 
     /* Signature Pad */
-    --kds-signature-border: #D1D5DB;
-    --kds-signature-bg: #FFFFFF;
+    --kds-signature-border: var(--kds-border-light);
+    --kds-signature-bg: var(--kds-color-background-paper);
     --kds-signature-line-color: #000000;
 
     /* Contract Accordion */
-    --kds-accordion-border: #E5E7EB;
-    --kds-accordion-bg: #F9FAFB;
-    --kds-accordion-bg-open: #FFFFFF;
-    --kds-accordion-header-bg: #F3F4F6;
+    --kds-accordion-border: var(--kds-border-light);
+    --kds-accordion-bg: var(--kds-color-background-elevated);
+    --kds-accordion-bg-open: var(--kds-color-background-paper);
+    --kds-accordion-header-bg: var(--kds-color-background-elevated);
 
     /* Onboarding Container */
     --kds-onboarding-max-width: 800px;
@@ -197,19 +405,40 @@
 }
 
 /* ========================================
-   Body Layout (Sticky Footer) - Figma Make Style
+   Force Light Mode Only
+   ======================================== */
+
+/* Force light mode - disable dark mode */
+:root,
+html,
+body {
+    color-scheme: light only;
+}
+
+/* Override system dark mode preference */
+@media (prefers-color-scheme: dark) {
+    :root,
+    html,
+    body {
+        color-scheme: light only;
+    }
+}
+
+/* ========================================
+   Body Layout (Sticky Footer)
    ======================================== */
 html, body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     margin: 0;
-    background: var(--kds-surface-background);  /* Light gray background */
+    background: var(--kds-color-background-default);
+    color: var(--kds-color-text-primary);
 }
 
 main {
     flex: 1 0 auto;
-    padding: 0;  /* Remove default padding for Figma Make style */
+    padding: 0;
 }
 
 footer {
@@ -220,13 +449,15 @@ footer {
 
 /* Khipu Custom Components */
 /* Khipu Custom Components for BeerCSS
- * Custom Material Design 3 components extracted from Figma Make prototype
+ * Custom Material Design 3 components based on BeerCSS framework
  * Implements: Cards, Stepper, Alerts, Forms, Typography utilities
+ * Source: design.khipu.com and Material Design 3 specifications
  */
 
-/* ========================================
-   Button Overrides (Figma Make Style)
-   ======================================== */
+
+:has(>main) {
+    background-color: transparent !important;
+}
 
 /* ========================================
    KHIPU BUTTON SYSTEM
@@ -240,68 +471,135 @@ a.kds-btn {
     align-items: center;
     justify-content: center;
     gap: 8px;
-    padding: 12px 24px;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1;
-    border-radius: 8px;
+
+    /* Typography - Using design tokens */
+    font-family: var(--kds-font-family-secondary);
+    font-weight: var(--kds-font-weight-medium);      /* 500, no 600 */
+    font-size: var(--kds-typography-button-font-size);          /* 0.9375rem = 15px */
+    line-height: var(--kds-typography-button-line-height);      /* 26px, no 1 */
+    letter-spacing: var(--kds-typography-button-letter-spacing); /* 0.46px */
+    text-transform: uppercase;
+
+    /* Spacing - Using design tokens */
+    padding: var(--kds-spacing-button-padding);      /* 8px 22px */
+    min-height: var(--kds-spacing-button-min-height); /* 50px */
+    height: auto;  /* Remove fixed height, let content + padding define it */
+
+    /* Border - Using design token */
+    border-radius: var(--kds-radius-button);  /* 4px */
+    border: none;
+
+    /* Interaction */
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                color 250ms cubic-bezier(0.4, 0, 0.2, 1);
     box-sizing: border-box;
-    min-height: 48px;
-    height: 48px;
     vertical-align: middle;
 }
 
+/* Disabled state - colores específicos en lugar de opacity */
 button.kds-btn:disabled,
 a.kds-btn:disabled {
-    opacity: 0.5;
+    background-color: var(--kds-color-action-disabled-bg);  /* rgba(0, 0, 0, 0.12) */
+    color: var(--kds-color-action-disabled);                        /* rgba(0, 0, 0, 0.38) */
     cursor: not-allowed;
     pointer-events: none;
+    box-shadow: none;
+    border-color: transparent;
 }
 
-/* Primary button - Khipu purple (Figma Make) */
+/* Primary button - Khipu purple */
 button.kds-btn-primary,
 a.kds-btn-primary {
-    background: var(--primary);
+    background: var(--kds-color-primary-main);     /* #8347AD */
     color: white;
     border: none;
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 5px 0px rgba(0, 0, 0, 0.12);  /* elevation/2 */
 }
 
+/* Hover State - background más oscuro + elevation/4 */
 button.kds-btn-primary:hover:not(:disabled),
 a.kds-btn-primary:hover:not(:disabled) {
-    opacity: 0.9;
+    background: var(--kds-color-primary-dark);     /* #6A3A8C */
+    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+                0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 10px 0px rgba(0, 0, 0, 0.12);  /* elevation/4 */
+}
+
+/* Active/Focus State */
+button.kds-btn-primary:active:not(:disabled),
+button.kds-btn-primary:focus-visible:not(:disabled),
+a.kds-btn-primary:active:not(:disabled),
+a.kds-btn-primary:focus-visible:not(:disabled) {
+    background: var(--kds-color-primary-dark);
+    outline: 2px solid var(--kds-color-primary-main);
+    outline-offset: 2px;
+}
+
+/* Override disabled para primary */
+button.kds-btn-primary:disabled,
+a.kds-btn-primary:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+    border-color: transparent;
 }
 
-/* Secondary button - Blue CTA (Figma Make) */
+/* Secondary button - Blue CTA */
 button.kds-btn-secondary,
 a.kds-btn-secondary {
     background: #3B82F6;
     color: white;
     border: none;
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 5px 0px rgba(0, 0, 0, 0.12);  /* elevation/2 */
 }
 
 button.kds-btn-secondary:hover:not(:disabled),
 a.kds-btn-secondary:hover:not(:disabled) {
     background: #2563EB;
-    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
+    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+                0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 10px 0px rgba(0, 0, 0, 0.12);  /* elevation/4 */
+}
+
+button.kds-btn-secondary:disabled,
+a.kds-btn-secondary:disabled {
+    background-color: var(--kds-color-action-disabled-bg);
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
+    border-color: transparent;
 }
 
-/* Outlined button (Figma Make) */
+/* Outlined button */
 button.kds-btn-outlined,
 a.kds-btn-outlined {
     background: transparent;
-    color: var(--primary);
-    border-color: var(--kds-border-medium);
+    color: var(--kds-color-primary-main);
+    border: 1px solid var(--kds-border-medium);  /* rgba(0, 0, 0, 0.5) aprox */
+    box-shadow: none;
 }
 
 button.kds-btn-outlined:hover:not(:disabled),
 a.kds-btn-outlined:hover:not(:disabled) {
-    background: #F3F4F6;
-    border-color: var(--primary);
+    background: var(--kds-color-primary-hover);  /* rgba(131, 71, 173, 0.04) */
+    border-color: var(--kds-color-primary-main);
+}
+
+button.kds-btn-outlined:disabled,
+a.kds-btn-outlined:disabled {
+    background: transparent;
+    color: var(--kds-color-action-disabled);
+    border-color: var(--kds-color-action-disabled);
+    box-shadow: none;
 }
 
-/* Outlined white - for dark backgrounds (Figma Make hero) */
+/* Outlined white - for dark backgrounds */
 button.kds-btn-outlined-white,
 a.kds-btn-outlined-white {
     background: white;
@@ -314,44 +612,57 @@ a.kds-btn-outlined-white:hover:not(:disabled) {
     opacity: 0.9;
 }
 
-/* Text button (Figma Make) */
+/* Text button */
 button.kds-btn-text,
 a.kds-btn-text {
     background: transparent;
-    color: var(--primary);
+    color: var(--kds-color-primary-main);
     border: none;
-    padding: 8px 16px;
-    min-height: auto;
-    height: auto;
+    padding: 6px 16px;  /* Menor padding para text variant */
+    min-height: 32px;   /* Menor altura para text variant */
+    box-shadow: none;
 }
 
 button.kds-btn-text:hover:not(:disabled),
 a.kds-btn-text:hover:not(:disabled) {
-    background: #EFF6FF;
+    background: var(--kds-color-primary-hover);  /* rgba(131, 71, 173, 0.04) */
+}
+
+button.kds-btn-text:disabled,
+a.kds-btn-text:disabled {
+    background: transparent;
+    color: var(--kds-color-action-disabled);
+    box-shadow: none;
 }
 
 /* Icon wrapper - control size via span container */
 button.kds-btn > .kds-icon,
 a.kds-btn > .kds-icon {
-    width: 20px;
-    height: 20px;
-    padding-top: 2px;
+    min-width: var(--kds-spacing-button-icon-size);
+    min-height: var(--kds-spacing-button-icon-size);
+    width: var(--kds-spacing-button-icon-size);
+    height: var(--kds-spacing-button-icon-size);
     line-height: 1;
     overflow: hidden;
     flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 button.kds-btn > .kds-icon > i,
 a.kds-btn > .kds-icon > i {
-    font-size: 17px;
+    font-size: var(--kds-spacing-button-icon-size);
+    min-width: var(--kds-spacing-button-icon-size);
+    min-height: var(--kds-spacing-button-icon-size);
     line-height: 1;
 }
 
 /* ========================================
-   Card Components (from Figma Make)
+   Card Components (Material Design 3)
    ======================================== */
 
-/* Base elevated card - EXACT from Figma Make */
+/* Base elevated card */
 .kds-card-elevated,
 .khipu-card-elevated {
     background: #FFFFFF;
@@ -394,7 +705,7 @@ a.kds-btn > .kds-icon > i {
     }
 }
 
-/* Selection card - EXACT from Figma Make StageSelector */
+/* Selection card */
 .kds-card-selector {
     padding: 24px;
     border-radius: 12px;
@@ -414,7 +725,7 @@ a.kds-btn > .kds-icon > i {
 .kds-card-selector.selected {
     border-color: #3B82F6;  /* blue-600 */
     background: #EFF6FF;    /* blue-50 */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--kds-shadow-md);
 }
 
 /* Icon container */
@@ -433,6 +744,8 @@ a.kds-btn > .kds-icon > i {
 .kds-card-selector-icon svg {
     width: 24px;
     height: 24px;
+    min-width: 24px;
+    min-height: 24px;
     color: #3B82F6;  /* blue-600 */
 }
 
@@ -453,47 +766,130 @@ a.kds-btn > .kds-icon > i {
 
 /* Selected state - visual feedback via border only */
 
-/* Pricing/Plan card (from Figma Make StagePricingPlan) */
+/* Pricing/Plan card */
+/* Pricing Card - Base */
 .kds-card-plan {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-5);
+    gap: var(--kds-spacing-6);
     padding: var(--kds-spacing-8);
     border-radius: var(--kds-radius-lg);
-    border: 1px solid var(--kds-border-medium);
-    max-width: 365px;
+    border: 2px solid var(--kds-border-medium);
+    max-width: 400px; /* Increased from 365px for better text spacing */
     background: var(--kds-surface-base);
-    transition: border-color 0.3s ease, background 0.3s ease;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    height: 100%; /* Ensure cards fill grid height */
+}
+
+.kds-card-plan:hover {
+    border-color: var(--primary);
+    box-shadow: var(--kds-shadow-elevation-2);
+    transform: translateY(-2px);
 }
 
+/* Recommended Plan */
 .kds-card-plan.recommended {
     border-color: var(--primary);
-    background: var(--primary-container);
+    background: linear-gradient(to bottom, rgba(131, 71, 173, 0.05), var(--kds-surface-base));
+    box-shadow: var(--kds-shadow-elevation-3);
 }
 
-.kds-card-plan .plan-price {
-    font-size: var(--kds-font-size-3xl);
+.kds-card-plan.recommended:hover {
+    box-shadow: var(--kds-shadow-elevation-4);
+}
+
+/* Recommended Badge */
+.kds-card-plan-badge {
+    position: absolute;
+    top: -12px;
+    right: var(--kds-spacing-6);
+    padding: var(--kds-spacing-1) var(--kds-spacing-4);
+    background: var(--primary);
+    color: white;
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+    border-radius: var(--kds-radius-full);
+    box-shadow: var(--kds-shadow-elevation-1);
+}
+
+/* Plan Header */
+.kds-card-plan-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-1);
+}
+
+.kds-card-plan-header h3 {
+    margin: 0;
+    font-size: var(--kds-font-size-2xl);
     font-weight: var(--kds-font-weight-bold);
-    color: var(--primary);
+    color: var(--kds-text-primary);
 }
 
-.kds-card-plan .plan-features {
-    list-style: none;
-    padding: 0;
+.kds-card-plan-header p {
     margin: 0;
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-text-secondary);
 }
 
-.kds-card-plan .plan-features li {
-    padding: var(--kds-spacing-2) 0;
+/* Plan Price */
+.kds-card-plan-price {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     gap: var(--kds-spacing-2);
+    padding: var(--kds-spacing-4) 0;
+    border-bottom: 1px solid var(--kds-border-light);
+    min-height: 88px; /* Standardize price area height */
 }
 
-.kds-card-plan .plan-features li::before {
-    content: "✓";
-    color: var(--success);
+.kds-price {
+    font-size: 42px;
     font-weight: var(--kds-font-weight-bold);
+    color: var(--primary);
+    line-height: 1.1;
+    max-width: 100%; /* Prevent overflow */
+    word-break: break-word; /* Allow wrapping if needed */
+}
+
+.kds-price-period {
+    font-size: var(--kds-font-size-base);
+    color: var(--kds-text-secondary);
+    font-weight: var(--kds-font-weight-medium);
+}
+
+/* Plan Features */
+.kds-card-plan-features {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+    flex: 1;
+}
+
+.kds-feature {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--kds-spacing-3);
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-text-primary);
+}
+
+.kds-feature i {
+    font-size: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    color: var(--success);
+    flex-shrink: 0;
+}
+
+.kds-feature.disabled {
+    color: var(--kds-text-disabled);
+    text-decoration: line-through;
+}
+
+.kds-feature.disabled i {
+    color: var(--kds-text-disabled);
 }
 
 /* Verification/Status card (from onboarding patterns) */
@@ -518,6 +914,8 @@ a.kds-btn > .kds-icon > i {
 .kds-card-status .status-icon {
     flex-shrink: 0;
     font-size: 24px;
+    min-width: 24px;
+    min-height: 24px;
 }
 
 .kds-card-status .status-content {
@@ -600,6 +998,7 @@ a.kds-btn > .kds-icon > i {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--kds-spacing-4);
+    align-items: start;
 }
 
 @media (min-width: 768px) {
@@ -608,10 +1007,22 @@ a.kds-btn > .kds-icon > i {
     }
 }
 
+/* Align fields inside grids */
+.kds-grid-2col > .kds-field,
+.kds-grid-3col > .kds-field {
+    align-self: start;
+}
+
+.kds-grid-2col > .kds-field .kds-form-label,
+.kds-grid-3col > .kds-field .kds-form-label {
+    min-height: 20px;
+}
+
 .kds-grid-3col {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--kds-spacing-4);
+    align-items: stretch; /* Ensure equal heights */
 }
 
 @media (min-width: 768px) {
@@ -767,7 +1178,7 @@ a.kds-btn > .kds-icon > i {
 
 /* ========================================
    Stepper Component (Multi-stage Progress Indicator)
-   EXACT match from Figma Make onboarding
+   Material Design 3 stepper pattern
    ======================================== */
 
 .kds-stepper {
@@ -835,10 +1246,10 @@ a.kds-btn > .kds-icon > i {
 
 /* Step States */
 
-/* Current step - Blue/Primary */
+/* Current step - Info color */
 .kds-step.current .kds-step-indicator {
-    background: #3B82F6;  /* Blue from Figma Make */
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
+    background: var(--kds-color-info-main);
+    box-shadow: var(--kds-shadow-stepper-info);
 }
 
 .kds-step.current .kds-step-label {
@@ -846,10 +1257,10 @@ a.kds-btn > .kds-icon > i {
     font-weight: 500;
 }
 
-/* Completed step - Green with checkmark */
+/* Completed step - Success color with checkmark */
 .kds-step.completed .kds-step-indicator {
-    background: #10B981;  /* Green from Figma Make */
-    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
+    background: var(--kds-color-success-main);
+    box-shadow: var(--kds-shadow-stepper-success);
 }
 
 .kds-step.completed .kds-step-label {
@@ -959,100 +1370,24 @@ nav.primary button {
 }
 
 /* ========================================
-   Drawer/Sidenav (Mobile Navigation)
+   Flex Layout System (Body + Container + Sidebar)
    ======================================== */
 
-/* Left drawer hidden by default */
-nav.drawer.left {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 280px;
-    max-width: 80vw;
-    background: var(--surface-container, #FFFFFF);
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-    transform: translateX(-100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 1100;
-    overflow-y: auto;
+/* Body flex-column layout */
+body.kds-layout {
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
 }
 
-/* Show drawer when active */
-nav.drawer.left.active {
-    transform: translateX(0);
-}
-
-/* Drawer overlay */
-nav.drawer.left::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: -1;
-    pointer-events: none;
-}
-
-/* Show overlay when drawer is active */
-nav.drawer.left.active::before {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-/* Drawer header styling */
-nav.drawer header {
-    padding: 16px;
-    background: var(--primary-container, rgba(131, 71, 173, 0.1));
-    border-bottom: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.12));
-}
-
-/* Drawer links */
-nav.drawer a {
+/* Layout container (flex-row) - below header */
+.kds-layout-container {
     display: flex;
-    align-items: center;
-    padding: 12px 16px;
-    color: var(--on-surface, rgba(0, 0, 0, 0.87));
-    text-decoration: none;
-    transition: background 0.2s ease;
-    gap: 16px;
-}
-
-nav.drawer a:hover {
-    background: var(--surface-variant, rgba(0, 0, 0, 0.04));
-}
-
-nav.drawer a i {
-    font-size: 24px;
-    color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
-}
-
-nav.drawer .divider {
-    height: 1px;
-    background: var(--outline-variant, rgba(0, 0, 0, 0.12));
-    margin: 8px 0;
-}
-
-/* Hide menu toggle button on desktop */
-@media (min-width: 769px) {
-    #menu-toggle {
-        display: none;
-    }
-
-    nav.drawer.left {
-        display: none;
-    }
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
 }
-
 /* ========================================
    Footer Customization
    ======================================== */
@@ -1082,10 +1417,10 @@ footer.primary a:hover {
 }
 
 /* ========================================
-   Form Inputs - EXACT from Figma Make
+   Form Inputs (Material Design 3)
    ======================================== */
 
-/* Form labels from Figma Make */
+/* Form labels */
 .field label,
 .kds-form-label {
     font-size: 14px;
@@ -1095,292 +1430,328 @@ footer.primary a:hover {
     display: block;
 }
 
-/* Input styling from Figma Make */
-.field input,
-.field textarea,
-.field select,
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"],
-input[type="tel"],
-input[type="url"],
-input[type="search"],
-textarea,
-select {
-    border-radius: 8px !important;
-    border: 1px solid #D1D5DB !important;
-    padding: 12px 16px !important;
-    font-size: 15px !important;
-    color: #111827 !important;
-    background: #FFFFFF !important;
-    transition: all 0.2s ease !important;
+/* Icon utilities for inline icons */
+.kds-icon-inline {
+    vertical-align: middle;
+    margin-right: var(--kds-spacing-2);
 }
 
-/* Placeholder styling */
-.field input::placeholder,
-.field textarea::placeholder,
-input::placeholder,
-textarea::placeholder {
-    color: #9CA3AF !important;
-    opacity: 1 !important;
+/* Section title icon */
+.kds-stage-section-title i {
+    vertical-align: middle;
+    margin-right: var(--kds-spacing-2);
 }
 
-/* Focus state */
-.field input:focus,
-.field textarea:focus,
-.field select:focus,
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none !important;
-    border-color: #3B82F6 !important;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
-}
+/* ==============================================
+   MATERIAL DESIGN 3 FLOATING LABELS (BeerCSS)
+   Solución limpia con principios claros
+   ============================================== */
 
-/* Outlined inputs (default) */
-.field.border input,
-.field.border textarea,
-.field.border select {
-    border-radius: 8px !important;
+/* === VARIABLES GLOBALES === */
+:root,
+body.light,
+body.dark {
+  --primary: var(--kds-color-primary-main);          /* Purple Khipu - Focus */
+  --outline: var(--kds-color-input-enabled-border);  /* Gris normal - Unfocused */
+  --error: var(--kds-color-error-main);              /* Rojo - Invalid */
 }
 
-/* Filled inputs */
-.field.fill input,
-.field.fill textarea,
-.field.fill select {
-    border-radius: 8px !important;
-    background: #F9FAFB !important;
+/* === ALTURA PERSONALIZADA === */
+.field {
+  --_input: 3.625rem;  /* 58px (vs 48px default BeerCSS) */
+  --_start: 1.4rem;    /* Posición del label ajustada proporcionalmente */
 }
 
-/* Round variant (only when explicitly requested) */
-.field.round input,
-.field.round textarea,
-.field.round select {
-    border-radius: 28px !important;
+/* === TRANSICIONES SUAVES === */
+.field > :is(input, textarea, select) {
+  transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
 }
 
-/* ========================================
-   Form Validation States (from Figma Make patterns)
-   Enhanced with Info, Warning, Success, Error states
-   ======================================== */
+/* ==========================================
+   NOTCH VISIBILITY (opacity)
+   ========================================== */
 
-/* Info state (blue) */
-.field.info input,
-.field.info textarea,
-.field.info select {
-    border-color: var(--kds-color-info) !important;
+/* Ocultar notch por defecto */
+.field.label.border:not(.fill) > label::after {
+  opacity: 0;
 }
 
-.field.info label {
-    color: var(--kds-color-info) !important;
+/* Mostrar notch cuando label flota (tiene valor O focus) */
+.field.label.border:not(.fill) > :is(
+  :focus + label,
+  input:not(:placeholder-shown) + label,
+  textarea:not(:placeholder-shown) + label,
+  select + label
+)::after {
+  opacity: 1;
 }
 
-.field .info-message {
-    display: block;
-    color: var(--kds-color-info);
-    font-size: 0.75rem;
-    margin-top: 4px;
-    padding: 8px 12px;
-    background: var(--kds-alert-info-bg);
-    border-radius: var(--kds-radius-sm);
-    border-left: 3px solid var(--kds-color-info);
-    line-height: 1.4;
+/* ==========================================
+   BORDER COLOR
+   Notch + Input border cambian en hover - con transición suave
+   ========================================== */
+
+/* Agregar transición al notch (BeerCSS usa transition: none, lo sobrescribimos) */
+.field.label.border:not(.fill) > label::after {
+  transition: border-color 0.2s, opacity 0.2s;
 }
 
-/* Warning state (amber) */
-.field.warning input,
-.field.warning textarea,
-.field.warning select {
-    border-color: var(--kds-color-warning) !important;
+/* Estado normal: usa --outline (viene de BeerCSS) */
+
+/* Hover SIN focus: cambiar color del notch Y del borde del input */
+.field.label.border:not(.fill):hover:not(:focus-within) > label::after {
+  border-block-start-color: var(--kds-color-input-hover-border);
 }
 
-.field.warning label {
-    color: var(--kds-color-warning) !important;
+.field.label.border:not(.fill):hover:not(:focus-within) > :is(input, textarea, select) {
+  border-color: var(--kds-color-input-hover-border);
 }
 
-.field .warning-message {
-    display: block;
-    color: var(--kds-color-warning);
-    font-size: 0.75rem;
-    margin-top: 4px;
-    padding: 8px 12px;
-    background: var(--kds-alert-warning-bg);
-    border-radius: var(--kds-radius-sm);
-    border-left: 3px solid var(--kds-color-warning);
-    line-height: 1.4;
+/* Focus: usar primary (mayor especificidad, gana sobre hover) */
+.field.label.border:not(.fill):focus-within > label::after {
+  border-block-start-color: var(--primary);
 }
 
-/* Valid/Success state (enhanced) */
-.field.valid input,
-.field.valid textarea,
-.field.valid select {
-    border-color: var(--kds-color-success) !important;
+.field.label.border:not(.fill):focus-within > :is(input, textarea, select) {
+  border-color: var(--primary);
 }
 
-/* Success label color - more specific to override BeerCSS :focus + label primary color */
-.field.label.valid > label,
-.field.label.valid > input:focus + label,
-.field.label.valid > textarea:focus + label,
-.field.label.valid > select:focus + label,
-.field.label.valid > input:not(:focus) + label,
-.field.label.valid > textarea:not(:focus) + label,
-.field.label.valid > select:not(:focus) + label {
-    color: var(--kds-color-success) !important;
+/* ==========================================
+   INVALID STATE (error)
+   Error siempre gana - mayor especificidad que hover y focus
+   ========================================== */
+
+/* Invalid: notch rojo (gana sobre hover y focus) */
+.field.label.border:not(.fill).invalid > label::after {
+  border-block-start-color: var(--error);
 }
 
-.field .success-message {
-    display: block;
-    color: var(--kds-color-success);
-    font-size: 0.75rem;
-    margin-top: 4px;
-    padding: 8px 12px;
-    background: var(--kds-alert-success-bg);
-    border-radius: var(--kds-radius-sm);
-    border-left: 3px solid var(--kds-color-success);
-    line-height: 1.4;
+/* Invalid: borde del input rojo (gana sobre hover y focus) */
+.field.label.border:not(.fill).invalid > :is(input, textarea, select) {
+  border-color: var(--error);
 }
 
-/* Invalid/Error state (enhanced) */
-.field.invalid input,
-.field.invalid textarea,
-.field.invalid select {
-    border-color: var(--kds-color-error) !important;
-    color: var(--on-surface, rgba(0, 0, 0, 0.87)) !important;
+/* Invalid + hover: mantener rojo (no cambiar a gris) */
+.field.label.border:not(.fill).invalid:hover > label::after {
+  border-block-start-color: var(--error);
 }
 
-.field.invalid input:focus,
-.field.invalid textarea:focus,
-.field.invalid select:focus {
-    border-color: var(--kds-color-error) !important;
-    outline-color: var(--kds-color-error) !important;
+.field.label.border:not(.fill).invalid:hover > :is(input, textarea, select) {
+  border-color: var(--error);
 }
 
-/* Invalid label */
-.field.invalid label {
-    color: var(--kds-color-error) !important;
+/* Invalid + focus: mantener rojo (no cambiar a morado) */
+.field.label.border:not(.fill).invalid:focus-within > label::after {
+  border-block-start-color: var(--error);
 }
 
-/* Error message styling (enhanced) */
-.field .error,
-.field span.error {
-    display: block;
-    color: var(--kds-color-error);
-    font-size: 0.75rem;
-    margin-top: 4px;
-    padding: 8px 12px;
-    background: var(--kds-alert-error-bg);
-    border-radius: var(--kds-radius-sm);
-    border-left: 3px solid var(--kds-color-error);
-    font-weight: 400;
-    line-height: 1.4;
+.field.label.border:not(.fill).invalid:focus-within > :is(input, textarea, select) {
+  border-color: var(--error);
 }
 
-/* Helper text (neutral) */
-.field .helper,
-.field span.helper {
-    display: block;
-    color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
-    font-size: 0.75rem;
-    margin-top: 4px;
-    padding: 4px 12px;
-    line-height: 1.4;
+/* ==========================================
+   SELECT DROPDOWN ARROW
+   Asegurar que el dropdown arrow sea visible
+   ========================================== */
+
+/* Select: mantener appearance nativa para mostrar el dropdown arrow */
+.field select {
+  /* BeerCSS puede estar ocultando el arrow, aseguramos que sea visible */
+  appearance: auto;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+
+  /* Asegurar que el arrow nativo tenga espacio */
+  padding-right: var(--kds-spacing-10);  /* 40px */
+  background-position: right var(--kds-spacing-4) center;  /* 16px desde el borde */
+  background-repeat: no-repeat;
+  background-size: var(--kds-spacing-5);  /* 20px */
 }
 
-/* ========================================
-   Alert/Banner Components
-   From Figma Make: KYC blocking patterns, info messages
-   ======================================== */
+/* ==========================================
+   HELPER TEXT (mensaje debajo del input)
+   Usando tokens de diseño
+   ========================================== */
 
-.kds-alert {
-    display: flex;
-    gap: var(--kds-spacing-3);
-    padding: var(--kds-spacing-4);
-    border-radius: var(--kds-radius-md);
-    border: 1px solid;
-    margin: var(--kds-spacing-4) 0;
-    align-items: flex-start;
+/* Helper text: output o span.helper */
+.field > :is(output, .helper, span.helper) {
+  display: block;
+  font-family: var(--kds-font-family-primary);  /* Public Sans */
+  font-weight: var(--kds-font-weight-regular);  /* 400 */
+  font-size: var(--kds-font-size-xs);           /* 0.75rem / 12px */
+  line-height: var(--kds-line-height-relaxed);  /* 1.66 */
+  color: var(--kds-color-text-secondary);       /* Gris normal */
+  padding: 0.25rem 1rem 0 1rem;
+  margin: 0;
 }
 
-.kds-alert-icon {
-    flex-shrink: 0;
-    font-size: 20px;
-    margin-top: 2px;
+/* Helper text en estado error */
+.field.invalid > :is(output, .helper, span.helper) {
+  color: var(--error);  /* Rojo error */
 }
 
-.kds-alert-content {
-    flex: 1;
+/* ==========================================
+   LABEL COLOR
+   Mantener sincronizado con border
+   ========================================== */
+
+/* Estado normal: color secundario (60% opacity) */
+.field.label > label {
+  color: var(--kds-color-text-secondary);
 }
 
-.kds-alert-title {
-    font-weight: var(--kds-font-weight-semibold);
-    margin-bottom: var(--kds-spacing-2);
-    font-size: var(--kds-font-size-base);
+/* Hover SIN focus: más oscuro (70% opacity) */
+.field.label:hover:not(:focus-within) > label {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+/* Focus: primary purple (BeerCSS ya lo hace, pero aseguramos) */
+.field.label:focus-within > label {
+  color: var(--primary);
 }
 
-.kds-alert-description {
+/* ========================================
+   Snackbar Components (Material Design 3)
+   Floating notifications at bottom of screen
+   ======================================== */
+
+/* Base snackbar - extends BeerCSS .snackbar */
+.kds-snackbar {
+    position: fixed;
+    bottom: var(--kds-spacing-3);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: var(--kds-z-index-snackbar);
+
+    /* Layout */
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-2);
+
+    /* Sizing */
+    min-width: 344px;
+    max-width: 672px;
+    padding: var(--kds-spacing-2) var(--kds-spacing-3);
+
+    /* Styling */
+    border-radius: var(--kds-radius-sm);
+    box-shadow: var(--kds-shadow-8);
+
+    /* Typography */
+    font-family: var(--kds-font-family-primary);
     font-size: var(--kds-font-size-sm);
-    line-height: 1.5;
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+
+    /* Animation */
+    animation: kds-snackbar-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Alert Variants */
-.kds-alert.info {
-    background: var(--kds-alert-info-bg);
-    border-color: var(--kds-color-info);
-    color: var(--kds-color-info);
+/* Snackbar animation */
+@keyframes kds-snackbar-in {
+    from {
+        transform: translateX(-50%) translateY(100px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
 }
 
-.kds-alert.info .kds-alert-icon {
-    color: var(--kds-color-info);
+/* Icon */
+.kds-snackbar-icon {
+    flex-shrink: 0;
+    font-size: var(--kds-spacing-button-icon-size);
+    min-width: var(--kds-spacing-button-icon-size);
+    min-height: var(--kds-spacing-button-icon-size);
 }
 
-.kds-alert.warning {
-    background: var(--kds-alert-warning-bg);
-    border-color: var(--kds-color-warning);
-    color: var(--kds-color-warning);
+/* Content */
+.kds-snackbar-content {
+    flex: 1;
+    min-width: 0;
 }
 
-.kds-alert.warning .kds-alert-icon {
-    color: var(--kds-color-warning);
+/* Action button (optional) */
+.kds-snackbar-action {
+    flex-shrink: 0;
 }
 
-.kds-alert.success {
-    background: var(--kds-alert-success-bg);
-    border-color: var(--kds-color-success);
-    color: var(--kds-color-success);
+/* Snackbar Variants */
+.kds-snackbar.success {
+    background: var(--kds-snackbar-success-bg);
+    border: 1px solid var(--kds-color-success-main);
+    color: var(--kds-color-success-main);
 }
 
-.kds-alert.success .kds-alert-icon {
-    color: var(--kds-color-success);
+.kds-snackbar.success .kds-snackbar-icon {
+    color: var(--kds-color-success-main);
 }
 
-.kds-alert.error {
-    background: var(--kds-alert-error-bg);
-    border-color: var(--kds-color-error);
-    color: var(--kds-color-error);
+.kds-snackbar.warning {
+    background: var(--kds-snackbar-warning-bg);
+    border: 1px solid var(--kds-color-warning-main);
+    color: var(--kds-color-warning-main);
 }
 
-.kds-alert.error .kds-alert-icon {
-    color: var(--kds-color-error);
+.kds-snackbar.warning .kds-snackbar-icon {
+    color: var(--kds-color-warning-main);
 }
 
-/* Alert with action button */
-.kds-alert-actions {
-    margin-top: var(--kds-spacing-3);
-    display: flex;
-    gap: var(--kds-spacing-2);
+.kds-snackbar.error {
+    background: var(--kds-snackbar-error-bg);
+    border: 1px solid var(--kds-color-error-main);
+    color: var(--kds-color-error-main);
 }
 
-/* Compact alert variant (no icon) */
-.kds-alert.compact {
-    padding: var(--kds-spacing-3);
+.kds-snackbar.error .kds-snackbar-icon {
+    color: var(--kds-color-error-main);
 }
 
-.kds-alert.compact .kds-alert-icon {
-    display: none;
+.kds-snackbar.info {
+    background: var(--kds-snackbar-info-bg);
+    border: 1px solid var(--kds-color-info-main);
+    color: var(--kds-color-info-main);
 }
 
-/* ========================================
+.kds-snackbar.info .kds-snackbar-icon {
+    color: var(--kds-color-info-main);
+}
+
+/* Static variant for showcase/demo purposes */
+.kds-snackbar.static {
+    position: relative;
+    left: auto;
+    bottom: auto;
+    transform: none;
+    margin-bottom: var(--kds-spacing-3);
+    animation: none;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+    .kds-snackbar {
+        min-width: calc(100vw - var(--kds-spacing-4));
+        max-width: calc(100vw - var(--kds-spacing-4));
+        left: var(--kds-spacing-2);
+        right: var(--kds-spacing-2);
+        transform: translateX(0);
+    }
+
+    @keyframes kds-snackbar-in {
+        from {
+            transform: translateY(100px);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/* ========================================
    Material Symbols Icon Sizing
    ======================================== */
 
@@ -1390,6 +1761,11 @@ select:focus {
         'wght' 400,
         'GRAD' 0,
         'opsz' 24;
+    min-width: 24px;
+    min-height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /* Filled icons for specific contexts */
@@ -1401,193 +1777,6 @@ select:focus {
         'opsz' 24;
 }
 
-/* ========================================
-   Typography Scale - EXACT from Figma Make
-   ======================================== */
-
-/* Stage title (e.g., "Etapa 2: Datos personales") */
-.kds-stage-title {
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 1.3;
-    color: #111827;
-    margin: 0 0 12px 0;
-    text-align: center;
-}
-
-/* Stage subtitle (e.g., "Completa tu información personal") */
-.kds-stage-subtitle {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #6B7280;
-    margin: 0 0 32px 0;
-    text-align: center;
-}
-
-/* Section title (e.g., "Datos personales") */
-.kds-section-title {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 1.4;
-    color: #111827;
-    margin: 0 0 24px 0;
-}
-
-/* Display styles (largest) */
-.kds-display-large {
-    font-size: var(--kds-font-size-4xl);
-    font-weight: var(--kds-font-weight-bold);
-    line-height: 1.2;
-    margin: 0;
-    letter-spacing: -0.02em;
-    color: #111827;
-}
-
-.kds-display-medium {
-    font-size: var(--kds-font-size-3xl);
-    font-weight: var(--kds-font-weight-bold);
-    line-height: 1.2;
-    margin: 0;
-    letter-spacing: -0.01em;
-    color: #111827;
-}
-
-/* Headline styles */
-.kds-headline-large {
-    font-size: var(--kds-font-size-2xl);
-    font-weight: var(--kds-font-weight-bold);
-    line-height: 1.3;
-    margin: 0;
-}
-
-.kds-headline-medium {
-    font-size: var(--kds-font-size-xl);
-    font-weight: var(--kds-font-weight-bold);
-    line-height: 1.3;
-    margin: 0;
-}
-
-.kds-headline-small {
-    font-size: var(--kds-font-size-lg);
-    font-weight: var(--kds-font-weight-bold);
-    line-height: 1.4;
-    margin: 0;
-}
-
-/* Title styles */
-.kds-title-large {
-    font-size: var(--kds-font-size-xl);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    margin: 0;
-}
-
-.kds-title-medium {
-    font-size: var(--kds-font-size-base);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    margin: 0;
-}
-
-.kds-title-small {
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    margin: 0;
-}
-
-/* Body text styles */
-.kds-body-large {
-    font-size: var(--kds-font-size-lg);
-    font-weight: var(--kds-font-weight-regular);
-    line-height: 1.5;
-}
-
-.kds-body-medium {
-    font-size: var(--kds-font-size-base);
-    font-weight: var(--kds-font-weight-regular);
-    line-height: 1.5;
-}
-
-.kds-body-small {
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-regular);
-    line-height: 1.5;
-}
-
-/* Label styles */
-.kds-label-large {
-    font-size: var(--kds-font-size-base);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    letter-spacing: 0.01em;
-}
-
-.kds-label-medium {
-    font-size: var(--kds-font-size-sm);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    letter-spacing: 0.01em;
-}
-
-.kds-label-small {
-    font-size: var(--kds-font-size-xs);
-    font-weight: var(--kds-font-weight-semibold);
-    line-height: 1.5;
-    letter-spacing: 0.02em;
-}
-
-/* Text utilities */
-.kds-text-center {
-    text-align: center;
-}
-
-.kds-text-left {
-    text-align: left;
-}
-
-.kds-text-right {
-    text-align: right;
-}
-
-.kds-text-muted {
-    color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
-}
-
-.kds-text-primary {
-    color: var(--primary);
-}
-
-.kds-text-success {
-    color: var(--kds-color-success);
-}
-
-.kds-text-error {
-    color: var(--kds-color-error);
-}
-
-.kds-text-warning {
-    color: var(--kds-color-warning);
-}
-
-/* Font weight utilities */
-.kds-font-regular {
-    font-weight: var(--kds-font-weight-regular);
-}
-
-.kds-font-medium {
-    font-weight: var(--kds-font-weight-medium);
-}
-
-.kds-font-semibold {
-    font-weight: var(--kds-font-weight-semibold);
-}
-
-.kds-font-bold {
-    font-weight: var(--kds-font-weight-bold);
-}
-
 /* ========================================
    Width & Display Utilities
    ======================================== */
@@ -1659,6 +1848,80 @@ select:focus {
     margin: 0;
 }
 
+/* ========================================
+   CHECKBOX & RADIO GROUPS
+   Form selection components
+   ======================================== */
+
+/* Checkbox Group */
+.kds-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+}
+
+/* Radio Group */
+.kds-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+}
+
+/* Checkbox Label - BeerCSS override */
+label.checkbox,
+label.radio {
+    display: flex;
+    align-items: center;
+    padding: var(--kds-spacing-3) var(--kds-spacing-4);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #111827;
+}
+
+label.checkbox:hover,
+label.radio:hover {
+    background-color: #F9FAFB;
+}
+
+/* Checkbox/Radio Input */
+label.checkbox input[type="checkbox"],
+label.radio input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    margin-right: var(--kds-spacing-3);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+/* Checkbox/Radio Text */
+label.checkbox span,
+label.radio span {
+    flex: 1;
+    cursor: pointer;
+}
+
+/* Checked state */
+label.checkbox input[type="checkbox"]:checked,
+label.radio input[type="radio"]:checked {
+    accent-color: var(--primary);
+}
+
+/* Disabled state */
+label.checkbox input[type="checkbox"]:disabled,
+label.radio input[type="radio"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+label.checkbox:has(input:disabled),
+label.radio:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
 /* ========================================
    ONBOARDING COMPONENTS
    Multi-stage onboarding flow with form validation
@@ -1835,6 +2098,8 @@ select:focus {
 /* Upload zone content */
 .kds-file-upload-icon {
     font-size: 48px;
+    min-width: 48px;
+    min-height: 48px;
     color: #9CA3AF;
     margin-bottom: var(--kds-spacing-3);
 }
@@ -1850,6 +2115,24 @@ select:focus {
     margin-bottom: var(--kds-spacing-2);
 }
 
+.kds-file-upload-button {
+    color: var(--primary);
+    text-decoration: underline;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.kds-file-upload-button:hover {
+    color: var(--kds-color-primary-700);
+}
+
+.kds-file-upload-helper {
+    font-size: var(--kds-font-size-sm);
+    color: #6B7280;
+    display: block;
+    margin-top: var(--kds-spacing-1);
+}
+
 .kds-file-upload-hint {
     font-size: var(--kds-font-size-sm);
     color: #6B7280;
@@ -1889,6 +2172,8 @@ select:focus {
     flex-shrink: 0;
     width: 40px;
     height: 40px;
+    min-width: 40px;
+    min-height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1898,6 +2183,11 @@ select:focus {
     font-size: 20px;
 }
 
+.kds-file-upload-item-icon i {
+    min-width: 20px;
+    min-height: 20px;
+}
+
 /* File info */
 .kds-file-upload-item-info {
     flex: 1;
@@ -1919,6 +2209,12 @@ select:focus {
     margin-top: 2px;
 }
 
+.kds-file-upload-item-size {
+    font-size: var(--kds-font-size-xs);
+    color: #6B7280;
+    margin-top: 2px;
+}
+
 /* File status */
 .kds-file-upload-item-status {
     flex-shrink: 0;
@@ -2147,19 +2443,37 @@ select:focus {
     }
 }
 
+/* ========================================
+   MODAL BASE CONFIGURATION
+   Override BeerCSS modal defaults
+   ======================================== */
+
+dialog.modal {
+    background: var(--kds-modal-bg);
+    border: none;
+    border-radius: var(--kds-modal-border-radius);
+    padding: var(--kds-modal-padding);
+    max-width: var(--kds-modal-max-width);
+    box-shadow: var(--kds-modal-shadow);
+}
+
+dialog.modal::backdrop {
+    background: var(--kds-modal-backdrop);
+}
+
 /* ========================================
    KYC BLOCKING MODAL
    Warning modal for high-risk sectors
    ======================================== */
 
 .kds-kyc-modal {
-    background: var(--kds-kyc-block-bg);
-    border: 2px solid var(--kds-kyc-block-border);
-    border-radius: var(--kds-radius-lg);
-    padding: var(--kds-spacing-8);
-    max-width: 600px;
+    background: var(--kds-modal-bg);
+    border: none;
+    border-radius: var(--kds-modal-border-radius);
+    padding: var(--kds-modal-padding);
+    max-width: var(--kds-modal-max-width);
     margin: 0 auto;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--kds-modal-shadow);
 }
 
 .kds-kyc-modal-icon {
@@ -2169,37 +2483,39 @@ select:focus {
 
 .kds-kyc-modal-icon i {
     font-size: 64px;
-    color: var(--kds-kyc-block-icon);
+    min-width: 64px;
+    min-height: 64px;
+    color: var(--kds-modal-icon-warning);
 }
 
 .kds-kyc-modal-title {
     font-size: var(--kds-font-size-2xl);
     font-weight: var(--kds-font-weight-bold);
-    color: var(--kds-kyc-block-text);
+    color: var(--kds-modal-title-color);
     text-align: center;
     margin-bottom: var(--kds-spacing-4);
 }
 
 .kds-kyc-modal-message {
     font-size: var(--kds-font-size-base);
-    color: var(--kds-kyc-block-text);
+    color: var(--kds-modal-text-color);
     line-height: 1.6;
     margin-bottom: var(--kds-spacing-6);
     text-align: center;
 }
 
 .kds-kyc-modal-contact {
-    background: #FFFFFF;
+    background: var(--kds-surface-elevated);
     border-radius: var(--kds-radius-md);
     padding: var(--kds-spacing-4);
     margin-bottom: var(--kds-spacing-6);
-    border-left: 4px solid var(--kds-kyc-block-icon);
+    border-left: 4px solid var(--primary);
 }
 
 .kds-kyc-modal-contact strong {
     display: block;
     font-weight: var(--kds-font-weight-semibold);
-    color: var(--kds-kyc-block-text);
+    color: var(--kds-modal-title-color);
     margin-bottom: var(--kds-spacing-2);
 }
 
@@ -2220,12 +2536,16 @@ select:focus {
 }
 
 @media (max-width: 480px) {
-    .kds-kyc-modal {
-        padding: var(--kds-spacing-6);
+    .kds-kyc-modal,
+    dialog.modal {
+        padding: var(--kds-modal-padding-mobile);
+        max-width: var(--kds-modal-max-width-mobile);
     }
 
     .kds-kyc-modal-icon i {
         font-size: 48px;
+        min-width: 48px;
+        min-height: 48px;
     }
 
     .kds-kyc-modal-actions {
@@ -2293,12 +2613,16 @@ select:focus {
     width: auto !important;
     height: auto !important;
     font-size: 80px !important;
+    min-width: 80px;
+    min-height: 80px;
 }
 
 /* Fix for benefit card icons - BeerCSS forces 24px, override for large icons */
 .kds-card-elevated i.icon-filled {
     width: auto !important;
     height: auto !important;
+    min-width: 48px;
+    min-height: 48px;
 }
 
 .kds-welcome-hero-title {
@@ -2531,27 +2855,721 @@ select:focus {
 }
 
 /* ========================================
-   Responsive Utilities
+   SUMMARY CARD (Review/Validation)
+   Used in validation stage to show user data
    ======================================== */
 
-@media (max-width: 768px) {
-    .khipu-hero h1 {
-        font-size: 2rem;
-    }
-
-    .khipu-hero p {
-        font-size: 1rem;
-    }
+.kds-summary-card {
+    background: white;
+    border: 1px solid #E5E7EB;
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-5);
+    margin-bottom: var(--kds-spacing-4);
+}
 
-    .khipu-card-elevated {
-        padding: 16px;
-    }
+.kds-summary-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--kds-spacing-4);
+    padding-bottom: var(--kds-spacing-3);
+    border-bottom: 1px solid #F3F4F6;
+}
 
-    .snackbar {
-        min-width: calc(100% - 32px);
-        left: 16px;
-        right: 16px;
+.kds-summary-card-title {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-2);
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-semibold);
+    color: #111827;
+}
+
+.kds-summary-card-edit {
+    color: var(--primary);
+    text-decoration: none;
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: opacity 0.2s ease;
+}
+
+.kds-summary-card-edit:hover {
+    text-decoration: underline;
+    opacity: 0.8;
+}
+
+.kds-summary-row {
+    display: flex;
+    padding: var(--kds-spacing-2) 0;
+}
+
+.kds-summary-label {
+    flex: 0 0 140px;
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    color: #6B7280;
+}
+
+.kds-summary-value {
+    flex: 1;
+    font-size: var(--kds-font-size-sm);
+    color: #111827;
+}
+
+.kds-summary-value.badge {
+    display: inline-block;
+    padding: 4px 12px;
+    background: var(--kds-color-primary-100);
+    color: var(--primary);
+    border-radius: var(--kds-radius-full);
+    font-weight: var(--kds-font-weight-medium);
+}
+
+/* ========================================
+   SUCCESS PAGE COMPONENTS
+   Celebration/completion page layout
+   ======================================== */
+
+.kds-success-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 80vh;
+    text-align: center;
+    padding: var(--kds-spacing-8);
+}
+
+.kds-success-icon {
+    width: 120px;
+    height: 120px;
+    background: #ECFDF5;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--kds-spacing-6);
+    animation: scaleIn 0.5s ease-out;
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.kds-success-icon i {
+    font-size: 80px;
+    min-width: 80px;
+    min-height: 80px;
+    color: var(--kds-color-success);
+}
+
+.kds-success-title {
+    font-size: var(--kds-font-size-3xl);
+    font-weight: var(--kds-font-weight-bold);
+    color: #111827;
+    margin-bottom: var(--kds-spacing-3);
+}
+
+.kds-success-subtitle {
+    font-size: var(--kds-font-size-lg);
+    color: #6B7280;
+    margin-bottom: var(--kds-spacing-8);
+    max-width: 600px;
+}
+
+.kds-next-steps {
+    background: white;
+    border: 1px solid #E5E7EB;
+    border-radius: var(--kds-radius-xl);
+    padding: var(--kds-spacing-6);
+    max-width: 700px;
+    width: 100%;
+    margin-bottom: var(--kds-spacing-6);
+    text-align: left;
+}
+
+.kds-next-steps-title {
+    font-size: var(--kds-font-size-xl);
+    font-weight: var(--kds-font-weight-semibold);
+    color: #111827;
+    margin-bottom: var(--kds-spacing-4);
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-2);
+}
+
+.kds-step-item {
+    display: flex;
+    gap: var(--kds-spacing-3);
+    padding: var(--kds-spacing-3) 0;
+    border-bottom: 1px solid #F3F4F6;
+}
+
+.kds-step-item:last-child {
+    border-bottom: none;
+}
+
+.kds-step-number {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    background: var(--kds-color-primary-100);
+    color: var(--primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--kds-font-weight-semibold);
+    font-size: var(--kds-font-size-sm);
+}
+
+.kds-step-content {
+    flex: 1;
+}
+
+.kds-step-title {
+    font-size: var(--kds-font-size-base);
+    font-weight: var(--kds-font-weight-semibold);
+    color: #111827;
+    margin-bottom: 4px;
+}
+
+.kds-step-description {
+    font-size: var(--kds-font-size-sm);
+    color: #6B7280;
+    line-height: 1.5;
+}
+
+.kds-success-actions {
+    display: flex;
+    gap: var(--kds-spacing-3);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+@media (max-width: 768px) {
+    .kds-success-title {
+        font-size: var(--kds-font-size-2xl);
+    }
+
+    .kds-success-subtitle {
+        font-size: var(--kds-font-size-base);
+    }
+
+    .kds-success-actions {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .kds-success-actions button {
+        width: 100%;
+    }
+}
+
+/* ========================================
+   Responsive Utilities
+   ======================================== */
+
+@media (max-width: 768px) {
+    .khipu-hero h1 {
+        font-size: 2rem;
+    }
+
+    .khipu-hero p {
+        font-size: 1rem;
+    }
+
+    .khipu-card-elevated {
+        padding: 16px;
+    }
+
+    .snackbar {
+        min-width: calc(100% - 32px);
+        left: 16px;
+        right: 16px;
         transform: none;
     }
 }
 
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Container utilities */
+.kds-container-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.max-w-500 {
+    max-width: 500px;
+}
+
+.max-w-1200 {
+    max-width: 1200px;
+}
+
+/* Margin top utilities */
+.kds-mt-3 {
+    margin-top: var(--kds-spacing-3);
+}
+
+/* ========================================
+   AUTOMATIC SPACING SYSTEM
+   Components handle their own spacing
+   ======================================== */
+
+/* Component showcase sections */
+.component-section {
+    margin-bottom: var(--kds-spacing-12);
+}
+
+.component-section > h2 {
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.component-item {
+    margin-bottom: var(--kds-spacing-10);
+}
+
+.component-item > h3 {
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.component-item > p {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.component-demo {
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.component-code {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.usage-note,
+.grails-note {
+    margin-top: var(--kds-spacing-4);
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.usage-note > h4,
+.grails-note > h4 {
+    margin-bottom: var(--kds-spacing-2);
+}
+
+/* Onboarding stage sections */
+.kds-stage-section {
+    margin-bottom: var(--kds-spacing-8);
+}
+
+.kds-stage-section:last-child {
+    margin-bottom: 0;
+}
+
+.kds-stage-section-title {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-stage-section-description {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+/* Stage header */
+.kds-stage-header {
+    margin-bottom: var(--kds-spacing-8);
+}
+
+.kds-stage-title {
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.kds-stage-subtitle {
+    margin-bottom: 0;
+}
+
+.kds-stage-header > button {
+    margin-top: var(--kds-spacing-3);
+}
+
+/* Showcase header */
+.showcase-header {
+    margin-bottom: var(--kds-spacing-8);
+}
+
+.showcase-header h1 {
+    margin-bottom: var(--kds-spacing-3);
+}
+
+/* Form groups and fields already have margin-bottom */
+.kds-field {
+    margin-bottom: var(--kds-spacing-4);
+}
+
+.kds-field:last-child {
+    margin-bottom: 0;
+}
+
+/* Grids handle spacing between children */
+.kds-grid-2col > *,
+.kds-grid-3col > * {
+    margin-bottom: 0; /* Grid gap handles spacing */
+}
+
+/* Alerts have margin */
+.kds-alert {
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.kds-alert:last-child {
+    margin-bottom: 0;
+}
+
+
+/* Modal actions (buttons at bottom) */
+.modal .kds-kyc-modal-content + div,
+.modal .kds-alert + div {
+    margin-top: var(--kds-spacing-6);
+}
+
+/* ===========================================================================
+
+/* ============================================
+   SIDEBAR NAVIGATION (Simple & Sticky)
+   ============================================ */
+
+/* Page layout - Flexbox horizontal */
+.kds-page-layout {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar - Sticky flotante a la izquierda */
+.kds-sidebar {
+    width: var(--kds-spacing-sidebar-width);
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    flex-shrink: 0;
+    position: sticky;
+    top: var(--kds-spacing-4);
+    margin: var(--kds-spacing-4);
+    height: fit-content;
+    overflow-y: auto;
+    box-shadow: var(--kds-shadow-2);
+}
+
+/* Sidebar Header */
+.kds-sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-3);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+    border-bottom: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg) var(--kds-radius-lg) 0 0;
+    cursor: pointer;
+    position: relative; /* ← Para anclar dropdown */
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-sidebar-header:hover {
+    background: var(--kds-color-action-hover);
+}
+
+/* Avatar circular */
+.kds-sidebar-avatar {
+    width: var(--kds-spacing-sidebar-icon-container-size);
+    height: var(--kds-spacing-sidebar-icon-container-size);
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-error-main);
+    color: var(--kds-color-background-paper);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-bold);
+    flex-shrink: 0;
+}
+
+/* Header text */
+.kds-sidebar-header-text {
+    flex: 1;
+    overflow: hidden;
+}
+
+.kds-sidebar-title {
+    font-size: var(--kds-font-size-base);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kds-sidebar-subtitle {
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Dropdown icon */
+.kds-sidebar-dropdown-icon {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-secondary);
+    flex-shrink: 0;
+    transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+/* Header Dropdown - Flotante */
+.kds-sidebar-header-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: var(--kds-z-index-drawer);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(calc(var(--kds-spacing-1) * -1));
+    transition: all var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-sidebar-header-dropdown.kds-dropdown-open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+/* Navigation */
+.kds-sidebar-nav {
+    padding: var(--kds-spacing-2) 0;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+/* Nav item */
+.kds-sidebar-nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+    color: var(--kds-color-text-primary);
+    text-decoration: none;
+    position: relative;
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.kds-sidebar-nav-item:hover {
+    background: var(--kds-color-action-hover);
+}
+
+/* Nav item icon */
+.kds-sidebar-nav-item i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-secondary);
+}
+
+/* Nav item text */
+.kds-sidebar-nav-item span {
+    font-size: var(--kds-font-size-base);
+    font-weight: var(--kds-font-weight-medium);
+}
+
+/* Active state - barra morada a la izquierda */
+.kds-sidebar-nav-item.active {
+    background: var(--kds-color-primary-hover);
+}
+
+.kds-sidebar-nav-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: calc(var(--kds-spacing-1) / 2);
+    background: var(--kds-color-primary-main);
+}
+
+.kds-sidebar-nav-item.active i,
+.kds-sidebar-nav-item.active span {
+    color: var(--kds-color-primary-main);
+}
+
+/* Main content */
+.kds-main-content {
+    flex: 1;
+    padding: var(--kds-spacing-8);
+    overflow-y: auto;
+}
+
+/* ============================================
+   MOBILE RESPONSIVE SIDEBAR
+   ============================================ */
+
+/* Mobile Topbar - oculto en desktop */
+.kds-mobile-topbar {
+    display: none;
+}
+
+/* Barra superior mobile del sidebar - oculta en desktop */
+.kds-sidebar-mobile-header {
+    display: none;
+}
+
+/* Botón cerrar sidebar */
+.kds-sidebar-close-btn {
+    border: none;
+    background: transparent;
+    border-radius: var(--kds-radius-sm);
+    cursor: pointer;
+    padding: 0;
+}
+
+.kds-sidebar-close-btn:hover {
+    background: var(--kds-color-action-hover);
+}
+
+.kds-sidebar-close-btn i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-primary);
+}
+
+/* Botón hamburger */
+.kds-hamburger-btn {
+    width: var(--kds-spacing-sidebar-icon-container-size);
+    height: var(--kds-spacing-sidebar-icon-container-size);
+    border: none;
+    background: transparent;
+    border-radius: var(--kds-radius-sm);
+    cursor: pointer;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-hamburger-btn:hover {
+    background: var(--kds-color-action-hover);
+}
+
+.kds-hamburger-btn i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-primary);
+}
+
+/* Mobile (≤ 768px) */
+@media (max-width: 768px) {
+    /* Mostrar topbar */
+    .kds-mobile-topbar {
+        display: flex;
+        align-items: center;
+        gap: var(--kds-spacing-2);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--kds-spacing-7);
+        padding: 0 var(--kds-spacing-2);
+        background: var(--kds-color-background-paper);
+        border-bottom: 1px solid var(--kds-color-divider);
+        z-index: var(--kds-z-index-appbar);
+        font-size: var(--kds-font-size-lg);
+        font-weight: var(--kds-font-weight-semibold);
+    }
+
+    /* Layout con espacio para topbar */
+    .kds-page-layout {
+        padding-top: var(--kds-spacing-7);
+    }
+
+    /* Sidebar = drawer full-width */
+    .kds-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 100vw;
+        margin: 0;
+        height: 100%;
+        transform: translateX(-100%);
+        transition: transform var(--kds-transition-standard) var(--kds-easing-ease-out);
+        z-index: var(--kds-z-index-drawer);
+        border-radius: 0;
+    }
+
+    /* Barra superior mobile visible */
+    .kds-sidebar-mobile-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: var(--kds-spacing-7);
+        padding: 0 var(--kds-spacing-2);
+        background: var(--kds-color-background-paper);
+        border-bottom: 1px solid var(--kds-color-divider);
+        font-size: var(--kds-font-size-lg);
+        font-weight: var(--kds-font-weight-semibold);
+        color: var(--kds-color-text-primary);
+    }
+
+    /* Sidebar abierto */
+    .kds-sidebar-open {
+        transform: translateX(0);
+    }
+
+    /* Main content full-width */
+    .kds-main-content {
+        margin-left: 0;
+    }
+}
+
+/* ============================================
+   DEMO PAGE STYLES
+   ============================================ */
+
+.demo-card {
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-6);
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.code-block {
+    background: var(--kds-color-background-elevated);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-4);
+    font-family: var(--kds-font-family-mono);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+    color: var(--kds-color-text-primary);
+}
+
+.kds-text-secondary-color {
+    color: var(--kds-color-text-secondary);
+}
+
+.kds-main-content > .kds-body-large {
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.kds-main-content > .demo-card ul {
+    line-height: var(--kds-line-height-relaxed);
+}
+