@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
:root {
  --bg:#0f1729;--bg2:#1e293b;--s1:#1e293b;--s2:#334155;--s3:#475569;
  --b1:#334155;--b2:#475569;--b3:#64748b;
  --tx:#f8fafc;--t2:#cbd5e1;--t3:#94a3b8;--t4:#64748b;
  --orange:#3b82f6;--orange2:#60a5fa;--ob:rgba(59,130,246,.1);--obr:rgba(59,130,246,.3);
  --white:#f8fafc;
  --chico:#10b981;--chico-b:rgba(16,185,129,.08);--chico-br:rgba(16,185,129,.28);
  --dieni:#a855f7;--dieni-b:rgba(168,85,247,.08);--dieni-br:rgba(168,85,247,.28);
  --casal:#f59e0b;--casal-b:rgba(245,158,11,.08);--casal-br:rgba(245,158,11,.28);
  --ok:#4ade80;--warn:#e8a838;--danger:#f87171;--info:#60a5fa;--purple:#a855f7;--teal:#0d9488;--teal2:rgba(13,148,136,0.12);
  --r:8px;--rl:16px;--rxl:24px;
}
body.light {
  --bg:#f8fafc;--bg2:#f1f5f9;--s1:#ffffff;--s2:#f1f5f9;--s3:#e2e8f0;
  --b1:#e2e8f0;--b2:#cbd5e1;--b3:#94a3b8;
  --tx:#0f172a;--t2:#334155;--t3:#475569;--t4:#64748b;
  --orange:#2563eb; --casal:#d97706; --ok:#16a34a; --white:#0f172a;
  --ob:rgba(37,99,235,.12); --obr:rgba(37,99,235,.35);
}
body.light::before {
  background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(37,99,235,.05) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 10% 80%,rgba(16,185,129,.04) 0%,transparent 60%);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--tx);font-family:'Nunito',sans-serif;font-size:14px;line-height:1.6;min-height:100vh;overflow-x:hidden;transition:background 0.3s, color 0.3s;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(59,130,246,.07) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 10% 80%,rgba(16,185,129,.05) 0%,transparent 60%);pointer-events:none;z-index:0;}

/* Lógica CSS para esconder elementos do Casal no modo Individual */
body.modo-individual .only-casal { display: none !important; }
body.modo-individual nav .nav-avs { display: flex !important; visibility: hidden; }
body.modo-individual .kpi-grid:not([style]) { grid-template-columns: repeat(3, 1fr); }
body.modo-individual #dash-kpi-section .kpi-o { grid-column: 2 !important; }
#rel-kpi-grid { grid-template-columns: repeat(4,1fr); }
body.modo-individual #rel-kpi-grid { grid-template-columns: repeat(2,1fr); }
body.modo-individual .sc-c { display: none !important; }
body.modo-individual .sg { display: none !important; }
body.modo-individual #dash-rem-cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 18px; }
body.modo-individual #dash-rem-cat-row .cg { grid-template-columns: 1fr; margin-bottom: 0; }
body.modo-individual #dash-rem-cat-row .cg .card { height: 100%; box-sizing: border-box; }
body.modo-individual #dash-rem-card { display: flex; flex-direction: column; margin-bottom: 0 !important; }
body.modo-individual #dash-reminders-list { flex: 1; overflow-y: auto; max-height: none; }
#dash-rem-cat-row { margin-bottom: 0; }
#dash-reminders-list { overflow-y: auto; max-height: 360px; }
body.modo-individual #card-chCat { grid-column: span 2; }
body.modo-individual #cfg-profiles-row { grid-template-columns: 1fr !important; max-width: 420px; }

