/* ============================================================
   AMPARAR CRM — styles.css   v3.0
   Identidade visual Amparar: Vermelho/Crimson + Marinho
   Beyond Bits Tecnologia © 2026
   ======================================================-====== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── TOKENS AMPARAR ── */
:root {
  /* Cores primárias da logo */
  --vermelho:       #D91A3C;
  --vermelho-esc:   #A80F2A;
  --vermelho-cl:    #F0294E;
  --vermelho-s:     #FDF1F4;
  --vermelho-b:     #F7B8C4;

  /* Marinho / Azul escuro da logo */
  --marinho:        #1E2358;
  --marinho-esc:    #141745;
  --marinho-cl:     #2D3380;
  --marinho-s:      #EDEEF9;
  --marinho-b:      #C5C8EC;

  /* Neutros */
  --bg:             #F5F6FA;
  --bg-card:        #FFFFFF;
  --border:         #E5E7F0;
  --border-strong:  #CBD0E8;
  --text:           #0E1023;
  --text-muted:     #6B7095;
  --text-light:     #A0A5C8;

  /* Status */
  --verde:          #10A64A;
  --verde-s:        #E8F8EE;
  --amarelo:        #F59E0B;
  --amarelo-s:      #FEF3C7;
  --azul:           #3B82F6;
  --azul-s:         #DBEAFE;
  --roxo:           #8B5CF6;
  --roxo-s:         #EDE9FE;

  /* Layout */
  --sidebar-w:      256px;
  --header-h:       62px;
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --shadow:         0 2px 12px rgba(30,35,88,.08);
  --shadow-md:      0 6px 28px rgba(30,35,88,.13);
  --shadow-lg:      0 12px 48px rgba(30,35,88,.18);
  --transition:     .18s ease;
}

/* Chamado #59 — variáveis de tema (CLARO = original) */
:root{
  --d-bgc-000000: #000000;
  --d-bgc-0f1129: #0f1129;
  --d-bgc-0f172a: #0f172a;
  --d-bgc-10a64a: #10a64a;
  --d-bgc-141745: #141745;
  --d-bgc-1b6b3a: #1b6b3a;
  --d-bgc-1e2358: #1e2358;
  --d-bgc-1e2761: #1e2761;
  --d-bgc-2563eb: #2563eb;
  --d-bgc-25d366: #25d366;
  --d-bgc-2d3380: #2d3380;
  --d-bgc-2d3579: #2d3579;
  --d-bgc-7c3aed: #7c3aed;
  --d-bgc-8b5cf6: #8b5cf6;
  --d-bgc-9ca3af: #9ca3af;
  --d-bgc-d1d5db: #d1d5db;
  --d-bgc-d1fae5: #d1fae5;
  --d-bgc-d91a3c: #d91a3c;
  --d-bgc-d97706: #d97706;
  --d-bgc-dbeafe: #dbeafe;
  --d-bgc-dc2626: #dc2626;
  --d-bgc-e0f2fe: #e0f2fe;
  --d-bgc-e2e8f0: #e2e8f0;
  --d-bgc-e5e7eb: #e5e7eb;
  --d-bgc-ecfdf5: #ecfdf5;
  --d-bgc-ede9fe: #ede9fe;
  --d-bgc-eef2ff: #eef2ff;
  --d-bgc-eff6ff: #eff6ff;
  --d-bgc-f0294e: #f0294e;
  --d-bgc-f1f5f9: #f1f5f9;
  --d-bgc-f3f4f6: #f3f4f6;
  --d-bgc-f59e0b: #f59e0b;
  --d-bgc-f8fafc: #f8fafc;
  --d-bgc-f9fafb: #f9fafb;
  --d-bgc-fafafa: #fafafa;
  --d-bgc-fafafb: #fafafb;
  --d-bgc-fafbfc: #fafbfc;
  --d-bgc-fbbf24: #fbbf24;
  --d-bgc-fbe6ea: #fbe6ea;
  --d-bgc-fca5a5: #fca5a5;
  --d-bgc-fce7f3: #fce7f3;
  --d-bgc-fdf1f4: #fdf1f4;
  --d-bgc-fee2e2: #fee2e2;
  --d-bgc-fef08a: #fef08a;
  --d-bgc-fef2f2: #fef2f2;
  --d-bgc-fef2f5: #fef2f5;
  --d-bgc-fef3c7: #fef3c7;
  --d-bgc-fffbeb: #fffbeb;
  --d-bgc-ffffff: #ffffff;
  --d-brd-059669: #059669;
  --d-brd-0ea5e9: #0ea5e9;
  --d-brd-10b981: #10b981;
  --d-brd-1b6b3a: #1b6b3a;
  --d-brd-1e2358: #1e2358;
  --d-brd-2563eb: #2563eb;
  --d-brd-3b82f6: #3b82f6;
  --d-brd-6ee7b7: #6ee7b7;
  --d-brd-7c3aed: #7c3aed;
  --d-brd-8b5cf6: #8b5cf6;
  --d-brd-93c5fd: #93c5fd;
  --d-brd-a7f3c0: #a7f3c0;
  --d-brd-a7f3d0: #a7f3d0;
  --d-brd-bae6fd: #bae6fd;
  --d-brd-bfdbfe: #bfdbfe;
  --d-brd-c5c8ec: #c5c8ec;
  --d-brd-d1d5db: #d1d5db;
  --d-brd-d91a3c: #d91a3c;
  --d-brd-d97706: #d97706;
  --d-brd-dc2626: #dc2626;
  --d-brd-ddd6fe: #ddd6fe;
  --d-brd-e2e8f0: #e2e8f0;
  --d-brd-e5e7eb: #e5e7eb;
  --d-brd-f1f5f9: #f1f5f9;
  --d-brd-f3f4f6: #f3f4f6;
  --d-brd-f59e0b: #f59e0b;
  --d-brd-f7b8c4: #f7b8c4;
  --d-brd-fbbf24: #fbbf24;
  --d-brd-fbcfe8: #fbcfe8;
  --d-brd-fca5a5: #fca5a5;
  --d-brd-fde68a: #fde68a;
  --d-brd-fecaca: #fecaca;
  --d-txt-059669: #059669;
  --d-txt-065f46: #065f46;
  --d-txt-075985: #075985;
  --d-txt-10a64a: #10a64a;
  --d-txt-10b981: #10b981;
  --d-txt-111827: #111827;
  --d-txt-1b6b3a: #1b6b3a;
  --d-txt-1d4ed8: #1d4ed8;
  --d-txt-1d6f42: #1d6f42;
  --d-txt-1e2358: #1e2358;
  --d-txt-1e2761: #1e2761;
  --d-txt-1e3a8a: #1e3a8a;
  --d-txt-1e40af: #1e40af;
  --d-txt-2563eb: #2563eb;
  --d-txt-2c2664: #2c2664;
  --d-txt-334155: #334155;
  --d-txt-3730a3: #3730a3;
  --d-txt-374151: #374151;
  --d-txt-3b82f6: #3b82f6;
  --d-txt-475569: #475569;
  --d-txt-4b5563: #4b5563;
  --d-txt-5b21b6: #5b21b6;
  --d-txt-64748b: #64748b;
  --d-txt-6b7280: #6b7280;
  --d-txt-713f12: #713f12;
  --d-txt-78350f: #78350f;
  --d-txt-7c3aed: #7c3aed;
  --d-txt-92400e: #92400e;
  --d-txt-991b1b: #991b1b;
  --d-txt-9ca3af: #9ca3af;
  --d-txt-9f1239: #9f1239;
  --d-txt-a3e635: #a3e635;
  --d-txt-a80f2a: #a80f2a;
  --d-txt-cbd5e1: #cbd5e1;
  --d-txt-d1d5db: #d1d5db;
  --d-txt-d91a3c: #d91a3c;
  --d-txt-d97706: #d97706;
  --d-txt-dc2626: #dc2626;
  --d-txt-f59e0b: #f59e0b;
  --d-txt-ffffff: #ffffff;
}


/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--marinho-b); }

/* ── HEADER ── */
.app-header {
  height: var(--header-h);
  background: linear-gradient(135deg, var(--marinho-esc) 0%, var(--marinho) 100%);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  flex-shrink: 0;
  z-index: 200;
  box-shadow: 0 2px 20px rgba(14,16,35,.35);
  border-bottom: 2px solid var(--vermelho);
}

.header-toggle {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--d-txt-ffffff); font-size: 18px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.header-toggle:hover { background: rgba(255,255,255,.2); }

/* Logo — imagem real da Amparar */
.logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.logo-img-wrap {
  height: 42px;
  display: flex;
  align-items: center;
}
.logo-img-wrap img {
  height: 46px;
  width: auto;
  object-fit: contain;
}
.logo-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.2);
  margin: 0 14px;
}
.logo-crm {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-crm-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--d-txt-ffffff);
  line-height: 1;
  letter-spacing: .02em;
}
.logo-crm-sub {
  font-size: 9.5px;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.header-spacer { flex: 1; }

/* Search */
.search-wrap { position: relative; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  padding: 7px 14px;
  width: 270px;
  transition: background var(--transition);
}
.header-search:focus-within {
  background: rgba(255,255,255,.18);
  border-color: var(--vermelho-cl);
}
.header-search input {
  background: transparent; border: none; outline: none;
  color: var(--d-txt-ffffff); font-size: 13px; width: 100%;
  font-family: 'Outfit';
}
.header-search input::placeholder { color: rgba(255,255,255,.45); }
.header-search i { color: rgba(255,255,255,.55); }
#search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--d-bgc-ffffff); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 999;
  display: none; border: 1px solid var(--border);
  overflow: hidden;
}
.search-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--vermelho-s); }
.search-nome { font-weight: 700; font-size: 13px; }
.search-det  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Notificações */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--d-txt-ffffff); font-size: 17px;
  transition: background var(--transition);
}
.notif-btn:hover { background: rgba(255,255,255,.2); }
#notif-badge {
  position: absolute; top: 5px; right: 5px;
  background: var(--vermelho);
  color: var(--d-txt-ffffff); font-size: 9px; font-weight: 800;
  min-width: 15px; height: 15px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--marinho);
}
#notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 290px; background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 999; display: none;
  border: 1px solid var(--border); overflow: hidden;
}
#notif-dropdown.show { display: block; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.notif-item.unread { background: var(--vermelho-s); }
.notif-msg  { font-size: 12px; font-weight: 600; }
.notif-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Header user */
.header-user { display: flex; align-items: center; gap: 10px; }
.header-name { font-size: 13px; font-weight: 700; color: var(--d-txt-ffffff); line-height: 1.1; }
.header-role { font-size: 10px; color: rgba(255,255,255,.55); }
.header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl));
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--d-txt-ffffff); flex-shrink: 0;
  letter-spacing: .03em;
}

/* ── LAYOUT ── */
.app-layout { display: flex; flex: 1; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-card);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transition: width var(--transition), transform var(--transition);
  z-index: 100;
}
.sidebar.sidebar-collapsed { width: 64px; }
.sidebar.sidebar-collapsed .nav-label,
.sidebar.sidebar-collapsed .nav-badge,
.sidebar.sidebar-collapsed .sidebar-label { display: none; }
.sidebar.sidebar-collapsed .nav-link { justify-content: center; padding: 10px 0; }

/* Sidebar brand strip */
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--vermelho), var(--vermelho-cl));
  flex-shrink: 0;
}

.sidebar-section { padding: 16px 12px 4px; }
.sidebar-label {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light); padding: 0 8px; display: block;
  margin-bottom: 4px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  transition: all var(--transition);
  color: var(--text-muted); font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border: none; background: none; width: 100%;
  white-space: nowrap;
}
.nav-link:hover { background: var(--vermelho-s); color: var(--vermelho); }
.nav-link.active {
  background: linear-gradient(135deg, var(--vermelho-s), var(--d-bgc-fbe6ea));
  color: var(--vermelho);
  font-weight: 700;
  border-left: 3px solid var(--vermelho);
}
.nav-icon { font-size: 17px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  background: var(--vermelho); color: var(--d-txt-ffffff);
  border-radius: 99px; padding: 2px 8px; min-width: 22px; text-align: center;
}
.nav-badge.orange { background: var(--amarelo); }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }

/* Sidebar backdrop */
#sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(14,16,35,.5); z-index: 299;
  backdrop-filter: blur(2px);
}
#sidebar-backdrop.show { display: block; }

/* ── MAIN ── */
.app-main { flex: 1; overflow-y: auto; padding: 26px; transition: padding var(--transition); }

/* ── PÁGINAS ── */
.amp-page { display: none; }
.amp-page.active { display: block; }

/* ── TOP BAR ── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; gap: 12px;
}
.page-title {
  font-size: 21px; font-weight: 800;
  background: linear-gradient(135deg, var(--marinho), var(--marinho-cl));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.top-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── CARDS ── */
.amp-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px;
  border: 1px solid var(--border);
}
.amp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.amp-card-title { font-size: 14px; font-weight: 700; color: var(--marinho); }

/* ── KPI CARDS ── */
.kpi-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.kpi-val  { font-size: 26px; font-weight: 800; font-family: 'JetBrains Mono'; letter-spacing: -.01em; }
.kpi-lbl  { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.kpi-trend {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
}
.kpi-trend.up   { background: var(--verde-s); color: var(--verde); }
.kpi-trend.down { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }

/* ── NÚMERO MÁGICO ── */
.numero-magico {
  background: linear-gradient(135deg, var(--marinho-esc) 0%, var(--marinho) 60%, var(--marinho-cl) 100%);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: 0 8px 36px rgba(30,35,88,.28);
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
/* Decoração geométrica fundo */
.numero-magico::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,26,60,.25), transparent 70%);
  pointer-events: none;
}
.numero-magico::after {
  content: '';
  position: absolute; bottom: -60px; left: 20%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.nm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.nm-title  { font-size: 14px; font-weight: 800; color: var(--d-txt-ffffff); letter-spacing: .01em; }
.nm-period-select {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: var(--d-txt-ffffff); border-radius: 7px; padding: 5px 12px; font-size: 11px;
  font-family: 'Outfit'; cursor: pointer; font-weight: 600;
}
.nm-period-select option { color: var(--text); background: var(--d-bgc-ffffff); }
.nm-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; position: relative; z-index: 1; }
.nm-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px; padding: 14px 12px;
  text-align: center; position: relative;
  transition: background var(--transition), transform var(--transition);
  backdrop-filter: blur(4px);
}
.nm-card:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.nm-card.nm-achieved {
  background: rgba(217,26,60,.3);
  border-color: rgba(217,26,60,.6);
  box-shadow: 0 0 20px rgba(217,26,60,.2);
}
.nm-stage { font-size: 9.5px; color: rgba(255,255,255,.65); margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nm-meta  { font-size: 24px; font-weight: 900; color: var(--d-txt-ffffff); font-family: 'JetBrains Mono'; line-height: 1; }
.nm-real  { font-size: 11px; margin-top: 5px; color: rgba(255,255,255,.75); font-weight: 500; }
.nm-conv  { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.95); letter-spacing: .02em; }
.nm-progress { margin-top: 8px; height: 4px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }

/* ── FUNIL PREVIEW ── */
.funil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.funil-lbl { width: 90px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.funil-track { flex: 1; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.funil-fill  { height: 100%; border-radius: 99px; transition: width .4s ease; }
.funil-val   { width: 20px; font-size: 13px; font-weight: 800; text-align: right; }
.funil-pct   { width: 38px; font-size: 11px; color: var(--text-muted); }

/* Relatórios funil */
.rel-funil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rel-funil-lbl { width: 110px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.rel-funil-track { flex: 1; height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.rel-funil-fill { height: 100%; border-radius: 99px; }
.rel-funil-n   { width: 24px; font-size: 13px; font-weight: 800; text-align: right; }
.rel-funil-pct { width: 40px; font-size: 11px; color: var(--text-muted); }

/* ── ATIVIDADES ── */
.ativ-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bg);
}
.ativ-item:last-child { border-bottom: none; }
.ativ-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.ativ-nome { font-size: 13px; font-weight: 700; }
.ativ-desc { font-size: 11px; color: var(--text-muted); }
.ativ-hora { font-size: 11px; color: var(--text-light); white-space: nowrap; font-family: 'JetBrains Mono'; margin-left: auto; }

/* ── AGENDA GRID ── */
.agenda-grid { display: grid; grid-template-columns: 50px repeat(7,1fr); min-width: 600px; }
.ag-header-cell {
  padding: 7px 4px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.ag-header-cell.ag-today { color: var(--vermelho); background: var(--vermelho-s); border-radius: 7px 7px 0 0; }
.ag-time { font-size: 10px; color: var(--text-light); font-family: 'JetBrains Mono'; padding: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.ag-cell { border-bottom: 1px solid var(--bg); border-left: 1px solid var(--bg); padding: 3px 4px; min-height: 28px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ag-cell.ag-today-col { background: rgba(217,26,60,.03); }
.ag-slot {
  background: var(--marinho); color: var(--d-txt-ffffff);
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; cursor: pointer;
  transition: background var(--transition);
}
.ag-slot:hover { background: var(--vermelho); }

/* ── KANBAN ── */
.kanban-wrap { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.k-col {
  min-width: 232px; width: 232px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.k-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; color: var(--d-txt-ffffff);
  font-size: 13px; font-weight: 700;
}
.k-col-icon { font-size: 15px; }
.k-col-label { flex: 1; }
.k-col-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.k-empty { text-align: center; font-size: 11px; color: var(--text-light); padding: 24px 0; }
.k-add-btn {
  margin: 8px 10px; padding: 8px;
  border-radius: 8px; border: 1.5px dashed;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); background: transparent;
  font-family: 'Outfit';
}
.k-add-btn:hover { filter: brightness(.95); }

/* Kanban card */
.k-card {
  background: var(--d-bgc-ffffff); border-radius: 9px; padding: 12px;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 5px rgba(30,35,88,.07);
  cursor: pointer; transition: all var(--transition);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.k-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.k-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.k-card-id   { font-size: 10px; color: var(--text-light); font-family: 'JetBrains Mono'; }
.k-card-nome { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.k-card-tel  { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.k-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.k-card-foot { display: flex; justify-content: space-between; align-items: center; }
.k-fonte     { font-size: 10px; color: var(--text-light); }
.k-captador  { font-size: 10px; color: var(--text-light); }

/* Tentativas badge */
.tent-badge {
  background: var(--azul); color: var(--d-txt-ffffff);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}
.tent-badge.tent-warn { background: var(--vermelho); }

/* Tags */
.amp-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.tag-quente  { background: var(--d-bgc-fef3c7); color: var(--d-txt-d97706); }
.tag-atencao { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }
.tag-novo    { background: var(--marinho-s); color: var(--marinho); }
.tag-delay   { background: var(--roxo-s); color: var(--roxo); }
.tag-vip     { background: var(--d-bgc-fef3c7); color: var(--d-txt-d97706); }
.tag-ativo   { background: var(--verde-s); color: var(--verde); }

/* ── HISTÓRICO ── */
.hist-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bg);
}
.hist-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.hist-nome { font-size: 13px; }
.hist-det  { font-size: 11px; }

/* ── TABELA ── */
.table-wrap { background: var(--d-bgc-ffffff); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.amp-table { width: 100%; border-collapse: collapse; }
.amp-table thead th {
  background: var(--marinho);
  padding: 11px 16px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.amp-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--bg); font-size: 13px; }
.amp-table tbody tr:last-child td { border-bottom: none; }
.amp-table tbody tr:hover td { background: var(--vermelho-s); }
.hora-badge { background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; font-family: 'JetBrains Mono'; }

/* ── RELATÓRIOS GRID ── */
.rel-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.rel-card { background: var(--d-bgc-ffffff); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.rel-card-header {
  padding: 14px 18px; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--marinho-s), var(--d-bgc-ffffff));
  color: var(--marinho);
}
.rel-card-body { padding: 16px 18px; }

/* ── CURRÍCULOS GRID ── */
.curriculo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.curriculo-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px;
  border-top: 3px solid; border: 1px solid var(--border);
  border-top-width: 3px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.curriculo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── CONFIG SECTION ── */
.config-section {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px;
  margin-bottom: 16px; border: 1px solid var(--border);
}
.config-section-title {
  font-size: 14px; font-weight: 800; margin-bottom: 16px;
  color: var(--marinho);
}

/* ── FILTROS ── */
.filtros {
  display: flex; align-items: center; gap: 3px;
  background: var(--d-bgc-ffffff); border-radius: 9px; padding: 4px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.filtro-btn {
  padding: 5px 13px; border-radius: 7px;
  border: none; cursor: pointer; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-muted);
  transition: all var(--transition);
  font-family: 'Outfit';
}
.filtro-btn:hover { background: var(--vermelho-s); color: var(--vermelho); }
.filtro-btn.active { background: var(--vermelho); color: var(--d-txt-ffffff); }

/* ── AVATAR ── */
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--marinho-s); color: var(--marinho);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.aniv-item { border-radius: 8px; transition: background var(--transition); }
.aniv-item:hover { background: var(--vermelho-s); }

/* ── MODAIS ── */
.amp-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: none; align-items: center; justify-content: center;
  background: rgba(14,16,35,.6);
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.amp-modal.show { display: flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.amp-modal-content {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(14,16,35,.3);
  width: 100%; max-width: 580px;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideUp .25s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid var(--border);
  overflow: hidden;
}
.amp-modal-content.modal-lg { max-width: 800px; }
/* Onda 5 (#20) — modal-xl para telas com muitos campos e abas
   (modal-lead, modal-usuario). Antes o modal-lg (800px) apertava
   o rodapé fazendo botões quebrarem linha. */
.amp-modal-content.modal-xl { max-width: 1080px; }
.amp-modal-content.modal-sm { max-width: 420px; }
@keyframes slideUp { from { transform: translateY(24px) scale(.97); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
.amp-modal-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--marinho-esc), var(--marinho));
}
.amp-modal-title { font-size: 16px; font-weight: 800; color: var(--d-txt-ffffff); }
.amp-modal-subtitle { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }
.modal-close-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: none; background: rgba(255,255,255,.15); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--d-txt-ffffff); transition: all var(--transition);
}
.modal-close-btn:hover { background: var(--vermelho); }
.amp-modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.amp-modal-footer {
  padding: 16px 22px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-shrink: 0; background: var(--bg);
}
.modal-stage-badge {
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: 99px; background: rgba(255,255,255,.2);
  color: var(--d-txt-ffffff); border: 1px solid rgba(255,255,255,.3);
}

/* Lead destaque */
.lead-destaque {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 11px; margin-bottom: 18px;
}
.lead-destaque.verde   { background: var(--verde-s); border: 1px solid var(--d-brd-a7f3c0); }
.lead-destaque.roxo    { background: var(--roxo-s); border: 1px solid var(--d-brd-ddd6fe); }
.lead-destaque.laranja { background: var(--amarelo-s); border: 1px solid var(--d-brd-fde68a); }
.lead-destaque.cinza   { background: var(--bg); border: 1px solid var(--border); }
.ld-nome { font-size: 16px; font-weight: 800; color: var(--text); }
.ld-info { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ld-tel  { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.btn-copy-tel {
  font-size: 10px; padding: 2px 9px; border-radius: 99px;
  background: var(--d-bgc-ffffff); border: 1px solid var(--border); cursor: pointer;
  font-family: 'Outfit'; transition: all var(--transition);
}
.btn-copy-tel:hover { background: var(--vermelho); color: var(--d-txt-ffffff); border-color: var(--vermelho); }
.tent-badge-lg {
  font-size: 12px; font-weight: 700; padding: 4px 12px;
  border-radius: 99px; background: var(--azul); color: var(--d-txt-ffffff);
}
.tent-badge-lg.tent-warn { background: var(--vermelho); }

/* Abas do lead */
.lead-tabs {
  display: flex; border-bottom: 2px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
  background: var(--d-bgc-ffffff);
}
.lead-tab {
  padding: 11px 17px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -2px; color: var(--text-muted); transition: all var(--transition);
  background: none; border: none;
}
.lead-tab:hover:not(.disabled) { color: var(--vermelho); }
.lead-tab.active { color: var(--vermelho); border-bottom: 2px solid var(--vermelho); }
.lead-tab.disabled { color: var(--border-strong) !important; cursor: not-allowed !important; }
.lead-tab-pane { display: none; }
.lead-tab-pane.active { display: block; }

/* Resultado options */
.resultado-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.res-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-light); margin: 8px 0 4px; width: 100%; letter-spacing: .05em; }
.res-opt {
  padding: 7px 15px; border-radius: 9px;
  border: 1.5px solid var(--border);
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  transition: all var(--transition); background: var(--d-bgc-ffffff); color: var(--text);
}
.res-opt:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-s); }
.res-opt.selected { background: var(--vermelho); color: var(--d-txt-ffffff); border-color: var(--vermelho); }
.res-opt.danger  { border-color: var(--d-brd-fecaca); color: var(--d-txt-dc2626); background: var(--d-bgc-fef2f2); }
.res-opt.danger:hover { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); border-color: var(--d-brd-dc2626); }
.res-opt.danger.selected { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); border-color: var(--d-brd-dc2626); }
.res-opt.warning { border-color: var(--d-brd-fde68a); color: var(--d-txt-d97706); background: var(--d-bgc-fffbeb); }
.res-opt.warning.selected { background: var(--d-bgc-d97706); color: var(--d-txt-ffffff); border-color: var(--d-brd-d97706); }
.res-opt.disabled-opt { opacity: .4; cursor: not-allowed !important; }

