/**
 * Analytics — azulejos da landing e o gráfico de mensagens por dia.
 *
 * Os .ana-tile trazem a linguagem neobrutalista da landing para dentro do
 * painel: borda de tinta e sombra dura alternando amarelo e azul da marca, com o
 * número em peso brutal.
 *
 * O gráfico segue o método do design de dados: eixos recessivos, grade em três
 * níveis (base, metade, teto), marcas finas de topo arredondado ancoradas na
 * base, tooltip por dia posicionado sobre um alvo de toque invisível maior que a
 * barra, e tabela como vista alternativa do MESMO dado — a troca entre as duas
 * tem uma animação curta de entrada. As cores das séries vivem no JS
 * (analytics.js), porque são paleta de dados validada, não tokens de interface.
 */

.ana-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e4);
}

.ana-tile {
  background: var(--sup-cartao);
  border: 2px solid var(--marca-tinta);
  border-radius: var(--raio-cartao);
  box-shadow: 6px 6px 0 var(--marca-amarelo);
  padding: var(--e4) var(--e5);
}

.ana-tile:nth-child(even) { box-shadow: 6px 6px 0 var(--marca-azul); }

.ana-tile__topo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.ana-tile__valor {
  margin-top: 6px;
  font-size: 30px;
  font-weight: var(--peso-brutal);
  letter-spacing: -.02em;
}

.ana-tile__periodo { font-size: var(--t-meta); color: var(--tinta-3); }

.ana-grafico__area { position: relative; padding: var(--e3) var(--e4) var(--e2); }

.ana-svg { display: block; width: 100%; height: auto; color: var(--tinta-3); }

.ana-svg__rotulo { fill: var(--tinta-3); font-size: 11px; }

.ana-legenda { display: flex; gap: var(--e4); font-size: var(--t-apoio); color: var(--tinta-2); }

.ana-legenda__item { display: inline-flex; align-items: center; gap: 6px; }

.ana-legenda__cor { width: 10px; height: 10px; border-radius: 3px; }

/* Série de cliente é linha pontilhada sem preenchimento: o selo da legenda
   repete a marca em vez de virar um quadradinho cheio, senão a legenda promete
   uma barra que o gráfico não desenha. */
.ana-legenda__cor--traco {
  height: 0;
  width: 14px;
  border-radius: 0;
  background: none;
  border-top: 2px dotted currentColor;
}

.ana-top__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
}

.ana-top__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  color: var(--tinta-2);
  white-space: nowrap;
}

.ana-top__ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; }

.ana-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: var(--raio-pequeno);
  background: var(--marca-tinta);
  color: #fff;
  font-size: var(--t-meta);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--sombra-cartao);
}

.ana-tabela { padding: var(--e2) var(--e5) var(--e4); font-size: var(--t-apoio); overflow-x: auto; }

.ana-tabela table { border-collapse: collapse; width: 100%; }

.ana-tabela th {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.ana-tabela th, .ana-tabela td {
  text-align: right;
  padding: 7px var(--e3);
  border-bottom: 1px solid var(--separador);
  font-variant-numeric: tabular-nums;
}

.ana-tabela th:first-child, .ana-tabela td:first-child { text-align: left; }

.ana-tabela tr:nth-child(even) td { background: var(--sup-elevada); }

.ana-troca--entra { animation: ana-entrar .22s ease-out; }

@keyframes ana-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ana-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-apoio);
  color: var(--tinta-3);
  text-align: center;
  padding: var(--e5);
}

.ana-top__trilho {
  margin-top: 5px;
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  overflow: hidden;
  max-width: 420px;
}

.ana-top__barra { height: 100%; border-radius: var(--raio-pilula); background: #0873a3; }