:root{
  --bg:#F0F2F8;--card:#fff;--text:#1a1a2e;--sub:#888;--bdr:#e8e8f0;
  --pur:#534AB7;--pur-l:#F0EEFF;--pur-d:#3C3489;
  --tel:#1D9E75;--tel-l:#E1F5EE;--tel-d:#0F6E56;
  --amb:#EF9F27;--amb-l:#FEF3E2;--amb-d:#854F0B;
  --red:#E24B4A;--red-l:#FDECEA;--red-d:#A32D2D;
  --blu:#378ADD;--blu-l:#E6F1FB;--blu-d:#0C447C;
  --grn:#3B9D56;--grn-l:#EAF7EE;--grn-d:#1B4D2E;
  --pnk:#C84B8F;--pnk-l:#FBEAF5;--pnk-d:#7B1E55;
  --csh:#0097A7;--csh-l:#E0F7FA;--csh-d:#006064;
  --cor:#D85A30;--cor-l:#FDF0EC;--cor-d:#7B2E1A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:15px;min-height:100vh}
.app{max-width:980px;margin:0 auto;padding:14px}

/* ── TOPBAR ── */
.topbar{background:var(--card);border-radius:18px;padding:13px 18px;margin-bottom:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(83,74,183,.1)}
.logo{display:flex;align-items:center;gap:10px;flex:1;min-width:180px}
.logo-icon{width:36px;height:36px;border-radius:11px;background:var(--pur);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo-name{font-size:14px;font-weight:800;line-height:1.2}.logo-sub{font-size:11px;color:var(--sub)}
.year-sel{display:flex;gap:4px;align-items:center;flex-shrink:0}
.year-btn{padding:4px 12px;border:1.5px solid var(--bdr);border-radius:16px;cursor:pointer;font-size:12px;font-weight:700;background:transparent;color:#666;transition:all .15s}
.year-btn.act{background:var(--pur-d);color:#fff;border-color:var(--pur-d)}
.year-btn:hover:not(.act){background:var(--pur-l);border-color:var(--pur);color:var(--pur)}
.add-year-btn{padding:4px 10px;border:1.5px dashed var(--bdr);border-radius:16px;cursor:pointer;font-size:12px;font-weight:700;background:transparent;color:#aaa}
.add-year-btn:hover{border-color:var(--pur);color:var(--pur)}
.month-tabs{display:flex;gap:4px;flex-wrap:wrap;width:100%}
.tab{padding:5px 10px;border:1.5px solid var(--bdr);border-radius:16px;cursor:pointer;font-size:11px;font-weight:600;background:transparent;color:#666;transition:all .15s}
.tab.act{background:var(--pur);color:#fff;border-color:var(--pur)}
.tab:hover:not(.act){background:var(--pur-l);border-color:var(--pur);color:var(--pur)}

/* ── NAV ── */
.nav-pills{display:flex;gap:5px;margin-bottom:13px;flex-wrap:wrap}
.pill{padding:7px 13px;border:1.5px solid var(--bdr);border-radius:20px;cursor:pointer;font-size:13px;background:var(--card);color:#555;font-weight:600;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.pill.act{background:var(--pur-l);border-color:var(--pur);color:var(--pur-d)}
.pill:hover:not(.act){background:#f8f8ff;border-color:#bbb}
.pill .bdg{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700}

/* ── GRID ── */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media(max-width:640px){.g2,.g3,.g4,.g5,.dg{grid-template-columns:1fr!important}}

/* ── CARDS ── */
.card{background:var(--card);border-radius:18px;padding:18px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cp{border-top:3px solid var(--pur)}.ct{border-top:3px solid var(--tel)}.ca{border-top:3px solid var(--amb)}
.cr{border-top:3px solid var(--red)}.cb{border-top:3px solid var(--blu)}.cg{border-top:3px solid var(--grn)}
.cc{border-top:3px solid var(--csh)}.ctdc{border-top:3px solid var(--pnk)}
.ctitle{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.stitle{font-size:16px;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--bdr);margin-bottom:14px}

/* ── METRICS ── */
.metric{border-radius:14px;padding:13px;border:1.5px solid transparent}
.mp{background:var(--pur-l);border-color:#d8d5f5}.mt{background:var(--tel-l);border-color:#a8e0bc}
.ma{background:var(--amb-l);border-color:#f5d8a0}.mr{background:var(--red-l);border-color:#f5b8b8}
.mb{background:var(--blu-l);border-color:#b5d4f4}.mg{background:var(--grn-l);border-color:#a8e0bc}
.mcsh{background:var(--csh-l);border-color:#80deea}.mtdc{background:var(--pnk-l);border-color:#f4c0d8}
.ml{font-size:11px;font-weight:700;margin-bottom:4px}
.mp .ml{color:var(--pur-d)}.mt .ml{color:var(--tel-d)}.ma .ml{color:var(--amb-d)}.mr .ml{color:var(--red-d)}
.mb .ml{color:var(--blu-d)}.mg .ml{color:var(--grn-d)}.mcsh .ml{color:var(--csh-d)}.mtdc .ml{color:var(--pnk-d)}
.mv{font-size:20px;font-weight:800}
.mp .mv{color:var(--pur)}.mt .mv{color:var(--tel)}.ma .mv{color:var(--amb)}.mr .mv{color:var(--red)}
.mb .mv{color:var(--blu)}.mg .mv{color:var(--grn)}.mcsh .mv{color:var(--csh)}.mtdc .mv{color:var(--pnk)}
.msub{font-size:11px;color:var(--sub);margin-top:3px}

/* ── ALERTS ── */
.alert{border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:7px;display:flex;align-items:flex-start;gap:10px;font-weight:500}
.ai{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:800}
.a-r{background:var(--red-l);color:var(--red-d)}.a-r .ai{background:var(--red);color:#fff}
.a-a{background:var(--amb-l);color:var(--amb-d)}.a-a .ai{background:var(--amb);color:#fff}
.a-g{background:var(--grn-l);color:var(--grn-d)}.a-g .ai{background:var(--grn);color:#fff}
.a-p{background:var(--pur-l);color:var(--pur-d)}.a-p .ai{background:var(--pur);color:#fff}
.a-b{background:var(--blu-l);color:var(--blu-d)}.a-b .ai{background:var(--blu);color:#fff}
.a-c{background:var(--csh-l);color:var(--csh-d)}.a-c .ai{background:var(--csh);color:#fff}
.a-pk{background:var(--pnk-l);color:var(--pnk-d)}.a-pk .ai{background:var(--pnk);color:#fff}

/* ── FORMS ── */
.field{margin-bottom:11px}
.field label{display:block;font-size:12px;color:#666;margin-bottom:4px;font-weight:600}
.field input,.field select{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:10px;background:#fff;color:var(--text);font-size:14px;transition:border .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--pur);box-shadow:0 0 0 3px rgba(83,74,183,.1)}
.frow{display:flex;gap:8px}.frow .field{flex:1;margin-bottom:0}

/* ── BUTTONS ── */
.btn-p{background:var(--pur);color:#fff;border:none;padding:9px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.btn-p:hover{background:var(--pur-d)}
.btn-t{background:var(--tel);color:#fff;border:none;padding:9px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.btn-t:hover{background:var(--tel-d)}
.btn-c{background:var(--csh);color:#fff;border:none;padding:9px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.btn-pk{background:var(--pnk);color:#fff;border:none;padding:9px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700}
.btn-g{background:#fff;border:1.5px solid var(--bdr);padding:7px 13px;border-radius:10px;cursor:pointer;font-size:13px;color:#444;font-weight:600}
.btn-g:hover{background:#f8f8ff;border-color:var(--pur);color:var(--pur)}
.btn-d{background:transparent;color:var(--red-d);border:1.5px solid #f0c0c0;padding:5px 9px;border-radius:8px;cursor:pointer;font-size:12px}
.btn-d:hover{background:var(--red-l)}
.btn-e{background:transparent;color:var(--blu-d);border:1.5px solid #b5d4f4;padding:5px 9px;border-radius:8px;cursor:pointer;font-size:12px}
.btn-e:hover{background:var(--blu-l)}

/* ── TABLE ── */
.tx-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.tx-table th{text-align:left;padding:8px 10px;font-weight:700;color:var(--sub);font-size:11px;text-transform:uppercase;border-bottom:2px solid var(--bdr)}
.tx-table td{padding:9px 10px;border-bottom:1px solid #f5f5f5;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-table tr:last-child td{border-bottom:none}
.tx-table tr:hover td{background:#fafafe}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700}
.bp{background:var(--pur-l);color:var(--pur-d)}.bt{background:var(--tel-l);color:var(--tel-d)}
.ba{background:var(--amb-l);color:var(--amb-d)}.br{background:var(--red-l);color:var(--red-d)}
.bg{background:var(--grn-l);color:var(--grn-d)}.bb{background:var(--blu-l);color:var(--blu-d)}
.bgr{background:#F1EFE8;color:#444}.bco{background:var(--cor-l);color:var(--cor-d)}
.bpk{background:var(--pnk-l);color:var(--pnk-d)}.bcsh{background:var(--csh-l);color:var(--csh-d)}

/* ── PROGRESS ── */
.pbar{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-top:5px}
.pf{height:100%;border-radius:4px;transition:width .4s}
.fp{background:var(--pur)}.ft{background:var(--tel)}.fa{background:var(--amb)}
.fr{background:var(--red)}.fb{background:var(--blu)}.fg{background:var(--grn)}
.fcsh{background:var(--csh)}.fpk{background:var(--pnk)}

/* ── GASTO GENERAL ROWS ── */
.gf-row{padding:12px 0;border-bottom:1px solid #f0f0f5}
.gf-row:last-child{border-bottom:none}
.gf-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.gf-left{flex:1}
.gf-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gf-cat{font-size:11px;color:#bbb;margin-top:2px}
.gf-amounts{display:flex;gap:16px;font-size:12px;margin-top:6px;flex-wrap:wrap}
.gf-amt{display:flex;flex-direction:column;gap:1px}
.gf-amt-label{font-size:10px;color:#bbb;font-weight:600;text-transform:uppercase}
.gf-amt-val{font-weight:700;font-size:14px}
.over{color:var(--red)}.ok{color:var(--tel)}.neutral{color:var(--pur)}

/* ── MISC ── */
.empty{text-align:center;padding:24px;color:#ccc;font-size:14px}
.info-box{background:var(--pur-l);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--pur-d);margin-bottom:12px;border:1px solid #d8d5f5;font-weight:500}
.csh-info{background:var(--csh-l);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--csh-d);margin-bottom:12px;border:1px solid #80deea;font-weight:500}
.hint{font-size:12px;color:#bbb;margin-top:4px}
.goal-card{background:#F7F8FF;border-radius:14px;padding:14px;margin-bottom:10px;border:1.5px solid #e8e8f5}
.goal-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}

/* ── TIPO TOGGLE ── */
.tipo-toggle{display:flex;gap:6px}
.tipo-btn{flex:1;padding:9px;border:2px solid var(--bdr);border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;background:#fff;color:#aaa;text-align:center}
.tipo-btn.sf{border-color:var(--pur);background:var(--pur-l);color:var(--pur-d)}
.tipo-btn.sv{border-color:var(--amb);background:var(--amb-l);color:var(--amb-d)}

/* ── LINK TOGGLE ── */
.link-toggle{display:flex;gap:6px;margin-bottom:12px}
.link-btn{flex:1;padding:8px;border:2px solid var(--bdr);border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;background:#fff;color:#aaa;text-align:center}
.link-btn.sn{border-color:var(--blu);background:var(--blu-l);color:var(--blu-d)}
.link-btn.sl{border-color:var(--tel);background:var(--tel-l);color:var(--tel-d)}

/* ── TOAST & MODAL ── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:10px 18px;border-radius:12px;font-size:13px;font-weight:600;opacity:1;transition:opacity .35s;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal{background:#fff;border-radius:20px;padding:22px;width:100%;max-width:440px;box-shadow:0 8px 32px rgba(0,0,0,.2);margin:auto}
.modal h3{font-size:17px;font-weight:800;margin-bottom:15px}
.seg-badge{background:var(--amb);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
.renov-soon{background:var(--red-l);border:1.5px solid var(--red);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--red-d);font-weight:600;margin-top:6px}
.tdc-card{background:#fff;border:1.5px solid var(--bdr);border-radius:14px;padding:14px;margin-bottom:10px}
.tdc-card.seg{border-color:var(--amb);background:var(--amb-l)}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f5;font-size:14px}
.summary-row:last-child{border-bottom:none}