/* ============================================================================
   UNICHAT-CAMPAIGN-INTELLIGENCE-CI-1 — superfícies analíticas de campanhas.

   Arquivo global (e não CSS isolado por página) porque o shell, os cinco blocos e as duas rotas
   compartilham a mesma linguagem: isolar por componente duplicaria a mesma régua cinco vezes.

   Só tokens de crm-theme.css. Nenhuma cor literal, nenhum gradiente, nenhuma paleta de BI: a
   superfície tem que parecer o Uni Chat, não um dashboard genérico.

   Faixas:
     <=767      uma pergunta por vez (faixa segmentada), sem tabela, sem barra de funil
     768..1023  Resultado + Funil lado a lado; o resto empilha; filtros em modal centrado
     >=1024     Resultado inteiro; Funil + Ranking lado a lado; Economia e Aprendizados inteiros

   ----------------------------------------------------------------------------
   UNICHAT-CAMPANHAS-VISUAL-ASSISTED-CONVERGENCE-01 / OR-16 — ESCADA DE TOKENS.

   Decisão do proprietário (2026-09-10): *"a página /campanhas/desempenho não segue o padrão Uni.
   Apesar de ter muitos elementos próprios (gráfico, funil, etc.), cards, botões, listas, fontes,
   etc. devem seguir o padrão do Uni."*

   O cabeçalho acima já dizia "só tokens de crm-theme.css", e era verdade quanto à COR. A
   tipografia e o espaçamento eram outra história: 80 grafias literais de `font-size` em 17
   tamanhos (10, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 16, 17, 18, 19, 22, 23, 24, 26), vinte
   `font-weight: 700` e 115 valores de espaçamento fora da escada. Um tema tokenizado com uma
   escala tipográfica livre continua sendo uma gramática paralela — só que colorida certo.

   Agora: VL-01 (sete tamanhos), VL-02 (600 no lugar de 700 — 700 é ênfase excepcional dentro de
   corpo corrido, não o peso de todo título e badge), VL-05 (escada de 4·8·12·16·24·32·40·48) e
   VL-07. Os únicos valores literais que sobraram em espaçamento são 1, 2 e 3px, que são espessura
   de traço e ajuste óptico, não layout.

   O que NÃO mudou: a gramática dos gráficos, do funil e do medidor. São elementos próprios desta
   superfície e a decisão do proprietário os excetua explicitamente.
   ============================================================================ */

.ci-page { padding: var(--uni-space-5); color: var(--crm-color-text); }

/* ---------- Cabeçalho, abas e trilha ---------- */

.ci-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--uni-space-5); margin-bottom: var(--uni-space-4); }
.ci-header h1 { margin: 2px 0 var(--uni-space-1); font-size: var(--uni-font-size-xl); font-weight: 600; }
.ci-header-sub { margin: 0; max-width: 60ch; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-sm); }
/* Ações do ciclo de vida do experimento (P3) equivalentes ao "Mais ações" do app bar mobile. */
.ci-header-actions { display: flex; align-items: center; gap: var(--uni-space-2); flex-wrap: wrap; flex: 0 0 auto; }
.ci-eyebrow { margin: 0; color: var(--crm-color-primary); font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* OR-16 — a faixa de abas própria (borda inferior de 2px, proibida por VL-16) foi substituída
   pela primitive `UniTabs`. A ficha saiu junto com o markup. */
.ci-section-tabs { margin-bottom: var(--uni-space-5); }

/* Trilha: é a primitive UniBreadcrumb (uni-components.css) — Owner 6T, Rodada 4. */

/* ---------- Controles permanentes: período e comparação, e nada mais ---------- */

.ci-controls { display: flex; align-items: center; gap: var(--uni-space-3); flex-wrap: wrap; margin-bottom: var(--uni-space-3); }

.ci-period { display: flex; align-items: center; gap: var(--uni-space-3); flex-wrap: wrap; }
.ci-period-options { display: inline-flex; gap: var(--uni-space-1); padding: 3px; border: 1px solid var(--crm-color-border); border-radius: var(--uni-radius-pill); background: var(--crm-color-surface); }
.ci-period-option {
    min-height: 36px; padding: 0 var(--uni-space-4); border: 0; border-radius: var(--uni-radius-pill); background: transparent;
    color: var(--crm-color-text-muted); font: inherit; font-size: var(--uni-font-size-sm); font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.ci-period-option:hover { color: var(--crm-color-text); }
.ci-period-option.is-active { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text); }
.ci-period-option:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: 2px; }

.ci-compare { display: inline-flex; align-items: center; gap: var(--uni-space-2); min-height: 42px; color: var(--crm-color-text); font-size: var(--uni-font-size-sm); font-weight: 600; cursor: pointer; }
.ci-compare.is-disabled { color: var(--crm-color-text-muted); cursor: not-allowed; }
.ci-compare input { width: 16px; height: 16px; accent-color: var(--crm-color-primary); }

.ci-period-note { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }

.ci-period-custom { display: flex; align-items: flex-end; gap: var(--uni-space-3); flex-wrap: wrap; margin: var(--uni-space-3) 0 var(--uni-space-1); }
.ci-period-custom label { display: grid; gap: var(--uni-space-1); font-size: var(--uni-font-size-2xs); font-weight: 600; color: var(--crm-color-text-muted); }
.ci-period-custom input {
    min-height: 42px; padding: 0 var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface); color: var(--crm-color-text); font: inherit; font-size: var(--uni-font-size-sm);
}
.ci-period-custom input:focus-visible { outline: none; border-color: var(--crm-color-primary); box-shadow: 0 0 0 3px var(--crm-color-focus-ring); }


/* ---------- Aviso de fixture: honestidade sobre a origem do número ---------- */

.ci-fixture {
    display: flex; gap: var(--uni-space-2); flex-wrap: wrap; align-items: baseline;
    margin: 0 0 var(--uni-space-4); padding: var(--uni-space-3) var(--uni-space-4);
    border: 1px dashed var(--crm-color-border-strong); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs);
}
.ci-fixture strong { color: var(--crm-color-text); }