#login-page { position:relative; z-index:100; display:flex; align-items:center; justify-content:center; min-height:100vh; padding: 20px;}
#splash{position:fixed;inset:0;background:var(--bg);z-index:1000;display:none;flex-direction:column;align-items:center;justify-content:center;transition:opacity .9s,transform .9s;}
#splash.hide{opacity:0;pointer-events:none;transform:scale(1.05);}
.sp-flames{position:absolute;bottom:0;left:0;right:0;height:320px;background:linear-gradient(to top,rgba(59,130,246,.4) 0%,rgba(37,99,235,.18) 45%,transparent 100%);animation:flicker 3s ease-in-out infinite alternate;}
@keyframes flicker{0%{opacity:.7;transform:scaleY(1);}100%{opacity:1;transform:scaleY(1.08);}}
.sp-logo{font-size:52px;font-weight:900;letter-spacing:1px;position:relative;z-index:2;animation:logoReveal 1s cubic-bezier(.22,.68,0,1.15) forwards;text-align:center;}
.sp-logo .w{color:var(--white);}.sp-logo .o{color:var(--orange);}
@keyframes logoReveal{from{opacity:0;transform:translateY(28px) scale(.82);}to{opacity:1;transform:translateY(0) scale(1);}}
.sp-tag{color:var(--t2);font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-top:8px;position:relative;z-index:2;animation:fadeUp 1s .4s both;text-align:center;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.sp-dots{display:flex;gap:8px;margin-top:22px;position:relative;z-index:2;}
.sp-dots span{width:7px;height:7px;border-radius:50%;background:var(--orange);opacity:0;animation:dotPulse 1.3s ease infinite;}
.sp-dots span:nth-child(1){animation-delay:.0s;}
.sp-dots span:nth-child(2){animation-delay:.2s;}
.sp-dots span:nth-child(3){animation-delay:.4s;}
@keyframes dotPulse{0%,100%{opacity:.2;transform:scale(1);}45%{opacity:1;transform:scale(1.5);}}

#app{display:none;position:relative;z-index:1;}
#app.show{display:block;}
nav{display:flex;align-items:center;justify-content:space-between;padding:13px 26px;border-bottom:1px solid var(--b1);position:sticky;top:0;background:var(--bg);z-index:100;backdrop-filter:blur(20px);}
body:not(.light) nav{background:rgba(15,23,41,.96);}
body.light nav{background:rgba(248,250,252,.96);}
nav::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange),var(--casal),var(--orange),transparent);opacity:.5;}
.nav-logo{font-size:19px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:8px;}
.nav-logo .w{color:var(--white);}.nav-logo .o{color:var(--orange);}
.nav-tabs{display:flex;gap:3px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--rxl);padding:4px;}
.ntab{padding:6px 14px;border-radius:calc(var(--rxl) - 4px);border:none;background:transparent;color:var(--t3);font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;}
.ntab:hover{color:var(--tx);}
.ntab.on{background:var(--orange);color:white!important;box-shadow:0 2px 12px rgba(59,130,246,.3);}
.nav-avs{display:flex;gap:10px;align-items:center;}
.nav-av{display:flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;border:1px solid;font-size:12px;font-weight:700;cursor:default;}
.nav-av-c{border-color:var(--chico-br);color:var(--chico);background:var(--chico-b);}
.nav-av-d{border-color:var(--dieni-br);color:var(--dieni);background:var(--dieni-b);}
.page{display:none;max-width:1450px;margin:0 auto;padding:26px 18px 70px;}
.page.on{display:block;animation:pIn .25s ease;}
@keyframes pIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.ph-title{font-size:21px;font-weight:800;color:var(--white);display:flex;align-items:center;gap:10px;}
.ph-title::after{content:'';display:block;width:36px;height:4px;background:var(--orange);border-radius:2px;margin-left:5px;}
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rl);padding:20px;position:relative;}
.ct{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
.ct.collapsible{cursor:pointer;}
.ct.collapsible:hover{color:var(--orange);}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
.kpi{background:var(--s2);border-radius:var(--rl);padding:16px;border:1px solid var(--b1);position:relative;overflow:hidden;transition:transform .2s,border-color .2s; cursor:default;}
.kpi.clickable{cursor:pointer;}
.kpi:hover{border-color:var(--b2);}
.kpi-label{font-size:10px;color:var(--t3);margin-bottom:7px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;}
.kpi-value{font-size:22px;font-weight:800;letter-spacing:-0.5px;}
.kpi-sub{font-size:10px;color:var(--t4);margin-top:3px;}
.kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--rl) var(--rl);transition:box-shadow .3s;}
.kpi-o .kpi-value{color:var(--orange);}.kpi-o::after{background:var(--orange);box-shadow:0 0 8px var(--orange);}
.kpi-c .kpi-value{color:var(--chico);}.kpi-c::after{background:var(--chico);box-shadow:0 0 8px var(--chico);}
.kpi-d .kpi-value{color:var(--dieni);}.kpi-d::after{background:var(--dieni);box-shadow:0 0 8px var(--dieni);}
.kpi-ca .kpi-value{color:var(--casal);}.kpi-ca::after{background:var(--casal);box-shadow:0 0 8px var(--casal);}
.kpi-ok .kpi-value{color:var(--ok);}.kpi-ok::after{background:var(--ok);box-shadow:0 0 8px var(--ok);}
.kpi-danger .kpi-value{color:var(--danger);}.kpi-danger::after{background:var(--danger);box-shadow:0 0 8px var(--danger);}
/* KPI: faísca corre da esq pra dir, linha acende e estabiliza */
.kpi::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--rl) var(--rl);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);background-size:35% 100%;background-repeat:no-repeat;background-position:-35% 0;opacity:0;pointer-events:none;z-index:1;}
.kpi:hover::before{opacity:1;animation:kpiSpark .55s ease-out forwards;}
.kpi:hover::after{animation:kpiLineGlow .8s ease forwards;}
@keyframes kpiSpark{from{background-position:-35% 0;}to{background-position:135% 0;}}
@keyframes kpiLineGlow{0%{filter:brightness(1);}40%{filter:brightness(2.5);}100%{filter:brightness(1.4);}}
/* ── Propriedade CSS animável para o ângulo da borda ── */
@property --ba {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;}
.scard{border-radius:var(--rl);padding:20px;border:1px solid;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;}
.scard:hover{transform:translateY(-2px);}
/* Círculo decorativo no canto — vira anel fino no hover */
.scard::before{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;opacity:.07;transition:opacity .3s,background .3s,box-shadow .3s,border-width .3s,border-color .3s;border:0px solid transparent;}
.sc-c{background:var(--chico-b);border-color:var(--chico-br);}.sc-c::before{background:var(--chico);}
.sc-d{background:var(--dieni-b);border-color:var(--dieni-br);}.sc-d::before{background:var(--dieni);}
.sc-ca{background:var(--casal-b);border-color:var(--casal-br);}.sc-ca::before{background:var(--casal);}
.sc-c:hover::before{background:transparent;border:2px solid var(--chico);box-shadow:0 0 12px var(--chico);opacity:.45;}
.sc-d:hover::before{background:transparent;border:2px solid var(--dieni);box-shadow:0 0 12px var(--dieni);opacity:.45;}
.sc-ca:hover::before{background:transparent;border:2px solid var(--casal);box-shadow:0 0 12px var(--casal);opacity:.45;}
/* Faísca mais grossa que corre ao redor da borda do card */
.scard::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;background:conic-gradient(from var(--ba),transparent 0%,rgba(255,255,255,.95) 8%,rgba(255,255,255,.5) 16%,transparent 24%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;}
/* Faísca colorida no modo claro (branco não contrasta) */
body.light .sc-c::after{background:conic-gradient(from var(--ba),transparent 0%,var(--chico) 8%,rgba(16,185,129,.35) 18%,transparent 26%);}
body.light .sc-d::after{background:conic-gradient(from var(--ba),transparent 0%,var(--dieni) 8%,rgba(168,85,247,.35) 18%,transparent 26%);}
body.light .sc-ca::after{background:conic-gradient(from var(--ba),transparent 0%,var(--casal) 8%,rgba(245,158,11,.35) 18%,transparent 26%);}
.scard:hover::after{animation:scardBorderRun 1.1s linear forwards;}
@keyframes scardBorderRun{0%{--ba:0deg;opacity:1;}80%{opacity:1;}100%{--ba:360deg;opacity:0;}}
/* Hover simples para itens em containers com overflow restrito */
.kpi  { transition: transform .15s ease, border-color .2s; }
.mbtn { transition: transform .12s ease, background .15s, color .15s, border-color .15s; }
.ntab { transition: transform .09s ease, background .18s, color .18s; }
.fbtn { transition: transform .09s ease, background .12s, color .12s, border-color .12s; }
.scard{ transition: transform .15s ease, border-color .2s; }
.kpi:hover  { transform: scale(1.04); z-index: 10; position: relative; }
.mbtn:hover { transform: scale(1.1);  z-index: 10; position: relative; }
.scard:hover{ transform: scale(1.03); z-index: 10; }
.sc-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.sc-av{font-size:26px;}
.sc-name{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.sc-c .sc-name{color:var(--chico);}.sc-d .sc-name{color:var(--dieni);}.sc-ca .sc-name{color:var(--casal);}
.sc-theme{font-size:11px;color:var(--t3);}
.sc-amt{font-size:26px;font-weight:800;letter-spacing:-1px;margin-bottom:3px;}
.sc-c .sc-amt{color:var(--chico);}.sc-d .sc-amt{color:var(--dieni);}.sc-ca .sc-amt{color:var(--casal);}
.sc-sub{font-size:11px;color:var(--t3);margin-bottom:11px;}
.sc-rows{border-top:1px solid var(--b1);padding-top:9px;}
.sc-row{display:flex;justify-content:space-between;font-size:12px;color:var(--t3);padding:3px 0;gap:8px;}
.sc-row span:last-child{color:var(--tx);text-align:right;}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.cw{position:relative;width:100%;}
.leg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.li{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--t2);}
.ls{width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.mstrip{display:flex;align-items:center;gap:10px;margin-bottom:14px;overflow-x:auto;padding:10px 4px;}
.mstrip::-webkit-scrollbar{height:3px;}.mstrip::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
.msl{font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; font-weight:700;}
.mbtn{padding:5px 13px;border-radius:20px;border:1px solid var(--b1);background:transparent;color:var(--t3);font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
.mbtn:hover{border-color:var(--b2);color:var(--tx);}
.mbtn.on{background:var(--ob);border-color:var(--obr);color:var(--orange);}
.minput{padding:5px 9px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);color:var(--tx);font-family:'Nunito',sans-serif;font-size:12px;outline:none;}
.minput:focus{border-color:var(--obr);}
.tc{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;flex-wrap:wrap;gap:8px;}
.tn{font-size:15px;font-weight:800;}
.tm{font-size:12px;color:var(--t3);margin-top:1px;}
.fr{display:flex;gap:14px;flex-wrap:wrap;padding:6px 2px;}
.fbtn:hover{transform:scale(1.08);z-index:10;position:relative;}
.fbtn{padding:8px 16px;border-radius:20px;border:1px solid var(--b1);background:transparent;color:var(--t3);font-family:'Nunito',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .12s;}
.fbtn:hover,.fbtn.on{border-color:var(--obr);color:var(--orange);background:var(--ob);}
.tw{border:1px solid var(--b1);border-radius:var(--rl);overflow:hidden;margin-bottom:11px;}
table{width:100%;border-collapse:collapse;}
thead th{background:var(--s2);padding:10px 12px;text-align:left;font-size:11px;color:var(--t3);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--b1);font-weight:800;white-space:nowrap;user-select:none;cursor:pointer; transition:color 0.2s;}
thead th:hover{color:var(--orange);}
tbody tr{border-bottom:1px solid var(--b1);transition:background .1s;cursor:pointer;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover td{background:rgba(59,130,246,.025);}
tbody tr.sel td{background:rgba(59,130,246,.07)!important;outline:1px solid rgba(59,130,246,.25);}
tbody tr.rp-c td{border-left:3px solid var(--chico);}
tbody tr.rp-d td{border-left:3px solid var(--dieni);}
tbody tr.rp-ca td{border-left:3px solid var(--casal);}
td{padding:10px 12px;vertical-align:middle;font-size:13px;}
td[contenteditable="true"]{outline:1px solid var(--obr);background:rgba(59,130,246,.04)!important;border-radius:4px;}
.dm{color:var(--tx);line-height:1.35;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px;}
.ib{display:inline-block;margin-top:2px;padding:1px 5px;border-radius:4px;font-size:9px;background:var(--ob);border:1px solid var(--obr);color:var(--orange);}
.intb{display:inline-block;padding:1px 5px;border-radius:4px;font-size:9px;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.25);color:var(--info);margin-left:3px;}
.iproj{display:inline-block;padding:1px 5px;border-radius:4px;font-size:9px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);color:var(--purple);margin-left:3px;}
.ip{display:flex;align-items:center;gap:7px;}
.ib2{flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden;}
.if2{height:100%;background:var(--orange);border-radius:3px;}
.it{font-size:10px;color:var(--t2);white-space:nowrap;font-weight:700;}
.csel{padding:5px 7px;border-radius:6px;border:1px solid var(--b2);background:var(--s2);color:var(--t2);font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;cursor:pointer;outline:none;max-width:140px;}
.csel:focus{border-color:var(--obr);}
.del-btn{background:transparent;border:none;cursor:pointer;color:var(--t4);font-size:13px;padding:3px 6px;border-radius:4px;transition:color .15s;}
.del-btn:hover{color:var(--danger);}
.stb{display:none;align-items:center;gap:9px;padding:10px 16px;background:var(--s2);border:1px solid var(--obr);border-radius:var(--r);margin-bottom:10px;flex-wrap:wrap;}
.stb.show{display:flex;}
.stb-cnt{font-size:13px;color:var(--orange);font-weight:800;}
.stb-lbl{font-size:12px;color:var(--t3);}
.sdiv{width:1px;height:18px;background:var(--b2);}
.sbtn{padding:5px 12px;border-radius:var(--r);border:1px solid var(--b2);background:transparent;color:var(--t2);font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .12s;}
.sbtn:hover{border-color:var(--obr);color:var(--orange);background:var(--ob);}
.sbtn.sc{border-color:var(--chico-br);color:var(--chico);}.sbtn.sd{border-color:var(--dieni-br);color:var(--dieni);}
.fc{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rl);padding:20px;margin-bottom:18px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fl{font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;font-weight:800;}
.fi{padding:8px 12px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r);color:var(--tx);font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;outline:none;transition:border .15s;width:100%;}
.fi:focus{border-color:var(--obr);}
.fi::placeholder{color:var(--t4);font-weight:400;}
select.fi{cursor:pointer;}
.btn{padding:9px 18px;border-radius:var(--r);border:1px solid;cursor:pointer;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.btn-p{background:var(--orange);border-color:transparent;color:white!important;box-shadow:0 2px 10px rgba(59,130,246,.22);}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(59,130,246,.38);}
.btn-g{background:transparent;border-color:var(--b2);color:var(--t2);}
.btn-g:hover{border-color:var(--b3);color:var(--tx);}
.btn-d{background:transparent;border-color:var(--b2);color:var(--t3);}
.btn-d:hover{border-color:var(--danger);color:var(--danger);}
.btn-w{background:var(--s2); border-color:var(--b1); color:var(--tx); display:flex; align-items:center; gap:8px;}
.btn-w:hover{background:var(--s3); border-color:var(--b2);}
.btn-sm{padding:6px 12px;font-size:11px;}
.dz{border:2px dashed var(--b2);border-radius:var(--rl);padding:50px 24px;text-align:center;cursor:pointer;transition:all .18s;background:var(--s1);margin-bottom:14px;}
.dz:hover,.dz.over{border-color:var(--orange);background:rgba(59,130,246,.03);}
.dz-icon{font-size:42px;margin-bottom:13px;}
.dz-title{font-size:18px;font-weight:800;margin-bottom:7px;}
.dz-sub{color:var(--t3);font-size:13px;line-height:1.8;}
.dz-sub b{color:var(--orange);font-weight:800;}
#fi{display:none;}
.stg{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ss{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rl);padding:20px;}
.ss-title{font-size:14px;font-weight:800;color:var(--orange);margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.sw{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--s2);border:2px solid var(--b2);cursor:pointer;transition:all .15s;}
.sw:hover{transform:scale(1.15);}
.sw.on{border-color:var(--tx);transform:scale(1.1);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--b3);}
.empty{text-align:center;padding:44px 18px;color:var(--t4);}
.empty-i{font-size:42px;margin-bottom:10px;}
.empty-t{font-size:15px;font-weight:700;color:var(--t3);margin-bottom:5px;}
.tr-total{background:var(--s2);border-top:2px solid var(--b1);}

