/* ═══════════════════════════════════════════════════════════
   MYMOBI CRM v2.0 — components.css
   Componentes reutilizáveis — Tema Claro Premium
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  height: 36px;
  font-family: inherit;
}

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,168,107,0.3);
}
.btn-primary:hover { box-shadow: var(--shadow-brand); transform: translateY(-1px); }

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-normal);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-normal);
}
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--border-brand);
}
.btn-outline:hover { background: var(--brand-soft); }

.btn-xs { font-size: 11px; height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-sm); gap: 4px; }
.btn-sm { font-size: 12px; height: 32px; padding: 0 var(--space-3); gap: 5px; }
.btn-lg { font-size: 14px; height: 42px; padding: 0 var(--space-6); }

.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-xs { width: 26px; height: 26px; border-radius: var(--radius-sm); }

/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
}

.card:hover { box-shadow: var(--shadow-md); }

/* ── KPI CARDS ──────────────────────────────────────── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  cursor: default;
}

.kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--brand-gradient-h));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.kpi-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.5px;
}

.kpi-footer { display: flex; align-items: center; gap: var(--space-2); }

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.kpi-delta.positive { color: var(--color-success); background: var(--success-soft); }
.kpi-delta.negative { color: var(--color-danger);  background: var(--danger-soft); }
.kpi-period { font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.badge-blue    { background: var(--info-soft);    color: #2563EB; }
.badge-purple  { background: var(--purple-soft);  color: #7C3AED; }
.badge-amber   { background: var(--warning-soft); color: #D97706; }
.badge-green   { background: var(--success-soft); color: #059669; }
.badge-red     { background: var(--danger-soft);  color: #DC2626; }
.badge-orange  { background: #FFF7ED;             color: #EA580C; }
.badge-gray    { background: #F8FAFC;             color: #64748B; border: 1px solid var(--border-normal); }
.badge-cyan    { background: #ECFEFF;             color: #0891B2; }
.badge-brand   { background: var(--brand-soft);   color: var(--brand-dark); }

/* ══════════════════════════════════════════════════════
   TEMPERATURA DO LEAD
══════════════════════════════════════════════════════ */
.temp-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.temp-hot    { background: var(--temp-hot-soft);    color: var(--temp-hot); }
.temp-warm   { background: var(--temp-warm-soft);   color: var(--temp-warm); }
.temp-cold   { background: var(--temp-cold-soft);   color: var(--temp-cold); }
.temp-frozen { background: var(--temp-frozen-soft); color: var(--temp-frozen); border: 1px solid var(--border-normal); }

.temp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  padding: 0 var(--space-3);
  outline: none;
  transition: var(--transition-base);
  height: 38px;
  width: 100%;
  box-shadow: var(--shadow-xs);
}

.form-control:focus {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.form-control::placeholder { color: var(--text-muted); }
.form-control option { background: #fff; color: var(--text-primary); }
textarea.form-control { height: auto; padding: var(--space-2) var(--space-3); resize: vertical; min-height: 80px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .form-row-3 { grid-template-columns: 1fr; } }

.form-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--bg-elevated);
  margin-bottom: var(--space-4);
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-section-title i { color: var(--brand); }

/* ══════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.97) translateY(8px);
  transition: transform var(--transition-base);
}

.modal-overlay.active .modal { transform: scale(1) translateY(0); }

.modal-sm { max-width: 420px; }
.modal-md { max-width: 580px; }
.modal-lg { max-width: 780px; }
.modal-xl { max-width: 960px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-title i { color: var(--brand); }

.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: var(--transition-fast);
  border: 1px solid var(--border-normal);
}

.modal-close:hover { background: var(--danger-soft); color: var(--color-danger); border-color: rgba(239,68,68,0.3); }

.modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* .modal-box — inner container usado em precadastro e outros modais inline */
.modal-box {
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.18));
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.97) translateY(8px);
  transition: transform 0.2s ease;
}
.modal-overlay[style*="flex"] .modal-box,
.modal-overlay.active .modal-box {
  transform: scale(1) translateY(0);
}

/* ══════════════════════════════════════════════════════
   DRAWER (painel lateral)
══════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(1px);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.drawer-overlay.active { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 520px;
  max-width: 95vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-normal);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  contain: layout style;
}

.drawer-overlay.active .drawer { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.drawer-footer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  animation: slideInRight 0.25s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}

.toast-success { border-left: 3px solid var(--color-success); }
.toast-error   { border-left: 3px solid var(--color-danger); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-info    { border-left: 3px solid var(--color-info); }

.toast-success .toast-icon { background: var(--success-soft); color: var(--color-success); }
.toast-error   .toast-icon { background: var(--danger-soft);  color: var(--color-danger); }
.toast-warning .toast-icon { background: var(--warning-soft); color: var(--color-warning); }
.toast-info    .toast-icon { background: var(--info-soft);    color: var(--color-info); }

.toast-content { flex: 1; }
.toast-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.toast-msg   { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ══════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-elevated);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-normal);
}

.tab-btn {
  flex: 1;
  padding: 5px var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition-base);
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}

.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-secondary); color: var(--text-primary); box-shadow: var(--shadow-xs); }

/* ══════════════════════════════════════════════════════
   FILTERS BAR
══════════════════════════════════════════════════════ */
.filters-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 36px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}

.filter-group:focus-within {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.filter-group i { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }

.filter-group input,
.filter-group select {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  height: 100%;
}

.filter-group select option { background: #fff; }

/* ══════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-normal);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-normal);
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { background: var(--bg-card); transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--bg-card-hover); }

/* ══════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════ */
.progress-bar {
  width: 100%;
  height: 5px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand-gradient-h);
  transition: width 0.5s ease;
}

/* ══════════════════════════════════════════════════════
   INTERACTION SYSTEM
══════════════════════════════════════════════════════ */
.interaction-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}

.interaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-normal);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  font-family: inherit;
}

.interaction-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.interaction-btn.whatsapp { color: #25D366; border-color: rgba(37,211,102,0.3); }
.interaction-btn.whatsapp:hover { background: #F0FDF4; border-color: rgba(37,211,102,0.5); }

.interaction-btn.call { color: var(--color-info); border-color: rgba(59,130,246,0.3); }
.interaction-btn.call:hover { background: var(--info-soft); border-color: rgba(59,130,246,0.5); }

.interaction-btn.visit { color: var(--brand); border-color: var(--border-brand); }
.interaction-btn.visit:hover { background: var(--brand-soft); }

.interaction-btn.followup { color: var(--color-warning); border-color: rgba(245,158,11,0.3); }
.interaction-btn.followup:hover { background: var(--warning-soft); border-color: rgba(245,158,11,0.5); }

.interaction-btn.cold { color: var(--color-danger); border-color: rgba(239,68,68,0.3); }
.interaction-btn.cold:hover { background: var(--danger-soft); border-color: rgba(239,68,68,0.5); }

/* Timeline de Interações */
.interactions-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.interaction-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  position: relative;
}

.interaction-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}

.interaction-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 2px solid var(--border-normal);
  background: var(--bg-secondary);
}

