@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
.animation-item-out{
    animation: item-out 0.5s ease forwards;
}
.animation-item-out-left{
  animation: item-out-left 0.5s ease forwards;
}
.animation-item-out-bottom{
  animation: item-out-bottom 0.5s ease forwards;
}
.animation-item-out-2{
    animation: item-out-2 0.5s ease forwards;
}
.animation-highlight-2 {
  animation: animation-highlight-2 1000ms;
}
.animation-fade-in {
  animation: animation-fade-in 0.5s ease backwards;
}
.animation-general-in {
  animation: animation-general-in 0.4s ease forwards;
}
@keyframes animation-highlight-2{
  0%{
    transform:scale(1);
    box-shadow: 0 0 0 0px var(--md-sys-color-primary-container) inset;
  }
  50%{
    box-shadow: 0 0 0 4px var(--md-sys-color-primary-container) inset;
  }
  100%{
    transform:scale(1);
    box-shadow: 0 0 0 0px var(--md-sys-color-primary-container) inset;
  }
}
@keyframes search-result-item-in {
    from {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
}
@keyframes item-out {
    from {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
    to {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(-20px);
    }
}
@keyframes item-out-left {
    from {
      opacity: 1;
      filter: blur(0);
      transform: translateX(0);
    }
    to {
      opacity: 0;
      filter: blur(16px);
      transform: translateX(-64px);
    }
}
@keyframes item-out-bottom {
    from {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
    to {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(24px);
    }
}
@keyframes animation-general-in {
    from {
      opacity: 0;
      filter: blur(16px);
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }
}
@keyframes animation-general-in-2 {
  from {
    opacity: 0;
    filter: blur(32px);
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
.today-appt-item-out{
    overflow:hidden;
    animation: today-appt-item-out 250ms forwards;
}
@keyframes today-appt-item-out {
    from{
        padding:16px 16px;
        max-height:94px;
    }
    to{
        filter: blur(16px);
        opacity: 0;
        margin-bottom:-8px;
        padding:0px 16px;
        max-height:0px;
    }
}
.animation-shake{
    animation: shake 0.5s cubic-bezier(.6,.6,.12,1.26) forwards;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}
.animation-loading-1{
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.animation-loading-1::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius:inherit;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent) !important;
  transform: translateX(-100%);
  animation: hover-magic-1-shimmer 1s infinite;
  z-index: 2;
  box-shadow:none;
}
@media (prefers-color-scheme: dark){
  .animation-loading-1::before {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent) !important;
  }
}
@keyframes hover-magic-1-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.animation-loading-2 {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.animation-loading-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--md-sys-color-background), transparent 20%), transparent);
    transform: translateX(-100%);
    animation: shimmer-overlay 1s infinite;
    border-radius: inherit;
    z-index: 20;
    box-shadow:none;
}
.animation-loading-2.surface-container::before {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--md-sys-color-surface-container), transparent 20%), transparent);
}
@keyframes shimmer-overlay {
    100% {
        transform: translateX(100%);
    }
}
.entry-animation-1 {
  position: relative;
  overflow: hidden;
}
.entry-animation-1::before {
  content: '';
  position: absolute;
  inset:0;
  background: linear-gradient(to right, transparent, var(--md-sys-color-surface-container) 30%);
  transform: scaleX(1.4) translateX(100%);
  animation: entry-animation-1 700ms cubic-bezier(0.38,0.49,0,1);
  transform-origin: right;
}
@keyframes entry-animation-1 {
  from {
    transform: scaleX(1.4) translateX(0%);
  }
  to {
    transform: scaleX(1.4) translateX(100%);
  }
}
.entry-animation-1-background {
  position: relative;
  overflow: hidden;
}
.entry-animation-1-background::before {
  content: '';
  position: absolute;
  inset:0;
  background: linear-gradient(to right, transparent, var(--md-sys-color-background) 30%);
  transform: scaleX(1.4) translateX(100%);
  animation: entry-animation-1 700ms cubic-bezier(0.38,0.49,0,1);
  transform-origin: right;
}
@keyframes animation-fade-in {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes animation-grow-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
.content-box{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  height: auto;
  background:var(--md-sys-color-surface-container);
  padding:24px;
  box-sizing: border-box;
  border-radius:24px;
}
.content-box.light-color{background:var(--md-sys-color-surface-container-low)}
.content-box.lowest-color{background:var(--md-sys-color-surface-container-lowest)}
.content-box.transparent{background:var(--md-sys-color-background)}
.content-box .content-divisor{display:flex; max-width: fit-content;}
.content-box.rounded{border-radius: 40px;}
.content-box.minimal{
  background:none;
  padding:0;
}
.content-box.card{
  flex-grow:1;
  flex-basis: 200px;
  user-select: none;
  cursor: pointer;
  max-height: 300px;
  overflow: hidden;
}
.content-box.card::before{
  content: "";
  position:absolute;
  left:0;right:0;bottom:0;
  width:100%;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--md-sys-color-surface-container) 95%);
}
.content-box.card::-webkit-scrollbar{display:none}
.content-box.card.small{
  flex-basis: 64px;
  transition:box-shadow 125ms;
}
.content-box.card.small:hover{
  box-shadow: 0px 0px 0px 1px var(--md-sys-color-outline-variant) inset;
}
.content-box.card.style-detailed{
  background:var(--md-sys-color-surface-container-high);
  border-radius:40px;
}
.content-box.style-glass{
  background:rgba(var(--md-sys-color-neutral-on-background), 0.02);
  box-shadow: 1px 1px 1px 0px rgba(var(--md-sys-color-neutral-background), 0.60) inset,
              -1px -1px 1px 0px rgba(var(--md-sys-color-neutral-background), 0.60) inset,
              0px 0px 16px 0px rgba(var(--md-sys-color-neutral-on-background), 0.08);
}
@media (prefers-color-scheme: dark) {
  .content-box.style-glass{
    box-shadow: 1px 1px 1px 0px rgba(var(--md-sys-color-neutral-background), 0.24) inset,
              -1px -1px 1px 0px rgba(var(--md-sys-color-neutral-background), 0.24) inset;
  }
}
button.style-1{
    font-family: "Bricolage Grotesque", system-ui !important;
    font-size:24px;
    font-weight:500;
    padding:16px 32px;
    border-radius:64px;
    outline:none;
    border:none;
    cursor:pointer;
    transition: transform 0.3s cubic-bezier(0.38,0.49,0,1.16);
}
button.style-1:hover{
    transform: scale(1.1);
}
button.style-2{
    font-family: "Inter", sans-serif;
    font-size:14px;
    padding:8px 12px;
    border:none;
    border-radius:12px;
    background:var(--md-sys-color-surface-container);
    color:var(--md-sys-color-on-background-text);
    cursor:pointer;
    transition: background 0.3s, color 125ms;
}
button.style-2[active]{
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
}
button.style-2[active] md-icon{
    font-variation-settings: 'FILL' 1;
}
button.style-2.rounded{
    font-weight:500;
    padding: 12px 16px;
    border-radius:12px;
    transition: padding 400ms cubic-bezier(0.38,0.49,0,2),
                background 125ms,
                color 125ms,
                border-radius 200ms cubic-bezier(0.38,0.49,0,1.5);
}
button.style-2.rounded:hover{
    padding: 12px 18px;
}
button.style-2.rounded[active]{
    border-radius:64px;
    padding: 12px 20px;
}
button.style-2.playful{
    transition: padding 400ms cubic-bezier(0.38,0.49,0,2),
                background 125ms,
                color 125ms,
                border-radius 200ms cubic-bezier(0.38,0.49,0,1.5);
}
button.style-2.playful:hover{
    padding: 8px 14px;
    border-radius:24px;
}
button.style-2.playful[active]{
    border-radius:64px;
    padding: 8px 18px;
}
button.style-2[filled-tonal]{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-background);
}
button.style-3{
    font-family: "Inter", sans-serif;
    font-size:16px;
    padding:16px 24px;
    border:none;
    border-radius:24px;
    cursor:pointer;
    transition: transform 0.3s cubic-bezier(0.38,0.49,0,1.16);
}
button.style-3:focus{
    animation: buttonClickAnimation 500ms cubic-bezier(.37,1.42,.37,1);
}
button.style-4, a.style-4{
    border:none;
    outline: none;
    border-radius:24px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    --md-icon-size: 18px;
    padding:8px 16px;
    cursor:pointer;
}
button.style-5{
    display:flex;
    align-items: center;
    justify-content:center;
    padding:12px;
    border-radius:64px;
    border:none;
    cursor:pointer;
}
button.style-2:disabled, button.style-3:disabled, button.style-4:disabled, a.style-4:disabled{
    opacity:0.5;
}
button.style-6{
    padding:6px 10px;
    border-radius:16px;
    border:none;
    cursor:pointer;
    box-shadow: 0px 0px 0px 1px var(--md-sys-color-outline-variant) inset;
    background:var(--md-sys-color-background);
    font-family: 'inter', sans-serif;
}
button.style-7{
    position:relative;
    display:flex;
    align-items: center;
    gap:8px;
    font-family: "Dm sans", sans-serif;
    font-size:14px;
    line-height:16px;
    padding:12px 18px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition: background 0.3s, color 125ms;
}
button.style-7.for-icon{
    padding:12px !important;
}
button.style-7.for-icon.small{
    padding:10px !important;
    --md-icon-size:20px;
}
button.style-7[active]{
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
}
button.style-7[active] md-icon{
    font-variation-settings: 'FILL' 1;
}
button.style-7.rounded{
    border-radius:24px;
}
.style-cap::before{
    content: '';
    position: absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 80%, black 20%) inset, inset 0 2.8px 0 0 rgba(255,255,255, .3);
    z-index:1;
}
button.style-8{
    border:none;
    border-radius:50%;
    display:flex;
    flex-grow:1;
    aspect-ratio:1/1;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    max-width:600px;
    max-height:600px;
}
.primary {
  background-color: var(--md-sys-color-primary);
}
.primary-text {
  color: var(--md-sys-color-primary);
}
.on-primary {
  background-color: var(--md-sys-color-on-primary);
}
.on-primary-text {
  color: var(--md-sys-color-on-primary);
}
.primary-container {
  background-color: var(--md-sys-color-primary-container);
}
.primary-container-text {
  color: var(--md-sys-color-primary-container);
}
.on-primary-container {
  background-color: var(--md-sys-color-on-primary-container);
}
.on-primary-container-text {
  color: var(--md-sys-color-on-primary-container);
}
.secondary {
  background-color: var(--md-sys-color-secondary);
}
.secondary-text {
  color: var(--md-sys-color-secondary);
}
.on-secondary {
  background-color: var(--md-sys-color-on-secondary);
}
.on-secondary-text {
  color: var(--md-sys-color-on-secondary);
}
.secondary-container {
  background-color: var(--md-sys-color-secondary-container);
}
.secondary-container-text {
  color: var(--md-sys-color-secondary-container);
}
.on-secondary-container {
  background-color: var(--md-sys-color-on-secondary-container);
}
.on-secondary-container-text {
  color: var(--md-sys-color-on-secondary-container);
}
.tertiary {
  background-color: var(--md-sys-color-tertiary);
}
.tertiary-text {
  color: var(--md-sys-color-tertiary);
}
.on-tertiary {
  background-color: var(--md-sys-color-on-tertiary);
}
.on-tertiary-text {
  color: var(--md-sys-color-on-tertiary);
}
.tertiary-container {
  background-color: var(--md-sys-color-tertiary-container);
}
.tertiary-container-text {
  color: var(--md-sys-color-tertiary-container);
}
.on-tertiary-container {
  background-color: var(--md-sys-color-on-tertiary-container);
}
.on-tertiary-container-text {
  color: var(--md-sys-color-on-tertiary-container);
}
.error {
  background-color: var(--md-sys-color-error);
}
.error-text {
  color: var(--md-sys-color-error);
}
.error-container {
  background-color: var(--md-sys-color-error-container);
}
.error-container-text {
  color: var(--md-sys-color-error-container);
}
.on-error {
  background-color: var(--md-sys-color-on-error);
}
.on-error-text {
  color: var(--md-sys-color-on-error);
}
.on-error-container {
  background-color: var(--md-sys-color-on-error-container);
}
.on-error-container-text {
  color: var(--md-sys-color-on-error-container);
}
.background {
  background-color: var(--md-sys-color-background);
}
.background-text {
  color: var(--md-sys-color-background);
}
.on-background {
  background-color: var(--md-sys-color-on-background);
}
.on-background-text {
  color: var(--md-sys-color-on-background);
}
.surface {
  background-color: var(--md-sys-color-surface);
}
.surface-text {
  color: var(--md-sys-color-surface);
}
.on-surface {
  background-color: var(--md-sys-color-on-surface);
}
.on-surface-text {
  color: var(--md-sys-color-on-surface);
}
.surface-variant {
  background-color: var(--md-sys-color-surface-variant);
}
.surface-variant-text {
  color: var(--md-sys-color-surface-variant);
}
.on-surface-variant {
  background-color: var(--md-sys-color-on-surface-variant);
}
.on-surface-variant-text {
  color: var(--md-sys-color-on-surface-variant);
}
.outline {
  background-color: var(--md-sys-color-outline);
}
.outline-text {
  color: var(--md-sys-color-outline);
}
.inverse-on-surface {
  background-color: var(--md-sys-color-inverse-on-surface);
}
.inverse-on-surface-text {
  color: var(--md-sys-color-inverse-on-surface);
}
.inverse-surface {
  background-color: var(--md-sys-color-inverse-surface);
}
.inverse-surface-text {
  color: var(--md-sys-color-inverse-surface);
}
.inverse-primary {
  background-color: var(--md-sys-color-inverse-primary);
}
.inverse-primary-text {
  color: var(--md-sys-color-inverse-primary);
}
.shadow {
  background-color: var(--md-sys-color-shadow);
}
.shadow-text {
  color: var(--md-sys-color-shadow);
}
.surface-tint {
  background-color: var(--md-sys-color-surface-tint);
}
.surface-tint-text {
  color: var(--md-sys-color-surface-tint);
}
.outline-variant {
  background-color: var(--md-sys-color-outline-variant);
}
.outline-variant-text {
  color: var(--md-sys-color-outline-variant);
}
.scrim {
  background-color: var(--md-sys-color-scrim);
}
.scrim-text {
  color: var(--md-sys-color-scrim);
}
.container-low {
  background-color: var(--md-sys-color-surface-container-low);
}
:root{
    --v9501004a: 10s;
    --v4349373e: 0.5;
    --e43cd9c0: 1;
    --v49c3eedc: 15s;
    --v1448d375: 1;
}
.background.noise[data-v-32393eee] {
    position: absolute;
    inset: 0;
    background-image: url(/img/ruido/a390489535.png);
    background-size: repeat;
    z-index: 2;
    opacity: .3
}
.noise[data-v-32393eee] {
    position: relative;
    width: 100%;
    height: 100%;
    inset: 0;
    background-image: url(/img/ruido/a390489535.png);
    background-size: repeat;
    z-index: 2;
    opacity: .3
}
@media(prefers-color-scheme: dark) {
    .background>.noise[data-v-32393eee] {
        background-image:url(/img/ruido/eb5937db63.png)
    }
    .noise[data-v-32393eee] {
        background-image:url(/img/ruido/eb5937db63.png)
    }
}
  @media(prefers-color-scheme: dark){
    .background.noise[data-v-32393eee] {
        background-image:url(/img/ruido/eb5937db63.png)
    }
  }
