/* ===================================================================
   Prospecção: período, formulários de visita/venda, gaveta da empresa
   =================================================================== */

/* barra de período */
.barra-periodo { align-items: flex-end; }
.periodo-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.periodo-datas { display: flex; gap: 8px; flex-wrap: wrap; }
.campo-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); white-space: nowrap; }
.campo-inline input, .campo-inline select { width: auto; min-height: 34px; font-size: 13.5px; padding: 4px 9px; }
.periodo-texto { margin: -4px 0 14px; }

.resumo-linha { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--suave); }
.resumo-linha strong { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

/* filtros comerciais */
.barra-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; }
.barra-filtros select { width: auto; min-width: 150px; max-width: 220px; min-height: 34px; font-size: 13.5px; padding: 4px 9px; }
.barra-filtros select.com-valor { border-color: var(--pri); background: var(--pri-suave); color: var(--pri); font-weight: 500; }

/* botões de escolha (resultado da visita) */
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcoes button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.opcoes button:hover { border-color: var(--mudo); }
.opcoes button[aria-checked="true"] { border-color: var(--pri); background: var(--pri-suave); color: var(--pri); font-weight: 500; }

/* valor em reais */
.campo-moeda {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--cartao);
}
.campo-moeda span { color: var(--suave); font-weight: 500; font-size: 14px; }
.campo-moeda input { border: none; padding-left: 0; font-variant-numeric: tabular-nums; }
.campo-moeda input:focus-visible { box-shadow: none; }
.campo-moeda:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-suave); }

.venda-calculo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--cartao-2);
}
.venda-calculo div { padding: 10px 14px; display: grid; gap: 1px; }
.venda-calculo div + div { border-left: 1px solid var(--borda); }
.venda-calculo span { font-size: 12.5px; color: var(--suave); }
.venda-calculo strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.venda-feita { justify-items: center; text-align: center; padding-top: 28px; }
.venda-feita .modal-rodape { width: calc(100% + 44px); justify-self: stretch; }
.venda-feita .vazio-icone { background: var(--ok-suave); color: var(--ok); }

/* gaveta da empresa */
.gaveta-corpo { display: grid; gap: 16px; padding: 0 22px 28px; }
.gaveta-topo {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -22px;
  padding: 18px 22px 14px;
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
  z-index: 1;
}
.gaveta-topo h3 { font-size: 18px; }
.gaveta-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.gaveta .resumo { margin-bottom: 0; }
.gaveta-secao { font-size: 14px; margin-top: 4px; }

.dados-lista { margin: 0; display: grid; gap: 10px; }
.dados-lista div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.dados-lista dt { color: var(--suave); }
.dados-lista dd { margin: 0; overflow-wrap: anywhere; }
.dados-lista a { color: var(--pri); text-decoration: none; }
.dados-lista a:hover { text-decoration: underline; }

/* histórico em linha do tempo: aqui a ordem importa de verdade */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linha-tempo li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 0 12px 18px;
  border-left: 1px solid var(--borda);
  margin-left: 5px;
}
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cartao);
  border: 2px solid var(--mudo);
}
.linha-tempo li.venda::before { border-color: var(--ok); background: var(--ok); }
.linha-tempo li:last-child { border-left-color: transparent; }
.lt-data { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; padding-top: 1px; }
.lt-texto { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.lt-texto span { font-size: 13px; color: var(--suave); overflow-wrap: anywhere; }
.lt-acao { align-self: start; }
.lt-vazio { color: var(--suave); font-size: 13.5px; padding: 8px 0; }

@media (max-width: 760px) {
  .barra-filtros { display: grid; grid-template-columns: 1fr 1fr; }
  .barra-filtros select { max-width: none; min-width: 0; width: 100%; }
  .barra-periodo { align-items: stretch; }
  .periodo-controles { width: 100%; }
  .periodo-controles .segmentado { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .periodo-controles .segmentado button { padding: 0 6px; }
  .periodo-datas { width: 100%; }
  .periodo-datas .campo-inline { flex: 1; }
  .periodo-datas input { flex: 1; min-width: 0; }
  .dados-lista div { grid-template-columns: 1fr; gap: 1px; }
  .linha-tempo li { grid-template-columns: minmax(0, 1fr) auto; }
  .lt-data { grid-column: 1 / -1; }
}