/* ============================================================
   Chart Brand Badge — Insights de Mercado
   Created 2026-05-19 (Uma / @ux-design-expert)

   PROBLEMA RESOLVIDO:
   A watermark (.has-watermark::before) renderizada DENTRO do
   .chart-wrap era inevitavelmente cortada pelas bars do Chart.js
   em tipos com amplitude grande (Pessoa Física até R$-2.5bi,
   Institucional até R$-8bi). Sócio Iuri exigiu logo SEMPRE INTEIRA
   em todos os 5 tipos de investidor — sem exceção.

   SOLUÇÃO:
   Strip horizontal no TOPO do .chart-card, posicionado FORA da
   área de drawing do Chart.js (no padding 20px do card, acima do
   .chart-wrap). Posição garantidamente livre de bars — Chart.js
   não pode desenhar fora do próprio canvas. Padrão "branded chart
   header" usado por TradingView, Bloomberg Terminal, PostHog.

   HIERARQUIA:
   - chart-brand-strip: container full-width acima do chart
   - chart-brand-strip__emblem: emblema 28px (24px mobile)
   - chart-brand-strip__text: "INSIGHTS DE MERCADO" Montserrat 700
   - chart-brand-strip__divider: linha 1px gold gradiente abaixo

   Z-INDEX: 5 (acima da watermark z:2 e do canvas z:1, abaixo do
   paywall-overlay z:500). Sempre visível, sempre legível.

   TOKENS: usa apenas --gold, --text, --text-muted, --border do
   theme.css. Zero magic numbers de cor.

   ACCESSIBILITY: img tem alt descritivo, container marcado com
   role="img" + aria-label pra screen readers tratarem o conjunto
   emblem+texto como um único elemento "brand badge".
   ============================================================ */

.chart-brand-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 14px;
  margin: 0 0 8px;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid transparent;
  /* Linha gold sutil como separador — emoldura o gráfico (D-56) */
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 175, 55, 0.18) 22%,
    rgba(212, 175, 55, 0.32) 50%,
    rgba(212, 175, 55, 0.18) 78%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

.chart-brand-strip__emblem {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  /* Drop shadow sutil pro emblema ganhar profundidade sobre o #000 */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  user-select: none;
}

.chart-brand-strip__wordmark {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
  /* Tabular nums não se aplica aqui mas mantém o ritmo do design system */
  white-space: nowrap;
}

.chart-brand-strip__wordmark .gold {
  color: var(--gold);
}

.chart-brand-strip__meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  /* 2026-05-20: pill backdrop OPACO pra garantir legibilidade quando a
     watermark (logo gold no centro do card, com mix-blend-mode: lighten)
     cruzar a região do meta. Sem isso, a watermark passa pelo pill semi-
     transparente e bagunça o texto. */
  background: #0a0d12;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.22);
}

/* 2026-05-20 — Override de z-index dentro do .has-watermark. A regra
   `.has-watermark > * { z-index: 1 }` (theme.css) bate em específicidade
   na `.chart-brand-strip { z-index: 5 }` original. Sem esse override, a
   watermark (z:4) cobre o texto da meta. Usamos o seletor composto pra
   ganhar especificidade (0,0,2,0). */
.has-watermark > .chart-brand-strip {
  z-index: 6;
}

/* ── Mobile (<=640px) ──────────────────────────────────────── */
/* 2026-05-23 v2 (sócio mobile redesign — "selo persistente"):
   Agora que a watermark de BG foi REMOVIDA no mobile, o brand-strip
   precisa carregar mais peso. Mudanças:
   - justify-content: center → emblema + wordmark centralizados (sócio).
   - Emblema 22px → 32px (mais presente).
   - Wordmark 10.5px → 13.5px (legível em screenshot).
   - Padding tighter pra não roubar altura do plot area. */
@media (max-width: 640px) {
  .chart-brand-strip {
    gap: 12px;
    padding: 2px 2px 10px;
    margin: 0 0 6px;
    justify-content: center;
  }
  .chart-brand-strip__emblem {
    width: 32px;
    height: 32px;
  }
  .chart-brand-strip__wordmark {
    font-size: 13.5px;
    letter-spacing: 0.16em;
  }
  /* Meta (data/fonte) some em mobile — economiza espaço pro brand */
  .chart-brand-strip__meta {
    display: none;
  }
}

