/* ===========================================================================
   Painel Meta Ads — visual do relatório do Gerenciador.
   Escopado em .mdash: nada aqui vaza para o relatório, que tem identidade
   própria. O painel é sempre escuro, nos dois temas — é assim que se lê.

   Regra estrutural: TODA coluna de grid usa minmax(0, …). Sem isso o conteúdo
   define a largura mínima da coluna e estoura por cima do card vizinho.
   =========================================================================== */
.mdash {
  --md-bg: #0b0f16;
  --md-card: #141a24;
  --md-card2: #1a212d;
  --md-line: #232c3b;
  --md-line2: #2c3646;
  --md-ink: #eef2f8;
  --md-ink2: #94a1b8;
  --md-ink3: #6b788e;
  --md-blue: #2196f3;
  --md-blue-d: #1565c0;
  --md-blue-l: #64b5f6;
  --md-green: #4ade80;
  --md-red: #f87171;
  --md-purple: #c084fc;
  --md-amber: #fbbf24;
  --md-r: 14px;
  --md-gap: 14px;

  color: var(--md-ink);
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(33,150,243,.10), transparent 60%),
    var(--md-bg);
  border: 1px solid var(--md-line);
  border-radius: 18px;
  padding: 16px;
  margin-top: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.mdash * { box-sizing: border-box; min-width: 0; }
.mdash svg { display: block; }

