@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--font-main:"Fredoka", sans-serif;--bg-sky:#c6eed5;--bg-cream:#fffbf7;--text-dark:#4a2c11;--border-color:#4a2c11;--border-width-thick:4px;--border-width-medium:3px;--color-orange:#ff9f1c;--color-orange-light:#ffb74d;--color-pink:#ff8b94;--color-pink-light:#ffb3ba;--color-green:#d4e4a8;--color-green-dark:#8c9e5e;--silvia-bg:#fde8e1;--silvia-accent:#ff8b94;--juan-bg:#e2f3fc;--juan-accent:#7fbcf5;--elena-bg:#d4e4a8;--elena-accent:#a5b974;--shadow-flat-sm:3px 3px 0px var(--text-dark);--shadow-flat-md:6px 6px 0px var(--text-dark);--shadow-flat-lg:8px 8px 0px var(--text-dark);--transition-bounce:all .3s cubic-bezier(.175, .885, .32, 1.275);--transition-fast:all .1s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:radial-gradient(circle at 50% 50%, #e8f9f0 0%, var(--bg-sky) 100%);color:var(--text-dark);text-transform:uppercase;min-height:100vh;padding:clamp(1rem,3vw,2.5rem) clamp(.5rem,2vw,1.5rem);position:relative;overflow-x:hidden}body:before,body:after{content:"✦";color:#fff;text-shadow:3px 3px 0px var(--text-dark);opacity:.8;pointer-events:none;z-index:-1;font-size:clamp(1.5rem,4vw,2.5rem);animation:15s linear infinite spin-slow;position:fixed}body:before{top:8%;left:5%}body:after{content:"➕";font-size:clamp(1.2rem,3vw,2rem);bottom:10%;right:5%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-container{max-width:1200px;margin:0 auto;padding-bottom:3rem;position:relative}.app-header{background:var(--bg-cream);border:var(--border-width-thick) solid var(--text-dark);box-shadow:var(--shadow-flat-md);border-radius:24px;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding:1.2rem clamp(1rem,3vw,2rem);display:flex}@media (width<=768px){.app-header{text-align:center;flex-direction:column;padding:1.2rem 1rem}}.logo-area{align-items:center;gap:.8rem;display:flex}.logo-icon{border:var(--border-width-medium) solid var(--text-dark);width:clamp(48px,10vw,54px);height:clamp(48px,10vw,54px);box-shadow:var(--shadow-flat-sm);object-fit:cover;border-radius:18px;animation:2s ease-in-out infinite alternate bounce-slow;display:inline-block}@keyframes bounce-slow{0%{transform:translateY(0)rotate(-5deg)}to{transform:translateY(-8px)rotate(5deg)}}.logo-area h1{color:var(--text-dark);font-size:clamp(1.4rem,4vw,1.8rem);font-weight:700;line-height:1.1}.subtitle{color:var(--text-dark);opacity:.7;font-size:.85rem;font-weight:500}.status-indicator{border:var(--border-width-medium) solid var(--text-dark);box-shadow:var(--shadow-flat-sm);transition:var(--transition-bounce);background:#fff;border-radius:50px;align-items:center;gap:.6rem;padding:.5rem 1rem;font-size:.8rem;font-weight:700;display:flex}.status-img{border:2px solid var(--text-dark);object-fit:cover;border-radius:50%;width:24px;height:24px;animation:2s ease-in-out infinite alternate bounce-slow}.status-indicator.connected{border-color:var(--color-green-dark);background-color:#e8f9f0}.status-indicator.warning{border-color:var(--color-orange);background-color:#fff6e5}.status-indicator.disconnected{border-color:var(--color-pink);background-color:#ffeef0}.dashboard-main{flex-direction:column;gap:2rem;display:flex}.global-balance-section{justify-content:center;width:100%;display:flex}.balance-card{background:var(--bg-cream);border:var(--border-width-thick) solid var(--text-dark);width:100%;max-width:650px;box-shadow:var(--shadow-flat-lg);text-align:center;transition:var(--transition-bounce);border-radius:32px;padding:clamp(1.5rem,5vw,2.5rem) clamp(1rem,4vw,2rem);position:relative;overflow:hidden}.balance-card:hover{box-shadow:10px 10px 0px var(--text-dark);transform:translateY(-4px)}.balance-card:before{content:"";background:repeating-linear-gradient(45deg, var(--color-orange), var(--color-orange) 10px, var(--color-orange-light) 10px, var(--color-orange-light) 20px);border-bottom:var(--border-width-thick) solid var(--text-dark);width:100%;height:12px;position:absolute;top:0;left:0}.balance-title{color:var(--text-dark);letter-spacing:1px;margin-top:.5rem;margin-bottom:.8rem;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700}.balance-value-container{justify-content:center;align-items:baseline;gap:.2rem;margin-bottom:1.5rem;display:flex}.balance-value-container .currency{color:var(--text-dark);font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700}.balance-value{letter-spacing:-1px;color:var(--text-dark);font-size:clamp(2.2rem,8vw,3.8rem);font-weight:700}.balance-stats{border:var(--border-width-medium) solid var(--text-dark);box-shadow:var(--shadow-flat-sm);background:#fff;border-radius:20px;justify-content:space-around;align-items:center;gap:.5rem;padding:1rem;display:flex}.stat-separator{background:var(--text-dark);border-radius:10px;width:3px;height:40px}.stat-item{flex-direction:column;gap:.2rem;display:flex}.stat-label{color:var(--text-dark);opacity:.7;font-size:clamp(.7rem,2vw,.8rem);font-weight:700}.stat-value{font-size:clamp(.95rem,3vw,1.3rem);font-weight:700}.stat-item.income .stat-value{color:var(--color-green-dark)}.stat-item.expense .stat-value{color:var(--color-pink)}.distribution-section{background:var(--bg-cream);border:var(--border-width-thick) solid var(--text-dark);box-shadow:var(--shadow-flat-md);border-radius:28px;width:100%;padding:1.5rem clamp(1rem,3vw,1.8rem)}.distribution-section h3{text-align:center;margin-bottom:1rem;font-size:clamp(1.1rem,3vw,1.2rem);font-weight:700}.distribution-bar-container{border:var(--border-width-thick) solid var(--text-dark);background:#fff;border-radius:20px;height:42px;padding:4px;display:flex;overflow:hidden}.dist-bar{color:var(--text-dark);white-space:nowrap;border:var(--border-width-medium) solid transparent;border-radius:12px;justify-content:space-between;align-items:center;min-width:0;padding:0 clamp(.4rem,2vw,1rem);font-size:.8rem;font-weight:700;transition:width .8s cubic-bezier(.175,.885,.32,1.2);display:flex;overflow:hidden}.dist-bar.silvia{background:repeating-linear-gradient(45deg, var(--silvia-accent), var(--silvia-accent) 8px, var(--silvia-bg) 8px, var(--silvia-bg) 16px);border-color:var(--text-dark)}.dist-bar.juan{background:repeating-linear-gradient(45deg, var(--juan-accent), var(--juan-accent) 8px, var(--juan-bg) 8px, var(--juan-bg) 16px);border-color:var(--text-dark)}.dist-bar.elena{background:repeating-linear-gradient(45deg, var(--elena-accent), var(--elena-accent) 8px, var(--elena-bg) 8px, var(--elena-bg) 16px);border-color:var(--text-dark)}.dist-name{border:1px solid var(--text-dark);background:#fff;border-radius:6px;padding:1px 6px;font-weight:700}.dist-pct{border:1px solid var(--text-dark);background:#fff;border-radius:6px;padding:1px 4px;font-weight:700}@media (width<=480px){.dist-name{display:none}.dist-pct{margin:0 auto}}.accounts-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem;width:100%;display:grid}@media (width<=480px){.accounts-grid{grid-template-columns:1fr;gap:1.5rem}}.account-card{border:var(--border-width-thick) solid var(--text-dark);box-shadow:var(--shadow-flat-md);transition:var(--transition-bounce);border-radius:32px;flex-direction:column;gap:1.5rem;padding:clamp(1.5rem,4vw,2.2rem) clamp(1.2rem,3vw,1.8rem);display:flex;position:relative}.account-card:hover{box-shadow:8px 8px 0px var(--text-dark);transform:translateY(-8px)}.account-card.silvia{background-color:var(--silvia-bg)}.account-card.juan{background-color:var(--juan-bg)}.account-card.elena{background-color:var(--elena-bg)}.card-header{align-items:center;gap:.8rem;display:flex}.avatar{border:var(--border-width-medium) solid var(--text-dark);width:clamp(48px,10vw,54px);height:clamp(48px,10vw,54px);box-shadow:var(--shadow-flat-sm);object-fit:cover;background:#fff;border-radius:18px;flex-shrink:0;justify-content:center;align-items:center;font-size:clamp(1.2rem,3vw,1.5rem);display:flex}.silvia .avatar{background:var(--silvia-accent)}.juan .avatar{background:var(--juan-accent)}.elena .avatar{background:var(--elena-accent)}.account-name{letter-spacing:-.5px;font-size:clamp(1.1rem,3vw,1.25rem);font-weight:700}.card-balance-label{color:var(--text-dark);opacity:.7;font-size:.8rem;font-weight:700}.card-balance-value{color:var(--text-dark);margin-top:.2rem;font-size:clamp(1.8rem,5vw,2.2rem);font-weight:700}.card-mini-stats{border:var(--border-width-medium) solid var(--text-dark);background:#fff;border-radius:18px;justify-content:space-between;gap:.5rem;padding:.8rem;display:flex}.mini-stat{flex-direction:column;gap:.1rem;font-size:.75rem;display:flex}.mini-stat span{opacity:.7;font-weight:700}.mini-stat strong{font-size:clamp(.85rem,2.5vw,1rem);font-weight:700}.card-actions{gap:.6rem;display:flex}.btn{font-family:var(--font-main);cursor:pointer;border:var(--border-width-medium) solid var(--text-dark);box-shadow:var(--shadow-flat-sm);transition:var(--transition-fast);border-radius:16px;justify-content:center;align-items:center;gap:.4rem;width:100%;padding:.8rem clamp(.8rem,2vw,1.2rem);font-size:clamp(.85rem,2vw,.95rem);font-weight:700;display:inline-flex}.btn-primary{color:var(--text-dark);background:#fff}.btn-primary:hover{background:var(--color-orange-light)}.btn-primary:active{box-shadow:0px 0px 0px var(--text-dark);transform:translate(3px,3px)}.btn-secondary{color:var(--text-dark);background:#fff}.btn-secondary:hover{background:#f1f1f1}.btn-secondary:active{box-shadow:0px 0px 0px var(--text-dark);transform:translate(3px,3px)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;background:#4a2c1173;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;position:fixed;top:0;left:0}.modal-card{background:var(--bg-cream);border:var(--border-width-thick) solid var(--text-dark);width:100%;max-width:480px;box-shadow:var(--shadow-flat-lg);border-radius:28px;padding:clamp(1.2rem,5vw,2.2rem) clamp(1rem,4vw,2rem);transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:scale(1)}.modal-overlay.hidden .modal-card{transform:scale(.85)}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.2rem;display:flex}.modal-header h3{font-size:clamp(1.2rem,4vw,1.5rem);font-weight:700}.btn-close{color:var(--text-dark);cursor:pointer;transition:var(--transition-bounce);background:0 0;border:none;font-size:2rem;line-height:1}.btn-close:hover{transform:scale(1.1)rotate(90deg)}.transaction-form{flex-direction:column;gap:1rem;display:flex}.form-group{flex-direction:column;gap:.3rem;display:flex}.form-group label{color:var(--text-dark);font-size:.8rem;font-weight:700}.form-group input,.form-group select{border:var(--border-width-medium) solid var(--text-dark);color:var(--text-dark);font-family:var(--font-main);background:#fff;border-radius:14px;outline:none;width:100%;padding:.7rem .9rem;font-size:.95rem;font-weight:600}.form-group input:focus,.form-group select:focus{border-color:var(--color-orange);box-shadow:var(--shadow-flat-sm)}.type-toggle-container{border:var(--border-width-medium) solid var(--text-dark);background:#fff;border-radius:14px;gap:4px;padding:4px;display:flex}.toggle-btn{text-align:center;color:var(--text-dark);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-width-medium) solid transparent;border-radius:10px;flex:1;padding:.6rem;font-size:.9rem;font-weight:700}#type-income:checked~.toggle-income{background:var(--color-green);border-color:var(--text-dark);box-shadow:var(--shadow-flat-sm)}#type-expense:checked~.toggle-expense{background:var(--color-pink);border-color:var(--text-dark);box-shadow:var(--shadow-flat-sm)}.form-actions{gap:.8rem;margin-top:.6rem;display:flex}.drawer-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;background:#4a2c1173;width:100%;height:100%;position:fixed;top:0;left:0}.drawer-content{background:var(--bg-cream);border:var(--border-width-thick) solid var(--text-dark);width:calc(100% - 30px);max-width:480px;box-shadow:var(--shadow-flat-lg);border-radius:28px;flex-direction:column;transition:transform .4s cubic-bezier(.175,.885,.32,1.15);display:flex;position:absolute;top:15px;bottom:15px;right:15px;transform:translate(0)}@media (width<=480px){.drawer-content{border:none;border-left:var(--border-width-thick) solid var(--text-dark);border-radius:0;width:100%;max-width:100%;height:100%;inset:0}}.drawer-overlay.hidden .drawer-content{transform:translate(110%)}.drawer-header{border-bottom:var(--border-width-medium) solid var(--text-dark);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.drawer-header h3{font-size:clamp(1.2rem,4vw,1.4rem);font-weight:700}.drawer-body{flex-direction:column;flex:1;gap:1.2rem;padding:1.2rem;display:flex;overflow-y:auto}.drawer-filters{border:var(--border-width-medium) solid var(--text-dark);background:#fff;border-radius:14px;gap:4px;padding:4px;display:flex}.filter-btn{color:var(--text-dark);font-family:var(--font-main);cursor:pointer;border:none;border:var(--border-width-medium) solid transparent;background:0 0;border-radius:10px;flex:1;padding:.5rem;font-size:clamp(.75rem,2vw,.85rem);font-weight:700}.filter-btn.active{background:var(--color-orange-light);border-color:var(--text-dark);box-shadow:var(--shadow-flat-sm)}.transactions-list{flex-direction:column;gap:.8rem;display:flex}.transaction-item{border:var(--border-width-medium) solid var(--text-dark);box-shadow:var(--shadow-flat-sm);transition:var(--transition-bounce);opacity:0;background:#fff;border-radius:20px;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem;animation:.35s cubic-bezier(.175,.885,.32,1.275) forwards pop-in;display:flex}.transaction-item:hover{box-shadow:4px 4px 0px var(--text-dark);transform:translateY(-2px)}.transaction-item.ingreso{border-left:8px solid var(--color-green-dark)}.transaction-item.egreso{border-left:8px solid var(--color-pink)}.trans-details{flex-direction:column;gap:.1rem;max-width:60%;display:flex;overflow:hidden}.trans-desc{color:var(--text-dark);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.85rem,2.5vw,.95rem);font-weight:700;overflow:hidden}.trans-date{color:var(--text-dark);opacity:.7;font-size:.7rem}.trans-amount-area{align-items:center;gap:.5rem;display:flex}.trans-amount{font-size:clamp(.95rem,3vw,1.1rem);font-weight:700}.ingreso .trans-amount{color:var(--color-green-dark)}.egreso .trans-amount{color:var(--color-pink)}.btn-delete-trans{border:var(--border-width-medium) solid var(--text-dark);color:var(--text-dark);cursor:pointer;background:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:1.1rem;font-weight:700;display:flex}.btn-delete-trans:hover{background:var(--color-pink);transform:scale(1.05)}.loading-shimmer-list{flex-direction:column;gap:.8rem;display:flex}.shimmer-item{border:var(--border-width-medium) solid var(--text-dark);background:linear-gradient(90deg,#fff 25%,#fde8e1 50%,#fff 75%) 0 0/200% 100%;border-radius:20px;height:58px;animation:1.5s linear infinite shimmer}.setup-warning-bar{border:var(--border-width-thick) solid var(--text-dark);width:95%;max-width:650px;box-shadow:var(--shadow-flat-lg);z-index:999;background:#fff;border-radius:24px;padding:1rem;position:fixed;bottom:15px;left:50%;transform:translate(-50%)}.warning-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;font-size:clamp(.75rem,2vw,.85rem);font-weight:600;display:flex}.btn-close-warning{background:var(--color-orange-light);border:var(--border-width-medium) solid var(--text-dark);color:var(--text-dark);box-shadow:var(--shadow-flat-sm);border-radius:10px;padding:.3rem .8rem;font-size:.8rem;font-weight:700}.btn-close-warning:active{box-shadow:0px 0px 0px var(--text-dark);transform:translate(2px,2px)}.hidden,.modal-overlay.hidden,.drawer-overlay.hidden{display:none!important}@keyframes pop-in{0%{opacity:0;transform:scale(.9)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}