:root{--brand:#FF2E63;--brand-press:#E00B41;--brand-soft:#FFE7ED;--green:#12A150;--green-d:#0A7C3C;--green-soft:#E1F4EA;--ink:#222;--muted:#6A6A6A;--faint:#A6A6A6;--line:#EDEDED;--line2:#DDD;--bg:#FFF;--soft:#F7F7F7;--red:#C13515;--red-soft:#FBE9E4;--amber:#C4570E;--amber-soft:#FDEEE2;--shadow-sm:0 1px 3px rgba(0,0,0,.07);--font:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}
  body{font-family:var(--font);background:#EFEFEF;color:var(--ink);-webkit-font-smoothing:antialiased}
  #app{max-width:440px;margin:0 auto;min-height:100vh;background:var(--bg);color:var(--ink);position:relative;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.12)}
  .hidden{display:none!important}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .money{font-variant-numeric:tabular-nums;letter-spacing:-.3px}svg{display:block}

  #login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px;text-align:center}
  .logo{width:74px;height:74px;border-radius:22px;margin-bottom:18px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff}
  #login h1{font-size:25px;margin:0 0 3px;font-weight:900}#login p{color:var(--muted);margin:0 0 30px;font-size:15px;font-weight:600}
  .pin{display:flex;gap:13px;margin-bottom:26px}.pin span{width:14px;height:14px;border-radius:50%;background:var(--line2);transition:.2s}.pin span.on{background:var(--brand);transform:scale(1.15)}
  .keys{display:grid;grid-template-columns:repeat(3,70px);gap:16px}.keys button{height:70px;border-radius:50%;font-size:25px;font-weight:700;background:var(--soft);color:var(--ink);border:1px solid var(--line)}.keys button:active{transform:scale(.94);background:var(--brand-soft)}.keys .empty{background:none;border:none}
  .hint{margin-top:26px;font-size:13px;color:var(--muted);font-weight:600}.hint b{color:var(--brand)}

  #main{padding-bottom:92px}
  .topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 18px 12px;display:flex;align-items:center;justify-content:space-between}
  .topbar .hello{font-size:15px;color:var(--ink);font-weight:800}.topbar .title{font-size:22px;font-weight:900;margin-top:2px;letter-spacing:-.5px;color:var(--muted)}
  .tb-actions{display:flex;gap:8px}
  .icobtn{width:42px;height:42px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;color:var(--ink)}
  .icobtn .dot{position:absolute;top:7px;right:8px;width:9px;height:9px;background:var(--brand);border-radius:50%;border:2px solid #fff}
  .view{padding:14px 16px 8px;animation:fade .2s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .sec-h{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 6px 8px}.sec-h:first-child{margin-top:2px}
  .card{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:4px 15px;margin-bottom:12px}

  /* Tarjeta-resumen verde (lenguaje común) */
  .sumcard{color:#fff;border-radius:18px;padding:17px;margin-bottom:14px;background:linear-gradient(135deg,var(--green),var(--green-d));box-shadow:0 10px 26px rgba(10,124,60,.25)}
  .sumcard.neg{background:linear-gradient(135deg,#C1121F,#8E0D17);box-shadow:0 10px 26px rgba(140,13,23,.25)}
  .sumcard.usd{background:linear-gradient(135deg,#2B3A4F,#17202E);box-shadow:0 10px 26px rgba(15,25,45,.3)}
  .sumcard .lbl{font-size:12.5px;opacity:.92;font-weight:800}.sumcard .big{font-size:31px;font-weight:900;margin:3px 0 2px;letter-spacing:-1.1px}.sumcard .sub{font-size:12px;opacity:.9;font-weight:700}
  .sumcard .row2{display:flex;gap:20px;margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.28)}.sumcard .row2 div{flex:1}.sumcard .row2 .t{font-size:11px;opacity:.85;font-weight:800}.sumcard .row2 .v{font-size:16px;font-weight:900;margin-top:2px}
  .sumcard.exp{cursor:pointer}
  .sumcard .expbody{max-height:0;overflow:hidden;transition:max-height .32s ease}
  .sumcard .expinner{padding-top:13px;margin-top:13px;border-top:1px solid rgba(255,255,255,.28)}
  .sumcard .expttl{font-size:10.5px;font-weight:900;opacity:.8;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
  .sumcard .sl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:13.5px;font-weight:700}
  .sumcard .sl span{opacity:.94}.sumcard .sl b{font-weight:900;white-space:nowrap}
  .sumcard .sl.sub2{opacity:.82;font-size:12.5px;padding:4px 0 4px 12px}
  .sumcard .sl.grp{opacity:.72;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:900;padding:9px 0 1px}.sumcard .sl.grp b{display:none}
  .sumcard .sl.tot{margin-top:4px;padding-top:9px;border-top:1px solid rgba(255,255,255,.28);font-size:14.5px}.sumcard .sl.tot span{font-weight:900;opacity:1}
  .sumcard .exphint{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:800;opacity:.9;margin-top:11px;text-transform:uppercase;letter-spacing:.4px}
  .sumcard .exphint svg{width:13px;height:13px;transition:.25s}.sumcard.open .exphint svg{transform:rotate(180deg)}

  .toggle2{display:flex;background:var(--soft);border:1px solid var(--line);border-radius:13px;padding:4px;margin-bottom:12px}
  .toggle2 button{flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:800;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
  .toggle2 button.on{background:var(--bg);box-shadow:var(--shadow-sm);color:var(--ink)}.toggle2 button.on.pay{color:var(--brand)}.toggle2 button.on.col{color:var(--green)}.toggle2 .cnt{font-size:11px;font-weight:800;opacity:.7}

  .inbox-card{background:var(--brand-soft);border:1px solid #FFD4DD;border-radius:16px;padding:13px 14px;margin-bottom:12px}
  .inbox-card .ih{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:var(--brand)}
  .inbox-card .ib{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-top:9px;display:flex;align-items:center;gap:10px}
  .inbox-card .ib .it{flex:1;min-width:0}.inbox-card .ib .it b{font-size:13.5px}.inbox-card .ib .it small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;margin-top:1px}
  .inbox-card .ib .ok{background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:7px 13px;border-radius:18px;flex:0 0 auto}

  .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:none}
  .ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--ink)}.ic svg{width:21px;height:21px}
  .row .info{flex:1;min-width:0}.row .t{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .s{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .due.over{color:var(--amber);font-weight:800}.due.soon{color:var(--muted);font-weight:800}
  .row .right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto}.row .amt{font-weight:900;font-size:14.5px;white-space:nowrap;min-width:88px;text-align:right;order:2}.row .right .btn-pay{margin-top:0;order:1}
  .btn-pay{margin-top:0;background:var(--brand);color:#fff;font-size:12px;font-weight:800;padding:7px 16px;border-radius:20px}.btn-pay:active{transform:scale(.95)}.btn-pay.settle{background:var(--red)}.btn-collect{background:var(--green)}
  .tagmini{font-size:10px;font-weight:900;padding:2px 7px;border-radius:10px}.tagmini.debt{background:var(--red-soft);color:var(--red)}.tagmini.deb{background:var(--amber-soft);color:var(--amber)}.tagmini.inq{background:var(--soft);color:var(--faint)}.tagmini.skip{background:var(--soft);color:var(--faint)}
  .okmini{color:var(--green);font-weight:800;font-size:11.5px}

  /* Lista de activos (tarjetas que abren detalle) */
  .acard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px;margin-bottom:11px}
  .acard .info{flex:1;min-width:0}.acard .nm{font-weight:900;font-size:15px}.acard .ty{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
  .acard .chev{color:var(--faint)}
  .badge{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:20px;white-space:nowrap}.badge.al{background:var(--red-soft);color:var(--red)}.badge.ok{background:var(--green-soft);color:var(--green)}.badge.wa{background:var(--soft);color:var(--muted)}
  .prop{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:11px;overflow:hidden}
  .prop-head{display:flex;align-items:center;gap:12px;padding:13px 14px;width:100%;text-align:left}
  .prop-head .info{flex:1;min-width:0}.prop-head .nm{font-weight:900;font-size:15px}.prop-head .ty{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
  .prop-head .chev{color:var(--muted);transition:.25s}.prop.open .chev{transform:rotate(180deg)}
  .prop-body{max-height:0;overflow:hidden;transition:max-height .32s ease}.prop-inner{padding:0 14px 14px}

  /* Detalle de ficha */
  .fhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .fhead .back{width:38px;height:38px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--ink)}
  .fhead .ic{width:46px;height:46px}
  .fhead .ft{flex:1;min-width:0}.fhead .fn{font-weight:900;font-size:18px;letter-spacing:-.4px}.fhead .fs{font-size:12px;color:var(--muted);font-weight:700;margin-top:1px}
  .estchip{font-size:11px;font-weight:900;padding:4px 10px;border-radius:20px}.estchip.alq{background:var(--green-soft);color:var(--green)}.estchip.sin{background:var(--amber-soft);color:var(--amber)}
  .stateToggle{display:flex;gap:8px;margin:12px 0}.stateToggle button{flex:1;padding:12px;border-radius:12px;border:1.5px solid var(--line2);font-weight:900;font-size:13.5px;background:#fff;color:var(--muted)}.stateToggle button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .factions{display:flex;gap:8px;margin-bottom:12px}.factions button{flex:1;padding:11px;border-radius:12px;border:1px solid var(--line2);font-weight:800;font-size:13px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}
  .datosbox{background:var(--soft);border-radius:14px;padding:6px 14px;margin-bottom:12px}
  .kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--line)}.kv:last-child{border-bottom:none}.kv .k{color:var(--muted);font-weight:700;flex:0 0 auto}.kv .v{font-weight:800;text-align:right}.kv .v .lnk{color:var(--brand);text-decoration:underline}
  .ipc{background:var(--green-soft);border-radius:12px;padding:11px;margin:2px 0 12px;font-size:12.5px}.ipc .ipt{font-weight:900}.ipc .ipd{color:var(--muted);font-weight:700;margin-top:3px}.ipc .ipd b{color:var(--green)}

  .gline{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;-webkit-user-select:none}.gline:last-child{border-bottom:none}.gline:active{opacity:.7}.gline.inq,.gline.skip{opacity:.5}
  .clipind{color:var(--faint);margin-left:4px;display:inline-block}.clipind svg{display:inline-block;vertical-align:-1.5px}
  .gline .gic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--soft);flex:0 0 auto}
  .gline .gi{flex:1;min-width:0}.gline .gn{font-weight:800;font-size:13.5px}.gline .gd{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gline .gd .cta{color:var(--faint)}
  .gline .gr{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:7px}.gline .ga{font-weight:900;font-size:14px;text-align:right;white-space:nowrap;min-width:84px}.gline .gract{display:flex;align-items:center;gap:6px}
  .miniopt{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
  .clip{color:var(--green);vertical-align:middle;margin-left:4px}
  .addbtn{margin-top:11px;width:100%;padding:11px;border-radius:12px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
  .total-row{display:flex;justify-content:space-between;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:13.5px}.total-row .k{font-weight:800}.total-row .v{font-weight:900}

  .findbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:13px;padding:12px;font-weight:800;font-size:13.5px;color:var(--ink);margin-bottom:12px}
  .filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px}.filters::-webkit-scrollbar{display:none}
  .fpill{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:8px 13px;border-radius:20px;background:var(--soft);color:var(--muted);border:1px solid var(--line)}.fpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}.fpill svg{width:12px;height:12px}
  .fsummary{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--muted);margin:2px 4px 8px}.fsummary .clr{color:var(--brand)}
  .mv{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.mv:last-child{border-bottom:none}
  .mv .mi{flex:1;min-width:0}.mv .mt{font-weight:800;font-size:13.5px}.mv .ms{font-size:11px;color:var(--muted);font-weight:700;margin-top:1px}
  .mv .mr{text-align:right;flex:0 0 auto}.mv .mval{font-weight:900;font-size:14px}.mv .mval.in{color:var(--green)}.mv .mval.out{color:var(--brand)}
  .mv .mst{font-size:10px;font-weight:800;margin-top:1px;color:var(--muted)}
  .mv .mic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--soft)}
  .clipbtn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}.clipbtn.on{color:var(--green);border-color:var(--green-soft);background:var(--green-soft)}

  .debt{background:var(--bg);border:1px solid #F0D5CC;border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}
  .debt-head{display:flex;align-items:center;gap:12px;padding:14px 15px;width:100%;text-align:left}
  .debt-head .di{width:42px;height:42px;border-radius:12px;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .debt-head .info{flex:1}.debt-head .dl{font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.4px}.debt-head .dv{font-size:22px;font-weight:900;color:var(--red)}
  .debt-head .chev{color:var(--red);transition:.25s}.debt.open .chev{transform:rotate(180deg)}
  .debt-body{max-height:0;overflow:hidden;transition:max-height .3s ease}.debt-inner{padding:0 15px 12px}
  .debt-note{font-size:11.5px;color:var(--muted);font-weight:700;background:var(--soft);border-radius:10px;padding:9px 11px;margin-bottom:10px}
  .cta-cuenta{padding:11px 0;border-bottom:1px solid var(--line)}.cta-cuenta:last-child{border-bottom:none}
  .cta-cuenta .top{display:flex;align-items:center;gap:10px}.cta-cuenta .cic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .cta-cuenta .cn{flex:1}.cta-cuenta .cn b{font-size:13.5px;font-weight:900}.cta-cuenta .cn small{display:block;color:var(--muted);font-size:11px;font-weight:700}
  .cta-cuenta .cv{font-weight:900;font-size:14px;color:var(--red)}
  .cta-cuenta .settle{margin-left:44px;margin-top:7px;background:var(--red);color:#fff;font-size:12px;font-weight:800;padding:6px 13px;border-radius:16px}

  /* Proyección */
  .tl{margin-bottom:12px}
  .tlrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.tlrow:last-child{border-bottom:none}
  .tlrow.curr{background:var(--green-soft);border-radius:10px;padding:10px 8px;border:none;margin:2px -8px}
  .tlrow .tm{width:70px;flex:0 0 auto;font-weight:900;font-size:13px;text-transform:capitalize}
  .tlrow .tm small{display:block;font-size:9.5px;font-weight:800;color:var(--faint);text-transform:uppercase}
  .tlrow .tb{flex:1;min-width:0}
  .tlrow .bar{height:8px;border-radius:5px;background:var(--soft);overflow:hidden;margin-bottom:4px}.tlrow .bar i{display:block;height:100%}
  .tlrow .bl{display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:var(--muted)}
  .tlrow .tn{width:78px;flex:0 0 auto;text-align:right;font-weight:900;font-size:13px}.tlrow .tn.pos{color:var(--green)}.tlrow .tn.neg{color:var(--red)}
  .inflnote{font-size:11.5px;color:var(--muted);font-weight:700;background:var(--soft);border-radius:12px;padding:11px 13px;margin-bottom:12px;display:flex;gap:9px;align-items:center}

  .banner{background:var(--soft);border:1px solid var(--line);border-radius:13px;padding:11px 13px;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:12px;display:flex;gap:9px;align-items:center}.banner .bi{color:var(--ink);flex:0 0 auto}
  .note{font-size:11.5px;color:var(--muted);font-weight:700;margin:-4px 4px 12px;line-height:1.4}
  .empty-state{text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;padding:22px 10px}

  .nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:30}
  .nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--muted);font-size:10px;font-weight:800}.nav button svg{width:22px;height:22px}.nav button.on{color:var(--brand)}

  #ov{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:40}#ov.show{opacity:1;pointer-events:auto}
  #sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:440px;background:#fff;border-radius:22px 22px 0 0;z-index:41;transition:transform .28s cubic-bezier(.2,.8,.2,1);padding:8px 18px calc(20px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto}#sheet.show{transform:translateX(-50%) translateY(0)}
  .sheet-grip{width:40px;height:4px;border-radius:3px;background:var(--line2);margin:8px auto 12px}
  .sheet-title{font-size:17px;font-weight:900;margin-bottom:2px}.sheet-sub{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:14px}
  .field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:5px}
  .field input,.field select{width:100%;padding:12px;border:1px solid var(--line2);border-radius:12px;font-family:inherit;font-size:16px;font-weight:800;background:#fff;color:var(--ink)}
  .attachbtn{width:100%;padding:12px;border:1.5px dashed var(--line2);border-radius:12px;font-weight:800;font-size:13.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}.attachbtn.on{border-color:var(--green);color:var(--green);background:var(--green-soft)}
  .sheet-save{width:100%;background:var(--brand);color:#fff;font-weight:900;font-size:16px;padding:15px;border-radius:14px;margin-top:6px}
  .sheet-save.green{background:var(--green)}
  .sheet-link{display:block;width:100%;text-align:center;color:var(--muted);font-weight:800;font-size:14px;padding:12px;margin-top:2px}.sheet-link.red{color:var(--red)}
  .opt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px;font-weight:800}.opt:last-child{border-bottom:none}.opt.on{color:var(--brand)}

  .field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .estrow{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
  .miniToggle{flex:1;display:flex;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:3px}.miniToggle button{flex:1;padding:7px;border-radius:8px;font-weight:800;font-size:12px;color:var(--muted)}.miniToggle button.on{background:var(--bg);box-shadow:var(--shadow-sm);color:var(--ink)}
  .optbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
  .datos-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 0;font-size:12.5px;font-weight:800;color:var(--muted)}.datos-toggle svg{width:16px;height:16px;transition:.2s}.datos-toggle.open svg{transform:rotate(180deg)}
  .datos{display:none}.datos.show{display:block}
  .mvhead{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
  .baja-link{display:block;width:100%;text-align:center;padding:8px;font-size:12px;font-weight:800;color:var(--faint)}.mvhead button{font-size:11.5px;font-weight:800;color:var(--brand);text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:4px}
  .verhist{width:100%;text-align:center;padding:11px;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--brand);background:var(--brand-soft);border-radius:12px}
  .gopts{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);margin-left:6px;vertical-align:middle;margin-top:4px}
  .clip{color:var(--muted);vertical-align:middle;margin-left:4px}
  .clipbtn{width:30px;height:30px;border-radius:9px;border:none;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--faint);flex:0 0 auto}.clipbtn.on{color:var(--green);background:var(--green-soft)}
  .umbral{margin-left:44px;font-size:11px;font-weight:800;color:var(--muted);margin-top:5px}.umbral.warn{color:var(--red)}.umbral .ub{height:6px;border-radius:4px;background:var(--soft);margin-top:4px;overflow:hidden}.umbral .ub i{display:block;height:100%}
  #app.dark{--ink:#F4F4F4;--muted:#B6B6B6;--faint:#8A8A8A;--line:#343434;--line2:#454545;--bg:#181818;--soft:#262626;--brand-soft:#3A1622;--green-soft:#0F281B;--red-soft:#33170F;--amber-soft:#332008;background:#181818}
  #app.dark .money,#app.dark .gline .gn,#app.dark .gline .ga,#app.dark .row .t,#app.dark .row .amt,#app.dark .mv .mt,#app.dark .prop-head .nm,#app.dark .acard .nm{color:var(--ink)}
  #app.dark .topbar{background:rgba(24,24,24,.95)}#app.dark .nav{background:rgba(24,24,24,.97)}#app.dark #sheet{background:#1E1E1E}
  #app.dark .field input,#app.dark .field select,#app.dark .keys button,#app.dark .icobtn,#app.dark .optbtn,#app.dark .gopts,#app.dark .clipbtn,#app.dark .findbtn,#app.dark .card,#app.dark .prop,#app.dark .fpill,#app.dark .weekchip,#app.dark .banner,#app.dark .inflnote,#app.dark .miniToggle,#app.dark .stateToggle button,#app.dark .factions button{background:var(--soft)}
  #app.dark .miniToggle button.on,#app.dark .fpill.on{background:#EEE;color:#181818}
  #app.dark{--amber:#F0A050;--amber-soft:#3A2A12;--red:#F07167;--red-soft:#3A1D18}
  #app.dark .fpill{color:#DCDCDC;border-color:#454545}
  #app.dark .fsummary{color:#C9C9C9}
  #app.dark .badge.al{background:#3A1D18;color:#F07167}
  #app.dark .inbox-card{background:#33141E;border-color:#57202E}
  #app.dark .debt{border-color:#4A2430}
  #app.dark .verhist,#app.dark .addbtn{background:#3A1622;color:#FF8FA3}
  #app.dark .cta-cuenta .settle,#app.dark .btn-pay.settle{background:#D22F3D}
  #toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:.3s;z-index:60;max-width:90%}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast-undo{margin-left:14px;color:#FF8FA3;font-weight:900;font-size:13.5px;display:none}