/* Visita resultado */
.visita-opts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.vres-btn {
  padding: 10px; text-align: center; border-radius: 11px;
  border: 2px solid var(--border); cursor: pointer;
  font-size: 12px; font-weight: 700;
  transition: all var(--transition); background: var(--d-bgc-ffffff);
}
.vres-btn:hover { border-color: var(--marinho); color: var(--marinho); }
.vres-btn.selected { background: var(--marinho); color: var(--d-txt-ffffff); border-color: var(--marinho); }
.vres-btn.vres-delay.selected  { background: var(--d-bgc-d97706); border-color: var(--d-brd-d97706); }
.vres-btn.vres-nao.selected    { background: var(--vermelho); border-color: var(--vermelho); }
.vres-btn.vres-venda.selected  { background: var(--verde); border-color: var(--verde); }
.resultado-detail { display: none; background: var(--bg); border-radius: 11px; padding: 16px; margin-top: 10px; border: 1px solid var(--border); }
.resultado-detail.active { display: block; }

/* Recomendação cards */
.rec-card { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 16px; margin-bottom: 10px; }
.rec-num  { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 9px; background: var(--d-bgc-ffffff);
  border: 1.5px solid var(--border); cursor: pointer;
  font-size: 13px; transition: all var(--transition); user-select: none;
}
.check-item:hover { border-color: var(--vermelho); background: var(--vermelho-s); }
.check-item.done  { background: var(--verde-s); border-color: var(--d-brd-6ee7b7); color: var(--verde); }
.check-icon { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--verde); flex-shrink: 0; }
.check-item.done .check-icon { border-color: var(--verde); background: var(--verde); color: var(--d-txt-ffffff); }

/* ── FORMULÁRIO ── */
.form-section { margin-bottom: 20px; }
.form-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--marinho); margin-bottom: 14px;
  padding-bottom: 7px; border-bottom: 2px solid var(--vermelho-s);
}
.form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.form-control, .form-select {
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 9px 13px; font-size: 13px; font-family: 'Outfit';
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--d-bgc-ffffff); color: var(--text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(217,26,60,.1);
  outline: none;
}
.form-control.readonly-id { background: var(--bg); color: var(--text-muted); font-family: 'JetBrains Mono'; font-size: 12px; }
textarea.form-control { resize: vertical; min-height: 80px; }
.fonte-desc { font-size: 11px; color: var(--vermelho); margin-top: 4px; display: none; padding: 5px 10px; background: var(--vermelho-s); border-radius: 7px; border-left: 3px solid var(--vermelho); }
.required { color: var(--vermelho); }
.input-group .form-control { border-radius: 9px 0 0 9px; }
.input-group .btn { border-radius: 0 9px 9px 0; border-left: none; }

/* ── BOTÕES ── */
.btn-amparar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; transition: all var(--transition);
  font-family: 'Outfit'; text-decoration: none; letter-spacing: .01em;
}
.btn-primary-amp {
  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl));
  color: var(--d-txt-ffffff);
  box-shadow: 0 3px 12px rgba(217,26,60,.3);
}
.btn-primary-amp:hover {
  background: linear-gradient(135deg, var(--vermelho-esc), var(--vermelho));
  box-shadow: 0 5px 20px rgba(217,26,60,.4);
  transform: translateY(-1px);
}
.btn-secondary-amp {
  background: var(--d-bgc-ffffff); color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-secondary-amp:hover { background: var(--bg); border-color: var(--border-strong); }
.btn-danger-amp { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }
.btn-danger-amp:hover { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); }
.btn-sm-amp { padding: 5px 13px; font-size: 12px; }
.btn-verde-outline { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.btn-verde-outline:hover { background: var(--verde); color: var(--d-txt-ffffff); }

/* ── CONFIRM DIALOG ── */
#modal-confirm .amp-modal-content { max-width: 360px; }
.cd-icon  { font-size: 42px; text-align: center; margin-bottom: 12px; }
.cd-title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--marinho); }
.cd-msg   { font-size: 13px; color: var(--text-muted); text-align: center; white-space: pre-line; }
.cd-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ── TOAST ── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.amp-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--d-bgc-ffffff); border-radius: 11px; padding: 13px 18px;
  box-shadow: 0 8px 28px rgba(14,16,35,.18);
  font-size: 13px; font-weight: 600;
  min-width: 230px; max-width: 340px;
  transform: translateX(30px); opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  border-left: 3px solid var(--border);
  border: 1px solid var(--border);
  border-left-width: 3px;
}
.amp-toast.show { transform: translateX(0); opacity: 1; }
.amp-toast.toast-success { border-left-color: var(--verde); }
.amp-toast.toast-warning { border-left-color: var(--amarelo); }
.amp-toast.toast-info    { border-left-color: var(--azul); }
.amp-toast.toast-danger  { border-left-color: var(--vermelho); }
.toast-icon { font-size: 16px; }

/* ── Toast de erro expansível — Onda 5 (#31) ─────────────────────── */
.amp-toast.toast-error-expandable {
  align-items: flex-start;
  max-width: 400px;
  padding: 14px 18px;
  cursor: pointer;
}
.amp-toast.toast-error-expandable .toast-body {
  flex: 1; min-width: 0;
}
.amp-toast.toast-error-expandable .toast-user-msg {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--text);
}
.amp-toast.toast-error-expandable .toast-contexto {
  font-size: 11px; font-weight: 600;
  color: var(--vermelho);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

/* ── Histórico de Alterações — formato humano — Onda 5 fix (bug 3) ─── */
.audit-key {
  color: var(--d-txt-64748b);
  font-weight: 600;
  font-size: 11px;
  text-transform: lowercase;
}
.audit-sep {
  color: var(--d-txt-cbd5e1);
  font-weight: 400;
  margin: 0 2px;
}
.audit-cod {
  background: var(--d-bgc-eff6ff);
  color: var(--d-txt-1e40af);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.amp-toast.toast-error-expandable .toast-err-toggle {
  margin-top: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: var(--vermelho);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease;
}
.amp-toast.toast-error-expandable .toast-err-toggle:hover {
  background: rgba(220, 38, 38, 0.15);
}
.amp-toast.toast-error-expandable .toast-err-detalhe {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--d-bgc-f8fafc);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 400;
  color: var(--d-txt-475569);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
}

/* ── PERFIL BADGES ── */
.badge-especialista { background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 700; }
.badge-supervisor   { background: var(--amarelo-s); color: var(--d-txt-d97706); font-size: 11px; font-weight: 700; }
.badge-gerente      { background: var(--vermelho-s); color: var(--vermelho); font-size: 11px; font-weight: 700; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty-icon  { font-size: 42px; margin-bottom: 12px; opacity: .5; }
.empty-msg   { text-align: center; color: var(--text-light); font-size: 13px; padding: 20px; }

/* ── REMARKETING WARNING ── */
#remarketing-warn { background: var(--amarelo-s); border: 1px solid var(--d-brd-fde68a); border-radius: 9px; padding: 9px 14px; font-size: 12px; color: var(--d-txt-d97706); margin-top: 8px; }

/* ── CONCLUIR LIGAÇÃO MODAL ── */
.mcl-btn { width: 100%; padding: 13px; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all var(--transition); font-family: 'Outfit'; border: 2px solid transparent; }
.mcl-btn-primary   { background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl)); color: var(--d-txt-ffffff); }
.mcl-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.mcl-btn-secondary { background: var(--d-bgc-ffffff); color: var(--text); border-color: var(--border); }
.mcl-btn-secondary:hover { background: var(--bg); }

/* ── RESPONSIVO ── */
@media (max-width: 1200px) {
  .nm-grid { grid-template-columns: repeat(3,1fr); }
  .curriculo-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .rel-grid { grid-template-columns: 1fr; }
  .curriculo-grid { grid-template-columns: 1fr; }
  .visita-opts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .sidebar { position: fixed; top: var(--header-h); left: -100%; height: calc(100vh - var(--header-h)); z-index: 300; transition: left var(--transition); box-shadow: var(--shadow-lg); }
  .sidebar.sidebar-mobile-open { left: 0; }
  .app-main { padding: 16px; }
  .header-search { display: none; }
  .nm-grid { grid-template-columns: repeat(2,1fr); }
  .top-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .amp-modal { padding: 0; align-items: flex-end; }
  .amp-modal-content { border-radius: 16px 16px 0 0; max-height: 95vh; max-width: 100%; }
  .logo-divider, .logo-crm { display: none; }
}
@media (max-width: 480px) {
  .nm-grid { grid-template-columns: repeat(2,1fr); }
  .k-col { min-width: 200px; }
  .visita-opts { grid-template-columns: repeat(2,1fr); }
}

/* ================================================================
   AGENDA — ESTILO GOOGLE CALENDAR
   ================================================================ */

/* Ocultar top-bar padrão na página agenda */
#page-agenda > .top-bar { display: none; }

/* ---------- BARRA SUPERIOR ---------- */
.gcal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 10px 8px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.gcal-topbar-left  { display: flex; align-items: center; gap: 10px; }
.gcal-topbar-right { display: flex; align-items: center; gap: 10px; }

.gcal-btn-hoje {
  font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 14px; cursor: pointer;
  transition: background .15s;
}
.gcal-btn-hoje:hover { background: var(--bg); }

.gcal-nav-arrows { display: flex; }
.gcal-arrow {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 16px; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; transition: background .15s;
}
.gcal-arrow:hover { background: var(--bg); color: var(--text); }

.gcal-periodo {
  font-size: 20px; font-weight: 400; color: var(--text);
  font-family: 'Google Sans', 'Inter', sans-serif; letter-spacing: -.3px;
}

.gcal-view-switch {
  display: flex; background: var(--bg); border-radius: 4px;
  border: 1px solid var(--border); overflow: hidden;
}
.gcal-view-btn {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: none; border: none; padding: 5px 14px; cursor: pointer;
  transition: background .15s, color .15s;
}
.gcal-view-btn.active {
  background: var(--bg-card); color: var(--marinho);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.gcal-view-btn:hover:not(.active) { background: var(--border); }

/* ---------- WRAPPER + CONTAINER ---------- */
.gcal-wrapper {
  overflow: auto;
  height: calc(100vh - 130px);
  position: relative;
}
.gcal-container {
  display: grid;
  min-width: 700px;
  position: relative;
}

/* ---------- CABEÇALHO DOS DIAS ---------- */
.gcal-header-row {
  display: grid;
  position: sticky; top: 0; z-index: 30;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.gcal-header-gutter {
  width: 52px; min-width: 52px;
  border-right: 1px solid var(--border);
}
.gcal-header-day {
  text-align: center; padding: 8px 4px 6px;
  border-right: 1px solid var(--border);
}
.gcal-day-name {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; display: block;
}
.gcal-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; font-weight: 400; color: var(--text);
  margin-top: 2px; cursor: default;
  font-family: 'Google Sans', 'Inter', sans-serif;
}
.gcal-header-day.is-today .gcal-day-name { color: var(--vermelho); }
.gcal-header-day.is-today .gcal-day-num  {
  background: var(--vermelho); color: var(--d-txt-ffffff); font-weight: 600;
}

/* ---------- CORPO DA GRADE ---------- */
.gcal-body {
  display: grid;
  position: relative;
}
.gcal-time-col {
  width: 52px; min-width: 52px;
}
.gcal-time-label {
  height: 48px; display: flex; align-items: flex-start; justify-content: flex-end;
  padding-right: 8px; padding-top: 2px;
  font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono';
  border-right: 1px solid var(--border);
}
.gcal-day-col {
  position: relative; border-right: 1px solid var(--border);
  min-width: 0;
}
.gcal-day-col.is-today { background: rgba(217,26,60,.025); }
.gcal-hour-line {
  height: 48px; border-bottom: 1px solid var(--border);
  position: relative;
}
.gcal-half-line {
  position: absolute; top: 50%; left: 0; right: 0;
  border-bottom: 1px dashed var(--border); opacity: .6;
}

/* ---------- LINHA DO "AGORA" ---------- */
.gcal-now-line {
  position: absolute; left: 0; right: 0; z-index: 10; pointer-events: none;
}
.gcal-now-dot {
  position: absolute; left: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho);
}
.gcal-now-bar {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--vermelho);
}

/* ---------- EVENTOS ---------- */
.gcal-event {
  position: absolute; left: 2px; right: 2px;
  border-radius: 4px; padding: 2px 6px;
  font-size: 11px; font-weight: 500; line-height: 1.3;
  cursor: pointer; overflow: hidden; z-index: 5;
  transition: filter .15s, transform .1s;
  border-left: 3px solid rgba(0,0,0,.25);
}
.gcal-event:hover { filter: brightness(.93); transform: scale(1.01); }
.gcal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcal-event-time  { font-size: 10px; opacity: .85; }

/* Cores por especialista */
.gcal-ev-0 { background: var(--d-bgc-1b6b3a)22; color: var(--d-txt-1b6b3a); border-left-color: var(--d-brd-1b6b3a); }
.gcal-ev-1 { background: var(--d-bgc-2563eb)22; color: var(--d-txt-1d4ed8); border-left-color: var(--d-brd-2563eb); }
.gcal-ev-2 { background: var(--d-bgc-8b5cf6)22; color: var(--d-txt-7c3aed); border-left-color: var(--d-brd-8b5cf6); }
.gcal-ev-3 { background: var(--d-bgc-d97706)AA; color: var(--d-txt-ffffff);    border-left-color: var(--d-brd-d97706); background: var(--d-bgc-d97706)22; color: var(--d-txt-92400e); }
.gcal-ev-4 { background: var(--d-bgc-d91a3c)22; color: var(--d-txt-a80f2a); border-left-color: var(--d-brd-d91a3c); }
.gcal-ev-store { background: var(--d-bgc-1b6b3a)18; color: var(--d-txt-1b6b3a); border-left-color: var(--d-brd-1b6b3a); }

/* ---------- POPOVER ---------- */
.gcal-popover {
  position: fixed; z-index: 9999;
  background: var(--bg-card); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  min-width: 280px; max-width: 320px;
  border: 1px solid var(--border);
  animation: popoverIn .12s ease;
}
@keyframes popoverIn {
  from { opacity:0; transform: scale(.95) translateY(-4px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.gcal-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
}
.gcal-popover-titulo { font-size: 14px; font-weight: 600; color: var(--text); }
.gcal-popover-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 13px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gcal-popover-close:hover { background: var(--bg); }
.gcal-popover-body { padding: 10px 14px 14px; }
.gcal-pop-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text); margin-bottom: 7px;
}
.gcal-pop-row i { color: var(--text-muted); font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ---------- MINI AGENDA DASHBOARD — mesmo visual do gcal, altura reduzida ---------- */
.ag-slot { cursor: pointer; }

.gcal-dash-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
/* Contêiner gcal dentro do dashboard (herda os estilos gcal-container) */
.gcal-container.gcal-dash {
  min-width: 600px;
}
/* Limita a altura dos eventos no dash para não ocupar muito espaço */
.gcal-container.gcal-dash .gcal-hour-line {
  height: 32px; /* menor que os 48px da agenda completa */
}
.gcal-container.gcal-dash .gcal-time-label {
  height: 32px;
}
.gcal-container.gcal-dash .gcal-now-line {
  /* ajuste proporcional: 32/48 = 0.667 do offset */
}
/* Remove o sticky do header dentro do dash (já está dentro de um card) */
.gcal-container.gcal-dash .gcal-header-row {
  position: relative;
  top: auto;
}
/* Limita visualmente a ~8h de slots visíveis com scroll se necessário */
.gcal-dash-wrapper {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ================================================================
   CARDS DE EXPORTAÇÃO EXCEL
   ================================================================ */
.rel-export-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .18s, transform .15s, border-color .18s;
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
}
.rel-export-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.rel-export-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 2px;
}
.rel-export-label {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.rel-export-sub {
  font-size: 11px; color: var(--text-muted); line-height: 1.4; flex-grow: 1;
}
.rel-export-btn {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  background: var(--verde-s); color: var(--verde);
  border-radius: 6px; padding: 5px 10px; text-align: center;
  transition: background .15s;
}
.rel-export-card:hover .rel-export-btn {
  background: var(--verde); color: var(--d-txt-ffffff);
}

/* ================================================================
   RELATÓRIO DASHBOARD — PAINEL COMPLETO
   ================================================================ */
.rdash-section        { margin-bottom: 28px; }
.rdash-section-title  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rdash-section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* KPI hero row */
.rdash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rdash-kpi {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .15s;
}
.rdash-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rdash-kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
.rdash-kpi-icon  { font-size: 22px; margin-bottom: 8px; }
.rdash-kpi-val   { font-size: 28px; font-weight: 800; font-family: 'JetBrains Mono'; line-height: 1; }
.rdash-kpi-lbl   { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.rdash-kpi-delta { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; }
.rdash-kpi-delta.up   { background: var(--verde-s);   color: var(--verde); }
.rdash-kpi-delta.down { background: var(--d-bgc-fee2e2);           color: var(--d-txt-dc2626); }
.rdash-kpi-delta.neu  { background: var(--bg);         color: var(--text-muted); }

/* 2-col e 3-col layouts */
.rdash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rdash-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rdash-2col, .rdash-3col { grid-template-columns: 1fr; } }

/* Card genérico */
.rdash-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.rdash-card-hd {
  padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.rdash-card-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.rdash-card-title i { color: var(--vermelho); }
.rdash-card-body  { padding: 14px 18px; }

/* Funil visual */
.rfunil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rfunil-icon { font-size: 16px; width: 26px; text-align: center; }
.rfunil-lbl  { width: 110px; font-size: 12px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.rfunil-track { flex: 1; background: var(--bg); border-radius: 99px; height: 10px; overflow: hidden; }
.rfunil-fill  { height: 100%; border-radius: 99px; transition: width .6s ease; }
.rfunil-n    { width: 28px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono'; }
.rfunil-pct  { width: 42px; text-align: right; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono'; }
.rfunil-conv { font-size: 10px; color: var(--text-light); width: 38px; text-align: right; }

/* Barra de progresso de meta */
.rmeta-row    { margin-bottom: 14px; }
.rmeta-head   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rmeta-nome   { font-size: 12px; font-weight: 600; color: var(--text); }
.rmeta-vals   { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono'; }
.rmeta-track  { background: var(--bg); border-radius: 99px; height: 8px; overflow: hidden; }
.rmeta-fill   { height: 100%; border-radius: 99px; transition: width .6s; }
.rmeta-badge  { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-top: 4px; }

/* Ranking especialistas */
.resp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.resp-row:last-child { border-bottom: none; }
.resp-rank  { font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono'; color: var(--text-light); width: 18px; text-align: center; }
.resp-rank.gold   { color: var(--d-txt-d97706); }
.resp-rank.silver { color: var(--d-txt-6b7280); }
.resp-rank.bronze { color: var(--d-txt-92400e); }
.resp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resp-info   { flex: 1; }
.resp-nome   { font-size: 12px; font-weight: 700; color: var(--text); }
.resp-detalhe { font-size: 11px; color: var(--text-muted); }
.resp-stats  { display: flex; gap: 12px; }
.resp-stat   { text-align: center; }
.resp-stat-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono'; color: var(--text); }
.resp-stat-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* Tabela de leads quentes */
.rleads-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.rleads-row:last-child { border-bottom: none; }
.rleads-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rleads-nome { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); }
.rleads-etapa{ font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.rleads-tent { font-size: 11px; font-family: 'JetBrains Mono'; color: var(--text-muted); width: 24px; text-align: right; }

/* Gráfico de barras SVG canvas */
.rchart-wrap  { width: 100%; overflow: hidden; }
.rchart-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rchart-bar-lbl { font-size: 10px; color: var(--text-muted); width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rchart-bar-track { flex: 1; background: var(--bg); border-radius: 99px; height: 14px; overflow: hidden; position: relative; }
.rchart-bar-fill  { height: 100%; border-radius: 99px; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 700; color: var(--d-txt-ffffff); transition: width .7s ease; white-space: nowrap; }

/* Mini sparkline (barras inline) */
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.spark-bar { width: 6px; border-radius: 2px 2px 0 0; transition: height .4s; }

/* Score de saúde do funil */
.rhealthscore {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 16px;
}
.rhs-circle {
  width: 96px; height: 96px; border-radius: 50%;
  border: 6px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 10px;
}
.rhs-val { font-size: 28px; font-weight: 900; font-family: 'JetBrains Mono'; }
.rhs-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: center; }
.rhs-status { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; margin-top: 6px; }

/* Ticker de alertas */
.ralerta {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; border-radius: 8px; margin-bottom: 8px;
  font-size: 12px;
}
.ralerta:last-child { margin-bottom: 0; }
.ralerta-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ralerta-txt  { flex: 1; color: var(--text); line-height: 1.4; }
.ralerta-txt strong { font-weight: 700; }
.ralerta.danger  { background: var(--d-bgc-fee2e2); border-left: 3px solid var(--d-brd-dc2626); }
.ralerta.warning { background: var(--amarelo-s); border-left: 3px solid var(--amarelo); }
.ralerta.success { background: var(--verde-s); border-left: 3px solid var(--verde); }
.ralerta.info    { background: var(--marinho-s); border-left: 3px solid var(--marinho); }

/* Aniversariantes */
.raniv-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.raniv-row:last-child { border-bottom: none; }
.raniv-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vermelho-s), var(--marinho-s)); color: var(--marinho); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.raniv-info { flex: 1; }
.raniv-nome { font-size: 12px; font-weight: 700; }
.raniv-data { font-size: 11px; color: var(--text-muted); }
.raniv-dias { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }

/* ============================================================
   AMPARAR CRM — Estilos: Visibilidade, Transferência, Inativação
   COLAR no final do styles_amparar.css
   ============================================================ */

/* Alertas (se ainda não existirem com esses nomes) */
.alert-info-amp {
  background: var(--d-bgc-dbeafe); color: var(--d-txt-1e40af); border: 1px solid var(--d-brd-bfdbfe);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}
.alert-warning-amp {
  background: var(--d-bgc-fef3c7); color: var(--d-txt-92400e); border: 1px solid var(--d-brd-fde68a);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}
.alert-success-amp {
  background: var(--d-bgc-d1fae5); color: var(--d-txt-065f46); border: 1px solid var(--d-brd-a7f3c0);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}

/* Lista de supervisores no modal-visibilidade */
.vis-lista {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px;
}
.vis-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background var(--transition);
}
.vis-item:hover { background: var(--bg); }
.vis-item input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; margin: 0;
}
.vis-info { flex: 1; }
.vis-nome { font-size: 13px; font-weight: 700; color: var(--text); }
.vis-sigla { font-weight: 500; color: var(--text-muted); font-size: 11px; }
.vis-filial { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Tabs do modal-inativacao */
.inativ-modo-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.inativ-modo-tabs .btn-amparar.active {
  background: var(--marinho); color: var(--d-txt-ffffff); border-color: var(--marinho);
}

/* Código mono (codigo do lead na tabela) */
.cod-mono {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--bg); padding: 2px 6px; border-radius: 4px;
}

/* ============================================================
   AMPARAR CRM — PATCH UX-1   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Loading overlay global (.amp-loading)
   - Campos inválidos (.is-invalid)
   - Melhoria de contraste do .btn-secondary-amp (ponto 2.b)
   ============================================================ */

/* ── Loading overlay ─────────────────────────────────────────────── */
/* ── Loading overlay global (.amp-loading) — v2 Onda 5 (#12) ────
   Antes: card branco pequeno. Agora: overlay escuro com blur mais
   forte, spinner grande centralizado, mensagem branca. */
.amp-loading {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: amp-loading-fade-in 200ms ease-out;
}
.amp-loading.show { display: flex; }

.amp-loading-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

.amp-spinner-lg {
  width: 64px; height: 64px;
  border: 5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--d-brd-fbbf24);
  border-right-color: var(--d-brd-fbbf24);
  border-radius: 50%;
  animation: amp-spin 0.85s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}

/* Compat — mantém .amp-spinner antigo por segurança */
.amp-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--d-brd-e2e8f0);
  border-top-color: var(--vermelho);
  border-radius: 50%;
  animation: amp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.amp-loading-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-ffffff);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 400px;
  line-height: 1.4;
}

