/* ================================================================
   FIBot — Design System v4 · "Aurora"
   Dark-first SaaS · inspirado em Linear / Vercel / Framer
   Override visual sobre o Tailwind compilado (app.css).
   NÃO altera funcionalidade — apenas a camada de apresentação.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   0. TOKENS  (mantém os mesmos nomes que o app consome)
   ────────────────────────────────────────────────────────────── */
:root {
  --brand:        47  32 215;   /* #2F20D7 */
  --brand-2:     123   0 179;   /* #7B00B3 */
  --brand-3:     101   0 104;   /* #650068 */
  --brand-dark:   31   0  98;   /* #1F0062 */
  --brand-light: 218 216 252;
  --ring:         47  32 215;
  --accent:        0 249 108;   /* #00F96C */
  --accent-fg:     0  50  20;

  --bg:       250 250 251;
  --surface:  255 255 255;
  --card:     255 255 255;
  --sidebar:  252 252 253;
  --border:   232 233 238;
  --fg:        17  19  26;
  --muted:    100 106 122;
  --muted2:   150 156 170;

  --success:   34 197  94;
  --warning:  245 158  11;
  --info:      56 130 246;
  --danger:   244  63  94;

  --radius-sm:  8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-xs: 0 1px 2px rgba(15,17,26,.05);
  --shadow-sm: 0 1px 3px rgba(15,17,26,.08), 0 1px 2px rgba(15,17,26,.04);
  --shadow-md: 0 8px 24px -8px rgba(15,17,26,.16), 0 2px 6px rgba(15,17,26,.05);
  --shadow-lg: 0 24px 60px -20px rgba(15,17,26,.28), 0 8px 20px rgba(15,17,26,.08);
  --shadow-brand: 0 10px 30px -8px rgba(47,32,215,.45);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

.dark {
  --brand:        79  61 230;   /* #4F3DE6 azul elétrico claro */
  --brand-2:     145  22 200;   /* #9116C8 */
  --brand-3:     120  20 124;   /* #78147C */
  --brand-dark:   31   0  98;   /* #1F0062 */
  --brand-light:  50  35 120;
  --ring:         79  61 230;
  --accent:        0 249 108;   /* #00F96C */
  --accent-fg:     0  50  20;

  --bg:           8   9  13;   /* #08090D */
  --surface:     16  18  24;   /* #101218 */
  --card:        17  19  26;   /* #11131A */
  --sidebar:     11  12  17;   /* #0B0C11 */
  --border:      31  34  45;   /* #1F222D */
  --fg:         237 238 242;
  --muted:      150 156 170;
  --muted2:      99 104 119;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 10px 30px -10px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.8), 0 10px 24px rgba(0,0,0,.5);
}

/* ──────────────────────────────────────────────────────────────
   1. BASE
   ────────────────────────────────────────────────────────────── */