/* ── agregados mínimos fuera de la maqueta (login Google + estados) ────── */
.gbtn{width:100%;max-width:280px;background:var(--brand);color:#fff;font-weight:900;font-size:16px;padding:15px;border-radius:14px}
.gbtn:active{transform:scale(.97)}
.login-err{margin-top:14px;font-size:13px;font-weight:800;color:var(--red);min-height:18px}
/* fix: el toast oculto no debe interceptar taps (bug de la maqueta) */
#toast{pointer-events:none}#toast.show{pointer-events:auto}
/* logo definitivo (branding/): imagen en vez de la casita SVG */
.logo{background:#fff;overflow:hidden;padding:0}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
/* splash de entrada (mientras resuelve la sesión de Google) */
#login-splash .entrando{color:var(--muted);font-weight:800;font-size:14px;animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.45}50%{opacity:1}}

/* ── D-22 · frame fijo: la topbar sticky estaba rota porque #app tiene
   overflow:hidden (mata position:sticky). clip en X mantiene el recorte
   horizontal SIN crear scroll container: sticky arriba + nav fija abajo. ── */
#app{overflow:visible;overflow-x:clip}

/* ── D-23 · tipografía +1–2px para Dori (proporcional, sin tocar layouts) ── */
.topbar .hello{font-size:16px}.topbar .title{font-size:23px}
.sec-h{font-size:13px}
.sumcard .lbl{font-size:13.5px}.sumcard .big{font-size:33px}.sumcard .sub{font-size:13px}
.sumcard .row2 .t{font-size:12px}.sumcard .row2 .v{font-size:17.5px}
.sumcard .sl{font-size:15px}.sumcard .sl.sub2{font-size:13.5px}.sumcard .sl.tot{font-size:16px}
.sumcard .exphint{font-size:12px}
.toggle2 button{font-size:15px}.toggle2 .cnt{font-size:12px}
.row .t{font-size:16px}.row .s{font-size:13.2px}.row .amt{font-size:16px;min-width:96px}
.btn-pay{font-size:13.5px}
.tagmini{font-size:11px}.okmini{font-size:12.5px}.badge{font-size:11.5px}
.gline .gn{font-size:15px}.gline .gd{font-size:12.5px}.gline .ga{font-size:15.5px;min-width:92px}
.prop-head .nm{font-size:16.5px}.prop-head .ty{font-size:13px}
.acard .nm{font-size:16.5px}.acard .ty{font-size:13px}
.kv{font-size:14.5px}
.datos-toggle{font-size:13.5px}
.mvhead{font-size:12px}.mvhead button{font-size:12.5px}
.verhist{font-size:13.5px}.addbtn{font-size:14.5px}.baja-link{font-size:13px}
.factions button{font-size:14px}.stateToggle button{font-size:14.5px}.miniToggle button{font-size:13px}
.mv .mt{font-size:15px}.mv .ms{font-size:12.5px}.mv .mval{font-size:15.5px}.mv .mst{font-size:11px}
.findbtn{font-size:15px}.fpill{font-size:13.5px}.fsummary{font-size:13px}
.debt-head .dl{font-size:13px}.debt-head .dv{font-size:24px}
.cta-cuenta .cn b{font-size:15px}.cta-cuenta .cn small{font-size:12px}.cta-cuenta .cv{font-size:15.5px}.cta-cuenta .settle{font-size:13px}
.tlrow .tm{font-size:14.5px}.tlrow .tm small{font-size:10.5px}.tlrow .tn{font-size:14.5px;width:86px}.tlrow .bl{font-size:11px}
.inflnote,.banner{font-size:13px}.note{font-size:12.8px}.empty-state{font-size:15px}
.sheet-title{font-size:19px}.sheet-sub{font-size:14px}
.field label{font-size:13.5px}.field input,.field select{font-size:17px}
.sheet-save{font-size:17px}.sheet-link{font-size:15px}.opt{font-size:16px}
.attachbtn{font-size:14.5px}.inbox-card .ib .it b{font-size:15px}.inbox-card .ib .it small{font-size:12.5px}.inbox-card .ih{font-size:14px}
.nav button{font-size:11px}.nav button svg{width:23px;height:23px}
.hint{font-size:14px}#login p{font-size:16px}
.due.over,.due.soon{font-size:inherit}
#toast{font-size:14.5px}#toast-undo{font-size:14.5px}
/* En pantallas angostas (iPhone estándar), importe arriba y botón abajo:
   el título recupera el ancho y no se trunca. */
@media (max-width:414px){
  .row .right{flex-direction:column;align-items:flex-end;gap:5px}
  .row .amt{order:1;min-width:0}
  .row .right .btn-pay{order:2}
  .gline .ga{min-width:0}
  .btn-pay{padding:6px 13px}
}

/* ── D-28 · empty states cálidos: invitan a cargar, no parecen error ── */
.vacio{text-align:center;padding:30px 18px 26px}
.vacio .vic{width:64px;height:64px;border-radius:22px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.vacio .vt{font-size:16px;font-weight:900;margin-bottom:4px}
.vacio .vs{font-size:13.5px;font-weight:600;color:var(--muted);max-width:250px;margin:0 auto;line-height:1.45}
.vacio .vs b{color:var(--brand)}

/* ── D-29 · estados honestos: skeleton de carga + chip "a cargar" ── */
.skel{background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:shimmer 1.1s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skelrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.skelrow:last-child{border-bottom:none}
.skel-ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto}
.skel-l{height:13px;margin-bottom:7px}.skel-l2{height:10px}
.skel-amt{width:70px;height:14px;flex:0 0 auto}
.sumcard.cargando .big,.sumcard.cargando .sub,.sumcard.cargando .row2{visibility:hidden}
.sumcard .skel-b{height:33px;width:55%;background:rgba(255,255,255,.35);animation:shimmer 1.1s infinite;background-image:linear-gradient(90deg,rgba(255,255,255,.3) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.3) 75%);background-size:200% 100%;border-radius:8px;margin:6px 0 4px}
.sumcard .skel-s{height:12px;width:38%;background:rgba(255,255,255,.28);border-radius:6px}
.tagcargar{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:12px;background:var(--soft);color:var(--faint);white-space:nowrap}
.big.acompletar{opacity:.6;font-size:24px;letter-spacing:-.5px}

/* ── D-32 · sheets prolijos + fade bajo la topbar ── */
/* scroll interno contenido y suave; el fondo no rebota detrás */
#sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* compresión: el sheet típico de una boleta entra sin scrollear */
#sheet .sheet-grip{margin:6px auto 10px}
#sheet .sheet-title{font-size:18px}
#sheet .sheet-sub{margin-bottom:10px}
#sheet .datosbox{padding:2px 12px;margin-bottom:10px}
#sheet .kv{padding:7px 0;font-size:14px}
#sheet .opt{padding:11px 4px;font-size:15px}
#sheet .attachbtn{padding:10px;margin-bottom:8px}
#sheet .sheet-save{padding:13px;margin-top:4px}
#sheet .sheet-link{padding:9px}
#sheet .field{margin-bottom:10px}
#sheet .field input,#sheet .field select{padding:11px}
/* fade: el contenido se desvanece al meterse bajo la topbar (claro y oscuro) */
.topbar::after{content:'';position:absolute;top:100%;left:0;right:0;height:20px;background:linear-gradient(to bottom,var(--bg),transparent);pointer-events:none}
/* pull-to-refresh + banner de versión (D-35) */
#ptr{position:fixed;top:8px;left:50%;transform:translate(-50%,0);width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--brand);z-index:60;opacity:0;transition:opacity .15s;pointer-events:none}
#verbanner{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;z-index:45;background:var(--brand);color:#fff;font-weight:800;font-size:13.5px;padding:11px;text-align:center}

/* ── D-37 · pulida profunda de UI ── */
/* B7: header compacto, sólido (sin fantasmas de transparencia en iPhone) */
.topbar{background:var(--bg);backdrop-filter:none;padding:10px 16px 9px}
#app.dark .topbar{background:var(--bg)}
.topbar .title{font-size:20px;margin-top:0;color:var(--ink)}
.icobtn{width:38px;height:38px;position:relative}
.icobtn::before{content:'';position:absolute;inset:-4px}  /* área táctil 46px */
.tb-actions{gap:6px}
.topbar::after{height:22px}
/* B4: nada se corta — los kv largos envuelven, nunca desbordan */
.kv{flex-wrap:wrap;row-gap:2px}
.kv .k{min-width:0;overflow-wrap:anywhere}
.kv .v{min-width:0;overflow-wrap:anywhere;max-width:100%}
/* B8: subtítulos multilínea alineados (sin el hueco raro del 2º renglón) */
.row .s{row-gap:2px;column-gap:6px}
.gline .gd{white-space:normal;line-height:1.35}

/* ── D-40 · Finura de iPhone real (terminación) ─────────────────────────
   1 · nav con margen lateral + safe-area: las 5 etiquetas completas.
   3 · persianas al toque: transición corta, feedback :active, cero
       re-render (el contenido se renderiza una vez; abrir solo anima).
   4 · marca "Dori ♥ Sección" (corazón fino coral del logo). SIN franja:
       con el nombre arriba el tope ya tiene identidad (captura en
       verificacion/). 5 · compactar espacio sí, achicar letra no. */
.nav{padding:7px max(12px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right))}
.nav button{white-space:nowrap;min-width:0;padding:4px 1px;letter-spacing:-.2px}
.btn-pay,.addbtn,.attachbtn,.sheet-save,.verhist,.fpill,.factions button{white-space:nowrap}
.prop-body,.debt-body,.sumcard .expbody{transition:max-height .2s cubic-bezier(.3,.9,.4,1)}
.prop-head:active,.debt-head:active{background:var(--soft)}
.topbar .title{font-size:22px;letter-spacing:-.4px;display:flex;align-items:baseline;gap:6px}
.tit-heart{width:15px;height:15px;color:var(--brand);flex:0 0 auto;align-self:center;margin-top:2px}
.tagmini{font-size:11.5px}.badge{font-size:12px}.tagcargar{font-size:11.5px}
.mv .mst{font-size:11.5px}.mvhead{font-size:12.5px}

/* 6 · Ajustes con el lenguaje de la casa: secciones en tarjetas, íconos,
   descripciones cortas en criollo */
#sheet .sec-h{margin:12px 4px 7px}
.datosbox.cfg{padding:4px 12px;margin-bottom:2px}
.cfgrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.cfgrow:last-child{border-bottom:none}
.cfgrow .ic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:0 0 auto}
.cfginfo{flex:1;min-width:0}
.cfgt{font-weight:800;font-size:14.5px}
.cfgd{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:1px;line-height:1.35}
.cfga{flex:0 0 auto;font-size:13.5px;font-weight:800;white-space:nowrap;color:var(--brand)}
.cfgmail{font-weight:800;font-size:14px;background:var(--soft);border:1px dashed var(--line2);border-radius:10px;padding:9px;text-align:center;margin:6px 0 8px;cursor:pointer}