/* Legado — se algum código ainda renderizar .amp-loading-card */
.amp-loading-card {
  background: rgba(255,255,255,0.06);
  padding: 20px 28px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 18px;
  color: var(--d-txt-ffffff);
}

@keyframes amp-spin { to { transform: rotate(360deg); } }
@keyframes amp-loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Campos inválidos (ponto 1.d) ────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--vermelho) !important;
  background-color: var(--d-bgc-fef2f2) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  animation: amp-shake 320ms ease-in-out;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

@keyframes amp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}


/* ── Melhoria de contraste dos botões secundários (ponto 2.b) ────── */
/* Override do .btn-secondary-amp original para deixar mais
   visualmente "clicável". A cor do texto era var(--text-muted)
   que dava sensação de botão desabilitado. */
.btn-secondary-amp {
  background: var(--d-bgc-ffffff);
  color: var(--text);                    /* era --text-muted */
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}

.btn-secondary-amp:hover {
  background: var(--bg);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.btn-secondary-amp:active {
  transform: translateY(1px);
}

/* ── Neutralizar o botão "Excluir Lead" (decisão do Devinhos) ────
   Regra: SÓ ficam em destaque os botões de ação principal do fluxo
   (Avançar Etapa, Registrar Resultado, Cadastrar Lead, Confirmar).
   "Excluir Lead" deve ser neutro como Fechar/Compartilhar/Transferir.

   O HTML tem inline style com !important implícito de cor vermelha;
   sobrescrevemos com !important via ID específico — sem precisar
   editar o HTML. */
#mld-btn-excluir {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
#mld-btn-excluir:hover {
  background: var(--bg) !important;
  color: var(--vermelho) !important;
  border-color: var(--vermelho) !important;
}
/* Hover ainda mostra o ícone vermelho pra dar pista de "ação destrutiva".
   No estado normal o botão fica neutro. */

/* ============================================================
   AMPARAR CRM — PATCH UX-1   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Loading overlay global (.amp-loading)
   - Campos inválidos (.is-invalid)
   - Melhoria de contraste do .btn-secondary-amp (ponto 2.b)
   ============================================================ */

/* ── Loading overlay ─────────────────────────────────────────────── */
/* ── Loading overlay global (.amp-loading) — v2 Onda 5 (#12) ────
   Antes: card branco pequeno. Agora: overlay escuro com blur mais
   forte, spinner grande centralizado, mensagem branca. */
.amp-loading {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: amp-loading-fade-in 200ms ease-out;
}
.amp-loading.show { display: flex; }

.amp-loading-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

.amp-spinner-lg {
  width: 64px; height: 64px;
  border: 5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--d-brd-fbbf24);
  border-right-color: var(--d-brd-fbbf24);
  border-radius: 50%;
  animation: amp-spin 0.85s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}

/* Compat — mantém .amp-spinner antigo por segurança */
.amp-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--d-brd-e2e8f0);
  border-top-color: var(--vermelho);
  border-radius: 50%;
  animation: amp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.amp-loading-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-ffffff);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 400px;
  line-height: 1.4;
}

/* Legado — se algum código ainda renderizar .amp-loading-card */
.amp-loading-card {
  background: rgba(255,255,255,0.06);
  padding: 20px 28px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 18px;
  color: var(--d-txt-ffffff);
}

@keyframes amp-spin { to { transform: rotate(360deg); } }
@keyframes amp-loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Campos inválidos (ponto 1.d) ────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--vermelho) !important;
  background-color: var(--d-bgc-fef2f2) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  animation: amp-shake 320ms ease-in-out;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

@keyframes amp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}


/* ── Melhoria de contraste dos botões secundários (ponto 2.b) ────── */
/* Override do .btn-secondary-amp original para deixar mais
   visualmente "clicável". A cor do texto era var(--text-muted)
   que dava sensação de botão desabilitado. */
.btn-secondary-amp {
  background: var(--d-bgc-ffffff);
  color: var(--text);                    /* era --text-muted */
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}

.btn-secondary-amp:hover {
  background: var(--bg);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.btn-secondary-amp:active {
  transform: translateY(1px);
}

/* ── Neutralizar o botão "Excluir Lead" (decisão do Devinhos) ────
   Regra: SÓ ficam em destaque os botões de ação principal do fluxo
   (Avançar Etapa, Registrar Resultado, Cadastrar Lead, Confirmar).
   "Excluir Lead" deve ser neutro como Fechar/Compartilhar/Transferir.

   O HTML tem inline style com !important implícito de cor vermelha;
   sobrescrevemos com !important via ID específico — sem precisar
   editar o HTML. */
#mld-btn-excluir {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
#mld-btn-excluir:hover {
  background: var(--bg) !important;
  color: var(--vermelho) !important;
  border-color: var(--vermelho) !important;
}
/* Hover ainda mostra o ícone vermelho pra dar pista de "ação destrutiva".
   No estado normal o botão fica neutro. */
/* ============================================================
   AMPARAR CRM — PATCH PERS-3 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Modo read-only da aba Visita (lead em Venda/Carteira)
   - Estilo da lista de histórico de visitas
   ============================================================ */

/* ── Modo read-only da aba Visita ────────────────────────────────── */
/* Quando o lead já está em Venda ou Carteira, os forms de edição
   ficam ocultos e os botões viram filtros do histórico. */
#tab-visita.modo-readonly .resultado-detail {
  display: none !important;
}

#tab-visita.modo-readonly .vres-btn {
  /* Indicação visual de que o botão agora é um filtro, não ação */
  cursor: pointer;
}

#tab-visita.modo-readonly .vres-btn.selected {
  /* Mantém o destaque da seleção, mas adiciona indicação de "filtro ativo" */
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Esconde o textarea de observações em modo read-only — observações
   ficam visíveis dentro de cada item do histórico */
#tab-visita.modo-readonly #mld-vis-obs {
  display: none;
}
#tab-visita.modo-readonly #mld-vis-obs + .form-section,
#tab-visita.modo-readonly textarea#mld-vis-obs {
  display: none;
}
/* Esconde também o título "Observações" do form-section que envolve o textarea */
#tab-visita.modo-readonly .form-section:has(#mld-vis-obs) {
  display: none;
}


/* ── Container do histórico ─────────────────────────────────────── */
.vis-historico {
  margin-top: 16px;
  padding: 16px;
  background: var(--d-bgc-f8fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.vis-hist-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 16px;
  font-size: 14px;
  font-style: italic;
}

.vis-hist-header {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.vis-hist-count {
  display: inline-block;
  background: var(--vermelho);
  color: var(--d-txt-ffffff);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
}

.vis-hist-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ── Cada item do histórico ─────────────────────────────────────── */
.vis-hist-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--border);
  border-radius: 9px;
  border-left: 4px solid var(--border-strong);
  transition: border-color 150ms ease;
}

.vis-hist-item:hover {
  border-left-color: var(--vermelho);
}

/* Cor da barra lateral por tipo */
.vis-hist-item.hist-delay { border-left-color: var(--d-brd-f59e0b); }
.vis-hist-item.hist-c2    { border-left-color: var(--d-brd-7c3aed); }
.vis-hist-item.hist-nao   { border-left-color: var(--d-brd-dc2626); }


.vis-hist-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 38px;
  text-align: center;
  align-self: flex-start;
}

.vis-hist-body {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.vis-hist-data {
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
  margin-bottom: 3px;
}

.vis-hist-resultado {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 3px;
}

.vis-hist-resultado::before {
  content: '→ ';
  color: var(--border-strong);
}

.vis-hist-local {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 3px;
}

.vis-hist-obs {
  margin-top: 6px;
  padding: 7px 9px;
  background: var(--bg);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-style: italic;
}
.vis-hist-obs::before {
  content: '💬 ';
  font-style: normal;
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH UI-2 KANBAN SCROLL
   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Resolve: colunas do Kanban com muitos cards quebravam a UI
   ao crescer indefinidamente. Agora cada coluna tem altura
   máxima e o corpo (área de cards) tem scroll vertical interno.

   Como funciona:
   - .k-col ganha max-height baseado na viewport
   - .k-col-body recebe overflow-y: auto
   - Header colorido permanece sticky no topo da coluna (fixo)
   - Botão "+ Adicionar lead" permanece sticky no rodapé
   - Scrollbar custom discreto (pequeno e cinza)

   Tem fallback responsivo via media query para telas pequenas.
   ============================================================ */

/* ── Altura máxima da coluna ─────────────────────────────────────── */
/* O cálculo desconta:
   - Header do app (~64px)
   - Padding/título da página de Processo de Vendas (~140px)
   - Breathing room inferior (~36px)
   Total: 240px. Coluna nunca ocupa altura inteira do viewport,
   garantindo respiro visual. */
.k-col {
  max-height: calc(100vh - 240px);
}

/* Em telas menores, reduz o desconto pra dar mais espaço */
@media (max-height: 700px) {
  .k-col {
    max-height: calc(100vh - 180px);
  }
}


/* ── Scroll vertical no corpo da coluna ─────────────────────────── */
.k-col-body {
  overflow-y: auto;
  overflow-x: hidden;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}


/* ── Scrollbar custom (WebKit: Chrome, Safari, Edge) ─────────────── */
.k-col-body::-webkit-scrollbar {
  width: 6px;
}

.k-col-body::-webkit-scrollbar-track {
  background: transparent;
}

.k-col-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  transition: background 150ms ease;
}

.k-col-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}


/* ── Indicação visual sutil de "tem mais conteúdo embaixo" ──────── */
/* Sombra interna no rodapé do .k-col-body quando há overflow.
   Implementação simples via background-image gradient. Não é
   100% preciso (aparece mesmo se o scroll chegou no fim), mas
   dá pista visual sem JavaScript. */
.k-col-body {
  /* Mantém o scroll funcional + adiciona sombra muito sutil
     pra indicar continuidade. */
  background:
    linear-gradient(var(--d-bgc-ffffff) 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), var(--d-bgc-ffffff) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.08), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--bg);
  background-size: 100% 14px, 100% 14px, 100% 6px, 100% 6px;
  background-attachment: local, local, scroll, scroll;
}

/* ============================================================
   AMPARAR CRM — PATCH v1.1.0 — Versionamento + Changelog
   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026
   ============================================================ */

/* ── Badge da versão no rodapé da sidebar ────────────────────────── */
.app-version-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin: 4px 8px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
  font-family: 'Outfit', sans-serif;
}

.app-version-badge:hover {
  background: var(--d-bgc-ffffff);
  border-color: var(--vermelho);
  color: var(--vermelho);
  transform: translateY(-1px);
}

.app-version-badge:active {
  transform: translateY(0);
}

.app-version-icon {
  font-size: 13px;
}

.app-version-label {
  font-weight: 700;
}

.app-version-date {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
}


/* ── Modal de changelog — v2 Onda 5 (#4) —────────────────────────
   Reforço visual. Antes: layout minimalista com pouco contraste.
   Agora: hero com gradiente marinho, cards de versão com relevo,
   destaque forte pra "versão atual". */
.changelog-modal {
  max-width: 720px;
  width: 94%;
  max-height: 92vh;
  border-radius: 20px;
}

.changelog-modal .amp-modal-header {
  padding: 26px 30px 24px;
  background: linear-gradient(135deg, var(--d-bgc-0f172a) 0%, var(--d-bgc-1e2761) 55%, var(--d-bgc-2d3579) 100%);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.changelog-modal .amp-modal-header::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(251,191,36,0.28) 0%, rgba(251,191,36,0) 65%);
  pointer-events: none;
}
.changelog-modal .amp-modal-title {
  font-size: 22px; font-weight: 900; letter-spacing: 0.01em;
  font-family: 'Outfit', sans-serif;
  position: relative;
}
.changelog-modal .amp-modal-sub {
  font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 6px;
  font-weight: 500; position: relative;
}
.changelog-modal .amp-modal-close {
  background: rgba(255,255,255,0.12);
  color: var(--d-txt-ffffff);
  border: none; border-radius: 10px;
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease;
}
.changelog-modal .amp-modal-close:hover { background: rgba(255,255,255,0.24); }

.changelog-modal .amp-modal-body {
  padding: 24px 28px 28px;
  overflow-y: auto;
  max-height: calc(92vh - 200px);
  background: linear-gradient(180deg, var(--d-bgc-f8fafc) 0%, var(--d-bgc-ffffff) 100%);
}

.changelog-modal .amp-modal-footer {
  padding: 18px 28px;
  background: var(--d-bgc-ffffff);
  border-top: 1px solid var(--d-brd-e2e8f0);
}

/* Cada bloco de versão */
.changelog-versao {
  padding: 20px 22px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.changelog-versao:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}

.changelog-versao.atual {
  background: linear-gradient(135deg, var(--d-bgc-fffbeb) 0%, var(--d-bgc-fef3c7) 100%);
  border: 2px solid var(--d-brd-fbbf24);
  box-shadow: 0 8px 28px rgba(251, 191, 36, 0.28);
  position: relative;
  overflow: hidden;
}
.changelog-versao.atual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--d-bgc-fbbf24), var(--d-bgc-f59e0b), var(--d-bgc-fbbf24));
  background-size: 200% 100%;
  animation: changelog-shimmer 3s linear infinite;
}
@keyframes changelog-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.changelog-versao-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.changelog-tag-novo {
  background: var(--d-bgc-dc2626);
  color: var(--d-txt-ffffff);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  animation: changelog-pulse 1.6s ease-in-out infinite;
}

@keyframes changelog-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.changelog-versao-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--marinho);
  font-family: 'Outfit', sans-serif;
}

.changelog-versao-data {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.changelog-versao-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.changelog-versao-resumo {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}


/* Grupos dentro de uma versão */
.changelog-grupo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.changelog-grupo:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 8px;
}

.changelog-grupo-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--marinho);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.changelog-grupo-icone {
  font-size: 16px;
}

.changelog-itens {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-itens li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.changelog-itens li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 5px;
  color: var(--verde);
  font-weight: 800;
  font-size: 12px;
}


/* Scroll discreto no body do changelog */
.changelog-body::-webkit-scrollbar {
  width: 6px;
}
.changelog-body::-webkit-scrollbar-track {
  background: transparent;
}
.changelog-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.changelog-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   AMPARAR CRM — PATCH UX-3.1.b (CSS appendix)
   Beyond Bits Tecnologia © 2026

   INSTRUÇÃO: cole este bloco no FINAL do styles_amparar.css
   (ou crie um novo arquivo CSS e referencie no index.html).

   Conteúdo:
   - Paleta de cores no modal Nova Tag
   ============================================================ */

.tag-cor-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.tag-cor-chip {
  width: 44px;
  height: 32px;
  border: 2px solid var(--d-brd-e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
}

.tag-cor-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tag-cor-chip.selecionada {
  border-color: var(--d-brd-1e2358);
  box-shadow: 0 0 0 2px rgba(30, 35, 88, 0.2);
  transform: translateY(-1px);
}

#tag-preview-container {
  padding: 10px 12px;
  background: var(--d-bgc-f9fafb);
  border: 1px dashed var(--d-brd-d1d5db);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

/* ============================================================
   AMPARAR CRM — PATCH UI-3.2 (CSS appendix)
   Beyond Bits Tecnologia © 2026

   INSTRUÇÃO: cole este bloco no FINAL do styles_amparar.css.

   Conteúdo:
   - Badge circular de iniciais do criador no rodapé do card
   ============================================================ */

.k-card-creator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: help;
  user-select: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(30, 35, 88, 0.06);
  transition: transform 0.15s ease;
}

.k-card:hover .k-card-creator-badge {
  transform: scale(1.05);
}
/* ============================================================
   PACOTE 1 v1.3.0 — Arquivamento + Seleção múltipla no Kanban
   ============================================================ */

/* Card arquivado — visual esmaecido */
.k-card.k-card-arquivado {
  opacity: 0.65;
  background: var(--d-bgc-f9fafb);
}
.k-card.k-card-arquivado:hover {
  opacity: 0.85;
}

/* Badge "arquivado" dentro do card */
.k-card-arquivado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--d-bgc-e5e7eb);
  color: var(--d-txt-6b7280);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.k-card-arquivado-badge i {
  font-size: 11px;
}

/* Checkbox de seleção múltipla — escondido por padrão,
   só aparece quando a coluna Kanban está em modo seleção */
.k-card-checkbox {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  font-size: 20px;
  z-index: 2;
  line-height: 1;
}
.k-card-checkbox .k-check-on  { display: none; color: var(--d-txt-1b6b3a); }
.k-card-checkbox .k-check-off { display: inline; color: var(--d-txt-9ca3af); }
.k-card { position: relative; }

/* Modo seleção ativa — mostra checkboxes */
#kanban-board.k-selection-mode .k-card-checkbox {
  display: inline-block;
}

/* Card selecionado */
.k-card.k-card-selected {
  background: var(--d-bgc-e0f2fe);
  border-color: var(--d-brd-0ea5e9) !important;
  box-shadow: 0 0 0 2px #0EA5E9;
}
.k-card.k-card-selected .k-card-checkbox .k-check-on  { display: inline; }
.k-card.k-card-selected .k-card-checkbox .k-check-off { display: none; }

/* Empty state de busca no histórico */
#historico-list .empty-state .empty-icon { font-size: 32px; }

/* ============================================================
   PACOTE 1 v1.3.0 — Modal de Transferência em Lote
   ============================================================ */
.transf-lote-preview-box {
  background: var(--d-bgc-f9fafb);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.transf-lote-lead {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--d-brd-f3f4f6);
  font-size: 13px;
}
.transf-lote-lead:last-child {
  border-bottom: none;
}
.transf-lote-codigo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--d-txt-6b7280);
  background: var(--d-bgc-ffffff);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--d-brd-e5e7eb);
  text-align: center;
}
.transf-lote-nome {
  font-weight: 500;
  color: var(--d-txt-111827);
}
.transf-lote-etapa {
  white-space: nowrap;
}
.transf-lote-mais {
  padding: 8px 4px 4px;
  text-align: center;
  border-top: 1px dashed var(--d-brd-e5e7eb);
  margin-top: 4px;
}

/* ============================================================
   PACOTE 2 v1.4.0 — Feature 4.10 (RN-26)
   Drawer lateral de Filtros Avançados
   Cole este bloco ao final de styles_amparar.css
   ============================================================ */

/* ---- Drawer wrapper ---- */
.fa-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.fa-drawer.fa-drawer-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.25s ease;
}
.fa-drawer-body-lock {
  overflow: hidden;
}

/* Backdrop com blur suave */
.fa-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Painel lateral que desliza da direita */
.fa-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--d-bgc-ffffff);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fa-drawer.fa-drawer-open .fa-drawer-panel {
  transform: translateX(0);
}

/* Header */
.fa-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  flex-shrink: 0;
}
.fa-drawer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-111827);
  line-height: 1.2;
}
.fa-drawer-subtitle {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-top: 4px;
  line-height: 1.4;
}
.fa-drawer-close {
  background: transparent;
  border: none;
  color: var(--d-txt-6b7280);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.fa-drawer-close:hover {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-111827);
}

/* Body — scroll interno */
.fa-drawer-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Footer sticky */
.fa-drawer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--d-brd-e5e7eb);
  background: var(--d-bgc-fafafa);
  flex-shrink: 0;
}

/* ---- Campos de filtro ---- */
.fa-campo {
  margin-bottom: 20px;
}
.fa-campo:last-child {
  margin-bottom: 0;
}
.fa-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-txt-374151);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fa-input {
  width: 100%;
}

/* Range (data / faixa numérica) */
.fa-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-range > input {
  flex: 1 1 0;
  min-width: 0;
}
.fa-range-sep {
  font-size: 12px;
  color: var(--d-txt-9ca3af);
  font-weight: 500;
  flex-shrink: 0;
}

/* Multi-select em chips */
.fa-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Toggle AND/OR — Onda 6 (#14) — só aparece em campos que declaram
   permitirAndOr:true no config. Segmented control compacto acima
   das opções, com fonte pequena pra não competir com os chips. */
.fa-modo-toggle {
  display: inline-flex;
  background: var(--d-bgc-f1f5f9);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 8px;
  padding: 2px;
  margin: 4px 0 8px;
  font-size: 11px;
  gap: 2px;
}
.fa-modo-opt {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--d-txt-64748b);
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.fa-modo-opt:hover {
  background: var(--d-bgc-e2e8f0);
  color: var(--d-txt-334155);
}
.fa-modo-opt.selected {
  background: var(--d-bgc-1e2761);
  color: var(--d-txt-ffffff);
  box-shadow: 0 1px 3px rgba(30,39,97,0.25);
}
.fa-modo-opt.selected:hover {
  background: var(--d-bgc-2d3579);
}
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--d-txt-374151);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fa-chip:hover {
  background: var(--d-bgc-e5e7eb);
}
.fa-chip input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1B6B3A;
}
.fa-chip:has(input:checked) {
  background: var(--d-bgc-d1fae5);
  border-color: var(--d-brd-059669);
  color: var(--d-txt-065f46);
  font-weight: 600;
}
/* Fallback pra navegadores sem :has (Safari antigo, Firefox < 121) —
   o chip fica funcional mesmo sem o efeito visual do "selecionado" */

