/* ============================================================
   MELQUIADES LAW — Stylesheet Premium v3.0
   Identidade: Obsidian · Ouro · Creme
   Tipografia: Plus Jakarta Sans + Inter + JetBrains Mono
   Design: Dark premium · Glassmorphism · Micro-animações
   ============================================================ */

/* ── Google Fonts (backup caso o link falhe) ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS v3.0
   ══════════════════════════════════════════════════════════ */
:root {
  /* Tipografia */
  --font-sans:  'Plus Jakarta Sans', 'Inter', 'Montserrat', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
  --font-disp:  'Plus Jakarta Sans', 'Bebas Neue', cursive;

  /* Cores base */
  --bg-root:        #080808;
  --bg-primary:     #0E0E0E;
  --bg-secondary:   #141414;
  --bg-card:        #181818;
  --bg-card-hover:  #1E1E1E;
  --bg-input:       #121212;
  --bg-glass:       rgba(255,255,255,0.03);
  --bg-glass-md:    rgba(255,255,255,0.06);

  /* Aliases legados (compatibilidade com views existentes) */
  --bg:       #0E0E0E;
  --black:    #080808;
  --white:    #F2EDE6;
  --surface:  #141414;
  --surface2: #181818;
  --surface3: #1E1E1E;
  --surface4: #252525;
  --border:   #1E1E1E;
  --border2:  #2A2A2A;
  --muted:    #8A8480;
  --muted2:   #4A4540;

  /* Identidade dourada Melquiades */
  --gold:         #C9A84C;
  --gold-light:   #E2C070;
  --gold-dark:    #9A7A30;
  --gold-50:      #FDF8EC;
  --gold-100:     #F7EDCC;
  --gold-400:     #E2C070;
  --gold-500:     #C9A84C;
  --gold-600:     #A8872F;
  --gold-700:     #856A1E;
  --gold-glow:    rgba(201,168,76,0.15);
  --gold-glow2:   rgba(201,168,76,0.08);
  --gold-border:  rgba(201,168,76,0.30);
  --gold-shadow:  0 0 24px rgba(201,168,76,0.12);

  /* Texto */
  --text-primary:   #F2EDE6;
  --text-secondary: #8A8480;
  --text-muted:     #4A4540;
  --text-inverse:   #0E0E0E;

  /* Bordas */
  --border-base:   rgba(255,255,255,0.07);
  --border-subtle: rgba(201,168,76,0.08);
  --border-active: rgba(201,168,76,0.35);
  --border-hover:  rgba(201,168,76,0.20);

  /* Status semântico */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;
  --color-purple:  #8B5CF6;

  /* Aliases de status (usados nas views) */
  --status-success: #2ECC71;
  --status-warning: #F39C12;
  --status-danger:  #E74C3C;
  --status-info:    #3498DB;
  --c-novo:    #3A7BD5;
  --c-analise: #8B6CF0;
  --c-orc:     #E8A838;
  --c-aguard:  #D97C2A;
  --c-elab:    #3DB88C;
  --c-rev:     #C9A84C;
  --c-entregue:#4CAF82;
  --c-arquivo: #555555;
  --c-danger:  #E84343;
  --c-wa:      #25D366;

  /* Sombras */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.65);
  --shadow-gold: 0 0 28px rgba(201,168,76,0.12);
  --shadow-glow: 0 0 40px rgba(201,168,76,0.08);
  /* Alias legado */
  --shadow:      0 4px 24px rgba(0,0,0,0.6);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);

  /* Raios */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;
  /* Alias legado */
  --radius: 8px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px;

  /* Layout */
  --sidebar-w:      220px;
  --sidebar-mini-w: 64px;
  --topbar-h:       52px;

  /* Transições */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-std:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 120ms;
  --dur-std:  200ms;
  --dur-slow: 350ms;
  --transition: 180ms ease;
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14.5px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--bg-root);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Textura de grain sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

/* ── Tipografia ───────────────────────────────────────────── */
.font-display { font-family: var(--font-disp); }
.section-title {
  font-family: var(--font-disp);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.muted  { color: var(--muted); }
.muted2 { color: var(--muted2); }
.gold-text { color: var(--gold); }
.text-danger  { color: var(--c-danger) !important; }
.text-warning { color: var(--c-orc) !important; }
.text-center  { text-align: center; }
.section-label {
  font-size: 0.68rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  margin-top: 16px;
}

/* ── Scrollbar global (3px, dourada) ─────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-700); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* ── Layout Principal ─────────────────────────────────────── */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   SISTEMA DE NAVEGAÇÃO SUPERIOR
   Linha 1: topbar (logo + título + controles)
   Linha 2: topnav-bar (tabs de navegação, recolhível)
   ══════════════════════════════════════════════════════════ */
.topnav-system {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}

/* Linha 1 — Topbar principal */
.topbar {
  height: var(--topbar-h);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--border-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-active), transparent);
  pointer-events: none;
}

/* Logo no topbar */
.topbar-left { display: flex; align-items: center; flex-shrink: 0; }
.topbar-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6));
}

/* Título da view (centro) */
.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#topbar-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Controles à direita */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Botão toggle da nav ([ atalho) */
.topbar-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: all var(--dur-std) var(--ease-std);
  flex-shrink: 0;
}
.topbar-nav-toggle:hover {
  color: var(--gold-400);
  background: var(--gold-glow2);
}
.topbar-nav-toggle svg { width: 17px; height: 17px; }

/* Linha 2 — Barra de navegação (recolhível) */
.topnav-bar {
  height: 44px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  overflow: hidden;
  transition: height var(--dur-slow) var(--ease-std),
              opacity var(--dur-std) var(--ease-std),
              border-color var(--dur-slow) var(--ease-std);
}
.topnav-bar.nav-hidden {
  height: 0;
  opacity: 0;
  pointer-events: none;
  border-bottom-color: transparent;
}

/* Linha decorativa dourada no topo da navnbar */
.topnav-bar::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: var(--topbar-h);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
  pointer-events: none;
}

.topnav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.topnav-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav-label {
  font-size: 0.56rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 0 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topnav-items {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Item de navegação — pill compacto */
.topnav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--muted);
  transition: all var(--dur-std) var(--ease-std);
  white-space: nowrap;
  border: 1px solid transparent;
  user-select: none;
}
.topnav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.topnav-item:hover {
  color: var(--text-primary);
  background: var(--bg-glass-md);
}
.topnav-item.active {
  background: var(--gold-glow2);
  color: var(--gold-400);
  border-color: var(--border-active);
  font-weight: 600;
}

/* Separador entre seções */
.topnav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-base);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Botão + Novo Lead */
.topnav-new-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
  color: var(--text-inverse);
  font-size: 0.81rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--dur-std) var(--ease-std);
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.topnav-new-lead svg { width: 14px; height: 14px; }
.topnav-new-lead:hover {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201,168,76,0.3);
}

/* ── ÁREA DE CONTEÚDO (largura total, sem margin-left) ───── */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* (topbar já definido na seção SISTEMA DE NAVEGAÇÃO SUPERIOR) */

/* Busca topbar */
.topbar-search {
  position: relative;
  width: 240px;
}
.search-icon-inline {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 7px 14px 7px 30px;
  color: var(--text-primary);
  font-size: 0.82rem;
  transition: all var(--dur-std) var(--ease-std);
  outline: none;
}
.topbar-search input:focus {
  border-color: var(--border-active);
  background: var(--gold-glow2);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.topbar-search input::placeholder { color: var(--muted2); }

/* Clock */
.topbar-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--font-mono);
}
.clock-time {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.clock-date {
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* Badge do usuário */
.topbar-user-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  transition: all var(--dur-std) var(--ease-std);
  flex-shrink: 0;
}
.topbar-user-badge:hover {
  border-color: var(--border-active);
  background: var(--gold-glow2);
}
.topbar-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.topbar-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.topbar-user-logout {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 10px;
  transition: all var(--dur-fast) var(--ease-std);
  border: 1px solid transparent;
}
.topbar-user-logout:hover {
  color: var(--c-danger);
  border-color: rgba(232,67,67,0.25);
  background: rgba(232,67,67,0.1);
}

/* ── Área de Views ────────────────────────────────────────── */
.app-content {
  flex: 1;
  padding: 22px;
  min-width: 0;
}
.view-section {
  display: none;
  animation: viewFadeIn 220ms var(--ease-out-expo);
  min-width: 0;
}
.view-section.view-active { display: block; }
#view-pipeline { overflow-x: auto; }

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Botões ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 0.83rem;
  font-weight: 600;
  transition: all var(--dur-std) var(--ease-std);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-primary {
  background: var(--gold-500);
  color: var(--text-inverse);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: var(--gold-400);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 16px rgba(201,168,76,0.35), 0 4px 12px rgba(0,0,0,0.4);
}
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(1); }

.btn-secondary {
  background: transparent;
  border-color: var(--border-active);
  color: var(--gold-400);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--gold-glow2);
  border-color: rgba(201,168,76,0.5);
}

.btn-sm { padding: 5px 12px; font-size: 0.78rem; }

.btn-danger {
  background: rgba(239,68,68,0.1);
  color: var(--color-danger);
  border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.55);
}
.btn-wa {
  background: rgba(37,211,102,0.1);
  color: var(--c-wa);
  border-color: rgba(37,211,102,0.28);
}
.btn-wa:hover { background: rgba(37,211,102,0.22); }
.btn-ig {
  background: rgba(225,48,108,0.1);
  color: #E1306C;
  border-color: rgba(225,48,108,0.28);
}
.btn-ig:hover { background: rgba(225,48,108,0.2); }

.btn-icon { padding: 7px 10px; font-size: 1rem; }
.btn-ghost {
  background: none;
  border: none;
  color: var(--muted);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-glass-md); }
.btn-ghost i, .btn-ghost svg { width: 14px; height: 14px; }

