@charset "UTF-8";
/* Mi Dinero V9.7 · design tokens and base elements. Loaded first. It is the only sheet with color values: ui.css
   (components), mobile.css (layout), premium.css (heroes and the pig) and control.css (screens and tools) use tokens. */
:root{
 color-scheme:light;
 --md-bg:#f5f6fb;--md-surface:#ffffff;--md-surface-2:#f8f9fd;--md-surface-3:#eef0f7;
 --md-ink:#151a35;--md-muted:#596080;--md-line:#e8eaf3;--md-line-strong:#d8dbe8;
 /* Accents: pink is the brand and the actions; turquoise informs; green is done; violet is savings and goals. */
 --md-brand:#d6185f;--md-brand-text:#c8175d;--md-brand-soft:#ffe4ee;
 --md-info:#0a7283;--md-info-soft:#dff5f8;--md-info-bar:#22c3d6;
 --md-violet:#6b36d9;--md-violet-soft:#ede6ff;--md-violet-bar:#8f62ff;
 --md-good:#08744f;--md-good-soft:#e0f6ec;--md-good-bar:#22c07a;
 --md-watch:#935400;--md-watch-soft:#fff1d9;--md-watch-bar:#f5a524;
 --md-over:#c0244d;--md-over-soft:#ffe6ec;--md-over-bar:#f0507a;
 --md-on-brand:#ffffff;
 --md-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23596080' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
 --md-scrim:#0a0f2466;--md-toast:#151a35;
 --md-bar:#f5f6fbe6;
 --md-hero:linear-gradient(135deg,#ffe3ee 0%,#f1e8ff 55%,#def6fa 100%);
 /* Inicio: the same deep navy → violet → magenta scene in both themes, so the pig and the figure always stand out. */
 --md-hero-night:radial-gradient(circle at 82% 22%,#ff4f8b40,transparent 55%),linear-gradient(140deg,#161b47 0%,#2a1f5f 52%,#5a1e5e 100%);
 --md-on-hero:#ffffff;--md-on-hero-muted:#d6d9f5;--md-on-hero-accent:#ff9cc2;--md-hero-chip:#ffffff1a;
 --md-cta:linear-gradient(135deg,#d6185f,#b8124f);
 --md-radius-s:12px;--md-radius-m:16px;--md-radius-l:20px;--md-radius-xl:24px;
 --md-shadow-1:0 1px 2px #151a350a,0 6px 20px #151a350d;--md-shadow-2:0 12px 32px #151a351f;--md-shadow-cta:0 8px 20px #b8124f33;
 --md-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
 --md-fs-xs:12px;--md-fs-s:13px;--md-fs-m:15px;--md-fs-l:17px;--md-fs-xl:22px;--md-fs-2xl:30px;--md-fs-hero:clamp(34px,10vw,44px);
 --md-ease:cubic-bezier(.2,.8,.2,1);
 /* Safe areas: the native shell (native/src/native.css) replaces these with the values Capacitor reports. */
 --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
}
body.dark{
 color-scheme:dark;
 --md-bg:#0a0f24;--md-surface:#131a35;--md-surface-2:#171f3e;--md-surface-3:#1c2449;
 --md-ink:#f2f4ff;--md-muted:#a9b1d4;--md-line:#232c55;--md-line-strong:#323c6b;
 --md-brand:#ff4f8b;--md-brand-text:#ff7aa7;--md-brand-soft:#3a1a3e;
 --md-info:#4fd9e8;--md-info-soft:#11334a;--md-info-bar:#3fd0e0;
 --md-violet:#b9a2ff;--md-violet-soft:#2a2358;--md-violet-bar:#9d7bff;
 --md-good:#5fe0a2;--md-good-soft:#113a33;--md-good-bar:#2fd18a;
 --md-watch:#ffc46b;--md-watch-soft:#3b2e1b;
 --md-over:#ff8fa9;--md-over-soft:#3f1b30;--md-over-bar:#ff5f8a;
 --md-scrim:#03061499;
 --md-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9b1d4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
 --md-toast:#28315e;
 --md-bar:#0a0f24e6;
 --md-hero:linear-gradient(140deg,#1a1f52 0%,#2b1f5e 55%,#4a1d5c 100%);
 --md-shadow-1:0 0 0 1px #ffffff08,0 8px 24px #0207164d;--md-shadow-2:0 16px 40px #02071680;--md-shadow-cta:0 8px 24px #ff4f8b33;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--md-bg)}
body{margin:0;min-height:100dvh;font-family:var(--md-font);font-size:var(--md-fs-m);line-height:1.45;color:var(--md-ink);background:var(--md-bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
/* A focused field is never left under the tab bar or the Registrar button. */
button,input,select,textarea{font:inherit;color:inherit;scroll-margin-bottom:calc(150px + var(--safe-bottom))}
button{margin:0;padding:0;border:0;background:none;text-align:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.5}
img{display:block;max-width:100%}
svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:3px solid var(--md-brand);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
/* Text fields never go below 16 px (iOS zooms on focus), and the date field obeys its column on iOS. */
.field{display:grid;gap:6px;min-width:0;font-size:var(--md-fs-s);font-weight:600;color:var(--md-muted)}
.field small{font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--md-line-strong);border-radius:var(--md-radius-s);background-color:var(--md-surface);color:var(--md-ink);font-size:16px;font-weight:500}
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;text-align:left}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:var(--md-chevron);background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--md-brand);outline:0;box-shadow:0 0 0 3px var(--md-brand-soft)}
.field-label{font-size:var(--md-fs-s);font-weight:600;color:var(--md-muted)}
.field-label small{font-weight:400}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body.saving-mode *,body.saving-mode *::before,body.saving-mode *::after{animation:none!important;transition:none!important}