/* ==========================================================================
   Linha do Tempo (Histórico de Atividades) da ficha — fatia F10.
   Só tokens do design system; nada de cor solta.

   O fio vertical é desenhado POR ITEM (borda esquerda + marcador absoluto),
   e não por um pseudo-elemento do contêiner: as páginas seguintes chegam
   dentro de <turbo-frame> aninhados, então o desenho não pode depender de os
   itens serem filhos diretos da lista.
   ========================================================================== */

.linha-tempo {
  display: block;
  padding: var(--esp-1) 0;
}

.evento-tempo {
  position: relative;
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) 0 var(--esp-3) var(--esp-5);
  margin-left: calc(var(--esp-3) + 1px);
  border-left: 2px solid var(--cor-borda);
}

.evento-tempo:first-child { border-top-left-radius: var(--raio-xs); }

/* Marcador do evento: círculo sobre o fio, com o ícone da fonte. */
.evento-tempo__marca {
  position: absolute;
  left: 0;
  top: var(--esp-3);
  transform: translateX(-52%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto-suave);
  flex: none;
}

.evento-tempo__marca svg { width: 15px; height: 15px; }

.evento-tempo__corpo {
  min-width: 0;              /* sem isto o item de flex não encolhe e o texto "corta" */
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding-left: var(--esp-3);
}

.evento-tempo__titulo {
  margin: 0;
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.evento-tempo__resumo {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  overflow-wrap: anywhere;
}

.evento-tempo__quando {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
}

/* --- Tons por fonte do evento ------------------------------------------- */
.evento-tempo--atendimento  .evento-tempo__marca { color: var(--sgp-info);    border-color: var(--sgp-info); }
.evento-tempo--andamento    .evento-tempo__marca { color: var(--sgp-ciano-600); border-color: var(--sgp-ciano-300); }
.evento-tempo--campanha     .evento-tempo__marca { color: var(--sgp-roxo-500); border-color: var(--sgp-roxo-300); }
.evento-tempo--conversa     .evento-tempo__marca { color: var(--sgp-sucesso); border-color: var(--sgp-sucesso); }
.evento-tempo--qualificacao .evento-tempo__marca { color: var(--sgp-atencao); border-color: var(--sgp-atencao); }
.evento-tempo--exclusao     .evento-tempo__marca { color: var(--sgp-perigo);  border-color: var(--sgp-perigo); }

/* --- "Carregar mais" (o próprio frame preguiçoso da próxima página) ------ */
.linha-tempo__mais {
  display: block;
  padding: var(--esp-3) 0 var(--esp-1) calc(var(--esp-5) + var(--esp-3));
  margin-left: calc(var(--esp-3) + 1px);
}