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

   So o que e EXCLUSIVO desta pagina. Capa, passos, dupla, comparativo,
   aviso, painel, acordeao, relacionadas e chamada vivem em css/pagina.css;
   grade, cartao, selo e nota vivem em css/site.css.

   Quatro pecas proprias:
     .ficha-rede     maquete do bloco de rede, no painel da capa
     .fila-plantao   a fila de sabado, na secao do aperto (monta sobre .painel)
     .passo-hora     a hora do plantao dentro de .passo-corpo
     .acao-tecnica   as duas acoes que o atendente executa na rede

   Mais dois ajustes de pagina que nao cabiam em arquivo compartilhado:
   o .link-seta dentro de .passo-corpo e a medida de leitura do acordeao
   quando ele ocupa a largura inteira da secao.

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

/* --------------------------------------------------------------------------
   01. Ficha de rede (capa)

   Sem moldura propria: a caixa e a .capa-painel. Aqui so mora o ritmo das
   linhas: rotulo, estado e os campos que o Ravicor traz para cada um.
   -------------------------------------------------------------------------- */

.ficha-rede {
  display: grid;
  gap: var(--e4);
}

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

.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-fonte {
  justify-self: end;
}

.ficha-linhas {
  display: grid;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Duas colunas na primeira faixa (rotulo | estado) e os campos ocupando a
   largura inteira embaixo: e o desenho do bloco real, onde o estado resume e
   a linha de baixo diz de onde ele saiu. */
.ficha-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  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-1);
}

.ficha-rotulo {
  color: var(--texto);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
}

.ficha-marca {
  justify-self: end;
  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);
  white-space: nowrap;
}

.ficha-campos {
  grid-column: 1 / -1;
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.6;
}

/* As duas unicas operacoes de escrita. Ficam separadas por um fio do resto
   da ficha: tudo acima e leitura. */
.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.ficha-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);
}

/* --------------------------------------------------------------------------
   02. Fila do plantao (secao #sabado)

   Monta sobre .painel: a moldura, o padding e o titulo ja vem de la. O que
   e desta pagina e a linha, com hora, fala do cliente e situacao, separada
   por fio, para que a fila pareca uma fila e nao uma lista de recursos.
   -------------------------------------------------------------------------- */

.fila-linhas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.fila-linha:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

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

.fila-fala {
  color: var(--texto);
  font-size: var(--c3);
  line-height: 1.5;
}

.fila-situacao {
  justify-self: end;
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  white-space: nowrap;
}

.fila-nota {
  margin: 0;
}

/* --------------------------------------------------------------------------
   03. Passos do plantao (secao #plantao)

   A hora entra como eyebrow do passo, acima do titulo. O .passo-corpo e
   grid, entao o link precisa parar de esticar na largura toda.
   -------------------------------------------------------------------------- */

.passo-hora {
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.passo-corpo .link-seta {
  justify-self: start;
  margin-top: var(--e2);
}

/* --------------------------------------------------------------------------
   04. As duas acoes tecnicas (secao #maos)

   Dois cartoes empilhados e, embaixo, a faixa do registro. A faixa e
   tracejada e verde pelo mesmo motivo da nota interna na pagina de
   atendimento: e a leitura visual de "isto fica gravado".
   -------------------------------------------------------------------------- */

.acao-tecnica {
  display: grid;
  align-content: start;
  gap: var(--e4);
  --mov-forca: 4%;
}

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

.acao-registro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e3);
  margin: 0;
  padding: var(--e4) var(--e5);
  border: 1px dashed var(--verde-linha);
  border-radius: var(--r-md);
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.6;
}

.acao-registro .icone {
  width: var(--e5);
  height: var(--e5);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   05. Limites honestos (secao #limites)

   O acordeao ocupa a largura da secao, e a largura da secao nao e medida de
   leitura. A resposta para em 68ch; a pergunta pode ir um pouco alem.
   -------------------------------------------------------------------------- */

.limites-lista {
  max-width: 88ch;
}

.limites-lista summary > span {
  max-width: 62ch;
}

.limites-lista p {
  margin: 0;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   06. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Em coluna unica a ficha da capa ganha a largura toda; as linhas voltam a
     respirar e o estado pode ficar ao lado do rotulo sem apertar. */
  .ficha-linha {
    padding: var(--e4);
  }
}

@media (max-width: 680px) {
  .fila-linha {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e2) var(--e3);
  }

  /* A situacao desce para a segunda linha, alinhada com a fala: a hora
     continua sendo a primeira coluna da fila. */
  .fila-situacao {
    grid-column: 2;
    justify-self: start;
  }

  .acao-registro {
    padding: var(--e4);
  }
}

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

  .ficha-marca {
    justify-self: start;
  }
}