/* CRM Maximus · visual do protótipo aprovado (2026-11-13), com a cor da marca de cada conta em --acc */
:root{
  --bg:#07090D;
  --side:rgba(16,22,32,.92); --panel:rgba(18,25,36,.78);
  --card:rgba(22,30,43,.72); --card-solid:#121A26; --card-hi:rgba(32,44,62,.8);
  --line:rgba(140,165,200,.13); --line-2:rgba(140,165,200,.08);
  --ink:#EEF2F7; --ink-2:#9AA7B8; --ink-3:#647184;
  --acc:#2F7BFF; --acc-2:#1D64E0; --acc-soft:rgba(47,123,255,.16);
  --red:#F0656A; --red-soft:rgba(240,101,106,.16); --amber:#F2B23E; --amber-soft:rgba(242,178,62,.15);
  --green:#3DD68C; --green-soft:rgba(61,214,140,.14);
  --side-ink:#C3CDD9; --side-hover:rgba(255,255,255,.05);
  --r:12px; --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
}
/* modo claro (padrão da conta pode ser claro; cada pessoa troca no menu do avatar) */
:root[data-theme="light"]{
  --bg:#F5F2EC;
  --side:#FFFFFF; --panel:rgba(255,255,255,.88);
  --card:#FFFFFF; --card-solid:#FFFFFF; --card-hi:#F2EEE6;
  --line:rgba(60,45,20,.12); --line-2:rgba(60,45,20,.07);
  --ink:#1F1A12; --ink-2:#5E5647; --ink-3:#958C7A;
  --red:#C4423F; --red-soft:rgba(196,66,63,.10); --amber:#A9701A; --amber-soft:rgba(201,140,40,.14);
  --green:#1F8A57; --green-soft:rgba(31,138,87,.11);
  --side-ink:#3D362B; --side-hover:rgba(60,45,20,.05);
  --shadow:0 1px 2px rgba(60,45,20,.06),0 6px 20px rgba(60,45,20,.06);
  color-scheme:light;
}
:root{color-scheme:dark}
:root[data-theme="light"] .gaveta{box-shadow:-20px 0 50px rgba(60,45,20,.15)}
:root[data-theme="light"] .gaveta-fundo,:root[data-theme="light"] dialog::backdrop{background:rgba(40,30,15,.35)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:Manrope,Arial,Helvetica,sans-serif;background:var(--bg);background-image:radial-gradient(1200px 600px at 60% -10%,var(--acc-soft),transparent 60%);background-attachment:fixed;color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card-solid);border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{resize:vertical}
a{color:inherit}
.sub{color:var(--ink-2)}
.erro{color:var(--red);font-size:13px;min-height:18px}
.mt{margin-top:12px}.mt2{margin-top:22px}
.sp{flex:1}