/* ESTILOS PARA TOAST E MODAL DE LEMBRETES */
.toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--s2); border-left:4px solid var(--orange); padding:15px 20px; border-radius:var(--r); box-shadow:0 8px 24px rgba(0,0,0,0.5); transform:translateX(120%); transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); color:var(--tx); display:flex; flex-direction:column; gap:5px; }
.toast.show { transform:translateX(0); }
.toast-title { font-weight:800; color:var(--orange); font-size:15px; }
.toast-body { font-size:13px; color:var(--t3); }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(3px); z-index:2000; display:none; align-items:center; justify-content:center; }
.modal-bg.show { display:flex; animation: fadeIn 0.2s ease; }
.modal-card { background:var(--s1); border:1px solid var(--b1); border-radius:var(--rxl); padding:24px; width:100%; max-width:460px; box-shadow:0 10px 40px rgba(0,0,0,0.8); }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.rem-item { display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--s2); border:1px solid var(--b1); border-radius:var(--r); margin-bottom:8px; }
.rem-item.paid { border-left: 4px solid var(--ok); background:rgba(74,222,128,0.05); }
.rem-item.warn { border-left: 4px solid var(--warn); }
.rem-item.danger { border-left: 4px solid var(--danger); background:rgba(248,113,113,0.05); }