/* ------------------------------------------------------------------ topo -- */
.mdash .md-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  padding: 14px 16px;
  margin-bottom: var(--md-gap);
}
@media (min-width: 900px) {
  .mdash .md-top { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; }
}
.mdash .md-brand { display: flex; flex-direction: column; gap: 3px; }
.mdash .md-logo { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.mdash .md-sub {
  font-size: 11.5px; color: var(--md-ink2); letter-spacing: .01em;
  padding-top: 7px; margin-top: 1px; border-top: 1px solid var(--md-line);
}
.mdash .md-sub b { color: var(--md-ink); font-weight: 700; }

.mdash .md-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
@media (min-width: 900px) { .mdash .md-ctrl { justify-content: flex-end; } }

.mdash .md-btn {
  appearance: none; cursor: pointer; border: 1px solid transparent;
  background: linear-gradient(180deg, #1e6fd9, #1256a8); color: #fff;
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transition: transform .12s, filter .12s, background .12s;
}
.mdash .md-btn:hover { filter: brightness(1.14); transform: translateY(-1px); }
.mdash .md-btn:active { transform: translateY(0); }
.mdash .md-btn.ghost { background: var(--md-card2); color: var(--md-ink2); border-color: var(--md-line2); }
.mdash .md-btn.ghost:hover { color: var(--md-ink); border-color: var(--md-blue); }
.mdash .md-btn.carregando { opacity: .55; pointer-events: none; }

.mdash .md-select {
  appearance: none; background: var(--md-card2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2394a1b8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center;
  color: var(--md-ink); border: 1px solid var(--md-line2); border-radius: 11px;
  padding: 10px 32px 10px 13px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mdash .md-select:hover { border-color: var(--md-blue); }
.mdash .md-datewrap {
  display: flex; align-items: center; gap: 4px; background: var(--md-card2);
  border: 1px solid var(--md-line2); border-radius: 11px; padding: 3px 11px;
}
.mdash .md-datewrap:focus-within { border-color: var(--md-blue); }
.mdash .md-date {
  appearance: none; border: 0; background: transparent; color: var(--md-ink);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 2px;
}
.mdash .md-date::-webkit-calendar-picker-indicator { filter: invert(.62); cursor: pointer; }
.mdash .md-date:focus { outline: none; }
.mdash .md-datewrap span { color: var(--md-ink3); font-size: 11.5px; }

.mdash .md-stamp {
  grid-column: 1 / -1; font-size: 11px; color: var(--md-ink3);
  border-top: 1px solid var(--md-line); padding-top: 10px; letter-spacing: .01em;
}
.mdash .md-stamp b { color: var(--md-green); font-weight: 700; }

/* ------------------------------------------------------------------ KPIs -- */
.mdash .md-kpis {
  display: grid; gap: var(--md-gap); margin-bottom: var(--md-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .mdash .md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mdash .md-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* O número de cards varia: 5 base, +1 com previsão de investimento, +1 com custo de
   disparo apurado. A coluna segue a contagem pra nenhuma fila ficar com card órfão:
   6 cards -> 3+3 ou 6 numa fila; 7 cards -> 4+3, que fecha nos dois breakpoints. */
@media (min-width: 640px) {
  .mdash .md-kpis.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mdash .md-kpis.n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1320px) {
  .mdash .md-kpis.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mdash .md-kpis.n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mdash .md-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r);
  /* Altura menor desde 11/08: a quebra por produto saiu de dentro do card e o
     vão que sobrava embaixo virou a faixa .md-vendas. */
  padding: 13px 15px 0; min-height: 126px; transition: border-color .15s, transform .15s;
}
.mdash .md-kpi:hover { border-color: var(--md-line2); transform: translateY(-1px); }
.mdash .k-lbl {
  font-size: 11.5px; color: var(--md-ink2); font-weight: 500; letter-spacing: .01em;
  min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-start;
}
.mdash .k-val {
  font-size: clamp(17px, 1.62vw, 24px); font-weight: 700; letter-spacing: -.03em;
  margin-top: 3px; line-height: 1.12; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mdash .k-var { font-size: 11.5px; font-weight: 700; margin-top: 4px; letter-spacing: .01em; line-height: 1.25; }
.mdash .k-up { color: var(--md-green); }
.mdash .k-down { color: var(--md-red); }
.mdash .k-flat { color: var(--md-ink3); font-weight: 600; }
.mdash .k-neutro { color: var(--md-ink2); font-weight: 700; }
  .mdash .k-spark { width: calc(100% + 30px); margin: auto -15px -1px; height: 54px; display: block; }
.mdash .k-media { display: block; font-size: 10px; font-weight: 500; color: var(--md-ink3); margin-top: 2px; letter-spacing: .01em; }
.mdash .md-ultimo { font-size: 10px; font-weight: 800; }
.mdash .md-kpi.sem-serie { min-height: 104px; }

/* --------------------------------------------------- conferência ---------- */
.mdash .md-conf {
  background: linear-gradient(180deg, rgba(74,222,128,.07), rgba(74,222,128,.02));
  border: 1px solid rgba(74,222,128,.22); border-radius: var(--md-r);
  padding: 13px 16px; margin-bottom: var(--md-gap);
}
.mdash .c-tit { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--md-green); }
.mdash .c-tit em { font-style: normal; color: var(--md-ink3); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.mdash .c-itens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 9px; }
@media (min-width: 700px) { .mdash .c-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mdash .c-itens > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mdash .c-itens span { font-size: 11px; color: var(--md-ink2); }
.mdash .c-itens b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.mdash .c-itens i { font-style: normal; font-size: 10.5px; color: var(--md-ink3); }

/* ------------------------------ selo de comparação com a média de mercado --- */
/* Discreto de propósito: o número continua sendo o protagonista, o selo só diz em
   que faixa ele cai. A régua completa fica no tooltip. */
.mdash .bm {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 999px; cursor: default; white-space: nowrap;
}
.mdash .bm i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mdash .bm.bom  { color: #4ade80; background: rgba(74,222,128,.13); }
.mdash .bm.ok   { color: #fbbf24; background: rgba(251,191,36,.13); }
.mdash .bm.ruim { color: #f87171; background: rgba(248,113,113,.13); }
.mdash .v-linha { display: flex; align-items: baseline; gap: 5px 6px; min-width: 0; flex-wrap: wrap; }
/* O selo desce para a linha de baixo quando não cabe, em vez de espremer o número:
   o valor é o dado, o selo é o comentário sobre ele. */
.mdash .v-linha .bm { flex-shrink: 0; }
.mdash .v-linha .v { min-width: 0; overflow: visible; text-overflow: clip; }
.mdash .fn-rate .bm { margin-top: 2px; font-size: 8px; padding: 1px 5px; }
.mdash .fn-conv .c-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }

/* ------------------------------------------------- métricas de mídia ------- */
.mdash .md-mets {
  display: grid; gap: 9px; margin-bottom: var(--md-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 339px) { .mdash .md-mets { grid-template-columns: 1fr; } }
/* No celular sobra altura e falta largura: o texto ganha mais linhas em vez de sumir. */
@media (max-width: 700px) {
  .mdash .md-met .t { -webkit-line-clamp: 3; min-height: 2.56em; }
  .mdash .md-met .s { -webkit-line-clamp: 3; min-height: 2.68em; }
  .mdash .md-met .v { font-size: 17px; }
  .mdash .md-met.destaque-q .v { font-size: 20px; }
  /* Em duas colunas estreitas o selo quase sempre desce de linha — o card
     precisa de altura previsível para os sparklines não ficarem em degrau. */
  .mdash .md-met { padding: 10px 10px; }
  .mdash .md-met .v-linha { min-height: 2.9em; align-content: flex-start; }
  .mdash .met-spark { height: 22px; }
}
@media (min-width: 560px)  { .mdash .md-mets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .mdash .md-mets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .mdash .md-mets { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mdash .md-met {
  background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 12px;
  padding: 11px 11px; min-width: 0; transition: border-color .15s;
}
.mdash .md-met:hover { border-color: var(--md-line2); }
/* Rótulo e legenda quebram em duas linhas em vez de serem cortados no meio da
   palavra. min-height mantém os valores alinhados entre cards de tamanhos diferentes. */
.mdash .md-met .t {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
  color: var(--md-ink3); line-height: 1.28; min-height: 2.56em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.mdash .md-met .v {
  display: block; font-weight: 700; letter-spacing: -.025em; margin-top: 3px;
  font-size: clamp(14px, 1.15vw, 17px); white-space: nowrap;
}
.mdash .md-met .s {
  font-size: 9px; color: var(--md-ink3); margin-top: 3px; line-height: 1.34;
  min-height: 2.68em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mdash .met-spark { display: block; width: calc(100% + 22px); margin: 7px -11px -11px; height: 26px; }
.mdash .md-met { padding-bottom: 11px; }
.mdash .md-met.alerta { border-style: dashed; }
.mdash .md-met.alerta .v { color: var(--md-ink3); }

/* ---------------------------------------------------------------- grade --- */
.mdash .md-grid { display: grid; gap: var(--md-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .mdash .md-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1180px) {
  .mdash .md-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, .88fr) minmax(0, 1.24fr) minmax(0, 1.18fr);
    align-items: stretch;
  }
}
.mdash .md-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r);
  padding: 16px; overflow: hidden;
}
.mdash .md-card h4 {
  margin: 0 0 14px; font-size: 14.5px; font-weight: 700; text-align: center;
  letter-spacing: -.01em; color: var(--md-ink);
}
.mdash .md-card h5 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 700; color: var(--md-ink2);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- funil -- */
/* O funil é SVG puro (formas) e os rótulos são HTML posicionado por grid:
   texto dentro de SVG não reflui e foi o que colidiu na versão anterior. */
.mdash .md-funnel { display: flex; flex-direction: column; flex: 1; }
.mdash .fn {
  position: relative; width: 100%; max-width: 420px; margin: 2px auto 0;
  aspect-ratio: 400 / 340;
}
.mdash .fn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* o topo do desenho é a boca do funil (elipse): os rótulos começam abaixo dela */
.mdash .fn-labels {
  position: absolute; inset: 8% 0 6%; display: grid; grid-template-rows: repeat(4, 1fr);
}
/* 68,2% = 232/340 → a primeira coluna cobre exatamente a largura do desenho,
   então o rótulo centraliza no eixo do funil e a taxa fica na sobra da direita. */
/* 65% = 2 × (cx/W) = 2 × 32,5% → a coluna do rótulo tem o eixo do funil no meio.
   Qualquer mudança em cx no JS precisa mudar esta porcentagem junto. */
.mdash .fn-row {
  display: grid; grid-template-columns: 65% minmax(0, 1fr);
  align-items: center; gap: 4px; overflow: hidden;
}
.mdash .fn-stage { text-align: center; line-height: 1.15; }
.mdash .fn-stage .s-n { font-size: 9.5px; font-weight: 700; color: #06121f; letter-spacing: .01em; }
.mdash .fn-stage .s-v { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.mdash .fn-rate { text-align: left; line-height: 1.2; }
.mdash .fn-rate .r-n { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-ink3); letter-spacing: .01em; }
  /* selo embaixo do valor: lado a lado eles se sobrepunham na coluna estreita */
  .mdash .fn-rate .r-linha { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mdash .fn-rate .r-v { font-size: 12px; font-weight: 700; color: var(--md-ink); letter-spacing: -.02em; }
.mdash .fn-rate .bm { margin-top: 0; font-size: 7.5px; padding: 1px 5px; gap: 3px; align-self: flex-start; }
.mdash .fn-rate .bm i { width: 4px; height: 4px; }

.mdash .fn-conv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(33,150,243,.14), rgba(33,150,243,.04));
  border: 1px solid rgba(33,150,243,.28);
}
.mdash .fn-conv .c-esq { display: flex; flex-direction: column; min-width: 0; }
.mdash .fn-conv span { font-size: 11.5px; white-space: nowrap; font-weight: 700; color: var(--md-ink); letter-spacing: -.01em; }
.mdash .fn-conv i { font-style: normal; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-ink3); margin-top: 2px; }
.mdash .fn-conv .c-num { font-size: 19px; font-weight: 800; color: var(--md-blue-l); letter-spacing: -.02em; flex-shrink: 0; }

.mdash .md-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; }
.mdash .md-mini > div {
  background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 11px;
  padding: 9px 4px; text-align: center; min-width: 0;
}
.mdash .m-l { font-size: 9px; color: var(--md-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.mdash .m-v { font-size: 12.5px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------- stats ---- */
.mdash .md-stat { display: flex; flex-direction: column; }
.mdash .md-stat + .md-stat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--md-line); }
.mdash .s-val { font-size: clamp(21px, 2.1vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.mdash .s-pct { font-size: 11.5px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdash .md-bar { height: 10px; border-radius: 6px; background: #212a38; overflow: hidden; margin-top: 9px; }
.mdash .md-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s ease; }
.mdash .md-stat .met-spark { width: 100%; margin: 6px 0 0; height: 24px; }
.mdash .s-foot { font-size: 9.5px; color: var(--md-ink3); text-align: right; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------------- gráficos -- */
.mdash .md-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 11px; color: var(--md-ink2); margin-bottom: 10px; }
.mdash .md-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mdash .md-legend i { width: 8px; height: 8px; border-radius: 50%; }
.mdash .md-chart svg { width: 100%; height: auto; }
.mdash .md-chart .md-chartbody { margin-top: auto; margin-bottom: auto; }
.mdash .md-axis { font-size: 9px; fill: var(--md-ink3); }
.mdash .md-gridline { stroke: var(--md-line); stroke-width: 1; }
.mdash .md-xlabels { display: flex; font-size: 8px; color: var(--md-ink3); padding: 7px 2px 0 32px; letter-spacing: -.03em; gap: 2px; }
.mdash .md-xlabels span { flex: 1; text-align: center; white-space: nowrap; }
.mdash .md-pt { cursor: default; }

/* ----------------------------------------------------------------- donut -- */
.mdash .md-donutwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (max-width: 420px) { .mdash .md-donutwrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.mdash .md-donut-leg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
  font-size: 10px; color: var(--md-ink2); width: 100%;
}
.mdash .md-donut-leg span { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 6px; }

.mdash .md-donut-leg i { width: 8px; height: 8px; border-radius: 50%; }
.mdash .md-donut-leg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdash .md-donut-leg b { color: var(--md-ink); font-weight: 700; }

/* ---------------------------------------------------------------- tabela -- */
.mdash .md-tablewrap {
  margin-top: var(--md-gap); background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r); overflow: hidden;
}
/* min-width:0 é o que faz o overflow-x realmente confinar: sem isso o wrapper
   cresce até a largura da tabela (600px) e empurra a PÁGINA pro lado no celular,
   em vez de rolar só a tabela. */
.mdash .md-tablescroll { overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.mdash table.md-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 600px; table-layout: fixed; }
.mdash table.md-tbl th {
  position: sticky; top: 0; background: #161d28; text-align: right; padding: 11px 10px;
  font-size: 9.5px; font-weight: 700; color: var(--md-ink2); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--md-line2); cursor: pointer; user-select: none; line-height: 1.25;
}
.mdash table.md-tbl th:hover { color: var(--md-ink); }
.mdash table.md-tbl th.left, .mdash table.md-tbl td.left { text-align: left; }
.mdash table.md-tbl th.sorted { color: var(--md-blue-l); }
.mdash table.md-tbl td { padding: 9px 10px; border-bottom: 1px solid rgba(35,44,59,.7); text-align: right; white-space: nowrap; }
.mdash table.md-tbl tbody tr:last-child td { border-bottom: 0; }
.mdash table.md-tbl tbody tr { transition: background .12s; }
.mdash table.md-tbl tbody tr:hover { background: rgba(33,150,243,.06); }
/* As larguras vêm do colgroup, definidas pelo usuário e guardadas no navegador. */
.mdash table.md-tbl td.trunc { overflow: hidden; text-overflow: ellipsis; }
.mdash table.md-tbl th { position: relative; }
.mdash .th-txt { display: block; padding-right: 12px; }
/* Alça de arraste: fica sobre a borda direita do cabeçalho. */
/* A alça fica INTEIRA dentro do próprio th. Quando ela invadia o cabeçalho
   vizinho (right negativo), o th seguinte ficava por cima e engolia o clique. */
.mdash .rz {
  position: absolute; top: 0; right: 0; width: 11px; height: 100%;
  cursor: col-resize; z-index: 20; touch-action: none;
}
.mdash .rz::after {
  content: ""; position: absolute; top: 22%; bottom: 22%; right: 3px; width: 2px;
  background: var(--md-line2); border-radius: 2px; transition: background .12s;
}
.mdash .rz:hover::after { background: var(--md-blue); }
.mdash td.cpa-cel { padding-top: 7px; padding-bottom: 7px; }
.mdash .cpa-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mdash .cpa-wrap .c-med { font-size: 12px; font-weight: 700; }
.mdash .cpa-wrap .c-ont { font-size: 9px; font-weight: 700; white-space: nowrap; }
.mdash .cpa-wrap .c-ont.bom  { color: #4ade80; }
.mdash .cpa-wrap .c-ont.ruim { color: #f87171; }
.mdash .cpa-wrap .c-ont.flat { color: var(--md-ink3); font-weight: 600; }
.mdash .cpa-linha { display: flex; justify-content: flex-end; margin-top: 2px; color: var(--md-blue-l); }
.mdash .cpa-spark { width: 58px; height: 16px; }
.mdash .md-rank { width: 30px; color: var(--md-ink3); font-size: 11px; }
.mdash .md-cellbar { position: relative; }
.mdash .md-cellbar i {
  position: absolute; left: 4px; top: 5px; bottom: 5px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(21,101,192,.85), rgba(33,150,243,.45)); z-index: 0;
}
.mdash .md-cellbar span { position: relative; z-index: 1; font-weight: 600; }

.mdash .md-empty, .mdash .md-skel { text-align: center; color: var(--md-ink3); font-size: 12.5px; padding: 30px 12px; }
.mdash .md-err { text-align: center; color: var(--md-red); font-size: 12.5px; padding: 22px 12px; }
.mdash .md-note {
  font-size: 10.5px; color: var(--md-ink3); margin: 12px 2px 0; line-height: 1.55;
  padding-left: 10px; border-left: 2px solid var(--md-line2);
}
.mdash .md-note b { color: var(--md-ink2); }
/* Rodapé discreto: a explicação completa fica no title, ao passar o mouse. */
.mdash .md-note-mini {
  font-size: 9.5px; color: var(--md-ink3); opacity: .5; margin: 8px 2px 0;
  letter-spacing: .01em; cursor: help;
}
.mdash .md-note-mini:hover { opacity: .85; }

@media (max-width: 520px) {
  .mdash { padding: 12px; border-radius: 14px; }
  .mdash .md-card { padding: 14px; }
  .mdash .md-btn { width: 38px; height: 38px; }
}


/* --------------------------------------------------- efeito das otimizações --- */
.mdash .md-otim {
  margin-top: var(--md-gap); background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r); padding: 16px;
}
.mdash .ot-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.mdash .ot-tag {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--md-blue-l); align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  background: rgba(33,150,243,.14);
}
.mdash .ot-head b { font-size: 14px; font-weight: 700; margin-top: 4px; }
.mdash .ot-head i { font-style: normal; font-size: 11px; color: var(--md-ink3); }
.mdash .ot-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .mdash .ot-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mdash .ot-card { background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 12px; padding: 12px 14px; }
.mdash .ot-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--md-ink3); }
.mdash .ot-par { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.mdash .ot-lado { display: flex; flex-direction: column; min-width: 0; }
.mdash .ot-lado span { font-size: 9.5px; color: var(--md-ink3); }
.mdash .ot-lado b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.mdash .ot-lado.dep b { color: var(--md-ink); }
.mdash .ot-seta { font-size: 15px; font-weight: 800; }
.mdash .ot-seta.bom, .mdash .ot-delta.bom { color: #4ade80; }
.mdash .ot-seta.ruim, .mdash .ot-delta.ruim { color: #f87171; }
.mdash .ot-seta.flat, .mdash .ot-delta.flat { color: var(--md-ink3); }
.mdash .ot-delta { font-size: 10.5px; font-weight: 700; margin-top: 6px; }
.mdash .ot-card .met-spark { width: calc(100% + 28px); margin: 8px -14px -12px; height: 26px; }
.mdash .ot-card { padding-bottom: 12px; }
.mdash .ot-graf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--md-line); }
.mdash .ot-gt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--md-ink3); margin-bottom: 10px; }
.mdash .ot-cols { display: flex; align-items: flex-end; gap: 10px; min-height: 120px; }
.mdash .ot-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.mdash .ot-val { font-size: 10.5px; font-weight: 700; }
.mdash .ot-bar { width: 100%; max-width: 54px; border-radius: 6px 6px 3px 3px; }
.mdash .ot-bar.ant { background: linear-gradient(180deg, #4b5769, #3a4455); }
.mdash .ot-bar.dep { background: linear-gradient(180deg, #2f9cf4, #1462b0); }
.mdash .ot-dia { font-size: 9.5px; color: var(--md-ink3); }
.mdash .ot-leg { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 10px; color: var(--md-ink3); }
.mdash .ot-leg span { display: inline-flex; align-items: center; gap: 5px; }
.mdash .ot-leg i { width: 9px; height: 9px; border-radius: 3px; }
.mdash .ot-leg i.ant { background: #4b5769; }
.mdash .ot-leg i.dep { background: #2f9cf4; }

/* ---------------------------------------- velocidade real e mapa de calor --- */
.mdash .md-vel, .mdash .md-calor {
  margin-top: var(--md-gap); background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r); padding: 16px;
}
.mdash .ot-tag.azul { color: var(--md-blue-l); background: rgba(33,150,243,.14); }
.mdash .vel-mets { margin-bottom: 0; }
@media (min-width: 1240px) { .mdash .vel-mets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1560px) { .mdash .vel-mets { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.mdash .cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .mdash .cal-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.mdash .cal-mapa {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--md-line2); max-height: 620px; overflow-y: auto; background: #000;
}
.mdash .cal-mapa img { width: 100%; display: block; opacity: .55; }
.mdash .cal-pontos { position: absolute; inset: 0; pointer-events: none; }
/* Os borrões dos cliques são desenhados num único canvas (ver pintarCalor no JS).
   Antes era um <i> por clique com mix-blend-mode: screen — com 6 mil cliques o
   Chrome compunha 6 mil camadas e a aba congelava. */
.mdash .cal-canvas { display: block; width: 100%; height: 100%; }
.mdash .cal-lado { min-width: 0; }
.mdash .cal-tit { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--md-ink3); margin-bottom: 8px; }
.mdash .cal-faixa { display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin-bottom: 5px; }
.mdash .cal-faixa span { font-size: 10px; color: var(--md-ink3); }
.mdash .cal-faixa b { font-size: 11px; font-weight: 700; text-align: right; }
.mdash .cal-barra { height: 9px; border-radius: 5px; background: #212a38; overflow: hidden; }
.mdash .cal-barra i { display: block; height: 100%; border-radius: 5px; }
.mdash .cal-item { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 5px 0; border-bottom: 1px solid rgba(35,44,59,.7); }
.mdash .cal-item span { color: var(--md-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdash .cal-item b { color: var(--md-ink); font-weight: 700; flex-shrink: 0; }
.mdash .cal-vazio { font-size: 11.5px; color: var(--md-ink3); padding: 10px 0; }
.mdash .md-met.destaque-q { border-color: rgba(74,222,128,.35); background: linear-gradient(180deg, rgba(74,222,128,.07), var(--md-card2)); }
.mdash .md-met.destaque-q .v { font-size: clamp(18px, 1.5vw, 22px); }

/* ------------------------------------------- fonte real x Pixel (KPIs) ----- */
.mdash .md-kpi.com-real { border-color: rgba(74,222,128,.28); }
.mdash .k-meta {
  /* flex-wrap em TODA largura, não só no celular: quando o selo é comprido
     ("ROAS INGRESSO") o valor ao lado ficava sem espaço e era cortado mesmo em
     tela de notebook, porque o grid de 6 colunas deixa o card com ~140px.
     Melhor o valor descer uma linha do que sumir. */
  display: flex; align-items: baseline; gap: 6px; margin-top: 3px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--md-ink3);
}
.mdash .k-meta span {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 4px; background: rgba(33,150,243,.16); color: var(--md-blue-l);
}
.mdash .k-meta b { font-weight: 700; color: var(--md-ink2); }

/* ------------------------------------------------- rastreamento real ------- */
.mdash .md-rastreio {
  margin-top: var(--md-gap); background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r); padding: 16px;
}
.mdash .ras-cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
@media (min-width: 720px) { .mdash .ras-cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mdash .ras-card { background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.mdash .ras-card.destaque { border-color: rgba(74,222,128,.35); background: linear-gradient(180deg, rgba(74,222,128,.08), var(--md-card2)); }
.mdash .ras-card span { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--md-ink3); }
.mdash .ras-card b { display: block; font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.mdash .ras-card i { font-style: normal; font-size: 10.5px; color: var(--md-ink3); }
.mdash .ras-bom { color: #4ade80; } .mdash .ras-ok { color: #fbbf24; } .mdash .ras-ruim { color: #f87171; }
.mdash .ras-barra { position: relative; height: 26px; border-radius: 8px; background: #2a3242; margin-top: 14px; overflow: hidden; }
.mdash .ras-barra i { display: block; height: 100%; background: linear-gradient(90deg, #1565c0, #42a5f5); }
.mdash .ras-lbl-a, .mdash .ras-lbl-b { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; }
.mdash .ras-lbl-a { left: 10px; color: #fff; }
.mdash .ras-lbl-b { right: 10px; color: var(--md-ink2); }
.mdash td.ckv-cel { text-align: right; }
.mdash .ckv { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mdash .ckv.bom  { color: #4ade80; background: rgba(74,222,128,.14); }
.mdash .ckv.ok   { color: #fbbf24; background: rgba(251,191,36,.14); }
.mdash .ckv.ruim { color: #f87171; background: rgba(248,113,113,.14); }
.mdash .ckv-nd { color: var(--md-ink3); font-size: 12px; }
.mdash td.ckv-cel i { display: block; font-style: normal; font-size: 9.5px; color: var(--md-ink3); margin-top: 3px; }


/* ------------------------------------------------------------------ celular
   Fica por último de propósito: as regras de fonte pequena aparecem espalhadas
   pelo arquivo e, sem isto, venceriam por ordem de cascata. 8px é ilegível em
   tela de celular — o mínimo confortável é 9,5px. */
@media (max-width: 700px) {
  .mdash .fn-rate .r-n { font-size: 9.5px; }
  .mdash .fn-rate .bm { font-size: 9px; padding: 1px 6px; }
  .mdash .md-xlabels { font-size: 9px; padding-left: 26px; }
  .mdash .fn-conv i,
  .mdash .m-l { font-size: 9.5px; }
  .mdash .md-met .s { font-size: 9.5px; }
  .mdash .k-meta span, .mdash .k-meta b { font-size: 9.5px; }
}

/* --------------------------------------------- entrada no grupo (WhatsApp)
   Alarme de entrega pós-compra, dentro do painel. Cor da borda esquerda segue a
   régua do Felipe: >=85 ótima, 80-85 boa, 70-79 amarelo, <70 vermelho. */
.mdash .gz { border-left: 3px solid var(--md-line2); }
.mdash .gz.otimo, .mdash .gz.bom { border-left-color: #4ade80; }
.mdash .gz.amarelo { border-left-color: #fbbf24; }
.mdash .gz.vermelho { border-left-color: #f87171; }
.mdash .gz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mdash .gz-logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: #25D366;
                  display: flex; align-items: center; justify-content: center; }
.mdash .gz-logo svg { width: 21px; height: 21px; fill: #fff; display: block; }
.mdash .gz-head > div { min-width: 0; }
.mdash .gz-head b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdash .gz-head i { font-style: normal; font-size: 10px; color: var(--md-ink3); }
.mdash .gz-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.mdash .gz-taxa { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.mdash .gz.otimo .gz-taxa, .mdash .gz.bom .gz-taxa { color: #4ade80; }
.mdash .gz.amarelo .gz-taxa { color: #fbbf24; }
.mdash .gz.vermelho .gz-taxa { color: #f87171; }
.mdash .gz-sel { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
                 text-transform: uppercase; letter-spacing: .04em; background: var(--md-card2); color: var(--md-ink2); }
.mdash .gz.otimo .gz-sel, .mdash .gz.bom .gz-sel { background: rgba(74,222,128,.14); color: #4ade80; }
.mdash .gz.amarelo .gz-sel { background: rgba(251,191,36,.15); color: #fbbf24; }
.mdash .gz.vermelho .gz-sel { background: rgba(248,113,113,.14); color: #f87171; }
.mdash .gz-topo p { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 11.5px;
                    line-height: 1.5; color: var(--md-ink3); }
.mdash .gz-barra { height: 9px; border-radius: 999px; background: var(--md-card2);
                   border: 1px solid var(--md-line); overflow: hidden; }
.mdash .gz-barra > i { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.mdash .gz.otimo .gz-barra, .mdash .gz.bom .gz-barra { color: #4ade80; }
.mdash .gz.amarelo .gz-barra { color: #fbbf24; }
.mdash .gz.vermelho .gz-barra { color: #f87171; }
.mdash .gz-escala { display: flex; justify-content: space-between; font-size: 8.5px;
                    color: var(--md-ink3); font-weight: 700; margin: 5px 0 13px; }
.mdash .gz-nums, .mdash .gz-cam { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .mdash .gz-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .mdash .gz-cam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mdash .gz-nums > div, .mdash .gz-cam > div {
  background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.mdash .gz-nums span, .mdash .gz-cam span { display: block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--md-ink3); }
.mdash .gz-nums b { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; }
.mdash .gz-nums b em { font-style: normal; font-size: 11.5px; color: var(--md-ink3); margin-left: 6px; letter-spacing: 0; }
.mdash .gz-nums i, .mdash .gz-cam i { font-style: normal; font-size: 9.5px; color: var(--md-ink3); }
.mdash .gz-cam { margin-top: 8px; }
.mdash .gz-cam b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.mdash .gz-cam span { margin-top: 1px; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--md-ink2); }
.mdash .gz-manual { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px;
  background: var(--md-card2); border: 1px solid var(--md-line); border-left: 2px solid #fbbf24; border-radius: 9px; }
.mdash .gz-manual.velho { border-left-color: #f87171; }
.mdash .gz-manual > span { font-size: 12px; flex: 0 0 auto; }
.mdash .gz-manual p { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--md-ink3); }
.mdash .gz-manual p b { display: block; color: var(--md-ink); font-size: 11px; margin-bottom: 2px; }
.mdash .gz-manual p b + b { display: inline; font-size: 10.5px; margin: 0; }

/* Entrada manual do total do grupo (19/08) */
.mdash .gz-input { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mdash .gz-input label { display: flex; flex-direction: column; gap: 4px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--md-ink3); }
.mdash .gz-input label.peq { flex: 0 0 auto; }
.mdash .gz-input label i { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.mdash .gz-in { appearance: none; border: 1px solid var(--md-line2); background: var(--md-card2);
  color: var(--md-ink); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px;
  font-weight: 600; width: 130px; }
.mdash .gz-in.peq { width: 76px; }
.mdash .gz-in:focus { outline: none; border-color: var(--md-blue); }
.mdash .gz-salvar { appearance: none; cursor: pointer; border: 1px solid transparent;
  background: linear-gradient(180deg, #1e6fd9, #1256a8); color: #fff; border-radius: 9px;
  padding: 9px 16px; font-family: inherit; font-size: 12.5px; font-weight: 700; height: 37px; }
.mdash .gz-salvar:hover { filter: brightness(1.14); }
.mdash .gz-salvar:disabled { opacity: .55; pointer-events: none; }
.mdash .gz-status { font-size: 11px; font-weight: 700; color: var(--md-ink3); }
.mdash .gz-status.ok { color: var(--md-green); }
.mdash .gz-status.erro { color: var(--md-red); }

@media (max-width: 700px) { .mdash .gz-taxa { font-size: 28px; } .mdash .gz-escala { font-size: 9px; } }

/* Filtro de datas do mapa de calor (09/08) — mesma lógica do seletor de período
   do Gerenciador da Meta: intervalo livre ou atalhos de N dias. */
.cal-filtro { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.cal-filtro label { display:flex; gap:5px; align-items:center; font-size:11.5px; color:var(--muted); }
.cal-filtro input[type="date"] {
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:7px;
  color:inherit; font:inherit; font-size:11.5px; padding:4px 7px;
}
.cal-filtro button {
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:7px;
  color:var(--muted); font:inherit; font-size:11.5px; padding:4px 10px; cursor:pointer;
}
.cal-filtro button:hover { color:inherit; border-color:var(--accent); }
.cal-filtro button[data-cal="aplicar"] { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* Selo que marca o número vindo do checkout (FY Ads) e não do Pixel. */
.mdash .fn-real { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(74,222,128,.16); color: #4ade80; vertical-align: middle; }

/* ------------------------------------------ o que foi vendido (faixa) ------
   Antes isso vivia espremido dentro do card de Compras, o que esticava só aquela
   coluna e deixava as outras quatro com um vão morto embaixo. Virou faixa própria
   em 11/08, com espaço para a linha do tempo de cada produto. */
.mdash .md-vendas { margin-bottom: var(--md-gap); }
.mdash .mv-tit {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-ink3); margin: 0 2px 8px;
}
.mdash .mv-grid {
  display: grid; gap: var(--md-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px)  { .mdash .mv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mdash .mv-card {
  background: linear-gradient(180deg, var(--md-card), #121821);
  border: 1px solid var(--md-line); border-radius: var(--md-r);
  padding: 12px 14px 10px; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.mdash .mv-card:hover { border-color: var(--md-line2); transform: translateY(-1px); }
.mdash .mv-top { display: flex; flex-direction: column; gap: 1px; min-height: 2.5em; }
.mdash .mv-rot {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--md-ink2);
}
.mdash .mv-sub { font-size: 9.5px; color: var(--md-ink3); line-height: 1.25; }
.mdash .mv-num { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.mdash .mv-num b { font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.mdash .mv-num i {
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--md-ink2);
  white-space: nowrap;
}
.mdash .mv-linha { margin-top: auto; padding-top: 8px; }
/* margin: 0 é obrigatório aqui. A regra geral de .met-spark usa margem negativa
   embaixo (-11px) para sangrar no card das métricas; herdada, ela puxava o eixo
   de datas para cima da própria linha. */
.mdash .mv-linha .met-spark { width: 100%; height: 30px; margin: 0; display: block; }
.mdash .mv-eixo {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 3px;
  font-size: 8.5px; font-weight: 600; color: var(--md-ink3); letter-spacing: .02em;
}
.mdash .mv-linha.vazia { font-size: 9.5px; color: var(--md-ink3); padding-top: 12px; }

/* O total é a leitura que importa — soma ingresso + produto do lançamento. */
.mdash .mv-card.destaque {
  border-color: rgba(192,132,252,.42);
  background: linear-gradient(180deg, rgba(192,132,252,.09), #121821);
}
.mdash .mv-card.destaque .mv-rot { color: #d8b4fe; }
.mdash .mv-card.destaque .mv-num b { font-size: clamp(24px, 2.4vw, 32px); }
.mdash .mv-card.destaque .mv-num i { color: #e9d5ff; font-size: 13px; }

/* "n/c" = não comparável: numerador e denominador de fontes diferentes. Fica
   apagado de propósito, para não parecer um número de performance. */
.mdash .r-v.nc, .mdash .c-num.nc { color: var(--md-ink3); font-style: italic; }

/* Rodapé da tabela: declara as campanhas sem investimento que ficaram de fora. */
.md-nota-tbl {
  padding: 7px 12px 2px; font-size: 11.5px; color: var(--md-muted, #94a3b8); font-style: italic;
}

/* ------------------------------- reler a velocidade agora ------------------ */
/* O card de velocidade tem botão próprio porque a fonte dele é outra: o coletor
   da própria página (/api/rum), que muda a cada visita. O ⟳ do painel recarrega a
   consulta de mídia na Meta, que é cara e não tem nada a ver com esse número. */
.mdash .ot-head-btn { position: relative; padding-right: 128px; }
.mdash .vel-rf {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--md-card2); border: 1px solid var(--md-line); color: var(--md-ink2);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 7px 11px; border-radius: 9px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mdash .vel-rf:hover { border-color: var(--md-blue); color: var(--md-ink); background: rgba(33,150,243,.10); }
.mdash .vel-rf svg { width: 13px; height: 13px; }
.mdash .vel-rf.carregando { opacity: .6; pointer-events: none; }
.mdash .vel-rf.carregando svg { animation: velgira .8s linear infinite; }
@keyframes velgira { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .mdash .ot-head-btn { padding-right: 0; }
  .mdash .vel-rf { position: static; margin-top: 10px; align-self: flex-start; }
}

/* --------------------------- lucro e fontes do ingresso -------------------- */
/* Saldo ainda por cobrir usa âmbar, não vermelho: enquanto o workshop não
   acontece, o ingresso sozinho nunca paga a mídia — é o desenho normal do ciclo,
   não um resultado ruim. Vermelho aqui seria alarme falso toda semana. */
.mdash .k-val.k-lucro-ok { color: var(--md-green); }
/* Vermelho no saldo negativo: é métrica financeira, e o sinal é o dado. O tamanho
   volta ao padrão dos outros KPIs — sem o sufixo "a cobrir" o número cabe inteiro. */
.mdash .k-val.k-lucro-aberto { color: var(--md-red); }
/* O sinal +/− soma ~11px e estourava a largura do card, cortando o número no meio
   (o CSS reserva 139px e "−R$ 4.958,57" pedia 150px). Um degrau menor de fonte
   resolve sem encolher os outros KPIs, que continuam no tamanho cheio. */
.mdash .k-val.k-com-sinal { font-size: clamp(15px, 1.46vw, 21.5px); }

/* As duas fontes do ingresso lado a lado, dentro do card: é a comparação que
   torna a diferença legível. */
.mdash .mv-fontes {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px;
}
.mdash .mv-fonte {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: rgba(255,255,255,.045); border: 1px solid var(--md-line);
  border-radius: 7px; padding: 3px 8px;
}
.mdash .mv-fonte i {
  font-style: normal; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--md-ink3);
}
.mdash .mv-fonte b { font-size: 12.5px; font-weight: 700; color: var(--md-ink); font-variant-numeric: tabular-nums; }
.mdash .mv-dif {
  font-size: 9.5px; font-weight: 700; color: var(--md-amber);
  background: rgba(251,191,36,.12); border-radius: 999px; padding: 3px 8px;
}

/* ------------------- carimbo + botão do bloco de velocidade ---------------- */
.mdash .vel-acoes {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.mdash .vel-hora { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.mdash .vel-hora i {
  font-style: normal; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--md-ink3);
}
.mdash .vel-hora b { font-size: 11.5px; font-weight: 700; color: var(--md-ink2); font-variant-numeric: tabular-nums; }
.mdash .ot-head-btn { padding-right: 240px; }

/* -------------------------------- tabela: data e espera ------------------- */
.mdash table.md-tbl td.md-criada { text-align: right; white-space: nowrap; }
.mdash table.md-tbl td.md-criada b { font-weight: 700; color: var(--md-ink); }
.mdash table.md-tbl td.md-criada i {
  display: block; font-style: normal; font-size: 9.5px; color: var(--md-ink3); margin-top: 1px;
}
/* Campanha no ar que ainda não gastou: cinza e em itálico, para não competir com
   quem tem número de verdade — mas visível, que é o ponto de mostrá-la. */
.mdash table.md-tbl td.md-espera { color: var(--md-ink3); font-style: italic; font-size: 10.5px; }
.mdash table.md-tbl th { cursor: pointer; user-select: none; }

@media (max-width: 700px) {
  .mdash .ot-head-btn { padding-right: 0; }
  .mdash .vel-acoes { position: static; margin-top: 10px; }
}

/* ------------------------- miniatura do criativo no donut ------------------ */
/* A bolinha de cor vira a capa do anúncio quando ela existe: o nome do criativo
   não diz o que a pessoa viu, e é isso que decide escalar ou aposentar. */
.mdash .md-donut-leg .dl-item.com-thumb {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
}
.mdash .dl-thumb {
  display: block; width: 30px; height: 30px; border-radius: 6px;
  background-size: cover; background-position: center; cursor: pointer;
  border: 1px solid var(--md-line); transition: transform .15s, border-color .15s;
  position: relative;
}
.mdash .dl-thumb:hover { transform: scale(1.14); border-color: var(--md-blue); z-index: 2; }
/* Triângulo de play só quando o criativo é vídeo. */
.mdash .dl-thumb[data-video]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.8));
}

/* ------------------------------ visualizador ------------------------------- */
.dl-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.dl-modal-bg { position: absolute; inset: 0; background: rgba(6,9,14,.82); backdrop-filter: blur(3px); }
.dl-modal-cx {
  position: relative; width: min(460px, 94vw); max-height: 92vh; display: flex; flex-direction: column;
  background: #141a24; border: 1px solid #232c3b; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.dl-modal-top {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-bottom: 1px solid #232c3b; font-size: 12px; color: #eef2f8;
}
.dl-modal-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dl-modal-top a { color: #64b5f6; text-decoration: none; font-size: 11px; white-space: nowrap; }
.dl-modal-top a:hover { text-decoration: underline; }
.dl-fechar {
  background: transparent; border: 0; color: #94a1b8; font-size: 15px; cursor: pointer;
  padding: 0 2px; line-height: 1;
}
.dl-fechar:hover { color: #eef2f8; }
/* Sem iframe: o Meta bloqueia embutir o player. A capa vem em 64px reais e é
   ampliada com suavização desligada — borrar um thumb pequeno fica pior do que
   assumir o pixel. Ela serve para reconhecer, não para avaliar. */
.dl-corpo { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dl-capa {
  width: 200px; height: 200px; border-radius: 12px; background-size: cover; background-position: center;
  border: 1px solid #232c3b; position: relative; image-rendering: auto;
}
.dl-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85);
}
.dl-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff; transform: translateX(2px);
}
.dl-cta {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: #2196f3; color: #fff; font-size: 13px; font-weight: 700;
  padding: 11px 22px; border-radius: 10px; transition: background .15s;
}
.dl-cta:hover { background: #1565c0; }
.dl-obs { font-size: 11px; color: #6b788e; text-align: center; margin: 0; line-height: 1.45; max-width: 300px; }

/* ── Audiência das lives ──────────────────────────────────────────────────
   Duas colunas de igual peso: workshop e replay. Nenhuma das duas é "a
   secundária" — o replay recupera público que a segunda não pegou, e ler os
   dois lado a lado é o ponto do card. */
.mdash .lv { border-left: 3px solid #ef4444; }
.mdash .lv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mdash .lv-logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: #ef4444;
  display: flex; align-items: center; justify-content: center; }
.mdash .lv-logo svg { width: 22px; height: 22px; fill: #fff; display: block; }
.mdash .lv-head > div { min-width: 0; }
.mdash .lv-head b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: var(--md-ink); }
.mdash .lv-head i { font-style: normal; font-size: 10px; color: var(--md-ink3); }
.mdash .lv-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .mdash .lv-grid { grid-template-columns: 1fr 1fr; } }
.mdash .lv-col { background: var(--md-card2); border: 1px solid var(--md-line); border-radius: 12px;
  padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.mdash .lv-col.vazia { opacity: .72; }
.mdash .lv-rot b { font-size: 12px; font-weight: 700; color: var(--md-ink); letter-spacing: -.01em; }
.mdash .lv-rot i { font-style: normal; font-size: 10px; color: var(--md-ink3); margin-left: 6px; }
.mdash .lv-pico { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mdash .lv-pico > span { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--md-ink); }
.mdash .lv-pico em { font-style: normal; font-size: 11px; color: var(--md-ink2); }
.mdash .lv-var { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--md-line); color: var(--md-ink2); white-space: nowrap; }
.mdash .lv-var.up { background: rgba(74,222,128,.14); color: #4ade80; }
.mdash .lv-var.down { background: rgba(148,161,184,.14); color: var(--md-ink2); }
.mdash .lv-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px 12px; }
.mdash .lv-nums > div { min-width: 0; }
.mdash .lv-nums b { display: block; font-size: 16px; font-weight: 700; color: var(--md-ink);
  letter-spacing: -.02em; line-height: 1.2; }
.mdash .lv-nums span { display: block; font-size: 10px; color: var(--md-ink2); }
.mdash .lv-nums i { display: block; font-style: normal; font-size: 9.5px; color: var(--md-ink3); }
.mdash .lv-vazio { font-size: 11.5px; color: var(--md-ink3); padding: 10px 0; }
.mdash .lv-nota { margin: 0; font-size: 10.5px; color: var(--md-ink3); line-height: 1.45; }

/* ── Quebra à vista / entradas dentro do card do Método ADL ─────────────── */
.mdash .mv-quebra { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.mdash .mv-q { display: flex; align-items: baseline; gap: 5px; font-size: 10px; color: var(--md-ink3); }
.mdash .mv-q i { width: 6px; height: 6px; border-radius: 2px; display: block; align-self: center; }
.mdash .mv-q b { font-size: 13px; font-weight: 700; color: var(--md-ink); font-variant-numeric: tabular-nums; }
.mdash .mv-q em { font-style: normal; color: var(--md-ink2); font-variant-numeric: tabular-nums; }

/* ── Audiência ao vivo: workshop em cima, replay embaixo ────────────────── */
.mdash .mv-picos { justify-content: flex-start; }
.mdash .mv-pico { margin-top: 12px; }
.mdash .mp-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mdash .mv-pico b { font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; color: var(--md-ink); font-variant-numeric: tabular-nums; }
.mdash .mv-pct { font-size: 12px; font-weight: 700; color: var(--md-ink2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mdash .mp-rot { font-size: 10px; color: var(--md-ink3); margin-top: 2px; }
.mdash .lv-comp { font-style: normal; font-size: 11px; color: var(--md-ink2);
  font-variant-numeric: tabular-nums; }
.mdash .mv-pico.vazio b { color: var(--md-ink3); }
.mdash .mv-pv { font-size: 10px; color: var(--md-ink3); margin-top: 10px; }

/* Coluna e faixa de orçamento (26/08/2026) */
.md-orc{text-align:right;line-height:1.25}
.md-orc b{display:block;font-size:13px;color:#e6edf7}
.md-orc i{display:block;font-size:10px;color:#8b97ab;font-style:normal}
.md-orc .orc-nd{color:#5b6678}
.md-orcfaixa{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"a b bar" "t t t";
  gap:6px 18px;align-items:center;padding:10px 14px;margin:0 0 10px;border-radius:10px;
  background:#141b26;border:1px solid #223047}
.md-orcfaixa.perto{border-color:#6b5a1f;background:#1b1a12}
.md-orcfaixa.estoura{border-color:#7d2c2c;background:#1e1414}
.md-orcfaixa .of-n b{display:block;font-size:17px;color:#e6edf7;line-height:1.1}
.md-orcfaixa .of-n i{display:block;font-size:10px;color:#8b97ab;font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.md-orcfaixa .of-bar{grid-area:bar;height:7px;border-radius:4px;background:#0d1420;overflow:hidden}
.md-orcfaixa .of-bar span{display:block;height:100%;background:#3d7de8;border-radius:4px}
.md-orcfaixa.perto .of-bar span{background:#d1a53a}
.md-orcfaixa.estoura .of-bar span{background:#e05555}
.md-orcfaixa .of-txt{grid-area:t;font-size:11px;color:#93a0b4}
/* quebra por ticket dentro da faixa de verba: ocupa a linha inteira, abaixo do texto */
.md-orcfaixa{grid-template-areas:"a b bar" "t t t" "tk tk tk"}
.md-orcfaixa .of-tickets{grid-area:tk;margin-top:2px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}

/* mesma quebra por ticket, versão visual: barra empilhada + legenda, logo abaixo
   do funil de tráfego. A barra mostra a proporção; a legenda, o dinheiro. */
.md-tkvisual{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.md-tkvisual h5{margin:0 0 9px;font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#8b97ab}
.md-tkvisual .tkv-barra{display:flex;height:9px;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.05);margin-bottom:10px}
.md-tkvisual .tkv-barra span{display:block;height:100%;min-width:2px}
.md-tkvisual .tkv-lista{display:flex;flex-direction:column;gap:1px}
.md-tkvisual .tkv-linha{display:grid;grid-template-columns:9px 52px 1fr 44px auto;
  align-items:center;gap:8px;padding:5px 0;font-size:12px;color:#c3cddc}
.md-tkvisual .tkv-linha+.tkv-linha{border-top:1px solid rgba(255,255,255,.045)}
.md-tkvisual .tkv-linha i{width:9px;height:9px;border-radius:50%;display:block}
.md-tkvisual .tkv-preco{color:#e6edf7;font-weight:600}
.md-tkvisual .tkv-qtd{font-size:14px;color:#e6edf7;text-align:right}
.md-tkvisual .tkv-pct{font-size:11px;color:#8b97ab;text-align:right}
.md-tkvisual .tkv-fat{font-size:11.5px;color:#93a0b4;text-align:right;white-space:nowrap}
.md-tkvisual .tkv-tot{margin-top:3px;border-top:1px solid rgba(255,255,255,.1)!important;
  padding-top:7px;color:#e6edf7}
.md-tkvisual .tkv-tot .tkv-preco{color:#8b97ab;font-weight:500;text-transform:uppercase;
  font-size:10px;letter-spacing:.05em}
.md-tkvisual .tkv-tot .tkv-fat{color:#e6edf7;font-weight:600}
.md-orcfaixa .tk-rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#8b97ab;margin-bottom:5px}
.md-orcfaixa .tk-lista{display:flex;flex-wrap:wrap;gap:6px}
.md-orcfaixa .tk-item{display:flex;align-items:baseline;gap:5px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:4px 9px}
.md-orcfaixa .tk-item b{font-size:15px;color:#e6edf7;line-height:1.1}
.md-orcfaixa .tk-item span{font-size:11px;color:#c3cddc}
.md-orcfaixa .tk-item i{font-size:10px;font-style:normal;color:#8b97ab}
.md-orcfaixa .tk-item.tk-total{background:rgba(61,125,232,.12);border-color:rgba(61,125,232,.3)}

/* marca de entrega da campanha: cheia = veiculando · vazada = ligada sem anúncio no ar · apagada = pausada */
.md-tbl .md-entrega{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
  vertical-align:middle;flex:none}
.md-tbl .md-entrega.on{background:#3fb950;box-shadow:0 0 5px rgba(63,185,80,.5)}
.md-tbl .md-entrega.vazia{background:transparent;border:1.5px solid #d1a53a}
.md-tbl .md-entrega.off{background:#3a4149}

@media(max-width:640px){.md-orcfaixa{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "bar bar" "t t" "tk tk"}}

/* Ranking de criativo pela venda do produto final (26/08/2026) */
.md-rkf{margin-top:14px}
.md-rkf h4{margin-bottom:6px}
.rkf-sub{font-size:12px;color:#8b97ab;line-height:1.5;margin:0 0 12px}
.rkf-sub b{color:#e6edf7}
.rkf-vazio{font-size:13px;color:#93a0b4;line-height:1.6;background:#141b26;border:1px solid #223047;
  border-radius:10px;padding:14px 16px;margin:0}
.rkf-vazio b{color:#e6edf7}
.rkf-alerta{font-size:12.5px;color:#e8b4b4;background:#1e1414;border:1px solid #7d2c2c;
  border-radius:10px;padding:11px 14px;margin:0 0 12px;line-height:1.55}
.rkf-alerta b{color:#ffd7d7}
.rkf-tbl th{font-size:10px;line-height:1.3}
.rkf-tbl th i{font-style:normal;color:#5b6678;font-size:9px}
.rkf-tbl td{text-align:right;font-variant-numeric:tabular-nums}
.rkf-tbl td.left{text-align:left}
.rkf-tbl .rkf-pos{color:#5b6678;width:34px}
.rkf-tbl .rkf-forte{color:#8BC53F;font-weight:800;font-size:14px}
.rkf-obs{font-size:11.5px;color:#7C8277;margin:10px 0 0}
.rkf-tbl .rkf-fraco{color:#7C8277}


/* ------------------------------------------- números no celular ------------ */
/* Medido em 390px: o k-val de 5 dígitos ("R$ 23.540") fechava com folga zero e o
   ellipsis comia o final. Menos padding lateral no card + fonte e tracking um
   pouco menores devolvem ~20px de sobra por card, sem mudar nada no desktop. */
@media (max-width: 460px) {
  .mdash .md-kpi { padding: 12px 11px 0; }
  /* Escala com a largura em vez de um tamanho fixo: o clamp do desktop
     (min 17px) não descia o suficiente e valores de 6 dígitos com centavos
     ("R$ 114.941,00") batiam na borda. Assim 320px cai pra ~14px e 390px
     fica em ~17px, sem degrau. */
  .mdash .k-val { font-size: clamp(13px, 4.4vw, 18px); letter-spacing: -.025em; }
  .mdash .k-lbl { font-size: 11px; }
  /* o k-meta pode quebrar linha: melhor o valor descer do que ser cortado */
  .mdash .k-meta { gap: 4px; flex-wrap: wrap; }
  .mdash .k-meta b { font-size: 10px; }
  .mdash .k-media { font-size: 9.5px; }
}
@media (max-width: 360px) {
  .mdash .md-kpi { padding: 11px 9px 0; }
  .mdash .k-meta { gap: 3px; }
  .mdash .k-meta span { padding: 1px 4px; letter-spacing: .03em; }
}