/* ==========================================================================
   ChatISP: /relatorios

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

   Tres pecas proprias, todas maquetes tipograficas (nenhuma imagem):
     .painel-mock     quadro de indicadores da capa, com grafico de barras
                      desenhado so com div e height em %
     .auditoria-mock  consulta de auditoria da secao #auditoria
     .fita-relatorios ajuste de medida da fita de nomes de relatorio

   Os numeros das maquetes sao ficticios e os blocos sao aria-hidden: o
   markup diz isso, e a capa carrega a nota correspondente.

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

/* --------------------------------------------------------------------------
   01. Maquete do painel de indicadores (capa)

   Tres faixas empilhadas: cabecalho com as abas de periodo, quatro numeros
   em 2x2 e o grafico de barras. A moldura ja vem de .capa-painel, entao
   aqui nao ha fundo nem borda externa.
   -------------------------------------------------------------------------- */

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

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

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

/* Abas de periodo: Hoje / 7 / 30 / 90, com a ultima marcada. E a leitura
   visual de "este painel tem recorte", sem precisar de legenda. */
.mock-abas {
  display: flex;
  gap: var(--e1);
}

.mock-abas i {
  padding: var(--e1) var(--e3);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--tenue);
  font-size: var(--c5);
  font-style: normal;
  letter-spacing: var(--tk-micro);
}

.mock-abas .mock-aba-ativa {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
  font-weight: var(--p-forte);
}

/* --- Os quatro numeros --------------------------------------------------
   Deliberadamente menores que .dado-numero: o painel-dados da pagina carrega
   numero verificavel, esta maquete carrega numero ilustrativo, e a hierarquia
   tipografica precisa respeitar essa diferenca. */
.mock-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
}

.mock-num {
  display: grid;
  align-content: start;
  gap: var(--e1);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
}

.mock-num b {
  font-family: var(--fonte);
  font-size: var(--t4);
  font-weight: var(--p-max);
  line-height: 1;
  letter-spacing: var(--tk2);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

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

.mock-var {
  justify-self: start;
  margin-top: var(--e1);
  font-size: var(--c5);
  font-style: normal;
  letter-spacing: var(--tk-micro);
  color: var(--tenue);
}

/* Verde so na variacao que vai na direcao boa (tempo caindo). A que sobe
   fica tenue: nada aqui e pintado de alarme. */
.mock-var--desce {
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   02. Grafico de barras em CSS puro

   Sete barras, uma por dia. A altura de cada uma vem de --h no atributo
   style do markup, porque e dado, nao estilo. A caixa tem altura definida
   para que a porcentagem tenha contra o que resolver.
   -------------------------------------------------------------------------- */

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

.mock-grafico-rotulo {
  color: var(--suave);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.mock-barras {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  height: var(--e9);
}

.mock-barras i {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h);
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--sup-3);
}

/* A segunda-feira e o assunto da pagina: ela e a unica barra acesa. */
.mock-barras i:first-child {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
}

.mock-eixo {
  display: flex;
  gap: var(--e2);
}

.mock-eixo i {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  color: var(--tenue);
  font-size: var(--c5);
  font-style: normal;
  letter-spacing: var(--tk-micro);
}

/* --------------------------------------------------------------------------
   03. Painel de dados dos periodos

   O .painel-dados padrao encosta no bloco anterior; aqui ele fecha a secao
   depois da grade de cartoes e precisa do respiro do ritmo de bloco.
   -------------------------------------------------------------------------- */

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

.periodos + .nota {
  margin-top: var(--e4);
}

/* --------------------------------------------------------------------------
   04. Maquete da consulta de auditoria

   Quatro colunas: quando, quem, de onde e o que. A leitura e de tabela, mas
   o markup nao e <table> de proposito. Nao ha dado real aqui, e o bloco
   inteiro e aria-hidden.
   -------------------------------------------------------------------------- */

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

.auditoria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.auditoria-filtros span {
  padding: var(--e1) 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);
}

.auditoria-filtros span:first-child {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

.auditoria-lista {
  display: grid;
}

.auditoria-linha {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e1) var(--e3);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--borda);
  font-size: var(--c5);
  line-height: 1.5;
}

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

.auditoria-quando,
.auditoria-ip {
  color: var(--tenue);
  letter-spacing: var(--tk-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.auditoria-quem {
  color: var(--texto);
  font-weight: var(--p-medio);
  white-space: nowrap;
}

.auditoria-acao {
  min-width: 0;
  color: var(--suave);
}

/* A area e a unica palavra verde da linha: e por ela que a consulta filtra. */
.auditoria-acao b {
  color: var(--verde);
  font-weight: var(--p-forte);
}

.auditoria-mais {
  margin: 0;
  padding-top: var(--e2);
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

/* --------------------------------------------------------------------------
   05. Fita com os nomes dos relatorios

   A fita padrao e uma tira de pilulas; aqui ela fecha a secao dos passos e
   precisa de folga em cima e de uma medida que nao vire paragrafo.
   -------------------------------------------------------------------------- */

.fita-relatorios {
  margin-top: var(--esp-bloco);
  max-width: 82ch;
}

.fita-relatorios + .nota {
  margin-top: var(--e4);
  max-width: 68ch;
}

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

@media (max-width: 1200px) {
  /* Na coluna estreita da capa dois cartoes lado a lado ficam com tres
     palavras por linha no rotulo. */
  .auditoria-linha {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .auditoria-ip {
    display: none;
  }
}

@media (max-width: 980px) {
  /* A capa volta a uma coluna: o painel tem a largura inteira e cabe o IP
     de novo. */
  .auditoria-linha {
    grid-template-columns: auto auto auto minmax(0, 1fr);
  }

  .auditoria-ip {
    display: revert;
  }
}

@media (max-width: 680px) {
  .mock-numeros {
    gap: var(--e2);
  }

  .mock-num {
    padding: var(--e3);
  }

  .auditoria-mock {
    padding: var(--e4);
  }

  /* Cada registro vira um bloco: quando, quem e de onde na primeira linha,
     a acao embaixo. Nenhuma rolagem lateral. */
  .auditoria-linha {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .auditoria-acao {
    grid-column: 1 / -1;
  }
}

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

  .mock-barras {
    height: var(--e8);
  }

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