:root{
  --g1:#1a5c38;--g2:#206b43;--g3:#2d8a55;--g4:#4aad72;--gp:#e8f5ee;--gf:#f3faf6;
  --red:#c0392b;--redl:#fdecea;--ora:#c97d0a;--oral:#fef6e4;
  --s50:#f8f9fa;--s100:#f1f3f4;--s200:#e8eaed;--s300:#dadce0;--s400:#9aa0a6;--s500:#80868b;--s600:#5f6368;--s700:#3c4043;--s900:#202124;
  --r:10px;--rs:6px;--sh:0 1px 4px rgba(0,0,0,.1);--shm:0 6px 24px rgba(0,0,0,.15);--sw:215px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* html bg verde escuro pra eliminar flash branco no carregamento e
   pintar a area da status bar do iOS (safe-area-inset-top). Sem isso,
   no Safari iOS aparece uma faixa branca em cima do header verde. */
html{background:#1a5c38;background-color:#1a5c38}
/* 100dvh = altura dinamica que respeita barra de URL movel e safe-areas;
   fallback 100vh pra browsers antigos. Sem isso, em iPhone com notch o
   conteudo cortava embaixo (~40px da home indicator). */
body{font-family:'DM Sans',sans-serif;background:var(--s50);color:var(--s900);height:100vh;height:100dvh;overflow:hidden}
button,input,select,textarea{font-family:inherit}button{cursor:pointer}
/* LOGIN — bg verde cobre tudo incluindo safe-area iOS */
#ls{position:fixed;inset:0;background:var(--g1);display:flex;align-items:center;justify-content:center;z-index:9999;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.lbox{background:#fff;border-radius:16px;padding:44px 38px;width:360px;box-shadow:var(--shm)}
.llogo{text-align:center;margin-bottom:28px}
.llogo .lb{font-size:22px;font-weight:700;color:var(--g1)}.llogo .ls{font-size:9px;color:var(--s500);letter-spacing:3px;text-transform:uppercase;margin-top:2px}
.lbox h2{font-size:16px;font-weight:600;margin-bottom:20px}
.lf label{display:block;font-size:11px;font-weight:600;color:var(--s700);margin-bottom:5px}
.lf input{width:100%;padding:10px 14px;border:1.5px solid var(--s300);border-radius:var(--rs);font-size:14px;outline:none;transition:.2s;margin-bottom:14px}
.lf input:focus{border-color:var(--g3)}
.lerr{font-size:12px;color:var(--red);margin-bottom:10px;display:none;text-align:center}
.lbtn{width:100%;padding:12px;background:var(--g1);color:#fff;border:none;border-radius:var(--rs);font-size:14px;font-weight:700;transition:.2s}.lbtn:hover{background:var(--g3)}
/* APP */
#app{display:none;height:100vh;height:100dvh;flex-direction:column}#app.v{display:flex}
/* topbar absorve a safe-area-inset-top do iOS no proprio padding-top
   (verde) — sem isso, body tinha padding-top que mostrava bg branco
   acima do header. min-height garante que o conteudo nao cole na
   status bar mesmo sem safe-area. */
.topbar{min-height:52px;background:var(--g1);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 18px 0 18px;flex-shrink:0}
.topbar-logo .lb{font-size:15px;font-weight:700;color:#fff}.topbar-logo .ls{font-size:8px;color:rgba(255,255,255,.6);letter-spacing:2px;text-transform:uppercase}
.tb-r{display:flex;align-items:center;gap:6px;position:relative}
.ibtn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:#fff;transition:.15s;position:relative}.ibtn:hover{background:rgba(255,255,255,.24)}
.ndot{position:absolute;top:4px;right:4px;width:7px;height:7px;background:#e53935;border-radius:50%;border:1.5px solid var(--g1);display:none}
.av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;overflow:hidden;border:1.5px solid rgba(255,255,255,.3)}
.av img{width:100%;height:100%;object-fit:cover}
/* LAYOUT */
.shell{flex:1;display:flex;overflow:hidden}
.sb{width:var(--sw);background:var(--gf);border-right:1px solid var(--s200);display:flex;flex-direction:column;flex-shrink:0}
.sbs{font-size:9px;color:var(--s500);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 17px 5px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 17px;font-size:13px;font-weight:500;color:var(--s700);cursor:pointer;border-left:3px solid transparent;transition:.12s}
.ni:hover{background:var(--gp);color:var(--g1)}.ni.act{background:var(--gp);color:var(--g1);border-left-color:var(--g1);font-weight:700}
.ni svg{width:16px;height:16px;flex-shrink:0}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.pbar{height:46px;background:#fff;border-bottom:1px solid var(--s200);display:flex;align-items:center;padding:0 20px;flex-shrink:0}
.pbar-t{font-size:17px;font-weight:700}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px}
.page{display:none}.page.act{display:block}
/* COMPONENTS */
.card{background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.ctitle{font-size:10px;font-weight:700;color:var(--s700);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--s100)}
.btn{padding:7px 14px;border-radius:var(--rs);font-size:12px;font-weight:600;border:none;cursor:pointer;transition:.15s}
.bp{background:var(--g1);color:#fff}.bp:hover{background:var(--g3)}
.bs{background:var(--s100);color:var(--s700);border:1px solid var(--s300)}.bs:hover{background:var(--s200)}
.bd{background:var(--redl);color:var(--red);border:1px solid #f5c6c6}
.bsm{padding:4px 10px;font-size:11px}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bg{background:#d4edda;color:#155724}.br{background:var(--redl);color:var(--red)}.bgy{background:var(--s200);color:var(--s700)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tg-sl{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--s300);border-radius:20px;transition:.2s}
.tg-sl:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
input:checked+.tg-sl{background:var(--g1)}
input:checked+.tg-sl:before{transform:translateX(18px)}
.wpp-mode-btn.active{background:var(--g1)!important;color:#fff!important;border-color:var(--g1)!important}
.conv-mode-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;margin-top:3px}
.conv-mode-badge.auto{background:#e8f5ee;color:var(--g1)}
.conv-mode-badge.copilot{background:#fef6e4;color:#c97d0a}
.conv-mode-badge.manual{background:var(--s100);color:var(--s500)}
.rule-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:11px;background:var(--gp);color:var(--g1);margin:2px}
.rule-tag .x{cursor:pointer;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:7px 10px;font-size:10px;font-weight:700;color:var(--s500);border-bottom:1px solid var(--s200);background:var(--s50);text-transform:uppercase;letter-spacing:.04em}
td{padding:8px 10px;border-bottom:1px solid var(--s100);color:var(--s700)}
tr:hover td{background:var(--gf)}
.fi{width:100%;padding:7px 11px;border:1.5px solid var(--s300);border-radius:var(--rs);font-size:13px;outline:none;transition:.2s;background:#fff}.fi:focus{border-color:var(--g3)}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:10px;font-weight:700;color:var(--s700);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
/* MODALS */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:flex-start;justify-content:center;padding-top:48px;overflow-y:auto}
.mo.op{display:flex}
.md{background:#fff;border-radius:12px;padding:22px;width:500px;max-height:84vh;overflow-y:auto;box-shadow:var(--shm)}
.mdw{width:min(700px,92vw)}
.mt{font-size:15px;font-weight:700;color:var(--g1);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--s100)}
.mf{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--s100)}
/* PANELS */
.pnl{position:absolute;top:38px;right:0;background:#fff;border:1px solid var(--s200);border-radius:var(--r);box-shadow:var(--shm);z-index:400;display:none}
.pnl.op{display:block}
.pnl-h{padding:9px 13px;border-bottom:1px solid var(--s100);font-size:10px;font-weight:700;color:var(--s500);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.pnl-i{padding:9px 13px;border-bottom:1px solid var(--s100);cursor:pointer;font-size:12px;transition:.1s}
.pnl-i:hover{background:var(--gf);color:var(--g1)}
.pnl-i.unread{border-left:3px solid var(--g3)}
/* RANGE CALENDAR (Dashboard) */
.rcal-wrap{position:relative;isolation:isolate;z-index:2000}
.rcal-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:var(--rs);color:#fff;font-size:12px;cursor:pointer}
.rcal-panel{position:absolute;right:0;top:calc(100%+4px);background:#fff;border:1px solid var(--s200);border-radius:var(--r);box-shadow:var(--shm);z-index:300;display:none;width:520px}
.rcal-panel.op{display:block}
.rcal-presets{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--s100);flex-wrap:wrap}
.rcal-grids{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rcal-grid-wrap{padding:10px 12px}
.rcal-grid-wrap+.rcal-grid-wrap{border-left:1px solid var(--s100)}
.rcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rcal-nav{background:none;border:none;cursor:pointer;font-size:16px;color:var(--g1);padding:0 6px;border-radius:4px}.rcal-nav:hover{background:var(--gp)}
.rcal-my{font-size:12px;font-weight:700;text-align:center}
.rcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.rcal-dn{font-size:9px;font-weight:700;color:var(--s500);text-align:center;padding:2px 0;text-transform:uppercase}
.rcal-d{text-align:center;padding:4px 1px;border-radius:4px;cursor:pointer;font-size:11px;transition:.1s;min-height:22px;display:flex;align-items:center;justify-content:center}
.rcal-d:hover{background:var(--gp)}.rcal-d.rtoday{background:var(--g1);color:#fff;font-weight:700}
.rcal-d.rstart,.rcal-d.rend{background:var(--g3);color:#fff;font-weight:700}
.rcal-d.rin{background:var(--gp);color:var(--g1)}
.rcal-footer{padding:10px 14px;border-top:1px solid var(--s100);display:flex;justify-content:space-between;align-items:center}
/* CHAT FLUTUANTE */
#chat-fab{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--g1);color:#fff;border:none;box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer;z-index:600;display:flex;align-items:center;justify-content:center;font-size:20px;transition:.2s;touch-action:none;user-select:none;-webkit-user-select:none}
#chat-fab:hover{background:var(--g3);transform:scale(1.08)}
#chat-fab.dragging{transition:none;cursor:grabbing;transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.35)}
#chat-box{position:fixed;bottom:78px;right:20px;width:340px;max-height:460px;background:#fff;border:1px solid var(--s200);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:600;display:none;flex-direction:column;overflow:hidden}
#chat-box.op{display:flex}
#chat-header{padding:12px 14px;background:var(--g1);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
#chat-header .ch-title{font-size:13px;font-weight:700}
#chat-header .ch-sub{font-size:10px;opacity:.7}
#chat-header button{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.7;transition:.15s}
#chat-header button:hover{opacity:1}
#chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:200px;max-height:320px;background:var(--s50)}
.chat-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.45;word-wrap:break-word}
.chat-msg.user{align-self:flex-end;background:var(--g1);color:#fff;border-bottom-right-radius:4px}
.chat-msg.bot{align-self:flex-start;background:#fff;color:var(--s700);border:1px solid var(--s200);border-bottom-left-radius:4px}
.chat-msg.bot.typing{color:var(--s400);font-style:italic}
#chat-input-wrap{display:flex;padding:8px;border-top:1px solid var(--s100);gap:6px;flex-shrink:0;background:#fff}
#chat-input{flex:1;padding:8px 10px;border:1.5px solid var(--s300);border-radius:8px;font-size:12px;outline:none;resize:none;font-family:inherit;min-height:36px;max-height:72px}
#chat-input:focus{border-color:var(--g3)}
#chat-send{width:36px;height:36px;border-radius:8px;background:var(--g1);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.15s;flex-shrink:0}
#chat-send:hover{background:var(--g3)}
#chat-send:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:600px){#chat-box{width:calc(100vw - 24px);right:12px;bottom:74px;max-height:70vh}#chat-fab{bottom:14px;right:14px}}
/* BIG CALENDAR (cobrança) */
.bcal{background:#fff;border-radius:var(--r);padding:14px;border:1px solid var(--s200)}
.bcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bcal-nav{background:none;border:none;cursor:pointer;font-size:20px;color:var(--g1);padding:0 8px;border-radius:4px}.bcal-nav:hover{background:var(--gp)}
.bcal-my{font-size:14px;font-weight:700}
.bcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bcal-dn{font-size:9px;font-weight:700;color:var(--s500);text-align:center;padding:3px 0;text-transform:uppercase}
.bcal-d{text-align:center;padding:6px 2px;border-radius:5px;cursor:pointer;font-size:11px;transition:.1s;min-height:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}
.bcal-d:hover{background:var(--gp)}
.bcal-d.btoday{background:var(--g1);color:#fff;font-weight:700}
.bcal-d.btoday-empty{background:var(--s200);color:var(--s700);font-weight:700;border:2px solid var(--s400)}
.bcal-d.bpaid{background:#bbf7d0;color:#166534;font-weight:700}
.bcal-d.blate{background:var(--redl);color:var(--red);font-weight:700}
.bcal-d.bnear{background:var(--oral);color:var(--ora);font-weight:600}
.bcal-d.bfuture{background:var(--g1);color:#fff;font-weight:600}
.leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.leg span{display:flex;align-items:center;gap:5px;font-size:11px}
.ldot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
/* MULTI DATE PICKER */
.mdp-wrap{border:1.5px solid var(--s300);border-radius:var(--rs);overflow:hidden}
.mdp-tags{display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;min-height:36px;align-items:center;background:#fff}
.mdp-cal{border-top:1px solid var(--s200);padding:10px;background:var(--s50)}
.mdp-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mdp-nav{background:none;border:none;cursor:pointer;font-size:16px;color:var(--g1);padding:0 6px;border-radius:4px}.mdp-nav:hover{background:var(--gp)}
.mdp-my{font-size:12px;font-weight:700}
.mdp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mdp-dn{font-size:9px;font-weight:700;color:var(--s500);text-align:center;padding:2px 0;text-transform:uppercase}
.mdp-d{text-align:center;padding:5px 1px;border-radius:4px;cursor:pointer;font-size:11px;transition:.1s;min-height:24px;display:flex;align-items:center;justify-content:center}
.mdp-d:hover{background:var(--gp)}.mdp-d.msel{background:var(--g3);color:#fff;font-weight:700}.mdp-d.mtoday{font-weight:700;border:1.5px solid var(--g3)}
/* UPLOAD */
.doc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.doc-box{border:1.5px dashed var(--s300);border-radius:var(--rs);padding:10px 6px;text-align:center;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.doc-box:hover{border-color:var(--g3);background:var(--gf)}.doc-box.has{border-style:solid;border-color:var(--g3);background:var(--gf)}
.doc-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.doc-ic{font-size:20px;margin-bottom:3px}.doc-lb{font-size:9px;color:var(--s500);font-weight:600;text-transform:uppercase;line-height:1.2}
.doc-ck{position:absolute;top:4px;right:4px;background:var(--g3);color:#fff;border-radius:50%;width:13px;height:13px;font-size:8px;display:none;align-items:center;justify-content:center}
.doc-box.has .doc-ck{display:flex}
/* AVATAR */
.av-big{width:74px;height:74px;border-radius:50%;background:var(--g1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;cursor:pointer;margin:0 auto 6px;position:relative;overflow:hidden}
.av-big img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av-ov{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;font-size:12px;color:#fff}
.av-big:hover .av-ov{opacity:1}
/* MAP */
#map-wrap{width:100%;height:500px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--s200);background:var(--s100);position:relative}
#gmap{width:100%;height:100%}
/* RANK BAR */
.rb{flex:1;height:7px;background:var(--s100);border-radius:4px;overflow:hidden}
.rbf{height:100%;border-radius:4px;background:var(--g3);transition:width .5s}

/* ─ UNIFIED CALENDAR ─ */
.ucal-overlay{display:none;background:#fff;border:1px solid var(--s200);border-radius:var(--r);box-shadow:0 4px 20px rgba(0,0,0,.12);padding:16px;min-width:520px;max-width:100vw}
.ucal-overlay.open{display:block}
.ucal-presets{display:flex;gap:8px;margin-bottom:14px}
.ucal-preset{padding:5px 14px;border:1px solid var(--s300);border-radius:20px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.ucal-preset:hover,.ucal-preset.active{background:var(--g1);color:#fff;border-color:var(--g1)}
.ucal-grids{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ucal-grid{min-width:220px}
.ucal-label{font-size:10px;font-weight:700;color:var(--s500);text-align:center;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.ucal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ucal-nav{background:none;border:none;font-size:18px;cursor:pointer;color:var(--s700);padding:2px 8px;border-radius:4px;line-height:1}
.ucal-nav:hover{background:var(--s100)}
.ucal-month{font-size:14px;font-weight:700;color:var(--s900);text-align:center}
.ucal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ucal-dn{font-size:10px;font-weight:700;color:var(--s500);text-align:center;padding:3px 0}
.ucal-d{text-align:center;padding:6px 2px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:var(--s900);transition:.12s;min-height:30px;line-height:18px}
.ucal-d:hover{background:var(--s100)}
.ucal-d.today{background:var(--s200);color:var(--s700);font-weight:700;border:2px solid var(--s400)}
.ucal-d.sel-start,.ucal-d.sel-end{background:var(--g1);color:#fff;font-weight:700}
.ucal-d.in-range{background:var(--gp);color:var(--g1)}
.ucal-d.other-month{color:var(--s300)}
.ucal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--s100)}
.ucal-footer-lbl{font-size:12px;color:var(--s500)}
.ucal-apply{padding:8px 20px;background:var(--g1);color:#fff;border:none;border-radius:var(--rs);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.ucal-apply:hover{background:var(--g3)}
/* Inline (for calculator/emprestimo) */
.ucal-inline{background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:14px}
.ucal-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:34px;padding:6px 10px;border:1px solid var(--s200);border-radius:var(--rs);background:var(--s50);margin-bottom:10px;align-items:center}
.ucal-tag{display:inline-flex;align-items:center;gap:4px;background:var(--gp);color:var(--g1);padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.ucal-tag-x{cursor:pointer;font-size:14px;line-height:1;margin-left:2px}
/* TOAST */
.toast{position:fixed;bottom:18px;right:18px;background:var(--g1);color:#fff;padding:10px 18px;border-radius:var(--r);font-size:12px;font-weight:600;z-index:9998;transform:translateY(80px);opacity:0;transition:.28s;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}.toast.err{background:var(--red)}.toast.warn{background:var(--ora)}
/* WA */
.wa-btn{background:#25D366;color:#fff;border:none;border-radius:var(--rs);padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer}
.wa-btn:hover{background:#20c55e}
/* CALC */
.copt{border:1.5px solid var(--s300);border-radius:var(--rs);padding:11px;cursor:pointer;transition:.15s}
.copt:hover,.copt.sel{border-color:var(--g3);background:var(--gf)}
.copt .ot{font-size:13px;font-weight:700;color:var(--g1)}.copt .od{font-size:11px;color:var(--s500);margin-top:2px}
/* TREE */
.tnode{border:1.5px solid var(--s200);border-radius:8px;padding:10px 14px;min-width:150px;text-align:center;cursor:pointer;font-size:12px;transition:.15s;background:#fff}
/* HAMBURGER */
.ham{display:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);border:none;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#fff}
/* OVERLAY MOBILE */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
.sb-overlay.op{display:block}

/* ═══ MOBILE ═══ */
@media(max-width:768px){
  .ham{display:flex}
  .sb{position:fixed;left:-260px;top:52px;bottom:0;z-index:100;width:240px;transition:left .25s;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  .sb.open{left:0}
  .shell{flex-direction:column}
  .main{width:100%}
  .content{padding:10px}
  /* Dashboard */
  #page-dashboard>div{grid-template-columns:1fr!important;height:auto!important;overflow:visible!important}
  #page-dashboard .g4,
  #page-dashboard>div>div:first-child>div:nth-child(2){grid-template-columns:1fr 1fr!important}
  /* Dashboard 6 cards: 2 colunas no mobile */
  #page-dashboard>div>div:first-child>div:nth-child(2){grid-template-columns:1fr 1fr!important}
  #page-dashboard>div>div:first-child>div:nth-child(2)>div{padding:10px 12px!important}
  #page-dashboard>div>div:first-child>div:nth-child(2)>div>div:nth-child(2){font-size:15px!important;word-break:break-all}
  /* Dashboard filtros: scroll horizontal no mobile */
  #dash-filter-btns{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  #dash-filter-btns button{white-space:nowrap;flex-shrink:0}
  /* Clientes */
  #page-clientes>div{grid-template-columns:1fr!important}
  #page-clientes,#page-clientes>div,#page-clientes>div>div,#ficha-c{max-width:100vw;overflow-x:hidden}
  /* Mobile: ficha vira "tela cheia" ao selecionar cliente (pattern WhatsApp) */
  #page-clientes.cli-detail-open>div>div:first-child{display:none!important}
  #page-clientes.cli-detail-open>div>div:last-child .ctitle{display:none}
  #page-clientes.cli-detail-open .cli-back-btn{display:inline-flex!important}
  #page-clientes.cli-detail-open .cli-close-desk{display:none!important}
  #ficha-c div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
  #ficha-c table{display:block;overflow-x:auto;width:100%}
  #ficha-c .mf,#ficha-c div[style*="display:flex"]{flex-wrap:wrap}
  .ficha-emp-grid{grid-template-columns:1fr 1fr!important}
  .ficha-emp-grid>div{padding:8px!important}
  .ficha-emp-grid>div>div:last-child{font-size:13px!important}
  .parc-row{flex-wrap:wrap!important}
  .parc-val{margin-right:0!important;margin-bottom:4px;width:100%;text-align:left}
  .parc-btns{width:100%;display:flex;gap:4px;justify-content:flex-end}
  #page-clientes div[style*="grid-template-columns:1fr 90px 60px"]{grid-template-columns:1fr 70px 44px!important}
  /* Cobrança */
  #page-cobranca>div{grid-template-columns:1fr!important}
  #page-cobranca{overflow-x:hidden}
  #page-cobranca table{font-size:11px;table-layout:fixed;width:100%}
  #page-cobranca th,#page-cobranca td{padding:6px 4px;white-space:normal;word-break:break-word;vertical-align:middle}
  #page-cobranca td:nth-child(2){min-width:0}
  #page-cobranca td:nth-child(2) b{white-space:normal;word-break:break-word;line-height:1.2;display:inline-block}
  /* Calendário Cobrança: encolhe pra caber sem cortar */
  #page-cobranca .bcal{padding:8px}
  #page-cobranca .bcal-grid{gap:2px}
  #page-cobranca .bcal-d{padding:4px 1px;min-height:32px;font-size:10px}
  .hide-mob{display:none!important}
  /* Financeiro */
  #page-financeiro>div{grid-template-columns:1fr!important}
  #page-financeiro>div:last-child{grid-template-columns:1fr!important}
  /* Calculadora */
  .g2{grid-template-columns:1fr!important}
  /* Modais */
  .md{width:95vw!important;max-width:95vw!important;padding:16px!important;margin:0 auto}
  .md .g2{grid-template-columns:1fr!important}
  .mdw{width:95vw!important}
  .mo{padding-top:20px!important}
  .mf{flex-wrap:wrap}
  /* Grids */
  .g3,.g4{grid-template-columns:1fr 1fr!important}
  .doc-grid{grid-template-columns:repeat(3,1fr)!important}
  /* Calendário range */
  .ucal-grids,.rcal-grids{grid-template-columns:1fr!important}
  .ucal-overlay{min-width:auto!important;width:92vw!important}
  #fin-cal-panel{min-width:auto!important;width:92vw!important;right:-40px!important}
  /* Topbar — preserva safe-area-inset-top do iOS (notch), so reduz lateral */
  .topbar{padding:env(safe-area-inset-top) 10px 0 10px}
  .tb-r{gap:4px}
  /* Login */
  .lbox{width:90vw!important;padding:28px 20px!important}
  /* Tabelas scroll */
  table{display:table;width:100%;overflow-x:auto;table-layout:fixed}
  /* Tabelas dentro de agentes: compactar no mobile */
  #page-agentes table th,#page-agentes table td{padding:6px 4px;font-size:11px;text-align:center}
  #page-agentes table th:first-child,#page-agentes table td:first-child{text-align:left}
  /* Calendário big */
  .bcal{padding:10px}
  /* Painel notificações */
  .pnl{width:85vw!important;right:-60px!important}
  /* Integrações / WhatsApp: chat full-screen no mobile, alterna lista vs chat */
  /* Mobile: lista cresce naturalmente, página rola; chat ocupa viewport quando aberto */
  #wpp-chat-wrap{flex-direction:column!important;height:auto!important;min-height:0!important}
  #wpp-convs-col{width:100%!important;border-right:none!important;border-bottom:1px solid var(--s200)!important;max-height:none!important;height:auto!important;flex:0 0 auto!important;display:flex!important;flex-direction:column!important}
  #wpp-convs{flex:0 0 auto!important;height:auto!important;max-height:none!important;overflow:visible!important}
  #wpp-chat-col{flex:1 1 auto!important;min-height:0!important;display:none!important}
  body.wpp-chat-open #wpp-chat-wrap{height:calc(100dvh - 130px)!important;overflow:hidden!important}
  body.wpp-chat-open #wpp-chat-col{display:flex!important}
  body.wpp-chat-open #wpp-convs-col{display:none!important}
  #wpp-chat-msgs{max-height:none!important;flex:1 1 0!important;-webkit-overflow-scrolling:touch!important}
  /* Quando conversa aberta: mostra botão voltar */
  body.wpp-chat-open #wpp-back-btn{display:flex!important}
  #wpp-back-btn{display:none}
  /* Integrações: abas com scroll horizontal */
  .itab,.ttab{padding:8px 10px!important;font-size:12px!important}
  /* Modal empréstimo/pagamento parcial: full width */
  #mo-emp .md,#mo-parcial .md{max-width:95vw!important}
  /* Ficha cliente: botões do header quebram em linha */
  #ficha-c button{font-size:11px}
  /* Form Novo Cliente: deixar tudo proporcional (bug do Item 8) */
  /* Endereco/Numero/CEP/Lupa: vira 2 linhas pra nao espremer */
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]{grid-template-columns:1fr 60px!important;gap:8px!important}
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]>div:first-child{grid-column:1/-1}
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]>div:nth-child(2){grid-column:1}
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]>div:nth-child(3){grid-column:2}
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]>div:nth-child(4){grid-column:1/-1;justify-content:flex-end}
  #mo-nc div[style*="grid-template-columns:2fr 1fr 1.2fr auto"]>div:nth-child(4) button{width:100%;font-size:13px;padding:8px}
  /* Documentos: 2 colunas no mobile pra labels nao cortarem */
  #mo-nc .doc-box{padding:12px 6px}
  #mo-nc div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  /* Botoes do rodape: full width empilhados */
  #mo-nc .mf{flex-direction:column-reverse;gap:8px}
  #mo-nc .mf button{width:100%}
}
@media(max-width:480px){
  #page-dashboard>div>div:first-child>div:nth-child(2){grid-template-columns:1fr 1fr!important}
  #page-dashboard>div>div:first-child>div:nth-child(2)>div>div:nth-child(2){font-size:14px!important}
  .g3,.g4{grid-template-columns:1fr!important}
  .topbar-logo .lb{font-size:13px}
}
/* Mobile touch targets */
button,
.ni,.bcal-d,.rcal-d,.ucal-d,.mdp-d,.pnl-i,.copt,.tnode,
input[type="checkbox"],input[type="radio"]{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
/* Google Maps touch — permitir gestos nativos no mapa */
#map-wrap, #gmap {
  touch-action: auto !important;
  -ms-touch-action: auto !important;
}
/* Prevent zoom on input focus (iOS) */
input,select,textarea{font-size:max(16px,1em)!important;}
@media(min-width:769px){input,select,textarea{font-size:13px!important;}}
/* Mapa altura fixa no mobile */
@media(max-width:768px){
  #map-wrap{height:300px!important;}
  #gmap{height:300px!important;min-height:300px!important;}
  /* Dashboard mobile: coluna única, mapa abaixo dos cards */
  #page-dashboard>div{grid-template-columns:1fr!important;height:auto!important;overflow:visible!important;}
}
/* WhatsApp chat: checks de status (sent/delivered/read), edição, exclusão */
.wpp-checks{display:inline-block;font-size:11px;line-height:1;margin-left:4px;letter-spacing:-2px;font-family:Arial,sans-serif;font-weight:bold}
.wpp-checks.sent{color:#94a3b8}        /* 1 check cinza = enviada */
.wpp-checks.delivered{color:#94a3b8}   /* 2 checks cinza = entregue */
.wpp-checks.read{color:#34b7f1}        /* 3 checks azul = visualizada */
.wpp-msg-bubble{position:relative}
.wpp-msg-actions{position:absolute;top:2px;right:4px;display:none;gap:4px}
.wpp-msg-bubble:hover .wpp-msg-actions{display:flex}
.wpp-msg-actions button{background:rgba(255,255,255,0.95);border:1px solid var(--s200);border-radius:4px;width:22px;height:22px;font-size:11px;cursor:pointer;padding:0;line-height:1}
.wpp-msg-edited{font-size:9px;color:var(--s500);font-style:italic;margin-right:4px}
.wpp-msg-deleted{font-style:italic;color:var(--s500)!important}
.wpp-sug-item{position:relative;padding-right:32px!important}
.wpp-sug-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:none;background:transparent;color:#991b1b;cursor:pointer;font-size:13px;font-weight:bold;line-height:1}
.wpp-sug-del:hover{background:#fee2e2}
.wpp-presence{font-style:italic;color:#16a34a!important}

/* ═══ MOBILE REFORÇO 768px (TAREFA 3 - 24/05) ═══ */
@media(max-width:768px){
  /* Botões com altura tátil mínima 44px (Apple HIG / Material) */
  button:not(.ham):not(.wpp-msg-actions button):not(.wpp-sug-del):not(.parc-btns button){min-height:40px;padding:8px 12px}
  /* Inputs altura mínima também */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:40px;padding:8px 10px}
  textarea{min-height:60px}
  /* Tabelas: scroll horizontal forçado em todas (exceto Cobrança, que quebra linha) */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  #page-cobranca table{display:table;overflow-x:visible;white-space:normal}
  /* Modais: padding seguro, sem grudar nas bordas */
  .md{padding:14px!important;margin:8px auto}
  /* WhatsApp chat mobile: msgs ficam mais largas e legíveis */
  .wpp-msg-bubble{max-width:88%!important;font-size:14px!important}
  /* No mobile, esconde os icones da bolha (atrapalham a leitura).
     Acoes ficam disponiveis via long-press => menu de contexto. */
  .wpp-msg-actions{display:none!important}
  /* Treinar IA: chat mobile */
  #ia-train-chat,#chat-fern-msgs{max-height:55vh}
  /* Inputs flutuantes / chat compose: borda inferior segura iOS */
  #wpp-compose,#ia-train-input-wrap{padding-bottom:env(safe-area-inset-bottom,8px)}
  /* Aba ativa visível com indicador */
  .itab.active,.ttab.active{font-weight:700}
}
@media(max-width:480px){
  /* Botões dashboard ainda menores em telas muito pequenas */
  #page-dashboard>div>div:first-child>div:nth-child(2)>div{padding:8px 10px!important}
  #page-dashboard>div>div:first-child>div:nth-child(2)>div>div:first-child{font-size:11px!important}
  /* Modal full-bleed em telas minúsculas */
  .md{width:96vw!important;padding:12px!important}
  .md h2,.md h3{font-size:16px!important}
  /* Whatsapp lista: nome + msg em 1 linha cada */
  .wpp-conv-name{font-size:14px!important}
  .wpp-conv-last{font-size:12px!important}
  /* Calendário compacto */
  .bcal-d,.rcal-d,.ucal-d{font-size:11px!important}
}

/* ═══════════════ RELATÓRIOS ═══════════════ */
/* IMPORTANTE: usar .rel-page.act senao display:flex sobrescreve o display:none
   do .page e a aba fica visivel em TODAS as outras paginas (bug reportado). */
.rel-page{display:none}
.rel-page.act{display:flex;flex-direction:column;gap:18px;padding-bottom:20px}
.rel-section{background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);border:1px solid var(--s100)}
.rel-section-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--s100)}
.rel-section-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.rel-section-title{font-size:16px;font-weight:700;color:var(--s900);line-height:1.2}
.rel-section-sub{font-size:12px;color:var(--s500);margin-top:3px}

.rel-kpi-grid{display:grid;gap:12px;margin-bottom:18px}
.rel-kpi-grid-2{grid-template-columns:repeat(2,1fr)}
.rel-kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.rel-kpi{background:var(--s50);border-radius:10px;padding:14px 16px;border:1px solid var(--s100)}
.rel-kpi-label{font-size:11px;font-weight:600;color:var(--s500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.rel-kpi-value{font-size:26px;font-weight:800;color:var(--s900);line-height:1.1;margin-bottom:4px}
.rel-kpi-sub{font-size:11px;color:var(--s500);font-weight:500}
.rel-kpi-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.02em}

.rel-chart-block{margin-top:18px}
.rel-chart-title{font-size:12px;font-weight:600;color:var(--s600);margin-bottom:10px}
.rel-chart{width:100%;height:200px;position:relative}
.rel-chart svg{display:block;width:100%;height:100%}
.rel-chart .grid-line{stroke:var(--s200);stroke-width:1;stroke-dasharray:3,3}
.rel-chart .axis-label{font-size:10px;fill:var(--s500);font-weight:500}
.rel-chart .bar{transition:opacity .15s}
.rel-chart .bar:hover{opacity:.75;cursor:pointer}

.rel-heatmap{display:flex;gap:10px;align-items:flex-end;height:140px;padding:12px 8px 0}
.rel-heatmap-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.rel-heatmap-val{font-size:11px;font-weight:700;color:var(--s700)}
.rel-heatmap-bar{width:100%;border-radius:6px 6px 2px 2px;min-height:6px;transition:opacity .15s}
.rel-heatmap-bar:hover{opacity:.7}
.rel-heatmap-lbl{font-size:10px;font-weight:700;color:var(--s500);letter-spacing:.04em}

.rel-tooltip{position:fixed;background:rgba(32,33,36,.95);color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:600;pointer-events:none;z-index:9999;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.rel-tooltip strong{color:#4ade80;font-weight:700}

/* RELATÓRIOS — MOBILE */
@media(max-width:768px){
  .rel-section{padding:16px 14px;border-radius:12px}
  .rel-section-head{gap:10px;margin-bottom:14px;padding-bottom:10px}
  .rel-section-icon{width:36px;height:36px;font-size:18px;border-radius:10px}
  .rel-section-title{font-size:14px}
  .rel-section-sub{font-size:11px}
  .rel-kpi-grid-2,.rel-kpi-grid-4{grid-template-columns:1fr 1fr;gap:8px}
  .rel-kpi{padding:10px 12px}
  .rel-kpi-label{font-size:9px}
  .rel-kpi-value{font-size:18px}
  .rel-kpi-sub{font-size:10px}
  .rel-chart{height:160px}
  .rel-heatmap{gap:4px;padding:8px 0 0}
  .rel-heatmap-val{font-size:10px}
  .rel-heatmap-lbl{font-size:9px}
}
@media(max-width:420px){
  .rel-kpi-grid-4{grid-template-columns:1fr 1fr}
  .rel-kpi-value{font-size:16px}
}