/* ═══════════════════════════════════════════════════
   TAREFAS — layout, cards, filtros, painel, toasts
   ═══════════════════════════════════════════════════ */

/* ─── View container ─── */
#viewTarefas.active {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* ─── Captura rápida ─── */
/* ─── Barra de ações: título + botões ─── */
.tf-captura-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--surface);
}
/* #1: título da tela */
.tf-view-titulo {
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  margin: 0; flex: 1; min-width: 0;
  letter-spacing: -.01em;
}
/* #2: grupo de ações à direita */
.tf-captura-acoes {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
/* #2: label no botão agrupar */
.tf-agrup-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 36px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.tf-agrup-toggle:hover { border-color: var(--primary); color: var(--primary); }
.tf-agrup-toggle.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tf-agrup-toggle svg { width: 15px; height: 15px; }
.tf-agrup-label { font-size: .8rem; }

/* ─── Botão "Nova Tarefa" que abre o wizard ─── */
.tf-wiz-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--btn-primary-bg); color: var(--btn-primary-text); border: none;
  font-size: 1rem; cursor: pointer; flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.tf-wiz-trigger--full {
  width: auto; height: 40px; padding: 0 16px; gap: 7px;
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  flex-shrink: 1;
}
.tf-wiz-trigger:hover { background: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--text)); transform: scale(1.04); }
.tf-wiz-trigger svg { width: 18px; height: 18px; }