/* ── Formulários ─────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group-full { grid-column: 1 / -1; }
.form-label {
  font-size: 0.67rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.87rem;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              background var(--dur-fast) var(--ease-std);
}
.form-input:focus {
  border-color: rgba(201,168,76,0.6);
  background: rgba(201,168,76,0.04);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.form-input::placeholder { color: var(--muted2); }
.form-textarea { resize: vertical; min-height: 80px; }
select.form-input option { background: var(--surface3); color: var(--text-primary); }
.form-color { padding: 4px 8px; height: 40px; cursor: pointer; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.69rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.badge-normal        { color: #888;           border-color: #88888828; background: #88888812; }
.badge-urgente       { color: var(--c-orc);   border-color: #E8A83828; background: #E8A83812; }
.badge-muito-urgente { color: var(--c-danger); border-color: #E8434328; background: #E8434312; }

/* ── Avatar ───────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* ── KPI Bar ──────────────────────────────────────────────── */
.kpi-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.kpi-bar::-webkit-scrollbar { height: 3px; }

.kpi-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 18px;
  min-width: 150px;
  flex: 1;
  transition: all var(--dur-std) var(--ease-std);
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-active), transparent);
  opacity: 0;
  transition: opacity var(--dur-std) var(--ease-std);
}
.kpi-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.kpi-card:hover::after { opacity: 1; }
.kpi-value {
  font-family: var(--font-disp);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--gold-400);
}
.kpi-label {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-icon {
  font-size: 1.2rem;
  margin-bottom: 6px;
  opacity: 0.7;
  display: flex;
  align-items: center;
}
.kpi-icon svg, .kpi-icon i { width: 22px; height: 22px; }

/* ── Ícones em botões de ação (Lucide via data-lucide) ─── */
.card-btn i, .card-btn svg   { width: 14px; height: 14px; display: block; }
.card-btn-mini i, .card-btn-mini svg { width: 12px; height: 12px; display: block; }
.btn-wa-sm i, .btn-wa-sm svg { width: 15px; height: 15px; display: block; }
.list-chart-icon i, .list-chart-icon svg { width: 14px; height: 14px; display: block; }
.prospect-tab i, .prospect-tab svg { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.kpi-followup { cursor: pointer; }
.kpi-followup:hover { border-color: rgba(139,108,240,0.35); }

/* ══════════════════════════════════════════════════════════
   PIPELINE KANBAN
   ══════════════════════════════════════════════════════════ */
.pipeline-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pipeline-dense-toggle {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 6px 14px;
}

.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 16px;
  align-items: flex-start;
  width: 100%;
}
.kanban-board-dense { gap: 8px; }

.kanban-col {
  min-width: 240px;
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-std) var(--ease-std);
}
.kanban-col-dense {
  min-width: 220px;
  width: 220px;
}
.kanban-col:hover { border-color: var(--border2); }

.kanban-col-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-base);
  border-top: 3px solid;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
}
.kanban-col-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}
.kanban-col-count {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.kanban-col-body {
  padding: 8px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overflow-x: hidden;
}
.kanban-col-body::-webkit-scrollbar { width: 2px; }

.col-empty {
  text-align: center;
  color: var(--muted2);
  font-size: 0.76rem;
  padding: 18px 0;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  margin: 2px;
}

/* ── Lead Card — Normal ───────────────────────────────────── */
.lead-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 10px;
  cursor: grab;
  transition: all var(--dur-std) var(--ease-std);
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  animation: cardSlideIn 200ms var(--ease-out-expo) both;
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lead-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  padding: 1px;
  background: linear-gradient(135deg, var(--border-active), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-std) var(--ease-std);
}
.lead-card:hover::before { opacity: 1; }
.lead-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), var(--shadow-gold);
  border-color: var(--border-hover);
}
.lead-card.dragging { opacity: 0.35; cursor: grabbing; transform: scale(1.03) rotate(1deg); }

.lead-card-header { display: flex; align-items: flex-start; gap: 8px; }
.lead-card-info { flex: 1; min-width: 0; }
.lead-card-name {
  display: block; font-size: 0.83rem; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-card-type {
  display: block; font-size: 0.71rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lead-area { font-size: 0.68rem; color: var(--muted); background: var(--surface3); padding: 2px 7px; border-radius: 4px; }
.lead-prazo { font-size: 0.7rem; }
.lead-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lead-canal { font-size: 0.69rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.lead-canal i, .lead-canal svg { width: 11px; height: 11px; flex-shrink: 0; }
.lead-valor { font-size: 0.77rem; font-weight: 600; }
.lead-card-actions { display: none; gap: 4px; justify-content: flex-end; }
.lead-card:hover .lead-card-actions { display: flex; }

.card-btn {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.73rem;
  color: var(--muted);
  background: var(--surface3);
  border: 1px solid var(--border2);
  transition: all var(--dur-fast) var(--ease-std);
}
.card-btn:hover { background: var(--surface4); color: var(--text-primary); }
.card-btn-danger:hover { color: var(--c-danger); border-color: rgba(232,67,67,0.3); background: rgba(232,67,67,0.1); }
.card-btn-convert:hover { color: #4CAF82; border-color: rgba(76,175,130,0.3); background: rgba(76,175,130,0.1); }

/* Drop zone ativa */
.drop-zone.drop-over {
  background: var(--gold-glow);
  border: 1px dashed var(--border-active);
  border-radius: var(--radius);
  box-shadow: inset 0 0 12px var(--gold-glow2);
}

/* Adiantado badge */
.lead-card-adiantado { display: flex; }
.adiantado-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.adiantado-ativo   { color: #4CAF82; background: rgba(76,175,130,0.1); border: 1px solid rgba(76,175,130,0.3); }
.adiantado-inativo { color: var(--muted2); background: transparent; border: 1px dashed var(--border2); cursor: pointer; }
.adiantado-inativo:hover { border-color: var(--gold-border); color: var(--muted); }

/* ── Lead Card — Compacto (modo denso) ───────────────────── */
.lead-card-compact {
  padding: 7px 10px;
  gap: 0;
  min-height: 52px;
  max-height: 72px;
  overflow: hidden;
  transition: max-height 0.22s ease,
              box-shadow var(--dur-std) var(--ease-std),
              border-color var(--dur-std) var(--ease-std),
              transform var(--dur-std) var(--ease-std);
  cursor: pointer;
}
.lead-card-compact.expanded {
  max-height: 380px;
}
.lead-card-compact:hover {
  transform: none;
  border-color: var(--border-hover);
}

/* Linha principal do card compacto */
.lc-compact-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  min-width: 0;
}
.lc-urg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lc-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-area {
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--surface3);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lc-valor {
  font-size: 0.74rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Mini botões de ação (visíveis só no hover do card compacto) */
.card-actions-hover {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-std);
  flex-shrink: 0;
}
.lead-card-compact:hover .card-actions-hover { opacity: 1; }
.card-btn-mini {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface3);
  border: 1px solid var(--border2);
  transition: all var(--dur-fast) var(--ease-std);
}
.card-btn-mini:hover { background: var(--surface4); color: var(--text-primary); }

/* Conteúdo expandido do card compacto */
.lc-expanded {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-base);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeInScale 180ms var(--ease-std) both;
}
.lc-exp-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.78rem;
}
.lc-exp-row-full { flex-direction: column; gap: 2px; }
.lc-exp-label {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 52px;
  flex-shrink: 0;
}
.lc-exp-val {
  color: var(--text-primary);
  word-break: break-word;
}
.lc-exp-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Search bar pipeline */
.pipeline-search-bar { flex: 1; }
.pipeline-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.pipeline-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
}
.pipeline-search-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 7px 32px 7px 30px;
  color: var(--text-primary);
  font-size: 0.83rem;
  outline: none;
  transition: all var(--dur-std) var(--ease-std);
}
.pipeline-search-input:focus {
  border-color: var(--border-active);
  background: var(--gold-glow2);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.pipeline-search-clear {
  position: absolute;
  right: 10px;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.pipeline-search-clear:hover { color: var(--text-primary); }
.pipeline-search-result { font-size: 0.79rem; color: var(--muted); margin-top: 4px; display: block; }

/* ── Modais ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 220ms ease;
}
.modal-overlay.modal-open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--shadow-gold);
  transform: scale(0.95) translateY(12px);
  transition: transform 300ms var(--ease-spring);
  animation: fadeInScale 300ms var(--ease-spring) both;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-overlay.modal-open .modal-box { transform: scale(1) translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 15px;
  border-bottom: 1px solid var(--border-base);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-disp);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.modal-close {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.1rem;
  transition: all var(--dur-std) var(--ease-std);
  background: var(--surface3);
  border: 1px solid transparent;
}
.modal-close:hover {
  color: var(--text-primary);
  background: var(--surface4);
  border-color: var(--border2);
  transform: rotate(90deg);
}
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--border-base);
  flex-shrink: 0;
}

/* ── Detalhe do Lead ──────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-base); font-size: 0.86rem; }
.detail-key { color: var(--muted); font-size: 0.77rem; min-width: 70px; }
.detail-text { font-size: 0.83rem; color: var(--muted); line-height: 1.7; padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: var(--radius-md); border: 1px solid var(--border-base); margin-bottom: 12px; }
.hist-list { max-height: 200px; overflow-y: auto; }
.hist-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-base); }
.hist-dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.hist-acao { font-size: 0.84rem; }

/* ── Toast Notifications ──────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 11px 16px;
  min-width: 260px;
  max-width: 360px;
  box-shadow: var(--shadow-md);
  pointer-events: all;
  opacity: 0;
  transform: translateX(24px);
  transition: all 280ms var(--ease-out-expo);
  backdrop-filter: blur(8px);
}
.toast-show { opacity: 1; transform: translateX(0); }
.toast-hide { opacity: 0; transform: translateX(24px); }
.toast-success { border-left: 3px solid var(--color-success); }
.toast-error   { border-left: 3px solid var(--color-danger); }
.toast-info    { border-left: 3px solid var(--color-info); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-icon { font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon   { color: var(--color-danger); }
.toast-info .toast-icon    { color: var(--color-info); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-msg { flex: 1; font-size: 0.83rem; line-height: 1.4; }
.toast-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 2px; line-height: 1; opacity: 0.6; transition: opacity var(--transition); }
.toast-close:hover { opacity: 1; }

/* ── Loader Global ────────────────────────────────────────── */
#global-loader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9998; display: none; overflow: hidden; }
#global-loader.loader-visible { display: block; }
#global-loader::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-400), transparent);
  animation: loaderSlide 1.1s infinite ease-in-out;
}
@keyframes loaderSlide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

/* ── Confirm Dialog ───────────────────────────────────────── */
.confirm-overlay { z-index: 1100; }
.confirm-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.confirm-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 2px solid var(--border-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto 16px;
  color: var(--gold);
}
.confirm-icon.confirm-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--color-danger); }
.confirm-title { font-family: var(--font-disp); font-size: 1.35rem; letter-spacing: 0.5px; margin-bottom: 10px; font-weight: 700; }
.confirm-msg { font-size: 0.87rem; color: var(--muted); margin-bottom: 22px; line-height: 1.65; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }

/* ══════════════════════════════════════════════════════════
   VIEW CAPTAÇÃO — estilos para o sistema de prospecção
   (Estes estavam AUSENTES — causando layout quebrado)
   ══════════════════════════════════════════════════════════ */

/* Layout geral da view */
.prospect-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cabeçalho com título e KPI de abordagens */
.prospect-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.prospect-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* KPI card de abordagens diárias */
.daily-counter-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 8px 14px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.daily-counter-card.limit-reached {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.06);
}
.daily-counter-icon { font-size: 1.1rem; display: inline-flex; align-items: center; }
.daily-counter-icon i, .daily-counter-icon svg { width: 18px; height: 18px; }
.daily-counter-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.daily-counter-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-400);
  font-family: var(--font-mono);
}
.daily-counter-card.limit-reached .daily-counter-val { color: var(--color-danger); }

/* Barra de busca da prospecção */
.prospect-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-base);
  border-radius: var(--r-full);
  padding: 0 12px;
  transition: border-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std);
}
.prospect-search-bar:focus-within {
  border-color: rgba(201,168,76,0.5);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.prospect-search-icon { font-size: 0.85rem; opacity: 0.5; flex-shrink: 0; margin-right: 4px; display: inline-flex; align-items: center; }
.prospect-search-icon i, .prospect-search-icon svg { width: 15px; height: 15px; }
.prospect-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.87rem;
  padding: 10px 6px;
  min-width: 0;
}
.prospect-search-input::placeholder { color: var(--muted2); }
.prospect-search-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--dur-fast);
}
.prospect-search-clear:hover { color: var(--text-primary); }

/* Tabs de navegação da prospecção */
.prospect-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-base);
}
.prospect-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 0.80rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-std) var(--ease-std);
  white-space: nowrap;
}
.prospect-tab:hover {
  background: var(--bg-glass-md);
  color: var(--text-primary);
  border-color: var(--border2);
}
.prospect-tab-active {
  background: var(--gold-glow2);
  color: var(--gold-400);
  border-color: var(--border-active);
  font-weight: 600;
}

/* Badges das tabs */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.67rem;
  font-weight: 700;
  background: var(--surface3);
  color: var(--muted);
}
.tab-badge-warn {
  background: rgba(239,68,68,0.15);
  color: var(--color-danger);
}
.prospect-tab-active .tab-badge {
  background: var(--gold-glow);
  color: var(--gold-400);
}

/* Painéis de conteúdo das tabs */
.prospect-tab-pane { display: block; }
.prospect-tab-hidden { display: none; }

/* Fila de leads */
.prospect-queue { display: flex; flex-direction: column; gap: 10px; }
.queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.queue-list { display: flex; flex-direction: column; gap: 8px; }
.followup-tip { font-size: 0.76rem; color: var(--c-analise); }

/* Card de lead na fila */
.queue-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 12px;
  transition: all var(--dur-std) var(--ease-std);
}
.queue-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateX(2px);
}
.queue-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.score-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
  font-family: var(--font-mono);
  min-width: 36px;
  text-align: center;
}
.queue-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.queue-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-meta {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.queue-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* Pills de tag */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 500;
  background: var(--surface3);
  color: var(--muted);
  border: 1px solid var(--border2);
  white-space: nowrap;
}
.gold-tag { color: var(--gold-400); background: var(--gold-glow2); border-color: var(--border-subtle); }
.muted-tag { color: var(--muted2); background: transparent; }
.tag-success { color: var(--color-success); background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); }

/* ── Card de Follow-up v2 ─────────────────────────────────── */
.followup-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-left: 3px solid var(--fu-accent, var(--gold));
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--dur-std) var(--ease-std);
}
.followup-card-v2:hover { border-color: var(--fu-accent, var(--gold)); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.fu-card-top { display: flex; gap: 12px; align-items: flex-start; }
.fu-days-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid;
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.fu-days-num { font-size: 1.6rem; font-weight: 800; line-height: 1; font-family: var(--font-mono); }
.fu-days-lbl { font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.fu-days-sub { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }
.fu-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fu-card-history { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fu-progress-track { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.fu-progress-fill { height: 100%; border-radius: 2px; transition: width 400ms var(--ease-out-expo); }
.fu-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Filtro de follow-up */
.followup-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 0 12px;
}
.fu-filter-btn {
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: all var(--dur-std) var(--ease-std);
}
.fu-filter-btn:hover { background: var(--bg-glass-md); color: var(--text-primary); }
.fu-filter-active {
  background: color-mix(in srgb, var(--fu-color, var(--gold)) 12%, transparent);
  color: var(--fu-color, var(--gold-400));
  border-color: color-mix(in srgb, var(--fu-color, var(--gold)) 40%, transparent);
  font-weight: 600;
}

/* Seção de fila bloqueada (pending) */
.fu-pending-section {
  margin-top: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fu-pending-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-base);
}
.fu-pending-icon { font-size: 1rem; display: inline-flex; align-items: center; }
.fu-pending-icon i, .fu-pending-icon svg { width: 16px; height: 16px; }
.fu-pending-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.fu-pending-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface3);
  color: var(--muted);
  border: 1px solid var(--border2);
}
.fu-pending-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.fu-pending-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 10px;
}
.fu-pending-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.fu-pending-days { font-size: 0.95rem; font-weight: 700; color: var(--color-info); font-family: var(--font-mono); }
.fu-pending-sublbl { font-size: 0.62rem; color: var(--muted); }

/* ── Aba Importar ─────────────────────────────────────────── */
.import-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.import-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.import-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}
.import-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.csv-hint {
  background: var(--bg-secondary);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hint-title { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.csv-hint code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-400); }

/* ── Aba Descoberta ───────────────────────────────────────── */
.discovery-layout { display: flex; flex-direction: column; gap: 16px; }
.discovery-header { margin-bottom: 4px; }
.discovery-search-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.discovery-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.discovery-targets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.discovery-target-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 14px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.discovery-target-card:hover { border-color: var(--border-hover); }
.discovery-target-card > div { flex: 1; min-width: 0; }
.discovery-target-card strong { font-size: 0.87rem; font-weight: 600; display: block; margin-bottom: 3px; }
.discovery-target-icon { font-size: 1.3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.discovery-target-icon i, .discovery-target-icon svg { width: 22px; height: 22px; color: var(--gold-400); }
.discovery-paste-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Aba Mensagens ────────────────────────────────────────── */
.messages-layout { display: flex; flex-direction: column; gap: 16px; }
.messages-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.msg-section {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.msg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-base);
  background: rgba(255,255,255,0.02);
}
.msg-section-header-star { border-left: 3px solid var(--gold-500); }
.msg-section-header-left { display: flex; align-items: center; gap: 10px; }
.msg-section-icon { font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.msg-section-icon i, .msg-section-icon svg { width: 18px; height: 18px; }
.msg-section-title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.msg-section-sub { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.msg-section-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Card de mensagem */
.msg-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.msg-card:hover { border-color: var(--border-hover); }
.msg-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.msg-text { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Aba Analytics ────────────────────────────────────────── */
.analytics-layout { display: flex; flex-direction: column; gap: 16px; }

/* ── Seção captacao-layout legada ─────────────────────────── */
.captacao-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: flex-start; }
.captacao-form-card { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); padding: 22px; }
.captacao-form-header { margin-bottom: 18px; }
.captacao-form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-base); }
.captacao-recent { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); padding: 18px; position: sticky; top: calc(var(--topbar-h) + 20px); }
.captacao-recent h3 { margin-bottom: 14px; }
.recent-lead-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-base); }
.recent-lead-item:last-child { border-bottom: none; }
.recent-lead-info { flex: 1; min-width: 0; }
.recent-lead-name { display: block; font-size: 0.84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-lead-meta { display: block; font-size: 0.72rem; color: var(--muted); }
.recent-lead-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.recent-lead-date { font-size: 0.7rem; color: var(--muted); }
.empty-state-sm { text-align: center; color: var(--muted); font-size: 0.84rem; padding: 16px 0; }

/* Seção card genérico de prospecção */
.prosp-section-card { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); padding: 18px; margin-bottom: 14px; }
.prosp-lead-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--border-base); margin-bottom: 8px; transition: all var(--dur-std) var(--ease-std); background: rgba(255,255,255,0.01); }
.prosp-lead-row:hover { border-color: var(--border2); background: rgba(255,255,255,0.025); }
.prosp-lead-info { flex: 1; min-width: 0; }
.prosp-lead-name { font-size: 0.9rem; font-weight: 600; }
.prosp-lead-meta { font-size: 0.76rem; color: var(--muted); }

/* Analytics de prospecção */
.analytic-bar-day { height: 42px; background: var(--surface3); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; position: relative; }
.analytic-bar-fill { width: 100%; background: var(--gold); border-radius: 4px 4px 0 0; transition: height 500ms var(--ease-out-expo); }
.analytic-day-label { font-size: 0.68rem; color: var(--muted); text-align: center; margin-top: 4px; }