.background[data-v-32393eee]:before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at center,var(--md-sys-color-primary-container) 0%,transparent 70%);
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    animation: blob-move-1-32393eee var(--v9501004a) linear infinite;
    opacity: var(--v4349373e);
    scale: var(--e43cd9c0);
    filter: saturate(150%);
    transition: opacity 1s ease
}
.transparent{
  background-color: transparent;
}
.background[data-v-32393eee]:after {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at center,var(--md-sys-color-tertiary-container) 0%,transparent 70%);
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    animation: blob-move-2-32393eee var(--v49c3eedc) linear infinite;
    opacity: var(--v4349373e);
    scale: var(--e43cd9c0);
    filter: saturate(150%);
    transition: opacity 1s ease
}
.background[data-v-32393eee] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    opacity: var(--v1448d375)
}
@keyframes blob-move-1-32393eee {
    0% {
        transform: rotate(0) translate(150px) rotate(0)
    }
    to {
        transform: rotate(360deg) translate(150px) rotate(-360deg)
    }
}
@keyframes blob-move-2-32393eee {
    0% {
        transform: rotate(180deg) translateY(120px) rotate(-180deg)
    }
    to {
        transform: rotate(-180deg) translateY(120px) rotate(180deg)
    }
}
.direction-row{flex-direction:row;}
.direction-column{flex-direction:column;}
.direction-row-column{flex-direction:row !important;}
.justify-right{justify-content:flex-end;}
.justify-center{justify-content:center;}
.justify-around{justify-content:space-around;}
.justify-start{justify-content:flex-start;}
.justify-center-0{justify-content:center;}
.justify-between{justify-content:space-between; flex-wrap: wrap;}
.justify-between-wide-screen{justify-content: space-between;}
.box-sizing{box-sizing:border-box;}
.align-center{align-items:center;}
.align-stretch{align-items: stretch;}
.align-center-0{align-items:center;}
.align-start{align-items:flex-start;}
.align-right{align-items:flex-end;}
.vh-center{justify-content:center;align-items:center;}
.grow-1{flex-grow:1;}
.grow-1-0{flex-grow:1}
.grow-0-1{flex-grow:0;}
.width-100{width:100%;}
.width-48-48{width:48px; height:48px;}
.width-auto{width:auto;}
.max-width-100{max-width:100% !important;}
.height-61{height:61.6px !important;}
.height-100{height:100%;}
.height-265{height: 265px;}
.height-100-100{height:100vh; width: 100%;}
.height-100-0{height:100%; min-height: 100%;}
.height-0-100{height:auto; min-height: unset;}
.max-width-1600{max-width:1600px;}
.max-width-1200{max-width:1200px;}
.max-width-800{max-width:800px;}
.max-width-600{max-width:600px;}
.max-width-400{max-width:400px;}
.width-400{width:400px;}
.max-width-800-m-24{max-width: 800px;}
.min-height-100{min-height:100%;}
.max-height-100{max-height:100%;}
.min-height-fit-content{min-height:fit-content;}
.v-margin{margin:8px 0;}
.v-margin-large{margin:16px 0;}
.v-margin-extra-large{margin:24px 0;}
.v-margin-16{margin-top: 16px; margin-bottom:16px;}
.v-margin-24{margin-top: 24px; margin-bottom:24px;}
.v-margin-32{margin-top: 32px; margin-bottom:32px;}
.top-margin-0{margin-top:0px;}
.top-margin-8{margin-top:8px;}
.top-margin-16{margin-top:16px;}
.top-margin-24{margin-top:24px;}
.top-margin-32{margin-top:32px;}
.top-margin-40{margin-top:40px;}
.top-margin-48{margin-top:48px;}
.top-margin-56{margin-top:56px;}
.top-margin-64{margin-top:64px;}
.bottom-margin-4{margin-bottom:4px;}
.bottom-margin-8{margin-bottom:8px;}
.bottom-margin-16{margin-bottom:16px;}
.bottom-margin-24{margin-bottom:24px;}
.bottom-margin-32{margin-bottom:32px;}
.bottom-margin-40{margin-bottom:40px;}
.bottom-margin-48{margin-bottom:48px;}
.bottom-margin-56{margin-bottom:56px;}
.bottom-margin-64{margin-bottom:64px;}
.left-margin-4{margin-left:4px;}
.left-margin-8{margin-left:8px;}
.left-margin-16{margin-left:16px;}
.left-margin-24{margin-left:24px;}
.left-margin-32{margin-left:32px;}
.left-margin-40{margin-left:40px;}
.left-margin-48{margin-left:48px;}
.right-margin-16{margin-right:16px;}
.right-margin-24{margin-right:24px;}
.right-margin-32{margin-right:32px;}
.margin-0{margin:0px !important;}
.margin-8{margin:8px;}
.margin-16{margin:16px;}
.margin-24{margin:24px;}
.margin-32{margin:32px;}
.margin-40{margin:40px;}
.gap-0{gap:0px;}
.gap-4{gap:4px;}
.gap-8{gap:8px;}
.gap-10{gap:10px;}
.gap-16{gap:16px;}
.gap-24{gap:24px;}
.gap-32{gap:32px;}
.gap-40{gap:40px;}
.gap-48{gap:48px;}
.gap-56{gap:56px;}
.gap-64{gap:64px;}
.h-gap-24{column-gap: 24px;}
.padding-0{padding:0px !important;}
.padding-1{padding:1px !important;}
.padding-4{padding:4px !important;}
.padding-8{padding:8px !important;}
.padding-10{padding:10px}
.padding-16{padding:16px}
.padding-20{padding:20px}
.padding-24{padding:24px !important;}
.padding-32{padding:32px !important;}
.padding-40{padding:40px !important;}
.padding-48{padding:48px !important;}
.padding-56{padding:56px !important;}
.padding-64{padding:64px !important;}
.t-padding-0{padding-top:0px !important;}
.t-padding-8{padding-top:8px !important;}
.t-padding-16{padding-top:16px !important;}
.t-padding-24{padding-top:24px !important;}
.h-padding-4{padding-left:4px !important; padding-right:4px !important;}
.h-padding-8{padding-left:8px !important; padding-right:8px !important;}
.h-padding-16{padding-left:16px !important; padding-right:16px !important;}
.h-padding-24{padding-left:24px !important; padding-right:24px !important;}
.padding-48-32{padding:48px!important;}
.padding-0-16{padding:0px !important;}
.padding-0-24{padding:0px !important;}
.top-padding-0{padding-top:0px !important;}
.padding-110{padding-top:110px!important;}
.top-padding-0-16{padding-top:0px !important;}
.v-padding-0{padding-top:0px !important; padding-bottom:0px !important;}
.v-padding-8{padding-top:8px !important; padding-bottom:8px !important;}
.v-padding-16{padding-top:16px !important; padding-bottom:16px !important;}
.v-padding-24{padding-top:24px !important; padding-bottom:24px !important;}
.b-padding-0{padding-bottom:0px !important;}
.b-padding-8{padding-bottom:8px !important;}
.l-padding-8{padding-left:8px !important;}
.l-padding-16{padding-left:16px !important;}
.r-padding-8{padding-right:8px !important;}
.r-padding-16{padding-right:16px !important;}
.box-sizing{box-sizing: border-box;}
.fit-content{width:fit-content !important;}
.overflow-hidden{overflow:hidden;}
.overflow-auto{overflow:auto;}
.overflow-visible{overflow:visible !important;}
@media only screen and (max-width: 680px){
  .fit-content{width: unset; max-width: unset;}
  .grow-1-0{flex-grow: unset;}
  .justify-between-wide-screen{justify-content: initial;}
  .grow-0-1{flex-grow:1;}
  .align-center-0{align-items:initial;}
  .mobile-direction-row-reverse{flex-direction:row-reverse !important;}
  .height-100-0{height:auto; min-height: initial;}
  .height-0-100{height:100%; min-height: 100%;}
  .padding-48-32{padding:32px !important;}
  .flex-0-1{flex:1 !important;}
  .justify-center-0{justify-content:initial;}
  .max-width-800-m-24{max-width: calc(100% - 24px);}
  .direction-row-column{flex-direction:column !important;}
  .top-padding-0-16{padding-top:16px !important;}
  .top-padding-safe-area{padding-top: calc(env(safe-area-inset-top) + 24px) !important;}
  .bottom-padding-safe-area{padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;}
  .width-100-mobile{min-width:100% !important; box-sizing:border-box;}
  .padding-0-16{padding:16px !important;}
  .padding-0-24{padding:24px !important;}
  .mobile-bottom-action-bar {
    z-index: 1;
    backdrop-filter: blur(16px);
    position: sticky;
    bottom: -24px;
    width: calc(100% + 48px);
    margin: 0 -24px;
    padding: 16px 24px;
    box-sizing: border-box;
  }
}
.simple-container{display:flex;}
.basis-small{flex-basis:132px}
.basis-normal{flex-basis:200px}
.basis-large{flex-basis:400px}
.basis-large-2{flex-basis:600px}
.basis-large-3{flex-basis:800px}
.basis-large-4{flex-basis:1000px}
.flex-wrap{flex-wrap:wrap;}
.flex-no-wrap{flex-wrap:nowrap !important;}
.position-relative{position:relative;}
.position-fixed{position: fixed;}
.position-absolute{position:absolute;}
.user-select-none{user-select:none;}
.cursor-pointer{cursor:pointer;}
.flex-1{flex:1;}
.inset-0{inset:0;}
.right-8{right:8px;}
.right-16{right:16px;}
.right-24{right:24px;}
.left-8{left:8px;}
.left-16{left:16px;}
.left-24{left:24px;}
.top-8{top:8px;}
.top-16{top:16px;}
.top-24{top:24px;}
.bottom-8{bottom:8px;}
.bottom-16{bottom:16px;}
.bottom-24{bottom:24px;}
.z-index-1{z-index:1;}
.white-space-no-wrap{white-space:nowrap;}
.border-radius-4{border-radius:4px;}
.border-radius-8{border-radius:8px;}
.border-radius-16{border-radius:16px;}
.border-radius-24{border-radius:24px;}
.border-radius-32{border-radius:32px;}
.border-radius-35{border-radius:35px;}
.border-radius-40{border-radius:40px;}
.border-radius-48{border-radius:48px;}
.border-radius-56{border-radius:56px;}
.border-radius-64{border-radius:64px;}
.border-none{border:none;}
.pretty-border{border: 2px solid var(--md-sys-color-surface-container-highest);}
.pretty-big-icon{
  width: 48px;
  height: 48px;
  font-size: 48px;
}
.pretty-border-error{border: 2px solid var(--md-sys-color-error-container);}
.text-center{text-align:center;}
.text-wrap-pretty{text-wrap-style: pretty;}
.text-wrap-nowrap{text-wrap: nowrap !important;}
.decoration-none{text-decoration: none;}
.outline-1{box-shadow: 0px 0px 0px 1px var(--md-sys-color-outline-variant);}
.outline-light-1{box-shadow: 0px 0px 0px 1px var(--md-sys-color-surface-container-high) inset;}
.outline-1-light{box-shadow: 0px 0px 0px 1px var(--md-sys-color-inverse-on-surface);}
.outline-1-light-inset{box-shadow: 0px 0px 0px 1px var(--md-sys-color-inverse-on-surface) inset;}
.outline-with-shadow-light {
    box-shadow: 0 .5px 2.5px #0000001f
}
.outline-with-shadow{
  box-shadow: 0px 0px 0px 0.5px rgba(0,0,0, 0.05), 0px 0.5px 2.5px 0px rgba(0,0,0, 0.16);
}
.box-shadow-none{box-shadow: none;}
@media (prefers-color-scheme: dark){
  .outline-1-light{box-shadow: 0px 0px 0px 1px var(--md-sys-color-inverse-on-surface-dark);}
  .outline-with-shadow{
    box-shadow: 0px 0px 0px 0.5px var(--md-sys-color-surface-container-highest), 0px 0.5px 2.5px 0px rgba(0,0,0, 0.16);
  }
}
.scrollbar-hidden::-webkit-scrollbar{display:none;}
.relative{position:relative;}
.absolute-centered{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.cursor-pointer{cursor:pointer;}
.height-max-content{min-height:max-content;}
.height-fit-content{height:fit-content;}
.hover-scale-small{
  transition: transform .3s cubic-bezier(0,0,0.5,1)
}
.hover-scale-small:hover{
  transform: scale(1.03);
}
.hover-outline{
  transition: box-shadow .3s cubic-bezier(0,0,0.5,1)
}
.hover-outline:hover{
  box-shadow: 0px 0px 0px 1px var(--md-sys-color-outline-variant) inset;
}
.hover-shadow{
  transition: box-shadow 250ms cubic-bezier(0,0,0.5,1) !important
}
.hover-shadow:hover{
  box-shadow: 0px 0px 64px -10px var(--md-sys-color-on-surface-variant);
}
.hover-shadow-primary-container{
  transition: box-shadow 250ms cubic-bezier(0,0,0.5,1) !important
}
.hover-shadow-primary-container:hover{
  box-shadow: 0px 0px 64px -24px var(--md-sys-color-primary-container);
}
.hover-magic-1 {
  position: relative;
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0,0,0.5,1), box-shadow 250ms cubic-bezier(0,0,0.5,1) !important;
}
.contenedor-scroll {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.hover-magic-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  animation: hover-magic-1-shimmer 2s infinite;
}
@keyframes hover-magic-1-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.hover-magic-1:hover {
  transform: scale(1.03);
  box-shadow: 0px 24px 64px -32px var(--md-sys-color-primary-container);
}
.hover-delete{
  transition: background 250ms cubic-bezier(0,0,0.5,1), color 250ms cubic-bezier(0,0,0.5,1) !important;
}
.hover-delete:hover{
  background:var(--md-sys-color-error-container);
  color: var(--md-sys-color-error);
}
.hover-primary-container:hover{
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
}
.hover-target-primary-text:hover .hover-target{
  color:var(--md-sys-color-primary) !important;
}
.hover-magic-2{overflow:hidden}
.hover-magic-2 > * {z-index:1;}
.hover-magic-2::after{
  content: "";
  position:absolute;
  inset:0;
  background: var(--md-sys-color-secondary-container);
  opacity:0;
  transform: translate3d(-30%, -30%, 0);
  border-radius:200px;
  filter: blur(100px);
  transition: all 0.3s cubic-bezier(0,0,0.5,1);
}
.hover-magic-2:hover::after{
  opacity:1;
}
.hover-magic-2-small{overflow:hidden}
.hover-magic-2-small > * {z-index:1;}
.hover-magic-2-small::after{
  content: "";
  position:absolute;
  inset:0;
  background: var(--md-sys-color-primary-container);
  opacity: 0;
  transform: translate3d(-50%, -90%, 0);
  border-radius:200px;
  filter: blur(50px);
  transition: all 0.3s cubic-bezier(0,0,0.5,1);
}
.hover-magic-2-small:hover::after{
  opacity:1;
}
.hover-magic-2-tiny{overflow:hidden}
.hover-magic-2-tiny > * {z-index:1;}
.hover-magic-2-tiny::after{
  content: "";
  position:absolute;
  inset:0;
  background: var(--md-sys-color-primary-container);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  border-radius:200px;
  filter: blur(24px);
  transition: all 0.3s cubic-bezier(0,0,0.5,1);
}
.hover-magic-2-tiny:hover::after{
  opacity:1;
}
.hidden{display:none !important}
.line-height-0-5{line-height:0.5 !important;}
.line-height-0-75{line-height:0.75 !important;}
.line-height-0-85{line-height:0.85 !important;}
.line-height-0-95{line-height:0.95 !important;}
.line-height-1{line-height:1 !important;}
.line-height-1-5{line-height:1.5 !important;}
.fit-cover{object-fit:cover;}
.object-top{object-position:top;}
.object-bottom{object-position:bottom;}
.object-left{object-position:left;}
.object-right{object-position:right;}
.object-center{object-position:center;}
.object-top-left{object-position:top left;}
.object-top-right{object-position:top right;}
.object-bottom-left{object-position:bottom left;}
.object-bottom-right{object-position:bottom right;}
.font-family-inter{font-family: 'Inter', sans-serif;}
.opacity-0{opacity:0;}
.opacity-0-5{opacity:0.5;}
.opacity-0-8{opacity:0.8;}
.opacity-1{opacity:1;}
.background-blured-8{
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark){
  .background-blured-8{
    background: rgba(0, 0, 0, 0.80);
  }
}
.background-blured-8-inverted{
  background: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark){
  .background-blured-8-inverted{
    background: rgba(255, 255, 255, 0.64);
  }
}
.weight-900{font-weight: 900 !important;}
.weight-800{font-weight: 800 !important;}
.weight-600{font-weight: 600 !important;}
.weight-500{font-weight: 500 !important;}
@media(prefers-reduced-motion:reduce) {
    .grid-card[data-v-63d92af5] {
        animation: none
    }
}
.main-grid[data-v-ee5e7e72] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}
.grid-card[data-v-ee5e7e72] {
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 48px;
    overflow: hidden;
    outline: none;
    border: none
}
.grid-card.wide[data-v-ee5e7e72] {
    grid-column: span 2
}
@media only screen and (max-width: 680px) {
    .main-grid[data-v-ee5e7e72] {
        grid-template-columns:1fr
    }
    .main-grid[data-v-ee5e7e72]>* {
        grid-column: 1 / -1!important;
        width: 100%
    }
    .grid-card.wide[data-v-ee5e7e72] {
        grid-column: span 1
    }
    .app-name[data-v-ee5e7e72] {
        font-size: 70px
    }
}
.grid-card[data-v-63d92af5] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 48px;
    overflow: hidden;
    outline: none;
    border: none;
    transition: background .3s ease
}
.grid-card.is-clickable[data-v-63d92af5]:hover {
    background: var(--md-sys-color-surface-container)
}
.grid-card.is-clickable[data-v-63d92af5] {
    cursor: pointer
}
.grid-card.is-tall[data-v-63d92af5] {
    height: calc(100svh - 64px)
}
.text-gradient {
    background: linear-gradient(45deg,var(--md-sys-color-on-background) 0%,var(--md-sys-color-outline) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.text-gradient-primary {
    background: linear-gradient(45deg,var(--md-sys-color-primary-container) 0%,color-mix(in srgb,var(--md-sys-color-primary-container) 100%,var(--md-sys-color-background) 80%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.message.is-loading-message[data-v-f0318d9e] {
    position: relative
}
.message.is-loading-message[data-v-f0318d9e]:after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    z-index: 2;
    background: radial-gradient(ellipse at center,var(--md-sys-color-background),transparent 70%);
    animation: loading-glow-sweep-f0318d9e 1.1s ease-in-out infinite
}
@keyframes loading-glow-sweep-f0318d9e {
    0% {
        transform: translate(-100%)
    }
    to {
        transform: translate(200%)
    }
}
:root {
  --md-source: #0066ff;
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #001849;
  --md-ref-palette-primary20: #002b75;
  --md-ref-palette-primary25: #00358c;
  --md-ref-palette-primary30: #003fa4;
  --md-ref-palette-primary35: #004abd;
  --md-ref-palette-primary40: #0054d6;
  --md-ref-palette-primary50: #216dff;
  --md-ref-palette-primary60: #5e8bff;
  --md-ref-palette-primary70: #8aa8ff;
  --md-ref-palette-primary80: #b3c5ff;
  --md-ref-palette-primary90: #dae1ff;
  --md-ref-palette-primary95: #eef0ff;
  --md-ref-palette-primary98: #faf8ff;
  --md-ref-palette-primary99: #fefbff;
  --md-ref-palette-primary100: #ffffff;
  --md-ref-palette-secondary0: #000000;
  --md-ref-palette-secondary10: #151b2c;
  --md-ref-palette-secondary20: #2a3042;
  --md-ref-palette-secondary25: #353b4d;
  --md-ref-palette-secondary30: #414659;
  --md-ref-palette-secondary35: #4c5265;
  --md-ref-palette-secondary40: #585e71;
  --md-ref-palette-secondary50: #71768b;
  --md-ref-palette-secondary60: #8b90a5;
  --md-ref-palette-secondary70: #a5aac1;
  --md-ref-palette-secondary80: #c1c6dd;
  --md-ref-palette-secondary90: #dde2f9;
  --md-ref-palette-secondary95: #eef0ff;
  --md-ref-palette-secondary98: #faf8ff;
  --md-ref-palette-secondary99: #fefbff;
  --md-ref-palette-secondary100: #ffffff;
  --md-ref-palette-tertiary0: #000000;
  --md-ref-palette-tertiary10: #2b122b;
  --md-ref-palette-tertiary20: #422741;
  --md-ref-palette-tertiary25: #4e324d;
  --md-ref-palette-tertiary30: #5a3d58;
  --md-ref-palette-tertiary35: #674965;
  --md-ref-palette-tertiary40: #735471;
  --md-ref-palette-tertiary50: #8e6d8a;
  --md-ref-palette-tertiary60: #a986a5;
  --md-ref-palette-tertiary70: #c5a0c0;
  --md-ref-palette-tertiary80: #e1bbdc;
  --md-ref-palette-tertiary90: #ffd6f9;
  --md-ref-palette-tertiary95: #ffebf9;
  --md-ref-palette-tertiary98: #fff7fa;
  --md-ref-palette-tertiary99: #fffbff;
  --md-ref-palette-tertiary100: #ffffff;
  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral10: #1b1b1f;
  --md-ref-palette-neutral20: #303034;
  --md-ref-palette-neutral25: #3b3b3f;
  --md-ref-palette-neutral30: #46464a;
  --md-ref-palette-neutral35: #525256;
  --md-ref-palette-neutral40: #5e5e62;
  --md-ref-palette-neutral50: #77767a;
  --md-ref-palette-neutral60: #919094;
  --md-ref-palette-neutral70: #acaaaf;
  --md-ref-palette-neutral80: #c7c6ca;
  --md-ref-palette-neutral90: #e4e2e6;
  --md-ref-palette-neutral95: #f2f0f4;
  --md-ref-palette-neutral98: #fbf8fd;
  --md-ref-palette-neutral99: #fefbff;
  --md-ref-palette-neutral100: #ffffff;
  --md-ref-palette-neutral-variant0: #000000;
  --md-ref-palette-neutral-variant10: #191b23;
  --md-ref-palette-neutral-variant20: #2e3038;
  --md-ref-palette-neutral-variant25: #393b43;
  --md-ref-palette-neutral-variant30: #45464f;
  --md-ref-palette-neutral-variant35: #50525a;
  --md-ref-palette-neutral-variant40: #5c5e67;
  --md-ref-palette-neutral-variant50: #757680;
  --md-ref-palette-neutral-variant60: #8f909a;
  --md-ref-palette-neutral-variant70: #aaaab4;
  --md-ref-palette-neutral-variant80: #c5c6d0;
  --md-ref-palette-neutral-variant90: #e2e2ec;
  --md-ref-palette-neutral-variant95: #f0f0fa;
  --md-ref-palette-neutral-variant98: #faf8ff;
  --md-ref-palette-neutral-variant99: #fefbff;
  --md-ref-palette-neutral-variant100: #ffffff;
  --md-ref-palette-error0: #000000;
  --md-ref-palette-error10: #410002;
  --md-ref-palette-error20: #690005;
  --md-ref-palette-error25: #7e0007;
  --md-ref-palette-error30: #93000a;
  --md-ref-palette-error35: #a80710;
  --md-ref-palette-error40: #ba1a1a;
  --md-ref-palette-error50: #de3730;
  --md-ref-palette-error60: #ff5449;
  --md-ref-palette-error70: #ff897d;
  --md-ref-palette-error80: #ffb4ab;
  --md-ref-palette-error90: #ffdad6;
  --md-ref-palette-error95: #ffedea;
  --md-ref-palette-error98: #fff8f7;
  --md-ref-palette-error99: #fffbff;
  --md-ref-palette-error100: #ffffff;
  --md-sys-color-primary-light: #0054d6;
  --md-sys-color-on-primary-light: #ffffff;
  --md-sys-color-primary-container-light: #dae1ff;
  --md-sys-color-on-primary-container-light: #001849;
  --md-sys-color-secondary-light: #585e71;
  --md-sys-color-on-secondary-light: #ffffff;
  --md-sys-color-secondary-container-light: #dde2f9;
  --md-sys-color-on-secondary-container-light: #151b2c;
  --md-sys-color-tertiary-light: #735471;
  --md-sys-color-on-tertiary-light: #ffffff;
  --md-sys-color-tertiary-container-light: #ffd6f9;
  --md-sys-color-on-tertiary-container-light: #2b122b;
  --md-sys-color-error-light: #ba1a1a;
  --md-sys-color-error-container-light: #ffdad6;
  --md-sys-color-on-error-light: #ffffff;
  --md-sys-color-on-error-container-light: #410002;
  --md-sys-color-background-light: #fefbff;
  --md-sys-color-on-background-light: #1b1b1f;
  --md-sys-color-surface-light: #fefbff;
  --md-sys-color-on-surface-light: #1b1b1f;
  --md-sys-color-surface-variant-light: #e2e2ec;
  --md-sys-color-on-surface-variant-light: #45464f;
  --md-sys-color-outline-light: #757680;
  --md-sys-color-inverse-on-surface-light: #f2f0f4;
  --md-sys-color-inverse-surface-light: #303034;
  --md-sys-color-inverse-primary-light: #b3c5ff;
  --md-sys-color-shadow-light: #000000;
  --md-sys-color-surface-tint-light: #0054d6;
  --md-sys-color-outline-variant-light: #c5c6d0;
  --md-sys-color-scrim-light: #000000;
  --md-sys-color-primary-dark: #b3c5ff;
  --md-sys-color-on-primary-dark: #002b75;
  --md-sys-color-primary-container-dark: #003fa4;
  --md-sys-color-on-primary-container-dark: #dae1ff;
  --md-sys-color-secondary-dark: #c1c6dd;
  --md-sys-color-on-secondary-dark: #2a3042;
  --md-sys-color-secondary-container-dark: #414659;
  --md-sys-color-on-secondary-container-dark: #dde2f9;
  --md-sys-color-tertiary-dark: #e1bbdc;
  --md-sys-color-on-tertiary-dark: #422741;
  --md-sys-color-tertiary-container-dark: #5a3d58;
  --md-sys-color-on-tertiary-container-dark: #ffd6f9;
  --md-sys-color-error-dark: #ffb4ab;
  --md-sys-color-error-container-dark: #93000a;
  --md-sys-color-on-error-dark: #690005;
  --md-sys-color-on-error-container-dark: #ffdad6;
  --md-sys-color-background-dark: #1b1b1f;
  --md-sys-color-on-background-dark: #e4e2e6;
  --md-sys-color-surface-dark: #1b1b1f;
  --md-sys-color-on-surface-dark: #e4e2e6;
  --md-sys-color-surface-variant-dark: #45464f;
  --md-sys-color-on-surface-variant-dark: #c5c6d0;
  --md-sys-color-outline-dark: #8f909a;
  --md-sys-color-inverse-on-surface-dark: #1b1b1f;
  --md-sys-color-inverse-surface-dark: #e4e2e6;
  --md-sys-color-inverse-primary-dark: #0054d6;
  --md-sys-color-shadow-dark: #000000;
  --md-sys-color-surface-tint-dark: #b3c5ff;
  --md-sys-color-outline-variant-dark: #45464f;
  --md-sys-color-scrim-dark: #000000;
  --md-sys-typescale-display-large-font-family-name: Inter;
  --md-sys-typescale-display-large-font-family-style: Regular;
  --md-sys-typescale-display-large-font-weight: 400px;
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;
  --md-sys-typescale-display-medium-font-family-name: Inter;
  --md-sys-typescale-display-medium-font-family-style: Regular;
  --md-sys-typescale-display-medium-font-weight: 400px;
  --md-sys-typescale-display-medium-font-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-letter-spacing: 0px;
  --md-sys-typescale-display-small-font-family-name: Inter;
  --md-sys-typescale-display-small-font-family-style: Regular;
  --md-sys-typescale-display-small-font-weight: 400px;
  --md-sys-typescale-display-small-font-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-letter-spacing: 0px;
  --md-sys-typescale-headline-large-font-family-name: Inter;
  --md-sys-typescale-headline-large-font-family-style: Regular;
  --md-sys-typescale-headline-large-font-weight: 400px;
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-letter-spacing: 0px;
  --md-sys-typescale-headline-medium-font-family-name: Inter;
  --md-sys-typescale-headline-medium-font-family-style: Regular;
  --md-sys-typescale-headline-medium-font-weight: 400px;
  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-letter-spacing: 0px;
  --md-sys-typescale-headline-small-font-family-name: Inter;
  --md-sys-typescale-headline-small-font-family-style: Regular;
  --md-sys-typescale-headline-small-font-weight: 400px;
  --md-sys-typescale-headline-small-font-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-letter-spacing: 0px;
  --md-sys-typescale-body-large-font-family-name: Inter;
  --md-sys-typescale-body-large-font-family-style: Regular;
  --md-sys-typescale-body-large-font-weight: 400px;
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-letter-spacing: 0.50px;
  --md-sys-typescale-body-medium-font-family-name: Inter;
  --md-sys-typescale-body-medium-font-family-style: Regular;
  --md-sys-typescale-body-medium-font-weight: 400px;
  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
  --md-sys-typescale-body-small-font-family-name: Inter;
  --md-sys-typescale-body-small-font-family-style: Regular;
  --md-sys-typescale-body-small-font-weight: 400px;
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-letter-spacing: 0.40px;
  --md-sys-typescale-label-large-font-family-name: Inter;
  --md-sys-typescale-label-large-font-family-style: Medium;
  --md-sys-typescale-label-large-font-weight: 500px;
  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-letter-spacing: 0.10px;
  --md-sys-typescale-label-medium-font-family-name: Inter;
  --md-sys-typescale-label-medium-font-family-style: Medium;
  --md-sys-typescale-label-medium-font-weight: 500px;
  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
  --md-sys-typescale-label-small-font-family-name: Inter;
  --md-sys-typescale-label-small-font-family-style: Medium;
  --md-sys-typescale-label-small-font-weight: 500px;
  --md-sys-typescale-label-small-font-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-letter-spacing: 0.50px;
  --md-sys-typescale-title-large-font-family-name: Inter;
  --md-sys-typescale-title-large-font-family-style: Regular;
  --md-sys-typescale-title-large-font-weight: 400px;
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-letter-spacing: 0px;
  --md-sys-typescale-title-medium-font-family-name: Inter;
  --md-sys-typescale-title-medium-font-family-style: Medium;
  --md-sys-typescale-title-medium-font-weight: 500px;
  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
  --md-sys-typescale-title-small-font-family-name: Inter;
  --md-sys-typescale-title-small-font-family-style: Medium;
  --md-sys-typescale-title-small-font-weight: 500px;
  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-letter-spacing: 0.10px;
}
.display-large{
  font-family: var(--md-sys-typescale-display-large-font-family-name);
  font-style: var(--md-sys-typescale-display-large-font-family-style);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  font-size: var(--md-sys-typescale-display-large-font-size);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}
.display-medium{
  font-family: var(--md-sys-typescale-display-medium-font-family-name);
  font-style: var(--md-sys-typescale-display-medium-font-family-style);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
.display-small{
  font-family: var(--md-sys-typescale-display-small-font-family-name);
  font-style: var(--md-sys-typescale-display-small-font-family-style);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  font-size: var(--md-sys-typescale-display-small-font-size);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
.headline-large{
  font-family: var(--md-sys-typescale-headline-large-font-family-name);
  font-style: var(--md-sys-typescale-headline-large-font-family-style);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
.headline-medium{
  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
.headline-small{
  font-family: var(--md-sys-typescale-headline-small-font-family-name);
  font-style: var(--md-sys-typescale-headline-small-font-family-style);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
.body-large{
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  font-size: var(--md-sys-typescale-body-large-font-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
.body-medium{
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
.body-small{
  font-family: var(--md-sys-typescale-body-small-font-family-name);
  font-style: var(--md-sys-typescale-body-small-font-family-style);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  font-size: var(--md-sys-typescale-body-small-font-size);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
.label-large{
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-style: var(--md-sys-typescale-label-large-font-family-style);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  font-size: var(--md-sys-typescale-label-large-font-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
.label-medium{
  font-family: var(--md-sys-typescale-label-medium-font-family-name);
  font-style: var(--md-sys-typescale-label-medium-font-family-style);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
.label-small{
  font-family: var(--md-sys-typescale-label-small-font-family-name);
  font-style: var(--md-sys-typescale-label-small-font-family-style);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  font-size: var(--md-sys-typescale-label-small-font-size);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
.title-large{
  font-family: var(--md-sys-typescale-title-large-font-family-name);
  font-style: var(--md-sys-typescale-title-large-font-family-style);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  font-size: var(--md-sys-typescale-title-large-font-size);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
.title-medium{
  font-family: var(--md-sys-typescale-title-medium-font-family-name);
  font-style: var(--md-sys-typescale-title-medium-font-family-style);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
.title-small{
  font-family: var(--md-sys-typescale-title-small-font-family-name);
  font-style: var(--md-sys-typescale-title-small-font-family-style);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  font-size: var(--md-sys-typescale-title-small-font-size);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}
.weight-bold{
  font-weight: bold;
}
.poppins{font-family: 'Poppins', sans-serif !important;}
.dm-sans{font-family: 'DM Sans', sans-serif !important;}
.dm-sans-all *:not(md-icon) {font-family: 'DM Sans', sans-serif!important;}
.bricolage{font-family: "Bricolage Grotesque", system-ui !important;}
.inter{font-family: 'inter', sans-serif !important;}
.inter-all *:not(md-icon) {font-family: 'Inter', sans-serif!important;}
:root {
    --app-main-font: "DM Sans", sans-serif;
    --app-main-font-name: "DM Sans";
}
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    font-family: var(--app-main-font);
    color: var(--md-sys-color-on-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.app-main {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
}
.app-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow: hidden;
}
.app-view {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    gap: 8px;
    overflow: auto;
}
md-icon {
    --md-icon-font: "Material Symbols Rounded";
    transition: font-variation-settings 225ms cubic-bezier(.48, 0, 0, 1);
}
md-icon.filled {
    font-variation-settings: "FILL" 1;
}
button {
    position: relative;
    border: none;
    outline: none;
}
a, button {
    will-change: transform;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
nav{
  display:flex;
  flex-direction:column;
  width:96px;
  height:100%;
  border-radius:16px;
  box-sizing: border-box;
  padding:24px 12px;
  gap:8px;
  z-index: 1;
}
nav button.nav-button:focus-visible{outline:none;}
nav button.nav-button:active{ -webkit-tap-highlight-color: transparent;}
nav button.nav-button{
  width:100%;
  padding:4px 8px;
  border-radius:16px;
  font-size:11px;
  font-weight: 500;
  line-height:10px;
  border:none;
  background:none;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  font-family: "DM sans", sans-serif !important;
}
nav button.nav-button span.icon-holder{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 56px;
  height: 32px;
  transition:background 125ms;
  border-radius:16px;
  margin-bottom:4px;
}
nav button.nav-button:hover span.icon-holder{background:var(--md-sys-color-surface-variant); color:var(--md-sys-color-on-surface);}
nav button.nav-button span.icon-holder span.material-symbols-rounded{
  border-radius:16px;
  transition: font-weight 125ms, padding 200ms cubic-bezier(.48,0,0,1), background 200ms, color 200ms;
}
nav button.nav-button:hover span.icon-holder span.material-symbols-rounded{font-weight: 600;}
nav button.nav-button[active] span.icon-holder{
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-primary) !important;
}
nav button.nav-button[active] span.icon-holder span.material-symbols-rounded{
  animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
  font-variation-settings: 'FILL' 1;
  padding:4px 16px;
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
}
nav button.nav-button md-ripple{
  --md-ripple-hover-color: none;
  --md-ripple-pressed-color: none;
}
@keyframes iconAnimation {
  from{
    font-variation-settings: 'FILL' 0;
  }
  to{
    font-variation-settings: 'FILL' 1;
  }
}
@media only screen and (max-width: 680px){
  nav{
    bottom:0;
    flex-direction: row;
    padding:8px;
    border-radius:0;
    width: 100%;
    height: fit-content;
    gap:0;
    background: var(--md-sys-color-surface-container);
    padding-bottom: max(env(safe-area-inset-bottom, 0), 24px);
  }
  nav button.nav-button{
    padding:4px 0px;
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  nav button.nav-button md-ripple{
    --md-ripple-hover-color: none;
    --md-ripple-pressed-color: var(--md-sys-color-outline);
  }
}
@media only screen and (min-width: 680px){
  nav.nav-style-2{
    min-width:224px;
    gap:0px;
  }
  nav.nav-style-2 button.nav-button{
    padding:0;
    display:flex;
    height: 40px;
  }
  nav.nav-style-2 button.nav-button span.icon-holder{
    position:absolute;
    width: 100%;
    border-radius:16px;
    color:var(--md-sys-color-outline);
  }
  nav.nav-style-2 button.nav-button > span:not(.icon-holder){
    position:absolute;
    font-size:16px;
    font-family: 'inter', sans-serif;
    font-weight: 500;
    color:var(--md-sys-color-outline);
    line-height: 16px;
    left:56px;
    top:12px;
    transition:color 200ms cubic-bezier(0,1,0,1);
  }
  nav.nav-style-2 button.nav-button[active] > span:not(.icon-holder){
    color : var(--md-sys-color-on-primary-container);
  }
  nav.nav-style-2 button.nav-button span.icon-holder{
    box-sizing: border-box;
    padding:0 24px;
    margin:0;
    justify-content: flex-start;
    height:40px;
    transition: padding 300ms cubic-bezier(0,1,0,1), background 100ms;
  }
  nav.nav-style-2 button.nav-button[active] span.icon-holder{
    padding:0;
  }
  nav.nav-style-2 button.nav-button span.icon-holder span.material-symbols-rounded{
    transition: padding 300ms cubic-bezier(0,1,0,1);
    box-sizing: border-box;
    padding:0;
    border-radius: 16px;
  }
  nav.nav-style-2 button.nav-button[active] span.icon-holder span.material-symbols-rounded{
    padding: 8px 152px 8px 24px;
    box-shadow: 0px 0px 32px -10px var(--md-sys-color-primary-container);
  }
  nav.nav-style-2 button.nav-button:not([active]):hover span.icon-holder span.material-symbols-rounded, nav.nav-style-2 button.nav-button:not([active]):hover{
    color: var(--md-sys-color-primary) !important;
  }
  nav.nav-style-2 button.nav-button:not([active]):hover > span:not(.icon-holder){
    color: var(--md-sys-color-primary) !important;
  }
  nav.nav-style-2.glass-nav button.nav-button[active] span.icon-holder span.material-symbols-rounded{
    box-shadow: 0px 0px 32px -10px var(--md-sys-color-primary-container), 0px 0px 0px 1px rgba(255, 255, 255, 0.64) inset, 0px 4px 24px 0px rgba(255, 255, 255, 0.24) inset;
  }
  @media (prefers-color-scheme: dark) {
    nav.nav-style-2.glass-nav button.nav-button[active] span.icon-holder span.material-symbols-rounded{
      box-shadow: 0px 0px 32px -10px var(--md-sys-color-primary-container), 0px 0px 0px 1px rgba(255, 255, 255, 0.24) inset, 0px 4px 24px 0px rgba(255, 255, 255, 0.24) inset;
    }
  }
  nav.nav-style-2 button.nav-button.label-button span{
    left:24px;
  }
  button.nav-button.label-button span{
    color:var(--md-sys-color-outline-variant) !important
  }
  button.nav-button.label-button{
    cursor:default;
    color:var(--md-sys-color-outline-variant) !important
  }
  nav.nav-style-2 button.nav-button.label-button:not([active]):hover > span:not(.icon-holder){
    color:var(--md-sys-color-outline-variant) !important
  }
}
@media only screen and (min-width: 680px){
  nav:not(.nav-style-5, .nav-style-3, .nav-style-4){
    animation: navIn 700ms cubic-bezier(0.38,0.49,0,1);
  }
  @keyframes navIn {
    from{
      opacity:0;
      transform: translateX(-100%);
    }
    to{
      opacity:1;
      transform: translateX(0);
    }
  }
  nav.nav-style-3 > button.nav-button.hide-on-mobile{
    margin:0;
  }
  nav.nav-style-3{
    flex-direction:row;
    width:auto;
    height: auto;
    background: var(--md-sys-color-surface-container);
    box-sizing: border-box;
    padding: 8px;
    gap:0px;
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    bottom:16px;
    border-radius:40px;
    transition: transform 500ms cubic-bezier(0,1,0,1);
    transform-origin: bottom center;
    box-shadow: 0 0 0 1px var(--md-sys-color-surface-container-low)
  }
  nav.nav-style-3:hover{
    transform: scale(1.05);
  }
  nav.nav-style-3 button.nav-button{padding:4px;}
  nav.nav-style-3 button.nav-button > span:last-child{
    display: none;
    position:absolute;
    bottom: calc(100% + 12px);
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width:max-content;
    padding: 4px 8px;
    border-radius:24px;
    background:var(--md-sys-color-surface-container);
    color:var(--md-sys-color-on-background) !important;
    box-shadow: 0 0 0 1px var(--md-sys-color-surface-container-high);
    animation: labelIn 250ms cubic-bezier(0,1,0,1);
  }
  @keyframes labelIn {
    from{
      opacity:0;
      transform: translateY(8px);
    }
    to{
      opacity:1;
      transform: translateY(0);
    }
  }
  nav.nav-style-3 button.nav-button span{margin-bottom:0 !important;}
  nav.nav-style-3 button.nav-button[active] span.icon-holder span.material-symbols-rounded{
    box-shadow: 0px 0px 32px -10px var(--md-sys-color-primary-container);
  }
  nav.nav-style-3 button.nav-button:hover span:last-child{ display:flex; }
  nav.nav-style-3 button.nav-button.nav-action-button{display: none;}
  nav.nav-style-4 > button.nav-button.hide-on-mobile{display:none;}
  nav.nav-style-4{
    flex-direction:row;
    height: auto;
    background: var(--md-sys-color-surface-container-low);
    box-sizing: border-box;
    padding: 8px;
    gap:8px;
    width: auto;
    margin:0 14px;
    margin-top:6px;
    margin-bottom:-8px;
    border-radius:32px;;
  }
  nav.nav-style-4 button.nav-button{padding:4px;}
  nav.nav-style-4 button.nav-button{
    display:flex;
    flex-direction:row;
    align-items: center;
    gap:8px;
    width:fit-content;
    padding:12px 24px;
    font-family: "inter", sans-serif;
    font-size:16px;
    border-radius:64px;
  }
  nav.nav-style-4 button.nav-button[active]{
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
  }
  nav.nav-style-4 button.nav-button.color-gray:not([active]){background:var(--md-sys-color-surface-container)}
  nav.nav-style-4 button.nav-button:not([active]):hover{background:var(--md-sys-color-surface-container-high)}
  nav.nav-style-4 button.nav-button span.icon-holder{
    width: fit-content;
    height: fit-content;
    padding:0;
    background:transparent;
    color:var(--md-sys-color-on-background);
  }
  nav.nav-style-4 button.nav-button[active] span.icon-holder{
    color:var(--md-sys-color-on-primary-container);
  }
  nav.nav-style-4 button.nav-button span.icon-holder span.material-symbols-rounded{
    background: transparent;
    padding:0;
  }
  nav.nav-style-4 button.nav-button[active] span.icon-holder span.material-symbols-rounded{
    color:var(--md-sys-color-on-primary-container);
  }
  nav.nav-style-4 button.nav-button span{margin-bottom:0 !important;}
  nav.nav-style-5{
    flex-direction:row;
    height:auto;
    width:auto;
    margin:0 6px;
    margin-top:6px;
    background: var(--md-sys-color-background);
    box-sizing: border-box;
  }
  nav.nav-style-5 button.nav-button{
    display:flex;
    align-items: center;
    width:auto;
    font-size:16px;
    padding:8px 16px;
    height: 40px;
    gap:4px;
    border-radius:64px;
    transition: background 300ms, color 300ms;
    font-family: 'inter', sans-serif;
    color:var(--md-sys-color-outline);
  }
  nav.nav-style-5 button.nav-button:not([active]):hover{
    color:var(--md-sys-color-on-background)
  }
  nav.nav-style-5 button.nav-button span.icon-holder{
    width:auto;
    height:auto;
    background:transparent;
    margin-bottom:0;
  }
  nav.nav-style-5 button.nav-button[active]{
    background:var(--md-sys-color-surface-container);
    color:var(--md-sys-color-on-background);
  }
  nav.nav-style-5 button.nav-button span.icon-holder{
    transform: scale(0.8);
  }
  nav.nav-style-5 button.nav-button[active] span.icon-holder span.material-symbols-rounded{
    padding:0;
    background:transparent;
    color:var(--md-sys-color-on-background)
  }
  nav.nav-style-5 button.nav-button.stepbro{
    font-family: "Bricolage Grotesque", system-ui;
    font-size:18px;
    font-weight: 600;
  }
  nav.nav-style-5 button.nav-button.stepbro[active]{
    background:transparent;
  }
  nav.nav-style-5 button.nav-button md-ripple{
    --md-ripple-hover-color: initial;
    --md-ripple-pressed-color: initial;
  }
  nav.nav-style-5 button.nav-button[directActionOn]{
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    box-shadow: none;
  }
  nav.nav-style-5 button.nav-button[directActionOn]:hover{
    color:var(--md-sys-color-on-primary-container);
  }
  nav.nav-style-6{
    height:fit-content;
    margin:auto;
    margin-left:24px;
    background:var(--md-sys-color-surface-container-low);
    border-radius:40px;
    padding: 24px 12px;
    box-shadow: var(--md-sys-color-surface-container) 0px 0px 0px 1px inset;
  }
  nav.nav-style-8{
    width:auto;
    padding:16px;
    gap:0;
    padding-right:0px;
  }
  nav.nav-style-8 button.nav-button md-ripple{
    --md-ripple-hover-color: initial;
    --md-ripple-pressed-color: initial;
  }
  nav.nav-style-8 button.nav-button{
    padding:0px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    width:56px;
    height: 56px;
    transition:border-radius 500ms cubic-bezier(0.38,0.49,0,1.2), transform 500ms cubic-bezier(0.38,0.49,0,1.2), background 250ms;
  }
  nav.nav-style-8 button.nav-button:hover{
    border-radius:64px;
    transform: scale(1.05);
  }
  nav.nav-style-8 button.nav-button span.icon-holder{
    all:unset;
    width:24px;
    height:24px;
  }
  nav.nav-style-8 button.nav-button span.material-symbols-rounded{
    padding:0;
  }
  nav.nav-style-8 button.nav-button[active]{
    background:var(--md-sys-color-primary-container)
  }
  nav.nav-style-8 button.nav-button[active] span.icon-holder span.material-symbols-rounded {
    padding:0;
    background:transparent;
  }
  nav.nav-style-8 button.nav-button > span:last-child{
    display:none;
    position:absolute;
    left:calc(100% + 12px);
    background:var(--md-sys-color-surface-container);
    box-shadow: 0 0 0 1px var(--md-sys-color-surface-container-high);
    padding:4px 8px;
    border-radius:8px;
    animation: labelIn-8 250ms cubic-bezier(0.38,0.49,0,1);
    opacity: 0.9;
    white-space: nowrap;
  }
  nav.nav-style-8 button.nav-button:hover span:last-child{
    display:flex;
  }
  @keyframes labelIn-8 {
    from{
      transform: translateX(-8px);
      opacity:0;
    }
    to{
      transform: translateX(0);
      opacity:0.9;
    }
  }
  nav.nav-style-9{
    min-width:280px;
    padding:16px;
    gap:0;
    border-right: 1px solid var(--md-sys-color-surface-container-high);
    border-radius:0;
  }
  nav.nav-style-9 button.nav-button:first-child > span:last-child{display:none;}
  nav.nav-style-9 button.nav-button:first-child .icon-holder{display:flex;}
  nav.nav-style-9 button.nav-button:first-child .icon-holder .header-account-circle{
    padding:8px;
    border-radius:64px;
  }
  nav.nav-style-9 md-menu{margin-top:-64px !important;}
  nav.nav-style-9 button.label-button{
    font-size:16px !important;
  }
  nav.nav-style-9 button.nav-button{
    padding:8px;
    display:flex;
    align-items:center;
    border-radius:16px;
    font-size:24px;
    line-height: 24px;
    font-family: "dm sans", sans-serif;
    transition:font-size 300ms cubic-bezier(0.38,0.49,0,1.5), color 150ms, transform 300ms cubic-bezier(0.38,0.49,0,1.2), text-shadow 300ms cubic-bezier(0.38,0.49,0,1.2);
    transform-origin: left;
    color:var(--md-sys-color-outline-variant);
    font-weight: 400;
  }
  nav.nav-style-9 button.nav-button:not([active]){
    filter:brightness(0.85);
  }
  @media (prefers-color-scheme: dark){
    nav.nav-style-9 button.nav-button:not([active]){
      filter:brightness(1.4);
    }
  }
  nav.nav-style-9 button.nav-button:hover{
    color:var(--md-sys-color-primary-container);
  }
  nav.nav-style-9 button.nav-button span.icon-holder{
    all:unset;
    display:none;
  }
  nav.nav-style-9 button.nav-button[active]{
    color:var(--md-sys-color-primary) !important;
    font-size:28px;
    font-weight: 600;
  }
  nav.nav-style-9 button.nav-button[active] span.icon-holder span.material-symbols-rounded {
    padding:0;
    background:transparent;
  }
  nav.nav-style-9 button.nav-button:has(+ * + *:hover){transform: scale(1.03);}
  nav.nav-style-9 button.nav-button:has(+ *:hover){transform: scale(1.09);}
  nav.nav-style-9 button.nav-button:hover{transform: scale(1.2);}
  nav.nav-style-9 button.nav-button:hover + *{transform: scale(1.09);}
  nav.nav-style-9 button.nav-button:hover + * + *{transform: scale(1.03);}
  nav.nav-style-9 .header-account-circle > * {border-radius:64px;}
}
nav.nav-style-7 button.nav-button.nav-action-button{display: none;}
nav.nav-style-7 .label-button{display:none!important;}
nav.nav-style-7{
  flex-direction:row;
  width:auto;
  height: auto;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  padding: 4px;
  gap:0px;
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  bottom:24px;
  border-radius:64px;
  box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.60) inset,
              -1px -1px 1px 0px rgba(255, 255, 255, 0.60) inset,
              0px 0px 16px 0px rgba(0, 0, 0, 0.08);
}
@media only screen and (min-width: 680px){
  nav.nav-style-7 button.nav-button:hover span:last-child{ display:flex; }
  nav.nav-style-7 button.nav-button:has(+ * + *:hover){
    background:rgba(0, 0, 0, 0.01);
    width:44px;
  }
  nav.nav-style-7 button.nav-button:has(+ *:hover){
    background:rgba(0, 0, 0, 0.05);
    width:47px;
  }
  nav.nav-style-7 button.nav-button:hover{
    background:rgba(0, 0, 0, 0.1);
    width:50px;
  }
  nav.nav-style-7 button.nav-button:hover + *.nav-button{
    background:rgba(0, 0, 0, 0.05);
    width:44px;
  }
  nav.nav-style-7 button.nav-button:hover + * + *{
    background:rgba(0, 0, 0, 0.01);
    transform: scale(1.03);
  }
}
@media (prefers-color-scheme: dark){
  nav.nav-style-7{
    background: rgba(0, 0, 0, 0.24);
    box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.08) inset,
              -1px -1px 1px 0px rgba(255, 255, 255, 0.08) inset,
              0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  }
  @media only screen and (min-width: 680px){
    nav.nav-style-7 button.nav-button:has(+ * + *:hover){
      background:rgba(255, 255, 255, 0.01);
      width:44px;
    }
    nav.nav-style-7 button.nav-button:has(+ *:hover){
      background:rgba(255, 255, 255, 0.05);
      width:47px;
    }
    nav.nav-style-7 button.nav-button:hover{
      background:rgba(255, 255, 255, 0.1);
      width:50px;
    }
    nav.nav-style-7 button.nav-button:hover + *.nav-button{
      background:rgba(255, 255, 255, 0.05);
      width:44px;
    }
    nav.nav-style-7 button.nav-button:hover + * + *{
      background:rgba(255, 255, 255, 0.01);
      transform: scale(1.03);
    }
  }
}
nav.nav-style-7 button.nav-button{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 8px;
  font-family: "Inter", sans-serif;
  border-radius:64px;
  width:42px;
  height:42px;
  padding: 0;
  transition:
    font-size 300ms cubic-bezier(0.38,0.49,0,1.5),
    color 150ms,
    transform 300ms cubic-bezier(0.38,0.49,0,1.2),
    background 250ms,
    width 300ms cubic-bezier(0.38,0.49,0,1.5);
}
nav.nav-style-7 button.nav-button .material-symbols-rounded{
  font-variation-settings:'FILL' 1;
  color:var(--md-sys-color-outline)
}
nav.nav-style-7 button.nav-button[active]{
  width:56px !important;
  background:var(--md-sys-color-primary-container) !important;
  color:var(--md-sys-color-on-primary-container) !important;
  opacity: 0.7 !important;
}
nav.nav-style-7 button.nav-button[active] * {
  color:var(--md-sys-color-on-primary-container) !important;
}
nav.nav-style-7 button.nav-button span.icon-holder{
  width: fit-content;
  height: fit-content;
  background:transparent;
  margin-bottom:0;
}
nav.nav-style-7 button.nav-button[active] span.icon-holder{padding:0px;}
nav.nav-style-7 button.nav-button > span:last-child{
  display: none;
  width: max-content;
  position:absolute;
  bottom: calc(100% + 12px);
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 4px 8px;
  border-radius:24px;
  background:var(--md-sys-color-surface-container);
  color:var(--md-sys-color-on-background) !important;
  box-shadow: 0 0 0 1px var(--md-sys-color-surface-container-high);
  animation: labelIn-7 250ms cubic-bezier(0.38,0.49,0,1);
  opacity: 0.9;
}
nav.nav-style-7 button.nav-button span{margin-bottom:0 !important;}
nav.nav-style-7 button.nav-button.nav-action-button{display: none;}
@media only screen and (max-width: 680px){
  nav.nav-style-7{
    margin-bottom: calc(env(safe-area-inset-bottom, 16px) + 24px);
  }
}
nav.nav-style-7.variant-1{
  top:16px;
  bottom:initial;
}
nav.nav-style-7.variant-2 button.nav-button > span:last-child{
  display:flex;
  position:relative;
  inset:initial;
  transform: initial;
  padding:initial;
  background:transparent;
  box-shadow: initial;
  color:initial;
}
nav.nav-style-7.variant-2 button.nav-button[active]{
  background: var(--md-sys-color-primary-container);
}
nav.nav-style-7.variant-2 button.nav-button[active] > span:last-child{
  color: var(--md-sys-color-on-primary-container) !important;
}
nav.nav-style-7.variant-2 button.nav-button{
  padding-left:24px;
  font-weight: 500;
  font-size:18px;
}
nav.nav-style-7 button.nav-button[active] span.icon-holder span.material-symbols-rounded{
  animation:unset;
  background:unset;
  padding:unset;
  color:initial;
}
nav.nav-style-7 + holder > section:not(#section-home){
  padding-bottom:80px;
}
@media only screen and (max-width: 680px){
  nav.nav-style-7 + holder > section{
    padding-bottom:120px !important;
  }
}
@media only screen and (min-width: 680px) {
    .app-container>.app-nav {
        order:-1
    }
    .app-container:has(.app-nav.style-1)>.app-view {
        border-right: 1px solid var(--md-sys-color-surface-container)
    }
    .app-nav.style-1 {
        display: flex;
        flex-direction: column;
        min-width: 270px;
        padding: 16px;
        box-sizing: border-box;
        border-right: 1px solid var(--md-sys-color-surface-container);
        z-index: 1
    }
    .app-nav.style-1 .nav-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 4px
    }
    .app-nav.style-1 .action-buttons-container {
        margin-top: auto;
        display: flex;
        flex-direction: column
    }
    .app-nav.style-1 button.nav-button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: var(--md-sys-color-outline);
        border-radius: 12px;
        height: 40px;
        padding: 8px 16px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: .15s color,.15s background
    }
    .app-nav.style-1 button.nav-button:hover {
        color: var(--md-sys-color-primary)
    }
    .app-nav.style-1 button.nav-button[active=true] {
        background: var(--md-sys-color-surface-container-high);
        color: var(--md-sys-color-primary);
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1
    }
    .app-nav.style-1.variant-1 button.nav-button[active=true] {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
        box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container)
    }
    .app-nav.style-1 button.nav-button.first-button {
        color: var(--md-sys-color-on-background);
        margin-bottom: 32px
    }
    .app-nav.style-1 button.nav-button.first-button .nav-name {
        display: flex;
        flex-grow: 1
    }
    .app-nav.style-1 .first-button:after {
        content: "";
        position: absolute;
        left: -16px;
        right: -16px;
        height: 1px;
        bottom: -17px;
        background: var(--md-sys-color-surface-container)
    }
    .app-nav.style-2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 200px;
        padding: 12px 16px;
        box-sizing: border-box;
        z-index: 1
    }
    .app-nav.style-2 .nav-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 4px
    }
    .app-nav.style-2 .action-buttons-container {
        position: absolute;
        bottom: 16px;
        display: flex;
        gap: 8px
    }
    .app-nav.style-2 button.nav-button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--md-sys-color-surface-container-low);
        color: color-mix(in srgb,var(--md-sys-color-outline),var(--md-sys-color-background) 40%);
        border-radius: 40px;
        max-width: min-content;
        height: 48px;
        padding: 0 24px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: .15s color,.15s background,.3s padding cubic-bezier(.38,.49,0,1.5)
    }
    .app-nav.style-2 button.nav-button md-icon {
        display: none
    }
    .app-nav.style-2 button.nav-button:hover {
        color: var(--md-sys-color-primary);
        padding: 0 26px
    }
    .app-nav.style-2 button.nav-button[active=true] {
        background: var(--md-sys-color-surface-container-highest);
        color: var(--md-sys-color-on-background);
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1;
        padding: 0 32px
    }
    .app-nav.style-2.variant-1 button.nav-button[active=true] {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
        box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container)
    }
    .app-nav.style-2 button.nav-button .nav-name {
        display: flex;
        flex-grow: 1
    }
    .app-nav.style-2 button.nav-button.first-button {
        display: none
    }
    .app-container:has(.app-nav.style-3) {
        flex-direction: column;
        overflow: auto
    }
    .app-container:has(.app-nav.style-3)>.app-nav {
        order: 1
    }
    .app-container:has(.app-nav.style-3)>.app-view {
        overflow: visible
    }
    .app-nav.style-3 {
        position: sticky;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px;
        bottom: 16px;
        left: 50%;
        transform: translate(-50%);
        z-index: 1;
        max-width: fit-content;
        gap: 16px
    }
    .app-nav.style-3 .nav-buttons-container {
        display: flex;
        flex-direction: row;
        padding: 8px;
        border-radius: 64px;
        background: rgba(var(--md-sys-color-neutral-background),.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 1px 1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,-1px -1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,0 0 16px #00000014
    }
    .app-nav.style-3 .action-buttons-container {
        display: flex;
        gap: 8px
    }
    .app-nav.style-3 button.nav-button {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--md-sys-color-outline);
        border-radius: 32px;
        min-width: 64px;
        width: 64px;
        height: 64px;
        padding: 16px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: .3s color;
        transition: color .15s,transform .3s cubic-bezier(.38,.49,0,1.2),background .25s,min-width .3s cubic-bezier(.38,.49,0,1)
    }
    .app-nav.style-3 button.nav-button:hover {
        color: var(--md-sys-color-primary)
    }
    .app-nav.style-3 button.nav-button[active=true] {
        background: var(--md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container);
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1;
        min-width: 80px;
        box-shadow: 1px 1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,-1px -1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,0 0 16px #00000014
    }
    .app-nav.style-3 button.nav-button .nav-name {
        display: none
    }
    .app-nav.style-3 button.nav-button.first-button {
        display: none!important
    }
    .app-nav.style-3 button.nav-button.action-button {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container)
    }
    .app-container:has(.app-nav.style-4) {
        background: var(--md-sys-color-surface-container-low);
        padding: 8px 8px 8px 0
    }
    .app-container:has(.app-nav.style-4)>.app-view {
        background: var(--md-sys-color-background);
        border-radius: 24px;
        box-shadow: 0 .5px 2.5px #0000001f
    }
    .app-container:has(.app-nav.style-4)>.app-view:not(:last-of-type) {
        margin-right: 8px
    }
    .app-nav.style-4 {
        display: flex;
        flex-direction: column;
        min-width: 270px;
        padding: 12px 16px;
        box-sizing: border-box;
        z-index: 1
    }
    .app-nav.style-4 .nav-buttons-container {
        display: flex;
        flex-direction: column
    }
    .app-nav.style-4 .action-buttons-container {
        margin-top: auto;
        display: flex;
        flex-direction: column
    }
    .app-nav.style-4 .nav-option-buttons {
        display: flex;
        flex-direction: column;
        margin-top: 24px
    }
    .app-nav.style-4 .nav-option-label {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 12px;
        opacity: .6;
        -webkit-user-select: none;
        user-select: none;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500
    }
    .app-nav.style-4 button.nav-button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: var(--md-sys-color-outline);
        border-radius: 12px;
        height: 40px;
        padding: 8px 12px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: 50ms color,.15s background;
        --md-icon-size: 16px;
        --md-ripple-hover-color: var(--md-sys-color-outline);
        --md-ripple-pressed-color: var(--md-sys-color-primary-container)
    }
    .app-nav.style-4 button.nav-button:hover {
        color: var(--md-sys-color-primary)
    }
    .app-nav.style-4 button.nav-button[active=true] {
        background: var(--md-sys-color-background);
        color: color-mix(in srgb,var(--md-sys-color-primary) 80%,var(--md-sys-color-primary-container) 90%);
        box-shadow: 0 0 0 1px #00000008,0 .5px 2.5px #00000014;
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1
    }
    .app-nav.style-4.variant-1 button.nav-button[active=true] {
        background: linear-gradient(color-mix(in srgb,var(--md-sys-color-primary-container) 100%,var(--md-sys-color-background) 40%),var(--md-sys-color-primary-container));
        color: var(--md-sys-color-on-primary-container);
        box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container),0 0 0 1px color-mix(in srgb,var(--md-sys-color-on-background) 10%,transparent 100%) inset,inset 0 1.8px #ffffff4d;
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1
    }
    .app-nav.style-4 button.nav-button.first-button {
        color: var(--md-sys-color-on-background);
        margin-bottom: 16px
    }
    .app-nav.style-4 button.nav-button.first-button .nav-name {
        display: flex;
        flex-grow: 1
    }
    .app-nav.style-4 button.nav-button.first-button md-icon {
        --md-icon-size: 28px;
        font-size: 28px
    }
    .app-container:has(.app-nav.style-5) {
        padding: 8px
    }
    .app-container:has(.app-nav.style-5)>.app-view {
        background: var(--md-sys-color-background)
    }
    .app-container:has(.app-nav.style-5)>.app-view:not(:last-of-type) .app-view-content {
        padding-right: 0!important
    }
    .app-nav.style-5 {
        display: flex;
        flex-direction: column;
        width: auto;
        box-sizing: border-box;
        padding: 16px 8px 16px 16px;
        z-index: 1
    }
    .app-nav.style-5 .nav-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 0px
    }
    .app-nav.style-5 .action-buttons-container {
        margin-top: auto;
        display: flex;
        flex-direction: column
    }
    .app-nav.style-5 button.nav-button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--md-sys-color-surface-container-low);
        color: var(--md-sys-color-outline);
        border-radius: 28px;
        width: 56px;
        height: 56px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: border-radius .3s cubic-bezier(.38,.49,0,2),transform .5s cubic-bezier(.38,.49,0,1.2),background .25s
    }
    .app-nav.style-5 button.nav-button .nav-name {
        display: none
    }
    .app-nav.style-5 button.nav-button:hover {
        color: var(--md-sys-color-primary)
    }
    .app-nav.style-5 button.nav-button[active=true] {
        background: var(--md-sys-color-surface-container-highest);
        color: var(--md-sys-color-primary);
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1;
        border-radius: 12px
    }
    .app-nav.style-5.variant-1 button.nav-button[active=true] {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container)
    }
    .app-nav.style-5 button.nav-button.first-button {
        color: var(--md-sys-color-on-background);
        margin-bottom: 8px
    }
    .app-nav.style-5 button.nav-button.first-button md-icon {
        display: none
    }
}
@media only screen and (max-width: 680px) {
    .app-nav.mobile-style-1 {
        position:sticky;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px;
        bottom: 16px;
        z-index: 1
    }
    .app-nav.mobile-style-1 .nav-buttons-container {
        display: flex;
        flex-direction: row;
        padding: 8px;
        border-radius: 64px;
        background: rgba(var(--md-sys-color-neutral-background),.5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 1px 1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,-1px -1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,0 0 16px #00000014
    }
    .app-nav.mobile-style-1 .action-buttons-container {
        display: flex;
        gap: 8px
    }
    .app-nav.mobile-style-1 button.nav-button {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--md-sys-color-outline);
        border-radius: 32px;
        min-width: 64px;
        width: 64px;
        height: 64px;
        padding: 16px;
        font-family: var(--app-main-font);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: .3s color;
        transition: color .15s,transform .3s cubic-bezier(.38,.49,0,1.2),background .25s,min-width .3s cubic-bezier(.38,.49,0,1)
    }
    .app-nav.mobile-style-1 button.nav-button:hover {
        color: var(--md-sys-color-primary)
    }
    .app-nav.mobile-style-1 button.nav-button[active=true] {
        background: var(--md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container);
        animation: iconAnimation 125ms cubic-bezier(.48,0,0,1);
        font-variation-settings: "FILL" 1;
        min-width: 80px;
        box-shadow: 1px 1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,-1px -1px 1px rgba(var(--md-sys-color-neutral-background),.6) inset,0 0 16px #00000014
    }
    .app-nav.mobile-style-1 button.nav-button .nav-name {
        display: none
    }
    .app-nav.mobile-style-1 button.nav-button.first-button {
        display: none!important
    }
    .app-nav.mobile-style-1 button.nav-button.action-button {
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container)
    }
}
@media only screen and (max-width: 380px) {
    .app-nav.mobile-style-1 button.nav-button {
        min-width:56px;
        width: 56px;
        height: 56px
    }
    .app-nav.mobile-style-1 button.nav-button[active=true] {
        min-width: 72px
    }
}
@keyframes iconAnimation {
    0% {
        font-variation-settings: "FILL" 0
    }
    to {
        font-variation-settings: "FILL" 1
    }
}
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}
.app-view:has(>.app-view-content)>.app-header {
    padding: 16px;
    padding-top: max(16px,env(safe-area-inset-top))
}
.app-header-title {
    font-family: var(--app-main-font);
    font-weight: 500;
    font-size: var(--md-sys-typescale-display-medium-font-size);
    line-height: 1.1
}
.app-container:has(.app-nav.style-1) .app-header-title {
    font-size: var(--md-sys-typescale-headline-small-font-size)
}
.app-container:has(.app-nav.style-1) .app-view:has(>.app-view-content)>.app-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb,var(--md-sys-color-background) 80%,transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 0 var(--md-sys-color-surface-container)
}
.app-container:has(.app-nav.style-2) .app-header-title {
    font-size: var(--md-sys-typescale-title-small-font-size)
}
.app-container:has(.app-nav.style-2) .app-view:has(>.app-view-content)>.app-header {
    display: flex;
    align-items: center;
    margin: 16px 16px -8px;
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    background: var(--md-sys-color-background);
    height: 56px;
    max-height: 56px;
    min-height: 56px;
    padding: 0
}
.app-container:has(.app-nav.style-4) .app-header-title {
    font-size: var(--md-sys-typescale-title-large-font-size)
}
.app-container:has(.app-nav.style-4) .app-view:has(>.app-view-content)>.app-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb,var(--md-sys-color-background) 70%,transparent);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    height: 40px;
    max-height: 40px;
    padding: 12px 12px 12px 16px;
    margin-bottom: -12px
}
.app-container:has(.app-nav.style-5) .app-header-title {
    font-size: var(--md-sys-typescale-title-small-font-size)
}
.app-container:has(.app-nav.style-5) .app-view:has(>.app-view-content)>.app-header {
    display: flex;
    align-items: center;
    margin: 16px 16px -8px;
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    background: var(--md-sys-color-background);
    height: 56px;
    max-height: 56px;
    min-height: 56px;
    padding: 0
}
@media only screen and (max-width: 680px) {
    .app-container:has(.app-nav.style-5) .app-header-title {
        font-size:var(--md-sys-typescale-title-small-font-size)
    }
    .app-container:has(.app-nav.style-5) .app-view:has(>.app-view-content)>.app-header {
        background: color-mix(in srgb,var(--md-sys-color-surface-container) 70%,transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        max-height: unset;
        height: auto;
        padding: 8px;
        border-radius: 24px;
        top: 8px
    }
}
.dialog {
    margin: auto;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 40px;
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    overflow: hidden;
}
.dialog-right { margin: auto 16px 16px auto; }
:root[data-scroll-bloqueado] .app-view { overflow: hidden; padding-right: calc(16px + var(--sbw, 0px)); }
:root[data-scroll-bloqueado] { overflow: hidden; padding-right: var(--sbw-doc, 0px); }
.dialog:focus, .dialog:focus-visible,
.dialog button:focus-visible, .dialog [tabindex]:focus-visible { outline: none; }
.dialog::backdrop {
    background: transparent;
}
.confirm-input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border: 0; border-radius: 14px; outline: 0; background: color-mix(in srgb, var(--md-sys-color-on-background) 6%, transparent); color: inherit; font: 500 16px var(--app-main-font); letter-spacing: .08em; }
.confirm-input:focus { box-shadow: inset 0 0 0 2px var(--md-sys-color-error); }
.confirm-error { min-height: 16px; margin: 0; font-size: 13px; color: var(--md-sys-color-error); }
.dialog-tint {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: var(--md-sys-color-primary-container);
}
.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 16px;
    overflow-y: auto;
    scrollbar-width: none;
}
.dialog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 56px 16px 24px;
    border-radius: 32px;
    background: var(--md-sys-color-surface-container-low);
    text-align: center;
}
.dialog-card-left {
    align-items: flex-start;
    padding: 80px 24px 20px;
    text-align: left;
}
.dialog-card-left .dialog-title { font-size: 40px; line-height: 1.1; white-space: normal; }
.dialog-close {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    --md-icon-size: 18px;
}
.emoji-input {
    width: 96px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    outline: none;
}
.dialog-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}
.dialog-subtitle {
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
}
.emoji-picks {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 4;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 8px;
    translate: -50% 0;
    border-radius: 22px;
    background: var(--md-sys-color-surface-container-high);
    box-shadow: 0 12px 32px #000000a6;
}
.emoji-picks.open { display: flex; }
.emoji-pick {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}
.emoji-pick:hover { background: var(--md-sys-color-surface-container-high); }
.field-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 64px;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 22px;
}
.field-box:focus-within { box-shadow: 0 0 0 1px var(--md-sys-color-primary-container) inset; }
:root { --invalid-border: var(--md-sys-color-error); }
@media (prefers-color-scheme: dark) { :root { --invalid-border: #ff5449; } }
.field-box.is-invalid,
.field-box.is-invalid:focus-within,
.field-box.is-limit { box-shadow: 0 0 0 2px var(--invalid-border) inset; }
.field-label { font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.field-input {
    width: 100%;
    min-height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 17px;
    font-weight: 500;
    outline: none;
    appearance: none;
}
.field-box-area { justify-content: flex-start; min-height: 150px; }
.field-area { flex: 1; min-height: 96px; padding: 4px 0 0; resize: none; line-height: 1.4; }
.field-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .45; font-weight: 400; }
.field-input option { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-background); }
.field-display {
    display: block;
    text-align: left;
    cursor: pointer;
}
.native-hidden {
    position: absolute;
    left: 20px;
    bottom: 6px;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.field-caret {
    position: absolute;
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    color: var(--md-sys-color-on-surface-variant);
}
.field-input-color { width: 72px; height: 32px; margin-top: 4px; padding: 0; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-row-amount { grid-template-columns: 1.6fr 1fr; }
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
.segmented { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
    font-size: 15px;
    font-weight: 500;
}
.segmented input:checked + span {
    background: var(--md-sys-color-primary-container);
    border-color: transparent;
    color: var(--md-sys-color-on-primary-container);
}
.segmented input:focus-visible + span { outline: 2px solid var(--md-sys-color-primary-container); outline-offset: 2px; }
.rule-custom { display: flex; flex-direction: column; gap: 8px; scroll-margin-bottom: 96px; }
.rule-total { padding: 0 8px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.rule-total.error { color: var(--md-sys-color-error); }
.dialog-actions {
    position: sticky;
    bottom: -16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 -16px -16px;
    padding: 12px 16px 16px;
    background: linear-gradient(transparent, var(--md-sys-color-background) 40%);
}
.btn-round {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    --md-icon-size: 20px;
}
.btn-create {
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-family: var(--app-main-font);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.dialog-card-compact {
    align-items: flex-start;
    padding: 72px 24px 22px;
    text-align: left;
}
.dialog-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 30px;
    --md-icon-size: 30px;
}
.shared-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
    font-family: var(--app-main-font);
}
.shared-layer > * {
    position: fixed;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
}
.emoji-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 58px;
}
.emoji-slot .emoji-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.emoji-plus {
    --md-icon-size: 46px;
    color: var(--md-sys-color-on-surface-variant);
    pointer-events: none;
}
.emoji-input:not(:placeholder-shown) + .emoji-plus { display: none; }
.dialog.outline-light-1::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    box-shadow: inherit;
    pointer-events: none;
}
.form-error {
    padding: 0 8px;
    font-size: 14px;
    color: var(--md-sys-color-error);
}
.form-error:empty { display: none; }
.emoji-slot .emoji-input { opacity: 0; }
.emoji-view {
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}
.emoji-view:empty { display: none; }
.dialog-delete {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    --md-icon-size: 18px;
}
.dialog-delete[hidden] { display: none; }
.dialog-delete-label { display: none; }
.dialog-delete.armed {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
.dialog-delete.armed .dialog-delete-label { display: inline; }
.is-off {
    visibility: hidden;
    pointer-events: none;
}
.dialog-actions .form-error {
    flex: 1;
    margin: 0;
    padding: 0 4px;
    text-align: left;
    font-size: 13px;
    line-height: 1.25;
}
.mov-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.mov-preview-amount { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.5px; }
.mov-preview .dialog-title { font-size: 18px; color: var(--md-sys-color-on-background); }
.mov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mov-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
}
#dialog-movimiento.is-wide { width: min(800px, calc(100vw - 32px)); }
#dialog-movimiento.is-wide .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 16px;
}
#dialog-movimiento.is-wide .form > * { grid-column: 2; }
#dialog-movimiento.is-wide .form > .dialog-card-left { grid-column: 1; grid-row: 1 / span 7; justify-content: center; padding: 24px; }
#dialog-movimiento.is-wide .form > .dialog-actions { justify-content: flex-end; }
@media (min-width: 681px) {
    #dialog-movimiento.is-wide .form:has([data-racha-campo]:not([hidden])) > .dialog-card-left { grid-row: 1 / span 8; }
    #dialog-movimiento.is-wide .form > .dialog-card-left { position: sticky; top: 0; align-self: start; min-height: calc(var(--form-h, 0px) - 32px); box-sizing: border-box; }
}
@media (max-width: 680px) {
    #dialog-movimiento.is-wide .form { grid-template-columns: 1fr; }
    #dialog-movimiento.is-wide .form > *,
    #dialog-movimiento.is-wide .form > .dialog-card-left { grid-column: 1; grid-row: auto; }
}
@media (min-width: 681px) and (max-width: 900px) {
    #dialog-movimiento.is-wide { width: min(680px, calc(100vw - 32px)); }
    #dialog-movimiento.is-wide .form { grid-template-columns: 5fr 6fr; gap: 12px; }
    #dialog-movimiento.is-wide .form > .dialog-card-left { padding: 20px; }
    #dialog-movimiento.is-wide .mov-preview-amount { font-size: 30px; }
    #dialog-movimiento.is-wide .mov-preview .dialog-title { font-size: 16px; }
    #dialog-movimiento.is-wide .mov-chip { padding: 4px 10px; font-size: 12px; }
}
.dialog:not(.is-editing) .mov-preview { display: none; }
.dialog.is-editing .mov-create-title { display: none; }
.dialog.dialog-full {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    border-radius: 0;
}
.summary {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: min(800px, calc(100% - 32px));
    margin: 0 auto;
    padding: 15px 0 40px;
    font-family: var(--app-main-font);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.summary:focus, .summary:focus-visible { outline: none; }
.summary-top { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.summary-close { position: static; background: color-mix(in srgb, var(--md-sys-color-background) 55%, transparent); }
.summary-filters { display: flex; gap: 11px; }
.summary-pill {
    flex-direction: row;
    align-items: center;
    min-height: 36px;
    padding: 0 30px 0 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-sys-color-background) 70%, transparent);
    cursor: pointer;
}
.summary-pill .field-display { width: auto; font-size: 16px; font-weight: 400; white-space: nowrap; }
.summary-pill .field-caret { right: 6px; }
.summary-accounts { align-items: flex-start; min-height: 0; margin-top: 56px; padding-inline: 26px; }
.summary-total { margin-top: 115px; padding-inline: 26px; }
.summary-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 45px; }
.summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 99px;
    box-sizing: border-box;
    padding: 20px 24px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--md-sys-color-background) 40%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 7%, transparent);
}
.summary-card-out { color: color-mix(in srgb, var(--md-sys-color-error) 60%, #888); }
.summary-card-label { font-size: 16px; font-weight: 500; line-height: 1.25; }
.summary-card-amount { font-size: 24px; font-weight: 600; line-height: 1.2; }
.summary-filters .summary-pill:first-child { min-width: 127px; }
.summary-filters .summary-pill:last-child { min-width: 86px; }
[data-only-create][hidden] { display: none; }
#dialog-cuenta { max-height: min(629px, calc(100vh - 32px)); }
.dialog-transfer { width: min(720px, calc(100vw - 32px)); }
.dialog-transfer .form { gap: 20px; padding: 24px; }
.dialog-transfer .dialog-actions { bottom: -24px; }
.transfer-head { display: flex; align-items: center; justify-content: space-between; }
.transfer-head .dialog-close,
.transfer-head .dialog-delete { position: static; }
.transfer-intro { margin: clamp(32px, 9vh, 96px) 0 4px; }
.transfer-title { font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.5px; }
.transfer-sub { max-width: 540px; margin-top: 10px; font-size: 19px; line-height: 1.3; color: var(--md-sys-color-on-surface-variant); }
.transfer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.transfer-arrow {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 480px) {
    .transfer-title { font-size: 36px; }
    .transfer-row { grid-template-columns: 1fr; }
    .transfer-arrow { justify-self: center; rotate: 90deg; }
}
.transfer-available {
    margin: -12px 8px 0;
    height: 1.3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.3;
    color: var(--md-sys-color-on-surface-variant);
}
.transfer-available.is-over { color: var(--md-sys-color-error); }
.transfer-rate { display: flex; flex-direction: column; gap: 8px; }
.transfer-rate .transfer-available { margin: 0 8px; }
.transfer-result { color: var(--md-sys-color-on-background); font-weight: 500; }
.dialog-confirm { width: min(500px, calc(100vw - 32px)); }
.confirm-panel { gap: 12px; padding: 28px 28px 24px; }
.confirm-title { font-size: 40px; font-weight: 500; letter-spacing: -.5px; line-height: 1.1; }
.confirm-text { font-size: 20px; line-height: 1.3; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.confirm-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    --md-icon-size: 18px;
}
.confirm-btn.danger {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
.field-box[hidden] { display: none; }
[data-racha-campo], [data-limite] { scroll-margin-bottom: 96px; }
[data-no-grow="siempre"].is-off { display: none; }
#dialog-racha { max-height: min(629px, calc(100vh - 32px)); }
#dialog-movimiento:not(.is-wide) .form { gap: 12px; }
#dialog-movimiento:not(.is-wide) .dialog-actions { margin-top: -8px; }
#dialog-movimiento .form { padding-bottom: 76px; }
#dialog-movimiento .dialog-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 12px 16px 16px; }
@media (min-width: 681px) {
    #dialog-movimiento.is-wide .dialog-actions { left: calc(50% + 8px); }
}
@media (min-width: 681px) and (max-width: 900px) {
    #dialog-movimiento.is-wide .dialog-actions { left: calc(45.4545% + 8px); }
}
.dialog-fields { display: contents; }
@media (min-width: 681px) {
    #dialog-movimiento.is-wide .form { height: 100%; overflow: clip; grid-template-rows: minmax(0, 1fr); padding-bottom: 16px; }
    #dialog-movimiento.is-wide .dialog-fields {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        gap: 16px;
        min-height: 0;
        padding-bottom: 76px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    #dialog-movimiento.is-wide .form > .dialog-card-left,
    #dialog-movimiento.is-wide .form:has([data-racha-campo]:not([hidden])) > .dialog-card-left {
        grid-row: 1;
        position: relative;
        align-self: stretch;
        min-height: 0;
    }
}
.paginacion {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    margin: 0;
    border-radius: 999px;
    background: var(--md-sys-color-background);
    font-family: var(--app-main-font);
}
.pag-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 16%, transparent);
    color: var(--md-sys-color-on-background);
    text-decoration: none;
    cursor: pointer;
    --md-icon-size: 26px;
}
.pag-btn.is-disabled {
    color: color-mix(in srgb, var(--md-sys-color-on-background) 28%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 8%, transparent);
    cursor: default;
}
.pag-btn:focus-visible { outline: 2px solid var(--md-sys-color-primary-container); outline-offset: 2px; }
.pag-estado {
    min-width: 64px;
    padding: 0 6px;
    text-align: center;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--md-sys-color-on-surface-variant);
}
.page:has(.paginacion) { padding-bottom: 0; }
.popover {
    position: fixed;
    z-index: 30;
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    border-radius: 32px;
    background: var(--md-sys-color-background);
    box-shadow: 0 20px 56px #000000b3;
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    overflow: hidden;
}
.popover-select { border-radius: 28px; }
.popover-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
    padding: 8px;
    overflow-y: auto;
    scrollbar-width: none;
}
.pick-item {
    flex: none;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--app-main-font);
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    outline: none;
}
.pick-item:hover,
.pick-item:focus-visible { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-background); }
.pick-item[aria-selected="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 600;
}
.cal { width: 400px; max-width: 100%; box-sizing: border-box; padding: 20px 24px 24px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-size: 19px; font-weight: 500; }
.cal-nav { display: flex; gap: 4px; }
.cal-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    --md-icon-size: 22px;
}
.cal-arrow:hover { background: var(--md-sys-color-surface-container-high); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; gap: 4px 0; }
.cal-dow {
    display: grid;
    place-items: center;
    height: 36px;
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}
.cal-day {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: transparent;
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
}
.cal-day:hover { background: var(--md-sys-color-surface-container-high); }
.cal-day.out { opacity: .35; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--md-sys-color-primary-container); }
.cal-day.selected {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
    box-shadow: none;
}
.clock { width: 360px; max-width: 100%; box-sizing: border-box; padding: 20px 20px 24px; }
.clock-chips { display: flex; align-items: center; justify-content: center; gap: 8px; }
.clock-colon { font-size: 40px; font-weight: 500; }
.clock-chip {
    width: 104px;
    height: 68px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 44px;
    font-weight: 500;
    cursor: pointer;
}
.clock-chip.active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.clock-dial {
    position: relative;
    width: 264px;
    height: 264px;
    margin: 20px auto;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container-low);
    touch-action: none;
    cursor: pointer;
}
.clock-layer { position: absolute; inset: 0; pointer-events: none; }
.clock-tick,
.clock-num,
.clock-bubble,
.clock-dot,
.clock-hand { position: absolute; left: 50%; top: 50%; }
.clock-tick {
    width: 2px;
    height: 5px;
    margin: -2.5px 0 0 -1px;
    border-radius: 1px;
    background: var(--md-sys-color-on-surface-variant);
    opacity: .4;
}
.clock-tick.major { height: 9px; margin-top: -4.5px; opacity: .7; }
.clock-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    font-size: 18px;
    font-weight: 500;
}
.clock-num.small {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: .6;
}
.clock-hand { width: 0; height: 0; }
.clock-hand::before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 2px;
    height: var(--r);
    background: var(--md-sys-color-primary);
}
.clock-bubble {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 18px;
    font-weight: 600;
}
.clock-dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
}
.clock-ampm { display: flex; justify-content: center; gap: 10px; }
.clock-ampm-button {
    width: 96px;
    height: 48px;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}
