/* ═══════════════════════════════════════════════
   BASE.CSS — Variáveis, Reset, Tipografia
   ImoCRM 360°
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0c0f1a;--bg2:#131929;--bg3:#1a2236;--bg4:#222d45;--bg5:#2a3550;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--border3:rgba(255,255,255,.22);
  --text:#eceef4;--text2:#9aa3b8;--text3:#5e6a82;
  --gold:#e8b84b;--gold2:#f5d07a;--gold3:rgba(232,184,75,.15);
  --primary:#e8b84b;--primary-2:#f0a030;--primary-alpha:rgba(232,184,75,.15);
  --blue:#4f8ef7;--blue2:rgba(79,142,247,.15);
  --teal:#2ec4a4;--purple:#8b6cf7;--coral:#f0714a;
  --green:#35c47a;--amber:#f0a030;--red:#f05252;--pink:#e060a0;
  --font:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',monospace;
  --r:10px;--r2:14px;--r3:18px;
  --fs-base:17px;--fs-sm:15px;--fs-xs:14px;--fs-lg:19px;
}

/* ── LIGHT THEME ── */
[data-theme="light"]{
  --bg:#f0f2f7;--bg2:#ffffff;--bg3:#f5f7fc;--bg4:#eaecf4;--bg5:#e0e3ef;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.13);--border3:rgba(0,0,0,.2);
  --text:#1a2033;--text2:#4a5368;--text3:#8892aa;
  --gold3:rgba(232,184,75,.12);--primary-alpha:rgba(232,184,75,.12);
  --blue2:rgba(79,142,247,.1);
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ── INPUTS GLOBAIS ── */
input,select,textarea,button{font-family:var(--font);}

/* ── ANIMAÇÕES ── */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes blinkPip{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{opacity:1}to{transform:translateX(100%);opacity:0}}

/* ── LOADING SCREEN ── */
#loading-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.ld-icon{width:58px;height:58px;background:linear-gradient(135deg,var(--gold),var(--amber));border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 32px rgba(232,184,75,.3);animation:pulse 1.5s infinite;}
.ld-txt{font-size:13px;color:var(--text3);}
.ld-err{font-size:12px;color:var(--red);text-align:center;max-width:340px;line-height:1.6;}
.ld-err a{color:var(--blue);cursor:pointer;text-decoration:underline;}

/* ── TOAST ── */
#toast-area{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{background:var(--bg2);border:.5px solid var(--border2);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:10px;min-width:280px;animation:toastIn .3s ease;pointer-events:all;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.toast.pts-toast{border-color:rgba(232,184,75,.4);background:linear-gradient(135deg,var(--bg2),rgba(232,184,75,.05));}
.toast-icon{font-size:18px;flex-shrink:0;}
.toast-body{flex:1;}
.toast-title{font-size:12px;font-weight:600;}
.toast-sub{font-size:11px;color:var(--text3);}
.toast-pts{font-size:18px;font-weight:700;color:var(--gold);font-family:var(--mono);}

/* ── SYNC INDICATOR ── */
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;transition:background .3s;}
.sync-dot.syncing{background:var(--amber);animation:blink 1s infinite;}
.sync-dot.error{background:var(--red);}

/* ── BOTÕES GLOBAIS ── */
.btn-pri{padding:6px 13px;background:var(--gold);border:none;border-radius:7px;color:#1a1200;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap;}
.btn-pri:hover{background:var(--gold2);}
.btn-sec{padding:5px 10px;border-radius:7px;border:.5px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:12px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:all .12s;font-family:var(--font);}
.btn-sec:hover{border-color:var(--border3);color:var(--text);}

/* ── CHIPS / FILTROS GLOBAIS ── */
.fchip{padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer;background:var(--bg3);border:.5px solid var(--border);color:var(--text3);transition:all .12s;font-weight:500;white-space:nowrap;flex-shrink:0;user-select:none;}
.fchip:hover{background:var(--bg4);color:var(--text2);border-color:var(--border2);}
.fchip.active{background:var(--blue2);border-color:var(--blue);color:var(--blue);}

/* ── PÁGINAS ── */
.page{display:none;flex:1;overflow-x:hidden;overflow-y:auto;flex-direction:column;}
.page.active{display:flex;}

/* ── BADGE DE ROLE ── */
.role-badge{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;}
.rb-g{background:rgba(232,184,75,.18);color:var(--gold);}
.rb-c{background:rgba(79,142,247,.18);color:var(--blue);}

/* ── REQ BADGE ── */
.req-badge{font-size:10px;background:rgba(240,82,82,.18);color:var(--red);border-radius:6px;padding:1px 5px;margin-left:4px;}

/* ── DATE HINT ── */
.date-hint{font-size:11px;color:var(--text3);margin-top:4px;}

/* ── VIEW TOGGLE ── */
.view-toggle{display:flex;background:var(--bg3);border:.5px solid var(--border2);border-radius:7px;overflow:hidden;flex-shrink:0;}
.view-toggle button{padding:5px 10px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:13px;transition:all .12s;font-family:var(--font);}
.view-toggle button.active{background:var(--primary);color:#000;font-weight:700;}