body {
  background: #eae9f8;
  color: rgb(var(--fg));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.011em;
}
.dark body { background: #0c0d12; }

/* ── App shell: conteúdo flutuante arredondado ──────────────── */
.app-content-wrap {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.app-content-card {
  flex: 1; display: flex; flex-direction: column;
  background: #fbfbfd;
  overflow: hidden;
}
.dark .app-content-card {
  background: rgb(var(--card));
  box-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.app-content-scroll {
  flex: 1; overflow-y: auto;
  padding: 1.75rem 2rem 2.5rem;
  position: relative;
}
@media (max-width: 640px) { .app-content-scroll { padding: 1rem; } }

/* Aura sutil de fundo (somente dark) — dá a sensação "premium 2026" */
.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(820px 420px at 18% -8%, rgba(50,35,216,.14), transparent 60%),
    radial-gradient(720px 420px at 100% 0%, rgba(123,0,179,.10), transparent 55%);
}

#main-content { background: transparent; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgb(var(--muted2) / .28); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand) / .5); background-clip: padding-box; }
::selection { background: rgb(var(--brand) / .28); color: rgb(var(--fg)); }
[x-cloak] { display: none !important; }

.page-enter { animation: fi-page .45s var(--ease-out) both; }
@keyframes fi-page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ──────────────────────────────────────────────────────────────
   2. SIDEBAR
   ────────────────────────────────────────────────────────────── */
.sb-root {
  background: rgb(var(--sidebar));
  border-right: 1px solid rgb(var(--border));
  box-shadow: none;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 20;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1rem;
  min-height: 64px;
  border-bottom: 1px solid rgb(var(--border) / .7);
}

.sb-logo {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgb(var(--brand));
  box-shadow: var(--shadow-brand);
}
.sb-logo svg { color: #fff !important; width: 19px; height: 19px; }
.dark .sb-logo svg { color: #fff !important; }

/* Logo grande exibida quando a sidebar está expandida */
.sb-logo-full { height: 46px; max-width: 190px; width: auto; object-fit: contain; border-radius: 10px; display: block; flex-shrink: 0; filter: brightness(0) invert(1); }

/* Logo ícone (sidebar recolhida) */
.sb-logo img { filter: brightness(0) invert(1); }

.sb-brand-name { font-size: .95rem; font-weight: 700; color: rgb(var(--fg)); letter-spacing: -.02em; }
.sb-brand-sub  { font-size: .6rem; font-weight: 600; color: rgb(var(--muted2)); text-transform: uppercase; letter-spacing: .14em; }

.sb-collapse {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgb(var(--border));
  background: transparent; color: rgb(var(--muted2));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: all .15s var(--ease);
}
.sb-collapse svg { width: 14px; height: 14px; }
.sb-collapse:hover { border-color: rgb(var(--brand) / .5); background: rgb(var(--brand) / .12); color: rgb(var(--brand)); }

nav.flex-1 { overflow-x: hidden; padding: .5rem .5rem 0; }

.sb-nav-group { padding-top: .25rem; }
.sb-group-label {
  font-size: .58rem; font-weight: 700; color: rgb(var(--muted2));
  text-transform: uppercase; letter-spacing: .13em;
  padding: .75rem .85rem .3rem; opacity: .85;
}
.sb-nav-items { padding: 0; display: flex; flex-direction: column; gap: 2px; }

.sidebar-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; margin: 0 .15rem;
  border-radius: 9px;
  color: rgb(var(--muted));
  font-size: .84rem; font-weight: 500;
  position: relative; white-space: nowrap; overflow: hidden;
  text-decoration: none;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.sidebar-link:hover { background: rgb(var(--fg) / .05); color: rgb(var(--fg)); }
.dark .sidebar-link:hover { background: rgb(255 255 255 / .045); }

.sidebar-link.active {
  color: rgb(var(--fg));
  background: rgb(var(--fg) / .06);
  font-weight: 700;
}
.sidebar-link.active .icon { opacity: 1; }

/* Item de menu sem permissão: continua visível (menu não fica "faltando
   coisa"), mas com aparência inativa — o clique ainda navega, e é a própria
   página de destino que mostra o bloqueio (ver views/errors/no-access.php). */
.sidebar-link.locked { opacity: .45; }
.sidebar-link.locked:hover { background: rgb(var(--fg) / .04); color: rgb(var(--muted)); }
.sidebar-link-lock { width: 13px; height: 13px; flex-shrink: 0; margin-left: auto; opacity: .8; }

.sb-user-section { margin-top: auto; padding: .65rem .6rem 1rem; border-top: 1px solid rgb(var(--border) / .7); }
.sb-user-btn {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 11px;
  background: transparent; border: 1px solid transparent;
  color: rgb(var(--fg)); cursor: pointer; transition: all .15s var(--ease); text-align: left;
}
.sb-user-btn:hover { background: rgb(var(--fg) / .05); border-color: rgb(var(--border)); }
.sb-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgb(var(--border)); }
.sb-user-name { font-size: .82rem; font-weight: 600; color: rgb(var(--fg)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-email { font-size: .67rem; color: rgb(var(--muted2)); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: .68rem; color: rgb(var(--muted2)); line-height: 1.3; }
.sb-user-more {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: transparent; color: rgb(var(--muted2));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.sb-user-more:hover { background: rgb(var(--fg) / .08); color: rgb(var(--fg)); }
.sb-user-more svg { width: 14px; height: 14px; }
.sb-nav-badge {
  margin-left: auto; flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.sb-nav-badge--green { background: #00F96C; color: #00320F; }
.sb-nav-badge--amber { background: #d97706; color: #fff; }

/* ──────────────────────────────────────────────────────────────
   3. TOPBAR — Horizon Free
   ────────────────────────────────────────────────────────────── */
.topbar {
  min-height: 68px; height: auto; flex-shrink: 0;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(163,174,208,.18);
  position: relative; z-index: 30;
}
/* Sobrescreve resquício do app.css (Tailwind pré-redesign) que fixava
   height:72px e, em mobile, forçava flex-wrap:wrap + last child width:100%
   — isso quebrava o topbar em 2 linhas e a segunda linha (ícones/avatar)
   vazava por cima do cabeçalho da página logo abaixo. */
.topbar > div:last-of-type { width: auto; }
.dark .topbar { background: #0c0d12; border-bottom-color: rgba(255,255,255,.05); }

/* Greeting block (ainda usado em algumas páginas) */
.tb-greeting { display: flex; flex-direction: column; gap: .05rem; }
.tb-greeting-title {
  font-size: 1rem; font-weight: 700; line-height: 1.2;
  color: #2B3674; letter-spacing: -.025em;
}
.dark .tb-greeting-title { color: #F4F7FE; }
.tb-greeting-sub { font-size: .72rem; color: #A3AED0; font-weight: 400; }

/* Barra de busca Horizon Free */
.hz-tb-search {
  display: flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid rgba(163,174,208,.22);
  border-radius: 14px; padding: .45rem 1rem;
  min-width: 240px; max-width: 320px; width: 100%;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.06);
}
.dark .hz-tb-search {
  background: rgb(var(--card)); border-color: rgba(255,255,255,.1);
}
.hz-tb-search:hover { border-color: rgba(67,24,255,.3); box-shadow: 0 0 0 3px rgba(67,24,255,.07); }
.hz-tb-search-ico { width: 16px; height: 16px; color: #A3AED0; flex-shrink: 0; }
.hz-tb-search-text { flex: 1; font-size: .82rem; color: #A3AED0; }
.hz-tb-search-kbd {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: .65rem; font-weight: 600; color: #A3AED0;
  background: rgba(163,174,208,.12); border: 1px solid rgba(163,174,208,.2);
  border-radius: 6px; padding: 1px 6px; flex-shrink: 0;
}

/* Botão ícone Horizon Free */
.tb-icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(163,174,208,.22);
  color: #A3AED0; cursor: pointer;
  transition: all .15s var(--ease); position: relative;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.05);
}
.tb-icon-btn:hover { background: #fff; color: #4318FF; border-color: rgba(67,24,255,.25); }
.dark .tb-icon-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.dark .tb-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.15); }

.tb-crumb-logo { color: rgb(var(--brand)); }
.tb-crumb-brand { color: rgb(var(--brand)); font-weight: 700; letter-spacing: .1em; }
.tb-crumb-sep { color: rgb(var(--muted2)); }
.tb-crumb-page { color: rgb(var(--fg)); font-weight: 600; letter-spacing: -.01em; }

/* Botão que abre o Command Palette (no lugar da antiga busca) */
.tb-search, .cmdk-trigger {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; height: 38px; padding: 0 .85rem;
  background: rgb(var(--fg) / .04);
  border: 1px solid rgb(var(--border));
  border-radius: 10px; color: rgb(var(--muted));
  cursor: pointer; transition: all .15s var(--ease);
  position: relative;
}
.cmdk-trigger:hover { border-color: rgb(var(--brand) / .5); background: rgb(var(--brand) / .06); }
.tb-search--active { border-color: rgb(var(--brand) / .5); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
.tb-search-icon { width: 16px; height: 16px; color: rgb(var(--muted2)); flex-shrink: 0; }
.tb-search-input { flex: 1; background: transparent; border: none; outline: none; color: rgb(var(--fg)); font-size: .85rem; }
.tb-search-input::placeholder { color: rgb(var(--muted2)); }
.cmdk-trigger-text { flex: 1; font-size: .85rem; text-align: left; }
.tb-search-kbd, .cmdk-kbd {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: .68rem; font-weight: 600; color: rgb(var(--muted));
  background: rgb(var(--fg) / .06); border: 1px solid rgb(var(--border));
  border-radius: 6px; padding: 1px 6px; flex-shrink: 0;
}

.tb-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.25rem; font-size: .82rem;
  background: rgb(var(--danger) / .12); color: rgb(var(--danger));
  border-bottom: 1px solid rgb(var(--danger) / .25);
}
.tb-alert a { color: rgb(var(--danger)); text-decoration: underline; }

/* User button Horizon Free */
.hz-tb-user-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .55rem .3rem .3rem; border-radius: 14px;
  background: #fff; border: 1px solid rgba(163,174,208,.22);
  cursor: pointer; transition: all .15s var(--ease);
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.05);
}
.hz-tb-user-btn:hover { border-color: rgba(67,24,255,.25); }
.dark .hz-tb-user-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.hz-tb-avatar { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.hz-tb-user-info { display: flex; flex-direction: column; align-items: flex-start; }
.hz-tb-user-name { font-size: .8rem; font-weight: 700; color: #2B3674; line-height: 1.2; white-space: nowrap; }
.dark .hz-tb-user-name { color: #F4F7FE; }
.hz-tb-user-role { font-size: .65rem; color: #A3AED0; line-height: 1.2; }

/* Topbar compacto em mobile — sem isso, busca(240px)+ícones+nome do usuário
   somados nunca cabem numa tela de celular e o conteúdo acaba se espremendo/
   sobrepondo o cabeçalho da página logo abaixo. */
@media (max-width: 640px) {
  .topbar { padding: .6rem 1rem; gap: .5rem; }
  .hz-tb-search { min-width: 0; width: auto; max-width: none; padding: .5rem; }
  .hz-tb-search-text, .hz-tb-search-kbd { display: none; }
  .hz-tb-user-info { display: none; }
  .hz-tb-user-btn { padding: .3rem; gap: 0; }
}

/* User menu button (compatibilidade) */
.tb-user-btn {
  display: flex; align-items: center; gap: .65rem;
  padding: .25rem .4rem .25rem .25rem; border-radius: 10px;
  background: transparent; border: none;
  cursor: pointer; transition: background .15s var(--ease);
}
.tb-user-btn:hover { background: rgba(67,24,255,.05); }
.tb-user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tb-user-name  { font-size: .82rem; font-weight: 700; color: #2B3674; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.dark .tb-user-name { color: #F4F7FE; }
.tb-user-email { font-size: .7rem; color: #A3AED0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; line-height: 1.3; }
.tb-user-role  { font-size: .66rem; color: #A3AED0; }
.tb-chevron    { color: #A3AED0; }

/* Dropdown Horizon Free */
.tb-pop {
  background: #fff; border: 1px solid rgba(163,174,208,.2);
  border-radius: 16px; box-shadow: 14px 17px 40px 4px rgba(112,144,176,.18); overflow: hidden;
}
.dark .tb-pop { background: rgb(var(--card)); border-color: rgba(255,255,255,.08); box-shadow: var(--shadow-lg); }

/* Dropdown genérico (notif + user menu) */
.tb-pop {
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.tb-pop-head { padding: .85rem 1rem; border-bottom: 1px solid rgba(163,174,208,.14); }
.dark .tb-pop-head { border-bottom-color: rgba(255,255,255,.07); }
.tb-pop-foot { padding: .7rem 1rem; border-top: 1px solid rgba(163,174,208,.14); }
.dark .tb-pop-foot { border-top-color: rgba(255,255,255,.07); }
.tb-pop-item { display: flex; gap: .65rem; align-items: center; width: 100%; padding: .6rem 1rem; font-size: .84rem; color: #2B3674; text-decoration: none; transition: background .12s; cursor: pointer; }
.dark .tb-pop-item { color: #F4F7FE; }
.tb-pop-item:hover { background: rgba(67,24,255,.04); }
.dark .tb-pop-item:hover { background: rgba(255,255,255,.05); }
.tb-pop-item svg { color: #A3AED0; width: 16px; height: 16px; flex-shrink: 0; }
.tb-pop-item--danger { color: #EE5D50; }
.tb-pop-item--danger svg { color: #EE5D50; }

/* ──────────────────────────────────────────────────────────────
   4. COMMAND PALETTE  (⌘K)
   ────────────────────────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgb(8 9 13 / .55);
  backdrop-filter: blur(6px);
}
.cmdk-panel {
  width: 100%; max-width: 600px;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: cmdk-in .22s var(--ease-out) both;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
.cmdk-search { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; border-bottom: 1px solid rgb(var(--border)); }
.cmdk-search svg { width: 18px; height: 18px; color: rgb(var(--muted)); flex-shrink: 0; }
.cmdk-search input { flex: 1; background: transparent; border: none; outline: none; font-size: 1rem; color: rgb(var(--fg)); }
.cmdk-search input::placeholder { color: rgb(var(--muted2)); }
.cmdk-esc { font-size: .66rem; color: rgb(var(--muted)); background: rgb(var(--fg) / .06); border: 1px solid rgb(var(--border)); border-radius: 6px; padding: 2px 7px; }
.cmdk-list { max-height: 56vh; overflow-y: auto; padding: .5rem; }
.cmdk-group-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--muted2)); padding: .6rem .65rem .35rem; }
.cmdk-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .6rem .65rem; border-radius: 10px; cursor: pointer;
  color: rgb(var(--fg)); font-size: .88rem; text-decoration: none;
  border: none; background: transparent; text-align: left;
}
.cmdk-item .cmdk-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgb(var(--fg) / .06); color: rgb(var(--muted)); flex-shrink: 0; }
.cmdk-item .cmdk-ico svg { width: 16px; height: 16px; }
.cmdk-item.is-active, .cmdk-item:hover { background: rgb(var(--brand) / .14); color: rgb(var(--brand)); }
.cmdk-item.is-active .cmdk-ico, .cmdk-item:hover .cmdk-ico { background: rgb(var(--brand) / .18); color: rgb(var(--brand)); }
.cmdk-hint { margin-left: auto; font-size: .68rem; color: rgb(var(--muted2)); }
.cmdk-empty { text-align: center; padding: 2.5rem 1rem; color: rgb(var(--muted)); font-size: .85rem; }
.cmdk-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid rgb(var(--border)); font-size: .68rem; color: rgb(var(--muted2)); }
.cmdk-foot kbd { background: rgb(var(--fg) / .06); border: 1px solid rgb(var(--border)); border-radius: 5px; padding: 0 5px; font-family: inherit; }

/* ──────────────────────────────────────────────────────────────
   5. COMPONENTES BASE  (botões / inputs / cards / badges)
   ────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 10px; border: none; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #fff;
  background: rgb(var(--brand));
  box-shadow: var(--shadow-brand); transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 10px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: rgb(var(--fg));
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border));
  transition: all .15s var(--ease);
}
.btn-secondary:hover { border-color: rgb(var(--brand) / .5); background: rgb(var(--brand) / .06); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; cursor: pointer; color: rgb(var(--muted));
  background: transparent; border: none; transition: all .15s var(--ease);
}
.btn-ghost:hover { background: rgb(var(--fg) / .07); color: rgb(var(--fg)); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 10px; border: none; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #fff;
  background: rgb(var(--danger)); transition: all .15s var(--ease);
}
.btn-danger:hover { filter: brightness(1.07); transform: translateY(-1px); }

.fi-input {
  width: 100%; padding: .6rem .8rem; border-radius: 10px;
  background: rgb(var(--surface)); color: rgb(var(--fg));
  border: 1px solid rgb(var(--border)); font-size: .88rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  outline: none;
}
.fi-input::placeholder { color: rgb(var(--muted2)); }
.fi-input:focus { border-color: rgb(var(--brand) / .6); box-shadow: 0 0 0 3px rgb(var(--brand) / .14); }

.glass-card {
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.glass-card:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--border)); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 7px;
  font-size: .7rem; font-weight: 600; line-height: 1.5;
  background: rgb(var(--fg) / .07); color: rgb(var(--muted));
}

/* Modais */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgb(8 9 13 / .55); backdrop-filter: blur(6px);
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.5rem; animation: cmdk-in .22s var(--ease-out) both;
}
.border-line { border-color: rgb(var(--border)) !important; }

/* ──────────────────────────────────────────────────────────────
   6. SKELETON / EMPTY STATE  (componentes obrigatórios)
   ────────────────────────────────────────────────────────────── */
.skeleton {
  position: relative; overflow: hidden;
  background: rgb(var(--fg) / .06); border-radius: 8px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--fg) / .06), transparent);
  animation: fi-shimmer 1.4s infinite;
}
@keyframes fi-shimmer { 100% { transform: translateX(100%); } }

.empty-state { text-align: center; padding: 3rem 1.5rem; color: rgb(var(--muted)); }
.empty-state-icon {
  width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand));
}
.empty-state-title { font-size: .95rem; font-weight: 600; color: rgb(var(--fg)); margin-bottom: .25rem; }
.empty-state-desc { font-size: .82rem; color: rgb(var(--muted)); }

/* ──────────────────────────────────────────────────────────────
   7. TOASTS
   ────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  display: flex; align-items: center; gap: .65rem;
  min-width: 280px; max-width: 380px; padding: .8rem 1rem;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: 12px; box-shadow: var(--shadow-lg);
  color: rgb(var(--fg)); font-size: .85rem; font-weight: 500;
  animation: toast-in .3s var(--ease-out) both;
  position: relative; overflow: hidden;
}
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.toast-success::before { background: rgb(var(--success)); }
.toast-error::before   { background: rgb(var(--danger)); }
.toast-warning::before { background: rgb(var(--warning)); }
.toast-info::before    { background: rgb(var(--brand)); }
.toast-success svg { color: rgb(var(--success)); }
.toast-error svg   { color: rgb(var(--danger)); }
.toast-warning svg { color: rgb(var(--warning)); }
.toast-info svg    { color: rgb(var(--brand)); }
@keyframes toast-in   { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slide-down { to   { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ──────────────────────────────────────────────────────────────
   8. DASHBOARD  (db2-*)
   ────────────────────────────────────────────────────────────── */
.db2 { display: flex; flex-direction: column; gap: 1.25rem; }

/* Hero */
.db2-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.db2-greeting-row { display: flex; align-items: center; gap: .6rem; }
.db2-greeting-emoji { font-size: 1.6rem; }
.db2-greeting { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; color: rgb(var(--fg)); }
.db2-greeting-name { background: #533781; -webkit-background-clip: text; background-clip: text; color: transparent; }
.db2-hero-meta { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; font-size: .8rem; color: rgb(var(--muted)); }
.db2-live-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 99px; font-size: .72rem; font-weight: 600; color: rgb(var(--success)); background: rgb(var(--success) / .12); }
.db2-live-dot { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--success)); box-shadow: 0 0 0 0 rgb(var(--success) / .5); animation: fi-pulse 2s infinite; }
@keyframes fi-pulse { 0%,100% { box-shadow: 0 0 0 0 rgb(var(--success) / .45); } 50% { box-shadow: 0 0 0 6px rgb(var(--success) / 0); } }
.db2-hero-date { text-transform: capitalize; }
.db2-hero-sep { color: rgb(var(--muted2)); }
.db2-hero-sub { color: rgb(var(--muted2)); }
.db2-hero-right { display: flex; align-items: center; gap: .6rem; }

.db2-seg { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgb(var(--fg) / .05); border: 1px solid rgb(var(--border)); }
.db2-seg-btn { padding: .35rem .75rem; border-radius: 7px; border: none; background: transparent; color: rgb(var(--muted)); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); }
.db2-seg-btn--on { background: rgb(var(--card)); color: rgb(var(--brand)); box-shadow: var(--shadow-xs); }

.db2-refresh-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--muted)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s var(--ease); }
.db2-refresh-btn svg { width: 16px; height: 16px; }
.db2-refresh-btn:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--brand)); }
.db2-refresh-btn--spin svg { animation: fi-spin .8s linear infinite; }
@keyframes fi-spin { to { transform: rotate(360deg); } }

/* KPI grid */
.db2-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1280px) { .db2-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .db2-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .db2-kpi-grid { grid-template-columns: 1fr; } }

.db2-kpi {
  position: relative; overflow: hidden;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: 1.1rem;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease);
}
.db2-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--ico-c, rgb(var(--brand))), transparent); opacity: 0; transition: opacity .22s; }
.db2-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgb(var(--brand) / .35); }
.db2-kpi:hover::before { opacity: .8; }
.db2-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.db2-kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--ico-bg); color: var(--ico-c); }
.db2-kpi-icon svg { width: 19px; height: 19px; }
.db2-kpi-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .45rem; border-radius: 7px; font-size: .72rem; font-weight: 700; }
.db2-kpi-badge svg { width: 10px; height: 10px; }
.db2-badge--up { color: rgb(var(--success)); background: rgb(var(--success) / .14); }
.db2-badge--dn { color: rgb(var(--danger)); background: rgb(var(--danger) / .14); }
.db2-kpi-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.04em; color: rgb(var(--fg)); line-height: 1; }
.db2-kpi-label { font-size: .78rem; color: rgb(var(--muted)); margin-top: .3rem; font-weight: 500; }
.db2-spark-wrap { margin-top: .75rem; height: 36px; }
.db2-spark-svg { width: 100%; height: 36px; display: block; }
.db2-kpi-skel { display: none; }
.db2-kpi--loading .db2-kpi-inner { opacity: .45; }

.db2-live-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 600; color: rgb(var(--success)); }
.db2-live-badge-dot { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--success)); animation: fi-pulse 2s infinite; }
.db2-ai-progress-wrap { margin-top: .75rem; }
.db2-ai-track { height: 6px; border-radius: 99px; background: rgb(var(--fg) / .08); overflow: hidden; }
.db2-ai-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand-2))); transition: width .8s var(--ease-out); }
.db2-ai-note { font-size: .72rem; color: rgb(var(--muted)); margin-top: .45rem; }
.db2-ai-note-num { font-weight: 700; color: rgb(var(--fg)); }

/* Rows */
.db2-row { display: grid; gap: 1rem; }
.db2-row--charts { grid-template-columns: 1.9fr 1fr; }
.db2-row--mid { grid-template-columns: 1fr 1fr; }
.db2-row--bottom { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) { .db2-row--charts, .db2-row--mid, .db2-row--bottom { grid-template-columns: 1fr; } }

.db2-card { background: rgb(var(--card)); border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-xs); }
.db2-card--flush { padding: 0; }
.db2-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.db2-card-hdr--pd { padding: 1.25rem 1.25rem 0; }
.db2-card-title { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; color: rgb(var(--fg)); }
.db2-card-sub { font-size: .76rem; color: rgb(var(--muted)); margin-top: .15rem; }
.db2-link-btn { font-size: .78rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; white-space: nowrap; }
.db2-link-btn:hover { text-decoration: underline; }