/* ── Telas minúsculas (<=380px): brand fica ainda mais compacta ── */
@media (max-width: 380px) {
  .chart-brand-strip__wordmark {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .chart-brand-strip__emblem {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   Chart Footer Signature — Selo persistente de rodapé (MOBILE ONLY)
   Criado 2026-05-23 (Dex / sócio mobile redesign)

   PROBLEMA RESOLVIDO:
   No mobile a watermark de BG foi removida (entopia visual + cobria
   labels do Chart.js). Mas sócio quer que QUALQUER crop de print do
   chart-card carregue a marca. Top já tem chart-brand-strip; falta
   garantir o BOTTOM crop também marcado.

   SOLUÇÃO:
   Linha sutil de gold no rodapé de cada bloco print-worthy
   (.chart-card, stat-row, period-table), com emblema 18px +
   "INSIGHTS DE MERCADO · insightsdemercado.com.br". Só mobile —
   desktop tem watermark e não precisa.

   Z-INDEX: relative no card; herda da pilha do .chart-card.
   ACCESSIBILITY: aria-hidden="true" — é puramente decorativo,
   ScreenReader já lê o brand-strip do topo.
   ============================================================ */
.chart-footer-signature {
  display: none; /* desktop: hidden (watermark cobre branding) */
}

@media (max-width: 640px) {
  .chart-footer-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px 4px;
    margin-top: 6px;
    border-top: 1px solid rgba(212, 175, 55, 0.10);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.55);
    user-select: none;
  }
  .chart-footer-signature__emblem {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    flex-shrink: 0;
  }
  .chart-footer-signature__url {
    color: rgba(232, 224, 204, 0.45);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    font-weight: 500;
  }
}

/* Telas minúsculas: domínio quebra linha se necessário, mantém layout limpo */
@media (max-width: 380px) {
  .chart-footer-signature {
    font-size: 9.5px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .chart-footer-signature__emblem {
    width: 16px;
    height: 16px;
  }
}

/* ── Reduce-motion: nenhuma animação aqui, mas garante consistência ── */
@media (prefers-reduced-motion: reduce) {
  .chart-brand-strip {
    /* No-op por enquanto, hook caso futuras animações sejam adicionadas */
  }
}

/* ============================================================
   Brand Divider — Variante lighter pra inserir entre seções
   Criado 2026-05-20 (Dex/batch1#1)

   PROBLEMA RESOLVIDO:
   Sócio Iuri tira screenshots de seções inteiras da página /fluxo e
   posta no Twitter. Cada print precisa ser "auto-suficiente" — ou
   seja, mostrar a marca "Insights de Mercado" mesmo se o lead crop
   só pegar 1 seção (Recordes, Período Analisado, etc.).

   SOLUÇÃO:
   Reusa estrutura do .chart-brand-strip mas com modificador
   --divider: emblema menor, wordmark menor, centralizado, com linhas
   separadoras nas laterais. Sutil o bastante pra não competir com
   o conteúdo, mas legível em screenshot Twitter (1200×675).

   POSIÇÃO:
   Entre o chart-card e Recordes, e entre Recordes e Período Analisado.
   Cada print agora tem branding garantido no topo.
   ============================================================ */

.brand-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 16px;
  position: relative;
  user-select: none;
}

/* Linhas decorativas laterais — dão peso de "divisor de seção".
   Gradiente fade-in do gold pra simular régua sutil. */
.brand-divider::before,
.brand-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 175, 55, 0.22) 60%,
    rgba(212, 175, 55, 0.35) 100%
  );
}
.brand-divider::after {
  background-image: linear-gradient(
    to right,
    rgba(212, 175, 55, 0.35) 0%,
    rgba(212, 175, 55, 0.22) 40%,
    transparent 100%
  );
}

.brand-divider__emblem {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.brand-divider__wordmark {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

.brand-divider__wordmark .gold {
  color: var(--gold);
}

@media (max-width: 640px) {
  .brand-divider {
    gap: 8px;
    margin: 20px 0 12px;
  }
  .brand-divider__emblem {
    width: 36px;
    height: 36px;
  }
  .brand-divider__wordmark {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}

/* Anon (não-autenticado) esconde Recordes/Período → também esconde os
   dividers que dependem desses blocos, pra não deixar divisores órfãos. */
body.idm-anon .brand-divider {
  display: none;
}