/* ==========================================================================
   ChatISP: /equipe

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

   Duas pecas proprias, as duas maquetes que a pagina inventa:
     .perfil-cartao   ficha de atendente com a grade de permissoes, na capa
     .auditoria-mock  tres linhas de registro, na secao #auditoria

   Mais tres ajustes de escopo que so existem porque css/site.css e
   css/pagina.css sao compartilhados com os outros agentes (ver secao 04).

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

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

   A leitura e a de um formulario ja preenchido: cabecalho com quem e a
   pessoa, o corpo com as permissoes marcadas e desmarcadas, e o rodape com o
   convite que ainda nao virou senha.
   -------------------------------------------------------------------------- */

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

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

.perfil-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);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
}

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

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

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

.perfil-situacao {
  flex: none;
}

/* A grade de permissoes. O quadrado a esquerda de cada linha e a marca: com
   check e verde para o que esta liberado, vazio e tenue para o que nao esta.
   Nenhuma cor de erro: nada aqui esta errado, so desligado. */
.perfil-permissoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.perm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-sm);
  border: 1px solid var(--borda);
  background: var(--sup-2);
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.4;
}

.perm::before {
  content: "";
  display: grid;
  place-items: center;
  width: var(--e4);
  height: var(--e4);
  border-radius: var(--r-sm);
  border: 1px solid var(--borda-forte);
  font-size: var(--c5);
  line-height: 1;
}

.perm--sim {
  background: var(--verde-vidro);
  border-color: var(--verde-linha);
  color: var(--texto);
}

.perm--sim::before {
  content: "✓";
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

.perfil-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.perfil-recorte {
  color: var(--tenue);
}

/* O convite e a unica coisa do cartao com prazo: fica verde para puxar o 72h
   da capa para dentro da maquete. */
.perfil-convite {
  color: var(--verde);
  font-weight: var(--p-forte);
}

/* --------------------------------------------------------------------------
   02. Maquete de auditoria (#auditoria)

   Tres registros, com as mesmas colunas da tela real: data e hora, IP,
   area, acao e detalhe. O carimbo fica na coluna estreita a esquerda, em
   numeros tabulares, para as tres linhas alinharem digito a digito.
   -------------------------------------------------------------------------- */

.auditoria-mock {
  display: grid;
  align-content: start;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sup-1);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}

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

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

.auditoria-periodo {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

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

.auditoria-registro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e2) var(--e5);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
}

.auditoria-carimbo {
  display: grid;
  gap: var(--e1);
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.auditoria-carimbo i {
  font-style: normal;
  color: var(--tenue);
  opacity: 0.75;
}

.auditoria-corpo {
  display: grid;
  justify-items: start;
  gap: var(--e1);
  min-width: 0;
}

.auditoria-area {
  padding: 0 var(--e2);
  border-radius: var(--r-full);
  border: 1px solid var(--borda-forte);
  color: var(--suave);
  font-size: var(--c5);
  line-height: 1.8;
  letter-spacing: var(--tk-micro);
}

.auditoria-corpo strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  line-height: 1.5;
}

.auditoria-corpo small {
  color: var(--suave);
  font-size: var(--c5);
  line-height: 1.5;
}

/* O rodape e o botao de carregar mais da tela real. Aqui ele e so texto:
   a maquete nao finge ser clicavel. */
.auditoria-mais {
  margin: 0;
  padding: var(--e4) var(--e5);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  text-align: center;
}

/* --------------------------------------------------------------------------
   03. Acordeao das perguntas

   O acordeao de css/site.css nasceu para a coluna estreita da home. Solto na
   largura inteira de uma secao, a linha da pergunta fica comprida demais.
   -------------------------------------------------------------------------- */

.perguntas-acesso {
  max-width: 96ch;
}

/* --------------------------------------------------------------------------
   04. Ajustes de escopo

   Tres coisas que caberiam em css/pagina.css, mas ele e compartilhado com os
   outros agentes. Ficam aqui, presas a .pagina-equipe, sem alcance fora desta
   pagina.
   -------------------------------------------------------------------------- */

/* (a) Vago: o <em> em titulo agora e regra de casa, em css/site.css, valendo
   para qualquer h1-h4 dentro de uma .secao. */

/* (b) Nao ha espaco definido entre dois blocos irmaos dentro da mesma secao:
   .secao-cabecalho resolve so o de cima. O painel de dados e o aviso desta
   pagina vem depois de outro bloco e precisam do respiro. */
.pagina-equipe .container > * + .painel-dados,
.pagina-equipe .container > * + .aviso {
  margin-top: var(--esp-bloco);
}

/* (c) .dupla-texto empilha os filhos com o mesmo gap; dois .link-seta
   seguidos ficam com respiro de paragrafo entre eles. Encostam um no outro. */
.pagina-equipe .dupla-texto .link-seta + .link-seta {
  margin-top: calc(var(--e4) * -1 + var(--e2));
}

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

@media (max-width: 1200px) {
  /* Na capa a maquete divide a largura com o texto: uma coluna de permissoes
     cabe melhor que duas espremidas. */
  .capa-painel .perfil-permissoes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  /* A capa volta a ser uma coluna so, e a grade de permissoes cabe de novo. */
  .capa-painel .perfil-permissoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .perfil-situacao {
    grid-column: 2;
  }

  .capa-painel .perfil-permissoes,
  .perfil-permissoes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* O carimbo sai da coluna propria e vira a primeira linha do registro:
     duas colunas nesta largura deixariam a acao com quatro palavras por
     linha. */
  .auditoria-registro {
    grid-template-columns: minmax(0, 1fr);
  }

  .auditoria-carimbo {
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--e3);
  }
}

@media (max-width: 380px) {
  .auditoria-carimbo {
    grid-auto-flow: row;
    gap: var(--e1);
  }
}