/* Chart controls */
.db2-chart-ctrls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.db2-metrics-tabs { display: flex; gap: .25rem; }
.db2-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 7px; border: 1px solid transparent; background: transparent; color: rgb(var(--muted)); font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.db2-tab--on { background: rgb(var(--fg) / .05); color: rgb(var(--fg)); border-color: rgb(var(--border)); }
.db2-tab-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--td); }
.db2-toggle { display: flex; padding: 2px; border-radius: 8px; background: rgb(var(--fg) / .05); border: 1px solid rgb(var(--border)); }
.db2-tog-btn { padding: .25rem .6rem; border-radius: 6px; border: none; background: transparent; color: rgb(var(--muted)); font-size: .74rem; font-weight: 600; cursor: pointer; }
.db2-tog-btn--on { background: rgb(var(--card)); color: rgb(var(--brand)); box-shadow: var(--shadow-xs); }
.db2-chart-body { position: relative; min-height: 260px; }
.db2-chart-skel { position: absolute; inset: 0; }
.db2-skel-line { background: rgb(var(--fg) / .05); border-radius: 8px; overflow: hidden; }
.db2-skel-shimmer { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--fg) / .07), transparent); animation: fi-shimmer 1.4s infinite; }
.db2-empty-chart { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.db2-empty-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); margin-bottom: .75rem; }
.db2-empty-icon svg { width: 22px; height: 22px; }
.db2-empty-title { font-size: .9rem; font-weight: 600; color: rgb(var(--fg)); }
.db2-empty-desc { font-size: .78rem; color: rgb(var(--muted)); margin-top: .2rem; }
.db2-empty-cta { margin-top: .75rem; font-size: .8rem; font-weight: 600; color: rgb(var(--brand)); background: none; border: none; cursor: pointer; }

/* Donut / status */
.db2-card--status { display: flex; flex-direction: column; }
.db2-donut-wrap { position: relative; height: 170px; margin: .5rem 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.db2-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.db2-donut-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: rgb(var(--fg)); }
.db2-donut-lbl { font-size: .72rem; color: rgb(var(--muted)); }
.db2-invisible { opacity: 0; }
.db2-status-list { display: flex; flex-direction: column; gap: .7rem; }
.db2-status-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.db2-status-left { display: flex; align-items: center; gap: .5rem; }
.db2-status-dot { width: 8px; height: 8px; border-radius: 99px; }
.db2-status-name { font-size: .8rem; color: rgb(var(--muted)); font-weight: 500; }
.db2-status-right { display: flex; align-items: center; gap: .6rem; flex: 1; max-width: 60%; }
.db2-status-bar { flex: 1; height: 6px; border-radius: 99px; background: rgb(var(--fg) / .08); overflow: hidden; }
.db2-status-bar-fill { height: 100%; border-radius: 99px; transition: width .7s var(--ease-out); }
.db2-status-count { font-size: .8rem; font-weight: 700; color: rgb(var(--fg)); min-width: 20px; text-align: right; }
.db2-divider { height: 1px; background: rgb(var(--border)); margin: .35rem 0; }
.db2-sla-row { display: flex; gap: 1rem; }
.db2-sla-item { flex: 1; }
.db2-sla-label { font-size: .7rem; color: rgb(var(--muted)); }
.db2-sla-value { display: block; font-size: 1rem; font-weight: 700; color: rgb(var(--fg)); margin-top: .1rem; }
.db2-sla-value--green { color: rgb(var(--success)); }

/* Funnel */
.db2-funnel { display: flex; flex-direction: column; gap: 1rem; }
.db2-fn-step { display: flex; align-items: flex-start; gap: .85rem; }
.db2-fn-badge { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--fn-c); background: var(--fn-bg); flex-shrink: 0; }
.db2-fn-body { flex: 1; }
.db2-fn-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.db2-fn-name { font-size: .82rem; font-weight: 600; color: rgb(var(--fg)); }
.db2-fn-meta { display: flex; align-items: center; gap: .5rem; }
.db2-fn-num { font-size: .9rem; font-weight: 800; color: rgb(var(--fg)); }
.db2-fn-pct { font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; }
.db2-fn-track { height: 7px; border-radius: 99px; background: rgb(var(--fg) / .08); overflow: hidden; }
.db2-fn-fill { height: 100%; border-radius: 99px; transition: width .8s var(--ease-out); }

/* AI section */
.db2-ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .db2-ai-grid { grid-template-columns: repeat(2, 1fr); } }
.db2-ai-tile { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; padding: 1rem .5rem; border-radius: 12px; background: rgb(var(--fg) / .03); border: 1px solid rgb(var(--border) / .7); min-width: 0; }
.db2-ai-tile-val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.db2-ai-tile-lbl { max-width: 100%; }
.db2-ai-tile-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto .55rem; }
.db2-ai-tile-icon svg { width: 18px; height: 18px; }
.db2-ai-tile-val { font-size: 1.25rem; font-weight: 800; color: rgb(var(--fg)); letter-spacing: -.03em; }
.db2-ai-tile-lbl { font-size: .68rem; color: rgb(var(--muted)); margin-top: .15rem; }
.db2-ai-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-radius: 12px; background: linear-gradient(135deg, rgb(var(--brand) / .12), rgb(var(--brand-2) / .08)); border: 1px solid rgb(var(--brand) / .2); }
.db2-ai-banner-info { display: flex; align-items: center; gap: .75rem; }
.db2-ai-banner-pulse { width: 10px; height: 10px; border-radius: 99px; background: rgb(var(--brand)); animation: fi-pulse-brand 2s infinite; flex-shrink: 0; }
@keyframes fi-pulse-brand { 0%,100% { box-shadow: 0 0 0 0 rgb(var(--brand) / .5); } 50% { box-shadow: 0 0 0 7px rgb(var(--brand) / 0); } }
.db2-ai-banner-title { font-size: .85rem; font-weight: 700; color: rgb(var(--fg)); }
.db2-ai-banner-desc { font-size: .74rem; color: rgb(var(--muted)); margin-top: .1rem; }
.db2-ai-banner-btn { font-size: .78rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; white-space: nowrap; }

/* Recent conversations */
.db2-right-col { display: flex; flex-direction: column; gap: 1rem; }
.db2-conv-row { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; text-decoration: none; border-top: 1px solid rgb(var(--border) / .6); transition: background .12s; }
.db2-conv-row:hover { background: rgb(var(--fg) / .035); }
.db2-conv-av { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: #533781; flex-shrink: 0; }
.db2-conv-body { flex: 1; min-width: 0; }
.db2-conv-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.db2-conv-name { font-size: .84rem; font-weight: 600; color: rgb(var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db2-conv-time { font-size: .7rem; color: rgb(var(--muted2)); flex-shrink: 0; }
.db2-conv-prev { font-size: .76rem; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.db2-conv-tag { font-size: .68rem; font-weight: 600; padding: .12rem .5rem; border-radius: 7px; flex-shrink: 0; }
.db2-tag--open { color: rgb(var(--brand)); background: rgb(var(--brand) / .14); }
.db2-tag--pend { color: rgb(var(--warning)); background: rgb(var(--warning) / .14); }
.db2-tag--done { color: rgb(var(--success)); background: rgb(var(--success) / .14); }
.db2-empty-list { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1rem; color: rgb(var(--muted)); font-size: .82rem; }
.db2-empty-list svg { width: 32px; height: 32px; opacity: .5; }

/* Campaigns */
.db2-campaigns { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.db2-campaign { display: flex; align-items: center; gap: .7rem; }
.db2-campaign-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgb(var(--brand) / .12); color: rgb(var(--brand)); flex-shrink: 0; }
.db2-campaign-icon svg { width: 16px; height: 16px; }
.db2-campaign-body { flex: 1; }
.db2-campaign-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.db2-campaign-name { font-size: .8rem; font-weight: 600; color: rgb(var(--fg)); }
.db2-campaign-count { font-size: .72rem; color: rgb(var(--muted)); }
.db2-prog-track { height: 6px; border-radius: 99px; background: rgb(var(--fg) / .08); overflow: hidden; }
.db2-prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand-2))); transition: width .7s var(--ease-out); }
.db2-campaign-empty { text-align: center; padding: 1.5rem 1rem; color: rgb(var(--muted)); font-size: .8rem; }
.db2-campaign-empty a { display: inline-block; margin-top: .5rem; color: rgb(var(--brand)); font-weight: 600; text-decoration: none; }

/* Quick actions */
.db2-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.db2-qa { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem .5rem; border-radius: 12px; text-decoration: none; color: var(--qa-c); background: var(--qa-bg); border: 1px solid var(--qa-bd); font-size: .78rem; font-weight: 600; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.db2-qa:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.db2-qa-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .15); }
.db2-qa-icon svg { width: 17px; height: 17px; }

/* ──────────────────────────────────────────────────────────────
   8.5 TABS / FILTROS DE STATUS  (CRM, listagens)
   ────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .25rem 0 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgb(var(--border) / .7);
}
.tab-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgb(var(--muted));
  font-size: .84rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tab-item:hover {
  background: rgb(var(--fg) / .05);
  color: rgb(var(--fg));
}
.tab-item.active {
  background: rgb(var(--brand) / .12);
  color: rgb(var(--brand));
  border-color: rgb(var(--brand) / .25);
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .4rem;
  border-radius: 999px;
  background: rgb(var(--fg) / .08);
  color: rgb(var(--muted));
  font-size: .7rem;
  font-weight: 700;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.tab-item:hover .tab-count { background: rgb(var(--fg) / .12); }
.tab-item.active .tab-count { background: rgb(var(--brand)); color: #fff; }

/* ──────────────────────────────────────────────────────────────
   9. COMPONENTES DE PÁGINA  (migrados do app-old.css)
   ────────────────────────────────────────────────────────────── */

/* Page header */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.page-title { font-size: 1.375rem; font-weight: 800; color: rgb(var(--fg)); letter-spacing: -.03em; }
.page-sub   { font-size: .8125rem; color: rgb(var(--muted)); margin-top: .2rem; }

/* Section header (sub-sections dentro de cards) */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.section-title  { font-size: 1rem; font-weight: 700; color: rgb(var(--fg)); letter-spacing: -.025em; }
.section-sub    { font-size: .8rem; color: rgb(var(--muted)); margin-top: .15rem; }

/* Stat card */
.stat-card {
  position: relative; overflow: hidden;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: 1.25rem 1.1rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-xs);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgb(var(--brand) / .3); }