/* Checkbox "incluir vazias" */
.fa-chk-vazias {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  user-select: none;
}
.fa-chk-vazias input[type="checkbox"] {
  margin: 0;
  accent-color: #1B6B3A;
}

/* Responsivo — tela pequena */
@media (max-width: 600px) {
  .fa-drawer-panel {
    width: 100vw;
  }
}

/* ============================================================
   PACOTE 2 v1.4.0 — Feature 4.10 (RN-26)
   Drawer lateral de Filtros Avançados
   Cole este bloco ao final de styles_amparar.css
   ============================================================ */

/* ---- Drawer wrapper ---- */
.fa-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.fa-drawer.fa-drawer-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.25s ease;
}
.fa-drawer-body-lock {
  overflow: hidden;
}

/* Backdrop com blur suave */
.fa-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Painel lateral que desliza da direita */
.fa-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--d-bgc-ffffff);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fa-drawer.fa-drawer-open .fa-drawer-panel {
  transform: translateX(0);
}

/* Header */
.fa-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  flex-shrink: 0;
}
.fa-drawer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-111827);
  line-height: 1.2;
}
.fa-drawer-subtitle {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-top: 4px;
  line-height: 1.4;
}
.fa-drawer-close {
  background: transparent;
  border: none;
  color: var(--d-txt-6b7280);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.fa-drawer-close:hover {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-111827);
}

/* Body — scroll interno */
.fa-drawer-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Footer sticky */
.fa-drawer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--d-brd-e5e7eb);
  background: var(--d-bgc-fafafa);
  flex-shrink: 0;
}

/* ---- Campos de filtro ---- */
.fa-campo {
  margin-bottom: 20px;
}
.fa-campo:last-child {
  margin-bottom: 0;
}
.fa-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-txt-374151);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fa-input {
  width: 100%;
}

/* Range (data / faixa numérica) */
.fa-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-range > input {
  flex: 1 1 0;
  min-width: 0;
}
.fa-range-sep {
  font-size: 12px;
  color: var(--d-txt-9ca3af);
  font-weight: 500;
  flex-shrink: 0;
}

/* Multi-select em chips */
.fa-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Toggle AND/OR — Onda 6 (#14) — só aparece em campos que declaram
   permitirAndOr:true no config. Segmented control compacto acima
   das opções, com fonte pequena pra não competir com os chips. */
.fa-modo-toggle {
  display: inline-flex;
  background: var(--d-bgc-f1f5f9);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 8px;
  padding: 2px;
  margin: 4px 0 8px;
  font-size: 11px;
  gap: 2px;
}
.fa-modo-opt {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--d-txt-64748b);
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.fa-modo-opt:hover {
  background: var(--d-bgc-e2e8f0);
  color: var(--d-txt-334155);
}
.fa-modo-opt.selected {
  background: var(--d-bgc-1e2761);
  color: var(--d-txt-ffffff);
  box-shadow: 0 1px 3px rgba(30,39,97,0.25);
}
.fa-modo-opt.selected:hover {
  background: var(--d-bgc-2d3579);
}
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--d-txt-374151);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fa-chip:hover {
  background: var(--d-bgc-e5e7eb);
}
.fa-chip input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1B6B3A;
}
.fa-chip:has(input:checked) {
  background: var(--d-bgc-d1fae5);
  border-color: var(--d-brd-059669);
  color: var(--d-txt-065f46);
  font-weight: 600;
}
/* Fallback pra navegadores sem :has (Safari antigo, Firefox < 121) —
   o chip fica funcional mesmo sem o efeito visual do "selecionado" */

/* Checkbox "incluir vazias" */
.fa-chk-vazias {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  user-select: none;
}
.fa-chk-vazias input[type="checkbox"] {
  margin: 0;
  accent-color: #1B6B3A;
}

/* Responsivo — tela pequena */
@media (max-width: 600px) {
  .fa-drawer-panel {
    width: 100vw;
  }
}

/* ============================================================
   VIS-DATE-1 — Badge de agendamento no card do Kanban
   Pacote 1 pós-homologação (resolve T5)

   Como aplicar:
     ▸ APPEND-ONLY: cole este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente
   ============================================================ */

.k-card-agenda-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.k-card-agenda-badge i {
  font-size: 12px;
  line-height: 1;
}

/* HOJE — verde de destaque (chama atenção pro atendimento do dia) */
.k-card-agenda-badge.k-agenda-hoje {
  background: var(--d-bgc-d1fae5);
  color: var(--d-txt-065f46);
  border-color: var(--d-brd-6ee7b7);
}

/* AMANHÃ — azul suave (planejamento próximo) */
.k-card-agenda-badge.k-agenda-amanha {
  background: var(--d-bgc-dbeafe);
  color: var(--d-txt-1e40af);
  border-color: var(--d-brd-93c5fd);
}

/* FUTURO — cinza neutro (informativo) */
.k-card-agenda-badge.k-agenda-futuro {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-4b5563);
  border-color: var(--d-brd-d1d5db);
}

/* ATRASADO — vermelho de alerta */
.k-card-agenda-badge.k-agenda-atrasado {
  background: var(--d-bgc-fee2e2);
  color: var(--d-txt-991b1b);
  border-color: var(--d-brd-fca5a5);
  animation: k-agenda-pulse 2.5s ease-in-out infinite;
}

@keyframes k-agenda-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
}

/* Card arquivado deixa o badge um pouco esmaecido também */
.k-card.k-card-arquivado .k-card-agenda-badge {
  opacity: 0.7;
}

/* ============================================================
   PACOTE 8 — Melhorias de UX
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente

   Cobre:
     • T2 — Formatação dos cards do modal de duplicidade de telefone
     • T3 — Overlay de progresso na transferência em lote
     • T4 — Truncamento de texto longo nos cards do Kanban + tooltip
   ============================================================ */

/* ── T2 · Cards do modal de duplicidade de telefone ────────── */

#dup-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.dup-card {
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  cursor: default;
}
.dup-card:hover {
  border-color: var(--d-brd-c5c8ec);
  box-shadow: 0 4px 12px rgba(30, 33, 88, 0.08);
  transform: translateY(-1px);
}

.dup-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dup-card-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  letter-spacing: 0.3px;
}

.dup-card-etapa {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dup-badge-arq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-6b7280);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.dup-badge-arq i { font-size: 11px; }

.dup-card-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin-bottom: 6px;
  line-height: 1.3;
}

.dup-card-info {
  font-size: 12px;
  color: var(--d-txt-4b5563);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dup-card-info i {
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  width: 14px;
  text-align: center;
}
.dup-card-info strong {
  color: var(--d-txt-1e2358);
  font-weight: 600;
}
.dup-card-info .text-muted {
  color: var(--d-txt-9ca3af) !important;
  font-size: 11px;
}


/* ── T3 · Overlay de progresso na transferência em lote ────── */

.transf-lote-progress-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: inherit;
  z-index: 10;
  animation: transf-fade-in .2s ease-out;
}

@keyframes transf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transf-lote-progress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--d-brd-e5e7eb);
  border-top-color: var(--d-brd-d91a3c);
  border-radius: 50%;
  animation: transf-spin 0.8s linear infinite;
}

@keyframes transf-spin {
  to { transform: rotate(360deg); }
}

.transf-lote-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin: 0;
}

.transf-lote-progress-sub {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin: 0;
}

.transf-lote-progress-bar-wrap {
  width: 260px;
  height: 6px;
  background: var(--d-bgc-f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.transf-lote-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  border-radius: 999px;
  animation: transf-bar-indet 1.4s ease-in-out infinite;
}
@keyframes transf-bar-indet {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -20%; }
  100% { left: 100%; right: -20%; }
}


/* ── T1 · Aviso de lead já com outro responsável ────────────── */
/* Aparece dentro do preview do modal de transferência em lote
   quando algum lead selecionado já foi transferido para outro
   usuário desde a última sincronização. */

.transf-lote-aviso-outro {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.transf-lote-aviso-outro i {
  font-size: 16px;
  color: var(--d-txt-d97706);
  margin-top: 1px;
}
.transf-lote-aviso-outro strong { color: var(--d-txt-92400e); }


/* ── T4 · Truncamento e tooltip nos cards do Kanban ─────────── */
/* Nome, telefone e fonte podem ter texto longo. Trunca com "..."
   e o hover exibe o texto completo via title nativo do browser.
   Aplicamos APENAS aos elementos textuais; o card em si continua
   se ajustando ao conteúdo secundário (tags, badges etc). */

.k-card-nome,
.k-card-tel,
.k-fonte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* permite flex/grid children encolherem */
}

/* Cursor de help sinaliza que existe tooltip quando o texto foi
   truncado. O CSS não sabe se truncou de verdade; usamos data-attr
   posto pelo KanbanCard v2.6. */
.k-card-nome[data-truncable="true"],
.k-card-tel[data-truncable="true"],
.k-fonte[data-truncable="true"] {
  cursor: help;
}

/* ============================================================
   PACOTE 8 — Melhorias de UX
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente

   Cobre:
     • T2 — Formatação dos cards do modal de duplicidade de telefone
     • T3 — Overlay de progresso na transferência em lote
     • T4 — Truncamento de texto longo nos cards do Kanban + tooltip
   ============================================================ */

/* ── T2 · Cards do modal de duplicidade de telefone ────────── */

#dup-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.dup-card {
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  cursor: default;
}
.dup-card:hover {
  border-color: var(--d-brd-c5c8ec);
  box-shadow: 0 4px 12px rgba(30, 33, 88, 0.08);
  transform: translateY(-1px);
}

.dup-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dup-card-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  letter-spacing: 0.3px;
}

.dup-card-etapa {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dup-badge-arq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-6b7280);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.dup-badge-arq i { font-size: 11px; }

.dup-card-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin-bottom: 6px;
  line-height: 1.3;
}

.dup-card-info {
  font-size: 12px;
  color: var(--d-txt-4b5563);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dup-card-info i {
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  width: 14px;
  text-align: center;
}
.dup-card-info strong {
  color: var(--d-txt-1e2358);
  font-weight: 600;
}
.dup-card-info .text-muted {
  color: var(--d-txt-9ca3af) !important;
  font-size: 11px;
}


/* ── T3 · Overlay de progresso na transferência em lote ────── */
/* v1.1.1 — position:fixed cobrindo a viewport, ancorado no body */

.transf-lote-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;   /* acima dos modais amp-modal */
  animation: transf-fade-in .2s ease-out;
}

.transf-lote-progress-card {
  background: var(--d-bgc-ffffff);
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  min-width: 320px;
}

@keyframes transf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transf-lote-progress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--d-brd-e5e7eb);
  border-top-color: var(--d-brd-d91a3c);
  border-radius: 50%;
  animation: transf-spin 0.8s linear infinite;
}

@keyframes transf-spin {
  to { transform: rotate(360deg); }
}

.transf-lote-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin: 0;
  text-align: center;
}

.transf-lote-progress-sub {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin: 0;
  text-align: center;
}

.transf-lote-progress-bar-wrap {
  width: 260px;
  height: 6px;
  background: var(--d-bgc-f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.transf-lote-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  border-radius: 999px;
  animation: transf-bar-indet 1.4s ease-in-out infinite;
}
@keyframes transf-bar-indet {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -20%; }
  100% { left: 100%; right: -20%; }
}


/* ── T1 · Preview em lista scrollável — todos os leads ─────── */
/* Antes o preview limitava a 5 e mostrava "e mais N". Agora
   mostra TODOS em uma lista scrollável, mantendo o modal com
   altura razoável. */

.transf-lote-contagem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 8px;
  font-size: 12px;
  color: var(--d-txt-6b7280);
}
.transf-lote-contagem strong { color: var(--d-txt-1e2358); font-weight: 700; }

.transf-lote-lista-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  padding: 8px;
  background: var(--d-bgc-fafafb);
}

/* Scrollbar discreta */
.transf-lote-lista-scroll::-webkit-scrollbar { width: 6px; }
.transf-lote-lista-scroll::-webkit-scrollbar-thumb {
  background: var(--d-bgc-d1d5db);
  border-radius: 999px;
}
.transf-lote-lista-scroll::-webkit-scrollbar-track { background: transparent; }

/* Item de lead que já está com outro responsável */
.transf-lote-lead.transf-lote-lead-outro {
  background: var(--d-bgc-fffbeb);
  border-left: 3px solid var(--d-brd-f59e0b);
  padding-left: 8px;
}

.transf-lote-resp-outro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--d-txt-92400e);
  background: var(--d-bgc-fef3c7);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
.transf-lote-resp-outro i { font-size: 11px; }


/* ── T1 · Aviso de lead já com outro responsável ────────────── */
/* Aparece dentro do preview do modal de transferência em lote
   quando algum lead selecionado já foi transferido para outro
   usuário desde a última sincronização. */

.transf-lote-aviso-outro {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.transf-lote-aviso-outro i {
  font-size: 16px;
  color: var(--d-txt-d97706);
  margin-top: 1px;
}
.transf-lote-aviso-outro strong { color: var(--d-txt-92400e); }


/* ── T4 · Truncamento e tooltip nos cards do Kanban ─────────── */
/* Nome, telefone e fonte podem ter texto longo. Trunca com "..."
   e o hover exibe o texto completo via title nativo do browser.
   Aplicamos APENAS aos elementos textuais; o card em si continua
   se ajustando ao conteúdo secundário (tags, badges etc). */

.k-card-nome,
.k-card-tel,
.k-fonte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* permite flex/grid children encolherem */
}

/* Cursor de help sinaliza que existe tooltip quando o texto foi
   truncado. O CSS não sabe se truncou de verdade; usamos data-attr
   posto pelo KanbanCard v2.6. */
.k-card-nome[data-truncable="true"],
.k-card-tel[data-truncable="true"],
.k-fonte[data-truncable="true"] {
  cursor: help;
}

/* ============================================================
   WIKI-STYLES-1 / Central de Conhecimento
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente
   ============================================================ */

/* ── Layout base ─────────────────────────────────────────────── */
.wiki-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background: var(--d-bgc-f8fafc);
}

/* ── Header (título + busca) ─────────────────────────────────── */
.wiki-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--d-bgc-ffffff);
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  gap: 16px;
  flex-shrink: 0;
}

.wiki-header-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
}
.wiki-header-titulo i { font-size: 22px; color: var(--d-txt-d91a3c); }

.wiki-header-busca {
  position: relative;
  width: 380px;
  max-width: 50%;
}
.wiki-busca-icone {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--d-txt-9ca3af);
  font-size: 14px;
  pointer-events: none;
}
.wiki-busca-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s;
  background: var(--d-bgc-fafafb);
}
.wiki-busca-input:focus { border-color: var(--d-brd-d91a3c); background: var(--d-bgc-ffffff); }
.wiki-busca-limpar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--d-txt-9ca3af);
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}
.wiki-busca-limpar:hover { background: var(--d-bgc-f3f4f6); color: var(--d-txt-1e2358); }

/* ── Container (sumário + conteúdo) ──────────────────────────── */
.wiki-container {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sumário lateral ─────────────────────────────────────────── */
.wiki-sumario {
  width: 280px;
  flex-shrink: 0;
  background: var(--d-bgc-ffffff);
  border-right: 1px solid var(--d-brd-e5e7eb);
  overflow-y: auto;
  padding: 16px 0;
}
.wiki-sumario::-webkit-scrollbar { width: 6px; }
.wiki-sumario::-webkit-scrollbar-thumb { background: var(--d-bgc-e5e7eb); border-radius: 999px; }

.wiki-toc-secao { padding: 4px 0; }

.wiki-toc-secao-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.wiki-toc-secao-header:hover { background: var(--d-bgc-f3f4f6); color: var(--d-txt-1e2358); }
.wiki-toc-secao-header i:first-child { font-size: 15px; color: var(--d-txt-6b7280); }

.wiki-toc-caret {
  margin-left: auto;
  font-size: 11px !important;
  transition: transform .2s;
  color: var(--d-txt-9ca3af);
}
.wiki-toc-expandida > .wiki-toc-secao-header .wiki-toc-caret {
  transform: rotate(180deg);
}
.wiki-toc-ativa > .wiki-toc-secao-header {
  color: var(--d-txt-d91a3c);
  background: var(--d-bgc-fef2f5);
}
.wiki-toc-ativa > .wiki-toc-secao-header i:first-child { color: var(--d-txt-d91a3c); }

.wiki-toc-subsecoes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-out;
}
.wiki-toc-expandida .wiki-toc-subsecoes {
  max-height: 500px;
}
.wiki-toc-subitem {
  display: block;
  padding: 8px 20px 8px 46px;
  font-size: 13px;
  color: var(--d-txt-6b7280);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.wiki-toc-subitem:hover {
  background: var(--d-bgc-f9fafb);
  color: var(--d-txt-1e2358);
}
.wiki-toc-subativa {
  color: var(--d-txt-d91a3c) !important;
  font-weight: 600;
  background: var(--d-bgc-fef2f5) !important;
  border-left-color: var(--d-brd-d91a3c) !important;
}

/* ── Conteúdo principal ──────────────────────────────────────── */
.wiki-conteudo {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.wiki-conteudo::-webkit-scrollbar { width: 8px; }
.wiki-conteudo::-webkit-scrollbar-thumb { background: var(--d-bgc-d1d5db); border-radius: 999px; }

.wiki-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-bottom: 12px;
}
.wiki-breadcrumb i { font-size: 11px; }
.wiki-breadcrumb i:first-child { color: var(--d-txt-d91a3c); font-size: 14px; }

.wiki-titulo {
  font-size: 30px;
  font-weight: 800;
  color: var(--d-txt-1e2358);
  margin: 0 0 24px 0;
  line-height: 1.15;
}

.wiki-p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--d-txt-374151);
  margin: 0 0 18px 0;
}
.wiki-p code {
  background: var(--d-bgc-f3f4f6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--d-txt-d91a3c);
}
.wiki-p strong { color: var(--d-txt-1e2358); }

/* ── Listas ──────────────────────────────────────────────────── */
.wiki-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.wiki-lista li {
  position: relative;
  padding: 8px 8px 8px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--d-txt-374151);
}
.wiki-lista li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--d-bgc-d91a3c);
}
.wiki-lista li strong { color: var(--d-txt-1e2358); }
.wiki-lista li code {
  background: var(--d-bgc-f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--d-txt-d91a3c);
}

/* ── Passos numerados ────────────────────────────────────────── */
.wiki-passos {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  counter-reset: passo;
}
.wiki-passo {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  margin-bottom: 10px;
}
.wiki-passo-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  color: var(--d-txt-ffffff);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(217, 26, 60, 0.25);
}
.wiki-passo-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiki-passo-titulo {
  font-size: 14.5px;
  color: var(--d-txt-1e2358);
  font-weight: 700;
}
.wiki-passo-texto {
  font-size: 13.5px;
  color: var(--d-txt-4b5563);
  line-height: 1.55;
}

/* ── Destaques (info, dica, atenção) ─────────────────────────── */
.wiki-destaque {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0 0 20px 0;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
}
.wiki-destaque i { flex-shrink: 0; font-size: 20px; margin-top: 1px; }
.wiki-destaque strong { font-weight: 700; }

.wiki-destaque-info {
  background: var(--d-bgc-eff6ff);
  border: 1px solid var(--d-brd-bfdbfe);
  border-left: 4px solid var(--d-brd-3b82f6);
  color: var(--d-txt-1e40af);
}
.wiki-destaque-info i { color: var(--d-txt-3b82f6); }

.wiki-destaque-dica {
  background: var(--d-bgc-ecfdf5);
  border: 1px solid var(--d-brd-a7f3d0);
  border-left: 4px solid var(--d-brd-10b981);
  color: var(--d-txt-065f46);
}
.wiki-destaque-dica i { color: var(--d-txt-10b981); }

.wiki-destaque-atencao {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
}
.wiki-destaque-atencao i { color: var(--d-txt-d97706); }

.wiki-destaque strong { color: inherit; }

/* ── Tabelas ─────────────────────────────────────────────────── */
.wiki-tabela-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--d-brd-e5e7eb);
  margin: 0 0 22px 0;
}
.wiki-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--d-bgc-ffffff);
}
.wiki-tabela th {
  background: var(--d-bgc-f9fafb);
  color: var(--d-txt-1e2358);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--d-brd-e5e7eb);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.wiki-tabela td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--d-brd-f3f4f6);
  color: var(--d-txt-374151);
  line-height: 1.55;
  vertical-align: top;
}
.wiki-tabela tr:last-child td { border-bottom: none; }
.wiki-tabela tr:hover td { background: var(--d-bgc-fafbfc); }
.wiki-tabela strong { color: var(--d-txt-1e2358); }
.wiki-tabela code {
  background: var(--d-bgc-f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--d-txt-d91a3c);
}

/* ── Mídia (imagem/vídeo com placeholder) ────────────────────── */
.wiki-media {
  margin: 0 0 24px 0;
}
.wiki-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
}
.wiki-media-imagem {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wiki-media-video video {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--d-bgc-000000);
}

/* Placeholder: fica atrás; se a imagem carregar, cobre. */
.wiki-media-imagem .wiki-placeholder,
.wiki-media-video  .wiki-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--d-txt-9ca3af);
  background: linear-gradient(135deg, var(--d-bgc-f9fafb) 0%, var(--d-bgc-f3f4f6) 100%);
  border-radius: 10px;
}
/* Se imagem carregar, o background da wrap cobre o placeholder */
.wiki-media-imagem[style*="url"] .wiki-placeholder { display: none; }
.wiki-media-imagem[style*="url('/assets/')"] .wiki-placeholder { display: flex; }

.wiki-placeholder i {
  font-size: 42px;
  color: var(--d-txt-d1d5db);
}
.wiki-placeholder-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--d-bgc-ffffff);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.wiki-placeholder-hint {
  font-size: 11.5px;
  color: var(--d-txt-9ca3af);
}
.wiki-placeholder-hint code {
  background: var(--d-bgc-ffffff);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--d-txt-d91a3c);
  border: 1px solid var(--d-brd-e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wiki-media-legenda {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  font-style: italic;
  text-align: center;
}

/* ── Navegação Anterior / Próximo ────────────────────────────── */
.wiki-nav-rodape {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--d-brd-e5e7eb);
}
.wiki-nav-rodape-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  color: var(--d-txt-1e2358);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 220px;
  max-width: 320px;
}
.wiki-nav-rodape-item:hover {
  border-color: var(--d-brd-d91a3c);
  box-shadow: 0 4px 12px rgba(217, 26, 60, 0.08);
  transform: translateY(-1px);
  color: var(--d-txt-d91a3c);
}
.wiki-nav-rodape-item i { font-size: 20px; color: var(--d-txt-9ca3af); }
.wiki-nav-rodape-item:hover i { color: var(--d-txt-d91a3c); }
.wiki-nav-anterior { text-align: left; }
.wiki-nav-proximo  { text-align: right; margin-left: auto; }
.wiki-nav-hint {
  display: block;
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.wiki-nav-rodape-item strong {
  font-size: 13.5px;
  color: var(--d-txt-1e2358);
}
.wiki-nav-rodape-item:hover strong { color: var(--d-txt-d91a3c); }

/* ── Busca — Resultados ──────────────────────────────────────── */
.wiki-busca-resultados {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiki-busca-resultado {
  display: block;
  padding: 14px 18px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.wiki-busca-resultado:hover {
  border-color: var(--d-brd-d91a3c);
  box-shadow: 0 4px 12px rgba(217, 26, 60, 0.08);
}
.wiki-busca-resultado-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--d-txt-4b5563);
  font-weight: 600;
  margin-bottom: 6px;
}
.wiki-busca-resultado-cabecalho i { color: var(--d-txt-d91a3c); font-size: 14px; }
.wiki-busca-resultado-caminho { color: var(--d-txt-1e2358); }
.wiki-busca-resultado-trecho {
  font-size: 13px;
  color: var(--d-txt-6b7280);
  line-height: 1.6;
}
.wiki-busca-resultado-trecho mark {
  background: var(--d-bgc-fef08a);
  color: var(--d-txt-713f12);
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}

.wiki-busca-vazio {
  text-align: center;
  padding: 60px 20px;
  color: var(--d-txt-6b7280);
}
.wiki-busca-vazio i {
  font-size: 48px;
  color: var(--d-txt-d1d5db);
  margin-bottom: 16px;
}
.wiki-busca-vazio h2 {
  font-size: 18px;
  color: var(--d-txt-1e2358);
  margin: 0 0 8px 0;
}

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wiki-sumario { width: 220px; }
  .wiki-conteudo { padding: 24px 20px; }
  .wiki-header-busca { width: 200px; }
  .wiki-titulo { font-size: 22px; }
}