/* ── View Métricas ────────────────────────────────────────── */
.metrics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-large { padding: 18px; }
.metrics-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-card { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); padding: 18px; transition: border-color var(--dur-std) var(--ease-std); }
.chart-card:hover { border-color: var(--border2); }
.chart-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; }
.bar-label { font-size: 0.77rem; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--surface3); border-radius: 99px; height: 22px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 99px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9); min-width: 28px; transition: width 600ms var(--ease-out-expo); }
.list-chart { display: flex; flex-direction: column; gap: 10px; }
.list-chart-row { display: grid; grid-template-columns: 24px 1fr 60px 30px 36px; align-items: center; gap: 8px; }
.list-chart-icon { font-size: 0.9rem; text-align: center; }
.list-chart-label { font-size: 0.82rem; }
.list-chart-track { background: var(--surface3); border-radius: 99px; height: 6px; overflow: hidden; }
.list-chart-fill { height: 100%; background: var(--gold); border-radius: 99px; transition: width 600ms var(--ease-out-expo); }
.list-chart-count { font-size: 0.78rem; font-weight: 600; text-align: right; }
.list-chart-pct { font-size: 0.72rem; color: var(--muted); text-align: right; }
.urgencia-chart { display: flex; justify-content: space-around; align-items: center; padding: 8px 0 16px; }
.urgencia-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.urgencia-circle { width: 64px; height: 64px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; }
.urgencia-label { font-size: 0.75rem; font-weight: 500; }
.urgencia-pct { font-size: 0.7rem; }
.metrics-summary { border-top: 1px solid var(--border-base); padding-top: 12px; display: flex; gap: 16px; }
.summary-item { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }

/* ── View Clientes ────────────────────────────────────────── */
.clients-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.clients-search-bar { display: flex; gap: 10px; flex: 1; max-width: 520px; }
.search-input { flex: 1; }
.filter-select { max-width: 180px; }
.clients-stats { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-pill { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: 20px; padding: 4px 14px; font-size: 0.78rem; display: flex; gap: 5px; align-items: center; transition: border-color var(--dur-std) var(--ease-std); }
.stat-pill:hover { border-color: var(--border-active); }
.stat-pill span { font-weight: 600; }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.client-card { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: all var(--dur-std) var(--ease-std); }
.client-card:hover { border-color: var(--border2); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.client-card-header { display: flex; align-items: flex-start; gap: 12px; }
.client-card-info { flex: 1; min-width: 0; }
.client-name { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; }
.client-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.client-card-menu { display: flex; gap: 4px; flex-shrink: 0; }
.client-card-body { display: flex; flex-direction: column; gap: 5px; }
.client-info-row { display: flex; gap: 8px; align-items: center; font-size: 0.83rem; }
.client-info-icon { font-size: 0.8rem; width: 18px; text-align: center; flex-shrink: 0; }
.client-obs { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.client-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border-base); gap: 8px; }
.client-pot { font-size: 0.85rem; font-weight: 600; }
.btn-wa-sm { background: rgba(37,211,102,0.1); color: var(--c-wa); padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; border: 1px solid rgba(37,211,102,0.28); transition: background var(--dur-fast); }
.btn-wa-sm:hover { background: rgba(37,211,102,0.22); }
.client-since { font-size: 0.7rem; }
.client-area { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.client-vip-badge { color: var(--gold-400); display: flex; align-items: center; flex-shrink: 0; }
.client-vip-badge i, .client-vip-badge svg { width: 16px; height: 16px; }
.client-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.client-card-meta { display: flex; flex-direction: column; gap: 5px; }
.client-meta-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.client-meta-row i, .client-meta-row svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }
.client-card-actions { display: flex; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--border-base); flex-wrap: wrap; }
.clients-search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── Calendário ───────────────────────────────────────────── */
.cal-wrapper { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 48px); }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-base); gap: 12px; flex-wrap: wrap; flex-shrink: 0; background: var(--bg-card); }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-current-title { font-family: var(--font-disp); font-size: 1.35rem; letter-spacing: 0.8px; min-width: 200px; text-align: center; font-weight: 700; }
.cal-view-switcher { display: flex; background: var(--surface3); border: 1px solid var(--border2); border-radius: var(--radius-md); overflow: hidden; }
.cal-view-btn { padding: 6px 14px; font-size: 0.82rem; color: var(--muted); background: none; border: none; cursor: pointer; transition: all var(--dur-std) var(--ease-std); font-weight: 500; }
.cal-view-btn.active { background: var(--gold-500); color: var(--text-inverse); font-weight: 700; }
.cal-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.cal-month { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cal-header-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-base); }
.cal-day-name { text-align: center; padding: 8px; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); flex: 1; overflow: hidden; }
.cal-cell { border-right: 1px solid var(--border-base); border-bottom: 1px solid var(--border-base); padding: 6px; overflow: hidden; transition: background var(--dur-std) var(--ease-std); min-height: 80px; }
.cal-cell:hover { background: rgba(255,255,255,0.02); }
.cal-cell-other { opacity: 0.3; }
.cal-cell-today { background: var(--gold-glow) !important; }
.cal-cell-day { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8rem; font-weight: 500; margin-bottom: 4px; }
.cal-day-today { background: var(--gold-500); color: var(--text-inverse); font-weight: 700; }
.cal-cell-events { display: flex; flex-direction: column; gap: 2px; }
.cal-event-chip { font-size: 0.67rem; padding: 2px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity var(--dur-fast); }
.cal-event-chip:hover { opacity: 0.8; }
.cal-week { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cal-week-header { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--border-base); flex-shrink: 0; }
.cal-week-day-header { text-align: center; padding: 8px 4px; border-left: 1px solid var(--border-base); }
.cal-today-header { background: var(--gold-glow); }
.cal-week-day-name { display: block; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cal-week-day-num { display: block; font-size: 1.2rem; letter-spacing: 0.5px; font-family: var(--font-disp); }
.cal-week-body { flex: 1; overflow-y: auto; }
.cal-week-row { display: grid; grid-template-columns: 56px repeat(7, 1fr); min-height: var(--cal-row-h, 54px); border-bottom: 1px solid var(--border-base); }
.cal-time-gutter { font-size: 0.7rem; color: var(--muted2); padding: 4px 8px 0 4px; text-align: right; border-right: 1px solid var(--border-base); white-space: nowrap; flex-shrink: 0; }
.cal-week-cell { border-left: 1px solid var(--border-base); padding: 2px; cursor: pointer; transition: background var(--dur-fast); }
.cal-week-cell:hover { background: rgba(255,255,255,0.02); }
.cal-week-event { font-size: 0.7rem; padding: 2px 5px; border-radius: 3px; cursor: pointer; margin-bottom: 2px; transition: opacity var(--dur-fast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cal-day-header { padding: 12px 16px; border-bottom: 1px solid var(--border-base); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; font-size: 0.95rem; font-weight: 500; }
.cal-day-body { flex: 1; overflow-y: auto; }
.cal-day-hour { display: grid; grid-template-columns: 56px 1fr; min-height: var(--cal-row-h, 54px); border-bottom: 1px solid var(--border-base); }
.cal-current-hour { background: var(--gold-glow); }
.cal-day-events { padding: 4px 8px; cursor: pointer; transition: background var(--dur-fast); }
.cal-day-events:hover { background: rgba(255,255,255,0.02); }
.cal-day-event { padding: 6px 10px; border-radius: var(--radius-md); margin-bottom: 4px; cursor: pointer; transition: opacity var(--dur-fast); }
.cal-day-event:hover { opacity: 0.85; }
.cal-day-event-time { font-size: 0.7rem; color: var(--muted); margin-bottom: 2px; }
.cal-day-event-title { font-size: 0.86rem; font-weight: 500; }
.cal-day-event-loc { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }

/* ── Kanban Pessoal ───────────────────────────────────────── */
.kanban-page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.kanban-personal-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.kanban-personal-col { min-width: 260px; width: 260px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--dur-std) var(--ease-std); }
.kanban-personal-col:hover { border-color: var(--border2); }
.kanban-personal-col-header { padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-base); border-top: 3px solid; flex-shrink: 0; background: rgba(0,0,0,0.15); }
.kanban-col-count-badge { font-size: 0.69rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.kanban-personal-col-title { font-size: 0.85rem; font-weight: 600; flex: 1; cursor: default; }
.col-title-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border-active); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 0.85rem; outline: none; }
.col-actions { display: flex; gap: 4px; }
.kanban-personal-col-body { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 80px; max-height: 520px; overflow-y: auto; }
.col-empty-personal { text-align: center; color: var(--muted2); font-size: 0.77rem; padding: 18px 0; border: 1px dashed var(--border2); border-radius: var(--radius-md); margin: 4px; }
.add-task-btn { padding: 9px 12px; font-size: 0.8rem; color: var(--muted); text-align: left; transition: all var(--dur-std) var(--ease-std); border-top: 1px solid var(--border-base); width: 100%; background: none; }
.add-task-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }

/* Task Card */
.task-card { background: var(--bg-card-hover); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; transition: all var(--dur-std) var(--ease-std); display: flex; flex-direction: column; gap: 7px; animation: cardFadeIn 160ms var(--ease-out-expo) both; }
@keyframes cardFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.task-card:hover { border-color: var(--border-active); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
.task-card.dragging { opacity: 0.35; cursor: grabbing; transform: scale(1.02) rotate(1deg); }
.task-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.task-title { font-size: 0.86rem; font-weight: 500; line-height: 1.45; flex: 1; }
.task-prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.task-desc { font-size: 0.76rem; line-height: 1.5; }
.task-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.task-date { font-size: 0.72rem; }
.task-color-picker { display: flex; align-items: center; gap: 10px; }
.task-color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.task-color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all var(--dur-std) var(--ease-std); display: flex; align-items: center; justify-content: center; }
.task-color-swatch:hover, .task-color-swatch-active { border-color: var(--text-primary); transform: scale(1.15); }
.task-color-none { background: var(--surface3); color: var(--muted); font-size: 0.8rem; border: 1px solid var(--border2); }
.task-color-custom-label { cursor: pointer; font-size: 1.1rem; line-height: 1; }
.task-color-custom-label input[type="color"] { display: none; }