.stat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon-red    { background: rgba(220,38,38,.10);  color: #dc2626; }
.stat-icon-blue   { background: rgba(59,130,246,.10); color: #3b82f6; }
.stat-icon-purple { background: rgba(139,92,246,.10); color: #8b5cf6; }
.stat-icon-green  { background: rgba(34,197,94,.10);  color: #16a34a; }
.stat-icon-amber  { background: rgba(245,158,11,.10); color: #d97706; }

/* KPI card (variante com barra de cor no topo) */
.kpi-card {
  position: relative; overflow: hidden;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: 1.25rem 1.1rem;
  transition: border-color .2s, transform .2s, box-shadow .25s;
  box-shadow: var(--shadow-xs);
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0; transition: opacity .25s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi-card:hover::before { opacity: 1; }
.kpi-card--red::before    { background: linear-gradient(90deg, #dc2626, #f97316); }
.kpi-card--blue::before   { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.kpi-card--purple::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.kpi-card--green::before  { background: linear-gradient(90deg, #22c55e, #10b981); }
.kpi-card--amber::before  { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.kpi-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon--red    { background: rgba(220,38,38,.10);  color: #dc2626; }
.kpi-icon--blue   { background: rgba(59,130,246,.10); color: #3b82f6; }
.kpi-icon--purple { background: rgba(139,92,246,.10); color: #8b5cf6; }
.kpi-icon--green  { background: rgba(34,197,94,.10);  color: #16a34a; }
.kpi-icon--amber  { background: rgba(245,158,11,.10); color: #d97706; }

/* Metric chips */
.metric-chip {
  display: flex; flex-direction: column;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: .85rem 1.1rem; min-width: 110px;
  transition: box-shadow .2s, border-color .2s;
}
.metric-chip:hover { box-shadow: var(--shadow-sm); border-color: rgb(var(--brand) / .25); }
.metric-chip-value { font-size: 1.35rem; font-weight: 800; color: rgb(var(--fg)); letter-spacing: -.03em; }
.metric-chip-label { font-size: .68rem; font-weight: 600; color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }

/* Trend badges */
.trend-up   { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: .7rem; font-weight: 700; background: rgba(34,197,94,.12);  color: #16a34a; }
.trend-down { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: .7rem; font-weight: 700; background: rgba(239,68,68,.12);  color: #dc2626; }
.trend-flat { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: .7rem; font-weight: 700; background: rgb(var(--muted2)/.12); color: rgb(var(--muted)); }

/* Status pills */
.status-open     { background: rgb(var(--brand) / .12); color: rgb(var(--brand)); border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }
.status-bot      { background: rgba(14,165,233,.12); color: #0ea5e9; border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }
.status-waiting  { background: rgba(245,158,11,.12); color: #d97706; border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }
.status-closed   { background: rgba(107,114,128,.12); color: #6b7280; border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }
.status-pending  { background: rgba(245,158,11,.12); color: #d97706; border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }
.status-resolved { background: rgba(34,197,94,.12); color: #16a34a; border-radius: 99px; padding: 2px 8px; font-size: .72rem; font-weight: 600; }

/* Score badges */
.score-high   { background: rgba(34,197,94,.12);  color: #16a34a; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.score-medium { background: rgba(245,158,11,.12); color: #d97706; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.score-low    { background: rgba(239,68,68,.12);  color: #dc2626; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; }

/* Table */
.fi-table { width: 100%; border-collapse: collapse; }
.fi-table thead th {
  padding: .7rem 1rem; text-align: left;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: rgb(var(--muted)); border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--surface)); white-space: nowrap;
}
.fi-table tbody td {
  padding: .85rem 1rem; font-size: .875rem;
  border-bottom: 1px solid rgb(var(--border) / .5); color: rgb(var(--fg));
  vertical-align: middle;
}
.fi-table tbody tr { transition: background .12s var(--ease); }
.fi-table tbody tr:hover td { background: rgb(var(--brand) / .025); }
.fi-table tbody tr:last-child td { border-bottom: none; }

/* Kanban */
.kanban-col { min-width: 288px; max-width: 320px; flex-shrink: 0; }
.kanban-card {
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: .875rem; cursor: grab;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  box-shadow: var(--shadow-xs);
}
.kanban-card:hover { border-color: rgb(var(--brand) / .3); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.kanban-card.dragging { opacity: .5; cursor: grabbing; }
.kanban-drop-zone { min-height: 100px; border-radius: var(--radius-lg); border: 2px dashed transparent; transition: border-color .15s, background .15s; }
.kanban-drop-zone.drag-over { border-color: rgb(var(--brand) / .4); background: rgb(var(--brand) / .04); }

/* Quick actions */
.quick-action {
  display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  border-radius: var(--radius-lg); font-size: .82rem; font-weight: 600;
  transition: all .2s var(--ease); text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.quick-action:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.quick-action-red    { background: rgba(220,38,38,.08);  color: #dc2626; border-color: rgba(220,38,38,.15); }
.quick-action-red:hover    { background: rgba(220,38,38,.14); }
.quick-action-purple { background: rgb(var(--brand-2)/.08); color: rgb(var(--brand-2)); border-color: rgb(var(--brand-2)/.2); }
.quick-action-purple:hover { background: rgb(var(--brand-2)/.14); }
.quick-action-blue   { background: rgb(var(--brand)/.08);  color: rgb(var(--brand)); border-color: rgb(var(--brand)/.2); }
.quick-action-blue:hover   { background: rgb(var(--brand)/.14); }
.quick-action-green  { background: rgba(34,197,94,.08);   color: #16a34a; border-color: rgba(34,197,94,.15); }
.quick-action-green:hover  { background: rgba(34,197,94,.14); }

/* Funnel steps */
.funnel-step {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-radius: var(--radius);
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border));
  transition: border-color .15s, box-shadow .15s;
}
.funnel-step:hover { border-color: rgb(var(--brand) / .25); box-shadow: var(--shadow-xs); }
.funnel-connector { width: 2px; height: 18px; margin: 1px auto; background: linear-gradient(to bottom, rgb(var(--border)), transparent); }

/* Progress */
.progress-track { height: 6px; background: rgb(var(--fg) / .07); border-radius: 99px; overflow: hidden; }
.progress-fill  { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.4,0,.2,1); }

/* Input group */
.input-group { display: flex; flex-direction: column; gap: .35rem; }
.input-label { font-size: .82rem; font-weight: 600; color: rgb(var(--fg)); }
.input-hint  { font-size: .72rem; color: rgb(var(--muted2)); }

/* Empty state (extend) */
.empty-state-sub { font-size: .82rem; color: rgb(var(--muted)); }

/* AI glass card */
.ai-glass-card {
  position: relative; overflow: hidden;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: 1.25rem;
  box-shadow: var(--shadow-xs); transition: transform .2s, box-shadow .2s;
}
.ai-glass-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Flow builder canvas */
#flow-canvas { background: radial-gradient(circle, rgb(var(--muted2)/.1) 1px, transparent 1px) center / 22px 22px; background-color: rgb(var(--bg)); }
.flow-node {
  position: absolute; min-width: 180px;
  background: rgb(var(--card)); border: 1.5px solid rgb(var(--border));
  border-radius: var(--radius-lg); padding: .75rem; cursor: pointer;
  user-select: none; transition: border-color .15s, box-shadow .15s;
}
.flow-node:hover, .flow-node.selected { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }
.flow-node-handle { width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--brand)); border: 2px solid rgb(var(--bg)); position: absolute; }

/* ──────────────────────────────────────────────────────────────
   10. ANIMAÇÕES UTILITÁRIAS
   ────────────────────────────────────────────────────────────── */
.animate-spin { animation: fi-spin .8s linear infinite; }

/* ══════════════════════════════════════════════════════════════════
   11. DASHBOARD v5  (dash-*)  — redesign completo
══════════════════════════════════════════════════════════════════ */

/* Container — paleta da dashboard: azul elétrico + verde neon */
.dash {
  display: flex; flex-direction: column; gap: 1.25rem;
  --brand:       50  35 216;   /* #3223D8 azul elétrico */
  --brand-2:    123   0 179;   /* #7B00B3 roxo */
  --brand-light: 218 216 252;
  --accent:       0 249 108;   /* #00F96C verde neon */
  --shadow-brand: 0 10px 30px -8px rgba(50,35,216,.42);
}

/* ── Controls bar ───────────────────────────────────────────── */
.dash-ctrl-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem;
}
.dash-meta { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: rgb(var(--muted)); flex-wrap: wrap; }
.dash-live-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 600; color: rgb(var(--success)); background: rgb(var(--success)/.12); }
.dash-live-dot { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--success)); box-shadow: 0 0 0 0 rgb(var(--success)/.5); animation: fi-pulse 2s infinite; }
.dash-meta-date { text-transform: capitalize; }

.dash-period-ctrl { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgb(var(--fg)/.05); border: 1px solid rgb(var(--border)); }
.dash-period-btn { padding: .35rem .75rem; border-radius: 7px; border: none; background: transparent; color: rgb(var(--muted)); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); }
.dash-period-btn.is-on { background: rgb(var(--card)); color: rgb(var(--brand)); box-shadow: var(--shadow-xs); }

.dash-refresh { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--muted)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s var(--ease); }
.dash-refresh svg { width: 16px; height: 16px; }
.dash-refresh:hover { border-color: rgb(var(--brand)/.5); color: rgb(var(--brand)); }
.dash-refresh.is-spin svg { animation: fi-spin .8s linear infinite; }

/* ── KPI Strip ──────────────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }

.dash-kpi { position: relative; background: rgb(var(--card)); border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.dash-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgb(var(--brand)/.3); }
.dash-kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kc, rgb(var(--brand))); }
.dash-kpi-content { padding: 1.125rem 1.25rem .5rem; }
.dash-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.dash-kpi-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--kic,rgba(99,102,241,.1)); color: var(--kcc,#533781); display: flex; align-items: center; justify-content: center; }
.dash-kpi-icon svg { width: 18px; height: 18px; }
.dash-kpi-delta { display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .42rem; border-radius: 7px; font-size: .7rem; font-weight: 700; }
.dash-kpi-delta svg { width: 9px; height: 9px; }
.dash-kpi-delta.is-up { color: rgb(var(--success)); background: rgb(var(--success)/.12); }
.dash-kpi-delta.is-dn { color: rgb(var(--danger));  background: rgb(var(--danger) /.12); }
.dash-kpi-status-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; color: rgb(var(--success)); }
.dash-kpi-status-dot { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--success)); animation: fi-pulse 2s infinite; }
.dash-kpi-val { font-size: 2.1rem; font-weight: 800; letter-spacing: -.045em; color: rgb(var(--fg)); line-height: 1.05; margin-bottom: .3rem; }
.dash-kpi-lbl { font-size: .76rem; color: rgb(var(--muted)); font-weight: 500; }
.dash-kpi-spark { height: 38px; padding-top: .25rem; }
.dash-kpi-spark svg { width: 100%; height: 36px; display: block; }
.dash-kpi-ai-bar { padding: .5rem 1.25rem .875rem; }
.dash-kpi-ai-track { height: 5px; border-radius: 99px; background: rgb(var(--fg)/.08); overflow: hidden; }
.dash-kpi-ai-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,rgb(var(--brand)),rgb(var(--brand-2))); transition: width .8s var(--ease-out); }
.dash-kpi-ai-hint { font-size: .71rem; color: rgb(var(--muted)); margin-top: .4rem; }
.dash-kpi.is-loading .dash-kpi-content { opacity: .45; }

/* ── Main Layout ────────────────────────────────────────────── */
.dash-layout { display: grid; grid-template-columns: 1fr 352px; gap: 1rem; align-items: start; }
.dash-col-main { display: flex; flex-direction: column; gap: 1rem; }
.dash-col-side  { display: flex; flex-direction: column; gap: 1rem; }

/* ── Base Card ──────────────────────────────────────────────── */
.dash-card { background: rgb(var(--card)); border: 1px solid rgb(var(--border)); border-radius: 20px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(40,38,80,.05), 0 6px 20px rgba(40,38,80,.05); }
.dark .dash-card { box-shadow: var(--shadow-xs); }
.dash-card--flush { padding: 0; }
.dash-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-card-hd--pd { padding: 1.25rem 1.25rem 0; }
.dash-card-hdl {}
.dash-card-title { font-size: .96rem; font-weight: 700; letter-spacing: -.02em; color: rgb(var(--fg)); }
.dash-card-sub { font-size: .74rem; color: rgb(var(--muted)); margin-top: .15rem; }
.dash-card-lnk { font-size: .76rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; white-space: nowrap; }
.dash-card-lnk:hover { text-decoration: underline; }

/* ── Chart ──────────────────────────────────────────────────── */
.dash-chart-ctrls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dash-mtabs { display: flex; gap: .2rem; }
.dash-mtab { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .55rem; border-radius: 7px; border: 1px solid transparent; background: transparent; color: rgb(var(--muted)); font-size: .74rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.dash-mtab.is-on { background: rgb(var(--fg)/.05); color: rgb(var(--fg)); border-color: rgb(var(--border)); }
.dash-mtab-dot { width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0; }
.dash-ttoggle { display: flex; padding: 2px; border-radius: 8px; background: rgb(var(--fg)/.05); border: 1px solid rgb(var(--border)); }
.dash-ttog-btn { padding: .23rem .55rem; border-radius: 6px; border: none; background: transparent; color: rgb(var(--muted)); font-size: .72rem; font-weight: 600; cursor: pointer; }
.dash-ttog-btn.is-on { background: rgb(var(--card)); color: rgb(var(--brand)); box-shadow: var(--shadow-xs); }

.dash-chart-body { position: relative; min-height: 290px; }
.dash-chart-skel { position: absolute; inset: 0; overflow: hidden; }
.dash-skel-bar { position: absolute; border-radius: 4px 4px 0 0; background: rgb(var(--fg)/.06); animation: dash-skel-pulse 1.5s ease-in-out infinite; }
@keyframes dash-skel-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.dash-empty-chart { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dash-empty-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(var(--brand)/.1); color: rgb(var(--brand)); margin-bottom: .75rem; }
.dash-empty-ico svg { width: 22px; height: 22px; }
.dash-empty-ttl { font-size: .9rem; font-weight: 600; color: rgb(var(--fg)); }
.dash-empty-dsc { font-size: .76rem; color: rgb(var(--muted)); margin-top: .2rem; }
.dash-empty-cta { margin-top: .75rem; font-size: .78rem; font-weight: 600; color: rgb(var(--brand)); background: none; border: none; cursor: pointer; }

/* ── Conversation list ──────────────────────────────────────── */
.dash-conv-list { display: flex; flex-direction: column; }
.dash-conv-item { display: flex; align-items: center; gap: .875rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgb(var(--border)); text-decoration: none; transition: background .12s; }
.dash-conv-item:last-child { border-bottom: none; }
.dash-conv-item:hover { background: rgb(var(--fg)/.03); }
.dash-conv-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,rgb(var(--brand)/.8),rgb(var(--brand-2)/.8)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
.dash-conv-body { flex: 1; min-width: 0; }
.dash-conv-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-conv-name { font-size: .84rem; font-weight: 600; color: rgb(var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-conv-time { font-size: .71rem; color: rgb(var(--muted2)); white-space: nowrap; flex-shrink: 0; }
.dash-conv-prev { font-size: .76rem; color: rgb(var(--muted)); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-conv-status { font-size: .67rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.dash-conv-status.is-open { color: rgb(var(--brand));   background: rgb(var(--brand)  /.1); }
.dash-conv-status.is-wait { color: rgb(var(--warning)); background: rgb(var(--warning)/.12); }
.dash-conv-status.is-done { color: rgb(var(--success)); background: rgb(var(--success)/.12); }
.dash-conv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem; color: rgb(var(--muted)); text-align: center; gap: .5rem; }
.dash-conv-empty svg { width: 28px; height: 28px; opacity: .35; }
.dash-conv-empty p { font-size: .8rem; }

/* ── Status Distribution ────────────────────────────────────── */
.dash-total-tag { font-size: .71rem; font-weight: 600; padding: .15rem .55rem; border-radius: 8px; background: rgb(var(--fg)/.06); color: rgb(var(--muted)); white-space: nowrap; }
.dash-donut-wrap { position: relative; height: 158px; margin: .5rem 0 1rem; display: flex; align-items: center; justify-content: center; }
.dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dash-donut-val { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: rgb(var(--fg)); }
.dash-donut-lbl { font-size: .7rem; color: rgb(var(--muted)); }
.dash-invis { opacity: 0; }
.dash-status-rows { display: flex; flex-direction: column; gap: .6rem; }
.dash-sr-item { display: grid; grid-template-columns: 96px 1fr 26px; align-items: center; gap: .55rem; }
.dash-sr-left { display: flex; align-items: center; gap: .45rem; }
.dash-sr-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.dash-sr-name { font-size: .78rem; color: rgb(var(--muted)); font-weight: 500; }
.dash-sr-track { height: 5px; border-radius: 99px; background: rgb(var(--fg)/.07); overflow: hidden; }
.dash-sr-fill { height: 100%; border-radius: 99px; transition: width .7s var(--ease-out); }
.dash-sr-count { font-size: .78rem; font-weight: 700; color: rgb(var(--fg)); text-align: right; }
.dash-sla-strip { display: flex; align-items: center; gap: 1rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgb(var(--border)); }
.dash-sla-item { flex: 1; }
.dash-sla-divider { width: 1px; height: 28px; background: rgb(var(--border)); flex-shrink: 0; }
.dash-sla-lbl { font-size: .68rem; color: rgb(var(--muted)); display: block; }
.dash-sla-val { font-size: .95rem; font-weight: 700; color: rgb(var(--fg)); margin-top: .1rem; display: block; }
.dash-sla-val--g { color: rgb(var(--success)); }

/* ── Side Tabs ──────────────────────────────────────────────── */
.dash-stabs { display: flex; align-items: center; gap: .2rem; border-bottom: 1px solid rgb(var(--border)); padding-bottom: .6rem; margin-bottom: .875rem; flex-wrap: wrap; }
.dash-stab { padding: .3rem .65rem; border-radius: 7px; border: none; background: transparent; color: rgb(var(--muted)); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.dash-stab.is-on { background: rgb(var(--brand)/.1); color: rgb(var(--brand)); }
.dash-stab-lnk { margin-left: auto; font-size: .74rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; }
.dash-stab-lnk:hover { text-decoration: underline; }

/* ── Funnel ─────────────────────────────────────────────────── */
.dash-funnel { display: flex; flex-direction: column; }
.dash-fn-step { display: flex; align-items: flex-start; gap: .75rem; }
.dash-fn-dot { width: 10px; height: 10px; border-radius: 99px; margin-top: .3rem; flex-shrink: 0; }
.dash-fn-connector { width: 1px; height: 12px; margin-left: 4px; background: rgb(var(--border)); }
.dash-fn-body { flex: 1; min-width: 0; padding-bottom: .625rem; }
.dash-fn-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.dash-fn-name { font-size: .8rem; font-weight: 600; color: rgb(var(--fg)); }
.dash-fn-nums { display: flex; align-items: center; gap: .5rem; }
.dash-fn-nums strong { font-size: .84rem; font-weight: 800; color: rgb(var(--fg)); }
.dash-fn-pct { font-size: .69rem; font-weight: 700; }
.dash-fn-track { height: 5px; border-radius: 99px; background: rgb(var(--fg)/.07); overflow: hidden; }
.dash-fn-fill { height: 100%; border-radius: 99px; transition: width .8s var(--ease-out); }

/* ── AI Tiles ───────────────────────────────────────────────── */
.dash-ai { display: flex; flex-direction: column; gap: .75rem; }
.dash-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.dash-ai-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .875rem .5rem .75rem; border-radius: 12px; background: rgb(var(--fg)/.03); border: 1px solid rgb(var(--border)/.7); }
.dash-ai-tile-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: .45rem; }
.dash-ai-tile-ico svg { width: 17px; height: 17px; }
.dash-ai-tile-val { font-size: 1.2rem; font-weight: 800; color: rgb(var(--fg)); letter-spacing: -.03em; }
.dash-ai-tile-lbl { font-size: .67rem; color: rgb(var(--muted)); margin-top: .1rem; }
.dash-ai-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-radius: 12px; background: linear-gradient(135deg,rgb(var(--brand)/.12),rgb(var(--brand-2)/.08)); border: 1px solid rgb(var(--brand)/.2); }
.dash-ai-banner-left { display: flex; align-items: center; gap: .65rem; }
.dash-ai-banner-pulse { width: 9px; height: 9px; border-radius: 99px; background: rgb(var(--brand)); animation: fi-pulse-brand 2s infinite; flex-shrink: 0; }
.dash-ai-banner-title { font-size: .82rem; font-weight: 700; color: rgb(var(--fg)); }
.dash-ai-banner-desc { font-size: .71rem; color: rgb(var(--muted)); margin-top: .1rem; }
.dash-ai-banner-btn { font-size: .76rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; white-space: nowrap; }
.dash-ai-banner-btn:hover { text-decoration: underline; }

/* ── Campaigns ──────────────────────────────────────────────── */
.dash-camps { display: flex; flex-direction: column; gap: .75rem; }
.dash-camp-item { display: flex; align-items: center; gap: .75rem; }
.dash-camp-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: rgb(var(--brand)/.1); color: rgb(var(--brand)); display: flex; align-items: center; justify-content: center; }
.dash-camp-ico svg { width: 15px; height: 15px; }
.dash-camp-body { flex: 1; min-width: 0; }
.dash-camp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.dash-camp-name { font-size: .8rem; font-weight: 600; color: rgb(var(--fg)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-camp-count { font-size: .72rem; color: rgb(var(--muted)); white-space: nowrap; }
.dash-camp-track { height: 5px; border-radius: 99px; background: rgb(var(--fg)/.07); overflow: hidden; }
.dash-camp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,rgb(var(--brand)),rgb(var(--brand-2))); transition: width .7s var(--ease-out); }
.dash-camps-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem; text-align: center; }
.dash-camps-empty p { font-size: .8rem; color: rgb(var(--muted)); }
.dash-camps-empty a { font-size: .8rem; font-weight: 600; color: rgb(var(--brand)); text-decoration: none; }

/* ── Quick Actions ──────────────────────────────────────────── */
.dash-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.dash-qa { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .875rem .5rem; border-radius: var(--radius); background: var(--qabg,rgb(var(--fg)/.04)); border: 1px solid var(--qabd,rgb(var(--border))); text-decoration: none; color: var(--qac,rgb(var(--fg))); font-size: .78rem; font-weight: 600; text-align: center; transition: all .15s var(--ease); }
.dash-qa:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.dash-qa-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--qabd,rgb(var(--border))); display: flex; align-items: center; justify-content: center; }
.dash-qa-ico svg { width: 16px; height: 16px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-col-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 768px) {
  .dash-kpis { grid-template-columns: repeat(2,1fr); }
  .dash-col-side { grid-template-columns: 1fr; }
  .dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .tb-greeting-title { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   12. KPI PREMIUM (dkpi-*)  — Stripe / Linear / Vercel level
══════════════════════════════════════════════════════════════════ */

/* Grid */
.dkpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }

/* ── Base card ──────────────────────────────────────────────── */
.dkpi {
  position: relative; overflow: hidden; cursor: default;
  background: #ffffff;
  border: 1px solid rgba(40,38,80,.07);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 0;
  box-shadow: 0 1px 3px rgba(40,38,80,.05), 0 6px 20px rgba(40,38,80,.05);
  transition: transform .22s, box-shadow .22s;
}
.dkpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(40,38,80,.12), 0 2px 6px rgba(40,38,80,.06);
}
.dark .dkpi {
  background: rgb(var(--card));
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
}

/* ── Glow blob (absolute, bottom center) ───────────────────── */
.dkpi-glow {
  position: absolute; bottom: -24px; left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 70px; border-radius: 50%;
  filter: blur(32px); pointer-events: none;
  opacity: 0; transition: opacity .35s;
}

/* ── Decorative orbs ────────────────────────────────────────── */
.dkpi-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.dkpi-orb--tl { width: 130px; height: 130px; top: -44px; right: -28px; }
.dkpi-orb--br { width: 72px;  height: 72px;  bottom: 8px;  left: -24px; }



/* ── Header row: título esquerda, ícone direita ─────────────── */
.dkpi-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: .875rem; gap: .5rem;
}
.dkpi-hd-left { display: none; } /* não usamos mais */

/* Ícone neutro — cinza, canto direito */
.dkpi-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dkpi-icon svg { width: 20px; height: 20px; stroke: rgba(0,0,0,.38); fill: none; }
.dark .dkpi-icon { background: rgba(255,255,255,.08); }
.dark .dkpi-icon svg { stroke: rgba(255,255,255,.45); }

/* Título do card (esquerda do header) */
.dkpi-lbl {
  font-size: .8rem; font-weight: 500;
  color: #6b7280; line-height: 1.3;
}
.dark .dkpi-lbl { color: rgb(var(--muted)); }

/* Número grande */
.dkpi-num {
  font-size: 2.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: #111827;
  margin-bottom: .5rem;
}
.dark .dkpi-num { color: rgb(var(--fg)); }

/* Meta: badge + texto inline */
.dkpi-meta {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .875rem;
}

/* Badge: pequeno ícone quadrado + % + período */
.dkpi-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
}
.dkpi-badge svg { width: 11px; height: 11px; }
.dkpi-badge--up { background: rgba(34,197,94,.18); color: #16a34a; }
.dkpi-badge--dn { background: rgba(239,68,68,.14); color: #dc2626; }

/* % colorido + período cinza */
.dkpi-meta-pct {
  font-size: .78rem; font-weight: 700;
}
.dkpi-meta-pct.dkpi-badge--up { color: #16a34a; }
.dkpi-meta-pct.dkpi-badge--dn { color: #dc2626; }
.dkpi-period {
  font-size: .75rem; color: #9ca3af; font-weight: 400;
}
.dark .dkpi-period { color: rgb(var(--muted2)); }

/* Sparkline sangra pelas bordas */
.dkpi-spark-wrap {
  height: 56px; margin: 0 -1.25rem;
}
.dkpi-spark-wrap svg { width: 100%; height: 56px; display: block; }

/* ── Loading ─────────────────────────────────────────────────── */
.dkpi--loading .dkpi-num,
.dkpi--loading .dkpi-lbl,
.dkpi--loading .dkpi-spark-wrap,
.dkpi--loading .dkpi-ai-body { opacity: .35; }

/* ═══════════════════════════════════════════════════════════════
   AI CARD — Ring Gauge
═══════════════════════════════════════════════════════════════ */
.dkpi--ai { padding-bottom: 1.625rem; }

.dkpi-ai-status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: 999px;
  font-size: .69rem; font-weight: 700;
  background: rgba(0,200,83,.12); color: #059669;
  border: 1px solid rgba(0,200,83,.2);
}
.dkpi-ai-pulse {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #00C853;
  box-shadow: 0 0 0 0 rgba(0,200,83,.7);
  animation: dkpi-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes dkpi-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0,200,83,.7); }
  60%  { box-shadow: 0 0 0 9px rgba(0,200,83,0); }
  100% { box-shadow: 0 0 0 0   rgba(0,200,83,0); }
}

.dkpi-ai-body {
  display: flex; align-items: center; gap: 1.25rem;
  position: relative; z-index: 1;
}

/* Ring */
.dkpi-ring-outer {
  position: relative; flex-shrink: 0;
  width: 96px; height: 96px;
}
.dkpi-ring-svg {
  width: 96px; height: 96px;
  transform: rotate(-90deg);
}
.dkpi-ring-track {
  fill: none;
  stroke: rgba(0,200,83,.14);
  stroke-width: 7;
  stroke-dasharray: 238.76;
  stroke-dashoffset: 0;
}
.dkpi-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 238.76;
  transition: stroke-dashoffset .9s cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 0 6px rgba(0,200,83,.55));
}
.dkpi-ring-cap-dot {
  fill: #34D399;
  filter: drop-shadow(0 0 4px rgba(52,211,153,.8));
}
.dkpi-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.dkpi-ring-pct {
  font-size: 1.35rem; font-weight: 800;
  color: rgb(var(--fg)); letter-spacing: -.05em; line-height: 1;
}
.dkpi-ring-cap {
  font-size: .58rem; color: rgb(var(--muted));
  letter-spacing: .04em; margin-top: .15rem;
}

/* Info panel beside ring */
.dkpi-ai-info { flex: 1; min-width: 0; }
.dkpi-ai-info .dkpi-lbl { margin-bottom: .75rem; }

.dkpi-ai-agents { margin-bottom: .75rem; }
.dkpi-agent-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .1rem; }
.dkpi-agent-glow {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #00C853;
  box-shadow: 0 0 0 0 rgba(0,200,83,.7);
  animation: dkpi-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
  animation-delay: .4s;
}
.dkpi-agent-count {
  font-size: 1.625rem; font-weight: 800; color: rgb(var(--fg));
  letter-spacing: -.05em; line-height: 1;
}
.dkpi-agent-lbl {
  font-size: .7rem; color: rgb(var(--muted)); display: block; margin-top: .05rem;
}

/* Scan animation — decorative AI visual */
.dkpi-ai-scan {
  display: flex; gap: 3px; align-items: flex-end; height: 18px; margin-top: .5rem;
}
.dkpi-ai-scan-bar {
  width: 4px; border-radius: 2px;
  background: linear-gradient(to top, #00C853, #34D399);
  opacity: .7;
}
.dkpi-ai-scan-bar:nth-child(1) { height: 60%; animation: dkpi-scan .9s ease-in-out infinite; }
.dkpi-ai-scan-bar:nth-child(2) { height: 100%; animation: dkpi-scan .9s ease-in-out infinite .15s; }
.dkpi-ai-scan-bar:nth-child(3) { height: 40%; animation: dkpi-scan .9s ease-in-out infinite .3s; }
@keyframes dkpi-scan {
  0%,100% { transform: scaleY(1); opacity:.65; }
  50%      { transform: scaleY(1.6); opacity:1; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) { .dkpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .dkpi-grid { grid-template-columns: 1fr; } .dkpi-num { font-size: 2.75rem; } }

/* ════════════════════════════════════════════════════════════════
   13. SIDEBAR — Horizon Free (light, white)
   ══════════════════════════════════════════════════════════════ */
.sb-root {
  background: #120063 !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.22) !important;
}
.dark .sb-root { background: #0b003d !important; border-right-color: rgba(0,0,0,.35) !important; }

.sb-brand { border-bottom-color: rgba(255,255,255,.08) !important; }

.sb-user-section { border-top-color: rgba(255,255,255,.08) !important; }

.sb-group-label {
  color: rgba(255,255,255,.35) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.sb-brand-name { color: #fff !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.sb-brand-sub  { color: rgba(255,255,255,.42) !important; }

.sb-logo {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 14px !important;
}
.sb-logo svg { stroke: #fff !important; }

.sb-user-name  { color: #fff !important; }
.sb-user-email { color: rgba(255,255,255,.45) !important; }
.sb-user-more  { color: rgba(255,255,255,.35) !important; }
.sb-user-more:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sb-avatar { border: 2px solid rgba(255,255,255,.15) !important; }

.sidebar-link { color: rgba(255,255,255,.5) !important; border-radius: 12px !important; }

.sidebar-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.sidebar-link.active {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.sidebar-link.active .icon { opacity: 1 !important; stroke: #fff !important; color: #fff !important; }

.sb-nav-badge { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.sb-nav-badge--green { background: rgba(1,181,116,.35) !important; color: #fff !important; }

.sb-collapse {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.4) !important;
  border-radius: 10px !important;
}
.sb-collapse:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sb-collapse:hover { background: rgba(67,24,255,.06) !important; color: #4318FF !important; }
.dark .sb-collapse:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }

.sb-user-more { color: #A3AED0 !important; }
.sb-user-more:hover { background: rgba(67,24,255,.06) !important; color: #4318FF !important; }
.dark .sb-user-more { color: rgba(255,255,255,.28) !important; }
.dark .sb-user-more:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }

.sb-user-name { color: #2B3674 !important; }
.dark .sb-user-name { color: rgba(255,255,255,.88) !important; }
.sb-user-email { color: #A3AED0 !important; }
.dark .sb-user-email { color: rgba(255,255,255,.32) !important; }
.sb-avatar { border-color: rgba(163,174,208,.25) !important; }
.dark .sb-avatar { border-color: rgba(255,255,255,.12) !important; }

/* Badge de não lidos no sidebar */
.sb-nav-badge { background: #4318FF !important; color: #fff !important; }
.sb-nav-badge--green { background: #01B574 !important; color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   14. MODERN INBOX (dinbox-*)
   ══════════════════════════════════════════════════════════════ */
.dinbox-hd {
  padding: 1.25rem 1.25rem .875rem;
  border-bottom: 1px solid rgb(var(--border));
}
.dinbox-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: .875rem;
}
.dinbox-hd-right { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.dinbox-badge {
  font-size: .68rem; font-weight: 700; padding: .2rem .55rem;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand));
  border-radius: 100px; letter-spacing: .02em; white-space: nowrap;
}
.dinbox-search-row { margin-bottom: .625rem; }
.dinbox-search { position: relative; display: flex; align-items: center; }
.dinbox-search-ico {
  position: absolute; left: .75rem; width: 14px; height: 14px;
  color: rgb(var(--muted)); pointer-events: none; flex-shrink: 0;
}
.dinbox-search-inp {
  width: 100%; padding: .5rem .75rem .5rem 2.2rem;
  background: rgb(var(--bg)); border: 1px solid rgb(var(--border));
  border-radius: 10px; font-size: .8rem; color: rgb(var(--fg));
  outline: none; transition: border-color .2s var(--ease);
}
.dinbox-search-inp:focus { border-color: rgb(var(--brand) / .4); }
.dinbox-search-inp::placeholder { color: rgb(var(--muted2)); }
.dinbox-filters { display: flex; gap: .3rem; flex-wrap: wrap; }
.dinbox-pill {
  font-size: .7rem; font-weight: 600; padding: .22rem .6rem;
  border-radius: 100px; border: 1px solid rgb(var(--border));
  background: transparent; color: rgb(var(--muted));
  cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
}
.dinbox-pill:hover { background: rgb(var(--fg) / .05); color: rgb(var(--fg)); }
.dinbox-pill.is-on {
  background: rgb(var(--brand) / .08); border-color: rgb(var(--brand) / .3);
  color: rgb(var(--brand));
}
.dinbox-list { display: flex; flex-direction: column; }
.dinbox-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgb(var(--border) / .6);
  text-decoration: none;
  transition: background .18s var(--ease), transform .2s var(--ease-out);
}
.dinbox-item:last-child { border-bottom: none; }
.dinbox-item:hover { background: rgb(var(--fg) / .03); transform: translateX(3px); }
.dinbox-item--priority { background: rgb(var(--brand) / .04); }
.dinbox-av-wrap { position: relative; flex-shrink: 0; }
.dinbox-av {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#5040E8,#3223D8);
}
.dinbox-item:nth-child(2n) .dinbox-av { background: linear-gradient(135deg,#60A5FA,#3B82F6); }
.dinbox-item:nth-child(3n) .dinbox-av { background: linear-gradient(135deg,#4ADE80,#22C55E); }
.dinbox-item:nth-child(4n) .dinbox-av { background: linear-gradient(135deg,#FCD34D,#F59E0B); }
.dinbox-item:nth-child(5n) .dinbox-av { background: linear-gradient(135deg,#C084FC,#8B5CF6); }
.dinbox-item:nth-child(6n) .dinbox-av { background: linear-gradient(135deg,#34D399,#00C853); }
.dinbox-online {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22C55E; border: 2px solid rgb(var(--card));
}
.dinbox-body { flex: 1; min-width: 0; }
.dinbox-row1 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .2rem;
}
.dinbox-name {
  font-size: .85rem; font-weight: 600; color: rgb(var(--fg));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%;
}
.dinbox-time { font-size: .68rem; color: rgb(var(--muted2)); flex-shrink: 0; margin-left: .5rem; }
.dinbox-row2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dinbox-prev {
  font-size: .77rem; color: rgb(var(--muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; line-height: 1.4;
}
.dinbox-st {
  font-size: .63rem; font-weight: 700; padding: .14rem .48rem;
  border-radius: 100px; flex-shrink: 0; letter-spacing: .03em;
  text-transform: uppercase;
}
.dinbox-st--open { background: rgb(var(--brand) / .1);  color: rgb(var(--brand)); }
.dinbox-st--wait { background: rgba(245,158,11,.1);  color: #D97706; }
.dinbox-st--done { background: rgba(34,197,94,.1);   color: #16A34A; }
.dinbox-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 2.5rem 1.25rem; gap: .4rem;
}
.dinbox-empty svg  { width: 36px; height: 36px; color: rgb(var(--muted2)); margin-bottom: .25rem; }
.dinbox-empty p    { font-size: .9rem; font-weight: 600; color: rgb(var(--fg)); }
.dinbox-empty span { font-size: .77rem; color: rgb(var(--muted)); }

/* ════════════════════════════════════════════════════════════════
   15. FUNIL ANALYTICS (dfunnel-*)
   ══════════════════════════════════════════════════════════════ */
.dfunnel {
  padding: .875rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.dfunnel-header {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: .125rem;
}
.dfunnel-period { font-size: .67rem; color: rgb(var(--muted2)); font-weight: 500; }
.dfunnel-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .875rem; border-radius: 14px;
  background: rgb(var(--bg)); border: 1px solid rgb(var(--border));
  gap: .75rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.dfunnel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dfunnel-card--win { background: rgba(34,197,94,.04); border-color: rgba(34,197,94,.2); }
.dfunnel-card-left { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; }
.dfunnel-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dfunnel-icon svg { width: 15px; height: 15px; }
.dfunnel-stage {
  font-size: .68rem; color: rgb(var(--muted)); font-weight: 500;
  display: block; margin-bottom: .08rem; white-space: nowrap;
}
.dfunnel-nums-row { display: flex; align-items: baseline; gap: .45rem; }
.dfunnel-count {
  font-size: 1.25rem; font-weight: 800; color: rgb(var(--fg));
  letter-spacing: -.04em; line-height: 1;
}
.dfunnel-trend { font-size: .68rem; font-weight: 700; }
.dfunnel-trend--up      { color: #22C55E; }
.dfunnel-trend--neutral { color: rgb(var(--muted)); }
.dfunnel-trend--dn      { color: #EF4444; }
.dfunnel-spark { width: 80px; height: 28px; flex-shrink: 0; overflow: hidden; }
.dfunnel-spark svg { width: 100%; height: 100%; display: block; }
.dfunnel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .125rem 0;
  border-top: 1px solid rgb(var(--border)); margin-top: .125rem;
}
.dfunnel-conv-rate { font-size: .73rem; color: rgb(var(--muted)); }
.dfunnel-conv-rate strong { color: rgb(var(--fg)); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   16. ACTION CENTER (dac-*)
   ══════════════════════════════════════════════════════════════ */
.dac-wrap { padding: 1.25rem !important; }
.dac-hd   { margin-bottom: .875rem; }
.dac-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
@media (max-width: 900px) { .dac-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .dac-grid { grid-template-columns: 1fr; } }
.dac {
  position: relative; display: flex; flex-direction: column; gap: .15rem;
  padding: .875rem .875rem .75rem;
  border-radius: 16px; text-decoration: none;
  background: rgb(var(--bg)); border: 1px solid rgb(var(--border));
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .2s;
}
.dac::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  background: var(--qabg, rgb(var(--brand) / .08));
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.dac:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.18);
  border-color: var(--qac, rgb(var(--brand)));
}
.dac:hover::after { opacity: 1; }
.dac-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .35rem; flex-shrink: 0;
  transition: background .3s, border-color .3s;
  position: relative; z-index: 1;
}
.dac-ico svg { width: 16px; height: 16px; color: var(--qac, rgb(var(--brand))); }
.dac:hover .dac-ico {
  background: var(--qabg, rgb(var(--brand) / .08));
  border-color: var(--qac, rgb(var(--brand)));
}
.dac-lbl  { font-size: .82rem; font-weight: 700; color: rgb(var(--fg)); line-height: 1.2; position: relative; z-index: 1; }
.dac-desc { font-size: .68rem; color: rgb(var(--muted)); line-height: 1.3; position: relative; z-index: 1; }
.dac-arr {
  position: absolute; top: .875rem; right: .875rem;
  width: 13px; height: 13px; color: var(--qac, rgb(var(--brand)));
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 1;
}
.dac:hover .dac-arr { opacity: .8; transform: translateX(2px); }

/* Dark mode adjustments */
.dark .dinbox-search-inp { background: rgb(var(--surface)); }
.dark .dfunnel-card      { background: rgb(var(--surface)); }
.dark .dac               { background: rgb(var(--surface)); }
.dark .dac-ico           { background: rgb(var(--card)); }

/* ════════════════════════════════════════════════════════════════
   17. DASHBOARD v6 — LAYOUT EM LINHAS (estilo referência SaaS)
   Linha de métricas → área principal (gráfico + overview) →
   tabelas em cards → central de ações.  Grids responsivos.
   ══════════════════════════════════════════════════════════════ */

/* Cabeçalho da página: título à esquerda, controles à direita */
.dsh-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.dsh-head-titles { min-width: 0; }
.dsh-head-title {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em;
  color: rgb(var(--fg)); line-height: 1.1;
}
.dsh-head-sub { font-size: .85rem; color: rgb(var(--muted)); margin-top: .15rem; }
.dsh-head-ctrl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Pílula de intervalo de datas (à direita, como na referência) */
.dsh-daterange {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 12px;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  font-size: .8rem; font-weight: 600; color: rgb(var(--fg));
  box-shadow: 0 1px 3px rgba(40,38,80,.05);
}
.dsh-daterange svg { width: 15px; height: 15px; color: rgb(var(--muted)); }

/* ── Área principal: gráfico (2fr) + overview (1fr) ─────────── */
.dsh-grid-main { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 1rem; align-items: start; }
/* ── Tabelas: tabela larga (1.5fr) + painel lateral (1fr) ───── */
.dsh-grid-low  { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 1rem; align-items: start; }

@media (max-width: 1100px) {
  .dsh-grid-main, .dsh-grid-low { grid-template-columns: 1fr; }
}

/* Card herói (gráfico principal) — mais respiro */
.dsh-hero { padding: 1.5rem 1.5rem 1rem; }

/* ── Tabela moderna (estilo "Won leads") ────────────────────── */
.dsh-tablecard-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.5rem 1rem;
}
.dsh-tablecard-hd .dash-card-lnk { flex-shrink: 0; }

.dsh-table-wrap { overflow-x: auto; }
.dsh-table { width: 100%; border-collapse: collapse; }
.dsh-table thead th {
  text-align: left; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgb(var(--muted2)); padding: .55rem 1.5rem;
  border-bottom: 1px solid rgb(var(--border)); white-space: nowrap;
}
.dsh-table thead th.dsh-th-r { text-align: right; }
.dsh-trow {
  cursor: pointer;
  transition: background .16s var(--ease);
  border-bottom: 1px solid rgb(var(--border) / .55);
}
.dsh-trow:last-child { border-bottom: none; }
.dsh-trow:hover { background: rgb(var(--brand) / .045); }
.dsh-table td { padding: .7rem 1.5rem; vertical-align: middle; }
.dsh-table td.dsh-td-r { text-align: right; }

.dsh-contact { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.dsh-contact .dinbox-av { width: 36px; height: 36px; border-radius: 11px; font-size: .78rem; }
.dsh-trow:nth-child(2n) .dinbox-av { background: linear-gradient(135deg,#60A5FA,#3B82F6); }
.dsh-trow:nth-child(3n) .dinbox-av { background: linear-gradient(135deg,#4ADE80,#22C55E); }
.dsh-trow:nth-child(4n) .dinbox-av { background: linear-gradient(135deg,#FCD34D,#F59E0B); }
.dsh-trow:nth-child(5n) .dinbox-av { background: linear-gradient(135deg,#C084FC,#8B5CF6); }
.dsh-contact-meta { display: flex; flex-direction: column; min-width: 0; }
.dsh-contact-name {
  font-size: .85rem; font-weight: 600; color: rgb(var(--fg));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.dsh-contact-sub { font-size: .7rem; color: rgb(var(--muted2)); }
.dsh-prev {
  font-size: .8rem; color: rgb(var(--muted));
  display: block; max-width: 260px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsh-when { font-size: .78rem; color: rgb(var(--muted2)); white-space: nowrap; }

@media (max-width: 640px) {
  .dsh-prev { max-width: 130px; }
  .dsh-table thead th, .dsh-table td { padding-left: 1rem; padding-right: 1rem; }
}

/* ================================================================
   HORIZON FREE DASHBOARD — visual inspirado no Figma "Horizon Free"
   ================================================================ */

/* ── Wrapper geral ─────────────────────────────────────────────── */
.hz-dash { padding: 0; }

/* ── Page Head ─────────────────────────────────────────────────── */
.hz-page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.375rem; flex-wrap: wrap; gap: .75rem;
}
.hz-page-bread {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 500; color: #A3AED0; margin-bottom: .2rem;
}
.hz-page-title {
  font-size: 1.5rem; font-weight: 800; color: #2B3674;
  letter-spacing: -.04em; line-height: 1.1;
}
.dark .hz-page-title { color: #F4F7FE; }
.dark .hz-page-bread { color: rgba(255,255,255,.35); }
.hz-page-sub   { font-size: .82rem; color: #A3AED0; margin-top: .2rem; }
.hz-bread-link { color: #A3AED0; text-decoration: none; transition: color .15s; }
.hz-bread-link:hover { color: #4318FF; }
.hz-bread-cur  { color: #4318FF; font-weight: 600; }

/* ── Card base (Horizon) ───────────────────────────────────────── */
.hz-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.375rem;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.08);
  border: solid 1px #e7e7e7;
}
.dark .hz-card {
  background: rgb(var(--card));
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  border-color: rgb(var(--border));
}

/* ── ROW 1: 6 stat cards ───────────────────────────────────────── */
.hz-stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 1.375rem;
}
@media (max-width: 1400px) { .hz-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .hz-stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .hz-stats-row { grid-template-columns: 1fr; } }

/* ── 4-column stat grid (pages: users, reports, contacts, etc.) ─ */
.hz-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}
@media (max-width: 1200px) { .hz-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hz-stat-grid { grid-template-columns: 1fr; } }

.hz-stat {
  background: #fff;
  border-radius: 20px;
  padding: 1.1rem 1.15rem;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.08);
  display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
      border: solid 1px #e7e7e7;
}
.hz-stat:hover { transform: translateY(-2px); box-shadow: 14px 22px 48px 6px rgba(112,144,176,.14); }
.dark .hz-stat { background: rgb(var(--card)); box-shadow: 0 4px 16px rgba(0,0,0,.3); border-color: rgb(var(--border)); }

.hz-stat-left { flex: 1; min-width: 0; }
.hz-stat-lbl {
  font-size: .67rem; font-weight: 700; color: #A3AED0;
  text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .4rem;
}
.hz-stat-val {
  font-size: 1.65rem; font-weight: 800; color: #2B3674;
  letter-spacing: -.05em; line-height: 1.1; margin-bottom: .3rem;
}
.dark .hz-stat-val { color: #F4F7FE; }
.hz-stat-meta { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.hz-stat-change { font-size: .7rem; font-weight: 700; }
.hz-stat-change.is-up { color: #01B574; }
.hz-stat-change.is-dn { color: #EE5D50; }
.hz-stat-period { font-size: .68rem; color: #A3AED0; }
.hz-stat-ai-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #01B574; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(1,181,116,.5); animation: fi-pulse 2s infinite;
}

.hz-stat-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
.hz-stat-icon svg { width: 20px; height: 20px; }

/* Icon color variants */
.hz-stat--purple .hz-stat-icon { background: rgba(67,24,255,.1);  color: #4318FF; }
.hz-stat--teal   .hz-stat-icon { background: rgba(1,181,116,.1);  color: #01B574; }
.hz-stat--blue   .hz-stat-icon { background: rgba(73,190,255,.12); color: #49BEFF; }
.hz-stat--orange .hz-stat-icon { background: rgba(255,181,71,.12); color: #FFB547; }
.hz-stat--yellow .hz-stat-icon { background: rgba(238,93,80,.1);   color: #EE5D50; }
.hz-stat--green  .hz-stat-icon { background: rgba(1,181,116,.1);   color: #01B574; }

/* ── ROW 2: Hero chart + Weekly chart ──────────────────────────── */
.hz-row2 {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 1rem; margin-bottom: 1.375rem; align-items: start;
}
@media (max-width: 1024px) { .hz-row2 { grid-template-columns: 1fr; } }

.hz-hero-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; flex-wrap: wrap; gap: .75rem;
}
.hz-hero-period-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; color: #A3AED0; margin-bottom: .3rem;
}
.hz-hero-period-tag svg { width: 13px; height: 13px; }
.hz-hero-val {
  font-size: 2.5rem; font-weight: 800; color: #2B3674;
  letter-spacing: -.055em; line-height: 1; margin-bottom: .35rem;
}
.dark .hz-hero-val { color: #F4F7FE; }
.hz-hero-kpi { text-align: right; }
.hz-hero-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .73rem; font-weight: 600; color: #01B574;
}
.hz-hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #01B574; animation: fi-pulse 2s infinite;
}

/* Card head (reutilizável) */
.hz-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}
.hz-card-head-right { display: flex; align-items: center; gap: .5rem; }
.hz-card-title {
  font-size: .9rem; font-weight: 700; color: #2B3674; letter-spacing: -.02em;
}
.dark .hz-card-title { color: #F4F7FE; }
.hz-card-period-tag {
  font-size: .68rem; font-weight: 600; color: #A3AED0;
  background: rgba(163,174,208,.1); border-radius: 8px; padding: .18rem .5rem;
  cursor: default;
}
.hz-card-icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: #A3AED0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.hz-card-icon-btn:hover { background: rgba(67,24,255,.06); color: #4318FF; }
.hz-card-icon-btn svg { width: 16px; height: 16px; }
.hz-card-icon-btn-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(67,24,255,.1); color: #4318FF;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .15s;
}
.hz-card-icon-btn-circle:hover { background: rgba(67,24,255,.2); }
.hz-card-icon-btn-circle svg { width: 14px; height: 14px; }
.hz-link-btn { font-size: .74rem; font-weight: 600; color: #4318FF; text-decoration: none; }
.hz-link-btn:hover { text-decoration: underline; }

/* ── ROW 3: Table + Traffic + Pie ──────────────────────────────── */
.hz-row3 {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem; margin-bottom: 1.375rem; align-items: start;
}
@media (max-width: 1200px) { .hz-row3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .hz-row3 { grid-template-columns: 1fr; } }

/* Sem isso, o conteúdo intrínseco de um item (ex.: a tabela de Conversas
   Recentes com células white-space:nowrap) impede a coluna do grid de
   encolher, empurrando a grid inteira (e a página) para fora do viewport
   em telas estreitas — os outros cards da linha aparecem cortados à direita. */
.hz-row2 > .hz-card, .hz-row3 > .hz-card, .hz-row4 > .hz-card { min-width: 0; }

/* Table Horizon style */
.hz-table-wrap { overflow-x: auto; margin: 0 -.5rem; }
.hz-table { width: 100%; border-collapse: collapse; }
.hz-table thead tr { border-bottom: 1px solid rgba(163,174,208,.15); }
.hz-table thead th {
  padding: .5rem 1rem .65rem; text-align: left;
  font-size: .65rem; font-weight: 700;
  color: #A3AED0; letter-spacing: .06em; text-transform: uppercase;
}
.hz-tr {
  cursor: pointer; transition: background .12s;
  border-bottom: 1px solid rgba(163,174,208,.1);
}
.hz-tr:last-child { border-bottom: none; }
.hz-tr:hover { background: rgba(67,24,255,.03); }
.hz-table td { padding: .65rem 1rem; vertical-align: middle; }
.hz-contact { display: flex; align-items: center; gap: .6rem; }
.hz-contact .dinbox-av { width: 34px; height: 34px; border-radius: 10px; font-size: .74rem; }
.hz-contact-name {
  font-size: .82rem; font-weight: 600; color: #2B3674;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.dark .hz-contact-name { color: #F4F7FE; }
.hz-prev { font-size: .77rem; color: #A3AED0; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hz-when { font-size: .72rem; color: #A3AED0; white-space: nowrap; }
.hz-status-badge { font-size: .67rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; white-space: nowrap; }
.hz-st--open { color: #4318FF; background: rgba(67,24,255,.1); }
.hz-st--wait { color: #FFB547; background: rgba(255,181,71,.12); }
.hz-st--done { color: #01B574; background: rgba(1,181,116,.1); }
.hz-st--cancel { color: #EE5D50; background: rgba(238,93,80,.1); }

/* ── Alert Strip (SLA + Notificações) ──────────────────────────── */
.dash-alert-strip {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem;
}
.dash-alert-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem; border-radius: 12px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  text-decoration: none; border: none; background: none;
  transition: opacity .15s, transform .15s;
}
.dash-alert-item:hover { opacity: .88; transform: translateY(-1px); }
.dash-alert-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-alert-sla {
  background: rgba(238,93,80,.1); color: #C0392B;
  border: 1px solid rgba(238,93,80,.22);
}
.dark .dash-alert-sla {
  background: rgba(238,93,80,.12); color: #FF6B6B;
  border-color: rgba(238,93,80,.3);
}
.dash-alert-notif {
  background: rgba(67,24,255,.08); color: #4318FF;
  border: 1px solid rgba(67,24,255,.18);
}
.dark .dash-alert-notif {
  background: rgba(100,80,255,.12); color: #8B7FFF;
  border-color: rgba(100,80,255,.3);
}
.dash-alert-cta {
  margin-left: auto; padding-left: .75rem;
  font-size: .7rem; font-weight: 700; opacity: .7;
}

/* ── Revenue card (substituiu Weekly) ──────────────────────────── */
.hz-rev-total-wrap {
  display: flex; align-items: center; gap: .5rem; margin: .3rem 0 .1rem;
}
.hz-rev-total {
  font-size: 1.35rem; font-weight: 800; color: #2B3674;
  letter-spacing: -.04em; line-height: 1;
}
.dark .hz-rev-total { color: #F4F7FE; }
.hz-rev-prev {
  font-size: .67rem; color: #A3AED0; font-weight: 500;
}

/* ── Funnel Visual ──────────────────────────────────────────────── */
.hz-funnel-visual { padding: .25rem 0 .5rem; }

/* Traffic card */
.hz-traffic-val {
  font-size: 2rem; font-weight: 800; color: #2B3674;
  letter-spacing: -.05em; line-height: 1; margin-bottom: .15rem;
}
.dark .hz-traffic-val { color: #F4F7FE; }
.hz-traffic-sub { font-size: .71rem; color: #A3AED0; font-weight: 500; margin-bottom: .75rem; }
.hz-traffic-change {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .71rem; font-weight: 700; color: #01B574;
}
.hz-traffic-change svg { width: 10px; height: 10px; }
.hz-traffic-bars { margin-bottom: .875rem; }
.hz-traffic-funnel { display: flex; flex-direction: column; gap: .55rem; }
.hz-tf-row { display: flex; align-items: center; gap: .5rem; }
.hz-tf-lbl { font-size: .68rem; color: #A3AED0; min-width: 60px; }
.hz-tf-bar-wrap { flex: 1; height: 6px; background: rgba(163,174,208,.15); border-radius: 99px; overflow: hidden; }
.hz-tf-bar { height: 100%; border-radius: 99px; transition: width .7s var(--ease-out); }
.hz-tf-pct { font-size: .68rem; font-weight: 700; color: #2B3674; min-width: 26px; text-align: right; }
.dark .hz-tf-pct { color: #E2E8F0; }

/* Pie card */
.hz-pie-wrap {
  position: relative; height: 170px;
  display: flex; align-items: center; justify-content: center; margin-bottom: .75rem;
}
.hz-pie-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .25rem; }
.hz-pl-item { display: flex; align-items: center; gap: .4rem; }
.hz-pl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hz-pl-lbl { font-size: .72rem; color: #A3AED0; font-weight: 500; }
.hz-pl-val { font-size: .8rem; font-weight: 700; color: #2B3674; margin-left: .15rem; }
.dark .hz-pl-val { color: #F4F7FE; }

/* ── ROW 4: Tasks + Actions + Team + Promo ─────────────────────── */
.hz-row4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.375rem;
  align-items: start;
}
@media (max-width: 1300px) { .hz-row4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .hz-row4 { grid-template-columns: 1fr; } }

/* Bar list (leaderboard) — usado nos gráficos de Leads por Origem/Consultor/Canal */
.hz-barlist-row { margin-bottom: .65rem; }
.hz-barlist-row:last-child { margin-bottom: 0; }
.hz-barlist-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; margin-bottom: .3rem; }
.hz-barlist-lbl { color: #2B3674; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.dark .hz-barlist-lbl { color: #F4F7FE; }
.hz-barlist-val { font-weight: 700; flex-shrink: 0; }
.hz-barlist-track { height: 7px; border-radius: 99px; background: rgba(163,174,208,.16); overflow: hidden; }
.hz-barlist-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.hz-barlist-empty { text-align: center; padding: 2rem 0; color: #A3AED0; font-size: .8rem; }
.hz-barlist-empty-ico { font-size: 1.75rem; margin-bottom: .5rem; }

/* ── ROW 5: Top 5 vendedores por tempo de atendimento ─────────── */
.hz-row5 { margin-bottom: 1.375rem; }
.hz-row6 { margin-bottom: 1.375rem; }

/* ── ROW 6: Quem está online agora ─────────────────────────────── */
.hz-online-list { display: flex; flex-wrap: wrap; gap: .7rem; }
.hz-online-pill {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .5rem; border-radius: 14px;
  background: rgb(var(--muted) / .05); border: 1px solid rgb(var(--border));
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s;
}
.hz-online-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(112,144,176,.12);
  border-color: rgb(var(--success) / .35);
}
.hz-online-avatar-wrap { position: relative; flex-shrink: 0; width: 34px; height: 34px; }
.hz-online-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 2px rgb(var(--card));
}
.hz-online-avatar-wrap.is-available .hz-online-avatar { box-shadow: 0 0 0 2px rgb(var(--card)), 0 0 0 3.5px rgb(var(--success) / .55); }
.hz-online-avatar-wrap.is-away .hz-online-avatar      { box-shadow: 0 0 0 2px rgb(var(--card)), 0 0 0 3.5px rgb(var(--warning) / .5); }
.hz-online-dot {
  position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid rgb(var(--card)); background: rgb(var(--muted));
}
.hz-online-dot.is-available { background: rgb(var(--success)); animation: fi-pulse 2s infinite; }
.hz-online-dot.is-away { background: rgb(var(--warning)); }
.hz-online-name {
  font-size: .78rem; font-weight: 600; color: rgb(var(--fg));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.hz-online-status { font-size: .66rem; font-weight: 600; color: rgb(var(--muted)); }
.hz-online-status.is-available { color: rgb(var(--success)); }
.hz-online-status.is-away { color: rgb(var(--warning)); }

.hz-toprank-sub { font-size: .72rem; color: #A3AED0; margin-top: .15rem; }
.hz-toprank-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.hz-toprank-row:last-child { margin-bottom: 0; }
.hz-toprank-medal { width: 30px; flex-shrink: 0; text-align: center; font-size: 1rem; font-weight: 700; color: #A3AED0; }
.hz-toprank-body { flex: 1; min-width: 0; }

/* Quick Actions */
.hz-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hz-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .75rem .4rem; border-radius: 14px; text-decoration: none; transition: background .15s;
}
.hz-action-btn:hover { background: rgba(67,24,255,.04); }
.hz-action-ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.hz-action-ico svg { width: 18px; height: 18px; }
.hz-action-btn > span { font-size: .66rem; font-weight: 600; color: #2B3674; text-align: center; }
.dark .hz-action-btn > span { color: #F4F7FE; }


/* ── Fundo da página (light: azul claríssimo Horizon Free) ─────── */
.app-content-card { background: #ffffff !important; }
.dark .app-content-card { background: #0c0d12 !important; }
.app-content-scroll { background: #ffffff; }
.dark .app-content-scroll { background: #0c0d12; }

/* (topbar já definido na seção 3) */

/* ════════════════════════════════════════════════════════════════
   HORIZON FREE — PÁGINAS INTERNAS (CRM, Listagens, Kanban)
   ══════════════════════════════════════════════════════════════ */

/* ── Tabs estilo Horizon ────────────────────────────────────────── */
.hz-tab-bar {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .28rem; border-radius: 14px; margin-bottom: 1.25rem;
  background: rgba(163,174,208,.1); border: none;
}
.hz-tab-item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 10px;
  font-size: .8rem; font-weight: 600; color: #A3AED0;
  background: transparent; border: none; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.hz-tab-item:hover { background: rgba(255,255,255,.7); color: #2B3674; }
.hz-tab-item.active {
  background: #fff; color: #4318FF;
  box-shadow: 0 2px 10px rgba(112,144,176,.18);
}
.hz-tab-count {
  font-size: .68rem; font-weight: 700;
  padding: .06rem .42rem; border-radius: 5px;
  background: rgba(163,174,208,.14); color: #A3AED0;
}
.hz-tab-item.active .hz-tab-count { background: rgba(67,24,255,.12); color: #4318FF; }
.dark .hz-tab-item:hover { background: rgba(255,255,255,.08); color: #F4F7FE; }
.dark .hz-tab-item.active { background: rgb(var(--card)); color: #7B5FFF; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.dark .hz-tab-item.active .hz-tab-count { background: rgba(123,95,255,.18); color: #7B5FFF; }
.dark .hz-tab-bar { background: rgba(255,255,255,.06); }

/* ── Lead card (list view) ──────────────────────────────────────── */
.hz-lead-card {
  background: #fff; border: 1px solid rgba(163,174,208,.12);
  border-radius: 16px; padding: 1rem 1.25rem;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.06);
  transition: box-shadow .2s, border-color .2s, transform .15s;
}
.hz-lead-card:hover {
  box-shadow: 0 8px 24px -4px rgba(112,144,176,.2);
  border-color: rgba(67,24,255,.18); transform: translateY(-1px);
}
.dark .hz-lead-card {
  background: rgb(var(--card)); border-color: rgb(var(--border));
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ── Kanban Horizon ─────────────────────────────────────────────── */
.hz-kanban-col {
  min-width: 280px; max-width: 300px; flex-shrink: 0;
  background: rgba(163,174,208,.07); border: 1px solid rgba(163,174,208,.15);
  border-radius: 18px; padding: 1rem;
}
.dark .hz-kanban-col { background: rgb(var(--surface)); border-color: rgb(var(--border)); }

.hz-kanban-card {
  background: #fff; border: 1px solid rgba(163,174,208,.12);
  border-radius: 14px; padding: .875rem; cursor: grab;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.06);
  transition: box-shadow .15s, transform .12s, border-color .15s;
}
.hz-kanban-card:hover {
  box-shadow: 0 8px 20px -4px rgba(112,144,176,.2);
  transform: translateY(-2px); border-color: rgba(67,24,255,.2);
}
.hz-kanban-card.dragging { opacity: .5; cursor: grabbing; }
.dark .hz-kanban-card { background: rgb(var(--card)); border-color: rgb(var(--border)); box-shadow: 0 2px 10px rgba(0,0,0,.3); }

.hz-drop-zone {
  min-height: 100px; border-radius: 14px;
  border: 2px dashed transparent; transition: border-color .15s, background .15s;
}
.hz-drop-zone.drag-over {
  border-color: rgba(67,24,255,.35); background: rgba(67,24,255,.04);
}

/* ════════════════════════════════════════════════════════════════
   HORIZON FREE — FILTER BAR (global, reutilizável)
   ══════════════════════════════════════════════════════════════ */
.hz-filter-bar {
  background: #fff; border: 1px solid rgba(163,174,208,.14);
  border-radius: 16px; padding: .875rem 1.125rem;
  box-shadow: 14px 17px 40px 4px rgba(112,144,176,.06);
  margin-bottom: 1.375rem;
}
.dark .hz-filter-bar { background: rgb(var(--card)); border-color: rgb(var(--border)); }
.hz-filter-top {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem;
}
.hz-filter-search-wrap { flex: 1; position: relative; }
.hz-filter-search-wrap svg {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #A3AED0; pointer-events: none; flex-shrink: 0;
}
.hz-filter-input {
  width: 100%; padding: .55rem .875rem .55rem 2.3rem;
  background: rgba(163,174,208,.07); border: 1px solid rgba(163,174,208,.18);
  border-radius: 10px; font-size: .85rem; color: #2B3674; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.hz-filter-input::placeholder { color: #A3AED0; }
.hz-filter-input:focus { border-color: rgba(67,24,255,.4); box-shadow: 0 0 0 3px rgba(67,24,255,.08); background: #fff; }
.dark .hz-filter-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #F4F7FE; }
.hz-filter-count { font-size: .78rem; color: #A3AED0; white-space: nowrap; }
.hz-filter-clear {
  font-size: .74rem; font-weight: 600; color: #EE5D50;
  background: rgba(238,93,80,.08); border: 1px solid rgba(238,93,80,.2);
  border-radius: 8px; padding: .3rem .7rem; cursor: pointer;
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  transition: background .15s;
}
.hz-filter-clear:hover { background: rgba(238,93,80,.15); }
.hz-filter-chips { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.hz-filter-chip-label { font-size: .65rem; font-weight: 700; color: #A3AED0; text-transform: uppercase; letter-spacing: .06em; }
.hz-filter-chip {
  font-size: .74rem; font-weight: 600; padding: .28rem .65rem;
  border-radius: 8px; border: 1px solid rgba(163,174,208,.2);
  color: #A3AED0; background: transparent; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center;
}
.hz-filter-chip:hover { border-color: rgba(67,24,255,.25); color: #4318FF; background: rgba(67,24,255,.04); }
.hz-filter-chip.active { border-color: rgba(67,24,255,.3); color: #4318FF; background: rgba(67,24,255,.08); }
.hz-filter-chip--green.active  { border-color: rgba(1,181,116,.3);   color: #01B574; background: rgba(1,181,116,.08); }
.hz-filter-chip--orange.active { border-color: rgba(255,181,71,.3);  color: #ca8a00; background: rgba(255,181,71,.1); }
.hz-filter-chip--red.active    { border-color: rgba(238,93,80,.25);  color: #EE5D50; background: rgba(238,93,80,.07); }
.hz-filter-chip--purple.active { border-color: rgba(67,24,255,.3);   color: #4318FF; background: rgba(67,24,255,.08); }
.hz-filter-chip--blue.active   { border-color: rgba(73,190,255,.35);  color: #49BEFF; background: rgba(73,190,255,.1); }
.hz-filter-divider { width: 1px; height: 18px; background: rgba(163,174,208,.25); margin: 0 .15rem; flex-shrink: 0; }
.dark .hz-filter-chip { color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.1); }
.dark .hz-filter-chip:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }

/* ════════════════════════════════════════════════════════════════
   HORIZON FREE — MODAL BOX (global, reutilizável)
   ══════════════════════════════════════════════════════════════ */
.hz-modal-box {
  background: #fff; border-radius: 20px;
  box-shadow: 14px 17px 60px 8px rgba(112,144,176,.18);
  width: 100%; max-width: 580px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.hz-modal-box > form {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.dark .hz-modal-box { background: rgb(var(--card)); }
.hz-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid rgba(163,174,208,.14); flex-shrink: 0;
}
.dark .hz-modal-header { border-color: rgba(255,255,255,.08); }
.hz-modal-header-left { display: flex; align-items: center; gap: .875rem; }
.hz-modal-icon {
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(67,24,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hz-modal-icon svg { width: 20px; height: 20px; color: #4318FF; stroke: #4318FF; }
.hz-modal-title { font-size: 1rem; font-weight: 800; color: #2B3674; letter-spacing: -.03em; }
.hz-modal-sub   { font-size: .74rem; color: #A3AED0; margin-top: .15rem; }
.dark .hz-modal-title { color: #F4F7FE; }
.hz-modal-close {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(163,174,208,.1); border: none; cursor: pointer; color: #A3AED0;
  display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0;
}
.hz-modal-close:hover { background: rgba(238,93,80,.1); color: #EE5D50; }
.hz-modal-close svg { width: 14px; height: 14px; stroke: currentColor; }
.hz-modal-body { overflow-y: auto; padding: 1.25rem 1.5rem; flex: 1; min-height: 0; }
.hz-modal-section { margin-bottom: 1.375rem; }
.hz-modal-section:last-child { margin-bottom: 0; }
.hz-modal-section-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .65rem; font-weight: 700; color: #A3AED0;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .875rem;
}
.hz-modal-section-label::after { content:''; flex:1; height:1px; background:rgba(163,174,208,.15); }
.dark .hz-modal-section-label::after { background: rgba(255,255,255,.07); }
.hz-modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hz-modal-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.hz-modal-field label { display: block; font-size: .72rem; font-weight: 600; color: #A3AED0; margin-bottom: .35rem; }
.hz-modal-footer {
  display: flex; gap: .75rem; padding: 1rem 1.5rem;
  border-top: 1px solid rgba(163,174,208,.14); flex-shrink: 0;
  background: rgba(163,174,208,.04);
}
.dark .hz-modal-footer { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.hz-modal-checkbox-row { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.hz-modal-checkbox-label { font-size: .82rem; color: #A3AED0; cursor: pointer; }

/* ── Sidebar responsiva — mobile off-canvas (feature 81) ─────────────── */
/* Gated em <768px: desktop fica 100% intocado. */
.sb-backdrop { display: none; }
@media (max-width: 767px) {
  #sidebar.sb-root {
    position: fixed !important;
    top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 280px !important; min-width: 280px !important;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
  }
  body.sb-mobile-open #sidebar.sb-root { transform: translateX(0); }

  .sb-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  body.sb-mobile-open .sb-backdrop { opacity: 1; pointer-events: auto; }

  /* Conteúdo ocupa a largura toda (a sidebar sobrepõe quando aberta) */
  .app-content-wrap { width: 100% !important; min-width: 0 !important; }
}

/* ═══ Skip link (a11y) ═══════════════════════════════════════
   Invisível até receber foco via Tab; primeiro elemento focável. */
.skip-link {
    position: fixed; top: -48px; left: 12px; z-index: 9999;
    padding: 10px 16px; border-radius: 10px;
    background: #4318FF; color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 24px rgba(67,24,255,.4);
    transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }