/* Painel Financeiro RAP MÍDIA — marca amarelo #FFD000 + preto #1A1A1A */
:root{
 --yel:#FFD000; --ink:#1A1A1A; --page:#eef0f4; --surf:#fff; --soft:#f6f7f9;
 --txt:#1A1A1A; --mut:#7c828d; --line:#e9ebef; --pos:#16a34a; --neg:#dc2626; --amb:#d97706;
 --shadow:0 1px 2px #1a1a1a0d, 0 10px 26px -14px #1a1a1a26; --r:8px;
 /* safe area (com fallback) */
 --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
 --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
/* app instalado na tela de início (iPhone/Android): garante espaço da barra de status
   mesmo quando o iOS não informa o env() corretamente */
@media all and (display-mode:standalone){
 :root{--sat:max(env(safe-area-inset-top,0px),52px); --sab:max(env(safe-area-inset-bottom,0px),8px)}
}
@media all and (display-mode:fullscreen){
 :root{--sat:max(env(safe-area-inset-top,0px),52px)}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --page:#0c0c0f; --surf:#161619; --soft:#1c1c20; --txt:#f2f2f4; --mut:#9a9aa6; --line:#28282f;
 --shadow:0 1px 2px #0006,0 14px 30px -14px #0008;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--txt);
 font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
.boot{display:grid;place-items:center;height:100vh;color:var(--mut)}
button{font-family:inherit;cursor:pointer}
.tnum{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* ---------- LOGIN / SETUP ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;
 background:radial-gradient(1000px 600px at 20% -10%,#ffd00026,transparent 60%),var(--ink)}
.auth-card{width:100%;max-width:380px;background:var(--surf);border-radius:14px;padding:30px 28px;box-shadow:0 30px 70px -20px #000a}
.auth-card img{height:34px;display:block;margin:0 auto 6px}
.auth-card h1{font-size:16px;text-align:center;margin:0 0 2px}
.auth-card p{color:var(--mut);text-align:center;margin:0 0 22px;font-size:13px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:6px}
.fld input,.modal input,.modal select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;
 background:var(--soft);color:var(--txt);font-size:14px;outline:none}
.fld input:focus,.modal input:focus,.modal select:focus{border-color:var(--yel)}
.btn{background:var(--yel);color:var(--ink);border:none;border-radius:8px;padding:12px 16px;font-weight:800;font-size:14px;width:100%}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--ink);color:var(--yel)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--txt);width:auto;padding:9px 14px}
.btn.sm{padding:8px 12px;font-size:12.5px;width:auto;border-radius:7px}
.err{background:#dc26261a;color:var(--neg);padding:9px 12px;border-radius:10px;font-size:12.5px;margin-bottom:12px;font-weight:600}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:236px 1fr;height:100vh;height:100dvh}
.side{background:var(--ink);color:#e8e8e8;display:flex;flex-direction:column;gap:4px;overflow-y:auto;
 padding:calc(20px + var(--sat)) 14px calc(20px + var(--sab)) calc(14px + var(--sal))}
.side .logo{padding:4px 8px 16px} .side .logo img{height:28px;display:block}
.side .grp{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6d6d72;margin:12px 8px 6px;font-weight:800}
.nav{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:7px;color:#cfcfcf;font-size:14px;font-weight:600;border:none;background:none;width:100%;text-align:left}
.nav:hover{background:#ffffff12;color:#fff}
.nav.active{background:var(--yel);color:var(--ink)}
.nav.active svg{stroke:var(--ink)}
.nav svg{width:18px;height:18px;flex:none}
.side .foot{margin-top:auto;font-size:11px;color:#7a7a80;padding:10px 8px}
.side .promo{margin-top:auto;background:linear-gradient(150deg,var(--yel),#ffb800);color:var(--ink);border-radius:14px;padding:14px;text-align:center}
.side .promo b{display:block;font-weight:800} .side .promo .pbar{height:7px;background:#1a1a1a22;border-radius:99px;overflow:hidden;margin:8px 0 6px}
.side .promo .pbar>i{display:block;height:100%;background:var(--ink);border-radius:99px}
.side .promo small{font-size:11px;opacity:.8}

.main{background:var(--soft);display:flex;flex-direction:column;min-width:0;overflow:hidden}
/* safe area (iPhone: barra de status / notch / barra inferior) */
.top{background:var(--surf);border-bottom:1px solid var(--line);display:flex;align-items:center;
 justify-content:space-between;gap:12px;
 padding:calc(10px + var(--sat)) calc(20px + var(--sar)) 10px calc(20px + var(--sal));
 min-height:calc(60px + var(--sat));position:sticky;top:0;z-index:20;flex:none}
.top h2{margin:0;font-size:17px;font-weight:800}
.top .sub{font-size:12px;color:var(--mut)}
.top .right{display:flex;align-items:center;gap:10px}
.chip{background:var(--ink);color:var(--yel);font-weight:800;border-radius:9px;padding:7px 11px;font-size:12px}
.yearsel{background:var(--ink);color:var(--yel);font-weight:800;border:none;border-radius:7px;padding:8px 30px 8px 12px;font-size:13px;cursor:pointer;
 -webkit-appearance:none;appearance:none;line-height:1.2;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23FFD000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 4.5L6 8.5l4-4'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center}
.minisel{width:100%;padding:8px 30px 8px 11px;border:1.5px solid var(--line);border-radius:8px;background:var(--soft);color:var(--txt);margin:4px 0 8px;
 -webkit-appearance:none;appearance:none;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237c828d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 4.5L6 8.5l4-4'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center}
.ta{width:100%;min-height:120px;padding:10px;border:1.5px solid var(--line);border-radius:8px;background:var(--soft);color:var(--txt);font-family:inherit;font-size:13px;resize:vertical}
.pill.purple{color:#7c3aed;background:#7c3aed1a}
/* botões por tipo */
.btn.ok{background:var(--pos);color:#fff}
.btn.danger{background:var(--neg);color:#fff}
/* botão de ação do topo (texto longo no PC, curto no celular) */
.act{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.act .sm2{display:none}
.top .right{flex-wrap:nowrap}
#vactions{display:inline-flex;align-items:center;gap:8px}
/* faixa da barra de status na cor da marca (app instalado) */
.statusbar{position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--yel);z-index:40;pointer-events:none}
/* tooltip de toque nos gráficos */
.tip{position:fixed;z-index:90;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;
 padding:8px 11px;border-radius:8px;max-width:78vw;box-shadow:0 8px 24px #0005;pointer-events:none;line-height:1.35}
.hit{cursor:pointer}
/* ---------- CAMPOS DE DATA (iOS) ---------- */
input[type=date],input[type=number]{-webkit-appearance:none;appearance:none;min-height:44px;width:100%;max-width:100%;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55}
input[type=date]::-webkit-inner-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.modal .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .two>*{min-width:0}
.fld{min-width:0}
.fld input,.fld select,.fld textarea{max-width:100%}
/* chip de plataforma (redes) */
.plat{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:none;box-shadow:0 1px 2px #0002}
.platsel{border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--soft);color:var(--txt);min-width:140px;font-size:13px}
/* rosca + legenda */
.dwrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:center}
.dnut{width:100%;max-width:230px;margin:auto;display:block}
.dlegs{min-width:0}
.dleg{display:grid;grid-template-columns:12px minmax(0,1fr) auto 58px;gap:9px;align-items:center;font-size:12.5px;margin:6px 0}
.dleg .dot{width:11px;height:11px;border-radius:3px}
.dleg .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dleg .pc{color:var(--mut);text-align:right}
/* insights cards */
.ins{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.ins-ic{flex:none;width:36px;height:36px;border-radius:8px;background:var(--soft);display:grid;place-items:center}
.ins-t{font-size:11.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ins-v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0}
.ins-x{font-size:12px;color:var(--mut)}
svg{overflow:visible}
.hamb{display:none;background:none;border:none;font-size:22px;color:var(--txt);padding:4px 8px}
.view{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;
 padding:20px calc(20px + var(--sar)) calc(24px + var(--sab)) calc(20px + var(--sal))}

/* ---------- CARDS / KPIs ---------- */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow)}
.kpi .row{display:flex;justify-content:space-between;align-items:center}
.badge{width:38px;height:38px;border-radius:9px;background:var(--yel);display:grid;place-items:center}
.badge svg{width:19px;height:19px;stroke:var(--ink)}
.delta{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px}
.delta.up{color:var(--pos);background:#16a34a1a}.delta.down{color:var(--neg);background:#dc26261a}.delta.mut{color:var(--mut);background:#7c828d1a}
.kpi .lbl{color:var(--mut);font-size:12.5px;font-weight:600;margin:12px 0 2px}
.kpi .val{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05}

.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}
.grid2b{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0}
.card h3{margin:0 0 12px;font-size:14px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.card h3 .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:800}
.side2{display:flex;flex-direction:column;gap:16px}
.mini .lbl{color:var(--mut);font-size:12.5px;font-weight:700;display:flex;justify-content:space-between}
.mini .val{font-size:22px;font-weight:800;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.mini .sub{font-size:12px;color:var(--mut)} .mini .sub b.pos{color:var(--pos)} .mini .sub b.neg{color:var(--neg)}

/* meta rows */
.mrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mrow:last-child{border-bottom:none}.mrow .k{color:var(--mut)}.mrow .v{font-weight:800;font-variant-numeric:tabular-nums}
.v.pos{color:var(--pos)}.v.neg{color:var(--neg)}.v.amb{color:var(--amb)}
.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd000,#ffb800)}

/* ---------- TABLE ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input,.toolbar select{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--surf);color:var(--txt);font-size:13px;min-height:40px}
.toolbar .sp{flex:1}
.sums{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tbl-wrap{overflow-x:auto;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:800;position:sticky;top:0;background:var(--surf)}
tbody tr:hover{background:var(--soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.pos{color:var(--pos);font-weight:700}td.neg{color:var(--neg);font-weight:700}
.pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pill.green{color:var(--pos);background:#16a34a1a}.pill.dark{color:#6b7280;background:#6b72801a}.pill.amber{color:var(--amb);background:#d977061a}
.rowbtn{background:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--txt);margin-left:4px}
.rowbtn:hover{border-color:var(--yel)} .rowbtn.del:hover{border-color:var(--neg);color:var(--neg)}
.empty{padding:30px;text-align:center;color:var(--mut)}

/* DRE */
.dre{overflow-x:auto;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.dre table{font-size:12.5px} .dre td.num,.dre th.num{text-align:right}
.dre tr.tot td{font-weight:800;background:var(--soft)}
.dre tr.rec td:first-child{color:var(--pos)} .dre tr.desp td:first-child{color:var(--neg)}
.dre tr.lucro td{font-weight:800;color:var(--ink);background:#ffd00022}
.dre .cathead td{background:var(--ink);color:var(--yel);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.05em}

/* charts */
.grid-l{stroke:var(--line);stroke-width:1}.axis{fill:var(--mut);font-size:9px}
.legend{display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--mut)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

/* ---------- MODAL ---------- */
.overlay{position:fixed;inset:0;background:#0008;display:grid;place-items:center;z-index:50;
 padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal))}
.modal{background:var(--surf);border-radius:12px;padding:22px;width:100%;max-width:440px;box-shadow:0 30px 70px -20px #000a;max-height:92vh;overflow:auto}
.modal h3{margin:0 0 16px;font-size:16px}
.modal .fld label{color:var(--mut)}
.modal .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .actions{display:flex;gap:10px;margin-top:18px}
.modal .actions .btn{flex:1}

.hint{color:var(--mut);font-size:12px;margin-top:10px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
 padding:11px 18px;border-radius:12px;font-weight:700;font-size:13px;z-index:80;box-shadow:0 10px 30px #0006}

/* ---------- RESPONSIVO ---------- */
.scrim{display:none}
@media(max-width:860px){
 .app{grid-template-columns:1fr}
 .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:60;transform:translateX(-100%);transition:transform .22s}
 .app.open .side{transform:none}
 .scrim{display:none;position:fixed;inset:0;background:#0006;z-index:55}
 .app.open .scrim{display:block}
 .hamb{display:block}
 .grid2,.grid2b{grid-template-columns:1fr}
 .kgrid{grid-template-columns:repeat(2,1fr);gap:10px}
 .kpi{padding:12px 12px}
 .kpi .val{font-size:18px}
 .kpi .lbl{font-size:11px}
 .badge{width:32px;height:32px}
 .delta{font-size:10px;padding:2px 7px}
 .view{padding:12px calc(12px + var(--sar)) calc(20px + var(--sab)) calc(12px + var(--sal))}
 .top{padding:calc(10px + var(--sat)) calc(14px + var(--sar)) 10px calc(14px + var(--sal));min-height:calc(56px + var(--sat))}
 .hamb{font-size:24px;padding:8px 10px;margin-left:-4px}
 .dwrap{grid-template-columns:1fr;gap:12px}
 .dnut{max-width:190px}
 .dleg{grid-template-columns:12px minmax(0,1fr) auto 50px;font-size:12px;gap:7px}
 .ins{padding:12px}.ins-ic{width:30px;height:30px}.ins-v{font-size:17px}.ins-x{font-size:11px}
 /* topo: tudo numa linha só, com botões compactos */
 .top{flex-wrap:nowrap;row-gap:0}
 .top .right{gap:6px;flex:none}
 .act .lg{display:none} .act .sm2{display:inline}
 .act{padding:9px 11px;font-size:12px;gap:4px}
 .yearsel{padding:8px 26px 8px 9px;font-size:12px;background-position:right 8px center}
 .top h2{font-size:16px;line-height:1.15}
 .top .sub{font-size:11px}
 /* barra de filtros do fluxo: 2 colunas, sem buracos */
 .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
 .toolbar input{grid-column:1/-1}
 .toolbar select{width:100%}
 .toolbar .sp{display:none}
 .sums{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .sums .pill{text-align:center;padding:7px 4px;font-size:11px}
 .card{padding:14px}
}