/* layout */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;gap:12px;padding:12px}
.side{background:var(--side);border:1px solid var(--line);border-radius:16px;color:var(--side-ink);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:12px;height:calc(100vh - 24px);box-shadow:var(--shadow)}
.brand{padding:4px 8px 18px;display:flex;align-items:center;gap:10px}
.brand img{width:38px;height:38px;object-fit:contain}
.brand b{display:block;color:var(--ink);font-size:14px;line-height:1.2}
.brand small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:800}
.side h6{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:16px 10px 6px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;transition:background .15s;text-decoration:none}
.nav a:hover{background:var(--side-hover);color:var(--ink)}
.nav a.on{background:linear-gradient(90deg,var(--acc-soft),transparent);color:var(--ink);box-shadow:0 0 0 1px var(--acc-soft) inset}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.side .foot{margin-top:auto;padding:12px 14px;font-size:12px}
.main{min-width:0;display:flex;flex-direction:column;gap:12px}
.top{display:flex;align-items:center;gap:8px;padding:10px 14px 10px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);position:sticky;top:12px;z-index:5;backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.top .crumb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.top select{width:auto}
.av{width:32px;height:32px;border-radius:50%;background:var(--card-hi);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800}
.menu-user{position:relative}
.pop{position:absolute;right:0;top:40px;background:var(--card-solid);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:200px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);z-index:20}
.pop button{text-align:left;padding:7px 8px;border-radius:7px}
.pop button:hover{background:var(--card-hi)}
.view{padding:10px 6px 50px;display:none}
.view.on{display:block;animation:in .2s ease}
@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* elementos */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;transition:.15s}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:linear-gradient(180deg,var(--acc),var(--acc-2));border-color:var(--acc);color:#fff;box-shadow:0 6px 20px var(--acc-soft)}
.btn.full{width:100%;justify-content:center}
.btn.perigo{color:var(--red)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
h1.big{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:8px 0 4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.lbl{font-size:12.5px;color:var(--ink-2);font-weight:600;display:flex;flex-direction:column;gap:5px}
.grid{display:grid;gap:12px}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1fr 1fr}
.kpi .n{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px}
.tag{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--line-2);color:var(--ink-2);white-space:nowrap;font-weight:600}
.tag.red{background:var(--red-soft);color:var(--red)}.tag.green{background:var(--green-soft);color:var(--green)}
.tag.amber{background:var(--amber-soft);color:var(--amber)}.tag.acc{background:var(--acc-soft);color:var(--acc)}
.crmhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.crmhead h2{font-size:17px;font-weight:800}
.crmhead select{width:auto}
.search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 11px;background:var(--card);min-width:260px}
.search input{border:0;background:transparent;padding:8px 0}
.search svg{width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:2;flex:none}
.vazio{color:var(--ink-3);font-size:13px;padding:8px 0}
.linha{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px;cursor:pointer}
.linha:last-child{border:0}
.linha .h{width:84px;font-weight:800;flex:none}
.barra{height:8px;background:var(--line-2);border-radius:6px;overflow:hidden;flex:1}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-2),var(--acc));border-radius:6px}
.linha .t{width:230px;font-weight:600;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .v{width:34px;text-align:right;font-weight:800}

/* funil */
.kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{flex:0 0 250px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - 190px)}
.col.alvo{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.col header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12.5px;border-bottom:1px solid var(--line-2)}
.col header .tag{font-size:10.5px}
.col .itens{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:60px}
.lc{background:var(--card-solid);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:grab;font-size:12.5px}
.lc:hover{border-color:var(--ink-3)}
.lc b{display:block;font-size:13px}
.lc .sub{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc .rod{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}

/* tabelas */
.tabela-wrap{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--line)}
.tabela td{padding:11px 14px;border-bottom:1px solid var(--line-2)}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover{background:var(--card-hi)}

/* agenda */
.semana{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:8px;overflow-x:auto}
.dia{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:180px}
.dia.hoje{border-color:var(--acc)}
.dia h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.ev{font-size:12px;border-radius:8px;padding:6px 8px;margin-bottom:6px;background:var(--line-2);border-left:3px solid var(--ink-3)}
.ev b{display:block;font-size:11.5px}
.ev.livre{background:var(--green-soft);border-color:var(--green)}
.ev.atendimento{background:var(--amber-soft);border-color:var(--amber)}
.ev.audiencia{background:var(--red-soft);border-color:var(--red)}
.ev.bloqueio{background:var(--red-soft);border-color:var(--red);font-weight:700}
.ev.crm{background:var(--acc-soft);border-color:var(--acc);cursor:pointer}
.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;margin-right:6px;cursor:pointer}
.check input{width:auto}
.legenda{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}

/* ficha do lead */
.gaveta-fundo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
.gaveta{position:fixed;right:0;top:0;bottom:0;width:min(560px,100vw);background:var(--card-solid);border-left:1px solid var(--line);z-index:31;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
.gaveta-topo{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line)}
.gaveta-topo h2{font-size:20px;margin-top:4px}
.gaveta-corpo{padding:18px 20px;overflow-y:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.linha-botoes{display:flex;gap:8px;align-items:center}
.nota{display:flex;gap:8px}
.timeline{list-style:none;display:flex;flex-direction:column;gap:2px}
.timeline li{padding:8px 0 8px 14px;border-left:2px solid var(--line);font-size:13px;position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.timeline li.nota::before{background:var(--acc)}
.timeline li.formulario::before{background:var(--green)}
.timeline small{display:block;color:var(--ink-3);font-size:11.5px}

/* modais, login, toast */
dialog{margin:auto;background:var(--card-solid);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(560px,94vw);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{font-size:18px}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(380px,100%);padding:28px;display:flex;flex-direction:column;gap:12px}
.login-card h1{font-size:24px}
.login-topo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-topo img{width:52px;height:52px;object-fit:contain}
.login-topo b{font-size:16px}
.login-marca{font-weight:800;letter-spacing:.2em;color:var(--acc);font-size:12px}
.senha-wrap{position:relative;display:block}
.senha-wrap input{padding-right:42px}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.olho:hover{color:var(--ink);background:var(--card-hi)}
.olho svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.copia{display:flex;gap:8px;align-items:center}
.copia code{flex:1;background:var(--card-solid);border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12px;overflow-x:auto;white-space:nowrap}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card-hi);border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:50;box-shadow:var(--shadow)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .g4,.g2{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .search{min-width:0;flex:1}
}