/* ==========================================================================
   ChatISP: /tickets

   So o que e EXCLUSIVO desta pagina. Capa, passos, dupla, especificacoes,
   linha do tempo, comparativo, painel de dados, aviso, relacionadas e
   chamada vivem em css/pagina.css; grade, cartao, selo e fita vivem em
   css/site.css.

   Tres pecas proprias:
     .ticket-mock       a maquete de um ticket, no painel da capa
     .escala-*          a escada de prioridade (Baixa a Urgente), usada em
                        tres lugares diferentes com a mesma leitura visual
     .quadro-tickets    o quadro de etapas da secao #quadro

   O sistema e monocromatico: nao existe token vermelho nem ambar. A
   prioridade, entao, nao muda de MATIZ. Muda de INTENSIDADE, do tenue ao
   verde de marca. Quanto mais quente, mais contraste contra o fundo.

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

/* --------------------------------------------------------------------------
   01. Maquete de ticket (capa)

   Deliberadamente NAO e um cartao de conversa: aqui a leitura e de documento
   interno, que tem cabecalho com numero e etapa, assunto em fonte de titulo,
   campos em pares e uma trilha vertical curta com o estado de cada marco.
   -------------------------------------------------------------------------- */

.ticket-mock {
  display: grid;
  gap: var(--e5);
}

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

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

.ticket-etapa {
  flex: none;
}

.ticket-assunto {
  margin: 0;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.25;
}

/* Os quatro campos que decidem de quem e a demanda e ate quando. */
.ticket-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

.ticket-campos > div {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}

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

.ticket-campos dd {
  margin: 0;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  line-height: 1.4;
}

/* Trilha vertical: ponto cheio no que ja passou, ponto aceso no agora, ponto
   vazio no que ainda nao aconteceu. O fio para no ultimo marco. */
.ticket-trilha {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-marca {
  position: relative;
  display: grid;
  gap: var(--e1);
  padding-left: var(--e5);
}

.ticket-marca::before {
  content: "";
  position: absolute;
  top: var(--e1);
  left: 0;
  width: var(--e3);
  height: var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  background: var(--sup-1);
}

/* O fio sai debaixo do ponto e morre no ponto seguinte: left e metade da
   largura do ponto, para os dois ficarem no mesmo eixo. */
.ticket-marca:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--e3) + var(--e2));
  bottom: calc(var(--e4) * -1);
  left: calc(var(--e3) / 2);
  width: 1px;
  background: var(--borda-forte);
}

.ticket-marca strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  line-height: 1.4;
}

.ticket-marca span {
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.5;
}

.ticket-marca--feita::before {
  background: var(--borda-forte);
}

.ticket-marca--agora::before {
  border-color: var(--verde);
  background: var(--verde);
  box-shadow: 0 0 0 var(--e1) var(--verde-vidro);
}

.ticket-marca--agora strong {
  color: var(--verde);
}

.ticket-marca--futura strong {
  color: var(--tenue);
  font-weight: var(--p-medio);
}

/* --------------------------------------------------------------------------
   02. Escada de prioridade

   Um ponto antes do rotulo, do tenue ao verde. Os tres lugares que exibem
   prioridade, a maquete da capa, a fita da secao #prazo e os cartoes do
   quadro, compartilham a mesma escada para que "Alta" signifique a mesma
   coisa em qualquer lugar da pagina.
   -------------------------------------------------------------------------- */

.ticket-prioridade,
.ticket-nivel,
.mini-prioridade {
  --nivel: var(--tenue);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

.ticket-prioridade::before,
.ticket-nivel::before,
.mini-prioridade::before {
  content: "";
  flex: none;
  width: var(--e2);
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--nivel);
}

.ticket-prioridade--baixa,
.ticket-nivel--baixa,
.mini-prioridade--baixa {
  --nivel: var(--tenue);
}

.ticket-prioridade--normal,
.ticket-nivel--normal,
.mini-prioridade--normal {
  --nivel: var(--suave);
}

.ticket-prioridade--alta,
.ticket-nivel--alta,
.mini-prioridade--alta {
  --nivel: var(--texto);
}