/* ── Empty states ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-icon { font-size: 2.2rem; display: flex; align-items: center; justify-content: center; }
.empty-icon i, .empty-icon svg { width: 44px; height: 44px; color: var(--gold-700); opacity: 0.7; }
.error-state { text-align: center; padding: 48px; color: var(--color-danger); font-size: 0.9rem; }

/* ── Skeleton ─────────────────────────────────────────────── */
.skeleton-card { background: linear-gradient(90deg, var(--surface3) 25%, var(--surface4) 50%, var(--surface3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; min-height: 80px; border-radius: var(--r-md); }
.skeleton-line { height: 11px; background: linear-gradient(90deg, var(--surface3) 25%, var(--surface4) 50%, var(--surface3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; margin-bottom: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Supabase banner ──────────────────────────────────────── */
.sb-banner { background: rgba(201,168,76,0.08); border: 1px solid var(--border-active); border-radius: var(--r-sm); padding: 10px 16px; margin-bottom: 16px; font-size: 0.82rem; color: var(--gold); display: flex; align-items: center; gap: 8px; }

/* ── Histórico de Atividades ──────────────────────────────── */
.history-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 16px; align-items: center; }
.history-search { max-width: 220px; flex: 1; }
.history-filter-select { max-width: 170px; }
.history-filter-date { max-width: 140px; }
.history-table-wrap { overflow-x: auto; border: 1px solid var(--border-base); border-radius: var(--r-md); }
.history-table { width: 100%; border-collapse: collapse; }
.history-table thead tr { background: var(--surface3); font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.history-table thead th { padding: 10px 16px; text-align: left; white-space: nowrap; }
.history-row { border-bottom: 1px solid var(--border-base); transition: background var(--dur-fast); }
.history-row:hover { background: rgba(255,255,255,0.02); }
.history-cell-date  { padding: 10px 16px; white-space: nowrap; color: var(--muted); font-size: 0.78rem; }
.history-cell-user  { padding: 10px 16px; }
.history-cell-title { padding: 10px 16px; font-weight: 500; color: var(--text-primary); max-width: 200px; }
.history-cell-evento{ padding: 10px 16px; }
.history-cell-detalhe { padding: 10px 16px; color: var(--muted); font-size: 0.82rem; }
.history-badge { display: inline-block; font-size: 0.69rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.history-user-badge { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; }
.history-sync-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1px solid; vertical-align: middle; }
.history-sync-ok      { color: var(--color-success); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.history-sync-warn    { color: var(--c-orc); border-color: rgba(232,168,56,0.3); background: rgba(232,168,56,0.08); }
.history-sync-offline { color: var(--muted); border-color: var(--border2); background: rgba(255,255,255,0.03); }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.history-pagination { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border-base); }
.history-page-info { font-size: 0.79rem; color: var(--muted); }

/* ── Focus ────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--border-active); outline-offset: 2px; }
body.modal-active { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   LANDING PAGE — Tela de entrada
   ══════════════════════════════════════════════════════════ */
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: var(--op, 0.18); }
  80%  { opacity: var(--op, 0.18); }
  100% { transform: translateY(-110vh) scale(0.5); opacity: 0; }
}
@keyframes landingFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes landingExit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(201,168,76,0.2)); }
  50%       { filter: drop-shadow(0 0 36px rgba(201,168,76,0.55)); }
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#landing-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(ellipse at 50% 40%, #1a1400 0%, #0a0a0a 60%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#landing-screen.landing-exit {
  animation: landingExit 520ms ease forwards;
  pointer-events: none;
}

/* Canvas de partículas */
.landing-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lp { position: absolute; border-radius: 50%; background: var(--gold-500); display: block; }

.landing-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  animation: landingFadeIn 700ms 100ms ease both;
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
}
.landing-logo-wrap { margin-bottom: 24px; }
.landing-logo {
  max-width: 200px;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  animation: logoPulse 3.5s ease-in-out infinite;
}
.landing-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  margin: 0 auto 16px;
}
.landing-sub {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.landing-version { font-size: 0.64rem; color: var(--muted2); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 20px; }

/* ══════════════════════════════════════════════════════════
   LOGIN CARD — Formulário clássico v3.0
   ══════════════════════════════════════════════════════════ */
.login-card {
  width: 100%;
  background: rgba(20,20,20,0.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--r-xl);
  padding: 28px 24px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: fadeInScale 400ms var(--ease-spring) both;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Grupo de input */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-group label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Wrapper com ícone */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  flex-shrink: 0;
}
.input-wrap input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 11px 40px 11px 38px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              background var(--dur-fast) var(--ease-std);
}
.input-wrap input:focus {
  border-color: var(--gold-500);
  background: rgba(201,168,76,0.06);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.input-wrap input::placeholder { color: var(--muted2); }

/* Botão mostrar/ocultar senha */
.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--dur-fast);
}
.toggle-password:hover { color: var(--text-primary); }
.toggle-password svg { width: 16px; height: 16px; }

/* Opções de login (lembrar acesso) */
.login-options {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted);
  user-select: none;
}
.checkbox-label input[type="checkbox"] { display: none; }
.checkbox-custom {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast) var(--ease-std);
  flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--gold-500);
  border-color: var(--gold-500);
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  font-size: 10px;
  color: var(--text-inverse);
  font-weight: 700;
}

/* Botão de login */
.btn-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: all 250ms var(--ease-spring);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
  margin-top: 4px;
}
.btn-login:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 30px rgba(201,168,76,0.5);
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
}
.btn-login:active:not(:disabled) { transform: translateY(0) scale(1); }
.btn-login:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.btn-login-loading { opacity: 0.7; cursor: wait; }
.btn-login svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Mensagem de erro */
.login-error {
  font-size: 0.76rem;
  color: var(--color-danger);
  text-align: center;
  min-height: 16px;
  display: none;
}

/* Shake animation no card se credenciais erradas */
@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}
.login-shake { animation: loginShake 0.45s ease; }

/* ── Animações globais ────────────────────────────────────── */
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50%       { box-shadow: 0 0 0 6px transparent; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  #sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important; /* Force full width on mobile open */
  }
  #sidebar.sidebar-open { transform: translateX(0); }
  #sidebar.mini, #sidebar.hidden {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
  }
  #sidebar.mini.sidebar-open, #sidebar.hidden.sidebar-open {
    transform: translateX(0);
  }
  .app-main { margin-left: 0 !important; }
  .topbar-menu-btn { display: flex; }
  .topbar-search { width: auto; flex: 1; }

  .captacao-layout { grid-template-columns: 1fr; }
  .captacao-recent { position: static; }
  .metrics-charts-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid   { grid-template-columns: 1fr; }
  .form-group-full { grid-column: 1; }
  .import-layout { grid-template-columns: 1fr; }
  .cal-toolbar { padding: 10px 12px; }
  .cal-current-title { font-size: 1.05rem; min-width: auto; }
}

@media (max-width: 600px) {
  .app-content { padding: 14px; }
  .kpi-bar { flex-direction: row; }
  .kpi-card { min-width: 140px; }
  .clients-header { flex-direction: column; align-items: stretch; }
  .clients-search-bar { flex-direction: column; }
  .modal-box { max-height: 95vh; border-radius: var(--r-md); }
  .kanban-board, .kanban-personal-board { gap: 8px; }
  .kanban-col, .kanban-personal-col { min-width: 200px; width: 200px; }
  #toast-container { bottom: 12px; right: 12px; }
  .toast { min-width: 220px; }
  .login-card { padding: 22px 18px 18px; }
  .prospect-tabs { gap: 4px; }
  .prospect-tab { padding: 6px 10px; font-size: 0.76rem; }
  .discovery-targets { grid-template-columns: 1fr; }

  /* ── Topbar: esconder elementos pesados em telas pequenas ── */
  .topbar-clock { display: none; }
  .topbar-search { display: none; }
  .topbar-user-name,
  .topbar-user-logout { display: none; }
  .topbar-user-badge {
    padding: 4px 6px;
    border-radius: 50%;
  }

  /* ── Topnav: rolagem horizontal ───────────────────────── */
  .topnav-bar {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 0 8px;
    scrollbar-width: none;
  }
  .topnav-bar::-webkit-scrollbar { display: none; }
  .topnav-label { display: none; }
  .topnav-divider { margin: 0 2px; height: 16px; }
  .topnav-item { padding: 4px 9px; font-size: 0.76rem; }
  .topnav-new-lead span,
  .topnav-importar span { display: none; }
  .topnav-new-lead,
  .topnav-importar { padding: 5px 8px; }
}

/* ══════════════════════════════════════════════════════════
   MÓDULO MENSAGENS — Cards de mensagem (msg-card)
   ══════════════════════════════════════════════════════════ */
.msg-card {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.msg-card:hover { border-color: var(--border-hover); }
.msg-card-star  { border-left: 3px solid var(--gold-500); }
.msg-inactive   { opacity: 0.5; }

.msg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.msg-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.msg-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.msg-card-body {
  font-size: 0.79rem;
  color: var(--muted);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-base);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  font-family: var(--font-sans);
  max-height: 120px;
  overflow-y: auto;
}
.msg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* Toggle switch (ativo/inativo de mensagem) */
.toggle-sw {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-sw input { display: none; }
.toggle-track {
  width: 32px;
  height: 18px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 9px;
  position: relative;
  transition: background var(--dur-std) var(--ease-std),
              border-color var(--dur-std) var(--ease-std);
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
  top: 2px; left: 2px;
  transition: transform var(--dur-std) var(--ease-std),
              background var(--dur-std) var(--ease-std);
}
.toggle-sw input:checked + .toggle-track {
  background: var(--gold-glow);
  border-color: var(--border-active);
}
.toggle-sw input:checked + .toggle-track::after {
  transform: translateX(14px);
  background: var(--gold-500);
}

/* ══════════════════════════════════════════════════════════
   MÓDULO ANALYTICS — Prospecção
   ══════════════════════════════════════════════════════════ */
.analytics-layout { display: flex; flex-direction: column; gap: 16px; }

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.analytics-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.analytics-kpi:hover { border-color: var(--border-hover); }
.analytics-kpi-val {
  font-family: var(--font-disp);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}
.analytics-kpi-label {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}

.analytics-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 16px;
}
.analytics-chart-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Barras verticais */
.analytics-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 80px;
  justify-content: space-between;
}
.analytics-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.analytics-bar {
  width: 100%;
  background: var(--gold-500);
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 4px;
  transition: height 500ms var(--ease-out-expo);
}
.analytics-bar-val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--gold-400);
  white-space: nowrap;
}
.analytics-bar-lbl {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

/* Barras horizontais (por canal) */
.analytics-channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.analytics-bar-h-wrap {
  flex: 1;
  height: 8px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
}
.analytics-bar-h {
  height: 100%;
  background: var(--gold-500);
  border-radius: 4px;
  transition: width 500ms var(--ease-out-expo);
}

/* Grid split (dois charts lado a lado) */
.analytics-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Linha de mensagem no analytics */
.analytics-msg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-base);
  font-size: 0.82rem;
}
.analytics-msg-row:last-child { border-bottom: none; }
.analytics-msg-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seção de configuração */
.config-section {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.config-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .analytics-split { grid-template-columns: 1fr; }
  .analytics-bars  { height: 60px; }
}

