/* ============================================================
   TAREFAS — Estilos modernos e minimalistas
   ============================================================ */

/* ---- Botão "Ver negócio" no item de tarefa ---- */
.tf-btn-negocio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  transition: var(--transition);
}

.tf-btn-negocio svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tf-btn-negocio:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* ---- KPI Grid ---- */
.tf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.tf-kpi-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.tf-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.tf-kpi-card--alert {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.04);
}

.tf-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tf-kpi-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.tf-kpi-icon--all    { background: rgba(26,206,238,.12); }
.tf-kpi-icon--all svg { stroke: var(--cyan); }

.tf-kpi-icon--pending { background: rgba(234,179,8,.12); }
.tf-kpi-icon--pending svg { stroke: #ca8a04; }

.tf-kpi-icon--done { background: rgba(34,197,94,.12); }
.tf-kpi-icon--done svg { stroke: #16a34a; }

.tf-kpi-icon--late { background: rgba(239,68,68,.12); }
.tf-kpi-icon--late svg { stroke: #dc2626; }

.tf-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

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

.tf-kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Barra de progresso no card "Concluídas" */
.tf-kpi-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(34,197,94,0.12);
}

.tf-kpi-progress-bar {
  height: 100%;
  background: #22c55e;
  border-radius: 0 2px 2px 0;
  transition: width 0.6s ease;
}

.tf-kpi-pct {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
}

/* ---- Toolbar ---- */
.tf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tf-filter-pills {
  display: flex;
  gap: 6px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 4px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
}

.tf-filter-pill {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.tf-filter-pill:hover {
  color: var(--black);
  background: var(--bg);
}

.tf-filter-pill.active {
  background: var(--black);
  color: var(--white);
  font-weight: 600;
}

/* Pesquisa */
.tf-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.tf-search-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(26,206,238,0.1);
}

.tf-search-wrap svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.tf-search {
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--black);
  outline: none;
  width: 100%;
}

.tf-search::placeholder { color: var(--text-muted); }

/* ---- Admin Filters ---- */
.tf-admin-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tf-select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--black);
  background: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: var(--transition);
  outline: none;
}
.tf-select:focus {
  border-color: var(--cyan);
}

.tf-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.tf-date-wrap:focus-within {
  border-color: var(--cyan);
}

.tf-date-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.tf-input-date {
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--black);
  outline: none;
}

/* ---- Groups & List ---- */
.tf-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tf-group {}

.tf-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.tf-group-count {
  background: var(--bg);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Task Item ---- */
.tf-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: default;
  animation: fadeSlideTf 0.22s ease both;
}

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

.tf-item:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  transform: translateX(2px);
}

.tf-item--late {
  border-left: 3px solid #ef4444;
}

.tf-item--done {
  opacity: 0.6;
}

.tf-item--done .tf-item-titulo {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Checkbox */
.tf-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #d1d5db;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  margin-top: 1px;
}

.tf-check svg {
  width: 11px;
  height: 11px;
  stroke: transparent;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--transition);
}

.tf-check:hover {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
}

.tf-check:hover svg { stroke: #22c55e; }

.tf-check.checked {
  background: #22c55e;
  border-color: #22c55e;
}

.tf-check.checked svg { stroke: #fff; }

/* Item body */
.tf-item-body {
  flex: 1;
  min-width: 0;
}

.tf-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.tf-item-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
}

.tf-item-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

.tf-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.tf-item-meta svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.tf-item-negocio-sep { margin: 0 2px; }

/* ---- Badges ---- */
.tf-badge {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tf-badge--open    { background: rgba(26,206,238,.12); color: #0891b2; }
.tf-badge--today   { background: rgba(234,179,8,.15);  color: #ca8a04; }
.tf-badge--soon    { background: rgba(99,102,241,.12); color: #4f46e5; }
.tf-badge--late    { background: rgba(239,68,68,.12);  color: #dc2626; }
.tf-badge--done    { background: rgba(34,197,94,.12);  color: #16a34a; }

/* ---- Empty State ---- */
.tf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  gap: 12px;
}

.tf-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.tf-empty-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tf-empty-icon--error svg { stroke: #ef4444; }

.tf-empty h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}

.tf-empty p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 300px;
}

/* ---- Skeleton ---- */
.tf-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: tf-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes tf-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .tf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tf-kpi-grid { grid-template-columns: 1fr 1fr; }
  .tf-toolbar  { flex-direction: column; align-items: stretch; }
  .tf-search-wrap { max-width: 100%; }
}