/* 7 · sheets: misma jerarquía y aire que las tarjetas */
#sheet .sheet-title{letter-spacing:-.3px}
#sheet .note{line-height:1.45}
.note.centrada{text-align:center;margin:2px 8px 12px}
.note.centrada b{color:var(--ink);display:inline-block;margin-top:2px}

/* 9 · banner de versión: pill discreta sobre la nav, claro y oscuro */
#verbanner{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;max-width:88%;left:50%;transform:translateX(-50%);border-radius:20px;padding:10px 18px;box-shadow:0 10px 28px rgba(0,0,0,.24);font-size:13px}

/* ── D-41 · Coherencia: botones, grilla única de renglón, inquilino ─────
   Regla de botones: lo FRECUENTE (registro) arriba y lleno; lo
   ESTRUCTURAL (configurar el mundo) abajo y punteado discreto. */
.addbtn{background:transparent;border:1.5px dashed var(--line2);color:var(--muted)}
.addbtn.regbtn{background:var(--brand);border:none;color:#fff}
#app.dark .verhist,#app.dark .addbtn{background:transparent;color:#B9B9B9;border-color:#454545}
#app.dark .addbtn.regbtn{background:var(--brand);color:#fff;border:none}

/* Grilla única de renglón (Hoy · Activos · Gastos · Caja · sheets):
   mismo ícono (40px), mismas alturas, título aprovechando el ancho
   (hasta 2 líneas, sin truncar de más), importe y acción a la derecha. */
.row{padding:11px 0;gap:11px}
.ic{width:40px;height:40px}
.row .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gline{padding:11px 0;gap:11px}
.gline .gic{width:40px;height:40px;border-radius:12px}
.gline .gn{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gline .gd,.mv .ms{font-size:13.2px}
.gline .ga,.mv .mval{font-size:16px}
.mv{padding:11px 0;gap:11px}
.mv .mic{width:40px;height:40px;border-radius:12px}
.mv .mt{font-size:16px}

/* La línea comprimida del inquilino, al pie de la persiana */
.inqline{width:100%;display:flex;align-items:center;gap:7px;padding:10px 2px;margin-top:2px;font-size:12.8px;font-weight:800;color:var(--muted);border-top:1px solid var(--line);text-align:left}
.inqline:active{opacity:.6}

/* D-57 · "dar de baja" es familia rosa (reversible); solo el borrado definitivo queda rojo */
#sheet .baja-link{color:var(--brand)}

/* ── D-43 · homologación de la ficha: importe arriba, botón debajo ────── */
@media (max-width:414px){
  .gline .gr{flex-direction:column;align-items:flex-end;gap:5px}
  .gline .gract{order:2}
  .gline .ga{order:1;min-width:0}
}

/* ── D-46 · sheets: la pasada final — más aire, misma plantilla ─────────
   título → subtítulo → contenido → primaria llena → secundarias →
   destructiva roja al pie. El primario idéntico en toda la app. */
#sheet{padding:10px 20px calc(26px + env(safe-area-inset-bottom))}
#sheet .sheet-title{font-size:20px}
#sheet .sheet-sub{font-size:14px;margin-bottom:12px;line-height:1.4}
#sheet .datosbox{padding:4px 14px;margin-bottom:12px}
#sheet .kv{padding:8px 0}
#sheet .opt{padding:12px 4px}
#sheet .field{margin-bottom:12px}
#sheet .sheet-save{padding:14px;font-size:16.5px;margin-top:8px;border-radius:14px}
#sheet .sheet-link{padding:10px}
#sheet .attachbtn{padding:11px;margin-bottom:10px}

/* línea del inquilino: centrada (D-44 punto 2) */
.inqline.centrada{justify-content:center;text-align:center;flex-wrap:wrap;column-gap:5px}

/* ── D-47 · guardia de cambios sin guardar ─────────────────────────────── */
#sheetGuard{position:sticky;bottom:-1px;margin:10px -20px -26px;padding:14px 20px calc(18px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px;z-index:5}
#sheetGuard .sg-txt{font-weight:900;font-size:15px;text-align:center}
#sheetGuard .sg-seguir{background:var(--brand);color:#fff;font-weight:900;font-size:15px;padding:12px;border-radius:12px}
#sheetGuard .sg-descartar{color:var(--red);font-weight:800;font-size:13.5px;padding:6px}
#app.dark #sheetGuard{background:#1E1E1E;border-color:#333}

/* puntito sutil de avisos sin ver (D-47) — nada que titile */
.avdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.75;margin-left:2px;vertical-align:middle}

/* ── D-48 · Ajustes: mail compacto con copiar · estilos dentro de escala ── */
.cfgmail{display:flex;align-items:center;gap:8px;text-align:left}
.cfgmail-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.cfgmail-copy{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-weight:900;font-size:12px;color:var(--brand);background:var(--brand-soft);border-radius:9px;padding:6px 10px}
/* "Ver la foto de la boleta": secundaria NEUTRA como todas (el verde, afuera) */
.attachbtn.on{border-color:var(--line2);color:var(--ink);background:transparent}
.attachbtn.on svg{color:var(--brand)}
#app.dark .attachbtn.on{border-color:#454545;color:var(--ink);background:transparent}

/* ── D-49 · panel de debug del arranque (?debug=1) ─────────────────────── */
#bootPanel{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:80;background:rgba(20,20,20,.92);color:#9FE8A8;font:11px/1.5 ui-monospace,monospace;padding:10px 12px;border-radius:12px;pointer-events:none}

/* ── D-51 · bloque de acciones secundarias: más callado, mismo orden ───── */
.accsec{margin-top:10px;border-top:1px solid var(--line);padding-top:2px}
.accsec .opt{padding:10px 4px;font-size:14px}
.accsec .opt small{display:block;font-weight:700;color:var(--muted);font-size:11.5px;margin-top:2px}
.accsec .baja-link{margin-top:4px}
#cargarOpc .attachbtn{margin-bottom:8px}
.kv .lnk{font-size:12px;font-weight:900}

/* ── D-52 · guardia de plausibilidad (misma familia que sheetGuard) ────── */
#plataGuard{position:sticky;bottom:-1px;margin:10px -20px -26px;padding:14px 20px calc(18px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px;z-index:6}
#plataGuard .sg-txt{font-weight:800;font-size:14px;text-align:center;line-height:1.45}
#plataGuard .sg-seguir{background:var(--soft);color:var(--ink);font-weight:900;font-size:14px;padding:11px;border-radius:12px}
#plataGuard .sg-descartar{background:var(--brand);color:#fff;font-weight:900;font-size:15px;padding:12px;border-radius:12px}
#app.dark #plataGuard{background:#1E1E1E;border-color:#333}

/* ── D-52 · Colores: sacar el terror, traer el rosa ─────────────────────
   Rojo fuerte SOLO para lo urgente real y lo destructivo. La deuda de
   arrastre vive en el coral/rosa de la casa; lo vencido, en un amarillo
   más vivo. */
:root{--amber:#E8850C;--amber-soft:#FFF1DE}
.tagmini.debt{background:var(--brand-soft);color:var(--brand)}
.badge.al{background:var(--brand-soft);color:var(--brand)}
.btn-pay.settle{background:var(--brand)}
#app.dark .cta-cuenta .settle,#app.dark .btn-pay.settle{background:var(--brand)}
.debt-head .di{background:var(--brand-soft);color:var(--brand)}
.debt-head .dl,.debt-head .dv{color:var(--brand)}
.due.over{color:var(--amber)}
/* el "vencida · jun" y "venció el N" son urgencia real → amarillo vivo */
.tagmini.venc{background:var(--amber-soft);color:var(--amber);font-weight:900}

/* ── D-52 · Persianas SUAVES: grid-template-rows (sin saltos de frames) ── */
.prop-body,.debt-body,.sumcard .expbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.8,.3,1);max-height:none!important;overflow:hidden}
.prop.open .prop-body,.debt.open .debt-body,.sumcard.open .expbody{grid-template-rows:1fr}
.prop-inner,.debt-inner,.expinner{min-height:0;overflow:hidden}