@media (max-width: 700px) {
  .wiki-container { flex-direction: column; }
  .wiki-sumario {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--d-brd-e5e7eb);
  }
  .wiki-header { flex-direction: column; align-items: stretch; }
  .wiki-header-busca { width: 100%; max-width: none; }
}

/* ============================================================
   AMPARAR CRM — styles.css   v3.0
   Identidade visual Amparar: Vermelho/Crimson + Marinho
   Beyond Bits Tecnologia © 2026
   ======================================================-====== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── TOKENS AMPARAR ── */
:root {
  /* Cores primárias da logo */
  --vermelho:       #D91A3C;
  --vermelho-esc:   #A80F2A;
  --vermelho-cl:    #F0294E;
  --vermelho-s:     #FDF1F4;
  --vermelho-b:     #F7B8C4;

  /* Marinho / Azul escuro da logo */
  --marinho:        #1E2358;
  --marinho-esc:    #141745;
  --marinho-cl:     #2D3380;
  --marinho-s:      #EDEEF9;
  --marinho-b:      #C5C8EC;

  /* Neutros */
  --bg:             #F5F6FA;
  --bg-card:        #FFFFFF;
  --border:         #E5E7F0;
  --border-strong:  #CBD0E8;
  --text:           #0E1023;
  --text-muted:     #6B7095;
  --text-light:     #A0A5C8;

  /* Status */
  --verde:          #10A64A;
  --verde-s:        #E8F8EE;
  --amarelo:        #F59E0B;
  --amarelo-s:      #FEF3C7;
  --azul:           #3B82F6;
  --azul-s:         #DBEAFE;
  --roxo:           #8B5CF6;
  --roxo-s:         #EDE9FE;

  /* Layout */
  --sidebar-w:      256px;
  --header-h:       62px;
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --shadow:         0 2px 12px rgba(30,35,88,.08);
  --shadow-md:      0 6px 28px rgba(30,35,88,.13);
  --shadow-lg:      0 12px 48px rgba(30,35,88,.18);
  --transition:     .18s ease;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--marinho-b); }

/* ── HEADER ── */
.app-header {
  height: var(--header-h);
  background: linear-gradient(135deg, var(--marinho-esc) 0%, var(--marinho) 100%);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  flex-shrink: 0;
  z-index: 200;
  box-shadow: 0 2px 20px rgba(14,16,35,.35);
  border-bottom: 2px solid var(--vermelho);
}

.header-toggle {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--d-txt-ffffff); font-size: 18px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.header-toggle:hover { background: rgba(255,255,255,.2); }

/* Logo — imagem real da Amparar */
.logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.logo-img-wrap {
  height: 42px;
  display: flex;
  align-items: center;
}
.logo-img-wrap img {
  height: 46px;
  width: auto;
  object-fit: contain;
}
.logo-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.2);
  margin: 0 14px;
}
.logo-crm {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.logo-crm-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--d-txt-ffffff);
  line-height: 1;
  letter-spacing: .02em;
}
.logo-crm-sub {
  font-size: 9.5px;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.header-spacer { flex: 1; }

/* Search */
.search-wrap { position: relative; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  padding: 7px 14px;
  width: 270px;
  transition: background var(--transition);
}
.header-search:focus-within {
  background: rgba(255,255,255,.18);
  border-color: var(--vermelho-cl);
}
.header-search input {
  background: transparent; border: none; outline: none;
  color: var(--d-txt-ffffff); font-size: 13px; width: 100%;
  font-family: 'Outfit';
}
.header-search input::placeholder { color: rgba(255,255,255,.45); }
.header-search i { color: rgba(255,255,255,.55); }
#search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--d-bgc-ffffff); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 999;
  display: none; border: 1px solid var(--border);
  overflow: hidden;
}
.search-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--vermelho-s); }
.search-nome { font-weight: 700; font-size: 13px; }
.search-det  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Notificações */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--d-txt-ffffff); font-size: 17px;
  transition: background var(--transition);
}
.notif-btn:hover { background: rgba(255,255,255,.2); }
#notif-badge {
  position: absolute; top: 5px; right: 5px;
  background: var(--vermelho);
  color: var(--d-txt-ffffff); font-size: 9px; font-weight: 800;
  min-width: 15px; height: 15px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--marinho);
}
#notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 290px; background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 999; display: none;
  border: 1px solid var(--border); overflow: hidden;
}
#notif-dropdown.show { display: block; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.notif-item.unread { background: var(--vermelho-s); }
.notif-msg  { font-size: 12px; font-weight: 600; }
.notif-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Header user */
.header-user { display: flex; align-items: center; gap: 10px; }
.header-name { font-size: 13px; font-weight: 700; color: var(--d-txt-ffffff); line-height: 1.1; }
.header-role { font-size: 10px; color: rgba(255,255,255,.55); }
.header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl));
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--d-txt-ffffff); flex-shrink: 0;
  letter-spacing: .03em;
}

/* ── LAYOUT ── */
.app-layout { display: flex; flex: 1; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-card);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transition: width var(--transition), transform var(--transition);
  z-index: 100;
}
.sidebar.sidebar-collapsed { width: 64px; }
.sidebar.sidebar-collapsed .nav-label,
.sidebar.sidebar-collapsed .nav-badge,
.sidebar.sidebar-collapsed .sidebar-label { display: none; }
.sidebar.sidebar-collapsed .nav-link { justify-content: center; padding: 10px 0; }

/* Sidebar brand strip */
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--vermelho), var(--vermelho-cl));
  flex-shrink: 0;
}

.sidebar-section { padding: 16px 12px 4px; }
.sidebar-label {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light); padding: 0 8px; display: block;
  margin-bottom: 4px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  transition: all var(--transition);
  color: var(--text-muted); font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border: none; background: none; width: 100%;
  white-space: nowrap;
}
.nav-link:hover { background: var(--vermelho-s); color: var(--vermelho); }
.nav-link.active {
  background: linear-gradient(135deg, var(--vermelho-s), var(--d-bgc-fbe6ea));
  color: var(--vermelho);
  font-weight: 700;
  border-left: 3px solid var(--vermelho);
}
.nav-icon { font-size: 17px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  background: var(--vermelho); color: var(--d-txt-ffffff);
  border-radius: 99px; padding: 2px 8px; min-width: 22px; text-align: center;
}
.nav-badge.orange { background: var(--amarelo); }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }

/* Sidebar backdrop */
#sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(14,16,35,.5); z-index: 299;
  backdrop-filter: blur(2px);
}
#sidebar-backdrop.show { display: block; }

/* ── MAIN ── */
.app-main { flex: 1; overflow-y: auto; padding: 26px; transition: padding var(--transition); }

/* ── PÁGINAS ── */
.amp-page { display: none; }
.amp-page.active { display: block; }

/* ── TOP BAR ── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; gap: 12px;
}
.page-title {
  font-size: 21px; font-weight: 800;
  background: linear-gradient(135deg, var(--marinho), var(--marinho-cl));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.top-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── CARDS ── */
.amp-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 20px;
  border: 1px solid var(--border);
}
.amp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.amp-card-title { font-size: 14px; font-weight: 700; color: var(--marinho); }

/* ── KPI CARDS ── */
.kpi-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.kpi-val  { font-size: 26px; font-weight: 800; font-family: 'JetBrains Mono'; letter-spacing: -.01em; }
.kpi-lbl  { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.kpi-trend {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
}
.kpi-trend.up   { background: var(--verde-s); color: var(--verde); }
.kpi-trend.down { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }

/* ── NÚMERO MÁGICO ── */
.numero-magico {
  background: linear-gradient(135deg, var(--marinho-esc) 0%, var(--marinho) 60%, var(--marinho-cl) 100%);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: 0 8px 36px rgba(30,35,88,.28);
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
/* Decoração geométrica fundo */
.numero-magico::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,26,60,.25), transparent 70%);
  pointer-events: none;
}
.numero-magico::after {
  content: '';
  position: absolute; bottom: -60px; left: 20%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.nm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.nm-title  { font-size: 14px; font-weight: 800; color: var(--d-txt-ffffff); letter-spacing: .01em; }
.nm-period-select {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: var(--d-txt-ffffff); border-radius: 7px; padding: 5px 12px; font-size: 11px;
  font-family: 'Outfit'; cursor: pointer; font-weight: 600;
}
.nm-period-select option { color: var(--text); background: var(--d-bgc-ffffff); }
.nm-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; position: relative; z-index: 1; }
.nm-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px; padding: 14px 12px;
  text-align: center; position: relative;
  transition: background var(--transition), transform var(--transition);
  backdrop-filter: blur(4px);
}
.nm-card:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.nm-card.nm-achieved {
  background: rgba(217,26,60,.3);
  border-color: rgba(217,26,60,.6);
  box-shadow: 0 0 20px rgba(217,26,60,.2);
}
.nm-stage { font-size: 9.5px; color: rgba(255,255,255,.65); margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nm-meta  { font-size: 24px; font-weight: 900; color: var(--d-txt-ffffff); font-family: 'JetBrains Mono'; line-height: 1; }
.nm-real  { font-size: 11px; margin-top: 5px; color: rgba(255,255,255,.75); font-weight: 500; }
.nm-conv  { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.95); letter-spacing: .02em; }
.nm-progress { margin-top: 8px; height: 4px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }

/* ── FUNIL PREVIEW ── */
.funil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.funil-lbl { width: 90px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.funil-track { flex: 1; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.funil-fill  { height: 100%; border-radius: 99px; transition: width .4s ease; }
.funil-val   { width: 20px; font-size: 13px; font-weight: 800; text-align: right; }
.funil-pct   { width: 38px; font-size: 11px; color: var(--text-muted); }

/* Relatórios funil */
.rel-funil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rel-funil-lbl { width: 110px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.rel-funil-track { flex: 1; height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.rel-funil-fill { height: 100%; border-radius: 99px; }
.rel-funil-n   { width: 24px; font-size: 13px; font-weight: 800; text-align: right; }
.rel-funil-pct { width: 40px; font-size: 11px; color: var(--text-muted); }

/* ── ATIVIDADES ── */
.ativ-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bg);
}
.ativ-item:last-child { border-bottom: none; }
.ativ-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.ativ-nome { font-size: 13px; font-weight: 700; }
.ativ-desc { font-size: 11px; color: var(--text-muted); }
.ativ-hora { font-size: 11px; color: var(--text-light); white-space: nowrap; font-family: 'JetBrains Mono'; margin-left: auto; }

/* ── AGENDA GRID ── */
.agenda-grid { display: grid; grid-template-columns: 50px repeat(7,1fr); min-width: 600px; }
.ag-header-cell {
  padding: 7px 4px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.ag-header-cell.ag-today { color: var(--vermelho); background: var(--vermelho-s); border-radius: 7px 7px 0 0; }
.ag-time { font-size: 10px; color: var(--text-light); font-family: 'JetBrains Mono'; padding: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.ag-cell { border-bottom: 1px solid var(--bg); border-left: 1px solid var(--bg); padding: 3px 4px; min-height: 28px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ag-cell.ag-today-col { background: rgba(217,26,60,.03); }
.ag-slot {
  background: var(--marinho); color: var(--d-txt-ffffff);
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; cursor: pointer;
  transition: background var(--transition);
}
.ag-slot:hover { background: var(--vermelho); }

/* ── KANBAN ── */
.kanban-wrap { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.k-col {
  min-width: 232px; width: 232px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.k-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; color: var(--d-txt-ffffff);
  font-size: 13px; font-weight: 700;
}
.k-col-icon { font-size: 15px; }
.k-col-label { flex: 1; }
.k-col-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.k-empty { text-align: center; font-size: 11px; color: var(--text-light); padding: 24px 0; }
.k-add-btn {
  margin: 8px 10px; padding: 8px;
  border-radius: 8px; border: 1.5px dashed;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); background: transparent;
  font-family: 'Outfit';
}
.k-add-btn:hover { filter: brightness(.95); }

/* Kanban card */
.k-card {
  background: var(--d-bgc-ffffff); border-radius: 9px; padding: 12px;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 5px rgba(30,35,88,.07);
  cursor: pointer; transition: all var(--transition);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.k-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.k-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.k-card-id   { font-size: 10px; color: var(--text-light); font-family: 'JetBrains Mono'; }
.k-card-nome { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.k-card-tel  { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.k-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.k-card-foot { display: flex; justify-content: space-between; align-items: center; }
.k-fonte     { font-size: 10px; color: var(--text-light); }
.k-captador  { font-size: 10px; color: var(--text-light); }

/* Tentativas badge */
.tent-badge {
  background: var(--azul); color: var(--d-txt-ffffff);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}
.tent-badge.tent-warn { background: var(--vermelho); }

/* Tags */
.amp-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.tag-quente  { background: var(--d-bgc-fef3c7); color: var(--d-txt-d97706); }
.tag-atencao { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }
.tag-novo    { background: var(--marinho-s); color: var(--marinho); }
.tag-delay   { background: var(--roxo-s); color: var(--roxo); }
.tag-vip     { background: var(--d-bgc-fef3c7); color: var(--d-txt-d97706); }
.tag-ativo   { background: var(--verde-s); color: var(--verde); }

/* ── HISTÓRICO ── */
.hist-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bg);
}
.hist-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.hist-nome { font-size: 13px; }
.hist-det  { font-size: 11px; }

/* ── TABELA ── */
.table-wrap { background: var(--d-bgc-ffffff); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.amp-table { width: 100%; border-collapse: collapse; }
.amp-table thead th {
  background: var(--marinho);
  padding: 11px 16px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.amp-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--bg); font-size: 13px; }
.amp-table tbody tr:last-child td { border-bottom: none; }
.amp-table tbody tr:hover td { background: var(--vermelho-s); }
.hora-badge { background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; font-family: 'JetBrains Mono'; }

/* ── RELATÓRIOS GRID ── */
.rel-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.rel-card { background: var(--d-bgc-ffffff); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.rel-card-header {
  padding: 14px 18px; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--marinho-s), var(--d-bgc-ffffff));
  color: var(--marinho);
}
.rel-card-body { padding: 16px 18px; }

/* ── CURRÍCULOS GRID ── */
.curriculo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.curriculo-card {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px;
  border-top: 3px solid; border: 1px solid var(--border);
  border-top-width: 3px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.curriculo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── CONFIG SECTION ── */
.config-section {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px;
  margin-bottom: 16px; border: 1px solid var(--border);
}
.config-section-title {
  font-size: 14px; font-weight: 800; margin-bottom: 16px;
  color: var(--marinho);
}

/* ── FILTROS ── */
.filtros {
  display: flex; align-items: center; gap: 3px;
  background: var(--d-bgc-ffffff); border-radius: 9px; padding: 4px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.filtro-btn {
  padding: 5px 13px; border-radius: 7px;
  border: none; cursor: pointer; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-muted);
  transition: all var(--transition);
  font-family: 'Outfit';
}
.filtro-btn:hover { background: var(--vermelho-s); color: var(--vermelho); }
.filtro-btn.active { background: var(--vermelho); color: var(--d-txt-ffffff); }

/* ── AVATAR ── */
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--marinho-s); color: var(--marinho);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.aniv-item { border-radius: 8px; transition: background var(--transition); }
.aniv-item:hover { background: var(--vermelho-s); }

/* ── MODAIS ── */
.amp-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: none; align-items: center; justify-content: center;
  background: rgba(14,16,35,.6);
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.amp-modal.show { display: flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.amp-modal-content {
  background: var(--d-bgc-ffffff); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(14,16,35,.3);
  width: 100%; max-width: 580px;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideUp .25s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid var(--border);
  overflow: hidden;
}
.amp-modal-content.modal-lg { max-width: 800px; }
/* Onda 5 (#20) — modal-xl para telas com muitos campos e abas
   (modal-lead, modal-usuario). Antes o modal-lg (800px) apertava
   o rodapé fazendo botões quebrarem linha. */
.amp-modal-content.modal-xl { max-width: 1080px; }
.amp-modal-content.modal-sm { max-width: 420px; }
@keyframes slideUp { from { transform: translateY(24px) scale(.97); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
.amp-modal-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--marinho-esc), var(--marinho));
}
.amp-modal-title { font-size: 16px; font-weight: 800; color: var(--d-txt-ffffff); }
.amp-modal-subtitle { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }
.modal-close-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: none; background: rgba(255,255,255,.15); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--d-txt-ffffff); transition: all var(--transition);
}
.modal-close-btn:hover { background: var(--vermelho); }
.amp-modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.amp-modal-footer {
  padding: 16px 22px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-shrink: 0; background: var(--bg);
}
.modal-stage-badge {
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: 99px; background: rgba(255,255,255,.2);
  color: var(--d-txt-ffffff); border: 1px solid rgba(255,255,255,.3);
}

/* Lead destaque */
.lead-destaque {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 11px; margin-bottom: 18px;
}
.lead-destaque.verde   { background: var(--verde-s); border: 1px solid var(--d-brd-a7f3c0); }
.lead-destaque.roxo    { background: var(--roxo-s); border: 1px solid var(--d-brd-ddd6fe); }
.lead-destaque.laranja { background: var(--amarelo-s); border: 1px solid var(--d-brd-fde68a); }
.lead-destaque.cinza   { background: var(--bg); border: 1px solid var(--border); }
.ld-nome { font-size: 16px; font-weight: 800; color: var(--text); }
.ld-info { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ld-tel  { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.btn-copy-tel {
  font-size: 10px; padding: 2px 9px; border-radius: 99px;
  background: var(--d-bgc-ffffff); border: 1px solid var(--border); cursor: pointer;
  font-family: 'Outfit'; transition: all var(--transition);
}
.btn-copy-tel:hover { background: var(--vermelho); color: var(--d-txt-ffffff); border-color: var(--vermelho); }
.tent-badge-lg {
  font-size: 12px; font-weight: 700; padding: 4px 12px;
  border-radius: 99px; background: var(--azul); color: var(--d-txt-ffffff);
}
.tent-badge-lg.tent-warn { background: var(--vermelho); }

/* Abas do lead */
.lead-tabs {
  display: flex; border-bottom: 2px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
  background: var(--d-bgc-ffffff);
}
.lead-tab {
  padding: 11px 17px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -2px; color: var(--text-muted); transition: all var(--transition);
  background: none; border: none;
}
.lead-tab:hover:not(.disabled) { color: var(--vermelho); }
.lead-tab.active { color: var(--vermelho); border-bottom: 2px solid var(--vermelho); }
.lead-tab.disabled { color: var(--border-strong) !important; cursor: not-allowed !important; }
.lead-tab-pane { display: none; }
.lead-tab-pane.active { display: block; }

/* Resultado options */
.resultado-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.res-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-light); margin: 8px 0 4px; width: 100%; letter-spacing: .05em; }
.res-opt {
  padding: 7px 15px; border-radius: 9px;
  border: 1.5px solid var(--border);
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  transition: all var(--transition); background: var(--d-bgc-ffffff); color: var(--text);
}
.res-opt:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-s); }
.res-opt.selected { background: var(--vermelho); color: var(--d-txt-ffffff); border-color: var(--vermelho); }
.res-opt.danger  { border-color: var(--d-brd-fecaca); color: var(--d-txt-dc2626); background: var(--d-bgc-fef2f2); }
.res-opt.danger:hover { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); border-color: var(--d-brd-dc2626); }
.res-opt.danger.selected { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); border-color: var(--d-brd-dc2626); }
.res-opt.warning { border-color: var(--d-brd-fde68a); color: var(--d-txt-d97706); background: var(--d-bgc-fffbeb); }
.res-opt.warning.selected { background: var(--d-bgc-d97706); color: var(--d-txt-ffffff); border-color: var(--d-brd-d97706); }
.res-opt.disabled-opt { opacity: .4; cursor: not-allowed !important; }

/* Visita resultado */
.visita-opts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.vres-btn {
  padding: 10px; text-align: center; border-radius: 11px;
  border: 2px solid var(--border); cursor: pointer;
  font-size: 12px; font-weight: 700;
  transition: all var(--transition); background: var(--d-bgc-ffffff);
}
.vres-btn:hover { border-color: var(--marinho); color: var(--marinho); }
.vres-btn.selected { background: var(--marinho); color: var(--d-txt-ffffff); border-color: var(--marinho); }
.vres-btn.vres-delay.selected  { background: var(--d-bgc-d97706); border-color: var(--d-brd-d97706); }
.vres-btn.vres-nao.selected    { background: var(--vermelho); border-color: var(--vermelho); }
.vres-btn.vres-venda.selected  { background: var(--verde); border-color: var(--verde); }
.resultado-detail { display: none; background: var(--bg); border-radius: 11px; padding: 16px; margin-top: 10px; border: 1px solid var(--border); }
.resultado-detail.active { display: block; }

/* Recomendação cards */
.rec-card { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 16px; margin-bottom: 10px; }
.rec-num  { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 9px; background: var(--d-bgc-ffffff);
  border: 1.5px solid var(--border); cursor: pointer;
  font-size: 13px; transition: all var(--transition); user-select: none;
}
.check-item:hover { border-color: var(--vermelho); background: var(--vermelho-s); }
.check-item.done  { background: var(--verde-s); border-color: var(--d-brd-6ee7b7); color: var(--verde); }
.check-icon { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--verde); flex-shrink: 0; }
.check-item.done .check-icon { border-color: var(--verde); background: var(--verde); color: var(--d-txt-ffffff); }

/* ── FORMULÁRIO ── */
.form-section { margin-bottom: 20px; }
.form-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--marinho); margin-bottom: 14px;
  padding-bottom: 7px; border-bottom: 2px solid var(--vermelho-s);
}
.form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.form-control, .form-select {
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 9px 13px; font-size: 13px; font-family: 'Outfit';
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--d-bgc-ffffff); color: var(--text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(217,26,60,.1);
  outline: none;
}
.form-control.readonly-id { background: var(--bg); color: var(--text-muted); font-family: 'JetBrains Mono'; font-size: 12px; }
textarea.form-control { resize: vertical; min-height: 80px; }
.fonte-desc { font-size: 11px; color: var(--vermelho); margin-top: 4px; display: none; padding: 5px 10px; background: var(--vermelho-s); border-radius: 7px; border-left: 3px solid var(--vermelho); }
.required { color: var(--vermelho); }
.input-group .form-control { border-radius: 9px 0 0 9px; }
.input-group .btn { border-radius: 0 9px 9px 0; border-left: none; }

