/* ==========================================================================
   SGP — Fatia 40 · Roteiro de rua com check-in

   Camada própria, acrescentada ao manifesto com UMA linha (regra anti-conflito
   do plano): nada aqui reescreve 03_componentes.css nem 04_layout.css.

   Duas telas na mesma marcação: no desktop é o esqueleto mestre com o mapa da
   equipe; no celular é uma lista de paradas com um botão grande de check-in. O
   botão é grande de propósito — quem usa está de pé, na calçada, no sol.
   ========================================================================== */

/* --- Coluna do dia (a lista de quem está na rua) --------------------------- */

.roteiro-dia { min-width: 0; height: 100%; }

.roteiro-dia__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.roteiro-dia__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
}

.roteiro-dia__lista { list-style: none; margin: 0; padding: 0; }

.roteiro-dia__item + .roteiro-dia__item { margin-top: var(--esp-2); }

.roteiro-dia__link {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: inherit;
  text-decoration: none;
}

.roteiro-dia__link:hover { background: var(--cor-fundo-afundado); text-decoration: none; }

.roteiro-dia__item--aberto .roteiro-dia__link {
  border-color: var(--cor-acao);
  background: var(--cor-acao-suave);
}

/* A cor do assessor. É a MESMA do pino e da linha no mapa: a coluna é a
   legenda do mapa, e não uma lista com enfeite. */
.roteiro-dia__cor {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  display: inline-block;
}

.roteiro-dia__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  font-size: var(--texto-sm);
}

.roteiro-dia__texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.roteiro-dia__conta { margin-left: auto; font-size: var(--texto-xs); flex: none; }

/* --- Ficha do roteiro ------------------------------------------------------ */

.roteiro-ficha { min-width: 0; }

.roteiro-ficha__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.roteiro-ficha__titulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-lg);
}

.roteiro-ficha__observacoes { margin: 0; color: var(--cor-texto-suave); }

.roteiro-salto { display: flex; align-items: center; gap: var(--esp-2); }
.roteiro-salto__data { height: 30px; font-size: var(--texto-sm); width: auto; }

/* --- O mapa ---------------------------------------------------------------- */

.roteiro-mapa { min-width: 0; }

.roteiro-mapa__tela {
  height: 320px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}

.roteiro-mapa__vazio { margin: var(--esp-2) 0 0; }

/* Pino numerado. `divIcon` do Leaflet não traz estilo nenhum de fábrica. */
.roteiro-pino__bolha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* --- Paradas --------------------------------------------------------------- */

/* O rótulo da seção e os "?" na mesma linha — os botões são IRMÃOS do <h3>
   (regra de ouro do DicasHelper), não filhos, para o nome acessível do
   cabeçalho continuar sendo só "Paradas". */
.roteiro-paradas__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}

.roteiro-paradas__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
}

.roteiro-paradas__lista { list-style: none; margin: 0; padding: 0; }

.parada {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo);
}

.parada + .parada { margin-top: var(--esp-2); }

.parada--visitada { border-left: 3px solid var(--sgp-sucesso); }

.parada__numero {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cor-fundo-afundado);
  border: 1px solid var(--cor-borda);
  font-weight: 700;
  font-size: var(--texto-sm);
}

.parada__corpo { min-width: 0; flex: 1; }

.parada__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.parada__rotulo { min-width: 0; overflow-wrap: anywhere; }

.parada__checkin {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  font-size: var(--texto-xs);
}

.parada__relato {
  margin: 0;
  padding: var(--esp-2);
  background: var(--cor-fundo-afundado);
  border-radius: var(--raio-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.parada__form { display: flex; flex-direction: column; gap: var(--esp-2); }

.parada__acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }

/* O botão do check-in é o alvo de um polegar na rua, não de um mouse na mesa. */
.parada__botao { min-height: 44px; flex: 1 1 160px; }

.parada__aviso { margin: 0; font-size: var(--texto-xs); }

.parada__tirar { flex: none; align-self: flex-start; }

/* --- Histórico do dia ------------------------------------------------------ */

.roteiro-historico { min-width: 0; }

.roteiro-historico__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
}

.roteiro-historico__lista { list-style: none; margin: 0; padding: 0; }

.roteiro-historico__item {
  min-width: 0;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
}

.roteiro-historico__frase { margin: 0 0 var(--esp-1); }
.roteiro-historico__corpo { overflow-wrap: anywhere; }

.roteiro-nova-parada__form { margin-top: var(--esp-3); }

/* No celular o mapa encolhe e a lista manda: é ela que o assessor usa de pé. */
@media (max-width: 900px) {
  .roteiro-mapa__tela { height: 220px; }
  .parada { flex-wrap: wrap; }
}