*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#3266ad;--green:#1D9E75;--amber:#BA7517;--purple:#7F77DD;--red:#E24B4A;--text:#1a1a1a;--text-sec:#666;--text-ter:#aaa;--bg:#f9f9f8;--bg-card:#ffffff;--bg-met:#f3f3f1;--border:rgba(0,0,0,0.1);--radius:10px;--radius-lg:14px}
@media(prefers-color-scheme:dark){:root{--text:#f0f0ee;--text-sec:#999;--text-ter:#555;--bg:#121212;--bg-card:#1e1e1e;--bg-met:#262626;--border:rgba(255,255,255,0.1)}}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── LOGIN ── */
#screen-login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem;padding:2rem}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;max-width:380px;width:100%}
.login-card h1{font-size:22px;font-weight:600;margin-bottom:0.5rem}
.login-card p{font-size:14px;color:var(--text-sec);margin-bottom:1.5rem;line-height:1.5}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.btn-google:hover{background:var(--bg-met)}
.btn-google svg{flex-shrink:0}

/* ── APP ── */
#screen-app{display:none}
.shell{max-width:820px;margin:0 auto;padding:1.5rem 1rem 4rem}
header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:8px}
.header-left h1{font-size:20px;font-weight:600}
.header-left .sub{font-size:12px;color:var(--text-ter);margin-top:2px}
#total-header{font-size:28px;font-weight:600}
#status-bar{font-size:12px;color:var(--text-ter);margin-top:2px;text-align:right;min-height:16px}
#btn-privacy:hover{color:var(--text-sec)}
.user-bar{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.user-bar img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.user-bar span{font-size:13px;color:var(--text-sec);flex:1}
.btn-logout{font-size:12px;color:var(--text-ter);background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:'Inter',sans-serif}
.btn-logout:hover{color:var(--red);border-color:var(--red)}
nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.nav-btn{padding:8px 14px;font-size:13px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--text-sec);font-family:'Inter',sans-serif;margin-bottom:-1px;transition:color .15s}
.nav-btn.active,.nav-btn:hover{color:var(--text)}
.nav-btn.active{border-bottom-color:var(--blue);font-weight:500}
.view{display:none}.view.active{display:block}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:1.25rem}
.metric{background:var(--bg-met);border-radius:var(--radius);padding:1rem}
.metric-label{font-size:11px;color:var(--text-sec);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.metric-value{font-size:21px;font-weight:600}
.metric-sub{font-size:11px;color:var(--text-ter);margin-top:3px}
.section-title{font-size:11px;font-weight:600;color:var(--text-ter);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:540px){.chart-row{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;font-size:12px;color:var(--text-sec)}
.legend span{display:flex;align-items:center;gap:5px}
.leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.asset-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.asset-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem}
.asset-card--click{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.asset-card--click:hover{box-shadow:0 2px 12px rgba(0,0,0,.07);border-color:rgba(50,102,173,.25)}
.asset-card.dragging{opacity:.35}
.asset-card.drag-over{border-top:2px solid var(--blue)}
.asset-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.asset-card-name{flex:1;font-weight:600;font-size:14px}
.asset-type-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-ter);background:var(--bg-met);padding:2px 7px;border-radius:20px;flex-shrink:0}
.asset-card-mid{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.asset-card-val{font-size:22px;font-weight:700;letter-spacing:-.03em}
.asset-chg{font-size:13px;font-weight:600;padding:2px 8px;border-radius:20px}
.asset-chg-up{color:var(--green);background:rgba(29,158,117,.1)}
.asset-chg-down{color:var(--red);background:rgba(226,75,74,.1)}
.asset-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-ter)}
.asset-card-sub{color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.empty{text-align:center;padding:2rem;color:var(--text-ter);font-size:14px;line-height:1.6}
.tab-row{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap}
.tab{padding:5px 13px;font-size:13px;border:1px solid var(--border);border-radius:20px;background:none;cursor:pointer;color:var(--text-sec);font-family:'Inter',sans-serif;transition:all .15s}
.tab.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-size:12px;color:var(--text-sec)}
input,select{width:100%;padding:8px 10px;font-size:14px;font-family:'Inter',sans-serif;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(50,102,173,.12)}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:14px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;transition:background .15s}
.btn-primary:hover{background:#185FA5}
.btn-secondary{background:var(--bg-met);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 18px;font-size:14px;cursor:pointer;font-family:'Inter',sans-serif;margin-left:8px}
.btn-danger{background:none;border:none;cursor:pointer;color:var(--text-ter);font-size:15px;padding:4px 6px;line-height:1;transition:color .15s}
.btn-danger:hover{color:var(--red)}
.btn-edit{background:none;border:none;cursor:pointer;color:var(--text-ter);font-size:15px;padding:4px 6px;line-height:1;transition:color .15s}
.btn-edit:hover{color:var(--blue)}
.drag-handle{color:var(--text-ter);cursor:grab;padding-right:6px;font-size:13px;letter-spacing:-2px;user-select:none;flex-shrink:0}
.drag-handle:hover{color:var(--text-sec)}
.drag-handle:active{cursor:grabbing}
.snapshot-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;gap:8px}
.snapshot-row:last-child{border-bottom:none}
.snapshot-row--clickable{cursor:pointer;transition:background .12s,border-radius .12s}
.snapshot-row--clickable:hover{background:var(--bg-met);border-radius:var(--radius);padding-left:8px;padding-right:8px;margin:0 -8px}
.trend-up{color:var(--green);font-size:12px}
.trend-down{color:var(--red);font-size:12px}
.market-row{display:flex;gap:10px;margin-bottom:1rem}
.market-card{flex:1;background:var(--bg-met);border-radius:var(--radius);padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:3px}
.market-top{display:flex;align-items:center;justify-content:space-between}
.market-label{font-size:11px;font-weight:700;color:var(--text-ter);text-transform:uppercase;letter-spacing:.06em}
.market-currency{font-size:10px;color:var(--text-ter);background:var(--border);padding:1px 5px;border-radius:3px}
.market-price-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:2px 0}
.market-price{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.market-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px}
.market-up{color:#1D9E75;background:rgba(29,158,117,.12)}
.market-down{color:#E24B4A;background:rgba(226,75,74,.1)}
.market-range{display:flex;align-items:center;gap:5px;margin:1px 0}
.market-range-val{font-size:9px;color:var(--text-ter);white-space:nowrap;flex-shrink:0}
.market-range-bar{flex:1;height:3px;background:rgba(128,128,128,.2);border-radius:2px;overflow:hidden;min-width:10px}
.market-range-fill{height:100%;background:var(--text-sec);border-radius:2px}
.market-stats{font-size:10px;color:var(--text-ter)}
.market-chart-wrap{height:80px;margin-top:4px}
.market-loading{font-size:12px;color:var(--text-ter);padding:16px 0}
.market-error{font-size:12px;color:var(--text-ter);padding:16px 0}
.update-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.update-row:last-child{border-bottom:none}
.update-name{flex:1;font-size:14px;font-weight:500}
.update-current{font-size:12px;color:var(--text-ter);min-width:90px;text-align:right}
.update-input{width:130px;text-align:right;padding:6px 8px;font-size:13px;border:1px solid var(--border);border-radius:6px;background:var(--bg-met);color:var(--text-pri)}
.update-input--changed{border-color:var(--green)!important;background:rgba(29,158,117,.08)!important}
.add-snap-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap}
.add-snap-row .form-group{flex:1;min-width:130px}

/* ── OBJETIVO ── */
.goal-card-empty{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;margin-bottom:1rem}
.goal-bar-wrap{background:var(--bg-met);border-radius:6px;height:10px;overflow:hidden}
.goal-bar-fill{height:100%;border-radius:6px;background:var(--blue);transition:width .5s ease}
.goal-bar-fill.goal-bar-over{background:var(--green)}

/* ── CALCULADORA ── */
.calc-display{background:var(--bg);border-radius:8px;padding:10px 14px;text-align:right;font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.calc-op-hint{font-size:11px;color:var(--text-ter);text-align:right;min-height:16px;margin-bottom:4px}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-btn{background:var(--bg-met);border:none;border-radius:7px;padding:13px 0;font-size:15px;font-weight:500;cursor:pointer;color:var(--text);transition:filter .12s;font-family:'Inter',sans-serif}
.calc-btn:hover{filter:brightness(1.12)}
.calc-btn:active{filter:brightness(.88);transform:scale(.97)}
.calc-btn--action{background:rgba(128,128,128,.18);color:var(--text-sec)}
.calc-btn--op{background:rgba(50,102,173,.2);color:#5b9cf6;font-size:17px}
.calc-btn--eq{background:var(--blue);color:#fff}
.calc-btn--wide{grid-column:span 2}
