:root{--goi:#8a5a08;--rei:#b3322b;--gri:#157a3a;--bg:#f5f7fb;--sf:#ffffff;--sf2:#f1f4f9;--bd:#e6e9f0;--bd2:#d6dbe6;--tx:#1e2939;--tx2:#475569;--tx3:#626e80;--gr:#16a34a;--gr2:#e7f6ec;--re:#e0524b;--re2:#fdecea;--bl:#466BDB;--bl2:#eaeefc;--go:#d98a16;--go2:#fcf2e0;--pu:#8b7cf8;--pu2:#efecfd;--br:#466BDB;--br2:#eaeefc;--sw:236px;--r:13px;--rs:9px} *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;height:100vh;overflow:hidden;display:flex} /* números tabulares: valores alinham em colunas e não "dançam" ao mudar */ .pz-val,.pz-sval,.mv,.cli-kpi-v,.fin-r,.cli-dl-val,.cli-hero-res .v,.pz-big{font-variant-numeric:tabular-nums} .sidebar{width:var(--sw);min-width:var(--sw);background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100vh;overflow:hidden} .sb-brand{padding:20px 18px 16px;border-bottom:1px solid var(--bd)} .sb-logo{font-size:15px;font-weight:700;letter-spacing:.03em;color:var(--tx)} .sb-sub{font-size:11px;color:var(--tx3);margin-top:2px} .sb-nav{flex:1;padding:12px 8px;overflow-y:auto} .nav-lbl{font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;padding:8px 10px 4px} .nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--rs);cursor:pointer;color:var(--tx2);font-size:13px;transition:all .15s;margin-bottom:2px;user-select:none;border:none;background:none;width:100%;text-align:left} .nav-item:hover{background:var(--sf2);color:var(--tx)} .nav-item.active{background:var(--gr2);color:var(--gr);font-weight:500} .nav-item svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8} .nb{margin-left:auto;background:var(--gr);color:#000;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;min-width:18px;text-align:center} .sb-foot{padding:12px 16px;border-top:1px solid var(--bd);font-size:11px;color:var(--tx3);display:flex;gap:8px;align-items:center} .main{flex:1;height:100vh;overflow-y:auto;display:flex;flex-direction:column} .topbar{padding:14px 28px;border-bottom:1px solid var(--bd);background:var(--sf);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;flex-shrink:0} .tb-title{font-size:16px;font-weight:600} .tb-sub{font-size:12px;color:var(--tx3);margin-top:1px} .screen{display:none;flex:1;padding:24px 28px} .screen.active{display:block} .card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:18px} .card+.card{margin-top:14px} .ct{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px} .mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px} .mrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} .metric{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px} .ml{font-size:11px;color:var(--tx3);margin-bottom:5px} .mv{font-size:20px;font-weight:600} .mv.gr{color:var(--gr)}.mv.re{color:var(--re)}.mv.bl{color:var(--bl)}.mv.go{color:var(--go)}.mv.pu{color:var(--pu)} .fg{display:flex;flex-direction:column;gap:5px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .full{grid-column:1/-1} label{font-size:12px;color:var(--tx2);font-weight:500} input,select,textarea{background:var(--sf2);border:1px solid var(--bd2);border-radius:var(--rs);color:var(--tx);padding:7px 10px;font-size:13px;font-family:inherit;transition:border .15s;outline:none;width:100%} input:focus,select:focus,textarea:focus{border-color:var(--gr)} textarea{resize:vertical;min-height:56px} select option{background:var(--sf2)} .btn{padding:7px 14px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit} .btn-p{background:var(--gr);color:#000}.btn-p:hover{background:#00e6ac} .btn-s{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd2)}.btn-s:hover{background:var(--bd);color:var(--tx)} .btn-d{background:var(--re2);color:var(--re)}.btn-d:hover{background:var(--re);color:#fff} .btn-g{background:transparent;color:var(--tx3);border:1px solid var(--bd)}.btn-g:hover{color:var(--tx);border-color:var(--bd2)} .btn-sm{padding:4px 10px;font-size:12px} .brow{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap} /* DIAGNÓSTICO */ .ds{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:14px} .dsh{padding:11px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;border-bottom:1px solid var(--bd)} .dsh:hover{background:var(--sf2)} .dsn{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0} .dst{font-size:13px;font-weight:600;flex:1} .chv{transition:transform .2s;color:var(--tx3)} .chv.open{transform:rotate(180deg)} .dsb{padding:14px 16px;display:none;background:var(--sf)} .dsb.open{display:block} .qb{margin-bottom:14px}.qb:last-child{margin-bottom:0} .qt{font-size:13px;color:var(--tx);margin-bottom:3px;font-weight:500} .qh{font-size:11px;color:var(--tx3);margin-bottom:7px;font-style:italic} .vrow{display:flex;gap:8px;margin-top:5px} .vo{flex:1;padding:9px;border-radius:var(--rs);border:1px solid var(--bd2);text-align:center;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;background:var(--sf2);color:var(--tx2)} .vo.sg{background:var(--gr2);border-color:var(--gr);color:var(--gr)} .vo.so{background:var(--go2);border-color:var(--go);color:var(--go)} .vo.sr{background:var(--re2);border-color:var(--re);color:var(--re)} /* CLIENTE LIST */ .cl-list{display:flex;flex-direction:column;gap:8px} .cr{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .15s} .cr:hover{border-color:var(--bd2)} .cav{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0} .cn{font-size:14px;font-weight:600} .cm{font-size:12px;color:var(--tx3);margin-top:1px} .cst{margin-left:auto;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600} .st-at{background:var(--gr2);color:var(--gr)}.st-pr{background:var(--bl2);color:var(--bl)}.st-in{background:var(--bd);color:var(--tx3)}.st-no{background:var(--re2);color:var(--re)} .empty{text-align:center;padding:50px 20px;color:var(--tx3)} .ei{font-size:36px;margin-bottom:10px;opacity:.4} .et{font-size:15px;color:var(--tx2);margin-bottom:5px} /* TABS */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:18px;overflow-x:auto} .tab{padding:8px 14px;font-size:13px;cursor:pointer;color:var(--tx3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;font-weight:500;white-space:nowrap} .tab:hover{color:var(--tx2)} .tab.active{color:var(--gr);border-bottom-color:var(--gr)} .tp{display:none}.tp.active{display:block} /* TABLES */ .tbl{width:100%;border-collapse:collapse} .tbl th{text-align:left;font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:7px 9px;border-bottom:1px solid var(--bd);white-space:nowrap} .tbl td{padding:8px 9px;border-bottom:1px solid var(--bd);font-size:13px;vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--sf2)} .pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;cursor:default} .pg{background:var(--gr2);color:var(--gr)}.pr{background:var(--re2);color:var(--re)}.pb{background:var(--bl2);color:var(--bl)}.pgo{background:var(--go2);color:var(--go)}.ppu{background:var(--pu2);color:var(--pu)} /* ACOMP HEADER */ .ah{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:18px 22px;margin-bottom:18px;display:flex;align-items:center;gap:18px} .aav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0} .an{font-size:17px;font-weight:600} .am{font-size:12px;color:var(--tx3);margin-top:2px} .as{margin-left:auto;display:flex;gap:20px} .asv{text-align:right} .asvv{font-size:17px;font-weight:600} .asvl{font-size:11px;color:var(--tx3);margin-top:1px} .cw{position:relative;height:220px} .cw2{position:relative;height:180px} /* IMPORT ZONE */ .iz{border:1.5px dashed var(--bd2);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:all .2s;background:var(--sf2)} .iz:hover,.iz.dov{border-color:var(--gr);background:var(--gr2)} .izi{font-size:28px;margin-bottom:8px;opacity:.5} .izt{font-size:14px;color:var(--tx2);margin-bottom:3px} .izs{font-size:12px;color:var(--tx3)} /* TOAST */ .toast{position:fixed;bottom:22px;right:22px;background:var(--sf);border:1px solid var(--bd2);border-radius:var(--r);padding:11px 16px;font-size:13px;color:var(--tx);z-index:9999;transform:translateY(70px);opacity:0;transition:all .25s;pointer-events:none} .toast.show{transform:translateY(0);opacity:1} .toast.success{border-left:3px solid var(--gr)} .toast.error{border-left:3px solid var(--re)} /* MODALS */ .mo{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:none;align-items:center;justify-content:center} .mo.open{display:flex} .md{background:var(--sf);border:1px solid var(--bd2);border-radius:var(--r);width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:22px;position:relative} .md-lg{width:680px} .mdt{font-size:16px;font-weight:600;margin-bottom:18px} .mc{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--tx3);cursor:pointer;font-size:20px;line-height:1} .mc:hover{color:var(--tx)} /* a engrenagem ao lado do × (Meus dados → Personalizar a Início) */ .mc-eng{right:46px;top:15px;display:inline-flex;align-items:center;justify-content:center} .mc-eng svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ─── Personalizar a Início: a lista de quadros e o criador de indicador ─ */ .iniq-list{display:flex;flex-direction:column;gap:6px;margin-top:14px} .iniq-row{display:flex;gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--bd);border-radius:10px;cursor:pointer;transition:background .15s,opacity .15s} .iniq-row:hover{background:var(--sf2)} .iniq-row:has(input:not(:checked)){opacity:.55} .iniq-row:has(input:not(:checked)) .iniq-thumb{filter:grayscale(1)} .iniq-row input{width:auto;accent-color:var(--gr);flex-shrink:0} /* a miniatura: o desenho esquemático do quadro (cliQuadroThumb, inicio.js) */ .iniq-thumb{width:66px;height:44px;flex-shrink:0;border:1px solid var(--bd);border-radius:8px;background:var(--sf);overflow:hidden} .iniq-thumb svg{width:100%;height:100%;display:block} .iniq-txt{display:flex;flex-direction:column} .iniq-row b{font-size:13px;font-weight:600} .iniq-row i{font-style:normal;font-size:12px;color:var(--tx3);line-height:1.45} .iniq-ia{margin-top:18px;border:1px dashed var(--bd2);border-radius:12px;padding:14px} .iniq-ia-t{font-size:13px;font-weight:600;margin-bottom:4px} .iniq-ia-t .spark{color:var(--pu)} .iniq-ia-s{font-size:12px;color:var(--tx3);line-height:1.5;margin-bottom:10px} .iniq-ia-row{display:flex;gap:8px} .iniq-ia-row input{flex:1} .iniq-inds{display:flex;flex-direction:column;gap:6px;margin-top:12px} .iniq-ind{display:flex;align-items:flex-start;gap:8px;background:var(--sf2);border:1px solid var(--bd);border-radius:10px;padding:8px 10px} .iniq-ind span{flex:1;display:flex;flex-direction:column} .iniq-ind b{font-size:12.5px;font-weight:600} .iniq-ind i{font-style:normal;font-size:11.5px;color:var(--tx3)} .iniq-ind-x{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:16px;line-height:1;padding:2px} .iniq-ind-x:hover{color:var(--re)} /* o quadro "Seus indicadores" na Início */ .ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .ind-card{background:var(--sf2);border:1px solid var(--bd);border-radius:12px;padding:12px 14px} .ind-t{font-size:11.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em} .ind-v{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:4px;font-variant-numeric:tabular-nums} .ind-s{font-size:11.5px;color:var(--tx3);margin-top:4px;line-height:1.45} /* SALDO DIÁRIO */ .mn-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px} .mn-nav button{background:var(--sf2);border:1px solid var(--bd2);border-radius:var(--rs);color:var(--tx2);padding:5px 14px;cursor:pointer;font-size:13px;font-family:inherit;transition:all .15s} .mn-nav button:hover{color:var(--tx);border-color:var(--bd)} .mn-nav span{font-size:15px;font-weight:600;min-width:140px;text-align:center} .sd-wrap{overflow-x:auto} .sd-tbl{border-collapse:collapse;width:100%} .sd-tbl th{font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:7px 12px;border-bottom:1px solid var(--bd);background:var(--sf);white-space:nowrap} .sd-tbl th:first-child{width:36px;text-align:center} .sd-tbl th:nth-child(2){width:18%}.sd-tbl th:nth-child(3){width:18%}.sd-tbl th:nth-child(4){width:18%}.sd-tbl th:last-child{width:20%} .sd-tbl th:not(:first-child){text-align:right} .sd-tbl td{padding:5px 8px;border-bottom:1px solid var(--bd);font-size:12px;font-family:'SF Mono','Fira Code',monospace} .sd-tbl td:first-child{text-align:center;color:var(--tx3);font-weight:600;font-size:11px;font-family:inherit;padding:5px 4px} .sd-tbl td:not(:first-child){text-align:right} .sd-tbl tr:hover td{background:var(--sf2)} .sd-tbl tr.has-data td{background:rgba(255,255,255,.02)} .sd-tbl tr.fut td{color:var(--tx3)} .sd-tbl .t-foot td{background:var(--sf2);font-weight:700;border-top:2px solid var(--bd2)} .sd-ent{color:var(--gr)} .sd-sai{color:var(--re)} .sd-dia{color:var(--bl)} .sd-sal-p{color:var(--gr);font-weight:600} .sd-sal-n{color:var(--re);font-weight:600} /* TOOLTIP */ .tip{position:fixed;background:var(--sf);border:1px solid var(--bd2);border-radius:var(--r);padding:10px 14px;font-size:12px;z-index:5000;pointer-events:none;opacity:0;transition:opacity .15s;min-width:240px;max-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.5)} .tip.show{opacity:1} .tip-row{display:flex;justify-content:space-between;gap:16px;padding:3px 0;border-bottom:1px solid var(--bd)} .tip-row:last-child{border-bottom:none} .tip-desc{color:var(--tx2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tip-val{font-weight:600;white-space:nowrap} .tip-head{font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} /* GRID */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .shr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .divider{border:none;border-top:1px solid var(--bd);margin:16px 0} .mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}.mb18{margin-bottom:18px} .si{position:relative}.si input{padding-left:30px} .si::before{content:'⌕';position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:16px;pointer-events:none} .pt-list{display:flex;flex-direction:column;gap:7px} /* CONCILIATION */ .conc-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rs);padding:12px 14px;margin-bottom:8px;display:grid;gap:0} .conc-card.matched{border-left:3px solid var(--gr)} .conc-card.unmatched{border-left:3px solid var(--go)} .conc-card.missing{border-left:3px solid var(--re)} .conc-row{display:flex;align-items:center;gap:10px;font-size:13px} .conc-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap} .conc-badge-ext{background:var(--bl2);color:var(--bl)} .conc-badge-rec{background:var(--gr2);color:var(--gr)} .conc-badge-man{background:var(--pu2);color:var(--pu)} .conc-divider{height:1px;background:var(--bd);margin:8px 0} .conc-pill{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px} .match-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0} .conc-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px} .conc-val{font-family:monospace;font-weight:600;white-space:nowrap} .pt-item{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;background:var(--sf2);border-radius:var(--rs);font-size:13px} .pt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px} /* CARTÃO */ .cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:18px} .cc{border-radius:14px;padding:20px;cursor:pointer;transition:transform .15s;min-height:130px;display:flex;flex-direction:column;justify-content:space-between} .cc:hover{transform:translateY(-2px)} .cc-nm{font-size:15px;font-weight:700;color:#fff} .cc-bd{font-size:12px;color:rgba(255,255,255,.65);margin-top:3px} .cc-pts{font-size:11px;color:rgba(255,255,255,.5);margin-top:6px} .cc-fat{font-size:19px;font-weight:700;color:#fff} .cc-fat-l{font-size:11px;color:rgba(255,255,255,.65)} /* INLINE EDIT */ .cat-pill-btn{cursor:pointer;border:none;font-family:inherit;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px} .cat-pill-btn:hover{filter:brightness(1.2)} /* CATEGORIA MANAGER */ .cat-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)} .cat-row:last-child{border-bottom:none} .cat-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0} /* PONTOS */ .pt-list{display:flex;flex-direction:column;gap:7px} /* ════════ BMO Pessoal — skin overrides (Onda 0) ════════ */ .btn-p{background:var(--br);color:#fff}.btn-p:hover{background:#3f5fe6} .nb{background:var(--br);color:#fff} input:focus,select:focus,textarea:focus{border-color:var(--br);box-shadow:0 0 0 3px var(--br2)} .tab.active{color:var(--br);border-bottom-color:var(--br)} .iz:hover,.iz.dov{border-color:var(--br);background:var(--br2)} .mo{background:rgba(16,24,40,.5)} .card,.metric{box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05)} .toast{box-shadow:0 10px 30px rgba(16,24,40,.18)} /* sidebar navy BMO */ .sidebar{background:#1b2740;border-right:1px solid #26334d} .sb-brand{border-bottom:1px solid #2a3858} .sb-logo{color:#fff;display:flex;align-items:center;gap:9px;font-size:17px;letter-spacing:-.3px} .sb-logo svg{width:24px;height:24px;flex-shrink:0} .sb-sub{color:#93a1c0} .nav-lbl{color:#64748f} .nav-item{color:#b8c2d8} .nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .nav-item.active{background:#28406e;color:#fff;font-weight:600;border:1px solid #3a5891} .sb-foot{border-top:1px solid #2a3858;color:#93a1c0} .sb-foot .btn-g{color:#b8c2d8;border-color:#2a3858} .sb-foot .btn-g:hover{color:#fff;border-color:#41527a} .topbar{background:#fff} /* scrollbars */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#cdd5e2;border-radius:8px} ::-webkit-scrollbar-track{background:transparent} .sidebar ::-webkit-scrollbar-thumb{background:#2f3e5e} /* ════ Dois shells ════ */ body{display:block;height:100vh;overflow:hidden} #internal-shell{display:flex;width:100%;height:100vh;overflow:hidden} #client-shell{display:flex;width:100%;height:100vh;overflow:hidden;background:#eef2f9} /* ════ Sidebar premium do cliente ════ */ .cli-sb{width:248px;min-width:248px;height:100vh;display:flex;flex-direction:column; background:linear-gradient(180deg,#1b2740 0%,#16213a 60%,#121b30 100%);color:#fff;overflow:hidden} .cli-brand{padding:24px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)} .cli-brand .bn{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.3px} .cli-brand .bn svg{width:26px;height:26px} .cli-brand .bs{font-size:11px;color:#8fa0c2;margin-top:6px;letter-spacing:.02em} .cli-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px} .cli-nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:none; background:none;color:#aeb9d4;font-size:14px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:.15s;font-family:inherit} .cli-nav-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0} .cli-nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .cli-nav-item.active{background:linear-gradient(90deg,#466BDB,#5B7DE8);color:#fff;box-shadow:0 6px 16px rgba(70,107,219,.35)} .cli-foot{padding:16px 22px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#7e8eb0;letter-spacing:.04em} /* ════ Main do cliente ════ */ .cli-main{flex:1;height:100vh;overflow-y:auto;background:#eef2f9} .cli-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between; padding:16px 32px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f3} .cli-id{display:flex;align-items:center;gap:13px} .cli-id-btn{display:flex;align-items:center;gap:13px;background:none;border:none;padding:0;font-family:inherit;text-align:left;cursor:pointer;border-radius:10px} .cli-id-btn:hover .cli-name{color:#466BDB} .perfil-md{width:620px} .cli-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#466BDB,#7c5cff);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} .cli-name{font-size:15px;font-weight:700;color:#1b2740} .cli-meta{font-size:12px;color:#64748b;margin-top:1px} .cli-top-r{display:flex;align-items:center;gap:14px} .cli-mon{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f3;border-radius:10px;padding:5px 8px} .cli-mon button{border:none;background:none;cursor:pointer;color:#466BDB;font-size:14px;padding:2px 6px;border-radius:6px} .cli-mon button:hover{background:#eef2fe} .cli-mon span{font-size:13px;font-weight:600;color:#1b2740;min-width:96px;text-align:center} /* filtro de período: os modos (Mês/Trimestre/Ano/Personalizado/Todo o período) e, ao lado, o navegador do modo ativo — setas, dois campos de mês ou só o texto do intervalo */ .cli-per{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .cli-per .cli-period{margin-bottom:0;gap:4px} .cli-per .cli-period button{padding:6px 11px;font-size:12px} .cli-per-cst{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f3;border-radius:10px;padding:4px 8px} /* 112px é o menor que ainda mostra "mm/aaaa" inteiro; na largura natural (155px) os dois campos empurravam a barra do topo para duas linhas */ .cli-per-cst input{width:112px;border:1px solid #e2e8f3;border-radius:8px;padding:4px 7px;font-size:12.5px;color:#1b2740;background:#fff;font-family:inherit} .cli-per-cst span{font-size:12px;color:#64748b} .cli-per-all{font-size:13px;font-weight:600;color:#1b2740;background:#fff;border:1px solid #e2e8f3;border-radius:10px;padding:7px 12px} .cli-demo{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em} .cli-demo select{border:1px solid #e2e8f3;border-radius:9px;padding:6px 9px;font-size:13px;color:#1b2740;background:#fff;width:auto} .cli-internal-btn{border:1px dashed #c3cde2;background:#fff;color:#64748b;font-size:12px;padding:7px 12px;border-radius:9px;cursor:pointer} .cli-internal-btn:hover{border-color:#466BDB;color:#466BDB} #cli-content{padding:28px 32px 60px;max-width:1180px} /* a conciliação é a tela mais densa: com a lista na página, o miolo usa a tela inteira em vez do limite de 1180px — assim nome, categoria e mês do gasto cabem na MESMA faixa e a linha não precisa se dobrar */ #cli-content:has(.fcl-list){max-width:1560px} /* a Início em duas colunas pede mais largura que o texto corrido: em 1180px cada coluna ficaria com ~565px, e o mapa de calor de ~27 semanas viraria uma fileira de pontinhos */ #cli-content:has(.cli-ini2){max-width:1400px} .cli-pageh{margin-bottom:22px} .cli-pageh h2{font-size:24px;font-weight:700;color:#1b2740;letter-spacing:-.4px} .cli-pageh p{font-size:14px;color:#64748b;margin-top:6px;max-width:680px;line-height:1.55} /* hero */ .cli-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px; background:linear-gradient(120deg,#1b2740,#28406e);border-radius:20px;padding:26px 30px;color:#fff;box-shadow:0 12px 30px rgba(27,39,64,.18)} .cli-hello{font-size:23px;font-weight:700;letter-spacing:-.4px} .cli-hero-sub{font-size:13.5px;color:#b9c6e4;margin-top:4px} .cli-hero-res{text-align:right;padding:10px 18px;border-radius:14px;background:rgba(255,255,255,.1)} .cli-hero-res .l{font-size:11px;color:#c3cee8;text-transform:uppercase;letter-spacing:.08em} .cli-hero-res .v{font-size:26px;font-weight:800;margin-top:2px} .cli-hero-res.pos .v{color:#6ee7a8}.cli-hero-res.neg .v{color:#ff9d96} /* ═══ Topo: saldo dos bancos e para onde o dinheiro foi ═══ O topo virou duas faixas empilhadas (saudação+saldo em cima, gastos embaixo), então o .cli-hero deixa de centralizar em linha. */ .cli-hero{flex-direction:column;align-items:stretch} .cli-hero-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .cli-hero-sub2{font-size:10.5px;color:#c3cee8;margin-top:3px;text-transform:none;letter-spacing:0} .cli-hero-dir{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto} .cli-hero-bancos{display:flex;gap:10px;flex-wrap:wrap} .cli-hb{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px; background:rgba(255,255,255,.09);min-width:132px} .cli-hb-t{display:flex;flex-direction:column;line-height:1.25;min-width:0} .cli-hb-t span{font-size:11px;color:#c3cee8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px} .cli-hb-t b{font-size:14px;font-weight:700} .cli-hero-gastos{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)} /* ═══ "Para onde foi": o topo de Resultado › Categorias, no da Início ═══ Três colunas — o total com o seletor competência × caixa, o donut, e as linhas do eixo. Elas embrulham em vez de encolher: o subtítulo delas é uma frase inteira ("12 categorias · 45% do gasto · o que você precisa pagar para viver"), e espremida em terço de tela ela sairia cortada no meio. */ /* GRADE, e não flex: o donut tem de cair no centro do cartão, e num flex ele caía onde a soma das larguras deixasse — as linhas do eixo são o dobro da largura do número à esquerda, então o meio da FILA nunca é o meio do CARTÃO. Com `1fr auto 1fr` as duas colunas de fora têm sempre a mesma largura, e o donut fica centrado por construção, seja qual for o conteúdo dos lados. O número à esquerda continua colado na margem do cartão, alinhado com o "Olá, fulano" da linha de cima — é o mesmo eixo de leitura. */ .cli-hgx{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px} .cli-hgx-l{min-width:0} .cli-hgx-r{min-width:0;display:flex;flex-direction:column;gap:4px} /* o .pz-donut nasce com `margin:0 auto` — na aba Categorias ele é o do meio de um space-between. Aqui quem centra é a grade */ .cli-hgx .pz-donut{margin:0} /* a linha do eixo aqui não separa vizinhas com um fio (lá ela é item de uma lista; aqui são duas ou três soltas), e o valor cai para a linha de baixo, alinhado com o texto e não com o ícone */ /* `.pz-row.cli-hgrupo` e não `.cli-hgrupo` sozinho: as duas classes têm a mesma especificidade e o .pz-row é declarado MAIS ABAIXO neste arquivo — sozinha, a classe daqui perdia o empate e a linha ficava com o padding e o fio da lista do Resultado */ .pz-row.cli-hgrupo{border-top:none;border-radius:12px;padding:8px 10px;flex-wrap:wrap; column-gap:11px;row-gap:3px} .cli-hgrupo .pz-ico{width:34px;height:34px;border-radius:11px;font-size:16px} .cli-hgrupo .pz-name-s{white-space:normal} /* base ZERO, e não `auto`: a linha embrulha, e com base automática o texto do meio media o próprio max-content — bastava um subtítulo mais longo (o "+R$ 1.500 acima do planejado") para ele não caber ao lado do ícone e cair sozinho numa terceira linha, deixando a linha 37px mais alta que as vizinhas. Com base 0 o ícone e o texto dividem sempre a primeira linha e o valor sempre cai para a segunda. */ .cli-hgrupo .pz-info{flex:1 1 0;min-width:0} /* o valor cai para a linha de baixo alinhado com o TEXTO, não com o ícone — e a barra tem teto: solta num terço de tela larga ela virava um trilho de meio metro, sem nada para comparar do lado */ .cli-hgrupo .pz-right{width:100%;margin-left:0;padding-left:45px;gap:12px} .cli-hgrupo .pz-bar{flex:1;width:auto;max-width:220px} /* no celular as três viram uma pilha. `width:100%` não bastava: item de flex com flex-basis auto ainda encolhe, e a coluna das linhas ficava espremida ao lado do donut, com 160px e três linhas de 140px de altura. */ @media(max-width:760px){ .cli-hgx{grid-template-columns:1fr;gap:16px} .cli-hgx .pz-donut{margin:0 auto} } /* A barra empilhada: um trilho só, repartido. `overflow:hidden` com raio nas pontas faz os pedaços das extremidades acompanharem a curva sem cada um precisar de raio próprio. */ .gx-emp{display:flex;height:26px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.1)} .gx-emp-s{display:block;height:100%;min-width:2px;transition:filter .12s} .gx-emp-s:hover{filter:brightness(1.18)} .gx-emp.gx-click{cursor:pointer} .gx-emp.gx-click:focus-visible{outline:2px solid var(--br);outline-offset:2px} /* O balão do hover. `position:fixed` para escapar do overflow:hidden da barra; `pointer-events:none` para ele nunca roubar o mouse do próprio segmento — senão o ponteiro entra no balão, dispara mouseout no segmento, o balão some, o ponteiro volta ao segmento, e a coisa pisca sem parar. */ .gx-tip{position:fixed;top:0;left:0;z-index:2000;pointer-events:none; display:grid;grid-template-columns:auto auto;gap:2px 14px;align-items:baseline; padding:9px 12px;border-radius:10px;background:var(--sf);border:1px solid var(--bd); box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .12s;white-space:nowrap} .gx-tip.on{opacity:1} .gx-tip-n{font-size:12px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:7px} .gx-tip-n i{width:9px;height:9px;border-radius:3px;flex:none} .gx-tip-v{font-size:13px;font-weight:700;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums} .gx-tip-p{grid-column:1/-1;font-size:11px;color:var(--tx2)} /* ─── Grade de gastos: calendário (coluna = semana, linha = dia da semana) ── Os cinco tons são tokens (--hm0..--hm4) e não valores fixos: o app tem dois temas, e a rampa que funciona sobre branco vira mancha preta sobre preto. A célula HACHURADA é dia fora da janela: o pedaço da primeira semana antes do início e os dias que ainda não chegaram. Ela tem de ser visivelmente diferente do nível 0, que é "o dia passou e não houve gasto" — pintar as duas igual faria buraco de calendário parecer economia. */ /* A RAMPA É VERMELHA, e não azul: o que a grade mede é GASTO, e no resto do app dinheiro que sai é vermelho (--re) de ponta a ponta — o valor da linha do caixa, a barra estourada do orçamento, o selo "acima do ritmo". Em azul, o único quadro em que o gasto aparecia dia a dia era também o único em que ele não parecia gasto: mancha escura lia-se como intensidade neutra. O NÍVEL 0 fica quase branco, com um fio de calor — ele é "o dia passou e não houve gasto", e precisa continuar sendo o piso da rampa, não uma cor à parte. Já a HACHURA (--hmf/--hmfl) continua CINZA de propósito: ela é "fora do período", não um nível a menos de gasto, e tingi-la de vermelho colocaria o dia que nem chegou dentro da mesma escala. */ :root{--hm0:#f7eceb;--hm1:#fbcfcb;--hm2:#f39a92;--hm3:#e0524b;--hm4:#a82f29; --hmf:#eef1f7;--hmfl:#d3d9e6} .gx-gr{display:flex;flex-direction:column;gap:4px} .gx-gr-corpo{display:grid;grid-template-columns:26px 1fr;gap:4px;align-items:center} .gx-gr-rot{font-size:10px;font-weight:600;color:var(--tx2);text-align:right} .gx-gr-linha{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px} /* `aspect-ratio` com teto de altura: em seis meses a coluna tem ~20px e a célula sai quadrada, como sempre foi; no mês atual são quatro colunas de ~90px, e sem o teto cada dia viraria um bloco enorme. O teto transforma o quadrado num retângulo deitado — que é a forma de um dia de calendário. */ .gx-gr-c{display:flex;align-items:center;justify-content:center; width:100%;aspect-ratio:1;max-height:34px;border-radius:5px;background:var(--hm0)} .gx-gr-c.n1{background:var(--hm1)}.gx-gr-c.n2{background:var(--hm2)} .gx-gr-c.n3{background:var(--hm3)}.gx-gr-c.n4{background:var(--hm4)} /* o número do dia dentro da célula (só nas grades curtas, ver gxGrade): a cor troca no meio da rampa, senão o algarismo some no tom escuro */ .gx-gr-c>b{font-size:11px;font-weight:600;line-height:1; font-variant-numeric:tabular-nums;color:#8a6360} .gx-gr-c.n1>b{color:#7a2b25} .gx-gr-c.n2>b,.gx-gr-c.n3>b,.gx-gr-c.n4>b{color:#fff} /* hachura em 45°, com a mesma cor do fundo sutil: lê-se como "fora", não como mais um nível da escala */ .gx-gr-c.fora{background:repeating-linear-gradient(45deg, var(--hmf) 0 3px,var(--hmfl) 3px 6px)} .gx-gr-c:hover{outline:2px solid var(--tx);outline-offset:1px} .gx-gr-pe{display:grid;grid-template-columns:26px 1fr;gap:4px} /* o pé nomeia o mês na coluna em que ele começa, então o rótulo se alinha à ESQUERDA da coluna — centralizado, "ago" ficaria no meio da semana em vez de no dia 1. Em coluna estreita ele passa por cima da vizinha (que está vazia, porque só a coluna da virada tem nome). */ .gx-gr-num{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px; font-size:9.5px;color:var(--tx2);text-align:left;white-space:nowrap; font-variant-numeric:tabular-nums} .gx-gr-leg{display:flex;align-items:center;gap:5px;justify-content:flex-end; font-size:10px;color:var(--tx2);margin-top:4px} .gx-gr-leg i{width:11px;height:11px;border-radius:3px;aspect-ratio:auto;max-height:none} .gx-gr-leg-e{margin-left:10px} .gx-gr.gx-click{cursor:pointer} .gx-gr.gx-click:focus-visible{outline:2px solid var(--br);outline-offset:3px} /* telas estreitas: as ~27 colunas de seis meses viram fiapos de 6px, impossíveis de acertar com o dedo — a grade rola no eixo X mantendo tamanho de alvo. A grade com datas (mês atual, quatro ou cinco colunas) fica de fora: lá as colunas cabem inteiras, e forçar 20px encolheria o dia até sumir e ainda daria rolagem sem motivo. */ @media(max-width:760px){ .gx-gr:not(.gx-gr-datas) .gx-gr-linha, .gx-gr:not(.gx-gr-datas) .gx-gr-num{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:20px;overflow-x:auto} } /* ═══ Gráficos (graficos.js) ═══ */ /* height:auto, e não altura fixa: o SVG tem viewBox, então a altura sai da largura pela própria proporção do desenho. Com altura fixa a conta se inverte — a largura passa a ser derivada dela (130px de alto → 459px de largo) e o gráfico vaza para fora do cartão, dando rolagem horizontal ao celular. Como largura e altura escalam pelo mesmo fator, bolinha continua redonda e traço continua com espessura pareja. */ .gx{width:100%;height:auto;display:block;overflow:visible} .gx-zero{stroke:var(--bd);stroke-width:1;stroke-dasharray:3 3} /* ─── A bolhinha do dia apontado (gxLinha, série longa) ─────────────── O balão de valor flutua junto do cursor e não diz em que ponto da linha ele está. O fio vertical marca o dia e a bola marca a altura de cada série naquele dia — é o que fecha a leitura "gastei X onde o plano previa Y". `pointer-events:none` em todos: quem recebe o mouse é só o retângulo da faixa. Sem isso, a bola desenhada por cima do traçado roubaria o hover da faixa que a criou e ela piscaria ao ser tocada. As cores vêm do `fill` inline (a mesma variável do traçado, resolvida nos dois temas); o que o CSS dá é o anel — a cor do cartão em volta da bola, com `paint-order:stroke` para a borda abrir espaço em vez de comer metade do preenchimento, igual ao ponto de hoje. */ .gx-hit-m,.gx-hit-g{opacity:0;pointer-events:none;transition:opacity .08s linear} .gx-hit-g{stroke:var(--bd2);stroke-width:1;stroke-dasharray:3 4; vector-effect:non-scaling-stroke} .gx-hit-m{stroke:var(--sf);stroke-width:2.5;paint-order:stroke; vector-effect:non-scaling-stroke} .gx-hit-m.gx-hit-s{stroke-width:2} .gx-hit:hover .gx-hit-m,.gx-hit:hover .gx-hit-g{opacity:1} @media (prefers-reduced-motion:reduce){.gx-hit-m,.gx-hit-g{transition:none}} /* ═══ Traçado tipo eletrocardiograma (gxLinha com opts.ecg) ═══ O papel e o brilho saem todos de `currentColor` — o SVG recebe `color` igual à cor da linha, então o quadriculado se tinta com o sinal do acumulado e os dois temas ficam resolvidos sem nenhuma cor fixa. Só as opacidades mudam entre claro e escuro: no fundo preto, a mesma opacidade some. */ /* O PAPEL. Quadrinho de 12px dentro do quadrado de 60px, em pixel de tela e não em unidade de viewBox: papel de eletro tem quadradinho de tamanho fixo, e é ele que dá a escala. Fundo do painel, e não do desenho, para o papel preencher a faixa inteira quando a trilha de cards for mais alta que a onda. A cor é a do papel de verdade (rosa), fixa e não a do traço: no eletro o papel é sempre rosa e a caneta é que muda. Com `currentColor` aqui, um mês positivo pintaria a folha inteira de verde. */ .gx-ecg{background-color:#fffafa;border:1px solid var(--bd);border-radius:12px;padding:10px 12px 5px; display:flex;flex-direction:column; background-image: repeating-linear-gradient(to right,rgba(214,69,60,.20) 0 1px,transparent 1px 60px), repeating-linear-gradient(to bottom,rgba(214,69,60,.20) 0 1px,transparent 1px 60px), repeating-linear-gradient(to right,rgba(214,69,60,.10) 0 1px,transparent 1px 12px), repeating-linear-gradient(to bottom,rgba(214,69,60,.10) 0 1px,transparent 1px 12px)} /* a linha isoelétrica do eletro é contínua; tracejada ela vira "mais uma linha do papel" e some no meio do quadriculado */ .gx-ecg .gx-zero{stroke-dasharray:none;opacity:.5} /* A régua de valores mora sobreposta ao desenho (o .gx-plot é o retângulo do SVG e nada mais). Cada número é uma plaquinha com o fundo do painel: a calha da esquerda é estreita de propósito — em cartão apertado o número avança sobre o quadriculado, e sem o fundo ele ficaria ilegível em cima da grade. */ .gx-plot{position:relative} .gx-ecg-y{position:absolute;inset:0;pointer-events:none} .gx-ecg-y span{position:absolute;left:2px;transform:translateY(-50%); font-size:9.5px;font-weight:600;line-height:1;color:var(--tx3);white-space:nowrap; background:#fffafa;padding:2px 3px;border-radius:3px;font-variant-numeric:tabular-nums} .gx-ecg-ref{stroke:currentColor;stroke-width:1;opacity:.3;stroke-dasharray:1 5} /* drop-shadow sem cor usa currentColor: o brilho acompanha a cor do traço */ .gx-ecg-t{filter:drop-shadow(0 0 2px)} .gx-ecg-hoje{filter:drop-shadow(0 0 4px)} /* transform-box:fill-box para o scale girar em volta da própria bolinha, e não do canto do SVG (padrão em SVG, que jogaria o halo para fora da tela) */ .gx-ecg-blip{transform-box:fill-box;transform-origin:center; animation:gx-blip 1.6s cubic-bezier(0,.55,.45,1) infinite} @keyframes gx-blip{0%{transform:scale(.7);opacity:.5}70%,100%{transform:scale(3.4);opacity:0}} @media(prefers-reduced-motion:reduce){.gx-ecg-blip{display:none}} html[data-theme=dark] .gx-ecg{background-color:#080606;border-color:#242424; background-image: repeating-linear-gradient(to right,rgba(240,132,124,.26) 0 1px,transparent 1px 60px), repeating-linear-gradient(to bottom,rgba(240,132,124,.26) 0 1px,transparent 1px 60px), repeating-linear-gradient(to right,rgba(240,132,124,.13) 0 1px,transparent 1px 12px), repeating-linear-gradient(to bottom,rgba(240,132,124,.13) 0 1px,transparent 1px 12px)} html[data-theme=dark] .gx-ecg-y span{background:#080606} html[data-theme=dark] .gx-ecg-t{filter:drop-shadow(0 0 3px)} /* O PONTILHADO DA SÉRIE DE REFERÊNCIA (o planejado). Fica atrás do traço de verdade e sem brilho nenhum: ele é a régua, não a medida. Opacidade um pouco menor no papel quadriculado, que já tem linha demais competindo com ela. */ /* A MÉDIA DOS MESES ANTERIORES. Meio tom: ela é a régua do "de sempre", e quem tem de saltar aos olhos é o gasto deste mês. Forte demais, o quadro passa a ter três linhas disputando a leitura em vez de uma linha e dois fundos contra os quais lê-la. */ .gx-med{opacity:.5} .gx-plan{opacity:.9} .gx-ecg .gx-plan{opacity:.75} /* A legenda de duas séries. Só existe onde há DUAS: um gráfico de uma linha se explica pelo título do quadro, e legenda de item único é ruído. O tracinho de cada item herda a cor por `currentColor` — quem pinta é o style inline do , que vem da mesma variável usada no traçado. */ .gx-leg{display:flex;flex-wrap:wrap;gap:16px;margin-top:9px;font-size:11.5px;color:var(--tx2)} .gx-leg span{display:inline-flex;align-items:center;gap:7px} /* Duas legendas moram neste arquivo: a das COLUNAS/radar, com quadradinhos de cor (mais abaixo, .gx-leg i de 11px), e esta, de LINHAS. Elas usavam a mesma classe e a de baixo vencia por vir depois — o traço da legenda saía com 11px de largura e 11px de altura morta embaixo. Agora quem é de linha se declara: .gx-leg-l. */ /* as DUAS classes no seletor, e não só a de baixo: `.gx-leg-l i` e `.gx-leg i` valem a mesma especificidade (0,1,1), e a das colunas vem depois no arquivo — ela vencia, e o traço da legenda saía como um quadradinho de 11px com borda em cima, que na tela vira um arco */ .gx-leg.gx-leg-l i{width:18px;height:0;border-radius:0;background:none; border-top:2.5px solid currentColor;flex:none} .gx-leg.gx-leg-l i.d{border-top-width:2px;border-top-style:dashed} /* a média é a referência de fundo: mesmo traço, meio tom abaixo — é assim que ela aparece no desenho, e a legenda tem de dizer a mesma coisa */ .gx-leg.gx-leg-l i.m{border-top-width:1.6px;opacity:.6} /* ═══ RÉGUA E DATAS FORA DO PAPEL (gxLinha com opts.fora) ════════════════ O papel encolhe até o desenho, e os números viram vizinhos dele numa grade de duas colunas: a régua de valores na primeira (mesma linha do desenho — é isso que mantém o `top:%` de cada número em cima do seu valor) e as datas na segunda, embaixo. Dentro do quadriculado eles precisavam de uma plaquinha de fundo para não sumir na grade; fora, o fundo some junto e o quadro fica com uma coisa só dentro dele, que é o traçado. */ .gx-ecg-out{display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:9px;align-items:stretch} /* `position:relative` porque cada número é absoluto dentro dela; a largura é fixa para a coluna do desenho não pular de lugar quando a régua troca de "5 mil" para "12,5 mil" ao rolar o período */ .gx-ecg-out>.gx-ecg-y{position:relative;inset:auto;width:46px} .gx-ecg-out>.gx-ecg-y span{left:auto;right:0;background:none;padding:0; color:var(--tx3);text-align:right} .gx-ecg-out>.gx-plot{overflow:hidden;grid-column:2} .gx-ecg-out>.gx-rots{grid-column:2} /* o papel agora é só o retângulo do desenho: sem o padding, a altura da coluna da régua é exatamente a altura do SVG e as duas escalas coincidem */ /* sem borda também: com ela, a caixa do papel fica 2px mais alta que a do SVG, a coluna da régua acompanha a caixa, e cada número da régua desce ~1px em relação ao valor que ele marca (as datas do pé derivam o mesmo desencontro na largura). Fora, o quadriculado já delimita sozinho. */ .gx-ecg-out>.gx-ecg{padding:0;border:0;border-radius:10px;overflow:hidden} /* ═══ A VARREDURA — o cursor do monitor reescrevendo a linha ═════════════ Decoração declarada: sem hover, `aria-hidden` no HTML, e fora inteira com prefers-reduced-motion. São TRÊS animações combinadas, cada uma resolvendo uma coisa: · `gx-sweep` leva o facho de uma ponta à outra. Anima `left` em % (e não translate) porque a distância a percorrer é a largura do painel, não a da própria faixa — translate em % andaria só a largura do facho; · o facho é VERTICAL, a prumo. Chegou a sair inclinado, e inclinado ele briga com o desenho: as duas únicas linhas retas do quadro são a régua de valores e o eixo dos dias, as duas a prumo, e um facho torto passa a parecer defeito de alinhamento em vez de varredura; · `gx-jitter` treme o facho no eixo horizontal, em passos duros de 80ms. Movimento contínuo lê como "animação"; movimento aos trancos lê como aparelho — é o mesmo truque de um cursor de eletro de cinema; · `gx-ecg-vivo` (no traço, logo abaixo) faz a LINHA reagir à passagem. DUAS ONDAS. A segunda é a mesma animação com atraso de 2,15s — um terço da travessia — e mais apagada. O `filter:opacity()` é o que a apaga, e não uma segunda bateria de @keyframes: filtro MULTIPLICA a opacidade que a animação está pintando naquele instante, então as piscadas e o desmaio do fim continuam iguais, só que meio tom abaixo. Duas é o teto: com três, o quadro vira o facho e o traçado vira fundo. O ciclo é de 9s: ~6,5s de travessia e ~2,5s de descanso. Já foi 6s com 4s de travessia e ainda passava depressa demais para se ver a linha sendo varrida — a travessia lenta é o efeito inteiro. */ .gx-sweep{position:absolute;top:0;bottom:0;width:11%;left:-11%;pointer-events:none; /* o facho não é um bloco de cor: escurece do nada até a crista, e a crista é o risco de 1,5px na frente — é a forma de uma onda passando, não a de uma barra */ background:linear-gradient(90deg,transparent 0%, color-mix(in srgb,currentColor 3%,transparent) 45%, color-mix(in srgb,currentColor 10%,transparent) 82%, color-mix(in srgb,currentColor 26%,transparent) 100%); border-right:1.5px solid currentColor;opacity:0; animation:gx-sweep 9s linear infinite, gx-jitter .08s steps(2,end) infinite} /* a segunda onda: entra com um terço de travessia de atraso, mais estreita, mais fraca e tremendo em outro compasso (.11s) — duas faixas tremendo no mesmo passo lêem como um objeto só, partido no meio */ .gx-sweep-2{width:8.5%;filter:opacity(.42); animation-duration:9s,.11s;animation-delay:2.15s,.37s} @keyframes gx-sweep{ 0%{left:-11%;opacity:0} 2%{opacity:.6} /* as quedas no meio do caminho são o facho "engasgando": um cursor de eletro não tem brilho parelho do começo ao fim. As duas mais curtas (18% e 41%) são piscadas — apaga e volta em menos de um décimo de segundo */ 18%{opacity:.2} 19%{opacity:.62} 26%{opacity:.44} 27%{opacity:.6} 41%{opacity:.17} 42%{opacity:.62} 55%{opacity:.42} 56%{opacity:.6} 72%{left:100%;opacity:.5} 74%,100%{left:100%;opacity:0}} @keyframes gx-jitter{from{transform:translateX(-.6px)}to{transform:translateX(.6px)}} /* A LINHA REAGINDO À VARREDURA. Mesmo ciclo de 9s do facho, e os solavancos caem dentro da janela em que há facho na tela (0–72%): depois disso a linha fica parada e nítida, que é como ela precisa estar na maior parte do tempo — é um número que se lê, não um efeito. PISCA A LINHA, E NÃO O QUADRO INTEIRO. Painel piscando junto lê como tela com defeito (ou como anúncio); a linha piscando lê como sinal chegando — e é a linha que a pessoa está olhando. O tremor é de meio pixel no viewBox: mais que isso desalinha o traço da grade e vira defeito de novo. Só onde HÁ varredura: o `:has()` pendura o efeito no painel que pediu o facho, sem tocar nos outros traçados de eletro da tela. */ .gx-plot:has(>.gx-sweep) .gx-ecg-t{animation:gx-ecg-vivo 9s linear infinite} @keyframes gx-ecg-vivo{ 0%,4%{opacity:1;transform:translateY(0)} 5%{opacity:.4;transform:translateY(-.6px)} 6.5%{opacity:1;transform:translateY(.5px)} 8%{opacity:.8;transform:translateY(0)} 17%{opacity:1;transform:translateY(0)} /* aqui passam as duas ao mesmo tempo (a primeira no meio, a segunda entrando): é o solavanco mais forte do ciclo */ 18%{opacity:.35;transform:translateY(.7px)} 19.5%{opacity:1;transform:translateY(-.6px)} 21%{opacity:.85;transform:translateY(0)} 25%{opacity:1;transform:translateY(0)} 26%{opacity:.5;transform:translateY(-.5px)} 27.5%{opacity:1;transform:translateY(.4px)} 29%{opacity:.9;transform:translateY(0)} 40%{opacity:1;transform:translateY(0)} 41%{opacity:.3;transform:translateY(-.6px)} 42.5%{opacity:1;transform:translateY(.6px)} 44%{opacity:.9;transform:translateY(0)} 54%{opacity:1;transform:translateY(0)} 55%{opacity:.5;transform:translateY(.5px)} 56.5%{opacity:1;transform:translateY(-.4px)} 58%{opacity:.92;transform:translateY(0)} 66%{opacity:1;transform:translateY(0)} 67%{opacity:.6;transform:translateY(.3px)} 68.5%,100%{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){ .gx-sweep{display:none} .gx-plot:has(>.gx-sweep) .gx-ecg-t{animation:none}} /* Os tópicos que explicam um gráfico. Um número por linha: corridos numa frase só, o olho tem de separá-los antes de ler. O marcador é um traço, e não uma bolinha — a lista é leitura de rodapé, não item de menu. */ .gx-tops{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px} .gx-tops li{position:relative;padding-left:14px;font-size:12px;line-height:1.5;color:var(--tx2)} .gx-tops li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px; background:var(--bd2)} /* ═══ O piso do mês (assinaturas + contas fixas + parcelas) ══════════════ O número grande primeiro, a barra dividida logo abaixo e as três linhas clicáveis embaixo dela: a barra responde "de que é feito" antes de a pessoa ler qualquer rótulo, e cada linha leva para a tela que resolve aquela fatia. */ .pi-big{font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--tx); margin:2px 0 12px;font-variant-numeric:tabular-nums} .pi-big span{font-size:14px;font-weight:600;color:var(--tx3);margin-left:3px} .pi-list{display:flex;flex-direction:column;gap:2px;margin-top:10px} /* botão, e não div com onclick: a fatia inteira é o alvo do clique e do teclado, e o foco tem de aparecer */ .pi-l{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center; gap:10px;width:100%;text-align:left;background:none;border:0;font:inherit; padding:9px 8px;border-radius:10px;cursor:pointer} .pi-l:hover{background:var(--sf2)} .pi-l:focus-visible{outline:2px solid var(--br);outline-offset:-2px} .pi-d{width:9px;height:9px;border-radius:3px;flex:none} .pi-n{font-size:13px;font-weight:700;color:var(--tx);display:flex;flex-direction:column;min-width:0} .pi-n span{font-size:11px;font-weight:500;color:var(--tx3);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pi-v{font-size:14px;font-weight:700;color:var(--tx);white-space:nowrap; font-variant-numeric:tabular-nums} .pi-v span{font-size:10.5px;font-weight:600;color:var(--tx3);margin-left:2px} .pi-s{font-size:17px;color:var(--tx3);line-height:1} /* ═══ MODO LIMPO (gxLinha com opts.limpo) ════════════════════════════════ O quadro "Gasto do período, dia a dia" já foi um mostrador de monitor: papel quadriculado da cor do traço, moldura, facho de varredura e brilho na linha. Saiu tudo, e o motivo é o desenho ter passado a ter TRÊS séries — gasto, planejado e média dos meses anteriores. Com uma linha, a malha era cenário; com três, ela vira mais três linhas por cima do único lugar onde a pergunta se responde, que é o cruzamento entre elas. O que ficou: o fundo do próprio cartão, as referências horizontais em traço de 1px na cor de borda e a régua de valores na lateral. As referências são o que resta da grade — sem nenhuma, a régua da esquerda promete uma escala que o olho não consegue carregar até o meio do desenho. */ /* sem recorte: o ponto de hoje encosta na borda direita e o anel dele (a cor do cartão em volta da bola) sairia cortado ao meio */ .gx-lim>.gx-plot{overflow:visible} .gx-lim-ref{stroke:var(--bd);stroke-width:1;opacity:1;stroke-dasharray:none} /* a base é a única linha um tom acima das outras: é dela que todas as alturas se medem, e tracejada ela se confunde com o pontilhado do planejado */ .gx-lim .gx-zero{stroke:var(--bd2);stroke-width:1;stroke-dasharray:none;opacity:1} /* sem o drop-shadow do eletro: brilho é o que faz um traço parecer fósforo aceso, e é justamente o que se quer fora daqui */ .gx-lim-t{filter:none} /* O PONTO DE HOJE com um anel da cor do cartão. Ele cai em cima do traçado e, sem o anel, a bola e a linha viram uma mancha só. `paint-order:stroke` pinta a borda ANTES do preenchimento — sem isso ela comeria metade da bola em vez de abrir espaço em volta dela. */ .gx-lim-hoje{stroke:var(--sf);stroke-width:3;paint-order:stroke;filter:none} /* A régua ganha o corpo de texto do resto do app: na calha do papel ela era uma plaquinha de 9,5px, tamanho de quem estava disputando espaço com a grade. A coluna vai junto de 46 para 56px — em 11px o degrau de cima leva o "R$" e "R$ 20 mil" já não cabia nos 46, saindo por fora do cartão. */ .gx-ecg-out.gx-lim>.gx-ecg-y{width:56px} .gx-ecg-out.gx-lim>.gx-ecg-y span{font-size:11px} /* Os rótulos do eixo X moram FORA do SVG. Dentro dele, "11px" é unidade de viewBox, não pixel: num cartão de 301px de largura o texto sairia com 5,5px de verdade, e num de 1100px com 20px. Aqui embaixo 11px é 11px em qualquer tela. O `left` de cada um vem em % da mesma conta de x() do desenho — o viewBox mapeia 0..600 na largura toda, então rótulo e ponto ficam alinhados. */ .gx-wrap{position:relative} .gx-rots{position:relative;height:15px;margin-top:3px} .gx-rot{position:absolute;top:0;font-size:11px;color:var(--tx3); white-space:nowrap;transform:translateX(-50%)} .gx-rot-ini{transform:none} .gx-rot-fim{transform:translateX(-100%)} .gx-vazio{font-size:12.5px;color:var(--tx3);padding:14px 2px} .gx-barras{display:flex;flex-direction:column;gap:7px} .gx-click{cursor:pointer;border-radius:12px;transition:background .15s} .gx-click:hover,.gx-click:focus-visible{background:rgba(255,255,255,.07);outline:none} .gx-b{display:grid;grid-template-columns:minmax(84px,1.1fr) 2.4fr auto;align-items:center;gap:10px} .gx-b-l{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gx-b-t{height:8px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden} .gx-b-t>span{display:block;height:100%;border-radius:5px} .gx-b-v{font-size:12px;font-weight:700;white-space:nowrap} /* O interruptor de janela (mês atual / 3 / 6 meses) */ .gx-sw{display:inline-flex;background:var(--sf2);border:1px solid var(--bd);border-radius:10px;padding:2px;gap:2px} .gx-sw-b{font:inherit;font-size:11.5px;font-weight:600;color:var(--tx2);background:none;border:0; padding:5px 11px;border-radius:8px;cursor:pointer;white-space:nowrap} .gx-sw-b:hover{color:var(--tx)} .gx-sw-b.active{background:var(--sf);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.16)} .cli-evo{margin-top:16px;padding-top:14px;border-top:1px solid var(--bd)} /* na Início o traçado subiu para cima dos cards: a borda de cima virava um risco solto logo abaixo do título do bloco */ .cli-evo-ecg{margin:0 0 14px;padding-top:0;border-top:0} /* a densidade de gasto virou quadro próprio: o calendário é o conteúdo inteiro do cartão, então não tem de que se separar — sem borda e sem folga de cima, ele encosta no cabeçalho do bloco como qualquer outro corpo */ .cli-evo-dens{margin:0;padding-top:0;border-top:0} .cli-evo-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap} .cli-evo-h>span{font-size:12.5px;font-weight:700;color:var(--tx2)} .cli-evo-p{font-size:11.5px;color:var(--tx2);margin-top:6px} /* Cards menores: eles continuam a leitura principal, mas agora dividem o bloco com o gráfico — no tamanho antigo, sobrava rolagem e nada mais. */ /* Todos numa linha só, dividindo a largura por igual. `auto-flow:column` + `auto-columns:1fr` em vez de `auto-fill` com largura mínima: com mínima, o sétimo card não cabia e caía sozinho para a linha de baixo. Sem mínima, eles encolhem juntos — que é o pedido: pequenos, mas lado a lado. O `min-width:0` impede que um valor largo estufe a coluna. */ .cli-kpis-sm{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none!important;gap:8px} .cli-kpis-sm .cli-kpi{padding:10px 11px;min-width:0} .cli-kpis-sm .cli-kpi-v{font-size:15px;letter-spacing:-.4px;margin-top:5px} .cli-kpis-sm .cli-kpi-l{font-size:10.5px;line-height:1.3} .cli-kpis-sm .cli-kpi-s{font-size:9.5px;margin-top:3px} @media(max-width:720px){ .cli-hero-dir{width:100%;justify-content:flex-start} .cli-hero-bancos{width:100%} .cli-hb{flex:1 1 132px} .gx-b{grid-template-columns:minmax(70px,1fr) 1.6fr auto;gap:8px} } /* KPIs */ .cli-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:22px} .cli-kpi{background:#fff;border:1px solid #e8edf6;border-radius:16px;padding:17px 18px;box-shadow:0 2px 8px rgba(27,39,64,.04)} .cli-kpi-l{font-size:12px;color:#64748b;font-weight:500} .cli-kpi-v{font-size:22px;font-weight:700;color:#1b2740;margin-top:7px;letter-spacing:-.3px} .cli-kpi-s{font-size:11px;color:var(--tx3);margin-top:4px} .cli-kpi.gr .cli-kpi-v{color:#16a34a}.cli-kpi.re .cli-kpi-v{color:#e0524b}.cli-kpi.bl .cli-kpi-v{color:#466BDB} .cli-kpi.pu .cli-kpi-v{color:#8b7cf8}.cli-kpi.go .cli-kpi-v{color:#d98a16} /* seções */ .cli-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .cli-sec{background:#fff;border:1px solid #e8edf6;border-radius:18px;padding:22px 24px;margin-bottom:18px;box-shadow:0 2px 10px rgba(27,39,64,.04)} .cli-grid2 .cli-sec{margin-bottom:0} /* ═══ Início: os quadros lado a lado ═══════════════════════════════════ Duas colunas que se empilham por conta própria: cada uma é um flex column, então um quadro alto de um lado não abre buraco do outro (que é o que a grade faria se os quadros fossem itens diretos dela). `align-items:start` para a coluna não esticar até a altura da vizinha, e `minmax(0,1fr)` em vez de `1fr` porque a grade do mapa de calor e a barra empilhada têm conteúdo largo — sem o mínimo zero elas empurram a coluna. */ .cli-ini2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;align-items:start;margin-bottom:18px} .cli-ini2-col{display:flex;flex-direction:column;gap:18px;min-width:0} .cli-ini2-col>*{margin-bottom:0} .cli-ini2 .med-wrap{margin-bottom:0} /* o ponto de montagem das médias fica vazio até financeiro.js preenchê-lo — e um div vazio numa coluna com `gap` vira um buraco de 18px */ .cli-ini2 .cli-mount:empty{display:none} /* Na coluna, a fileira de sete cards não cabe em linha: o `auto-flow:column` do .cli-kpis-sm (pensado para a largura inteira) espremeria cada card a uns 70px. Aqui eles quebram em linhas. Estes ajustes só valem enquanto HÁ duas colunas — daí o min-width. Fora dele os cards voltam às regras de sempre, que já sabem o que fazer no celular; repetidos aqui, a especificidade maior deste seletor atropelaria a quebra em duas colunas do @media(max-width:760px). */ @media(min-width:1280px){ .cli-ini2 .cli-kpis-sm{grid-auto-flow:row;grid-auto-columns:auto; grid-template-columns:repeat(auto-fit,minmax(116px,1fr))!important} .cli-ini2 .cli-kpis{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px} /* `minmax(0,1fr)` e não `1fr`: com o mínimo automático, um valor de sete dígitos alarga a coluna e o quarto card vaza para fora do cartão — foi o que aconteceu na primeira versão desta grade. O número menor é o que faz os quatro caberem lado a lado na metade da largura. */ .cli-ini2 .med-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .cli-ini2 .med-c{padding:9px 11px} .cli-ini2 .med-c span{font-size:11px;font-size:clamp(9px,11cqi,11px)} .cli-ini2 .med-c b{font-size:15px;font-size:clamp(12px,15cqi,15px);margin-top:2px} /* Cards baixos, e não cards grandes espremidos. Na coluna estreita o que atrapalha a leitura não é o número ser pequeno — é o card ser alto: com sete deles em duas fileiras, "Seu resultado" empurra o mapa de calor para fora da primeira tela, e o olho tem de rolar para comparar dois números que deviam estar no mesmo olhar. Rótulo e valor cabem numa linha cada; o resto é padding que só ocupa altura. */ .cli-ini2 .cli-kpis-sm .cli-kpi{padding:8px 10px} .cli-ini2 .cli-kpis-sm .cli-kpi-l{font-size:10px} .cli-ini2 .cli-kpis-sm .cli-kpi-v{font-size:14px;margin-top:3px} .cli-ini2 .cli-kpis-sm .cli-kpi-s{font-size:9px;margin-top:2px} /* os cards de tamanho cheio (Caixa, Planejado x Realizado) descem junto, para as duas colunas não lerem como duas escalas diferentes */ .cli-ini2 .cli-kpi{padding:13px 14px;border-radius:13px} .cli-ini2 .cli-kpi-v{font-size:18px;margin-top:5px} /* o selo do cabeçalho é curto e não deve quebrar em duas linhas para o subtítulo ganhar dois caracteres */ .cli-ini2 .cli-badge{flex-shrink:0;white-space:nowrap} } /* Uma coluna só: aí a ordem que vale é a de leitura, não a das colunas. `display:contents` dissolve os dois invólucros para que os quadros virem itens do mesmo flex e o `order` possa reordená-los. O corte é 1280px, não uma largura de celular. Duas colunas só valem a pena quando cada uma cabe o que tem dentro: com 1100px de tela a coluna fica com ~530px, e aí a fileira de médias vaza do cartão, o mapa de calor de seis meses vira pontilhado e o selo do cabeçalho quebra em duas linhas. Antes disso a pilha de uma coluna é melhor do que duas colunas espremidas. */ @media(max-width:1279px){ /* o align-items:start da grade vira flex-start aqui, e aí cada quadro encolhe até o tamanho do texto — de volta a esticar */ .cli-ini2{display:flex;flex-direction:column;align-items:stretch} .cli-ini2-col{display:contents} .cli-ini2 .cli-o0{order:0} .cli-ini2 .cli-o1{order:1}.cli-ini2 .cli-o2{order:2}.cli-ini2 .cli-o3{order:3} .cli-ini2 .cli-o4{order:4}.cli-ini2 .cli-o5{order:5}.cli-ini2 .cli-o6{order:6} .cli-ini2 .cli-o7{order:7}.cli-ini2 .cli-o8{order:8}.cli-ini2 .cli-o9{order:9} .cli-ini2 .cli-o10{order:10}.cli-ini2 .cli-o11{order:11} } .cli-sec-h{margin-bottom:16px} .cli-sec-t{font-size:16px;font-weight:700;color:#1b2740;letter-spacing:-.2px} .cli-sec-s{font-size:12.5px;color:var(--tx3);margin-top:3px} /* quadro recolhível (cliSecFold): o cabeçalho de sempre vira o clique */ .cli-fold>summary{cursor:pointer;list-style:none;display:flex;gap:9px;align-items:flex-start} .cli-fold>summary::-webkit-details-marker{display:none} .cli-fold>summary::before{content:'▸';color:var(--tx3);font-size:13px;line-height:1.5} .cli-fold[open]>summary::before{content:'▾'} .cli-fold>summary .cli-sec-h{margin-bottom:0;flex:1;min-width:0} .cli-fold[open]>summary .cli-sec-h{margin-bottom:16px} .cli-note{font-size:12.5px;color:#64748b;line-height:1.55;margin-top:12px;background:#f6f8fc;border-radius:10px;padding:11px 13px} .cli-bignum{font-size:30px;font-weight:800;letter-spacing:-.6px;margin:6px 0} .cli-bignum.gr{color:#16a34a}.cli-bignum.re{color:#e0524b} .cli-chartbox{margin-top:14px} /* gauge */ .cli-gauge{height:14px;background:#eef2f9;border-radius:9px;overflow:hidden} .cli-gauge-fill{height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:9px;transition:width .4s} .cli-gauge-lab{display:flex;justify-content:space-between;font-size:12.5px;color:#64748b;margin-top:9px} .cli-gauge-lab b{color:#1b2740} /* barras */ .cli-barrow{margin-bottom:13px} .cli-barlab{display:flex;justify-content:space-between;font-size:13px;color:#475569;margin-bottom:5px} .cli-barlab b{color:#1b2740} .cli-bartrack{height:9px;background:#eef2f9;border-radius:6px;overflow:hidden} .cli-barfill{height:100%;border-radius:6px;transition:width .4s} /* alertas / passos */ .cli-alert{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:12px;margin-bottom:9px;font-size:13px;line-height:1.5} .cli-alert-ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} .cli-alert.alerta{background:#fdf6e7;color:#8a5a08}.cli-alert.alerta .cli-alert-ic{background:#f5c563;color:#5c3c00} .cli-alert.risco{background:#fdeceb;color:#b3322b}.cli-alert.risco .cli-alert-ic{background:#e0524b;color:#fff} .cli-alert.ok{background:#e9f7ee;color:#157a3a}.cli-alert.ok .cli-alert-ic{background:#16a34a;color:#fff} .cli-alert.info{background:#eef2fe;color:#3a4a8a}.cli-alert.info .cli-alert-ic{background:#466BDB;color:#fff} .cli-step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #eef2f9;font-size:13.5px;color:#334155;line-height:1.5} .cli-step:last-child{border-bottom:none} .cli-step-n{width:24px;height:24px;border-radius:50%;background:#eef2fe;color:#466BDB;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* quote */ .cli-quote{font-size:15px;font-style:italic;color:#1b2740;background:linear-gradient(120deg,#eef2fe,#f3f0ff); border-left:4px solid #466BDB;border-radius:0 14px 14px 0;padding:18px 22px;margin:8px 0 4px;line-height:1.55;font-weight:500} /* actions (rotina) */ .cli-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px} .cli-action{background:#fff;border:1px solid #e8edf6;border-radius:16px;padding:20px 18px;text-align:left;cursor:pointer; box-shadow:0 2px 8px rgba(27,39,64,.04);transition:.18s;font-family:inherit} .cli-action:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(70,107,219,.14);border-color:#c7d3f5} .cli-action-ic{font-size:24px;margin-bottom:10px} .cli-action-t{font-size:15px;font-weight:700;color:#1b2740} .cli-action-s{font-size:12px;color:var(--tx3);margin-top:3px} /* tabelas cliente */ .cli-tbl{width:100%;border-collapse:collapse} .cli-tbl th{text-align:left;font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid #eef2f9} .cli-tbl td{padding:10px 10px;border-bottom:1px solid #f1f5fb;font-size:13px;color:#334155;vertical-align:middle} .cli-tbl tr:last-child td{border-bottom:none} .cli-tbl select{border:1px solid #e2e8f3;border-radius:8px;padding:4px 7px;font-size:12px;width:100%} .cli-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600} .cli-empty{text-align:center;color:var(--tx3);font-size:13px;padding:26px} /* DRE cliente */ .cli-dre{border:1px solid #eef2f9;border-radius:14px;overflow:hidden} .cli-dre-row{display:flex;justify-content:space-between;padding:12px 16px;font-size:14px;color:#334155;border-bottom:1px solid #f1f5fb} .cli-dre-row.sub{color:#64748b;font-size:13px;padding:9px 16px} .cli-dre-row.total{background:#f6f8fc;font-weight:700;color:#1b2740} .cli-dre-row b.gr,.cli-dre b.gr{color:#16a34a}.cli-dre-row b.re,.cli-dre b.re{color:#e0524b} .cli-pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .cli-pill{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px;background:#eef2f9;color:#475569} /* pj+pf cliente */ .cli-pjpf{display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;align-items:center} .cli-pjpf-arrow{text-align:center;color:#cbd5e1;font-size:22px} .cli-mini-t{font-size:12px;font-weight:700;color:#1b2740;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px} /* simulação */ .cli-simrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid #f1f5fb;font-size:13.5px;color:#334155;flex-wrap:wrap} .cli-simrow:last-child{border-bottom:none} .cli-simrow b.gr{color:#16a34a;font-size:15px} /* objetivos */ .cli-objgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cli-obj{border:1px solid #eef2f9;border-radius:14px;padding:16px} .cli-obj-t{font-size:14px;font-weight:700;color:#1b2740} .cli-obj-v{font-size:18px;font-weight:700;color:#1b2740;margin:8px 0} .cli-obj-v span{font-size:12px;font-weight:500;color:var(--tx3)} .cli-obj-f{display:flex;justify-content:space-between;font-size:11.5px;color:#64748b;margin-top:8px} @media(max-width:880px){.cli-grid2,.cli-objgrid{grid-template-columns:1fr}.cli-pjpf{grid-template-columns:1fr}.cli-pjpf-arrow{transform:rotate(90deg)}} /* ── navegação consolidada (Visão Interna · cliente selecionado) ── */ .bmo-maintabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;border-bottom:1px solid #e6eaf2;padding-bottom:12px} .bmo-mt{padding:9px 16px;border:1px solid #e2e8f3;background:#fff;border-radius:10px;font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit} .bmo-mt:hover{border-color:#466BDB;color:#466BDB} .bmo-mt.active{background:#466BDB;color:#fff;border-color:#466BDB} .bmo-subtabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 16px;background:#eef2f9;padding:4px;border-radius:10px;width:fit-content;max-width:100%} .bmo-st{padding:7px 14px;border:none;background:none;border-radius:8px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .bmo-st:hover{color:#1b2740} .bmo-st.active{background:#fff;color:#466BDB;box-shadow:0 1px 4px rgba(0,0,0,.08)} .mb14{margin-bottom:14px} /* ── segmented control (Visão Cliente · Resultado) ── */ .cli-seg{display:inline-flex;gap:4px;background:#eef2f9;padding:5px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap} .cli-seg button{padding:9px 18px;border:none;background:none;border-radius:9px;font-size:13.5px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .cli-seg button:hover{color:#1b2740} .cli-seg button:disabled{opacity:.45;cursor:not-allowed;color:#64748b} .cli-seg button.active{background:#fff;color:#466BDB;box-shadow:0 2px 6px rgba(27,39,64,.08)} .cli-action.active{border-color:#466BDB;box-shadow:0 8px 20px rgba(70,107,219,.16);background:#f7f9ff} /* ═══ Evolução v2 — componentes do cliente ═══ */ #client-shell{--gr:#16a34a;--re:#e0524b;--bl:#466BDB;--pu:#8b7cf8;--go:#d98a16;--amber:#d98a16;--br:#466BDB;--tx:#1b2740;--tx2:#475569;--tx3:#5b6e89;--sf2:#eef2f9;--bd:#eef2f9;--line:#e6eaf2;} .cli-period{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px} .cli-period button{padding:8px 14px;border:1px solid #e2e8f3;background:#fff;border-radius:20px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .cli-period button:hover{border-color:#466BDB;color:#466BDB} .cli-period button.active{background:#1b2740;color:#fff;border-color:#1b2740} .cli-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px} .cli-badge.b{background:#eef2fe;color:#466BDB}.cli-badge.n{background:#e9edf5;color:#475569} .cli-blockh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px} .cli-block-t{font-size:16px;font-weight:700;color:#1b2740;letter-spacing:-.2px} .cli-block-s{font-size:12.5px;color:var(--tx3);margin-top:3px} .cli-rxc{display:flex;gap:13px;align-items:flex-start;border-radius:14px;padding:15px 18px;font-size:13.5px;line-height:1.5;margin-bottom:18px} .cli-rxc.ok{background:#eef2fe;color:#33407a}.cli-rxc.warn{background:#fdf3ec;color:#8a4a08} .cli-rxc-ic{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:#fff} .cli-rxc.ok .cli-rxc-ic{color:#466BDB}.cli-rxc.warn .cli-rxc-ic{color:#d98a16} .cli-link{background:none;border:none;color:#466BDB;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;padding:0} .cli-link:hover{text-decoration:underline} .cli-readrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f1f5fb;font-size:13.5px;color:#334155;line-height:1.5} .cli-readrow:last-child{border-bottom:none} .cli-readdot{width:7px;height:7px;border-radius:50%;background:#466BDB;margin-top:7px;flex-shrink:0} .cli-ia{border:1px solid #e8edf6;border-radius:12px;padding:13px 15px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .cli-ia.done{background:#f3faf5;border-color:#bfe6cd} .cli-ia-desc{font-size:14px;font-weight:600;color:#1b2740} .cli-ia-meta{font-size:12px;color:var(--tx3);font-weight:500} .cli-ia-sug{font-size:12.5px;color:#475569;margin-top:4px} .cli-ia-conf{color:#466BDB;font-weight:600;margin-left:6px} .cli-ia-act{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .cli-ia-act select{border:1px solid #e2e8f3;border-radius:8px;padding:6px 8px;font-size:12px} .cli-mini-btn{border:1px solid #e2e8f3;background:#fff;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit} .cli-mini-btn.p{background:#466BDB;color:#fff;border-color:#466BDB} .cli-mini-btn.on{background:#16a34a;color:#fff;border-color:#16a34a} tr.fut td{color:var(--tx3)} .cli-fut-tag{font-size:10px;background:#eef2fe;color:#466BDB;padding:1px 6px;border-radius:10px;font-weight:600} .cli-penddot{display:inline-block;min-width:18px;background:#fdeceb;color:#d24a42;font-size:11px;font-weight:700;border-radius:10px;padding:1px 6px} .cli-dre2{border:1px solid #eef2f9;border-radius:14px;overflow:hidden} .cli-dl{display:flex;align-items:center;padding:11px 16px;font-size:14px;color:#334155;border-bottom:1px solid #f1f5fb} .cli-dl:last-child{border-bottom:none} .cli-dl.total{background:#f6f8fc;font-weight:700;color:#1b2740} .cli-dl.sub{padding:8px 16px;font-size:13px;color:#64748b;background:#fcfdff} .cli-dl-sign{width:16px;color:var(--tx3);font-weight:700;flex-shrink:0} .cli-dl-exp{width:22px;height:22px;border:1px solid #e2e8f3;background:#fff;border-radius:6px;font-size:14px;font-weight:700;color:#466BDB;cursor:pointer;margin-right:6px;line-height:1;flex-shrink:0;padding:0} .cli-dl-lab{flex:1} .cli-dl-val{font-weight:700;color:#1b2740;font-variant-numeric:tabular-nums} .cli-dl-lancs{background:#fbfcfe;padding:6px 16px 10px 44px} .cli-lancrow{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#64748b;padding:5px 0;border-bottom:1px dashed #eef2f9} .cli-lancrow:last-child{border-bottom:none} .cli-lancmeta{color:#aab4c6;font-size:11px} /* barra da DRE: filtro por etiqueta/caixinha e abrir-fechar tudo. Tudo em var() de propósito — assim o tema escuro sai de graça, sem entrar nas listas de exceção lá embaixo */ .dref{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .dref-chip{display:inline-flex;align-items:center;gap:4px;background:var(--sf2);border:1px solid var(--bd);border-radius:20px;padding:3px 5px 3px 10px;font-size:12px} .dref-chip b{font-weight:700} .dref-chip button{border:none;background:none;color:var(--tx3);cursor:pointer;font-size:14px;line-height:1;padding:0 4px;font-family:inherit} .dref-chip button:hover{color:var(--re)} .dref-pan{border:1px solid var(--bd);border-radius:12px;background:var(--sf2);padding:6px 8px 10px;margin-bottom:14px} .dref-gr{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);padding:9px 6px 4px} .dref-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px} .dref-i{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;border-radius:8px;padding:6px 8px;font-size:13px;color:var(--tx2);cursor:pointer;font-family:inherit} .dref-i:hover{background:var(--bl2)} .dref-i.on{background:var(--bl2);color:var(--bl);font-weight:600} .dref-i>span:last-child{overflow-wrap:anywhere;line-height:1.35} .dref-cb{flex:none} /* a bolinha fica ANTES do nome, como o .fin-cdot do Plano de contas: jogada para a direita da célula, ela parecia ser da coluna vizinha */ .dref-dot{flex:none;width:9px;height:9px;border-radius:50%} .dref-vazio{padding:4px 8px;font-size:12.5px;color:var(--tx3)} .dref-nota{padding:10px 8px 2px;font-size:12px;color:var(--tx3);line-height:1.45} .dref-nota b{color:var(--tx2)} .cli-seg.wrap{flex-wrap:wrap} .cli-rxc-cols{display:flex;gap:16px;align-items:stretch} .cli-rxc-card{flex:1;border:1px solid #eef2f9;border-radius:14px;padding:18px 20px} .cli-rxc-card .h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:12px} .cli-rxc-card .r{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;color:#475569;border-bottom:1px solid #f1f5fb} .cli-rxc-card .r.tot{border-bottom:none;font-weight:700;color:#1b2740;font-size:15px;margin-top:4px} .cli-rxc-eq{display:flex;align-items:center;font-size:26px;font-weight:800;color:#cbd5e1} .cli-cat-wrap{display:flex;gap:24px;align-items:center;margin-bottom:18px} .cli-donut{width:180px;height:180px;flex-shrink:0} .cli-donut canvas{width:100%!important;height:100%!important;display:block} .cli-cat-leg{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px} .cli-leg{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569} .cli-leg b{margin-left:auto;color:#1b2740} .cli-legdot{width:10px;height:10px;border-radius:3px;flex-shrink:0;display:inline-block;margin-right:6px} .cli-stat{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap} .cli-stat.re{background:#fdeceb;color:#b3322b}.cli-stat.gr{background:#e9f7ee;color:#157a3a}.cli-stat.bl{background:#eef2fe;color:#3a4a8a}.cli-stat.go{background:#fdf6e7;color:#8a5a08}.cli-stat.x{background:#eef2f9;color:var(--tx3)} .cli-ponte{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f6f8fc;border-radius:12px;padding:16px 20px} .cli-ponte .l{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em} .cli-ponte b{font-size:18px;color:#1b2740} .cli-ponte .arr{color:#cbd5e1;font-size:20px} .cli-steps2{display:flex;flex-direction:column;gap:10px;margin-top:16px} .cli-step2{display:flex;align-items:center;gap:14px;border:1px solid #eef2f9;border-radius:12px;padding:14px 16px} .cli-step2 .n{width:30px;height:30px;border-radius:50%;background:#eef2fe;color:#466BDB;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cli-step2 b{font-size:14px;color:#1b2740} .cli-step2 .s{font-size:12.5px;color:#64748b;margin-top:2px} .cli-step2 .cli-link{margin-left:auto;white-space:nowrap} .cli-simbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#64748b;margin-bottom:16px} .cli-simbar button{padding:6px 12px;border:1px solid #e2e8f3;background:#fff;border-radius:18px;font-size:12px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .cli-simbar button.active{background:#466BDB;color:#fff;border-color:#466BDB} .cli-obj2{border:1px solid #eef2f9;border-radius:14px;padding:16px 18px;border-left:4px solid #cbd5e1} .cli-obj2.gr{border-left-color:#16a34a}.cli-obj2.go{border-left-color:#d98a16}.cli-obj2.re{border-left-color:#e0524b} .cli-obj2-h{display:flex;justify-content:space-between;align-items:center} .cli-obj2-h b{font-size:15px;color:#1b2740} .cli-obj2-v{font-size:18px;font-weight:700;color:#1b2740;margin:8px 0} .cli-obj2-v span{font-size:12px;font-weight:500;color:var(--tx3)} .cli-obj2-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px} .cli-obj2-grid span{font-size:11px;color:var(--tx3);display:block} .cli-obj2-grid b{font-size:13px;color:#1b2740} .cli-obj2-msg{margin-top:12px;font-size:12px;color:#b3322b;background:#fdeceb;border-radius:8px;padding:9px 11px;line-height:1.45} .cli-obj2-msg.ok{color:#157a3a;background:#e9f7ee} .cli-orc-inp{width:90px;border:1px solid #e2e8f3;border-radius:7px;padding:5px 8px;font-size:13px;text-align:right;font-family:inherit} .cli-edrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5fb;font-size:13.5px;color:#334155} .cli-edrow:last-child{border-bottom:none} .cli-edtag{font-size:11px;background:#eef2f9;color:#64748b;padding:2px 8px;border-radius:12px;margin-left:6px} .cli-x{border:none;background:none;color:#cbd5e1;font-size:16px;cursor:pointer;margin-left:8px} .cli-x:hover{color:#e0524b} /* ═══ v2.2 — cabeçalhos ordenáveis · planejamento · importar ═══ */ .fin-th{cursor:pointer;user-select:none;white-space:nowrap} .fin-th:hover{color:#466BDB!important} .pj-orc{width:120px;text-align:right;border:1px solid #e2e8f3;border-radius:7px;padding:6px 9px;font-family:inherit;font-size:12.5px;background:#fff} .pj-orc:focus{border-color:#466BDB;outline:none} .pj-use{background:none;border:1px solid #dbe3f2;border-radius:14px;padding:2px 9px;font-size:10.5px;font-weight:700;color:#466BDB;cursor:pointer;font-family:inherit;margin-left:5px} .pj-use:hover{background:#f6f9ff} .pj-vazio td{color:#64748b} .fd-hoje td{background:#eef2ff} .fd-wrap{max-width:520px} .fd-tbl th:first-child,.fd-tbl td:first-child{width:60px} .fd-prev td{color:#7c8aa8;font-style:italic} .fd-tag{font-style:normal;font-size:9.5px;font-weight:700;color:#8b95ff;background:#eef0ff;border-radius:8px;padding:1px 5px;margin-left:4px;letter-spacing:.02em} .imp-meta{font-size:11.5px;color:#475569;background:#f6f9ff;border:1px solid #e2e9f6;border-radius:8px;padding:8px 11px;margin-bottom:11px;line-height:1.6} /* ═══ Conciliação v2.1 — filtro por mês ═══ */ .fin-mesf{border:1px solid #e2e8f3;border-radius:20px;padding:6px 12px;font-size:12.5px;font-family:inherit;background:#fff;color:#334155;font-weight:600;cursor:pointer} .fin-mesf:focus{border-color:#466BDB;outline:none} /* ═══ Conciliação v2 ═══ */ .fin-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .fin-search{border:1px solid #e2e8f3;border-radius:20px;padding:6px 14px;font-size:12.5px;font-family:inherit;min-width:230px} .fin-bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f4f7fd;border:1px solid #e2e9f6;border-radius:11px;padding:6px 10px;margin:8px 0} .fin-bulk input{border:1px solid #dbe3f2;border-radius:8px;padding:6px 10px;font-size:12.5px;font-family:inherit;width:280px;flex:0 1 auto} .fin-cat{border:1px solid #e2e8f3;border-radius:7px;padding:5px 8px;font-size:12px;font-family:inherit;background:#fff;width:100%;max-width:190px} .fin-cat.fin-sug{color:#466BDB;font-style:italic;border-color:#c7d4fb;background:#f6f9ff} /* seletor do plano de contas (cat-picker.js) — fixed porque a tabela da conciliação rola na horizontal e cortaria um dropdown dentro da célula */ .catpick{position:fixed;z-index:11000;background:#fff;border:1px solid #dbe3f2;border-radius:11px;box-shadow:0 14px 34px rgba(16,24,40,.17);overflow-y:auto;padding:5px;font-size:12.5px} /* o grupo gruda no topo: Finanças sozinho tem 42 categorias, e rolando a lista o cabeçalho saía de vista — sem ele a linha perde o contexto */ .catpick-g{position:sticky;top:-5px;background:inherit;z-index:1;padding:8px 9px 4px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3)} .catpick-i{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 9px;border-radius:8px;cursor:pointer;color:#334155} .catpick-i:hover,.catpick-i.on{background:#eef3ff} /* nome inteiro, quebrando em duas linhas se precisar: "Transferência para terceiros - Boleto bancário" não cabe numa linha e cortar impede escolher */ .catpick-n{overflow-wrap:anywhere;line-height:1.35} .catpick-nova{color:#466BDB;font-weight:600} .catpick-vazio{padding:10px 9px;color:var(--tx3)} .fin-mes{border:1px solid #e2e8f3;border-radius:7px;padding:5px 7px;font-size:12px;font-family:inherit;background:#fff;max-width:146px} /* textarea de uma linha que cresce (finDescCrescer, financeiro.js): sem redimensionador de canto, sem barra de rolagem, quebrando como texto */ .fin-desc{border:1px solid transparent;border-radius:7px;padding:5px 7px;font-size:13px;font-family:inherit;background:transparent;width:100%;min-width:0;color:#334155; display:block;resize:none;overflow:hidden;line-height:1.3;box-sizing:border-box;overflow-wrap:anywhere; /* o `textarea{min-height:56px}` global é de formulário: aqui a altura sai do texto (uma linha quando cabe numa, duas quando precisa de duas) */ min-height:0;height:auto} .fin-desc:hover,.fin-desc:focus{border-color:#e2e8f3;background:#fff} .fin-ok{width:30px;height:30px;border-radius:8px;border:1.5px solid #cbd5e1;background:#fff;color:#cbd5e1;font-size:15px;font-weight:800;cursor:pointer} .fin-ok:hover{border-color:#16a34a;color:#16a34a} .fin-ok.on{background:#16a34a;border-color:#16a34a;color:#fff} .fin-lupa{text-decoration:none;font-size:11px;opacity:.45;margin-left:3px} .fin-lupa:hover{opacity:1} .fin-selbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#eaf0ff;border:1px solid #c7d4fb;border-radius:11px;padding:9px 12px;margin:10px 0;font-size:12.5px;font-weight:600;color:#334} .fin-sel-cb{width:15px;height:15px;cursor:pointer} /* importar */ .imp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px} .imp-card{background:#fff;border:1px solid var(--line,#e6eaf2);border-radius:14px;padding:18px} .imp-t{font-size:14px;font-weight:800;color:#1b2740;margin-bottom:8px} .imp-card p{font-size:12.5px;color:#64748b;line-height:1.5;margin-bottom:12px} .imp-card select{width:100%;border:1px solid #e2e8f3;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;margin-bottom:10px;background:#fff} .imp-file{position:relative;overflow:hidden;display:inline-block;cursor:pointer} .imp-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .imp-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .imp-card .fin-sub{margin-top:10px} @media(max-width:900px){.imp-grid{grid-template-columns:1fr}} /* ═══ Financeiro / conciliação ═══ */ .fin-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line,#e6eaf2)} .fin-tab{background:none;border:none;padding:10px 16px;font-size:13.5px;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit} .fin-tab.on{color:#466BDB;border-bottom-color:#466BDB} .fin-tab:hover{color:#1b2740} .fin-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap} .fin-filtros{display:flex;gap:6px} .fin-f{background:#fff;border:1px solid #e2e8f3;border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .fin-f.on{background:#466BDB;color:#fff;border-color:#466BDB} .fin-f span{opacity:.75;margin-left:3px} .fin-prog{font-size:12px;color:var(--tx3);font-weight:600} .fin-tbl td{vertical-align:middle} .fin-tbl tr.fin-p{background:#fffbf0} .fin-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ═══ CONCILIAÇÃO EM LISTA (.fcl-*) ════════════════════════════════════════ Extrato e Cartões eram tabelas de oito colunas. Com data, conta, valor, categoria, mês do gasto e a fileira de botões, nenhuma delas descia de ~1.100px: no notebook sobrava rolagem horizontal, e categorizar virava arrastar para o lado, achar a caixa e arrastar de volta. Encolher mais não dava — o nome do plano de contas já não cabia. Então o que mudou foi a forma: cada lançamento é uma LINHA que se dobra, como na aba Transações. A regra do desenho: UMA faixa flexível por lançamento [✓] [rosto] [nome + linha de apoio] [valor] [categoria · mês · ações] Em tela larga isso cabe numa altura só. Estreitando, o bloco de controles (.fcl-ctl) desce inteiro para baixo em vez de sair da tela — nunca há rolagem horizontal, em nenhuma largura. O que era coluna virou o texto de apoio embaixo do nome (.fcl-l2): data, conta, parcela, tipo do lançamento. */ .fcl-list{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-top:6px} .fcl-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:11px 16px; border-top:1px solid var(--bd);transition:background .12s} .fcl-row:first-child{border-top:none} .fcl-row:hover{background:var(--sf2)} .fcl-day{padding:14px 16px 6px;font-size:10.5px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--tx3);border-top:1px solid var(--bd)} .fcl-day:first-child{border-top:none} .fcl-cb{flex-shrink:0} .fcl-cb-off{width:15px;flex-shrink:0} /* o nome é o que se lê: cresce com a tela e é o último a ceder espaço. O 180px não é a largura dele, é o PISO — abaixo disso o bloco de controles desce para a linha de baixo em vez de espremer o nome. Foi calibrado para caber tudo numa faixa só num notebook de 1024px. */ .fcl-main{flex:1 1 320px;min-width:0} /* NADA de "…" no nome nem na linha de apoio: os dois quebram e mostram o texto inteiro. Cortar "Valor adicionado para PIX no Crédito" em "…PIX n" esconde exatamente o que a pessoa lê para escolher a categoria. A linha cresce em altura quando precisa — só quando precisa. */ .fcl-l1{display:flex;align-items:flex-start;gap:3px;min-width:0} .fcl-nome{font-size:14px;font-weight:600;color:var(--tx);line-height:1.3;overflow-wrap:anywhere} .fcl-l1 .fin-desc{flex:1 1 auto;min-width:0} .fcl-l1 .fin-lupa{margin-top:6px} /* a linha de apoio: cada pedaço é um , separados por "·" pelo CSS — assim o template só decide O QUE entra, não como se pontua */ .fcl-l2{font-size:11px;color:var(--tx3);margin-top:1px;line-height:1.45;overflow-wrap:anywhere} .fcl-l2 span+span::before{content:'·';margin:0 5px;opacity:.55} /* a caixinha do lançamento mora aqui, e não no meio dos controles (ver cxSeloHTML): assim um nome comprido alarga o texto de apoio, que tem para onde crescer, em vez de desmanchar a faixa de botões */ .cx-tag{font-weight:700} .fcl-val{font-size:14px;font-weight:800;color:var(--tx);white-space:nowrap;text-align:right; min-width:96px;font-variant-numeric:tabular-nums;flex-shrink:0} /* `flex:0 0 auto`: o bloco de controles tem o tamanho do que carrega e NÃO encolhe. Se encolhesse, a categoria e os botões se atropelariam dentro dele (a caixa de categoria some, os botões caem para uma segunda altura) — quem cede primeiro é o nome, que tem de onde tirar; e quando nem isso basta, o bloco inteiro desce para a linha de baixo. */ /* `nowrap` aqui é o que faz o bloco valer o tamanho do que carrega: com `wrap`, o navegador media o bloco como se ele já fosse dobrar, dava a ele menos largura do que o conteúdo pede e os botões caíam sozinhos para uma segunda altura mesmo com a tela inteira sobrando. Quem dobra é a LINHA (.fcl-row), levando o bloco inteiro junto — no celular a regra abaixo devolve o `wrap`, aí dobrar por dentro é o certo. */ /* sem `margin-left:auto`: quem empurra os controles para a direita é o nome, que cresce. A diferença aparece quando o bloco NÃO cabe e desce para a linha de baixo — com o `auto` ele descia colado à direita, longe do lançamento a que pertence, e a lista parecia quebrada; sem ele, começa na margem. */ .fcl-ctl{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto;max-width:100%} /* largura DECLARADA na caixa de categoria, não herdada do : sem isso o navegador usa a largura intrínseca do campo (~150px) para medir a faixa, e o nome do plano de contas volta a não caber — que era a queixa da tabela. */ /* 291px SEMPRE, tenha a linha alfinete ou não — e o mesmo tanto do selo logo abaixo. Era daí que vinha a lista bagunçada: a linha já categorizada carregava um botão a mais que a de baixo, estourava a faixa por uns 25px e só ela dobrava para uma segunda altura. Duas linhas iguais, desenhos diferentes. Agora ou dobram todas, ou não dobra nenhuma. Eram 268px quando a caixa levava o campo e só o 📦; o 🏷 das etiquetas entrou ao lado e os 23px dele foram somados aos DOIS números em vez de descontados do campo — senão o nome do plano de contas voltaria a não caber, que é a queixa que a largura declarada veio resolver. */ .fcl-cat{display:flex;align-items:center;gap:2px;flex:0 0 291px} /* o 📌 mora DENTRO do campo, encostado na borda direita: é um enfeite do campo, não mais uma peça na fila de controles */ .fcl-catf{position:relative;flex:1 1 auto;min-width:0} .fcl-catf .fin-cat{width:100%;min-width:0;max-width:none;box-sizing:border-box} .fcl-catf:has(.fin-regra) .fin-cat{padding-right:23px} .fcl-catf .fin-regra{position:absolute;right:3px;top:50%;transform:translateY(-50%); margin:0;padding:0;line-height:1} /* o selo (transferência, fatura, rateio) ocupa a mesma faixa do campo de categoria + o botão da caixinha: as linhas de tipos diferentes dobram (ou não dobram) todas no mesmo ponto da tela */ .fcl-selo{display:flex;align-items:center;gap:4px;flex:0 0 291px;min-width:170px} .fcl-selo .fin-sub{margin-top:0} /* o campo de mês no seu tamanho justo (o 146px geral é de formulário): cada pixel aqui é um pixel a menos de nome do lançamento na mesma faixa */ .fcl-ctl .fin-mes{flex-shrink:0;width:120px;max-width:none;padding-left:5px;padding-right:5px} .fcl-btns{display:flex;align-items:center;gap:2px;flex-shrink:0} /* buraco do tamanho do botão que não existe nesta linha (o ⇄ some quando o lançamento já está confirmado, o ✂ some no que é transferência). Sem ele a faixa encurtava e o ✓ da linha de cima ficava 30px fora do ✓ da de baixo — confirmar em sequência virava perseguir o botão pela tela. */ .fcl-btn-off{width:30px;flex-shrink:0} /* pendente e pagamento de fatura: as mesmas cores que a tabela usava */ .fcl-row.fcl-p{background:#fffbf0} .fcl-row.fcl-p:hover{background:#fff6e2} .fcl-row.fcl-fat,.fcl-row.fcl-fatl{background:#eef2fe} /* a barra que substituiu o cabeçalho clicável da tabela */ /* A MESMA LISTA, EM MEIA TELA (Início › Transações recentes). No Financeiro ela ocupa a largura toda e cabe tudo numa linha: nome, valor, um campo de categoria de 240px, o mês do gasto e quatro botões. Na coluna da Início sobra metade disso, e com as medidas de lá cada transação virava três linhas — o nome em cima, o campo embaixo, o valor perdido no meio. Então o campo de categoria deixa de ter largura fixa e passa a dividir a sobra com o nome (`flex:1 1`), o corpo encolhe um ponto e a folga aperta. Nada some por CSS: o que não entra na Início (mês do gasto, ⇄, ✂) já não é escrito no HTML — esconder controle com display:none deixa a tabulação passando por botão invisível. */ .fcl-mini .fcl-row{padding:9px 12px;gap:8px 10px} .fcl-mini .fcl-main{flex:1 1 150px} /* o descritor cru do banco ("PIX RECEBIDO REM: CLINICA ORTOPEDICA LTDA") passa de duas linhas e empurra a linha inteira para 90px de altura. Duas bastam para reconhecer o gasto, e o texto completo continua no title */ .fcl-mini .fcl-nome{font-size:13px;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .fcl-mini .fcl-val{font-size:13px} .fcl-mini .fcl-ctl{flex:1 1 160px;justify-content:flex-end} .fcl-mini .fcl-cat{flex:1 1 auto;min-width:0} .fcl-mini .fcl-cat .fin-cat{width:100%;min-width:96px} .fcl-mini .fcl-selo{flex:0 1 auto;min-width:0} .fcl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 2px 6px; font-size:11.5px;color:var(--tx3)} .fcl-all{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .fcl-sorts{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto} .fcl-sort{background:none;border:1px solid transparent;border-radius:8px;padding:3px 8px; font-size:11.5px;font-family:inherit;color:var(--tx3);cursor:pointer;white-space:nowrap} .fcl-sort:hover{color:#466BDB;border-color:#dbe3f2} .fcl-sort.on{color:#466BDB;border-color:#c7d4fb;background:#f6f9ff;font-weight:700} /* a barra de páginas, acima e abaixo da lista: mesma família dos botões de ordenar. A lista já tem cromo demais para ganhar mais uma caixa colorida — e o "101–200 de 437" à esquerda é o que a pessoa procura primeiro. */ .fin-pag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 2px; font-size:11.5px;color:var(--tx3)} .fin-pag-navs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto} .fin-pag-b{background:none;border:1px solid transparent;border-radius:8px;padding:3px 9px; font-size:11.5px;font-family:inherit;color:var(--tx3);cursor:pointer;white-space:nowrap} .fin-pag-b:hover:not(:disabled){color:#466BDB;border-color:#dbe3f2} .fin-pag-b.on{color:#466BDB;border-color:#c7d4fb;background:#f6f9ff;font-weight:700} .fin-pag-b:disabled{opacity:.4;cursor:default} .fin-pag-gap{opacity:.6} @media(max-width:640px){ .fcl-row{padding:11px 12px} .fcl-val{min-width:0;margin-left:auto} .fcl-ctl{flex:1 1 100%;flex-wrap:wrap} .fcl-cat,.fcl-selo{flex:1 1 100%;max-width:none} .fcl-catf{flex:1 1 auto} /* o buraco acompanha o alvo de toque maior (.fin-ok vira 38px no celular) */ .fcl-btn-off{width:38px} /* no celular a linha de apoio quebra em vez de ser cortada: é lá que moram data, conta e parcela, e cortar justo a conta não ajuda ninguém */ .fcl-l2{white-space:normal} } .fin-sub{font-size:10.5px;color:var(--tx3);margin-top:2px} .fin-r{text-align:right;white-space:nowrap} .fin-nowrap{white-space:nowrap} .fin-sel{border:1px solid #e2e8f3;border-radius:7px;padding:5px 7px;font-size:12px;font-family:inherit;background:#fff;max-width:180px} .fin-dt{border:1px solid #e2e8f3;border-radius:7px;padding:5px 7px;font-size:12px;font-family:inherit;background:#fff} .fin-empty{text-align:center;color:var(--tx3);padding:22px} .fin-cards{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px} .fin-cardb{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e2e8f3;border-radius:10px;padding:8px 13px;font-size:13px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit} .fin-cardb.on{border-color:#466BDB;color:#1b2740;box-shadow:0 0 0 2px rgba(70,107,219,.12)} .fin-cdot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px} .fin-badge{background:#fdf6e7;color:#8a5a08;border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:700} .fin-grp{border:none;border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit} .fin-grp.cv{background:#fdeceb;color:#b3322b} .fin-grp.qv{background:#fdf6e7;color:#8a5a08} .fin-grp.inv{background:#e6f7f1;color:#0f7a5c} .fin-grp.rec{background:#eaf2ff;color:#2452b3} .fin-grp.trf{background:#eef1f6;color:#49566b} /* ─── a coluna Custo × qualidade de vida, no Plano de contas ────────── Mesmo chip do grupo, e de propósito: são as duas respostas da mesma linha, e dois desenhos diferentes fariam parecer que uma é escolha e a outra é dado. O que separa as duas colunas é o CONTORNO — a de eixo abre vazada, com a cor só na borda e no texto, e enche quando a escolha é da pessoa. Sem isso a coluna ficava com uma fileira de chips cheios sem dizer quais já foram revisados e quais são palpite do grupo — e revisar o plano de contas é exatamente percorrer essa diferença. O `.on` (escolhido) volta a ser o chip cheio, como o do grupo ao lado. */ /* CHEIO = escolhido por você; VAZADO = ainda é o palpite pelo grupo. O chip cheio não é regra nova: é o `.fin-grp.cv/.qv` acima, com a mesma chapa do chip do grupo. Quem tem regra própria é o vazado, e ele só tira a chapa — a cor do texto continua vindo dali, resolvida nos dois temas. `:not(.on)` e não `.on{...}` de volta: reverter um background herdado exigiria repetir o hex de cada tema, e é exatamente disso que o par de tokens do chip do grupo já dá conta. */ .fin-grp.fin-eixo:not(.on){background:none;box-shadow:inset 0 0 0 1px currentColor;opacity:.72} .fin-eixo-na{color:var(--tx3);font-size:12px} .fin-x{background:none;border:none;color:#cbd5e1;font-size:15px;cursor:pointer} .fin-x:hover{color:#e0524b} /* vincular pagamento × lançamentos da outra conta (o ⇄ do extrato) */ .fin-vinc-alvo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:#f8fafd;border:1px solid #eef2f9;border-radius:11px;padding:11px 14px;margin-bottom:14px;font-size:13px} .fin-vinc-alvo span{font-size:11.5px;color:var(--tx3)} .fin-vinc-alvo-v{margin-left:auto;font-size:16px} .fin-vinc-list{max-height:296px;overflow-y:auto;border:1px solid #e2e8f3;border-radius:10px;background:#fff} .fin-vinc-i{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid #f1f5f9;cursor:pointer;font-size:12.5px} .fin-vinc-i:last-child{border-bottom:none} .fin-vinc-i:hover{background:#f8fafd} .fin-vinc-i.on{background:#eef4ff} .fin-vinc-dt{color:var(--tx3);white-space:nowrap} .fin-vinc-ds{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155} .fin-vinc-vl{white-space:nowrap;font-weight:600} .fin-vinc-tot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:#64748b} .fin-vinc-tot.ok{color:#0f7a5c} .fin-vinc-tot.dif{color:#8a5a08} /* fatura pré-montada (fatura-ciclo.js): faixa da fatura no topo do ⇄ e a explicação da diferença (juros/IOF) com o botão de lançar */ .fin-vinc-fat{background:#eef2fe;border:1px solid #d6dffc;border-radius:9px;padding:8px 12px;margin-bottom:8px;font-size:12.5px;color:#2b3f7a} .fin-vinc-ajuda{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff7e8;border:1px solid #f3dfae;border-radius:9px;padding:9px 12px;margin-top:8px;font-size:12.5px;color:#6b4a06} .fatc-sec{background:#f8fafd;border:1px solid #e3e9f4;border-radius:11px;padding:10px 14px;margin:8px 0 10px} .fatc-sec summary{cursor:pointer;font-size:13.5px;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .fatc-sec summary::-webkit-details-marker{display:none} .fatc-sec summary::before{content:'▸';color:var(--tx3);font-size:12px} .fatc-sec[open] summary::before{content:'▾'} .fatc-sec .fin-scroll{margin-top:8px} .fatc-sem-ciclo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px} .fatc-tbl td,.fatc-tbl th{font-size:13px} .fatc-mes{font-weight:600;color:#1e293b;text-decoration:none;border-bottom:1px dashed #cbd5e1} .fatc-mes:hover{color:#466BDB;border-color:#466BDB} .fatc-ok{color:#0f7a5c;font-weight:600} .fatc-bate{color:#0f7a5c} .fatc-quase{color:#8a5a08} .fatc-row.bate td,.fatc-row.quase td{background:#fffbf0} .fatc-hint{margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap} /* rateio (rateio.js): linhas categoria · descrição · valor, e o 📌 de regra na célula */ .fin-rat-list{border:1px solid #e2e8f3;border-radius:10px;background:#fff;padding:6px 8px} .fin-rat-h,.fin-rat-l{display:grid;grid-template-columns:1.3fr 1.2fr 150px 28px;gap:8px;align-items:center} .fin-rat-h{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;padding:2px 4px} .fin-rat-l{padding:4px 0;border-top:1px solid #f1f5f9} .fin-rat-l input{width:100%;font-size:12.5px;padding:5px 7px;border:1px solid #dbe2ee;border-radius:7px} .fin-rat-val{display:flex;align-items:center;gap:4px} .fin-rat-val input{text-align:right} .fin-rat-tools{display:flex;gap:8px;margin-top:8px} .fin-regra{font-size:11px;margin-left:2px;opacity:.55} .fin-regra:hover{opacity:1} @media (max-width:640px){.fin-rat-h,.fin-rat-l{grid-template-columns:1fr 1fr 110px 24px}} .fin-addcat{display:flex;gap:8px;margin-bottom:12px} .fin-addcat input{flex:1;max-width:340px;border:1px solid #e2e8f3;border-radius:8px;padding:8px 11px;font-size:13px;font-family:inherit} /* o cartão de médias: sobrou para o Planejamento, que ainda o usa — na Início o quadro saiu (ver o comentário da montagem, em financeiro.js) */ .med-wrap{background:#fff;border:1px solid var(--line,#e6eaf2);border-radius:14px;padding:18px 20px;margin-bottom:18px; container-type:inline-size} /* Saldo no próximo pagamento (cliCicloBloco): o número grande É a resposta, e a conta que o produz mora atrás do clique. Aberta por padrão, ela pedia que se lesse a aritmética inteira antes de chegar ao número que se foi buscar. O é o próprio número — não há linha de cabeçalho a mais para clicar —, e o marcador nativo sai porque quem anuncia o gesto é o "ver a conta" na outra ponta da mesma linha, à altura do número. Os dois rótulos (b e em) existem para o texto acompanhar o estado: um botão que continua dizendo "ver" com a conta na tela manda o olho procurar o que já está aberto. */ .cic-fold>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap; align-items:center;gap:10px 16px} .cic-fold>summary::-webkit-details-marker{display:none} .cic-fold[open]>summary{margin-bottom:16px} .cic-sum{flex:1 1 auto;min-width:0} .cic-sum .cli-bignum{margin:0} /* a virada, resumida sob o numero grande: a resposta "e depois do dia do pagamento?" sem precisar abrir a conta */ .cic-depois{margin-top:4px;font-size:12.5px;color:var(--tx3);line-height:1.45} .cic-depois b{color:var(--tx);font-weight:800;font-variant-numeric:tabular-nums} .cic-depois.re,.cic-depois.re b{color:var(--re)} /* linha clicavel da conta (abre o popup de detalhe) e o popup em si */ .cli-conta-r.cli-click{cursor:pointer} .cli-conta-r.cli-click:hover{background:var(--sf2)} .cli-conta-r.cli-click .cli-conta-nm::after{content:' B8';color:var(--tx3);font-size:11px} .cic-pop-g{margin-top:14px} .cic-pop-h{display:flex;justify-content:space-between;gap:12px;font-size:14px; padding-bottom:6px;border-bottom:1px solid var(--bd)} .cic-pop-r{display:flex;justify-content:space-between;gap:12px;padding:7px 0; border-bottom:1px solid var(--bd2);font-size:13px} .cic-pop-r:last-child{border-bottom:0} .cic-pop-r span i{display:block;font-style:normal;font-size:11px;color:var(--tx3)} .cic-pop-r span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap} .cic-ver{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:700;color:var(--br)} .cic-ver em{font-style:normal} .cic-ver em,.cic-fold[open] .cic-ver b{display:none} .cic-fold[open] .cic-ver em{display:inline} .cic-ver::after{content:'▾';font-size:10px} .cic-fold[open] .cic-ver::after{content:'▴'} .cic-fold>summary:hover .cic-ver{text-decoration:underline} .cic-fold:focus-visible>summary .cic-ver{text-decoration:underline} /* ═══ A conta do período ═══════════════════════════════════════════════ O bloco "Seu resultado" mostrava sete cards claros lado a lado. Cada um estava certo e o conjunto não dizia nada: card não tem sinal, e sem sinal ninguém vê que "Resultado do período" É "Renda menos custo de vida menos qualidade de vida". Quem abre o app não é de finanças — a conta tem de vir feita, não montável. Então o desenho é o da conta no papel: uma linha por parcela, o operador num disco à esquerda, o valor à direita e o total numa faixa tingida logo abaixo do sinal de igual. O TRILHO que passa atrás dos discos é o parêntese: ele começa na renda, atravessa as subtrações e morre no igual, dizendo com uma linha de 1px o que "( )" diria com dois caracteres — e sem os dois arcos gigantes, que num card de 430px comem meia largura. Duas etapas empilhadas, cada uma com o próprio trilho: renda − gastos = resultado; resultado − aportes = o que ficou livre. Separar é o que deixa claro que aporte não é gasto — é dinheiro que continua sendo da pessoa. A BARRA sob cada saída é a resposta para "isso é muito?", que o valor sozinho nunca dá: R$ 4.554,64 não quer dizer nada, 34% da renda quer. Tudo sai da paleta do app (--gr, --bl, --go, --re, --pu e os tons `2` de fundo), que já troca sozinha entre claro e escuro — nenhuma cor fixa aqui, nenhuma regra `html[data-theme=dark]` para manter em dobro. A escala do número vem da LARGURA DO PRÓPRIO CARD (container query) porque o bloco vive em dois lugares de largura muito diferente: a coluna estreita da Início a partir de 1280px e a tela inteira abaixo disso. */ .cli-conta{container-type:inline-size} .cli-conta-st{position:relative} .cli-conta-st+.cli-conta-st{margin-top:6px} .cli-conta-r{--ct:var(--tx);position:relative;display:grid; grid-template-columns:22px minmax(0,1fr) auto;column-gap:11px;row-gap:8px; align-items:start;padding:10px 12px;border-radius:11px} .cli-conta-r.gr{--ct:var(--gr)}.cli-conta-r.re{--ct:var(--re)} .cli-conta-r.bl{--ct:var(--bl)}.cli-conta-r.go{--ct:var(--go)} .cli-conta-r.pu{--ct:var(--pu)} /* o trilho. O corte em 21px não é número mágico: é o centro do disco — 10px de padding do alto da linha + 11px de meio disco. Na primeira linha ele nasce aí, na última morre aí, e no meio atravessa inteiro. */ .cli-conta-r::before{content:'';position:absolute;left:22px;top:0;bottom:0; width:1px;background:var(--bd2)} .cli-conta-st>.cli-conta-r:first-child::before{top:21px} .cli-conta-st>.cli-conta-r:last-child::before{bottom:calc(100% - 21px)} .cli-conta-op{grid-area:1/1;position:relative;z-index:1;width:22px;height:22px; border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--sf);border:1px solid color-mix(in srgb,var(--ct) 42%,transparent); color:var(--ct);font-size:13px;font-weight:800;line-height:1} /* a renda não é operação, é o ponto de partida: disco cheio, sem sinal */ .cli-conta-r.is-in .cli-conta-op{border-color:transparent} .cli-conta-r.is-in .cli-conta-op::after{content:'';width:9px;height:9px; border-radius:50%;background:var(--ct)} .cli-conta-r.is-eq .cli-conta-op{background:var(--ct);border-color:var(--ct);color:var(--sf)} .cli-conta-nm{grid-area:1/2;min-width:0;padding-top:2px; font-size:13.5px;font-weight:700;color:var(--tx);line-height:1.25} .cli-conta-nm i{display:block;font-style:normal;font-size:11.5px;font-weight:500; color:var(--tx3);margin-top:3px;line-height:1.35} .cli-conta-vl{grid-area:1/3;text-align:right;color:var(--ct);white-space:nowrap; font-size:clamp(16px,5.2cqi,20px);font-weight:800;letter-spacing:-.4px;line-height:1.15; font-variant-numeric:tabular-nums} .cli-conta-r.is-in .cli-conta-vl, .cli-conta-r.is-eq .cli-conta-vl{font-size:clamp(18px,6.2cqi,24px)} .cli-conta-r.is-fim .cli-conta-vl{font-size:clamp(20px,7cqi,28px)} /* o total da etapa em faixa tingida — é o que o olho procura ao rolar */ .cli-conta-r.is-eq{background:var(--sf2)} .cli-conta-r.is-eq.gr{background:var(--gr2)} .cli-conta-r.is-eq.re{background:var(--re2)} .cli-conta-r.is-fim{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ct) 30%,transparent)} .cli-conta-bar{grid-area:2/2/3/4;display:flex;align-items:center;gap:10px} .cli-conta-bar i{flex:1 1 auto;min-width:0;display:block;height:5px;border-radius:99px; background:color-mix(in srgb,var(--ct) 15%,transparent);overflow:hidden} .cli-conta-bar i span{display:block;height:100%;border-radius:99px;background:var(--ct)} .cli-conta-bar em{flex:0 0 auto;font-style:normal;font-size:10.5px;font-weight:700; color:var(--ct);letter-spacing:.02em} /* ─── o rodapé: a renda repartida numa faixa só ──────────────────────── "Margem de poupança 12%" era um card a mais e uma palavra a menos: taxa é vocabulário de quem já sabe. Aqui a mesma informação vira a faixa inteira da renda repartida, com a fatia de cada parte. A legenda fala em PERCENTUAL, que é a unidade da faixa. Chegou a falar em reais ("R$ 12 investido" de cada R$ 100), e o "R$" mentia: ao lado de uma barra de proporção, o número era lido como valor gasto, não como fatia — e "R$ 12" ao lado de um aporte de R$ 1.607,39 não fecha com nada. */ .cli-conta-ft{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)} .cli-conta-ft-t{font-size:10.5px;font-weight:800;text-transform:uppercase; letter-spacing:.09em;color:var(--tx3)} .cli-conta-100{display:flex;gap:3px;margin-top:10px;height:12px} .cli-conta-100 .s{height:100%;border-radius:3px;min-width:3px} .cli-conta-100 .s.gr{background:var(--gr)}.cli-conta-100 .s.re{background:var(--re)} .cli-conta-100 .s.bl{background:var(--bl)}.cli-conta-100 .s.go{background:var(--go)} .cli-conta-100 .s.pu{background:var(--pu)} .cli-conta-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px} .cli-conta-lgi{--ct:var(--tx3);display:flex;align-items:center;gap:6px; font-size:11.5px;color:var(--tx2)} .cli-conta-lgi.gr{--ct:var(--gr)}.cli-conta-lgi.re{--ct:var(--re)} .cli-conta-lgi.bl{--ct:var(--bl)}.cli-conta-lgi.go{--ct:var(--go)} .cli-conta-lgi.pu{--ct:var(--pu)} .cli-conta-lgi::before{content:'';width:8px;height:8px;border-radius:3px; background:var(--ct);flex:0 0 auto} .cli-conta-lgi b{color:var(--tx);font-weight:800;font-variant-numeric:tabular-nums} .cli-conta-nt{margin-top:11px;font-size:12px;color:var(--tx3);line-height:1.5} .cli-conta-nt b{color:var(--go);font-weight:800} .cli-conta-nt.ok b{color:var(--gr)} /* Card estreito (a coluna da Início espremida, ou o celular em pé): o valor desce para baixo do nome em vez de disputar a mesma linha com ele. Cortar "Qualidade de vida" com reticências para caber ao lado de R$ 4.554,64 seria perder o nome da parcela — numa conta, o pior lugar para economizar. */ @container (max-width:320px){ .cli-conta-r{grid-template-columns:22px minmax(0,1fr);row-gap:6px} .cli-conta-vl{grid-area:2/2;text-align:left} .cli-conta-bar{grid-area:3/2/4/3} } /* ═══ Caixa: a cartela ═════════════════════════════════════ Por que lista e não grade está em inicio.js, no cliCaixaHTML. Aqui só o desenho: duas colunas (rótulo, valor), filete entre as linhas e os fechamentos num bloco de fundo próprio. Filete e pastilha saem de color-mix com `transparent`, e não de tons fixos: a mesma linha aparece sobre o branco do cartão e sobre o cinza do bloco de fechamento — e no escuro sobre os dois equivalentes. Misturados com transparent, os dois pegam o fundo que estiver embaixo, e o quadro inteiro atravessa a troca de tema sem uma regra de tema escuro sequer. */ .flx{margin-top:2px} .flx-grp{border-radius:14px} .flx-fecha{background:var(--sf2);padding:4px 12px;margin-top:12px} .flx-row{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;column-gap:14px;padding:10px 2px;min-width:0} .flx-row+.flx-row{border-top:1px solid color-mix(in srgb,var(--tx) 9%,transparent)} .flx-rot{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 8px;min-width:0; font-size:13px;font-weight:600;color:var(--tx2);line-height:1.35} /* o complemento ("em conta", "fim do mês") vira pastilha ao lado do rótulo. Antes ele morava embaixo do número, em 11px cinza, onde ninguém o lia — e era ele que distinguia saldo atual de saldo projetado. */ .flx-sub{font-style:normal;font-size:10px;font-weight:700;color:var(--tx3); letter-spacing:.03em;padding:2px 8px;border-radius:99px;white-space:nowrap; background:color-mix(in srgb,var(--tx) 6%,transparent)} .flx-val{font-size:16px;font-weight:700;color:var(--tx);letter-spacing:-.3px; font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .flx-row.gr .flx-val{color:var(--gr)}.flx-row.re .flx-val{color:var(--re)} .flx-row.bl .flx-val{color:var(--bl)}.flx-row.pu .flx-val{color:var(--pu)} .flx-row.go .flx-val{color:var(--go)} /* linha que é recorte da de cima (a fatura dentro das saídas): recuo, rótulo miúdo e número em tom de texto — ela informa, não soma. O seletor do valor leva `.flx-row.flx-in` para ganhar do tom da linha, que é vermelho e pintaria o número junto. */ .flx-in{padding-left:18px} .flx-in .flx-rot{font-size:12px;font-weight:500;color:var(--tx3)} .flx-row.flx-in .flx-val{font-size:14px;font-weight:600;color:var(--tx2)} /* o único número grande do quadro */ .flx-forte{padding:12px 2px} .flx-forte .flx-rot{font-size:13.5px;font-weight:700;color:var(--tx)} .flx-row.flx-forte .flx-val{font-size:21px;font-weight:800;letter-spacing:-.5px} /* Quadro largo — a tela empilhada, abaixo de 1280px, onde o Caixa ocupa a página inteira: aí uma coluna única de linhas deixaria meio palmo de vazio entre o rótulo e o número, e o olho perde a linha no meio do caminho. Com os dois blocos lado a lado, o movimento fica à esquerda e os fechamentos à direita, cada um com a largura de leitura de uma lista. É container query e não media query porque o que decide é a largura DO QUADRO, não a da tela: o mesmo bloco aparece com ~530px na coluna da Início em 1280px+ (onde a coluna única é a certa) e com ~1050px empilhado em 1279px — uma largura de tela maior, um quadro mais estreito. */ .flx-sec{container-type:inline-size} @container (min-width:640px){ .flx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;align-items:start} .flx-fecha{margin-top:0;padding:6px 14px} } /* tela estreita: o rótulo já quebra sozinho (flex-wrap), então só o número precisa ceder — e ele cede pouco, porque é o que se veio ler. */ @media(max-width:420px){ .flx-row{column-gap:12px} .flx-val{font-size:15px} .flx-row.flx-forte .flx-val{font-size:19px} } /* ═══ Planejado x Realizado — painel de leitura ═══════════════════════ Desenho de monitor de pressão: rótulo em caixa alta e unidade miúda à esquerda, número grande à direita, três leituras separadas por filete e uma escala com faixas na lateral. O tamanho do número sai da LARGURA DO PRÓPRIO PAINEL (container query), porque ele aparece em dois contextos de largura muito diferente — a coluna estreita da Início e o quadro inteiro do Resultado — e um px fixo serve mal aos dois. */ .pxr-mon{background:var(--sf);border:1px solid var(--bd2);border-radius:16px; padding:12px 14px 11px;container-type:inline-size} .pxr-mon-h{display:flex;justify-content:space-between;align-items:center;gap:8px; font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--tx3);margin-bottom:4px} .pxr-mon-id{border:1px solid var(--bd2);border-radius:5px;padding:1px 6px;font-size:9px;flex-shrink:0} .pxr-mon-b{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:10px} .pxr-rows{min-width:0} /* `auto minmax(0,1fr)`: quem cede largura é o número, que encolhe pelo clamp, e não o nome da leitura — num painel, o rótulo cortado é o pior corte. */ .pxr-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; column-gap:10px;padding:9px 0;border-top:1px solid var(--bd)} .pxr-row:first-child{border-top:none;padding-top:4px} .pxr-row:last-child{padding-bottom:4px} .pxr-lab{font-size:15px;font-size:clamp(11px,4.4cqi,17px);font-weight:800; text-transform:uppercase;letter-spacing:.02em;color:var(--tx2);line-height:1.15} .pxr-lab i{font-style:normal;color:var(--tx3);margin-right:4px} .pxr-lab span{display:block;text-transform:none;letter-spacing:0;font-weight:600; font-size:9.5px;font-size:clamp(8.5px,2.8cqi,11px);color:var(--tx3);margin-top:1px} /* o número nunca quebra: "13.910" mede ~3,4 larguras de "em", e o teto de 16cqi deixa folga para a fonte de sistema, mais larga que a Inter. */ .pxr-val{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; font-size:38px;font-size:clamp(25px,16cqi,58px);font-weight:700;letter-spacing:-.03em; line-height:1;color:var(--tx)} .pxr-val.gr{color:var(--gr)}.pxr-val.go{color:var(--go)}.pxr-val.re{color:var(--re)} /* A escala. As três faixas dividem 0–130% do orçamento: verde até 80%, âmbar até o teto, vermelho acima dele — 61,5% / 15,4% / 23,1% da altura. */ .pxr-scale{position:relative;min-height:130px} .pxr-bar{position:absolute;right:0;top:0;bottom:0;width:11px;border-radius:3px; overflow:hidden;border:1px solid var(--bd2);display:flex;flex-direction:column-reverse} .pxr-bar i{display:block;width:100%} .pxr-bar .s0{flex:0 0 61.5%;background:color-mix(in srgb,var(--gr) 28%,transparent)} .pxr-bar .s1{flex:0 0 15.4%;background:color-mix(in srgb,var(--go) 45%,transparent)} .pxr-bar .s2{flex:0 0 23.1%;background:color-mix(in srgb,var(--re) 45%,transparent)} .pxr-tick{position:absolute;right:15px;transform:translateY(50%);white-space:nowrap; font-size:9px;font-weight:700;color:var(--tx3)} /* o cursor atravessa a barra, como o marcador do aparelho: é ele que diz onde a medida caiu. A auréola na cor do fundo o separa da faixa. */ .pxr-cur{position:absolute;right:-2px;width:15px;height:5px;border-radius:2px; transform:translateY(50%);background:var(--tx);box-shadow:0 0 0 1.5px var(--sf)} .pxr-cur.gr{background:var(--gr)}.pxr-cur.go{background:var(--go)}.pxr-cur.re{background:var(--re)} /* As duas leituras de planejamento (a pagar / fecha em) vêm em corpo menor e com um filete mais forte acima: são derivadas da medida, não a medida. */ .pxr-row.sec{padding:7px 0} .pxr-row.sec+.pxr-row.sec{border-top-style:dashed} .pxr-rows .pxr-row.sec:first-of-type{border-top-width:2px} .pxr-row.sec .pxr-lab{font-size:12px;font-size:clamp(10px,3.4cqi,13px);font-weight:700;color:var(--tx3)} .pxr-row.sec .pxr-lab span{font-size:9px;font-size:clamp(8px,2.5cqi,10px)} .pxr-row.sec .pxr-val{font-size:26px;font-size:clamp(18px,9cqi,32px);font-weight:700} /* o cursor vazado é a projeção — "para onde a medida vai se só acontecer o que já está compromissado". Vazado e não sólido de propósito: previsão não pode ter o mesmo peso visual da medida. */ .pxr-cur.gh{background:none;height:8px;border:1.5px solid var(--tx);border-radius:2px;box-shadow:none} .pxr-cur.gh.gr{background:none;border-color:var(--gr)} .pxr-cur.gh.go{background:none;border-color:var(--go)} .pxr-cur.gh.re{background:none;border-color:var(--re)} .pxr-mon-f{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px; border-top:1px solid var(--bd);padding-top:9px} .pxr-diag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap} .pxr-diag.gr{background:var(--gr2);color:var(--gri)} .pxr-diag.go{background:var(--go2);color:var(--goi)} .pxr-diag.re{background:var(--re2);color:var(--rei)} .pxr-mini{font-size:11.5px;color:var(--tx3)} .pxr-mini b{color:var(--tx2);font-weight:700;font-variant-numeric:tabular-nums} .pxr-mini+.pxr-mini{border-left:1px solid var(--bd);padding-left:7px} /* Painel estreito (a coluna da Início no celular): a escala afina e as leituras secundárias descem para uma linha só. */ @container (max-width:300px){ .pxr-mon-b{grid-template-columns:minmax(0,1fr) 34px} .pxr-tick{display:none} } /* No escuro o painel vira aparelho: fundo preto e halo no número, que é o que o tubo faz com o fósforo — mesmo tratamento do painel da Início. */ html[data-theme=dark] .pxr-mon{background:#050708;border-color:#1e2530} html[data-theme=dark] .pxr-val{text-shadow:0 0 7px currentColor} html[data-theme=dark] .pxr-cur{box-shadow:0 0 0 1.5px #050708} .med-h{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px} .med-h span{font-weight:600;text-transform:none;letter-spacing:0;color:#cbd5e1} .med-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .med-c{background:#f8fafd;border:1px solid #eef2f9;border-radius:11px;padding:13px 15px; container-type:inline-size} /* O RÓTULO TAMBÉM NÃO QUEBRA. "Qualidade de vida" é o único que não cabe, e quebrado ele empurrava o valor uma linha para baixo — o card ficava mais alto que os três vizinhos e a fileira perdia o alinhamento. Mesma conta do valor, com a proporção do texto do rótulo (~8,7 "em" no mais longo). */ .med-c span{font-size:11.5px;font-size:clamp(9px,11cqi,11.5px);color:var(--tx3);font-weight:600; display:block;white-space:nowrap} /* O VALOR NÃO QUEBRA LINHA. "R$ 12.601,83" em 19px pede ~120px; na coluna estreita da Início sobrava ~100px e o "R$" ficava sozinho na primeira linha, como se fosse rótulo. `nowrap` sozinho resolveria a quebra e criaria transbordo, então o tamanho passa a sair da LARGURA DO PRÓPRIO CARD (`cqi`, com o container-type acima): a string mede ~5,9 larguras de "em", daí o teto de 15cqi — que ainda deixa uns 12% de folga para a fonte de sistema, mais larga que a Inter. O px repetido antes do clamp é o que vale em navegador sem container query. E os tamanhos de cada contexto (Início em duas colunas, celular) viraram o TETO do clamp em vez de valor fixo: fixos, atropelariam a conta pela ordem da folha e a quebra voltava justamente onde ela aparecia. */ .med-c b{font-size:19px;font-size:clamp(12px,15cqi,19px);display:block;margin-top:3px; white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.3px} @media(max-width:820px){.med-grid{grid-template-columns:1fr 1fr}} /* ═══ Estado vazio (sistema zerado) ═══ */ .zero-wrap{display:flex;align-items:center;justify-content:center;padding:44px 20px} .zero-card{max-width:560px;text-align:center;background:#fff;border:1px solid var(--line,#e6eaf2);border-radius:18px;padding:38px 34px} .zero-ic{font-size:42px;margin-bottom:6px} .zero-card h2{font-size:22px;font-weight:800;color:#1b2740;letter-spacing:-.3px} .zero-card p{font-size:13.5px;color:#64748b;line-height:1.6;margin-top:10px} .zero-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px} .zero-hint{font-size:12px;color:var(--tx3);margin-top:18px;border-top:1px solid #f1f5fb;padding-top:14px} /* ═══ Faturas de cartão (controle à parte + drill-down) ═══ */ #fat-modal{position:fixed;inset:0;background:rgba(20,28,45,.55);backdrop-filter:blur(3px);z-index:9200;display:none;align-items:center;justify-content:center;padding:26px} .fat-box{width:min(940px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:26px 28px;box-shadow:0 40px 90px rgba(0,0,0,.35)} .fat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px} .fat-kick{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#466BDB} .fat-head h2{font-size:22px;font-weight:800;color:#1b2740;letter-spacing:-.3px;margin-top:5px} .fat-head p{font-size:12.5px;color:#64748b;margin-top:5px;max-width:620px;line-height:1.5} .fat-x{background:none;border:1px solid #e2e8f3;border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;white-space:nowrap} .fat-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} .fat-sumc{background:#f8fafd;border:1px solid #eef2f9;border-radius:11px;padding:12px 14px} .fat-sumc span{font-size:11px;color:var(--tx3);font-weight:600;display:block} .fat-sumc b{font-size:17px;color:#1b2740;display:block;margin-top:3px} .fat-sumc.ok b{color:#16a34a}.fat-sumc.dif b{color:#d98a16} .fat-warn{font-size:12.5px;color:#8a5a08;background:#fdf6e7;border-radius:9px;padding:10px 13px;margin-bottom:12px;line-height:1.5} .fat-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .fat-chip{font-size:11.5px;color:#475569;background:#eef2fe;border-radius:20px;padding:4px 11px} .fat-tbl{width:100%;border-collapse:collapse;border:1px solid #eef2f9;border-radius:10px;overflow:hidden} .fat-tbl th{background:#f1f4fa;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64748b;padding:9px 11px;text-align:left} .fat-tbl td{padding:9px 11px;font-size:12.5px;color:#334155;border-top:1px solid #eef2f9} .fat-cat{font-size:11px;background:#f1f5fb;border-radius:20px;padding:2px 9px;color:#475569} .fat-empty{text-align:center;color:var(--tx3);padding:18px} .fat-foot2{margin-top:14px} .fat-cands{display:flex;flex-direction:column;gap:8px} .fat-cand{display:flex;align-items:center;gap:14px;background:#f8fafd;border:1px solid #eef2f9;border-radius:11px;padding:12px 14px} .fat-cand-t{font-size:14px;font-weight:700;color:#1b2740} .fat-cand-s{font-size:11.5px;color:var(--tx3);margin-top:2px} .fat-cand-r{margin-left:auto;text-align:right} .fat-cand-v{font-size:15px;font-weight:700;color:#1b2740} .fat-cand-d{font-size:11px;color:var(--tx3)} .fat-row{cursor:pointer} .fat-row:hover{background:#f6f9ff} .fat-nl{color:#466BDB;font-weight:600} .fat-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f4f7fd;border:1px solid #e2e9f6;border-radius:11px;padding:10px 13px;margin-bottom:12px} .fat-strip-l{font-size:11.5px;color:#64748b;font-weight:600} .fat-chipb{background:#fff;border:1px solid #dbe3f2;border-radius:20px;padding:5px 12px;font-size:12px;color:#334155;cursor:pointer;font-family:inherit} .fat-chipb:hover{border-color:#466BDB;color:#1b2740} .fat-chipb span{color:#466BDB;font-weight:600} .fat-sec{margin-top:16px} @media(max-width:820px){.fat-sum{grid-template-columns:1fr 1fr}} /* ═══ Onboarding do cliente (Setup inicial) ═══ */ #onb-modal{position:fixed;inset:0;background:rgba(20,28,45,.55);backdrop-filter:blur(3px);z-index:9000;display:none;align-items:center;justify-content:center;padding:26px;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif} .onb-box{width:min(1080px,96vw);height:min(720px,94vh);background:#fff;border-radius:20px;overflow:hidden;display:flex;box-shadow:0 40px 90px rgba(0,0,0,.35)} .onb-rail{width:250px;flex-shrink:0;background:#16213a;color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:4px;overflow:auto} .onb-brand{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8fb6ff;padding:0 8px 12px} .onb-rail-i{display:flex;align-items:center;gap:11px;padding:9px 10px;border:none;background:none;color:#aeb9d1;font-size:13px;font-weight:600;border-radius:9px;cursor:pointer;text-align:left;font-family:inherit;width:100%} .onb-rail-i:hover{background:rgba(255,255,255,.06);color:#fff} .onb-rail-i.active{background:#466BDB;color:#fff} .onb-rail-i.done .onb-rail-n{background:#16a34a;color:#fff;border-color:#16a34a} .onb-rail-n{width:22px;height:22px;border-radius:50%;border:1.5px solid #47557a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0} .onb-rail-i.active .onb-rail-n{border-color:#fff} .onb-skipall{margin-top:auto;background:none;border:1px solid rgba(255,255,255,.18);color:#aeb9d1;font-size:12px;font-weight:600;border-radius:8px;padding:8px;cursor:pointer;font-family:inherit} .onb-main{flex:1;display:flex;flex-direction:column;min-width:0;padding:24px 30px} .onb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .onb-kick{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#466BDB} .onb-head h2{font-size:24px;font-weight:800;color:#1b2740;letter-spacing:-.4px;margin-top:6px} .onb-head p{font-size:13.5px;color:#64748b;margin-top:4px} .onb-close{background:none;border:1px solid #e2e8f3;border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit;white-space:nowrap} .onb-prog{height:6px;background:#eef2f9;border-radius:6px;margin:16px 0;overflow:hidden} .onb-prog-f{height:100%;background:linear-gradient(90deg,#466BDB,#6ee7a8);border-radius:6px;transition:width .3s} .onb-qs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px} .onb-qs span{font-size:12px;color:#64748b} .onb-body{flex:1;overflow:auto;padding-right:4px} .onb-list{display:flex;flex-direction:column;gap:10px} .onb-item{display:flex;gap:8px;align-items:flex-start;background:#f8fafd;border:1px solid #eef2f9;border-radius:12px;padding:12px} .onb-itemgrid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:9px} .onb-fl{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#64748b;font-weight:600;grid-column:span 1} .onb-fl input,.onb-fl select{border:1px solid #e2e8f3;border-radius:8px;padding:7px 9px;font-size:13px;font-family:inherit;color:#1b2740;background:#fff;width:100%} .onb-fl.onb-chk{flex-direction:row;align-items:center;gap:7px;justify-content:flex-start;padding-top:18px} .onb-fl.onb-chk input{width:auto} .onb-itemx{width:26px;height:26px;border:none;background:#fff;border:1px solid #eef2f9;border-radius:8px;color:#cbd5e1;font-size:16px;cursor:pointer;flex-shrink:0} .onb-itemx:hover{color:#e0524b;border-color:#f3c2bf} .onb-empty{font-size:13px;color:var(--tx3);padding:22px;text-align:center;background:#f8fafd;border:1px dashed #d7e0ee;border-radius:12px} .onb-addrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .onb-note{font-size:12.5px;color:#475569;background:#eef2fe;border-radius:9px;padding:10px 13px;margin-top:14px;line-height:1.5} .onb-formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .onb-formgrid .onb-fl{grid-column:span 1} .onb-tog{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #f1f5fb;font-size:14px;color:#334155} .onb-yn{display:flex;gap:6px} .onb-yn button{border:1px solid #e2e8f3;background:#fff;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit} .onb-yn button.on{background:#466BDB;color:#fff;border-color:#466BDB} .onb-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .onb-rescard{background:#f8fafd;border:1px solid #eef2f9;border-radius:12px;padding:16px;text-align:center} .onb-resn{font-size:26px;font-weight:800;color:#466BDB} .onb-resl{font-size:12px;color:#64748b;margin-top:2px} .onb-pend{font-size:13px;color:#8a5a08;background:#fdf6e7;border-radius:9px;padding:11px 13px;margin-top:14px} .onb-ok{font-size:13px;color:#157a3a;background:#e9f7ee;border-radius:9px;padding:11px 13px;margin-top:14px} .onb-finact{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .onb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid #eef2f9;margin-top:12px} .onb-foot-r{display:flex;gap:8px;flex-wrap:wrap} /* banner no início */ .onb-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(100deg,#1b2740,#28406e);color:#fff;border-radius:14px;padding:16px 20px;margin-bottom:20px} .onb-banner-t{font-size:15px;font-weight:700} .onb-banner-s{font-size:12.5px;color:#c3cee8;margin-top:3px} /* interno */ .onb-intwrap{background:#fff;border:1px solid var(--line,#e6eaf2);border-radius:14px;padding:20px 22px;margin-bottom:18px} .onb-int-h{display:flex;justify-content:space-between;align-items:flex-start} .onb-int-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#466BDB} .onb-int-t{font-size:17px;font-weight:700;color:#1b2740;margin-top:3px} .onb-int-bar{height:8px;background:#eef2f9;border-radius:6px;margin:14px 0;overflow:hidden} .onb-int-bar div{height:100%;background:linear-gradient(90deg,#466BDB,#6ee7a8)} .onb-int-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:12px} .onb-int-cell{background:#f8fafd;border:1px solid #eef2f9;border-radius:10px;padding:10px;text-align:center} .onb-int-cell b{font-size:19px;color:#1b2740;display:block} .onb-int-cell span{font-size:10.5px;color:var(--tx3)} .onb-int-pend{font-size:12.5px;color:#8a5a08;background:#fdf6e7;border-radius:9px;padding:10px 12px} .onb-int-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#475569;margin:12px 0} .onb-int-act{margin-bottom:8px} .onb-int-jrnh{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);margin:16px 0 10px} .onb-jrn{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .onb-jrn-c{border:1px solid #eef2f9;border-radius:12px;padding:14px} .onb-jrn-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .onb-jrn-n{width:26px;height:26px;border-radius:50%;background:#eef2fe;color:#466BDB;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center} .onb-jrn-t{font-size:13.5px;font-weight:700;color:#1b2740;line-height:1.25} .onb-jrn-o{font-size:12px;color:#64748b;margin:6px 0 8px;line-height:1.4} .onb-jrn-tk{font-size:11.5px;color:#475569;margin-top:3px} .onb-stat{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap} .onb-stat.big{font-size:13px;padding:5px 14px} .onb-stat.gr{background:#e9f7ee;color:#157a3a}.onb-stat.go{background:#fdf6e7;color:#8a5a08}.onb-stat.re{background:#fdeceb;color:#b3322b}.onb-stat.x{background:#eef2f9;color:var(--tx3)} @media(max-width:820px){.onb-box{flex-direction:column;height:94vh}.onb-rail{width:100%;flex-direction:row;overflow-x:auto;gap:6px}.onb-itemgrid{grid-template-columns:repeat(2,1fr)}.onb-resumo,.onb-int-grid,.onb-jrn,.onb-formgrid{grid-template-columns:1fr 1fr}} @media(max-width:880px){.cli-cat-wrap{flex-direction:column}.cli-cat-leg{grid-template-columns:1fr}.cli-rxc-cols{flex-direction:column}.cli-obj2-grid{grid-template-columns:1fr}} /* ═══ Monitor de abertura (o véu de carregamento) ══════════════ Mesmo fundo do #auth-shell nos dois temas: o véu sai e o login aparece sem troca de cor no meio. POR QUE NÃO TEM MAIS A CAIXA DO MONITOR. A primeira versão desenhava o aparelho inteiro — moldura, papel quadriculado rosa, traço verde-fósforo com brilho e a barra de varredura passando por cima. Era fiel ao monitor de cabeceira e justamente por isso lia como equipamento ANTIGO: grade de CRT e fósforo verde são de outra década, e o véu é a primeira coisa que a pessoa vê do produto. O que ficou é só o sinal: uma linha de eletro fina, sem moldura, sem grade, sem brilho, desenhada direto no fundo. A leitura médica continua (é um eletro, e ninguém confunde), mas o vocabulário passa a ser o do resto do app — o azul da marca virando verde no fim do traço, tipografia com respiro e um halo largo no lugar da moldura. A agulha: `pathLength=1000` normaliza o comprimento do traçado, então o dashoffset anda em centésimos e não depende da geometria do path. O trilho por baixo é o caminho que a agulha ainda vai percorrer; o ponto de luz é a ponta da caneta, levada pelo no MESMO path (por isso ela nunca sai de cima do traço, em qualquer largura de tela). */ .spl{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center; background:#0f1420;padding:24px;transition:opacity .32s ease} /* o halo é o que dá profundidade sem desenhar moldura nenhuma — é ele que substitui a caixa do monitor */ .spl::before{content:'';position:absolute;left:50%;top:50%;width:min(720px,92vw);aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(70,107,219,.14),rgba(70,107,219,0) 62%)} .spl-off{opacity:0;pointer-events:none} .spl-box{position:relative;width:420px;max-width:100%;text-align:center} /* a marca sai da frente: caixa alta pequena e espaçada, como assinatura de rodapé — quem tem de ser lido aqui é a etapa, não o logotipo */ .spl-brand{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,250,.55);margin-bottom:30px} .spl-brand svg{width:19px;height:19px;flex-shrink:0;color:#466BDB} .spl-ecg{position:relative;line-height:0} /* overflow visível: o brilho da ponta da caneta passa da caixa do svg */ .spl-ecg svg{width:100%;height:auto;overflow:visible} .spl-trilho{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .spl-traco{fill:none;stroke:url(#spl-grad);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1000;animation:spl-agulha 2.8s linear infinite} @keyframes spl-agulha{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}} /* a ponta some nas bordas, onde o gradiente já apagou o traço — sem isso ela flutuaria sozinha num pedaço de linha invisível */ .spl-pena{fill:#e8fff7;animation:spl-pena 2.8s linear infinite} @keyframes spl-pena{0%{opacity:0}14%{opacity:1}84%{opacity:1}100%{opacity:0}} .spl-etapa{margin-top:26px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:#f4f6fb} /* altura reservada: a fala entra depois de 1,4s e não pode empurrar a barra para baixo quando aparece */ .spl-frase{margin-top:8px;font-size:13px;line-height:1.5;color:rgba(250,250,250,.42); min-height:39px;opacity:0;transition:opacity .35s ease} .spl-frase.on{opacity:1} .spl-bar{margin:20px auto 0;width:100%;max-width:260px;height:2px;border-radius:2px; background:rgba(255,255,255,.08);overflow:hidden} .spl-bar i{display:block;height:100%;width:8%;border-radius:2px; background:linear-gradient(90deg,#466BDB,#37d4a7);transition:width .5s cubic-bezier(.4,0,.2,1)} @media(max-width:520px){.spl-box{width:320px}.spl-etapa{font-size:15px}} @media(prefers-reduced-motion:reduce){ .spl{transition:none} .spl-traco{animation:none;stroke-dasharray:none;stroke-dashoffset:0} /* o é SMIL e não obedece a esta media query — a ponta sai de cena escondida, que é o mesmo efeito de não animar */ .spl-pena{display:none} .spl-frase{transition:none} } /* ═══ Login / cadastro (Supabase Auth) ═══ */ #auth-shell{width:100%;height:100vh;display:none;align-items:center;justify-content:center;background:#0f1420} .auth-box{width:340px;max-width:90vw;background:#fff;border-radius:16px;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.35)} .auth-brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--tx)} .auth-brand svg{width:26px;height:26px;flex-shrink:0} .auth-sub{font-size:13px;color:var(--tx3);margin:4px 0 20px} .auth-box form{margin:0} .auth-box label{display:block;margin:12px 0 5px} .auth-box input{margin-bottom:2px} .auth-box label.auth-manter{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-size:12.5px;color:var(--tx2);cursor:pointer;user-select:none} .auth-box label.auth-manter input{width:16px;height:16px;margin:0;padding:0;flex-shrink:0;accent-color:var(--bl);cursor:pointer} .auth-msg{background:var(--re2);color:var(--re);font-size:12.5px;padding:8px 10px;border-radius:8px;margin-bottom:6px} .auth-msg.ok{background:var(--gr2);color:var(--gr)} .auth-toggle{display:block;width:100%;text-align:center;background:none;border:none;color:var(--bl);font-size:12.5px;font-family:inherit;cursor:pointer;margin-top:14px;padding:4px} .auth-toggle:hover{text-decoration:underline} .auth-hint{font-size:11.5px;color:var(--tx3);margin-top:16px;line-height:1.4;text-align:center} /* ═══ Painel administrativo ═══ */ #admin-shell{width:100%;height:100vh;display:none;background:var(--bg);overflow-y:auto} .admin-wrap{max-width:920px;margin:0 auto;padding:0 24px 40px} .admin-top{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--bd);margin-bottom:20px} .admin-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--tx)} .admin-brand svg{width:24px;height:24px;flex-shrink:0} .admin-card+.admin-card{margin-top:16px} /* escolha do tipo de acesso: dois cartões grandes, o escolhido fica marcado */ .admin-modos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:4px 0 12px} .admin-modo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;background:var(--sf);border:1.5px solid var(--bd2);border-radius:12px;cursor:pointer;font:inherit;color:var(--tx);transition:border-color .15s,box-shadow .15s,background .15s} .admin-modo:hover{border-color:var(--bl)} .admin-modo.sel{border-color:var(--bl);background:var(--bl2);box-shadow:0 0 0 3px rgba(70,107,219,.15)} .admin-modo .am-ico{font-size:20px;line-height:1} .admin-modo .am-tit{font-weight:700;font-size:14px} .admin-modo .am-sub{font-size:12.5px;color:var(--tx3);line-height:1.4} .admin-modo.sel .am-tit{color:var(--bl)} #admin-users-tbl td:nth-child(2),#admin-users-tbl td:nth-child(3){white-space:nowrap} .admin-menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(20,25,40,.12);padding:6px;z-index:20;flex-direction:column;min-width:160px} .admin-menu.open{display:flex} .admin-menu button{background:none;border:none;text-align:left;padding:7px 10px;font-size:12.5px;border-radius:7px;cursor:pointer;font-family:inherit;color:var(--tx)} .admin-menu button:hover{background:var(--sf2)} /* ═══ Made For You — primeiros passos, sugestões, celebração ═══ */ .fu-card{background:linear-gradient(135deg,#f4f7ff,#fdfdff);border:1px solid #dfe7fb;border-radius:16px;padding:16px 18px;margin-bottom:20px} .fu-t{font-weight:700;font-size:14px;color:#1b2740;display:flex;justify-content:space-between;align-items:center;gap:10px} .fu-t button{background:none;border:none;color:var(--tx3);font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap} .fu-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:12px} .fu-step{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e8edf6;border-radius:11px;padding:10px 12px;font-size:12.5px;color:#334155;cursor:pointer;text-align:left;font-family:inherit} .fu-step:hover{border-color:#466BDB} .fu-step.done{opacity:.55;cursor:default;text-decoration:line-through} .fu-step.done:hover{border-color:#e8edf6} .fu-step .n{width:20px;height:20px;border-radius:50%;background:#eaf0ff;color:#466BDB;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .fu-step.done .n{background:#dcf5e7;color:#16a34a} /* boas-vindas (passo a passo do primeiro acesso) */ .bv-md{width:600px} .bv-hello{font-size:12.5px;font-weight:700;color:#466BDB;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} .bv-sub{font-size:13px;color:#64748b;line-height:1.6;margin:-8px 0 14px} .bv-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .bv-steps li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e8edf6;border-radius:12px;padding:11px 13px} .bv-steps li.done{opacity:.6} .bv-steps .n{width:24px;height:24px;border-radius:50%;background:#eaf0ff;color:#466BDB;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .bv-steps li.done .n{background:#dcf5e7;color:#16a34a} .bv-t{background:none;border:none;padding:0;font-family:inherit;font-size:13.5px;font-weight:700;color:#1b2740;cursor:pointer;text-align:left} .bv-t:hover{color:#466BDB;text-decoration:underline} .bv-steps li.done .bv-t{text-decoration:line-through} .bv-d{font-size:12.5px;color:#64748b;line-height:1.55;margin-top:2px} .bv-map{margin-top:14px;font-size:12.5px;color:#475569} .bv-map summary{cursor:pointer;font-weight:600;color:#334155} .bv-mapg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 14px;margin-top:8px} .bv-mapg div{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid #f1f5fb} .bv-mapg b{color:#1b2740} .bv-mapg span{color:#64748b;line-height:1.45} .fin-sugbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#eef6ff;border:1px solid #bfdcfd;border-radius:11px;padding:10px 14px;margin:10px 0;font-size:13px;color:#1e3a5f} /* a fila de ajustes acima da lista: UMA frase, não uma prateleira de balões. Eram três chips azuis do mesmo tamanho (sugestões prontas, sem sugestão, compras em dobro) mais a linha da porcentagem — quatro caixas disputando o mesmo canto e nenhuma dizendo por onde começar. Agora o número em negrito dá o peso, o "·" separa os assuntos e a ação é um link no meio do texto: quem só quer saber quanto falta lê a primeira metade e para por aí. */ .fin-fila{font-size:12.5px;color:var(--tx3);line-height:1.95;margin:6px 0 8px} .fin-fila b{color:var(--tx2);font-weight:800} .fin-fila-i::before{content:'·';margin:0 8px;opacity:.5} .fin-fila-d,.fin-fila-d b{color:var(--re)} /* o link vive dentro da frase: sem moldura, sem fundo — só o sublinhado que diz que dá para clicar. Um botão de verdade aqui viraria mais um balão. */ .fin-fila-a{background:none;border:none;padding:0;font:inherit;font-weight:700; color:var(--bl);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .fin-fila-a:hover{color:var(--tx)} .fin-fila-a:disabled{color:var(--tx3);text-decoration:none;cursor:default} .fin-empty-guide{padding:16px 0;line-height:1.7;color:#64748b} .fin-empty-guide .btn{margin-top:10px} .celebrate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,24,40,.25);z-index:10000;opacity:0;transition:opacity .35s;pointer-events:none} .celebrate.show{opacity:1;pointer-events:auto} .celebrate-card{background:#fff;border-radius:20px;padding:34px 46px;text-align:center;box-shadow:0 24px 70px rgba(16,24,40,.3);transform:scale(.9);transition:transform .35s;max-width:90vw} .celebrate.show .celebrate-card{transform:scale(1)} .celebrate-ic{font-size:44px} .celebrate-t{font-size:19px;font-weight:800;color:#1b2740;margin-top:10px} .celebrate-s{font-size:14px;color:#64748b;margin-top:6px} .sync-pill{position:fixed;right:22px;bottom:64px;background:#fff;border:1px solid #e2e8f3;border-radius:20px;padding:6px 13px;font-size:11.5px;font-weight:600;color:var(--tx3);z-index:9998;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;box-shadow:0 6px 18px rgba(16,24,40,.10)} .sync-pill.show{opacity:1;transform:translateY(0)} .sync-pill.ok{color:#16a34a;border-color:#c6ecd6} .sync-pill.err{color:#b3322b;border-color:#f3c9c6} /* ═══ Mobile: tabelas roláveis + layout empilhado ═══ */ /* O menu de gaveta só existe no celular. Estes dois nascem ocultos e só a media query abaixo os liga — assim o desktop não vê nem o botão nem o véu. */ .cli-burger{display:none} .cli-scrim{display:none} @media(max-width:760px){ /* ── Navegação: a sidebar de 248px vira gaveta ── Ela é fixa e sai da tela por transform; como sai do fluxo, o .cli-main passa a ocupar a largura inteira. Sem isso a sidebar comia 248px dos 375px do aparelho e sobrava uma coluna de ~117px para o app todo. */ .cli-sb{position:fixed;top:0;left:0;height:100dvh;z-index:1200; transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(16,24,40,.35)} #client-shell.cli-menu-on .cli-sb{transform:translateX(0)} .cli-scrim{display:block;position:fixed;inset:0;z-index:1100;background:rgba(15,20,32,.5); opacity:0;pointer-events:none;transition:opacity .25s} #client-shell.cli-menu-on .cli-scrim{opacity:1;pointer-events:auto} .cli-burger{display:flex;align-items:center;justify-content:center;flex-shrink:0; width:42px;height:42px;padding:0;border:1px solid #e2e8f3;border-radius:11px; background:#fff;color:#1b2740;font-size:19px;line-height:1;cursor:pointer;font-family:inherit} /* 100vh ignora a barra de endereço do celular e corta o rodapé; dvh não. */ #client-shell,.cli-main{height:100dvh} /* ── Topo ── o período quebra para a segunda linha em vez de empurrar o header */ .cli-top{padding:12px 16px;gap:10px;flex-wrap:wrap} .cli-id{flex:1;min-width:0} .cli-av{width:36px;height:36px;font-size:13px;flex-shrink:0} .cli-name,.cli-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* o olho fica ao lado do filtro no celular: o filtro encolhe (min-width:0, senão o min-content dele empurraria o olho para fora da tela) */ .cli-top-r{width:100%;gap:10px} .cli-top-r .cli-per{min-width:0} .cli-mon{width:100%;justify-content:space-between} .cli-mon span{min-width:0;flex:1} .cli-mon button{padding:6px 14px;font-size:16px} /* os cinco modos rolam de lado (regra do .cli-period lá embaixo) e o navegador do modo ativo ocupa a linha inteira debaixo deles */ .cli-per{width:100%;gap:8px} .cli-per>*{width:100%} /* chips mais justos: os cinco quase cabem sem rolar e a barra fixa não come mais tela do que precisa (ela já cresce uma linha no celular) */ .cli-per .cli-period button{padding:6px 8px;font-size:11.5px} .cli-per-cst{justify-content:space-between} .cli-per-cst input{flex:1;min-width:0} .cli-per-all{text-align:center} /* ── Conteúdo ── */ #cli-content{padding:18px 16px 60px} .cli-hero{flex-direction:column;align-items:flex-start;padding:20px 18px} .cli-hero-res{text-align:left;width:100%;box-sizing:border-box} /* Duas colunas só cabem se o cartão couber: o min-content dele era 168px contra ~164px de trilha. Menos padding e valor menor resolvem sem ir para coluna única, que deixaria os 8 indicadores num rolo interminável. */ .cli-kpis{grid-template-columns:1fr 1fr;gap:10px} /* Numa linha só, sete cards em tela de celular viram sete tirinhas ilegíveis: aqui eles voltam a quebrar. */ .cli-kpis-sm{grid-auto-flow:row;grid-template-columns:1fr 1fr!important} .cli-kpi{padding:14px 13px} .cli-kpi-v{font-size:19px} .cli-sec{padding:18px 16px} .cli-blockh{flex-wrap:wrap;gap:8px} /* Filho de grid tem min-width:auto e por isso estica o pai além da tela; o min-width:0 é o que permite a tabela de dentro rolar sozinha. */ .cli-grid2,.cli-objgrid,.cli-kpis,.cli-sec{min-width:0} .cli-grid2>*,.cli-objgrid>*,.cli-kpis>*{min-width:0} /* os chips de período rolam de lado em vez de quebrar em três linhas */ .cli-period{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} .cli-period button{flex-shrink:0} /* a conciliação virou lista e se dobra sozinha; o resto das tabelas ainda rola de lado no celular */ .fin-tbl,.cli-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .fin-bar{flex-direction:column;align-items:stretch} .fin-tools{flex-direction:column} /* o width:100% sozinho não bastava: o min-width antigo (230/210px) vencia */ .fin-search,.fin-bulk input{width:100%;min-width:0;box-sizing:border-box} .fu-steps{grid-template-columns:1fr} .fin-cards{flex-wrap:wrap} /* Abaixo de 16px o Safari do iPhone dá zoom sozinho a cada campo focado. */ input,select,textarea{font-size:16px} /* alvos de toque: 30px é pequeno demais para o dedo */ .fin-ok{width:38px;height:38px} } /* Aparelho de 320px (SE e afins): a trilha cai para 117px e aí "R$ 18.400,00" quebra em duas linhas. Valor em dinheiro partido no meio confunde mais do que a lista comprida — abaixo daqui vai uma coluna só. */ @media(max-width:360px){ .cli-kpis{grid-template-columns:1fr} } /* ═══ Assistente de importação (Conta → Arquivos → Revisar) ═══ */ .wiz-md{max-width:620px;width:100%} .wiz-steps{display:flex;gap:10px;margin:2px 0 18px;flex-wrap:wrap} .wiz-step{font-size:12px;font-weight:600;color:var(--tx3);padding:4px 12px;border-radius:20px;background:#f1f5fb} .wiz-step.on{color:#fff;background:#466BDB} .wiz-step.done{color:#16a34a;background:#e6f7ee} .wiz-sec{margin-bottom:18px} .wiz-h{font-size:15px;font-weight:700;color:#1b2740;margin-bottom:12px} .wiz-toggle{display:flex;gap:10px;margin-bottom:14px} .wiz-toggle button{flex:1;padding:14px 12px;border:1px solid #e2e8f3;border-radius:11px;background:#fff;font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit} .wiz-toggle button.on{border-color:#466BDB;background:#eef2ff;color:#466BDB} .wiz-toggle button:disabled{opacity:.45;cursor:not-allowed} .wiz-files{margin-top:12px;display:flex;flex-direction:column;gap:6px} .wiz-file{font-size:12.5px;color:#334155;background:#f8fafc;border:1px solid #eef1f6;border-radius:8px;padding:8px 11px} .wiz-file.erro{color:#b3322b;background:#fdeceb;border-color:#f6d4d1} .wiz-file.ok{color:#166534} .wiz-resumo{background:#f8fafc;border:1px solid #eef1f6;border-radius:10px;padding:12px 14px;font-size:13px;color:#334155;display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .wiz-resumo-warn{color:#8a5a08} /* pedido de senha do PDF: é o próximo passo, não um defeito — pintado de aviso (o mesmo marrom dos ⚠) a tela inteira passava a ideia de que a importação tinha falhado, quando ela só estava esperando a senha */ .wiz-senha{background:#eef4ff;border:1px solid #d3e0fa;border-radius:9px;padding:10px 12px;color:#1e3a8a;display:flex;flex-direction:column;gap:6px;margin:2px 0} .wiz-senha .fin-sub{color:#3f5ea8} .wiz-senha-arqs{font-size:12px;color:#4d6cb5;word-break:break-word} .wiz-preview-wrap{max-height:320px;overflow-y:auto;border:1px solid #eef1f6;border-radius:10px} .wiz-actions{justify-content:flex-start;gap:10px} .wiz-detect{border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px;line-height:1.5} .wiz-detect.ok{background:#e6f7ee;color:#166534;border:1px solid #bfe8d1} .wiz-detect.warn{background:#fdf6e7;color:#8a5a08;border:1px solid #f3e0ab} .wiz-detect-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .wiz-detect-form input{flex:1;min-width:160px;border:1px solid #e2e8f3;border-radius:8px;padding:8px 11px;font-size:13px;font-family:inherit;background:#fff} .wiz-detect-reemissao{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed #f3e0ab} /* ── Calendário: planejado × realizado ─────────────────────────────── */ .cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px} .cal-dow{font-size:10.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;text-align:center} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px} .cal-day{border:1px solid #e6e9f0;border-radius:10px;min-height:72px;padding:6px 8px;background:#fff;font-size:11px;cursor:pointer;display:flex;flex-direction:column;gap:1px;overflow:hidden} .cal-day:hover{border-color:#c3cdf5} .cal-day.off{background:transparent;border:none;cursor:default;min-height:0} .cal-day.quieto{background:#fafbfe} .cal-day.fut .cal-num{color:var(--tx3)} .cal-day.hoje{border-color:#466BDB;box-shadow:0 0 0 2px #eaeefc} .cal-day.sel{border-color:#466BDB;background:#f6f8ff} .cal-num{font-weight:700;font-size:12px;color:#1e2939} .cal-hoje-tag{font-size:9px;font-weight:700;color:#466BDB;background:#eaeefc;border-radius:8px;padding:1px 5px;margin-left:5px;vertical-align:1px} .cal-ent{color:#157a3a;font-weight:600;white-space:nowrap} .cal-sai{color:#b3322b;font-weight:600;white-space:nowrap} .cal-apo{color:#6d4fc2;font-weight:600;font-size:10.5px;white-space:nowrap} .cal-prev{color:#8b95b5;font-size:10px;white-space:nowrap} .cal-sub{font-size:10px;color:var(--tx3);font-weight:600} /* resumo por semana: o cabeçalho de coluna numérica fica em cima dos números (a coluna do meio é larga e o rótulo ia parar longe deles), e a letra miúda pode quebrar linha mesmo com a célula em nowrap */ .cal-sem-tbl th.fin-r{text-align:right} .cal-sem-tbl .fin-r .cal-sub{white-space:normal;max-width:210px;margin:3px 0 0 auto;line-height:1.35} .cal-evts{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 16px} .cal-evt{font-size:11.5px;font-weight:600;color:#8a5a08;background:#fdf6e7;border:1px solid #f3e0ab;border-radius:16px;padding:4px 11px} .cal-det{margin-top:12px;padding:12px 14px;background:#f8fafd;border:1px solid #eef2f9;border-radius:11px;font-size:12.5px} .cal-det .cli-tbl{margin-top:8px} .cal-det-prev{margin-top:8px;color:#7c8aa8;font-size:12px} @media(max-width:760px){ .cal-day{min-height:54px;padding:4px 5px;font-size:9.5px;border-radius:7px} .cal-num{font-size:10.5px} .cal-hoje-tag{display:none} .cal-prev{display:none} } .pj-sug-d{width:64px} .pj-sug-v{width:104px} .cal-sem-row{cursor:pointer} .cal-sem-row:hover td{background:#f6f9ff} tr.cal-sem-atual td{background:#eef2ff} tr.cal-sem-sel td{background:#f6f8ff} .cal-prev-row td{color:#7c8aa8;font-style:italic} .tbl-th{cursor:pointer;user-select:none;white-space:nowrap} .tbl-th:hover{color:#466BDB} .cal-sem-det>td{padding:0 !important;background:#fafbfe} .cal-sem-det .cal-det{margin:0;border-radius:0;border-left:3px solid #466BDB} .cal-det-cats{margin-top:12px;border-top:1px dashed var(--bd);padding-top:10px} .cal-det-cats-t{font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:8px} .cal-cat-row{cursor:pointer;border-radius:8px;padding:2px 6px;margin:0 -6px} .cal-cat-row:hover{background:#f6f9ff} .cal-cat-row.on{background:#eef2ff} .cal-cat-dias{margin:6px 0 12px 12px;padding-left:10px;border-left:3px solid #466BDB} .cal-cat-dias .cli-tbl td,.cal-cat-dias .cli-tbl th{padding:6px 8px;font-size:12px} .pj-orc-baixo{border-color:#f0b4b0;background:#fff8f7} /* a linha do bloco É o subtotal do grupo e abre/fecha as categorias */ .pj-bloco{cursor:pointer} .pj-bloco td{background:#f6f8fc;padding-top:12px !important;border-top:2px solid var(--bd)} .pj-bloco:hover td{filter:brightness(.985)} .pj-bloco td:first-child::before{content:'▸ ';color:var(--tx3);font-size:12px} .pj-bloco.aberto td:first-child::before{content:'▾ '} .pj-bloco-rec td{background:#eef7f1}.pj-bloco-cv td{background:#fdf1f0}.pj-bloco-qv td{background:#fdf6e7}.pj-bloco-inv td{background:#efecfd} /* Os três degraus da árvore do orçamento — entra como › grupo › categoria. Quem diz em qual degrau a linha está é o RECUO, não mais uma coluna: o 1º leva a cor do eixo (as faixas coloridas acima), o 2º fica na faixa neutra com um fio mais fino, e a categoria entra recuada de novo. */ .pj-bloco.pj-n2 td{padding-top:9px !important;border-top:1px solid var(--bd)} .pj-bloco.pj-n2 td:first-child{padding-left:26px} .pj-bloco.pj-n2 b{font-weight:600} .pj-cat td:first-child{padding-left:44px} /* o "expandir tudo" divide a linha do título do quadro em vez de ganhar uma faixa só dele: é um atalho para o clique que a própria tabela já oferece, não um filtro — e um atalho não merece uma linha inteira da tela. */ .pj-arv-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px} .pj-arv-h .cli-sec-h{margin-bottom:0} .pj-arv-tudo{margin-left:0;flex-shrink:0;padding:5px 12px;font-size:11.5px} /* o seletor do período de referência do típico: uma linha discreta entre o título e a tabela — é ajuste fino, não protagonista */ .pj-refsel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 14px;font-size:12.5px;color:var(--tx2)} .pj-refsel .fin-mesf{padding:5px 10px;font-size:12px} .pj-refsel .cal-sub{font-size:11px} .pj-total td{border-top:2px solid var(--bd)} /* O TOTAL fecha a tabela e era lido como "mais quatro categorias" — ele é a conta do mês inteiro. Ganha caixa própria: faixa azul clara e uma borda desenhada pelas células das pontas, já que a tabela é border-collapse: collapse e cada lado tem de sair da célula que encosta nele. A Sobra fecha em corpo maior, que é o número que se procura ao chegar aqui embaixo. */ .pj-tot td{background:var(--bl2);--pjb:2px solid color-mix(in srgb,var(--bl) 45%,transparent)} .pj-tot tr:first-child td{border-top:var(--pjb)} .pj-tot tr:last-child td{border-bottom:var(--pjb)} .pj-tot td:first-child{border-left:var(--pjb)} .pj-tot td:last-child{border-right:var(--pjb)} .pj-tot .pj-total td{font-size:15px;padding-top:12px;padding-bottom:13px} /* ═══ Caixinhas ═══════════════════════════════════════════════════════ O card é o objeto inteiro: nome, objetivo, o número que importa para aquele objetivo e a barra do progresso. A borda superior colorida é o que separa uma viagem de uma meta no olhar rápido da lista. */ .cx-novos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px} .cx-novo{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1px solid #e8edf6; border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;transition:.15s} .cx-novo:hover{border-color:#c8d3ee;box-shadow:0 3px 10px rgba(27,39,64,.07);transform:translateY(-1px)} .cx-novo b{display:block;font-size:13.5px;color:#1b2740} .cx-novo small{display:block;font-size:11.5px;color:var(--tx3);line-height:1.4;margin-top:2px} .cx-novo-i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px} .cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;margin-bottom:18px} .cx-card{background:#fff;border:1px solid #e8edf6;border-top:3px solid #466BDB;border-radius:16px; padding:18px 19px;cursor:pointer;box-shadow:0 2px 8px rgba(27,39,64,.04);transition:.15s} .cx-card:hover{box-shadow:0 6px 18px rgba(27,39,64,.09);transform:translateY(-2px)} .cx-card-h{display:flex;align-items:center;gap:11px;margin-bottom:13px} .cx-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px} .cx-nome{font-size:14.5px;font-weight:700;color:#1b2740;letter-spacing:-.2px} .cx-obj{font-size:11.5px;color:var(--tx3);margin-top:2px;display:flex;align-items:center;gap:6px} .cx-val{font-size:24px;font-weight:700;color:#1b2740;letter-spacing:-.4px} .cx-sub{font-size:12px;color:#64748b;margin:3px 0 12px} .cx-n{font-size:11px;color:var(--tx3);margin-top:2px} /* passada = já aconteceu (cinza), futura = ainda vem (azul), em andamento = está rolando agora (verde) — o estado muda o que o número quer dizer */ .cx-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; padding:2px 7px;border-radius:20px;background:#eef2f9;color:#64748b} .cx-status.on{background:#e7f6ec;color:#16a34a} .cx-status.fut{background:#eef2ff;color:#466BDB} .cx-status.off{background:#f1f5f9;color:var(--tx3)} .cx-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} @media(max-width:640px){.cx-grid{grid-template-columns:1fr}.cx-novos{grid-template-columns:1fr}} /* o 📦 e o 🏷 da linha do extrato: discretos quando vazios, coloridos quando o lançamento já está guardado/etiquetado. O `opacity:.45` de antes vinha de quando a fila era uma e o `tr:hover` acendia o botão ao passar o mouse. A lista virou
(.fcl-row) e o hover parou de casar: o ícone ficou permanentemente a 45% sobre o #cbd5e1 do .fin-x — quase invisível, e ninguém descobria que ele existia. O repouso agora é legível por si (.7 num quadradinho que aparece no hover da linha), e o hover direto acende de vez. */ .cx-btn,.et-btn{opacity:.7;font-size:15px;line-height:1;padding:3px 4px;border-radius:8px;transition:.12s} .fcl-row:hover .cx-btn,.fcl-row:hover .et-btn{opacity:.9;background:var(--sf2,#f1f5f9)} .cx-btn:hover,.et-btn:hover{opacity:1;background:var(--sf2,#eef3ff)} .cx-btn.cx-on,.et-btn.et-on{opacity:1} .cx-selo{display:inline-flex;align-items:center;gap:4px;max-width:150px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;border:none;border-radius:20px;padding:3px 9px;font-size:11.5px;font-weight:600; cursor:pointer;font-family:inherit;margin-left:2px} .cx-selo:hover{filter:brightness(.95)} .cx-pick .catpick-i{justify-content:space-between} .cx-pick-dot{flex:none;width:9px;height:9px;border-radius:50%} .cx-pick-tirar{color:#e0524b} /* o contador do 🏷 só aparece a partir da SEGUNDA etiqueta: com uma só, o nome já está na linha de apoio e o "1" seria ruído repetido em toda a fila (o resto do estilo do botão mora junto com o do 📦, logo acima) */ .et-n{font-size:9px;font-weight:800;vertical-align:super;margin-left:1px} /* os nomes moram na linha de apoio (.fcl-l2), num invólucro só: assim o "·" que o CSS põe entre os pedaços aparece UMA vez antes do conjunto, e não entre uma etiqueta e outra */ .et-tags{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:baseline} .et-tag{font-weight:700} .et-pick-top{position:sticky;top:-5px;background:inherit;z-index:2;padding:3px 3px 6px} .et-pick-in{width:100%;box-sizing:border-box;border:1px solid #e2e8f3;border-radius:8px;padding:6px 9px; font-size:12.5px;font-family:inherit;background:#fff;color:inherit} .et-pick-in:focus{outline:none;border-color:#c7d4fb} .et-pick-cb{flex:none;font-size:13px;line-height:1} .et-pick-limpar{color:#e0524b} /* cada filtro é um chip removível — a caixinha costuma ter dois ou três */ .cx-regras{display:flex;gap:8px;flex-wrap:wrap} .cx-regra{display:inline-flex;align-items:center;gap:7px;background:#eef2f9;color:#475569; border-radius:20px;padding:5px 7px 5px 12px;font-size:12px;font-weight:600} .cx-regra button{border:none;background:#dde5f2;color:#64748b;width:18px;height:18px;border-radius:50%; cursor:pointer;font-size:12px;line-height:1;font-family:inherit} .cx-regra button:hover{background:#e0524b;color:#fff} /* dia coberto pelo período de uma caixinha: faixa no topo da célula, sem roubar espaço dos valores do dia */ .cal-day{position:relative} .cal-cx{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px 3px 0 0} .cal-cx-chips{display:flex;gap:10px;flex-wrap:wrap} .cal-cx-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e8edf6;border-radius:12px; padding:10px 14px;cursor:pointer;font-family:inherit;text-align:left} .cal-cx-chip:hover{box-shadow:0 3px 10px rgba(27,39,64,.08)} .cal-cx-chip b{font-size:13px;color:#1b2740} .cal-cx-chip span:last-child{font-size:11.5px;color:var(--tx3)} .cal-cx-dot{width:9px;height:9px;border-radius:50%;flex:none} /* quadro das caixinhas no Planejamento */ .cx-plan-row{padding:12px 14px;border:1px solid #eef2f9;border-radius:12px;margin-bottom:10px;cursor:pointer} .cx-plan-row:hover{border-color:#c8d3ee;background:#fafbfe} .cx-plan-row .cli-barrow{margin-bottom:0} .cx-plan-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:13.5px;color:#1b2740} .cx-plan-obj{font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* ═══ Tema escuro ═════════════════════════════════════════════════════ Ligado por data-theme="dark" no — a escolha fica em "Meus dados" (perfil.js) e o index.html aplica antes da primeira pintura. Primeiro a paleta de variáveis vira escura; o que a área do cliente tem de cor fixa em hexa é sobrescrito em grupos por papel: superfície branca, texto forte, texto apagado, fundo sutil e os avisos coloridos. */ html[data-theme=dark]{color-scheme:dark; --goi:#eec384;--rei:#f5a29b;--gri:#7fd8a3; --bg:#000000;--sf:#0e0e0e;--sf2:#1a1a1a;--bd:#2e2e2e;--bd2:#424242; --tx:#fafafa;--tx2:#b4b4b4;--tx3:#8e8e8e; --gr:#3fca79;--gr2:#13291c;--re:#f0847c;--re2:#2c1613; --bl:#7b93ff;--bl2:#1b1b20;--go:#e8a944;--go2:#2b210b; --pu:#ab9ff5;--pu2:#1f1a3a;--br:#3566ff;--br2:#1b1b20} html[data-theme=dark]{--hm0:#1c1c1c;--hm1:#4a1714;--hm2:#8a2a23;--hm3:#d1544c;--hm4:#f5a29b; --hmf:#161616;--hmfl:#242424} /* no escuro a rampa sobe do quase-preto para o vermelho CLARO, então a virada do número é ao contrário da do tema claro: escuro só no último tom */ html[data-theme=dark] .gx-gr-c>b{color:#8e8e8e} html[data-theme=dark] .gx-gr-c.n1>b,html[data-theme=dark] .gx-gr-c.n2>b, html[data-theme=dark] .gx-gr-c.n3>b{color:#fce9e7} html[data-theme=dark] .gx-gr-c.n4>b{color:#2c1613} html[data-theme=dark] #client-shell{--gr:#3fca79;--re:#f0847c;--bl:#7b93ff;--pu:#ab9ff5;--go:#e8a944;--amber:#e8a944;--br:#3566ff;--tx:#fafafa;--tx2:#b4b4b4;--tx3:#8e8e8e;--sf2:#1a1a1a;--bd:#2e2e2e;--line:#2e2e2e} /* Sobre o --tx3 do tema claro (#626e80 no :root, #5b6e89 no #client-shell): os valores antigos (#7a8699 e #94a3b8) mediam 3,28:1 e 2,28:1 contra as superfícies em que aparecem — abaixo do mínimo legível de 4,5:1. Na prática isso é texto que some em celular ao sol, em monitor com brilho baixo e para quem tem visão levemente reduzida. O matiz é o mesmo; só o brilho desceu, até o pior fundo (--sf2) passar de 4,6:1. O tema ESCURO não foi tocado: lá o --tx3 já media 5,31:1. Os dois valores continuam diferentes porque assim já era — o #client-shell tem paleta própria. Unificá-los seria outra mudança, de design, não de legibilidade. */ /* chrome */ html[data-theme=dark] #client-shell,html[data-theme=dark] .cli-main{background:var(--bg)} html[data-theme=dark] .cli-top{background:rgba(0,0,0,.82);border-bottom-color:var(--bd)} html[data-theme=dark] .topbar{background:var(--sf)} html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#3a3a3a} html[data-theme=dark] .auth-box,html[data-theme=dark] .celebrate-card,html[data-theme=dark] .sync-pill{background:var(--sf);border-color:var(--bd2)} html[data-theme=dark] .sync-pill.ok{border-color:#2a5a41} html[data-theme=dark] .sync-pill.err{border-color:#63332d} /* superfícies que eram brancas (cards, chips, botões e campos claros) */ html[data-theme=dark] .cli-kpi,html[data-theme=dark] .cli-sec,html[data-theme=dark] .cli-action, html[data-theme=dark] .fu-step,html[data-theme=dark] .bv-steps li, html[data-theme=dark] .cx-novo,html[data-theme=dark] .cx-card,html[data-theme=dark] .cal-day, html[data-theme=dark] .cli-ia,html[data-theme=dark] .imp-card, html[data-theme=dark] .med-wrap,html[data-theme=dark] .zero-card,html[data-theme=dark] .fat-box, html[data-theme=dark] .onb-box,html[data-theme=dark] .catpick,html[data-theme=dark] .admin-menu, html[data-theme=dark] .fin-vinc-list,html[data-theme=dark] .fin-rat-list,html[data-theme=dark] .cal-cx-chip, html[data-theme=dark] .cli-mon,html[data-theme=dark] .cli-per-cst,html[data-theme=dark] .cli-per-all, html[data-theme=dark] .cli-internal-btn,html[data-theme=dark] .cli-demo select,html[data-theme=dark] .cli-burger, html[data-theme=dark] .bmo-mt,html[data-theme=dark] .cli-period button,html[data-theme=dark] .cli-simbar button, html[data-theme=dark] .fin-f,html[data-theme=dark] .fin-cardb,html[data-theme=dark] .fin-search, html[data-theme=dark] .fin-mesf,html[data-theme=dark] .fin-mes,html[data-theme=dark] .fin-sel, html[data-theme=dark] .fin-dt,html[data-theme=dark] .fin-cat,html[data-theme=dark] .fin-bulk input, html[data-theme=dark] .fin-addcat input,html[data-theme=dark] .pj-orc,html[data-theme=dark] .cli-mini-btn, html[data-theme=dark] .fat-x,html[data-theme=dark] .fat-chipb,html[data-theme=dark] .onb-yn button, html[data-theme=dark] .wiz-toggle button,html[data-theme=dark] .onb-close,html[data-theme=dark] .onb-itemx, html[data-theme=dark] .cli-per-cst input,html[data-theme=dark] .onb-fl input,html[data-theme=dark] .onb-fl select, html[data-theme=dark] .cli-tbl select,html[data-theme=dark] .cli-ia-act select,html[data-theme=dark] .cli-orc-inp, html[data-theme=dark] .wiz-detect-form input,html[data-theme=dark] .imp-card select,html[data-theme=dark] .cli-dl-exp, html[data-theme=dark] .fin-rat-l input,html[data-theme=dark] .et-pick-in{background:var(--sf);border-color:var(--bd2)} html[data-theme=dark] .fin-desc:hover,html[data-theme=dark] .fin-desc:focus{background:var(--sf);border-color:var(--bd2)} /* fundos sutis (os cinzas-azulados quase brancos) */ html[data-theme=dark] .fat-sumc,html[data-theme=dark] .fat-cand,html[data-theme=dark] .fat-strip, html[data-theme=dark] .onb-item,html[data-theme=dark] .onb-empty,html[data-theme=dark] .onb-rescard, html[data-theme=dark] .onb-int-cell,html[data-theme=dark] .med-c,html[data-theme=dark] .cli-note, html[data-theme=dark] .cli-ponte,html[data-theme=dark] .cli-dre-row.total,html[data-theme=dark] .cli-dl.total, html[data-theme=dark] .cli-dl.sub,html[data-theme=dark] .cli-dl-lancs,html[data-theme=dark] .fin-bulk, html[data-theme=dark] .fin-vinc-alvo,html[data-theme=dark] .fatc-sec,html[data-theme=dark] .wiz-resumo, html[data-theme=dark] .wiz-file,html[data-theme=dark] .wiz-step,html[data-theme=dark] .fat-tbl th, html[data-theme=dark] .cli-gauge,html[data-theme=dark] .cli-bartrack,html[data-theme=dark] .onb-prog, html[data-theme=dark] .onb-int-bar,html[data-theme=dark] .cli-seg,html[data-theme=dark] .bmo-subtabs, html[data-theme=dark] .cli-edtag,html[data-theme=dark] .cli-pill,html[data-theme=dark] .cx-status, html[data-theme=dark] .cx-regra,html[data-theme=dark] .cal-day.quieto,html[data-theme=dark] .cal-det, html[data-theme=dark] .pj-bloco td{background:var(--sf2);border-color:var(--bd)} html[data-theme=dark] .fin-vinc-i:hover,html[data-theme=dark] .fat-row:hover,html[data-theme=dark] .cx-plan-row:hover, html[data-theme=dark] .cal-sem-row:hover td,html[data-theme=dark] .cal-cat-row:hover{background:var(--sf2)} html[data-theme=dark] .cal-sem-det>td{background:#1a1a1a} /* texto forte (o azul-marinho de títulos e valores) */ html[data-theme=dark] .cli-name,html[data-theme=dark] .cli-mon span,html[data-theme=dark] .cli-per-cst input, html[data-theme=dark] .cli-per-all,html[data-theme=dark] .cli-pageh h2,html[data-theme=dark] .cli-kpi-v, html[data-theme=dark] .cli-sec-t,html[data-theme=dark] .cli-block-t,html[data-theme=dark] .cli-gauge-lab b, html[data-theme=dark] .cli-barlab b,html[data-theme=dark] .cli-action-t,html[data-theme=dark] .cli-quote, html[data-theme=dark] .cli-dre-row.total,html[data-theme=dark] .cli-mini-t,html[data-theme=dark] .cli-obj-t, html[data-theme=dark] .cli-obj-v,html[data-theme=dark] .cli-obj2-h b,html[data-theme=dark] .cli-obj2-v, html[data-theme=dark] .cli-obj2-grid b,html[data-theme=dark] .cli-ia-desc,html[data-theme=dark] .cli-dl.total, html[data-theme=dark] .cli-dl-val,html[data-theme=dark] .cli-leg b,html[data-theme=dark] .cli-ponte b, html[data-theme=dark] .cli-step2 b,html[data-theme=dark] .imp-t,html[data-theme=dark] .zero-card h2, html[data-theme=dark] .fat-head h2,html[data-theme=dark] .fat-sumc b,html[data-theme=dark] .fat-cand-t, html[data-theme=dark] .fat-cand-v,html[data-theme=dark] .onb-head h2,html[data-theme=dark] .cli-rxc-card .r.tot, html[data-theme=dark] .celebrate-t,html[data-theme=dark] .bv-t,html[data-theme=dark] .bv-mapg b, html[data-theme=dark] .cx-novo b,html[data-theme=dark] .cx-nome,html[data-theme=dark] .cx-val, html[data-theme=dark] .cal-num,html[data-theme=dark] .fatc-mes,html[data-theme=dark] .cli-burger, html[data-theme=dark] .onb-int-cell b,html[data-theme=dark] .onb-int-t,html[data-theme=dark] .onb-jrn-t, html[data-theme=dark] .fu-t,html[data-theme=dark] .cal-cx-chip b, html[data-theme=dark] .onb-fl input,html[data-theme=dark] .onb-fl select,html[data-theme=dark] .cx-plan-h, html[data-theme=dark] .wiz-h,html[data-theme=dark] .cli-ponte b{color:var(--tx)} html[data-theme=dark] .bmo-st:hover,html[data-theme=dark] .cli-seg button:hover,html[data-theme=dark] .fin-tab:hover{color:var(--tx)} /* texto médio e apagado */ html[data-theme=dark] .cli-tbl td,html[data-theme=dark] .cli-dre-row,html[data-theme=dark] .cli-step, html[data-theme=dark] .cli-readrow,html[data-theme=dark] .cli-simrow,html[data-theme=dark] .cli-dl, html[data-theme=dark] .cli-leg,html[data-theme=dark] .fin-desc, html[data-theme=dark] .fin-mesf,html[data-theme=dark] .fin-vinc-ds,html[data-theme=dark] .fat-tbl td, html[data-theme=dark] .cli-barlab,html[data-theme=dark] .onb-tog,html[data-theme=dark] .fat-chipb, html[data-theme=dark] .fin-cardb,html[data-theme=dark] .cli-mini-btn,html[data-theme=dark] .cli-rxc-card .r, html[data-theme=dark] .wiz-file,html[data-theme=dark] .wiz-resumo,html[data-theme=dark] .bv-map summary, html[data-theme=dark] .catpick-i,html[data-theme=dark] .fat-chip,html[data-theme=dark] .cli-pill, html[data-theme=dark] .imp-meta,html[data-theme=dark] .fu-step,html[data-theme=dark] .fat-x, html[data-theme=dark] .onb-close,html[data-theme=dark] .wiz-toggle button,html[data-theme=dark] .onb-yn button, html[data-theme=dark] .bmo-mt,html[data-theme=dark] .cli-note,html[data-theme=dark] .cli-edrow, html[data-theme=dark] .cli-edtag,html[data-theme=dark] .cx-regra,html[data-theme=dark] .cli-demo select, html[data-theme=dark] .fin-f,html[data-theme=dark] .cli-per-cst input,html[data-theme=dark] .cli-period button, html[data-theme=dark] .cli-simbar button,html[data-theme=dark] .cli-tbl select,html[data-theme=dark] .fin-cat, html[data-theme=dark] .fin-sel,html[data-theme=dark] .fin-dt,html[data-theme=dark] .fin-mes, html[data-theme=dark] .bv-mapg,html[data-theme=dark] .med-h span{color:var(--tx2)} html[data-theme=dark] .cli-meta,html[data-theme=dark] .cli-per-cst span,html[data-theme=dark] .cli-pageh p, html[data-theme=dark] .cli-kpi-l,html[data-theme=dark] .cli-kpi-s,html[data-theme=dark] .cli-sec-s, html[data-theme=dark] .cli-block-s,html[data-theme=dark] .cli-obj-v span,html[data-theme=dark] .cli-obj2-v span, html[data-theme=dark] .cli-obj-f,html[data-theme=dark] .cli-obj2-grid span,html[data-theme=dark] .cli-ia-meta, html[data-theme=dark] .cli-ia-sug,html[data-theme=dark] .cli-tbl th,html[data-theme=dark] .fat-tbl th, html[data-theme=dark] .cli-empty,html[data-theme=dark] .cli-gauge-lab,html[data-theme=dark] .cli-action-s, html[data-theme=dark] .cli-dl.sub,html[data-theme=dark] .zero-card p,html[data-theme=dark] .fat-head p, html[data-theme=dark] .fat-sumc span,html[data-theme=dark] .fat-cand-s,html[data-theme=dark] .fat-cand-d, html[data-theme=dark] .fat-strip-l,html[data-theme=dark] .onb-head p,html[data-theme=dark] .onb-qs span, html[data-theme=dark] .onb-fl,html[data-theme=dark] .onb-resl,html[data-theme=dark] .onb-int-cell span, html[data-theme=dark] .onb-jrn-o,html[data-theme=dark] .onb-jrn-tk,html[data-theme=dark] .med-c span, html[data-theme=dark] .cli-ponte .l,html[data-theme=dark] .cli-simbar,html[data-theme=dark] .bv-sub, html[data-theme=dark] .bv-d,html[data-theme=dark] .bv-mapg span,html[data-theme=dark] .cx-novo small, html[data-theme=dark] .cx-obj,html[data-theme=dark] .cx-sub,html[data-theme=dark] .cx-n, html[data-theme=dark] .celebrate-s,html[data-theme=dark] .imp-card p,html[data-theme=dark] .fin-vinc-alvo span, html[data-theme=dark] .pj-vazio td,html[data-theme=dark] .fin-empty-guide,html[data-theme=dark] .onb-int-meta{color:var(--tx3)} /* separadores de linha que eram hexa claro */ html[data-theme=dark] .cli-tbl th,html[data-theme=dark] .cli-tbl td,html[data-theme=dark] .cli-dre-row, html[data-theme=dark] .cli-step,html[data-theme=dark] .cli-readrow,html[data-theme=dark] .cli-simrow, html[data-theme=dark] .cli-dl,html[data-theme=dark] .cli-lancrow,html[data-theme=dark] .cli-edrow, html[data-theme=dark] .fin-vinc-i,html[data-theme=dark] .fat-tbl td,html[data-theme=dark] .onb-tog, html[data-theme=dark] .cli-rxc-card .r,html[data-theme=dark] .bv-mapg div,html[data-theme=dark] .zero-hint, html[data-theme=dark] .onb-foot,html[data-theme=dark] .cli-dre,html[data-theme=dark] .cli-dre2, html[data-theme=dark] .cli-rxc-card,html[data-theme=dark] .cli-obj,html[data-theme=dark] .cli-obj2, html[data-theme=dark] .cx-plan-row,html[data-theme=dark] .onb-jrn-c,html[data-theme=dark] .fat-tbl, html[data-theme=dark] .cli-step2,html[data-theme=dark] .wiz-preview-wrap,html[data-theme=dark] .fin-selbar, html[data-theme=dark] .bmo-maintabs,html[data-theme=dark] .fin-tabs,html[data-theme=dark] .cal-det-cats{border-color:var(--bd)} /* azul como texto/link */ html[data-theme=dark] .cli-link,html[data-theme=dark] .fat-nl,html[data-theme=dark] .fat-kick, html[data-theme=dark] .onb-kick,html[data-theme=dark] .onb-int-k,html[data-theme=dark] .cli-ia-conf, html[data-theme=dark] .pj-use,html[data-theme=dark] .fin-tab.on,html[data-theme=dark] .bv-hello, html[data-theme=dark] .cli-id-btn:hover .cli-name,html[data-theme=dark] .cli-mon button, html[data-theme=dark] .bmo-mt:hover,html[data-theme=dark] .cli-period button:hover, html[data-theme=dark] .cli-dl-exp,html[data-theme=dark] .fat-chipb span,html[data-theme=dark] .onb-resn, html[data-theme=dark] .cli-internal-btn:hover,html[data-theme=dark] .fatc-mes:hover, html[data-theme=dark] .tbl-th:hover,html[data-theme=dark] .catpick-nova,html[data-theme=dark] .fu-step:hover{color:var(--bl)} html[data-theme=dark] .fin-th:hover{color:var(--bl)!important} html[data-theme=dark] .cli-mon button:hover{background:var(--bl2)} html[data-theme=dark] .fin-tab.on{border-bottom-color:var(--bl)} html[data-theme=dark] .cli-readdot{background:var(--bl)} /* estados ativos que dependiam de fundo branco ou marinho */ html[data-theme=dark] .cli-period button.active{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .cli-simbar button.active,html[data-theme=dark] .fin-f.on{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .bmo-mt.active{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .cli-mini-btn.p{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .cli-mini-btn.on{background:#16a34a;border-color:#16a34a;color:#fff} html[data-theme=dark] .bmo-st.active,html[data-theme=dark] .cli-seg button.active{background:var(--sf);color:var(--bl);box-shadow:0 1px 4px rgba(0,0,0,.4)} html[data-theme=dark] .fin-cardb.on{border-color:var(--br);color:var(--tx)} html[data-theme=dark] .wiz-toggle button.on{background:var(--bl2);border-color:var(--br);color:var(--bl)} html[data-theme=dark] .onb-yn button.on{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .wiz-step.on{background:var(--br);color:#fff} html[data-theme=dark] .fin-ok{background:var(--sf2);border-color:#4a4a4a;color:#6e6e6e} html[data-theme=dark] .fin-ok.on{background:#16a34a;border-color:#16a34a;color:#fff} html[data-theme=dark] .cli-action.active{background:var(--bl2);border-color:var(--br)} html[data-theme=dark] .cli-action:hover{border-color:#4a4a4a} html[data-theme=dark] .cx-novo:hover,html[data-theme=dark] .cx-plan-row:hover{border-color:#4a4a4a} html[data-theme=dark] .catpick-i:hover,html[data-theme=dark] .catpick-i.on{background:var(--bl2)} html[data-theme=dark] .fin-vinc-i.on{background:var(--bl2)} html[data-theme=dark] .fin-cat.fin-sug{background:var(--bl2);border-color:#4a4a4a} html[data-theme=dark] .cal-day:hover{border-color:#4a4a4a} html[data-theme=dark] .cal-day.sel{background:var(--bl2)} html[data-theme=dark] .cal-day.hoje{box-shadow:0 0 0 2px rgba(53,102,255,.5)} /* avisos e etiquetas coloridas: tinta escura, letra clara */ html[data-theme=dark] .cli-alert.info{background:var(--bl2);color:#c8cace} html[data-theme=dark] .cli-alert.alerta{background:var(--go2);color:#eec384} html[data-theme=dark] .cli-alert.risco{background:var(--re2);color:#f5a29b} html[data-theme=dark] .cli-alert.ok{background:var(--gr2);color:#7fd8a3} html[data-theme=dark] .cli-step-n,html[data-theme=dark] .fu-step .n,html[data-theme=dark] .bv-steps .n, html[data-theme=dark] .cli-step2 .n,html[data-theme=dark] .onb-jrn-n{background:var(--bl2);color:var(--bl)} html[data-theme=dark] .fu-step.done .n,html[data-theme=dark] .bv-steps li.done .n{background:var(--gr2);color:var(--gr)} html[data-theme=dark] .cli-stat.bl,html[data-theme=dark] .cli-badge.b,html[data-theme=dark] .cli-fut-tag, html[data-theme=dark] .cal-hoje-tag,html[data-theme=dark] .fat-chip, html[data-theme=dark] .fin-grp.rec,html[data-theme=dark] .cx-status.fut{background:var(--bl2);color:var(--bl)} html[data-theme=dark] .cli-badge.n{background:var(--sf2);color:var(--tx2)} html[data-theme=dark] .cli-stat.go,html[data-theme=dark] .fin-badge, html[data-theme=dark] .fin-grp.qv,html[data-theme=dark] .onb-stat.go{background:var(--go2);color:#eec384} html[data-theme=dark] .cli-stat.re,html[data-theme=dark] .cli-penddot, html[data-theme=dark] .fin-grp.cv,html[data-theme=dark] .onb-stat.re{background:var(--re2);color:#f5a29b} /* o chip VAZADO do eixo (ver .fin-grp.fin-eixo, lá em cima) precisa repetir a tirada de chapa aqui: as duas regras de cima são `html[data-theme=dark] .fin-grp.cv/.qv` e venceriam a de lá por especificidade */ html[data-theme=dark] .fin-grp.fin-eixo:not(.on){background:none} html[data-theme=dark] .cli-stat.gr,html[data-theme=dark] .fin-grp.inv, html[data-theme=dark] .onb-stat.gr,html[data-theme=dark] .wiz-step.done{background:var(--gr2);color:var(--gr)} html[data-theme=dark] .fin-grp.trf{background:var(--sf2);color:var(--tx2)} html[data-theme=dark] .cli-stat.x,html[data-theme=dark] .onb-stat.x,html[data-theme=dark] .cx-status, html[data-theme=dark] .cx-status.off{background:var(--sf2);color:var(--tx3)} html[data-theme=dark] .cx-status.on{background:var(--gr2);color:var(--gr)} html[data-theme=dark] .fat-warn,html[data-theme=dark] .onb-pend,html[data-theme=dark] .onb-int-pend{background:var(--go2);color:#eec384} html[data-theme=dark] .onb-ok{background:var(--gr2);color:#7fd8a3} html[data-theme=dark] .cli-obj2-msg{background:var(--re2);color:#f5a29b} html[data-theme=dark] .cli-obj2-msg.ok{background:var(--gr2);color:#7fd8a3} html[data-theme=dark] .wiz-detect.ok{background:var(--gr2);color:#7fd8a3;border-color:#2a5a41} html[data-theme=dark] .wiz-detect.warn{background:var(--go2);color:#eec384;border-color:#5e4b20} html[data-theme=dark] .wiz-detect-reemissao{border-top-color:#5e4b20} html[data-theme=dark] .wiz-file.erro{background:var(--re2);color:#f5a29b;border-color:#63332d} html[data-theme=dark] .wiz-file.ok{color:#7fd8a3} html[data-theme=dark] .wiz-resumo-warn{color:#eec384} html[data-theme=dark] .wiz-senha{background:#16233d;border-color:#27436f;color:#d3e2ff} html[data-theme=dark] .wiz-senha .fin-sub{color:#a2bcea} html[data-theme=dark] .wiz-senha-arqs{color:#93aede} html[data-theme=dark] .cal-evt{background:var(--go2);color:#eec384;border-color:#5e4b20} html[data-theme=dark] .fin-vinc-ajuda{background:var(--go2);color:#eec384;border-color:#5e4b20} html[data-theme=dark] .fin-vinc-fat{background:var(--bl2);color:#c8cace;border-color:#4a4a4a} html[data-theme=dark] .fin-sugbar{background:#1a1a1f;border-color:#424242;color:#c2c2c6} html[data-theme=dark] .fin-selbar{background:var(--bl2);border-color:#4a4a4a;color:#c8cace} html[data-theme=dark] .fin-bulk,html[data-theme=dark] .fat-strip{background:var(--sf2);border-color:var(--bd)} html[data-theme=dark] .imp-meta{background:var(--sf2);border-color:var(--bd)} html[data-theme=dark] .onb-note{background:var(--bl2);color:#c8cace} html[data-theme=dark] .cli-rxc.ok{background:var(--bl2);color:#c8cace} html[data-theme=dark] .cli-rxc.warn{background:var(--go2);color:#eec384} html[data-theme=dark] .cli-rxc-ic{background:var(--sf)} html[data-theme=dark] .cli-rxc.ok .cli-rxc-ic{color:var(--bl)} html[data-theme=dark] .cli-rxc.warn .cli-rxc-ic{color:var(--go)} html[data-theme=dark] .cli-ia.done{background:#142418;border-color:#2a4d38} /* linhas de tabela com tinta */ html[data-theme=dark] .fin-tbl tr.fin-p{background:#241c0a} html[data-theme=dark] .fcl-row.fcl-p{background:#241c0a} html[data-theme=dark] .fcl-row.fcl-p:hover{background:#2e2410} html[data-theme=dark] .fcl-row.fcl-fat,html[data-theme=dark] .fcl-row.fcl-fatl{background:var(--bl2)} html[data-theme=dark] .fcl-sort:hover{color:var(--bl);border-color:var(--bd2)} html[data-theme=dark] .fcl-sort.on{color:var(--bl);background:var(--bl2);border-color:#4a4a4a} html[data-theme=dark] .fin-pag-b:hover:not(:disabled){color:var(--bl);border-color:var(--bd2)} html[data-theme=dark] .fin-pag-b.on{color:var(--bl);background:var(--bl2);border-color:#4a4a4a} html[data-theme=dark] .fd-hoje td,html[data-theme=dark] tr.cal-sem-atual td{background:var(--bl2)} html[data-theme=dark] tr.cal-sem-sel td{background:#1a1a1a} html[data-theme=dark] .cal-cat-row.on{background:var(--bl2)} html[data-theme=dark] .fatc-row.bate td,html[data-theme=dark] .fatc-row.quase td{background:#241c0a} html[data-theme=dark] .pj-bloco-rec td{background:#132619} html[data-theme=dark] .pj-bloco-cv td{background:#2a1a18} html[data-theme=dark] .pj-bloco-qv td{background:#261e0c} html[data-theme=dark] .pj-bloco-inv td{background:#1f1b37} html[data-theme=dark] .fd-tag{background:var(--pu2);color:#b3a8ff} html[data-theme=dark] .pj-orc-baixo{background:#241715;border-color:#63332d} /* cores fortes usadas como texto em cima do claro */ html[data-theme=dark] .cal-ent,html[data-theme=dark] .fatc-ok,html[data-theme=dark] .fatc-bate, html[data-theme=dark] .fin-vinc-tot.ok{color:var(--gr)} html[data-theme=dark] .cal-sai{color:var(--re)} html[data-theme=dark] .cal-apo{color:var(--pu)} html[data-theme=dark] .fatc-quase,html[data-theme=dark] .fin-vinc-tot.dif{color:#e8b45a} html[data-theme=dark] .cli-kpi.gr .cli-kpi-v,html[data-theme=dark] .cli-bignum.gr,html[data-theme=dark] .cli-dre-row b.gr, html[data-theme=dark] .cli-dre b.gr,html[data-theme=dark] .cli-simrow b.gr{color:var(--gr)} html[data-theme=dark] .cli-kpi.re .cli-kpi-v,html[data-theme=dark] .cli-bignum.re,html[data-theme=dark] .cli-dre-row b.re, html[data-theme=dark] .cli-dre b.re{color:var(--re)} html[data-theme=dark] .cli-kpi.bl .cli-kpi-v{color:var(--bl)} html[data-theme=dark] .cli-kpi.pu .cli-kpi-v{color:var(--pu)} html[data-theme=dark] .cli-kpi.go .cli-kpi-v{color:var(--go)} html[data-theme=dark] .cli-ponte .arr,html[data-theme=dark] .cli-pjpf-arrow,html[data-theme=dark] .cli-rxc-eq{color:#5c5c5c} html[data-theme=dark] .cli-x,html[data-theme=dark] .fin-x,html[data-theme=dark] .onb-itemx{color:#5c5c5c} html[data-theme=dark] .fatc-mes{border-bottom-color:#5c5c5c} /* blocos com degradê claro */ html[data-theme=dark] .fu-card{background:var(--sf);border-color:var(--bd)} html[data-theme=dark] .cli-quote{background:var(--bl2);border-left-color:var(--br)} html[data-theme=dark] .cx-regra button{background:#2e2e2e;color:#b4b4b4} html[data-theme=dark] .cal-sem-det .cal-det{border-left-color:var(--br)} html[data-theme=dark] .cal-cat-dias{border-left-color:var(--br)} /* ═══ Interruptor sol/lua (Meus dados e cadastro) ═════════════════════ O botão é um trilho com o sol de um lado e a lua do outro; o disco desliza para o lado escolhido e o ícone ativo fica por cima dele. */ .tema-sw-wrap{display:inline-flex;align-items:center;gap:10px} .tema-sw{position:relative;display:inline-flex;align-items:center;justify-content:space-between; width:74px;height:34px;flex-shrink:0;border-radius:20px;border:1px solid var(--bd2); background:var(--sf2);cursor:pointer;padding:0 8px;transition:background .2s,border-color .2s} .tema-sw svg{width:17px;height:17px;position:relative;z-index:1;transition:opacity .2s,color .2s} .tema-sw .sw-sol{color:#d98a16} .tema-sw .sw-lua{color:#7d95ff} .tema-sw[data-tema=claro] .sw-lua{opacity:.35} .tema-sw[data-tema=escuro] .sw-sol{opacity:.35} .tema-sw-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%; background:#fff;box-shadow:0 1px 4px rgba(16,24,40,.3);transition:transform .22s} .tema-sw[data-tema=escuro] .tema-sw-knob{transform:translateX(40px)} .tema-sw:hover{border-color:var(--br)} .tema-sw-lbl{font-size:12.5px;color:var(--tx3);white-space:nowrap} html[data-theme=dark] .tema-sw-knob{background:#3a3a3a} /* ═══ Visual novo (piloto Categorias, inspirado no Pierre) ═══════════ Tudo em variáveis: no claro é cartão branco, no escuro vira o painel grafite do print. Linhas grandes com ícone, valor e barra fina. */ .pz-hero{display:flex;align-items:center;gap:28px;background:var(--sf);border:1px solid var(--bd); border-radius:18px;padding:26px 30px;margin-bottom:18px;flex-wrap:wrap} .pz-hero-l{min-width:200px} .pz-big{font-size:34px;font-weight:800;letter-spacing:-.8px;color:var(--tx)} .pz-sub{font-size:13px;color:var(--tx3);margin-top:4px} .pz-donut{width:120px;height:120px;flex-shrink:0;margin:0 auto} .pz-donut canvas{width:100%!important;height:100%!important;display:block} .pz-mon{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:15px;font-weight:700;color:var(--tx)} .pz-mon span{min-width:150px;text-align:center;text-transform:capitalize} .pz-mon button{width:34px;height:34px;border-radius:50%;border:1px solid var(--bd2);background:var(--sf); color:var(--tx2);font-size:17px;cursor:pointer;line-height:1;font-family:inherit;transition:.15s} .pz-mon button:hover{border-color:var(--br);color:var(--bl)} .pz-card{background:var(--sf);border:1px solid var(--bd);border-radius:18px;overflow:hidden} .pz-card-h{padding:16px 24px 12px;font-size:11.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--bd)} .pz-row{display:flex;align-items:center;gap:13px;width:100%;padding:14px 24px;cursor:pointer; border:none;border-top:1px solid var(--bd);background:none;font-family:inherit;text-align:left;transition:background .12s} .pz-row:first-of-type{border-top:none} .pz-row:hover{background:var(--sf2)} /* O ícone da categoria cresceu (36→44) e herdou o espaço da seta: é ele que identifica a linha numa varredura rápida. */ .pz-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;flex-shrink:0} .pz-ico-sm{width:34px;height:34px;border-radius:11px;font-size:16px} /* O desenho ocupa ~60% do azulejo (26 de 44). Em 21px ele boiava no meio de um quadrado colorido grande demais — e como cada desenho usa uma fatia diferente do próprio viewBox, o tamanho APARENTE variava quase duas vezes entre uma marca e outra. Os 26px são o teto de um selo dentro de moldura: acima disso o desenho encosta no canto arredondado. */ .pz-logo{overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)} .pz-logo svg{width:26px;height:26px;display:block} .pz-ico-sm.pz-logo svg{width:20px;height:20px} .pz-mono{font-size:12.5px;font-weight:800;letter-spacing:-.03em;line-height:1} .pz-info{display:flex;flex-direction:column;gap:1px;min-width:0} .pz-name{font-size:14.5px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pz-sname{font-size:13px;font-weight:500;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pz-name-s{font-size:11.5px;color:var(--tx3)} .pz-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0} .pz-val{font-size:14.5px;font-weight:800;color:var(--tx);white-space:nowrap} .pz-sval{font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap} .pz-bar{width:130px;height:6px;border-radius:4px;background:var(--sf2);overflow:hidden;flex-shrink:0} .pz-bar span{display:block;height:100%;border-radius:4px;min-width:2px;transition:width .3s} .pz-bar-sm{width:96px;height:5px} /* a linha do eixo (custo de vida / qualidade de vida / dívidas e juros) e as categorias dentro dela: o recuo e o fio da esquerda são o que diz, sem texto, que aquelas linhas pertencem à de cima */ .pz-grupo .pz-name{font-weight:800} .pz-emgrupo{background:var(--sf)} .pz-emgrupo .pz-row{position:relative;padding-left:52px} .pz-emgrupo .pz-row::before{content:'';position:absolute;left:34px;top:0;bottom:0;width:2px;background:var(--bd)} /* o .pz-subs já entra com margin-left:52px — o mesmo recuo das categorias daqui, então os lançamentos caem alinhados com a linha que os abriu */ .pz-subs{border-top:1px solid var(--bd);background:var(--sf);padding:4px 0 8px; margin-left:52px;border-left:2px solid var(--bd)} .pz-subrow{display:flex;align-items:center;gap:11px;padding:8px 24px 8px 16px} .pz-total{display:flex;align-items:center;gap:14px;padding:15px 24px;border-top:2px solid var(--bd); font-size:13px;font-weight:700;color:var(--tx2)} @media(max-width:760px){ .pz-hero{padding:20px 18px;gap:16px} .pz-mon{margin:0 auto} .pz-bar{width:64px}.pz-bar-sm{width:48px} .pz-row,.pz-total{padding:12px 14px} .pz-subs{margin-left:24px} .pz-big{font-size:28px} } /* ═══ Assinaturas: um cartão por cobrança ══════════════════════════════ A lista corrida (linhas coladas dentro de um quadro só) fazia uma assinatura parecer uma célula de tabela. Cada cobrança é uma DECISÃO independente — "ainda uso isto?" —, então cada uma ganha sua moldura, seu ar em volta e espaço para as três coisas que respondem a pergunta: quando cobra de novo, quantas vezes já cobrou, e de qual banco sai. */ .as-sec{margin-top:18px} .as-sec-h{display:flex;align-items:center;gap:8px;padding:0 4px 4px;font-size:11.5px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)} .as-sec-h span{background:var(--sf);border:1px solid var(--bd2);border-radius:20px;padding:1px 8px; font-size:11px;letter-spacing:0} .as-sec-p{padding:0 4px 10px;font-size:12px;color:var(--tx3);max-width:70ch} .as-sec-h+.as-list{margin-top:6px} .as-list{display:flex;flex-direction:column;gap:10px} .as-card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden; transition:border-color .15s} .as-card:hover{border-color:var(--bd2)} /* quem parou de cobrar (ou está pausada) continua legível, só recua um passo */ .as-card.off{opacity:.74} .as-card.off:hover{opacity:1} /* grade, não linha: no computador o ícone e a coluna da direita ocupam as duas faixas de texto (nome/descritor em cima, os fatos embaixo); no celular a mesma grade se dobra sozinha — os fatos passam a ocupar a largura toda em vez de espremer o nome até virar "Amazon Pri…". */ .as-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto auto; column-gap:14px;row-gap:5px;align-items:center;padding:15px 18px;cursor:pointer;text-align:left} .as-head>.pz-ico{grid-column:1;grid-row:1/3} .as-b{grid-column:2;grid-row:1} .as-meta{grid-column:2;grid-row:2} .as-acao{grid-column:3;grid-row:1/3;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} .as-preco{grid-column:4;grid-row:1/3} .as-dots{grid-column:5;grid-row:1/3} .as-head:hover{background:var(--sf2)} .as-head:focus-visible{outline:2px solid var(--br);outline-offset:-2px} .as-b{display:flex;flex-direction:column;gap:1px;min-width:0} .as-nome{font-size:15px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .as-desc{font-size:12.5px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .as-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;min-width:0; font-size:11.5px;color:var(--tx3)} .as-meta:empty{display:none} .as-meta i{font-style:normal;opacity:.5} .as-selos{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .as-banco{display:inline-flex;align-items:center;gap:5px} .as-banco .pg-logo-sm{width:15px;height:15px;font-size:8px;border-width:1px} .as-preco{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15} .as-preco b{font-size:17px;font-weight:800;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums} .as-preco span{font-size:11px;color:var(--tx3)} .as-dots{width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:none; color:var(--tx3);font-size:18px;line-height:1;cursor:pointer;font-family:inherit;flex-shrink:0;transition:.15s} .as-dots:hover,.as-dots.on{background:var(--sf2);border-color:var(--bd2);color:var(--tx)} .as-pane{border-top:1px solid var(--bd);padding:12px 18px;display:flex;flex-direction:column;gap:9px} .as-acoes{display:flex;flex-wrap:wrap;gap:8px} .as-nota{font-size:12px;color:var(--tx3)} .as-nota.go{color:var(--goi)} .as-nota b{color:var(--tx2)} .as-hist{display:flex;flex-direction:column} .as-hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0; border-top:1px solid var(--bd);font-size:12.5px;color:var(--tx2)} .as-hrow:first-child{border-top:none} .as-hrow b{font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums} .as-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px; padding:13px 18px;background:var(--sf);border:1px solid var(--bd2);border-radius:14px; font-size:12.5px;font-weight:700;color:var(--tx2)} .as-total b{font-size:15.5px;color:var(--tx);font-variant-numeric:tabular-nums} @media(max-width:760px){ .as-nome{font-size:14px} .as-preco b{font-size:15.5px} .as-pane,.as-total{padding:11px 13px} /* a grade se dobra: nome e preço na primeira faixa, os fatos na segunda (largura inteira, senão o nome perde para o "16 Set"), e a ação rápida numa terceira, larga o bastante para o dedo */ .as-head{grid-template-columns:44px minmax(0,1fr) auto auto; column-gap:11px;row-gap:9px;padding:13px} .as-head>.pz-ico{grid-row:1} .as-meta{grid-column:1/-1;grid-row:2} .as-preco{grid-column:3;grid-row:1} .as-dots{grid-column:4;grid-row:1} .as-acao{grid-column:1/-1;grid-row:3;justify-content:flex-start} .as-acao:empty{display:none} .as-acao .cli-mini-btn{padding:8px 13px} } /* ═══ Início: as principais assinaturas, com rosto ════════════════════ Azulejo de marca + nome + valor, um por faixa. Não é tabela de propósito: aqui o que identifica a linha é o DESENHO, e desenho pede ar em volta — em fileira colada eles viram um friso de cores sem leitura. O fundo é o --sf2, e não o branco do .cli-sec: azulejo em cartão branco dentro de cartão branco só existe pela borda. E o mesmo token resolve o tema escuro sem uma segunda regra — lá o .cli-sec cai para --sf (#0e0e0e) e o --sf2 (#1a1a1a) continua sendo o degrau de cima. UMA POR FAIXA, e não duas. A coluna da Início tem ~500px de miolo: partida ao meio, sobram ~100px para o nome depois do azulejo e do valor, e "Amazon Prime" já encosta no limite — "Google Workspace" viraria "Google Works…". Truncar justamente o nome que o quadro existe para mostrar seria trocar a razão de ele existir por umas poucas linhas de altura. O NÚMERO GRANDE herda a tipografia do piso do mês (.pi-big): os dois quadros respondem "quanto isto me custa por mês", e responder na mesma voz é o que faz um ser lido como continuação do outro. A margem negativa encosta o número no título — o .cli-blockh reserva 16px para um subtítulo que este quadro não tem. */ .ass-big{font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--tx); margin:-6px 0 14px;font-variant-numeric:tabular-nums} .ass-big span{font-size:13px;font-weight:600;color:var(--tx3);margin-left:6px; letter-spacing:0} .ass-mini-grid{display:flex;flex-direction:column;gap:10px} .ass-mini{display:flex;align-items:center;gap:11px;width:100%;min-width:0; padding:11px 13px;border:1px solid var(--bd);border-radius:14px;background:var(--sf2); font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s} .ass-mini:hover{border-color:var(--bd2)} .ass-mini:focus-visible{outline:2px solid var(--br);outline-offset:2px} .ass-mini-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .ass-mini-n{font-size:13.5px;font-weight:700;color:var(--tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ass-mini-s{font-size:11px;color:var(--tx3)} .ass-mini-v{font-size:13.5px;font-weight:800;color:var(--tx);white-space:nowrap; font-variant-numeric:tabular-nums;flex-shrink:0} @media(max-width:760px){ .ass-mini{padding:10px 11px} .ass-big{font-size:26px} } /* ═══ Próximos pagamentos (Início) ══════════════════════ A linha é uma AGENDA, e agenda se lê pela data: por isso o dia abre a linha, na coluna mais à esquerda e em largura fixa — as cinco datas ficam alinhadas uma sobre a outra e o olho desce por elas sem varrer o texto no meio. O valor e o "em N dias" empilham à direita, na mesma coluna: são as duas respostas de "isto me atrapalha?" — quanto, e quando. Separados (o prazo no subtítulo, junto do "assinatura · Cartão Nubank") o prazo virava detalhe de procedência, que é justamente o que ele não é. `pp-q.perto` acende os três primeiros dias em âmbar. Não é alarme — conta a vencer não é erro —, é só o que separa "amanhã" de "em 23 dias" quando as duas linhas estão no mesmo olhar. */ .pp-list{display:flex;flex-direction:column;gap:8px} .pp-row{display:flex;align-items:center;gap:11px;width:100%;min-width:0; padding:10px 12px;border:1px solid var(--bd);border-radius:14px;background:var(--sf2); font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s} .pp-row:hover{border-color:var(--bd2)} .pp-row:focus-visible{outline:2px solid var(--br);outline-offset:2px} .pp-when{display:flex;flex-direction:column;align-items:center;justify-content:center; width:38px;flex:none;line-height:1.05} .pp-when b{font-size:16px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums; letter-spacing:-.4px} .pp-when span{font-size:10px;font-weight:600;color:var(--tx3);text-transform:lowercase;margin-top:2px} .pp-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .pp-n{font-size:13.5px;font-weight:700;color:var(--tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-s{font-size:11px;color:var(--tx3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none} .pp-v{font-size:13.5px;font-weight:800;color:var(--tx);white-space:nowrap; font-variant-numeric:tabular-nums} .pp-q{font-size:10.5px;font-weight:600;color:var(--tx3);white-space:nowrap} .pp-q.perto{color:var(--go)} @media(max-width:760px){ .pp-row{padding:10px;gap:9px} .pp-when{width:32px} .pp-when b{font-size:15px} } /* ═══ Assistente BMO (gaveta de chat) e toques de IA ═════════════════ */ .ia-spark{color:var(--pu);font-size:15px} .cli-nav-ia{color:#cdb9ff;background:linear-gradient(90deg,rgba(139,124,248,.16),rgba(70,107,219,.10)); border:1px solid rgba(139,124,248,.35)!important;margin-bottom:10px} .cli-nav-ia:hover{color:#fff;background:linear-gradient(90deg,rgba(139,124,248,.28),rgba(70,107,219,.18))} #ia-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(400px,100vw);z-index:1400; background:var(--sf);border-left:1px solid var(--bd);display:flex;flex-direction:column; transform:translateX(105%);transition:transform .25s ease;box-shadow:-24px 0 60px rgba(0,0,0,.28)} #ia-drawer.open{transform:none} .ia-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--bd)} .ia-h b{font-size:15px;color:var(--tx)} .ia-hs{font-size:11.5px;color:var(--tx3)} .ia-beta{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; background:var(--pu2);color:var(--pu);border-radius:20px;padding:3px 9px} .ia-x{margin-left:auto;background:none;border:none;color:var(--tx3);font-size:22px;cursor:pointer;line-height:1;padding:2px 6px} .ia-x:hover{color:var(--tx)} .ia-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px} .ia-m{max-width:86%;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.55;overflow-wrap:break-word} .ia-m.eu{align-self:flex-end;background:var(--br);color:#fff;border-bottom-right-radius:5px} .ia-m.ia{align-self:flex-start;background:var(--sf2);color:var(--tx);border-bottom-left-radius:5px} .ia-m.erro{background:var(--re2);color:var(--re)} .ia-chips{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px} .ia-chip{border:1px solid var(--bd2);background:var(--sf);color:var(--tx2);border-radius:12px; padding:10px 13px;font-size:13px;text-align:left;cursor:pointer;font-family:inherit;transition:.15s} .ia-chip:hover{border-color:var(--br);color:var(--bl)} .ia-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--bd)} .ia-foot input{flex:1} .ia-priv{font-size:10.5px;color:var(--tx3);line-height:1.45;padding:0 16px 12px} .ia-typing{display:inline-flex;gap:4px;align-items:center;padding:4px 2px} .ia-typing span{width:7px;height:7px;border-radius:50%;background:var(--tx3);opacity:.4; animation:iaTyping 1.2s infinite} .ia-typing span:nth-child(2){animation-delay:.2s} .ia-typing span:nth-child(3){animation-delay:.4s} @keyframes iaTyping{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* ═══ Navegação por pílulas no topo (estilo Pierre) ══════════════════ O topo vira duas fileiras: identidade + período em cima, e as áreas do app como pílulas centradas logo abaixo. No desktop a sidebar esconde os itens de área e fica só marca + assistente + rodapé (como o rail do Pierre); no celular a gaveta continua com tudo. */ .cli-top{flex-direction:column;align-items:stretch;gap:12px} .cli-top-main{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%} /* celular: o filtro de período (width:100% na regra antiga) quebra para a linha de baixo do hambúrguer em vez de estourar a tela ao lado dele; e os cartões de mediana (med-c) encolhem em vez de alargar o grid — valor em 23px não cabia na coluna e empurrava a tela */ @media(max-width:760px){ .cli-top-main{flex-wrap:wrap} .med-grid{min-width:0} .med-c{min-width:0} .med-c b{font-size:16px;font-size:clamp(12px,15cqi,16px)} } /* Fileira ÚNICA sempre: quebrar em duas linhas amontoava os botões em tela média. Quando não cabe, rola de lado; as margens automáticas na primeira e na última pílula centram quando cabe SEM esconder as pontas na rolagem (justify-content:center esconderia). min-width:0 — item de flex-coluna não encolhe abaixo do min-content sem isso, e a fileira estourava a tela. */ .pz-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:100%; padding-bottom:3px;scrollbar-width:thin} .pz-tab{flex-shrink:0} .pz-tab:first-child{margin-left:auto} .pz-tab:last-child{margin-right:auto} .pz-tabs::-webkit-scrollbar{height:5px} .pz-tabs::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px} @media(max-width:1280px){.pz-tab{padding:7px 12px;font-size:12.5px;gap:6px}} .pz-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px; border:1px solid var(--bd2);background:var(--sf);color:var(--tx2);font-size:13px;font-weight:600; cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap} .pz-tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0} .pz-tab:hover{border-color:var(--br);color:var(--bl)} .pz-tab.active{color:var(--gr);border-color:var(--gr);background:var(--gr2)} /* contador de pendência dentro da pílula — quem o coloca e o tira é o cliBadgePintar(), depois do render. Mesmo tom do badge dos Agentes (.nb): é informação, não alarme. */ .pz-tab-n{background:var(--br);color:#fff;font-size:10px;font-weight:700;line-height:1; padding:3px 6px;border-radius:20px;min-width:16px;text-align:center} /* o "Visão geral" (atalho para o Início, logo abaixo do assistente) fica de fora do esconde-áreas do desktop; no celular ele é que some — a gaveta já tem o "Início" completo */ @media(min-width:761px){#client-shell .cli-nav .cli-nav-item[data-area]:not(.cli-nav-vg):not(.cli-nav-ag){display:none}} @media(max-width:760px){.cli-nav-vg{display:none}} @media(max-width:760px){ .pz-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding-bottom:3px} .pz-tab{flex-shrink:0;padding:7px 13px;font-size:12.5px} } /* cartões no mesmo raio do visual novo, app inteiro */ .cli-kpi,.cli-action,.med-wrap,.imp-card,.cx-card,.cx-novo,.fu-card,.cli-ia,.onb-intwrap{border-radius:18px} /* ═══ Início e Financeiro no padrão novo ═════════════════════════════ O hero deixa o degradê azul-marinho e vira o mesmo cartão do resto do app (claro no claro, grafite no escuro); as sub-abas do Financeiro viram pílulas como as do topo, e o conteúdo entra num cartão. */ .cli-hero{background:var(--sf);border:1px solid var(--bd);box-shadow:none;color:var(--tx);border-radius:18px} .cli-hello{color:var(--tx)} .cli-hero-sub{color:var(--tx3)} .cli-hero-res{background:var(--sf2);border:1px solid var(--bd)} .cli-hero-res .l{color:var(--tx3)} .cli-hero-res.pos .v{color:var(--gr)} .cli-hero-res.neg .v{color:var(--re)} /* O topo aqui não é mais o gradiente escuro: é superfície do tema. Tudo o que estava em branco fixo precisa voltar a ser token, senão some no claro — foi exatamente o que aconteceu com o card de banco. E o token é --tx2, não --tx3: medido, --tx3 sobre o claro fica em 2,28:1. Serve para um rodapé discreto, não para o nome do banco ao lado do saldo. */ .cli-hero-sub2{color:var(--tx2)} .cli-hb{background:var(--sf2);border:1px solid var(--bd)} .cli-hb-t span{color:var(--tx2)} .cli-hb-t b{color:var(--tx)} .cli-hero-gastos{border-top-color:var(--bd)} /* O rótulo do card do topo vinha de --tx3 (2,28:1). Ele agora anuncia o número mais importante da tela — "Saldo atual" — e precisa ser lido. */ .cli-hero-res .l{color:var(--tx2)} /* SALDO não é resultado: verde/vermelho aqui diria "isto é bom/ruim" sobre um fato neutro, e o verde do tema claro ainda por cima fica em 2,94:1. O valor vai em --tx; o sinal de menos já diz o que precisa ser dito. */ .cli-hero-res.saldo .v{color:var(--tx)} .gx-b-l{color:var(--tx2)} .gx-b-v{color:var(--tx)} .gx-b-t{background:var(--sf2)} .gx-click:hover,.gx-click:focus-visible{background:var(--sf2)} .fin-tabs{border-bottom:none;gap:8px;margin-bottom:14px;flex-wrap:wrap} .fin-tab{border:1px solid var(--bd2);background:var(--sf);border-radius:20px;padding:8px 16px;color:var(--tx2);font-size:13px} .fin-tab:hover{color:var(--bl);border-color:var(--br)} .fin-tab.on{color:var(--gr);border-color:var(--gr);background:var(--gr2)} html[data-theme=dark] .fin-tab:hover{color:var(--bl)} html[data-theme=dark] .fin-tab.on{color:var(--gr);border-color:var(--gr);background:var(--gr2)} /* celular: a fileira de filtros do extrato quebra linha em vez de alargar a tela (os chips não tinham wrap e o min-content estourava o cartão) */ @media(max-width:760px){ .fin-filtros{flex-wrap:wrap} .fin-bar,.fin-tools,.fin-filtros{min-width:0;max-width:100%} .fin-mesf,.fin-sel{max-width:100%} } /* ═══ Coluna central e tabelas com respiro (etapa Pierre) ════════════ O conteúdo centra na tela como no Pierre (antes ficava encostado à esquerda em monitor largo), e as tabelas do cliente ganham linhas mais altas e separadores suaves — o estilo "Transações" — sem mudar nada de estrutura ou comportamento. */ #cli-content{margin:0 auto} .cli-tbl th{padding:10px 10px;border-bottom:1px solid var(--bd)} .cli-tbl td{padding:12px 10px;border-bottom-color:var(--bd)} .cli-tbl tr:hover td{background:var(--sf2)} .fin-tbl td{padding:11px 9px} .fin-ok,.fin-x{border-radius:10px} .fin-cat,.fin-sel,.fin-dt,.fin-mes{border-radius:9px;padding:6px 9px} .med-c{border-radius:14px} /* ═══ Lateral recolhível + identidade na base (estilo Pierre) ════════ */ .cli-brand .bn{color:#fff;padding:0;text-align:left;width:100%} /* recolher a lateral: antes era o logo inteiro que alternava, e ninguém descobria. Agora é um botão de verdade, com moldura e seta dupla apontando para onde a barra vai — mesmo canto de antes, mesmo peso visual. */ .cli-sb-tog{margin-left:auto;width:26px;height:26px;flex-shrink:0;padding:0;border-radius:8px; border:1px solid rgba(255,255,255,.16);background:none;color:#8fa0c2;cursor:pointer; display:grid;place-items:center;font-family:inherit;transition:.15s} .cli-sb-tog svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .cli-sb-tog:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)} /* no celular a lateral é gaveta: não há o que recolher */ @media(max-width:760px){.cli-sb-tog{display:none}} .cli-top-main .cli-top-r{margin-left:auto} #cli-sb-id{border-top:1px solid rgba(255,255,255,.08)} .cli-sb-id-btn{display:flex;align-items:center;gap:11px;width:100%;padding:14px 18px;background:none; border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s} .cli-sb-id-btn:hover{background:rgba(255,255,255,.06)} .cli-sb-id-btn .cli-av{width:38px;height:38px;font-size:13px;flex-shrink:0} .cli-sb-id-t{min-width:0;flex:1} .cli-sb-id-t .n{font-size:13.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cli-sb-id-t .m{font-size:11px;color:#8fa0c2;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cli-sb-gear{color:#7e8eb0;font-size:15px;flex-shrink:0} .cli-sb-id-btn:hover .cli-sb-gear{color:#fff} @media(min-width:761px){ .cli-sb{transition:width .2s ease,min-width .2s ease} #client-shell.cli-sb-min .cli-sb{width:76px;min-width:76px} #client-shell.cli-sb-min .cli-brand{padding:24px 0 18px} #client-shell.cli-sb-min .cli-brand .bn{flex-direction:column;gap:14px;justify-content:center} #client-shell.cli-sb-min .cli-sb-tog{margin:0} #client-shell.cli-sb-min .cli-brand .bn span, #client-shell.cli-sb-min .cli-brand .bs{display:none} #client-shell.cli-sb-min .cli-nav{padding:16px 8px} #client-shell.cli-sb-min .cli-nav-ia, #client-shell.cli-sb-min .cli-nav-vg, #client-shell.cli-sb-min .cli-nav-ag{font-size:0;gap:0;justify-content:center;padding:12px 0} #client-shell.cli-sb-min .cli-nav-ag .nb{display:none} #client-shell.cli-sb-min .cli-foot{display:none} #client-shell.cli-sb-min .cli-sb-id-btn{justify-content:center;padding:14px 0} #client-shell.cli-sb-min .cli-sb-id-t, #client-shell.cli-sb-min .cli-sb-gear{display:none} } /* ═══ Painel de Agentes — o corpo clínico ════════════════════════════ */ .ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .ag-card{background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column} .ag-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .ag-av{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;border:1px solid transparent;flex-shrink:0} /* a cena é um SVG pintado no agentes.js (estilo das ilustrações do Pierre): a ilustração toma o card, o instrumento da especialidade (.ag-mov) anima com o mouse ou quando o plantão sorteia o médico (ag-viva), os olhos piscam sozinhos e o feixe de luz respira */ .ag-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .ag-card{padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .2s} .ag-card:hover{border-color:var(--br);transform:translateY(-2px)} .ag-art{aspect-ratio:4/5;overflow:hidden} .ag-art .ag-face{width:100%;height:100%;display:block;transition:transform .5s ease} .ag-card:hover .ag-art .ag-face{transform:scale(1.045)} .ag-foto,.ag-video{object-fit:cover;object-position:50% 28%} .ag-cena{width:100%;height:100%} .ag-cena>*{width:100%;height:100%;display:block} .ag-video{background:#0e1118} .ag-viva .ag-art .ag-face{transform:scale(1.045)} .ag-hero-art .ag-face{transition:transform .6s ease} :is(.ag-hero:hover,.ag-hero.ag-viva) .ag-hero-art .ag-face{transform:scale(1.05)} .ag-info{padding:12px 16px 14px;display:flex;flex-direction:column;gap:4px} .ag-info-l{display:flex;align-items:center;justify-content:space-between;gap:10px} .ag-info-l b{font-size:14.5px;color:var(--tx)} .ag-info>span{font-size:11.5px;color:var(--tx3);line-height:1.4} .ag-mov{transform-box:fill-box;transform-origin:center} .ag-mov-balanca{transform-origin:20% 4%} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-balanca{animation:agBalanca 1.7s ease-in-out infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-sobe{animation:agSobe 1.9s ease-in-out infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-treme{animation:agTreme .6s linear infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-quica{animation:agQuica 1.3s ease-in-out infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-gira{animation:agGira 2s ease-in-out infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .ag-mov-corta{animation:agCorta .9s ease-in-out infinite} :is(.ag-card:hover,.ag-hero:hover,.ag-viva) .agx-feixe{animation:agFeixe 2.4s ease-in-out infinite} @keyframes agBalanca{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}} @keyframes agSobe{0%,100%{transform:translateY(0) rotate(0)}35%,65%{transform:translateY(-16px) rotate(-4deg)}} @keyframes agTreme{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-2deg)}45%{transform:translateX(6px) rotate(2deg)}70%{transform:translateX(-4px)}} @keyframes agQuica{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0)}72%{transform:translateY(-7px)}} @keyframes agGira{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}70%{transform:rotate(8deg)}} @keyframes agCorta{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}55%{transform:rotate(5deg)}} @keyframes agFeixe{0%,100%{opacity:.10}50%{opacity:.17}} .agx-olhos{transform-box:fill-box;transform-origin:center;animation:agxPiscar 5.6s infinite} .ag-card:nth-child(2n) .agx-olhos{animation-delay:-1.7s} .ag-card:nth-child(3n) .agx-olhos{animation-delay:-3.4s} @keyframes agxPiscar{0%,92.5%,97%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.06)}} @media(prefers-reduced-motion:reduce){.ag-mov,.agx-olhos,.agx-feixe{animation:none!important}} /* ── o plantão: a cena grande à esquerda, a leitura à direita ── */ .ag-hero{display:flex;gap:26px;align-items:stretch;border:1px solid var(--bd); border-radius:22px;margin-bottom:18px;background:var(--sf);overflow:hidden} .ag-hero-art{flex:0 0 min(340px,36%);min-height:430px;position:relative} .ag-hero-art .ag-face,.ag-hero-art .ag-cena{position:absolute;inset:0;width:100%;height:100%} .ag-hero-tx{flex:1;min-width:0;padding:26px 28px 22px 2px} .ag-hero-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px} .ag-hero-n{font-size:22px;font-weight:800;color:var(--tx);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ag-hero-m{font-size:14px;color:var(--tx2);margin-top:3px} .ag-hero-bio{font-size:13px;color:var(--tx3);line-height:1.55;margin:10px 0 12px;max-width:72ch} .ag-hero .ag-body .cli-readrow{font-size:13.5px} .ag-hero .ag-acts{margin-top:14px} @media(max-width:760px){ .ag-hero{flex-direction:column} .ag-hero-art{flex:none;min-height:0;aspect-ratio:4/5;max-width:340px;margin:0 auto;position:relative} .ag-hero-tx{padding:18px 18px 20px} } /* ── na aba Agentes a barra do topo sai de cena (estilo Pierre) ── no desktop ela some inteira (a lateral segura a navegação); no celular o hambúrguer fica — sem ele a gaveta seria inalcançável — e só as pílulas de área somem */ @media(min-width:761px){#client-shell.cli-sem-top .cli-top{display:none}} @media(max-width:760px){#client-shell.cli-sem-top .pz-tabs{display:none}} .ag-tool{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%; background:var(--sf);border:1px solid var(--bd2);display:grid;place-items:center;font-size:10px} .ag-id{flex:1;min-width:0} .ag-id b{display:block;font-size:15px;color:var(--tx)} .ag-id span{font-size:11.5px;color:var(--tx3);line-height:1.35;display:block} .ag-body{flex:1} .ag-body .cli-readrow{font-size:13px} .ag-acts{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap} .ag-go{text-align:left} /* ═══ Modo discreto — o olho da lateral borra todos os valores ═══════ */ body.privado :is(.pz-big,.pz-val,.pz-sval,.mv,.cli-kpi-v,.cli-hero-res .v,.cli-bignum,.cli-dl-val, .fin-r,.med-c b,.asvv,.cal-ent,.cal-sai,.cal-apo,.cal-prev,.cal-sub,.cli-obj-v,.cli-obj2-v, .fat-sumc b,.fat-cand-v,.cli-ponte b,.conc-val,.tip-val,.fin-vinc-vl,.fin-vinc-alvo-v, .cli-leg b,.cli-barlab b,.cli-gauge-lab b,.onb-int-cell b,.cli-lancrow b,.sd-ent,.sd-sai,.sd-dia, .as-preco b,.as-total b,.as-hrow b,.pp-v, .sd-sal-p,.sd-sal-n,.cli-simrow b,.cli-obj2-grid b,.cli-dre-row b,.cli-rxc-card .r,.pz-name-s, .cli-kpi-s,.ag-body .cli-readrow,.cli-alert,.ia-m,.cli-readrow,.fin-prog,.cli-hero-res .l) {filter:blur(5px);transition:filter .2s;user-select:none} /* rede de segurança: o cliPrivMarcar() carimba .priv-v em todo texto que traz um valor em reais, inclusive nas telas que não estão na lista acima */ body.privado .priv-v{filter:blur(5px);transition:filter .2s;user-select:none} /* gráficos NÃO são borrados: mostram proporção, não número — e o tooltip do donut esconde o valor sozinho enquanto o modo discreto está ligado */ body.privado .cli-eye{border-color:var(--br);color:var(--bl)} /* ═══ Olho do modo discreto ═══════════════════════════════════════════ Mora na barra de cima, ao lado do filtro de período (e sozinho à direita nas telas que não têm filtro). Só o ícone: aberto, os valores aparecem; riscado, sumiram. Não encolhe — no celular a fileira aperta, mas ele fica. */ .cli-eye{width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%; border:1px solid var(--bd2);background:var(--sf);color:var(--tx2);cursor:pointer; display:grid;place-items:center;font-family:inherit;transition:.15s} .cli-eye svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .cli-eye:hover{border-color:var(--br);color:var(--bl)} /* balão do donut: HTML flutuante, nunca corta (o nativo vivia preso ao canvas) */ #pz-donut-tip{position:fixed;z-index:6000;pointer-events:none;opacity:0;transition:opacity .12s; transform:translate(-50%,calc(-100% - 10px));display:flex;align-items:center;gap:7px; background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:7px 11px; font-size:12.5px;color:var(--tx);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.35)} .pz-tip-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0} .pz-tip-v{color:var(--tx2)} /* separador por dia (estilo Pierre "Transações") e o tipo como etiqueta */ /* ═══ Escuro "preto no preto" — o acabamento ══════════════════════════ Regra da casa: o cromo (lateral, topo, cartões, campos) é preto e cinza puro — zero azul-marinho. O azul aparece SÓ onde se clica: botão primário, item de menu ativo, pílula ativa, foco de campo. Verde e vermelho continuam, mas só como tinta de número (entrou/saiu), nunca como cor de fundo de navegação. Vem no fim do arquivo de propósito: precisa ganhar das regras de skin escritas antes. */ html[data-theme=dark] body,html[data-theme=dark] #client-shell, html[data-theme=dark] #internal-shell,html[data-theme=dark] .cli-main{background:#000} /* lateral: preto chapado, sem degradê marinho */ html[data-theme=dark] .cli-sb{background:#000;border-right:1px solid var(--bd)} html[data-theme=dark] .cli-brand,html[data-theme=dark] .cli-foot, html[data-theme=dark] #cli-sb-id{border-color:var(--bd)} html[data-theme=dark] .cli-brand .bs,html[data-theme=dark] .cli-foot, html[data-theme=dark] .cli-sb-id-t .m,html[data-theme=dark] .cli-sb-gear{color:var(--tx3)} html[data-theme=dark] .cli-nav-item{color:var(--tx2)} html[data-theme=dark] .cli-nav-item:hover{background:#1a1a1a;color:var(--tx)} html[data-theme=dark] .cli-nav-item.active{background:var(--br);color:#fff;box-shadow:none} html[data-theme=dark] .cli-nav-ia{background:#1a1a1a;color:var(--tx2); border:1px solid var(--bd)!important} html[data-theme=dark] .cli-nav-ia:hover{background:#242424;color:var(--tx)} html[data-theme=dark] .cli-sb-id-btn:hover{background:#1a1a1a} html[data-theme=dark] .cli-sb-id-btn:hover .cli-sb-gear{color:var(--tx)} html[data-theme=dark] .cli-av{background:#1e1e1e;color:var(--tx);border:1px solid var(--bd2)} html[data-theme=dark] .sidebar{background:#0a0a0a;border-right-color:var(--bd)} html[data-theme=dark] .sidebar ::-webkit-scrollbar-thumb{background:#3a3a3a} html[data-theme=dark] .cli-scrim{background:rgba(0,0,0,.66)} /* minimalismo: no preto, sombra vira sujeira — a hairline basta */ html[data-theme=dark] .card,html[data-theme=dark] .metric,html[data-theme=dark] .cli-kpi, html[data-theme=dark] .cli-sec,html[data-theme=dark] .cli-action, html[data-theme=dark] .cli-hero,html[data-theme=dark] .toast,html[data-theme=dark] .sync-pill, html[data-theme=dark] .fin-cardb.on,html[data-theme=dark] .bmo-st.active, html[data-theme=dark] .cli-seg button.active{box-shadow:none} html[data-theme=dark] .cli-action:hover{transform:none;border-color:var(--bd2);background:#161616} html[data-theme=dark] .cli-action.active{background:#161616;border-color:var(--br)} /* azul = o único acento clicável */ html[data-theme=dark] input:focus,html[data-theme=dark] select:focus, html[data-theme=dark] textarea:focus{border-color:var(--br);box-shadow:0 0 0 3px rgba(53,102,255,.18)} html[data-theme=dark] .nav-item.active,html[data-theme=dark] .pz-tab.active, html[data-theme=dark] .fin-tab.on{background:var(--br);border-color:var(--br);color:#fff} html[data-theme=dark] .tab.active{color:var(--bl);border-bottom-color:var(--br)} html[data-theme=dark] .pz-tab:hover,html[data-theme=dark] .fin-tab:hover, html[data-theme=dark] .ia-chip:hover,html[data-theme=dark] .pz-mon button:hover, html[data-theme=dark] .tema-sw:hover{border-color:var(--bd2);color:var(--tx)} html[data-theme=dark] .iz:hover,html[data-theme=dark] .iz.dov{border-color:var(--br);background:#141414} html[data-theme=dark] .btn-p{background:var(--br);color:#fff} html[data-theme=dark] .btn-p:hover{background:#2a58ea} html[data-theme=dark] .btn-s{background:#1a1a1a;color:var(--tx2);border-color:var(--bd2)} html[data-theme=dark] .btn-s:hover{background:#262626;color:var(--tx)} html[data-theme=dark] .btn-g:hover{color:var(--tx);border-color:var(--bd2)} html[data-theme=dark] .cli-seg{background:#141414} html[data-theme=dark] .bmo-st.active,html[data-theme=dark] .cli-seg button.active{background:#242424;color:var(--tx)} /* avisos informativos: o fundo some no preto e a letra fica neutra — o azul sobra só na bolinha do ícone, que é onde se clica/olha primeiro */ html[data-theme=dark] .cli-alert.info,html[data-theme=dark] .cli-rxc.ok, html[data-theme=dark] .onb-note{background:#161616;color:var(--tx2)} html[data-theme=dark] .cli-quote{background:#161616;color:var(--tx);border-left-color:var(--br)} html[data-theme=dark] .cli-alert.info .cli-alert-ic{background:var(--br);color:#fff} html[data-theme=dark] .cli-rxc-ic{background:#1e1e1e} html[data-theme=dark] .fin-selbar,html[data-theme=dark] .fin-vinc-fat, html[data-theme=dark] .fin-sugbar{background:#161616;border-color:var(--bd2);color:var(--tx2)} /* o botão de recolher no escuro segue a paleta preta, como o resto do cromo */ html[data-theme=dark] .cli-sb-tog{border-color:var(--bd2);color:var(--tx3)} html[data-theme=dark] .cli-sb-tog:hover{border-color:#4a4a4a;color:var(--tx);background:#1a1a1a} /* ═══ Escuro: onde o contraste ainda faltava ══════════════════════════ Três buracos que a paleta sozinha não fecha, e que fazem a tela parecer "chapada" mesmo com a escada de cinzas certa. */ /* 1. Cartão dentro de cartão. KPI, mini-cartão e caixinha ficavam no MESMO preto da seção que os contém — só a borda separava. Agora o nível de dentro sobe um degrau: a hierarquia aparece antes de você ler nada. */ html[data-theme=dark] .cli-kpi,html[data-theme=dark] .cli-action, html[data-theme=dark] .med-c,html[data-theme=dark] .cx-card,html[data-theme=dark] .cal-day, html[data-theme=dark] .imp-card,html[data-theme=dark] .fu-step,html[data-theme=dark] .metric, html[data-theme=dark] .cli-rxc-card,html[data-theme=dark] .ag-card, html[data-theme=dark] .onb-int-cell{background:var(--sf2);border-color:var(--bd2)} /* 2. A moldura do cartão é o que desenha a borda no preto — então todo cartão usa a linha forte, não a fina. A linha fina fica só para separador interno (linha de tabela, divisória de lista). */ /* Marca de azulejo preto (Uber, Tidal, MUBI, Vercel, Apple TV+) sumia no fundo escuro: o contorno de dentro é escuro, feito para o tema claro. No escuro ele vira claro, e o selo volta a ter borda. */ html[data-theme=dark] .pz-logo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} html[data-theme=dark] .cli-hero,html[data-theme=dark] .pz-card,html[data-theme=dark] .cli-sec, html[data-theme=dark] .as-card,html[data-theme=dark] .as-total, html[data-theme=dark] .card,html[data-theme=dark] .cli-hero-res,html[data-theme=dark] .fat-box, html[data-theme=dark] .onb-box,html[data-theme=dark] .md,html[data-theme=dark] .auth-box, html[data-theme=dark] .cli-seg,html[data-theme=dark] .bmo-subtabs{border-color:var(--bd2)} /* 3. Divisas de estrutura: a lateral encostava no conteúdo (os dois em preto puro) e o topo fixo não tinha onde terminar. A lateral desce um fio abaixo do fundo e a divisa vira linha forte. */ html[data-theme=dark] .cli-sb{background:#080808;border-right-color:var(--bd2)} html[data-theme=dark] .cli-top{border-bottom-color:var(--bd2)} html[data-theme=dark] .cli-brand,html[data-theme=dark] .cli-foot, html[data-theme=dark] #cli-sb-id{border-color:var(--bd)} /* 4. As bolinhas de ícone dos avisos eram tinta forte com letra branca — 3,3:1, o pior ponto da tela. Viram tinta escura com letra clara, como todo o resto do tema. */ html[data-theme=dark] .cli-alert.ok .cli-alert-ic{background:#2a5a41;color:#c9f2da} html[data-theme=dark] .cli-alert.risco .cli-alert-ic{background:#63332d;color:#ffd6d1} html[data-theme=dark] .cli-alert.alerta .cli-alert-ic{background:#5e4b20;color:#ffe4b5} /* ═══ Bancos conectados (Pluggy) ═══ O cartão de conexão é o "está funcionando?" da aba Importar: banco, contas, quanto já entrou e quando foi a última vez. Antes disso a tela dizia só "Nenhum banco conectado", que não é resposta para quem já conectou. */ /* Superfícies SEMPRE por token: o tema escuro redefine --sf/--sf2/--bd, e um "#fff" cravado aqui vira card branco com texto branco em cima. Foi o que aconteceu — o card ficou ilegível no escuro. */ .pg-hero{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);padding:18px} .pg-cards{display:flex;flex-direction:column;gap:10px} .pg-card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} /* Logo do banco: redondo, com anel na cor da marca quando o conector a informa. O object-fit:contain impede o SVG de banco quadrado de sair esticado dentro do círculo. */ .pg-logo{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sf2); border:1px solid var(--bd);overflow:hidden;flex-shrink:0;font-size:19px} .pg-logo img{width:70%;height:70%;object-fit:contain;display:block} .pg-logo-sm{width:22px;height:22px;font-size:11px;border-radius:50%} /* na linha do extrato o selo do banco fica menor ainda: ele identifica a origem, não disputa com a descrição da compra */ .tr-origem{display:inline-flex;align-items:center;gap:6px} .tr-origem .pg-logo-sm{width:16px;height:16px;font-size:9px;border-width:1px} .pg-logo-sm img{width:76%;height:76%} .pg-card .pg-b{flex:1;min-width:200px} .pg-nome{font-size:14.5px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pg-contas{margin-top:6px;display:flex;flex-direction:column;gap:2px} .pg-conta{font-size:12.5px;color:var(--tx2);display:flex;gap:6px;align-items:baseline} .pg-conta b{font-weight:600;color:var(--tx)} .pg-conta span{color:var(--tx2);font-variant-numeric:tabular-nums} .pg-quando{font-size:11.5px;color:var(--tx2);margin-top:7px} .pg-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .pg-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.02em} .pg-tag.ok{background:var(--gr2);color:var(--gri)} .pg-tag.aguarde{background:var(--go2);color:var(--goi)} .pg-tag.reconectar{background:var(--re2);color:var(--rei)} .pg-vazio{text-align:center;padding:8px 4px 4px} .pg-vazio .pg-t{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:4px} .pg-vazio p{font-size:12.5px;color:var(--tx2);max-width:52ch;margin:0 auto 12px} .pg-erro{background:var(--re2);border:1px solid var(--re);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--re);margin-bottom:12px;word-break:break-word} .pg-rotas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px} .pg-rota{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 16px} .pg-rota .pg-t{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:4px} .pg-rota p{font-size:12.5px;color:var(--tx2);margin-bottom:10px;line-height:1.5} .pg-mais{margin-top:16px;border-top:1px solid var(--bd);padding-top:12px} .pg-mais>summary{font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;padding:4px 0;list-style:none} .pg-mais>summary::-webkit-details-marker{display:none} .pg-mais>summary::before{content:'▸ ';color:var(--tx3)} .pg-mais[open]>summary::before{content:'▾ '} .pg-mais>div{padding-top:12px} /* Texto de apoio DENTRO dos modais de conexão. A .fin-sub do app usa --tx3, que sobre branco fica em 2,56:1 — abaixo do legível. Num rodapé de tabela isso passa; aqui é a explicação inteira do convite e o link de dispensar, então vale a cor mais forte. (Trocar a .fin-sub global é decisão maior, do app todo, e não cabe nesta mudança.) */ .pg-md-txt{color:var(--tx2)!important} @media(max-width:900px){.pg-rotas{grid-template-columns:1fr}} /* ═══ Colunas planejado × realizado (gxColunasPlano) ═════════════════ Uma coluna por mês, altura em % de uma área de altura fixa: o contorno é o planejado, o preenchimento sobe por dentro dele. O preenchimento é recuado 2px de cada lado para as bordas laterais do contorno continuarem visíveis por baixo dele — sem o recuo, o "copo" some assim que enche. Só tokens de cor: no tema escuro isto continua legível sem regra própria. */ /* `stretch`, não `flex-end`: o rótulo do primeiro mês e o de cada janeiro têm duas linhas (mês e ano), e alinhar as colunas pelo pé faria a área de desenho dessas subir alguns pixels — as colunas perderiam o chão comum e as alturas deixariam de ser comparáveis, que é a única coisa que o gráfico pede. Alinhadas pelo topo, a área de desenho tem altura fixa e o chão é o mesmo; o rótulo cresce para baixo. */ /* Quem tem teto de largura é a BARRA, não a coluna. A coluna continua dividindo o card inteiro (`flex:1`) — é ela que recebe o clique, e é dentro dela que a linha da média atravessa de ponta a ponta. O teto vai no desenho. Sem teto nenhum, a forma da barra dependia de quantos meses o eixo tinha: doze meses num card de mil pixels davam barras de 73x132, seis davam LAJES de 155x132 — mais largas que altas, que não se leem como barra. E seis é exatamente o eixo de quem não tem orçamento, porque a série só acrescenta mês à frente que já tenha plano: a conta que nunca foi orçada caía sempre no eixo mais curto e no desenho mais deformado. Estreitar a COLUNA resolvia a laje e criava outro defeito: o gráfico juntava num canto e deixava metade do card vazia. Gráfico de barras preenche a largura com o ESPAÇO entre as barras, nunca engordando a barra — é o que estas regras fazem. */ .gx-cols{display:flex;align-items:stretch;gap:6px} .gx-cl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px; background:none;border:0;padding:4px 2px 2px;border-radius:10px;font:inherit;cursor:pointer} /* o hover NÃO pinta o fundo da coluna: o miolo do contorno já é --sf2, e um fundo da mesma cor apagaria o "copo" justo no mês que o mouse aponta. O que muda é a borda do contorno e o rótulo; o teclado ainda ganha o anel. */ .gx-cl:hover .gx-cl-p{border-color:var(--br)} .gx-cl:hover .gx-cl-rot{color:var(--tx)} .gx-cl:focus-visible{outline:2px solid var(--br);outline-offset:2px} .gx-cl-a{position:relative;height:132px;display:block} /* o contorno (planejado) e o preenchimento (realizado) ancoram no chão */ /* centradas na coluna e com teto próprio: a coluna estica, a barra não */ .gx-cl-p{position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:76px; bottom:0;min-height:4px; border:2px solid var(--bd2);border-radius:7px 7px 4px 4px;background:var(--sf2)} .gx-cl-r{position:absolute;left:50%;transform:translateX(-50%); width:calc(100% - 4px);max-width:72px; bottom:2px;min-height:3px;border-radius:5px 5px 3px 3px} /* mês que ainda não aconteceu: só o plano, e em traço pontilhado para não se confundir com um mês fechado que simplesmente não teve gasto */ .gx-cl-fut .gx-cl-p{border-style:dashed;background:transparent} /* O mês selecionado no topo: o destaque fica no RÓTULO, não atrás da barra. Pintar o fundo da coluna inteira desenhava, por cima da área de desenho, um retângulo alto e arredondado — igualzinho ao contorno do planejado. No mês que não tem plano nenhum isso é um contorno fantasma: a leitura vira "orçou tanto e gastou só isto" quando não se orçou nada. Rótulo em pílula mais o risco embaixo marcam o mês sem inventar geometria dentro do gráfico. */ .gx-cl-sel{box-shadow:inset 0 -2px 0 var(--br)} .gx-cl-sel .gx-cl-rot{color:var(--tx);font-weight:700; background:var(--br2);border-radius:6px;padding:1px 0; /* A pílula acompanha a BARRA, não a coluna: solta, ela estica com a coluna e vira um tarjão. `width:100%` junto com o teto é obrigatório — o rótulo é item de flex column, e `margin:auto` sozinho desliga o stretch e encolhe a pílula até o tamanho do texto (15px em "set"). */ width:100%;max-width:76px;margin:0 auto} /* a média dos meses fechados: um traço por coluna, na mesma altura — junto, lê-se como uma linha de referência atravessando o gráfico */ .gx-cl-med{position:absolute;left:-3px;right:-3px;height:0;border-top:1px dashed var(--tx3);opacity:.75} .gx-cl-rot{display:block;font-size:11px;color:var(--tx2);text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gx-cl-rot b{display:block;font-size:9.5px;font-weight:600;color:var(--tx3)} /* legenda compartilhada pelas colunas e pelo radar */ .gx-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--tx2)} .gx-leg span{display:inline-flex;align-items:center;gap:6px} .gx-leg i{width:11px;height:11px;border-radius:3px;flex:none} .gx-k-r{background:var(--gr)} .gx-k-p{background:var(--sf2);border:2px solid var(--bd2)} /* mês que aconteceu sem nada orçado: cinza, o "não havia o que comparar" */ .gx-k-s{background:var(--tx3)} .gx-k-m{height:0!important;width:14px!important;border-top:1px dashed var(--tx3);border-radius:0} /* ═══ Radar orçado × realizado (gxRadar) ════════════════════════════ Duas colunas: a teia à esquerda, a lista dos valores à direita. A teia dá a forma do mês, a lista dá os reais — separadas, uma pergunta ficaria sempre sem resposta. Abaixo de 900px elas empilham. A teia de fundo é traço fino em --bd: orienta sem competir com os dois polígonos, que são a informação. O preenchimento deles é quase transparente porque eles se SOBREPÕEM — opacos, o de cima esconderia o de baixo justamente onde os dois se cruzam, que é o ponto. */ .gx-rad-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center} .gx-rad-col{min-width:0} .gx-rad{width:100%;max-width:540px;margin:0 auto;display:block;height:auto;overflow:visible} .gx-rad-anel{fill:none;stroke:var(--bd);stroke-width:1} .gx-rad-raio{stroke:var(--bd);stroke-width:1} .gx-rad-p{stroke-width:2;stroke-dasharray:5 4;fill-opacity:.07;stroke-linejoin:round} .gx-rad-r{stroke-width:2.5;fill-opacity:.14;stroke-linejoin:round} .gx-rad-rot{font-size:11.5px;font-weight:600;fill:var(--tx2);font-family:inherit} /* muitos eixos: a letra cede junto com o comprimento do rótulo */ .gx-rad-mais .gx-rad-rot{font-size:10.5px} .gx-rad-rot.passou{fill:var(--re)} .gx-rad-reg{font-size:10px;fill:var(--tx3);font-family:inherit} .gx-rad g{cursor:default} .gx-rad g:hover .gx-rad-rot{fill:var(--tx)} /* a lista ao lado: três colunas, os números alinhados à direita e tabulares para as casas caírem umas sobre as outras */ .gx-rad-lista{min-width:0;font-variant-numeric:tabular-nums} .gx-rad-l{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px; align-items:baseline;padding:5px 8px;border-radius:8px;font-size:12px} .gx-rad-l b{font-weight:700;min-width:76px;text-align:right;color:var(--tx)} .gx-rad-l:not(.gx-rad-lh):not(.gx-rad-lt):hover{background:var(--sf2)} .gx-rad-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)} .gx-rad-lh{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)} .gx-rad-lh b{font-weight:600;font-size:10.5px;color:var(--tx3)} .gx-rad-lt{border-top:1px solid var(--bd);margin-top:4px;padding-top:8px} .gx-rad-lt span{font-weight:700;color:var(--tx)} /* a linha dobrável do "Outras": botão com cara de linha, a seta girando e a cauda escondida até o clique. `display:none` e não altura zero — linha invisível continuaria recebendo o mouse e disparando o balão. */ .gx-rad-tog{font:inherit;border:0;background:none;width:100%;text-align:left;cursor:pointer} .gx-rad-tog:hover{background:var(--sf2)} .gx-rad-tog:focus-visible{outline:2px solid var(--br);outline-offset:-2px} .gx-rad-tog .gx-rad-n::before{content:'▸';display:inline-block;width:11px; margin-right:4px;color:var(--tx3);transition:transform .15s} .gx-rad-g.aberto .gx-rad-tog .gx-rad-n::before{transform:rotate(90deg)} .gx-rad-g:not(.aberto) .gx-rad-f{display:none} .gx-rad-f{font-size:11.5px;padding-left:23px} .gx-rad-f .gx-rad-n{color:var(--tx3)} .gx-rad-f b{font-weight:600;color:var(--tx2)} /* O realizado que passou do teto, em VERMELHO — em toda linha da lista: as dez do radar, a soma do "Outras", cada categoria da cauda e o total. Precisa do `.gx-rad-l b` na frente porque é ele que pinta a coluna de valores; `.gx-rad-x` sozinho perdia por especificidade, e o vermelho só aparecia nas sublinhas — que tinham regra própria, mais forte. */ .gx-rad-l b.gx-rad-x{color:var(--re)} /* a seta da ponta que nem na faixa de fuga coube, e a nota que explica a régua */ .gx-rad-seta{stroke:none} .gx-rad-nota{font-size:11px;line-height:1.5;color:var(--tx2);margin-top:8px;max-width:52ch} .gx-rad-nota b{color:var(--tx)} /* 1100 e não 900: o menu lateral come 236px, então a 950 de janela cada coluna ficaria com ~330 — e a teia, que é um SVG com viewBox, encolheria o próprio texto junto. Empilhado, o desenho volta ao tamanho em que foi desenhado e a lista alinha embaixo, na mesma largura. */ @media(max-width:1100px){ .gx-rad-wrap{grid-template-columns:1fr;gap:16px} .gx-rad-lista{width:100%;max-width:540px;margin:0 auto} } /* empilhado no celular a teia encolhe, e o texto do SVG encolhe junto com ela (viewBox é escala): os tamanhos aqui são para render, não para leitura */ @media(max-width:760px){ .gx-rad-rot{font-size:15px} .gx-rad-reg{font-size:13px} .gx-cols{gap:3px} .gx-cl{padding:3px 1px 1px} .gx-cl-a{height:104px} .gx-cl-rot{font-size:10px} } /* ═══ Investimentos (investimentos.js) ═══ Tudo em variáveis do tema: nada aqui precisa de regra própria no escuro. */ /* a carteira numa barra só: um segmento por classe, na cor da classe */ .inv-stack{display:flex;height:14px;border-radius:9px;overflow:hidden;background:var(--sf2);margin:4px 0 16px;gap:2px} .inv-stack span{display:block;height:100%;min-width:3px} .inv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px} .inv-tbl td{white-space:nowrap} .inv-tbl td:first-child{white-space:normal;min-width:200px} .inv-tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--pu);cursor:pointer} /* aportes mês a mês: rótulo, barra (aporte e, se houve, resgate) e valor */ .inv-mes{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:12.5px;color:var(--tx2)} .inv-mes-l{text-transform:capitalize;color:var(--tx3);font-weight:600} .inv-mes-b{display:flex;flex-direction:column;gap:2px} .inv-mes-b i{display:block;height:7px;border-radius:4px;min-width:2px} .inv-mes-v{text-align:right;line-height:1.25} .inv-mes-v b{color:var(--tx);font-weight:700} .inv-mes-v em{display:block;font-style:normal;font-size:11px;color:var(--go)} /* legenda da barra no quadro da Início */ .inv-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--tx2)} .inv-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}