/* ------------------------------------------------------------------
   A tela de Conexoes (conexoes/index.html, js/conexoes.js).

   Portado do docs/mockups/conexoes.html, que o cliente aprovou. As
   classes `cx-` sao as mesmas do mockup de proposito: quem comparar as
   duas telas lado a lado tem que achar o mesmo nome no mesmo lugar.

   O que ficou de fora do mockup, e por que: as abas Seguindo e
   Seguidores continuam desligadas. Seguir nao existe no back-end — nao
   ha tabela, nao ha rota, nao ha contagem. Uma aba com numero inventado
   seria pior do que uma aba que diz honestamente que ainda nao chegou.

   A caixinha de pedir conexao nao esta aqui: e a mesma do feed e do
   perfil (css/conexao-pedido.css), e uma copia so daria dois desenhos
   da mesma janela.
   ------------------------------------------------------------------ */

/* Cartao de pessoa: mesma linguagem dos cards do feed. */
.cx-card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem;
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 1rem;
}

/* Bola com a inicial, quando a pessoa nao tem foto. O desenho e o mesmo
   do avatar do feed (js/feed-nucleo.js) — quem aparece nas duas telas
   nao pode aparecer de dois jeitos. */
.cx-bola {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-secondary) / .1);
  color: rgb(var(--color-secondary));
  font-weight: 700;
  font-size: 1.125rem;
  object-fit: cover;
}
/* Construtora tem logo, e logo nao e retrato. */
.cx-bola-quadrada { border-radius: .75rem; }

/* Abas da tela. Mesma linguagem das abas do perfil. */
.cx-aba {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem 1rem;
  border-bottom: 2px solid transparent;
  color: rgb(var(--color-on-surface-variant));
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.cx-aba:hover { color: rgb(var(--color-secondary)); }
.cx-aba[aria-selected="true"] {
  color: rgb(var(--color-secondary));
  border-bottom-color: rgb(var(--color-secondary));
}
.cx-aba:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: -2px;
  border-radius: .375rem;
}

/* Quantos, dentro da aba. Fica cinza; so o de pedidos recebidos fica
   aceso, porque e o unico que pede uma acao de quem esta olhando.

   Vazio ele some: um "0" ao lado do nome da aba nao informa nada e
   ainda parece contador quebrado. */
.cx-conta {
  padding: 0 .4375rem;
  border-radius: 999px;
  background: rgb(var(--color-surface-container-high));
  color: rgb(var(--color-on-surface-variant));
  font-size: .6875rem;
  line-height: 1.15rem;
  font-weight: 700;
}
.cx-conta-acesa {
  background: rgb(var(--color-secondary));
  color: rgb(var(--color-surface-container-lowest));
}

/* Botoes das acoes de cada cartao. */
.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .4375rem .875rem;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.cx-btn:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}
/* Enquanto a resposta nao volta do servidor. O botao continua legivel:
   apagar demais faria parecer que sumiu. */
.cx-btn[disabled] {
  opacity: .55;
  cursor: progress;
}

.cx-btn-principal {
  background: rgb(var(--color-secondary));
  /* O texto sai do fundo da tela, e nao de um branco fixo: nao ha token
     `on-secondary` no css/styles.css e o `secondary` troca de tom entre
     os temas. */
  color: rgb(var(--color-surface-container-lowest));
}
.cx-btn-principal:hover { background: rgb(var(--color-secondary) / .85); }

.cx-btn-contorno {
  border: 1px solid rgb(var(--color-outline-variant));
  color: rgb(var(--color-on-surface-variant));
}
.cx-btn-contorno:hover {
  border-color: rgb(var(--color-secondary));
  color: rgb(var(--color-secondary));
}

/* De onde veio o pedido: a publicacao que gerou a conexao. E o que
   diferencia o SUIMOB de uma lista de contatos qualquer. */
.cx-origem {
  margin-top: .625rem;
  padding: .5rem .75rem;
  border-left: 3px solid rgb(var(--color-secondary));
  border-radius: 0 .5rem .5rem 0;
  background: rgb(var(--color-secondary) / .08);
  font-size: .8125rem;
  line-height: 1.45;
  color: rgb(var(--color-on-surface-variant));
}

/* O trecho do post que gerou o pedido. Bloco proprio e nao continuacao da
   frase: sao duas vozes — a do sistema explicando o caminho, e a da pessoa
   que escreveu o post. Duas linhas no maximo, porque o card e uma fila de
   coisas a responder, e nao um lugar de leitura. */
.cx-origem-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: .25rem;
  color: rgb(var(--color-on-surface));
  font-style: italic;
}

/* O titulo do anuncio que gerou o pedido. Irmao do `.cx-origem-texto`
   acima e diferente dele em duas coisas: e link, porque o anuncio tem
   pagina propria e da para reler antes de responder; e nao e italico,
   porque titulo de anuncio nao e citacao — foi o proprio corretor que
   escreveu. Uma linha so: titulo de anuncio ja e uma linha. */
.cx-origem-anuncio {
  display: block;
  margin-top: .25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgb(var(--color-on-surface));
  font-weight: 600;
}

/* Recado que a pessoa escreveu junto com o pedido. */
.cx-recado {
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgb(var(--color-on-surface));
  font-style: italic;
}

