/* ==========================================================================
   analytics.css — Lojas · Produtos · Financeiro · Tráfego · Reviews

   Arquivo separado pelo mesmo motivo do crm-clientes.css e do metas.css:
   styles.css passou de 14.9k linhas. Só tokens do foundation.css
   ("Grafite neutro, um acento só" — docs/design-system.md). Nenhuma cor
   literal nova, nenhum gradiente, nenhuma sombra colorida.
   Origem: docs/AUDITORIA-VISUAL-APPLE-2026-09-24.md (R1-R2, L1-L2, P1, FI1,
   T1, S2-S5, S7).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Cabeçalho de uma linha — período + fonte, sem cartão de título.
   O título da tela já está no topbar; aqui só o que muda a leitura.
   -------------------------------------------------------------------------- */
.an-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s5);
}
.an-head__title {
  margin: 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.an-head__range {
  color: var(--muted);
  font-size: var(--fs-foot);
  font-variant-numeric: tabular-nums;
}
.an-head__spacer { flex: 1 1 auto; }
.an-head select {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--fs-foot);
  color: var(--text);
}
.an-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  color: var(--muted);
  font-size: var(--fs-foot);
}
.an-custom input { min-height: 36px; padding: 4px 8px; }

/* Pill de fonte: nome que o Rafael usa ("Bling · há 2h"); o endpoint fica
   no title=, auditável no hover. O ponto carrega o estado. */
.an-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-foot);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.an-source::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
}
.an-source.is-ok::before { background: var(--success); }
.an-source.is-warn { color: var(--warning); }
.an-source.is-warn::before { background: var(--warning); }
.an-source.is-bad { color: var(--danger); }
.an-source.is-bad::before { background: var(--danger-fill); }

/* Avisos do adapter: só aparecem quando existem. */
.an-notes {
  margin: 0 0 var(--s4);
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
}


/* --------------------------------------------------------------------------
   2. Faixa de estado — uma fonte fora vira UMA linha com saída, não quatro
   painéis vermelhos. Os blocos abaixo ficam em esqueleto "—".
   -------------------------------------------------------------------------- */
.an-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--separator-soft);
  border-left: 3px solid var(--danger-fill);
  border-radius: var(--r-md);
  background: var(--surface);
}
.an-alert__text {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
}
.an-alert__text small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
  font-weight: var(--fw-regular);
}
.an-alert .ghost-button { min-height: 36px; }

/* Valor desconhecido: traço neutro, nunca zero colorido. */
.an-dash { color: var(--dim); }
.an-empty-row td {
  padding: var(--s5) var(--s3);
  color: var(--muted);
  font-size: var(--fs-foot);
  text-align: center !important; /* data-table alinha número à direita */
}

/* Selo "est.": o âmbar mora só aqui e no aviso de cobertura. */
.an-est {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--r-chip);
  background: rgba(255, 159, 10, .14);
  color: var(--warning);
  font-size: 11px;
  line-height: 15px;
  font-weight: var(--fw-semibold);
  vertical-align: 1px;
}
.an-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 15px;
  font-weight: var(--fw-medium);
}
/* Pill neutro de uma linha (Honestidade declarada, custo padrão) */
.an-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
}
.an-pill b { color: var(--text); font-weight: var(--fw-semibold); }
.an-pill.is-warn { color: var(--warning); }


/* --------------------------------------------------------------------------
   3. Lojas
   -------------------------------------------------------------------------- */
/* Grade de canais: 2 colunas no notebook, 1 no celular (antes: 94px de
   rolagem horizontal no 375). */
.an-canais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}
/* Marca de marketplace não é informação: o nome do canal já diz qual é. */
#page-lojas .canal-icon { background: var(--surface-2); color: var(--muted); }
/* Borda lateral laranja→violeta do resumo era decoração. */
#page-lojas .brief-v5::before { background: var(--separator); }
#page-lojas .brief-headline-v5 .hl-danger,
#page-lojas .bkpi-delta.down { color: var(--danger); }


/* --------------------------------------------------------------------------
   4. Reviews — mesma superfície do resto do app (antes: tela branca).
   -------------------------------------------------------------------------- */
.rv-lede {
  margin: 0 0 var(--s4);
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
}
.rv-summary { margin-bottom: var(--s4); }
.rv-summary .nx-zero { margin-top: var(--s3); }
.rv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3);
}
.rv-stat {
  min-width: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.rv-stat span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-semibold);
}
.rv-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: var(--fs-kpi-sm);
  line-height: var(--lh-kpi-sm);
  letter-spacing: var(--ls-kpi-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.rv-card { margin-bottom: var(--s3); padding: var(--s5); }
.rv-card.is-flag { border-left: 3px solid var(--danger-fill); }
.rv-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.rv-who { min-width: 0; }
.rv-name {
  display: block;
  color: var(--text);
  font-size: var(--fs-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  font-weight: var(--fw-semibold);
}
.rv-order {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
  font-variant-numeric: tabular-nums;
}
.rv-rate { text-align: right; }
.rv-stars { font-size: 18px; line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.rv-stars b { color: var(--text); font-weight: var(--fw-regular); }
.rv-stars i { color: var(--dim); font-style: normal; }
.rv-stars.is-low b { color: var(--danger); }
.rv-date {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.rv-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s3);
}
.rv-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: var(--fw-semibold);
}
.rv-chip.is-ok { color: var(--success); }
.rv-chip.is-bad { color: var(--danger); }
.rv-rec { color: var(--muted); font-size: var(--fs-foot); }
.rv-comment {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.rv-comment.is-empty {
  padding: 0;
  background: transparent;
  color: var(--dim);
  font-size: var(--fs-foot);
  font-style: italic;
}
.rv-ia {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
}
.rv-photos { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.rv-photo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-xs);
  border: 1px solid var(--separator-soft);
}
.rv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}
/* Rejeitar é destrutivo: contorno com texto de risco, empurrado pro fim
   da linha pra não ficar colado no Aprovar. */
.rv-actions .ghost-button.rv-reject { margin-left: auto; color: var(--danger); }
.rv-actions .ghost-button.rv-reject:hover {
  color: var(--danger);
  border-color: rgba(255, 69, 58, .45);
  background: rgba(255, 69, 58, .10);
}


/* --------------------------------------------------------------------------
   5. Celular (375) — não pode quebrar
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .an-canais { grid-template-columns: minmax(0, 1fr); }
  .an-head select, .an-alert .ghost-button { min-height: 44px; }
  #page-lojas details.card > summary { display: flex; align-items: center; min-height: 44px; }
  .an-head__spacer { display: none; }
  .rv-card { padding: var(--s4); }
  .rv-rate { text-align: left; }
  .rv-actions .primary-button { flex: 1 1 100%; }
  .rv-actions .ghost-button.rv-reject { margin-left: 0; }
}

/* Tráfego: a resposta ("N sessões · conversão X%") logo abaixo da pergunta. */
.trafego-headline {
  margin: calc(var(--s2) * -1) 0 var(--s5);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.trafego-headline strong { color: var(--text); }

/* Financeiro e Tráfego: os painéis encostavam um no outro (herdado). */
#page-financeiro > .data-panel,
#page-trafego > .data-panel { margin-bottom: var(--s4); }