:root{
  /* LIGHT MODE */
  --bg:#f0f2f5;
  --sidebar:#1a237e;
  --sidebar-hover:rgba(255,255,255,.12);
  --sidebar-active:rgba(255,255,255,.2);
  --card:#ffffff;
  --card2:#f8f9ff;
  --border:#e2e6f0;
  --tx:#1a1f36;--tx2:#4a5568;--tx3:#8492a6;
  --ac:#3d5afe;--ac2:#1a237e;
  --inp-bg:#ffffff;--inp-border:#d0d7e8;
  --font:'Plus Jakarta Sans',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:10px;--r2:14px;--r3:16px;--r4:22px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --b1:#e2e6f0;--b2:#c8d0e8;
  --re:#ef4444;--gr:#22c55e;
  --s1:#ffffff;--s2:#f8f9ff;
}

/* ── DARK MODE ── */
body.dark-mode{
  --bg:#111827;
  --sidebar:#0d1426;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:#4338ca;
  --card:#1e2a3d;
  --card2:#263044;
  --border:#2d3d57;
  --tx:#f1f5f9;--tx2:#94a3b8;--tx3:#475569;
  --ac:#6366f1;--ac2:#4338ca;
  --inp-bg:#1e2a3d;--inp-border:#2d3d57;
  --shadow:0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --b1:#2d3d57;--b2:#2d3d57;
  --re:#ef4444;--gr:#22c55e;
  --s1:#1e2a3d;--s2:#263044;
}

/* Fundo e estrutura */
body.dark-mode .main{background:var(--bg)!important}
body.dark-mode #app{background:var(--bg)!important}