.clock-ampm-button.active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .popover { box-shadow: 0 12px 32px rgb(20 40 25 / .16), 0 2px 8px rgb(20 40 25 / .08); }
}
.home {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 0 0;
    font-family: var(--app-main-font);
}
.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    border-radius: 40px;
    background: var(--md-sys-color-surface-container-low);
}
.home-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    min-height: inherit;
    box-sizing: border-box;
    padding: 24px 32px 32px;
}
.home-hero-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 62px;
}
.home-chip {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--md-sys-color-background) 70%, transparent);
    backdrop-filter: blur(6px);
}
.home-chip-name { font-size: 12px; }
.home-chip-amount { font-size: 16px; font-weight: 500; }
.home-hero-total { display: flex; flex-direction: column; }
.home-hero-label { font-size: 22px; font-weight: 400; }
.home-hero-amount {
    font-size: clamp(44px, 7vw, 64px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
}
.home-quick { display: flex; gap: 20px; align-items: center; }
.home-quick-input {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 0 40px;
    border-radius: 999px;
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
}
.home-fab {
    flex: none;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    margin-left: auto;
    --md-icon-size: 22px;
}
.home-movements-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.home-section-title {
    font-size: 26px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}
.home-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: transparent;
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    --md-icon-size: 18px;
}
.home-day {
    font-size: 15px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
    margin: 16px 0 6px;
}
.home-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}
.home-mov {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}
.home-mov-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 30px;
    background: var(--md-sys-color-surface-container-high);
}
.home-mov-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.home-mov-desc { font-size: 19px; font-weight: 600; }
.home-mov-desc, .home-mov-account { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-mov .home-pill { flex: none; }
.home-mov-account { font-size: 15px; color: var(--md-sys-color-on-surface-variant); }
.home-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.home-pill.gasto   { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.home-pill.ingreso { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.home-pill.transferencia { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-background); }
.home-pill.ahorro  { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.home-chip-amount small { font-size: 12px; font-weight: 400; opacity: .7; }
.home-hero-currency {
    margin-left: 10px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .8;
}
.home-hero-note { margin-top: 6px; font-size: 13px; opacity: .8; }
button.home-mov {
    position: relative;
    width: calc(100% + 16px);
    padding: 8px;
    margin: 0 -8px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
button.home-mov:hover { background: var(--md-sys-color-surface-container-low); }
.home-hero { cursor: pointer; }
.home-hero:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.home-hero-accounts { align-items: flex-start; }
.home-chip { padding: 9px 14px; }
.home-chip-name, .home-chip-amount { line-height: 1.25; }
.home-chip-amount small { line-height: 1; }
.home-mov-icon md-icon { --md-icon-size: 30px; }
.home-filtrado { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 8px; font-size: 15px; color: var(--md-sys-color-on-surface-variant); --md-icon-size: 18px; }
.home-filtrado a { margin-left: 4px; color: var(--md-sys-color-primary); font-weight: 600; text-decoration: none; }
.home-quick-input {
    position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 88px; padding: 32px; box-sizing: border-box; border: 0; border-radius: 32px; cursor: text; text-align: left;
    background: var(--md-sys-color-background); color: var(--md-sys-color-on-surface-variant);
    font: 400 16px var(--app-main-font);
}
.home-quick-input { transition: opacity .12s; }
.home-quick-input.chat-oculta { opacity: 0; pointer-events: none; }
.home-quick-input md-icon { color: var(--md-sys-color-primary); opacity: .7; --md-icon-size: 24px; }
.chat-backdrop {
    position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 24px 8px; box-sizing: border-box;
    background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .22s;
}
.chat-backdrop.abierto { opacity: 1; }
.chat-backdrop.cerrando { transition-duration: .38s; }
.chat-backdrop[hidden] { display: none; }
.chat-window {
    position: relative; box-sizing: border-box; width: min(800px, 100%); height: calc(100dvh - 48px); padding: 8px; border-radius: 48px;
    background: var(--md-sys-color-background);
}
.chat {
    position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border-radius: 40px;
    color: var(--md-sys-color-on-surface); font-family: var(--app-main-font);
}
.chat-background { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.chat-background .background { position: absolute; inset: 0; }
.chat-glass {
    position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 64px; cursor: pointer;
    color: inherit; background: linear-gradient(to bottom, color-mix(in srgb, var(--md-sys-color-on-background) 3%, transparent), color-mix(in srgb, var(--md-sys-color-on-background) 15%, transparent), color-mix(in srgb, var(--md-sys-color-on-background) 3%, transparent));
    backdrop-filter: blur(4px); --md-icon-size: 20px; transition: opacity .2s;
}
.chat-glass::before {
    content: ""; position: absolute; inset: 0; margin: 1px; border-radius: inherit; z-index: 0;
    background: color-mix(in srgb, var(--md-sys-color-background), transparent 20%); box-shadow: rgba(0, 0, 0, .01) 0 16px 24px inset;
}
.chat-glass > * { position: relative; z-index: 1; }
.chat-glass:disabled { opacity: .5; cursor: default; }
.chat-top { position: relative; z-index: 3; display: flex; gap: 4px; padding: 16px 16px 0; }
.home-empty-guia a { color: var(--md-sys-color-primary); font-weight: 600; }
.chat-messages {
    position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 80px; overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%);
    scrollbar-width: none;
}
.chat-messages::-webkit-scrollbar { display: none; }
.chat-message {
    position: relative; display: block; flex: 0 0 auto; width: fit-content; max-width: 80%; overflow: hidden; padding: 16px 24px; border-radius: 32px;
    font: 500 16px/1.3 var(--app-main-font); white-space: pre-wrap; word-break: break-word; z-index: 10;
}
.chat-message.user { align-self: flex-end; background: color-mix(in srgb, var(--md-sys-color-on-background) 20%, transparent); backdrop-filter: blur(16px); color: color-mix(in srgb, var(--md-sys-color-background) 96%, transparent); }
.chat-message.user:first-of-type { max-width: calc(100% - 148px); }
.chat-message.assistant { align-self: flex-start; color: var(--md-sys-color-on-surface); }
.chat-glass-bubble { background: linear-gradient(to bottom, color-mix(in srgb, var(--md-sys-color-on-background) 3%, transparent), color-mix(in srgb, var(--md-sys-color-on-background) 15%, transparent), color-mix(in srgb, var(--md-sys-color-on-background) 3%, transparent)); backdrop-filter: blur(4px); }
.chat-glass-bubble::before {
    content: ""; position: absolute; inset: 0; margin: 1px; border-radius: inherit; z-index: 0;
    background: color-mix(in srgb, var(--md-sys-color-background), transparent 20%); box-shadow: rgba(0, 0, 0, .01) 0 16px 24px inset;
}
.chat-glass-bubble > * { position: relative; z-index: 1; }
.chat-message-text { display: block; white-space: pre-wrap; word-break: break-word; }
.split-word { display: inline-block; white-space: pre; }
.chat-message-loading { display: flex; align-items: center; gap: 8px; color: var(--md-sys-color-on-surface-variant); --md-icon-size: 20px; }
.is-loading-message::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; z-index: 2;
    background: radial-gradient(ellipse at center, var(--md-sys-color-background), transparent 70%); animation: chat-brillo 1.1s ease-in-out infinite;
}
@keyframes chat-brillo { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.chat-card { position: relative; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; max-width: 80%; padding: 16px 24px; border-radius: 32px; font: 500 16px/1.3 var(--app-main-font); z-index: 10; }
.chat-card strong { font-size: 18px; font-weight: 600; }
.chat-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.chat-card-btn { flex: 1; height: 40px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; color: inherit; background: color-mix(in srgb, var(--md-sys-color-on-background) 8%, transparent); }
.chat-card-ok { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chat-card-btn:disabled { opacity: .5; cursor: default; }
.chat-input-area { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 8px; box-sizing: border-box; }
.chat-input {
    flex: 1; min-width: 0; height: 64px; max-height: 140px; padding: 16px; box-sizing: border-box; border: 0; border-radius: 12px; outline: 0; resize: none;
    background: transparent; color: var(--md-sys-color-on-surface); font: 400 24px/1.3 var(--app-main-font);
}
.chat-input::placeholder { color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent); }
.chat-botones { display: flex; flex-direction: column; gap: 8px; }
.chat-botones .chat-glass { width: 64px; height: 64px; --md-icon-size: 24px; }
.chat-glass.grabando { background: color-mix(in srgb, var(--md-sys-color-error) 50%, transparent); animation: chat-pulso 1.5s ease-in-out infinite; }
@keyframes chat-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (max-width: 680px) {
    .chat-backdrop { padding: 0; }
    .chat-window { width: 100%; height: 100dvh; padding: 10px; border-radius: 0; box-shadow: none; }
    .chat { border-radius: 40px; }
    .chat-message.assistant { max-width: 100%; }
    .chat-input { font-size: 17px; padding: 21px 12px; overflow: hidden; }
    .chat-input::placeholder { white-space: nowrap; }
}
@media (max-width: 680px) {
    .home-quick { gap: 16px; }
    .home-quick-input { flex: 1 1 0; width: auto; padding: 12px 18px; justify-content: center; border-radius: 64px; background: var(--md-sys-color-surface-container); box-shadow: none; }
    .home-quick-input span { display: none; }
    .home-quick-input md-icon { opacity: 1; --md-icon-size: 16px; }
}
.page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 0 0 48px;
    font-family: var(--app-main-font);
}
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-title {
    font-size: 42px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}
.page-fab {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    --md-icon-size: 22px;
}
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 136px;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    cursor: pointer;
}
.tile-icon { font-size: 40px; line-height: 1; }
.tile-name { font-size: 16px; font-weight: 600; }
.tile-meta { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.page-guia { margin: 0 0 16px; font-size: 17px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }
.tile-add {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    --md-icon-size: 22px;
}
.logros { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1000px) {
    .logros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.logro {
    --cel: 14px;
    --sep: 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px 16px;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-low);
    font-family: var(--app-main-font);
}
.logro-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logro-icono { flex: none; font-size: 30px; line-height: 1; }
.logro-titulo { flex: 1 1 160px; min-width: 0; }
.logro-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 600; line-height: 1.25; }
.logro-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
.logro-stats { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.logro-stat {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.logro-insignia {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-on-background) 18%, transparent);
    --md-icon-size: 20px;
}
.logro-insignia.is-ok {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: none;
}
.logro-insignia.is-apagada { color: var(--md-sys-color-on-surface-variant); }
.heat { display: flex; gap: var(--sep); min-width: 0; overflow: hidden; padding: 3px; margin: -3px; }
.heat-semana {
    flex: 1 1 0;
    min-width: var(--cel);
    max-width: 26px;
    display: flex;
    flex-direction: column;
    gap: var(--sep);
}
.heat-semana[hidden] { display: none; }
.heat-mes {
    width: 0;
    overflow: visible;
    height: 16px;
    flex: none;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
}
.heat-dia {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
}
.heat-leyenda .heat-dia { width: var(--cel); }
.heat-dia.off { background: color-mix(in srgb, var(--md-sys-color-on-background) 10%, transparent); }
.heat-dia.out { background: color-mix(in srgb, var(--md-sys-color-on-background) 4%, transparent); }
.heat-dia.fut { visibility: hidden; }
.heat-dia.on { background: var(--md-sys-color-primary-container); }
.heat-dia.on[data-n="1"] { background: color-mix(in srgb, var(--md-sys-color-primary-container) 32%, var(--md-sys-color-surface-container-low)); }
.heat-dia.on[data-n="2"] { background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-container-low)); }
.heat-dia.on[data-n="3"] { background: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, var(--md-sys-color-surface-container-low)); }
.heat-dia.hoy { outline: 2px solid var(--md-sys-color-on-background); outline-offset: 1px; }
.heat-leyenda {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sep);
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.heat-leyenda span { padding: 0 4px; }
.logros-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-low);
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}
.logros-vacio-icono { font-size: 44px; line-height: 1; }
.logros-vacio p { max-width: 28em; font-size: 16px; }
.logros-vacio-enlace {
    margin-top: 6px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 680px) {
    .logro { --cel: 12px; --sep: 3px; padding: 16px 16px 12px; }
    .logro-nombre { font-size: 17px; }
}
.logro { cursor: pointer; }
.logro:focus-visible { outline: 2px solid var(--md-sys-color-primary-container); outline-offset: 2px; }
#dialog-logro { width: min(740px, calc(100vw - 32px)); }
#dialog-logro .form { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; height: min(580px, calc(100dvh - 32px)); }
#dialog-logro .dialog-card { align-self: stretch; justify-content: center; }
.logro-modal-derecha { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
@media (max-width: 760px) {
    #dialog-logro .form { grid-template-columns: 1fr; height: auto; min-height: 0; align-content: start; }
    #dialog-logro .dialog-card { align-self: auto; }
    .logro-modal-derecha { max-height: none; overflow: visible; }
}
.logro-modal-resumen { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; font-size: 15px; color: var(--md-sys-color-on-surface-variant); }
.logro-modal-resumen strong { font-size: 20px; color: var(--md-sys-color-on-background); }
.logro-modal-lista { display: flex; flex-direction: column; gap: 8px; }
.logro-modal-fila { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 22px; background: var(--md-sys-color-surface-container-low); }
.logro-modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.logro-modal-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
.logro-modal-fecha { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.logro-modal-monto { padding: 4px 14px; border-radius: 999px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 600; white-space: nowrap; }
.logro-modal-vacio { padding: 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.page-actions { display: flex; align-items: center; gap: 12px; }
.icon-box {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    --md-icon-size: 22px;
}
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px 22px;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-low);
}
.stat-label { font-size: 17px; color: var(--md-sys-color-on-surface-variant); }
.stat-amount { font-size: 30px; font-weight: 500; letter-spacing: -.5px; }
.stats-note {
    margin-top: -16px;
    padding-left: 8px;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
}
.mov-table-wrap {
    overflow-x: auto;
    border-radius: 24px;
}
.mov-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
}
.mov-table th,
.mov-table td {
    box-sizing: border-box;
    padding: 0 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mov-table th:first-child,
.mov-table td:first-child { padding-left: 16px; }
.mov-table thead th {
    height: 56px;
    font-size: 16px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
    --md-icon-size: 18px;
}
.mov-table thead th md-icon { margin-right: 8px; vertical-align: middle; }
.mov-table tbody td { height: 60px; }
.col-date   { width: 108px; }
.col-time   { width: 96px; }
.col-amount { width: 170px; text-align: right !important; }
.col-desc   { width: auto; padding-left: 28px !important; }
.col-cat    { width: 180px; }
.col-acc    { width: 160px; }
.col-edit   { width: 64px; padding: 0 8px !important; text-align: center !important; }
.col-amount.gasto   { color: var(--md-sys-color-error); }
.col-amount.transferencia { color: var(--md-sys-color-on-surface-variant); }
.mov-currency { margin-left: 4px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.mov-muted { color: var(--md-sys-color-on-surface-variant); }
.mov-edit {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    --md-icon-size: 18px;
}
.mov-edit:hover { background: var(--md-sys-color-surface-container-high); }
.mov-empty {
    padding: 36px 0;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}
.mov-busqueda { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 8px; font-size: 15px; color: var(--md-sys-color-on-surface-variant); --md-icon-size: 18px; }
.mov-busqueda a { margin-left: 4px; color: var(--md-sys-color-primary); font-weight: 600; text-decoration: none; }
.dialog-buscar { width: min(480px, calc(100vw - 32px)); border-radius: 36px; }
.buscar-form { display: flex; align-items: center; gap: 14px; box-sizing: border-box; height: 72px; padding: 0 26px; --md-icon-size: 26px; }
.buscar-form md-icon { flex: none; color: var(--md-sys-color-on-background); }
.buscar-input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--md-sys-color-on-background); font: 400 20px var(--app-main-font); }
.buscar-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .6; }
.dialog-descargar { width: min(300px, calc(100vw - 32px)); border-radius: 36px; }
.descargar-panel { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.descargar-title { display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 22px 10px; color: var(--md-sys-color-on-background); font: 500 28px var(--app-main-font); letter-spacing: -.3px; --md-icon-size: 28px; }
.descargar-item { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 22px; overflow: hidden; border-radius: 26px; color: var(--md-sys-color-on-background); font: 500 19px var(--app-main-font); text-decoration: none; cursor: pointer; --md-icon-size: 26px; }
.descargar-item:hover, .descargar-item:focus-visible { outline: 0; background: var(--md-sys-color-surface-container-high); }
.buscar-input::-webkit-search-cancel-button { display: none; appearance: none; }
.buscar-limpiar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: none; color: var(--md-sys-color-on-surface-variant); cursor: pointer; --md-icon-size: 22px; }
.buscar-limpiar:hover { color: var(--md-sys-color-on-background); }
.buscar-input:placeholder-shown + .buscar-limpiar { display: none; }
.apartado { display: flex; flex-direction: column; gap: 12px; }
.apartado-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.3px; --md-icon-size: 26px; }
.apartado-stats { grid-template-columns: repeat(3, 1fr); }
.stat-principal .stat-amount { color: var(--md-sys-color-primary); }
.apartado-lista { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.apartado-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 8px; background: var(--md-sys-color-surface-container-low); font-size: 16px; }
.apartado-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apartado-monto { flex: none; font-weight: 600; }
.apartado .stats-note { margin-top: 4px; }
@media (max-width: 680px) {
    .apartado-stats { grid-template-columns: 1fr 1fr; }
    .apartado-stats .stat-principal { grid-column: 1 / -1; order: -1; }
    .apartado .stats-note { margin-top: 0; }
}
.app-view.landing {
    padding: 20px clamp(12px, 3.2vw, 60px) 40px;
    overflow: visible;
}
:root[data-scroll-bloqueado] .app-view.landing {
    padding-right: clamp(12px, 3.2vw, 60px);
    overflow: visible;
}
.landing-card {
    box-sizing: border-box;
    position: relative;
    container-type: inline-size;
    min-height: clamp(500px, 78vh, 780px);
}
.landing-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: clamp(52px, 3.6vw, 60px);
    padding: 0 30px;
    border-radius: 999px;
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font: 500 clamp(17px, 1.2vw, 22px) / 1 var(--app-main-font);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    --md-icon-size: 22px;
}
.landing-btn.primary {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: none;
}
.landing-hero { padding: clamp(28px, 2.7vw, 50px); }
.landing-logo {
    display: block;
    flex: none;
    width: clamp(88px, 7.8vw, 150px);
    aspect-ratio: 1;
    object-fit: contain;
}
.landing-title {
    margin-top: clamp(16px, 2vw, 34px);
    font-size: clamp(64px, 23.5cqw, 200px);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.045em;
}
.landing-tagline {
    margin-top: 18px;
    max-width: 15em;
    font-size: clamp(24px, 2.2vw, 42px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--md-sys-color-outline);
}
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.landing-shot { align-items: center; }
.phone.landing-phone-solo { position: absolute; left: 50%; top: 10.5cqw; translate: -50% 0; }
.phone {
    position: relative;
    flex: none;
    width: 64cqw;
    aspect-ratio: 9 / 19.5;
    box-sizing: border-box;
    border: clamp(8px, 1.7cqw, 13px) solid #060906;
    border-radius: 7.5cqw;
    background: #f1fded;
    overflow: hidden;
}
.screen {
    position: relative;
    flex: none;
    box-sizing: border-box;
    border: clamp(8px, 1.7cqw, 13px) solid #060906;
    border-radius: 5.5cqw;
    background: #f1fded;
    overflow: hidden;
}
.phone img,
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.landing-phone-a, .landing-phone-b { position: absolute; width: 59cqw; }
.landing-phone-a { left: 10.5cqw; top: 10.5cqw; }
.landing-phone-b { left: 33cqw; top: 33cqw; box-shadow: 0 0 0 1px #1a1f1a, 0 18px 60px #0009; }
.landing-screen { position: absolute; left: 10.5cqw; top: 10.5cqw; width: 126cqw; aspect-ratio: 16 / 10; }
.landing-coffee {
    align-items: center;
    justify-content: center;
    min-height: clamp(520px, 86vh, 880px);
    text-align: center;
    background: var(--md-sys-color-surface-container-lowest);
}
.landing-coffee-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    padding: 32px;
}
.landing-coffee-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--md-sys-color-on-surface-variant);
    --md-icon-size: 22px;
}
.landing-coffee-price { font-size: clamp(22px, 2.2vw, 32px); color: var(--md-sys-color-on-surface-variant); }
.landing-coffee-price strong {
    margin-left: .15em;
    font-size: clamp(72px, 9vw, 140px);
    font-weight: 600;
    letter-spacing: -.05em;
    color: var(--md-sys-color-on-background);
}
.landing-coffee-text { max-width: 30em; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }
.landing-coffee .landing-btn { margin-top: 16px; }
.dialog-auth {
    width: min(800px, calc(100vw - 32px));
    height: min(720px, calc(100dvh - 48px));
    max-height: none;
    border-radius: 38px;
}
.auth-body {
    position: relative;
    display: flex;
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
}
.auth-col { display: flex; flex-direction: column; gap: 16px; width: min(400px, 100%); margin: auto; }
.auth-close { top: 20px; left: 20px; width: 44px; height: 44px; --md-icon-size: 18px; }
.auth-logo {
    display: block;
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.auth-title { margin: 3px 0 8px; font-size: clamp(36px, 4vw, 51px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    height: 64px;
    padding: 10px 16px;
    border-radius: 19px;
    background: color-mix(in srgb, var(--md-sys-color-on-background) 3%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 10%, transparent);
    cursor: text;
    transition: box-shadow .2s;
}
.auth-field:focus-within { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary-container); }
.auth-field.is-invalid,
.auth-field.is-invalid:focus-within { box-shadow: inset 0 0 0 2px var(--invalid-border); }
.auth-label { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.auth-field { position: relative; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; --md-icon-size: 20px; }
.auth-eye:hover { background: color-mix(in srgb, var(--md-sys-color-on-background) 6%, transparent); }
.auth-field:has(.auth-eye) .auth-input { padding-right: 40px; }
.auth-hint { margin: -8px 3px 0; font-size: 12px; line-height: 1.3; color: var(--md-sys-color-on-surface-variant); }
.auth-input {
    width: 100%;
    padding: 3px 0 2px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: 500 15px var(--app-main-font);
}
.auth-input:-webkit-autofill { -webkit-text-fill-color: var(--md-sys-color-on-background); transition: background-color 99999s; }
.auth-error { min-height: 16px; margin: 0 3px; font-size: 12px; line-height: 1.3; color: var(--md-sys-color-error); }
.auth-submit {
    position: relative;
    height: 56px;
    border-radius: 14px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: 500 16px var(--app-main-font);
    cursor: pointer;
    overflow: hidden;
}
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 44px; border-radius: 12px; text-decoration: none; cursor: pointer;
    background: transparent; color: var(--md-sys-color-on-surface-variant);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 14%, transparent);
    font: 500 14px var(--app-main-font);
}
.auth-google:hover { background: color-mix(in srgb, var(--md-sys-color-on-background) 4%, transparent); }
.auth-legal { margin: 0 3px; font-size: 10px; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); opacity: .85; }
.auth-legal a, .auth-legal-link { color: var(--md-sys-color-on-background); text-decoration: underline; text-underline-offset: 2px; }
@media only screen and (max-width: 680px) {
    .app-view.landing { padding-top: 12px; }
    .landing-card { min-height: clamp(480px, 82svh, 700px); }
    .landing-hero { min-height: 82svh; }
    .landing-title { font-size: min(70px, 24cqw); }
    .landing-tagline { font-size: clamp(24px, 6.4vw, 42px); }
    .landing-hero { padding: 40px; }
    .landing-actions { flex-direction: column; gap: 10px; }
    .landing-actions .landing-btn { width: 100%; height: 48px; font-size: 16px; }
    .landing-shot:has(.landing-screen) { min-height: 0; aspect-ratio: 1; }
    .dialog-auth { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
    .auth-body { padding: 48px 16px 24px; }
    .auth-close { top: 16px; left: 16px; }
}
.main-grid > .grid-card { animation: animation-grow-in .6s cubic-bezier(.2,.8,.3,1) backwards; transform-origin: top center; }
.main-grid > .grid-card:nth-child(2) { animation-delay: .08s; }
.main-grid > .grid-card:nth-child(3) { animation-delay: .16s; }
.main-grid > .grid-card:nth-child(n+4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .main-grid > .grid-card { animation: none; } }
.legal { width: min(860px, 100%); margin: 0 auto; padding: 16px 0 72px; font-family: var(--app-main-font); color: var(--md-sys-color-on-background); }
.legal-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); font-size: 16px; text-decoration: none; }
.legal-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 24px; padding: 4px; border-radius: 999px; background: var(--md-sys-color-surface-container-low); }
.legal-tab { position: relative; z-index: 1; display: grid; place-items: center; height: 56px; border-radius: 999px; color: var(--md-sys-color-on-surface-variant); font-size: 17px; text-decoration: none; transition: color .3s; }
.legal-tab.is-active { color: var(--md-sys-color-on-background); }
.legal-pill {
    position: absolute; top: 4px; left: 4px; bottom: 4px;
    width: calc((100% - 12px) / 2);
    border-radius: 999px;
    background: var(--md-sys-color-background);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-background) 14%, transparent);
    transition: transform .4s cubic-bezier(.48, 0, 0, 1);
}
.legal-tabs.is-terminos .legal-pill { transform: translateX(calc(100% + 4px)); }
@media (prefers-reduced-motion: reduce) { .legal-pill { transition: none; } }
.legal-title { margin: 0 0 12px; font-size: clamp(36px, 6vw, 52px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.legal-fecha { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.legal h2 { margin: 44px 0 10px; font-size: clamp(26px, 4vw, 36px); font-weight: 400; letter-spacing: -.02em; }
.legal h3 { margin: 28px 0 8px; font-size: 20px; font-weight: 600; }
.legal p, .legal li, .legal td, .legal th { font-size: 17px; line-height: 1.55; color: var(--md-sys-color-on-surface-variant); }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 24px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--md-sys-color-on-background); font-weight: 600; }
.legal p a, .legal li a, .legal td a { color: var(--md-sys-color-primary-container); text-underline-offset: 2px; }
.legal-tabla { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.legal-tabla th, .legal-tabla td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-on-background) 12%, transparent); }
.legal-tabla th { color: var(--md-sys-color-on-background); font-weight: 600; }
.legal-nota { margin: 0 0 14px; padding: 14px 18px; border-radius: 18px; background: var(--md-sys-color-surface-container-low); }
.legal-otro { margin-top: 40px; }
@media (max-width: 680px) {
    .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td, .legal-tabla th { display: block; }
    .legal-tabla thead { display: none; }
    .legal-tabla td:first-child { padding-bottom: 0; border-bottom: 0; color: var(--md-sys-color-on-background); }
}
.sk { background: var(--md-sys-color-surface-container-low); }
.sk-bar { display: block; max-width: 100%; border-radius: 9px; }
.sk-pill { border-radius: 999px; }
.sk-circle { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.sk-fab { flex: none; margin-left: auto; width: 88px; height: 88px; border-radius: 50%; }
.sk-row { cursor: default; }
.tile.sk, .stat.sk { cursor: default; }
:where(:root) {
    --sbt-bg: #ffffff;
    --sbt-fg: #1b1b1f;
    --sbt-radius: 32px;
    --sbt-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.22);
    --sbt-padding: 12px 16px;
    --sbt-max-width: min(460px, calc(100vw - 32px));
    --sbt-gap: 10px;
    --sbt-font-family: inherit;
    --sbt-font-size: 0.875rem;
    --sbt-line-height: 1.35;
    --sbt-font-weight: 400;
    --sbt-z-index: 2100;
    --sbt-edge-offset: 16px;
    --sbt-success-bg: #d7f2de;
    --sbt-success-fg: #0c3a1f;
    --sbt-error-bg: #ffdad6;
    --sbt-error-fg: #410e0b;
    --sbt-warning-bg: #ffe08a;
    --sbt-warning-fg: #3f2e00;
    --sbt-info-bg: #dfe4ff;
    --sbt-info-fg: #16215b;
}
@media (prefers-color-scheme: dark) {
    :where(:root) {
        --sbt-bg: #1c1b1f;
        --sbt-fg: #e6e1e5;
        --sbt-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.18);
        --sbt-success-bg: #1f4d31;
        --sbt-success-fg: #b8f0c7;
        --sbt-error-bg: #8c1d18;
        --sbt-error-fg: #ffdad6;
        --sbt-warning-bg: #574200;
        --sbt-warning-fg: #ffe08a;
        --sbt-info-bg: #2b3a7a;
        --sbt-info-fg: #dfe4ff;
    }
}
.sbt-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--sbt-z-index);
}
.sbt-stack {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}
.sbt-top-left,
.sbt-top-center,
.sbt-top-right { top: var(--sbt-edge-offset); }
.sbt-center-left,
.sbt-center-right { top: 50%; }
.sbt-bottom-left,
.sbt-bottom-center,
.sbt-bottom-right { bottom: var(--sbt-edge-offset); }
.sbt-toast {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
}
.sbt-toast::before {
    content: '';
    position: absolute;
    inset: -24px;
}
.sbt-top-left .sbt-toast,
.sbt-top-center .sbt-toast,
.sbt-top-right .sbt-toast,
.sbt-center-left .sbt-toast,
.sbt-center-right .sbt-toast { top: 0; }
.sbt-bottom-left .sbt-toast,
.sbt-bottom-center .sbt-toast,
.sbt-bottom-right .sbt-toast { bottom: 0; }
.sbt-top-left .sbt-toast,
.sbt-center-left .sbt-toast,
.sbt-bottom-left .sbt-toast { left: var(--sbt-edge-offset); }
.sbt-top-center .sbt-toast,
.sbt-bottom-center .sbt-toast { left: 50%; }
.sbt-top-right .sbt-toast,
.sbt-center-right .sbt-toast,
.sbt-bottom-right .sbt-toast { right: var(--sbt-edge-offset); }
.sbt-top-left .sbt-toast { transform-origin: top left; }
.sbt-top-center .sbt-toast { transform-origin: top center; }
.sbt-top-right .sbt-toast { transform-origin: top right; }
.sbt-center-left .sbt-toast { transform-origin: top left; }
.sbt-center-right .sbt-toast { transform-origin: top right; }
.sbt-bottom-left .sbt-toast { transform-origin: bottom left; }
.sbt-bottom-center .sbt-toast { transform-origin: bottom center; }
.sbt-bottom-right .sbt-toast { transform-origin: bottom right; }
.sbt-shell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    background: var(--sbt-toast-bg, var(--sbt-bg));
    color: var(--sbt-toast-fg, var(--sbt-fg));
    border-radius: var(--sbt-radius);
    box-shadow: var(--sbt-shadow);
    max-width: var(--sbt-max-width);
    overflow: hidden;
    cursor: default;
    font-family: var(--sbt-font-family);
    font-size: var(--sbt-font-size);
    font-weight: var(--sbt-font-weight);
    line-height: var(--sbt-line-height);
    transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.sbt-shell:hover {
    transform: scale(1.05);
}
.sbt-variant-success { --sbt-toast-bg: var(--sbt-success-bg); --sbt-toast-fg: var(--sbt-success-fg); }
.sbt-variant-error { --sbt-toast-bg: var(--sbt-error-bg); --sbt-toast-fg: var(--sbt-error-fg); }
.sbt-variant-warning { --sbt-toast-bg: var(--sbt-warning-bg); --sbt-toast-fg: var(--sbt-warning-fg); }
.sbt-variant-info { --sbt-toast-bg: var(--sbt-info-bg); --sbt-toast-fg: var(--sbt-info-fg); }
.sbt-body {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sbt-padding);
    box-sizing: border-box;
}
.sbt-content {
    display: flex;
    align-items: center;
    gap: var(--sbt-gap);
    min-width: 0;
}
.sbt-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: inherit;
}
.sbt-message {
    color: inherit;
    min-width: 0;
}
.sbt-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.sbt-close:hover,
.sbt-close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.sbt-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
    .sbt-shell,
    .sbt-close {
        transition: none;
    }
    .sbt-shell:hover {
        transform: none;
    }
}
.sbt-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
:root {
    --sbt-bg: var(--md-sys-color-surface-container-high);
    --sbt-fg: var(--md-sys-color-on-background);
    --sbt-font-family: var(--app-main-font);
    --sbt-font-size: 15px;
    --sbt-font-weight: 500;
    --sbt-shadow: 0 10px 32px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .06);
    --sbt-success-bg: var(--md-sys-color-primary-container);
    --sbt-success-fg: var(--md-sys-color-on-primary-container);
    --sbt-error-bg: var(--md-sys-color-error-container);
    --sbt-error-fg: var(--md-sys-color-on-error-container);
    --sbt-info-bg: var(--md-sys-color-tertiary-container);
    --sbt-info-fg: var(--md-sys-color-on-tertiary-container);
}
.sbt-layer[popover] {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}
.sbt-icon { --md-icon-size: 20px; }
.celebracion[popover] {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--md-sys-color-background) 86%, transparent);
    backdrop-filter: blur(16px);
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
}
.celebracion:popover-open { display: grid; place-items: center; }
.celebracion.is-meta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(90vw, 760px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 205 70 / .30), transparent 65%);
    pointer-events: none;
}
.celebracion-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}
.celebracion-icono { font-size: clamp(120px, 24vw, 190px); line-height: 1; filter: drop-shadow(0 0 44px rgb(255 140 40 / .6)); }
.is-meta .celebracion-icono { filter: drop-shadow(0 0 44px rgb(255 205 70 / .6)); }
.celebracion-titulo { margin-top: 6px; font-size: clamp(28px, 5vw, 42px); font-weight: 600; letter-spacing: -.02em; }
.celebracion-confeti { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.celebracion-confeti i { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 2px; will-change: transform; }
.celebracion.con-llama[popover] {
    --ancho: min(480px, 100vw, calc((100dvh - 150px) * 0.754));
    background: rgb(20 31 33 / .8);
    backdrop-filter: blur(5px);
    place-items: center;
    align-content: center;
    gap: 14px;
}
.celebracion-escena { position: relative; width: var(--ancho); aspect-ratio: 720 / 955; }
.celebracion-llama { position: absolute; inset: 0 0 auto 0; }
.celebracion-textos {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ancho) * 0.012);
    width: var(--ancho);
    margin-top: calc(var(--ancho) * -0.34);
    position: relative;
    z-index: 1;
    padding: 0 calc(var(--ancho) * 0.04);
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
    font-family: "DM Sans", var(--app-main-font), sans-serif;
}
.celebracion-periodos { font-size: calc(var(--ancho) * 0.1); font-weight: 700; letter-spacing: -.015em; color: rgb(218, 230, 214); }
.celebracion-racha {
    font-size: calc(var(--ancho) * 0.064);
    font-weight: 500;
    color: rgb(150, 166, 168);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}