/* ══════════════════════════════════════════════════════════
   BLOCO DE NOTAS — namespace .nota-*
   Escopado a #view-notas / .nota-* — não vaza para Gestão.
   ══════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────── */
#view-notas {
  padding: 24px 28px 56px;
}

/* ── Header ─────────────────────────────────────────────── */
.nota-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.nota-view-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.nota-btn-nova {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  min-height: 44px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-sm);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast);
  white-space: nowrap;
}
.nota-btn-nova:hover { background: rgba(201,168,76,0.2); }
.nota-btn-nova i { width: 15px; height: 15px; }

/* ── Busca ───────────────────────────────────────────────── */
.nota-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.nota-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.nota-search {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: var(--bg-input);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 13.5px;
  transition: border-color var(--dur-fast);
}
.nota-search:focus { outline: none; border-color: var(--gold-border); }

/* ── Chips de tipo ────────────────────────────────────────── */
.nota-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.nota-chip {
  padding: 5px 13px;
  min-height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-base);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.nota-chip:hover { border-color: var(--gold-border); color: var(--gold); }
.nota-chip--active {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold);
}

/* ── Seção Fixadas ────────────────────────────────────────── */
.nota-section { margin-bottom: 20px; }
.nota-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.nota-section-label i { width: 12px; height: 12px; }

/* ── Grid ────────────────────────────────────────────────── */
.nota-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nota-grid--below-pinned { margin-top: 6px; }

/* ── Card ────────────────────────────────────────────────── */
.nota-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-left: 4px solid var(--nota-cor, #C9A84C);
  border-radius: var(--r-md);
  padding: 13px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-fast), transform 150ms;
  animation: nota-card-in var(--dur-std) var(--ease-out) var(--nota-delay, 0ms) both;
}
@keyframes nota-card-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .nota-card { animation: none; }
}
.nota-card:hover { background: var(--bg-card-hover); }
.nota-card:active { transform: scale(0.97); }
.nota-card--swiped { overflow: visible; }

/* ── Badge de tipo ────────────────────────────────────────── */
.nota-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: rgba(201,168,76,.12);
  color: var(--gold);
}
.nota-badge--lembrete { background: rgba(58,123,213,.12); color: #3A7BD5; }
.nota-badge--prompt   { background: rgba(139,108,240,.12); color: #8B6CF0; }
.nota-badge--tarefa   { background: rgba(61,184,140,.12);  color: #3DB88C; }

/* ── Título e preview ─────────────────────────────────────── */
.nota-card-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nota-card-preview {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* ── Footer do card ───────────────────────────────────────── */
.nota-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-base);
}
.nota-card-data {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.nota-card-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ── Botões de ícone ──────────────────────────────────────── */
.nota-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nota-icon-btn:hover { background: var(--bg-glass-md); color: var(--text-secondary); }
.nota-icon-btn i { width: 13px; height: 13px; }
.nota-icon-btn--danger:hover { color: var(--color-danger); }

/* ── Popover de cores ─────────────────────────────────────── */
.nota-color-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 6px;
  display: flex;
  gap: 7px;
  padding: 9px 11px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  z-index: 200;
}
.nota-color-swatch {
  width: 20px; height: 20px; min-height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.nota-color-swatch:hover { transform: scale(1.18); }
.nota-color-swatch--active { border-color: var(--text-primary); }

/* ── Swipe delete (mobile) ────────────────────────────────── */
.nota-swipe-del {
  position: absolute;
  right: -80px;
  top: 0;
  width: 72px;
  height: 100%;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
}
.nota-swipe-del i { width: 18px; height: 18px; }

/* ── Empty state ──────────────────────────────────────────── */
.nota-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  text-align: center;
}
.nota-empty-icon {
  width: 48px; height: 48px;
  color: var(--text-muted);
  opacity: .45;
}
.nota-empty h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.nota-empty p  { font-size: 13.5px; color: var(--text-secondary); }

/* ── Loading ──────────────────────────────────────────────── */
.nota-loading {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   MODAL DE NOTA
   ══════════════════════════════════════════════════════════ */
.nota-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
  animation: nota-overlay-in 200ms var(--ease-out) both;
}
@keyframes nota-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nota-overlay-out { from { opacity: 1; } to { opacity: 0; } }
.nota-modal--closing { animation: nota-overlay-out 200ms var(--ease-in) both; }
@media (prefers-reduced-motion: reduce) {
  .nota-modal-overlay, .nota-modal--closing { animation: none; }
}

.nota-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-top: 3px solid var(--nota-cor, #C9A84C);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: nota-modal-in 220ms var(--ease-spring) both;
}
@keyframes nota-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nota-modal { animation: none; } }

/* Header do modal */
.nota-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border-base);
}
.nota-modal-titulo {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
}
.nota-modal-titulo::placeholder { color: var(--text-muted); }
.nota-modal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nota-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nota-modal-close:hover { background: var(--bg-glass-md); color: var(--text-primary); }
.nota-modal-close i { width: 15px; height: 15px; }

/* Indicador salvo */
.nota-saved-ind {
  font-size: 11px;
  color: transparent;
  transition: color .2s;
  white-space: nowrap;
}
.nota-saved-ind--saving { color: var(--text-muted); }
.nota-saved-ind--saved  { color: var(--color-success); }

/* Textarea */
.nota-modal-conteudo {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 14px 16px;
  resize: none;
  min-height: 200px;
  max-height: 65vh;
}
.nota-modal-conteudo::placeholder { color: var(--text-muted); }

/* Footer do modal */
.nota-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-base);
  flex-wrap: wrap;
}
.nota-modal-tipos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nota-modal-chip {
  padding: 4px 10px;
  min-height: 30px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-base);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.nota-modal-chip:hover { border-color: var(--gold-border); color: var(--gold); }
.nota-modal-chip--active {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold);
}
.nota-modal-palette {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nota-modal-swatch {
  width: 22px; height: 22px; min-height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.nota-modal-swatch:hover { transform: scale(1.18); }
.nota-modal-swatch--active { border-color: #fff; }

.nota-modal-footer-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nota-modal-pin,
.nota-modal-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nota-modal-pin i, .nota-modal-del i { width: 15px; height: 15px; }
.nota-modal-pin:hover      { background: var(--gold-glow); color: var(--gold); }
.nota-modal-pin--active    { background: var(--gold-glow); color: var(--gold); }
.nota-modal-del:hover      { background: rgba(239,68,68,.1); color: var(--color-danger); }

/* ── Toast de Undo ────────────────────────────────────────── */
.nota-undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  z-index: 2000;
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: nowrap;
  animation: nota-toast-in 200ms var(--ease-out) both;
}
@keyframes nota-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .nota-undo-toast { animation: none; } }
.nota-undo-btn {
  padding: 4px 12px;
  min-height: 30px;
  border-radius: var(--r-xs);
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.nota-undo-btn:hover { background: rgba(201,168,76,.22); }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .nota-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #view-notas { padding: 14px 12px 40px; }
  .nota-grid  { grid-template-columns: 1fr; }
  .nota-modal { max-height: 95vh; }
  .nota-modal-footer { flex-direction: column; align-items: flex-start; }
  .nota-modal-footer-right { margin-left: 0; }
  .nota-header { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   MÓDULO MÉTRICAS v4 (.mtr-*)
   Dashboard: KPIs · Funil SVG · Msgs · Atividade · Alertas
   ══════════════════════════════════════════════════════════ */

/* ── Container principal ─────────────────────────────────── */
.mtr-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mtr-section {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.mtr-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 16px;
}
.mtr-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}
.mtr-gold  { color: var(--gold-400); }
.mtr-muted { color: var(--muted); font-size: 0.8rem; }
.mtr-empty { color: var(--muted); font-size: 0.84rem; font-style: italic; }

/* ── KPI grid ────────────────────────────────────────────── */
.mtr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mtr-kpi-card {
  background: var(--surface2);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color var(--dur-std) var(--ease-std);
}
.mtr-kpi-card:hover { border-color: var(--border-hover); }
.mtr-kpi-icon { color: var(--muted); display: flex; align-items: center; }
.mtr-kpi-icon svg { width: 18px; height: 18px; }
.mtr-kpi-value {
  font-family: var(--font-disp);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.mtr-kpi-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── Funil SVG ───────────────────────────────────────────── */
.mtr-funil-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.mtr-funil-svg {
  flex: 1;
  display: block;
  width: 100%;
  overflow: visible;
}
.mtr-funil-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--muted);
}
.mtr-funil-bar {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.mtr-funil-bar:hover { opacity: 0.85; }
.mtr-funil-cnt-in {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  fill: rgba(0,0,0,0.75);
}
.mtr-funil-cnt-out {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--muted);
}
.mtr-funil-perdidos {
  flex-shrink: 0;
  background: var(--surface3);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  align-self: center;
}
.mtr-perdidos-label { font-size: 0.7rem; color: var(--muted); text-align: center; }
.mtr-perdidos-n {
  font-family: var(--font-disp);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-arquivo, #555);
}
.mtr-tooltip {
  position: absolute;
  background: var(--surface4);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

/* ── Tabela de mensagens ─────────────────────────────────── */
.mtr-msg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.mtr-msg-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border-base);
}
.mtr-msg-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-base);
  vertical-align: middle;
  color: var(--text-primary);
}
.mtr-msg-table tr:last-child td { border-bottom: none; }
.mtr-msg-table tr:hover td { background: var(--bg-glass); }
.mtr-msg-best td { background: rgba(201,168,76,0.06) !important; }
.mtr-msg-best td:first-child { border-left: 3px solid var(--gold-500); }
.mtr-msg-id { font-family: var(--font-mono); font-size: 0.73rem; color: var(--muted); }
.mtr-num { text-align: right; font-variant-numeric: tabular-nums; }
.mtr-table-note {
  margin-top: 10px;
  font-size: 0.73rem;
  color: var(--muted2);
  font-style: italic;
}

