/* ==========================================================================
   ChatISP: /para-o-comercial

   So o que e EXCLUSIVO desta pagina. Capa, linha do tempo, comparativo,
   citacao, especificacoes, aviso, dupla, painel, relacionadas e chamada
   vivem em css/pagina.css; grade, cartao, selo e lista-marcada vivem em
   css/site.css.

   Tres pecas proprias:
     .chegadas        maquete da fila do comercial, no painel da capa
     .ficha-contato   maquete da ficha do contato, na secao #retencao
     .etiqueta-mock   a pilula verde de etiqueta, usada pelas duas maquetes

   Mais um utilitario de fluxo, .comercial-respiro: o kit nao da espaco
   vertical entre dois blocos empilhados dentro do mesmo .container (tabela
   e citacao, especificacoes e aviso), e nenhum arquivo compartilhado podia
   ser tocado, entao a regra mora aqui.

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Respiro entre blocos empilhados
   -------------------------------------------------------------------------- */

.comercial-respiro {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   02. Etiqueta das maquetes

   A etiqueta e a peca central desta pagina: e ela que classifica o interesse.
   Aparece na fila da capa e na ficha do contato, com a mesma forma, para que
   o leitor reconheca o mesmo objeto nos dois lugares.
   -------------------------------------------------------------------------- */

.etiqueta-mock {
  padding: var(--e1) var(--e3);
  border: 1px solid var(--verde-linha);
  border-radius: var(--r-full);
  background: var(--verde-vidro);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  line-height: 1.8;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   03. Fila do comercial (capa)

   Tres mensagens esperando, cada uma com a hora, o remetente e a etiqueta.
   E o retrato do que a pagina promete: nao a venda, a ORGANIZACAO dela.
   -------------------------------------------------------------------------- */

.chegadas {
  display: grid;
  gap: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  box-shadow: var(--sombra-2);
}

.chegadas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.chegadas-rotulo {
  color: var(--verde);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.chegadas-lista {
  display: grid;
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chegada {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
}

.chegada-hora {
  padding-top: var(--e1);
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  font-variant-numeric: tabular-nums;
}

.chegada-texto {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}

.chegada-texto strong {
  color: var(--texto);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
}

.chegada-texto span {
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.5;
}

.chegada .etiqueta-mock {
  align-self: center;
}

.chegadas-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.chegada-acao {
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  color: var(--suave);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

/* --------------------------------------------------------------------------
   04. Ficha do contato (secao #retencao)

   Os numeros sao os campos reais da tela de Contatos: atendimentos, em
   andamento, primeiro e ultimo contato, vinculo com o cadastro. Nada aqui
   e indicador de desempenho: e o que o atendente ve antes de responder.
   -------------------------------------------------------------------------- */

.ficha-contato {
  display: grid;
  gap: var(--e5);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-2);
}

.ficha-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

/* Quadrado, e nao circulo: e uma ficha de cadastro, nao um avatar de chat. */
.ficha-avatar {
  display: grid;
  place-items: center;
  width: var(--e7);
  height: var(--e7);
  border: 1px solid var(--verde-linha);
  border-radius: var(--r-md);
  background: var(--verde-vidro);
  color: var(--verde);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
}

.ficha-quem {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}

.ficha-quem strong {
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-medio);
}

.ficha-quem small {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.ficha-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  gap: var(--e3);
  margin: 0;
}

.ficha-numeros div {
  display: grid;
  align-content: start;
  gap: var(--e1);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
}

.ficha-numeros dt {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.ficha-numeros dd {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--c1);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk2);
  font-variant-numeric: tabular-nums;
}

.ficha-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha-linha {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   05. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  /* A etiqueta desce para baixo do texto: em coluna estreita, tres colunas
     espremem a frase do cliente ate ela quebrar palavra por palavra. */
  .chegada {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .chegada .etiqueta-mock {
    grid-column: 2;
    align-self: start;
    justify-self: start;
  }

  .ficha-contato {
    padding: var(--e5);
  }
}

@media (max-width: 380px) {
  .chegadas-topo {
    flex-wrap: wrap;
  }

  .ficha-topo {
    grid-template-columns: minmax(0, 1fr);
  }
}