/* ─── Filtros ─── */
.tf-filtros {
  padding: 8px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.tf-filtro-bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
/* #4: separador visual entre busca e filtros */
.tf-filtro-separador {
  width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 2px;
}
/* #30: chips de filtros ativos */
.tf-filtro-chips-bar {
  display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px;
}
.tf-filtro-chip-ativo {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--fill-primary); border: 1px solid var(--primary);
  color: var(--primary); border-radius: 999px;
  font-size: .72rem; font-weight: 600; padding: 3px 10px 3px 8px;
  cursor: pointer; transition: background .12s;
}
.tf-filtro-chip-ativo:hover { background: var(--primary); color: #fff; }
.tf-filtro-chip-ativo svg { width: 11px; height: 11px; }
.tf-filtro-busca-wrap {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 160px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0 12px; height: 36px;
  transition: border-color .15s;
}
.tf-filtro-busca-wrap:focus-within { border-color: var(--primary); }
.tf-filtro-busca-wrap svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.tf-filtro-busca-wrap input {
  border: none; outline: none; background: transparent;
  font-size: .85rem; color: var(--text); font-family: inherit; width: 100%;
}
.tf-filtro-select {
  height: 36px; padding: 0 10px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font-size: .82rem; font-family: inherit;
  cursor: pointer; outline: none; transition: border-color .15s;
}
.tf-filtro-select:focus { border-color: var(--primary); }

/* ─── Lista ─── */
.tf-lista {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
/* #25: estado vazio com mensagem clara */
.tf-loading, .tf-vazio {
  text-align: center; padding: 48px 20px;
  font-size: .875rem; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tf-vazio-icon { font-size: 2rem; opacity: .3; margin-bottom: 4px; }

/* ─── Grupo ─── */
/* #8: título com badge de count bem separado e legível */
.tf-grupo-titulo {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.3; color: var(--text-muted);
  padding: 0 0 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.tf-grupo-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--warm-muted);
}
.tf-grupo[data-grupo="atrasado"] .tf-grupo-dot { background: var(--error); }
.tf-grupo[data-grupo="hoje"]     .tf-grupo-dot { background: var(--warning); }
.tf-grupo[data-grupo="semana"]   .tf-grupo-dot { background: #3B7BB0; }
.tf-grupo[data-grupo="futuro"]   .tf-grupo-dot { background: var(--warm-muted); }
.tf-grupo[data-grupo="sem_data"] .tf-grupo-dot { background: var(--warm-muted); }
.tf-grupo-count {
  background: var(--surface-raised); color: var(--text-secondary);
  font-size: .68rem; border-radius: 999px; padding: 1px 8px; font-weight: 700;
  border: 1px solid var(--border);
}
.tf-grupo { display: flex; flex-direction: column; gap: 6px; }
.tf-grupo-items { display: flex; flex-direction: column; gap: 6px; }

/* ─── Modo Manual ─── */
.tf-manual-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--text-muted);
  padding: 0 0 10px; user-select: none;
}
.tf-manual-hint svg { width: 14px; height: 14px; }
.tf-manual-lista { gap: 4px; }
.tf-item--manual { cursor: default; }
.tf-manual-handle {
  display: flex; align-items: center; padding: 0 6px 0 0;
  color: var(--text-muted); cursor: grab; flex-shrink: 0;
}
.tf-manual-handle:active { cursor: grabbing; }
.tf-manual-handle svg { width: 16px; height: 16px; }
.tf-drag--ghost { opacity: .35; }
.tf-drag--over { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.tf-futuras-toggle {
  background: none; border: none; color: var(--primary);
  font-size: .72rem; font-weight: 600; cursor: pointer;
  padding: 0 6px; text-decoration: underline; margin-left: auto;
}
.tf-futuras-toggle:hover { opacity: .75; }

/* ─── Card ─── */
.tf-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  cursor: pointer; transition: border-color .15s, transform .1s, opacity .3s;
  min-height: 60px;
}
.tf-card:hover { border-color: var(--primary); }
.tf-card--concluindo { opacity: .6; }
.tf-card--concluido  { opacity: 0; transform: translateX(40px); }

.tf-concluir-btn {
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%; border: 2px solid var(--border);
  background: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tf-concluir-btn:hover { border-color: var(--success); color: var(--success); background: var(--fill-success); }
.tf-concluir-btn svg { width: 14px; height: 14px; }

.tf-card-body { flex: 1; min-width: 0; }
.tf-card-row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
/* #12: ícone de tipo mais visível */
.tf-tipo-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
  background: var(--fill-primary); color: var(--primary);
}
.tf-tipo-icon svg { width: 14px; height: 14px; }
.tf-titulo {
  font-size: .875rem; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-prio {
  flex-shrink: 0; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
}
.tf-prio--alta   { background: #F5E0E0; color: #9B2A2A; }
.tf-prio--media  { background: #FAF0CC; color: #7A5B22; }
.tf-prio--baixa  { background: var(--warm-raised); color: var(--ink-500); }

.tf-card-row2 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* #13: empresa sem all-caps — text-transform none, usa dado do banco */
.tf-neg-badge {
  font-size: .68rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 2px 8px; border-radius: 999px; color: #fff;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block;
}
.tf-neg-carbono_zero { background: var(--cz); color: var(--cz-fg); }
.tf-neg-tarmac       { background: var(--tm); color: var(--tm-fg); }
.tf-neg-elevator     { background: var(--el); color: var(--el-fg); }
.tf-neg-todos        { background: var(--ink-400); }

.tf-empresa-link {
  border: none; cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px;
}
.tf-empresa-link:not(.tf-neg-badge) {
  background: none; padding: 0;
  font-size: .78rem; color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px;
}
.tf-empresa-link:not(.tf-neg-badge) svg { width: 11px; height: 11px; }
.tf-empresa-link:not(.tf-neg-badge):hover { color: var(--ink-800); }

/* empresa como badge colorido do negócio */
.tf-empresa-link.tf-neg-badge {
  text-decoration: none; font-size: .68rem; font-weight: 700;
  letter-spacing: .01em; padding: 2px 8px;
}
.tf-empresa-link.tf-neg-badge:hover { opacity: .85; color: inherit; }

.tf-data {
  font-size: .75rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 3px;
}
.tf-data svg { width: 11px; height: 11px; }

/* ─── Badge sidebar ─── */
.sidebar-badge {
  position: absolute; top: -5px; right: -8px;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 4px; line-height: 1;
}
.bottom-nav-badge {
  position: absolute; top: 4px; right: 12px;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 4px; line-height: 1; pointer-events: none;
}

/* ─── Painel de detalhes ─── */
.tf-detalhe-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
}
.tf-detalhe-overlay.open { display: block; }

.tf-detalhe {
  position: fixed; top: 50%; left: 50%;
  width: 480px; max-width: 96vw; max-height: 90dvh;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  transform: translate(-50%, -48%) scale(.97);
  opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 201; overflow: hidden;
}
.tf-detalhe.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

.tf-det-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tf-det-tipo-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 700; color: var(--primary);
}
.tf-det-tipo-badge svg { width: 16px; height: 16px; }

/* Banner de atraso com chips de remarcação */
.tf-remarcar-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 20px; background: var(--fill-danger); border-bottom: 1px solid var(--border-danger);
  font-size: .82rem; color: var(--danger); flex-shrink: 0; flex-wrap: wrap;
}
.tf-remarcar-banner svg { width: 14px; height: 14px; }
.tf-remarcar-chips { display: flex; gap: 5px; }
.tf-remarcar-chip {
  padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  border: 1.5px solid currentColor; background: transparent; color: var(--danger);
  cursor: pointer; transition: background .12s;
}
.tf-remarcar-chip:hover { background: var(--danger); color: #fff; }

/* Body */
.tf-det-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.tf-det-label {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 4px;
}

/* Título maior */
.tf-det-titulo {
  font-size: 1rem; font-weight: 600; padding: 10px 12px;
}

/* Linha de dois campos */
.tf-det-row2 { display: flex; gap: 10px; }
.tf-det-col  { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tf-det-input {
  width: 100%; padding: 9px 10px; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .875rem; font-family: inherit;
  background: var(--bg); color: var(--text); outline: none; transition: border-color .15s;
  box-sizing: border-box; min-height: 40px;
}
.tf-det-input:focus { border-color: var(--primary); }
textarea.tf-det-input { resize: vertical; min-height: 72px; }

/* Empresa: nome clicável + badge + trocar */
.tf-det-empresa-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tf-det-empresa-nome {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: transparent; transition: text-decoration-color .15s;
  text-align: left;
}
.tf-det-empresa-nome:hover { text-decoration-color: currentColor; }
.tf-det-empresa-trocar {
  background: none; border: none; cursor: pointer; font-size: .72rem;
  color: var(--text-muted); padding: 2px 0; margin-left: auto;
  text-decoration: underline; text-underline-offset: 2px;
}
.tf-det-empresa-trocar:hover { color: var(--text); }

.tf-det-sugs {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 2px;
}
.tf-det-sugs:empty { display: none; }
.tf-det-sug {
  padding: 9px 12px; font-size: .875rem; cursor: pointer;
  transition: background .1s; border-top: 1px solid var(--border);
}
.tf-det-sug:first-child { border-top: none; }
.tf-det-sug:hover { background: var(--bg); color: var(--primary); }

/* Prioridade como botões */
.tf-prio-btns {
  display: flex; gap: 6px;
}
.tf-prio-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-radius: var(--radius); font-size: .8rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border); background: transparent;
  color: var(--text-muted); transition: all .12s; min-height: 40px;
}
.tf-prio-btn svg { width: 13px; height: 13px; }
.tf-prio-btn--alta.active  { background: #fef2f2; color: #dc2626; border-color: #dc2626; }
.tf-prio-btn--media.active { background: #fffbeb; color: #d97706; border-color: #d97706; }
.tf-prio-btn--baixa.active { background: #f0fdf4; color: #16a34a; border-color: #16a34a; }
.tf-prio-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

/* Bloco "Quando" */
.tf-det-quando {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.tf-det-quando-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px; margin-bottom: 2px;
}
.tf-det-quando-label svg { width: 12px; height: 12px; }

/* Chips de hora rápida */
.tf-hora-chips {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.tf-hora-chip {
  padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all .12s; min-height: 30px;
}
.tf-hora-chip:hover, .tf-hora-chip.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Preview de próxima recorrência */
.tf-rec-preview {
  font-size: .75rem; color: var(--text-muted); margin-top: 4px;
  padding: 4px 8px; background: var(--surface-raised); border-radius: var(--radius);
}

/* Ações */
.tf-det-acoes {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.tf-det-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radius);
  font-size: .88rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; transition: opacity .15s, transform .1s;
}
.tf-det-btn:active { transform: scale(.97); }
.tf-det-btn--concluir {
  background: var(--success, #22c55e); color: #fff; border-color: var(--success, #22c55e);
}
.tf-det-btn--concluir:hover { opacity: .88; }
.tf-det-btn--cancelar {
  background: transparent; color: var(--text-muted); border-color: var(--border);
  margin-left: auto;
}
.tf-det-btn--cancelar:hover { border-color: var(--danger); color: var(--danger); }

/* ─── Botão flutuante mobile ─── */
.tf-fab {
  display: none;
  position: absolute; bottom: 80px; right: 16px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-lg);
  align-items: center; justify-content: center; z-index: 100;
  transition: transform .15s;
}
.tf-fab svg { width: 22px; height: 22px; }
.tf-fab:hover { transform: scale(1.08); }

/* ─── Toasts ─── */
.tf-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 10px 20px; border-radius: 999px;
  font-size: .875rem; font-weight: 600; color: #fff;
  opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 999; white-space: nowrap; pointer-events: none;
}
.tf-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tf-toast--ok   { background: var(--success); }
.tf-toast--info { background: var(--primary); }
.tf-toast--erro { background: var(--danger); }

.tf-undo-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink-900, #1a1a1a); border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg); z-index: 999;
  font-size: .85rem; color: #fff;
  opacity: 0; transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .tf-undo-toast { background: var(--surface-raised); border: 1px solid var(--border); }
}
:root[data-theme="dark"] .tf-undo-toast { background: var(--surface-raised); border: 1px solid var(--border); }
.tf-undo-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tf-undo-btn {
  background: none; border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 6px; padding: 4px 10px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s;
}
.tf-undo-btn:hover { border-color: #fff; }

.tf-followup-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lg); z-index: 998;
  font-size: .85rem; color: var(--text);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.tf-followup-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tf-fu-sim {
  background: var(--primary); color: #fff; border: none;
  border-radius: 999px; padding: 5px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.tf-fu-sim:hover { background: var(--ink-800); }
.tf-fu-nao {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem;
  cursor: pointer; transition: all .15s;
}
.tf-fu-nao:hover { border-color: var(--danger); color: var(--danger); }

/* ─── Funil badge (label do status no card de tarefa) ─── */
/* #14: funil badge sem uppercase — lê inteiro sem truncar */
.tf-funil-badge {
  display: inline-block; font-size: .65rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); vertical-align: middle; white-space: nowrap;
}
.tf-funil-novo_lead         { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-200); }
.tf-funil-primeiro_contato  { background: #EEF6FF;        color: #2563EB;        border-color: #BFDBFE; }
.tf-funil-em_negociacao     { background: #FFF7ED;        color: #C2410C;        border-color: #FED7AA; }
.tf-funil-proposta_enviada  { background: #F5F3FF;        color: #7C3AED;        border-color: #DDD6FE; }
.tf-funil-homologacao       { background: #FFFBEB;        color: #B45309;        border-color: #FDE68A; }
.tf-funil-fechado           { background: var(--ink-100);  color: var(--ink-500);  border-color: var(--ink-200); }
.tf-funil-perdido           { background: #FFF1F2;        color: #BE123C;        border-color: #FECDD3; }
.tf-funil-cliente_ativo     { background: #F0F9FF;        color: #0369A1;        border-color: #BAE6FD; }
.tf-funil-reativacao        { background: #FDF4FF;        color: #9333EA;        border-color: #E9D5FF; }

/* ─── Toast funil (avançar no funil após concluir tarefa) ─── */
.tf-funil-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 14px 18px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 280px; max-width: 340px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.tf-funil-toast--show {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.tf-funil-toast-titulo {
  font-size: .82rem; font-weight: 700; color: var(--text);
}
.tf-funil-toast-sub {
  font-size: .78rem; color: var(--text-muted); margin-top: -6px;
}
.tf-funil-toast-acoes {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tf-funil-toast-acoes .btn {
  flex: 1; min-width: 80px; font-size: .8rem; padding: 7px 12px; justify-content: center;
}

/* ─── Toggle agrupar por empresa — label oculto em telas estreitas ─── */
@media (max-width: 900px) {
  .tf-agrup-label { display: none; }
  .tf-agrup-toggle { padding: 0 10px; }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .tf-captura-bar { padding: 10px 10px; }
  .tf-filtros { padding: 6px 10px; }
  /* M01+M02: scroll horizontal — sem wrap, sem truncamento */
  .tf-filtro-bar {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .tf-filtro-bar::-webkit-scrollbar { display: none; }
  .tf-filtro-busca-wrap { flex: 0 0 160px; min-width: 0; }
  .tf-filtro-select { flex-shrink: 0; font-size: .8rem; line-height: 1.2; padding: 0 8px; }
  .tf-lista { padding: 10px 10px; }
  /* M03: FAB removido — botão "Nova Tarefa" no header é suficiente */
  .tf-fab { display: none; }
  /* Bottom sheet no mobile */
  .tf-detalhe {
    width: 100%; max-width: 100%;
    top: auto; bottom: 0; left: 0; right: 0;
    height: 92dvh; max-height: 92dvh;
    border-radius: 18px 18px 0 0; border: none;
    border-top: 1px solid var(--border);
    transform: translate(0, 100%) scale(1);
    opacity: 1;
    box-shadow: 0 -8px 40px rgba(0,0,0,.2);
  }
  .tf-detalhe.open { transform: translate(0, 0) scale(1); opacity: 1; }
  .tf-det-header::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--border); border-radius: 2px;
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  }
  .tf-det-header { position: relative; }
  .tf-det-acoes { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  /* Tap targets maiores */
  .tf-det-input, .tf-det-btn, .tf-prio-btn, .tf-hora-chip, .tf-remarcar-chip { min-height: 44px; }
  .tf-det-titulo { font-size: 1.05rem; }
  .tf-det-row2 { flex-direction: column; }
  .tf-det-acoes { flex-direction: column; }
  .tf-det-btn { width: 100%; justify-content: center; }
  .tf-det-btn--cancelar { margin-left: 0; }
  .tf-toast, .tf-followup-toast { bottom: 72px; }
  .tf-ia-panel { padding: 12px 14px; }
  /* M11: timeline — dias com altura mínima de toque */
  .tf-tl-day { min-height: 56px; }
  /* M19: barra de progresso com padding mobile */
  .tf-barra-extra { padding: 8px 10px; }
  /* M18: wizard empresa — lista scrollável com altura maior no mobile */
  .tf-wiz-emp-lista { max-height: calc(50vh - 80px); }
}

@media (max-width: 640px) {
  /* M06: esconde barra de ações no iPhone — FAB substitui */
  .tf-captura-bar { display: none; }
  /* M07+M08: ações rápidas sempre visíveis no touch (sem hover) */
  .tf-item-acoes { opacity: 1; }
  .tf-item-acao-btn { width: 36px; height: 36px; }
  /* M07: nota inline acessível via toque */
  .tf-nota-inline { padding-left: 12px; }
  /* M11: timeline — botões mais altos para toque */
  .tf-tl-day { min-height: 60px; }
  .tf-tl-nav { width: 32px; }
  /* FAB volta no iPhone (foi escondido no ≤768px, reativa aqui) */
  .tf-fab { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .tf-prio--alta  { background: #450a0a; color: #EFA8A8; }
  .tf-prio--media { background: #451a03; color: #E8C97A; }
  .tf-prio--baixa { background: var(--ink-700); color: var(--ink-300); }
  .tf-remarcar-banner { background: #450a0a; border-color: #6B1F1F; }

  .tf-funil-novo_lead         { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
  .tf-funil-primeiro_contato  { background: rgba(37,99,235,.14);  color: #93C5FD; border-color: rgba(37,99,235,.30); }
  .tf-funil-em_negociacao     { background: var(--fill-warn);     color: var(--text-warn);    border-color: var(--border-warn); }
  .tf-funil-proposta_enviada  { background: rgba(124,58,237,.14); color: #C4B5FD; border-color: rgba(124,58,237,.30); }
  .tf-funil-homologacao       { background: var(--fill-gold);     color: var(--text-gold);    border-color: var(--border-gold); }
  .tf-funil-fechado           { background: var(--fill-success);  color: var(--text-success); border-color: var(--border-success); }
  .tf-funil-perdido           { background: var(--fill-danger);   color: var(--text-danger);  border-color: var(--border-danger); }
  .tf-funil-cliente_ativo     { background: rgba(3,105,161,.14);  color: #7DD3FC; border-color: rgba(3,105,161,.30); }
  .tf-funil-reativacao        { background: rgba(147,51,234,.14); color: #D8B4FE; border-color: rgba(147,51,234,.30); }

  .tf-item { box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px var(--border); }
  .tf-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px var(--border); }
  .tf-progress-track { background: rgba(255,255,255,.14); }
}
:root[data-theme="dark"] .tf-prio--alta  { background: #450a0a; color: #EFA8A8; }
:root[data-theme="dark"] .tf-prio--media { background: #451a03; color: #E8C97A; }
:root[data-theme="dark"] .tf-prio--baixa { background: var(--ink-700); color: var(--ink-300); }

:root[data-theme="dark"] .tf-funil-novo_lead         { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
:root[data-theme="dark"] .tf-funil-primeiro_contato  { background: rgba(37,99,235,.14);  color: #93C5FD; border-color: rgba(37,99,235,.30); }
:root[data-theme="dark"] .tf-funil-em_negociacao     { background: var(--fill-warn);     color: var(--text-warn);    border-color: var(--border-warn); }
:root[data-theme="dark"] .tf-funil-proposta_enviada  { background: rgba(124,58,237,.14); color: #C4B5FD; border-color: rgba(124,58,237,.30); }
:root[data-theme="dark"] .tf-funil-homologacao       { background: var(--fill-gold);     color: var(--text-gold);    border-color: var(--border-gold); }
:root[data-theme="dark"] .tf-funil-fechado           { background: var(--fill-success);  color: var(--text-success); border-color: var(--border-success); }
:root[data-theme="dark"] .tf-funil-perdido           { background: var(--fill-danger);   color: var(--text-danger);  border-color: var(--border-danger); }
:root[data-theme="dark"] .tf-funil-cliente_ativo     { background: rgba(3,105,161,.14);  color: #7DD3FC; border-color: rgba(3,105,161,.30); }
:root[data-theme="dark"] .tf-funil-reativacao        { background: rgba(147,51,234,.14); color: #D8B4FE; border-color: rgba(147,51,234,.30); }

:root[data-theme="dark"] .tf-item { box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px var(--border); }
:root[data-theme="dark"] .tf-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px var(--border); }
:root[data-theme="dark"] .tf-progress-track { background: rgba(255,255,255,.14); }

/* ═══════════════════════════════════════════
   WIZARD — Criação guiada de tarefa
   ═══════════════════════════════════════════ */

/* Overlay */
.tf-wiz-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 600;
  opacity: 0; transition: opacity .25s;
}
.tf-wiz-overlay.open { opacity: 1; }

/* Painel (desktop: modal; mobile: bottom sheet) */
.tf-wizard {
  position: fixed; z-index: 601;
  top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 12px)) scale(.97);
  width: 460px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transition: opacity .25s, transform .25s;
  max-height: 90vh;
}
.tf-wizard.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Cabeçalho */
.tf-wiz-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tf-wiz-btn-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.tf-wiz-btn-icon:hover { background: var(--bg); color: var(--text); }
.tf-wiz-btn-icon svg { width: 18px; height: 18px; }

/* Progress dots */
.tf-wiz-progress {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tf-wiz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background .2s, transform .2s;
}
.tf-wiz-dot.active { background: var(--primary); transform: scale(1.2); }
.tf-wiz-prog-label { font-size: .75rem; font-weight: 700; color: var(--primary); letter-spacing: .04em; }

/* Body */
.tf-wiz-body {
  flex: 1; overflow-y: auto;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
}

/* Título do step */
.tf-wiz-h {
  font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0;
}
.tf-wiz-opcional { font-size: .78rem; font-weight: 400; color: var(--text-muted); }

/* ── Step 1: negócio ── */
.tf-wiz-neg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tf-wiz-neg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: .88rem; font-weight: 600;
  color: var(--text); transition: all .15s;
}
.tf-wiz-neg-btn svg { width: 24px; height: 24px; }
.tf-wiz-neg-btn:hover  { border-color: var(--primary); background: var(--warm-raised); }
.tf-wiz-neg-btn.selected { border-color: var(--primary); background: #EEF3FF; color: var(--primary); }
.tf-wiz-neg-btn.cz { --neg-c: var(--cz); }
.tf-wiz-neg-btn.tm { --neg-c: var(--tm); }
.tf-wiz-neg-btn.el { --neg-c: var(--el); }
.tf-wiz-neg-btn.cz:hover, .tf-wiz-neg-btn.cz.selected { border-color: var(--cz); color: var(--cz); background: #f0fdf4; }
.tf-wiz-neg-btn.tm:hover, .tf-wiz-neg-btn.tm.selected { border-color: var(--tm); color: var(--tm); background: #fefce8; }
.tf-wiz-neg-btn.el:hover, .tf-wiz-neg-btn.el.selected { border-color: var(--el); color: var(--el); background: #eff6ff; }

/* ── Step 2: empresa ── */
.tf-wiz-busca-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0 12px;
  transition: border-color .15s;
}
.tf-wiz-busca-wrap:focus-within { border-color: var(--primary); }
.tf-wiz-busca-wrap svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.tf-wiz-busca-input {
  flex: 1; padding: 10px 0; border: none; background: transparent;
  font-size: .9rem; font-family: inherit; color: var(--text); outline: none;
}
.tf-wiz-emp-lista {
  display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto;
}
.tf-wiz-emp-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; text-align: left;
  transition: all .12s; width: 100%;
}
.tf-wiz-emp-item:hover  { border-color: var(--primary); background: var(--warm-raised); }
.tf-wiz-emp-item.selected { border-color: var(--primary); background: var(--fill-primary, #EEF3FF); }
.tf-wiz-emp-nome { font-size: .88rem; font-weight: 600; color: var(--text); }
.tf-wiz-emp-seg  { font-size: .75rem; color: var(--text-muted); }
.tf-wiz-vazio    { font-size: .85rem; color: var(--text-muted); padding: 12px 0; text-align: center; }

/* ── Step 3: título ── */
.tf-wiz-input-lg {
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; color: var(--text); background: var(--bg);
  outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.tf-wiz-input-lg:focus   { border-color: var(--primary); }
.tf-wiz-input-lg[type=time] { max-width: 180px; }

/* ── Step 4: tipo ── */
.tf-wiz-tipo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.tf-wiz-tipo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--text); transition: all .12s; text-align: center;
}
.tf-wiz-tipo-btn svg { width: 22px; height: 22px; }
.tf-wiz-tipo-btn:hover  { border-color: var(--primary); background: var(--warm-raised); color: var(--primary); }
.tf-wiz-tipo-btn.selected { border-color: var(--primary); background: #EEF3FF; color: var(--primary); }

/* ── Step 5: quando ── */
.tf-wiz-quando-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.tf-wiz-quando-grid .tf-wiz-quando-btn:last-child:nth-child(odd) {
  grid-column: span 2;
}
.tf-wiz-quando-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: .9rem; font-weight: 600;
  color: var(--text); transition: all .12s;
}
.tf-wiz-quando-btn svg { width: 20px; height: 20px; }
.tf-wiz-quando-btn:hover  { border-color: var(--primary); background: var(--warm-raised); }
.tf-wiz-quando-btn.selected { border-color: var(--primary); background: var(--fill-primary, #EEF3FF); color: var(--primary); }
.tf-wiz-data-custom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tf-wiz-date-input {
  padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-family: inherit; color: var(--text); background: var(--bg);
  outline: none; transition: border-color .15s;
}
.tf-wiz-date-input:focus { border-color: var(--primary); }

/* ── Step 7: prioridade ── */
.tf-wiz-prio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tf-wiz-prio-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: .88rem; font-weight: 600;
  color: var(--text); transition: all .12s;
}
.tf-wiz-prio-btn svg { width: 22px; height: 22px; }
.tf-wiz-prio-btn:hover { border-color: currentColor; }
.tf-wiz-prio-btn.selected { border-color: currentColor; }
.tf-wiz-prio-btn.prio-alta  { color: var(--danger); }
.tf-wiz-prio-btn.prio-media { color: var(--warn); }
.tf-wiz-prio-btn.prio-baixa { color: var(--text-muted); }
.tf-wiz-prio-btn.prio-alta.selected  { background: var(--fill-danger,  #FFF1F2); }
.tf-wiz-prio-btn.prio-media.selected { background: var(--fill-warn,   #FFFBEB); }
.tf-wiz-prio-btn.prio-baixa.selected { background: var(--bg); }

/* ── Step 8: confirmação ── */
.tf-wiz-resumo {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.tf-wiz-res-row {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--text-muted);
}
.tf-wiz-res-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.tf-wiz-res-titulo {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  padding-left: 2px;
}

/* ── Sucesso ── */
.tf-wiz-sucesso {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 0;
  font-size: 1.1rem; font-weight: 700; color: var(--success);
}
.tf-wiz-sucesso svg { width: 52px; height: 52px; }

/* ── Elementos compartilhados ── */
.tf-wiz-skip-link {
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  font-size: .82rem; color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 3px; transition: color .15s; text-align: left;
}
.tf-wiz-skip-link:hover { color: var(--text); }
.tf-wiz-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  font-size: .82rem; color: var(--primary); transition: opacity .15s;
}
.tf-wiz-link-btn:hover { opacity: .8; }
.tf-wiz-link-btn svg { width: 14px; height: 14px; }
.tf-wiz-next-btn {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 6px;
}
.tf-wiz-next-btn svg { width: 16px; height: 16px; }
.tf-wiz-row-acoes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
}
@keyframes tf-wiz-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}
.tf-wiz-shake { animation: tf-wiz-shake .35s ease; }

/* ── Mobile: bottom sheet ── */
@media (max-width: 767px) {
  .tf-wizard {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%; max-height: 90vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(20px); opacity: 0;
    transition: opacity .25s, transform .25s;
  }
  .tf-wizard.open { transform: translateY(0); opacity: 1; }
  .tf-wiz-neg-grid { grid-template-columns: repeat(3, 1fr); }
  /* M04: 4 colunas de tipo com células compactas no mobile */
  .tf-wiz-tipo-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tf-wiz-tipo-btn { padding: 10px 4px; font-size: .72rem; line-height: 1.25; gap: 5px; }
  .tf-wiz-tipo-btn svg { width: 18px; height: 18px; }
  .tf-wiz-body { padding: 20px 18px 32px; }
}

/* ── Dark theme ── */
@media (prefers-color-scheme: dark) {
  .tf-wiz-neg-btn.cz.selected { background: #052e16; }
  .tf-wiz-neg-btn.tm.selected { background: #1c1400; }
  .tf-wiz-neg-btn.el.selected { background: #0c1a3a; }
  .tf-wiz-tipo-btn.selected, .tf-wiz-quando-btn.selected, .tf-wiz-emp-item.selected { background: #1e2a4a; }
  .tf-wiz-prio-btn.prio-alta.selected  { background: #2c0a0f; }
  .tf-wiz-prio-btn.prio-media.selected { background: #2c1a08; }
}
:root[data-theme="dark"] .tf-wiz-neg-btn.cz.selected { background: #052e16; }
:root[data-theme="dark"] .tf-wiz-neg-btn.tm.selected { background: #2c1a08; }
:root[data-theme="dark"] .tf-wiz-neg-btn.el.selected { background: #1e1230; }
:root[data-theme="dark"] .tf-wiz-tipo-btn.selected,
:root[data-theme="dark"] .tf-wiz-quando-btn.selected,
:root[data-theme="dark"] .tf-wiz-emp-item.selected { background: #1e2a4a; }
:root[data-theme="dark"] .tf-wiz-prio-btn.prio-alta.selected  { background: #2c0a0f; }
:root[data-theme="dark"] .tf-wiz-prio-btn.prio-media.selected { background: #2c1a08; }

/* ═══════════════════════════════════════════
   TAREFAS v2 — Redesign completo
   ═══════════════════════════════════════════ */

/* ─── Barra extra: progresso + modo foco ─── */
/* #6: separação clara entre dado (progresso) e ação (modo foco) */
.tf-barra-extra {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.tf-progress-wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tf-progress-label { font-size: .75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* #7: barra com max-width para não parecer vazia */
.tf-progress-track {
  flex: 1; max-width: 280px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden;
}
.tf-progress-fill {
  height: 100%; background: var(--success, #22c55e); border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
/* #6/#27: modo foco separado por border-left, com tooltip */
.tf-barra-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.tf-foco-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0;
  position: relative;
}
.tf-foco-btn svg { width: 13px; height: 13px; }
.tf-foco-btn:hover { border-color: var(--gold-600); color: var(--gold-600); }
.tf-foco-btn.active { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }
/* #27: tooltip explicativo */
.tf-foco-btn::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink-900, #1a1a1a); color: #fff;
  font-size: .7rem; font-weight: 400; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.tf-foco-btn:hover::after { opacity: 1; }

/* ─── Item v2 ─── */
.tf-item {
  display: flex; align-items: stretch;
  background: var(--surface); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  cursor: pointer; transition: box-shadow .18s, transform .12s, opacity .3s;
  position: relative; overflow: hidden; min-height: 52px;
}
/* D09: hover mais expressivo + borda de acento para affordance de clique */
.tf-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 1.5px var(--primary);
  transform: translateY(-1px);
}
.tf-item--concluindo { opacity: .4; pointer-events: none; transform: scale(.98); }
/* #26: animação de conclusão — desliza e encolhe */
@keyframes tf-concluir-saida {
  0%   { opacity: 1; transform: scaleY(1); max-height: 200px; }
  40%  { opacity: 0; transform: scaleY(.8) translateX(20px); }
  100% { opacity: 0; transform: scaleY(0); max-height: 0; padding: 0; margin: 0; }
}
.tf-item--concluido { animation: tf-concluir-saida .35s ease forwards; overflow: hidden; }

/* #10: stripe de prioridade mais visível */
.tf-item-stripe { width: 5px; flex-shrink: 0; border-radius: 10px 0 0 10px; background: transparent; }
.tf-prio-alta  .tf-item-stripe { background: var(--danger); }
.tf-prio-media .tf-item-stripe { background: var(--warn); }
.tf-prio-baixa .tf-item-stripe { background: var(--border); }

.tf-item-inner {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px;
}

/* #11: botão concluir — affordance de checkbox, não radio */
.tf-item .tf-concluir-btn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--border); background: none; cursor: pointer;
  color: transparent; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tf-item .tf-concluir-btn:hover { border-color: var(--success); color: var(--success); background: var(--fill-success); }
.tf-item .tf-concluir-btn svg   { width: 12px; height: 12px; }

/* Corpo */
.tf-item-body { flex: 1; min-width: 0; }
.tf-item-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tf-item-titulo {
  font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* D04: gap maior entre badges empresa/status */
.tf-item-row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Data colorida */
.tf-data-colorida {
  font-size: .72rem; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 3px;
}
.tf-data-colorida svg { width: 11px; height: 11px; }
/* D07: gradação de cor por severidade do atraso */
.tf-data--atrasado        { color: var(--danger); }
.tf-data--atrasado-leve   { color: var(--warn); }
.tf-data--atrasado-medio  { color: #EA580C; }
.tf-data--atrasado-critico{ color: var(--danger); font-weight: 700; }
.tf-data--hoje     { color: var(--success); font-weight: 700; }
.tf-data--amanha   { color: var(--warn); }
.tf-data--semana   { color: var(--text-secondary); }
.tf-data--futuro   { color: var(--text-muted); }
.tf-data--sem_data { color: var(--text-muted); font-style: italic; }

/* Ações rápidas */
.tf-item-acoes {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0; opacity: 0; transition: opacity .15s;
}
.tf-item:hover .tf-item-acoes,
.tf-item--focus .tf-item-acoes { opacity: 1; }
.tf-item-acao-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  border-radius: 6px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tf-item-acao-btn:hover { background: var(--bg); color: var(--text); }
.tf-item-acao-btn svg { width: 14px; height: 14px; }

/* ─── Popover reagendar ─── */
.tf-reagendar-pop {
  display: none; position: fixed; z-index: 9999;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 4px; min-width: 150px; flex-direction: column; gap: 2px;
}
.tf-reagendar-pop.open { display: flex; }
.tf-reagendar-opt {
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 7px 12px; border-radius: 6px; font-size: .82rem;
  color: var(--text); font-family: inherit; white-space: nowrap;
}
.tf-reagendar-opt:hover { background: var(--surface-raised); }

/* Nota inline */
.tf-nota-inline {
  padding: 0 12px 10px 54px; display: none; flex-direction: column; gap: 4px;
}
.tf-nota-inline.open { display: flex; }
.tf-nota-input {
  width: 100%; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: .8rem; font-family: inherit; color: var(--text);
  background: var(--bg); resize: none; outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.tf-nota-input:focus { border-color: var(--primary); }
.tf-nota-save {
  font-size: .72rem; color: var(--primary); background: none; border: none;
  cursor: pointer; padding: 0; font-weight: 600; align-self: flex-end;
  transition: opacity .15s;
}
.tf-nota-save:hover { opacity: .7; }

/* Drag-to-reorder */
.tf-item[draggable="true"] { user-select: none; }
.tf-item--dragging { opacity: .4; }
.tf-item--drag-over::before {
  content: ''; display: block; height: 2px;
  background: var(--primary); border-radius: 999px;
  margin: -1px 0 1px;
}

/* #19: grupo hoje com fundo levemente diferenciado */
.tf-grupo--hoje { padding: 10px 12px; background: var(--fill-success); border-radius: 10px; margin-bottom: 4px; }
.tf-grupo--hoje > .tf-grupo-titulo { color: var(--text-success); border-bottom-color: var(--border-success); }
.tf-grupo--hoje > .tf-grupo-titulo::after {
  content: ''; flex: 1; height: 1px; background: var(--border-success);
}
/* #9: item atrasado critico com fundo levemente tingido */
.tf-grupo[data-grupo="atrasado"] .tf-item { border-color: var(--border-danger); }
.tf-data--atrasado-critico ~ * .tf-item-titulo,
.tf-prio-alta .tf-item-titulo { }
/* Grupo atrasado: badge de count em vermelho */
.tf-grupo[data-grupo="atrasado"] .tf-grupo-count {
  background: var(--fill-danger); color: var(--danger); border-color: var(--border-danger);
}

/* Item de reunião do dia */
.tf-reuniao-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--fill-gold); border: 1px solid var(--border-gold);
  border-radius: 10px; padding: 10px 14px; cursor: default;
}
.tf-reuniao-time {
  font-size: .72rem; font-weight: 700; color: var(--text-gold);
  white-space: nowrap; flex-shrink: 0;
}
.tf-reuniao-titulo {
  font-size: .875rem; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Teclado: item focado */
.tf-item--focus {
  box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(0,0,0,.10) !important;
}

/* Card "Próxima ação" — D02: compacto */
.tf-proxima-acao {
  display: flex; align-items: center; gap: 12px;
  background: var(--fill-gold); border: 1.5px solid var(--border-gold);
  border-radius: 12px; padding: 10px 14px;
}
.tf-proxima-acao-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: var(--gold-600); display: flex; align-items: center; justify-content: center; color: #fff;
}
.tf-proxima-acao-icon svg { width: 18px; height: 18px; }
.tf-proxima-acao-body { flex: 1; min-width: 0; }
.tf-proxima-acao-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-gold); margin-bottom: 2px;
}
.tf-proxima-acao-titulo {
  font-size: .9rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-proxima-acao-empresa { font-size: .75rem; color: var(--text-muted); }
/* D11: botão outline — menos dominante que filled */
.tf-proxima-acao-start {
  flex-shrink: 0; background: transparent; color: var(--text-gold);
  border: 1.5px solid var(--border-gold);
  border-radius: 8px; padding: 6px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.tf-proxima-acao-start:hover { background: var(--gold-600); color: #fff; }

/* ─── Seção de concluídas ─── */
.tf-concluidas-section { margin-top: 4px; }
.tf-concluidas-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
  padding: 4px 0; transition: color .15s; width: 100%;
}
.tf-concluidas-toggle:hover { color: var(--success); }
.tf-concluidas-toggle svg { width: 12px; height: 12px; }
.tf-item--concluida { cursor: default; }
.tf-item--concluida:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05); }
.tf-item--concluida .tf-item-acoes { display: none; }

/* ─── Timeline de dias ─── */
/* #5: timeline mais compacta + #23: fade nas bordas */
.tf-timeline {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.tf-timeline::-webkit-scrollbar { display: none; }

/* #22: day mais compacto, hoje bem diferenciado */
.tf-tl-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg);
  transition: all .15s; min-width: 54px;
}
@media (prefers-color-scheme: dark) {
  .tf-tl-day:not(.active) { background: var(--surface-raised); border-color: rgba(255,255,255,.12); }
}
:root[data-theme="dark"] .tf-tl-day:not(.active) { background: var(--surface-raised); border-color: rgba(255,255,255,.12); }
.tf-tl-day:hover { border-color: var(--primary); background: var(--surface-raised); }
/* #22: active com ring mais forte */
.tf-tl-day.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
.tf-tl-day.hoje:not(.active) {
  border-color: var(--success); background: var(--fill-success); color: var(--text-success);
  font-weight: 700;
}
.tf-tl-diaNome {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.2; color: inherit; opacity: .7;
}
.tf-tl-diaNum {
  font-size: 1rem; font-weight: 800; line-height: 1; color: inherit;
}
.tf-tl-count {
  font-size: .65rem; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; background: rgba(0,0,0,.08); color: inherit;
  min-width: 18px; text-align: center;
}
@media (prefers-color-scheme: dark) {
  .tf-tl-count { background: rgba(255,255,255,.10); }
}
:root[data-theme="dark"] .tf-tl-count { background: rgba(255,255,255,.10); }
.tf-tl-day.active .tf-tl-count { background: rgba(0,0,0,.15); }
.tf-tl-day.hoje:not(.active) .tf-tl-count { background: var(--fill-success); color: var(--success); }
.tf-tl-count.zero { opacity: .35; }

/* D16: timeline nav buttons ‹ › */
.tf-tl-nav {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: auto; align-self: stretch;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 1.2rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tf-tl-nav:hover { background: var(--surface-raised); border-color: var(--primary); color: var(--primary); }

/* D23: filtro select ativo */
.tf-filtro-select--active {
  border-color: var(--primary) !important;
  color: var(--primary);
  font-weight: 500;
}

/* Reunião no grupo hoje */
.tf-reuniao-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--fill-gold); border: 1px solid var(--border-gold);
  border-radius: 10px; padding: 10px 14px;
}
.tf-reuniao-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-600); flex-shrink: 0;
}
.tf-reuniao-time {
  font-size: .72rem; font-weight: 700; color: var(--text-gold); white-space: nowrap;
}
.tf-reuniao-titulo {
  font-size: .875rem; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-reuniao-empresa {
  font-size: .72rem; color: var(--text-muted); white-space: nowrap;
}

/* Confete */
@keyframes tf-confete-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(70px) rotate(720deg); opacity: 0; }
}
.tf-confete-piece {
  position: fixed; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none; z-index: 9999;
  animation: tf-confete-fall .7s ease-in forwards;
}

/* ═══════════════════════════════════════════
   TAREFAS v3 — UI improvements
   ═══════════════════════════════════════════ */

/* ── Point 1: funil fechado → neutro (não verde, que é reservado para sucesso ativo) ── */
/* (already patched above in .tf-funil-fechado) */

/* ── Point 2: stripe de urgência (grupo) sobrepõe stripe de prioridade ── */
.tf-grupo[data-grupo="atrasado"] .tf-item .tf-item-stripe { background: var(--danger); }
.tf-grupo[data-grupo="hoje"]     .tf-item .tf-item-stripe { background: var(--success); }
.tf-grupo[data-grupo="semana"]   .tf-item .tf-item-stripe { background: #3B7BB0; }
.tf-grupo[data-grupo="futuro"]   .tf-item .tf-item-stripe,
.tf-grupo[data-grupo="sem_data"] .tf-item .tf-item-stripe { background: var(--border); }

/* ── Point 3: ícone de canal com cor por tipo ── */
.tf-tipo--email    .tf-tipo-icon { background: #EEF6FF; color: #2563EB; }
.tf-tipo--ligacao  .tf-tipo-icon { background: #F0FDF4; color: #16A34A; }
.tf-tipo--reuniao  .tf-tipo-icon { background: #FFFBEB; color: #B45309; }
.tf-tipo--proposta .tf-tipo-icon { background: #F5F3FF; color: #7C3AED; }
.tf-tipo--visita   .tf-tipo-icon { background: #FFF7ED; color: #C2410C; }
.tf-tipo--nota     .tf-tipo-icon { background: var(--surface-raised); color: var(--text-muted); }

@media (prefers-color-scheme: dark) {
  .tf-tipo--email    .tf-tipo-icon { background: rgba(37,99,235,.15);  color: #93C5FD; }
  .tf-tipo--ligacao  .tf-tipo-icon { background: rgba(22,163,74,.15);  color: #86EFAC; }
  .tf-tipo--reuniao  .tf-tipo-icon { background: rgba(180,83,9,.15);   color: #FCD34D; }
  .tf-tipo--proposta .tf-tipo-icon { background: rgba(124,58,237,.15); color: #C4B5FD; }
  .tf-tipo--visita   .tf-tipo-icon { background: rgba(194,65,12,.15);  color: #FDBA74; }
}
:root[data-theme="dark"] .tf-tipo--email    .tf-tipo-icon { background: rgba(37,99,235,.15);  color: #93C5FD; }
:root[data-theme="dark"] .tf-tipo--ligacao  .tf-tipo-icon { background: rgba(22,163,74,.15);  color: #86EFAC; }
:root[data-theme="dark"] .tf-tipo--reuniao  .tf-tipo-icon { background: rgba(180,83,9,.15);   color: #FCD34D; }
:root[data-theme="dark"] .tf-tipo--proposta .tf-tipo-icon { background: rgba(124,58,237,.15); color: #C4B5FD; }
:root[data-theme="dark"] .tf-tipo--visita   .tf-tipo-icon { background: rgba(194,65,12,.15);  color: #FDBA74; }

/* ── Prioridade dark mode ── */
@media (prefers-color-scheme: dark) {
  .tf-prio-btn--alta.active  { background: rgba(220,38,38,.2);  color: #FCA5A5; border-color: rgba(220,38,38,.5); }
  .tf-prio-btn--media.active { background: rgba(217,119,6,.2);  color: #FCD34D; border-color: rgba(217,119,6,.5); }
  .tf-prio-btn--baixa.active { background: rgba(22,163,74,.2);  color: #86EFAC; border-color: rgba(22,163,74,.5); }
}
:root[data-theme="dark"] .tf-prio-btn--alta.active  { background: rgba(220,38,38,.2);  color: #FCA5A5; border-color: rgba(220,38,38,.5); }
:root[data-theme="dark"] .tf-prio-btn--media.active { background: rgba(217,119,6,.2);  color: #FCD34D; border-color: rgba(217,119,6,.5); }
:root[data-theme="dark"] .tf-prio-btn--baixa.active { background: rgba(22,163,74,.2);  color: #86EFAC; border-color: rgba(22,163,74,.5); }

/* ── Point 5: badge de count mais leve no cabeçalho de grupo ── */
.tf-grupo-count {
  background: transparent;
  color: var(--text-muted);
  font-size: .65rem;
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  border: none;
}
.tf-grupo[data-grupo="atrasado"] .tf-grupo-count { color: var(--danger); }

/* ── Point 5: progress bar mais espessa e legível ── */
.tf-progress-track { height: 8px; }
.tf-progress-label { font-size: .8rem; font-weight: 700; }

/* ── Point 9: cabeçalho de sub-dia dentro de "Esta semana" ── */
.tf-semana-dia-header {
  font-size: .68rem; font-weight: 700; text-transform: capitalize;
  letter-spacing: .03em; color: var(--text-muted);
  padding: 8px 4px 4px; margin-top: 4px;
  border-bottom: 1px solid var(--border);
}
.tf-semana-dia-header:first-child { margin-top: 0; padding-top: 4px; }

/* ── Point 10: seção concluídas hoje mais proeminente ── */
.tf-concluidas-section {
  background: var(--fill-success); border-radius: 10px; padding: 4px 10px 6px;
}
.tf-concluidas-toggle {
  font-size: .8rem; font-weight: 700; color: var(--text-success);
  padding: 6px 0;
}
.tf-concluidas-toggle:hover { color: var(--success); }
.tf-concluidas-toggle svg { width: 14px; height: 14px; }

/* ── Point 11: modo foco como botão de destaque mesmo quando inativo ── */
.tf-foco-btn {
  padding: 5px 12px;
  border-color: var(--gold-600);
  color: var(--gold-600);
  font-weight: 700;
}
.tf-foco-btn:hover { background: var(--fill-gold); }
.tf-foco-btn.active { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }

/* ── Point 12: botão cancelar com cor de perigo, botão Concluir menos dominante ── */
.tf-det-btn--cancelar {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-danger, #FECDD3);
  margin-left: auto;
}
.tf-det-btn--cancelar:hover { background: var(--fill-danger); border-color: var(--danger); }
.tf-det-btn--concluir {
  background: var(--fill-success);
  color: var(--success);
  border-color: var(--border-success, #BBF7D0);
}
.tf-det-btn--concluir:hover { background: var(--success); color: #fff; border-color: var(--success); }

@media (prefers-color-scheme: dark) {
  .tf-det-btn--cancelar { border-color: rgba(190,18,60,.4); }
  .tf-det-btn--concluir { background: rgba(22,163,74,.15); color: #86EFAC; border-color: rgba(22,163,74,.3); }
  .tf-concluidas-section { background: rgba(22,163,74,.08); }
  .tf-concluidas-toggle { color: #86EFAC; }
  .tf-funil-fechado { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
}
:root[data-theme="dark"] .tf-det-btn--cancelar { border-color: rgba(190,18,60,.4); }
:root[data-theme="dark"] .tf-det-btn--concluir { background: rgba(22,163,74,.15); color: #86EFAC; border-color: rgba(22,163,74,.3); }
:root[data-theme="dark"] .tf-concluidas-section { background: rgba(22,163,74,.08); }
:root[data-theme="dark"] .tf-concluidas-toggle { color: #86EFAC; }
:root[data-theme="dark"] .tf-funil-fechado { background: var(--surface); color: var(--text-muted); border-color: var(--border); }