/* ── Gráfico de atividade SVG ────────────────────────────── */
.mtr-ativ-svg { display: block; width: 100%; }
.mtr-grid-line {
  stroke: var(--border-base);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.mtr-axis-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--muted);
}
.mtr-ativ-bar { fill: var(--gold-500); opacity: 0.75; }
.mtr-resp-line {
  fill: none;
  stroke: var(--color-info);
  stroke-width: 2;
  stroke-linejoin: round;
}
.mtr-resp-dot {
  fill: var(--color-info);
  stroke: var(--bg-card);
  stroke-width: 2;
}
.mtr-legend {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  padding-left: 4px;
}
.mtr-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.77rem;
  color: var(--muted);
}
.mtr-legend-bar {
  display: inline-block;
  width: 14px;
  height: 10px;
  background: var(--gold-500);
  opacity: 0.75;
  border-radius: 2px;
  flex-shrink: 0;
}
.mtr-legend-line {
  display: inline-block;
  width: 14px;
  height: 3px;
  background: var(--color-info);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Lista por estado ────────────────────────────────────── */
.mtr-estado-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mtr-estado-item { display: flex; align-items: center; gap: 10px; }
.mtr-estado-uf {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  width: 26px;
  flex-shrink: 0;
}
.mtr-estado-bar {
  flex: 1;
  height: 8px;
  background: var(--surface3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.mtr-estado-fill {
  height: 100%;
  background: var(--gold-500);
  border-radius: var(--r-full);
  transition: width 0.6s var(--ease-out);
}
.mtr-estado-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--text-primary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Alertas ─────────────────────────────────────────────── */
.mtr-alertas-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-success);
  font-size: 0.85rem;
  font-weight: 500;
}
.mtr-alertas-ok svg { width: 18px; height: 18px; }
.mtr-alertas-grid { display: flex; flex-direction: column; gap: 10px; }
.mtr-alerta-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color var(--dur-std), background var(--dur-std);
}
.mtr-alerta-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.mtr-alerta-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.mtr-alerta-card svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; }
.mtr-alerta-txt { flex: 1; font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }
.mtr-alerta-arr svg { width: 16px; height: 16px; color: var(--muted); }

/* ── Consumo API ─────────────────────────────────────────── */
.mtr-api-card { display: flex; flex-direction: column; gap: 14px; }
.mtr-api-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mtr-api-used { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; margin: 0; }
.mtr-api-bar {
  height: 10px;
  background: var(--surface3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.mtr-api-fill {
  height: 100%;
  background: var(--gold-500);
  border-radius: var(--r-full);
  transition: width 0.7s var(--ease-out);
}
.mtr-api-fill-alert { background: var(--color-warning); }
.mtr-api-fill-crit  { background: var(--color-danger); }
.mtr-api-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.mtr-badge-warn { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.mtr-badge-crit { background: rgba(239,68,68,0.15);  color: var(--color-danger); }
.mtr-api-note { font-size: 0.73rem; margin: 0; }

/* ── Modo local ──────────────────────────────────────────── */
.mtr-local-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  color: var(--muted);
  font-size: 0.84rem;
}
.mtr-local-notice svg { width: 20px; height: 20px; flex-shrink: 0; }
.mtr-local-notice p { margin: 0; }
.mtr-error {
  padding: 24px;
  text-align: center;
  color: var(--color-danger);
  font-size: 0.9rem;
}

/* ── Skeleton ────────────────────────────────────────────── */
@keyframes mtr-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.mtr-sk {
  background: linear-gradient(90deg,
    var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%
  );
  background-size: 800px 100%;
  animation: mtr-shimmer 1.6s infinite linear;
  border-radius: var(--r-sm);
}
.mtr-kpi-card.mtr-sk { min-height: 90px; }
.mtr-sk-title { height: 14px; width: 140px; margin-bottom: 16px; }
.mtr-sk-chart { height: 220px; }
.mtr-sk-chart-sm { height: 140px; }
.mtr-sk-table { height: 180px; }
@media (prefers-reduced-motion: reduce) {
  .mtr-sk { animation: none; }
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .mtr-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mtr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .mtr-funil-wrap { flex-direction: column; }
  .mtr-funil-perdidos { flex-direction: row; align-self: stretch; justify-content: space-between; }
}
@media (max-width: 500px) {
  .mtr-root { padding: 0 0 32px; }
  .mtr-kpi-grid { grid-template-columns: 1fr; }
  .mtr-kpi-value { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════════════
   TOPNAV — Ações rápidas (Novo Lead + Importar)
   ══════════════════════════════════════════════════════════ */
.topnav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Botão Importar — estilo secundário */
.topnav-importar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-500);
  font-size: 0.81rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--dur-std) var(--ease-std);
  letter-spacing: 0.2px;
}
.topnav-importar svg { width: 14px; height: 14px; }
.topnav-importar:hover {
  background: var(--gold-glow2);
  border-color: var(--gold-500);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   BADGE NAV — Contador de pendências pulsante
   ══════════════════════════════════════════════════════════ */
.badge-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

/* ══════════════════════════════════════════════════════════
   MODAL DE IMPORTAÇÃO — dropzone, progress, resultado
   ══════════════════════════════════════════════════════════ */
.imp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn var(--dur-std) ease;
}

.imp-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slideUp 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.imp-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.imp-modal-title svg { color: var(--gold-500); }

.imp-dropzone {
  border: 2px dashed var(--border-active);
  border-radius: var(--r-md);
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all var(--dur-std) var(--ease-std);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
  min-height: 120px;
  justify-content: center;
}
.imp-dropzone:hover,
.imp-dropzone.dragover {
  border-color: var(--gold-500);
  background: var(--gold-glow2);
  color: var(--text-primary);
}
.imp-dropzone svg { width: 32px; height: 32px; color: var(--gold-500); opacity: 0.7; }
.imp-dropzone strong { color: var(--text-primary); }

.imp-file-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.imp-file-info strong { color: var(--text-primary); }
.imp-file-info button {
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-base);
  transition: color 0.15s;
}
.imp-file-info button:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* Barra de progresso */
.imp-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.imp-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.imp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-500));
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}
.imp-progress-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: right;
}

/* Resultado da importação */
.imp-resultado {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-base);
  font-size: 0.85rem;
}
.imp-resultado-linha { display: flex; justify-content: space-between; }
.imp-resultado-linha span:first-child { color: var(--text-secondary); }
.imp-resultado .imp-ok  { color: var(--color-success); font-weight: 700; }
.imp-resultado .imp-dup { color: var(--color-warning); font-weight: 700; }
.imp-resultado .imp-err { color: var(--color-danger);  font-weight: 700; }

/* Botões do modal */
.imp-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.imp-btn-cancel {
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-base);
  color: var(--text-secondary);
  font-size: 0.83rem;
  font-weight: 600;
  transition: all var(--dur-std) var(--ease-std);
  min-height: 36px;
}
.imp-btn-cancel:hover { border-color: var(--border-hover); color: var(--text-primary); }

.imp-btn-confirmar {
  padding: 8px 22px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
  color: var(--text-inverse);
  font-size: 0.83rem;
  font-weight: 700;
  transition: all var(--dur-std) var(--ease-std);
  min-height: 36px;
}
.imp-btn-confirmar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--gold-glow);
}
.imp-btn-confirmar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ══════════════════════════════════════════════════════════
   TOUCH TARGETS — min 44px em alvos de ação das views CRM.
   Escopado a containers CRM para não afetar a Gestão.
   ══════════════════════════════════════════════════════════ */
#view-captacao button,
#view-followup  button,
#view-notas     button,
#view-metricas  button {
  min-height: 44px;
}
/* Exceção: badges e ações inline pequenas que não precisam de 44px */
#view-captacao .badge-nav,
#view-followup  .badge-nav,
.imp-modal button { min-height: unset; }

/* ══════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — bloco consolidado.
   Desliga TODOS os pulsos, staggers e animações de entrada
   das views CRM em uma única regra.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Badge nav */
  .badge-nav { animation: none; }

  /* Métricas skeleton */
  .mtr-sk { animation: none; }

  /* Modal de importação */
  .imp-overlay { animation: none; }
  .imp-modal   { animation: none; }

  /* Notas */
  .nota-modal      { animation: none; }
  .nota-undo-toast { animation: none; }

  /* Partículas da landing */
  .lp { animation: none; }

  /* Notificações */
  .crm-toast { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   PIPELINE v4 — Estilos novos
   ══════════════════════════════════════════════════════════ */

/* Bolinhas de tentativas */
.lc-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.tent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
  transition: background 200ms;
}
.tent-dot--on {
  background: #3A7BD5;
}

/* Badge "EM PRODUÇÃO" pulsando */
.pipeline-em-producao {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #16A34A;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 4px;
  padding: 1px 5px;
  animation: producao-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes producao-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* Área badge inline no card compacto */
.lc-area-badge {
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badge de área no card normal */
.lead-area-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Botão danger */
.btn-danger {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
}
.btn-danger:hover {
  background: #DC2626;
  border-color: #DC2626;
}

/* ══════════════════════════════════════════════════════════
   MÓDULO FINANCEIRO — Estilos v2.0
   ══════════════════════════════════════════════════════════ */

/* Variáveis de cor financeira */
:root {
  --color-entrada:  #22C55E;
  --color-saida:    #EF4444;
  --color-previsto: #6B7280;
  --color-projetado: rgba(201,168,76,0.12);
}

/* Layout principal */
.financeiro-layout {
  padding: 20px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Tabs */
.fin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-base);
  padding-bottom: 0;
}
.fin-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 150ms, border-color 150ms;
  white-space: nowrap;
}
.fin-tab:hover { color: var(--text-primary); }
.fin-tab--active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.fin-tab i { width: 14px; height: 14px; }

.fin-count-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--surface2);
  color: var(--muted);
}
.fin-count-badge--danger {
  background: rgba(239,68,68,0.15);
  color: #EF4444;
}

/* Conteúdo das tabs */
.fin-content {
  min-height: 300px;
}

