@charset "UTF-8";
/* Mi Dinero V9.7 · the main figure of each screen (hero), the pig as a companion, the welcome, the subscription,
   achievements and celebrations. */
.hero{display:grid;gap:8px;padding:20px;border-radius:var(--md-radius-xl);background:var(--md-surface);box-shadow:var(--md-shadow-1)}
.hero-label{font-size:var(--md-fs-s);font-weight:650;color:var(--md-muted)}
.hero-amount{font-size:var(--md-fs-hero);font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-amount.negative{color:var(--md-over)}
.hero-title{font-size:var(--md-fs-xl);font-weight:800;line-height:1.2}
.hero-caption{font-size:var(--md-fs-s);color:var(--md-muted)}
.hero-next{font-size:var(--md-fs-s);font-weight:650}
.hero-next:empty{display:none}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.hero-stats>div{min-width:0;padding:10px;border-radius:var(--md-radius-m);background:var(--md-surface-2)}
.hero-stats dt{font-size:var(--md-fs-xs);color:var(--md-muted)}
.hero-stats dd{font-size:clamp(12px,3.7vw,15px);font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero .disclosure{margin:0 -8px -8px;background:none;box-shadow:none}
.hero .disclosure>summary{padding:10px 8px;min-height:44px;color:var(--md-brand-text)}
.hero .disclosure>:not(summary){margin:0 8px 8px}
.guide-chip{justify-self:start;padding:4px 10px;border-radius:999px;background:var(--md-info-soft);color:var(--md-info);font-size:var(--md-fs-xs);font-weight:750}
.budget-meter .track{height:10px}
.budget-meter.watch .track>span{background:var(--md-watch-bar)}
.budget-meter.over .track>span{background:var(--md-over-bar)}
/* Inicio's budget row: the share of the month's budget spent up to today, with a tick where today falls. */
.budget-ring{--ring:var(--md-good-bar);position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--p,0)*1%),var(--md-surface-3) 0)}
.budget-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--md-surface)}
.budget-ring small{position:relative;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.budget-ring.watch{--ring:var(--md-watch-bar)}
.budget-ring.over{--ring:var(--md-over-bar)}
.ring-today{position:absolute;inset:0;transform:rotate(calc(var(--t,0)*3.6deg))}
.ring-today::after{content:"";position:absolute;top:0;left:50%;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--md-ink)}

/* Inicio: the night scene of the reference. The words keep the left column; the pig sits on its clouds at the right,
   flush with the card edge and behind the figures, which always stay on top and readable. */
.home-hero{position:relative;grid-template-columns:minmax(0,1fr) 47%;gap:14px 0;overflow:hidden;padding:22px 16px 16px 20px;background:var(--md-hero-night);color:var(--md-on-hero);box-shadow:var(--md-shadow-2)}
.home-hero::before{content:"";position:absolute;right:-8%;bottom:16%;width:64%;aspect-ratio:1;background:var(--md-hero-glow);pointer-events:none}
.home-hero::after{content:"";position:absolute;top:21%;right:33%;width:34px;height:38px;background:var(--md-sparkle) 0 0/16px no-repeat,var(--md-sparkle) 22px 28px/9px no-repeat;pointer-events:none;animation:twinkle 3.4s ease-in-out infinite}
.home-hero-copy{position:relative;z-index:2;grid-area:1/1;display:grid;align-content:start;gap:2px;min-width:0}
.hero-greeting{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:850;letter-spacing:-.01em;white-space:nowrap}
#home-greeting-icon{font-size:26px;line-height:1}
.hero-subtitle{font-size:var(--md-fs-m);color:var(--md-on-hero-muted);white-space:nowrap}
.home-hero .hero-label{display:flex;align-items:center;margin-top:16px;font-size:var(--md-fs-l);font-weight:600;color:var(--md-on-hero)}
.home-hero .hero-label .icon-button{margin:-10px 0 -10px 2px;color:var(--md-on-hero)}
.home-hero .hero-amount{font-size:clamp(40px,12.6vw,54px);font-weight:900;letter-spacing:-.035em;text-shadow:var(--md-hero-text-shadow)}
.home-hero.figure-m .hero-amount{font-size:clamp(30px,9vw,40px)}
.home-hero.figure-l .hero-amount{font-size:clamp(28px,8.6vw,38px)}
.home-hero .hero-caption{max-width:30ch;color:var(--md-on-hero-muted)}
.home-hero.negative .hero-amount{color:var(--md-on-hero-accent)}
.pig-button{position:relative;z-index:1;grid-area:1/2;align-self:end;width:calc(100% + 22px);margin:0 -16px -14px -6px}
.pig-button img{width:100%;height:auto;object-fit:contain;filter:var(--md-pig-shadow)}
.home-hero:is(.figure-m,.figure-l) .pig-button{width:calc(84% + 22px);justify-self:end}
.home-hero .hero-stats{position:relative;z-index:2;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-right:4px}
/* Each figure: its colored disc, the name and the amount. In a narrow card, or with long amounts, the amount takes the
   whole width under the disc so it is never cut. */
