/* Ápeiron · tokens e componentes Liquid Glass */

:root {
  --bg-1: #08102B;
  --bg-2: #11245A;
  --bg-3: #0A1638;
  --bg: linear-gradient(140deg, #08102B 0%, #11245A 55%, #0A1638 100%);
  --text: #F4F7FF;
  --text-2: #B9C6E8;
  --text-3: #8A9AC2;
  --accent: #7FB8FF;
  --accent-ink: #7FB8FF;       /* azul de destaque usado como cor de texto */
  --primary: #3B82F6;
  --warm: #FFB36B;
  --success: #4ADE9A;
  --danger: #F87171;
  --violet: #C4B5FD;

  --g1-bg: linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  --g1-border: rgba(255,255,255,.26);
  --g1-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 24px 64px rgba(2,6,24,.45);
  --g2-bg: rgba(255,255,255,.10);
  --g2-border: rgba(255,255,255,.20);
  --g2-shadow: inset 0 1px 0 rgba(255,255,255,.30);
  --g3-bg: rgba(255,255,255,.06);
  --g3-border: rgba(255,255,255,.14);
  --blur: blur(20px) saturate(1.6);
  --blur-forte: blur(40px) saturate(1.6);

  --r-xl: 32px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-pill: 999px;

  --blob-1: rgba(94,160,255,.45);
  --blob-2: rgba(255,150,90,.25);
  --base-solida: rgba(14,28,72,.74);   /* base sob o vidro do drawer, modal e toast */
  --overlay: rgba(2,6,24,.55);
  --linha: rgba(255,255,255,.10);
  --chip: rgba(255,255,255,.10);
  --hover: rgba(255,255,255,.07);
  --menu-bg: #13265C;

  /* Gráficos: passos validados para daltonismo (rosca exige rótulo visível) */
  --viz-serie: #3987e5;
  --viz-destaque: #d95926;
  --viz-aberto: #2563c9;
  --viz-reuniao: #9085e9;
  --viz-proposta: #0e9fb8;
  --viz-ganho: #008300;
  --viz-follow: #c98500;
  --viz-perdido: #d84b4b;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F0F4FA;
  --text: #0B1533;
  --text-2: #3A4766;
  --text-3: #66749A;
  --accent-ink: #1D5FD1;
  --g1-bg: linear-gradient(150deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
  --g1-border: rgba(14,59,168,.10);
  --g1-shadow: inset 0 1px 0 #fff, 0 18px 48px rgba(14,40,110,.12);
  --g2-bg: #FFFFFF;
  --g2-border: rgba(14,59,168,.12);
  --g2-shadow: 0 1px 3px rgba(14,40,110,.08);
  --g3-bg: rgba(14,59,168,.04);
  --g3-border: rgba(14,59,168,.14);
  --blob-1: rgba(94,160,255,.28);
  --blob-2: rgba(255,150,90,.16);
  --base-solida: rgba(255,255,255,.94);
  --overlay: rgba(14,26,66,.32);
  --linha: rgba(14,59,168,.10);
  --chip: rgba(14,59,168,.08);
  --hover: rgba(14,59,168,.06);
  --menu-bg: #FFFFFF;
  --viz-serie: #2a78d6;
  --viz-destaque: #eb6834;
  color-scheme: light;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-3);
  background: var(--bg) fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
* { scrollbar-width: thin; scrollbar-color: var(--chip) transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.lucide { width: 18px; height: 18px; flex: none; }
.num { font-variant-numeric: tabular-nums; }

/* Fundo vivo: as manchas são parte do layout — o vidro precisa de cor atrás */
.blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.blob-1 { width: 720px; height: 720px; top: -260px; right: -180px; background: radial-gradient(circle, var(--blob-1), transparent 70%); }
.blob-2 { width: 760px; height: 760px; bottom: -320px; left: -200px; background: radial-gradient(circle, var(--blob-2), transparent 70%); }
body[data-modulo="conversas"], body[data-modulo="cobrancas"] { --blob-2: rgba(74,222,154,.24); }
body[data-modulo="automacoes"] { --blob-2: rgba(255,150,90,.30); }

/* ---------- Níveis de vidro ---------- */

.glass-1 { background: var(--g1-bg); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.glass-2 { background: var(--g2-bg); border: 1px solid var(--g2-border); box-shadow: var(--g2-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.glass-3 { background: var(--g3-bg); border: 1px solid var(--g3-border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

/* ---------- Esqueleto ---------- */

.app { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.modulo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px 20px 28px; overflow-y: auto; }
.modulo:has(.pipeline) { overflow: hidden; }

/* ---------- Barra lateral ---------- */

.sidebar { margin: 14px 0 14px 14px; border-radius: var(--r-lg); display: flex; flex-direction: column; padding: 18px 12px 14px; overflow-y: auto; min-height: 0; }
:root[data-theme="light"] .sidebar {
  background: #0E3BA8; border-color: #0E3BA8; box-shadow: 0 18px 48px rgba(14,59,168,.28);
  --text: #fff; --text-2: rgba(255,255,255,.86); --text-3: rgba(255,255,255,.64); --accent-ink: #BFDBFF;
  --linha: rgba(255,255,255,.16); --hover: rgba(255,255,255,.10); --chip: rgba(255,255,255,.14);
}
.marca { display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; }
.marca svg { flex: none; }
.marca-nome { font-weight: 800; letter-spacing: -1px; font-size: 22px; line-height: 1; color: var(--text); }
.marca-empresa { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin-top: 4px; white-space: nowrap; }
.sync { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); transition: background .2s, box-shadow .2s; }
.sync[data-s="salvando"] { background: var(--warm); box-shadow: 0 0 8px var(--warm); }
.sync[data-s="offline"] { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

.nav-grupo { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-titulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 6px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; background: none;
  color: var(--text-2); font-weight: 500; text-align: left;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.ativo { background: rgba(127,184,255,.22); border-color: rgba(127,184,255,.55); color: #fff; font-weight: 700; }
.nav-item .rotulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.badge.vermelho { background: var(--danger); color: #2B0707; }
.badge.verde { background: var(--success); color: #05291A; }
.nicho-dot { width: 18px; display: grid; place-items: center; }
.nicho-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.nicho-qtd { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-item.ativo .nicho-qtd { color: #fff; }

.sidebar-rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.equipe { display: flex; align-items: center; padding: 4px 10px 10px 18px; }
.equipe .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-2); }
:root[data-theme="light"] .equipe .avatar { box-shadow: 0 0 0 2px #0E3BA8; }
.tema-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--linha); color: var(--text); }
.tema-btn:hover { background: var(--hover); }

/* ---------- Avatares ---------- */

.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em; background: var(--av, linear-gradient(135deg, #7FB8FF, #3B6BEA)); }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 2px rgba(255,255,255,.35); }

/* ---------- Cabeçalho ---------- */

.topbar { min-height: 72px; flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 24px 8px 28px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.titulo-pagina { min-width: 0; }
.titulo-pagina h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.busca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: var(--r-pill); width: 320px; color: var(--text-3); }
.busca:focus-within { border-color: var(--accent); }
.busca input { background: none; border: 0; outline: 0; color: var(--text); flex: 1; min-width: 0; }
.busca input::placeholder { color: var(--text-3); }
.busca input::-webkit-search-cancel-button { filter: grayscale(1); }
kbd { font: inherit; font-size: 11px; color: var(--text-3); border: 1px solid var(--g3-border); border-radius: 6px; padding: 0 6px; line-height: 18px; }

/* ---------- Botões ---------- */

.btn {
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; white-space: nowrap; color: var(--text); text-decoration: none;
  transition: filter .15s, background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn svg.lucide { width: 17px; height: 17px; }
.btn-primario { background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primario:hover { filter: brightness(1.1); }
.btn-vidro { background: var(--g2-bg); border-color: var(--g2-border); box-shadow: var(--g2-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-vidro:hover { background: var(--hover); border-color: var(--g1-border); }
.btn-perigo { background: none; color: var(--danger); padding: 0 6px; }
.btn-perigo:hover { text-decoration: underline; }
.btn-perigo-cheio { background: var(--danger); color: #2B0707; }
.btn-perigo-cheio:hover { filter: brightness(1.08); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-sm svg.lucide { width: 15px; height: 15px; }
.link { background: none; border: 0; color: var(--accent-ink); font-size: 13px; font-weight: 600; padding: 0 4px; }
.link:hover { text-decoration: underline; }

/* ---------- Pílulas de status ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  color: color-mix(in srgb, var(--c) 40%, #fff);
}
:root[data-theme="light"] .pill { color: color-mix(in srgb, var(--c) 50%, #0B1533); }
.pill svg.lucide { width: 13px; height: 13px; }

/* ---------- Filtros ---------- */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 16px; }
.select {
  height: 36px; padding: 0 34px 0 14px; border-radius: var(--r-pill); appearance: none; -webkit-appearance: none;
  background: var(--g3-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A9AC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--g3-border); color: var(--text); font-size: 13px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.select.ativo, .toggle[aria-pressed="true"] { background-color: rgba(127,184,255,.22); border-color: rgba(127,184,255,.55); }
.select option { background: var(--menu-bg); color: var(--text); }
.toggle { height: 36px; padding: 0 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; background: var(--g3-bg); border: 1px solid var(--g3-border); color: var(--text-2); }
.toggle[aria-pressed="true"] { color: var(--text); }
.toggle svg.lucide { width: 15px; height: 15px; }
.resumo { margin-left: auto; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.resumo strong { color: var(--text); font-weight: 700; }

/* ---------- Pipeline ---------- */

.pipeline { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.board { flex: 1; min-height: 0; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; scroll-snap-type: x proximity; }
.coluna {
  flex: 0 0 288px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-lg);
  background: var(--g3-bg); border: 1px solid var(--g3-border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  scroll-snap-align: start; transition: background .15s, border-color .15s;
}
.coluna.alvo, .sub-etapa.alvo { background: rgba(127,184,255,.10); border-color: rgba(127,184,255,.6); }
.coluna-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.coluna-head h3 { font-size: 14px; font-weight: 700; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="light"] .coluna-head h3 { color: color-mix(in srgb, var(--c) 50%, #0B1533); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.contador { font-size: 12px; font-weight: 700; padding: 0 8px; line-height: 20px; border-radius: var(--r-pill); background: var(--chip); color: var(--text-2); font-variant-numeric: tabular-nums; }
.soma { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coluna-corpo { flex: 1; min-height: 60px; overflow-y: auto; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.coluna-vazia { color: var(--text-3); font-size: 13px; text-align: center; padding: 18px 8px; border: 1px dashed var(--g3-border); border-radius: var(--r-md); }
.coluna-add { margin: 0 10px 10px; height: 36px; flex: none; border-radius: var(--r-pill); border: 1px dashed var(--g2-border); background: none; color: var(--text-3); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.coluna-add:hover { color: var(--text); background: var(--hover); }
.coluna-add svg.lucide { width: 15px; height: 15px; }

.card {
  position: relative; flex: none; padding: 13px 14px 12px; border-radius: var(--r-md);
  background: var(--g2-bg); border: 1px solid var(--g2-border); box-shadow: var(--g2-shadow);
  cursor: grab; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-2px); border-color: var(--g1-border); }
.card.ativo { border: 2px solid var(--accent); box-shadow: 0 0 32px rgba(127,184,255,.55); padding: 12px 13px 11px; }
.card.arrastando { opacity: .4; }
.card-top { display: flex; align-items: baseline; gap: 8px; }
.card h4 { font-size: 14px; font-weight: 700; line-height: 1.3; flex: 1; min-width: 0; }
.card-id { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.card-dono { color: var(--accent-ink); font-size: 13px; font-weight: 500; margin-top: 1px; }
.card-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.card-tags:empty { display: none; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.tempo { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.tempo svg.lucide { width: 13px; height: 13px; }
.tempo.atencao { color: var(--warm); font-weight: 600; }
.tempo.critico { color: var(--danger); font-weight: 700; }
.nao-lidas { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-weight: 700; }
:root[data-theme="light"] .nao-lidas { color: #13854F; }
.nao-lidas svg.lucide { width: 13px; height: 13px; }
.wa-btn { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(74,222,154,.5); background: rgba(74,222,154,.16); color: var(--success); }
:root[data-theme="light"] .wa-btn { color: #13854F; }
.wa-btn:hover { background: rgba(74,222,154,.28); }
.wa-btn svg.lucide { width: 15px; height: 15px; }

/* Perdidos */
.perdidos-fechado {
  flex: 0 0 64px; border-radius: var(--r-lg); background: rgba(248,113,113,.08); border: 1px dashed rgba(248,113,113,.5);
  color: var(--danger); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0;
}
.perdidos-fechado:hover, .perdidos-fechado.alvo { background: rgba(248,113,113,.16); }
.perdidos-fechado .vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; letter-spacing: .04em; }
.perdidos-fechado .contador { background: rgba(248,113,113,.22); color: inherit; }
.coluna.perdidos { flex-basis: 300px; --c: #F87171; }
.coluna.perdidos .coluna-head button { margin-left: auto; }
.sub-etapa { border-radius: var(--r-md); border: 1px solid transparent; padding: 4px 4px 8px; display: flex; flex-direction: column; gap: 8px; }
.sub-etapa > h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 6px 0; display: flex; gap: 6px; align-items: center; }
.icone-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--linha); color: var(--text-2); }
.icone-btn:hover { color: var(--text); background: var(--hover); }
.icone-btn svg.lucide { width: 15px; height: 15px; }

/* ---------- Drawer do lead ---------- */

.overlay { position: fixed; inset: 0; z-index: 40; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .25s; }
.overlay.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: 480px; max-width: calc(100vw - 24px); z-index: 50;
  border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column;
  background: var(--g1-bg), var(--base-solida); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow);
  backdrop-filter: var(--blur-forte); -webkit-backdrop-filter: var(--blur-forte);
  transform: translateX(calc(100% + 24px)); transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.drawer.on { transform: none; }
.drawer-head { position: relative; padding: 20px 22px 18px; color: #fff; background: linear-gradient(135deg, #3B6BEA, #2A4FC2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); flex: none; }
.drawer-head .eyebrow { color: rgba(255,255,255,.75); }
.dh-linha { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.dh-empresa { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px; }
.dh-dono { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 2px; }
.dh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.so-texto { padding: 0 10px; }
.drawer-head .pill { --c: #fff; background: rgba(255,255,255,.95); color: #1E3A8A; border-color: #fff; }
.drawer-head .pill .dot { box-shadow: none; }
.fechar { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.fechar:hover { background: rgba(255,255,255,.26); }

.drawer-corpo { flex: 1; overflow-y: auto; padding: 0 22px 8px; }
.secao { padding: 18px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 8px; }
.secao:last-child { border-bottom: 0; }
.secao-tit { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.secao-tit h5 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.secao-tit .sub { margin-left: auto; color: var(--text-3); font-size: 12px; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dica { color: var(--text-3); font-size: 12px; margin-top: 6px; }
.vazio-txt { color: var(--text-3); font-size: 13px; }

.msgs { display: flex; flex-direction: column; gap: 8px; }
.balao { max-width: 86%; padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.balao.in { align-self: flex-start; background: var(--g2-bg); border: 1px solid var(--g2-border); box-shadow: var(--g2-shadow); border-bottom-left-radius: 6px; }
.balao.out { align-self: flex-end; background: linear-gradient(135deg, #3B6BEA, #2A4FC2); color: #fff; border-bottom-right-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.balao small { display: block; font-size: 11px; opacity: .72; margin-top: 4px; font-variant-numeric: tabular-nums; }
.balao.out small { text-align: right; }

.etapas-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.etapa-opcao { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--g3-border); background: var(--g3-bg); color: var(--text-2); font-size: 13px; text-align: left; min-width: 0; }
.etapa-opcao span.nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa-opcao:hover { background: var(--hover); color: var(--text); }
.etapa-opcao.atual { border: 2px solid var(--accent); box-shadow: 0 0 20px rgba(127,184,255,.4); color: var(--text); font-weight: 700; padding: 7px 10px; }
.etapa-opcao svg.lucide { width: 15px; height: 15px; color: var(--accent-ink); }

.wa-num { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.wa-num svg.lucide { color: var(--success); }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.full { grid-column: 1 / -1; }
.campo > span { font-size: 12px; color: var(--text-3); font-weight: 500; }
.input {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 14px; outline: 0;
  background: var(--g3-bg); border: 1px solid var(--g3-border); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-3); }
textarea.input { height: auto; min-height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; background: var(--g3-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A9AC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select.input option { background: var(--menu-bg); color: var(--text); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(127,184,255,.22); }
.input.invalido { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,.2); }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-op { height: 32px; padding: 0 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: var(--g3-bg); border: 1px solid var(--g3-border); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.seg-op::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.seg-op[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: color-mix(in srgb, var(--c) 70%, transparent); color: var(--text); }
.linha-alerta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.linha-alerta .input { width: auto; flex: 1; min-width: 190px; }

.parcelas { display: flex; flex-direction: column; gap: 6px; }
.parcela { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); font-size: 13px; font-variant-numeric: tabular-nums; }
.parcela .p-num { font-weight: 700; }
.parcela .p-info { color: var(--text-3); }
.plano-cob { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.plano-tit { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.plano-tit small { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.parcela-btn { width: 100%; text-align: left; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; transition: background .15s, border-color .15s; }
.parcela-btn:hover { background: var(--hover); border-color: var(--g2-border); }
.parcela-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-acoes .espaco { flex: 1; }
.modal .cp-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.comentarios { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.comentario { display: flex; gap: 10px; }
.comentario strong { font-size: 13px; }
.comentario small { color: var(--text-3); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.comentario p { color: var(--text-2); margin-top: 1px; }

.hist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.hist li { display: flex; gap: 12px; padding: 7px 0; position: relative; }
.hist li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 36px; bottom: -7px; width: 1px; background: var(--linha); }
.hist .ic { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--g2-bg); border: 1px solid var(--g2-border); color: var(--text-2); }
.hist .ic svg.lucide { width: 14px; height: 14px; }
.hist .ic.automacao { color: var(--warm); }
.hist .ic.etapa { color: var(--accent-ink); }
.hist-txt { flex: 1; min-width: 0; font-size: 13px; }
.hist-txt small { display: block; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.hist-txt em { font-style: normal; color: var(--text-3); }
.meta-alvo { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 1px; }
.meta-alvo svg.lucide { width: 13px; height: 13px; }

.drawer-rodape { flex: none; display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--linha); background: var(--chip); }
.drawer-rodape .direita { margin-left: auto; display: flex; gap: 8px; }

/* ---------- Modal ---------- */

.modal-wrap { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 16px; background: var(--overlay); }
.modal-wrap.on { display: grid; }
.modal {
  width: min(460px, 100%); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px;
  /* modais carregam formulários: base opaca para o conteúdo de trás não competir com a leitura */
  background: var(--g1-bg), var(--menu-bg); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow);
  backdrop-filter: var(--blur-forte); -webkit-backdrop-filter: var(--blur-forte); animation: sobe .2s ease-out;
}
.modal h3 { font-size: 18px; font-weight: 700; }
.modal p { color: var(--text-2); }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------- Toast ---------- */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 400px; padding: 12px 16px; border-radius: var(--r-md); display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  background: var(--g1-bg), var(--base-solida); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: sobe .25s ease-out; transition: opacity .3s, transform .3s;
}
.toast.sai { opacity: 0; transform: translateY(8px); }
.toast svg.lucide { margin-top: 1px; color: var(--success); }
.toast.erro svg.lucide { color: var(--danger); }
.toast.info svg.lucide { color: var(--accent-ink); }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Estados vazios e Alertas ---------- */

.vazio { margin: auto; max-width: 440px; text-align: center; padding: 40px 32px; border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vazio .ic-grande { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--g2-bg); border: 1px solid var(--g2-border); box-shadow: var(--g2-shadow); color: var(--accent-ink); }
.vazio .ic-grande svg.lucide { width: 26px; height: 26px; }
.vazio h2 { font-size: 20px; font-weight: 700; }
.vazio p { color: var(--text-2); }

.alertas { display: flex; flex-direction: column; gap: 10px; max-width: 920px; padding-bottom: 8px; }
.faixa-resumo { padding: 13px 18px; border-radius: var(--r-md); color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.faixa-resumo strong { color: var(--text); }
.alerta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px 14px 22px; border-radius: var(--r-md); }
.alerta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.alerta-txt { flex: 1; min-width: 200px; }
.alerta-txt small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }

/* ---------- Menu inferior (celular) ---------- */

.bottom-nav { display: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 1023px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar { padding: 16px 8px 12px; align-items: stretch; }
  .marca { padding: 0 0 12px; justify-content: center; position: relative; }
  .marca-txt, .nav-titulo, .nav-item .rotulo, .nicho-qtd, .equipe .avatar { display: none; }
  .nav-item { justify-content: center; padding: 9px 0; }
  .nav-item .badge { position: absolute; top: 1px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .nav-grupo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
  .equipe { padding: 0 0 6px; justify-content: center; }
  .tema-btn { margin: 0; }
  .busca { width: 240px; }
}

@media (max-width: 719px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar { flex-wrap: wrap; padding: 12px 16px 6px; gap: 10px; }
  .titulo-pagina h1 { font-size: 24px; }
  .topbar-acoes { margin-left: 0; width: 100%; }
  .busca { width: auto; flex: 1; }
  .busca kbd, .topbar .btn .rotulo { display: none; }
  .topbar .btn { padding: 0 12px; }
  .modulo { padding: 0 16px 92px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 14px; }
  .filtros > * { flex: none; }
  .resumo { display: none; }
  .coluna { flex-basis: min(84vw, 320px); }
  .drawer { top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; }
  .campos, .etapas-lista { grid-template-columns: 1fr; }
  .drawer-corpo { padding: 0 16px 8px; }
  .drawer-head, .drawer-rodape { padding-left: 16px; padding-right: 16px; }
  .toasts { left: 16px; right: 16px; bottom: 92px; align-items: stretch; }
  .toast { max-width: none; }
  .bottom-nav {
    display: flex; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; height: 64px; border-radius: var(--r-pill);
    justify-content: space-around; align-items: center; padding: 0 6px;
  }
  .bn-item { position: relative; flex: 1; height: 52px; border-radius: var(--r-pill); border: 0; background: none; color: var(--text-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 600; }
  .bn-item.ativo { color: var(--text); background: rgba(127,184,255,.22); }
  .bn-item .badge { position: absolute; top: 3px; left: 54%; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
}

/* ---------- Conversas ---------- */

.modulo:has(.conversas) { overflow: hidden; }
.conversas { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; position: relative; }
.conversas.ctx-on { grid-template-columns: 320px minmax(0, 1fr) 300px; }
.conversas:not(.ctx-on) .ctx { display: none; }
.conv-lista, .chat, .ctx { border-radius: var(--r-lg); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.conv-topo { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.conv-topo .busca { width: 100%; height: 38px; }
.seg-op.sem-ponto::before { display: none; }
.conv-topo .seg-op { --c: #7FB8FF; flex: 1; justify-content: center; }
.conv-itens { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.conv-vazio { padding: 16px 8px; text-align: center; }
.conv-item { width: 100%; display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid transparent; background: none; text-align: left; color: var(--text); }
.conv-item:hover { background: var(--hover); }
.conv-item.ativo { background: rgba(127,184,255,.18); border-color: rgba(127,184,255,.5); }
.conv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conv-linha strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.conv-linha time { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.conv-item.nao-lida time { color: var(--success); font-weight: 700; }
.conv-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.conv-prev em { color: var(--success); font-style: normal; }
.conv-item.nao-lida .conv-prev { color: var(--text-2); font-weight: 600; }

.chat .vazio { margin: auto; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); flex: none; }
.chat-quem { min-width: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 12px; }
.chat-quem:hover { background: var(--hover); }
.chat-quem:hover .nome { text-decoration: underline; text-underline-offset: 3px; }
.chat-quem:focus-visible { outline: 2px solid #7FB8FF; outline-offset: 2px; }
.chat-quem .nome { display: block; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-quem small { color: var(--text-3); display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online { color: var(--success); font-weight: 600; }
.chat-head .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.chip-claro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--r-pill); background: var(--chip); border: 1px solid var(--linha); font-size: 12px; font-weight: 600; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.sep-data { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 3px 12px; border-radius: var(--r-pill); background: var(--chip); margin: 8px 0 4px; }
.balao.midia { padding: 8px; }
.balao.midia small { padding: 0 5px; }
.balao img { display: block; max-width: 240px; max-height: 240px; border-radius: 12px; }
.anexo { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.anexo strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.anexo small { display: block; opacity: .75; margin: 0; }
.anexo-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex: none; }
.audio { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 4px 6px; }
.audio-play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); flex: none; }
.audio-play svg.lucide { width: 15px; height: 15px; }
.onda { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1; }
.onda span { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .75; }
.st { display: inline-flex; vertical-align: -3px; margin-left: 2px; }
.st svg.lucide { width: 14px; height: 14px; }
.st.lida { color: #8FE3FF; opacity: 1; }
.digitando { display: flex; gap: 4px; padding: 13px 16px; }
.digitando span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: pula 1s infinite; }
.digitando span:nth-child(2) { animation-delay: .15s; }
.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-barra { position: relative; flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.chat-barra textarea.input { flex: 1; height: 42px; min-height: 42px; max-height: 140px; resize: none; border-radius: 21px; padding: 10px 16px; }
.icone-btn.lg { width: 42px; height: 42px; flex: none; cursor: pointer; }
.icone-btn.lg svg.lucide { width: 18px; height: 18px; }
.icone-btn.on { color: var(--text); background: rgba(127,184,255,.22); border-color: rgba(127,184,255,.55); }
.btn-enviar { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-enviar:hover { filter: brightness(1.1); }
.prontas {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); max-height: 340px; overflow-y: auto; z-index: 5;
  border-radius: var(--r-md); padding: 12px 8px 8px; animation: sobe .18s ease-out;
  /* dentro de um painel de vidro o blur não se repete, então a base é opaca */
  background: var(--g1-bg), var(--menu-bg); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow);
}
.prontas .secao-tit { padding: 0 8px; margin-bottom: 6px; }
.pronta { width: 100%; text-align: left; padding: 9px 10px; border-radius: 12px; border: 0; background: none; color: var(--text); display: block; }
.pronta:hover, .pronta:focus-visible { background: var(--hover); }
.pronta strong { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pronta .pill { height: 20px; font-size: 11px; }
.pronta small { display: block; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* Seletor de emojis: mesma base opaca do painel de mensagens prontas */
.emojis {
  position: absolute; left: 14px; bottom: calc(100% + 8px); width: min(372px, calc(100% - 28px)); z-index: 5;
  border-radius: var(--r-md); padding: 8px; animation: sobe .18s ease-out;
  background: var(--g1-bg), var(--menu-bg); border: 1px solid var(--g1-border); box-shadow: var(--g1-shadow);
}
.emoji-cats { display: flex; align-items: center; gap: 2px; padding: 0 2px 6px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.emoji-cat { width: 34px; height: 34px; border-radius: 10px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.emoji-cat svg.lucide { width: 17px; height: 17px; }
.emoji-cat:hover { background: var(--hover); color: var(--text); }
.emoji-cat[aria-selected="true"] { background: rgba(127,184,255,.2); color: var(--text); }
.emoji-dica { margin-left: auto; padding-right: 6px; font-size: 12px; color: var(--text-3); }
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 232px; overflow-y: auto; }
.emoji { aspect-ratio: 1; min-width: 36px; border: 0; border-radius: 10px; background: none; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.emoji:hover, .emoji:focus-visible { background: var(--hover); }

/* Mídia no balão: foto, vídeo, legenda e áudio tocável */
.balao video { display: block; max-width: 260px; max-height: 300px; border-radius: 12px; background: #000; }
.balao .legenda { margin: 6px 5px 0; }
button.audio-play { border: 0; color: inherit; cursor: pointer; }
button.audio-play:disabled { cursor: default; opacity: .7; }
button.audio-play:not(:disabled):hover { background: rgba(255,255,255,.3); }
.onda span.tocado { opacity: 1; box-shadow: 0 0 0 .5px currentColor; }
.onda span:not(.tocado) { opacity: .5; }
.midia-previa { display: grid; place-items: center; border-radius: var(--r-md); background: rgba(0,0,0,.25); padding: 10px; margin: 4px 0 2px; }
.midia-previa img, .midia-previa video { max-width: 100%; max-height: 46dvh; border-radius: 10px; display: block; }

/* Sistema: avisos do chat, mídia sob demanda, falhas e fotos de perfil */
.chat-aviso { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--linha); color: var(--text-2); font-size: 13.5px; }
.chat-aviso svg.lucide { width: 18px; height: 18px; flex: none; }
.anexo-btn { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.anexo-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.anexo a { color: inherit; text-decoration: underline; }
.balao.falhou { outline: 1.5px solid rgba(248,113,113,.7); }
.balao.midia-falhou img, .balao.midia-falhou audio { display: none; }
.midia-aviso { display: flex !important; align-items: center; gap: 6px; opacity: .85; }
.midia-aviso svg.lucide { width: 13px; height: 13px; }
.st.erro { color: #FCA5A5; }
.st.enviando svg.lucide { opacity: .7; }
.conv-antigas { display: block; margin: 0 auto 10px; }
.avatar.com-foto { background: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Equipe: aprovação de cadastro e link de convite */
.pendentes { display: flex; flex-direction: column; gap: 10px; }
.pendente { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.pendente-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pendente-txt small { color: var(--text-3); }
.pendente .perfil-sel { width: auto; min-width: 150px; }
.link-convite { overflow-wrap: anywhere; font-size: 12.5px; }
.cfg-aba .badge { margin-left: auto; }
.cfg-tab tr.inativo td { opacity: .55; }

.gravando { flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 21px; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.45); color: var(--danger); font-weight: 600; }
.gravando small { margin-left: auto; color: var(--text-3); font-weight: 500; font-size: 12px; }
.gravando .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .25; } }

.ctx { overflow-y: auto; padding: 18px; }
.ctx-bloco { padding: 14px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.ctx-bloco:first-child { padding-top: 0; }
.ctx-bloco:last-child { border-bottom: 0; }
.ctx-bloco .secao-tit { margin-bottom: 0; }
.ctx-bloco .secao-tit .btn-ctx { margin-left: auto; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.dl dt { color: var(--text-3); }
.dl dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.prox { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,179,107,.12); border: 1px solid rgba(255,179,107,.45); font-size: 13px; }
.prox svg.lucide { color: var(--warm); margin-top: 1px; }
.prox small { display: block; color: var(--text-3); font-variant-numeric: tabular-nums; }
.btn.largo { width: 100%; }
.simulacao { border: 1px dashed var(--g2-border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.simulacao .secao-tit { margin-bottom: 2px; }
.simulacao .btn { justify-content: flex-start; }
.btn-voltar { display: none; }

@media (max-width: 1399px) {
  .conversas, .conversas.ctx-on { grid-template-columns: 300px minmax(0, 1fr); }
  .ctx {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 100%); z-index: 6;
    background: var(--g1-bg), var(--base-solida); backdrop-filter: var(--blur-forte); -webkit-backdrop-filter: var(--blur-forte);
    opacity: 0; transform: translateX(16px); pointer-events: none; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  }
  .conversas.ctx-on .ctx { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .btn-ctx { display: grid; }
}
@media (max-width: 1023px) {
  .conversas, .conversas.ctx-on { grid-template-columns: 260px minmax(0, 1fr); }
  .chat-head .chip-claro, .chat-head .pill { display: none; }
}
@media (max-width: 719px) {
  .conversas, .conversas.ctx-on { grid-template-columns: minmax(0, 1fr); }
  .conversas .chat { display: none; }
  .conversas.ver-chat .conv-lista { display: none; }
  .conversas.ver-chat .chat { display: flex; }
  .btn-voltar { display: grid; }
  .chat-msgs { padding: 12px; }
  .chat-barra { padding: 10px; gap: 6px; }
  .icone-btn.lg, .btn-enviar { width: 38px; height: 38px; }
  .chat-barra textarea.input { height: 38px; min-height: 38px; padding: 8px 14px; }
  /* Como no WhatsApp: sem texto, o microfone ocupa o lugar do enviar */
  .chat-barra:not(.tem-texto) [data-c="enviar"], .chat-barra.tem-texto [data-c="audio"] { display: none; }
  .emojis { left: 10px; width: calc(100% - 20px); }
  .emoji-grade { grid-template-columns: repeat(7, 1fr); }
  .gravando { padding: 0 12px; gap: 8px; }
  .gravando small { display: none; }
}

/* ---------- Cobranças ---------- */

.cobrancas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 8px; }
.cobrancas.com-painel { grid-template-columns: minmax(0, 1fr) 390px; }
.cob-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cobrancas.com-painel .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-rot { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.kpi-rot svg.lucide { color: var(--c); width: 16px; height: 16px; }
.kpi-valor { font-size: 32px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi small { color: var(--text-3); font-size: 12px; }
.regua { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); }
.regua-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,179,107,.16); border: 1px solid rgba(255,179,107,.45); color: var(--warm); flex: none; }
.regua-txt { flex: 1; min-width: 240px; }
.regua-txt small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.btn:disabled { opacity: .6; cursor: progress; }
.abas { display: flex; gap: 6px; flex-wrap: wrap; }
.aba { height: 36px; padding: 0 8px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--g3-border); background: var(--g3-bg); color: var(--text-2); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.aba[aria-selected="true"] { background: rgba(127,184,255,.22); border-color: rgba(127,184,255,.55); color: var(--text); }
.tabela-wrap { border-radius: var(--r-lg); padding: 4px 10px 8px; overflow-x: auto; }
.tabela { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; padding: 8px 12px 0; white-space: nowrap; }
.tabela th.direita { text-align: right; }
.tabela td { padding: 9px 12px; background: var(--g3-bg); border-top: 1px solid var(--g3-border); border-bottom: 1px solid var(--g3-border); vertical-align: middle; white-space: nowrap; }
.tabela td:first-child { border-left: 1px solid var(--g3-border); border-radius: 14px 0 0 14px; white-space: normal; }
.tabela td:last-child { border-right: 1px solid var(--g3-border); border-radius: 0 14px 14px 0; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--hover); }
.tabela tr.sel td { background: rgba(127,184,255,.14); border-color: rgba(127,184,255,.6); }
.cli strong { display: block; }
.cli small { color: var(--text-3); }
.tl-mini { display: flex; flex-direction: column; font-weight: 600; }
.tl-mini small { color: var(--text-3); font-weight: 400; }
.acoes-tab { display: flex; gap: 6px; justify-content: flex-end; }
.icone-btn.verde { color: var(--success); border-color: rgba(74,222,154,.5); background: rgba(74,222,154,.14); }
:root[data-theme="light"] .icone-btn.verde { color: #13854F; }
.icone-btn.verde:hover { background: rgba(74,222,154,.26); }

.cob-painel, .painel-lado { position: sticky; top: 0; border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100dvh - 116px); overflow: hidden; }
.cp-head { position: relative; padding: 18px 18px 14px; border-bottom: 1px solid var(--linha); flex: none; }
.cp-head h3 { font-size: 18px; font-weight: 700; margin: 2px 40px 8px 0; }
.cp-fechar { position: absolute; top: 14px; right: 14px; }
.cp-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-valor { font-size: 28px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cp-sub { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 4px; }
.cp-corpo { flex: 1; overflow-y: auto; padding: 0 18px; }
.cp-corpo .balao { max-width: 100%; }
.btn-verde { width: 100%; background: #22A06B; color: #fff; box-shadow: 0 8px 24px rgba(34,160,107,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-verde:hover { filter: brightness(1.08); }
.tl-ic { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--g2-border); background: var(--g2-bg); color: var(--text-3); }
.tl-ic svg.lucide { width: 14px; height: 14px; }
.tl-ic.ok { color: var(--success); border-color: rgba(74,222,154,.5); background: rgba(74,222,154,.14); }
.tl-ic.hoje { color: var(--warm); border-color: rgba(255,179,107,.6); background: rgba(255,179,107,.16); }
.tl-ic.perdido { color: var(--danger); border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.12); }
.timeline strong { font-size: 13px; }
.cp-rodape { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 18px; border-top: 1px solid var(--linha); background: var(--chip); }
.cp-rodape .direita { margin-left: auto; display: flex; gap: 8px; }

.modal.largo { width: min(580px, 100%); }
.modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.previa { max-height: 190px; overflow-y: auto; margin-top: 8px; }
.previa .parcela { grid-template-columns: 70px 1fr auto; padding: 7px 12px; }

@media (max-width: 1279px) {
  .cobrancas.com-painel, .automacoes.com-painel { grid-template-columns: minmax(0, 1fr); }
  .cob-painel, .painel-lado {
    position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); max-height: none; z-index: 45;
    background: var(--g1-bg), var(--base-solida); backdrop-filter: var(--blur-forte); -webkit-backdrop-filter: var(--blur-forte); animation: sobe .2s ease-out;
  }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .cob-painel, .painel-lado { top: 0; right: 0; bottom: 84px; width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); }   /* acima do menu inferior */
  .kpi-valor { font-size: 24px; }
  .kpi { padding: 14px; }
}

/* ---------- Dashboard ---------- */

.dash { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.dash .filtros { padding-bottom: 0; }
.data-filtro { width: auto; height: 36px; border-radius: var(--r-pill); font-size: 13px; }
.kpis.k8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi .var { margin-top: 6px; }
.var { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.var svg.lucide { width: 14px; height: 14px; }
.var.bom { color: var(--success); }
.var.ruim { color: var(--danger); }
.var.neutra { color: var(--text-3); font-weight: 500; }
:root[data-theme="light"] .var.bom { color: #13854F; }
:root[data-theme="light"] .var.ruim { color: #C42B2B; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.viz-card { border-radius: var(--r-lg); padding: 18px 20px 20px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.viz-card.largo { grid-column: 1 / -1; }
.viz-head { display: flex; align-items: flex-start; gap: 12px; }
.viz-head > div { flex: 1; min-width: 0; }
.viz-head h3 { font-size: 16px; font-weight: 700; }
.viz-head small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-svg .grade { stroke: var(--linha); stroke-width: 1; }
.viz-svg .eixo, .rosca .eixo { fill: var(--text-3); font-size: 11px; font-family: inherit; }
.viz-svg .rotulo-valor { fill: var(--text); font-size: 12px; font-weight: 700; font-family: inherit; }
.viz-svg .alvo { fill: transparent; }
.viz-svg .barra { fill: var(--viz-serie); transition: opacity .15s; }
.viz-svg .barra-g.atual .barra { fill: var(--viz-destaque); }
.viz-svg .barra-g:hover .barra, .viz-svg .barra-g:focus .barra { opacity: .8; }
.viz-svg .barra-g:focus { outline: none; }
.viz-svg .barra-g:focus-visible .alvo { fill: var(--hover); }
.viz-dica {
  position: fixed; z-index: 60; pointer-events: none; max-width: 260px; padding: 7px 11px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  background: var(--menu-bg); border: 1px solid var(--g1-border); box-shadow: 0 10px 30px rgba(2,6,24,.35);
}

.funil { display: flex; flex-direction: column; gap: 8px; }
.funil-linha { display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 12px; }
.funil-barra {
  justify-self: center; min-width: min(190px, 100%); min-height: 48px; padding: 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(150deg, rgba(127,184,255,.42), rgba(127,184,255,.16)); border: 1px solid rgba(127,184,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgba(2,6,24,.25); transition: width .4s ease;
}
:root[data-theme="light"] .funil-barra { background: linear-gradient(150deg, rgba(42,120,214,.22), rgba(42,120,214,.08)); border-color: rgba(42,120,214,.45); }
.funil-nome { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil-qtd { font-size: 20px; font-weight: 800; }
.funil-conv { font-size: 12.5px; color: var(--text-3); }
.funil-loop {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin-right: 124px;
  border: 2px dashed rgba(255,179,107,.75); background: rgba(255,179,107,.10);
}
.funil-loop svg.lucide { color: var(--warm); }
:root[data-theme="light"] .funil-loop svg.lucide { color: #B45309; }
.funil-loop small { display: block; color: var(--text-2); }

.hbarras { display: flex; flex-direction: column; gap: 10px; }
.hbarra { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.hb-nome { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-trilho { height: 14px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.hb-valor { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-serie); }
.hbarra:hover .hb-valor { opacity: .8; }
.hb-pct { text-align: right; font-weight: 700; }

.rosca-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rosca { width: 180px; height: 180px; flex: none; }
.rosca-vidro { fill: none; stroke: rgba(255,255,255,.06); }
.rosca .fatia { transition: opacity .15s; }
.rosca .fatia:hover, .rosca .fatia:focus { opacity: .8; outline: none; }
.rosca-total { fill: var(--text); font-size: 30px; font-weight: 800; font-family: inherit; }
.legenda { list-style: none; padding: 0; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.legenda li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; font-size: 13px; }
.sw { width: 12px; height: 12px; border-radius: 4px; }
.lg-nome { color: var(--text-2); }
.lg-n { font-weight: 700; }
.lg-p { text-align: right; color: var(--text-3); }

.sdr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sdr-card { border-radius: var(--r-md); padding: 14px 16px; }
.sdr-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sdr-topo strong { flex: 1; }
.sdr-conv { text-align: right; font-size: 20px; font-weight: 800; line-height: 1.1; }
.sdr-conv small { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.sdr-dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 0; font-size: 13px; }
.sdr-dl dt { color: var(--text-3); }
.sdr-dl dd { margin: 0; text-align: right; font-weight: 700; }

.reu-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reu-filtros .seg-op[data-desfecho=""]::before { display: none; }
.taxa { margin-left: auto; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); }
.taxa strong { font-size: 20px; color: var(--text); }
.taxa small { color: var(--text-3); }
.reu-wrap { padding: 0; max-height: 420px; overflow: auto; background: none; }
.reu-wrap .tabela { min-width: 760px; }

@media (max-width: 1279px) {
  .kpis.k8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .dash .filtros { margin: 0 -16px; }
  .funil-linha { grid-template-columns: 1fr; gap: 2px; }
  .funil-conv { text-align: center; }
  .funil-loop { margin-right: 0; }
  .taxa { margin-left: 0; }
  .rosca-wrap { justify-content: center; }
}

/* ---------- Automações ---------- */

.automacoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 8px; }
.automacoes.com-painel { grid-template-columns: minmax(0, 1fr) 460px; }
.seguranca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-radius: var(--r-md); font-size: 12.5px; color: var(--text-2); }
.seguranca span { display: inline-flex; align-items: center; gap: 6px; }
.seguranca svg.lucide { width: 15px; height: 15px; color: var(--warm); }
:root[data-theme="light"] .seguranca svg.lucide { color: #B45309; }
.seguranca .seg-tit { font-weight: 700; color: var(--text); }

.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.auto-card { border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .15s, border-color .15s, opacity .15s; }
.auto-card:hover { transform: translateY(-2px); }
.auto-card.ativo { border: 2px solid var(--accent); box-shadow: 0 0 32px rgba(127,184,255,.45); padding: 15px 17px; }
.auto-card.desligada > :not(.ac-topo) { opacity: .55; }
.auto-card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.auto-card .pill.gatilho { align-self: flex-start; }
.ac-topo { display: flex; align-items: center; justify-content: space-between; }
.ac-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
:root[data-theme="light"] .ac-ic { color: color-mix(in srgb, var(--c) 55%, #0B1533); }
.ac-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ac-passos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ac-passos li { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 8px; color: var(--text-2); }
.ac-passos li svg.lucide { width: 15px; height: 15px; color: var(--text-3); }
.ac-passos small { color: var(--text-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-passos li.mais { display: block; color: var(--text-3); padding-left: 24px; }
.ac-rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.ac-rodape strong { color: var(--text); font-size: 15px; }

.switch { position: relative; width: 42px; height: 24px; flex: none; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--g2-border); background: var(--chip); transition: background .2s, border-color .2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform .2s, background .2s; }
.switch[aria-checked="true"] { background: rgba(74,222,154,.28); border-color: rgba(74,222,154,.7); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--success); }
:root[data-theme="light"] .switch[aria-checked="true"]::after { background: #13854F; }

.auto-painel .cp-head { display: flex; flex-direction: column; gap: 8px; }
.titulo-input { font-size: 17px; font-weight: 700; height: 42px; margin-right: 40px; width: auto; }
.conds { display: flex; flex-direction: column; gap: 8px; }
.cond { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cond-op { color: var(--text-3); font-size: 13px; }
.seq { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.passo { display: flex; flex-direction: column; gap: 6px; }
.espera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 2px 14px; margin-left: 14px; border-left: 2px dashed var(--g2-border); font-size: 12.5px; color: var(--text-3); }
.espera svg.lucide { width: 15px; height: 15px; }
.espera .input { height: 32px; width: auto; padding: 0 10px; font-size: 12.5px; border-radius: 10px; }
.espera input.input { width: 62px; }
.espera select.input { padding-right: 28px; background-position: right 8px center; }
.espera-txt { flex-basis: 100%; color: var(--warm); font-weight: 600; }
:root[data-theme="light"] .espera-txt { color: #B45309; }
.acao { border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.acao-topo { display: flex; align-items: center; gap: 6px; }
.acao-topo select.input { flex: 1; min-width: 0; height: 36px; }
.acao-topo .icone-btn:disabled { opacity: .35; cursor: default; }
.acao-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255,179,107,.16); color: var(--warm); }
:root[data-theme="light"] .acao-ic { color: #B45309; }
.acao-ic svg.lucide { width: 16px; height: 16px; }
.acao-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.acao-pills:empty { display: none; }
.vars { display: flex; flex-wrap: wrap; gap: 5px; }
.var-chip { height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--g3-border); background: var(--g3-bg); color: var(--accent-ink); font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; }
.var-chip:hover { background: var(--hover); }

/* Sistema real: as duas regras editadas direto no cartão */
.au-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.auto-card.auto-editor { cursor: default; gap: 12px; }
.auto-card.auto-editor:hover { transform: none; }
.auto-editor .dica { margin: 0; }
.auto-editor textarea.input { min-height: 84px; resize: vertical; line-height: 1.45; }
.au-passos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.au-passo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--g3-bg); border: 1px solid var(--g3-border); }
.au-passo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-passo-topo .icone-btn { margin-left: auto; }
.au-passo-topo .icone-btn:disabled { opacity: .35; cursor: default; }
.au-dias { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.au-dias .input { width: 66px; height: 34px; padding: 0 8px; text-align: center; }
.au-dias-txt { font-size: 12.5px; color: var(--text-3); }
.au-mais { align-self: flex-start; }
.au-etapas { display: flex; flex-wrap: wrap; gap: 6px; }
.check-linha { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check-linha input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.check-linha small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.au-botoes { display: inline-flex; gap: 8px; }
.auto-editor .balao-txt { white-space: pre-wrap; }
.au-aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; color: var(--text-2); }
.au-aviso > svg.lucide { width: 18px; height: 18px; flex: none; color: var(--warm); }
.au-aviso > span { flex: 1; min-width: 220px; }
.au-aviso code { font-size: 12px; }
.au-oab > svg.lucide { color: var(--accent); }
.previa-auto { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pv-item { display: flex; flex-direction: column; gap: 5px; }
.pv-quando { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pv-quando svg.lucide { width: 13px; height: 13px; }
.pv-item .balao { align-self: flex-end; max-width: 92%; }
.pv-anexo { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; opacity: .85; }
.pv-anexo svg.lucide { width: 13px; height: 13px; }
.pv-sis { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 14px; border: 1px dashed var(--g2-border); font-size: 13px; color: var(--text-2); }
.pv-sis svg.lucide { width: 15px; height: 15px; margin-top: 2px; color: var(--warm); }

.msg-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; border-radius: var(--r-md); }
.msg-barra .campo { min-width: 240px; }
.msg-barra .dica { flex: 1; min-width: 200px; margin: 0 0 10px; }
.msg-barra .direita { margin-left: auto; display: flex; gap: 8px; }
.msg-grupo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-top: 6px; }
.msg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.msg-card { border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.msg-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-topo h4 { font-size: 15px; font-weight: 700; }
.msg-card .balao { max-width: 100%; }
.fila-info { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); }
.fila-info svg.lucide { color: var(--warm); }
.fila-info small { display: block; color: var(--text-3); }

@media (max-width: 1279px) {
  .painel-lado.auto-painel { width: min(480px, calc(100vw - 24px)); }
}
@media (max-width: 719px) {
  .painel-lado.auto-painel { width: 100%; }
}

/* ---------- Contatos ---------- */

.contatos { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.contatos .filtros { padding-bottom: 0; }
.ct-busca { width: 280px; height: 36px; }
.ct-importar { margin-left: auto; }
.massa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); border-color: rgba(127,184,255,.55); animation: sobe .18s ease-out; }
.contatos-tab { min-width: 1120px; }
.contatos-tab th { padding: 6px 8px 0; }
.contatos-tab td { padding: 8px; }
.col-check { width: 36px; text-align: center; }
.check { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }
.ordenar { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.ordenar svg.lucide { width: 12px; height: 12px; opacity: .5; }
.ordenar.ativa { color: var(--accent-ink); }
.ordenar.ativa svg.lucide { opacity: 1; }
.sdr-cel { display: inline-flex; align-items: center; gap: 6px; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; color: var(--text-3); }
.pager .icone-btn:disabled { opacity: .35; cursor: default; }
.modal.imp { width: min(820px, 100%); }
.imp-fonte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.imp-fonte label.btn { cursor: pointer; }
.imp-texto { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; min-height: 90px; }
.imp-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.imp-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.imp-resumo .dica { margin: 0; }
.imp-previa { padding: 0; max-height: 260px; overflow: auto; background: none; }
.imp-previa .tabela { min-width: 640px; }
.imp-motivo { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 3px; white-space: normal; }

/* ---------- Reagendar ---------- */

.reagendar { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.rg-filtros .seg-op span { margin-left: 4px; color: var(--text-3); }
.grupo-sdr { display: flex; flex-direction: column; gap: 10px; }
.grupo-sdr > header { display: flex; align-items: center; gap: 10px; }
.grupo-sdr h3 { font-size: 16px; font-weight: 700; }
.reag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.reag-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 16px 18px 14px 22px; display: flex; flex-direction: column; gap: 10px; }
.reag-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.rc-topo { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.rc-topo h4 { font-size: 15px; font-weight: 700; }
.rc-topo small { color: var(--text-3); font-size: 12.5px; }
.rc-topo .pill { flex: none; }
.rc-obs { font-size: 13px; color: var(--text-2); font-style: italic; padding: 8px 12px; border-radius: 12px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.rc-acoes { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.rc-acoes .btn { flex: 1; }

@media (max-width: 719px) {
  .ct-busca { width: auto; min-width: 220px; }
  .ct-importar { margin-left: 0; }
}

/* ---------- Prospecção ---------- */

.prospeccao { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.prosp-topo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.prosp-form, .prosp-hist { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.prosp-form .secao-tit, .prosp-hist .secao-tit { margin-bottom: 0; }
.prosp-custo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); font-size: 13.5px; }
.prosp-custo svg.lucide { color: var(--success); }
.prosp-custo small { margin-left: auto; color: var(--text-3); }
.dica svg.lucide, .aviso svg.lucide { width: 14px; height: 14px; vertical-align: -2px; }
.aviso { font-size: 13px; color: var(--warm); }
.ph-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 330px; overflow-y: auto; }
.ph-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--g3-border); background: var(--g3-bg); text-align: left; }
.ph-item:hover { background: var(--hover); }
.ph-item.ativo { border-color: rgba(127,184,255,.6); background: rgba(127,184,255,.14); }
.ph-txt { flex: 1; min-width: 0; }
.ph-txt strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-txt small, .ph-meta small { color: var(--text-3); font-size: 12px; }
.ph-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.prosp-res { display: flex; flex-direction: column; gap: 12px; }
.pr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pr-head > div { flex: 1; min-width: 220px; }
.pr-head h3 { font-size: 17px; font-weight: 700; }
.pr-head small { color: var(--text-3); }
.progresso { height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.progresso span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3B82F6, #7FB8FF); transition: width .35s ease; }
.prosp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.prosp-card { border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; animation: sobe .25s ease-out; }
.prosp-card.repetida { border-color: rgba(255,179,107,.5); }
.pc-topo { display: flex; align-items: flex-start; gap: 10px; }
.pc-topo h4 { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.nota { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; flex: none; }
.nota svg.lucide { width: 14px; height: 14px; color: var(--warm); fill: currentColor; }
.nota small { color: var(--text-3); font-weight: 500; }
.pc-dados { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.pc-dados li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.pc-dados svg.lucide { width: 14px; height: 14px; margin-top: 2px; color: var(--text-3); }
.pc-acao { display: flex; align-items: center; gap: 8px; margin-top: auto; }

/* ---------- Configurações ---------- */

.configuracoes { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 8px; }
.cfg-abas { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--g3-bg); border: 1px solid var(--g3-border); }
.cfg-aba { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text-2); font-weight: 500; text-align: left; }
.cfg-aba:hover { background: var(--hover); color: var(--text); }
.cfg-aba.ativo { background: rgba(127,184,255,.22); border-color: rgba(127,184,255,.55); color: var(--text); font-weight: 700; }
.cfg-corpo { min-width: 0; }
.cfg-col { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.cfg-bloco { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cfg-bloco > .secao-tit { margin-bottom: 0; align-items: center; }
.cfg-bloco p { color: var(--text-2); }
.cfg-tit-btn { margin-left: 12px; }
.cfg-sub { margin: 6px 0 0; }
.cfg-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.cf-logo { display: flex; align-items: center; gap: 10px; }
.cf-logo img, .cf-logo-vazio { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--g3-bg); border: 1px solid var(--g3-border); color: var(--text-3); }
.cf-logo label.btn, .arquivo label.btn { cursor: pointer; }
.cfg-tab { min-width: 620px; }
.perfil-sel { width: auto; height: 34px; }
.perfis { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.perfis dt { font-weight: 700; }
.perfis dd { margin: 0; color: var(--text-2); }
.etp-lista { display: flex; flex-direction: column; gap: 6px; }
.etp-linha, .nch-linha { display: grid; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.etp-linha { grid-template-columns: auto 34px minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(130px, 1fr) 36px auto 30px; }
.nch-linha { grid-template-columns: 34px minmax(140px, 1fr) auto 30px; }
.etp-linha.oculta > :not(.ac-estado):not(.etp-ordem) { opacity: .55; }
.etp-linha .input, .nch-linha .input { height: 36px; }
.etp-ordem { display: flex; flex-direction: column; gap: 2px; }
.etp-ordem .icone-btn { width: 24px; height: 18px; border-radius: 6px; }
.etp-ordem .icone-btn svg.lucide { width: 13px; height: 13px; }
.etp-ordem .icone-btn:disabled, .nch-linha .icone-btn:disabled { opacity: .3; cursor: default; }
.cor-input { width: 34px; height: 34px; padding: 0; border: 1px solid var(--g3-border); border-radius: 10px; background: none; cursor: pointer; }
.cor-input::-webkit-color-swatch-wrapper { padding: 3px; }
.cor-input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.etp-leads { text-align: center; font-size: 12.5px; color: var(--text-3); }
.etp-sis { display: grid; place-items: center; color: var(--text-3); }
.etp-sis svg.lucide { width: 15px; height: 15px; }
.arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.arquivo > div { flex: 1; min-width: 180px; }
.arquivo small { display: block; color: var(--text-3); }
.vazio-arq { border-style: dashed; }
.tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tema-op { border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text); }
.tema-op.ativo { border: 2px solid var(--accent); box-shadow: 0 0 24px rgba(127,184,255,.4); padding: 11px; }
.tema-op small { color: var(--text-3); }
.tema-amostra { height: 74px; border-radius: 12px; display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; }
.tema-amostra.dark { background: linear-gradient(140deg, #08102B, #11245A 55%, #0A1638); }
.tema-amostra.light { background: #F0F4FA; border: 1px solid rgba(14,59,168,.12); }
.tema-amostra span:first-child { grid-row: 1 / 3; border-radius: 8px; }
.tema-amostra span { border-radius: 8px; }
.tema-amostra.dark span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.tema-amostra.light span { background: #fff; border: 1px solid rgba(14,59,168,.12); }
.tema-amostra.light span:first-child { background: #0E3BA8; }
.int-aviso { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.int-aviso svg.lucide { color: var(--success); flex: none; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.int-card { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.int-card.fase { opacity: .8; }
.int-head { display: flex; align-items: center; gap: 12px; }
.int-head > div { flex: 1; min-width: 0; }
.int-head h4 { font-size: 15px; font-weight: 700; }
.int-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ponto.ok { background: var(--success); box-shadow: 0 0 8px var(--success); }
.cred { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.cred .campo { flex: 1; min-width: 200px; }
.cred .acoes-linha { margin-top: 0; }
.cred-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--text-3); }
.cred-txt strong { color: var(--text); font-size: 13.5px; overflow-wrap: anywhere; }
.meta-status { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--linha); }
.meta-status .hbarra { grid-template-columns: 110px 1fr 36px; }
.erros { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.erros li { display: flex; gap: 8px; }
.erros svg.lucide { width: 15px; height: 15px; color: var(--danger); margin-top: 2px; }
.erros small { display: block; color: var(--text-3); }

@media (max-width: 1023px) {
  .prosp-topo { grid-template-columns: minmax(0, 1fr); }
  .configuracoes { grid-template-columns: minmax(0, 1fr); }
  .cfg-abas { position: static; flex-direction: row; overflow-x: auto; }
  .cfg-aba { flex: none; }
  .etp-linha { grid-template-columns: auto 34px minmax(0, 1fr) 30px; }
  .etp-linha > select, .etp-linha .etp-leads { grid-column: 3 / 4; }
  .etp-linha .ac-estado { grid-column: 3 / 4; }
}
@media (max-width: 719px) {
  .int-grid { grid-template-columns: minmax(0, 1fr); }
  .perfis { grid-template-columns: 1fr; }
}

/* ---------- Login e carregamento ---------- */

.pagina-login { overflow-y: auto; }
.login-tela { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); border-radius: var(--r-xl); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.login-marca { display: flex; align-items: center; gap: 14px; }
.login-marca .marca-nome { font-size: 28px; }
.login-marca small { color: var(--text-3); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form[hidden] { display: none; }
.login-form h1 { font-size: 22px; font-weight: 700; }
.login-form .link { align-self: center; }
.escolher-lista { display: flex; flex-direction: column; gap: 10px; }
.escolher-lista .btn { justify-content: flex-start; }
.login-msg { min-height: 20px; font-size: 13.5px; text-align: center; color: var(--danger); }
.login-msg[data-tipo="ok"] { color: var(--success); }
:root[data-theme="light"] .login-msg[data-tipo="ok"] { color: #13854F; }
.carregando { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--bg-3); background: var(--bg); }
.girando { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--chip); border-top-color: var(--accent); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.marca-logo { flex: none; display: block; border-radius: 50%; }

/* Dados do cliente (cadastro para contrato + resumo do caso) */
.modal.cliente { width: min(620px, 100%); }
.cli-painel { min-height: 268px; }
.cli-painel textarea { resize: vertical; }
.cli-acoes { flex-wrap: wrap; }
.cli-acoes .espaco { flex: 1; }
.cli-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--g3-bg); border: 1px solid var(--g3-border); }
.cli-topo { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.cli-topo > p { flex: 1; min-width: 0; margin: 0; }
.cli-bloco .cli-resumo { margin-bottom: 0; }
.cli-linha { color: var(--text); font-size: 14px; }
.cli-resumo { color: var(--text-2); font-size: 13px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
@media (max-width: 560px) {
  .cli-acoes .espaco { display: none; }
  .cli-acoes .btn { flex: 1 1 auto; justify-content: center; }
}