/* ── BOTÕES ── */
.btn-amparar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; transition: all var(--transition);
  font-family: 'Outfit'; text-decoration: none; letter-spacing: .01em;
}
.btn-primary-amp {
  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl));
  color: var(--d-txt-ffffff);
  box-shadow: 0 3px 12px rgba(217,26,60,.3);
}
.btn-primary-amp:hover {
  background: linear-gradient(135deg, var(--vermelho-esc), var(--vermelho));
  box-shadow: 0 5px 20px rgba(217,26,60,.4);
  transform: translateY(-1px);
}
.btn-secondary-amp {
  background: var(--d-bgc-ffffff); color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-secondary-amp:hover { background: var(--bg); border-color: var(--border-strong); }
.btn-danger-amp { background: var(--d-bgc-fee2e2); color: var(--d-txt-dc2626); }
.btn-danger-amp:hover { background: var(--d-bgc-dc2626); color: var(--d-txt-ffffff); }
.btn-sm-amp { padding: 5px 13px; font-size: 12px; }
.btn-verde-outline { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.btn-verde-outline:hover { background: var(--verde); color: var(--d-txt-ffffff); }

/* ── CONFIRM DIALOG ── */
#modal-confirm .amp-modal-content { max-width: 360px; }
.cd-icon  { font-size: 42px; text-align: center; margin-bottom: 12px; }
.cd-title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--marinho); }
.cd-msg   { font-size: 13px; color: var(--text-muted); text-align: center; white-space: pre-line; }
.cd-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ── TOAST ── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.amp-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--d-bgc-ffffff); border-radius: 11px; padding: 13px 18px;
  box-shadow: 0 8px 28px rgba(14,16,35,.18);
  font-size: 13px; font-weight: 600;
  min-width: 230px; max-width: 340px;
  transform: translateX(30px); opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  border-left: 3px solid var(--border);
  border: 1px solid var(--border);
  border-left-width: 3px;
}
.amp-toast.show { transform: translateX(0); opacity: 1; }
.amp-toast.toast-success { border-left-color: var(--verde); }
.amp-toast.toast-warning { border-left-color: var(--amarelo); }
.amp-toast.toast-info    { border-left-color: var(--azul); }
.amp-toast.toast-danger  { border-left-color: var(--vermelho); }
.toast-icon { font-size: 16px; }

/* ── PERFIL BADGES ── */
.badge-especialista { background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 700; }
.badge-supervisor   { background: var(--amarelo-s); color: var(--d-txt-d97706); font-size: 11px; font-weight: 700; }
.badge-gerente      { background: var(--vermelho-s); color: var(--vermelho); font-size: 11px; font-weight: 700; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty-icon  { font-size: 42px; margin-bottom: 12px; opacity: .5; }
.empty-msg   { text-align: center; color: var(--text-light); font-size: 13px; padding: 20px; }

/* ── REMARKETING WARNING ── */
#remarketing-warn { background: var(--amarelo-s); border: 1px solid var(--d-brd-fde68a); border-radius: 9px; padding: 9px 14px; font-size: 12px; color: var(--d-txt-d97706); margin-top: 8px; }

/* ── CONCLUIR LIGAÇÃO MODAL ── */
.mcl-btn { width: 100%; padding: 13px; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all var(--transition); font-family: 'Outfit'; border: 2px solid transparent; }
.mcl-btn-primary   { background: linear-gradient(135deg, var(--vermelho), var(--vermelho-cl)); color: var(--d-txt-ffffff); }
.mcl-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.mcl-btn-secondary { background: var(--d-bgc-ffffff); color: var(--text); border-color: var(--border); }
.mcl-btn-secondary:hover { background: var(--bg); }

/* ── RESPONSIVO ── */
@media (max-width: 1200px) {
  .nm-grid { grid-template-columns: repeat(3,1fr); }
  .curriculo-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .rel-grid { grid-template-columns: 1fr; }
  .curriculo-grid { grid-template-columns: 1fr; }
  .visita-opts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .sidebar { position: fixed; top: var(--header-h); left: -100%; height: calc(100vh - var(--header-h)); z-index: 300; transition: left var(--transition); box-shadow: var(--shadow-lg); }
  .sidebar.sidebar-mobile-open { left: 0; }
  .app-main { padding: 16px; }
  .header-search { display: none; }
  .nm-grid { grid-template-columns: repeat(2,1fr); }
  .top-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .amp-modal { padding: 0; align-items: flex-end; }
  .amp-modal-content { border-radius: 16px 16px 0 0; max-height: 95vh; max-width: 100%; }
  .logo-divider, .logo-crm { display: none; }
}
@media (max-width: 480px) {
  .nm-grid { grid-template-columns: repeat(2,1fr); }
  .k-col { min-width: 200px; }
  .visita-opts { grid-template-columns: repeat(2,1fr); }
}

/* ================================================================
   AGENDA — ESTILO GOOGLE CALENDAR
   ================================================================ */

/* Ocultar top-bar padrão na página agenda */
#page-agenda > .top-bar { display: none; }

/* ---------- BARRA SUPERIOR ---------- */
.gcal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 10px 8px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.gcal-topbar-left  { display: flex; align-items: center; gap: 10px; }
.gcal-topbar-right { display: flex; align-items: center; gap: 10px; }

.gcal-btn-hoje {
  font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 14px; cursor: pointer;
  transition: background .15s;
}
.gcal-btn-hoje:hover { background: var(--bg); }

.gcal-nav-arrows { display: flex; }
.gcal-arrow {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 16px; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; transition: background .15s;
}
.gcal-arrow:hover { background: var(--bg); color: var(--text); }

.gcal-periodo {
  font-size: 20px; font-weight: 400; color: var(--text);
  font-family: 'Google Sans', 'Inter', sans-serif; letter-spacing: -.3px;
}

.gcal-view-switch {
  display: flex; background: var(--bg); border-radius: 4px;
  border: 1px solid var(--border); overflow: hidden;
}
.gcal-view-btn {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: none; border: none; padding: 5px 14px; cursor: pointer;
  transition: background .15s, color .15s;
}
.gcal-view-btn.active {
  background: var(--bg-card); color: var(--marinho);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.gcal-view-btn:hover:not(.active) { background: var(--border); }

/* ---------- WRAPPER + CONTAINER ---------- */
.gcal-wrapper {
  overflow: auto;
  height: calc(100vh - 130px);
  position: relative;
}
.gcal-container {
  display: grid;
  min-width: 700px;
  position: relative;
}

/* ---------- CABEÇALHO DOS DIAS ---------- */
.gcal-header-row {
  display: grid;
  position: sticky; top: 0; z-index: 30;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.gcal-header-gutter {
  width: 52px; min-width: 52px;
  border-right: 1px solid var(--border);
}
.gcal-header-day {
  text-align: center; padding: 8px 4px 6px;
  border-right: 1px solid var(--border);
}
.gcal-day-name {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; display: block;
}
.gcal-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; font-weight: 400; color: var(--text);
  margin-top: 2px; cursor: default;
  font-family: 'Google Sans', 'Inter', sans-serif;
}
.gcal-header-day.is-today .gcal-day-name { color: var(--vermelho); }
.gcal-header-day.is-today .gcal-day-num  {
  background: var(--vermelho); color: var(--d-txt-ffffff); font-weight: 600;
}

/* ---------- CORPO DA GRADE ---------- */
.gcal-body {
  display: grid;
  position: relative;
}
.gcal-time-col {
  width: 52px; min-width: 52px;
}
.gcal-time-label {
  height: 48px; display: flex; align-items: flex-start; justify-content: flex-end;
  padding-right: 8px; padding-top: 2px;
  font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono';
  border-right: 1px solid var(--border);
}
.gcal-day-col {
  position: relative; border-right: 1px solid var(--border);
  min-width: 0;
}
.gcal-day-col.is-today { background: rgba(217,26,60,.025); }
.gcal-hour-line {
  height: 48px; border-bottom: 1px solid var(--border);
  position: relative;
}
.gcal-half-line {
  position: absolute; top: 50%; left: 0; right: 0;
  border-bottom: 1px dashed var(--border); opacity: .6;
}

/* ---------- LINHA DO "AGORA" ---------- */
.gcal-now-line {
  position: absolute; left: 0; right: 0; z-index: 10; pointer-events: none;
}
.gcal-now-dot {
  position: absolute; left: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho);
}
.gcal-now-bar {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--vermelho);
}

/* ---------- EVENTOS ---------- */
.gcal-event {
  position: absolute; left: 2px; right: 2px;
  border-radius: 4px; padding: 2px 6px;
  font-size: 11px; font-weight: 500; line-height: 1.3;
  cursor: pointer; overflow: hidden; z-index: 5;
  transition: filter .15s, transform .1s;
  border-left: 3px solid rgba(0,0,0,.25);
}
.gcal-event:hover { filter: brightness(.93); transform: scale(1.01); }
.gcal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcal-event-time  { font-size: 10px; opacity: .85; }

/* Cores por especialista */
.gcal-ev-0 { background: var(--d-bgc-1b6b3a)22; color: var(--d-txt-1b6b3a); border-left-color: var(--d-brd-1b6b3a); }
.gcal-ev-1 { background: var(--d-bgc-2563eb)22; color: var(--d-txt-1d4ed8); border-left-color: var(--d-brd-2563eb); }
.gcal-ev-2 { background: var(--d-bgc-8b5cf6)22; color: var(--d-txt-7c3aed); border-left-color: var(--d-brd-8b5cf6); }
.gcal-ev-3 { background: var(--d-bgc-d97706)AA; color: var(--d-txt-ffffff);    border-left-color: var(--d-brd-d97706); background: var(--d-bgc-d97706)22; color: var(--d-txt-92400e); }
.gcal-ev-4 { background: var(--d-bgc-d91a3c)22; color: var(--d-txt-a80f2a); border-left-color: var(--d-brd-d91a3c); }
.gcal-ev-store { background: var(--d-bgc-1b6b3a)18; color: var(--d-txt-1b6b3a); border-left-color: var(--d-brd-1b6b3a); }

/* ---------- POPOVER ---------- */
.gcal-popover {
  position: fixed; z-index: 9999;
  background: var(--bg-card); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  min-width: 280px; max-width: 320px;
  border: 1px solid var(--border);
  animation: popoverIn .12s ease;
}
@keyframes popoverIn {
  from { opacity:0; transform: scale(.95) translateY(-4px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.gcal-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
}
.gcal-popover-titulo { font-size: 14px; font-weight: 600; color: var(--text); }
.gcal-popover-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 13px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gcal-popover-close:hover { background: var(--bg); }
.gcal-popover-body { padding: 10px 14px 14px; }
.gcal-pop-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text); margin-bottom: 7px;
}
.gcal-pop-row i { color: var(--text-muted); font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ---------- MINI AGENDA DASHBOARD — mesmo visual do gcal, altura reduzida ---------- */
.ag-slot { cursor: pointer; }

.gcal-dash-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
/* Contêiner gcal dentro do dashboard (herda os estilos gcal-container) */
.gcal-container.gcal-dash {
  min-width: 600px;
}
/* Limita a altura dos eventos no dash para não ocupar muito espaço */
.gcal-container.gcal-dash .gcal-hour-line {
  height: 32px; /* menor que os 48px da agenda completa */
}
.gcal-container.gcal-dash .gcal-time-label {
  height: 32px;
}
.gcal-container.gcal-dash .gcal-now-line {
  /* ajuste proporcional: 32/48 = 0.667 do offset */
}
/* Remove o sticky do header dentro do dash (já está dentro de um card) */
.gcal-container.gcal-dash .gcal-header-row {
  position: relative;
  top: auto;
}
/* Limita visualmente a ~8h de slots visíveis com scroll se necessário */
.gcal-dash-wrapper {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ================================================================
   CARDS DE EXPORTAÇÃO EXCEL
   ================================================================ */
.rel-export-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .18s, transform .15s, border-color .18s;
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
}
.rel-export-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.rel-export-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 2px;
}
.rel-export-label {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.rel-export-sub {
  font-size: 11px; color: var(--text-muted); line-height: 1.4; flex-grow: 1;
}
.rel-export-btn {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  background: var(--verde-s); color: var(--verde);
  border-radius: 6px; padding: 5px 10px; text-align: center;
  transition: background .15s;
}
.rel-export-card:hover .rel-export-btn {
  background: var(--verde); color: var(--d-txt-ffffff);
}

/* ================================================================
   RELATÓRIO DASHBOARD — PAINEL COMPLETO
   ================================================================ */
.rdash-section        { margin-bottom: 28px; }
.rdash-section-title  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rdash-section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* KPI hero row */
.rdash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rdash-kpi {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .15s;
}
.rdash-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rdash-kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
.rdash-kpi-icon  { font-size: 22px; margin-bottom: 8px; }
.rdash-kpi-val   { font-size: 28px; font-weight: 800; font-family: 'JetBrains Mono'; line-height: 1; }
.rdash-kpi-lbl   { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.rdash-kpi-delta { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; }
.rdash-kpi-delta.up   { background: var(--verde-s);   color: var(--verde); }
.rdash-kpi-delta.down { background: var(--d-bgc-fee2e2);           color: var(--d-txt-dc2626); }
.rdash-kpi-delta.neu  { background: var(--bg);         color: var(--text-muted); }

/* 2-col e 3-col layouts */
.rdash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rdash-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rdash-2col, .rdash-3col { grid-template-columns: 1fr; } }

/* Card genérico */
.rdash-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.rdash-card-hd {
  padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.rdash-card-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.rdash-card-title i { color: var(--vermelho); }
.rdash-card-body  { padding: 14px 18px; }

/* Funil visual */
.rfunil-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rfunil-icon { font-size: 16px; width: 26px; text-align: center; }
.rfunil-lbl  { width: 110px; font-size: 12px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.rfunil-track { flex: 1; background: var(--bg); border-radius: 99px; height: 10px; overflow: hidden; }
.rfunil-fill  { height: 100%; border-radius: 99px; transition: width .6s ease; }
.rfunil-n    { width: 28px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono'; }
.rfunil-pct  { width: 42px; text-align: right; font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono'; }
.rfunil-conv { font-size: 10px; color: var(--text-light); width: 38px; text-align: right; }

/* Barra de progresso de meta */
.rmeta-row    { margin-bottom: 14px; }
.rmeta-head   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rmeta-nome   { font-size: 12px; font-weight: 600; color: var(--text); }
.rmeta-vals   { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono'; }
.rmeta-track  { background: var(--bg); border-radius: 99px; height: 8px; overflow: hidden; }
.rmeta-fill   { height: 100%; border-radius: 99px; transition: width .6s; }
.rmeta-badge  { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-top: 4px; }

/* Ranking especialistas */
.resp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.resp-row:last-child { border-bottom: none; }
.resp-rank  { font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono'; color: var(--text-light); width: 18px; text-align: center; }
.resp-rank.gold   { color: var(--d-txt-d97706); }
.resp-rank.silver { color: var(--d-txt-6b7280); }
.resp-rank.bronze { color: var(--d-txt-92400e); }
.resp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marinho-s); color: var(--marinho); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resp-info   { flex: 1; }
.resp-nome   { font-size: 12px; font-weight: 700; color: var(--text); }
.resp-detalhe { font-size: 11px; color: var(--text-muted); }
.resp-stats  { display: flex; gap: 12px; }
.resp-stat   { text-align: center; }
.resp-stat-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono'; color: var(--text); }
.resp-stat-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* Tabela de leads quentes */
.rleads-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.rleads-row:last-child { border-bottom: none; }
.rleads-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rleads-nome { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); }
.rleads-etapa{ font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.rleads-tent { font-size: 11px; font-family: 'JetBrains Mono'; color: var(--text-muted); width: 24px; text-align: right; }

/* Gráfico de barras SVG canvas */
.rchart-wrap  { width: 100%; overflow: hidden; }
.rchart-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rchart-bar-lbl { font-size: 10px; color: var(--text-muted); width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rchart-bar-track { flex: 1; background: var(--bg); border-radius: 99px; height: 14px; overflow: hidden; position: relative; }
.rchart-bar-fill  { height: 100%; border-radius: 99px; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 700; color: var(--d-txt-ffffff); transition: width .7s ease; white-space: nowrap; }

/* Mini sparkline (barras inline) */
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.spark-bar { width: 6px; border-radius: 2px 2px 0 0; transition: height .4s; }

/* Score de saúde do funil */
.rhealthscore {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 16px;
}
.rhs-circle {
  width: 96px; height: 96px; border-radius: 50%;
  border: 6px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 10px;
}
.rhs-val { font-size: 28px; font-weight: 900; font-family: 'JetBrains Mono'; }
.rhs-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: center; }
.rhs-status { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; margin-top: 6px; }

/* Ticker de alertas */
.ralerta {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; border-radius: 8px; margin-bottom: 8px;
  font-size: 12px;
}
.ralerta:last-child { margin-bottom: 0; }
.ralerta-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ralerta-txt  { flex: 1; color: var(--text); line-height: 1.4; }
.ralerta-txt strong { font-weight: 700; }
.ralerta.danger  { background: var(--d-bgc-fee2e2); border-left: 3px solid var(--d-brd-dc2626); }
.ralerta.warning { background: var(--amarelo-s); border-left: 3px solid var(--amarelo); }
.ralerta.success { background: var(--verde-s); border-left: 3px solid var(--verde); }
.ralerta.info    { background: var(--marinho-s); border-left: 3px solid var(--marinho); }

/* Aniversariantes */
.raniv-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.raniv-row:last-child { border-bottom: none; }
.raniv-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vermelho-s), var(--marinho-s)); color: var(--marinho); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.raniv-info { flex: 1; }
.raniv-nome { font-size: 12px; font-weight: 700; }
.raniv-data { font-size: 11px; color: var(--text-muted); }
.raniv-dias { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }

/* ============================================================
   AMPARAR CRM — Estilos: Visibilidade, Transferência, Inativação
   COLAR no final do styles_amparar.css
   ============================================================ */

/* Alertas (se ainda não existirem com esses nomes) */
.alert-info-amp {
  background: var(--d-bgc-dbeafe); color: var(--d-txt-1e40af); border: 1px solid var(--d-brd-bfdbfe);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}
.alert-warning-amp {
  background: var(--d-bgc-fef3c7); color: var(--d-txt-92400e); border: 1px solid var(--d-brd-fde68a);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}
.alert-success-amp {
  background: var(--d-bgc-d1fae5); color: var(--d-txt-065f46); border: 1px solid var(--d-brd-a7f3c0);
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
}

/* Lista de supervisores no modal-visibilidade */
.vis-lista {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px;
}
.vis-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background var(--transition);
}
.vis-item:hover { background: var(--bg); }
.vis-item input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; margin: 0;
}
.vis-info { flex: 1; }
.vis-nome { font-size: 13px; font-weight: 700; color: var(--text); }
.vis-sigla { font-weight: 500; color: var(--text-muted); font-size: 11px; }
.vis-filial { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Tabs do modal-inativacao */
.inativ-modo-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.inativ-modo-tabs .btn-amparar.active {
  background: var(--marinho); color: var(--d-txt-ffffff); border-color: var(--marinho);
}

/* Código mono (codigo do lead na tabela) */
.cod-mono {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--bg); padding: 2px 6px; border-radius: 4px;
}

/* ============================================================
   AMPARAR CRM — PATCH UX-1   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Loading overlay global (.amp-loading)
   - Campos inválidos (.is-invalid)
   - Melhoria de contraste do .btn-secondary-amp (ponto 2.b)
   ============================================================ */

/* ── Loading overlay ─────────────────────────────────────────────── */
/* ── Loading overlay global (.amp-loading) — v2 Onda 5 (#12) ────
   Antes: card branco pequeno. Agora: overlay escuro com blur mais
   forte, spinner grande centralizado, mensagem branca. */
.amp-loading {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: amp-loading-fade-in 200ms ease-out;
}
.amp-loading.show { display: flex; }

.amp-loading-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

.amp-spinner-lg {
  width: 64px; height: 64px;
  border: 5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--d-brd-fbbf24);
  border-right-color: var(--d-brd-fbbf24);
  border-radius: 50%;
  animation: amp-spin 0.85s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}

/* Compat — mantém .amp-spinner antigo por segurança */
.amp-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--d-brd-e2e8f0);
  border-top-color: var(--vermelho);
  border-radius: 50%;
  animation: amp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.amp-loading-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-ffffff);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 400px;
  line-height: 1.4;
}

/* Legado — se algum código ainda renderizar .amp-loading-card */
.amp-loading-card {
  background: rgba(255,255,255,0.06);
  padding: 20px 28px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 18px;
  color: var(--d-txt-ffffff);
}

@keyframes amp-spin { to { transform: rotate(360deg); } }
@keyframes amp-loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Campos inválidos (ponto 1.d) ────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--vermelho) !important;
  background-color: var(--d-bgc-fef2f2) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  animation: amp-shake 320ms ease-in-out;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

@keyframes amp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}


/* ── Melhoria de contraste dos botões secundários (ponto 2.b) ────── */
/* Override do .btn-secondary-amp original para deixar mais
   visualmente "clicável". A cor do texto era var(--text-muted)
   que dava sensação de botão desabilitado. */
.btn-secondary-amp {
  background: var(--d-bgc-ffffff);
  color: var(--text);                    /* era --text-muted */
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}

.btn-secondary-amp:hover {
  background: var(--bg);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.btn-secondary-amp:active {
  transform: translateY(1px);
}

/* ── Neutralizar o botão "Excluir Lead" (decisão do Devinhos) ────
   Regra: SÓ ficam em destaque os botões de ação principal do fluxo
   (Avançar Etapa, Registrar Resultado, Cadastrar Lead, Confirmar).
   "Excluir Lead" deve ser neutro como Fechar/Compartilhar/Transferir.

   O HTML tem inline style com !important implícito de cor vermelha;
   sobrescrevemos com !important via ID específico — sem precisar
   editar o HTML. */
#mld-btn-excluir {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
#mld-btn-excluir:hover {
  background: var(--bg) !important;
  color: var(--vermelho) !important;
  border-color: var(--vermelho) !important;
}
/* Hover ainda mostra o ícone vermelho pra dar pista de "ação destrutiva".
   No estado normal o botão fica neutro. */

/* ============================================================
   AMPARAR CRM — PATCH UX-1   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Loading overlay global (.amp-loading)
   - Campos inválidos (.is-invalid)
   - Melhoria de contraste do .btn-secondary-amp (ponto 2.b)
   ============================================================ */

/* ── Loading overlay ─────────────────────────────────────────────── */
/* ── Loading overlay global (.amp-loading) — v2 Onda 5 (#12) ────
   Antes: card branco pequeno. Agora: overlay escuro com blur mais
   forte, spinner grande centralizado, mensagem branca. */
.amp-loading {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: amp-loading-fade-in 200ms ease-out;
}
.amp-loading.show { display: flex; }

.amp-loading-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}

.amp-spinner-lg {
  width: 64px; height: 64px;
  border: 5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--d-brd-fbbf24);
  border-right-color: var(--d-brd-fbbf24);
  border-radius: 50%;
  animation: amp-spin 0.85s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}

/* Compat — mantém .amp-spinner antigo por segurança */
.amp-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--d-brd-e2e8f0);
  border-top-color: var(--vermelho);
  border-radius: 50%;
  animation: amp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.amp-loading-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-ffffff);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 400px;
  line-height: 1.4;
}