.ticket-prioridade--urgente,
.ticket-nivel--urgente,
.mini-prioridade--urgente {
  --nivel: var(--verde);
  color: var(--verde);
}

.ticket-prioridade--urgente::before,
.ticket-nivel--urgente::before,
.mini-prioridade--urgente::before {
  box-shadow: 0 0 0 var(--e1) var(--verde-vidro);
}

/* A fita de .fita ja entrega a pilula; aqui so entra o rotulo que a
   apresenta e o alinhamento do conjunto. */
.ticket-escala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
}

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

/* --------------------------------------------------------------------------
   03. Quadro de tickets (secao #quadro)

   Uma coluna por etapa, cartoes dentro. Os numeros e titulos sao exemplo, e
   por isso o bloco inteiro e aria-hidden e a nota abaixo dele diz, em texto,
   que etapas e tipos sao cadastro de cada provedor.
   -------------------------------------------------------------------------- */

.quadro-tickets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: var(--e4);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-2);
}

.quadro-coluna {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-0);
}

.quadro-etapa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.quadro-etapa-nome {
  color: var(--texto);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  line-height: 1.3;
  text-transform: uppercase;
}

.quadro-etapa-conta {
  flex: none;
  min-width: var(--e5);
  padding-inline: var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  background: var(--sup-2);
  color: var(--suave);
  font-size: var(--c5);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mini-ticket {
  display: grid;
  gap: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  box-shadow: var(--sombra-1);
}

.mini-numero {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk3);
  font-variant-numeric: tabular-nums;
}

.mini-assunto {
  color: var(--texto);
  font-size: var(--c4);
  font-weight: var(--p-medio);
  line-height: 1.45;
}

.mini-prioridade {
  color: var(--suave);
  font-size: var(--c5);
  line-height: 1.4;
}

/* A ultima coluna e a dos resolvidos: ela recua um degrau, porque o que ja
   foi entregue nao disputa atencao com o que ainda esta aberto. */
.quadro-coluna:last-child .mini-ticket {
  box-shadow: none;
  background: transparent;
}

.quadro-coluna:last-child .mini-assunto {
  color: var(--suave);
}

/* --------------------------------------------------------------------------
   04. Distancia entre blocos irmaos

   site.css declara a margem de baixo do .secao-cabecalho e mais nada: a
   distancia entre um bloco e o bloco seguinte, dentro da mesma secao, nao
   existe no kit compartilhado. A regra caberia em css/pagina.css, que esta
   fechado para esta tarefa, entao ela mora aqui, presa as classes desta
   pagina para nao alcancar o trabalho de ninguem.
   -------------------------------------------------------------------------- */

.ticket-aviso,
.ticket-grade,
.ticket-linha,
.ticket-remate {
  margin-top: var(--esp-bloco);
}

.quadro-nota {
  max-width: 88ch;
  margin-top: var(--e6);
}

/* A coluna de rotulo de .especificacoes e fixa e generosa, pensada para o
   bloco ocupar metade larga da dupla. Aqui ele cai na metade estreita: o
   rotulo cede parte da largura ao valor ate 980px, onde pagina.css ja
   empilha os dois e esta regra deixa de valer. */
.ticket-config > div {
  grid-template-columns: minmax(0, calc(var(--e9) + var(--e7))) minmax(0, 1fr);
}

.ticket-remate {
  display: grid;
  justify-items: start;
  gap: var(--e4);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda);
}

.ticket-remate p {
  margin: 0;
  max-width: 62ch;
  color: var(--suave);
  font-size: var(--c2);
  line-height: 1.75;
}

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

@media (max-width: 1200px) {
  .quadro-tickets {
    gap: var(--e3);
    padding: var(--e4);
  }

  .quadro-coluna {
    padding: var(--e3);
  }
}

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

  /* pagina.css empilha rotulo e valor aqui; como a regra de cima tem a mesma
     especificidade e vem depois na cascata, ela precisa ser desfeita a mao. */
  .ticket-config > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  /* Alvo de toque no dedo: o link cresce por padding, nao por altura fixa. */
  .ticket-remate .link-seta {
    padding-block: var(--e3) var(--e4);
  }
}

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