/* KPI card projetado (fundo diferente) */
.fin-card-projetado {
  background: var(--color-projetado) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
}

/* Gráfico de fluxo */
.fin-chart-section {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 24px;
}
.fin-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.fin-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 28px;
  flex-shrink: 0;
}
.fin-bar-col--today .fin-bar-label { color: var(--gold); font-weight: 700; }
.fin-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
}
.fin-bar {
  width: 10px;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 150ms;
}
.fin-bar--entrada { background: var(--color-entrada); }
.fin-bar--saida   { background: var(--color-saida); }
.fin-bar--previsto {
  opacity: 0.45;
  border: 1px dashed;
}
.fin-bar--previsto.fin-bar--entrada { border-color: var(--color-entrada); }
.fin-bar--previsto.fin-bar--saida   { border-color: var(--color-saida); }
.fin-bar-label {
  font-size: 0.55rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Tabela de transações */
.fin-table-wrap {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fin-table {
  display: flex;
  flex-direction: column;
}
.fin-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-base);
  transition: background 120ms;
}
.fin-row:last-child { border-bottom: none; }
.fin-row:hover { background: var(--surface2); }
.fin-row-data {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.fin-row-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.fin-row-desc > span:first-child {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-categoria {
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
}
.fin-row-valor {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.fin-valor--entrada { color: var(--color-entrada); }
.fin-valor--saida   { color: var(--color-saida); }
.fin-row-actions    { display: flex; gap: 4px; }

/* Badges de status de transação */
.fin-status-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fin-status-badge--realizado {
  background: rgba(34,197,94,0.12);
  color: var(--color-entrada);
}
.fin-status-badge--previsto {
  background: rgba(107,114,128,0.12);
  color: var(--color-previsto);
  border: 1px dashed var(--color-previsto);
}

/* Contas a Receber */
.fin-conta-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  transition: background 120ms;
}
.fin-conta-card:hover { background: var(--surface2); }
.fin-conta-card--vencido {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.04);
}
.fin-conta-card--pago {
  opacity: 0.65;
}

/* Responsivo */
@media (max-width: 768px) {
  .financeiro-layout { padding: 12px 16px; }
  .fin-row {
    grid-template-columns: 38px 1fr auto;
    font-size: 0.75rem;
  }
  .fin-row > :nth-child(3) { display: none; }
}

/* ── Visão Geral: KPIs ─────────────────────────────────── */
.fin-visao-geral { display: flex; flex-direction: column; gap: 24px; }

.fin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fin-kpi {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-kpi--projetado {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.25);
}
.fin-kpi-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fin-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.fin-kpi--positive { color: var(--color-entrada); }
.fin-kpi--negative { color: var(--color-saida); }
.fin-kpi-sub {
  font-size: 0.68rem;
  color: var(--muted);
}
.fin-badge-projetado {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(201,168,76,0.2);
  color: var(--gold);
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ── SVG Chart ─────────────────────────────────────────── */
.fin-chart-wrap { display: flex; flex-direction: column; gap: 12px; }
.fin-svg-chart { width: 100%; max-height: 210px; overflow: visible; }
.fin-chart-label {
  font-size: 10px;
  fill: var(--muted, #888);
  font-family: var(--font-mono, monospace);
}
.fin-chart-label--cur { fill: var(--gold, #C9A84C); font-weight: 700; }
.fin-chart-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.fin-chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.fin-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.fin-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Próximos Vencimentos ────────────────────────────────── */
.fin-proximos-section {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 16px;
}
.fin-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.fin-vencimentos-list { display: flex; flex-direction: column; gap: 6px; }
.fin-venc-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--surface2);
  font-size: 0.8rem;
}
.fin-venc-item--vencida {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
}
.fin-venc-item--hoje {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
}
.fin-venc-desc { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-venc-data { font-size: 0.72rem; color: var(--muted); white-space: nowrap; font-family: var(--font-mono); }
.fin-venc-valor { font-weight: 700; font-family: var(--font-mono); white-space: nowrap; }

/* ── Status badges (extendido) ────────────────────────────── */
.fin-status-badge--confirmado { background: rgba(34,197,94,0.12);  color: #22C55E; }
.fin-status-badge--vencida    { background: rgba(239,68,68,0.12);  color: #EF4444; }
.fin-status-badge--hoje       { background: rgba(245,158,11,0.12); color: #F59E0B; }
.fin-status-badge--pendente   { background: rgba(107,114,128,0.12); color: var(--muted); }
.fin-status-badge--pago       { background: rgba(34,197,94,0.08);  color: #22C55E; opacity: 0.7; }

/* ── Transações: filtros ─────────────────────────────────── */
.fin-transacoes { display: flex; flex-direction: column; gap: 16px; }
.fin-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fin-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-filter-group label {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fin-filter-input {
  height: 34px;
  padding: 0 10px;
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 0.8rem;
}
.fin-filter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.fin-filter-count { font-size: 0.75rem; color: var(--muted); }
.fin-filter-val   { font-size: 0.8rem; font-weight: 700; font-family: var(--font-mono); }

/* ── Transações: tabela HTML ─────────────────────────────── */
.fin-table-wrap2 {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fin-table2 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.fin-table2 thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-base);
  background: var(--surface2);
}
.fin-table2-row td { padding: 10px 12px; border-bottom: 1px solid var(--border-base); vertical-align: middle; }
.fin-table2-row:last-child td { border-bottom: none; }
.fin-table2-row:hover { background: var(--surface2); }
.fin-td-data  { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.fin-td-desc  { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-td-cat   { white-space: nowrap; }
.fin-td-valor { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.fin-td-status { white-space: nowrap; }
.fin-td-actions { display: flex; gap: 3px; white-space: nowrap; }

.fin-cat-badge {
  font-size: 0.63rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface2);
  color: var(--muted);
  font-weight: 500;
}
.fin-recorrente-icon {
  display: inline-block;
  width: 11px;
  height: 11px;
  color: var(--muted);
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Action buttons (tabela) ─────────────────────────────── */
.fin-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.fin-act i { width: 13px; height: 13px; }
.fin-act:hover { background: var(--surface2); color: var(--text-primary); }
.fin-act--confirm:hover { background: rgba(34,197,94,0.12); color: #22C55E; }
.fin-act--danger:hover  { background: rgba(239,68,68,0.12);  color: #EF4444; }

/* ── Contas a Receber ───────────────────────────────────── */
.fin-contas { display: flex; flex-direction: column; gap: 16px; }
.fin-contas-totais {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fin-total-item {
  flex: 1;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fin-total-label { font-size: 0.7rem; color: var(--muted); font-weight: 500; }
.fin-total-valor { font-size: 1.1rem; font-weight: 700; font-family: var(--font-mono); }
.fin-total-sep { width: 1px; background: var(--border-base); align-self: stretch; }
.fin-contas-list { display: flex; flex-direction: column; gap: 8px; }
.fin-conta-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.fin-conta-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fin-conta-desc { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-conta-data { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); }
.fin-conta-valor { font-size: 0.9rem; font-weight: 700; font-family: var(--font-mono); }
.fin-parcela-badge {
  display: inline-block;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(201,168,76,0.15);
  color: var(--gold);
  font-weight: 600;
  vertical-align: middle;
}
.fin-conta-card--hoje {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.04);
}
.fin-conta-card--pendente { /* default card */ }

/* ── Planejamento ───────────────────────────────────────── */
.fin-planejamento { display: flex; flex-direction: column; gap: 24px; }
.fin-plan-section {
  background: var(--surface1);
  border: 1px solid var(--border-base);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.fin-meta-widget { display: flex; flex-direction: column; gap: 8px; }
.fin-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fin-meta-atual { font-size: 1.1rem; font-weight: 700; font-family: var(--font-mono); color: var(--color-entrada); }
.fin-meta-total { font-size: 1rem; font-weight: 600; font-family: var(--font-mono); }
.fin-meta-sub { font-size: 0.78rem; color: var(--muted); }
.fin-progress-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}
.fin-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 500ms ease;
}
.fin-progress-fill--normal  { background: #22C55E; }
.fin-progress-fill--warning { background: #F59E0B; }
.fin-progress-fill--danger  { background: #EF4444; }
.fin-progress-fill--success { background: #16A34A; }
.fin-progress-label { font-size: 0.72rem; color: var(--muted); }
.fin-orcamento-list { display: flex; flex-direction: column; gap: 12px; }
.fin-orc-item { display: flex; flex-direction: column; gap: 6px; }
.fin-orc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fin-orc-label { font-size: 0.82rem; font-weight: 500; }
.fin-orc-valores { font-size: 0.78rem; color: var(--muted); font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; }
.fin-orc-sep { opacity: 0.5; }
.fin-orc-overflow { font-size: 0.68rem; color: #EF4444; font-weight: 500; }
.fin-orc-set-btn {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-base);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.fin-orc-set-btn:hover { color: var(--text-primary); }

/* ── Modal: tipo toggle ─────────────────────────────────── */
.fin-tipo-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.fin-tipo-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 2px solid var(--border-base);
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.fin-tipo-btn i { width: 15px; height: 15px; }
.fin-tipo-btn--active[id="btn-tipo-entrada"] {
  border-color: #22C55E;
  background: rgba(34,197,94,0.08);
  color: #22C55E;
}
.fin-tipo-btn--active[id="btn-tipo-saida"] {
  border-color: #EF4444;
  background: rgba(239,68,68,0.08);
  color: #EF4444;
}
.fin-toggle-row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}
.fin-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ── Empty state ────────────────────────────────────────── */
.fin-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.fin-empty-state i { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Responsivo financeiro v2 ───────────────────────────── */
@media (max-width: 1024px) {
  .fin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-filters { flex-direction: column; align-items: stretch; }
  .fin-filter-summary { margin-left: 0; }
  .fin-contas-totais { flex-direction: column; }
  .fin-total-sep { width: 100%; height: 1px; align-self: auto; }
  .fin-table2 thead { display: none; }
  .fin-table2-row td { display: block; padding: 4px 12px; }
  .fin-table2-row td:first-child { padding-top: 10px; }
  .fin-table2-row td:last-child  { padding-bottom: 10px; }
  .fin-td-status, .fin-td-cat { display: none; }
}