/* Legado — se algum código ainda renderizar .amp-loading-card */
.amp-loading-card {
  background: rgba(255,255,255,0.06);
  padding: 20px 28px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 18px;
  color: var(--d-txt-ffffff);
}

@keyframes amp-spin { to { transform: rotate(360deg); } }
@keyframes amp-loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Campos inválidos (ponto 1.d) ────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--vermelho) !important;
  background-color: var(--d-bgc-fef2f2) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  animation: amp-shake 320ms ease-in-out;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

@keyframes amp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}


/* ── Melhoria de contraste dos botões secundários (ponto 2.b) ────── */
/* Override do .btn-secondary-amp original para deixar mais
   visualmente "clicável". A cor do texto era var(--text-muted)
   que dava sensação de botão desabilitado. */
.btn-secondary-amp {
  background: var(--d-bgc-ffffff);
  color: var(--text);                    /* era --text-muted */
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}

.btn-secondary-amp:hover {
  background: var(--bg);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

.btn-secondary-amp:active {
  transform: translateY(1px);
}

/* ── Neutralizar o botão "Excluir Lead" (decisão do Devinhos) ────
   Regra: SÓ ficam em destaque os botões de ação principal do fluxo
   (Avançar Etapa, Registrar Resultado, Cadastrar Lead, Confirmar).
   "Excluir Lead" deve ser neutro como Fechar/Compartilhar/Transferir.

   O HTML tem inline style com !important implícito de cor vermelha;
   sobrescrevemos com !important via ID específico — sem precisar
   editar o HTML. */
#mld-btn-excluir {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
#mld-btn-excluir:hover {
  background: var(--bg) !important;
  color: var(--vermelho) !important;
  border-color: var(--vermelho) !important;
}
/* Hover ainda mostra o ícone vermelho pra dar pista de "ação destrutiva".
   No estado normal o botão fica neutro. */
/* ============================================================
   AMPARAR CRM — PATCH PERS-3 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Modo read-only da aba Visita (lead em Venda/Carteira)
   - Estilo da lista de histórico de visitas
   ============================================================ */

/* ── Modo read-only da aba Visita ────────────────────────────────── */
/* Quando o lead já está em Venda ou Carteira, os forms de edição
   ficam ocultos e os botões viram filtros do histórico. */
#tab-visita.modo-readonly .resultado-detail {
  display: none !important;
}

#tab-visita.modo-readonly .vres-btn {
  /* Indicação visual de que o botão agora é um filtro, não ação */
  cursor: pointer;
}

#tab-visita.modo-readonly .vres-btn.selected {
  /* Mantém o destaque da seleção, mas adiciona indicação de "filtro ativo" */
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Esconde o textarea de observações em modo read-only — observações
   ficam visíveis dentro de cada item do histórico */
#tab-visita.modo-readonly #mld-vis-obs {
  display: none;
}
#tab-visita.modo-readonly #mld-vis-obs + .form-section,
#tab-visita.modo-readonly textarea#mld-vis-obs {
  display: none;
}
/* Esconde também o título "Observações" do form-section que envolve o textarea */
#tab-visita.modo-readonly .form-section:has(#mld-vis-obs) {
  display: none;
}


/* ── Container do histórico ─────────────────────────────────────── */
.vis-historico {
  margin-top: 16px;
  padding: 16px;
  background: var(--d-bgc-f8fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.vis-hist-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 16px;
  font-size: 14px;
  font-style: italic;
}

.vis-hist-header {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.vis-hist-count {
  display: inline-block;
  background: var(--vermelho);
  color: var(--d-txt-ffffff);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
}

.vis-hist-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ── Cada item do histórico ─────────────────────────────────────── */
.vis-hist-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--border);
  border-radius: 9px;
  border-left: 4px solid var(--border-strong);
  transition: border-color 150ms ease;
}

.vis-hist-item:hover {
  border-left-color: var(--vermelho);
}

/* Cor da barra lateral por tipo */
.vis-hist-item.hist-delay { border-left-color: var(--d-brd-f59e0b); }
.vis-hist-item.hist-c2    { border-left-color: var(--d-brd-7c3aed); }
.vis-hist-item.hist-nao   { border-left-color: var(--d-brd-dc2626); }


.vis-hist-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 38px;
  text-align: center;
  align-self: flex-start;
}

.vis-hist-body {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.vis-hist-data {
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
  margin-bottom: 3px;
}

.vis-hist-resultado {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 3px;
}

.vis-hist-resultado::before {
  content: '→ ';
  color: var(--border-strong);
}

.vis-hist-local {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 3px;
}

.vis-hist-obs {
  margin-top: 6px;
  padding: 7px 9px;
  background: var(--bg);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-style: italic;
}
.vis-hist-obs::before {
  content: '💬 ';
  font-style: normal;
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH FLOW-1 (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Conteúdo:
   - Estado disabled dos botões .btn-amparar
   - Animação visual sutil para indicar "tooltip explicativo no hover"
   ============================================================ */

/* ── Estado disabled dos botões ─────────────────────────────────── */
.btn-amparar:disabled,
.btn-amparar[disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto !important;       /* mantém pointer-events pra mostrar tooltip */
  filter: grayscale(35%);
  transform: none !important;            /* anula o transform de :active */
}

.btn-amparar:disabled:hover,
.btn-amparar[disabled]:hover {
  /* Anula efeitos de hover quando disabled — sem mudar cor/borda */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* O botão primário (.btn-primary-amp) quando disabled fica com tom
   esmaecido — não pisca quando o usuário tenta clicar */
.btn-primary-amp:disabled,
.btn-primary-amp[disabled] {
  background: var(--d-bgc-fca5a5);                    /* vermelho pastel */
  border-color: var(--d-brd-fca5a5);
  color: var(--d-txt-ffffff);
}

/* ============================================================
   AMPARAR CRM — PATCH UI-2 KANBAN SCROLL
   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026

   Resolve: colunas do Kanban com muitos cards quebravam a UI
   ao crescer indefinidamente. Agora cada coluna tem altura
   máxima e o corpo (área de cards) tem scroll vertical interno.

   Como funciona:
   - .k-col ganha max-height baseado na viewport
   - .k-col-body recebe overflow-y: auto
   - Header colorido permanece sticky no topo da coluna (fixo)
   - Botão "+ Adicionar lead" permanece sticky no rodapé
   - Scrollbar custom discreto (pequeno e cinza)

   Tem fallback responsivo via media query para telas pequenas.
   ============================================================ */

/* ── Altura máxima da coluna ─────────────────────────────────────── */
/* O cálculo desconta:
   - Header do app (~64px)
   - Padding/título da página de Processo de Vendas (~140px)
   - Breathing room inferior (~36px)
   Total: 240px. Coluna nunca ocupa altura inteira do viewport,
   garantindo respiro visual. */
.k-col {
  max-height: calc(100vh - 240px);
}

/* Em telas menores, reduz o desconto pra dar mais espaço */
@media (max-height: 700px) {
  .k-col {
    max-height: calc(100vh - 180px);
  }
}


/* ── Scroll vertical no corpo da coluna ─────────────────────────── */
.k-col-body {
  overflow-y: auto;
  overflow-x: hidden;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}


/* ── Scrollbar custom (WebKit: Chrome, Safari, Edge) ─────────────── */
.k-col-body::-webkit-scrollbar {
  width: 6px;
}

.k-col-body::-webkit-scrollbar-track {
  background: transparent;
}

.k-col-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  transition: background 150ms ease;
}

.k-col-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}


/* ── Indicação visual sutil de "tem mais conteúdo embaixo" ──────── */
/* Sombra interna no rodapé do .k-col-body quando há overflow.
   Implementação simples via background-image gradient. Não é
   100% preciso (aparece mesmo se o scroll chegou no fim), mas
   dá pista visual sem JavaScript. */
.k-col-body {
  /* Mantém o scroll funcional + adiciona sombra muito sutil
     pra indicar continuidade. */
  background:
    linear-gradient(var(--d-bgc-ffffff) 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), var(--d-bgc-ffffff) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.08), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--bg);
  background-size: 100% 14px, 100% 14px, 100% 6px, 100% 6px;
  background-attachment: local, local, scroll, scroll;
}

/* ============================================================
   AMPARAR CRM — PATCH v1.1.0 — Versionamento + Changelog
   (anexar ao final do styles_amparar.css)
   Beyond Bits Tecnologia © 2026
   ============================================================ */

/* ── Badge da versão no rodapé da sidebar ────────────────────────── */
.app-version-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin: 4px 8px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
  font-family: 'Outfit', sans-serif;
}

.app-version-badge:hover {
  background: var(--d-bgc-ffffff);
  border-color: var(--vermelho);
  color: var(--vermelho);
  transform: translateY(-1px);
}

.app-version-badge:active {
  transform: translateY(0);
}

.app-version-icon {
  font-size: 13px;
}

.app-version-label {
  font-weight: 700;
}

.app-version-date {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
}


/* ── Modal de changelog — v2 Onda 5 (#4) —────────────────────────
   Reforço visual. Antes: layout minimalista com pouco contraste.
   Agora: hero com gradiente marinho, cards de versão com relevo,
   destaque forte pra "versão atual". */
.changelog-modal {
  max-width: 720px;
  width: 94%;
  max-height: 92vh;
  border-radius: 20px;
}

.changelog-modal .amp-modal-header {
  padding: 26px 30px 24px;
  background: linear-gradient(135deg, var(--d-bgc-0f172a) 0%, var(--d-bgc-1e2761) 55%, var(--d-bgc-2d3579) 100%);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.changelog-modal .amp-modal-header::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(251,191,36,0.28) 0%, rgba(251,191,36,0) 65%);
  pointer-events: none;
}
.changelog-modal .amp-modal-title {
  font-size: 22px; font-weight: 900; letter-spacing: 0.01em;
  font-family: 'Outfit', sans-serif;
  position: relative;
}
.changelog-modal .amp-modal-sub {
  font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 6px;
  font-weight: 500; position: relative;
}
.changelog-modal .amp-modal-close {
  background: rgba(255,255,255,0.12);
  color: var(--d-txt-ffffff);
  border: none; border-radius: 10px;
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease;
}
.changelog-modal .amp-modal-close:hover { background: rgba(255,255,255,0.24); }

.changelog-modal .amp-modal-body {
  padding: 24px 28px 28px;
  overflow-y: auto;
  max-height: calc(92vh - 200px);
  background: linear-gradient(180deg, var(--d-bgc-f8fafc) 0%, var(--d-bgc-ffffff) 100%);
}

.changelog-modal .amp-modal-footer {
  padding: 18px 28px;
  background: var(--d-bgc-ffffff);
  border-top: 1px solid var(--d-brd-e2e8f0);
}

/* Cada bloco de versão */
.changelog-versao {
  padding: 20px 22px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.changelog-versao:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}

.changelog-versao.atual {
  background: linear-gradient(135deg, var(--d-bgc-fffbeb) 0%, var(--d-bgc-fef3c7) 100%);
  border: 2px solid var(--d-brd-fbbf24);
  box-shadow: 0 8px 28px rgba(251, 191, 36, 0.28);
  position: relative;
  overflow: hidden;
}
.changelog-versao.atual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--d-bgc-fbbf24), var(--d-bgc-f59e0b), var(--d-bgc-fbbf24));
  background-size: 200% 100%;
  animation: changelog-shimmer 3s linear infinite;
}
@keyframes changelog-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.changelog-versao-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.changelog-tag-novo {
  background: var(--d-bgc-dc2626);
  color: var(--d-txt-ffffff);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  animation: changelog-pulse 1.6s ease-in-out infinite;
}

@keyframes changelog-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.changelog-versao-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--marinho);
  font-family: 'Outfit', sans-serif;
}

.changelog-versao-data {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.changelog-versao-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.changelog-versao-resumo {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}


/* Grupos dentro de uma versão */
.changelog-grupo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.changelog-grupo:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 8px;
}

.changelog-grupo-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--marinho);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.changelog-grupo-icone {
  font-size: 16px;
}

.changelog-itens {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-itens li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.changelog-itens li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 5px;
  color: var(--verde);
  font-weight: 800;
  font-size: 12px;
}


/* Scroll discreto no body do changelog */
.changelog-body::-webkit-scrollbar {
  width: 6px;
}
.changelog-body::-webkit-scrollbar-track {
  background: transparent;
}
.changelog-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.changelog-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   AMPARAR CRM — PATCH UX-3.1.b (CSS appendix)
   Beyond Bits Tecnologia © 2026

   INSTRUÇÃO: cole este bloco no FINAL do styles_amparar.css
   (ou crie um novo arquivo CSS e referencie no index.html).

   Conteúdo:
   - Paleta de cores no modal Nova Tag
   ============================================================ */

.tag-cor-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.tag-cor-chip {
  width: 44px;
  height: 32px;
  border: 2px solid var(--d-brd-e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
}

.tag-cor-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tag-cor-chip.selecionada {
  border-color: var(--d-brd-1e2358);
  box-shadow: 0 0 0 2px rgba(30, 35, 88, 0.2);
  transform: translateY(-1px);
}

#tag-preview-container {
  padding: 10px 12px;
  background: var(--d-bgc-f9fafb);
  border: 1px dashed var(--d-brd-d1d5db);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

/* ============================================================
   AMPARAR CRM — PATCH UI-3.2 (CSS appendix)
   Beyond Bits Tecnologia © 2026

   INSTRUÇÃO: cole este bloco no FINAL do styles_amparar.css.

   Conteúdo:
   - Badge circular de iniciais do criador no rodapé do card
   ============================================================ */

.k-card-creator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: help;
  user-select: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(30, 35, 88, 0.06);
  transition: transform 0.15s ease;
}

.k-card:hover .k-card-creator-badge {
  transform: scale(1.05);
}
/* ============================================================
   PACOTE 1 v1.3.0 — Arquivamento + Seleção múltipla no Kanban
   ============================================================ */

/* Card arquivado — visual esmaecido */
.k-card.k-card-arquivado {
  opacity: 0.65;
  background: var(--d-bgc-f9fafb);
}
.k-card.k-card-arquivado:hover {
  opacity: 0.85;
}

/* Badge "arquivado" dentro do card */
.k-card-arquivado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--d-bgc-e5e7eb);
  color: var(--d-txt-6b7280);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.k-card-arquivado-badge i {
  font-size: 11px;
}

/* Checkbox de seleção múltipla — escondido por padrão,
   só aparece quando a coluna Kanban está em modo seleção */
.k-card-checkbox {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  font-size: 20px;
  z-index: 2;
  line-height: 1;
}
.k-card-checkbox .k-check-on  { display: none; color: var(--d-txt-1b6b3a); }
.k-card-checkbox .k-check-off { display: inline; color: var(--d-txt-9ca3af); }
.k-card { position: relative; }

/* Modo seleção ativa — mostra checkboxes */
#kanban-board.k-selection-mode .k-card-checkbox {
  display: inline-block;
}

/* Card selecionado */
.k-card.k-card-selected {
  background: var(--d-bgc-e0f2fe);
  border-color: var(--d-brd-0ea5e9) !important;
  box-shadow: 0 0 0 2px #0EA5E9;
}
.k-card.k-card-selected .k-card-checkbox .k-check-on  { display: inline; }
.k-card.k-card-selected .k-card-checkbox .k-check-off { display: none; }

/* Empty state de busca no histórico */
#historico-list .empty-state .empty-icon { font-size: 32px; }

/* ============================================================
   PACOTE 1 v1.3.0 — Modal de Transferência em Lote
   ============================================================ */
.transf-lote-preview-box {
  background: var(--d-bgc-f9fafb);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.transf-lote-lead {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--d-brd-f3f4f6);
  font-size: 13px;
}
.transf-lote-lead:last-child {
  border-bottom: none;
}
.transf-lote-codigo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--d-txt-6b7280);
  background: var(--d-bgc-ffffff);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--d-brd-e5e7eb);
  text-align: center;
}
.transf-lote-nome {
  font-weight: 500;
  color: var(--d-txt-111827);
}
.transf-lote-etapa {
  white-space: nowrap;
}
.transf-lote-mais {
  padding: 8px 4px 4px;
  text-align: center;
  border-top: 1px dashed var(--d-brd-e5e7eb);
  margin-top: 4px;
}

/* ============================================================
   PACOTE 2 v1.4.0 — Feature 4.10 (RN-26)
   Drawer lateral de Filtros Avançados
   Cole este bloco ao final de styles_amparar.css
   ============================================================ */

/* ---- Drawer wrapper ---- */
.fa-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.fa-drawer.fa-drawer-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.25s ease;
}
.fa-drawer-body-lock {
  overflow: hidden;
}

/* Backdrop com blur suave */
.fa-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Painel lateral que desliza da direita */
.fa-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--d-bgc-ffffff);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fa-drawer.fa-drawer-open .fa-drawer-panel {
  transform: translateX(0);
}

/* Header */
.fa-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  flex-shrink: 0;
}
.fa-drawer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-111827);
  line-height: 1.2;
}
.fa-drawer-subtitle {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-top: 4px;
  line-height: 1.4;
}
.fa-drawer-close {
  background: transparent;
  border: none;
  color: var(--d-txt-6b7280);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.fa-drawer-close:hover {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-111827);
}

/* Body — scroll interno */
.fa-drawer-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Footer sticky */
.fa-drawer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--d-brd-e5e7eb);
  background: var(--d-bgc-fafafa);
  flex-shrink: 0;
}

/* ---- Campos de filtro ---- */
.fa-campo {
  margin-bottom: 20px;
}
.fa-campo:last-child {
  margin-bottom: 0;
}
.fa-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-txt-374151);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fa-input {
  width: 100%;
}

/* Range (data / faixa numérica) */
.fa-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-range > input {
  flex: 1 1 0;
  min-width: 0;
}
.fa-range-sep {
  font-size: 12px;
  color: var(--d-txt-9ca3af);
  font-weight: 500;
  flex-shrink: 0;
}

/* Multi-select em chips */
.fa-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Toggle AND/OR — Onda 6 (#14) — só aparece em campos que declaram
   permitirAndOr:true no config. Segmented control compacto acima
   das opções, com fonte pequena pra não competir com os chips. */
.fa-modo-toggle {
  display: inline-flex;
  background: var(--d-bgc-f1f5f9);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 8px;
  padding: 2px;
  margin: 4px 0 8px;
  font-size: 11px;
  gap: 2px;
}
.fa-modo-opt {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--d-txt-64748b);
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.fa-modo-opt:hover {
  background: var(--d-bgc-e2e8f0);
  color: var(--d-txt-334155);
}
.fa-modo-opt.selected {
  background: var(--d-bgc-1e2761);
  color: var(--d-txt-ffffff);
  box-shadow: 0 1px 3px rgba(30,39,97,0.25);
}
.fa-modo-opt.selected:hover {
  background: var(--d-bgc-2d3579);
}
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--d-txt-374151);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fa-chip:hover {
  background: var(--d-bgc-e5e7eb);
}
.fa-chip input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1B6B3A;
}
.fa-chip:has(input:checked) {
  background: var(--d-bgc-d1fae5);
  border-color: var(--d-brd-059669);
  color: var(--d-txt-065f46);
  font-weight: 600;
}
/* Fallback pra navegadores sem :has (Safari antigo, Firefox < 121) —
   o chip fica funcional mesmo sem o efeito visual do "selecionado" */

/* Checkbox "incluir vazias" */
.fa-chk-vazias {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  user-select: none;
}
.fa-chk-vazias input[type="checkbox"] {
  margin: 0;
  accent-color: #1B6B3A;
}

/* Responsivo — tela pequena */
@media (max-width: 600px) {
  .fa-drawer-panel {
    width: 100vw;
  }
}

/* ============================================================
   PACOTE 2 v1.4.0 — Feature 4.10 (RN-26)
   Drawer lateral de Filtros Avançados
   Cole este bloco ao final de styles_amparar.css
   ============================================================ */

/* ---- Drawer wrapper ---- */
.fa-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}
.fa-drawer.fa-drawer-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.25s ease;
}
.fa-drawer-body-lock {
  overflow: hidden;
}

/* Backdrop com blur suave */
.fa-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Painel lateral que desliza da direita */
.fa-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--d-bgc-ffffff);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fa-drawer.fa-drawer-open .fa-drawer-panel {
  transform: translateX(0);
}

/* Header */
.fa-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  flex-shrink: 0;
}
.fa-drawer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--d-txt-111827);
  line-height: 1.2;
}
.fa-drawer-subtitle {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-top: 4px;
  line-height: 1.4;
}
.fa-drawer-close {
  background: transparent;
  border: none;
  color: var(--d-txt-6b7280);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.fa-drawer-close:hover {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-111827);
}

/* Body — scroll interno */
.fa-drawer-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Footer sticky */
.fa-drawer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--d-brd-e5e7eb);
  background: var(--d-bgc-fafafa);
  flex-shrink: 0;
}

/* ---- Campos de filtro ---- */
.fa-campo {
  margin-bottom: 20px;
}
.fa-campo:last-child {
  margin-bottom: 0;
}
.fa-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-txt-374151);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fa-input {
  width: 100%;
}

/* Range (data / faixa numérica) */
.fa-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-range > input {
  flex: 1 1 0;
  min-width: 0;
}
.fa-range-sep {
  font-size: 12px;
  color: var(--d-txt-9ca3af);
  font-weight: 500;
  flex-shrink: 0;
}

/* Multi-select em chips */
.fa-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Toggle AND/OR — Onda 6 (#14) — só aparece em campos que declaram
   permitirAndOr:true no config. Segmented control compacto acima
   das opções, com fonte pequena pra não competir com os chips. */
.fa-modo-toggle {
  display: inline-flex;
  background: var(--d-bgc-f1f5f9);
  border: 1px solid var(--d-brd-e2e8f0);
  border-radius: 8px;
  padding: 2px;
  margin: 4px 0 8px;
  font-size: 11px;
  gap: 2px;
}
.fa-modo-opt {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--d-txt-64748b);
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}
.fa-modo-opt:hover {
  background: var(--d-bgc-e2e8f0);
  color: var(--d-txt-334155);
}
.fa-modo-opt.selected {
  background: var(--d-bgc-1e2761);
  color: var(--d-txt-ffffff);
  box-shadow: 0 1px 3px rgba(30,39,97,0.25);
}
.fa-modo-opt.selected:hover {
  background: var(--d-bgc-2d3579);
}
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--d-txt-374151);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fa-chip:hover {
  background: var(--d-bgc-e5e7eb);
}
.fa-chip input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1B6B3A;
}
.fa-chip:has(input:checked) {
  background: var(--d-bgc-d1fae5);
  border-color: var(--d-brd-059669);
  color: var(--d-txt-065f46);
  font-weight: 600;
}
/* Fallback pra navegadores sem :has (Safari antigo, Firefox < 121) —
   o chip fica funcional mesmo sem o efeito visual do "selecionado" */

/* Checkbox "incluir vazias" */
.fa-chk-vazias {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  user-select: none;
}
.fa-chk-vazias input[type="checkbox"] {
  margin: 0;
  accent-color: #1B6B3A;
}

/* Responsivo — tela pequena */
@media (max-width: 600px) {
  .fa-drawer-panel {
    width: 100vw;
  }
}

/* ============================================================
   VIS-DATE-1 — Badge de agendamento no card do Kanban
   Pacote 1 pós-homologação (resolve T5)

   Como aplicar:
     ▸ APPEND-ONLY: cole este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente
   ============================================================ */

.k-card-agenda-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.k-card-agenda-badge i {
  font-size: 12px;
  line-height: 1;
}