/* ── D-52 · Toasts a lo ancho, sin quiebres raros ──────────────────────── */
#toast{width:max-content;max-width:min(420px,94vw);white-space:normal;line-height:1.45;text-align:center}

/* banner de versión: entra suave (y no recibe toques los primeros 900 ms) */
#verbanner{animation:verIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes verIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* pantalla del PIN, a la altura del resto */
.pin-olvide{margin-top:18px;font-weight:800;font-size:13.5px;color:var(--brand);padding:8px}

/* ── D-53 · LA PALETA FINAL: el rosa manda ──────────────────────────────
   Coral/rosa: marca, acciones y TODO lo de deuda. Amarillo FUERTE (no
   naranja): atención/vencido. Verde: entra plata. Rojo: SOLO destructivo.
   Ninguna tarjeta de resumen va en rojo sangre. */
:root{--amber:#EBB000;--amber-soft:#FFF7DC}
.sumcard.neg{background:linear-gradient(135deg,#3A3F47,#23262B)}
.sumcard.neg .big,.sumcard.neg .row2 .v{color:#FF8FA3}
#app.dark .sumcard.neg{background:linear-gradient(135deg,#2E3238,#1B1D21)}
.cta-cuenta .settle{background:var(--brand)}
.debt-body .ub i,.cta-cuenta .ub i{background:var(--brand)!important}
.due.over{color:var(--amber)}

/* ── D-53 · Listados a lo ancho: nombre 1 línea, meta 1 línea ──────────── */
.row .t{white-space:nowrap;display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:hidden;text-overflow:ellipsis}
.gline .gn{white-space:nowrap;display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:hidden;text-overflow:ellipsis}
.row .s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gline .gd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.row .amt{min-width:0}
.gline .ga{min-width:0}
/* Dólar hoy alineado con la vara de las demás tarjetas */
#usdBox .prop-head{padding:13px 14px}
#usdBox .prop-head .ic{width:40px;height:40px}

/* ── D-54 · la tarjeta del aviso ×1000: prolija, targets de 44pt ───────── */
.avisoMil{padding:12px 2px;border-bottom:1px solid var(--line)}
.avisoMil:last-child{border-bottom:none}
.avisoMil .am-t{display:flex;align-items:center;gap:7px;font-weight:900;font-size:14.5px;margin-bottom:8px}
.avisoMil .am-t svg{color:var(--amber);flex:0 0 auto}
.avisoMil .am-kv{display:flex;justify-content:space-between;align-items:baseline;padding:3px 2px;font-size:14px}
.avisoMil .am-kv span{color:var(--muted);font-weight:700}
.avisoMil .am-kv b{font-size:15.5px}
.avisoMil .am-acts{display:flex;gap:8px;margin-top:10px}
.avisoMil .am-fix{flex:1.4;min-height:44px;background:var(--brand);color:#fff;font-weight:900;font-size:13.5px;border-radius:12px;padding:10px 8px}
.avisoMil .am-ok{flex:1;min-height:44px;background:transparent;border:1.5px dashed var(--line2);color:var(--ink);font-weight:800;font-size:13px;border-radius:12px;padding:10px 8px}
#app.dark .avisoMil .am-ok{border-color:#454545}

/* ── D-55 · EL DATO COMPLETO MANDA (pisa la regla de dos líneas) ─────────
   La información se lee ENTERA, siempre: importes, fechas y estados jamás
   se cortan — si hace falta una línea más, se hace. El ellipsis queda
   SOLO para decoración (nombres kilométricos en el título). */
.row .s{white-space:normal;overflow:visible;text-overflow:clip;display:flex;flex-wrap:wrap;row-gap:2px;line-height:1.35}
.gline .gd{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.mv .ms{white-space:normal;overflow:visible;line-height:1.35}
.avisoMil .am-t{flex-wrap:wrap;white-space:normal}
.avisoMil .am-kv b{white-space:normal;text-align:right}
/* títulos = nombres (decoración): una línea con puntos suspensivos */
.row .t,.gline .gn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── D-55 · ROSA CON BLANCO: los números principales de tarjeta, BLANCOS ─ */
.sumcard .big,.sumcard.neg .big,.sumcard .row2 .v{color:#fff}
.sumcard.neg .row2 .v{color:#fff}
/* oscuro: el coral acentúa sobre fondos que contrastan de verdad */
#app.dark .tagmini.debt,#app.dark .badge.al{background:#3A1B25;color:#FF8FA3}
#app.dark .debt-head .di{background:#3A1B25;color:#FF8FA3}
#app.dark .debt-head .dl,#app.dark .debt-head .dv{color:#FF8FA3}
#app.dark .cfga,#app.dark .kv .lnk,#app.dark .pin-olvide{color:#FF8FA3}
#app.dark .avisoMil .am-kv b.money{color:#EDEDED}
#app.dark .cfgmail-copy{background:#3A1B25;color:#FF8FA3}
#app.dark .sumcard .big,#app.dark .sumcard .row2 .v,#app.dark .sumcard.neg .big{color:#fff}

/* ── D-56 · cerrada = CERRADA: el padding del inner también colapsa ────── */
.prop-inner,.debt-inner,.expinner{transition:padding-top .3s cubic-bezier(.3,.8,.3,1),padding-bottom .3s cubic-bezier(.3,.8,.3,1)}
.prop:not(.open) .prop-inner,.debt:not(.open) .debt-inner,.sumcard:not(.open) .expinner{padding-top:0!important;padding-bottom:0!important}
/* respuesta al dedo inmediata */
.prop-head,.debt-head,.sumcard,.datos-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ── D-56 · la familia rosa, COMPLETA en las columnas de valores ───────── */
.cta-cuenta .cv{color:var(--brand)}
#app.dark .cta-cuenta .cv{color:#FF8FA3}
.tlrow .tn.neg{color:var(--brand)}
/* botones de columna alineados: mismo eje, mismo ancho visual */
.row .right .btn-pay,.gline .gract .btn-pay,.cta-cuenta .settle{min-width:86px;text-align:center;justify-content:center}

/* ── D-57 · la gramática del resumen ───────────────────────────────────── */
.sumcard .cuentaline{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28);font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.1px}
.sumcard .cuentaline b{font-size:15px;font-weight:900}
.sumcard .sl.nota{justify-content:flex-start;font-size:12.5px;font-weight:800;border-top:1px dashed rgba(255,255,255,.25);margin-top:6px;padding-top:9px}
.sumcard .sl.nota.rosa span{color:#FFC9D6}
.sumcard .sl.nota.gris span{color:rgba(255,255,255,.75)}

/* ── D-57 · mismo eje: numero y boton de la misma columna, centrados entre si ── */
@media (max-width:414px){
  .row .right{align-items:center}
  .row .amt{text-align:center}
  .gline .gr{align-items:center}
  .gline .ga{text-align:center}
}
/* ── D-57 · sheets sin scroll lateral: nada se escapa del ancho ── */
#sheet{overflow-x:clip}
#sheet .sheet-title,#sheet .sheet-sub,#sheet .opt span,#sheet .kv .v{overflow-wrap:anywhere}
#sheet .datosbox,#sheet .field input,#sheet .field select{max-width:100%;min-width:0}

/* ── D-58 · el importe SIEMPRE en el mismo lugar, haya botón o no ──────
 * La columna derecha ancla ARRIBA (el importe a la altura del título del
 * renglón); el botón, cuando existe, va debajo. Sin botón, el importe
 * queda exactamente donde estaría con botón — un solo eje, una sola altura. */
@media (max-width:414px){
  .row{align-items:flex-start}
  .row .ic{margin-top:1px}
  .row .info{padding-top:2px}
  .row .right{align-self:flex-start;padding-top:2px}
  .gline{align-items:flex-start}
  .gline .gic{margin-top:1px}
  .gline .gi{padding-top:3px}
  .gline .gr{align-self:flex-start;padding-top:3px}
  .mv{align-items:flex-start}
  .mv .mic{margin-top:1px}
  .mv .mi{padding-top:2px}
  .mv .mr{padding-top:2px}
}

/* ── D-58 · grid de renglón: íconos más a la izquierda, texto con aire ──
 * El ancho del renglón se reparte mejor: menos padding lateral de la
 * tarjeta, menos gap — todo lo ganado va al texto, que quebraba antes
 * de tiempo. Los íconos se corren ~5px a la izquierda sin tocar el borde. */
.card{padding-left:12px;padding-right:12px}
.row,.gline,.mv{gap:9px}
.row .info,.gline .gi,.mv .mi{min-width:0}

/* ── D-59 · lo vacío se ve vacío: los placeholders no mienten ──────────
 * Un campo vacío es inconfundible: el ejemplo va tenue, fino y en
 * cursiva — jamás con el peso de un dato cargado. */
input::placeholder,textarea::placeholder{color:var(--faint);opacity:.55;font-weight:600;font-style:italic}
#app.dark input::placeholder,#app.dark textarea::placeholder{opacity:.5}

/* ── D-60 · filtros de vencimientos: chips de un toque ─────────────────── */
.vfilters{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 10px;margin:-2px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vfilters::-webkit-scrollbar{display:none}
.vchip{flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--bg);border:1.5px solid var(--line);font-size:12.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.vchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
#app.dark .vchip{background:#242424;border-color:#3a3a3a}
#app.dark .vchip.on{background:var(--brand);border-color:var(--brand)}

/* ── D-60 · pagar ≠ cobrar: cada aviso con su color ────────────────────── */
.badge.pagar{background:var(--brand-soft);color:var(--brand)}
.badge.cobrar{background:var(--green-soft);color:var(--green)}
#app.dark .badge.pagar{background:#3A1B25;color:#FF8FA3}

/* ── D-60 · recordatorio calladito de deuda al pie de A pagar ──────────── */
.deuda-hint{padding:12px 4px 10px;font-size:12.5px;font-weight:800;color:var(--brand);border-top:1px dashed var(--line);cursor:pointer}
.deuda-hint:active{opacity:.6}
#app.dark .deuda-hint{color:#FF8FA3}

/* ── D-60 · el bloque de deuda entra en la regla del eje (D-58) ────────── */
.cta-cuenta .cr{display:flex;flex-direction:column;align-items:center;align-self:flex-start;padding-top:2px;flex:0 0 auto}
.cta-cuenta .cr .settle{min-width:86px;text-align:center;justify-content:center}

/* ── D-60 · registro de actividad, prolijo ─────────────────────────────── */
.act-row{padding:9px 0;border-bottom:1px solid var(--line)}
.act-row:last-child{border-bottom:none}
.act-acc{font-weight:800;font-size:13.5px;line-height:1.35}
.act-meta{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}

/* ── D-60 · pull-to-refresh que se entiende ────────────────────────────── */
#ptr{position:fixed;top:0;left:50%;transform:translate(-50%,0);z-index:60;opacity:0;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:0 6px 20px rgba(0,0,0,.12);pointer-events:none;transition:opacity .15s;width:auto;height:auto}
#ptr .ptr-fl{font-size:15px;font-weight:900;color:var(--brand);transition:transform .12s}
#ptr .ptr-tx{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
#ptr.listo{border-color:var(--brand)}
#ptr.listo .ptr-tx{color:var(--brand)}
#app.dark #ptr{background:#242424;border-color:#3a3a3a}

/* ── D-60 · palabras enteras: los títulos de renglón no se cortan ──────── */
.mv .mt,.gline .gn,.row .info .t{white-space:normal;overflow:visible;text-overflow:clip}

/* ── D-60 · controles nativos legibles en oscuro ───────────────────────── */
#app.dark{color-scheme:dark}
select,input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
#app.dark #sheet select,#app.dark #sheet input{background:#262626;color:var(--ink);border-color:#3a3a3a}
#app.dark #sheet select option{background:#262626;color:#f2f2f2}

/* Cerrar/Cancelar: la MISMA vara en todos los sheets */
#sheet .sheet-link{display:block;width:100%;text-align:center;font-size:14px;font-weight:800;padding:12px 8px}

/* ── D-62 · header de propiedad en 3 líneas: nombre · meta · chips ─────── */
.prop-head .nm{white-space:normal;overflow:visible;text-overflow:clip}
.pbadges{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.pbadges:empty{display:none}
.pbadges .badge{margin:0}

/* ── D-62 · tarjeta de aviso mobile: acciones abajo, a lo ancho ────────── */
.aviso{padding:13px 0;border-bottom:1px solid var(--line)}
.aviso:last-child{border-bottom:none}
.av-top{display:flex;gap:10px;align-items:flex-start}
.av-top .ic{flex:0 0 auto}
.av-tx{flex:1;min-width:0}
.av-t{font-weight:800;font-size:14px;line-height:1.35;white-space:normal}
.av-s{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:3px;line-height:1.45;white-space:normal}
.av-acts{display:flex;gap:8px;margin-top:11px;padding-left:52px}
.av-acts .btn-pay{flex:1;margin:0;min-height:40px;justify-content:center;text-align:center}
.av-acts .btn-pay.av-soft{background:var(--soft);color:var(--ink)}
#app.dark .av-acts .btn-pay.av-soft{background:#2e2e2e;color:#f2f2f2}

/* ── D-62 · pestaña Deudas como lista ──────────────────────────────────── */
.deuda-total{padding:11px 2px;font-size:12.5px;font-weight:800;color:var(--muted);border-bottom:1px solid var(--line)}
.deuda-total b{color:var(--brand)}
.row .amt.deuda{color:var(--brand)}
#app.dark .row .amt.deuda,#app.dark .deuda-total b{color:#FF8FA3}