@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: one night scene with the month's figure and the pig. */
.home-hero{grid-template-columns:minmax(0,1fr) auto;overflow:hidden;background:var(--md-hero-night);color:var(--md-on-hero);box-shadow:var(--md-shadow-2)}
.home-hero-copy{display:grid;align-content:center;gap:2px;min-width:0}
.home-hero>:not(.home-hero-copy):not(.pig-button){grid-column:1/-1}
.home-hero .hero-label,.home-hero .hero-caption,.home-hero .hero-stats dt{color:var(--md-on-hero-muted)}
.home-hero.negative .hero-amount{color:var(--md-on-hero-accent)}
.home-hero .hero-stats{margin-top:4px}
.home-hero .hero-stats>div{background:var(--md-hero-chip)}
.home-hero .icon-button{color:var(--md-on-hero)}
.hero-greeting{font-size:var(--md-fs-l);font-weight:800}
.hero-amount-row{display:flex;align-items:center;gap:2px}
.pig-button{width:88px;height:88px;margin:-8px -8px -12px 0;border-radius:var(--md-radius-l)}
.pig-button img{width:100%;height:100%;object-fit:contain}

/* The pig speaks in one short line. */
.pig-tip{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--md-radius-l);background:var(--md-hero)}
.pig-tip>img{flex-shrink:0;width:64px;height:64px;border-radius:var(--md-radius-m);object-fit:contain}
#daily-action{display:grid;gap:2px;min-width:0}
#daily-action p{font-size:var(--md-fs-s);color:var(--md-muted)}
#daily-action .text-button{justify-self:start;padding:4px 0}
.budget-review>div{display:grid;flex:1;gap:8px}

.goals-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;background:var(--md-hero)}
.goals-hero>div{display:grid;gap:6px;min-width:0}
.goals-hero img{width:104px;height:112px;object-fit:contain}
.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)}
.mascot-activity-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mascot-activity-gallery figure{display:grid;gap:4px;font-size:var(--md-fs-xs);text-align:center;color:var(--md-muted)}
.mascot-activity-gallery img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--md-radius-s)}
.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)}