/* Tarefas, notas e linha do tempo (Entrega 2, fase 5).
 * Cor por significado: tarefa do agente (handoff) = marinho, atrasada = aviso.
 * O dourado fica só no botão que decide (Criar tarefa) e no item ativo do menu.
 */

/* ───────────── Contador no menu ───────────── */

.menu-contador {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--pilula);
  background: var(--preto-2);
  color: var(--texto-invertido);
  font-size: var(--t-12);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.menu-contador.alerta { background: var(--aviso); color: var(--branco); }

/* ───────────── Tela de tarefas ───────────── */

.tarefas-tela { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 100%; }

.tf-abas {
  display: flex;
  gap: var(--e-1);
  padding: 0 var(--e-5) var(--e-3);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}
.tf-aba {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--pilula);
  background: var(--superficie);
  color: var(--suave);
  font-size: var(--t-14);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tf-aba:hover { background: var(--painel); color: var(--texto); }
.tf-aba[aria-pressed="true"] { background: var(--preto); border-color: var(--preto); color: var(--texto-invertido); }
.tf-aba-n { font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.tf-aba-n:empty { display: none; }
.tf-aba-n.alerta { color: var(--aviso-texto); background: var(--aviso-fundo); border-radius: var(--pilula); padding: 0 6px; }

.tf-corpo { padding: var(--e-4) var(--e-5) var(--e-8); min-height: 0; overflow-y: auto; }
.tf-corpo > .tf-lista { max-width: 880px; }

/* ───────────── Item de tarefa (tela e ficha) ───────────── */

.tf-lista { display: grid; gap: var(--e-2); }
.tf-lista:empty { display: none; }

.tf-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.tf-item.atrasada { box-shadow: inset 3px 0 0 var(--aviso); }
.tf-item.fechada { opacity: 0.7; }
.tf-item.fechada .tf-titulo { text-decoration: line-through; }

.tf-item-texto { min-width: 0; flex: 1; display: grid; gap: 2px; }
.tf-item-linha { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.tf-titulo { font-weight: 600; font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-item-meta { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); font-size: var(--t-13); color: var(--suave); }
.tf-item-meta > :empty { display: none; }
.tf-item-meta > * + *::before { content: "· "; color: var(--suave); }
.tf-lead { color: var(--texto); font-weight: 600; text-decoration: none; }
.tf-lead:hover, .tf-lead:focus-visible { text-decoration: underline; }
.tf-prazo { font-variant-numeric: tabular-nums; }
.tf-item.atrasada .tf-prazo { color: var(--aviso-texto); font-weight: 600; }

.tf-item-acoes { display: flex; gap: var(--e-1); flex: none; }
.tf-item-acoes .botao { min-height: 32px; padding: 4px 12px; font-size: var(--t-13); }

/* Na ficha o painel é estreito: o item empilha. */
.tf-lista-curta .tf-item { flex-wrap: wrap; padding: var(--e-2) var(--e-3); }
.tf-lista-curta .tf-titulo { white-space: normal; overflow-wrap: anywhere; }

/* ───────────── Ficha: cabeça de bloco, notas e linha do tempo ───────────── */

.fl-bloco-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.fl-bloco-cabeca .botao { padding: 4px 10px; font-size: var(--t-13); min-height: 32px; }

.fl-nota-form { display: grid; gap: var(--e-2); }
.notas { display: grid; gap: var(--e-2); }
.notas:empty { display: none; }
.nota-item { padding: var(--e-2) var(--e-3); background: var(--painel); border-radius: var(--raio-p); }
.nota-texto { font-size: var(--t-14); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-meta { font-size: var(--t-12); color: var(--suave); margin-top: 2px; }

.linha-tempo { display: grid; gap: var(--e-3); }
.linha-tempo:empty { display: none; }
.lt-dia-nome { font-size: var(--t-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave); margin-bottom: var(--e-1); }
.lt-dia-nome::first-letter { text-transform: uppercase; }
.lt-itens { display: grid; gap: var(--e-1); border-left: 2px solid var(--borda); padding-left: var(--e-3); }
.lt-item { position: relative; }
.lt-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--e-3) - 5px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borda-forte);
}
.lt-handoff::before, .lt-mensagens::before { background: var(--marinho); }
.lt-posse::before, .lt-nota::before { background: var(--dourado-texto); }
.lt-optout::before { background: var(--aviso); }
.lt-titulo { font-size: var(--t-13); font-weight: 600; overflow-wrap: anywhere; }
.lt-meta { font-size: var(--t-12); color: var(--suave); overflow-wrap: anywhere; }

/* ───────────── Diálogo Nova tarefa ───────────── */

.tf-prazos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tf-prazos legend { font-size: var(--t-13); font-weight: 600; margin-bottom: var(--e-1); padding: 0; }
.tf-prazo-op {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 4px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--pilula);
  background: var(--superficie);
  font-size: var(--t-13);
  cursor: pointer;
}
.tf-prazo-op:has(input:checked) { border-color: var(--texto); background: var(--painel); }

/* ───────────── Toque: alvo de 32px ───────────── */

@media (any-pointer: coarse) {
  .tf-aba, .tf-prazo-op { min-height: var(--alvo-toque); }
  .tf-lead { display: inline-flex; align-items: center; min-height: var(--alvo-toque); }
  .tf-item-acoes .botao, .fl-bloco-cabeca .botao { min-height: var(--alvo-toque); }
}

@media (max-width: 767px) {
  .menu-contador { position: absolute; margin: 0; transform: translate(12px, -14px); min-width: 18px; line-height: 18px; padding: 0 4px; }
  .menu-item { position: relative; }
  .tf-abas, .tf-corpo { padding-left: var(--e-3); padding-right: var(--e-3); }
  .tf-item { flex-wrap: wrap; }
  .tf-titulo { white-space: normal; }
}