/* ==========================================================================
   ChatISP: /chamadas

   So o que e EXCLUSIVO desta pagina. Capa, linha do tempo, comparativo,
   especificacoes, aviso, dupla, relacionadas e chamada final vivem em
   css/pagina.css; acordeao, selo, botao e nota vivem em css/site.css.

   Tres pecas proprias:
     .voz-cartao   maquete do cartao de chamada em curso, no painel da capa
     .checagem     as quatro condicoes da secao #condicoes, em painel unico
     .acompanha    maquete do controle persistente, na secao #durante
   Mais um ajuste de duas linhas para o fecho da secao #canais.

   Nenhum valor escrito a mao: so var(). O bloco funciona nos dois capitulos
   sem variante clara propria, porque .em-papel ja reescreve os tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Maquete da chamada em curso (capa)

   O cartao diz quatro coisas de uma vez: quem esta do outro lado, ha quanto
   tempo, por onde a chamada entrou e em que planos isso existe. Os selos de
   plano ficam DENTRO da maquete de proposito. A condicao comercial e parte
   da tela, nao letra miuda no rodape.
   -------------------------------------------------------------------------- */

.voz-cartao {
  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);
}

.voz-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
}

.voz-avatar {
  display: grid;
  place-items: center;
  width: var(--e7);
  height: var(--e7);
  border-radius: var(--r-full);
  background: var(--verde-vidro);
  border: 1px solid var(--verde-linha);
  color: var(--verde);
}

.voz-avatar .icone {
  width: var(--e5);
  height: var(--e5);
}

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

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

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

.voz-estado {
  flex: none;
  color: var(--verde);
  border-color: var(--verde-linha);
}

/* Duracao, origem e a onda. A onda e decorativa e estatica: nao ha animacao
   nova nesta pagina, e uma barra parada nao promete qualidade de audio. */
.voz-relogio {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  margin: 0;
  padding-block: var(--e5);
  border-block: 1px solid var(--borda);
}

.voz-onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  height: var(--e7);
}

.voz-onda i {
  width: var(--e1);
  height: var(--e3);
  border-radius: var(--r-full);
  background: var(--verde-linha);
}

.voz-onda i:nth-child(3n + 2) {
  background: var(--verde);
}

.voz-onda i:nth-child(4n + 1) {
  height: var(--e5);
}

.voz-onda i:nth-child(6n + 3) {
  height: var(--e7);
}

.voz-onda i:nth-child(5n + 4) {
  height: var(--e6);
}

.voz-digitos {
  font-family: var(--titulo);
  font-size: var(--t3);
  font-weight: var(--p-max);
  line-height: 1;
  letter-spacing: var(--tk2);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.voz-origem {
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

.voz-controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
}

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

.voz-botao--fim {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

.voz-exigencia {
  display: grid;
  gap: var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

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

.voz-selos li {
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  border: 1px solid var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.voz-condicao {
  margin: 0;
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   02. Checagem das quatro condicoes

   Nao sao quatro cartoes soltos: e UM painel repartido por fios, porque as
   quatro condicoes valem juntas ou nao valem. Os fios sao o gap de 1px sobre
   o fundo --borda; assim a divisao interna acompanha o capitulo claro sem
   nenhuma regra .em-papel propria.
   -------------------------------------------------------------------------- */

/* Piso de 280px, e nao 230: cada celula gasta ~64px em padding, entao o texto
   recebe bem menos que a coluna. Com 230 cabiam quatro colunas em 1024px e o
   paragrafo ficava com 178px, ou sete linhas de 20 caracteres. Com 280 sao
   tres ali, e as quatro de sempre voltam no desktop. */
.checagem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--borda);
  overflow: hidden;
}

.checagem-item {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e6);
  background: var(--sup-1);
}

.checagem-marca {
  display: grid;
  place-items: center;
  width: var(--e7);
  height: var(--e7);
  margin-bottom: var(--e1);
  border-radius: var(--r-md);
  background: var(--verde-vidro);
  border: 1px solid var(--verde-linha);
  color: var(--verde);
}

.checagem-marca .icone {
  width: var(--e5);
  height: var(--e5);
}

.checagem-item h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.checagem-item p {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.68;
  color: var(--suave);
}

/* A linha que fecha a conta. Vem colada no painel, nao no fim da secao. */
.checagem-fecho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e5) 0 var(--esp-bloco);
  color: var(--texto);
  font-size: var(--c2);
  line-height: 1.6;
}

.checagem-fecho .icone {
  width: var(--e4);
  height: var(--e4);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   03. Controle persistente (secao #durante)

   A maquete mostra o argumento inteiro numa imagem: a tela aberta e outra
   (Relatorios) e a barra da chamada continua ali embaixo.
   -------------------------------------------------------------------------- */

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

.acompanha-tela {
  display: grid;
  gap: var(--e5);
  padding: var(--e5);
  border-radius: var(--r-md);
  background: var(--sup-1);
  border: 1px solid var(--borda);
}

.acompanha-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

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

.acompanha-aba--ativa {
  border-color: var(--borda-forte);
  background: var(--sup-3);
  color: var(--texto);
}

.acompanha-linhas {
  display: grid;
  gap: var(--e2);
}

.acompanha-linhas i {
  height: var(--e3);
  border-radius: var(--r-sm);
  background: var(--sup-2);
  border: 1px solid var(--borda);
}

.acompanha-linhas i:nth-child(2) {
  width: 88%;
}

.acompanha-linhas i:nth-child(3) {
  width: 72%;
}

.acompanha-linhas i:nth-child(4) {
  width: 54%;
}

.acompanha-barra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-md);
  background: var(--sup-2);
  border: 1px solid var(--verde-linha);
  box-shadow: var(--brilho-verde);
}

.acompanha-ponto {
  width: var(--e2);
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--verde);
  box-shadow: 0 0 0 var(--e1) var(--verde-vidro);
}

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

.acompanha-nome strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-medio);
}

.acompanha-nome span {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.acompanha-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.acompanha-tempo {
  color: var(--verde);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  font-variant-numeric: tabular-nums;
}

.acompanha-acao {
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  border: 1px solid var(--borda-forte);
  color: var(--suave);
  font-size: var(--c5);
}

.acompanha-acao--fim {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   04. Fecho da secao #canais

   A ressalva de homologacao e o link do canal andam juntos embaixo da
   tabela. So o espacamento: o resto ja vem de .nota e .link-seta.
   -------------------------------------------------------------------------- */

.canais-fecho {
  display: grid;
  justify-items: start;
  gap: var(--e3);
  margin-top: var(--e5);
}

.canais-fecho .nota {
  margin: 0;
  max-width: 68ch;
}

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

@media (max-width: 980px) {
  .checagem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .checagem-item {
    padding: var(--e5);
  }

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

  .voz-estado {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .acompanha-barra {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .acompanha-acoes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .voz-cartao {
    padding: var(--e4);
  }

  .voz-onda {
    height: var(--e6);
  }
}