/* --- MELHORIAS DE LAYOUT E TAMANHO DE FONTE (DESKTOP) --- */
.page { max-width: 1500px; padding: 30px 24px 80px; } 
nav { padding: 18px 32px; } 
.nav-logo { font-size: 26px; } 
.ntab { font-size: 15px; padding: 10px 20px; } 
.nav-av { font-size: 14px; padding: 8px 16px; } 
body { font-size: 15px; } 
.ph-title { font-size: 28px; } 
.mbtn, .msl { font-size: 14px; padding: 8px 16px; } 
.kpi-label { font-size: 13px; } 
.kpi-sub { font-size: 12px; } 
.kpi-value { font-size: 32px; } 
.ct { font-size: 15px; }
  
/* --- Eye toggle: hide monetary values --- */
body.hide-vals .kpi-value,
body.hide-vals .sc-amt,
body.hide-vals .sc-row-amt {
  filter: blur(7px);
  user-select: none;
  transition: filter .25s;
}
body:not(.hide-vals) .kpi-value,
body:not(.hide-vals) .sc-amt,
body:not(.hide-vals) .sc-row-amt {
  filter: none;
  transition: filter .25s;
}

/* --- INÍCIO DO CÓDIGO DE RESPONSIVIDADE (CELULAR) --- */
@media(max-width:1024px) {
  .fc > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-grid[style*="grid-template-columns"]:not(#rel-kpi-grid) { grid-template-columns: 1fr !important; }
  .sg, .cg, .stg { grid-template-columns: 1fr !important; }
  .ss[style*="grid-column:span 2"], .kpi[style*="grid-column: span"] { grid-column: auto !important; }
  #cfg-profiles-row { grid-template-columns: 1fr !important; }
  
  nav { padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  .nav-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }
  .nav-tabs::-webkit-scrollbar { height: 3px; }
  .nav-tabs::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }
  .nav-avs { width: 100%; justify-content: center; }
  
  .fc > div[style*="grid-template-columns"], 
  #page-importar > div[style*="grid-template-columns"] { 
    grid-template-columns: 1fr !important; gap: 10px;
  }
}
@media(max-width:640px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .tc, .fr { flex-direction: column; align-items: stretch; width: 100%; }
  
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 800px; } 
  
  .stb { flex-direction: column; align-items: stretch; }
  .stb .sdiv { width: 100%; height: 1px; margin: 4px 0; }
  .stb > div { flex-wrap: wrap; justify-content: stretch; }
  .sbtn { width: 100%; justify-content: center; }
}