/* ---------- Faixa segmentada (só no celular) ---------- */

.ci-strip { margin-bottom: var(--uni-space-2); }
.ci-strip .uni-segmented-item { min-height: 40px; }

/* ---------- Blocos ---------- */

.ci-blocks { display: grid; gap: var(--uni-space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ci-slot { min-width: 0; }

.ci-block {
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface); padding: var(--uni-space-4) var(--uni-space-5);
}
.ci-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--uni-space-3); margin-bottom: var(--uni-space-4); flex-wrap: wrap; }
.ci-block-titles h2 { margin: 0; font-size: var(--uni-font-size-lg); font-weight: 600; }
.ci-block-titles p { margin: 2px 0 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }
/* As ações não encolhem: espremidas, o seletor de eixo perdia o chevron para a linha de baixo.
   Quando não couberem ao lado do título, elas descem inteiras para a própria linha. */
.ci-block-actions { display: flex; align-items: center; gap: var(--uni-space-2); flex-wrap: wrap; flex: 0 0 auto; }

.ci-block-note { display: flex; align-items: baseline; gap: var(--uni-space-2); flex-wrap: wrap; margin: 0 0 var(--uni-space-3); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }

.ci-block-unavailable { display: grid; gap: var(--uni-space-2); justify-items: start; padding: var(--uni-space-4); border: 1px dashed var(--crm-color-border-strong); border-radius: var(--crm-radius-md); }
.ci-block-unavailable p { margin: 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); max-width: 60ch; }

.ci-block-error { display: grid; gap: var(--uni-space-3); justify-items: start; padding: var(--uni-space-4); border: 1px solid var(--crm-color-danger); border-radius: var(--crm-radius-md); }
.ci-block-error p { margin: 0; color: var(--crm-color-text); font-size: var(--uni-font-size-sm); }

/* ---------- Valor: o travessão não é um zero pálido, é outra coisa ---------- */