/* Sidebar */
body.dark-mode .sidebar{background:var(--sidebar)!important;border-right-color:#1a2540!important}
body.dark-mode .sb-section{color:rgba(148,163,184,.5)!important}
body.dark-mode .nav{color:rgba(226,232,240,.65)!important}
body.dark-mode .nav:hover{background:rgba(255,255,255,.07)!important;color:#f1f5f9!important}
body.dark-mode .nav.on{background:#4338ca!important;color:#fff!important;border-radius:10px!important}
body.dark-mode .nav.on::before{display:none!important}
body.dark-mode .sb-bot{border-top-color:#1a2540!important}
body.dark-mode .mob-header{background:rgba(13,20,38,.97)!important;border-color:#1a2540!important}

/* STAT CARDS dark — mesmas cores sólidas do light, ligeiramente mais profundas */
body.dark-mode .sc-blue{background:linear-gradient(135deg,#1565c0,#1e88e5)!important;border:none!important;box-shadow:0 6px 22px rgba(21,101,192,.5)!important}
body.dark-mode .sc-red{background:linear-gradient(135deg,#b71c1c,#e53935)!important;border:none!important;box-shadow:0 6px 22px rgba(183,28,28,.5)!important}
body.dark-mode .sc-or{background:linear-gradient(135deg,#e65100,#ff7043)!important;border:none!important;box-shadow:0 6px 22px rgba(230,81,0,.5)!important}
body.dark-mode .sc-ye{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;border:none!important;box-shadow:0 6px 22px rgba(245,158,11,.5)!important}
body.dark-mode .sc-gr{background:linear-gradient(135deg,#1b5e20,#2e7d32)!important;border:none!important;box-shadow:0 6px 22px rgba(27,94,32,.5)!important}
body.dark-mode .sc-pu{background:linear-gradient(135deg,#4a148c,#6a1b9a)!important;border:none!important;box-shadow:0 6px 22px rgba(74,20,140,.5)!important}
body.dark-mode .sc-blue .sc-ic,body.dark-mode .sc-red .sc-ic,body.dark-mode .sc-or .sc-ic,body.dark-mode .sc-ye .sc-ic,body.dark-mode .sc-gr .sc-ic,body.dark-mode .sc-pu .sc-ic{background:rgba(255,255,255,.2)!important;color:#fff!important}
body.dark-mode .sc-blue .sc-num,body.dark-mode .sc-red .sc-num,body.dark-mode .sc-or .sc-num,body.dark-mode .sc-gr .sc-num,body.dark-mode .sc-pu .sc-num{color:#fff!important}
body.dark-mode .sc-ye .sc-num{color:rgba(0,0,0,.8)!important}
body.dark-mode .sc-blue .sc-lbl,body.dark-mode .sc-red .sc-lbl,body.dark-mode .sc-or .sc-lbl,body.dark-mode .sc-gr .sc-lbl,body.dark-mode .sc-pu .sc-lbl{color:rgba(255,255,255,.8)!important}
body.dark-mode .sc-ye .sc-lbl{color:rgba(0,0,0,.65)!important}

/* Cards gerais */
body.dark-mode .card{background:#1e2a3d!important;border-color:#2d3d57!important;box-shadow:0 2px 12px rgba(0,0,0,.4)!important}
body.dark-mode .card-title{color:#f1f5f9!important}
body.dark-mode .metric-card{border-color:transparent}
body.dark-mode .metric-title{color:rgba(255,255,255,.85)!important}
body.dark-mode .metric-val{color:#fff!important}
body.dark-mode .metric-sub{color:rgba(255,255,255,.7)!important}

/* Cards de clientes — fundo escuro + borda esquerda colorida */
body.dark-mode .c-row{background:#1e2a3d!important;border:1px solid #2d3d57!important;border-left-width:4px!important}
body.dark-mode .c-row:hover{background:#263044!important;box-shadow:0 4px 16px rgba(0,0,0,.4)!important}
body.dark-mode .c-row.st-pago{border-left-color:#22c55e!important}
body.dark-mode .c-row.st-vencido{border-left-color:#ef4444!important}
body.dark-mode .c-row.st-hoje{border-left-color:#f97316!important}
body.dark-mode .c-row.st-urgente{border-left-color:#eab308!important}
body.dark-mode .c-row.st-proximo{border-left-color:#8b5cf6!important}
body.dark-mode .c-row.st-ok{border-left-color:#22c55e!important}
body.dark-mode .c-nome{color:#f1f5f9!important}
body.dark-mode .c-meta{color:#94a3b8!important}

/* Inputs e formulários */
body.dark-mode .inp{background:#1e2a3d!important;border-color:#2d3d57!important;color:#f1f5f9!important}
body.dark-mode .inp::placeholder{color:#475569!important}
body.dark-mode .inp:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.2)!important}
body.dark-mode select option{background:#1e2a3d!important;color:#f1f5f9!important}

/* Badges dark */
body.dark-mode .b-re{background:rgba(239,68,68,.2)!important;color:#fca5a5!important;border-color:rgba(248,113,113,.4)!important}
body.dark-mode .b-or{background:rgba(249,115,22,.2)!important;color:#fdba74!important;border-color:rgba(251,146,60,.4)!important}
body.dark-mode .b-ye{background:rgba(234,179,8,.15)!important;color:#fde68a!important;border-color:rgba(251,191,36,.4)!important}
body.dark-mode .b-bl{background:rgba(99,102,241,.2)!important;color:#c7d2fe!important;border-color:rgba(165,180,252,.4)!important}
body.dark-mode .b-gr{background:rgba(34,197,94,.15)!important;color:#86efac!important;border-color:rgba(74,222,128,.4)!important}

/* Situ bar e botões */
body.dark-mode .situ-bar{background:#263044!important;border-color:#2d3d57!important}
body.dark-mode .situ-lbl{color:#94a3b8!important}
body.dark-mode .situ-opt{background:#1e2a3d!important;border-color:#2d3d57!important;color:#94a3b8!important}
body.dark-mode .situ-opt.pago.sel{background:rgba(34,197,94,.15)!important;color:#22c55e!important;border-color:#22c55e!important}
body.dark-mode .situ-opt.pend.sel{background:rgba(234,179,8,.15)!important;color:#eab308!important;border-color:#eab308!important}
body.dark-mode .btn-sv{background:linear-gradient(135deg,#14532d,#15803d)!important}
body.dark-mode .btn-ghost{background:#1e2a3d!important;border-color:#2d3d57!important;color:#94a3b8!important}
body.dark-mode .btn-ghost:hover{background:#263044!important;border-color:#4338ca!important;color:#f1f5f9!important}

/* Modal, log, col */
body.dark-mode .modal{background:#1e2a3d!important;border-color:#2d3d57!important}
body.dark-mode .log-row{background:#1e2a3d!important;border-color:#2d3d57!important}
body.dark-mode .col-item{background:#263044!important;border-color:#2d3d57!important}
body.dark-mode .col-item.drag-over{background:#1e2a3d!important;border-color:#6366f1!important}
body.dark-mode .msg-box{background:#263044!important;border-color:#2d3d57!important;color:#cbd5e1!important}
body.dark-mode .info-box{background:#263044!important;border-color:#2d3d57!important;color:#94a3b8!important}
body.dark-mode .pag-btn{background:#1e2a3d!important;border-color:#2d3d57!important;color:#94a3b8!important}
body.dark-mode .pag-btn.on{background:rgba(99,102,241,.2)!important;border-color:#6366f1!important;color:#a5b4fc!important}
body.dark-mode .sec-hdr{border-color:#2d3d57!important}
body.dark-mode .ph h1{color:#f1f5f9!important}

/* ── LOGIN: mantém tema escuro original ── */
#login-wrap{background:#0d1117!important}
.login-card{background:#162030!important;border-color:#324560!important;color:#eef2ff!important}
.login-card .login-h{color:#eef2ff}
.login-card .login-sub{color:#8fa5c5}
.login-card label{color:#4e6580}
.login-card .inp{background:rgba(255,255,255,.05)!important;border-color:#324560!important;color:#eef2ff!important}
.login-card .inp::placeholder{color:#4e6580}
.login-card .inp:focus{border-color:#5b7fff!important;box-shadow:0 0 0 3px rgba(91,127,255,.15)!important}
.login-card .logo-icon{background:linear-gradient(135deg,#5b7fff,#3a5cff)!important}
.login-card .btn-blue{background:linear-gradient(135deg,#5b7fff,#3a5cff)!important;box-shadow:0 4px 16px rgba(91,127,255,.35)!important}
.login-version{font-size:11px;color:#4e6580;text-align:center;margin-top:20px;letter-spacing:.5px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.hidden{display:none!important}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0}

#loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:16px}
.spin{width:38px;height:38px;border:2px solid var(--b2);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.5}}

/* ── LOGIN ── */
#login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.login-card{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r4);padding:44px 40px;width:100%;max-width:400px;animation:fadeIn .4s ease;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.login-card::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(91,127,255,.2) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--ac),var(--ac2));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 24px rgba(91,127,255,.4);flex-shrink:0}
.login-h{font-size:26px;font-weight:800;letter-spacing:-.5px}
.login-sub{font-size:13px;color:var(--tx2);margin-top:2px}
#login-err{color:var(--re);font-size:12px;margin-top:10px;padding:9px 12px;background:rgba(255,79,107,.08);border-radius:var(--r);border:1px solid rgba(255,79,107,.2);display:none}

/* ── INPUTS ── */
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
label{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px}
.inp{width:100%;background:var(--inp-bg);border:1.5px solid var(--inp-border);color:var(--tx);border-radius:var(--r);padding:11px 14px;font-size:14px;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(61,90,254,.15)}
.inp::placeholder{color:var(--tx3)}
select.inp{cursor:pointer;color-scheme:dark}
select.inp option{background:#1c293d;color:#eef2ff}
textarea.inp{resize:vertical;min-height:70px;line-height:1.5}
.hint{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.4}

/* ── CHIPS DE PREENCHIMENTO RÁPIDO ── */
.chip-group{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;min-height:0}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card2);color:var(--tx2);transition:all .14s;white-space:nowrap}
.chip:hover{border-color:var(--ac);color:var(--ac);background:var(--card)}
.chip.sel{border-color:var(--ac);background:var(--ac);color:#fff}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--r);padding:10px 18px;font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .18s;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-blue{background:linear-gradient(135deg,#3d5afe,#1a237e);color:#fff;box-shadow:0 4px 14px rgba(61,90,254,.3)}
.btn-blue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,90,254,.4)}
.btn-ghost{background:var(--card2);border:1px solid var(--border);color:var(--tx2)}
.btn-ghost:hover:not(:disabled){border-color:var(--ac);color:var(--ac);background:var(--card)}
.btn-red{background:rgba(255,79,107,.08);border:1px solid rgba(255,79,107,.2);color:var(--re)}
.btn-red:hover:not(:disabled){background:rgba(255,79,107,.14)}
.btn-green{background:linear-gradient(135deg,#059669,#047857);color:#fff;box-shadow:0 4px 14px rgba(5,150,105,.3)}
.btn-green:hover:not(:disabled){transform:translateY(-1px)}
.btn-wpp{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}
.btn-wpp:hover:not(:disabled){transform:translateY(-1px)}
.btn-xl{padding:13px 24px;font-size:15px;width:100%}
.btn-sm{padding:7px 13px;font-size:12px}
.btn-xs{padding:5px 10px;font-size:11px;border-radius:8px}

/* ── ICON ACTION BUTTONS ── */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:none;cursor:pointer;transition:all .17s;flex-shrink:0;position:relative}
.btn-icon svg{width:15px;height:15px;flex-shrink:0}
.btn-icon-alert{background:rgba(61,90,254,.12);color:#5b7fff}
.btn-icon-alert:hover{background:linear-gradient(135deg,#3d5afe,#1a237e);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(61,90,254,.4)}
.btn-icon-edit{background:rgba(14,165,233,.1);color:#38bdf8}
.btn-icon-edit:hover{background:linear-gradient(135deg,#0ea5e9,#0369a1);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,165,233,.35)}
.btn-icon-del{background:rgba(239,68,68,.08);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.btn-icon-del:hover{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.4)!important;border-color:transparent!important}

/* ── TOOLTIP ── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1a1f36;color:#e2e8f0;font-size:11px;font-weight:500;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3)}
[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1a1f36;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999}
[data-tip]:hover::after,[data-tip]:hover::before{opacity:1}
[data-tip][data-tip-left]::after{left:auto;right:0;transform:none}
[data-tip][data-tip-left]::before{left:auto;right:12px;transform:none}


/* ── APP SHELL ── */
#app{display:flex;min-height:100vh;position:relative;background:var(--bg)}

/* ── SIDEBAR ── */
.sidebar{
  width:246px;background:var(--sidebar);
  border-right:1px solid var(--b1);
  padding:20px 14px;
  display:flex;flex-direction:column;gap:2px;
  position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  z-index:10000;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  -webkit-overflow-scrolling:touch;
  box-shadow:4px 0 24px rgba(0,0,0,.25);
}
.sb-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 24px}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--ac),var(--ac2));border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(91,127,255,.35);flex-shrink:0}
.sb-name{font-size:15px;font-weight:800;letter-spacing:-.3px;color:#ffffff}
.sb-close{display:none;background:rgba(255,255,255,.08);border:1px solid var(--b2);border-radius:8px;color:var(--tx);cursor:pointer;padding:8px 14px;font-size:13px;font-weight:700;font-family:var(--font);line-height:1}
.sb-section{font-size:10px;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;padding:14px 10px 5px;margin-top:4px}
.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r2);cursor:pointer;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);transition:all .15s;border:none;background:transparent;font-family:var(--font);width:100%;text-align:left;position:relative}
.nav:hover{color:#ffffff;background:var(--sidebar-hover)}
.nav.on{color:#ffffff;background:var(--sidebar-active);font-weight:700;border-radius:var(--r2)}
.nav.on::before{display:none}
.nav-ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7}
.nav.on .nav-ic,.nav:hover .nav-ic{opacity:1}
.nav-badge{margin-left:auto;background:var(--re);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:20px;min-width:18px;text-align:center;animation:pulse2 2s infinite}
.sb-bot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}

/* ── OVERLAY MOBILE ── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:auto;-webkit-tap-highlight-color:transparent}
.sb-overlay.open{display:block}

/* ── MOBILE HEADER ── */
.mob-header{display:none;position:fixed;top:0;left:0;right:0;z-index:998;background:#1a237e;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid #283593;padding:12px 16px;align-items:center;justify-content:space-between}
.mob-logo{display:flex;align-items:center;gap:8px}
.hamburger{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;padding:8px 14px;font-size:13px;font-weight:700;font-family:var(--font);display:flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── MAIN ── */
.main{margin-left:246px;flex:1;padding:28px 32px;min-height:100vh;max-width:calc(100vw - 246px);background:var(--bg)}
.page{display:none;animation:fadeIn .25s ease}.page.on{display:block}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.ph h1{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--tx)}
.ph p{font-size:13px;color:var(--tx2);margin-top:3px}
.ph-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inp-sm{padding:6px 10px!important;font-size:12px!important;height:32px}

/* ── STAT CARDS ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;margin-bottom:24px}
.sc{border-radius:var(--r3);padding:20px;position:relative;overflow:hidden;cursor:default;transition:transform .2s,box-shadow .2s;border:1px solid}
.sc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sc-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.sc-ic svg{width:20px;height:20px}
.sc-num{font-size:36px;font-weight:800;line-height:1;letter-spacing:-1.5px}
.sc-lbl{font-size:12px;margin-top:4px;font-weight:600;color:var(--tx2)}
/* ── OCULTAR VALORES ── */
.val-eye{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:5px;background:rgba(255,255,255,.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .15s,background .15s;z-index:2;flex-shrink:0}
.val-eye:hover{opacity:1;background:rgba(255,255,255,.28)}
.val-eye svg{width:12px;height:12px;stroke:#fff;pointer-events:none}
.sc-ye .val-eye svg{stroke:rgba(0,0,0,.7)}
.sc-num.oculto{visibility:hidden;transition:none}
.sc-num{transition:none}
/* Global: esconde todos quando body tem .vals-ocultos — estado inicial apenas */

/* Métricas e sub-c */
.met-val.oculto,.sub-oculto{visibility:hidden;transition:none}
.glb-eye{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:12px;color:var(--tx2);transition:all .15s;font-weight:600}
.glb-eye:hover{border-color:var(--ac);color:var(--ac)}
.glb-eye svg{width:14px;height:14px;flex-shrink:0}
.sc-glow{position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;opacity:.15;filter:blur(35px);pointer-events:none}
/* ── STAT CARDS: cores sólidas — light e dark ── */
.sc-blue{background:linear-gradient(135deg,#1565c0,#1e88e5);border:none;box-shadow:0 6px 22px rgba(21,101,192,.45)}
.sc-red{background:linear-gradient(135deg,#b71c1c,#e53935);border:none;box-shadow:0 6px 22px rgba(183,28,28,.45)}
.sc-or{background:linear-gradient(135deg,#e65100,#ff7043);border:none;box-shadow:0 6px 22px rgba(230,81,0,.45)}
.sc-ye{background:linear-gradient(135deg,#f59e0b,#fbbf24);border:none;box-shadow:0 6px 22px rgba(245,158,11,.45)}
.sc-gr{background:linear-gradient(135deg,#1b5e20,#2e7d32);border:none;box-shadow:0 6px 22px rgba(27,94,32,.45)}
.sc-pu{background:linear-gradient(135deg,#4a148c,#6a1b9a);border:none;box-shadow:0 6px 22px rgba(74,20,140,.45)}
.sc-blue .sc-ic,.sc-red .sc-ic,.sc-or .sc-ic,.sc-ye .sc-ic,.sc-gr .sc-ic,.sc-pu .sc-ic{background:rgba(255,255,255,.2);color:#fff}
.sc-blue .sc-num,.sc-red .sc-num,.sc-or .sc-num,.sc-gr .sc-num,.sc-pu .sc-num{color:#fff}
.sc-ye .sc-num{color:rgba(0,0,0,.75)}
.sc-blue .sc-lbl,.sc-red .sc-lbl,.sc-or .sc-lbl,.sc-gr .sc-lbl,.sc-pu .sc-lbl{color:rgba(255,255,255,.8)}
.sc-ye .sc-lbl{color:rgba(0,0,0,.6)}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--shadow);transition:background .3s,border-color .3s}
.card-body{padding:20px 24px}
.card-title{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;color:var(--tx)}

/* ── SEÇÕES CLIENTES ── */
.sec-hdr{padding:8px 0 6px;margin-top:8px;margin-bottom:4px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.sec-hdr:first-child{margin-top:0}
.sec-cnt-val.oculto{visibility:hidden}
.sec-eye{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;cursor:pointer;opacity:.45;transition:opacity .15s;flex-shrink:0;margin-left:2px}
.sec-eye:hover{opacity:1}
.sec-eye svg{width:12px;height:12px;stroke:var(--tx2)}
.sec-ttl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3)}
.sec-cnt{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:700}

/* ── CLIENTE ROW ── */
.c-row{background:var(--card);border-radius:var(--r2);padding:16px 18px;transition:all .18s;animation:slideIn .2s ease;margin-bottom:8px;border:1px solid var(--border);border-left:4px solid;box-shadow:var(--shadow)}
.c-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.c-row.st-pago{border-left-color:#2e7d32}
.c-row.st-vencido{border-left-color:#c62828}
.c-row.st-hoje{border-left-color:#e65100}
.c-row.st-urgente{border-left-color:#f9a825}
.c-row.st-proximo{border-left-color:#5e35b1}
.c-row.st-ok{border-left-color:#2e7d32}
.c-nome{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--tx)}
.c-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--tx2);font-weight:500}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.b-re{background:#fde8e8;color:#b71c1c;border:1px solid #f5c6c6}
.b-or{background:#fff3e0;color:#e65100;border:1px solid #ffcc80}
.b-ye{background:#fff8e1;color:#e65100;border:1px solid #ffca28}
.b-bl{background:#ede7f6;color:#4527a0;border:1px solid #ce93d8}
.b-gr{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
body.dark-mode .b-re{background:rgba(183,28,28,.25);color:#ef9a9a;border-color:rgba(239,83,80,.4)}
body.dark-mode .b-or{background:rgba(244,81,30,.2);color:#ff8a65;border-color:rgba(244,81,30,.5)}
body.dark-mode .b-ye{background:rgba(255,179,0,.15);color:#ffca28;border-color:rgba(255,179,0,.45)}
body.dark-mode .b-bl{background:rgba(69,39,160,.25);color:#ce93d8;border-color:rgba(186,104,200,.4)}
body.dark-mode .b-gr{background:rgba(46,125,50,.25);color:#a5d6a7;border-color:rgba(102,187,106,.4)}

/* ── SITUAÇÃO INLINE ── */
.situ-bar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r);flex-wrap:wrap}
.situ-lbl{font-size:11px;color:var(--tx2);font-weight:600}
.situ-opts{display:flex;gap:6px}
.situ-opt{padding:4px 12px;border-radius:8px;font-size:11px;font-weight:700;border:1px solid var(--border);cursor:pointer;font-family:var(--font);background:var(--card);color:var(--tx2);transition:all .15s}
.situ-opt.pago.sel{background:#dcfce7;color:#166534;border-color:#86efac}
.situ-opt.pend.sel{background:#fef9c3;color:#854d0e;border-color:#fde047}
.situ-opt:not(.sel):hover{background:#e2e8f0}
.btn-sv{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;padding:5px 12px;font-size:11px;font-weight:700;border:none;border-radius:8px;cursor:pointer;font-family:var(--font);transition:all .15s}
.btn-sv:hover{transform:translateY(-1px)}

/* ── PAGINAÇÃO ── */
.pag{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pag-btn{background:var(--card);border:1px solid var(--border);color:var(--tx2);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font);transition:all .15s}
.pag-btn:hover{border-color:var(--ac);color:var(--ac)}
.pag-btn.on{background:var(--card2);border-color:var(--ac);color:var(--ac)}
.pag-btn:disabled{opacity:.3;cursor:not-allowed}
.pag-info{font-size:12px;color:var(--tx2);margin:0 4px}
.per-page{background:rgba(255,255,255,.05);border:1px solid var(--b2);color:var(--tx);border-radius:8px;padding:5px 10px;font-size:12px;font-family:var(--font);outline:none;cursor:pointer;color-scheme:dark}
.per-page option{background:#1c293d;color:#eef2ff}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;opacity:0;transition:opacity .2s;pointer-events:none;backdrop-filter:blur(6px)}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:28px;width:100%;max-width:520px;transform:translateY(12px) scale(.97);transition:transform .25s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal-title{font-size:18px;font-weight:800;margin-bottom:20px;letter-spacing:-.3px}
.msg-box{background:var(--card2);border:1px solid var(--border);border-radius:var(--r);padding:16px;font-size:12.5px;line-height:1.85;white-space:pre-wrap;color:var(--tx);font-family:var(--mono);margin-bottom:16px;max-height:220px;overflow-y:auto}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:#1a237e;border:1px solid #3d5afe;color:#ffffff;padding:12px 18px;border-radius:var(--r2);font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);transform:translateY(16px);opacity:0;transition:all .3s;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:320px}
#toast.show{transform:translateY(0);opacity:1}

/* ── TOGGLE ── */
.tog{position:relative;width:44px;height:24px;background:var(--b2);border-radius:12px;cursor:pointer;transition:background .2s;flex-shrink:0}
.tog.on{background:#3d5afe}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s}
.tog.on::after{left:23px}

/* ── INFO BOXES ── */
.info-box{background:var(--card2);border:1px solid var(--border);border-radius:var(--r);padding:14px;font-size:12.5px;color:var(--tx2);line-height:1.65}
code{background:rgba(91,127,255,.18);color:var(--ac);padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:11px}

/* ── DRAG DROP ── */
.col-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r);cursor:grab;user-select:none;margin-bottom:6px;transition:all .15s}
.col-item:active{cursor:grabbing}
.col-item.dragging{opacity:.4}
.col-item.drag-over{border-color:var(--ac);background:var(--card2)}
.col-handle{color:var(--tx3);font-size:16px}
.col-label{font-size:13px;font-weight:600;flex:1}


/* ── TOGGLE SWITCH ── */
.toggle-wrap{display:inline-flex;align-items:center;cursor:pointer;margin-left:12px}
.toggle-wrap input{display:none}
.toggle-slider{width:44px;height:24px;background:#cbd5e1;border-radius:12px;position:relative;transition:.3s;flex-shrink:0}
.toggle-slider::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-wrap input:checked + .toggle-slider{background:var(--ac)}
.toggle-wrap input:checked + .toggle-slider::after{transform:translateX(20px)}
body.dark-mode .toggle-slider{background:#2d3d57}
/* ── MÉTRICAS DARK ── */
body.dark-mode .met-row-even{background:#1e2a3d!important}
body.dark-mode .met-row-odd{background:#263044!important}
body.dark-mode .met-td{color:#94a3b8!important;border-bottom-color:#2d3d57!important}
body.dark-mode .met-td-name{color:#f1f5f9!important;border-bottom-color:#2d3d57!important}
body.dark-mode .met-th{background:#263044!important;color:#64748b!important;border-bottom-color:#2d3d57!important}
body.dark-mode .met-lucro-pos{color:#86efac!important}
body.dark-mode .met-lucro-neg{color:#fca5a5!important}
body.dark-mode .met-val-pack{color:#6ee7b7!important}
body.dark-mode .met-val-cred{color:#fca5a5!important}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.metric-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,background .3s;position:relative;overflow:hidden}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.metric-title{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.metric-val{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--tx)}
.metric-sub{font-size:12px;color:var(--tx2);margin-top:4px}
.bar-wrap{background:var(--border);border-radius:4px;height:8px;overflow:hidden;margin-top:8px}
.bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── LOG ── */
.log-row{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:6px}
.tag-auto{background:rgba(167,139,250,.15);color:#c4b0ff;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700}
.tag-manual{background:rgba(91,127,255,.15);color:var(--ac);padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700}

/* ── FORM ── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fcol{grid-column:1/-1}
.div{height:1px;background:var(--border);margin:16px 0}
.empty{text-align:center;padding:40px 20px;color:var(--tx2)}
.empty-icon{font-size:40px;margin-bottom:10px;opacity:.5}

/* ── APPS CLIENTES ── */
.app-copy{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--color-border-tertiary,var(--border));background:transparent;cursor:pointer;color:var(--tx2);transition:all .14s;flex-shrink:0;vertical-align:middle;margin-left:4px}
.app-copy:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
.app-copy svg{width:11px;height:11px}
/* Desktop: grid de apps lado a lado */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
/* Mobile: cada item accordion */
.app-mob-item{border:1px solid var(--border);border-radius:10px;margin-bottom:6px;overflow:hidden;background:var(--card2)}
.app-mob-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-mob-body{display:none;padding:0 12px 12px;border-top:1px solid var(--b1)}
.app-mob-body.open{display:block}
.app-mob-chevron{transition:transform .2s;flex-shrink:0}
.app-mob-chevron.open{transform:rotate(180deg)}
/* Ocultar versão mobile no desktop e vice-versa */
.apps-desktop{display:block}
.apps-mobile{display:none}
@media(max-width:640px){
  .apps-desktop{display:none}
  .apps-mobile{display:block}
}

/* ── SKELETON LOADING ── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{border-radius:6px;background:linear-gradient(90deg,var(--card2) 25%,var(--card) 50%,var(--card2) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}
.sk-card{border-radius:14px;border:1px solid var(--border);padding:16px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
.sk-line{height:12px;border-radius:6px}
.sk-line-lg{height:16px}
.sk-row{display:flex;gap:10px;align-items:center}
.sk-circle{width:36px;height:36px;border-radius:50%;flex-shrink:0}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sb-close{display:flex}
  .mob-header{display:flex}
  .main{margin-left:0;max-width:100%;padding:12px;padding-top:64px}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .sc{padding:14px}.sc-ic{width:34px;height:34px;border-radius:9px}.sc-num{font-size:26px}.sc-lbl{font-size:11px}
  .fgrid{grid-template-columns:1fr}
  .fcol{grid-column:auto}
  .ph{flex-direction:column;gap:8px}
  .ph h1{font-size:18px}
  .c-row{padding:12px 14px}
  .c-nome{font-size:13px}
  .btn-xs{padding:4px 8px;font-size:10px}
  .metric-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.stats-row{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:1fr}.login-card{padding:28px 22px}}