/* ==========================================================================
   ChatISP: /whatsapp

   So o que e EXCLUSIVO desta pagina. Capa, dupla, passos, comparativo,
   aviso, especificacoes, painel-dados, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, selo e botao vivem em css/site.css; a faixa
   reaproveitada da home (componentes/conexoes.php) vive em
   css/sec-conexoes.css.

   Duas pecas proprias:
     .canais-mock   maquete da tela de Conexoes, no painel da capa: duas
                    linhas, uma por caminho, uma aberta e uma com a janela
                    fechada. E a pagina inteira em miniatura
     .selo--verde   compensacao local (ver 02)

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

/* --------------------------------------------------------------------------
   01. Maquete da tela de Conexoes (capa)

   As duas linhas sao deliberadamente assimetricas: a de QR fica "ligada" (aro
   verde no estado) e a oficial fica com a janela fechada. E a tese da pagina
   antes do primeiro paragrafo: os dois caminhos existem, e um deles tem uma
   regra a mais.
   -------------------------------------------------------------------------- */

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

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

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

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

/* Duas colunas: identificacao a esquerda, estado a direita ocupando as duas
   primeiras faixas. A nota corre embaixo, inteira. */
.canal-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e2) var(--e3);
  padding: var(--e4);
  border-radius: var(--r-md);
  background: var(--sup-2);
  border: 1px solid var(--borda);
}

.canal-via {
  grid-column: 1;
  grid-row: 1;
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.canal-quem {
  grid-column: 1;
  grid-row: 2;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk3);
}

.canal-estado {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  border: 1px solid var(--borda-forte);
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.8;
  white-space: nowrap;
}

.canal-linha--ligado .canal-estado {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

.canal-nota {
  grid-column: 1 / -1;
  grid-row: 3;
  color: var(--suave);
  font-size: var(--c5);
  line-height: 1.6;
}

.canais-mock-rodape {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

/* --------------------------------------------------------------------------
   02. Compensacao do componente reaproveitado

   componentes/conexoes.php marca o IXC com .selo--verde, que mora em
   css/secoes-comum.css, a folha da HOME, que uma pagina interna nao carrega.
   Sem isto o selo cai no cinza do .selo comum e o componente perde o unico
   acento que distingue "financeiro direto" do resto da faixa.

   Fica escopado no slug do <body> de proposito: e ajuste desta pagina, nao
   uma redefinicao global. O lugar certo seria css/secoes-comum.css passar a
   ser carregado junto de css/sec-*.css, mas nenhuma pagina interna pode
   editar arquivo compartilhado. Registrado no relatorio.
   -------------------------------------------------------------------------- */

.pagina-whatsapp .selo--verde {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   03. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  /* O estado sai da coluna da direita e vira a terceira linha: em 360px, o
     par "nome + pilula" nao cabe lado a lado sem quebrar a pilula. */
  .canal-linha {
    grid-template-columns: minmax(0, 1fr);
  }

  .canal-estado {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .canal-nota {
    grid-row: 4;
  }
}