:root{--nav:#101a2d;--nav2:#18243b;--primary:#1666e8;--green:#17a66c;--red:#e65050;--orange:#f2a23a;--bg:#f3f6fb;--text:#182237;--muted:#748097;--line:#e3e8f0;--white:#fff;--shadow:0 12px 35px rgba(25,41,72,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}aside{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--nav),#0c1425);color:#cbd5e7;padding:24px 16px;display:flex;flex-direction:column;z-index:20}.logo{display:flex;align-items:center;gap:12px;color:#fff;padding:0 10px 25px}.logo>span,.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#2381ff,#0d52c5);font-weight:800;color:#fff;box-shadow:0 8px 20px rgba(24,105,232,.35)}.logo b{line-height:1.05;font-size:16px}.logo small{font-weight:500;color:#7fa4d8}nav{display:grid;gap:5px}nav a{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:10px;color:#9caac0;font-weight:600}nav a i{font-style:normal;width:22px;font-size:18px;text-align:center}nav a:hover,nav a.active{color:#fff;background:var(--nav2)}nav a.active{box-shadow:inset 3px 0 #3487ff}.aside-user{margin-top:auto;border-top:1px solid #23304a;padding:17px 10px 0;display:grid}.aside-user small{color:#8391a8;margin:2px 0 10px}.aside-user a{color:#6fa9ff;font-weight:600}main{grid-column:2;padding:26px 34px 50px;min-width:0}header{display:flex;align-items:center;gap:16px;margin-bottom:25px}header h1{font-size:25px;margin:0 0 3px}header p{margin:0;color:var(--muted)}.menu{display:none}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.kpis article,.panel,.table-wrap,.integration-summary,.batch-bar{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.kpis article{padding:20px;display:grid;gap:7px;border-top:3px solid #84a7de}.kpis span,.kpis small{color:var(--muted)}.kpis strong{font-size:25px}.kpis .accent{border-top-color:var(--green)}.kpis .warn{border-top-color:var(--orange)}.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}.panel{padding:22px}.chart-panel{height:410px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.panel-title h2,.panel h2{margin:0 0 4px;font-size:17px}.panel-title span,.panel-title p{color:var(--muted)}.panel-title a{color:var(--primary);font-weight:600}.mini-list{display:grid}.mini-list a{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.mini-list a:last-child{border:0}.mini-list i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;font-style:normal}.mini-list i.receber{background:#e8f8f1;color:var(--green)}.mini-list i.pagar{background:#fff0ed;color:var(--red)}.mini-list span{display:grid;gap:3px;flex:1}.mini-list small,td small{display:block;color:var(--muted);margin-top:3px}.toolbar{display:flex;justify-content:space-between;gap:14px;margin-bottom:15px}.filters{display:flex;gap:8px;flex:1}.filters input{max-width:360px}.btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:9px;padding:10px 15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn:hover{filter:brightness(.97)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.green{background:var(--green);border-color:var(--green);color:#fff}.wide{width:100%}input,select,textarea{width:100%;border:1px solid #d7deea;border-radius:9px;padding:10px 11px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#4c8ff2;box-shadow:0 0 0 3px rgba(36,115,232,.12)}label{display:grid;gap:6px;font-weight:650;color:#42506a}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;padding:12px 15px;color:#69758a;font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:#f9fbfd;border-bottom:1px solid var(--line)}td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:middle}tbody tr:hover{background:#fafcff}td.amount{font-weight:750;white-space:nowrap}.amount.receber{color:var(--green)}.amount.pagar{color:var(--red)}.overdue{color:var(--red);font-weight:700}.status,.type,.role{display:inline-flex;padding:5px 9px;border-radius:20px;background:#edf1f7;color:#59667a;font-size:12px;font-weight:750;text-transform:capitalize}.status.pago,.status.concluido,.type.receber{background:#e4f7ee;color:#128258}.status.pendente{background:#fff4dc;color:#a3680e}.status.aprovacao,.status.enviado{background:#eaf1ff;color:#2662bd}.status.autorizado{background:#e9ecff;color:#555bd1}.status.cancelado,.type.pagar{background:#ffebe8;color:#c7463c}.icon-btn{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:8px;font-size:20px}.batch-bar{display:grid;grid-template-columns:1fr 220px 200px auto;gap:10px;align-items:center;padding:12px 15px;margin-bottom:14px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span-2{grid-column:1/-1}.form-card{max-width:920px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.integration-summary{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;margin-bottom:15px}.integration-summary h2{margin:0 0 5px}.integration-summary p{margin:0;color:var(--muted)}.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs a{padding:8px 14px;border-radius:20px;background:#e8edf5;color:#58667c;font-weight:700}.tabs a.active{background:var(--nav);color:#fff}.sticky-actions{position:sticky;bottom:15px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}.batch-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.message-preview{white-space:pre-wrap;background:#f2f7f4;border:1px solid #d9eadf;border-radius:12px;padding:16px;font:14px/1.5 inherit}.users-grid{display:grid;grid-template-columns:1.5fr .7fr;gap:20px}.users-grid form{display:grid;gap:14px;align-self:start}.alert{padding:12px 15px;border-radius:10px;margin:0 0 16px;border:1px solid}.alert.success{background:#e7f8f0;border-color:#c4ecd9;color:#176b4c}.alert.danger{background:#fff0ee;border-color:#f4ccc6;color:#a83f35}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 25% 20%,#224b85,#101a2d 55%,#080e19);padding:25px}.login-card,.installer{background:#fff;border-radius:20px;padding:34px;width:min(420px,100%);box-shadow:0 30px 80px rgba(0,0,0,.32)}.login-card .brand-mark,.installer .brand-mark{margin:0 auto 18px}.login-card h1,.login-card p,.installer>h1,.installer>p{text-align:center}.login-card h1,.installer h1{margin:0}.login-card p,.installer>p{color:var(--muted);margin:6px 0 25px}.login-card form{display:grid;gap:15px}.installer{width:min(820px,100%);margin:30px auto}.installer h2{font-size:16px;margin:25px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}.installer form>.btn{margin-top:22px}.check{display:flex;grid-auto-flow:column;justify-content:start;align-items:center}.check input{width:auto}.installer .brand-mark{margin-top:0}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.dash-grid,.batch-detail,.users-grid{grid-template-columns:1fr}.batch-bar{grid-template-columns:1fr 1fr}.batch-bar b,.batch-bar button{grid-column:1/-1}}
@media(max-width:760px){.app{display:block}aside{transform:translateX(-100%);transition:.25s}.nav-open aside{transform:none}.nav-open:after{content:"";position:fixed;inset:0;background:#0008;z-index:10}main{padding:20px 15px}.menu{display:block;border:0;background:#fff;border-radius:9px;padding:10px;font-size:20px}.kpis{grid-template-columns:1fr}.toolbar,.filters,.integration-summary{flex-direction:column}.grid-2{grid-template-columns:1fr}.span-2{grid-column:auto}.batch-bar{grid-template-columns:1fr}.batch-bar>*{grid-column:auto!important}.chart-panel{height:350px}}
