/* ==========================================================================
   ChatISP: /integracoes

   So o que e EXCLUSIVO desta pagina. Capa, trilha, painel, comparativo,
   passos, aviso, especificacoes, dupla, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, selo, fita e link-seta vivem em
   css/site.css e css/pagina.css.

   Tres pecas proprias:
     .mapa-mock   o mapa de vias da capa: para que lado cada dado anda
     .espelho     o espelho de mao unica do Google Agenda, na secao #agenda
     .quadro-integracoes  os ajustes do comparativo de quatro colunas

   Mais o espaco entre blocos irmaos dentro de uma secao: css/pagina.css nao
   define margem entre .grade e o bloco seguinte, entao cada adjacencia que
   esta pagina cria e resolvida aqui, nominalmente. Nada disso foi escrito em
   arquivo compartilhado (ver relatorio).

   Nenhum valor escrito a mao: so var(). As duas excecoes sao 1px de borda e
   o min-width da tabela, que e medida de rolagem, nao de ritmo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Mapa de vias (capa)

   Quatro linhas, cada uma com origem, seta e destino. O no "ChatISP" e o
   unico verde: onde ele estiver na linha, aquele e o lado de ca. A seta e
   icone('seta'), nao um caractere: as fontes do site sao subconjuntos
   latinos e nao trazem glifo de flecha.
   -------------------------------------------------------------------------- */

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

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

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

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

.mapa-ponta {
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  color: var(--texto);
  font-size: var(--c4);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk-micro);
  text-align: center;
}

.mapa-ponta--nucleo {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
  font-weight: var(--p-forte);
}

.mapa-seta {
  display: grid;
  justify-items: center;
  gap: var(--e1);
  color: var(--verde);
}

.mapa-seta .icone {
  width: var(--e5);
  height: var(--e5);
}

/* Mao dupla: duas setas empilhadas, a de baixo virada. */
.mapa-seta--dupla .icone {
  width: var(--e4);
  height: var(--e4);
}

.mapa-seta--dupla .icone:last-child {
  rotate: 180deg;
}

.mapa-nota {
  grid-column: 1 / -1;
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.5;
  letter-spacing: var(--tk-micro);
}

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

/* --------------------------------------------------------------------------
   02. Secao #camadas: a fita de nomes dentro do painel
   -------------------------------------------------------------------------- */

.painel-nomes {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   03. Secao #quadro: o comparativo de quatro colunas

   .comparativo pede 520px de largura minima, largura pensada para tabela de
   marcas (sim/nao). Aqui as quatro colunas sao texto corrido: abaixo de 780px
   cada celula vira uma palavra por linha. So por isso a medida sobe.
   -------------------------------------------------------------------------- */

.quadro-integracoes .comparativo {
  min-width: 780px;
}

/* A primeira coluna empilha o nome e, no IXC, o selo de financeiro direto. */
.quadro-integracoes tbody th {
  display: grid;
  justify-items: start;
  gap: var(--e2);
  min-width: 0;
}

.quadro-integracoes tbody th a {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--verde-linha);
  text-underline-offset: var(--e1);
}

.quadro-integracoes tbody th a:hover {
  color: var(--verde);
  text-decoration-color: var(--verde);
}

.quadro-integracoes + .aviso {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   04. Secao #ligar: respiro entre os passos e os links de saida
   -------------------------------------------------------------------------- */

.passos--linha + .secao-acao {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   05. Secao #agenda: o espelho de mao unica

   Duas superficies iguais e, entre elas, a tese da secao: uma via aberta e
   uma via cortada. A via bloqueada nao e vermelha: nada aqui esta errado,
   apenas nao existe. Tracejado e tenue bastam.
   -------------------------------------------------------------------------- */

.espelho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: stretch;
}

.espelho-lado {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-1);
}

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

.espelho-lado p {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

.espelho-meio {
  display: grid;
  align-content: center;
  gap: var(--e5);
}

.espelho-via {
  display: grid;
  justify-items: center;
  gap: var(--e1);
  padding: var(--e4);
  border: 1px solid var(--verde-linha);
  border-radius: var(--r-md);
  background: var(--verde-vidro);
  color: var(--verde);
  text-align: center;
}

.espelho-via .icone {
  width: var(--e6);
  height: var(--e6);
}

.espelho-via b {
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.espelho-via small {
  max-width: 18ch;
  font-size: var(--c5);
  line-height: 1.45;
  color: var(--suave);
}

.espelho-via--bloqueada {
  border: 1px dashed var(--borda-forte);
  background: transparent;
  color: var(--tenue);
}

.espelho-via--bloqueada .icone {
  rotate: 180deg;
}

.espelho-via--bloqueada small {
  color: var(--tenue);
}

.espelho + .aviso {
  margin-top: var(--esp-bloco);
}

/* --------------------------------------------------------------------------
   06. Secao #sob-medida: nomes tecnicos no meio da frase

   <code> nao e estilizado em lugar nenhum do site; como esta e a unica
   pagina que cita endereco e cabecalho HTTP, a regra mora aqui.
   -------------------------------------------------------------------------- */

.pagina-integracoes code {
  padding: 0 var(--e1);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-2);
  color: var(--texto);
  font-family: var(--mono);
  font-size: var(--c4);
  overflow-wrap: anywhere;
}

/* Dois links de saida no fim da coluna de texto: eles sao um par, entao ficam
   mais perto um do outro do que do paragrafo acima. */
.pagina-integracoes .dupla-texto .link-seta + .link-seta {
  margin-top: calc(var(--e2) * -1);
}

/* --------------------------------------------------------------------------
   07. Responsivo: 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* O espelho empilha: cartao, as duas vias lado a lado, cartao. */
  .espelho {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }

  .espelho-meio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e4);
  }
}

@media (max-width: 680px) {
  /* Cada via do mapa vira uma coluna: origem, seta para baixo, destino. */
  .mapa-via {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .mapa-seta .icone {
    rotate: 90deg;
  }

  .mapa-seta--dupla {
    grid-auto-flow: column;
    gap: var(--e3);
  }

  .mapa-seta--dupla .icone:last-child {
    rotate: 270deg;
  }

  /* Alvo de toque nos links da tabela. */
  .quadro-integracoes tbody th a {
    display: inline-flex;
    align-items: center;
    min-height: var(--e7);
  }
}

@media (max-width: 380px) {
  .espelho-meio {
    grid-template-columns: minmax(0, 1fr);
  }

  .espelho-lado {
    padding: var(--e5);
  }
}