*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}img,svg{display:block;max-width:100%;height:auto}button{font:inherit;border:none;cursor:pointer}input,label{font:inherit}:root{--_hue: 245;--_size: .875rem;--_radius: .2em;--_tspeed_fast: .18s;--_tspeed_slow: .3s;--_ttype_squish: cubic-bezier(.86, -.1, .27, 1.15);--bg--light: var(--_hue) 30% 94%;--txt--light: var(--_hue) 40% 5%;--accent--light: var(--_hue) 55% 50%;--accent1--light: 10 80% 60%;--muted--light: var(--_hue) 30% 99%;--bg--dark: var(--_hue) 15% 10%;--txt--dark: var(--_hue) 30% 88%;--accent--dark: var(--_hue) 50% 50%;--accent1--dark: 10 55% 50%;--muted--dark: var(--_hue) 20% 4%;--dark-pink: 337 48% 49%;--charm-pink: 337 60% 64%;--water-white: 220 60% 99%;--san-juan-blue: 207 33% 32%;--san-juan-blue--light: 207 16% 50%;--mirage-blue: 207 27% 15%;--bg: var(--bg--light);--txt: var(--txt--light);--accent: var(--accent--light)}body{width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:var(--_size);color:hsl(var(--san-juan-blue));background-color:hsl(var(--water-white));background:linear-gradient(180deg,hsl(var(--water-white)),white)}#root{width:100%;max-width:420px;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden;position:relative}@media screen and (min-width: 421px){body{display:grid;place-items:center;margin-inline:auto}}.header__bg{background-color:hsl(var(--san-juan-blue));background:linear-gradient(180deg,hsl(var(--san-juan-blue)),hsl(var(--san-juan-blue--light)));padding-block:.75rem;color:hsl(var(--water-white))}.wrapper{padding-top:2rem;padding-inline:1rem;position:relative}.grid{display:grid;place-items:center;gap:1rem}.scroller{display:grid;gap:1rem;grid-auto-flow:column;grid-auto-columns:100%;padding:0;overflow-x:auto;overscroll-behavior-inline:contain}.scroller::-webkit-scrollbar{display:none}.snaps-inline{scroll-snap-type:inline mandatory;scroll-padding-inline:1rem}.scroller-element{scroll-snap-align:center}.scroll-enable{max-height:70%;overflow-y:auto;position:relative}h1{font-size:calc(var(--_size) * 1.5);text-align:center}h3{text-align:center;margin-top:1rem}.meter_title{font-size:2rem;letter-spacing:2px;text-align:center;text-transform:uppercase}.meter_subtitle{font-size:1.5rem;margin-top:.5rem}.btn{max-width:fit-content;display:flex;place-items:center;gap:.5em;background-color:red;color:hsl(var(--bg));text-decoration:none;padding:.5em;border-radius:var(--_radius);box-shadow:.05em .1em .9em hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish),background-color var(--_tspeed_fast) var(--_ttype_squish)}.btn :where(svg,img,span){pointer-events:none}.btn :where(svg,img){width:var(--_size);height:var(--_size)}.btn:where(:active,:hover){background-color:hsl(var(--accent) / .7);box-shadow:0 0 0 hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent))}.btn:focus{outline:none}.btn:focus-visible{box-shadow:0 0 0 hsl(var(--accent) / .3),0 0 0 .2em hsl(var(--bg)),0 0 0 .4em hsl(var(--accent) / .7)}.btn-settings{padding:1em;border-radius:1rem;width:60%;background-color:hsl(var(--san-juan-blue--light));color:hsl(var(--water-white))}.btn-alert{background-color:hsl(var(--charm-pink))}.navbar{max-width:420px;display:flex;justify-content:space-between;background-color:hsl(var(--san-juan-blue));color:#fff;position:absolute;left:0;bottom:0;width:100%}.navbar__btn{flex-grow:1;padding:.5rem 1rem;background-color:inherit;color:#fff;border:none;outline:none;cursor:pointer;transition:.3s}.navbar__icon{height:48px;width:48px}.navbar__btn.active{background-color:hsl(var(--dark-pink))}.cards-container{width:100%;padding:1rem;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:.75rem;flex-wrap:wrap}.card{text-align:center;border:3px solid hsl(var(--dark-pink));border-radius:1rem;overflow:hidden;box-shadow:1px 1px 3px 1px hsl(var(--charm-pink))}.card__header{margin-block:0;padding-block:.5rem;background-color:hsl(var(--dark-pink));color:hsl(var(--water-white))}.card__content{display:grid;margin-top:1rem;gap:1rem;color:hsl(var(--san-juan-blue));font-weight:700}.trend{font-size:1rem;margin-bottom:1rem}.good{color:#0c0}.bad{color:hsl(var(--dark-pink))}table{margin-top:2rem;margin-inline:auto;border-collapse:collapse;border-spacing:0;border:1px solid #ddd}th,td{min-width:100px;text-align:center;padding:.5rem 1rem;font-size:1rem}th{font-weight:700}thead{background-color:hsl(var(--dark-pink));color:hsl(var(--water-white))}tr:nth-child(2n){background-color:hsl(var(--charm-pink));color:hsl(var(--water-white));fill:hsl(var(--water-white))}.btn_trash,.btn_edit{background-color:transparent;margin-right:.5rem}.icon{height:24px;width:24px;color:hsl(var(--san-juan-blue--light))}tr:nth-child(2n) .icon{color:hsl(var(--water-white))}.di_display{border-radius:.5rem;background-color:hsl(var(--san-juan-blue--light));padding:1rem .5rem;display:flex;justify-content:space-around;font-size:3rem;font-weight:700}.di_display.light{background-color:hsl(var(--charm-pink))}.di_digit{display:inline-block;background-color:hsl(var(--water-white));color:hsl(var(--san-juan-blue));padding:.25rem;border-radius:.5rem}.vk-keypad{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:4rem}.vk-row{display:flex;gap:.5rem}.vk-btn{width:80px;height:64px;background-color:inherit;border:1px solid hsl(var(--dark-pink));color:hsl(var(--san-juan-blue));border-radius:.75rem;font-size:1.5rem}.vk-btn:active{background-color:hsl(var(--dark-pink));border:1px solid hsl(var(--dark-pink));color:hsl(var(--water-white))}.vk-btn-validate{color:#0d0}.vk-btn-cancel{color:#d00}.modal{width:90%;display:grid;place-items:center;background-color:hsl(var(--water-white));border:1px solid hsl(var(--dark-pink));border-radius:.5rem;padding:1rem;position:absolute;top:1rem}.label-file{cursor:pointer;font-weight:700;background-color:hsl(var(--san-juan-blue--light));color:hsl(var(--water-white));border-radius:.5rem;padding:.5rem 1rem}.input-file{display:none}.input-file::file-selector-button{font:inherit;background-color:hsl(var(--san-juan-blue--light));color:hsl(var(--water-white));border-radius:.5rem;outline:none;box-shadow:none;padding:.5rem 1rem}.modal__btn{padding:.5rem 1rem;border-radius:.5rem;margin-top:1rem;margin-inline:1rem;background-color:hsl(var(--san-juan-blue--light));color:hsl(var(--water-white))}.btn_cancel{background-color:hsl(var(--charm-pink))}