/* VL-01/VL-05 — a folha inteira passou para a escada de tokens (OR-16). */
.ci-value { display: inline-flex; align-items: baseline; gap: var(--uni-space-2); flex-wrap: wrap; min-width: 0; }
.ci-value-figure { color: var(--crm-color-text); font-size: var(--uni-font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.ci-value.is-empty .ci-value-figure { color: var(--crm-color-text-muted); font-weight: 600; }
.ci-value.is-compact .ci-value-figure { font-size: var(--uni-font-size-sm); }

.ci-badge {
    display: inline-flex; align-items: center; padding: 1px var(--uni-space-2); border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.ci-badge--partial { background: color-mix(in srgb, var(--crm-color-warning) 16%, transparent); color: var(--crm-color-warning); }
.ci-badge--inference { background: color-mix(in srgb, var(--crm-color-info) 16%, transparent); color: var(--crm-color-info); }
.ci-badge--estimate { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text); }

.ci-depends {
    display: inline-flex; align-items: center; padding: 2px var(--uni-space-2); border-radius: var(--uni-radius-pill);
    border: 1px dashed var(--crm-color-border-strong); color: var(--crm-color-text-muted);
    font-size: var(--uni-font-size-2xs); font-weight: 600;
}

.ci-delta { font-size: var(--uni-font-size-2xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ci-delta.tone-good { color: var(--crm-color-success); }
.ci-delta.tone-bad { color: var(--crm-color-danger); }
.ci-delta.tone-neutral { color: var(--crm-color-text-muted); }

.ci-explain {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--uni-radius-pill);
    background: transparent; color: var(--crm-color-text-muted); cursor: pointer;
}
.ci-explain:hover { background: var(--crm-color-app-bg); color: var(--crm-color-text); }
.ci-explain:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: 1px; }
.ci-explain .crm-icon { width: 15px; height: 15px; }

/* ---------- B1 Resultado ---------- */

.ci-kpis { display: grid; gap: var(--uni-space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ci-kpi {
    display: grid; gap: var(--uni-space-2); align-content: start;
    padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface);
}
.ci-kpi.is-unavailable, .ci-kpi.is-empty { background: var(--crm-color-app-bg); }
/* OR-22 — o (i) acompanha o rótulo. `space-between` o jogava para a extremidade oposta do
   cartão, longe da palavra que ele explica. */
.ci-kpi-top { display: flex; align-items: center; justify-content: flex-start; gap: var(--uni-space-1); min-width: 0; }
.ci-kpi-label { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; }
.ci-kpi .ci-value-figure { font-size: var(--uni-font-size-2xl); line-height: 1.15; }
.ci-kpi-hint { margin: 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }

/* O gráfico é secundário ao número: altura contida para não empurrar o resto da narrativa
   (Funil, Ranking, Economia) para fora da primeira tela. */
.ci-chart { margin-top: var(--uni-space-4); }
.ci-chart-title { margin: 0 0 var(--uni-space-2); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Tendência (B1) ---------- */

.ci-trend { margin: 0; position: relative; }
.ci-trend-legend { display: flex; gap: var(--uni-space-4); flex-wrap: wrap; margin-bottom: var(--uni-space-2); }
.ci-trend-key { display: inline-flex; align-items: center; gap: var(--uni-space-2); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; }
.ci-trend-dot { width: 9px; height: 9px; border-radius: var(--uni-radius-pill); background: var(--crm-color-primary); }
.ci-trend-key.is-secondary .ci-trend-dot { background: var(--crm-color-text-muted); }

/* Sem altura fixa: com `width:100%` + altura travada, o SVG precisaria esticar X e Y de forma
   independente e o texto sairia deformado. A altura vem da proporção do viewBox. */
.ci-trend-svg { display: block; width: 100%; height: auto; }
.ci-trend-grid { stroke: var(--crm-color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ci-trend-axis-y, .ci-trend-axis-x { fill: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 500; }
.ci-trend-axis-title {
    fill: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.ci-trend-line {
    fill: none; stroke: var(--crm-color-primary); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.ci-trend-line.is-secondary { stroke: var(--crm-color-text-muted); stroke-width: 2; stroke-dasharray: 5 4; }
.ci-trend-area { stroke: none; }
.ci-trend-fill-top { stop-color: var(--crm-color-primary); stop-opacity: .18; }
.ci-trend-fill-bottom { stop-color: var(--crm-color-primary); stop-opacity: 0; }
.ci-trend-point { fill: var(--crm-color-primary); transition: r .1s ease-out; }
.ci-trend-point.is-secondary { fill: var(--crm-color-text-muted); }
.ci-trend-point.is-active { stroke: var(--crm-color-surface); stroke-width: 2; }

/* Coluna de captura do dia: invisível, mas é ela que recebe o mouse e o toque. */
.ci-trend-hit { fill: transparent; cursor: pointer; }
.ci-trend-guide { stroke: var(--crm-color-border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* ---------- Balão do ponto ---------- */

.ci-trend-tip {
    position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 14px));
    display: grid; gap: var(--uni-space-1); min-width: 148px; padding: var(--uni-space-2) var(--uni-space-3);
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface); box-shadow: var(--crm-shadow-md);
    pointer-events: none; white-space: nowrap;
}
.ci-trend-tip.is-right { transform: translate(calc(-100% + 12px), calc(-100% - 14px)); }
.ci-trend-tip-title { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ci-trend-tip-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: var(--uni-space-2); }
.ci-trend-tip-dot { width: 9px; height: 9px; border-radius: var(--uni-radius-pill); background: var(--crm-color-primary); }
.ci-trend-tip-dot.is-secondary { background: var(--crm-color-text-muted); }
.ci-trend-tip-label { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }
.ci-trend-tip-value { color: var(--crm-color-text); font-size: var(--uni-font-size-sm); font-variant-numeric: tabular-nums; }
.ci-trend-value { fill: var(--crm-color-text); font-size: var(--uni-font-size-sm); font-weight: 600; }
.ci-trend-value.is-secondary { fill: var(--crm-color-text-muted); font-weight: 600; }

/* A composição estreita usa um viewBox bem menor, então a mesma medida em unidades de SVG
   renderiza com cerca de metade do tamanho: os corpos aqui são maiores para chegarem ao MESMO
   tamanho em pixels na tela. */
.ci-chart-compact .ci-trend-axis-y,
.ci-chart-compact .ci-trend-axis-x { font-size: var(--uni-font-size-xl); }
.ci-chart-compact .ci-trend-axis-title { font-size: var(--uni-font-size-xl); }
.ci-chart-compact .ci-trend-value { font-size: var(--uni-font-size-xl); }
.ci-chart-compact .ci-trend-point { r: 5; }

/* ---------- Funil 3D (B2, >=1024) ---------- */

.ci-funnel-shape { margin: var(--uni-space-1) 0 2px; }
/* O SVG escala pela largura do bloco; o teto de altura existe só para ele não dominar a coluna.
   Se ficar apertado demais, é o teto que engole o corpo do texto — por isso ele acompanha o
   canvas em vez de ficar fixo. */
.ci-funnel3d { display: block; width: 100%; max-height: 640px; }
.ci-funnel3d-center { fill: #ffffff; font-size: var(--uni-font-size-lg); font-weight: 600; paint-order: stroke; }
.ci-funnel3d-label { fill: var(--crm-color-text); font-size: var(--uni-font-size-lg); font-weight: 600; }
.ci-funnel3d-sub { fill: var(--crm-color-text-muted); font-size: var(--uni-font-size-md); }
.ci-funnel3d-sub.is-ghost { fill: var(--crm-color-text-muted); font-style: italic; }
.ci-funnel3d-slice.is-ghost { opacity: .45; }
.ci-funnel3d-slice.is-ghost .ci-funnel3d-label { opacity: 1; }
/* CUT 5J (Acceptance) — rótulo do funil desktop é a ação de descer para os destinatários da etapa,
   como os botões da lista mobile. Área de toque transparente; foco visível; chevron só no hover. */
.ci-funnel3d-hit { cursor: pointer; outline: none; }
.ci-funnel3d-hitarea { fill: transparent; }
.ci-funnel3d-hit:hover .ci-funnel3d-hitarea { fill: var(--crm-color-app-bg); }
.ci-funnel3d-hit:hover .ci-funnel3d-label { fill: var(--crm-color-primary); text-decoration: underline; }
.ci-funnel3d-hit:focus-visible .ci-funnel3d-hitarea { stroke: var(--crm-color-primary); stroke-width: 2; }
.ci-funnel3d-go { fill: none; stroke: var(--crm-color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ci-funnel3d-hit:hover .ci-funnel3d-go, .ci-funnel3d-hit:focus-visible .ci-funnel3d-go { opacity: 1; }

/* As peças descem e assentam na anterior, de cima para baixo — é a leitura que o desenho
   original já sugeria com a sobreposição das fatias. */
.ci-funnel3d.is-animated .ci-funnel3d-slice {
    animation: ci-funnel-drop 620ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.ci-funnel3d.is-animated .ci-funnel3d-connector {
    animation: ci-funnel-fade 420ms ease-out backwards;
    animation-delay: inherit;
}

@keyframes ci-funnel-drop {
    from { opacity: 0; transform: translateY(-26px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes ci-funnel-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-funnel3d.is-animated .ci-funnel3d-slice,
    .ci-funnel3d.is-animated .ci-funnel3d-connector { animation: none; }
}

/* ---------- B2 Funil ---------- */

.ci-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ci-funnel-hit {
    display: grid; gap: var(--uni-space-1); width: 100%; padding: var(--uni-space-3) var(--uni-space-3); min-height: 42px;
    border: 0; border-radius: var(--crm-radius-md); background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
.ci-funnel-hit.is-static { cursor: default; }
button.ci-funnel-hit:hover { background: var(--crm-color-app-bg); }
button.ci-funnel-hit:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: -2px; }
.ci-funnel-step { position: relative; }
.ci-funnel-step button.ci-funnel-hit { padding-right: var(--uni-space-6); }
.ci-funnel-go { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: var(--crm-color-text-muted); pointer-events: none; }
.ci-funnel-go .crm-icon { width: 16px; height: 16px; }

.ci-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--uni-space-3); flex-wrap: wrap; }
.ci-funnel-label { color: var(--crm-color-text); font-size: var(--uni-font-size-sm); font-weight: 600; }
.ci-funnel-step.is-empty .ci-funnel-label { color: var(--crm-color-text-muted); }

.ci-funnel-bar { display: block; height: 6px; border-radius: var(--uni-radius-pill); background: var(--crm-color-app-bg); overflow: hidden; }
.ci-funnel-fill { display: block; height: 100%; border-radius: var(--uni-radius-pill); background: var(--crm-color-primary); }
.ci-funnel-step.is-empty .ci-funnel-fill { background: var(--crm-color-border-strong); }

.ci-funnel-rates { display: flex; gap: var(--uni-space-3); flex-wrap: wrap; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }
.ci-funnel-basis { margin: var(--uni-space-3) 0 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }

/* ---------- B3/B4 Tabela de dimensão ---------- */

.ci-axis { display: inline-flex; gap: var(--uni-space-1); padding: 3px; border: 1px solid var(--crm-color-border); border-radius: var(--uni-radius-pill); background: var(--crm-color-surface); flex-wrap: wrap; }
.ci-axis-option {
    min-height: 34px; padding: 0 var(--uni-space-3); border: 0; border-radius: var(--uni-radius-pill); background: transparent;
    color: var(--crm-color-text-muted); font: inherit; font-size: var(--uni-font-size-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ci-axis-option:hover:not(:disabled) { color: var(--crm-color-text); }
.ci-axis-option.is-active { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text); }
.ci-axis-option:disabled { opacity: .55; cursor: not-allowed; text-decoration: line-through; }
.ci-axis-option:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: 2px; }

.ci-axis-trigger {
    display: inline-flex; align-items: center; gap: var(--uni-space-2); min-height: 42px; padding: 0 var(--uni-space-4);
    border: 1px solid var(--crm-color-border); border-radius: var(--uni-radius-pill); background: var(--crm-color-surface);
    color: var(--crm-color-text); font: inherit; font-size: var(--uni-font-size-sm); font-weight: 600; cursor: pointer;
    white-space: nowrap; flex-wrap: nowrap; flex: 0 0 auto;
}
.ci-axis-trigger .crm-icon { width: 14px; height: 14px; flex: 0 0 auto; }

.ci-table-wrap { overflow-x: auto; }
.ci-table { width: 100%; border-collapse: collapse; font-size: var(--uni-font-size-sm); }
.ci-table thead th {
    padding: var(--uni-space-2) var(--uni-space-3); border-bottom: 1px solid var(--crm-color-border); text-align: left;
    color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.ci-table tbody th { padding: var(--uni-space-3); border-bottom: 1px solid var(--crm-color-border); text-align: left; font-weight: 600; }
.ci-table tbody td { padding: var(--uni-space-3); border-bottom: 1px solid var(--crm-color-border); vertical-align: middle; }
.ci-table-num { text-align: right; }
.ci-table-num .ci-value { justify-content: flex-end; }
.ci-table thead .ci-table-num > * { justify-content: flex-end; }
.ci-table-name { display: block; color: var(--crm-color-text); }
.ci-table-sub { display: block; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 500; }
.ci-table-go { width: 28px; color: var(--crm-color-text-muted); }
.ci-table-go .crm-icon { width: 16px; height: 16px; }

.ci-table-row { cursor: pointer; }
.ci-table-row:hover { background: var(--crm-color-app-bg); }
.ci-table-row:focus-visible { outline: 2px solid var(--crm-color-primary); outline-offset: -2px; }

.ci-sort {
    display: inline-flex; align-items: center; gap: var(--uni-space-1); min-height: 32px; padding: 0 var(--uni-space-1);
    border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--uni-font-size-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
}
.ci-sort:hover { color: var(--crm-color-text); }
.ci-sort.is-active { color: var(--crm-color-primary); }
.ci-sort .crm-icon { width: 13px; height: 13px; }

.ci-scan-metrics { display: flex; gap: var(--uni-space-4); flex-wrap: wrap; margin-top: 2px; }
.ci-scan-metric { display: inline-flex; align-items: baseline; gap: var(--uni-space-1); }
.ci-scan-metric-label { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; }

/* ---------- B5 Aprendizados ---------- */

.ci-learnings { display: grid; gap: var(--uni-space-3); }
.ci-learning { border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); padding: var(--uni-space-4) var(--uni-space-4); }
/* DI D5 — o cartão de recomendação reusa a moldura de .ci-learning; só o traço à esquerda distingue
   "o que a IA/regra propõe" de "o que já foi registrado", sem uma segunda linguagem visual de cartão. */
.ci-recommendation { margin-bottom: var(--uni-space-3); border-left: 3px solid var(--crm-color-primary); }
.ci-learning-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--uni-space-3); flex-wrap: wrap; margin-bottom: var(--uni-space-2); }
/* OB-03 — escopo e estado são duas informações: o espaço entre eles vem do gap, não do
   whitespace do markup (que o Razor pode colapsar, e colapsou: "WorkspaceDecidido"). */
.ci-learning-scope {
    display: inline-flex; align-items: center; gap: var(--uni-space-2); flex-wrap: wrap;
    color: var(--crm-color-primary); font-size: var(--uni-font-size-2xs); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.ci-learning-when { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }

/* OR-27 — mesma tipografia de "Observação" (.uni-sheet-field): os dois rotulam campos do mesmo
   formulário e não podem ter dois pesos diferentes. Escrito aqui, na folha de Campanhas, e não em
   uni-mobile-ux.css, porque .uni-sheet-group-title é ficha compartilhada com Chat e Oportunidades. */
.ci-learning-group-title {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--crm-color-text);
}
.ci-learning-observation { margin: 0 0 var(--uni-space-3); color: var(--crm-color-text); font-size: var(--uni-font-size-md); font-weight: 600; max-width: 70ch; }

.ci-learning-evidence { display: flex; align-items: baseline; gap: var(--uni-space-2); flex-wrap: wrap; margin-bottom: var(--uni-space-3); }
.ci-learning-stage-label { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ci-learning-links { display: flex; gap: var(--uni-space-2); flex-wrap: wrap; }
.ci-learning-link {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--uni-space-3); border-radius: var(--uni-radius-pill);
    background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text);
    font-size: var(--uni-font-size-xs); font-weight: 600; text-decoration: none;
}
.ci-learning-link:hover { text-decoration: underline; }
.ci-learning-link.is-static { background: var(--crm-color-app-bg); color: var(--crm-color-text-muted); }

.ci-learning-stages { display: grid; gap: var(--uni-space-2); margin: 0; }
.ci-learning-stage { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: var(--uni-space-3); align-items: baseline; }
.ci-learning-stage dt { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ci-learning-stage dd { margin: 0; color: var(--crm-color-text); font-size: var(--uni-font-size-sm); max-width: 70ch; }
.ci-learning-stage.is-pending dd { color: var(--crm-color-text-muted); font-style: italic; }

/* ---------- D3 Experimentos / D4 Aprendizados (ações) ---------- */

/* Tons de selo adicionais (D3/D4) — mesma receita de .ci-badge--partial/--inference/--estimate. */
.ci-badge--decided { background: color-mix(in srgb, var(--crm-color-success) 16%, transparent); color: var(--crm-color-success); }
.ci-badge--muted { background: var(--crm-color-app-bg); color: var(--crm-color-text-muted); }

.ci-dot { color: var(--crm-color-text-muted); }

.ci-learning-actions { display: flex; gap: var(--uni-space-2); flex-wrap: wrap; margin-top: var(--uni-space-3); }

/* Chip "Experimento · Variante X de Y" — rótulo navegável, não um controle; por isso sem breakpoint
   próprio (aparece igual em qualquer faixa) e sem os tokens de botão primário. */
.ci-exp-chip {
    display: inline-flex; align-items: center; gap: var(--uni-space-2); margin: 0 0 var(--uni-space-3); padding: var(--uni-space-1) var(--uni-space-3);
    border-radius: var(--uni-radius-pill); background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text);
    font-size: var(--uni-font-size-xs); font-weight: 600; text-decoration: none; width: fit-content;
}
.ci-exp-chip:hover { text-decoration: underline; }
.ci-exp-chip .crm-icon { width: 14px; height: 14px; }
.ci-exp-chip.is-inline { margin: 0; }

.ci-exp-meta { display: flex; align-items: center; gap: var(--uni-space-3); flex-wrap: wrap; margin: var(--uni-space-2) 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }

/* ---------- B1/B2/B4 do experimento: painéis por variante ---------- */

.ci-exp-variants { display: grid; gap: var(--uni-space-4); margin-bottom: var(--uni-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ci-exp-variant-panel { min-width: 0; }
.ci-exp-variant-head { display: flex; align-items: center; gap: var(--uni-space-2); margin-bottom: var(--uni-space-2); }
.ci-exp-variant-head strong { font-size: var(--uni-font-size-sm); }

.ci-exp-switcher { margin-bottom: var(--uni-space-3); }

/* ---------- Diferença com intervalo (novo componente compartilhado — DI_UX_PLACEMENT.md §10) ---------- */

.ci-exp-diff {
    display: grid; gap: var(--uni-space-2); margin-top: var(--uni-space-3); padding: var(--uni-space-4) var(--uni-space-4);
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
}
.ci-exp-diff.is-decided { border-color: var(--crm-color-success); }
.ci-exp-diff.is-contaminated { border-color: var(--crm-color-danger); }
.ci-exp-diff-head { display: flex; align-items: center; justify-content: space-between; gap: var(--uni-space-3); flex-wrap: wrap; }
.ci-exp-diff-metric { font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--crm-color-text); }
.ci-exp-diff-rates { display: flex; gap: var(--uni-space-2); flex-wrap: wrap; margin: 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }
.ci-exp-diff-value { margin: 0; color: var(--crm-color-text); font-size: var(--uni-font-size-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ci-exp-diff-ci { margin-left: var(--uni-space-2); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 500; }
.ci-exp-diff-reasons { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: var(--uni-space-2); flex-wrap: wrap; }
.ci-exp-diff-contamination { margin: var(--uni-space-1) 0 0; color: var(--crm-color-danger); font-size: var(--uni-font-size-xs); max-width: 70ch; }

/* ---------- Modais D3/D4: linhas de variante e de evidência ---------- */

.ci-exp-variant-row { display: flex; align-items: center; gap: var(--uni-space-3); padding: var(--uni-space-2) 0; border-bottom: 1px solid var(--crm-color-border); }
.ci-exp-variant-row strong { flex: 0 0 96px; font-size: var(--uni-font-size-xs); }
.ci-exp-variant-row select { flex: 1 1 auto; min-height: 40px; }

.ci-exp-evidence-row { display: flex; gap: var(--uni-space-2); align-items: center; margin-bottom: var(--uni-space-2); }
.ci-exp-evidence-row input { flex: 1 1 auto; min-height: 40px; padding: var(--uni-space-2) var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-sm); background: var(--crm-color-surface); color: var(--crm-color-text); font: inherit; font-size: var(--uni-font-size-xs); }

/* ---------- Procedência (folha compartilhada) ---------- */

.ci-provenance { display: grid; gap: var(--uni-space-3); margin: 0; }
.ci-provenance > div { display: grid; gap: 3px; }
.ci-provenance dt { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ci-provenance dd { margin: 0; color: var(--crm-color-text); font-size: var(--uni-font-size-sm); }
.ci-provenance dd span { display: block; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }

/* ---------- Estados da página ---------- */

.ci-empty {
    padding: var(--uni-space-5); border: 1px dashed var(--crm-color-border-strong); border-radius: var(--crm-radius-md);
    color: var(--crm-color-text-muted); font-size: var(--uni-font-size-sm);
}

/* CUT 5J — resumo factual do segmento no modal de criação: quem entra, quem fica de fora, quantos. */
.ci-segment-summary { display: grid; gap: var(--uni-space-2); padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); font-size: var(--uni-font-size-sm); color: var(--crm-color-text); }
.ci-segment-summary p { margin: 0; }
.ci-segment-summary small { display: block; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }
.ci-segment-cta .ci-block-head { align-items: center; }
/* Owner 6T (Rodada 5): blocos empilhados na página têm respiro entre si ("Usar estas pessoas" e a lista estavam colados). */
.ci-page > .ci-block + .ci-block { margin-top: var(--uni-space-4); }

.ci-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--uni-space-3); flex-wrap: wrap; padding: var(--uni-space-3) var(--uni-space-4); border-radius: var(--crm-radius-md); font-size: var(--uni-font-size-sm); }
.ci-alert.error { border: 1px solid var(--crm-color-danger); color: var(--crm-color-text); }

/* Recarga com o conteúdo anterior na tela: sinal discreto, sem colapsar a página. */
.ci-blocks.is-refreshing { opacity: .62; transition: opacity .12s ease-out; }

.ci-skeletons { display: grid; gap: var(--uni-space-4); }
.ci-skeleton { height: 132px; border-radius: var(--crm-radius-lg); background: var(--crm-color-app-bg); border: 1px solid var(--crm-color-border); }

.ci-generated { margin: var(--uni-space-4) 0 0; color: var(--crm-color-text-muted); font-size: var(--uni-font-size-2xs); }

/* UNICHAT-CAMPAIGN-INTELLIGENCE-CORE-01 (P5) — linha do tempo factual de um destinatário. */
/* ---------- Linha do tempo do destinatário (Owner 6T, Rodada 5) ----------
   A ação é a primeira coisa que se lê; a origem é um badge em linguagem de produto, colorido por
   família (mensagem / link / página / compras / conversa) com o mapeamento semântico do DS; a hora é
   tabular. Desktop em colunas (.ci-table); tablet/celular em lista hierárquica. */
.ci-facts-table th[scope="row"] { width: 40%; }
.ci-facts-table thead th.ci-table-num { text-align: right; }
.ci-fact-action { display: inline-flex; align-items: center; gap: var(--uni-space-2); color: var(--crm-color-text); font-weight: 600; }
.ci-fact-detail { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-variant-numeric: tabular-nums; }
.ci-fact-when { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ci-fact-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: var(--uni-radius-pill);
    background: color-mix(in srgb, var(--crm-color-text-muted) 12%, transparent); color: var(--crm-color-text-muted);
}
.ci-fact-icon .crm-icon { width: 15px; height: 15px; }
.ci-fact-icon.is-message { background: color-mix(in srgb, var(--crm-color-success, #16a34a) 12%, transparent); color: var(--crm-color-success, #15803d); }
.ci-fact-icon.is-link { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text, var(--crm-color-primary)); }
.ci-fact-icon.is-page { background: color-mix(in srgb, var(--crm-color-info, #0284c7) 12%, transparent); color: var(--crm-color-info, #0369a1); }
.ci-fact-icon.is-commerce { background: color-mix(in srgb, var(--crm-color-warning, #d97706) 14%, transparent); color: var(--crm-color-warning, #b45309); }
.ci-fact-icon.is-reply { background: color-mix(in srgb, var(--crm-color-primary) 12%, transparent); color: var(--crm-color-primary); }

.ci-fact-source {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--uni-space-2);
    border-radius: var(--uni-radius-pill); font-size: var(--uni-font-size-2xs); font-weight: 600; white-space: nowrap;
    background: color-mix(in srgb, var(--crm-color-text-muted) 12%, transparent); color: var(--crm-color-text-muted);
}
.ci-fact-source.is-message { background: color-mix(in srgb, var(--crm-color-success, #16a34a) 14%, transparent); color: var(--crm-color-success, #15803d); }
.ci-fact-source.is-link { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text, var(--crm-color-primary)); }
.ci-fact-source.is-page { background: color-mix(in srgb, var(--crm-color-info, #0284c7) 14%, transparent); color: var(--crm-color-info, #0369a1); }
.ci-fact-source.is-commerce { background: color-mix(in srgb, var(--crm-color-warning, #d97706) 16%, transparent); color: var(--crm-color-warning, #b45309); }
.ci-fact-source.is-reply { background: color-mix(in srgb, var(--crm-color-primary) 14%, transparent); color: var(--crm-color-primary); }

/* Tablet/celular: cada fato é um item hierárquico — ícone da família, ação em destaque, detalhe, e a
   linha de apoio com quando · origem. Sem tabela encolhida, sem rolagem horizontal. */
.ci-facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--uni-space-2); }
.ci-facts-item {
    display: flex; align-items: flex-start; gap: var(--uni-space-3);
    padding: var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md); background: var(--crm-color-surface);
}
.ci-facts-item .ci-fact-icon { margin-top: 2px; }
.ci-facts-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-facts-action { color: var(--crm-color-text); font-weight: 600; font-size: var(--uni-font-size-sm); }
.ci-facts-detail { color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); overflow-wrap: anywhere; }
.ci-facts-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uni-space-2); margin-top: 2px; }

/* Sem position:absolute de propósito: dentro da tabela (que rola por dentro do bloco) um filho
   absoluto escapa do recorte e estica a largura do documento — era 47px de rolagem horizontal
   fantasma em 1024. clip-path esconde sem tirar o elemento do fluxo do próprio <th>. */
.ci-visually-hidden {
    display: inline-block; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* No tema escuro o azul primário sobre superfície escura nao alcanca 4.5:1 em texto de 11px
   (medido em 3,7). O token de texto sobre primário-suave existe justamente para isso; a versão
   clara fica intacta, porque lá o mesmo azul já passa com folga. */
:root[data-crm-theme="dark"] .ci-eyebrow,
:root[data-crm-theme="dark"] .ci-learning-scope { color: var(--crm-color-primary-soft-text); }

/* ============================================================================
   >= 1024 — densidade de desktop, sem virar parede de painéis.
   Resultado inteiro (a resposta vem primeiro), Funil e Ranking lado a lado (onde quebrou e o que
   funciona melhor se leem juntos), Economia e Aprendizados inteiros.
   ============================================================================ */

/* Entre 1024 e 1199 a tela ainda não comporta duas colunas com a tabela de ranking dentro: a
   coluna fica com ~435px e a tabela passa a rolar por dentro. Empilhar é melhor leitura do que
   uma barra de rolagem escondida no meio do bloco. */
@media (min-width: 1200px) {
    .ci-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ci-slot[data-bloco="resultado"],
    .ci-slot[data-bloco="economia"],
    .ci-slot[data-bloco="remarketing"],
    .ci-slot[data-bloco="aprendizados"] { grid-column: 1 / -1; }
}

/* ============================================================================
   768..1023 — tablet: única concessão de duas colunas é Resultado + Funil.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .ci-page { padding: var(--uni-space-3) var(--uni-space-6) 0; }
    .ci-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ci-slot[data-bloco="ranking"],
    .ci-slot[data-bloco="economia"],
    .ci-slot[data-bloco="remarketing"],
    .ci-slot[data-bloco="aprendizados"] { grid-column: 1 / -1; }
}

/* ============================================================================
   <= 1023 — a app bar da rota assume o topo; o conteúdo começa logo abaixo dela.
   ============================================================================ */

@media (max-width: 1023px) {
    .ci-page { padding: var(--uni-space-3) var(--uni-space-5) 0; }
    .ci-block { padding: var(--uni-space-4) var(--uni-space-4); border-radius: var(--crm-radius-md); }
    .ci-blocks { gap: var(--uni-space-4); }

    /* Faixa touch inteira (não só o celular): alvo de 44px sem inflar o ícone. */
    .ci-explain { width: 44px; height: 44px; }

    /* Armadilha do §9 de uni-mobile-ux.css: `.uni-mobile-only` aplica `display: revert !important`
       nesta faixa, e isso derrubava o inline-flex do seletor de eixo — o chevron caía para a linha
       de baixo. Restaurar o display é o mesmo remédio que a camada canônica já usa. */
    .ci-axis-trigger.uni-mobile-only { display: inline-flex !important; }
    .ci-funnel.uni-mobile-only { display: grid !important; }
    .ci-funnel-shape.uni-mobile-only { display: block !important; }
    .ci-chart-compact.uni-mobile-only { display: block !important; }
}

/* ============================================================================
   <= 767 — UMA pergunta por vez (OD-3).

   Os blocos não ativos saem do fluxo; Aprendizados fica ancorado ao bloco visível porque
   aprendizado é contexto, não destino (OD-5). Sem tabela, sem barra de funil, sem gráfico alto:
   o número principal precisa aparecer na primeira dobra.
   ============================================================================ */

@media (max-width: 767px) {
    .ci-page { padding: var(--uni-space-3) var(--uni-space-3) 0; }

    .ci-slot { display: none; }
    .ci-slot.is-active,
    .ci-slot.is-anchored { display: block; }

    .ci-block { padding: var(--uni-space-3) var(--uni-space-4); }
    .ci-block-head { margin-bottom: var(--uni-space-3); }
    .ci-block-titles h2 { font-size: var(--uni-font-size-md); }

    /* O aviso de fixture continua, mas em uma linha: no celular ele empurrava o primeiro número
       para 50% da tela, e a informação principal precisa aparecer na primeira dobra. */
    .ci-fixture { margin-bottom: var(--uni-space-3); padding: var(--uni-space-2) var(--uni-space-3); font-size: var(--uni-font-size-2xs); }

    /* Mesma armadilha do §9: `.uni-phone-only` reverte o display e a faixa perdia o flex (e o gap)
       da camada canônica `uni-segmented`. Os chips só pareciam certos por causa do espaço entre
       elementos inline. */
    .ci-strip.uni-phone-only { display: flex !important; }

    /* O aviso de cobertura parcial do bloco repete o que o próprio cartão já diz com o selo
       PARCIAL e a sua nota — no celular a repetição custa uma dobra inteira. */
    .ci-block > .ci-block-note { display: none; }

    /* Alvo de toque de 44px sem inflar o ícone. */
    .ci-explain { width: 44px; height: 44px; }

    /* Dois cartões por linha: mais que isso vira grade de cartões minúsculos. */
    .ci-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uni-space-2); }
    .ci-kpi { padding: var(--uni-space-3) var(--uni-space-3); }
    .ci-kpi .ci-value-figure { font-size: var(--uni-font-size-xl); }

    /* Máximo um gráfico por bloco — a leitura principal é o número. A altura vem da proporção do
       viewBox, então no celular ele já ocupa bem menos que os 40% de viewport do contrato. */
    .ci-chart { margin-top: var(--uni-space-3); }

    .ci-funnel-hit { padding: var(--uni-space-3) var(--uni-space-3); }
    .ci-funnel-step button.ci-funnel-hit { padding-right: var(--uni-space-6); }

    /* Peça compacta: sem coluna lateral, o funil usa a largura toda — o teto de altura acompanha o
       que a largura já produz, senão ele encolhe o desenho e come o corpo dos números. */
    .ci-funnel-shape--compact .ci-funnel3d { max-height: 360px; }
    .ci-funnel3d-center { font-size: var(--uni-font-size-2xl); }

    .ci-learning-stage { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ci-generated { padding-bottom: var(--uni-page-tail, var(--uni-space-6)); }

    /* DI D3 — "uma variante por vez" (DI_UX_PLACEMENT.md §9): o painel de cada variante só aparece
       quando o segmentado o marca ativo. >=768 os painéis continuam lado a lado via .ci-exp-variants. */
    .ci-exp-variant-panel { display: none; }
    .ci-exp-variant-panel.is-active { display: block; }
    .ci-exp-variant-row strong { flex-basis: 72px; }
}

/* ---------------------------------------------------------------------------------------------
   OR-17 — a célula de métrica não quebra linha.

   `.ci-value` tem `flex-wrap: wrap`, que serve ao cartão de destaque (onde o selo de classificação
   e a variação podem descer para a segunda linha). Dentro de uma célula de tabela, porém, quebrar
   destrói o alinhamento de toda a coluna — e foi o que aconteceu no Ranking, onde a frase
   "Depende de rastreamento de jornada não configurado" ocupava quatro linhas dentro de uma coluna
   numérica. A frase saiu da célula (ver CampaignDimensionTable: `ShowUnavailableReason="false"`);
   esta regra garante que nada mais volte a quebrá-la.
   --------------------------------------------------------------------------------------------- */

.ci-table-num .ci-value {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* O (i) fica colado ao número, na mesma linha, e não encolhe. */
.ci-table-num .ci-explain {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------------------------
   OR-18 — faixa de recorte.

   Aparece só quando a superfície está mostrando UM objeto em vez do conjunto. Não é alerta nem
   erro: é orientação. Por isso usa o tom informativo suave e não o pastel de aviso — VL-36 reserva
   os tons semânticos ao domínio, e "você desceu um nível" não é um estado do domínio.
   --------------------------------------------------------------------------------------------- */

/* OR-21 — respiro até o primeiro bloco: a faixa encostava no cartão "Resultado". */
.ci-scope-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    flex-wrap: wrap;
    padding: var(--uni-space-3) var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
    margin-bottom: var(--uni-space-5);
}

.ci-scope-note-text {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-width: 0;
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
}

.ci-scope-note-text .crm-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ci-scope-note-back {
    flex: 0 0 auto;
    color: inherit;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    text-decoration: underline;
}

/* OR-20 — âncora do popover de filtros. `position: relative` porque `.uni-filter-panel` é
   absoluto em relação a ela; o resto da geometria e do comportamento vem da ficha canônica e de
   `uniUx.anchor`. A ficha própria `.ci-filters-button` saiu junto com o botão que ela vestia. */
.ci-filter-anchor {
    position: relative;
    display: inline-flex;
}

/* OR-19 — separador do rodapé do assistente de experimento. */
.ci-exp-footer-gap { flex: 1; }

/* ---------------------------------------------------------------------------------------------
   OR-23 — o cartão do Ranking tem altura decidida, não herdada.

   No desktop ele divide a linha com o Funil, e uma altura ditada pelo conteúdo fazia a composição
   mudar de forma a cada troca de eixo — sendo que trocar de eixo é um CONTROLE, não uma navegação.
   O corpo reserva a altura de uma página cheia (oito linhas), a lista rola por dentro se precisar,
   e a paginação fica presa ao pé. §1.4: densidade decidida, não herdada.
   --------------------------------------------------------------------------------------------- */

.ci-rank-body {
    min-height: 0;
}

@media (min-width: 1200px) {
    /* A moldura do bloco vira coluna para que o corpo cresça e o rodapé encoste no pé.
       1200px, e não 1024: é a partir daí que Funil e Ranking dividem a linha (ver a regra de
       grid-template-columns acima). Abaixo disso eles empilham e a altura fixa não teria função. */
    /* Os dois cartões da linha esticam até a altura da linha; sem isto, `align-items: start` do
       grid deixava cada um com a altura do próprio conteúdo — Funil 703px, Ranking 620px. */
    .ci-blocks { align-items: stretch; }
    .ci-slot[data-bloco="funil"] .ci-block,
    .ci-slot[data-bloco="ranking"] .ci-block { height: 100%; }

    .ci-slot [data-bloco="ranking"] .ci-block,
    .ci-block:has(.ci-rank-body) {
        display: flex;
        flex-direction: column;
    }

    .ci-block:has(.ci-rank-body) .ci-block-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    /* Com os cartões esticando, a altura vem da LINHA do grid, não de um número aqui. O corpo
       ocupa o que sobra e rola por dentro se a página cheia não couber. */
    .ci-rank-body {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* UNICHAT-CUT-6T — bloco "Públicos de remarketing": metodologia recolhida, no mesmo tom das notas do bloco. */
.ci-block .ci-methodology { margin-top: var(--uni-space-3); color: var(--crm-color-text-muted); font-size: var(--uni-font-size-xs); }
.ci-block .ci-methodology summary { cursor: pointer; font-weight: 600; color: var(--crm-color-text); }
.ci-block .ci-methodology ul { margin: var(--uni-space-2) 0 0; padding-inline-start: var(--uni-space-4); display: grid; gap: var(--uni-space-1); }
.ci-block .uni-scan-list + .ci-methodology { border-top: 1px solid var(--crm-color-border); padding-top: var(--uni-space-3); }

/* CUT 6T — nota do Pixel no bloco Resultado: mesma linha de nota, com a ação à direita. */
.ci-block .ci-pixel-note { margin-top: var(--uni-space-3); justify-content: space-between; }
.ci-block .ci-pixel-note .ci-link { color: var(--crm-color-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ci-block .ci-pixel-note .ci-link:hover { text-decoration: underline; }