/* HOJE — verde de destaque (chama atenção pro atendimento do dia) */
.k-card-agenda-badge.k-agenda-hoje {
  background: var(--d-bgc-d1fae5);
  color: var(--d-txt-065f46);
  border-color: var(--d-brd-6ee7b7);
}

/* AMANHÃ — azul suave (planejamento próximo) */
.k-card-agenda-badge.k-agenda-amanha {
  background: var(--d-bgc-dbeafe);
  color: var(--d-txt-1e40af);
  border-color: var(--d-brd-93c5fd);
}

/* FUTURO — cinza neutro (informativo) */
.k-card-agenda-badge.k-agenda-futuro {
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-4b5563);
  border-color: var(--d-brd-d1d5db);
}

/* ATRASADO — vermelho de alerta */
.k-card-agenda-badge.k-agenda-atrasado {
  background: var(--d-bgc-fee2e2);
  color: var(--d-txt-991b1b);
  border-color: var(--d-brd-fca5a5);
  animation: k-agenda-pulse 2.5s ease-in-out infinite;
}

@keyframes k-agenda-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
}

/* Card arquivado deixa o badge um pouco esmaecido também */
.k-card.k-card-arquivado .k-card-agenda-badge {
  opacity: 0.7;
}

/* ============================================================
   PACOTE 8 — Melhorias de UX
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente

   Cobre:
     • T2 — Formatação dos cards do modal de duplicidade de telefone
     • T3 — Overlay de progresso na transferência em lote
     • T4 — Truncamento de texto longo nos cards do Kanban + tooltip
   ============================================================ */

/* ── T2 · Cards do modal de duplicidade de telefone ────────── */

#dup-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.dup-card {
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  cursor: default;
}
.dup-card:hover {
  border-color: var(--d-brd-c5c8ec);
  box-shadow: 0 4px 12px rgba(30, 33, 88, 0.08);
  transform: translateY(-1px);
}

.dup-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dup-card-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  letter-spacing: 0.3px;
}

.dup-card-etapa {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dup-badge-arq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-6b7280);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.dup-badge-arq i { font-size: 11px; }

.dup-card-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin-bottom: 6px;
  line-height: 1.3;
}

.dup-card-info {
  font-size: 12px;
  color: var(--d-txt-4b5563);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dup-card-info i {
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  width: 14px;
  text-align: center;
}
.dup-card-info strong {
  color: var(--d-txt-1e2358);
  font-weight: 600;
}
.dup-card-info .text-muted {
  color: var(--d-txt-9ca3af) !important;
  font-size: 11px;
}


/* ── T3 · Overlay de progresso na transferência em lote ────── */

.transf-lote-progress-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: inherit;
  z-index: 10;
  animation: transf-fade-in .2s ease-out;
}

@keyframes transf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transf-lote-progress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--d-brd-e5e7eb);
  border-top-color: var(--d-brd-d91a3c);
  border-radius: 50%;
  animation: transf-spin 0.8s linear infinite;
}

@keyframes transf-spin {
  to { transform: rotate(360deg); }
}

.transf-lote-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin: 0;
}

.transf-lote-progress-sub {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin: 0;
}

.transf-lote-progress-bar-wrap {
  width: 260px;
  height: 6px;
  background: var(--d-bgc-f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.transf-lote-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  border-radius: 999px;
  animation: transf-bar-indet 1.4s ease-in-out infinite;
}
@keyframes transf-bar-indet {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -20%; }
  100% { left: 100%; right: -20%; }
}


/* ── T1 · Aviso de lead já com outro responsável ────────────── */
/* Aparece dentro do preview do modal de transferência em lote
   quando algum lead selecionado já foi transferido para outro
   usuário desde a última sincronização. */

.transf-lote-aviso-outro {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.transf-lote-aviso-outro i {
  font-size: 16px;
  color: var(--d-txt-d97706);
  margin-top: 1px;
}
.transf-lote-aviso-outro strong { color: var(--d-txt-92400e); }


/* ── T4 · Truncamento e tooltip nos cards do Kanban ─────────── */
/* Nome, telefone e fonte podem ter texto longo. Trunca com "..."
   e o hover exibe o texto completo via title nativo do browser.
   Aplicamos APENAS aos elementos textuais; o card em si continua
   se ajustando ao conteúdo secundário (tags, badges etc). */

.k-card-nome,
.k-card-tel,
.k-fonte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* permite flex/grid children encolherem */
}

/* Cursor de help sinaliza que existe tooltip quando o texto foi
   truncado. O CSS não sabe se truncou de verdade; usamos data-attr
   posto pelo KanbanCard v2.6. */
.k-card-nome[data-truncable="true"],
.k-card-tel[data-truncable="true"],
.k-fonte[data-truncable="true"] {
  cursor: help;
}

/* ============================================================
   PACOTE 8 — Melhorias de UX
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente

   Cobre:
     • T2 — Formatação dos cards do modal de duplicidade de telefone
     • T3 — Overlay de progresso na transferência em lote
     • T4 — Truncamento de texto longo nos cards do Kanban + tooltip
   ============================================================ */

/* ── T2 · Cards do modal de duplicidade de telefone ────────── */

#dup-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.dup-card {
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  cursor: default;
}
.dup-card:hover {
  border-color: var(--d-brd-c5c8ec);
  box-shadow: 0 4px 12px rgba(30, 33, 88, 0.08);
  transform: translateY(-1px);
}

.dup-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dup-card-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  letter-spacing: 0.3px;
}

.dup-card-etapa {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dup-badge-arq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--d-bgc-f3f4f6);
  color: var(--d-txt-6b7280);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.dup-badge-arq i { font-size: 11px; }

.dup-card-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin-bottom: 6px;
  line-height: 1.3;
}

.dup-card-info {
  font-size: 12px;
  color: var(--d-txt-4b5563);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dup-card-info i {
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  width: 14px;
  text-align: center;
}
.dup-card-info strong {
  color: var(--d-txt-1e2358);
  font-weight: 600;
}
.dup-card-info .text-muted {
  color: var(--d-txt-9ca3af) !important;
  font-size: 11px;
}


/* ── T3 · Overlay de progresso na transferência em lote ────── */
/* v1.1.1 — position:fixed cobrindo a viewport, ancorado no body */

.transf-lote-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;   /* acima dos modais amp-modal */
  animation: transf-fade-in .2s ease-out;
}

.transf-lote-progress-card {
  background: var(--d-bgc-ffffff);
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  min-width: 320px;
}

@keyframes transf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transf-lote-progress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--d-brd-e5e7eb);
  border-top-color: var(--d-brd-d91a3c);
  border-radius: 50%;
  animation: transf-spin 0.8s linear infinite;
}

@keyframes transf-spin {
  to { transform: rotate(360deg); }
}

.transf-lote-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
  margin: 0;
  text-align: center;
}

.transf-lote-progress-sub {
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin: 0;
  text-align: center;
}

.transf-lote-progress-bar-wrap {
  width: 260px;
  height: 6px;
  background: var(--d-bgc-f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.transf-lote-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  border-radius: 999px;
  animation: transf-bar-indet 1.4s ease-in-out infinite;
}
@keyframes transf-bar-indet {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -20%; }
  100% { left: 100%; right: -20%; }
}


/* ── T1 · Preview em lista scrollável — todos os leads ─────── */
/* Antes o preview limitava a 5 e mostrava "e mais N". Agora
   mostra TODOS em uma lista scrollável, mantendo o modal com
   altura razoável. */

.transf-lote-contagem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 8px;
  font-size: 12px;
  color: var(--d-txt-6b7280);
}
.transf-lote-contagem strong { color: var(--d-txt-1e2358); font-weight: 700; }

.transf-lote-lista-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  padding: 8px;
  background: var(--d-bgc-fafafb);
}

/* Scrollbar discreta */
.transf-lote-lista-scroll::-webkit-scrollbar { width: 6px; }
.transf-lote-lista-scroll::-webkit-scrollbar-thumb {
  background: var(--d-bgc-d1d5db);
  border-radius: 999px;
}
.transf-lote-lista-scroll::-webkit-scrollbar-track { background: transparent; }

/* Item de lead que já está com outro responsável */
.transf-lote-lead.transf-lote-lead-outro {
  background: var(--d-bgc-fffbeb);
  border-left: 3px solid var(--d-brd-f59e0b);
  padding-left: 8px;
}

.transf-lote-resp-outro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--d-txt-92400e);
  background: var(--d-bgc-fef3c7);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
.transf-lote-resp-outro i { font-size: 11px; }


/* ── T1 · Aviso de lead já com outro responsável ────────────── */
/* Aparece dentro do preview do modal de transferência em lote
   quando algum lead selecionado já foi transferido para outro
   usuário desde a última sincronização. */

.transf-lote-aviso-outro {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.transf-lote-aviso-outro i {
  font-size: 16px;
  color: var(--d-txt-d97706);
  margin-top: 1px;
}
.transf-lote-aviso-outro strong { color: var(--d-txt-92400e); }


/* ── T4 · Truncamento e tooltip nos cards do Kanban ─────────── */
/* Nome, telefone e fonte podem ter texto longo. Trunca com "..."
   e o hover exibe o texto completo via title nativo do browser.
   Aplicamos APENAS aos elementos textuais; o card em si continua
   se ajustando ao conteúdo secundário (tags, badges etc). */

.k-card-nome,
.k-card-tel,
.k-fonte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* permite flex/grid children encolherem */
}

/* Cursor de help sinaliza que existe tooltip quando o texto foi
   truncado. O CSS não sabe se truncou de verdade; usamos data-attr
   posto pelo KanbanCard v2.6. */
.k-card-nome[data-truncable="true"],
.k-card-tel[data-truncable="true"],
.k-fonte[data-truncable="true"] {
  cursor: help;
}

/* ============================================================
   WIKI-STYLES-1 / Central de Conhecimento
   Beyond Bits Tecnologia © 2026

   Como aplicar:
     ▸ APPEND-ONLY: colar este bloco no FINAL do styles_amparar.css
     ▸ Não substitui nada existente
   ============================================================ */

/* ── Layout base ─────────────────────────────────────────────── */
.wiki-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background: var(--d-bgc-f8fafc);
}

/* ── Header (título + busca) ─────────────────────────────────── */
.wiki-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--d-bgc-ffffff);
  border-bottom: 1px solid var(--d-brd-e5e7eb);
  gap: 16px;
  flex-shrink: 0;
}

.wiki-header-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--d-txt-1e2358);
}
.wiki-header-titulo i { font-size: 22px; color: var(--d-txt-d91a3c); }

.wiki-header-busca {
  position: relative;
  width: 380px;
  max-width: 50%;
}
.wiki-busca-icone {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--d-txt-9ca3af);
  font-size: 14px;
  pointer-events: none;
}
.wiki-busca-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--d-brd-e5e7eb);
  border-radius: 8px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s;
  background: var(--d-bgc-fafafb);
}
.wiki-busca-input:focus { border-color: var(--d-brd-d91a3c); background: var(--d-bgc-ffffff); }
.wiki-busca-limpar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--d-txt-9ca3af);
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}
.wiki-busca-limpar:hover { background: var(--d-bgc-f3f4f6); color: var(--d-txt-1e2358); }

/* ── Container (sumário + conteúdo) ──────────────────────────── */
.wiki-container {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sumário lateral ─────────────────────────────────────────── */
.wiki-sumario {
  width: 280px;
  flex-shrink: 0;
  background: var(--d-bgc-ffffff);
  border-right: 1px solid var(--d-brd-e5e7eb);
  overflow-y: auto;
  padding: 16px 0;
}
.wiki-sumario::-webkit-scrollbar { width: 6px; }
.wiki-sumario::-webkit-scrollbar-thumb { background: var(--d-bgc-e5e7eb); border-radius: 999px; }

.wiki-toc-secao { padding: 4px 0; }

.wiki-toc-secao-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-txt-4b5563);
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.wiki-toc-secao-header:hover { background: var(--d-bgc-f3f4f6); color: var(--d-txt-1e2358); }
.wiki-toc-secao-header i:first-child { font-size: 15px; color: var(--d-txt-6b7280); }

.wiki-toc-caret {
  margin-left: auto;
  font-size: 11px !important;
  transition: transform .2s;
  color: var(--d-txt-9ca3af);
}
.wiki-toc-expandida > .wiki-toc-secao-header .wiki-toc-caret {
  transform: rotate(180deg);
}
.wiki-toc-ativa > .wiki-toc-secao-header {
  color: var(--d-txt-d91a3c);
  background: var(--d-bgc-fef2f5);
}
.wiki-toc-ativa > .wiki-toc-secao-header i:first-child { color: var(--d-txt-d91a3c); }

.wiki-toc-subsecoes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-out;
}
.wiki-toc-expandida .wiki-toc-subsecoes {
  max-height: 500px;
}
.wiki-toc-subitem {
  display: block;
  padding: 8px 20px 8px 46px;
  font-size: 13px;
  color: var(--d-txt-6b7280);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.wiki-toc-subitem:hover {
  background: var(--d-bgc-f9fafb);
  color: var(--d-txt-1e2358);
}
.wiki-toc-subativa {
  color: var(--d-txt-d91a3c) !important;
  font-weight: 600;
  background: var(--d-bgc-fef2f5) !important;
  border-left-color: var(--d-brd-d91a3c) !important;
}

/* ── Conteúdo principal ──────────────────────────────────────── */
.wiki-conteudo {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.wiki-conteudo::-webkit-scrollbar { width: 8px; }
.wiki-conteudo::-webkit-scrollbar-thumb { background: var(--d-bgc-d1d5db); border-radius: 999px; }

.wiki-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  margin-bottom: 12px;
}
.wiki-breadcrumb i { font-size: 11px; }
.wiki-breadcrumb i:first-child { color: var(--d-txt-d91a3c); font-size: 14px; }

.wiki-titulo {
  font-size: 30px;
  font-weight: 800;
  color: var(--d-txt-1e2358);
  margin: 0 0 24px 0;
  line-height: 1.15;
}

.wiki-p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--d-txt-374151);
  margin: 0 0 18px 0;
}
.wiki-p code {
  background: var(--d-bgc-f3f4f6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--d-txt-d91a3c);
}
.wiki-p strong { color: var(--d-txt-1e2358); }

/* ── Listas ──────────────────────────────────────────────────── */
.wiki-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.wiki-lista li {
  position: relative;
  padding: 8px 8px 8px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--d-txt-374151);
}
.wiki-lista li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--d-bgc-d91a3c);
}
.wiki-lista li strong { color: var(--d-txt-1e2358); }
.wiki-lista li code {
  background: var(--d-bgc-f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--d-txt-d91a3c);
}

/* ── Passos numerados ────────────────────────────────────────── */
.wiki-passos {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  counter-reset: passo;
}
.wiki-passo {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  margin-bottom: 10px;
}
.wiki-passo-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--d-bgc-d91a3c), var(--d-bgc-f0294e));
  color: var(--d-txt-ffffff);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(217, 26, 60, 0.25);
}
.wiki-passo-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiki-passo-titulo {
  font-size: 14.5px;
  color: var(--d-txt-1e2358);
  font-weight: 700;
}
.wiki-passo-texto {
  font-size: 13.5px;
  color: var(--d-txt-4b5563);
  line-height: 1.55;
}

/* ── Destaques (info, dica, atenção) ─────────────────────────── */
.wiki-destaque {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0 0 20px 0;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
}
.wiki-destaque i { flex-shrink: 0; font-size: 20px; margin-top: 1px; }
.wiki-destaque strong { font-weight: 700; }

.wiki-destaque-info {
  background: var(--d-bgc-eff6ff);
  border: 1px solid var(--d-brd-bfdbfe);
  border-left: 4px solid var(--d-brd-3b82f6);
  color: var(--d-txt-1e40af);
}
.wiki-destaque-info i { color: var(--d-txt-3b82f6); }

.wiki-destaque-dica {
  background: var(--d-bgc-ecfdf5);
  border: 1px solid var(--d-brd-a7f3d0);
  border-left: 4px solid var(--d-brd-10b981);
  color: var(--d-txt-065f46);
}
.wiki-destaque-dica i { color: var(--d-txt-10b981); }

.wiki-destaque-atencao {
  background: var(--d-bgc-fef3c7);
  border: 1px solid var(--d-brd-fde68a);
  border-left: 4px solid var(--d-brd-f59e0b);
  color: var(--d-txt-78350f);
}
.wiki-destaque-atencao i { color: var(--d-txt-d97706); }

.wiki-destaque strong { color: inherit; }

/* ── Tabelas ─────────────────────────────────────────────────── */
.wiki-tabela-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--d-brd-e5e7eb);
  margin: 0 0 22px 0;
}
.wiki-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--d-bgc-ffffff);
}
.wiki-tabela th {
  background: var(--d-bgc-f9fafb);
  color: var(--d-txt-1e2358);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--d-brd-e5e7eb);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.wiki-tabela td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--d-brd-f3f4f6);
  color: var(--d-txt-374151);
  line-height: 1.55;
  vertical-align: top;
}
.wiki-tabela tr:last-child td { border-bottom: none; }
.wiki-tabela tr:hover td { background: var(--d-bgc-fafbfc); }
.wiki-tabela strong { color: var(--d-txt-1e2358); }
.wiki-tabela code {
  background: var(--d-bgc-f3f4f6);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--d-txt-d91a3c);
}

/* ── Mídia (imagem/vídeo com placeholder) ────────────────────── */
.wiki-media {
  margin: 0 0 24px 0;
}
.wiki-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--d-bgc-f3f4f6);
  border: 1px solid var(--d-brd-e5e7eb);
}
.wiki-media-imagem {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wiki-media-video video {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--d-bgc-000000);
}

/* Placeholder: fica atrás; se a imagem carregar, cobre. */
.wiki-media-imagem .wiki-placeholder,
.wiki-media-video  .wiki-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--d-txt-9ca3af);
  background: linear-gradient(135deg, var(--d-bgc-f9fafb) 0%, var(--d-bgc-f3f4f6) 100%);
  border-radius: 10px;
}
/* Se imagem carregar, o background da wrap cobre o placeholder */
.wiki-media-imagem[style*="url"] .wiki-placeholder { display: none; }
.wiki-media-imagem[style*="url('/assets/')"] .wiki-placeholder { display: flex; }

.wiki-placeholder i {
  font-size: 42px;
  color: var(--d-txt-d1d5db);
}
.wiki-placeholder-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-txt-6b7280);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--d-bgc-ffffff);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--d-brd-e5e7eb);
}
.wiki-placeholder-hint {
  font-size: 11.5px;
  color: var(--d-txt-9ca3af);
}
.wiki-placeholder-hint code {
  background: var(--d-bgc-ffffff);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--d-txt-d91a3c);
  border: 1px solid var(--d-brd-e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wiki-media-legenda {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--d-txt-6b7280);
  font-style: italic;
  text-align: center;
}

/* ── Navegação Anterior / Próximo ────────────────────────────── */
.wiki-nav-rodape {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--d-brd-e5e7eb);
}
.wiki-nav-rodape-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  color: var(--d-txt-1e2358);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 220px;
  max-width: 320px;
}
.wiki-nav-rodape-item:hover {
  border-color: var(--d-brd-d91a3c);
  box-shadow: 0 4px 12px rgba(217, 26, 60, 0.08);
  transform: translateY(-1px);
  color: var(--d-txt-d91a3c);
}
.wiki-nav-rodape-item i { font-size: 20px; color: var(--d-txt-9ca3af); }
.wiki-nav-rodape-item:hover i { color: var(--d-txt-d91a3c); }
.wiki-nav-anterior { text-align: left; }
.wiki-nav-proximo  { text-align: right; margin-left: auto; }
.wiki-nav-hint {
  display: block;
  font-size: 11px;
  color: var(--d-txt-9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.wiki-nav-rodape-item strong {
  font-size: 13.5px;
  color: var(--d-txt-1e2358);
}
.wiki-nav-rodape-item:hover strong { color: var(--d-txt-d91a3c); }

/* ── Busca — Resultados ──────────────────────────────────────── */
.wiki-busca-resultados {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiki-busca-resultado {
  display: block;
  padding: 14px 18px;
  background: var(--d-bgc-ffffff);
  border: 1px solid var(--d-brd-e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.wiki-busca-resultado:hover {
  border-color: var(--d-brd-d91a3c);
  box-shadow: 0 4px 12px rgba(217, 26, 60, 0.08);
}
.wiki-busca-resultado-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--d-txt-4b5563);
  font-weight: 600;
  margin-bottom: 6px;
}
.wiki-busca-resultado-cabecalho i { color: var(--d-txt-d91a3c); font-size: 14px; }
.wiki-busca-resultado-caminho { color: var(--d-txt-1e2358); }
.wiki-busca-resultado-trecho {
  font-size: 13px;
  color: var(--d-txt-6b7280);
  line-height: 1.6;
}
.wiki-busca-resultado-trecho mark {
  background: var(--d-bgc-fef08a);
  color: var(--d-txt-713f12);
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}

.wiki-busca-vazio {
  text-align: center;
  padding: 60px 20px;
  color: var(--d-txt-6b7280);
}
.wiki-busca-vazio i {
  font-size: 48px;
  color: var(--d-txt-d1d5db);
  margin-bottom: 16px;
}
.wiki-busca-vazio h2 {
  font-size: 18px;
  color: var(--d-txt-1e2358);
  margin: 0 0 8px 0;
}

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wiki-sumario { width: 220px; }
  .wiki-conteudo { padding: 24px 20px; }
  .wiki-header-busca { width: 200px; }
  .wiki-titulo { font-size: 22px; }
}

@media (max-width: 700px) {
  .wiki-container { flex-direction: column; }
  .wiki-sumario {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--d-brd-e5e7eb);
  }
  .wiki-header { flex-direction: column; align-items: stretch; }
  .wiki-header-busca { width: 100%; max-width: none; }
}

/* ============================================================
   v2.1 (Sprint 6 / Patch 1) — Filtros da Agenda e do Histórico
   ============================================================ */
#page-agenda .gcal-topbar-right #btn-filtro-agenda {
  margin-right: 8px;
}
#page-historico .top-bar-actions #btn-filtro-historico,
#page-historico .filtros-topbar #btn-filtro-historico {
  margin-right: 8px;
}
#btn-filtro-agenda .badge,
#btn-filtro-historico .badge {
  font-size: 11px;
  padding: 2px 6px;
}

/* ============================================================
   v2.2 (Sprint 6 / Patch 2) — Agenda: badge de sigla no card
   e dots coloridos na mini-agenda do Dashboard
   ============================================================ */

/* Badge circular com a sigla do especialista no canto do card.
   Fica ancorada no canto superior direito, sem quebrar layout. */
.gcal-event {
  position: absolute; /* garantia — layout já assume */
}
.gcal-event-sigla {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--d-txt-1e2761);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: none; /* clique passa pro card */
  z-index: 2;
}
/* Título e horário do evento não colidem com o badge (padding à direita) */
.gcal-event-title,
.gcal-event-time {
  padding-right: 30px;
}

/* Mini-agenda do Dashboard: bolinhas coloridas coerentes com a agenda full.
   As classes gcal-ev-0..4 já definem cores; aqui só damos formato de dot
   pequeno com a sigla dentro. */
#agenda-week-dash .ag-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--d-txt-ffffff);
  margin: 1px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
#agenda-week-dash .ag-slot:hover {
  transform: scale(1.15);
}
/* Se por algum motivo a paleta gcal-ev-N não estiver definida no dash,
   dá um fallback razoável (evita "bolinha invisível"). */
#agenda-week-dash .ag-slot:not([class*="gcal-ev-"]) {
  background: var(--d-bgc-1e2761);
}