.interaction-content {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.interaction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.interaction-type {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.interaction-time {
  font-size: 10px;
  color: var(--text-muted);
}

.interaction-agent {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.interaction-obs {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   LEAD LIST VIEW
══════════════════════════════════════════════════════ */
.lead-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lead-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: var(--transition-base);
}

.lead-row:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.lead-row-avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.lead-row-info { flex: 1.5; min-width: 0; }
.lead-row-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row-phone { font-size: 11px; color: var(--text-muted); }

.lead-row-agent {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 120px;
}

.agent-avatar-sm {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.lead-row-temp { flex: 0.8; min-width: 80px; }
.lead-row-status { flex: 1; min-width: 100px; }
.lead-row-last { flex: 1.2; min-width: 120px; }
.lead-row-count { flex: 0.6; min-width: 60px; text-align: center; }
.lead-row-origin { flex: 0.8; min-width: 80px; }
.lead-row-date  { flex: 0.7; min-width: 70px; text-align: right; }
.lead-row-actions { flex-shrink: 0; display: flex; gap: 4px; }

/* ══════════════════════════════════════════════════════
   KANBAN
══════════════════════════════════════════════════════ */
.kanban-board {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  min-height: calc(100vh - 280px);
  align-items: flex-start;
}

.kanban-col {
  min-width: 270px;
  max-width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-top: 3px solid var(--col-color, var(--brand));
  box-shadow: var(--shadow-xs);
}

.kanban-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kanban-col-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-normal);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 80px;
  padding: 4px;
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.kanban-cards.drag-over {
  background: var(--brand-softer);
  outline: 2px dashed var(--border-brand);
}

.lead-card {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: grab;
  transition: var(--transition-base);
  box-shadow: var(--shadow-xs);
}

.lead-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.lead-card:active { cursor: grabbing; }
.lead-card.dragging { opacity: 0.5; transform: scale(0.98); }

.lead-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.lead-card-origin { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.lead-card-priority { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.priority-high   { background: var(--color-danger); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.priority-medium { background: var(--color-warning); }
.priority-low    { background: var(--color-success); }

.lead-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.lead-card-agent { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); }
.lead-card-agent-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; }

/* ══════════════════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  background: var(--bg-elevated);
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-softer);
}

.upload-zone i { font-size: 26px; color: var(--text-muted); margin-bottom: var(--space-2); display: block; }
.upload-zone span { font-size: 13px; color: var(--text-secondary); }
.upload-zone strong { color: var(--brand); }

/* ══════════════════════════════════════════════════════
   DOC ITEMS
══════════════════════════════════════════════════════ */
.doc-list { display: flex; flex-direction: column; gap: var(--space-2); }

.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.doc-item:hover { border-color: var(--border-normal); }
.doc-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.doc-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.doc-size { font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   PIPELINE VISUAL
══════════════════════════════════════════════════════ */
.pipeline-visual {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: var(--space-4) 0;
  gap: 0;
}

.pipeline-step-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 90px;
}

.pipeline-step-content {
  flex: 1;
  text-align: center;
  padding: 0 4px;
}

.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  position: relative; z-index: 1;
  transition: var(--transition-base);
  border: 2px solid var(--border-normal);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: default;
}

.step-circle.done    { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.step-circle.current { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-glow); }

.step-label-text {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.3;
}

.step-label-text.done    { color: var(--color-success); }
.step-label-text.current { color: var(--brand); }

.step-connector-line {
  flex: 1;
  height: 2px;
  background: var(--border-normal);
  margin: 0 -2px;
  position: relative;
  top: -9px;
  transition: background var(--transition-base);
}

.step-connector-line.done { background: var(--color-success); }

/* ══════════════════════════════════════════════════════
   CHART WRAPPER
══════════════════════════════════════════════════════ */
.chart-wrapper { position: relative; width: 100%; }

/* ══════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.empty-state-icon { font-size: 40px; margin-bottom: var(--space-3); opacity: 0.2; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.empty-state p { font-size: 13px; color: var(--text-muted); max-width: 300px; margin: 0 auto var(--space-4); }

/* ══════════════════════════════════════════════════════
   REPORT CARDS
══════════════════════════════════════════════════════ */
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.report-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.report-card-title i { color: var(--brand); }

/* ══════════════════════════════════════════════════════
   AGENT PERFORMANCE ROW
══════════════════════════════════════════════════════ */
.agent-perf-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.agent-perf-row:last-child { border-bottom: none; }
.agent-perf-row:hover { background: var(--bg-card-hover); }

.agent-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}

.rank-1 { background: #FEF3C7; color: #D97706; }
.rank-2 { background: #F1F5F9; color: #64748B; }
.rank-3 { background: #FEF3C7; color: #EA580C; }
.rank-n { background: var(--bg-elevated); color: var(--text-muted); }

.agent-meta { flex: 1.5; min-width: 0; }
.agent-meta-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.agent-meta-role { font-size: 10px; color: var(--text-muted); }

/* Metric pill */
.metric-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.metric-pill-val { font-size: 14px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.metric-pill-label { font-size: 9px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-top: 1px; }

/* ══════════════════════════════════════════════════════
   DIVIDER
══════════════════════════════════════════════════════ */
.divider { height: 1px; background: var(--border-subtle); margin: var(--space-4) 0; }

/* ══════════════════════════════════════════════════════
   FUNIL DE LEADS — BARRA TEMPERATURA + PIPELINE CHIPS
══════════════════════════════════════════════════════ */
.leads-temp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.temp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-normal);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}

.temp-chip:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }

.temp-chip.active {
  background: #0F172A;
  color: #fff;
  border-color: #0F172A;
}

.temp-chip-hot.active   { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.temp-chip-warm.active  { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.temp-chip-cold.active  { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.temp-chip-frozen.active{ background: #F8FAFC; color: #64748B; border-color: var(--border-strong); }

.temp-dot-sm {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.temp-dot-sm.hot    { background: #EF4444; box-shadow: 0 0 0 2px #FEE2E2; }
.temp-dot-sm.warm   { background: #F59E0B; box-shadow: 0 0 0 2px #FEF3C7; }
.temp-dot-sm.cold   { background: #3B82F6; box-shadow: 0 0 0 2px #DBEAFE; }
.temp-dot-sm.frozen { background: #94A3B8; box-shadow: 0 0 0 2px #F1F5F9; }

/* Pipeline chips — por etapa */
.pipeline-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1.5px solid var(--border-normal);
}

.pipeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-card);
  border: 1.5px solid var(--border-normal);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.pipeline-chip:hover {
  background: color-mix(in srgb, var(--chip-color, #64748B) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--chip-color, #64748B) 40%, transparent);
  color: var(--chip-color, #64748B);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.pipeline-chip.active {
  background: color-mix(in srgb, var(--chip-color, #64748B) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--chip-color, #64748B) 55%, transparent);
  color: var(--chip-color, #64748B);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.pipeline-chip-count {
  background: color-mix(in srgb, var(--chip-color, #64748B) 15%, var(--bg-card));
  border-radius: var(--radius-full);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--chip-color, #64748B) 25%, transparent);
}

/* ══════════════════════════════════════════════════════
   LISTAGEM DE LEADS — TABELA PROFISSIONAL
══════════════════════════════════════════════════════ */
.leads-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Cabeçalho */
.leads-table-head {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-normal);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Colunas */
.lt-col               { padding: 0 6px; }
.lt-avatar            { width: 40px; flex-shrink: 0; padding: 0 4px; }
.lt-nome              { flex: 1.6; min-width: 140px; }
.lt-etapa             { flex: 1.5; min-width: 150px; }
.lt-temp              { flex: 0.9; min-width: 75px; }
.lt-resp              { flex: 0.9; min-width: 90px; }
.lt-origem            { flex: 0.8; min-width: 80px; }
.lt-ultima            { flex: 1.4; min-width: 130px; }
.lt-contatos          { flex: 0.5; min-width: 55px; text-align: center; }
.lt-prioridade        { flex: 0.4; min-width: 40px; text-align: center; }
.lt-data              { flex: 0.6; min-width: 60px; font-size: 10px; color: var(--text-muted); }
.lt-actions           { flex-shrink: 0; width: 88px; display: flex; gap: 3px; justify-content: flex-end; }

/* Linhas */
.lead-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-base);
  cursor: default;
}

.lead-row:last-child { border-bottom: none; }
.lead-row:hover { background: var(--bg-card-hover); }

.lead-row--descartado {
  opacity: 0.65;
  background: #FAFAFA;
}

.lead-row--restricao {
  background: #FFFBEB;
}

/* Avatar da linha */
.lead-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  user-select: none;
}

.avatar-temp-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.avatar-temp-dot.hot { background: #EF4444; }

.lead-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-row-phone {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Select de etapa inline */
.etapa-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.etapa-select {
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--etapa-color, #64748B) 10%, white);
  border: 1.5px solid color-mix(in srgb, var(--etapa-color, #64748B) 35%, transparent);
  border-radius: var(--radius-full);
  color: var(--etapa-color, #64748B);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 28px 3px 8px;
  cursor: pointer;
  transition: var(--transition-base);
  outline: none;
  white-space: nowrap;
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etapa-select:hover {
  border-color: var(--etapa-color, #64748B);
  background: color-mix(in srgb, var(--etapa-color, #64748B) 15%, white);
}

.etapa-icon {
  position: absolute;
  right: 8px;
  font-size: 9px;
  pointer-events: none;
}

/* Temperatura badge */
.temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.temp-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.temp-badge-hot    { background: #FEF2F2; color: #DC2626; }
.temp-badge-warm   { background: #FFFBEB; color: #D97706; }
.temp-badge-cold   { background: #EFF6FF; color: #2563EB; }
.temp-badge-frozen { background: #F8FAFC; color: #64748B; border: 1px solid var(--border-normal); }

/* Agente avatar extra-small */
.agent-avatar-xs {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Badge de contatos */
.contact-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Botões de ação rápida */
.action-btn {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  border: 1px solid var(--border-normal);
  background: transparent;
  cursor: pointer;
  transition: var(--transition-base);
  color: var(--text-muted);
  flex-shrink: 0;
}

.action-btn:hover { background: var(--bg-elevated); }

.wpp-btn  { color: #25D366; border-color: rgba(37,211,102,0.3); }
.wpp-btn:hover  { background: rgba(37,211,102,0.1); }

.call-btn { color: #3B82F6; border-color: rgba(59,130,246,0.3); }
.call-btn:hover { background: rgba(59,130,246,0.1); }

.detail-btn { color: var(--brand); border-color: var(--border-brand); }
.detail-btn:hover { background: var(--brand-soft); }

/* ══════════════════════════════════════════════════════
   MODAL DESCARTE
══════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  padding: 20px;
}

.descarte-motivos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.descarte-motivo-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1.5px solid var(--border-normal);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition-base);
  background: var(--bg-card);
}

.descarte-motivo-opt:hover {
  border-color: #FECACA;
  background: #FEF2F2;
  color: #DC2626;
}

.descarte-motivo-opt.selected {
  border-color: #DC2626;
  background: #FEF2F2;
  color: #DC2626;
  font-weight: 700;
}

.descarte-motivo-opt input[type="radio"] { accent-color: #DC2626; cursor: pointer; }

/* ══════════════════════════════════════════════════════
   DRAWER — SEÇÕES
══════════════════════════════════════════════════════ */
.drawer-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.drawer-section:last-child { border-bottom: none; }

.drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-section-title i { font-size: 10px; }

/* ══════════════════════════════════════════════════════
   TOGGLE LISTA / KANBAN
══════════════════════════════════════════════════════ */
.view-toggle-group {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}

.view-toggle-btn:hover { color: var(--text-secondary); background: var(--bg-card); }

.view-toggle-btn.active {
  background: var(--bg-card);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}

/* ══════════════════════════════════════════════════════
   KANBAN BOARD — FUNIL IMOBILIÁRIO
══════════════════════════════════════════════════════ */
.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
  /* scroll suave */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.kanban-board::-webkit-scrollbar { height: 5px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

.kanban-col {
  flex-shrink: 0;
  width: 240px;
  scroll-snap-align: start;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-top: 3px solid var(--col-color, #64748B);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 1px;
}

.kanban-col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kanban-col-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.kanban-cards {
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  min-height: 120px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background var(--transition-base);
}

.kanban-cards.drag-over {
  background: var(--brand-softer);
  border-color: var(--border-brand);
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
}

.kanban-empty-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  color: var(--text-disabled);
  font-size: 10px;
  font-weight: 600;
}

.kanban-empty-col i { font-size: 18px; opacity: 0.3; }

/* Cards Kanban */
.lead-card {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-xs);
  position: relative;
  user-select: none;
}

.lead-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-brand);
  transform: translateY(-1px);
}

.lead-card.dragging {
  opacity: 0.5;
  box-shadow: var(--shadow-xl);
  transform: rotate(1.5deg) scale(1.02);
}

.lead-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.lead-card-priority {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PRÉ-CADASTRO — Módulo Completo
   MYMOBI CRM v2.0
════════════════════════════════════════════════════════════════════ */

/* ── KPIs ────────────────────────────────────────────────────────── */
.pc-kpis-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pc-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-base);
  min-width: 130px;
  border-left: 3px solid transparent;
}
.pc-kpi-card:hover,
.pc-kpi-card.active {
  border-color: var(--kpi-color);
  background: var(--kpi-bg);
}
.pc-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--kpi-bg);
  color: var(--kpi-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.pc-kpi-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.pc-kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* ── TABELA ──────────────────────────────────────────────────────── */
.pc-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.pc-table-head {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 140px 110px 160px 80px;
  padding: 10px 16px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  align-items: center;
}
.pc-table-head span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pc-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 140px 110px 160px 80px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.pc-row:last-child { border-bottom: none; }
.pc-row:hover { background: var(--bg-hover); }

.pc-col-num, .pc-col-cliente, .pc-col-empreend,
.pc-col-corretor, .pc-col-docs, .pc-col-status,
.pc-col-data, .pc-col-acoes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.pc-num-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}
.pc-data-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.pc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 8px;
}

.pc-col-cliente { flex-direction: row; align-items: center; }

.pc-cliente-nome {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-cliente-cpf { font-size: 11px; color: var(--text-muted); }

.pc-empreend-nome {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-empreend-unit { font-size: 10px; color: var(--text-muted); }

.pc-corretor-chip { display: flex; align-items: center; gap: 6px; }
.pc-corretor-ini {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.pc-corretor-chip span {
  font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pc-docs-progress { display: flex; align-items: center; gap: 6px; }
.pc-docs-bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--border-subtle); overflow: hidden; max-width: 60px;
}
.pc-docs-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
.pc-docs-pct { font-size: 11px; font-weight: 700; white-space: nowrap; }

.pc-etapa-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--etapa-color) 12%, transparent);
  color: var(--etapa-color);
  font-size: 10px; font-weight: 700; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ── DETALHE DO PRÉ-CADASTRO ─────────────────────────────────── */
.pc-detalhe-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.pc-breadcrumb { display: flex; align-items: center; gap: 8px; }
.pc-back-btn {
  background: none; border: none; color: var(--brand);
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; transition: var(--transition-base);
}
.pc-back-btn:hover { background: var(--bg-hover); }
.pc-bread-sep { color: var(--text-muted); font-size: 16px; }
.pc-bread-current {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}

.pc-detalhe-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 20px 24px; margin-bottom: 16px;
}
.pc-detalhe-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.pc-detalhe-title {
  font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; line-height: 1.2;
}
.pc-detalhe-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── BARRA DE ETAPAS ─────────────────────────────────────────── */
.pc-stages-bar {
  display: flex; align-items: flex-start; gap: 0;
  overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory;
}
.pc-stages-bar::-webkit-scrollbar { height: 3px; }
.pc-stages-bar::-webkit-scrollbar-thumb { background: var(--border-normal); border-radius: 2px; }

.pc-stage-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; flex-shrink: 0; position: relative;
  padding: 6px 4px 2px; scroll-snap-align: start; min-width: 70px;
  transition: var(--transition-base);
}
.pc-stage-item:hover .pc-stage-dot { transform: scale(1.15); }

.pc-stage-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--border-normal); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; position: relative; z-index: 1;
}
.pc-stage-item.past .pc-stage-dot {
  border-color: var(--s-color);
  background: color-mix(in srgb, var(--s-color) 15%, transparent);
  color: var(--s-color);
}
.pc-stage-item.current .pc-stage-dot {
  border-color: var(--s-color); background: var(--s-color); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-color) 20%, transparent);
}
.pc-stage-label {
  font-size: 9px; font-weight: 600; color: var(--text-muted);
  text-align: center; max-width: 68px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-stage-item.current .pc-stage-label { color: var(--s-color); font-weight: 700; }
.pc-stage-item.past .pc-stage-label { color: var(--text-secondary); }

.pc-stage-connector {
  width: 20px; height: 2px; background: var(--border-normal); margin-top: 20px; flex-shrink: 0;
}

.pc-alert-bloqueio {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-top: 14px;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px; font-size: 12px; color: #DC2626;
}
.pc-alert-bloqueio i { font-size: 14px; flex-shrink: 0; }
.pc-alert-bloqueio div { flex: 1; }

.pc-docs-ok {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-top: 14px;
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25);
  border-radius: 8px; font-size: 12px; color: #059669; font-weight: 600;
}

/* ── LAYOUT MENU LATERAL + CONTEÚDO ─────────────────────────── */
.pc-layout {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 16px; align-items: start;
}
.pc-side-menu {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 80px;
}
.pc-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: none; background: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: var(--transition-base); text-align: left; width: 100%;
}
.pc-menu-item i { font-size: 13px; width: 16px; text-align: center; }
.pc-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.pc-menu-item.active { background: var(--brand-light); color: var(--brand); }
.pc-menu-badge {
  margin-left: auto; background: var(--brand); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 99px; padding: 1px 5px; line-height: 1.4;
}
.pc-menu-badge.warn { background: #F59E0B; }

.pc-content-area {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 20px; min-height: 300px;
}

/* ── SEÇÕES ──────────────────────────────────────────────────── */
.pc-section { margin-bottom: 24px; }
.pc-section:last-child { margin-bottom: 0; }
.pc-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}
.pc-section-title i { color: var(--brand); }

.pc-info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.pc-info-item { display: flex; flex-direction: column; gap: 3px; }
.pc-info-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pc-info-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.pc-obs-box {
  background: var(--bg-hover); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 12px 14px;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}

/* ── DOCUMENTOS ──────────────────────────────────────────────── */
.pc-docs-barra-outer {
  width: 80px; height: 6px; border-radius: 99px;
  background: var(--border-subtle); overflow: hidden;
}
.pc-docs-barra-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }

.pc-docs-alert {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 14px;
  background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.25);
  border-radius: 7px; font-size: 12px; color: #C2410C;
}
.pc-docs-alert i { color: #F97316; }

.pc-docs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.pc-doc-card {
  border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px;
  background: var(--bg-page); transition: var(--transition-base);
  display: flex; flex-direction: column; gap: 8px;
}
.pc-doc-card:hover { border-color: var(--brand); background: var(--bg-card); }
.pc-doc-card.enviado { border-color: rgba(16,185,129,0.3); }
.pc-doc-card.pendente { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.02); }
.pc-doc-card.opcional { border-style: dashed; }

.pc-doc-card-top { display: flex; align-items: flex-start; gap: 10px; }
.pc-doc-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.pc-doc-icon.ok   { background: rgba(16,185,129,0.12); color: #10B981; }
.pc-doc-icon.miss { background: rgba(239,68,68,0.10);  color: #EF4444; }
.pc-doc-icon.opt  { background: var(--bg-hover);        color: var(--text-muted); }

.pc-doc-info { flex: 1; min-width: 0; }
.pc-doc-name {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.pc-doc-obrig {
  font-size: 9px; font-weight: 700;
  background: rgba(239,68,68,0.1); color: #DC2626; padding: 1px 5px; border-radius: 4px;
}
.pc-doc-opcional {
  font-size: 9px; font-weight: 700;
  background: var(--bg-hover); color: var(--text-muted); padding: 1px 5px; border-radius: 4px;
}
.pc-doc-arquivo {
  font-size: 11px; color: var(--brand); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-doc-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.pc-doc-pendente-msg {
  font-size: 11px; color: #F97316; margin-top: 3px; display: flex; align-items: center; gap: 4px;
}
.pc-doc-status-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.pc-doc-card-actions {
  display: flex; gap: 6px; border-top: 1px solid var(--border-subtle); padding-top: 8px;
}

/* ── MENSAGENS ───────────────────────────────────────────────── */
.pc-mensagens-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px; max-height: 320px; overflow-y: auto;
}
.pc-msg-item { background: var(--bg-hover); border-radius: 8px; padding: 10px 12px; }
.pc-msg-de {
  font-size: 11px; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
}
.pc-msg-hora { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.pc-msg-texto { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.pc-msg-form { border-top: 1px solid var(--border-subtle); padding-top: 14px; }

/* ── TIMELINE / HISTÓRICO ────────────────────────────────────── */
.pc-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.pc-timeline::before {
  content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px;
  width: 2px; background: var(--border-normal);
}
.pc-tl-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 8px 0; position: relative;
}
.pc-tl-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border-normal);
  flex-shrink: 0; position: relative; z-index: 1; margin-top: 2px;
}
.pc-tl-body { flex: 1; padding-top: 2px; }
.pc-tl-acao { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.pc-tl-meta {
  font-size: 10px; color: var(--text-muted); margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.pc-aba-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 24px; text-align: center; gap: 8px;
}
.pc-aba-empty i { color: var(--text-muted); }
.pc-aba-empty p { color: var(--text-muted); margin: 0; font-size: 13px; }

/* ── RESPONSIVO ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pc-layout { grid-template-columns: 1fr; }
  .pc-side-menu {
    flex-direction: row; position: static;
    overflow-x: auto; flex-wrap: nowrap;
  }
  .pc-menu-item { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }
  .pc-table-head, .pc-row {
    grid-template-columns: 70px 1fr 120px 90px;
  }
  .pc-col-empreend, .pc-col-data { display: none; }
  .pc-kpis-row { gap: 8px; }
  .pc-kpi-card { min-width: 100px; }
}

/* ═══════════════════════════════════════════════════════════
   ETAPA 3 — SISTEMA DE AÇÕES RÁPIDAS (4 BOTÕES)
═══════════════════════════════════════════════════════════ */

/* Grid dos 4 botões de ação */
.action-btns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

/* Botão individual de ação */
.action-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
}

.action-quick-btn:hover {
  border-color: var(--border-medium);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.action-quick-btn.aqb-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Ícone interno do botão */
.aqb-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: transform 0.15s ease;
}

.action-quick-btn:hover .aqb-icon { transform: scale(1.1); }
.action-quick-btn.aqb-active .aqb-icon { transform: scale(1.08); }

/* Painel inline de ação (drawer action panel) */
.drawer-action-panel {
  margin-top: 10px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  animation: fadeInUp 0.2s ease both;
}

.dap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dap-tipo-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dap-textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 12px;
  resize: none;
  transition: border-color 0.18s;
}

.dap-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   SISTEMA DE TAREFAS — CARDS
═══════════════════════════════════════════════════════════ */

.tarefa-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: box-shadow 0.18s, border-color 0.18s;
}

.tarefa-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-xs);
}

/* Card de tarefa vencida */
.tarefa-card.vencida {
  border-color: rgba(239,68,68,0.35);
  background: #FFF8F8;
}

/* Card de tarefa concluída */
.tarefa-card.concluida {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.tarefa-card-left {
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
  flex-shrink: 0;
}

/* Botão de concluir (círculo vazio) */
.tarefa-check-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  transition: color 0.15s ease, transform 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.tarefa-check-btn:hover {
  border-color: #10B981;
  color: #10B981;
  background: #ECFDF5;
  transform: scale(1.1);
}

.tarefa-card-body { flex: 1; min-width: 0; }

.tarefa-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarefa-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarefa-data {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.tarefa-data.vencida-text { color: #EF4444; font-weight: 600; }

/* Badge "Vencida" inline */
.badge-vencida {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #DC2626;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE UNIFICADA — .tl-item (nova versão)
═══════════════════════════════════════════════════════════ */

.tl-item {
  display: flex;
  gap: 10px;
  padding-bottom: 14px;
  position: relative;
}

/* Linha vertical conectando itens */
.tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}

/* Item de sistema (etapa alterada, descarte, etc) */
.tl-item.tl-system .tl-dot {
  background: var(--bg-subtle) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}

.tl-item.tl-system .tl-tipo { color: var(--text-muted) !important; font-style: italic; }

/* Dot (bolinha) da timeline */
.tl-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease;
}

.tl-item:hover .tl-dot { transform: scale(1.08); }

/* Body da timeline */
.tl-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  padding-bottom: 4px;
}

.tl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.tl-tipo {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tl-time {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.tl-agente {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
}

.tl-obs {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-left: 2px solid var(--border-medium);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px;
  margin-top: 4px;
  line-height: 1.45;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   ELLIPSIS GLOBAL — NOMES E TEXTOS LONGOS
═══════════════════════════════════════════════════════════ */

/* Nomes de leads em tabela */
.lead-name-cell {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: default;
}

.lead-name-cell:hover {
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* Cards no kanban */
.lead-card .lead-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Texto genérico com overflow */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════
   MODAL DE TAREFA (dentro do drawer)
═══════════════════════════════════════════════════════════ */

#modalTarefaOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   PRÉ-CADASTRO v3 — DRAWER LATERAL + TABS + DOC CARDS
═══════════════════════════════════════════════════════════ */

/* Overlay do drawer do PC */
#pcDrawerOverlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#pcDrawerOverlay.active {
  opacity: 1;
  pointer-events: all;
}

#pcDrawerOverlay .drawer {
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
}

#pcDrawerOverlay.active .drawer {
  transform: translateX(0);
}

/* Tabs do drawer PC */
.pc-drawer-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
  flex-shrink: 0;
}

.pc-dtab {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.pc-dtab:hover { color: var(--text-primary); }
.pc-dtab.active { color: var(--brand); border-bottom-color: var(--brand); }
.pc-dtab i { font-size: 11px; }

/* Seções internas do drawer */
.pcd-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.pcd-section:last-child { border-bottom: none; }

.pcd-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Chips de etapa no drawer */
.pcd-stages-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pcd-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  border: 1.5px solid var(--chip-color, #94A3B8);
  color: var(--chip-color, #94A3B8);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.pcd-chip:hover {
  background: color-mix(in srgb, var(--chip-color, #94A3B8) 12%, transparent);
}

.pcd-chip.current {
  background: var(--chip-color, #94A3B8);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-color, #94A3B8) 35%, transparent);
}

.pcd-chip.past {
  background: color-mix(in srgb, var(--chip-color, #94A3B8) 15%, transparent);
  opacity: 0.75;
}

.pcd-chip i { font-size: 9px; }

/* Alerta de bloqueio */
.pcd-alert-block {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Docs OK */
.pcd-docs-ok {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: #065F46;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 16px;
}

/* ── Doc Cards (drawer) ──────────────────────────────────── */
.pc-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: 7px;
  transition: box-shadow 0.15s, border-color 0.15s;
  gap: 8px;
}

.pc-doc-card:hover { box-shadow: var(--shadow-xs); border-color: var(--border-medium); }

.pc-doc-card.enviado  { border-color: rgba(16,185,129,0.35); background: #F0FDF4; }
.pc-doc-card.pendente { border-color: rgba(239,68,68,0.25); }
.pc-doc-card.opcional { border-color: var(--border-subtle); background: var(--bg-subtle); opacity: 0.85; }

.pc-doc-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.pc-doc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pc-doc-card.enviado .pc-doc-icon { background: #ECFDF5; color: #10B981; }

.pc-doc-info { min-width: 0; }

.pc-doc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-doc-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

.pc-doc-card-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── KPIs v3 — Compactos ─────────────────────────────────── */
.pc-kpis-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.pc-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pc-kpi-card:hover {
  border-color: var(--kpi-color, var(--brand));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.pc-kpi-card.active {
  border-color: var(--kpi-color, var(--brand));
  background: color-mix(in srgb, var(--kpi-color, var(--brand)) 8%, var(--bg-card));
}

.pc-kpi-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.pc-kpi-info { min-width: 0; }
.pc-kpi-count { font-size: 18px; font-weight: 800; line-height: 1; }
.pc-kpi-label { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-top: 1px; white-space: nowrap; }

/* ── Tabela PC — Linhas Compactas ────────────────────────── */
.pc-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.pc-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 140px 80px 140px;
  gap: 0;
  padding: 8px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.pc-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 140px 80px 140px;
  gap: 0;
  padding: 8px 16px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.12s;
  min-height: 52px;
}

.pc-row:last-child { border-bottom: none; }
.pc-row:hover { background: var(--bg-hover); }

.pc-col-num  { display: flex; flex-direction: column; gap: 2px; }
.pc-col-cliente { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-col-empreend { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-col-corretor { display: flex; align-items: center; }
.pc-col-docs { display: flex; align-items: center; }
.pc-col-status { display: flex; align-items: center; }

.pc-num-badge  { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.pc-data-sub   { font-size: 10px; color: var(--text-muted); }

.pc-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pc-cliente-info { min-width: 0; }
.pc-cliente-nome {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.pc-cliente-cpf { font-size: 10px; color: var(--text-muted); }

.pc-empreend-nome { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.pc-empreend-unit { font-size: 10px; color: var(--text-muted); }

.pc-corretor-chip { display: flex; align-items: center; gap: 5px; }
.pc-corretor-ini {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  font-size: 9px; font-weight: 700; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.pc-docs-progress { display: flex; align-items: center; gap: 6px; }
.pc-docs-bar { width: 44px; height: 4px; background: var(--bg-subtle); border-radius: 4px; overflow: hidden; }
.pc-docs-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.pc-docs-pct { font-size: 10px; font-weight: 700; }

.pc-etapa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--etapa-color, #94A3B8) 12%, transparent);
  color: var(--etapa-color, #94A3B8);
  border: 1px solid color-mix(in srgb, var(--etapa-color, #94A3B8) 25%, transparent);
  white-space: nowrap;
}

/* Responsividade da tabela */
@media (max-width: 1100px) {
  .pc-table-head,
  .pc-row { grid-template-columns: 70px 1fr 120px 80px 120px; }
  .pc-col-empreend { display: none; }
}

@media (max-width: 768px) {
  .pc-kpis-row { grid-template-columns: repeat(3, 1fr); }
  .pc-table-head,
  .pc-row { grid-template-columns: 60px 1fr 100px; }
  .pc-col-corretor, .pc-col-docs { display: none; }
}

/* PC Drawer — width mais compacto */
#pcDrawerOverlay .drawer {
  width: 480px;
}
#pcDrawerOverlay .drawer-body {
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════
   TIMELINE UNIVERSAL — CRM_TIMELINE (nova arquitetura v2)
   Classes: tl-container, tl-group, tl-date-sep, tl-col-left,
            tl-connector, tl-col-right, tl-stats-row, tl-btn-mais
═══════════════════════════════════════════════════════════ */

/* Container geral */
.tl-container {
  padding: 4px 0 8px 0;
}

/* Dentro do container, desativar o ::before legado (usa .tl-connector agora) */
.tl-container .tl-item:not(:last-child)::before {
  display: none;
}

/* Grupo de eventos por data */
.tl-group {
  margin-bottom: 2px;
}

/* Separador de data */
.tl-date-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px 0;
}

.tl-date-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.tl-date-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Item com layout de 2 colunas */
.tl-container .tl-item {
  display: flex;
  gap: 0;
  padding-bottom: 0;
  align-items: stretch;
  position: relative;
}

/* Coluna esquerda: dot + linha vertical */
.tl-col-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 34px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.tl-col-left .tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-size: 10px;
}

.tl-container .tl-item:hover .tl-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--bg-subtle);
}

/* Linha vertical dentro do col-left */
.tl-connector {
  width: 1.5px;
  flex: 1;
  min-height: 8px;
  background: var(--border-subtle);
  margin-top: 3px;
  border-radius: 1px;
}

/* Coluna direita: conteúdo */
.tl-col-right {
  flex: 1;
  min-width: 0;
  padding: 3px 0 14px 10px;
}

/* Linha superior: tipo + hora */
.tl-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.tl-tipo-label {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-hora {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Linha de agente */
.tl-agente-row {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.tl-agente-row i {
  font-size: 9px;
  opacity: 0.6;
}

/* Card de observação */
.tl-obs-card {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-left: 2.5px solid var(--border-medium);
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  margin-top: 2px;
  line-height: 1.5;
  word-break: break-word;
  transition: border-color 0.15s ease;
}

.tl-container .tl-item:hover .tl-obs-card {
  border-left-color: currentColor;
}

/* Item de sistema — visual mais sutil */
.tl-container .tl-item.tl-system .tl-dot {
  background: var(--bg-subtle) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}

.tl-container .tl-item.tl-system .tl-tipo-label {
  color: var(--text-muted) !important;
  font-weight: 600;
  font-style: italic;
}

/* Estado vazio */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 16px 0;
  color: var(--text-muted);
  gap: 8px;
}

.tl-empty i {
  font-size: 24px;
  opacity: 0.3;
}

.tl-empty p {
  font-size: 12px;
  margin: 0;
}

/* Botão "Ver mais" */
.tl-btn-mais {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.tl-btn-mais:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.tl-btn-mais i {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.tl-btn-mais:hover i {
  transform: translateY(2px);
}

/* ─── Stats row (mini painel de produtividade) ───────────── */
.tl-stats-row {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}

.tl-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  gap: 2px;
  border-right: 1px solid var(--border-subtle);
  transition: background 0.12s ease;
}

.tl-stat:last-child {
  border-right: none;
}

.tl-stat:hover {
  background: var(--bg-subtle);
}

.tl-stat-n {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.tl-stat-l {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   TIMELINE SKELETON — estado de carregamento lazy
═══════════════════════════════════════════════════════════ */

.tl-skeleton {
  padding: 4px 0;
}

.tl-sk-item {
  display: flex;
  gap: 10px;
  padding-bottom: 16px;
  align-items: flex-start;
}

.tl-sk-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  flex-shrink: 0;
  background-image: linear-gradient(90deg,
    var(--bg-subtle) 0%, var(--bg-elevated) 50%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

.tl-sk-lines {
  flex: 1;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-sk-line {
  height: 10px;
  border-radius: 5px;
  background-image: linear-gradient(90deg,
    var(--bg-subtle) 0%, var(--bg-elevated) 50%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

.tl-sk-line.tl-sk-short {
  width: 55%;
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE GLOBAL — Otimizações críticas
═══════════════════════════════════════════════════════════ */

/* Drawer body — conter repaints */
.drawer-body {
  contain: content;
}

/* Lead rows — evitar repaints por hover vizinhos */
.lead-row {
  contain: layout style;
}

/* Kanban cards — GPU layer */
.lead-card {
  will-change: transform;
}

/* Sidebar — isolada do layout principal */
.sidebar {
  contain: layout style paint;
}

/* Toast — isolado */
.toast-container {
  contain: layout style;
  isolation: isolate;
}


/* ═══════════════════════════════════════════════════════════
   CRM-FILTER-BAR — Componente universal de filtros
   Usado em Leads, Pré-Cadastro, Reservas
═══════════════════════════════════════════════════════════ */

.crm-filter-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-normal);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 0 transparent;
  contain: layout style;
}

/* Row principal */
.cfb-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  flex-wrap: wrap;
  background: var(--bg-card);
}

/* Campo de busca */
.cfb-search {
  position: relative;
  min-width: 210px;
  flex: 1.2;
  max-width: 290px;
}

.cfb-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}

.cfb-input {
  width: 100%;
  padding: 8px 11px 8px 32px;
  border: 1.5px solid var(--border-normal);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.cfb-input:focus {
  border-color: var(--brand);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(0,168,107,.1);
}

.cfb-input::placeholder {
  color: var(--text-muted);
  font-size: 12.5px;
}

/* Grupo de selects */
.cfb-selects {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

.cfb-select {
  padding: 7px 28px 7px 11px;
  border: 1.5px solid var(--border-normal);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.4;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background 0.15s;
  min-width: 130px;
}

.cfb-select:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.cfb-select:focus {
  border-color: var(--brand);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(0,168,107,.1);
}

.cfb-select option {
  background: var(--bg-card);
  color: var(--text);
}

/* Campo de data */
.cfb-date {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s;
}

.cfb-date:focus {
  border-color: var(--brand);
}

/* Ações */
.cfb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Botão "Mais filtros" */
.cfb-btn-more {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.cfb-btn-more:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb, 99,102,241),.05);
}

.cfb-btn-more.active {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb, 99,102,241),.08);
}

/* Botão limpar */
.cfb-btn-clear {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 7px;
  background: transparent;
  color: #EF4444;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.cfb-btn-clear:hover {
  background: rgba(239,68,68,.08);
  border-color: #EF4444;
}

/* Badge de contagem */
.cfb-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(0,168,107,.08);
  border: 1.5px solid rgba(0,168,107,.2);
  border-radius: 20px;
  letter-spacing: .01em;
}

/* Toggle lista/kanban */
.cfb-view-toggle {
  display: flex;
  border: 1.5px solid var(--border-normal);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.cfb-vt-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1.5px solid var(--border-normal);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.cfb-vt-btn:last-child {
  border-right: none;
}

.cfb-vt-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.cfb-vt-btn.active {
  background: var(--brand);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

/* Painel avançado (colapsável) */
.cfb-advanced {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
  animation: cfbAdvIn 0.18s ease;
}

@keyframes cfbAdvIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cfb-adv-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cfb-adv-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════
   PC KANBAN BOARD
═══════════════════════════════════════════════════════════ */

.pc-kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  min-height: 480px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pc-kanban-board::-webkit-scrollbar {
  height: 5px;
}

.pc-kanban-board::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* Coluna */
.pkb-col {
  min-width: 230px;
  max-width: 250px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header da coluna */
.pkb-col-header {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-top: 3px solid var(--pkb-color, var(--brand));
  min-height: 44px;
}

.pkb-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.pkb-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.pkb-col-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

/* Cards dentro da coluna */
.pkb-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  max-height: 70vh;
  scrollbar-width: thin;
}

.pkb-empty {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
  opacity: .6;
}

/* Card individual */
.pkb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px 8px;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
  will-change: transform;
}

.pkb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  border-color: var(--brand);
}

.pkb-card--bloq {
  border-left: 3px solid #F59E0B;
}

.pkb-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.pkb-card-nome {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}

.pkb-card-lock {
  font-size: 10px;
  color: #F59E0B;
  flex-shrink: 0;
}

.pkb-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pkb-card-corretor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.pkb-card-data {
  flex-shrink: 0;
  font-size: 10.5px;
}

/* Barra de progresso de docs */
.pkb-docs-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.pkb-docs-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.pkb-docs-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   NOVA AVALIAÇÃO — Checklist visual de docs pendentes
═══════════════════════════════════════════════════════════ */

.nova-aval-checklist {
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.nova-aval-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nova-aval-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  padding: 4px 0;
}

.nova-aval-item.done {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: .65;
}

.nova-aval-item .nav-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  flex-shrink: 0;
  color: transparent;
}

.nova-aval-item.done .nav-dot {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
}

.nova-aval-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}

.nova-aval-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.nova-aval-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
  transition: width 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════
   ETAPA 3 — UPLOAD PREMIUM + DOC CARDS + PREVIEW MODAL
═══════════════════════════════════════════════════════════ */

/* ── Docs header com barra de progresso ─────────────────── */
.pcd-docs-header {
  margin-bottom: 16px;
}

.pcd-docs-progress-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcd-docs-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcd-docs-progress-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.pcd-docs-progress-frac {
  font-size: 12px;
  font-weight: 700;
}

.pcd-docs-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.pcd-docs-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.pcd-docs-ok-banner {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #10B981;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── Drop Zone ──────────────────────────────────────────── */
.doc-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 16px;
  background: var(--bg);
}

.doc-drop-zone:hover {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb,99,102,241),.03);
}

.doc-drop-zone--active {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb,99,102,241),.06);
  transform: scale(1.01);
}

.doc-drop-zone-icon {
  font-size: 24px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.doc-drop-zone--active .doc-drop-zone-icon {
  color: var(--brand);
}

.doc-drop-zone-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.doc-drop-zone-text span {
  font-weight: 400;
  color: var(--text-muted);
}

.doc-drop-zone-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Docs Grid ──────────────────────────────────────────── */
.pcd-docs-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Doc Card Premium ───────────────────────────────────── */
.pcd-doc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  contain: layout style;
}

.pcd-doc-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.pcd-doc-card--sent {
  border-left: 3px solid var(--brand);
}

/* File type icon */
.pcd-doc-ficon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.pcd-doc-ficon--pdf {
  background: rgba(239,68,68,.1);
  color: #EF4444;
}

.pcd-doc-ficon--img {
  background: rgba(59,130,246,.1);
  color: #3B82F6;
}

.pcd-doc-ficon--none {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px dashed var(--border);
}

/* Body */
.pcd-doc-body {
  flex: 1;
  min-width: 0;
}

.pcd-doc-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.pcd-doc-filename {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  margin-bottom: 2px;
}

.pcd-doc-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pcd-doc-meta--pending {
  color: #F59E0B;
  font-style: italic;
  font-size: 11px;
}

.pcd-doc-meta--opcional {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
  opacity: .6;
}

.pcd-doc-sep {
  color: var(--border);
}

/* Status badge */
.pcd-doc-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Doc action buttons */
.pcd-doc-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pcd-doc-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.14s;
  padding: 0;
}

.pcd-doc-btn--upload {
  width: auto;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  gap: 5px;
  border-color: var(--brand);
  color: var(--brand);
}

.pcd-doc-btn--upload:hover { background: var(--brand); color: #fff; }
.pcd-doc-btn--eye          { color: var(--text-muted); }
.pcd-doc-btn--eye:hover    { background: var(--bg); color: var(--brand); border-color: var(--brand); }
.pcd-doc-btn--reup         { color: var(--text-muted); }
.pcd-doc-btn--reup:hover   { background: #FFFBEB; color: #F59E0B; border-color: #F59E0B; }
.pcd-doc-btn--ok           { color: var(--text-muted); }
.pcd-doc-btn--ok:hover     { background: #ECFDF5; color: #10B981; border-color: #10B981; }
.pcd-doc-btn--nok          { color: var(--text-muted); }
.pcd-doc-btn--nok:hover    { background: #FEF2F2; color: #EF4444; border-color: #EF4444; }


/* ── Preview Modal ──────────────────────────────────────── */
.doc-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9900;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 24px;
}

.doc-preview-overlay--open {
  opacity: 1;
}

.doc-preview-box {
  background: var(--bg-card);
  border-radius: 14px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  transform: translateY(8px);
  transition: transform 0.2s ease;
}

.doc-preview-overlay--open .doc-preview-box {
  transform: translateY(0);
}

.doc-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.doc-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-preview-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.doc-preview-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.14s;
}

.doc-preview-close:hover {
  background: #FEF2F2;
  color: #EF4444;
  border-color: #EF4444;
}

.doc-preview-body {
  flex: 1;
  overflow: hidden;
  background: var(--bg);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-preview-iframe {
  width: 100%;
  height: 70vh;
  border: none;
}

.doc-preview-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.doc-preview-nofile {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}

.doc-preview-nofile i {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  opacity: .4;
}

.doc-preview-nofile p {
  font-size: 13px;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   QUICK-ACTION BAR — Drawer Pré-Cadastro
═══════════════════════════════════════════════════════════ */

.pcd-quick-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  overflow: visible;
}

.pcd-qb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}

.pcd-qb-btn i {
  font-size: 14px;
}

.pcd-qb-btn:hover {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

.pcd-qb-btn:active {
  transform: scale(.95);
}

/* Dropdown de etapas */
.pcd-qb-etapa-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 200;
  padding: 4px;
  animation: cfbAdvIn 0.15s ease;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pcd-etapa-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.pcd-etapa-opt:hover {
  background: var(--bg);
}

.pcd-etapa-opt--active {
  font-weight: 700;
  color: var(--ec, var(--brand));
}

.pcd-etapa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ec, var(--brand));
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 4 — PREMIUM CONTEXTUAL SIDEBAR
   Drawer com navegação lateral + área de conteúdo contextual
   Inspiração: Linear, HubSpot, Notion, Salesforce moderno
═══════════════════════════════════════════════════════════════════ */

/* ── Widen drawer for sidebar layout ───────────────────────── */
.drawer { width: 720px; }
#pcDrawerOverlay .drawer { width: 720px; }

/* ── Drawer Layout Principal ───────────────────────────────── */
.drawer-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Left Navigation (Sidenav) ─────────────────────────────── */
.drawer-sidenav {
  width: 182px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 20px;
  scrollbar-width: none;
}
.drawer-sidenav::-webkit-scrollbar { display: none; }

.drawer-sidenav-group {
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.drawer-sidenav-group + .drawer-sidenav-group {
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
}

.drawer-sidenav-grouplabel {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 2px 14px 4px;
  display: block;
}

.drawer-sidenav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  margin: 1px 6px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  transition: background 0.1s ease, color 0.1s ease;
  user-select: none;
  text-decoration: none;
}
.drawer-sidenav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.drawer-sidenav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.drawer-sidenav-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}
.drawer-sidenav-item i {
  width: 15px;
  text-align: center;
  font-size: 11.5px;
  flex-shrink: 0;
  opacity: 0.8;
}
.drawer-sidenav-item.active i { opacity: 1; }
.dsn-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.dsn-badge {
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
  flex-shrink: 0;
}
.drawer-sidenav-item.active .dsn-badge {
  background: var(--brand);
}
.dsn-badge.warn { background: #F59E0B; }
.dsn-badge.danger { background: #EF4444; }
.dsn-badge.success { background: #10B981; }

/* ── Right Content Area ────────────────────────────────────── */
.drawer-content-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-normal) transparent;
  min-width: 0;
}
.drawer-content-area::-webkit-scrollbar { width: 4px; }
.drawer-content-area::-webkit-scrollbar-track { background: transparent; }
.drawer-content-area::-webkit-scrollbar-thumb { background: var(--border-normal); border-radius: 2px; }

/* ── Content Section Header ───────────────────────────────── */
.dca-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.dca-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.dca-title i {
  color: var(--brand);
  font-size: 12px;
}
.dca-header-actions {
  display: flex;
  gap: 6px;
}

/* ── Info Grid ────────────────────────────────────────────── */
.dca-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.dca-info-item {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
}
.dca-info-item.full { grid-column: span 2; }
.dca-info-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.dca-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.dca-info-value.brand { color: var(--brand); font-weight: 700; }

/* ── Form row inside info section ────────────────────────── */
.dca-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.dca-form-row.single { grid-template-columns: 1fr; }
.dca-form-group label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* ── Link Cards (Vinculação Universal) ───────────────────── */
.dca-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  margin-bottom: 7px;
  background: var(--bg-card);
}
.dca-link-card:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dca-link-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dca-link-card-body { flex: 1; min-width: 0; }
.dca-link-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dca-link-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dca-link-card-arrow {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Journey / Cross-entity Timeline ─────────────────────── */
.dca-journey {
  position: relative;
  padding-left: 22px;
  margin-top: 4px;
}
.dca-journey::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand) 0%, var(--border-subtle) 100%);
  border-radius: 2px;
}
.dca-journey-event {
  position: relative;
  margin-bottom: 10px;
}
.dca-journey-event::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--brand);
}
.dca-journey-event.system::before {
  background: var(--text-muted);
  box-shadow: 0 0 0 1.5px var(--text-muted);
}
.dca-journey-event.success::before {
  background: #10B981;
  box-shadow: 0 0 0 1.5px #10B981;
}
.dca-journey-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}
.dca-journey-chip .jc-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.dca-journey-chip .jc-text { flex: 1; min-width: 0; }
.dca-journey-chip .jc-main {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dca-journey-chip .jc-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}
.dca-journey-chip .jc-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Empty State ─────────────────────────────────────────── */
.dca-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted);
}
.dca-empty i {
  font-size: 26px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.35;
}
.dca-empty-text { font-size: 12px; line-height: 1.6; }

/* ── Quick Action Bar ─────────────────────────────────────── */
.dca-action-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dca-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-normal);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.12s;
}
.dca-action-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.dca-action-btn.btn-wa:hover { border-color:#25D366; color:#25D366; background:#F0FDF4; }
.dca-action-btn.btn-call:hover { border-color:#3B82F6; color:#3B82F6; background:#EFF6FF; }
.dca-action-btn.btn-task:hover { border-color:#8B5CF6; color:#8B5CF6; background:#F5F3FF; }
.dca-action-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.dca-action-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* ── Interaction inline panel ────────────────────────────── */
.dca-inline-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  animation: fadeSlideDown 0.15s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Task items ──────────────────────────────────────────── */
.dca-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  margin-bottom: 5px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: border-color 0.1s;
}
.dca-task-item:hover { border-color: var(--border-normal); }
.dca-task-check {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--border-normal);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  transition: all 0.12s;
  background: #fff;
}
.dca-task-check:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dca-task-check.done { border-color: #10B981; background: #10B981; color: #fff; }
.dca-task-body { flex: 1; min-width: 0; }
.dca-task-title {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}
.dca-task-title.done { text-decoration: line-through; color: var(--text-muted); }
.dca-task-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ── Checklist ───────────────────────────────────────────── */
.dca-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.dca-checklist-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.dca-checklist-icon.done  { background: #ECFDF5; color: #10B981; }
.dca-checklist-icon.pend  { background: #FEF2F2; color: #EF4444; }
.dca-checklist-icon.warn  { background: #FFFBEB; color: #F59E0B; }
.dca-checklist-icon.info  { background: #EFF6FF; color: #3B82F6; }
.dca-checklist-label { flex: 1; font-size: 12.5px; color: var(--text-primary); }
.dca-checklist-label.done { text-decoration: line-through; color: var(--text-muted); }
.dca-checklist-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }

/* ── Upload Zone ─────────────────────────────────────────── */
.dca-upload-zone {
  border: 2px dashed var(--border-normal);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 14px;
}
.dca-upload-zone:hover { border-color: var(--brand); background: var(--brand-soft); }
.dca-upload-zone i { font-size: 22px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.dca-upload-zone p { font-size: 11.5px; color: var(--text-muted); margin: 0; }

/* ── Document card ───────────────────────────────────────── */
.dca-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: 5px;
}
.dca-doc-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dca-doc-icon.pdf { background: #FEF2F2; color: #EF4444; }
.dca-doc-icon.img { background: #EFF6FF; color: #3B82F6; }
.dca-doc-icon.gen { background: var(--bg-secondary); color: var(--text-muted); }
.dca-doc-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dca-doc-meta { font-size: 10px; color: var(--text-muted); }

/* ── Financeiro cards ─────────────────────────────────────── */
.dca-fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.dca-fin-card {
  background: var(--bg-secondary);
  border-radius: 9px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  text-align: center;
}
.dca-fin-card.full { grid-column: span 2; }
.dca-fin-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; }
.dca-fin-value { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.dca-fin-value.green { color: #10B981; }
.dca-fin-value.brand { color: var(--brand); }

/* ── Seção divider dentro do conteúdo ───────────────────── */
.dca-section-divider {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Interaction history item ────────────────────────────── */
.dca-interaction-item {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bg-secondary);
  border-left: 2px solid var(--border-normal);
}
.dca-int-dot {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.dca-int-body { flex: 1; min-width: 0; }
.dca-int-header { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 2px; }
.dca-int-type { font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.dca-int-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.dca-int-obs { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.dca-int-agent { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 800px) {
  .drawer, #pcDrawerOverlay .drawer { width: 100vw; max-width: 100vw; }
  .drawer-sidenav { width: 50px; }
  .dsn-label { display: none; }
  .dsn-badge { display: none; }
  .drawer-sidenav-grouplabel { display: none; }
  .drawer-sidenav-item { justify-content: center; padding: 8px; margin: 1px 3px; }
  .drawer-sidenav-item i { width: auto; font-size: 13px; }
  .drawer-sidenav-item.active::before { left: -3px; width: 2px; }
}


/* ════════════════════════════════════════════════════════════
   ETAPA 5 — LINHA DE VIDA + ENTITY CARDS (CRM_JOURNEY)
   MYMOBI CRM — Jornada Universal do Cliente
════════════════════════════════════════════════════════════ */

/* ── LINHA DE VIDA — Container ──────────────────────────── */
.jv-linha {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

/* ── STEP base ───────────────────────────────────────────── */
.jv-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 10px 4px;
  position: relative;
}

/* Linha vertical conectando steps */
.jv-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: -2px;
  width: 2px;
  background: var(--border-subtle);
  z-index: 0;
}
.jv-step.done:not(:last-child)::after {
  background: var(--brand);
  opacity: 0.25;
}

/* ── STEP ICON ───────────────────────────────────────────── */
.jv-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  border: 2px solid;
  position: relative;
  z-index: 1;
  transition: box-shadow .2s, background .2s;
}

.jv-step.done .jv-step-icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.jv-step.current .jv-step-icon {
  background: var(--bg-primary);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
  animation: jv-pulse 2s ease-in-out infinite;
}
.jv-step.pending .jv-step-icon {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-muted);
  border-style: dashed;
}

@keyframes jv-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--brand-soft); }
  50%       { box-shadow: 0 0 0 6px rgba(0,168,107,.08); }
}

/* ── STEP BODY ───────────────────────────────────────────── */
.jv-step-body {
  flex: 1;
  padding-top: 5px;
  min-width: 0;
}
.jv-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.jv-step.pending .jv-step-label {
  color: var(--text-muted);
  font-weight: 500;
}
.jv-step-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.jv-step-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jv-step.done .jv-step-sub {
  color: var(--text-muted);
}

/* ── ENTITY CARD — Premium ───────────────────────────────── */
.jv-entity-card {
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  padding: 13px 14px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .12s;
  background: var(--bg-primary);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.jv-entity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 11px 0 0 11px;
  transition: opacity .15s;
  opacity: 0;
}
.jv-entity-lead::before   { background: #3B82F6; }
.jv-entity-pc::before     { background: #00A86B; }
.jv-entity-reserva::before { background: #F97316; }

.jv-entity-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  border-color: var(--border-color);
  transform: translateY(-1px);
}
.jv-entity-card:hover::before {
  opacity: 1;
}
.jv-entity-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── EC HEADER ───────────────────────────────────────────── */
.jv-ec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.jv-ec-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.5px;
}
.jv-ec-info {
  flex: 1;
  min-width: 0;
}
.jv-ec-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.jv-ec-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jv-ec-arrow {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.jv-entity-card:hover .jv-ec-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ── EC BADGES ───────────────────────────────────────────── */
.jv-ec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 9px;
}
.jv-ec-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* ── EC PROGRESS ─────────────────────────────────────────── */
.jv-ec-progress {
  margin-top: 5px;
}

/* ── SECTION HEADER com badge cross-entity ───────────────── */
.jv-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.jv-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.jv-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.jv-section-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── DIVIDER com label ───────────────────────────────────── */
.jv-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.jv-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ════════════════════════════════════════════════════════════
   OMNIBOX GLOBAL — Busca Universal Premium (ETAPA 6)
   Inspirado em: Linear · Raycast · Notion · Slack
════════════════════════════════════════════════════════════ */

/* ── Overlay ──────────────────────────────────────────────── */
.omnibox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.omnibox-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Modal container ──────────────────────────────────────── */
.omnibox-modal {
  background: #FFFFFF;
  border: 1px solid var(--border-normal);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.05),
    0 8px 32px rgba(15,23,42,0.14),
    0 24px 64px rgba(15,23,42,0.10);
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  contain: layout style;
}
.omnibox-overlay.active .omnibox-modal {
  transform: scale(1) translateY(0);
}

/* ── Search Bar ───────────────────────────────────────────── */
.omnibox-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--border-subtle);
  background: #FAFBFC;
}
.omnibox-search-icon-wrap {
  width: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.omnibox-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.omnibox-input::placeholder {
  color: var(--text-muted);
}
.omnibox-kbd-esc {
  flex-shrink: 0;
  padding: 2px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

/* ── Results Wrap ─────────────────────────────────────────── */
.omnibox-results-wrap {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.omnibox-results-wrap::-webkit-scrollbar { width: 4px; }
.omnibox-results-wrap::-webkit-scrollbar-thumb {
  background: var(--border-normal);
  border-radius: 4px;
}

/* ── Group ────────────────────────────────────────────────── */
.omnibox-group {
  padding: 6px 0 2px;
}
.omnibox-group + .omnibox-group {
  border-top: 1px solid var(--border-subtle);
}
.omnibox-group-label {
  padding: 6px 16px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Item ─────────────────────────────────────────────────── */
.omnibox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-radius: 0;
}
.omnibox-item:hover,
.omnibox-item.selected {
  background: var(--brand-softer);
}
.omnibox-item.selected .omnibox-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Avatar ───────────────────────────────────────────────── */
.omnibox-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ── Item Body ────────────────────────────────────────────── */
.omnibox-item-body {
  flex: 1;
  min-width: 0;
}
.omnibox-item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.omnibox-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ── Badges e Meta ────────────────────────────────────────── */
.omnibox-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.omnibox-sep {
  color: var(--text-disabled);
  font-size: 10px;
  flex-shrink: 0;
}
.omnibox-meta-resp {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.omnibox-meta-extra {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.omnibox-temp {
  font-size: 12px;
  margin-right: 3px;
}

/* ── Arrow ────────────────────────────────────────────────── */
.omnibox-item-arrow {
  flex-shrink: 0;
  color: var(--brand);
  font-size: 11px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.omnibox-item:hover .omnibox-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Empty State ──────────────────────────────────────────── */
.omnibox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.omnibox-empty i {
  font-size: 22px;
  opacity: 0.4;
}

/* ── Footer ───────────────────────────────────────────────── */
.omnibox-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: nowrap;
}
.omnibox-hint {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.omnibox-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #FFFFFF;
  border: 1px solid var(--border-normal);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.omnibox-hint-brand {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.omnibox-hint-brand i { font-size: 9px; }


/* ════════════════════════════════════════════════════════════
   FILTROS DE DATA — Date Preset Select + Range Picker
   + Placeholder "Tarefas em Evolução"
════════════════════════════════════════════════════════════ */

/* ── Date preset select — visual diferenciado ─────────────── */
.cfb-select-date {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cfb-select-date:not([value=""]) option:checked,
.cfb-select-date[data-active="true"] {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Quando um preset está ativo — highlight no select */
select.cfb-select-date.has-filter {
  background-color: var(--brand-soft);
  border-color: var(--border-brand);
  color: var(--brand);
  font-weight: 600;
}

/* ── Date range inline (preset custom) ───────────────────── */
.cfb-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.cfb-date-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cfb-date {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-normal);
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background: var(--bg-input);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
  min-width: 130px;
}
.cfb-date:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-glow);
}
.cfb-date-sep {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* ── cfb-advanced com date range ─────────────────────────── */
.cfb-advanced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* ── Placeholder "Tarefas em Evolução" ───────────────────── */
.dca-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 4px;
}



/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION CENTER — Drawer Lateral Premium
   Inspirado em Linear, Slack, HubSpot
═══════════════════════════════════════════════════════════════ */

/* ── OVERLAY ─────────────────────────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0);
  transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.notif-overlay.active {
  display: flex;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

/* ── DRAWER ──────────────────────────────────────────────────── */
.notif-drawer {
  width: 400px;
  max-width: 100vw;
  height: 100%;
  background: var(--bg-secondary);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14), -1px 0 0 var(--border-normal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 290ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  contain: layout style;
}
.notif-drawer.open {
  transform: translateX(0);
}

/* ── HEADER ──────────────────────────────────────────────────── */
.notif-drawer-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-normal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.notif-drawer-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-drawer-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.notif-drawer-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.notif-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}
.notif-drawer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notif-mark-all-btn,
.notif-close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.notif-mark-all-btn:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--border-brand);
}
.notif-close-btn:hover {
  background: var(--danger-soft);
  color: var(--color-danger);
  border-color: transparent;
}

/* ── LIST ────────────────────────────────────────────────────── */
.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ── CARD ────────────────────────────────────────────────────── */
.notif-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.notif-card:hover {
  background: var(--brand-softer);
  box-shadow: var(--shadow-sm);
}
.notif-card.read {
  opacity: 0.62;
  background: var(--bg-primary);
  border-left-color: transparent !important;
}
.notif-card.read:hover {
  opacity: 0.85;
  background: var(--bg-elevated);
}

/* ── PRIORIDADE — borda esquerda colorida ────────────────────── */
.notif-card.pri-high   { border-left-color: var(--color-danger);  }
.notif-card.pri-medium { border-left-color: var(--color-warning); }
.notif-card.pri-low    { border-left-color: var(--border-normal); }

/* ── ICON WRAP ───────────────────────────────────────────────── */
.notif-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* ── BODY ────────────────────────────────────────────────────── */
.notif-body {
  flex: 1;
  min-width: 0;
}
.notif-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.notif-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.notif-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
  word-break: break-word;
}

/* ── ACTION BUTTON ───────────────────────────────────────────── */
.notif-actions { margin-top: -2px; }
.notif-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
  line-height: 1;
}
.notif-action-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── UNREAD DOT ──────────────────────────────────────────────── */
.notif-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  border: 2px solid var(--bg-card);
  flex-shrink: 0;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-muted);
}
.notif-empty i {
  font-size: 36px;
  color: var(--color-success);
  opacity: 0.6;
}
.notif-empty p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}
.notif-empty span {
  font-size: 12px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.notif-drawer-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  background: var(--bg-primary);
}
.notif-footer-hint {
  margin-left: auto;
  font-weight: 600;
  color: var(--brand);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ── BELL PULSE ANIMATION ────────────────────────────────────── */
@keyframes bellPulse {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-14deg); }
  40%  { transform: rotate(14deg); }
  60%  { transform: rotate(-8deg); }
  80%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
.notif-bell-pulse i {
  animation: bellPulse 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .notif-drawer { width: 100vw; }
}


/* ═══════════════════════════════════════════════════════════════
   EXECUTIVE DASHBOARD v4.0
   Filter Bar | Funil | Alertas | Activity | Team Table | Shortcuts
   Inspirado em Linear, Stripe, HubSpot
═══════════════════════════════════════════════════════════════ */

/* ── FILTER BAR ──────────────────────────────────────────────── */
.dash-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.dash-filter-select {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-base);
  outline: none;
}
.dash-filter-select:focus,
.dash-filter-select:hover {
  border-color: var(--border-brand);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ── FUNIL DE CONVERSAO ──────────────────────────────────────── */
.dash-funnel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dash-funnel-stage {
  display: flex;
  justify-content: center;
}
.dash-funnel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: var(--transition-base);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.dash-funnel-bar:hover { box-shadow: var(--shadow-sm); }
.dash-funnel-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.dash-funnel-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dash-funnel-val {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.dash-funnel-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 20px;
  justify-content: flex-start;
}
.dash-funnel-conn-line {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  margin-left: 13px;
}
.dash-funnel-conv {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
}

/* ── ALERTAS OPERACIONAIS ────────────────────────────────────── */
.dash-alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--ab, #FEF2F2);
  border: 1px solid color-mix(in srgb, var(--ac, #EF4444) 25%, transparent);
  border-left: 3px solid var(--ac, #EF4444);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: var(--transition-base);
}
.dash-alert-card:last-child { margin-bottom: 0; }
.dash-alert-card:hover { box-shadow: var(--shadow-sm); }
.dash-alert-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ac, #EF4444) 12%, transparent);
  color: var(--ac, #EF4444);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dash-alert-body { flex: 1; min-width: 0; }
.dash-alert-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
}
.dash-alert-desc {
  font-size: 11px;
  color: var(--text-secondary);
}
.dash-alert-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ac, #EF4444);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
  font-family: inherit;
}
.dash-alert-btn:hover { opacity: 0.85; }
.dash-alert-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-success);
  font-size: 13px;
  font-weight: 500;
}
.dash-alert-empty i { font-size: 16px; }

/* ── ATIVIDADE DA EQUIPE ─────────────────────────────────────── */
.dash-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.dash-activity-cell {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-align: center;
  transition: var(--transition-base);
  cursor: default;
}
.dash-activity-cell:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.dash-activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 14px;
}
.dash-activity-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.dash-activity-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 3px;
}

/* ── TEMPERATURA ─────────────────────────────────────────────── */
.dash-temp-cell {
  padding: 12px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.dash-temp-cell:hover {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.dash-temp-emoji { font-size: 18px; margin-bottom: 4px; }
.dash-temp-val   { font-size: 20px; font-weight: 800; line-height: 1; }
.dash-temp-label { font-size: 10px; color: var(--text-secondary); font-weight: 600; margin-top: 2px; }
.dash-temp-pct   { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ── TEAM TABLE ──────────────────────────────────────────────── */
.dash-team-table {
  margin-top: 12px;
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-team-header,
.dash-team-row {
  display: grid;
  grid-template-columns: 180px 64px 64px 120px 60px 80px 80px;
  align-items: center;
}
.dash-team-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-normal);
  padding: 8px 12px;
}
.dash-team-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-base);
}
.dash-team-row:last-child  { border-bottom: none; }
.dash-team-row:hover        { background: var(--brand-softer) !important; }
.dash-team-col {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
.dash-team-col-name {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.dash-team-col-wide { text-align: left; }
.dash-team-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-team-nome {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-team-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dash-team-vendas {
  color: var(--brand);
  background: var(--brand-soft);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ── SHORTCUTS ───────────────────────────────────────────────── */
.dash-shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  font-family: inherit;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.dash-shortcut-btn:hover {
  background: var(--bg-card);
  border-color: var(--sc-color, var(--brand));
  color: var(--text-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-color, var(--brand)) 10%, transparent);
  transform: translateY(-1px);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-team-header,
  .dash-team-row { grid-template-columns: 140px 48px 48px 90px 48px 60px 60px; }
  .dash-team-nome { font-size: 11px; }
}
@media (max-width: 768px) {
  .dash-team-table { display: none; }
  .dash-filter-bar { gap: 6px; }
  .dash-filter-select { font-size: 11px; height: 28px; }
}

/* ============================================================
   EXPORT MODAL — MYMOBI CRM
   Modal premium de exportação profissional
============================================================ */

.export-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.export-modal-box {
  background: var(--bg-card, #ffffff);
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.08);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1), opacity 200ms ease;
  overflow: hidden;
}

.export-modal-box.open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.export-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border, #E2E8F0);
}

.export-modal-title {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.export-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,168,107,0.1);
  color: #00A86B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.export-modal-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}

.export-modal-sub {
  font-size: 0.75rem;
  color: var(--text-muted, #94A3B8);
  margin-top: 1px;
}

.export-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94A3B8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms;
}

.export-modal-close:hover {
  background: var(--bg-hover, #F1F5F9);
  color: var(--text-primary, #0F172A);
}

.export-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.export-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC);
}

/* Tabs de tipo */
.export-type-tabs {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.export-type-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: transparent;
  color: var(--text-secondary, #64748B);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.export-type-tab:hover {
  background: var(--bg-hover, #F1F5F9);
  border-color: var(--border-hover, #CBD5E1);
  color: var(--text-primary, #0F172A);
}

.export-type-tab.active {
  background: rgba(0,168,107,0.08);
  border-color: #00A86B;
  color: #00A86B;
  font-weight: 600;
}

/* Filtros do modal */
.export-filters {
  background: var(--bg-secondary, #F8FAFC);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  padding: 0.875rem 1rem;
}

.export-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.625rem;
}

.export-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.export-filter-label {
  font-size: 0.675rem;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.export-filter-select,
.export-filter-input {
  height: 32px;
  padding: 0 0.625rem;
  border-radius: 7px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: var(--bg-card, #ffffff);
  font-size: 0.75rem;
  color: var(--text-primary, #0F172A);
  outline: none;
  transition: border-color 150ms;
  width: 100%;
}

.export-filter-select:focus,
.export-filter-input:focus {
  border-color: #00A86B;
}

.export-filter-note {
  font-size: 0.775rem;
  color: var(--text-secondary, #64748B);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.export-filter-note i {
  color: #3B82F6;
}

/* Barra de preview e contagem */
.export-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,168,107,0.05);
  border: 1px solid rgba(0,168,107,0.15);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  gap: 1rem;
}

.export-preview-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #00A86B;
}

.export-preview-count i {
  font-size: 0.875rem;
}

.export-format-selector {
  display: flex;
  gap: 0.5rem;
}

.export-fmt-opt {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  border-radius: 7px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: var(--bg-card, #ffffff);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
  cursor: pointer;
  transition: all 150ms;
  user-select: none;
}

.export-fmt-opt input[type=radio] {
  display: none;
}

.export-fmt-opt:hover {
  border-color: #00A86B;
  color: #00A86B;
}

.export-fmt-opt.selected {
  background: rgba(0,168,107,0.08);
  border-color: #00A86B;
  color: #00A86B;
  font-weight: 600;
}

/* Progresso de exportação */
.export-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.775rem;
  color: var(--text-secondary, #64748B);
}

.export-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border, #E2E8F0);
  border-top-color: #00A86B;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ============================================================
   RELATORIOS PAGE v4.0
   Abas + Corujão + Export
============================================================ */

.relatorios-page {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}

.relatorios-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.relatorios-header-left {}

.relatorios-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-primary, #0F172A);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
}

.relatorios-title i {
  color: #00A86B;
}

.relatorios-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted, #94A3B8);
  margin: 0.25rem 0 0 0;
}

/* Tabs */
.relat-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border, #E2E8F0);
  padding-bottom: 0;
}

.relat-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
}

.relat-tab:hover {
  background: var(--bg-hover, #F1F5F9);
  color: var(--text-primary, #0F172A);
}

.relat-tab.active {
  color: #00A86B;
  font-weight: 700;
  border-bottom-color: #00A86B;
  background: rgba(0,168,107,0.04);
}

.relat-tab-corujao.active {
  color: #8B5CF6;
  border-bottom-color: #8B5CF6;
  background: rgba(139,92,246,0.04);
}

.relat-corujao-badge {
  background: #EF4444;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
}

/* Section container */
.relat-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* KPI Row */
.relat-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.875rem;
}

.relat-kpi-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: box-shadow 150ms, transform 150ms;
}

.relat-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}

.relat-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.relat-kpi-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary, #0F172A);
  line-height: 1;
}

.relat-kpi-label {
  font-size: 0.7rem;
  color: var(--text-muted, #94A3B8);
  margin-top: 3px;
  font-weight: 500;
}

/* Cards genéricos */
.relat-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 14px;
  overflow: hidden;
}

.relat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC);
}

.relat-card-title {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.relat-card-title i {
  color: #00A86B;
  font-size: 0.875rem;
}

.relat-card-body {
  padding: 1.25rem;
}

.relat-chart-centered {
  display: flex;
  justify-content: center;
}

/* Layout 2 colunas */
.relat-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .relat-row-2col { grid-template-columns: 1fr; }
}

/* Funil */
.relat-funil {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.relat-funil-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.relat-funil-label-left {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
  width: 60px;
  flex-shrink: 0;
  text-align: right;
}

.relat-funil-bar-wrap {
  flex: 1;
  height: 32px;
  background: var(--bg-hover, #F1F5F9);
  border-radius: 8px;
  overflow: hidden;
}

.relat-funil-bar {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  transition: width 600ms ease;
  min-width: 36px;
}

.relat-funil-bar-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.relat-funil-pct {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  width: 36px;
  flex-shrink: 0;
  text-align: right;
}

.relat-funil-arrow {
  text-align: center;
  padding: 0.1rem 0 0.1rem 70px;
  font-size: 0.625rem;
  color: var(--text-muted, #94A3B8);
  opacity: 0.5;
}

/* Temperatura */
.relat-temp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.relat-temp-cell {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.relat-temp-cell i { font-size: 1.25rem; }

.relat-temp-count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.relat-temp-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
}

.relat-temp-pct {
  font-size: 0.675rem;
  color: var(--text-muted, #94A3B8);
}

/* Tabela de equipe */
.relat-team-table-wrap {
  overflow-x: auto;
}

.relat-team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.relat-team-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.675rem;
  font-weight: 700;
  color: var(--text-muted, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border, #E2E8F0);
}

.relat-team-table td {
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--border, #E2E8F0);
  color: var(--text-primary, #0F172A);
  font-weight: 500;
}

.relat-team-table tr:last-child td { border-bottom: none; }

.relat-team-table tr:hover td { background: var(--bg-hover, #F8FAFC); }

.relat-team-name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.relat-team-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00A86B, #00875A);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.relat-vendas-badge {
  background: rgba(16,185,129,0.1);
  color: #10B981;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.relat-meta-bar-wrap {
  height: 6px;
  background: var(--bg-hover, #F1F5F9);
  border-radius: 3px;
  overflow: hidden;
  width: 80px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.375rem;
}

.relat-meta-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 500ms ease;
}

/* PC / Reserva status bars */
.relat-pc-status {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.relat-pc-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.relat-pc-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
  width: 130px;
  flex-shrink: 0;
}

.relat-pc-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--bg-hover, #F1F5F9);
  border-radius: 4px;
  overflow: hidden;
}

.relat-pc-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 600ms ease;
  min-width: 8px;
}

.relat-pc-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Gargalos */
.relat-gargalos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.relat-gargalo-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  border-radius: 10px;
  background: var(--bg-secondary, #F8FAFC);
  border: 1px solid var(--border, #E2E8F0);
}

.relat-gargalo-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.relat-gargalo-label {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748B);
  font-weight: 500;
}

.relat-gargalo-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.875rem;
  border-radius: 7px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: var(--bg-card, #ffffff);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms;
}

.relat-gargalo-btn:hover {
  border-color: #00A86B;
  color: #00A86B;
}

.relat-ok-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #10B981;
}

.relat-empty {
  color: var(--text-muted, #94A3B8);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem 0;
}

.btn-icon-sm {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: transparent;
  color: var(--text-muted, #94A3B8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 150ms;
}

.btn-icon-sm:hover {
  border-color: #00A86B;
  color: #00A86B;
  background: rgba(0,168,107,0.06);
}

/* ============================================================
   MODO CORUJAO
============================================================ */

.relat-corujao {
  gap: 0;
}

.corujao-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(99,102,241,0.04) 100%);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.corujao-title-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.corujao-owl-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(139,92,246,0.12);
  color: #8B5CF6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}

.corujao-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #8B5CF6;
}

.corujao-sub {
  font-size: 0.775rem;
  color: var(--text-secondary, #64748B);
  margin-top: 2px;
}

.corujao-total-badge {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.775rem;
  font-weight: 700;
  background: rgba(139,92,246,0.1);
  color: #8B5CF6;
  border: 1.5px solid rgba(139,92,246,0.2);
  white-space: nowrap;
}

.corujao-total-badge.has-problems {
  background: rgba(239,68,68,0.08);
  color: #EF4444;
  border-color: rgba(239,68,68,0.2);
}

/* All OK state */
.corujao-all-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
  text-align: center;
}

.corujao-all-ok i {
  font-size: 2.5rem;
  color: #10B981;
}

.corujao-ok-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}

.corujao-ok-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #94A3B8);
}

/* Sections do Corujão */
.corujao-section {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.corujao-section:last-child {
  margin-bottom: 0;
}

.corujao-section-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC);
}

.corujao-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.corujao-section-title {
  font-size: 0.875rem;
  font-weight: 700;
}

.corujao-section-sub {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748B);
  margin-top: 1px;
}

/* Cards do Corujão */
.corujao-cards {
  padding: 0.875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.corujao-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: var(--bg-secondary, #F8FAFC);
  border: 1px solid var(--border, #E2E8F0);
  gap: 1rem;
  transition: box-shadow 150ms;
}

.corujao-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.corujao-card-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.corujao-card-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.675rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.corujao-card-nome {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corujao-card-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corujao-card-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  border: 1.5px solid;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 150ms;
}

.corujao-card-btn:hover {
  filter: brightness(0.92);
}


/* =====================================================================
   CONVERSAS PAGE — Central de Conversas Operacional v1.0
   Layout 3 colunas | Bubbles | Status | Filtros | Contexto
===================================================================== */

/* ── PAGE WRAPPER ──────────────────────────────────────────────────── */
.conversas-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--bg-secondary, #F8FAFC);
}

/* ── TOPBAR ─────────────────────────────────────────────────────────── */
.conv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  flex-shrink: 0;
}
.conv-topbar-left { display: flex; align-items: center; gap: 12px; }
.conv-topbar-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.conv-topbar-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #0F172A); display: block; }
.conv-topbar-sub { font-size: 12px; color: var(--text-muted, #64748B); }
.conv-topbar-right { display: flex; align-items: center; gap: 8px; }
.conv-topbar-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 0 2px rgba(37,211,102,0.2);
}
.conv-topbar-status-label { font-size: 12px; color: #25D366; font-weight: 600; }
.conv-topbar-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-color, #E2E8F0);
  background: #fff; cursor: pointer; color: var(--text-secondary, #475569);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all 0.15s;
}
.conv-topbar-btn:hover { background: var(--bg-secondary, #F8FAFC); color: var(--primary, #00A86B); }

/* ── LAYOUT 3 COLUNAS ──────────────────────────────────────────────── */
.conv-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  height: calc(100% - 64px);
  overflow: hidden;
}

/* ── LISTA PANEL (esquerda) ────────────────────────────────────────── */
.conv-lista-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color, #E2E8F0);
  background: #fff;
  overflow: hidden;
}
.conv-search-wrap {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  flex-shrink: 0;
}
.conv-search-icon {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted, #94A3B8); font-size: 13px;
}
.conv-search-input {
  width: 100%; padding: 8px 12px 8px 32px;
  border: 1px solid var(--border-color, #E2E8F0); border-radius: 8px;
  font-size: 13px; color: var(--text-primary, #0F172A);
  background: var(--bg-secondary, #F8FAFC);
  outline: none; transition: border-color 0.2s;
}
.conv-search-input:focus { border-color: var(--primary, #00A86B); }

/* Filtros */
.conv-filtros {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  flex-shrink: 0; overflow-x: auto;
  scrollbar-width: none;
}
.conv-filtros::-webkit-scrollbar { display: none; }
.conv-filtro-btn {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-color, #E2E8F0);
  background: #fff; font-size: 11px; font-weight: 500; color: var(--text-secondary, #475569);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  display: flex; align-items: center; gap: 4px;
}
.conv-filtro-btn:hover { border-color: var(--primary, #00A86B); color: var(--primary, #00A86B); }
.conv-filtro-btn.active { background: var(--primary, #00A86B); color: #fff; border-color: var(--primary, #00A86B); }
.conv-filtro-count {
  background: rgba(255,255,255,0.3); color: inherit;
  border-radius: 10px; padding: 0 5px; font-size: 10px; font-weight: 700;
}
.conv-filtro-btn.active .conv-filtro-count { background: rgba(255,255,255,0.35); }

/* Lista scrollable */
.conv-lista { flex: 1; overflow-y: auto; }
.conv-lista::-webkit-scrollbar { width: 4px; }
.conv-lista::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

/* Item de conversa */
.conv-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid rgba(226,232,240,0.5);
  position: relative;
}
.conv-item:hover { background: var(--bg-secondary, #F8FAFC); }
.conv-item-active { background: #F0FDF4 !important; }
.conv-item-active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary, #00A86B); border-radius: 0 2px 2px 0;
}
.conv-item-urgent { border-left: 3px solid #EF4444; }
.conv-item-unread .conv-item-nome { font-weight: 700; }
.conv-item-unread .conv-item-msg { color: var(--text-primary, #0F172A); font-weight: 500; }

/* Avatar com temperatura */
.conv-item-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  position: relative;
}
.temp-hot    { background: linear-gradient(135deg, #EF4444, #F97316); }
.temp-warm   { background: linear-gradient(135deg, #F59E0B, #EAB308); }
.temp-cold   { background: linear-gradient(135deg, #3B82F6, #6366F1); }
.temp-frozen { background: linear-gradient(135deg, #94A3B8, #64748B); }

.conv-item-badge {
  position: absolute; top: -3px; right: -3px;
  background: #EF4444; color: #fff;
  font-size: 9px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.conv-item-body { flex: 1; min-width: 0; }
.conv-item-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.conv-item-nome { font-size: 13px; font-weight: 600; color: var(--text-primary, #0F172A); }
.conv-item-hora { font-size: 10px; color: var(--text-muted, #94A3B8); }
.conv-item-row2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.conv-item-msg { font-size: 12px; color: var(--text-secondary, #64748B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.conv-janela-badge { color: #F59E0B; font-size: 10px; }
.conv-item-row3 { display: flex; justify-content: space-between; align-items: center; }
.conv-item-corretor { font-size: 10px; color: var(--text-muted, #94A3B8); }
.conv-item-status { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 10px; }

/* Status colors */
.status-ativa { color: #25D366; background: #F0FDF4; }
.status-aguardando-corretor { color: #EF4444; background: #FEF2F2; }
.status-aguardando-cliente { color: #F59E0B; background: #FFFBEB; }
.status-expirada { color: #94A3B8; background: #F8FAFC; }

.conv-empty { padding: 40px 20px; text-align: center; color: var(--text-muted, #94A3B8); }
.conv-empty i { font-size: 32px; margin-bottom: 8px; display: block; }
.conv-empty p { font-size: 13px; }

/* ── CHAT PANEL (centro) ───────────────────────────────────────────── */
.conv-chat-panel {
  display: flex; flex-direction: column;
  background: #EFEAE2;
  overflow: hidden;
}
.conv-chat-vazio {
  align-items: center; justify-content: center;
  color: var(--text-muted, #94A3B8); flex-direction: column; gap: 12px;
}
.conv-chat-vazio i { font-size: 48px; }
.conv-chat-vazio p { font-size: 14px; }

/* Chat Header */
.conv-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #fff;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  flex-shrink: 0; z-index: 1;
}
.conv-chat-header-left { display: flex; align-items: center; gap: 12px; }
.conv-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.conv-chat-nome { font-size: 14px; font-weight: 700; color: var(--text-primary, #0F172A); }
.conv-chat-meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.conv-chat-tel, .conv-chat-etapa { font-size: 11px; color: var(--text-muted, #64748B); }
.conv-janela-ativa { font-size: 11px; color: #25D366; font-weight: 600; }
.conv-janela-exp   { font-size: 11px; color: #94A3B8; }
.conv-chat-header-right { display: flex; align-items: center; gap: 4px; }
.conv-header-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-color, #E2E8F0);
  background: #fff; cursor: pointer; color: var(--text-secondary, #475569);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all 0.15s;
}
.conv-header-btn:hover { background: var(--bg-secondary, #F8FAFC); color: var(--primary, #00A86B); }

/* Área de mensagens */
.conv-mensagens {
  flex: 1; overflow-y: auto; padding: 12px 10%;
  display: flex; flex-direction: column; gap: 2px;
  background-color: #EAE6DF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23C0AFA0' stroke-width='0.4' opacity='.35'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23C0AFA0' stroke-width='0.3' opacity='.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23p)'/%3E%3C/svg%3E");
}
.conv-mensagens::-webkit-scrollbar { width: 4px; }
.conv-mensagens::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* Mensagem sistema */
.msg-sistema {
  display: flex; align-items: center; gap: 6px;
  align-self: center; margin: 8px 0;
  background: rgba(255,255,255,0.85); border-radius: 12px;
  padding: 6px 14px; font-size: 11px; color: #64748B;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.msg-sistema i { color: #94A3B8; }
.msg-sistema-hora { color: #94A3B8; font-size: 10px; }

/* Wrappers */
.msg-wrapper { display: flex; margin-bottom: 2px; }
.msg-esquerda { justify-content: flex-start; }
.msg-direita  { justify-content: flex-end; }

/* Bubbles */
.msg-bubble {
  max-width: 72%; min-width: 80px;
  padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}
.msg-bubble-cliente {
  background: #fff;
  border-radius: 0px 12px 12px 12px;
}
.msg-bubble-corretor {
  background: #DCF8C6;
  border-radius: 12px 0px 12px 12px;
}

.msg-texto {
  font-size: 13.5px; color: #1A1A2E; line-height: 1.5;
  margin: 0 0 2px 0; word-break: break-word;
}

.msg-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 3px; margin-top: 2px;
}
.msg-hora { font-size: 10px; color: #94A3B8; }
.msg-status-icon { font-size: 11px; color: #94A3B8; }
.msg-status-lida { color: #53BDEB; }

/* Áudio */
.msg-audio {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; min-width: 200px;
}
.msg-audio-play {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary, #00A86B); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  flex-shrink: 0;
}
.msg-audio-wave { display: flex; align-items: center; gap: 2px; flex: 1; }
.msg-audio-bar {
  width: 3px; border-radius: 2px;
  background: var(--primary, #00A86B); opacity: 0.6;
}
.msg-audio-bar:nth-child(1) { height: 8px; }
.msg-audio-bar:nth-child(2) { height: 14px; }
.msg-audio-bar:nth-child(3) { height: 20px; }
.msg-audio-bar:nth-child(4) { height: 12px; }
.msg-audio-bar:nth-child(5) { height: 18px; }
.msg-audio-bar:nth-child(6) { height: 10px; }
.msg-audio-bar:nth-child(7) { height: 22px; }
.msg-audio-bar:nth-child(8) { height: 16px; }
.msg-audio-bar:nth-child(9) { height: 8px; }
.msg-audio-dur { font-size: 11px; color: #64748B; }

/* Imagem */
.msg-imagem {
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
}
.msg-imagem-thumb {
  width: 180px; height: 120px; border-radius: 8px;
  background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
  display: flex; align-items: center; justify-content: center;
  color: #94A3B8; font-size: 32px;
}
.msg-imagem-label { font-size: 11px; color: #64748B; }

/* Documento */
.msg-documento {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; min-width: 200px;
}
.msg-doc-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #FEF2F2; color: #EF4444;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0;
}
.msg-doc-info { flex: 1; min-width: 0; }
.msg-doc-nome { font-size: 12px; font-weight: 600; color: var(--text-primary, #0F172A); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-doc-size { font-size: 10px; color: #94A3B8; }
.msg-doc-dl {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border-color, #E2E8F0); background: #fff;
  cursor: pointer; color: var(--text-muted, #64748B);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}

/* ── INPUT BAR ──────────────────────────────────────────────────────── */
.conv-input-bar {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; background: #F0F2F5;
  border-top: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.conv-input-actions { display: flex; gap: 2px; align-items: center; }
.conv-input-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer;
  color: #8696A0; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.conv-input-btn:hover { color: #3B4A54; }
.conv-input-wrap { flex: 1; }
.conv-input-textarea {
  width: 100%; min-height: 40px; max-height: 120px;
  padding: 10px 14px; border-radius: 20px;
  border: none; outline: none; resize: none;
  font-size: 13.5px; line-height: 1.5;
  font-family: inherit; background: #fff;
  color: var(--text-primary, #0F172A);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.conv-send-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--primary, #00A86B); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; transition: all 0.15s; flex-shrink: 0;
}
.conv-send-btn:hover { background: #009960; transform: scale(1.05); }

/* Janela expirada */
.conv-input-expirada {
  flex-direction: column; align-items: stretch; gap: 10px;
  background: #FFFBEB; border-top: 2px solid #F59E0B;
}
.conv-expirada-msg {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #92400E;
}
.conv-expirada-msg i { color: #F59E0B; font-size: 14px; }
.conv-template-btn { align-self: flex-end; }

/* ── CONTEXTO PANEL (direita) ──────────────────────────────────────── */
.conv-contexto-panel {
  border-left: 1px solid var(--border-color, #E2E8F0);
  background: #fff; overflow-y: auto;
}
.conv-contexto-panel::-webkit-scrollbar { width: 4px; }
.conv-contexto-panel::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

.conv-ctx-section { border-bottom: 1px solid var(--border-color, #E2E8F0); padding: 16px; }
.conv-ctx-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, #94A3B8);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.conv-ctx-card { }
.conv-ctx-avatar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.conv-ctx-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.conv-ctx-nome { font-size: 14px; font-weight: 700; color: var(--text-primary, #0F172A); }
.conv-ctx-tel { font-size: 12px; color: var(--text-muted, #64748B); }
.conv-ctx-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.conv-ctx-pill {
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 12px; border: 1px solid transparent;
}
.pill-temp-hot    { background: #FEF2F2; color: #EF4444; border-color: #FCA5A5; }
.pill-temp-warm   { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.pill-temp-cold   { background: #EFF6FF; color: #3B82F6; border-color: #BFDBFE; }
.pill-temp-frozen { background: #F8FAFC; color: #64748B; border-color: #CBD5E1; }
.pill-origem { background: #F5F3FF; color: #7C3AED; border-color: #DDD6FE; }
.pill-tag { background: #ECFDF5; color: #065F46; border-color: #6EE7B7; }

.conv-ctx-rows { display: flex; flex-direction: column; gap: 6px; }
.conv-ctx-row { display: flex; justify-content: space-between; align-items: center; }
.ctx-label { font-size: 11px; color: var(--text-muted, #94A3B8); }
.ctx-val { font-size: 12px; font-weight: 600; color: var(--text-primary, #0F172A); }
.ctx-link { color: var(--primary, #00A86B); cursor: pointer; }
.ctx-link:hover { text-decoration: underline; }

/* Ações rápidas */
.conv-ctx-acoes {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.conv-ctx-acao-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 10px;
  border: 1px solid var(--border-color, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary, #475569);
}
.conv-ctx-acao-btn:hover { border-color: var(--primary, #00A86B); color: var(--primary, #00A86B); background: #F0FDF4; }
.conv-ctx-acao-btn i { font-size: 16px; }
.conv-ctx-acao-btn span { font-size: 10px; font-weight: 600; }
.conv-ctx-acao-red:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }

/* Timeline no contexto */
.conv-ctx-timeline { display: flex; flex-direction: column; gap: 0; }
.conv-ctx-timeline-item { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.conv-ctx-timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 24px; bottom: -8px;
  width: 1px; background: var(--border-color, #E2E8F0);
}
.conv-ctx-tl-dot {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary, #00A86B); margin-top: 3px;
  border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,168,107,0.2);
}
.conv-ctx-tl-body { flex: 1; min-width: 0; }
.conv-ctx-tl-agente { font-size: 11px; font-weight: 600; color: var(--text-primary, #0F172A); display: block; }
.conv-ctx-tl-obs { font-size: 11px; color: var(--text-secondary, #475569); display: block; line-height: 1.4; }
.conv-ctx-tl-hora { font-size: 10px; color: var(--text-muted, #94A3B8); display: block; margin-top: 2px; }
.conv-ctx-empty { font-size: 12px; color: var(--text-muted, #94A3B8); text-align: center; padding: 8px 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .conv-layout { grid-template-columns: 280px 1fr 280px; }
}
@media (max-width: 900px) {
  .conv-layout { grid-template-columns: 260px 1fr; }
  .conv-contexto-panel { display: none; }
}
@media (max-width: 640px) {
  .conv-layout { grid-template-columns: 1fr; }
  .conv-lista-panel { display: none; }
  .conv-lista-panel.mobile-open { display: flex; position: fixed; inset: 0; z-index: 100; }
}

/* =======================================================================
   ETAPA 10.1 — HUB OPERACIONAL: DRAWERS + CTX MELHORADO
   ======================================================================= */

/* ── Drawer Overlay ─────────────────────────────────────────────── */
.conv-drawer-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.45);
  opacity: 0; transition: opacity 0.25s ease;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.conv-drawer-overlay.active { opacity: 1; }
.conv-drawer-overlay.active .conv-drawer { transform: translateX(0); }

.conv-drawer {
  width: 360px; max-width: 92vw;
  background: var(--bg-card, #fff);
  border-left: 1px solid var(--border-color, #E2E8F0);
  border-radius: 16px 0 0 16px;
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

/* ── Drawer Header ──────────────────────────────────────────────── */
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC);
}
.drawer-titulo {
  font-size: 15px; font-weight: 700; color: var(--text-primary, #0F172A);
  display: flex; align-items: center; gap: 8px;
}
.drawer-titulo i { color: var(--primary, #00A86B); }
.drawer-fechar {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-muted, #94A3B8);
  cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.drawer-fechar:hover { background: var(--border-color,#E2E8F0); color: var(--text-primary,#0F172A); }

/* ── Drawer Body ────────────────────────────────────────────────── */
.drawer-body {
  flex: 1; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.drawer-form-group { display: flex; flex-direction: column; gap: 5px; }
.drawer-form-group label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary, #475569);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.drawer-input {
  padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--border-color, #E2E8F0);
  background: var(--bg-secondary, #F8FAFC);
  font-size: 13.5px; color: var(--text-primary, #0F172A);
  font-family: inherit; width: 100%; box-sizing: border-box;
  transition: border-color 0.15s;
}
.drawer-input:focus {
  outline: none; border-color: var(--primary, #00A86B);
  background: #fff; box-shadow: 0 0 0 3px rgba(0,168,107,0.1);
}
.drawer-input:disabled { opacity: 0.5; cursor: not-allowed; }
.drawer-textarea { resize: vertical; min-height: 72px; }

.drawer-info-box {
  padding: 10px 14px; border-radius: 8px;
  background: #EFF6FF; border: 1px solid #BFDBFE;
  font-size: 13px; color: #1E40AF;
  display: flex; align-items: flex-start; gap: 8px;
}
.drawer-info-box i { margin-top: 2px; flex-shrink: 0; }
.drawer-info-danger {
  background: #FEF2F2; border-color: #FECACA; color: #991B1B;
}

/* ── Drawer Footer ──────────────────────────────────────────────── */
.drawer-footer {
  padding: 14px 20px; border-top: 1px solid var(--border-color, #E2E8F0);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--bg-secondary, #F8FAFC);
}
.drawer-btn-cancel {
  padding: 9px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--border-color, #E2E8F0);
  background: var(--bg-card, #fff); color: var(--text-secondary, #475569);
  cursor: pointer; transition: all 0.15s;
}
.drawer-btn-cancel:hover { border-color: #CBD5E1; background: var(--bg-secondary,#F8FAFC); }
.drawer-btn-save {
  padding: 9px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 7px;
  background: var(--primary, #00A86B); color: #fff;
}
.drawer-btn-save:hover { background: var(--primary-dark, #007A4E); }
.btn-descartar-save { background: #EF4444; }
.btn-descartar-save:hover { background: #DC2626; }

/* ── CTX Cabecalho ──────────────────────────────────────────────── */
.ctx-cabecalho {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ctx-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary,#00A86B), #00C47E);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,168,107,0.3);
}
.ctx-lead-nome { font-size: 15px; font-weight: 700; color: var(--text-primary,#0F172A); text-align: center; }
.ctx-lead-tel  { font-size: 12px; color: var(--text-muted,#94A3B8); }

/* Temperature Pills */
.ctx-temp-pills {
  display: flex; gap: 6px; margin-top: 4px;
}
.ctx-temp-pill {
  padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; transition: all 0.15s;
  opacity: 0.55;
}
.ctx-temp-pill:hover { opacity: 1; transform: scale(1.04); }
.ctx-temp-pill.active { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.temp-pill-hot        { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.temp-pill-hot.active { background: #DC2626; color: #fff;    border-color: #DC2626; }
.temp-pill-warm        { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.temp-pill-warm.active { background: #D97706; color: #fff;    border-color: #D97706; }
.temp-pill-cold        { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.temp-pill-cold.active { background: #2563EB; color: #fff;    border-color: #2563EB; }

.ctx-pills-info {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 2px;
}
.ctx-pill-info {
  padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 500;
  background: var(--bg-secondary,#F8FAFC); color: var(--text-secondary,#475569);
  border: 1px solid var(--border-color,#E2E8F0);
  display: inline-flex; align-items: center; gap: 4px;
}
.ctx-pill-info i { font-size: 9px; color: var(--primary,#00A86B); }

/* ── CTX Etapa Bloco ────────────────────────────────────────────── */
.ctx-etapa-bloco {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  display: flex; flex-direction: column; gap: 10px;
}
.ctx-field-group { display: flex; flex-direction: column; gap: 4px; }
.ctx-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted,#94A3B8);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 5px;
}
.ctx-label i { color: var(--primary,#00A86B); }
.ctx-select {
  padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid var(--border-color, #E2E8F0);
  background: var(--bg-secondary,#F8FAFC);
  font-size: 13px; color: var(--text-primary,#0F172A);
  font-family: inherit; width: 100%; cursor: pointer;
  transition: border-color 0.15s;
}
.ctx-select:focus { outline: none; border-color: var(--primary,#00A86B); box-shadow: 0 0 0 3px rgba(0,168,107,0.1); }

/* ── CTX Ações ──────────────────────────────────────────────────── */
.ctx-acoes-bloco {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}
.ctx-acoes-titulo {
  font-size: 11px; font-weight: 600; color: var(--text-muted,#94A3B8);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}
.ctx-acoes-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px;
}
.ctx-acao-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: 10px;
  border: 1.5px solid var(--border-color, #E2E8F0);
  background: var(--bg-secondary,#F8FAFC); cursor: pointer;
  transition: all 0.15s; color: var(--text-secondary,#475569);
}
.ctx-acao-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ctx-acao-btn i    { font-size: 16px; }
.ctx-acao-btn span { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.2; }
.btn-visita:hover      { border-color: #10B981; color: #10B981; background: #F0FDF4; }
.btn-precadastro:hover { border-color: #3B82F6; color: #3B82F6; background: #EFF6FF; }
.btn-proposta:hover    { border-color: #8B5CF6; color: #8B5CF6; background: #F5F3FF; }
.btn-tarefa:hover      { border-color: #F97316; color: #F97316; background: #FFF7ED; }
.btn-transferir:hover  { border-color: #F59E0B; color: #F59E0B; background: #FFFBEB; }
.btn-descartar:hover   { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }

/* ── CTX Timeline ───────────────────────────────────────────────── */
.ctx-timeline-bloco {
  padding: 14px 16px; flex: 1; overflow-y: auto;
}
.ctx-timeline-titulo {
  font-size: 11px; font-weight: 600; color: var(--text-muted,#94A3B8);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.ctx-timeline { display: flex; flex-direction: column; gap: 0; }
.ctx-tl-item { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.ctx-tl-item:not(:last-child)::after {
  content: ''; position: absolute; left: 10px; top: 26px; bottom: 0;
  width: 1px; background: var(--border-color,#E2E8F0);
}
.ctx-tl-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px;
  border: 2px solid var(--bg-card,#fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.ctx-tl-corpo { flex: 1; min-width: 0; }
.ctx-tl-texto { font-size: 12.5px; color: var(--text-primary,#0F172A); line-height: 1.4; }
.ctx-tl-hora  { font-size: 11px; color: var(--text-muted,#94A3B8); margin-top: 2px; }
.ctx-tl-vazio { font-size: 12px; color: var(--text-muted,#94A3B8); text-align: center; padding: 16px 0; }

/* =======================================================================
   HOTFIX 10.1-A — Remapeia class names v2.0 + corrige layout/visual
   Classe .conversas-page é nova e envolve todo o módulo
   ======================================================================= */

/* ── Container raiz ─────────────────────────────────────────────── */
.conversas-page {
  height: 100%;
  position: relative;   /* ancora o drawer overlay */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.conversas-page .conv-layout {
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* ── Lista — header novo ────────────────────────────────────────── */
.conv-lista-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}
.conv-lista-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}
.conv-lista-titulo i {
  color: #25D366;
  font-size: 16px;
}
.conv-badge-total {
  margin-left: auto;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.6;
}
.conv-filtros {
  padding: 0 12px 8px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.conv-busca {
  position: relative;
  padding: 0 12px 10px;
}
.conv-busca i {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-58%);
  color: var(--text-muted, #94A3B8);
  font-size: 12px;
  pointer-events: none;
}
.conv-busca input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px 7px 30px;
  border: 1.5px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-primary, #0F172A);
  background: var(--bg-secondary, #F8FAFC);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
.conv-busca input:focus {
  border-color: var(--primary, #00A86B);
  background: #fff;
}

/* ── Lista — itens scrollable ───────────────────────────────────── */
.conv-lista-itens {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}
.conv-lista-itens::-webkit-scrollbar { width: 4px; }
.conv-lista-itens::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

/* ── Item de conversa — rows v2.0 ───────────────────────────────── */
.conv-item.active {
  background: #F0FDF4 !important;
}
.conv-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary, #00A86B);
  border-radius: 0 2px 2px 0;
}
.conv-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.conv-item-mid {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.conv-item-etapa {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, #94A3B8);
  background: var(--bg-secondary, #F8FAFC);
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #E2E8F0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.conv-nao-lidas {
  margin-left: auto;
  background: #00A86B;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.conv-item-preview {
  font-size: 12px;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Status dot no avatar */
.conv-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.dot-aguardando { background: #EF4444; }
.dot-ativa      { background: #25D366; }

.conv-janela-badge {
  color: #F59E0B;
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Empty state na lista ───────────────────────────────────────── */
.conv-lista-vazia {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted, #94A3B8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.conv-lista-vazia i { font-size: 28px; opacity: 0.5; }
.conv-lista-vazia p { font-size: 12.5px; margin: 0; }

/* ── Chat panel — garante crescimento correto ───────────────────── */
.conv-chat-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;          /* evita esmagamento no grid */
  min-height: 0;         /* permite que flex shrink funcione */
  height: 100%;          /* preenche a célula do grid */
  overflow: hidden;
}

/* ── Chat header v2.0 ───────────────────────────────────────────── */
.conv-chat-lead-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #00A86B), #00C47E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.chat-lead-dados {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chat-lead-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-lead-tel {
  font-size: 11.5px;
  color: var(--text-muted, #94A3B8);
}
.conv-chat-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.chat-janela-ativa {
  font-size: 10.5px;
  color: #25D366;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #F0FDF4;
  border-radius: 12px;
  border: 1px solid #BBF7D0;
  white-space: nowrap;
}
.chat-janela-expirada {
  font-size: 10.5px;
  color: #94A3B8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  white-space: nowrap;
}
.conv-chat-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #E2E8F0);
  background: #fff;
  cursor: pointer;
  color: var(--text-secondary, #475569);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
}
.conv-chat-btn:hover {
  background: var(--bg-secondary, #F8FAFC);
  color: var(--primary, #00A86B);
  border-color: var(--primary, #00A86B);
}

/* ── Mensagens v2.0 ─────────────────────────────────────────────── */
.msg-data-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 6px;
}
.msg-data-sep span {
  font-size: 10.5px;
  color: #64748B;
  background: rgba(255,255,255,0.85);
  padding: 3px 12px;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* conv-msg é o wrapper de linha */
.conv-msg {
  display: flex;
  margin-bottom: 2px;
}
.msg-cliente  { justify-content: flex-start; }
.msg-corretor { justify-content: flex-end; }

/* Bubble base */
.msg-bubble {
  max-width: 65%;
  min-width: 72px;
  padding: 6px 10px 4px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  position: relative;
  word-break: break-word;
}

/* Bubble cliente (esquerda) — branco com seta */
.msg-cliente .msg-bubble {
  background: #fff;
  border-radius: 0 8px 8px 8px;
}
.msg-cliente .msg-bubble::before {
  content: '';
  position: absolute;
  top: 0; left: -8px;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

/* Bubble corretor (direita) — verde WhatsApp com seta */
.msg-corretor .msg-bubble {
  background: #D9FDD3;
  border-radius: 8px 0 8px 8px;
}
.msg-corretor .msg-bubble::before {
  content: '';
  position: absolute;
  top: 0; right: -8px;
  border-width: 0 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #D9FDD3;
}

/* Texto dentro da bolha */
.msg-texto {
  font-size: 14px;
  color: #111;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* meta = hora + status, alinhado à direita dentro da bolha */
.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 1px;
  float: right;
  margin-left: 8px;
  position: relative;
  bottom: -2px;
}
.msg-hora {
  font-size: 11px;
  color: #667781;
}
.msg-status {
  font-size: 13px;
  color: #94A3B8;
}
.msg-status .lida { color: #53BDEB; }

/* Separador de data — estilo WhatsApp */
.msg-data-sep {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.msg-data-sep span {
  background: #D1F4CC;
  color: #54656F;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ── MÍDIA: áudio, imagem, vídeo, documento, sticker ─────────────── */

/* ÁUDIO */
.msg-audio-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  max-width: 300px;
}
.msg-audio-mic {
  font-size: 18px;
  color: #667781;
  flex-shrink: 0;
}
.msg-audio-player {
  flex: 1;
  height: 36px;
  outline: none;
  border-radius: 20px;
  min-width: 0;
}
.msg-audio-player::-webkit-media-controls-panel {
  background: transparent;
}
.msg-audio-label {
  font-size: 13px;
  color: #111;
}

/* IMAGEM */
.msg-imagem-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  max-width: 280px;
}
.msg-imagem-thumb {
  width: 100%;
  max-width: 280px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  display: block;
}
.msg-imagem-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 120px;
  background: #f1f3f4;
  border-radius: 6px;
  font-size: 32px;
  color: #94A3B8;
}

/* VÍDEO */
.msg-video-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 300px;
}
.msg-video-player {
  width: 100%;
  max-height: 240px;
  border-radius: 6px;
  display: block;
}
.msg-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 140px;
  background: #f1f3f4;
  border-radius: 6px;
  font-size: 32px;
  color: #94A3B8;
}

/* DOCUMENTO */
.msg-doc-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 280px;
  padding: 2px 0;
}
.msg-doc-icon-area {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E3F2FD;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-doc-icon-area .fa-file-pdf { color: #E53935; font-size: 18px; }
.msg-doc-icon-area .fa-file-word { color: #1565C0; font-size: 18px; }
.msg-doc-icon-area .fa-file-excel { color: #2E7D32; font-size: 18px; }
.msg-doc-icon-area .fa-file-alt,
.msg-doc-icon-area .fa-file-archive,
.msg-doc-icon-area .fa-file-audio,
.msg-doc-icon-area .fa-file-video { color: #5E35B1; font-size: 18px; }
.msg-doc-info {
  flex: 1;
  min-width: 0;
}
.msg-doc-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-doc-type {
  display: block;
  font-size: 11px;
  color: #94A3B8;
}
.msg-doc-download {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  flex-shrink: 0;
  transition: background .15s;
}
.msg-doc-download:hover { background: #C8E6C9; }

/* STICKER */
.msg-sticker-wrap {
  min-width: 80px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-sticker-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
}

/* LOCALIZAÇÃO */
.msg-location {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.msg-location-link {
  font-size: 12px;
  color: #25D366;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}

/* Caption (legenda de imagem/vídeo) */
.msg-caption {
  font-size: 13px;
  color: #111;
  line-height: 1.4;
  padding-top: 4px;
}

/* Status ticks — azul quando lida */
.msg-status-lida { color: #53BDEB !important; }
.msg-status-enviando { color: #94A3B8 !important; }
.msg-status-falha { color: #EF4444 !important; }

/* ── Botão "Nova mensagem ↓" (smart scroll) ──────────────────────── */
.new-msg-scroll-btn {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, transform .15s;
  animation: slideUpBtn .2s ease;
}
.new-msg-scroll-btn.new-msg-client { background: #128C7E; }
.new-msg-scroll-btn:hover { background: #128C7E; transform: translateX(-50%) translateY(-2px); }
@keyframes slideUpBtn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.new-msg-count {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 12px;
}

/* Legado — manter compatibilidade com código antigo */
.msg-imagem  { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.msg-imagem i { font-size: 28px; color: #94A3B8; }
.msg-documento { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.msg-audio    { display: flex; align-items: center; gap: 8px; min-width: 180px; }

/* ── Compose wrap — ancora o composer e o templates panel ────────── */
.conv-compose-wrap {
  flex-shrink: 0;        /* nunca encolhe dentro do flex column do chat */
  position: relative;    /* âncora para o .conv-templates-panel absolute */
  background: #F0F2F5;
  z-index: 2;
}

/* ── Input area v2.0 ────────────────────────────────────────────── */
.conv-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F0F2F5;
  border-top: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}
.conv-input-wrapper {
  flex: 1;
  min-width: 0;
}
.conv-input-wrapper input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: none;
  outline: none;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary, #0F172A);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.conv-input-wrapper input:disabled {
  background: #F8FAFC;
  color: #94A3B8;
  cursor: not-allowed;
}
.conv-input-area .conv-input-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #8696A0;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  flex-shrink: 0;
}
.conv-input-area .conv-input-btn:hover { color: #3B4A54; }
.conv-input-area .conv-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary, #00A86B);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.conv-input-area .conv-send-btn:hover {
  background: #009960;
  transform: scale(1.06);
}
.conv-input-area .conv-send-btn:disabled {
  background: #CBD5E1;
  transform: none;
  cursor: not-allowed;
}

/* ── Painel direito — largura e espaçamento ─────────────────────── */
.conv-contexto-panel {
  width: 300px;
  min-width: 260px;
  max-width: 320px;
}
@media (max-width: 1300px) {
  .conversas-page .conv-layout {
    grid-template-columns: 290px 1fr 280px;
  }
}
@media (max-width: 1100px) {
  .conversas-page .conv-layout {
    grid-template-columns: 260px 1fr 260px;
  }
}
@media (max-width: 900px) {
  .conversas-page .conv-layout {
    grid-template-columns: 240px 1fr;
  }
  .conv-contexto-panel { display: none !important; }
}
@media (max-width: 640px) {
  .conversas-page .conv-layout {
    grid-template-columns: 1fr;
  }
  .conv-lista-panel { display: none; }
}

/* ── CTX — tamanho grid layout corrigido ────────────────────────── */
.conversas-page .conv-layout {
  grid-template-columns: 300px 1fr 290px;
}


/* ── Drawer save button variants ────────────────────────────────── */
.btn-visita-save    { background: #10B981; }
.btn-visita-save:hover    { background: #059669; }
.btn-pc-save        { background: #3B82F6; }
.btn-pc-save:hover        { background: #2563EB; }
.btn-proposta-save  { background: #8B5CF6; }
.btn-proposta-save:hover  { background: #7C3AED; }
.btn-tarefa-save    { background: #F97316; }
.btn-tarefa-save:hover    { background: #EA580C; }
.btn-transferir-save { background: #F59E0B; }
.btn-transferir-save:hover { background: #D97706; }


/* ════════════════════════════════════════════════════════════════════
   TIMELINE ENGINE — Mini Timeline (Central de Conversas + Painéis)
   Adicionado em ETAPA 10.2
════════════════════════════════════════════════════════════════════ */

/* ── Mini lista ──────────────────────────────────────────────────── */
.tl-mini-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-mini-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
  transition: background 0.15s;
}
.tl-mini-item:last-child { border-bottom: none; }
.tl-mini-item:hover { background: var(--bg-hover, #F8FAFC); }

/* Entrada animada — append-only */
.tl-mini-item--entrando {
  opacity: 0;
  transform: translateY(-4px);
}
.tl-mini-item:not(.tl-mini-item--entrando) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s, transform 0.25s;
}

/* ── Dot do evento ──────────────────────────────────────────────── */
.tl-mini-dot {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 1px;
}

/* ── Corpo do item ──────────────────────────────────────────────── */
.tl-mini-body {
  flex: 1;
  min-width: 0;
}

.tl-mini-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1E293B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tl-mini-desc {
  font-size: 11px;
  color: var(--text-muted, #64748B);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tl-mini-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.tl-mini-hora {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  font-variant-numeric: tabular-nums;
}

.tl-mini-agente {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  display: flex;
  align-items: center;
  gap: 3px;
}
.tl-mini-agente i { font-size: 9px; }

.tl-mini-cat-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.8;
}

/* ── Estado vazio ──────────────────────────────────────────────── */
.tl-mini-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  gap: 8px;
  color: var(--text-muted, #94A3B8);
  text-align: center;
}
.tl-mini-empty i {
  font-size: 20px;
  opacity: 0.5;
}
.tl-mini-empty span {
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   TIMELINE ENGINE — Full Timeline (Painéis detalhados / Leads)
════════════════════════════════════════════════════════════════════ */

.tl-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Grupo por data ─────────────────────────────────────────────── */
.tl-group {
  display: flex;
  flex-direction: column;
}

.tl-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}
.tl-date-line {
  flex: 1;
  height: 1px;
  background: var(--border-color, #E2E8F0);
}
.tl-date-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
  padding: 2px 8px;
  background: var(--bg-secondary, #F8FAFC);
  border-radius: 12px;
}

/* ── Item full ──────────────────────────────────────────────────── */
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 12px;
  position: relative;
}

.tl-col-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  flex-shrink: 0;
}

.tl-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 1;
  margin-top: 10px;
}

.tl-connector {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: var(--border-color, #E2E8F0);
  margin: 2px 0;
}

.tl-col-right {
  flex: 1;
  min-width: 0;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
}
.tl-last .tl-col-right { border-bottom: none; }

.tl-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.tl-tipo-label {
  font-size: 12px;
  font-weight: 700;
}

.tl-hora {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tl-agente-row {
  font-size: 11px;
  color: var(--text-muted, #64748B);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.tl-agente-row i { font-size: 10px; color: #94A3B8; }

.tl-obs-card {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  background: var(--bg-secondary, #F8FAFC);
  border-left: 3px solid #E2E8F0;
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  line-height: 1.5;
  margin-top: 4px;
}

/* Evento de sistema (destaque discreto) */
.tl-system .tl-dot { opacity: 0.7; }
.tl-system .tl-tipo-label { opacity: 0.7; }

/* ── Botão ver mais ─────────────────────────────────────────────── */
.tl-btn-mais {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--primary, #6366F1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-top: 1px solid var(--border-color, #E2E8F0);
  transition: background 0.15s;
  border-radius: 0 0 8px 8px;
}
.tl-btn-mais:hover { background: var(--bg-secondary, #F8FAFC); }
.tl-btn-mais i { font-size: 11px; }

/* ── Estado vazio full ──────────────────────────────────────────── */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  gap: 12px;
  color: var(--text-muted, #94A3B8);
  text-align: center;
}
.tl-empty i {
  font-size: 28px;
  opacity: 0.4;
}
.tl-empty p {
  font-size: 13px;
  margin: 0;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════
   TIMELINE — Stats Row (mini painel de produtividade)
════════════════════════════════════════════════════════════════════ */
.tl-stats-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.tl-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border-color, #E2E8F0);
}
.tl-stat:last-child { border-right: none; }

.tl-stat-n {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #1E293B);
  line-height: 1;
}

.tl-stat-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #94A3B8);
  margin-top: 3px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   TIMELINE — Category Filter Tabs (usado em painéis avançados)
════════════════════════════════════════════════════════════════════ */
.tl-cat-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  overflow-x: auto;
  scrollbar-width: none;
}
.tl-cat-tabs::-webkit-scrollbar { display: none; }

.tl-cat-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
  background: var(--bg-secondary, #F8FAFC);
  color: var(--text-muted, #64748B);
}
.tl-cat-tab i { font-size: 9px; }
.tl-cat-tab.active {
  background: var(--primary, #6366F1);
  color: #fff;
  border-color: transparent;
}
.tl-cat-tab:hover:not(.active) {
  background: var(--bg-hover, #F1F5F9);
  border-color: var(--border-color, #E2E8F0);
}


/* ════════════════════════════════════════════════════════════════════
   SLA ENGINE — Componentes visuais operacionais
   Adicionado em ETAPA 10.3
════════════════════════════════════════════════════════════════════ */

/* ── PRIORITY QUEUE — container principal ───────────────────────── */
.sla-queue-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.sla-queue-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sla-queue-titulo i { color: #EF4444; }

.sla-queue-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sla-last-update {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  margin-left: auto;
}

/* ── CONTAGEM BADGES ─────────────────────────────────────────────── */
.sla-count-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sla-badge-critica { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.sla-badge-alta    { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.sla-badge-media   { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.sla-badge-baixa   { background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }

/* ── LISTA DE ALERTAS ────────────────────────────────────────────── */
.sla-alert-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── ITEM DE ALERTA ──────────────────────────────────────────────── */
.sla-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
  transition: background 0.15s;
  cursor: default;
}
.sla-alert-item:last-child { border-bottom: none; }
.sla-alert-item:hover { background: var(--bg-hover, #F8FAFC); }

/* Destaque por prioridade */
.sla-alert-item.sla-prio-critica { border-left: 3px solid #EF4444; }
.sla-alert-item.sla-prio-alta    { border-left: 3px solid #F59E0B; }
.sla-alert-item.sla-prio-media   { border-left: 3px solid #3B82F6; }
.sla-alert-item.sla-prio-baixa   { border-left: 3px solid #94A3B8; }

.sla-alert-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}

.sla-alert-body {
  flex: 1;
  min-width: 0;
}

.sla-alert-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1E293B);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sla-alert-desc {
  font-size: 11px;
  color: var(--text-muted, #64748B);
  margin-top: 3px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sla-alert-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.sla-prio-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sla-cat-tag {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  text-transform: capitalize;
}

/* ── VAZIO ───────────────────────────────────────────────────────── */
.sla-queue-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  gap: 10px;
  text-align: center;
  color: var(--text-muted, #94A3B8);
}
.sla-queue-vazio i { font-size: 32px; color: #10B981; opacity: 0.7; }
.sla-queue-vazio p { font-size: 14px; font-weight: 600; color: var(--text-secondary, #475569); margin: 0; }
.sla-queue-vazio span { font-size: 12px; opacity: 0.7; }

/* ── VER MAIS ────────────────────────────────────────────────────── */
.sla-ver-mais {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--primary, #6366F1);
  font-weight: 600;
  text-align: center;
  border-top: 1px solid var(--border-color, #E2E8F0);
  cursor: pointer;
}
.sla-ver-mais:hover { background: var(--bg-secondary, #F8FAFC); }

/* ════════════════════════════════════════════════════════════════════
   SLA ENGINE — Dashboard Summary Section
════════════════════════════════════════════════════════════════════ */
.sla-dashboard-wrapper {
  padding: 0 24px 32px;
}

.sla-summary-section {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.sla-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
  gap: 12px;
  flex-wrap: wrap;
}

.sla-section-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sla-section-titulo i { color: #EF4444; }

.sla-section-alerta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 4px 10px;
  border-radius: 20px;
}
.sla-section-alerta i { font-size: 11px; }

/* ── KPI GRID ────────────────────────────────────────────────────── */
.sla-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

@media (max-width: 768px) {
  .sla-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.sla-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-right: 1px solid var(--border-color, #E2E8F0);
  position: relative;
  transition: background 0.15s;
}
.sla-kpi-card:last-child { border-right: none; }
.sla-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--sla-accent, #6366F1);
  opacity: 0.6;
}
.sla-kpi-card:hover { background: var(--bg-hover, #FAFBFC); }

.sla-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sla-accent, #6366F1) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--sla-accent, #6366F1);
  flex-shrink: 0;
}

.sla-kpi-body { min-width: 0; }

.sla-kpi-valor {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sla-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sla-kpi-sub {
  font-size: 11px;
  color: var(--text-muted, #94A3B8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── INLINE QUEUE ────────────────────────────────────────────────── */
.sla-inline-queue {
  padding: 0;
}

.sla-inline-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94A3B8);
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
}

/* ======================================================================
   ETAPA 11.1 — CENTRAL OPERACIONAL DE CONVERSAS
   Operational Panel: SLA Live, Interações, Nota, Docs
====================================================================== */

/* ── SLA Live ── */
.ctx-sla-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  min-height: 34px;
}
.sla-live-janela {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sla-live-janela.ativa   { background: #D1FAE5; color: #065F46; }
.sla-live-janela.expirada { background: #FEE2E2; color: #991B1B; }

.sla-live-status { font-size: 10.5px; font-weight: 600; margin-left: auto; }
.sla-live-status.sla-ok      { color: var(--success, #10B981); }
.sla-live-status.sla-alerta  { color: var(--warning, #F59E0B); }
.sla-live-status.sla-critico {
  color: var(--danger, #EF4444);
  animation: op-sla-pulse 1.6s ease-in-out infinite;
}
@keyframes op-sla-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Título genérico de bloco operacional ── */
.ctx-bloco-titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 11px 14px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border-color);
}
.ctx-bloco-titulo i { color: var(--primary); font-size: 11px; }

/* ── Interações rápidas ── */
.ctx-interacoes-bloco { padding-bottom: 4px; }

.op-acoes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 0 12px 8px;
}
.op-acao-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 3px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, transform 0.1s ease;
  font-size: 9.5px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  font-family: inherit;
}
.op-acao-btn i { font-size: 13px; margin-bottom: 1px; }
.op-acao-btn:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.op-acao-btn:active { transform: scale(0.96); }
.op-acao-btn.op-acao-done {
  background: #D1FAE5;
  border-color: #10B981;
  color: #065F46;
  transform: scale(0.97);
}

/* ── Anotação rápida ── */
.ctx-nota-bloco { padding-bottom: 4px; }

.op-nota-textarea {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px;
  min-height: 68px;
  max-height: 180px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  overflow-y: auto;
}
.op-nota-textarea:focus {
  border-color: var(--primary);
  background: var(--surface-2);
}
.op-nota-textarea::placeholder { color: var(--text-muted); font-style: italic; }

.op-nota-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 8px;
}
.op-nota-hint { font-size: 10px; color: var(--text-muted); }
.op-nota-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 13px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  transition: filter 0.15s ease, background 0.2s ease;
}
.op-nota-btn:hover { filter: brightness(1.1); }
.op-nota-btn.nota-saved { background: var(--success, #10B981); }

/* ── Documentos inline ── */
.ctx-docs-bloco { padding-bottom: 4px; }

.op-docs-count {
  margin-left: auto;
  font-size: 10px;
  background: var(--surface-3);
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
.op-docs-lista {
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-1);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.op-doc-item.enviado {
  border-color: #10B981;
  background: #F0FDF4;
}
.op-doc-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--primary);
  flex-shrink: 0;
}
.op-doc-item.enviado .op-doc-icon { background: #D1FAE5; color: #059669; }

.op-doc-info { flex: 1; min-width: 0; }
.op-doc-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.op-doc-status {
  display: block;
  font-size: 10px;
  color: var(--success, #10B981);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.op-doc-status.pendente { color: var(--text-muted); }

.op-doc-upload-btn {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s ease;
  overflow: hidden;
}
.op-doc-upload-btn:hover { filter: brightness(1.12); }
.op-doc-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 0;
}
.op-doc-check {
  color: #10B981;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── ctx-acoes-bloco titulo override (add icon support) ── */
.ctx-acoes-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctx-acoes-titulo i { color: var(--primary); font-size: 11px; }

/* ── PC já criado (disabled state) ── */
.op-pc-ok {
  opacity: 0.7;
  cursor: default !important;
  border-color: #10B981 !important;
  color: #059669 !important;
  background: #F0FDF4 !important;
}
.op-pc-ok i { color: #10B981 !important; }
.op-pc-ok:hover { transform: none !important; }


/* =======================================================================
   ETAPA 11.1 — CENTRAL OPERACIONAL: NOVOS COMPONENTES
   Barra de Progresso do Funil | Próxima Ação | SLA refinado
======================================================================= */

/* ── Barra de Progresso do Funil ─────────────────────────────────── */
.ctx-progresso-bloco {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.ctx-progresso-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.ctx-progresso-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ctx-progresso-label i { font-size: 9px; color: var(--primary, #00A86B); }

.ctx-progresso-pct {
  font-size: 13px;
  font-weight: 800;
  transition: color 0.3s ease;
}

.ctx-progresso-track {
  height: 5px;
  background: var(--bg-secondary, #F1F5F9);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ctx-progresso-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  min-width: 8%;
}

.ctx-progresso-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ctx-progresso-info span:first-child {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.ctx-progresso-info span:last-child {
  font-size: 10px;
  color: var(--text-muted, #94A3B8);
  white-space: nowrap;
}

/* ── Próxima Ação contextual ──────────────────────────────────────── */
.ctx-proximo-bloco {
  padding: 10px 14px 4px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.ctx-proximo-lista {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ctx-proximo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #0F172A);
  text-align: left;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.ctx-proximo-btn:hover {
  border-color: var(--primary, #00A86B);
  background: #F0FDF4;
  color: var(--primary, #00A86B);
  transform: translateX(2px);
}

.ctx-proximo-btn:hover .ctx-proximo-seta { opacity: 1; transform: translateX(2px); }

.ctx-proximo-btn i:first-child {
  font-size: 12px;
  width: 16px;
  text-align: center;
  color: var(--primary, #00A86B);
  flex-shrink: 0;
}

.ctx-proximo-btn span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-proximo-seta {
  font-size: 9px;
  color: var(--text-muted, #94A3B8);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.ctx-proximo-btn.ctx-proximo-loading {
  pointer-events: none;
  opacity: 0.7;
}

.ctx-proximo-btn.ctx-proximo-loading::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,168,107,0.08), transparent);
  animation: ctx-shimmer-scan 0.8s ease forwards;
}

@keyframes ctx-shimmer-scan {
  to { left: 100%; }
}

/* ── SLA Live — refinamentos ──────────────────────────────────────── */
.ctx-sla-live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  flex-wrap: wrap;
  min-height: 34px;
}

.sla-live-status.sla-critico {
  color: #DC2626;
  animation: sla-pulse-crit 1.8s ease-in-out infinite;
}

@keyframes sla-pulse-crit {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Bloco de interações — ajuste grid para 8 botões ─────────────── */
.op-acoes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* ── Timeline mini — entrada animada ─────────────────────────────── */
.tl-mini-item--entrando {
  animation: tl-fade-slide 0.28s ease both;
}

@keyframes tl-fade-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bloco de anotação — altura mínima menor (compacto) ───────────── */
.op-nota-textarea {
  min-height: 56px;
  max-height: 180px;
  resize: none;
  overflow-y: auto;
}

/* ── Seção de docs — lista mais compacta ─────────────────────────── */
.op-docs-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.op-docs-lista::-webkit-scrollbar { width: 3px; }
.op-docs-lista::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }

/* ── Painel de contexto — scroll suave e altura total ────────────── */
.conv-contexto-panel {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.conv-contexto-panel::-webkit-scrollbar { width: 3px; }
.conv-contexto-panel::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 2px;
}

/* ── Títulos de bloco — unificado ────────────────────────────────── */
.ctx-bloco-titulo {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.ctx-bloco-titulo i {
  font-size: 10px;
  color: var(--primary, #00A86B);
}

/* ── Bloco de interações — padding reduzido ──────────────────────── */
.ctx-interacoes-bloco {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

/* ── Bloco de nota — padding reduzido ───────────────────────────── */
.ctx-nota-bloco {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

/* ── Bloco de docs — padding reduzido ───────────────────────────── */
.ctx-docs-bloco {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

/* ── Bloco de timeline — padding ─────────────────────────────────── */
.ctx-timeline-bloco {
  padding: 10px 14px 12px;
}

/* ── Bloco etapa/corretor — padding ──────────────────────────────── */
.ctx-etapa-bloco {
  padding: 10px 14px 10px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Bloco de ações — padding ────────────────────────────────────── */
.ctx-acoes-bloco {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

/* ── Botão de ação rápida — done flash ──────────────────────────── */
.op-acao-btn.op-acao-done {
  background: #ECFDF5;
  border-color: #6EE7B7;
  color: #059669;
  transform: scale(0.96);
}

/* ── Responsividade: painel em telas menores ─────────────────────── */
@media (max-width: 1200px) {
  .ctx-progresso-info span:first-child { max-width: 110px; }
  .op-acoes-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .conv-contexto-panel { display: none !important; }
}


/* =================================================================
   CRM INTERACTION ACTIONS — Micro-Modal Engine
   Floating contextual panel para interações rápidas dos corretores
================================================================== */
.crm-ia-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(1px);
}

.crm-ia-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.crm-ia-panel {
  width: 360px;
  max-height: 88vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(32px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.crm-ia-overlay.active .crm-ia-panel {
  transform: translateX(0) scale(1);
}

/* ── Header ── */
.crm-ia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.crm-ia-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}

.crm-ia-titulo i {
  color: var(--accent-blue);
  font-size: 14px;
}

.crm-ia-fechar {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 12px;
  transition: all 0.14s;
  line-height: 1;
}

.crm-ia-fechar:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

/* ── Body ── */
.crm-ia-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-ia-row {
  display: flex;
  gap: 10px;
}

.crm-ia-row .crm-ia-group {
  flex: 1;
  min-width: 0;
}

/* ── Form Group ── */
.crm-ia-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.crm-ia-label,
.crm-ia-group > label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Inputs ── */
.crm-ia-input {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}

.crm-ia-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.crm-ia-textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.5;
}

/* ── Radio Group ── */
.crm-ia-radio-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.crm-ia-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
}

.crm-ia-radio input[type="radio"] {
  accent-color: var(--accent-blue);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Checklist de Docs ── */
.crm-ia-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.crm-ia-check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-ia-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  user-select: none;
}

.crm-ia-check-item:hover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.04);
}

.crm-ia-check-item:has(.crm-ia-check:checked) {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.06);
  color: #059669;
}

.crm-ia-check-item input.crm-ia-check {
  width: 15px;
  height: 15px;
  accent-color: #10B981;
  cursor: pointer;
  flex-shrink: 0;
}

.crm-ia-check-item i {
  color: var(--text-muted);
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Footer ── */
.crm-ia-footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.crm-ia-cancelar {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  font-family: inherit;
}

.crm-ia-cancelar:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.crm-ia-salvar {
  flex: 2;
  padding: 9px 14px;
  border: none;
  border-radius: 9px;
  background: var(--accent-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.14s;
  font-family: inherit;
  letter-spacing: -0.2px;
}

.crm-ia-salvar:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
}

.crm-ia-salvar:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Responsive: telas pequenas ── */
@media (max-width: 540px) {
  .crm-ia-overlay {
    padding-right: 0;
    align-items: flex-end;
  }
  .crm-ia-panel {
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    transform: translateY(40px) scale(0.99);
  }
  .crm-ia-overlay.active .crm-ia-panel {
    transform: translateY(0) scale(1);
  }
}


/* ═══════════════════════════════════════════════════════════
   FASE 12 — CENTRAL DE AUTOMAÇÕES
   Flow Builder Visual + Gestão de Fluxos Imobiliários
═══════════════════════════════════════════════════════════ */

/* ─── PAGE WRAPPER ──────────────────────────────────────── */
.auto-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-secondary, #F8FAFC);
  overflow: hidden;
}

/* ─── HEADER ────────────────────────────────────────────── */
.auto-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.auto-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auto-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-titulo i { color: #8B5CF6; }

.auto-badge-beta {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.auto-header-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.auto-tab {
  padding: 7px 16px;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #64748B);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.auto-tab:hover { background: #F1F5F9; color: var(--text-primary, #1E293B); }
.auto-tab.active {
  background: #8B5CF6;
  color: #fff;
  border-color: #8B5CF6;
}

.auto-header-actions { display: flex; gap: 8px; }

.btn-auto-novo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: #8B5CF6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-auto-novo:hover { background: #7C3AED; transform: translateY(-1px); }

/* ─── KPIs ──────────────────────────────────────────────── */
.auto-kpis {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.auto-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kpi-c, #8B5CF6)08;
  border: 1px solid var(--kpi-c, #8B5CF6)20;
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 130px;
  flex: 1;
  max-width: 180px;
}

.auto-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--kpi-c, #8B5CF6)15;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kpi-c, #8B5CF6);
  font-size: 14px;
  flex-shrink: 0;
}

.auto-kpi-info { display: flex; flex-direction: column; }
.auto-kpi-val  { font-size: 22px; font-weight: 700; color: var(--text-primary, #1E293B); line-height: 1; }
.auto-kpi-lbl  { font-size: 11px; color: var(--text-secondary, #64748B); margin-top: 2px; }

/* ─── CONTEÚDO PRINCIPAL ────────────────────────────────── */
.auto-conteudo {
  flex: 1;
  overflow: auto;
  padding: 20px 24px;
}

/* ─── LISTA DE AUTOMAÇÕES ───────────────────────────────── */
.auto-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.auto-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary, #64748B);
}
.auto-empty i { font-size: 48px; margin-bottom: 16px; opacity: 0.3; display: block; }
.auto-empty p { font-size: 15px; line-height: 1.6; }

.auto-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--border-light, #E2E8F0);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.auto-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #CBD5E1; }
.auto-card-ativo  { border-left: 3px solid #00A86B; }
.auto-card-inativo { border-left: 3px solid #CBD5E1; opacity: 0.75; }

.auto-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}

.auto-card-icone {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.auto-card-info { flex: 1; min-width: 0; }
.auto-card-nome { font-size: 14px; font-weight: 600; color: var(--text-primary, #1E293B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-card-trigger { font-size: 11px; color: var(--text-secondary, #64748B); margin-top: 2px; display: flex; align-items: center; gap: 4px; }

/* Toggle ativo/inativo */
.auto-toggle-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.auto-toggle-inp  { display: none; }
.auto-toggle-slider {
  width: 36px; height: 20px;
  background: #CBD5E1;
  border-radius: 20px;
  transition: background 0.2s;
  position: relative;
}
.auto-toggle-slider::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.auto-toggle-inp:checked + .auto-toggle-slider { background: #00A86B; }
.auto-toggle-inp:checked + .auto-toggle-slider::after { left: 19px; }

.auto-card-metricas {
  display: flex;
  gap: 0;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  padding: 8px 0;
}

.auto-metrica {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-right: 1px solid #F1F5F9;
}
.auto-metrica:last-child { border-right: none; }
.auto-met-val { font-size: 16px; font-weight: 700; color: var(--text-primary, #1E293B); }
.auto-met-lbl { font-size: 10px; color: var(--text-secondary, #64748B); }

.auto-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.auto-card-criado { font-size: 11px; color: #94A3B8; }

.auto-card-acoes { display: flex; gap: 6px; }

.btn-auto-editar {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #EEF2FF;
  color: #6366F1;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn-auto-editar:hover { background: #6366F1; color: #fff; }

.btn-auto-deletar {
  padding: 5px 9px;
  background: #FEF2F2;
  color: #EF4444;
  border: none; border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: background 0.15s;
}
.btn-auto-deletar:hover { background: #EF4444; color: #fff; }

/* ─── TEMPLATES ─────────────────────────────────────────── */
.auto-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.auto-tpl-card {
  background: #fff;
  border: 1.5px solid var(--border-light, #E2E8F0);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}
.auto-tpl-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }

.auto-tpl-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.auto-tpl-body { flex: 1; }
.auto-tpl-nome { font-size: 14px; font-weight: 700; color: var(--text-primary, #1E293B); margin-bottom: 4px; }
.auto-tpl-desc { font-size: 12px; color: var(--text-secondary, #64748B); line-height: 1.5; }

.auto-tpl-meta {
  display: flex; gap: 10px;
  margin-top: 8px;
}
.auto-tpl-meta span {
  font-size: 11px;
  color: #94A3B8;
  display: flex; align-items: center; gap: 4px;
}

.btn-usar-tpl {
  width: 100%;
  padding: 8px;
  background: #F5F3FF;
  color: #8B5CF6;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-usar-tpl:hover { background: #8B5CF6; color: #fff; }

/* ─── MENSAGENS SALVAS ──────────────────────────────────── */
.auto-msgs-page { display: flex; flex-direction: column; gap: 16px; }

.auto-msgs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.auto-msgs-header h3 { font-size: 16px; font-weight: 700; color: var(--text-primary, #1E293B); margin: 0; }

.btn-nova-msg {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: #8B5CF6;
  color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn-nova-msg:hover { background: #7C3AED; }

.auto-variaveis-info {
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: 10px;
  padding: 12px 16px;
}

.auto-var-titulo { font-size: 12px; font-weight: 600; color: #8B5CF6; margin-bottom: 8px; }

.auto-var-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.auto-var-chip {
  background: #EDE9FE;
  color: #7C3AED;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.15s;
}
.auto-var-chip:hover { background: #8B5CF6; color: #fff; }

.auto-msgs-lista { display: flex; flex-direction: column; gap: 16px; }

.auto-msg-grupo-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary, #64748B);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
}

.auto-msg-grupo { display: flex; flex-direction: column; gap: 8px; }

.auto-msg-card {
  background: #fff;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auto-msg-card:hover { border-color: #C4B5FD; box-shadow: 0 2px 8px rgba(139,92,246,.08); }

.auto-msg-nome { font-size: 13px; font-weight: 600; color: var(--text-primary, #1E293B); margin-bottom: 4px; }
.auto-msg-preview { font-size: 12px; color: var(--text-secondary, #64748B); line-height: 1.5; margin-bottom: 10px; }

.auto-msg-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-msg-copiar, .btn-msg-editar, .btn-msg-preview {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary, #64748B);
  transition: all 0.15s;
}
.btn-msg-copiar:hover  { background: #EEF2FF; color: #6366F1; border-color: #6366F1; }
.btn-msg-editar:hover  { background: #F0FDF4; color: #16A34A; border-color: #16A34A; }
.btn-msg-preview:hover { background: #F5F3FF; color: #8B5CF6; border-color: #8B5CF6; }

/* ─── FLOW BUILDER ──────────────────────────────────────── */
.auto-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* TOOLBAR */
.auto-builder-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1E293B;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.auto-btn-voltar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.1);
  color: #E2E8F0;
  border: none; border-radius: 7px;
  font-size: 13px; cursor: pointer;
  transition: background 0.15s;
}
.auto-btn-voltar:hover { background: rgba(255,255,255,.18); }

.auto-builder-nome {
  color: #F1F5F9;
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.auto-builder-nome i { color: #A78BFA; }

.auto-builder-toolbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: auto;
}

.auto-tool-btn {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: rgba(255,255,255,.1);
  color: #E2E8F0;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 0.15s;
}
.auto-tool-btn:hover { background: rgba(255,255,255,.2); }

.auto-zoom-label {
  font-size: 12px;
  color: #94A3B8;
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auto-builder-toolbar-right { display: flex; gap: 8px; }

.auto-btn-salvar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  background: #00A86B;
  color: #fff;
  border: none; border-radius: 7px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.auto-btn-salvar:hover { background: #059669; }

/* CORPO DO BUILDER */
.auto-builder-corpo {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* SIDEBAR DE BLOCOS */
.auto-sidebar-blocos {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border-light, #E2E8F0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auto-sb-titulo {
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.auto-sb-busca-wrap { padding: 0 10px 8px; }

.auto-sb-busca {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  font-size: 12px;
  outline: none;
  color: var(--text-primary, #1E293B);
  background: #F8FAFC;
  box-sizing: border-box;
}
.auto-sb-busca:focus { border-color: #8B5CF6; background: #fff; }

.auto-sb-blocos-lista {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.auto-sb-cat { margin-bottom: 8px; }

.auto-sb-cat-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 6px 4px;
}

.auto-sb-bloco {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: grab;
  transition: background 0.12s, transform 0.1s;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.auto-sb-bloco:hover { background: #F1F5F9; border-color: #E2E8F0; transform: translateX(2px); }
.auto-sb-bloco:active { cursor: grabbing; }

.auto-sb-bloco-icon { font-size: 13px; flex-shrink: 0; }
.auto-sb-bloco-nome { font-size: 12px; color: var(--text-primary, #1E293B); font-weight: 500; }
.auto-sb-em-breve {
  font-size: 9px;
  background: #F1F5F9;
  color: #94A3B8;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: auto;
}
.auto-sb-bloco-ia { cursor: not-allowed !important; }
.auto-sb-bloco-ia:hover { background: transparent !important; transform: none !important; }

/* CANVAS WRAPPER */
.auto-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle, #CBD5E1 1px, transparent 1px) 0 0 / 28px 28px,
    #F8FAFC;
  cursor: grab;
}
.auto-canvas-wrap:active { cursor: grabbing; }

.auto-canvas-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
}
.auto-canvas-svg path { pointer-events: stroke; }

.auto-canvas-blocos {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  z-index: 2;
}

/* BLOCOS */
.auto-bloco {
  position: absolute;
  width: 200px;
  background: #fff;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow 0.15s, border-color 0.15s;
  user-select: none;
  border-left: 4px solid var(--bloco-cor, #8B5CF6);
}
.auto-bloco:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.auto-bloco-selecionado { border-color: var(--bloco-cor, #8B5CF6) !important; box-shadow: 0 0 0 3px var(--bloco-cor, #8B5CF6)30 !important; }
.auto-bloco-dragging { opacity: 0.7; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 100; }
.auto-bloco-conectando { border-color: #F59E0B !important; animation: auto-bloco-pulse 1s ease-in-out infinite; }

@keyframes auto-bloco-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,.4); }
}

.auto-bloco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 6px;
}

.auto-bloco-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bloco-cor, #8B5CF6)15;
  color: var(--bloco-cor, #8B5CF6);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.auto-bloco-nome {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1E293B);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-bloco-del {
  width: 20px; height: 20px;
  border: none; background: transparent;
  color: #CBD5E1;
  cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.auto-bloco-del:hover { background: #FEF2F2; color: #EF4444; }

.auto-bloco-conf {
  padding: 4px 10px 8px;
  font-size: 11px;
  color: var(--text-secondary, #64748B);
  border-top: 1px solid #F1F5F9;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.auto-bloco-porta-saida {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bloco-cor, #8B5CF6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  cursor: pointer;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.auto-bloco-porta-saida:hover {
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

/* MINI-MAPA */
.auto-minimap {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 160px;
  height: 100px;
  background: rgba(255,255,255,.92);
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  z-index: 10;
}

.auto-minimap-blocos {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.auto-mm-bloco {
  position: absolute;
  width: 8px; height: 5px;
  border-radius: 2px;
  opacity: 0.8;
}

.auto-minimap-viewport {
  position: absolute;
  border: 2px solid #8B5CF6;
  border-radius: 4px;
  background: rgba(139,92,246,.08);
  top: 4px; left: 4px;
  width: 50px; height: 40px;
}

/* PAINEL CONFIG */
.auto-painel-config {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid var(--border-light, #E2E8F0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auto-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #F1F5F9;
  background: #FAFAFA;
}

.auto-pc-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  display: flex; align-items: center; gap: 7px;
}

.auto-pc-fechar {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: #94A3B8; cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.auto-pc-fechar:hover { background: #F1F5F9; color: #64748B; }

.auto-pc-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auto-cfg-grupo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auto-cfg-grupo label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auto-cfg-grupo input[type="text"],
.auto-cfg-grupo input[type="number"],
.auto-cfg-grupo select,
.auto-cfg-grupo textarea {
  padding: 7px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-primary, #1E293B);
  background: #F8FAFC;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
  resize: vertical;
}
.auto-cfg-grupo input:focus,
.auto-cfg-grupo select:focus,
.auto-cfg-grupo textarea:focus {
  border-color: #8B5CF6;
  background: #fff;
}

.auto-cfg-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.auto-cfg-row input { flex: 0 0 60px; }
.auto-cfg-row select { flex: 1; }

.auto-cfg-ou {
  text-align: center;
  font-size: 11px;
  color: #94A3B8;
  padding: 4px 0;
}

.auto-cfg-preview {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #15803D;
  white-space: pre-wrap;
  min-height: 40px;
  line-height: 1.5;
}

.auto-cfg-vars { display: flex; flex-direction: column; gap: 4px; }
.auto-cfg-vars-label { font-size: 10px; font-weight: 600; color: #94A3B8; text-transform: uppercase; }
.auto-cfg-var-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.auto-cfg-var-chip {
  background: #EDE9FE;
  color: #7C3AED;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.12s;
}
.auto-cfg-var-chip:hover { background: #8B5CF6; color: #fff; }

.btn-cfg-salvar {
  width: 100%;
  padding: 9px;
  background: #8B5CF6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
}
.btn-cfg-salvar:hover { background: #7C3AED; }

/* TRIGGER BAR */
.auto-trigger-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #1E293B;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.auto-trigger-label {
  font-size: 12px;
  font-weight: 600;
  color: #A78BFA;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}

.auto-trigger-select {
  padding: 5px 10px;
  background: rgba(255,255,255,.08);
  color: #E2E8F0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  max-width: 280px;
}
.auto-trigger-select option { background: #1E293B; }

.auto-trigger-hint {
  font-size: 11px;
  color: #64748B;
  font-style: italic;
}

/* CANVAS GRID (SVG) */
.auto-grid { opacity: 0.35; }

/* ─── MODAIS ─────────────────────────────────────────────── */
.auto-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.auto-modal {
  background: #fff;
  border-radius: 14px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: slideUp 0.2s ease;
}

.auto-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
}

.auto-modal-fechar {
  width: 28px; height: 28px;
  border: none; background: #F1F5F9;
  border-radius: 7px;
  cursor: pointer;
  color: #64748B;
  display: flex; align-items: center; justify-content: center;
}
.auto-modal-fechar:hover { background: #E2E8F0; }

.auto-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auto-modal-body label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auto-modal-body input,
.auto-modal-body select,
.auto-modal-body textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary, #1E293B);
  background: #F8FAFC;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.auto-modal-body input:focus,
.auto-modal-body select:focus,
.auto-modal-body textarea:focus { border-color: #8B5CF6; background: #fff; }

.auto-msg-preview-balao {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: #166534;
  line-height: 1.7;
  white-space: pre-wrap;
}

.auto-modal-hint {
  font-size: 11px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─── PAGE SECTION ──────────────────────────────────────── */
#page-automacoes {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── RESPONSIVIDADE BÁSICA ──────────────────────────────── */
@media (max-width: 900px) {
  .auto-sidebar-blocos { display: none; }
  .auto-painel-config  { display: none !important; }
  .auto-kpi { max-width: 100%; min-width: 120px; }
  .auto-lista { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   MÓDULO AGENDA — agenda.js  v1.0
════════════════════════════════════════════════════════════════════ */

/* Layout principal */
.agenda-page {
  display: flex;
  /* altura controlada pelo pai (.content-area.agenda-mode via layout.css) */
  height: 100%;
  overflow: hidden;
  background: var(--bg-base, #f8fafc);
}

/* ── Painel Esquerdo ─────────────────────────────────────────── */
.agenda-left {
  width: 260px;
  min-width: 220px;
  background: var(--bg-card, #fff);
  border-right: 1px solid var(--border-normal, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex-shrink: 0;
}

/* Mini calendário */
.agenda-mini-cal {
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mini-cal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.mini-cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11px;
  transition: background .15s;
}
.mini-cal-nav:hover { background: var(--bg-hover, #f1f5f9); }

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-cal-dow {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 2px 0;
}

.mini-cal-cell {
  font-size: 11px;
  text-align: center;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #475569);
  transition: background .15s;
  position: relative;
}
.mini-cal-cell:hover { background: var(--bg-hover, #f1f5f9); }
.mini-cal-cell.empty { cursor: default; }
.mini-cal-cell.today { font-weight: 800; color: var(--brand, #00A86B); }
.mini-cal-cell.selected { background: var(--brand, #00A86B); color: #fff !important; font-weight: 700; }
.mini-cal-cell.has-events::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--brand, #00A86B);
  border-radius: 50%;
}
.mini-cal-cell.selected::after { background: #fff; }

/* Legenda */
.agenda-legenda {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agenda-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

.agenda-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Filtros */
.agenda-corretor-filter,
.agenda-prioridade-wrap {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.agenda-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin-bottom: 6px;
}

.agenda-select {
  width: 100%;
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-primary, #1e293b);
  background: var(--bg-base, #f8fafc);
  cursor: pointer;
  outline: none;
}
.agenda-select:focus { border-color: var(--brand, #00A86B); }

/* ── Painel Principal ────────────────────────────────────────── */
.agenda-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar */
.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-normal, #e2e8f0);
  background: var(--bg-card, #fff);
  flex-shrink: 0;
  gap: 12px;
}

.agenda-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agenda-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agenda-btn-today {
  background: var(--bg-base, #f8fafc);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  transition: background .15s;
}
.agenda-btn-today:hover { background: var(--bg-hover, #f1f5f9); }

.agenda-btn-nav {
  background: none;
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: background .15s;
}
.agenda-btn-nav:hover { background: var(--bg-hover, #f1f5f9); }

.agenda-header-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-left: 4px;
}

/* Botões de view */
.agenda-view-btns {
  display: flex;
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
}
.agenda-view-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border-normal, #e2e8f0);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.agenda-view-btn:last-child { border-right: none; }
.agenda-view-btn:hover { background: var(--bg-hover, #f1f5f9); }
.agenda-view-btn.active { background: var(--brand, #00A86B); color: #fff; }

/* ── View Area ───────────────────────────────────────────────── */
.agenda-view-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Semana / Dia */
.agenda-week-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.agenda-week-header {
  display: flex;
  border-bottom: 1px solid var(--border-normal, #e2e8f0);
  background: var(--bg-card, #fff);
  flex-shrink: 0;
}

.agenda-time-gutter {
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle, #f1f5f9);
}

.agenda-day-col-hdr {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid var(--border-subtle, #f1f5f9);
}
.agenda-day-col-hdr:last-child { border-right: none; }
.agenda-day-col-hdr.is-today { background: #ecfdf5; }

.agenda-day-dow {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.agenda-day-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  line-height: 1;
}
.agenda-day-num.today-circle {
  background: var(--brand, #00A86B);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

/* Grade de slots */
.agenda-week-grid {
  display: flex;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.agenda-time-col {
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle, #f1f5f9);
}

.agenda-time-cell {
  height: 56px;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 8px;
  justify-content: flex-end;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  box-sizing: border-box;
}

.agenda-day-col {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--border-subtle, #f1f5f9);
  min-width: 0;
}
.agenda-day-col:last-child { border-right: none; }
.agenda-day-col.is-today { background: #f0fdf4; }

.agenda-slot {
  height: 56px;
  border-bottom: 1px dashed var(--border-subtle, #f1f5f9);
  cursor: pointer;
  transition: background .1s;
}
.agenda-slot:hover { background: rgba(0,168,107,.06); }

/* Evento na grade */
.agenda-event-card {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 4px 7px;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  transition: box-shadow .15s, transform .1s;
  min-height: 24px;
  /* Garante que texto nunca vaze para fora do card */
  box-sizing: border-box;
  max-width: calc(100% - 6px);
}
.agenda-event-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-1px) scale(1.01);
  z-index: 10;
}
/* Quando há múltiplos eventos no mesmo horário, empilha com pequeno offset */
.agenda-event-card:nth-child(2n) { left: 5px; right: 2px; }
.agenda-event-card:nth-child(3n) { left: 7px; right: 1px; }

.agenda-evt-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.agenda-evt-meta {
  font-size: 10px;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-evt-obs {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Visão Mês ───────────────────────────────────────────────── */
.agenda-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  flex: 1;
  overflow-y: auto;
  background: var(--bg-card, #fff);
}

.agenda-mes-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  padding: 10px 4px;
  border-bottom: 2px solid var(--border-normal, #e2e8f0);
  background: var(--bg-base, #f8fafc);
}

.agenda-mes-cell {
  min-height: 110px;
  border-right: 1px solid var(--border-subtle, #f1f5f9);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  padding: 6px;
  cursor: pointer;
  transition: background .1s;
}
.agenda-mes-cell:hover { background: #f8fafc; }
.agenda-mes-cell.empty { cursor: default; background: var(--bg-base, #f8fafc); opacity: .5; }
.agenda-mes-cell.is-today { background: #f0fdf4; }

.agenda-mes-day-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-bottom: 4px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.agenda-mes-day-num.today-circle {
  background: var(--brand, #00A86B);
  color: #fff;
  border-radius: 50%;
}

.agenda-mes-evt {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-mes-mais {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  padding: 2px 4px;
}

/* ── CABEÇALHO EXECUTIVO (BLOCO 1) ─────────────────────────── */
.agenda-exec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  flex-shrink: 0;
  gap: 16px;
  flex-wrap: wrap;
}
.agenda-exec-title-wrap { flex: 1; min-width: 200px; }
.agenda-exec-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.agenda-kpi-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-normal, #e2e8f0);
  background: var(--bg-secondary, #fff);
  min-width: 90px;
  cursor: default;
  transition: box-shadow .15s;
}
.agenda-kpi-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* ── FILTROS POR TIPO (BLOCO 2) ────────────────────────────── */
.agenda-filter-chips {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.agenda-filter-chips::-webkit-scrollbar { display: none; }
.agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-normal, #e2e8f0);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.agenda-chip:hover {
  background: var(--bg-hover, #f8fafc);
  border-color: var(--border-normal, #e2e8f0);
}
.agenda-chip--ativo {
  font-weight: 700;
  color: #fff;
}

/* ── EVENTOS PREMIUM (BLOCOS 3-5) ──────────────────────────── */
.agenda-event-card--premium {
  padding: 5px 8px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.agenda-event-card--premium:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  transform: translateY(-1px);
  z-index: 10;
}

/* ── TODAY HIGHLIGHT (BLOCO 6) ─────────────────────────────── */
.agenda-day-col-hdr.is-today {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
}
.agenda-day-col.is-today {
  background: linear-gradient(180deg, #f0fdf490 0%, transparent 60%) !important;
}
.today-circle {
  background: var(--brand, #00A86B) !important;
  color: #fff !important;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* Responsivo */
@media (max-width: 900px) {
  .agenda-left { display: none; }
  .agenda-toolbar { flex-wrap: wrap; gap: 8px; }
  .agenda-view-btns .agenda-view-btn:nth-child(1),
  .agenda-view-btns .agenda-view-btn:nth-child(3) { display: none; }
  .agenda-exec-header { flex-direction: column; align-items: flex-start; }
  .agenda-exec-kpis { width: 100%; justify-content: space-between; }
  .agenda-kpi-chip { flex: 1; min-width: 70px; }
}


/* ══════════════════════════════════════════════════════════════════
   MÓDULO CONFIGURAÇÕES — configuracoes.js  v1.0
════════════════════════════════════════════════════════════════════ */

.cfg-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.cfg-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border-normal, #e2e8f0);
  background: var(--bg-card, #fff);
  flex-shrink: 0;
}

.cfg-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cfg-title i { color: var(--brand, #00A86B); }

.cfg-subtitle {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin-top: 4px;
}

.cfg-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar de navegação */
.cfg-nav {
  width: 220px;
  background: var(--bg-card, #fff);
  border-right: 1px solid var(--border-normal, #e2e8f0);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.cfg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-align: left;
  width: 100%;
  transition: background .15s, color .15s;
}
.cfg-nav-item:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #1e293b); }
.cfg-nav-item.active { background: var(--brand, #00A86B)15; color: var(--brand, #00A86B); }
.cfg-nav-item i { width: 16px; text-align: center; }

/* Conteúdo */
.cfg-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background: var(--bg-base, #f8fafc);
}

.cfg-section {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}

.cfg-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.cfg-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.cfg-section-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

/* Tabela de usuários */
.cfg-table-wrap { overflow-x: auto; }

.cfg-table {
  width: 100%;
  border-collapse: collapse;
}

.cfg-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  background: var(--bg-base, #f8fafc);
}

.cfg-table-row td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  font-size: 13px;
  vertical-align: middle;
}
.cfg-table-row:last-child td { border-bottom: none; }
.cfg-table-row:hover td { background: var(--bg-hover, #f8fafc); }
.cfg-table-row.inativo { opacity: .55; }

.cfg-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cfg-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.cfg-user-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.cfg-user-id, .cfg-user-email {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.cfg-role-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.cfg-status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cfg-status-chip.ativo   { background: #ECFDF5; color: #10B981; }
.cfg-status-chip.inativo { background: #FEF2F2; color: #EF4444; }

/* Botão simular */
.cfg-btn-sim {
  background: var(--brand, #00A86B)10;
  color: var(--brand, #00A86B);
  border: 1px solid var(--brand, #00A86B)30;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}
.cfg-btn-sim:hover { background: var(--brand, #00A86B)20; }

/* Ações da row */
.cfg-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cfg-btn-icon {
  width: 30px; height: 30px;
  border: 1px solid var(--border-normal, #e2e8f0);
  background: none;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.cfg-btn-icon:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #1e293b); }
.cfg-btn-icon.danger:hover { background: #FEF2F2; color: #EF4444; border-color: #FECACA; }

/* Perfis */
.cfg-perfil-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.cfg-perfil-card:last-child { border-bottom: none; }

.cfg-perfil-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.cfg-perfil-nome {
  font-size: 14px;
  font-weight: 700;
}

.cfg-perfil-desc {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.cfg-perfil-caps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cfg-cap-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cfg-cap-chip.ok { background: #ECFDF5; color: #10B981; }
.cfg-cap-chip.no { background: #FEF2F2; color: #EF4444; }

/* Sistema — config grid */
.cfg-config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px 24px;
}

.cfg-config-item {}

.cfg-config-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-bottom: 6px;
  display: block;
}

.cfg-input {
  width: 100%;
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  background: var(--bg-base, #f8fafc);
  outline: none;
  box-sizing: border-box;
}
.cfg-input:focus { border-color: var(--brand, #00A86B); }

/* Segurança */
.cfg-seg-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cfg-seg-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.cfg-seg-card:last-child { border-bottom: none; }

.cfg-seg-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #ECFDF5;
  color: var(--brand, #00A86B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.cfg-seg-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.cfg-seg-desc {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.cfg-seg-card > button, .cfg-seg-card > select {
  margin-left: auto;
  flex-shrink: 0;
}

.cfg-select-inline {
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-primary, #1e293b);
  background: var(--bg-base, #f8fafc);
  cursor: pointer;
  outline: none;
  margin-left: auto;
}

@media (max-width: 900px) {
  .cfg-nav { display: none; }
  .cfg-config-grid { grid-template-columns: 1fr; }
  .cfg-perfil-caps { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   ATENDIMENTO WhatsApp — conversas.js + relatorios.js
════════════════════════════════════════════════════════════════════ */

/* Bloco de atendimento no painel de contexto */
.ctx-atendimento-bloco {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctx-atd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ctx-atd-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ctx-atd-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Chips de espera/TMA */
.atd-espera-chip,
.atd-tma-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.atd-espera-ok      { background: #ECFDF5; color: #10B981; }
.atd-espera-aviso   { background: #FFFBEB; color: #F59E0B; }
.atd-espera-urgente { background: #FEF2F2; color: #EF4444; animation: sla-pulse-crit 2s infinite; }
.atd-tma-chip       { background: #EFF6FF; color: #3B82F6; }

/* Botão Assumir */
.atd-btn-assumir {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #00A86B, #059669);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s;
  animation: auto-bloco-pulse 2s infinite;
}
.atd-btn-assumir:hover { opacity: .9; transform: translateY(-1px); animation: none; }

/* Badge em atendimento */
.atd-em-andamento {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atd-badge-ativo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ECFDF5;
  color: #10B981;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
}
.atd-badge-ativo i { font-size: 7px; animation: auto-bloco-pulse 1.5s infinite; }

.atd-badge-encerrado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #EFF6FF;
  color: #3B82F6;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.atd-encerrar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.atd-resultados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.atd-res-btn {
  padding: 7px 8px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .15s;
}
.atd-res-btn.qualificado   { background: #ECFDF5; color: #10B981; border-color: #10B98130; }
.atd-res-btn.visita        { background: #EFF6FF; color: #3B82F6; border-color: #3B82F630; }
.atd-res-btn.sem-interesse { background: #FEF2F2; color: #EF4444; border-color: #EF444430; }
.atd-res-btn.sem-resposta  { background: #F8FAFC; color: #94a3b8; border-color: #e2e8f0; }
.atd-res-btn:hover { opacity: .85; transform: translateY(-1px); }

/* ── Relatórios: aba WhatsApp ─────────────────────────────── */

.wa-analytics-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* KPIs */
.wa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.wa-kpi-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
}
.wa-kpi-card:hover { box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08)); }
.wa-kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 12px 12px;
  background: var(--wa-accent, #00A86B);
}

.wa-kpi-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  margin-bottom: 10px;
}
.wa-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  line-height: 1;
}
.wa-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
}
.wa-kpi-delta {
  font-size: 11px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ranking de corretores */
.wa-ranking-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}

.wa-ranking-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.wa-ranking-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-ranking-table {
  width: 100%;
  border-collapse: collapse;
}
.wa-ranking-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--bg-base, #f8fafc);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.wa-ranking-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.wa-ranking-table tbody tr:last-child td { border-bottom: none; }
.wa-ranking-table tbody tr:hover td { background: var(--bg-hover, #f8fafc); }

.wa-rank-pos {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.wa-rank-1 { background: #FEF3C7; color: #D97706; }
.wa-rank-2 { background: #F1F5F9; color: #64748b; }
.wa-rank-3 { background: #FEF2E8; color: #C2410C; }
.wa-rank-n { background: #F1F5F9; color: #94a3b8; }

.wa-tma-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-tma-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--border-subtle, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
}
.wa-tma-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.wa-tma-good  { background: #10B981; }
.wa-tma-ok    { background: #F59E0B; }
.wa-tma-slow  { background: #EF4444; }

.wa-conv-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.wa-conv-high   { background: #ECFDF5; color: #10B981; }
.wa-conv-mid    { background: #FFFBEB; color: #F59E0B; }
.wa-conv-low    { background: #FEF2F2; color: #EF4444; }

/* Dois cards lado a lado */
.wa-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Funil de resultado */
.wa-funil-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
}

.wa-funil-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-funil-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wa-funil-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  min-width: 120px;
}
.wa-funil-bar-bg {
  flex: 1;
  height: 20px;
  background: var(--bg-base, #f1f5f9);
  border-radius: 6px;
  overflow: hidden;
}
.wa-funil-bar-fill {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  min-width: 30px;
  transition: width .5s ease;
}
.wa-funil-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  min-width: 24px;
  text-align: right;
}

/* Distribuição por hora */
.wa-horas-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
}

.wa-horas-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: 0 4px;
}
.wa-hora-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.wa-hora-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--brand, #00A86B);
  opacity: .7;
  transition: opacity .15s;
  min-height: 2px;
}
.wa-hora-col:hover .wa-hora-bar { opacity: 1; }
.wa-hora-label {
  font-size: 9px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

/* Histórico recente */
.wa-historico-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-normal, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}

.wa-hist-row {
  display: grid;
  grid-template-columns: 1fr 1fr 80px 100px 100px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  font-size: 12px;
}
.wa-hist-row:last-child { border-bottom: none; }
.wa-hist-row.header {
  background: var(--bg-base, #f8fafc);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.wa-hist-row:not(.header):hover { background: var(--bg-hover, #f8fafc); }

.wa-res-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.wa-res-qualificado    { background: #ECFDF5; color: #10B981; }
.wa-res-visita_agendada{ background: #EFF6FF; color: #3B82F6; }
.wa-res-analise_credito{ background: #F5F3FF; color: #8B5CF6; }
.wa-res-reserva        { background: #ECFDF5; color: #00A86B; }
.wa-res-sem_interesse  { background: #FEF2F2; color: #EF4444; }
.wa-res-sem_resposta   { background: #F8FAFC; color: #94a3b8; }
.wa-res-null           { background: #F8FAFC; color: #94a3b8; }

@media (max-width: 900px) {
  .wa-kpi-grid  { grid-template-columns: repeat(2,1fr); }
  .wa-row-2     { grid-template-columns: 1fr; }
  .wa-hist-row  { grid-template-columns: 1fr 80px; }
  .wa-hist-row > *:nth-child(2),
  .wa-hist-row > *:nth-child(3) { display: none; }
}

/* ================================================================
   FASE 13 — CENTRAL WHATSAPP + INBOX OPERACIONAL
   CSS additions: Conexões page + Queue tabs + SLA chips + Templates
   ================================================================ */
/* ═══════════════════════════════════════════════════════════════
   CONEXÕES v3 — Design Profissional cx3-*
═══════════════════════════════════════════════════════════════ */

.cx3-page { padding: 0 24px 32px; max-width: 1200px; }

/* Header */
.cx3-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-top: 4px; }
.cx3-header-left { display: flex; align-items: center; gap: 14px; }
.cx3-header-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,211,102,.3);
}
.cx3-title    { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; }
.cx3-subtitle { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }

/* Status badges */
.cx3-badge     { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
.cx3-badge i   { font-size: 8px; }
.cx3-badge-ok  { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.cx3-badge-off { background: #F8FAFC; color: #94A3B8; border: 1px solid #E2E8F0; }
.cx3-badge-qr  { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.cx3-badge-ok i { color: #10B981; }

/* Grid layout */
.cx3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .cx3-grid { grid-template-columns: 1fr; } }
.cx3-col-left, .cx3-col-right { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.cx3-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #E8EDF2);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.cx3-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cx3-card-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.cx3-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cx3-card-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Formulário */
.cx3-form { display: flex; flex-direction: column; gap: 14px; }
.cx3-form-row { display: flex; gap: 12px; }
.cx3-field { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cx3-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.cx3-required { color: #EF4444; }
.cx3-hint  { font-size: 10px; color: var(--text-muted); }
.cx3-input {
  background: var(--bg-elevated, #F8FAFC);
  border: 1.5px solid var(--border-normal, #E2E8F0);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.cx3-input:focus { border-color: var(--brand, #00A86B); box-shadow: 0 0 0 3px rgba(0,168,107,.1); }
.cx3-select { cursor: pointer; }
.cx3-form-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.cx3-configured { font-size: 12px; font-weight: 600; color: #059669; display: flex; align-items: center; gap: 5px; }
.cx3-configured i { font-size: 14px; }

/* Botões */
.cx3-btn-primary {
  background: var(--brand, #00A86B); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .15s, transform .1s;
}
.cx3-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.cx3-btn-connect {
  background: #25D366; color: #fff; border: none;
  border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 3px 10px rgba(37,211,102,.3);
  transition: background .15s, transform .1s;
}
.cx3-btn-connect:hover { background: #1ebe59; transform: translateY(-1px); }
.cx3-btn-danger {
  background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA;
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.cx3-btn-danger:hover { background: #FEE2E2; }
.cx3-btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-normal, #E2E8F0);
  border-radius: 8px; padding: 7px 12px; font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s;
}
.cx3-btn-ghost:hover { background: var(--bg-hover, #F1F5F9); }
.cx3-btn-cancel {
  background: var(--bg-hover, #F1F5F9); color: var(--text-secondary);
  border: 1px solid var(--border-normal); border-radius: 8px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.cx3-btn-copy {
  background: var(--bg-hover, #F1F5F9); border: 1px solid var(--border-normal);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--text-muted);
  transition: all .15s; flex-shrink: 0;
}
.cx3-btn-copy:hover { background: var(--brand, #00A86B); color: #fff; border-color: var(--brand); }
.cx3-card-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* QR Code */
.cx3-qr-area {
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1px solid #A7F3D0; border-radius: 12px;
  padding: 20px; margin-bottom: 14px; text-align: center;
}
.cx3-qr-steps  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
.cx3-qr-step   { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); }
.cx3-qr-num    {
  width: 22px; height: 22px; border-radius: 50%; background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cx3-qr-box    { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; }

/* Connection stats */
.cx3-conn-stats { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--border-normal); border-radius: 10px; overflow: hidden; }
.cx3-conn-stat  { flex: 1; text-align: center; padding: 10px 8px; border-right: 1px solid var(--border-normal); }
.cx3-conn-stat:last-child { border-right: none; }
.cx3-conn-stat i     { font-size: 13px; display: block; margin-bottom: 4px; }
.cx3-conn-stat span  { font-size: 14px; font-weight: 700; color: var(--text-primary); display: block; }
.cx3-conn-stat label { font-size: 10px; color: var(--text-muted); }

/* Métricas */
.cx3-metricas   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx3-metrica    { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--bg-elevated, #F8FAFC); border-radius: 10px; text-align: center; }
.cx3-met-icon   { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cx3-met-val    { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.cx3-met-label  { font-size: 10px; color: var(--text-muted); font-weight: 600; }

/* Webhook */
.cx3-webhook-wrap { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.cx3-webhook-input { flex: 1; font-size: 11px; color: var(--text-secondary); font-family: monospace; cursor: default; }

/* Eventos */
.cx3-eventos-grid { display: flex; flex-direction: column; gap: 6px; }
.cx3-evento {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; border: 1px solid transparent;
}
.cx3-ev-on  { background: #F0FDF4; border-color: #A7F3D0; }
.cx3-ev-off { background: #F8FAFC; border-color: #E2E8F0; }
.cx3-ev-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.cx3-ev-on  .cx3-ev-dot { color: #10B981; }
.cx3-ev-off .cx3-ev-dot { color: #CBD5E1; }
.cx3-ev-name  { font-size: 11px; font-weight: 700; color: var(--text-primary); font-family: monospace; }
.cx3-ev-desc  { font-size: 10px; color: var(--text-muted); }
.cx3-ev-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
}
.cx3-ev-on  .cx3-ev-badge { background: #ECFDF5; color: #059669; }
.cx3-ev-off .cx3-ev-badge { background: #F1F5F9; color: #94A3B8; }

/* Log */
.cx3-log       { display: flex; flex-direction: column; gap: 4px; min-height: 80px; }
.cx3-log-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 20px; }
.cx3-log-line  { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bg-elevated, #F8FAFC); }
.cx3-log-line:last-child { border-bottom: none; }
.cx3-log-t     { font-size: 10px; color: var(--text-disabled, #CBD5E1); min-width: 62px; font-family: monospace; }
.cx3-log-msg   { font-size: 11px; color: var(--text-secondary); flex: 1; }

/* ══════════════════════════════════════════════════════════════════
   CONV — TEMPLATES / MENSAGENS SALVAS PANEL
   Colapsa/expande como flex item dentro do conv-compose-wrap.
   NÃO usa position:absolute (conv-chat-panel tem overflow:hidden).
══════════════════════════════════════════════════════════════════ */

/* conv-compose-wrap: flex column para empilhar panel + input */
.conv-compose-wrap {
  display:        flex;
  flex-direction: column;
}

/* Painel: colapsado por padrão via max-height */
.conv-templates-panel {
  max-height:     0;
  overflow:       hidden;
  flex-shrink:    0;
  background:     #fff;
  border-top:     0px solid var(--border-color, #E8EDF2);
  transition:     max-height 0.25s ease, border-top 0.1s;
}

/* Estado aberto: expande e mostra borda */
.conv-templates-panel.open {
  max-height:     340px;
  border-top:     1px solid var(--border-color, #E8EDF2);
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
}

/* Header */
.conv-templates-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-bottom:   1px solid var(--border-color, #F1F5F9);
  flex-shrink:     0;
  font-size:       13px;
  font-weight:     700;
  color:           var(--text-primary, #0F172A);
  position:        sticky;
  top:             0;
  background:      #fff;
  z-index:         1;
}
.conv-templates-header span {
  display:     flex;
  align-items: center;
  gap:         7px;
}
.conv-templates-header i { color: var(--brand, #00A86B); }

/* Botão fechar */
.conv-templates-close {
  width:       28px;
  height:      28px;
  border:      none;
  background:  var(--bg-elevated, #F1F5F9);
  border-radius: 6px;
  cursor:      pointer;
  color:       var(--text-secondary, #475569);
  font-size:   12px;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background 0.15s;
  flex-shrink: 0;
}
.conv-templates-close:hover { background: #E2E8F0; color: var(--text-primary, #0F172A); }

/* Botão trigger (bookmark na barra de input) */
.conv-templates-trigger {
  width:       34px;
  height:      34px;
  border:      none;
  background:  transparent;
  border-radius: 50%;
  cursor:      pointer;
  color:       #8696A0;
  font-size:   16px;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color 0.15s;
  flex-shrink: 0;
}
.conv-templates-trigger:hover  { color: var(--brand, #00A86B); }
.conv-templates-trigger.active { color: var(--brand, #00A86B); }

/* Busca */
.conv-templates-search {
  padding:       8px 12px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
  flex-shrink:   0;
  position:      sticky;
  top:           45px;
  background:    #fff;
  z-index:       1;
}
.conv-templates-search input {
  width:         100%;
  box-sizing:    border-box;
  height:        32px;
  padding:       0 12px;
  border:        1px solid var(--border-color, #E2E8F0);
  border-radius: 20px;
  outline:       none;
  font-size:     12.5px;
  font-family:   inherit;
  background:    var(--bg-elevated, #F8FAFC);
  color:         var(--text-primary, #0F172A);
  transition:    border-color 0.15s;
}
.conv-templates-search input:focus {
  border-color:  var(--brand, #00A86B);
  box-shadow:    0 0 0 3px rgba(0,168,107,0.10);
}

/* Lista de templates */
.conv-templates-list {
  overflow-y:  auto;
  flex:        1;
  min-height:  0;
}

/* Item individual */
.conv-template-item {
  padding:       10px 14px;
  border-bottom: 1px solid var(--border-color, #F1F5F9);
  cursor:        pointer;
  transition:    background 0.12s;
}
.conv-template-item:last-child { border-bottom: none; }
.conv-template-item:hover      { background: var(--brand-softer, #F0FBF6); }
.conv-template-item:active     { background: var(--brand-soft,   #E6F8F1); }

.conv-template-title {
  display:       flex;
  align-items:   center;
  gap:           7px;
  font-size:     12.5px;
  font-weight:   700;
  color:         var(--text-primary, #0F172A);
  margin-bottom: 3px;
}
.conv-template-tag {
  font-size:      10px;
  font-weight:    600;
  padding:        2px 7px;
  border-radius:  20px;
  background:     var(--brand-soft,  #E6F8F1);
  color:          var(--brand,       #00A86B);
  text-transform: capitalize;
  white-space:    nowrap;
}
.conv-template-preview {
  font-size:     11.5px;
  color:         var(--text-secondary, #475569);
  line-height:   1.4;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════
   CONV — FILAS / FILTROS DE CONVERSAS
   Classes: .conv-filas-wrap → .conv-filas → .conv-fila-btn
══════════════════════════════════════════════════════════════════ */

/* Wrapper que separa o bloco de filtros do resto do header */
.conv-filas-wrap {
  padding:        6px 10px 2px;
  border-bottom:  1px solid var(--border-color, #E8EDF2);
  background:     #fff;
  flex-shrink:    0;
}

/* Linha horizontal de botões — scroll horizontal se necessário */
.conv-filas {
  display:        flex;
  gap:            4px;
  overflow-x:     auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.conv-filas::-webkit-scrollbar { display: none; }

/* Botão individual de fila */
.conv-fila-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        4px 10px;
  border-radius:  20px;
  border:         1px solid var(--border-color, #E2E8F0);
  background:     #F8FAFC;
  font-size:      11px;
  font-weight:    600;
  color:          var(--text-secondary, #64748B);
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all 0.15s;
  line-height:    1.4;
  flex-shrink:    0;
}
.conv-fila-btn i {
  font-size:  10px;
  opacity:    0.75;
}
.conv-fila-btn:hover {
  background: var(--brand-softer, #F0FBF6);
  border-color: var(--brand, #00A86B);
  color:      var(--brand, #00A86B);
}

/* Estado ativo */
.conv-fila-btn.active {
  background:   var(--brand, #00A86B);
  border-color: var(--brand, #00A86B);
  color:        #fff;
}
.conv-fila-btn.active i { opacity: 1; }

/* Badge de contagem dentro do botão */
.conv-fila-count {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      16px;
  height:         16px;
  padding:        0 4px;
  border-radius:  8px;
  font-size:      10px;
  font-weight:    700;
  background:     rgba(0,0,0,0.12);
  color:          inherit;
  line-height:    1;
}
.conv-fila-btn.active .conv-fila-count {
  background: rgba(255,255,255,0.30);
  color:      #fff;
}

/* Cores específicas por fila (borda esquerda sutil quando active) */
.conv-fila-btn[data-fila="novos"].active         { background: #00A86B; border-color: #00A86B; }
.conv-fila-btn[data-fila="nao_assumidos"].active { background: #8B5CF6; border-color: #8B5CF6; }
.conv-fila-btn[data-fila="em_atendimento"].active{ background: #3B82F6; border-color: #3B82F6; }
.conv-fila-btn[data-fila="aguardando_cliente"].active { background: #F59E0B; border-color: #F59E0B; }
.conv-fila-btn[data-fila="sem_resposta"].active  { background: #EF4444; border-color: #EF4444; }
.conv-fila-btn[data-fila="finalizados"].active   { background: #10B981; border-color: #10B981; }
.conv-fila-btn[data-fila="todas"].active         { background: #64748B; border-color: #64748B; }

/* ══════════════════════════════════════════════════════════════════
   INBOX PROFISSIONAL — migration 014 + Task 7
   Foto de perfil, status WhatsApp, status de mensagem
══════════════════════════════════════════════════════════════════ */

/* ── Avatar com foto de perfil (lista de conversas) ── */
.conv-item-avatar .conv-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
}

/* ── Avatar com foto de perfil (cabeçalho do chat) ── */
.chat-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Status WhatsApp (online / digitando) ── */
.chat-wa-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-wa-status.online {
  color: #22C55E;
}
.chat-wa-status.online i {
  font-size: 7px;
}
.chat-wa-status.typing {
  color: #3B82F6;
  font-style: italic;
}
.chat-wa-status.typing i {
  font-size: 7px;
}

/* ── Status de mensagem expandido ── */
.msg-status-lida     { color: #53BDEB !important; }
.msg-status-enviando { color: #94A3B8 !important; animation: msg-spin 1s linear infinite; }
.msg-status-falha    { color: #EF4444 !important; }

@keyframes msg-spin {
  from { opacity: 1; }
  50%  { opacity: 0.3; }
  to   { opacity: 1; }
}

/* ── Loading spinner nas mensagens ── */
.fa-spinner.fa-spin {
  animation: fa-spin 0.8s linear infinite;
}
@keyframes fa-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =====================================================================
   INBOX PROFISSIONAL -- migration 014 + Task 7
   Foto de perfil, status WhatsApp, status de mensagem
===================================================================== */

/* Avatar com foto de perfil (lista de conversas) */
.conv-item-avatar .conv-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
}

/* Avatar com foto de perfil (cabecalho do chat) */
.chat-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Status WhatsApp (online / digitando) */
.chat-wa-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-wa-status.online  { color: #22C55E; }
.chat-wa-status.online i  { font-size: 7px; }
.chat-wa-status.typing  { color: #3B82F6; font-style: italic; }
.chat-wa-status.typing i  { font-size: 7px; }

/* Status de mensagem expandido */
.msg-status-lida     { color: #53BDEB !important; }
.msg-status-enviando { color: #94A3B8 !important; }
.msg-status-falha    { color: #EF4444 !important; }

/* ══════════════════════════════════════════════════════
   OPERATION CENTER V1
══════════════════════════════════════════════════════ */
.op-page {
  padding: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.op-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.op-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.op-header h1 i {
  color: var(--brand-primary);
  font-size: 20px;
}
.op-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.op-last-update {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Alertas */
.op-alertas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.op-alerta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
}
.op-alerta:hover { opacity: 0.85; }
.op-alerta i { font-size: 14px; flex-shrink: 0; }
.op-alerta-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.3);
  padding: 1px 8px;
  border-radius: 20px;
}
.op-alerta-red    { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.op-alerta-orange { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.op-alerta-green  { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }

/* Seção label */
.op-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin: var(--space-5) 0 var(--space-3);
}

/* Grid de cards */
.op-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Card individual */
.op-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: default;
  transition: var(--transition-base);
  position: relative;
}
.op-card.clickable { cursor: pointer; }
.op-card.clickable:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.08);
  transform: translateY(-1px);
}
.op-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: var(--space-3);
}
.op-card-icon-red    { background: #FEF2F2; color: #DC2626; }
.op-card-icon-orange { background: #FFF7ED; color: #EA580C; }
.op-card-icon-blue   { background: #EFF6FF; color: #2563EB; }
.op-card-icon-green  { background: #F0FDF4; color: #16A34A; }
.op-card-icon-purple { background: #F5F3FF; color: #7C3AED; }
.op-card-icon-gray   { background: var(--surface-secondary); color: var(--text-tertiary); }

.op-card-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.op-card-value.danger  { color: #DC2626; }
.op-card-value.warning { color: #EA580C; }
.op-card-value.ok      { color: #16A34A; }

.op-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}
.op-card-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.op-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 2px #fff;
}

/* Card sem-interação com sub-valores */
.op-card-interacao-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
}
.op-card-interacao-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.op-card-interacao-row span:last-child {
  font-weight: 700;
  color: var(--text-primary);
}

/* Tabela de equipes */
.op-table-wrap {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.op-table th {
  background: var(--surface-secondary);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-primary);
}
.op-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary);
}
.op-table tr:last-child td { border-bottom: none; }
.op-table tr:hover td { background: var(--surface-hover); }
.op-table .op-equipe-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-equipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex-shrink: 0;
}
.op-table .badge-num {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.op-table .badge-num.total {
  background: var(--brand-primary);
  color: #fff;
}

/* Painel de redistribuição */
.op-redistribuir-form {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.op-redistribuir-form h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-redistribuir-form h3 i { color: var(--brand-primary); }
.op-redistribuir-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: var(--space-3);
  align-items: end;
}
.op-redistribuir-arrow {
  padding-bottom: 8px;
  color: var(--text-tertiary);
  font-size: 18px;
  text-align: center;
}
.op-redistribuir-info {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  display: none;
}
.op-redistribuir-info.visible { display: block; }
.op-redistribuir-info strong { color: var(--text-primary); }

/* Modal interno do operation center */
.op-modal-box {
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 90%;
  max-width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.op-modal-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.op-modal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.op-modal-item-name { font-weight: 600; color: var(--text-primary); }
.op-modal-item-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.op-modal-item-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-primary);
}
.op-modal-empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: 13px;
}
.op-modal-empty i {
  font-size: 32px;
  display: block;
  margin-bottom: var(--space-3);
  color: #22C55E;
}

/* Estado vazio / carregando */
.op-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
  font-size: 13px;
  gap: 10px;
}
.op-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Título da página */
.op-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.op-title i { color: var(--brand-primary); font-size: 20px; }

/* Seções */
.op-section {
  margin-bottom: var(--space-6);
}
.op-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.op-section-title i { font-size: 11px; }

/* Card body e variantes */
.op-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.op-card.op-card-blue {
  border-color: #BFDBFE;
  background: #EFF6FF;
}
.op-card.op-card-blue .op-card-label { color: #1D4ED8; }

/* Botão de ação no card */
.op-card-acao {
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  background: none;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: var(--transition-base);
  width: 100%;
}
.op-card-acao:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* Link dentro de alertas */
.op-alerta-link {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.4);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  cursor: pointer;
  color: inherit;
  transition: var(--transition-base);
  white-space: nowrap;
}
.op-alerta-link:hover { opacity: 0.7; }

/* Sem interação — valores por período */
.op-sem-interacao-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.op-sem-int-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 52px;
  gap: 2px;
}
.op-sem-int-item.warn { color: #C2410C; background: rgba(254,215,170,0.4); }
.op-sem-int-item.danger { color: #DC2626; background: rgba(254,202,202,0.5); }
.op-sem-int-val {
  font-size: 18px;
  font-weight: 800;
  color: inherit;
  line-height: 1;
}

/* Formulário de redistribuição */
.op-form-row {
  display: grid;
  grid-template-columns: 1fr 40px 1fr auto;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}
.op-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.op-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.op-form-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  color: var(--text-tertiary);
  font-size: 18px;
}
.op-select {
  height: 38px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-primary);
  cursor: pointer;
  transition: var(--transition-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.op-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.1);
}

/* Resultado da redistribuição */
.op-redistribuir-resultado {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  margin-top: var(--space-3);
}
.op-resultado-success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #15803D;
}
.op-resultado-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
}

/* Nota no modal */
.op-modal-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-primary);
}

/* Erro em tabela */
.op-erro-msg {
  color: #DC2626;
  font-size: 12px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Estado vazio inline */
.op-empty {
  text-align: center;
  padding: var(--space-5);
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Responsivo */
@media (max-width: 768px) {
  .op-page { padding: var(--space-4); }
  .op-cards-grid { grid-template-columns: 1fr 1fr; }
  .op-form-row { grid-template-columns: 1fr; }
  .op-form-arrow { transform: rotate(90deg); }
}