/* ==========================================================================
   ROTEIRO DE ABORDAGENS e MATERIAL PARA DIVULGAÇÃO (lote D da feature crm-menu)
   Toda regra prefixada com .rot- (roteiros) ou .div- (divulgação) para não afetar outras telas.
   Só tokens --de-* de css/tokens.css: nenhuma cor em hex, nenhum valor de reserva, nenhum !important.
   Os balões seguem o desenho do WhatsApp: o afiliado à direita, o cliente à esquerda. Sem movimento.
   ========================================================================== */

/* == ROTEIRO == */
.rot-lista {
  display: grid;
  gap: 28px;
  margin-bottom: 8px;
}
.rot-roteiro {
  background: var(--de-branco);
  border: 1px solid var(--de-borda);
  border-radius: var(--de-raio-card);
  padding: clamp(16px, 3vw, 28px);
  min-width: 0;
}
.rot-titulo {
  margin: 0 0 4px;
  font-family: var(--de-fonte-titulo);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--de-grafite);
}
.rot-subtitulo {
  margin: 0 0 8px;
  font-family: var(--de-fonte-texto);
  font-size: 15px;
  color: var(--de-texto-secundario);
}

.rot-passo {
  margin-top: 20px;
  padding: clamp(12px, 2.4vw, 20px);
  background: var(--de-marfim);
  border: 1px solid var(--de-borda-interna);
  border-radius: var(--de-raio-card);
}
.rot-passo-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rot-passo-numero {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--de-raio-pilula);
  background: var(--de-laranja-principal);
  color: var(--de-grafite);
  font-family: var(--de-fonte-titulo);
  font-weight: 800;
  font-size: 16px;
}
.rot-passo-textos {
  flex: 1 1 auto;
  min-width: 0;
}
.rot-passo-titulo {
  margin: 0;
  font-family: var(--de-fonte-titulo);
  font-weight: 800;
  font-size: 18px;
  color: var(--de-grafite);
}
.rot-passo-subtitulo {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--de-texto-secundario);
}
.rot-copiar-passo {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 12px;
  background: var(--de-branco);
  border: 1px solid var(--de-borda);
  color: var(--de-grafite);
}

.rot-conversa {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rot-balao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(560px, 90%);
  padding: 12px 14px;
  border-radius: var(--de-raio-card);
  overflow-wrap: anywhere;
}
.rot-balao--afiliado {
  align-self: flex-end;
  background: var(--de-laranja-claro2);
  border: 1px solid var(--de-laranja-claro3);
  border-bottom-right-radius: var(--de-raio-controle);
}
.rot-balao--cliente {
  align-self: flex-start;
  background: var(--de-marfim-apoio);
  border: 1px solid var(--de-borda);
  border-bottom-left-radius: var(--de-raio-controle);
}
.rot-texto {
  margin: 0;
  font-family: var(--de-fonte-texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--de-grafite);
}
.rot-copiar {
  align-self: flex-end;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--de-branco);
  border: 1px solid var(--de-borda);
  color: var(--de-grafite);
}
.rot-fecho {
  margin: 24px 0 0;
  text-align: center;
  font-family: var(--de-fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  color: var(--de-laranja-escuro);
}

.rot-antigos {
  margin-top: 40px;
}
.rot-antigos-titulo {
  margin: 0 0 16px;
  font-family: var(--de-fonte-titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--de-grafite);
}

@media (max-width: 640px) {
  .rot-passo-cabecalho {
    flex-wrap: wrap;
  }
  .rot-copiar-passo {
    flex: 1 0 100%;
  }
  .rot-balao {
    max-width: 94%;
  }
}

/* == FILTROS DO MATERIAL PARA DIVULGAÇÃO == */
.div-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.div-filtro {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--de-borda);
  border-radius: var(--de-raio-pilula);
  background: var(--de-branco);
  color: var(--de-texto-secundario);
  font-family: var(--de-fonte-texto);
  font-size: 13px;
  font-weight: 700;
}
.div-filtro.active {
  background: var(--de-laranja-principal);
  border-color: var(--de-laranja-principal);
  color: var(--de-grafite);
}
/* Filtro por categoria: o atributo hidden vai nesta caixa em volta do cartão, não no cartão. O cartão tem
   `.creative-card { display: flex !important }` (css/telas.css), que empata com `[hidden] { display: none !important }`
   (style.css) e ganha por vir depois; esta caixa não tem regra de display que brigue com o [hidden]. */
.div-item {
  display: grid;
  min-width: 0;
}

/* == ADMINISTRAÇÃO: lista e formulário em passos == */
.rot-admin-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rot-admin-form {
  min-width: 0;
}
.rot-admin-passos {
  display: grid;
  gap: 14px;
}
.rot-admin-passo {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  min-width: 0;
  background: var(--de-marfim);
  border: 1px solid var(--de-borda);
  border-radius: var(--de-raio-card);
}
.rot-admin-passo legend {
  padding: 0 8px;
  font-family: var(--de-fonte-titulo);
  font-weight: 800;
  color: var(--de-grafite);
}
.rot-admin-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rot-admin-mensagens {
  display: grid;
  gap: 10px;
}
.rot-admin-mensagem {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  padding: 12px;
  background: var(--de-branco);
  border: 1px solid var(--de-borda-interna);
  border-radius: var(--de-raio-controle);
}
.rot-admin-mensagem .rot-admin-barra {
  grid-column: 1 / -1;
}
.rot-admin-vazio {
  margin: 0;
  font-size: 13px;
  color: var(--de-laranja-escuro);
}

@media (max-width: 640px) {
  .rot-admin-mensagem {
    grid-template-columns: minmax(0, 1fr);
  }
}