/* ==========================================================================
   Analytics do Site (site-analytics.js)
   --------------------------------------------------------------------------
   Cartao e numero vem de .ds-card e .ds-stat (design-system/primitives.css).
   Aqui fica so o que e desta tela: filtro, abas, funil, barras e tabela.
   Nenhuma cor fora dos tokens: a cor da barra e por ASSUNTO (leads, visitas,
   qualidade), para o olho separar o que e medido na visita do que e medido
   no lead.
   ========================================================================== */

/* O container usa o wrapper do Leads do Site (ls-screen-wrap): largura de
   1400px e recuo lateral em cada filho direto, que aqui sao so o
   .screen-header e o .anl-tela. */
.anl-tela { padding-bottom: var(--space-8); }

/* ---- Filtro de periodo ---- */
.anl-filtros {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.anl-presets { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.anl-preset {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); background: var(--surface-card);
  color: var(--text-body); font-size: var(--text-body-sm); font-weight: 600; cursor: pointer;
}
.anl-preset:hover { background: var(--surface-tile); }
.anl-preset[aria-pressed="true"] {
  background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-brand);
}
.anl-preset:focus-visible, .anl-aba:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.anl-campo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 9rem; }
.anl-campo > span { font-size: var(--text-body-sm); font-weight: 600; color: var(--text-muted); }
/* O botao herdava largura cheia do legado dentro do form. */
.anl-filtros > button { flex: 0 0 auto; width: auto; }
.anl-campo select { max-width: 100%; }
.anl-campo--valor { min-width: 14rem; max-width: 24rem; flex: 1 1 14rem; }
/* A frase do segmento ligado: linha propria, abaixo dos controles. */
.anl-segmento-ativo {
  flex: 1 1 100%; margin: 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--surface-tile);
  font-size: var(--text-body-sm); color: var(--text-body);
}
.anl-periodo { margin-left: auto; align-self: center; font-size: var(--text-body-sm); color: var(--text-muted); }

/* ---- Abas internas ---- */
.anl-abas {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
.anl-aba {
  padding: var(--space-2) var(--space-4); margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-size: var(--text-body-sm); font-weight: 600; cursor: pointer;
}
.anl-aba:hover { color: var(--text-strong); }
.anl-aba[aria-selected="true"] { color: var(--text-link); border-bottom-color: var(--brand-primary); }

/* ---- Estrutura ---- */
.anl-kpis { margin-bottom: var(--space-5); }
.anl-kpis-nota { margin: 0 0 var(--space-4); font-size: var(--text-body-sm); color: var(--text-muted); }
.anl-grade {
  display: grid; align-items: start; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
/* Filho de grid nao encolhe abaixo do conteudo por padrao, e a tabela larga
   estouraria a coluna no celular. */
.anl-grade > * { min-width: 0; }
.anl-card--largo { grid-column: 1 / -1; }
.anl-corpo > .anl-card--largo { margin-bottom: var(--space-5); }

.anl-estado { text-align: center; color: var(--text-body); }
.anl-estado p { margin: 0 0 var(--space-3); }
.anl-estado p:last-child { margin-bottom: 0; }
.anl-estado--erro { border-color: var(--danger-500); }
.anl-estado--erro strong { color: var(--danger-700); }
.anl-vazio { margin: 0; padding: var(--space-4) 0; color: var(--text-muted); font-size: var(--text-body-sm); }

/* ---- Funil ---- */
.anl-funil {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.anl-funil-passo {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-tile); border: 1px solid var(--border-subtle);
}
.anl-funil-passo--fim { background: var(--surface-brand-soft); border-color: var(--violet-200); }
.anl-funil-rotulo { font-size: var(--text-body-sm); font-weight: 600; color: var(--text-muted); }
.anl-funil-valor {
  font-family: var(--font-display); font-size: var(--text-metric-sm); font-weight: 800;
  line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.anl-funil-pct { font-size: var(--text-caption); font-weight: 600; color: var(--text-link); }
.anl-funil-detalhe { font-size: var(--text-caption); color: var(--text-muted); }

/* ---- Barras ---- */
.anl-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.anl-barra {
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: minmax(0, 11rem) minmax(3rem, 1fr) auto;
  font-size: var(--text-body-sm);
}
.anl-barra-rotulo { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anl-barra-sub {
  display: block; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-caption); color: var(--text-muted);
}
.anl-barra-trilho { height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.anl-barra-cheia { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--dataviz-1); }
.anl-barras--visitas .anl-barra-cheia { background: var(--dataviz-3); }
.anl-barra--funda .anl-barra-cheia { background: var(--dataviz-serie-funda); }
.anl-barra--media .anl-barra-cheia { background: var(--dataviz-serie-media); }
.anl-barra--rasa .anl-barra-cheia { background: var(--dataviz-serie-rasa); }
.anl-barra-valor { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: right; }
.anl-barra-valor small { font-weight: 400; color: var(--text-muted); }

/* ---- Grafico ---- */
.anl-grafico { position: relative; height: 16rem; }
.anl-grafico canvas { max-width: 100%; }

/* ---- Tabela ---- */
.anl-tabela-wrap { overflow-x: auto; }
.anl-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.anl-tabela th {
  text-align: left; padding: var(--row-padding-y-tight) var(--space-3);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border-bottom: 1px solid var(--border-subtle);
}
.anl-tabela td { padding: var(--row-padding-y-tight) var(--space-3); color: var(--text-body); border-bottom: 1px solid var(--border-subtle); }
.anl-tabela tr:last-child td { border-bottom: none; }
.anl-tabela .anl-num { text-align: right; font-variant-numeric: tabular-nums; }

.anl-chip {
  display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-caption); font-weight: 600;
  background: var(--surface-sunken); color: var(--text-muted);
}
.anl-chip--ok { background: var(--success-100); color: var(--success-700); }

@media (max-width: 40rem) {
  .anl-periodo { margin-left: 0; width: 100%; }
  .anl-grade { grid-template-columns: minmax(0, 1fr); }
  .anl-barra { grid-template-columns: minmax(0, 1fr) auto; }
  .anl-barra-trilho { grid-column: 1 / -1; grid-row: 2; }
  /* Tabela empilhada: cada celula mostra o proprio cabecalho. */
  .anl-tabela thead { display: none; }
  .anl-tabela tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
  .anl-tabela td { display: flex; justify-content: space-between; gap: var(--space-3); border: none; padding: var(--space-1) 0; }
  .anl-tabela td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); }
  .anl-tabela .anl-num { text-align: right; }
}