@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(115deg,#ffe6f1 0%,#f5ecfd 55%,#e1f6fd 100%);
 /* Inicio: the reference's scene, the same in both themes: navy on the left, indigo, violet and a magenta glow at the
    top right, where the pig sits on its clouds. */
 --md-hero-night:radial-gradient(70% 62% at 100% 0%,#b42aa5d9 0%,#9a28a666 45%,transparent 75%),linear-gradient(180deg,transparent 52%,#160c4a59 100%),linear-gradient(100deg,#13165c 0%,#1d1a86 36%,#5223a6 66%,#8a26a4 100%);
 --md-hero-glow:radial-gradient(closest-side,#d79bff73,#c77dff2e 55%,transparent);
 --md-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff3c4' d='M12 0c.9 6.6 4.8 10.6 12 12-7.2 1.4-11.1 5.4-12 12-.9-6.6-4.8-10.6-12-12C7.2 10.6 11.1 6.6 12 0Z'/%3E%3C/svg%3E");
 --md-hero-text-shadow:0 2px 14px #12084a99;
 --md-on-hero:#ffffff;--md-on-hero-muted:#dcdcf7;--md-on-hero-accent:#ff9cc2;--md-hero-chip:#ffffff1f;--md-hero-chip-line:#ffffff1a;
 /* The three figures of Inicio: a colored disc with a white arrow or target. */
 --md-stat-in:linear-gradient(140deg,#3ee0a9,#0aa874);--md-stat-out:linear-gradient(140deg,#ff5a92,#e01760);--md-stat-goal:linear-gradient(140deg,#b07bff,#7a3cf0);
 --md-icon-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E");
 --md-icon-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m6-6-6 6-6-6'/%3E%3C/svg%3E");
 --md-icon-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.8'/%3E%3C/svg%3E");
 /* Solid blue for Presupuesto's icon, as in the reference; the other tones reuse the soft accents. */
 --md-blue:linear-gradient(140deg,#29b3ff,#0a6cf0);--md-blue-soft:#e3f0ff;--md-blue-text:#0a5fd6;
 --md-nav:#ffffff;--md-nav-active:#f4f5fb;--md-shadow-nav:0 -2px 8px #151a3508,0 10px 30px #151a351f;
 /* The pig keeps its volume: a soft shadow under it, deeper on the night scene. */
 --md-pig-shadow:drop-shadow(0 14px 16px #14074a73);--md-pig-shadow-soft:drop-shadow(0 8px 10px #6b36d92e);
 --md-cta:linear-gradient(135deg,#d6185f,#bb0a4d);
 --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(115deg,#331b45 0%,#2a2358 55%,#13324a 100%);
 --md-blue-soft:#13294d;--md-blue-text:#7cb8ff;
 --md-nav:#131a35;--md-nav-active:#1c2449;--md-shadow-nav:0 0 0 1px #ffffff0a,0 12px 32px #02071699;
 --md-pig-shadow-soft:drop-shadow(0 8px 12px #02071699);
 --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}