/* Isso vai colorir qualquer valor que comece com o sinal de menos (-) */
tbody tr td span[contenteditable="true"] { transition: color 0.2s; }
.estorno-verde { color: var(--ok) !important; font-weight: 800; }

/* Credit card grouping */
.cc-parent-row { background: var(--ob) !important; }
.cc-parent-row td { border-top: 2px solid var(--orange) !important; }
.cc-child-row td:nth-child(2) { padding-left: 28px !important; }
.cc-child-header-row td { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--t4);padding:4px 8px !important;background:var(--s2);border-bottom:1px solid var(--b1); }
.expand-btn { background:none;border:none;cursor:pointer;font-size:11px;padding:2px 5px;color:var(--t3);border-radius:4px;transition:transform 0.15s;display:inline-block; }
.expand-btn.open { transform:rotate(90deg); }
.pdate { font-size:10px;color:var(--t3);margin-top:2px; }

/* Emoji picker */
emoji-picker {
  --background: var(--s1);
  --border-color: var(--b1);
  --button-hover-background: var(--s2);
  --category-emoji-padding: 6px;
  --emoji-size: 1.4rem;
  --input-border-color: var(--b2);
  --input-font-color: var(--tx);
  --input-placeholder-color: var(--t4);
  --outline-color: var(--obr);
  border-radius: var(--rl);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  max-height: 380px;
}
.btn-emoji-pick {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 22px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.btn-emoji-pick:hover { background: var(--s3); border-color: var(--obr); }

/* ── Ripple ── */
.btn, .mbtn, .fbtn, .sbtn, .ntab { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,0.22);
  transform: scale(0); animation: rippleAnim 0.55s linear forwards;
}
@keyframes rippleAnim { to { transform: scale(2.5); opacity: 0; } }

/* ── Card entrance (stagger) ── */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-card {
  animation: cardSlideIn 0.38s cubic-bezier(.22,.68,0,1.2) both;
}

/* ── Barra de parcelas ── */
.bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--orange) 0%, #a855f7 100%);
  width: 0%;
  transition: width 0.7s cubic-bezier(.4,0,.2,1);
}
.bar-track {
  flex: 1; height: 8px; background: var(--s3); border-radius: 4px; overflow: hidden;
}