/* Tela vazia: quem acabou de criar a conta ve isto, e e o estado normal
   dela. Por isso nao pode parecer erro — o tracejado e o cinza dizem
   "ainda nao", e nao "deu errado". */
.cx-vazio {
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgb(var(--color-outline-variant));
  border-radius: 1rem;
  text-align: center;
  color: rgb(var(--color-on-surface-variant));
}
.cx-vazio .material-symbols-outlined {
  font-size: 2.25rem;
  color: rgb(var(--color-on-surface-variant));
}

/* Falha de rede ou sessao vencida. Vermelho, porque aqui deu errado
   mesmo — e a diferenca entre isto e o `.cx-vazio` e a unica coisa que
   permite a pessoa saber se deve tentar de novo. */
.cx-erro {
  padding: 1rem;
  border: 1px solid rgb(var(--color-error) / .4);
  border-radius: 1rem;
  background: rgb(var(--color-error) / .08);
  color: rgb(var(--color-error));
  font-size: .875rem;
  line-height: 1.5;
}

/* Esqueleto enquanto a lista nao chega. Tres barras cinzas no formato
   do card, para a tela nao pular quando o conteudo entrar. */
.cx-esqueleto {
  height: 6.5rem;
  border-radius: 1rem;
  background: rgb(var(--color-surface-container));
  animation: cx-pulsar 1.4s ease-in-out infinite;
}
@keyframes cx-pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Titulo de cada metade da aba Pedidos ("RECEBIDOS — 3"). */
.cx-secao {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--color-on-surface-variant));
}

/* A busca e o seletor de ordem nao tem regra aqui de proposito: eles usam as
   mesmas classes do Tailwind que o mockup usa. O plugin `forms` reseta
   `[type='search']` com a mesma especificidade de uma classe nossa, e a folha
   do Tailwind entra depois desta — entao uma regra `.cx-busca` daqui perderia
   o arredondamento e o fundo para o reset, e o campo voltaria a ficar branco e
   quadrado. Classe utilitaria nao tem esse problema: ela mora na mesma folha do
   reset, e depois dele. */

/* O aviso de contato nao liberado, no lugar onde estaria o botao do
   WhatsApp. Ele ocupa a linha inteira de proposito: e uma explicacao, e
   nao um botao desligado que a pessoa ficaria tentando clicar. */
.cx-sem-contato {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgb(var(--color-surface-container));
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--color-on-surface-variant));
}

/* O contato do lado de ca, quando ja foi liberado. Fundo neutro e nao aceso:
   e um estado normal, e nao um alerta. Fica logo abaixo da frase do contato do
   outro de proposito, para os dois lados da mesma conta ficarem juntos. */
.cx-meu-contato {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgb(var(--color-surface-container));
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--color-on-surface-variant));
}
.cx-meu-contato .material-symbols-outlined {
  font-size: 1rem;
  color: rgb(var(--color-secondary));
}

/* "Esconder de novo" e um botao com cara de link: a acao e pequena e mora dentro
   de uma frase, e um botao de verdade ali competiria com "Conversar no WhatsApp". */
.cx-link {
  font-weight: 600;
  color: rgb(var(--color-secondary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cx-link:hover { color: rgb(var(--color-secondary) / .8); }
.cx-link:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
  border-radius: .25rem;
}
.cx-link[disabled] { opacity: .55; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .cx-aba,
  .cx-btn,
  .cx-esqueleto { transition: none; animation: none; }
}

/* O botao de desfazer, no canto de cima do card.

   Cinza parado, vermelho so no hover e no foco: ele aparece em toda
   linha da lista, e uma coluna de icones vermelhos faria a tela de
   conexoes parecer uma tela de erros. A cor chega na hora em que a
   pessoa mira nele, que e quando ela precisa saber que aquilo nao
   volta atras. */
.cx-desfazer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: rgb(var(--color-on-surface-variant));
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.cx-desfazer .material-symbols-outlined { font-size: 1.125rem; }
.cx-desfazer:hover {
  background: rgb(var(--color-error) / .1);
  color: rgb(var(--color-error));
}
.cx-desfazer:focus-visible {
  outline: 2px solid rgb(var(--color-error));
  outline-offset: 2px;
  color: rgb(var(--color-error));
}

/* A faixa de avaliar, dentro do card da conexao.

   Fica acima da fileira do WhatsApp e do "Ver perfil", e com uma linha
   separando: avaliar nao e mais um botao de contato, e sim o fecho de
   uma experiencia que ja aconteceu. Nos estados em que nao ha botao
   sobra so a frase, que explica a ausencia dele: sem ela, o card
   pareceria ter perdido alguma coisa. */
.cx-avaliar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgb(var(--color-outline-variant));
}

.cx-avaliar-prazo {
  font-size: .75rem;
  line-height: 1.4;
  color: rgb(var(--color-on-surface-variant));
}

/* O que ja foi feito, ou o que ainda nao abriu: texto, e nao botao. */
.cx-avaliar-selo {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgb(var(--color-outline-variant));
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--color-on-surface-variant));
}
.cx-avaliar-selo .material-symbols-outlined {
  font-size: 1rem;
  color: rgb(var(--color-secondary));
}