/* visual base do sistema (tokens, botões, cards, kanban, chat) */
  :root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --col: #e6e9ed;
  --line: #dfe3e8;
  --text: #2b2f33;
  --muted: #7d858d;
  --accent: #2D2926;
  --accent-dark: #1F1C1A;
  --link: #2D2926;
  --star: #2D2926;
  --star-off: #c7ccd1;
  --red: #e5484d;
  --whats: #25a244;
  --orange: #f08c00;
  --late-bg: #fdeccc;
  --purple: #7b4fc9;
  --radius: 4px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: "Figtree", system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.hidden { display: none !important; }

.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); padding: 7px 14px; border-radius: var(--radius); font-weight: 700; font-size: 13.5px; }
.btn:hover { border-color: #c3c9cf; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.ghost { border-color: transparent; color: var(--link); padding: 7px 8px; }
.btn.danger { color: var(--red); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.field { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; outline: none; }
.field:focus { border-color: var(--link); }
label.lb { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }

/* LOGIN */
#login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 32px; box-shadow: 0 10px 30px -15px rgba(0,0,0,.2); }
.login-card .logo { margin-bottom: 22px; }
.login-card p { color: var(--muted); margin-bottom: 16px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 12px; padding: 10px; }
.erro { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }
.login-card { max-width: 400px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form .btn { margin-top: 2px !important; }
.field.codigo { font-size: 26px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; padding: 12px; }
.auth-passos { padding-left: 20px; color: #4b5258; font-size: 13.5px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.qr { width: 200px; height: 200px; margin: 6px auto 4px; }
.qr svg { width: 100%; height: 100%; display: block; }
.auth-chave { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; text-align: center; }
.auth-chave summary { cursor: pointer; color: var(--link); }
.auth-chave code { display: block; font-size: 14px; color: var(--text); background: var(--bg); padding: 8px; border-radius: 6px; margin: 6px 0 2px; letter-spacing: .05em; word-break: break-all; }

/* TOPO */
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; line-height: 1; }
.logo img { height: 40px; width: auto; display: block; }
.logo .crm-tag { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; align-self: flex-end; margin-bottom: 4px; }
.login-card .logo img { height: 56px; }
/* MENU LATERAL */
#app { display: flex; min-height: 100vh; }
aside.side { width: 232px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--line); }
nav.menu { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; overflow-y: auto; }
nav.menu button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); font-weight: 700; color: #4b5258; text-align: left; border-left: 3px solid transparent; }
nav.menu button:hover { background: var(--bg); }
nav.menu button.on { background: #EFEEE8; color: var(--accent); border-left-color: var(--accent); }
nav.menu button .pillcount { margin-left: auto; }
nav.menu .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.pillcount { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.gstatus { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 8px 18px; }
.gstatus i { width: 8px; height: 8px; border-radius: 50%; background: #c3c9cf; flex: none; }
.gstatus.ok i { background: var(--accent); }
.gstatus.erro i { background: var(--red); }
.top-right { display: flex; align-items: center; gap: 2px; }
.icobtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #5b636b; position: relative; }
.icobtn:hover { background: var(--bg); }
.icobtn .dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--panel); }
.user { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-top: 1px solid var(--line); position: relative; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #e9ecef; display: grid; place-items: center; font-weight: 800; color: #5b636b; flex: none; }
.user .who { flex: 1; min-width: 0; }
.user .who b { display: block; font-size: 13.5px; }
.user .who small { color: var(--muted); font-size: 12px; }
.dropdown { position: absolute; bottom: calc(100% + 4px); left: 8px; width: 250px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px -12px rgba(0,0,0,.25); z-index: 40; }
main.main { flex: 1; min-width: 0; }
.menu-mob { display: none; }

/* AGENDA */
.ag { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 90px); }
.ag-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); min-width: 900px; position: relative; }
.ag-h { position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.ag-h b { display: block; font-size: 20px; color: var(--text); font-weight: 600; }
.ag-h.hoje b { background: var(--link); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin: 2px auto 0; }
.ag-allday { grid-column: 1 / -1; display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); border-bottom: 1px solid var(--line); min-height: 26px; position: sticky; top: 63px; background: var(--panel); z-index: 3; }
.ag-allday > div { padding: 3px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.ag-allday span.l { font-size: 10.5px; color: var(--muted); padding: 6px 4px; border-left: 0; }
.ag-hours { grid-column: 1; }
.ag-hours div { height: 64px; font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.ag-day { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 64px); cursor: copy; }
.ag-ev { position: absolute; left: 3px; right: 3px; border-radius: 4px; padding: 3px 6px; font-size: 12px; overflow: hidden; cursor: pointer; line-height: 1.3; border-left: 3px solid; z-index: 1; box-shadow: 0 0 0 1px var(--panel); }
.ag-ev .t { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ag-ev.curto { display: flex; gap: 5px; align-items: center; white-space: nowrap; padding-top: 1px; padding-bottom: 1px; }
.ag-ev.curto b { display: inline; flex: none; }
.ag-ev.curto .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* passar o mouse mostra o texto inteiro por cima dos outros */
.ag-ev:hover { z-index: 6; height: auto !important; min-height: var(--h); min-width: 220px; overflow: visible; white-space: normal; box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); }
.ag-ev:hover .t { display: block; white-space: normal; -webkit-line-clamp: unset !important; }
.ag-ev.curto:hover { display: block; }
.ag-ev.curto:hover b { display: block; }
.ag-pop { position: fixed; z-index: 85; width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.35); padding: 14px 16px; }
.ag-pop h4 { font-size: 15px; margin: 0 0 6px; padding-right: 20px; word-break: break-word; }
.ag-pop .q { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.ag-pop .x { position: absolute; top: 8px; right: 8px; }
.ag-ev.google { background: #e3effa; border-color: var(--link); color: #0f4c7a; }
.ag-ev.crm { background: #EFEEE8; border-color: var(--accent); color: #2D2926; }
.ag-ev.crm.late { background: var(--late-bg); border-color: var(--orange); color: #7a4700; }
.ag-ev.crm.feita { opacity: .55; text-decoration: line-through; }
.ag-ev b { display: block; font-weight: 700; }
.ag-chip { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: #e3effa; color: #0f4c7a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; }
.ag-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.legenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); align-items: center; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.aviso { background: #fff8ea; border: 1px solid #f5d9a6; color: #7a4700; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.aviso.erro { background: #fdecec; border-color: #f5c2c2; color: #8f1d1d; }
.conf-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.conf-item:last-child { border-bottom: 0; }
.conf-item .h { font-weight: 700; white-space: nowrap; }
.dropdown .vendi { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dropdown .vendi span { font-size: 13px; font-weight: 700; color: var(--muted); }
.dropdown .vendi b { display: block; font-size: 24px; font-weight: 800; margin-top: 2px; }
.dropdown button { display: block; width: 100%; text-align: left; padding: 10px 16px; }
.dropdown button:hover { background: var(--bg); }

/* CABEÇALHO DA PÁGINA */
.pagehead { display: flex; align-items: flex-end; gap: 18px; padding: 14px 16px 12px; flex-wrap: wrap; }
.pagehead h1 { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-right: auto; }
.pagehead h1 .help { width: 18px; height: 18px; border-radius: 50%; background: var(--link); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ddf { display: flex; flex-direction: column; min-width: 130px; }
.ddf span { font-size: 11.5px; color: var(--muted); }
.ddf select { border: 0; background: transparent; padding: 2px 18px 2px 0; outline: none; appearance: none; color: var(--text); font-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b636b'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; cursor: pointer; }
.search { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding: 3px 2px; min-width: 200px; color: var(--muted); }
.search input { border: 0; outline: none; background: transparent; width: 100%; color: var(--text); }
.viewtoggle { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 600; padding: 4px 6px; }

/* QUADRO */
.board { display: flex; gap: 8px; padding: 0 8px 8px; overflow-x: auto; height: calc(100vh - 72px); }
.col { flex: 0 0 278px; width: 278px; min-width: 0; background: var(--col); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; outline: 2px dashed transparent; outline-offset: -2px; }
.col.over { outline-color: var(--accent); }
.col-head { padding: 12px 10px 10px; }
.col-head .t { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.col-head .t svg { width: 15px; height: 15px; color: var(--muted); }
.col-head .m { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 13.5px; }
.col-head .m b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.col-head .m b svg { width: 16px; height: 16px; color: var(--muted); }
.col-body { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 0 6px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.col-body::-webkit-scrollbar { width: 8px; }
.col-body::-webkit-scrollbar-thumb { background: #b8bec4; border-radius: 4px; }

.card { background: var(--panel); border-radius: var(--radius); padding: 10px 10px 9px 12px; cursor: grab; border-left: 3px solid transparent; box-shadow: 0 1px 1px rgba(0,0,0,.06); position: relative; }
.card:hover { box-shadow: 0 4px 12px -4px rgba(0,0,0,.18); }
.card.late { background: var(--late-bg); }
.card.t-quente { border-left-color: var(--red); }
.card.t-morno { border-left-color: var(--orange); }
.card.t-frio { border-left-color: var(--link); }
.card.dragging { opacity: .5; }
.card { min-width: 0; height: 103px; flex: none; display: flex; flex-direction: column; overflow: hidden; } /* todos do mesmo tamanho */
.card .foot { margin-top: auto; }
.card .head { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.card .av { width: 30px; height: 30px; border-radius: 50%; background: #f3dcc6; color: #9a6a3d; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; margin-top: 2px; }
.card .nm { flex: 1; min-width: 0; }
.card .nm b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .nm span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.card .nm .nm-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card .nm .nm-l b { min-width: 0; }
.card .nm .loja-tag { display: inline-block; flex: none; margin: 0; font-size: 10.5px; padding: 0 6px; line-height: 17px; color: #1a5fa8; vertical-align: 2px; }
.card .alarm { color: var(--orange); }
.card .foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.vals { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: #4b5258; min-width: 0; flex: 1; }
.vals span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vals i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 13px; height: 13px; fill: var(--star-off); stroke: none; }
.stars svg.on { fill: var(--star); }
.card .ct { color: var(--red); }
.card .ct.whatsapp { color: var(--whats); }
.card .ct.reuniao { color: var(--purple); }
.card .info { color: #8a9299; }
.card .info svg, .card .ct svg { width: 19px; height: 19px; }
.vazio { color: var(--muted); font-size: 13px; text-align: center; padding: 16px 6px; }

.fab { position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--link); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(26, 140, 216, .6); z-index: 25; }
.fab svg { width: 24px; height: 24px; stroke-width: 2.4; }

/* LISTAGEM / TABELAS */
.wrap { padding: 0 16px 24px; }
.tbl { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; font-weight: 700; color: var(--muted); background: #fafbfc; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: #f7f9fb; }
tbody tr:last-child td { border-bottom: 0; }
.tagetapa { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--col); }

/* TAREFAS */
.tabs2 { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.tabs2 button { padding: 6px 14px; font-weight: 700; font-size: 13px; color: var(--muted); border-right: 1px solid var(--line); }
.tabs2 button:last-child { border-right: 0; }
.tabs2 button.on { background: var(--link); color: #fff; }
.grupo { margin-bottom: 18px; }
.grupo h3 { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.grupo h3.red { color: var(--red); }
.tlist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow.late { background: #fff8ea; }
.trow.feita .ttl { text-decoration: line-through; color: var(--muted); }
.chk { width: 18px; height: 18px; border-radius: 3px; border: 2px solid #aab2b9; display: grid; place-items: center; flex: none; color: #fff; }
.chk svg { width: 12px; height: 12px; stroke-width: 3; }
.chk.on { background: var(--accent); border-color: var(--accent); }
.tico { color: var(--red); }
.tico.whatsapp { color: var(--whats); }
.tico.reuniao { color: var(--purple); }
.tico.followup, .tico.outro { color: var(--muted); }
.tinfo { flex: 1; min-width: 0; }
.ttl { font-weight: 600; }
.tsub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsub a { color: var(--link); cursor: pointer; }
.thora { font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.thora.late { color: var(--orange); }
.adiar { width: auto; padding: 4px 6px; font-size: 12.5px; }
.delb { color: #9aa2a9; padding: 4px; }
.delb:hover { color: var(--red); }
.semana { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 6px; overflow-x: auto; }
.dia { background: var(--col); border-radius: var(--radius); min-height: 300px; display: flex; flex-direction: column; }
.dia.hoje .dia-head { color: var(--link); }
.dia-head { padding: 10px; font-weight: 700; text-transform: capitalize; }
.dia-head small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.dia-body { padding: 0 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.evs { background: var(--panel); border-radius: var(--radius); padding: 8px; font-size: 12.5px; cursor: pointer; border-left: 3px solid var(--link); }
.evs.late { background: var(--late-bg); border-left-color: var(--orange); }
.evs b { display: flex; align-items: center; gap: 5px; }
.evs b svg { width: 14px; height: 14px; }
.evs span { color: var(--muted); display: block; }

/* RELATÓRIOS */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.kpi b { display: block; font-size: 24px; font-weight: 800; margin-top: 2px; }
.kpi small { color: var(--muted); font-size: 12px; }
.metabar { height: 6px; background: var(--col); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.metabar i { display: block; height: 100%; background: var(--accent); }
.rel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.box.full { grid-column: 1 / -1; }
.box h3 { font-size: 15px; font-weight: 700; }
.box p.sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 12px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.hbar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .trk { height: 12px; }
.hbar .trk i { display: block; height: 100%; background: var(--link); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar .v small { color: var(--muted); font-weight: 600; }
.conv { font-size: 11.5px; color: var(--muted); padding-left: calc(30% + 10px); }
.vbars { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--line); }
.vbars .b { flex: 1; background: var(--link); border-radius: 4px 4px 0 0; min-height: 2px; }
.vbars .b:hover { background: #126aa6; }
.vx { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.tip { position: fixed; pointer-events: none; background: var(--text); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 4px; z-index: 90; white-space: nowrap; }

/* CONFIGURAÇÕES */
.cfg { max-width: 780px; display: flex; flex-direction: column; gap: 12px; }
.sw { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sw:last-child { border-bottom: 0; }
.sw .tx { flex: 1; font-weight: 600; }
.sw .tx small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.toggle { width: 40px; height: 22px; border-radius: 6px; background: #c3c9cf; position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 21px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
.modelo { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }

/* FICHA / MODAIS */
.overlay { position: fixed; inset: 0; background: rgba(20, 25, 30, .4); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 100%); background: var(--bg); z-index: 60; display: flex; flex-direction: column; box-shadow: -10px 0 40px -10px rgba(0,0,0,.3); }
.dh { background: var(--panel); padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.dh .avatar { width: 42px; height: 42px; background: #f3dcc6; color: #9a6a3d; }
.dh h2 { font-size: 19px; font-weight: 700; }
.dh .emp { color: var(--muted); font-size: 13.5px; }
.x { margin-left: auto; color: var(--muted); padding: 4px; }
.db { padding: 14px 16px 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sec-t { font-size: 13px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.full { grid-column: 1 / -1; }
.starsel { display: inline-flex; gap: 2px; }
.starsel button svg { width: 22px; height: 22px; fill: var(--star-off); stroke: none; }
.starsel button.on svg { fill: var(--star); }
.tempsel { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tempsel button { padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--muted); border-right: 1px solid var(--line); }
.tempsel button:last-child { border-right: 0; }
.tempsel button.on.quente { background: #fde2e2; color: #b42318; }
.tempsel button.on.morno { background: #fdeccc; color: #9a5b00; }
.tempsel button.on.frio { background: #dcecfb; color: #135f99; }
.info-list { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; font-size: 13px; }
.info-list dt { color: var(--muted); }
.info-list dd { word-break: break-word; }
.timeline { display: flex; flex-direction: column; }
.ev { display: flex; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .ic { color: var(--muted); padding-top: 1px; }
.ev .ic svg { width: 16px; height: 16px; }
.ev .q { color: var(--muted); font-size: 12px; }
.ev .tx { white-space: pre-wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: var(--panel); border-radius: 3px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; color: var(--link); }
.chips button:hover { border-color: var(--link); }
.menuwpp { position: relative; }
.menuwpp .mn { position: absolute; top: calc(100% + 4px); left: 0; width: 300px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px -12px rgba(0,0,0,.3); z-index: 5; }
.menuwpp .mn button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.menuwpp .mn button:last-child { border-bottom: 0; }
.menuwpp .mn button:hover { background: var(--bg); }
.menuwpp .mn small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); background: var(--panel); border-radius: 6px; z-index: 60; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal h3 { font-size: 17px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal .mb { padding: 16px 20px; }
.modal .mf { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* PÁGINA DA NEGOCIAÇÃO */
.deal { padding: 12px 16px 28px; }
.crumb { display: flex; align-items: center; gap: 6px; color: var(--link); font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.crumb svg { width: 16px; height: 16px; transform: rotate(90deg); }
.deal-head { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.deal-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.deal-row h1 { font-size: 22px; font-weight: 700; }
.deal-row .sub { color: var(--muted); font-size: 13.5px; }
.deal-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn.venda { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.venda:hover { background: var(--accent-dark); }
.btn.perda { background: var(--red); border-color: var(--red); color: #fff; }
.btn.perda:hover { background: #c93a3f; }
.steps { display: flex; margin-top: 14px; overflow-x: auto; }
.step { flex: 1; min-width: 120px; position: relative; padding: 9px 10px 9px 22px; background: #edf0f3; color: var(--muted); font-weight: 700; font-size: 13px; text-align: center; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-right: -8px; cursor: pointer; }
.step:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 12px; border-radius: 3px 0 0 3px; }
.step:hover { background: #dfe5ea; }
.step.feito { background: #cfe9d9; color: #2D2926; }
.step.atual { background: var(--accent); color: #fff; }
.step small { display: block; font-weight: 600; font-size: 11px; opacity: .85; }
.status-ban { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius); display: flex; align-items: center; gap: 10px; font-weight: 700; }
.status-ban.ganha { background: #EFEEE8; color: #2D2926; }
.status-ban.perdida { background: #fdecec; color: #8f1d1d; }
.status-ban .btn { margin-left: auto; }
.prox-ban { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: #f2f7fc; border: 1px solid #d5e6f5; font-size: 13.5px; }
.prox-ban.late { background: var(--late-bg); border-color: #f5d9a6; }
.prox-ban.sem { background: #fff8ea; border-color: #f5d9a6; }
.prox-ban .btn { margin-left: auto; }
.deal-body { display: grid; grid-template-columns: 340px 1fr; gap: 12px; margin-top: 12px; align-items: start; }
/* funis */
.funil-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: #eef1f4; color: #3d454c; margin-left: 8px; vertical-align: 3px; white-space: nowrap; }
.funil-tag.f-boleto { background: #e3eefb; color: #1a5fa8; } .funil-tag.f-assistencia { background: #fff1dc; color: #9a5b00; } .funil-tag.f-acessorios { background: #efe9ff; color: #5b3fd1; } .funil-tag.f-triagem { background: #fde4e1; color: #b42318; }
#funilTabs { margin-left: 8px; } #funilTabs button .n { margin-left: 5px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.08); border-radius: 6px; padding: 0 6px; }
#funilTabs button.on .n { background: rgba(255,255,255,.25); }
.outros-funis { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.outros-funis a { text-decoration: none; }
.triagem-ban { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff8ea; border: 1px solid #f5d9a6; color: #7a4700; border-radius: var(--radius); padding: 10px 14px; margin-top: 14px; font-size: 13.5px; }
.triagem-ban b { margin-right: auto; }
/* tarefas automáticas */
.ta-lista { display: flex; flex-direction: column; gap: 8px; }
.ta-linha { display: grid; grid-template-columns: 44px 170px 1fr 150px 210px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ta-linha.off { opacity: .55; } .ta-linha.off .toggle { opacity: 1; }
.ta-et { font-weight: 700; font-size: 13.5px; }
.ta-prazo { display: flex; gap: 6px; align-items: center; } .ta-prazo span { color: var(--muted); font-size: 13px; } .ta-prazo input { width: 70px; }
@media (max-width: 900px) { .ta-linha { grid-template-columns: 44px 1fr; } .ta-linha > :nth-child(n+3) { grid-column: 1 / -1; } }
/* histórico de compras */
.compras { display: flex; flex-direction: column; gap: 10px; }
.compra { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 13.5px; }
.compra .c-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.compra .c-tipo { font-size: 11px; font-weight: 800; border: 1px solid; border-radius: 6px; padding: 1px 8px; }
.compra .c-data { color: var(--muted); font-size: 12px; }
.compra .c-top .btn { margin-left: auto; padding: 2px 6px; }
.compra .c-valor { color: var(--muted); font-weight: 600; }
.compra .c-plano { color: #4b5258; font-size: 12.5px; margin-top: 3px; }
.c-total { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* origem dentro do chat (igual o WhatsApp mostra o anúncio) */
.wa-origem { display: flex; gap: 12px; max-width: 520px; margin: 4px auto 14px; background: #fff; border: 1px solid #d5e6f5; border-left: 4px solid var(--link); border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
a.wa-origem:hover { background: #f5f9fe; }
.wa-origem img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; background: #eef1f4; }
.wa-origem small { display: block; font-size: 11px; font-weight: 800; color: var(--link); text-transform: uppercase; letter-spacing: .04em; }
.wa-origem b { display: block; font-size: 14px; margin-top: 1px; }
.wa-origem p { margin: 3px 0 0; font-size: 12.5px; color: #4b5258; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wa-origem .ver { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--link); }
.wa-origem-chip { display: block; width: fit-content; margin: 4px auto 14px; font-size: 12px; color: var(--muted); background: #fff; border-radius: 6px; padding: 3px 12px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
/* radar */
.icobtn .rd-n { position: absolute; top: 1px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--panel); }
#radarBtn.tem { color: var(--accent); }
@keyframes radarGira { to { transform: rotate(360deg); } }
#radarBtn.tem svg { animation: radarGira 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { #radarBtn.tem svg { animation: none; } }
.radar-modal { width: min(760px, calc(100% - 32px)) !important; padding: 0; z-index: 125; }
.rd-head { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.rd-head h3 { margin: 0; padding: 0; border: 0; font-size: 19px; }
.rd-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.rd-head .x { margin-left: auto; }
.rd-grupo { padding: 12px 20px 4px; }
.rd-grupo h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rd-it { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.rd-it:first-of-type { border-top: 0; }
.rd-it .avatar { width: 34px; height: 34px; font-size: 12px; background: #f3dcc6; color: #9a6a3d; }
.rd-it b { font-size: 14.5px; }
.rd-it .rd-meta { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.rd-it .rd-motivo { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.rd-it .rd-motivo.ia::before { content: "IA"; font-size: 10px; font-weight: 800; color: #fff; background: #7c5cff; border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.rd-it .rd-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.rd-temp { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.rd-temp.quente { background: #fde4e1; color: #b42318; } .rd-temp.morno { background: #fff1dc; color: #9a5b00; } .rd-temp.frio { background: #e3eefb; color: #1a5fa8; }
.rd-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.rd-fup { margin-top: 8px; background: #d9fdd3; border-radius: 8px; border-top-right-radius: 2px; padding: 7px 10px; font-size: 13px; line-height: 1.4; color: #1f2a1f; max-width: 460px; }
.fup-passo { display: grid; grid-template-columns: 150px 120px repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .fup-passo { grid-template-columns: 1fr 1fr; } }
.rd-modo { display: flex; align-items: center; gap: 6px; margin-left: auto; } .rd-modo select { padding: 5px 8px; font-size: 12.5px; width: auto; }
@media (max-width: 640px) { .rd-it { grid-template-columns: 1fr; } .rd-it .avatar { display: none; } .rd-it .rd-acts { flex-direction: row; flex-wrap: wrap; } }
/* MODELOS */
.md-st { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.md-st.APPROVED { background: #EFEEE8; color: #2D2926; } .md-st.PENDING, .md-st.IN_APPEAL { background: #fff3d6; color: #8a5a00; }
.md-st.REJECTED, .md-st.DISABLED { background: #fde4e4; color: #a61b1f; } .md-st.PAUSED { background: #eceff2; color: #5b636b; }
.md-tx { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b5258; }
.md-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.md-ed > div:first-child { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.md-prev { background: #efeae2; border-radius: 8px; padding: 16px 12px; align-self: start; position: sticky; top: 0; }
.md-prev .wa-msg { max-width: 100%; background: #fff; }
.md-prev .md-cab { font-weight: 800; margin-bottom: 4px; } .md-prev .md-rod { color: #8696a0; font-size: 12.5px; margin-top: 6px; }
.md-prev .md-bts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.md-prev .md-bts span { background: #fff; border-radius: 8px; text-align: center; color: #0a7cff; font-weight: 600; font-size: 13.5px; padding: 7px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.md-bt { display: grid; grid-template-columns: 150px 1fr 1fr 34px; gap: 8px; align-items: center; margin-bottom: 6px; }
.md-prev img { display: block; width: calc(100% + 10px); margin: -3px -5px 6px; border-radius: 6px; max-height: 220px; object-fit: cover; }
.md-img-ph { height: 120px; margin: -3px -5px 6px; border-radius: 6px; background: #dfe5e9; display: grid; place-items: center; color: #7d858d; font-size: 12.5px; }
.md-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; background: #eef0f2; }
.wa-prev img { display: block; max-width: 220px; border-radius: 6px; margin-bottom: 6px; }
.md-cont { font-size: 11.5px; color: var(--muted); text-align: right; margin-top: 2px; }
@media (max-width: 900px) { .md-ed { grid-template-columns: 1fr; } .md-prev { position: static; } .md-bt { grid-template-columns: 1fr 1fr; } }
.resp { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #efe7fb; color: var(--purple); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.resp.ninguem { background: #eef0f2; color: #9aa1a8; }
.loja-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #e8f0fb; color: #1a5fa8; margin-left: 6px; vertical-align: 1px; }
.crit { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.crit:last-child { border-bottom: 0; }
.crit input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--green, #2D2926); flex: 0 0 auto; }
.crit small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.mev { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.mev b { font-weight: 600; }
.mev .st { margin-left: auto; font-size: 12px; color: var(--muted); }
.mev .st.ok { color: #2D2926; } .mev .st.fila { color: #7a4700; } .mev .st.err { color: #b42318; }
.mev .acts { display: flex; gap: 6px; width: 100%; justify-content: flex-end; }
.card-i { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.card-i > header { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.card-i > header .btn { margin-left: auto; }
.card-i .bd { padding: 12px 14px; }
.kv { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kv .kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv .kv-sep { height: 1px; background: var(--line); margin: 2px 0; }
.kv div span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.kv div b { font-weight: 600; word-break: break-word; }
.kv div b.vazio2 { color: #b0b6bc; font-weight: 400; }
.ct-line { display: flex; align-items: center; gap: 8px; }
.ct-line a.ico { color: var(--link); }
.ct-line a.ico.w { color: var(--whats); }
.ct-line a.ico.p { color: var(--red); }
.tabs3 { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--line); border-bottom: 0; }
.tabs3 button { padding: 12px 18px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; display: flex; gap: 6px; align-items: center; }
.tabs3 button.on { color: var(--link); border-bottom-color: var(--link); }
.tabs3 .cnt { background: var(--col); color: var(--text); border-radius: 6px; font-size: 11px; padding: 0 7px; }
.tabpane { background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 14px 16px; }
.composer { border: 1px solid var(--line); border-radius: var(--radius); }
.composer textarea { border: 0; width: 100%; min-height: 70px; padding: 10px 12px; resize: vertical; outline: none; }
.composer .bar { display: flex; justify-content: flex-end; gap: 8px; padding: 8px; border-top: 1px solid var(--line); background: #fafbfc; }
.filtros { display: flex; gap: 6px; margin: 14px 0 6px; flex-wrap: wrap; }
.filtros button { border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--panel); }
.filtros button.on { background: var(--link); border-color: var(--link); color: #fff; }
.tipos-tarefa { display: flex; gap: 6px; flex-wrap: wrap; }
.tipos-tarefa button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--panel); }
.tipos-tarefa button.on { border-color: var(--link); color: var(--link); background: #f2f7fc; }
.tipos-tarefa button svg { width: 20px; height: 20px; }

/* FORMULÁRIO DE TAREFA (criar e editar) */
.tf { display: flex; flex-direction: column; gap: 14px; }
.tf .lb { margin-bottom: 6px; }
.tf textarea.field { min-height: 70px; resize: vertical; }
.tf-when { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #fafbfc; display: flex; flex-direction: column; gap: 12px; }
.tf-when .linha { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; }
.tf-when .linha > span { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tf-when .opcoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pick { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: #4b5258; }
.pick:hover { border-color: var(--link); color: var(--link); }
.pick.on { background: var(--link); border-color: var(--link); color: #fff; }
.tf-when input[type=date], .tf-when input[type=time] { width: auto; padding: 5px 9px; font-size: 13px; }
.tf-resumo { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; background: #EFEEE8; color: #2D2926; font-size: 13.5px; }
.tf-resumo.passado { background: #fdecec; color: #8f1d1d; }
.tf-resumo b { font-weight: 800; }
.tf-resumo small { margin-left: auto; color: inherit; opacity: .8; font-weight: 700; white-space: nowrap; }
.tf-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.tdesc { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.editb { color: #8a9299; padding: 4px; }
.card .nm .nm-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; }
.card .nm .nm-sub > span:first-child { min-width: 0; margin-top: 0; }
.card .nm .tent { flex: none; display: inline-block; margin: 0; color: var(--orange); background: #fff1dc; font-weight: 700; font-size: 10.5px; line-height: 17px; padding: 0 6px; border-radius: 6px; }
.fup { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed #c9d2da; border-radius: var(--radius); }
.fup .tx { flex: 1; min-width: 220px; font-size: 13.5px; }
.fup .tx b { display: block; font-size: 14px; }
.fup .tx span { color: var(--muted); }
.fup .dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.fup .dots i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e8; }
.fup .dots i.on { background: var(--orange); }
.editb:hover { color: var(--link); }

/* CONVERSAS (WhatsApp) */
#v-conversas { height: 100vh; display: flex; flex-direction: column; }
.wa-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; border-top: 1px solid var(--line); }
.wa-col { min-height: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }
.wa-busca { padding: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
#waLista { overflow-y: auto; flex: 1; }
.wa-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef0f2; cursor: pointer; }
.wa-item:hover { background: var(--bg); }
.wa-item.on { background: #EFEEE8; }
.wa-it-tx { flex: 1; min-width: 0; }
.wa-it-tx .l1 { display: flex; justify-content: space-between; gap: 6px; }
.wa-it-tx .l1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-it-tx .l1 small { color: var(--muted); font-size: 11.5px; flex: none; }
.wa-it-tx .l2 { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.wa-it-tx .l2 span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-it-tx .l3 { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.wa-it-tx .l3 .tagetapa { font-size: 11px; padding: 1px 6px; }
.wa-nl { font-style: normal; background: var(--whats); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--whats); }
#waChatBox { min-height: 0; display: flex; flex-direction: column; background: #efeae2; }
.wa-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.wa-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-janela { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.wa-janela.aberta, .wa-janela.verde { background: #dcf8e5; color: #2D2926; }
.wa-janela.laranja { background: #fdeccc; color: #9a5b00; }
.wa-janela.vermelho { background: #fde2e2; color: #b42318; animation: piscar 1.4s infinite; }
.wa-janela.fechada { background: #eceff2; color: #5b636b; }
.wa-janela b { font-variant-numeric: tabular-nums; font-weight: 800; }
.wa-cd { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.wa-cd.verde { background: #dcf8e5; color: #2D2926; }
.wa-cd.laranja { background: #fdeccc; color: #9a5b00; }
.wa-cd.vermelho { background: #fde2e2; color: #b42318; }
.wa-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 6%; display: flex; flex-direction: column; gap: 4px; }
.wa-dia { text-align: center; margin: 10px 0 6px; }
.wa-dia span { background: #fff; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.08); text-transform: capitalize; }
.wa-msg { max-width: min(72%, 520px); padding: 6px 9px 4px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.1); font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.wa-msg.in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.wa-msg.out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 2px; }
.wa-msg.reaction { background: transparent; box-shadow: none; color: var(--muted); font-size: 12.5px; }
.wa-msg a { color: var(--link); }
.wa-tag { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; color: #667781; margin-top: 2px; }
.wa-st svg { width: 16px; height: 11px; fill: none; stroke: #8696a0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.wa-st.lido svg { stroke: #53bdeb; }
.wa-st.falhou { color: var(--red); }
.wa-st.falhou svg { width: 14px; height: 14px; stroke: currentColor; }
.wa-img { max-width: 100%; max-height: 320px; border-radius: 6px; display: block; margin-bottom: 4px; }
.wa-sticker { width: 120px; height: 120px; object-fit: contain; display: block; }
.wa-audio { width: 260px; max-width: 100%; display: block; }
.wa-video { max-width: 100%; max-height: 320px; border-radius: 6px; display: block; }
.wa-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,.05); border-radius: 6px; margin-bottom: 4px; text-decoration: none; color: var(--text) !important; }
.wa-comp { background: #f0f2f5; padding: 8px 10px; border-top: 1px solid var(--line); }
.wa-bar { display: flex; align-items: flex-end; gap: 4px; }
.wa-bar textarea { flex: 1; resize: none; border: 0; border-radius: 8px; padding: 10px 12px; outline: none; max-height: 140px; background: #fff; }
.wa-bar .icobtn { flex: none; color: #54656f; cursor: pointer; }
.wa-send { background: var(--whats) !important; color: #fff !important; }
.wa-rec { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 13.5px; }
.wa-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: piscar 1s infinite; }
.wa-rec .btn:first-of-type { margin-left: auto; }
@keyframes piscar { 50% { opacity: .2; } }
/* mudança de etapa */
@keyframes chegou { 0% { transform: scale(.9); opacity: .4; } 45% { transform: scale(1.04); opacity: 1; } 70% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes brilhoVerde { 0%, 35% { box-shadow: 0 0 0 3px rgba(45, 41, 38,.55), 0 6px 18px -6px rgba(45, 41, 38,.5); background-color: #eaf8ef; } 100% { box-shadow: 0 1px 1px rgba(0,0,0,.06); } }
.card.chegou { animation: chegou .6s cubic-bezier(.2,.9,.3,1.2), brilhoVerde 2.2s ease-out; z-index: 2; }
@keyframes colRecebeu { 0% { background-color: rgba(45, 41, 38,.22); } 100% { background-color: transparent; } }
.col.recebeu .col-head { animation: colRecebeu 1.4s ease-out; border-radius: var(--radius); }
@keyframes preencher { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes textoSobe { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.step.atual.entrou { background: linear-gradient(90deg, var(--accent) 50%, #cfe9d9 50%); background-size: 200% 100%; animation: preencher .7s cubic-bezier(.4,0,.2,1) both; }
.step.atual.entrou small { animation: textoSobe .5s .35s both; }
.step.feito::before { content: "✓"; display: inline-block; margin-right: 5px; font-weight: 800; }
@keyframes checkPop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1); } }
.step.feito.pop::before { animation: checkPop .55s .15s cubic-bezier(.2,.9,.3,1.4) both; }
.confete { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 200; pointer-events: none; animation: confeteCai var(--d, 1.8s) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes confeteCai { to { transform: translate(var(--x, 0), 105vh) rotate(var(--r, 540deg)); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .card.chegou, .col.recebeu .col-head, .step.atual.entrou, .step.atual.entrou small, .step.feito.pop::before { animation: none !important; } .step.atual.entrou { background: var(--accent); } }
.wa-prev { white-space: pre-wrap; background: #fff; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-top: 4px; }
.wa-prev:empty { display: none; }
#waLado { overflow-y: auto; overflow-x: hidden; padding: 12px; background: var(--bg); min-width: 0; }
#waLado .kv b { overflow-wrap: anywhere; }
.wa-vazio-chat { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 20px; }
.tab-wa { height: 620px; display: flex; flex-direction: column; margin: -14px -16px; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: #efeae2; }
@media (max-width: 1100px) { .wa-layout { grid-template-columns: 300px 1fr; } #waLado { display: none; } }
@media (max-width: 760px) {
  .wa-layout { grid-template-columns: 1fr; }
  #v-conversas.chat-aberto .wa-col { display: none; }
  #v-conversas:not(.chat-aberto) #waChatBox { display: none; }
  .wa-msgs { padding: 10px; }
}

/* DASHBOARD */
.dash-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.dk { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.dk[data-ir] { cursor: pointer; }
.dk span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dk b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dk.alerta b { color: var(--orange); }
.dl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.dl .seta { font-size: 9px; }
.dl.sobe .seta { color: var(--accent); }
.dl.desce .seta { color: var(--red); }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: start; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; min-width: 0; }
.dcard.s12 { grid-column: span 12; }
.mini-tot { display: flex; gap: 22px; flex-wrap: wrap; }
.mini-tot div { display: flex; flex-direction: column; } .mini-tot b { font-size: 20px; font-weight: 800; } .mini-tot span { font-size: 12px; color: var(--muted); }
.tbl-wrap { overflow-x: auto; }
.tbl-dash { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl-dash th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl-dash td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl-dash td.muted { color: var(--muted); }
.tbl-dash.lojas td:first-child { color: var(--muted); }
.tbl-dash.lojas td.top { color: #2D2926; font-weight: 800; background: #eaf8ef; }
.dcard.s4 { grid-column: span 4; } .dcard.s6 { grid-column: span 6; } .dcard.s8 { grid-column: span 8; }
.dcard > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dcard h3 { font-size: 15.5px; font-weight: 800; }
.dcard header p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dpill { background: #EFEEE8; color: #2D2926; font-size: 12.5px; padding: 4px 10px; border-radius: 6px; }
.sub-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }
.funil { display: flex; flex-direction: column; gap: 6px; }
.fl { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.fl:hover { background: var(--bg); }
.fl.top { background: #f1f9f4; }
.fl-nome { font-weight: 700; } .fl-nome small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.fl-bar { height: 14px; } .fl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.fl-val { text-align: right; } .fl-val b { display: block; font-variant-numeric: tabular-nums; } .fl-val small { color: var(--muted); font-size: 11.5px; }
.fl-val small.parado { color: var(--orange); font-weight: 700; }
.mini4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini4 > div, .mini2 > div { background: var(--bg); border-radius: 6px; padding: 10px 12px; }
.mini4 b, .mini2 b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini4 span, .mini2 span { font-size: 12px; color: var(--muted); }
.mini4 .warn b, .mini2 .warn b { color: var(--orange); }
.mini2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mini2 > div { cursor: pointer; }
.pend { display: flex; flex-direction: column; }
/* o card de conversas acompanha a altura do funil do lado; a lista rola por dentro */
.dcard.conv { align-self: stretch; display: flex; flex-direction: column; }
.dcard.conv .pend { flex: 1 1 auto; min-height: 110px; overflow-y: auto; contain: size; }
.pd { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eef0f2; cursor: pointer; }
.pd:hover { background: var(--bg); }
.pd:last-child { border-bottom: 0; }
.pd-tx { flex: 1; min-width: 0; } .pd-tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-tx small { color: var(--muted); font-size: 12px; }
.wa-cd.fechada { background: #eceff2; color: #5b636b; }
.big-num { text-align: right; } .big-num b { display: block; font-size: 22px; font-weight: 800; } .big-num small { color: var(--muted); font-size: 12px; }
.dh-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.dh-row.top .dh-n { font-weight: 800; }
.dh-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-trk { height: 12px; } .dh-trk i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.dh-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .dh-v small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.leg { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ag14 { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 190px; align-items: end; }
.ag-c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ag-tot { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 16px; }
.ag-stack { width: 70%; max-width: 34px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.ag-stack i { display: block; min-height: 2px; }
.ag-stack i:first-child { border-radius: 4px 4px 0 0; }
.ag-stack i.c { background: var(--accent); } .ag-stack i.g { background: var(--link); }
.ag-c.cheio .ag-tot { color: var(--orange); }
.ag-d { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.25; text-transform: capitalize; }
.ag-d.hoje { color: var(--link); font-weight: 800; }
.nota { font-size: 13px; color: var(--muted); margin-top: 10px; } .nota b { color: var(--text); }
.calor { display: grid; grid-template-columns: 34px repeat(13, 1fr); gap: 3px; align-items: center; }
.calor i { display: block; aspect-ratio: 1; border-radius: 3px; }
.calor .ch { font-size: 10.5px; color: var(--muted); text-align: center; }
.calor .cl { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.calor .cl.top { color: var(--text); font-weight: 800; }
.calor-leg { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 11px; color: var(--muted); }
.calor-leg i { width: 14px; height: 14px; border-radius: 3px; }
.dash-v { height: 160px; }
.dash-ctl { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#dashVisao { margin-right: auto; }
/* PAINEL (estilo Kommo) */
.pn { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; grid-template-areas: "msg msg conv nr fon fon" "msg msg tr esp fon fon" "gan ati per sem tar tar" "usu usu usu usu usu usu"; }
.pk { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk[data-ir], .pk[data-conv] { cursor: pointer; } .pk[data-ir]:hover, .pk[data-conv]:hover { border-color: #c3c9cf; }
.pk > span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pk .pn-n { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk .pn-n.verde { color: var(--accent); } .pk .pn-n.laranja { color: var(--orange); } .pk .pn-n.cinza { color: #5b636b; }
.pk .pn-r { font-size: 14px; font-weight: 700; color: var(--text); }
.pk .pn-d { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.pk .pn-d b { color: var(--accent); font-size: 17px; margin-right: 4px; }
.pn-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 13.5px; margin-top: 12px; }
.pn-bar i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #eef0f2; overflow: hidden; } .pn-bar i em { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pn-bar b { font-variant-numeric: tabular-nums; color: var(--accent); }
.pn-bar > span { display: flex; align-items: center; gap: 6px; min-width: 0; } .pn-bar > span svg { width: 16px; height: 16px; color: var(--whats); }
.pn-fontes { display: flex; gap: 18px; align-items: center; flex: 1; }
.pn-fontes svg { width: 46%; max-width: 210px; flex: none; }
.pn-leg { display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 0; flex: 1; }
.pn-leg div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; } .pn-leg i { width: 10px; height: 10px; border-radius: 50%; }
.pn-leg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-leg b { font-variant-numeric: tabular-nums; }
.pn-usu { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.pn-usu th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.pn-usu td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pn-usu tr:last-child td { border-bottom: 0; }
@media (max-width: 1200px) { .pn { grid-template-columns: 1fr 1fr; grid-template-areas: "msg msg" "conv nr" "tr esp" "fon fon" "gan ati" "per sem" "tar tar" "usu usu"; } }
/* RELATÓRIO */
.rl-graf svg { width: 100%; height: auto; display: block; overflow: visible; }
.rl-graf text { font-size: 11px; fill: var(--muted); font-family: inherit; }
.rl-graf .fx { fill: transparent; } .rl-graf .fx:hover { fill: rgba(26, 140, 216, .06); }
.rl-cols { display: grid; grid-template-columns: 1fr minmax(220px, 300px) 1fr; gap: 28px; align-items: center; }
.rl-lin { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.rl-lin .pc { font-size: 26px; font-weight: 300; text-align: right; font-variant-numeric: tabular-nums; }
.rl-lin .tx { border-left: 3px solid var(--c, var(--line)); padding-left: 10px; min-width: 0; }
.rl-lin .tx b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; font-size: 13.5px; }
.rl-lin .tx small { color: var(--muted); font-size: 12.5px; }
.rl-rosca { position: relative; } .rl-rosca svg { width: 100%; height: auto; display: block; }
.rl-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.rl-centro b { font-size: 50px; font-weight: 300; letter-spacing: -.03em; line-height: 1; } .rl-centro small { color: var(--muted); font-size: 12.5px; margin-top: 6px; } .rl-centro span { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
@media (max-width: 1000px) { .rl-cols { grid-template-columns: 1fr; } .rl-rosca { max-width: 280px; margin: 0 auto; } }
@media (max-width: 1200px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } .dcard.s4, .dcard.s6, .dcard.s8 { grid-column: span 12; } }
@media (max-width: 640px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } .fl { grid-template-columns: 110px 1fr 90px; } .ag14 { gap: 3px; } }

/* TAREFAS: contexto, resultado e modo executar */
.tctx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; font-size: 12px; color: #4b5258; }
.tctx .tagetapa { font-size: 11px; padding: 1px 7px; }
.tdot { font-weight: 700; } .tdot.quente { color: #b42318; } .tdot.morno { color: #9a5b00; } .tdot.frio { color: #135f99; }
.tfup { color: var(--orange); font-weight: 700; }
.tult { color: var(--muted); }
.tacts { display: flex; gap: 2px; }
.tacts .icobtn { width: 32px; height: 32px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.res { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 700; text-align: left; }
.res:hover, .res.on { border-color: var(--link); background: #f2f7fc; }
.res.falou svg { color: var(--accent); } .res.sem_resposta svg { color: var(--orange); } .res.agendou svg { color: var(--purple); }
.res.retornar svg { color: var(--link); } .res.perdeu svg { color: var(--red); }
#foco { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.foco-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.foco-top span { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.foco-prog { flex: 1; height: 8px; background: var(--col); border-radius: 6px; overflow: hidden; }
.foco-prog i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.foco-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(360px, 1.1fr); gap: 14px; padding: 14px 18px; }
.foco-body.sem-chat { grid-template-columns: minmax(340px, 720px); justify-content: center; }
.foco-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.foco-tipo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.foco-tipo.whatsapp svg { color: var(--whats); } .foco-tipo.ligacao svg { color: var(--red); } .foco-tipo.reuniao svg { color: var(--purple); }
.late-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--late-bg); color: #9a5b00; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.late-tag svg { width: 14px; height: 14px; color: inherit !important; }
.hora-tag { background: var(--col); padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--text); }
.foco-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.foco-desc { white-space: pre-wrap; color: #4b5258; background: var(--bg); padding: 10px 12px; border-radius: 6px; }
.foco-lead { display: flex; align-items: center; gap: 12px; }
.foco-lead b { display: block; font-size: 16px; } .foco-lead small { color: var(--muted); }
.foco-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.foco-kv span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.foco-kv b { font-weight: 600; font-size: 13.5px; }
.foco-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 6px; }
.foco-chat { min-height: 0; display: flex; }
.foco-fim { flex: 1; display: grid; place-items: center; text-align: center; }
.foco-fim svg { width: 48px; height: 48px; color: var(--accent); margin: 0 auto 8px; }
.foco-fim h2 { font-size: 26px; } .foco-fim p { color: var(--muted); margin: 6px 0 16px; }
@media (max-width: 900px) { .foco-body { grid-template-columns: 1fr; overflow-y: auto; } .foco-chat { height: 520px; } .foco-kv { grid-template-columns: repeat(2, 1fr); } }

.ad-prev { display: flex; gap: 12px; align-items: flex-start; background: #f2f7fc; border: 1px solid #d5e6f5; border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.ad-prev img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.ad-prev small { display: block; font-size: 11px; font-weight: 800; color: var(--link); text-transform: uppercase; letter-spacing: .04em; }
.ad-prev b { display: block; font-size: 14px; }
.ad-prev p { font-size: 12.5px; color: #4b5258; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-prev a { font-size: 12.5px; color: var(--link); font-weight: 700; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 13.5px; z-index: 95; display: flex; align-items: center; gap: 8px; }
.toast.alerta { background: var(--orange); }

@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, 1fr); } .rel { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  #app { display: block; }
  aside.side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 30px -10px rgba(0,0,0,.3); }
  aside.side.aberto { transform: none; }
  .menu-mob { display: inline-grid; margin-right: 4px; }
  .board { height: auto; min-height: calc(100vh - 140px); scroll-snap-type: x mandatory; }
  .col { flex-basis: 86%; scroll-snap-align: start; max-height: calc(100vh - 150px); }
  .grid2 { grid-template-columns: 1fr; }
  .pagehead h1 { width: 100%; }
  .deal-body { grid-template-columns: 1fr; }
  .deal-acts { margin-left: 0; width: 100%; }
}