.celebracion-detalle { max-width: 28em; padding: 0 16px; text-align: center; font-size: clamp(15px, 2.2vw, 18px); color: var(--md-sys-color-on-surface-variant); }
.celebracion-boton {
    position: relative;
    height: 56px;
    padding: 0 48px;
    border-radius: 999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: 600 18px var(--app-main-font);
    cursor: pointer;
    overflow: hidden;
}
.celebracion-contenido .celebracion-boton { margin-top: 30px; }
.app-nav md-icon.only-mobile { display: none; }
.app-nav .nav-buttons-container > .noise { display: none; }
.page-kebab { display: none; }
.mov-list { display: none; }
.dialog-options { width: min(238px, calc(100vw - 32px)); }
.options-panel { gap: 8px; padding: 24px 16px 16px; }
.options-title { display: flex; align-items: center; gap: 12px; --md-icon-size: 30px; padding: 0 8px 12px; font-size: 32px; font-weight: 500; letter-spacing: -.3px; }
.options-list { display: flex; flex-direction: column; gap: 2px; }
.options-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-background);
    font-family: var(--app-main-font);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    --md-icon-size: 18px;
}
.options-item:hover { background: var(--md-sys-color-surface-container-high); }
.options-extra { display: none; }
@media only screen and (max-width: 680px) {
    .options-extra { display: flex; }
    .app-container { flex-direction: column; }
    .app-view { padding: 16px 16px 128px; }
    .app-nav md-icon.only-desktop { display: none; }
    .app-nav md-icon.only-mobile { display: inline-flex; }
    .app-nav.mobile-style-1 button.nav-button.nav-extra { display: none; }
    .app-nav.mobile-style-1 {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        margin: 0;
        z-index: 5;
        pointer-events: none;
    }
    .app-nav.mobile-style-1 > * { pointer-events: auto; }
    .app-nav.mobile-style-1 .nav-buttons-container {
        position: relative;
        background: color-mix(in srgb, var(--md-sys-color-background) 68%, transparent);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 8px 24px rgb(0 0 0 / .3);
    }
    .app-nav.mobile-style-1 .nav-buttons-container > .noise {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        width: auto;
        height: auto;
        border-radius: inherit;
        pointer-events: none;
    }
    .app-nav.mobile-style-1 .nav-buttons-container > .nav-button { z-index: 1; }
    .page { gap: 20px; }
    .page-title { font-size: 40px; }
    .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .home-hero { min-height: 322px; }
    .home-hero-content { padding: 24px; }
    .home-hero-currency { font-size: 18px; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat { padding: 16px 16px 18px; }
    .stat-label { font-size: 15px; }
    .stat-amount { font-size: 24px; }
    .stats-note { margin-top: -12px; }
    .summary-cards { grid-template-columns: 1fr; }
    .dialog:not(.dialog-sheet),
    #dialog-movimiento.is-wide,
    #dialog-logro {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
    .dialog:not(.dialog-sheet)#dialog-cuenta,
    .dialog:not(.dialog-sheet)#dialog-racha { height: 100dvh; max-height: none; }
    .dialog:not(.dialog-sheet)::after { display: none; }
    .dialog:not(.dialog-sheet) .form {
        box-sizing: border-box;
        height: 100%;
        max-height: none;
        padding: 16px;
    }
    #dialog-movimiento.is-wide .form { display: flex; }
    .dialog:not(.dialog-sheet) .form > .dialog-actions { margin-top: auto; }
    #dialog-movimiento.is-wide .form > .dialog-card-left {
        justify-content: flex-end;
        padding: 80px 24px 24px;
    }
}
@media only screen and (max-width: 1260px) {
    .mov-table-wrap { display: none; }
    .mov-list { display: block; }
}
@media only screen and (max-width: 900px) {
    .page-head { position: relative; }
    .page-kebab { display: grid; }
    .page-actions {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 20;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        border-radius: 28px;
        background: var(--md-sys-color-surface-container-high);
        box-shadow: 0 12px 32px #000000a6;
    }
    .page-actions.open { display: flex; }
    .page-actions .icon-box,
    .page-actions .page-fab { width: 52px; height: 52px; }
}
*{
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
body{
    height: 100%;
    background-color: var(--md-sys-color-background);
}
::-webkit-scrollbar {
    display: none !important;
}
::-webkit-scrollbar {
    display: none;
}