.home-hero .hero-stats>div{container-type:inline-size;padding:9px 8px;border-radius:18px;background:var(--md-hero-chip);box-shadow:inset 0 0 0 1px var(--md-hero-chip-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.home-hero .hero-stats>div::before{content:"";display:block;width:28px;height:28px;margin:0 0 6px;border-radius:50%;background:var(--md-icon-up) center/16px no-repeat,var(--md-stat-in)}
.home-hero .hero-stats>.stat-out::before{background:var(--md-icon-down) center/16px no-repeat,var(--md-stat-out)}
.home-hero .hero-stats>.stat-goal::before{background:var(--md-icon-target) center/18px no-repeat,var(--md-stat-goal)}
.home-hero .hero-stats dt{font-size:var(--md-fs-s);color:var(--md-on-hero-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-hero .hero-stats dd{font-size:clamp(13px,3.9vw,17px);font-weight:850}
/* Wide enough (and short amounts): the disc beside the name and the amount, as in the reference. */
@container (min-width:100px){.home-hero:not(.stats-long) .hero-stats>div::before{float:left;width:32px;height:32px;margin:2px 7px 0 0;background-size:17px,auto}.home-hero:not(.stats-long) .hero-stats dt{font-size:12.5px}}
@keyframes twinkle{50%{opacity:.35;transform:scale(.85)}}

/* «Un minuto de claridad»: the pig leans in from the bottom left of a soft pink, lilac and sky card. */
#home-tip{position:relative;display:grid;grid-template-columns:34% minmax(0,1fr);align-items:center;gap:12px;min-height:150px;padding:18px 18px 18px 0;overflow:hidden;border-radius:var(--md-radius-xl);background:var(--md-hero);box-shadow:var(--md-shadow-1)}
#home-tip>img{align-self:end;width:100%;max-width:138px;height:auto;margin:0 0 -26px 8px;object-fit:contain;filter:var(--md-pig-shadow-soft)}
#home-tip>img[hidden]+#daily-action{grid-column:1/-1;padding-left:18px}
#daily-action{display:grid;gap:4px;min-width:0}
#daily-action strong{font-size:var(--md-fs-l);font-weight:850;letter-spacing:-.01em}
#daily-action p{font-size:var(--md-fs-s);color:var(--md-muted)}
#daily-action .button{justify-self:start;min-height:44px;margin-top:8px;padding:8px 18px 8px 22px;font-size:var(--md-fs-m)}
#daily-action .button svg{width:20px;height:20px;stroke-width:2.4}
.pig-tip{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--md-radius-l);background:var(--md-hero)}
.budget-review>div{display:grid;flex:1;gap:8px}

/* The pig on Movimientos, Presupuesto, Deudas and Metas: small, peeking over the top edge of the main card of the
   screen, beside its title and never over a figure. */
.hero-host{position:relative;padding-top:30px}
.hero-host>.page-hero{background:var(--md-hero)}
.hero-host>.page-hero>.hero-label:first-child{padding-right:88px}
.pig-buddy{position:absolute;top:0;right:14px;z-index:2;width:80px;height:80px}
.pig-buddy img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:var(--md-pig-shadow-soft)}
/* Touching the pig: a hop and one short line in its voice. It never saves anything. */
.pig-bubble{position:absolute;z-index:3;max-width:min(220px,62%);padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--md-surface);color:var(--md-ink);font-size:var(--md-fs-s);font-weight:700;box-shadow:var(--md-shadow-2);animation:bubble-in .25s var(--md-ease)}
.hero-host>.pig-bubble{top:4px;right:100px}
.home-hero>.pig-bubble{position:relative;grid-area:1/2;align-self:start;justify-self:end;max-width:100%;margin-top:80px;border-radius:16px 16px 4px 16px}
.pig-react img{animation:pig-hop .7s var(--md-ease)}
/* Changing tabs: the pig arrives with a small jump; on Inicio it then floats on its clouds. */
.page.active .pig-buddy:not(.pig-react) img{animation:pig-in .55s var(--md-ease) both}
.page.active .pig-button:not(.pig-react) img{animation:pig-in .55s var(--md-ease) both,pig-float 5s ease-in-out .6s infinite}
@keyframes pig-in{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes pig-float{50%{transform:translateY(-5px)}}
@keyframes pig-hop{25%{transform:translateY(-10px) scale(1.04,.96)}50%{transform:scale(.97,1.03)}70%{transform:rotate(-4deg)}85%{transform:rotate(3deg)}}
@keyframes bubble-in{from{opacity:0;transform:translateY(6px) scale(.96)}}

.level-hero{justify-items:center;text-align:center;background:var(--md-hero)}
.level-hero img{width:150px;height:160px;object-fit:contain}
.level-hero h2{font-size:var(--md-fs-xl);font-weight:800}
.level-hero .progress-line{width:100%}
.level-line{display:flex;justify-content:space-between;width:100%;font-size:var(--md-fs-s)}
#mascot-achievement-name{overflow-wrap:anywhere}
#pig-reaction{font-size:var(--md-fs-s);font-weight:600}
#pig-reaction:empty{display:none}
.pig-wave #mascot-achievement-image{animation:pig-greet .7s ease}
.goal-celebrated #home-goal{animation:goal-glow 2s ease}
@keyframes pig-greet{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes goal-glow{50%{background:var(--md-good-soft)}}

.profile-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:var(--md-radius-l);background:var(--md-hero);text-align:left}
.profile-row img{width:64px;height:64px;object-fit:contain}
.profile-row strong{font-size:var(--md-fs-l)}
.profile-row small{color:var(--md-muted)}

.welcome-hero{display:grid;justify-items:center;gap:6px;padding:8px 0;text-align:center}
.welcome-hero img{width:180px;height:180px;object-fit:contain}
.welcome-hero h2{font-size:var(--md-fs-2xl);font-weight:800;letter-spacing:-.02em}
.welcome-hero p{color:var(--md-muted)}
.choice-list{display:grid;gap:10px}
.choice-list h3{font-size:var(--md-fs-l);font-weight:800;text-align:center}
.choice{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 18px;border-radius:var(--md-radius-l);background:var(--md-surface);box-shadow:var(--md-shadow-1);font-size:var(--md-fs-l);font-weight:700}
.choice span{font-size:24px}

.plan-hero{display:grid;justify-items:center;gap:4px;text-align:center}
.plan-hero img{width:140px;height:140px;object-fit:contain}
.subscription-price strong{font-size:44px;font-weight:800;letter-spacing:-.03em}
.subscription-price span{color:var(--md-muted);font-weight:650}
.check-list{display:grid;gap:10px;padding:16px;border-radius:var(--md-radius-l);background:var(--md-surface);box-shadow:var(--md-shadow-1)}
.check-list li::before{content:"✓ ";color:var(--md-good);font-weight:800}
.billing-status{font-size:var(--md-fs-s);text-align:center;color:var(--md-muted)}
.billing-status:empty{display:none}
.about-pig{width:160px;height:150px;margin:0 auto;object-fit:contain}

.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:center}
.achievement{position:relative;display:grid;justify-items:center;gap:6px;min-height:150px;padding:16px 10px;border-radius:var(--md-radius-l);background:var(--md-surface);box-shadow:var(--md-shadow-1)}
.achievement>span{font-size:36px}
.achievement strong{font-size:var(--md-fs-s)}
.achievement p{font-size:var(--md-fs-xs);color:var(--md-muted)}
.achievement.locked>span{opacity:.6;filter:saturate(.5)}
.achievement.locked::after{content:"🔒";position:absolute;top:10px;right:10px;font-size:12px}
.earned-check{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--md-good-bar);color:#fff;font-size:12px}
.challenge-row.done .row-value{color:var(--md-good)}
.evolution-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.evolution-gallery li{display:grid;justify-items:center;gap:2px;font-size:var(--md-fs-xs);color:var(--md-muted)}
.evolution-gallery img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--md-radius-m);background:var(--md-surface-2)}
.evolution-gallery strong{color:var(--md-ink)}
.evolution-gallery .unreached img{opacity:.45;filter:grayscale(.6)}
.evolution-gallery [aria-current] strong{color:var(--md-brand-text)}
/* Collections: each one opens its 20 variants; a pending illustration says so and never pretends to be finished. */
.collection-cover{overflow:hidden;background:var(--md-hero)}
.collection-cover img{width:100%;height:100%;object-fit:contain}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.collection-grid li{display:grid;justify-items:center;align-content:start;gap:4px;padding:10px 6px;border-radius:var(--md-radius-m);background:var(--md-surface-2);font-size:var(--md-fs-xs);text-align:center}
.collection-grid img{width:100%;aspect-ratio:1;object-fit:contain}
.collection-grid .pendiente>span{display:grid;place-items:center;width:100%;aspect-ratio:1;border:1.5px dashed var(--md-line-strong);border-radius:var(--md-radius-s);font-size:28px;opacity:.55}
.collection-grid em{font-style:normal;color:var(--md-muted)}
.history-list{display:grid;gap:6px;font-size:var(--md-fs-s);color:var(--md-muted)}
.mascot-scene-image{object-fit:contain}

.celebration{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:30px;background:var(--md-scrim);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.celebration>div{display:grid;justify-items:center;gap:10px;width:100%;max-width:340px;padding:28px;border-radius:var(--md-radius-xl);background:var(--md-surface);box-shadow:var(--md-shadow-2);text-align:center;animation:pop .3s ease-out}
.celebration span{font-size:56px}
.celebration strong{font-size:var(--md-fs-xl)}
.celebration p{font-size:var(--md-fs-s);color:var(--md-muted)}
.celebration .button{width:100%}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.mascot-evolution{text-align:center}
.mascot-evolution img{width:auto;max-width:min(100%,240px);max-height:280px;margin:12px auto}
.mascot-evolution h2{padding-top:20px;font-size:var(--md-fs-xl);overflow-wrap:anywhere}
.mascot-evolution p{margin:8px 0 16px;font-size:var(--md-fs-s);color:var(--md-muted)}