/* ============================================================
   Campanhas - folha de estilo da tela
   Origem: docs/mockups/campanhas/campanhas.css (mockup aprovado 2026-08-04)
   Aplica a ENTRADA #205 do Mineiro (receita de tela boa).

   Adaptacoes em relacao ao mockup:
   - o body{...} virou .cmp-page{...} (a folha nao re-skina o app inteiro)
   - todos os seletores das visoes estao escopados em .cmp-page
   - blocos de tema escuro removidos: o app nao tem tema escuro e o CSS
     legado migrado (KPIs, modais) e claro-only; um flip automatico por
     prefers-color-scheme deixaria a pagina metade escura, metade clara
   - secao "pulse" (grafico de onda do preview) nao entrou: nao e uma das
     4 visoes e nenhum builder a usa
   - secao "LEGADO MIGRADO" ao final: CSS que vivia injetado via <style>
     em campaignManager.js (header, KPIs, modais, toasts, forms)
   ============================================================ */
:root{
    /* Campanhas 2026: tokens de refinamento visual */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:32px;
    --r-card:12px; --r-control:8px; --r-pill:999px;
    --bd-w:.5px; --bd:rgba(0,0,0,.10); --bd-strong:rgba(0,0,0,.18);
    --surface-page:#F7F6F4; --surface-card:#FFFFFF; --surface-muted:#F1EFEC;
    --text-1:#1C1B1A; --text-2:#6B6A67; --text-3:#9B9A96;
    --brand:#993556; --brand-on:#FBEAF0; --brand-soft:#F4E4EA;
    --font-sans:"Poppins",ui-sans-serif,system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
    --fs-page-title:22px; --fs-block-title:15px; --fs-metric-lg:22px;
    --fs-metric-md:18px; --fs-body:13px; --fs-control:12px; --fs-caption:11px;
    --fw-regular:400; --fw-medium:500;
    --control-year-height:34px; --channel-size:16px; --phase-height:3px;

    --bg:#f7f6f8; --panel:#fdfcfd; --sunk:#eeeaf0; --line:#e6e1e8; --line2:#f2eef4;
    --ink:#1b1720; --ink2:#5e5766; --ink3:#968e9f;
    /* Paleta madura: rose acinzentado, mesma familia da marca com saturacao baixa.
       --rose e a COR DA MARCA (#D4789C) e nao muda; o preenchimento usa o rose
       escuro dos tokens (--cg-brand #993556, 6.9:1 com --on-rose). */
    --rose:#D4789C; --rose-fill:var(--cg-brand); --rose-soft:#F3ECEF; --rose-line:#E5D7DB; --on-rose:var(--cg-brand-on);

    /* Tokens do bloco LEGADO MIGRADO: antes eram hex repetidos linha a linha. */
    --cmp-ink-1:#111827; --cmp-ink-2:#374151; --cmp-ink-3:#6B7280; --cmp-ink-4:#9CA3AF; --cmp-ink-5:#D1D5DB;
    --cmp-bd:#E5E7EB; --cmp-bd-soft:#F3F4F6;
    --cmp-surface:#FDFCFD; --cmp-on-color:#FBFAFA;
    --cmp-danger:#EF4444; --cmp-danger-strong:#DC2626; --cmp-ok:#10B981;
    --cmp-info:#3B82F6; --cmp-warn:#F59E0B; --cmp-done:#6366F1; --cmp-launch:#8B5CF6;
    --cmp-skel-1:#F1EFEC; --cmp-skel-2:#E8E5E1;
    --cmp-rail-ink:#EDF0F1; --cmp-rail-ink-2:#B8BEC1; --cmp-rail-line:#444B4F;
    --cmp-ease:cubic-bezier(0,0,.2,1); --cmp-motion:200ms; --cmp-motion-slow:220ms;
    /* Identidade de cada canal: cor de terceiro, nao segue a paleta da marca. */
    --cmp-ch-instagram:#E1306C; --cmp-ch-facebook:#1877F2; --cmp-ch-tiktok:#1A1A1A;
    --cmp-ch-google:#4285F4; --cmp-ch-whatsapp:#25D366;
    --live:var(--dash-green); --live-soft:color-mix(in srgb,var(--dash-green) 10%,var(--panel)); --live-line:color-mix(in srgb,var(--dash-green) 35%,var(--line));
    --gap:#a06a15; --gap-soft:#fbf2e1; --gap-line:#ecd9ae;
    --r:16px;
    --sans:var(--font-sans);
    --mono:var(--font-mono);
}

/* A aba usa o mockup aprovado literalmente, isolado do CSS global do painel. */
.cmp-reference-frame{
    display:block;
    width:100%;
    height:100vh;
    border:0;
    background:var(--bg);
}

.main-content.campaigns-reference-view{
    padding:0;
    background:var(--bg);
}

/* ===== pagina interna da campanha (#campaigns/<id>) =====
   Mesma familia do indice: fundo/tinta/raio saem dos tokens --cg-*
   (campanhas-tokens.css). O tema segue o botao de lua do indice:
   campaignDetail.js marca data-cg-theme neste container a partir do
   localStorage "campanhas-theme", e o bloco [data-cg-theme="dark"]
   dos tokens faz o resto. Padding igual ao .cmp-page .app do indice. */
.main-content.campaigns-detail-view{
    padding:28px 26px 60px;
    min-height:100vh;
    background:var(--cg-surface-page);
    color:var(--cg-text-1);
    font-family:var(--cg-font-sans);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    transition:background var(--cg-motion-fast) ease,color var(--cg-motion-fast) ease;
}

/* ===== base da pagina (era body{...} no mockup) ===== */
.cmp-page{
    background:var(--bg);color:var(--ink);
    font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
    min-height:100%;
}
.cmp-page .app{max-width:1280px;margin:0 auto;padding:28px 26px 60px;display:flex;flex-direction:column;gap:22px}
.cmp-page .cmp-list{display:flex;flex-direction:column;gap:22px}
/* display de classe vence o atributo hidden por empate de especificidade */
.cmp-page [hidden]{display:none !important}

/* ===== seletor de visao ===== */
.cmp-page .sw{display:flex;gap:6px}
.cmp-page .sw button{flex:1 1 0;padding:11px 15px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;line-height:1.3}
.cmp-page .sw button:hover{border-color:var(--rose-line)}
.cmp-page .sw button:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.cmp-page .sw button.on{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--on-rose)}
.cmp-page .sw b{display:block;font-weight:600}
.cmp-page .sw span{font-size:12px;opacity:.78}

/* ===== cabecalho: titulo + 3 numeros soltos + acoes ===== */
.cmp-page .head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cmp-page .head h1{font-size:25px;font-weight:600;letter-spacing:-.02em;margin:0}
.cmp-page .head__sub{font-size:12.5px;color:var(--ink3);margin-top:2px;font-family:var(--mono)}
.cmp-page .head__summary{display:flex;align-items:center;gap:12px;margin-left:auto}
.cmp-page .kpis{
  display:flex;gap:0;align-items:stretch;
  padding:6px 8px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--rose-fill) 8%,transparent);
  transition:transform var(--cmp-motion) var(--cmp-ease),
    border-color var(--cmp-motion) var(--cmp-ease),box-shadow var(--cmp-motion) var(--cmp-ease),
    background-color var(--cmp-motion) var(--cmp-ease);
  user-select:none
}
.cmp-page .kpis:hover{
  background:var(--rose-soft);border-color:var(--rose-line);
  box-shadow:0 4px 12px color-mix(in srgb,var(--rose-fill) 13%,transparent);
  transform:translateY(-2px)
}
.cmp-page .kpis:active{
  box-shadow:0 1px 3px color-mix(in srgb,var(--rose-fill) 12%,transparent);
  transform:translateY(0) scale(.98)
}
.cmp-page .kpi{display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 14px}
.cmp-page .kpi + .kpi{border-left:1px solid var(--line)}
.cmp-page .kpi b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.cmp-page .kpi span{font-size:11.5px;color:var(--ink3)}
.cmp-page .kpi--live b{color:var(--live)}
.cmp-page .cta{padding:10px 18px;border-radius:999px;background:var(--rose-fill);color:var(--on-rose);
  font-size:13.5px;font-weight:500;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.cmp-page .cta:hover{filter:brightness(1.07)}
.cmp-page .cta:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* ===== visao POR DATA / FOCO: cartoes por campanha ===== */
.cmp-page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.cmp-page .c{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px 15px;
  display:flex;flex-direction:column;gap:13px;cursor:pointer;
  transition:box-shadow var(--cmp-motion-slow) var(--cmp-ease),transform var(--cmp-motion-slow) var(--cmp-ease),
    filter var(--cmp-motion-slow) var(--cmp-ease),opacity var(--cmp-motion-slow) var(--cmp-ease)}
.cmp-page .c:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.cmp-page .c__h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cmp-page .c__n{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cmp-page .c__when{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:3px}
.cmp-page .pill{font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;flex:none;
  background:var(--sunk);color:var(--ink3)}
.cmp-page .pill--pausada{background:var(--gap);color:var(--on-rose)}
.cmp-page .pill--cancelada{background:var(--cmp-danger);color:var(--on-rose)}
.cmp-page .c--live{border-color:var(--live-line);background:var(--live-soft)}
.cmp-page .c--live .pill{background:var(--dash-green);color:var(--cmp-on-color)}
.cmp-page .c--gap{border-color:var(--gap-line);background:var(--gap-soft);border-style:dashed}
.cmp-page .c--gap .pill{background:var(--gap);color:var(--on-rose)}
.cmp-page .c--gap .c__n{color:var(--gap)}

.cmp-page .steps{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.cmp-page .steps__bar{display:flex;gap:3px}
.cmp-page .steps__bar i{flex:1;height:4px;border-radius:2px;background:var(--sunk)}
.cmp-page .steps__bar i.done{background:var(--ink3);opacity:.42}
.cmp-page .steps__bar i.at{background:var(--ink2)}
.cmp-page .c--live .steps__bar i.done{background:var(--live);opacity:.38}
.cmp-page .c--live .steps__bar i.at{background:var(--live)}
.cmp-page .steps__n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cmp-page .steps__now{font-size:12px;font-weight:600}
.cmp-page .c--live .steps__now{color:var(--live)}
.cmp-page .steps__i{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}

/* rodape unico: logos a esquerda */
.cmp-page .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--line2)}
.cmp-page .c--live .foot{border-top-color:var(--live-line)}
.cmp-page .c--gap .foot{border-top-color:var(--gap-line)}
.cmp-page .chans{display:flex;align-items:center;gap:10px;height:19px}
.cmp-page .chan{width:18px;height:18px;display:block;flex:none}
.cmp-page .semcanal{font-size:11.5px;color:var(--ink3)}

/* acoes (editar/excluir): discretas, so no hover/foco do cartao */
.cmp-page .c__actions{position:absolute;top:10px;right:10px;display:none;gap:6px;z-index:3}
.cmp-page .c:hover .c__actions,.cmp-page .c:focus-within .c__actions,
.cmp-page .cel:hover .c__actions,.cmp-page .cel:focus-within .c__actions{display:flex}
.cmp-page .c__actions .campaign-action-btn{background:var(--panel)}

/* ===== layout FOCO: o que ja acabou sai de foco ===== */
.cmp-page .grid--foco .c--fora{filter:blur(2.6px) grayscale(.55);opacity:.5;transform:scale(.982)}
.cmp-page .grid--foco .c--fora:hover,.cmp-page .grid--foco .c--fora:focus-within,.cmp-page .grid--foco .c--fora:focus-visible{
  filter:none;opacity:1;transform:none}
.cmp-page .grid--foco .c--perto{box-shadow:0 10px 30px rgba(27,23,32,.09);transform:translateY(-2px)}
.cmp-page .grid--foco .c--live{box-shadow:0 16px 40px rgba(14,143,99,.18);transform:translateY(-4px) scale(1.012)}
.cmp-page .grid--foco .c--gap{box-shadow:0 10px 30px rgba(160,106,21,.14);transform:translateY(-2px)}

/* ===== visao ANO: grid 4x3. A informacao encolhe com a distancia:
   passado vira so um "concluido" que vira no hover; futuro distante
   mostra so nome e contagem. Perto de hoje, tudo. ===== */
.cmp-page .ano{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cmp-page .cel{position:relative;min-height:158px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);padding:15px 16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transition:box-shadow var(--cmp-motion) var(--cmp-ease),transform var(--cmp-motion) var(--cmp-ease)}
.cmp-page .cel__m{font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.08em}
.cmp-page .cel__n{font-size:15.5px;font-weight:600;line-height:1.25}
.cmp-page .cel__d{font-family:var(--mono);font-size:11px;color:var(--ink3)}

.cmp-page .cel--livre{background:transparent;border-style:dashed;justify-content:center;align-items:center;gap:4px;cursor:default}
.cmp-page .cel--livre .cel__m{position:absolute;top:15px;left:16px}
.cmp-page .cel--livre span:last-child{font-size:12px;color:var(--ink3);opacity:.65}

.cmp-page .cel--ar{border-color:var(--live-line);background:var(--live-soft);
  box-shadow:0 14px 36px rgba(14,143,99,.16);transform:translateY(-3px)}
.cmp-page .cel--ar .cel__n{color:var(--live)}
.cmp-page .cel--vago{border-color:var(--gap-line);background:var(--gap-soft);border-style:dashed}
.cmp-page .cel--vago .cel__n{color:var(--gap)}

/* futuro distante: so o essencial */
.cmp-page .cel--longe{justify-content:space-between}
.cmp-page .cel--longe .cel__conta{font-family:var(--mono);font-size:26px;font-weight:500;
  color:var(--ink2);line-height:1;letter-spacing:-.02em}
.cmp-page .cel--longe .cel__cl{font-size:11.5px;color:var(--ink3)}

/* passado: cartao que VIRA. Frente = so o carimbo. */
.cmp-page .cel--fim{padding:0;background:transparent;border:none;perspective:900px}
.cmp-page .flip{position:relative;width:100%;height:100%;min-height:158px;
  transform-style:preserve-3d;transition:transform var(--cmp-motion-slow) var(--cmp-ease)}
.cmp-page .cel--fim:hover .flip,.cmp-page .cel--fim:focus-within .flip{transform:rotateY(180deg)}
.cmp-page .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);
  padding:15px 16px;display:flex;flex-direction:column;gap:9px;background:var(--panel)}
.cmp-page .face--frente{border:1.5px dashed var(--line);align-items:center;justify-content:center;gap:9px}
.cmp-page .face--frente svg{width:32px;height:32px;color:var(--ink3);opacity:.75}
.cmp-page .face--frente .cel__m{position:absolute;top:15px;left:16px}
.cmp-page .face--frente b{font-size:12.5px;font-weight:500;color:var(--ink3)}
.cmp-page .face--tras{transform:rotateY(180deg);border:1px solid var(--line)}
.cmp-page .cel--fim:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:var(--r)}
@media(prefers-reduced-motion:reduce){
  .cmp-page .flip{transition:none}
  .cmp-page .cel--fim:hover .flip,.cmp-page .cel--fim:focus-within .flip{transform:none}
  .cmp-page .cel--fim:hover .face--frente,.cmp-page .cel--fim:focus-within .face--frente{opacity:0}
  .cmp-page .face--tras{transform:none;opacity:0}
  .cmp-page .cel--fim:hover .face--tras,.cmp-page .cel--fim:focus-within .face--tras{opacity:1}
}

/* ===== visao JANELA: mesma celula do Ano, so que 4 meses deslizantes ===== */
.cmp-page .janela{display:flex;flex-direction:column;gap:14px}
.cmp-page .jh{display:flex;align-items:center;gap:14px}
.cmp-page .jh__t{font-size:15px;font-weight:600;text-transform:capitalize}
/* setas montadas SOBRE a borda do primeiro e do ultimo cartao */
.cmp-page .jwrap{position:relative}
.cmp-page .jnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 14px rgba(27,23,32,.12);
  transition:border-color var(--cmp-motion) var(--cmp-ease),color var(--cmp-motion) var(--cmp-ease),opacity var(--cmp-motion) var(--cmp-ease)}
.cmp-page .jnav--ant{left:-19px} .cmp-page .jnav--prox{right:-19px}
.cmp-page .jnav:hover:not(:disabled){border-color:var(--rose-line);color:var(--rose)}
.cmp-page .jnav:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.cmp-page .jnav:disabled{opacity:.3;cursor:default}
.cmp-page .jnav svg{width:17px;height:17px}
.cmp-page .jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cmp-page .cel--hoje .cel__m{color:var(--rose)}

/* Profundidade na Janela. O blur vai na FACE, nunca na celula: filter
   no pai cria stacking context e achata o preserve-3d do giro.
   E so entra com a classe --profundo: desfoque sem nada nitido pra
   contrastar nao e foco, e tela apagada com cara de bug. */
.cmp-page .jgrid--profundo .cel--fim .face--frente{filter:blur(2.4px) grayscale(.5);opacity:.55;
  transition:filter var(--cmp-motion-slow) var(--cmp-ease),opacity var(--cmp-motion-slow) var(--cmp-ease)}
.cmp-page .jgrid--profundo .cel--fim:hover .face--frente,
.cmp-page .jgrid--profundo .cel--fim:focus-within .face--frente{filter:none;opacity:1}
.cmp-page .jgrid--profundo .cel--livre{opacity:.6;transition:opacity var(--cmp-motion-slow) var(--cmp-ease)}
.cmp-page .jgrid--profundo .cel--livre:hover{opacity:1}
.cmp-page .jgrid .cel--ar{box-shadow:0 16px 40px rgba(14,143,99,.18);transform:translateY(-4px) scale(1.012)}
.cmp-page .jgrid .cel--vago{box-shadow:0 10px 30px rgba(160,106,21,.14);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .cmp-page .jgrid .cel--ar,.cmp-page .jgrid .cel--vago{transform:none}
  .cmp-page .jgrid--profundo .cel--fim .face--frente{filter:none;opacity:1}
}

/* ===== grafico do rodape: orcamento ao longo do ano ===== */
.cmp-page .pulse{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 14px}
.cmp-page .pulse__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cmp-page .pulse__t{font-size:15px;font-weight:600}
.cmp-page .keys{display:flex;gap:15px}
.cmp-page .key{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3)}
.cmp-page .key i{width:13px;height:3px;border-radius:2px;background:var(--rose)}
.cmp-page .key.k2 i{background:transparent;border-top:2px dashed var(--ink3);height:0}
.cmp-page .peaks{position:relative;height:0;margin-top:14px;z-index:2}
.cmp-page .peak{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:1.25;
  padding:2px 6px;border-radius:7px;background:var(--panel)}
.cmp-page .peak b{display:block;font-size:12px;font-weight:500}
.cmp-page .peak span{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.cmp-page .peak.live b{color:var(--live)}
.cmp-page .pulse svg{width:100%;height:150px;display:block;overflow:visible}
.cmp-page .axis{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid var(--line2);margin-top:4px;padding-top:7px}
.cmp-page .axis span{font-family:var(--mono);font-size:10.5px;color:var(--ink3);text-align:center}
.cmp-page .axis span.now{color:var(--rose);font-weight:600}

@media(max-width:760px){
  .cmp-page .head{align-items:flex-start}.cmp-page .head__summary{width:100%;margin-left:0}.cmp-page .kpis{flex:1;padding:6px 8px}.cmp-page .kpi{flex:1;padding:0 10px}.cmp-page .kpi b{font-size:22px}
  .cmp-page .sw{flex-direction:column}
  .cmp-page .ano,.cmp-page .jgrid{grid-template-columns:repeat(2,1fr)}
  .cmp-page .jnav--ant{left:-8px} .cmp-page .jnav--prox{right:-8px}
  .cmp-page .peak b{font-size:10px}.cmp-page .peak span{display:none}
}
@media(max-width:520px){
  .cmp-page .head__summary{align-items:stretch;flex-direction:column}
  .cmp-page .head__summary .cta{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .cmp-page *{transition:none !important}
  .cmp-page .kpis:hover,.cmp-page .kpis:active{transform:none}
  .cmp-page .grid--foco .c--live,.cmp-page .grid--foco .c--perto,.cmp-page .grid--foco .c--gap{transform:none}
}

/* ============================================================
   LEGADO MIGRADO - antes vivia numa <style> montada em template
   string dentro de campaignManager.js. Regra Mineiro #28: zero
   <style> em JS, zero #id como seletor de estilo.
   ============================================================ */

/* ===== Skeleton (estado de carregamento) ===== */
/* Brilho discreto: dois tons quase iguais e passagem lenta, para o
   carregamento nao piscar na tela. */
.cmp-skel{
    background:linear-gradient(90deg,var(--cmp-skel-1) 25%,var(--cmp-skel-2) 50%,var(--cmp-skel-1) 75%);
    background-size:400% 100%;
    animation:cmp-skel-sweep 1.8s ease-in-out infinite;
    border-radius:8px;
}
@keyframes cmp-skel-sweep{
    0%{background-position:100% 0}
    100%{background-position:0 0}
}
@media (prefers-reduced-motion:reduce){
    .cmp-skel{animation:none}
}
.cmp-skel-head{margin-bottom:24px}
.cmp-skel--title{width:160px;height:22px;margin-bottom:8px}
.cmp-skel--sub{width:260px;height:13px}
.cmp-skel-row{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.cmp-skel--kpi{flex:1;min-width:160px;height:76px;border-radius:12px}
.cmp-skel-pills{display:flex;gap:8px;margin-bottom:24px}
.cmp-skel--p1{width:64px;height:30px;border-radius:999px}
.cmp-skel--p2{width:80px;height:30px;border-radius:999px}
.cmp-skel--p3{width:96px;height:30px;border-radius:999px}
.cmp-skel--p4{width:104px;height:30px;border-radius:999px}
.cmp-skel--line{height:64px;border-radius:12px;margin-bottom:8px}

/* ===== Header (acoes a direita: filtro + cta) ===== */
.cmp-header-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Icone quadrado colorido (usado no modal de exclusao) */
.cmp-kpi-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cmp-kpi-icon .material-symbols-outlined{font-size:22px}
.cmp-kpi-icon--red{background:color-mix(in srgb,var(--cmp-danger) 10%,transparent);color:var(--cmp-danger)}

/* ===== Botoes ===== */
.cmp-btn{
    border:none;border-radius:10px;padding:9px 18px;
    font-size:13px;font-weight:600;cursor:pointer;
    transition:all var(--cmp-motion) var(--cmp-ease);white-space:nowrap;font-family:inherit;
}
.cmp-btn-primary{background:var(--rose-fill);color:var(--on-rose)}
.cmp-btn-primary:hover{box-shadow:0 4px 12px color-mix(in srgb,var(--rose) 30%,transparent)}
.cmp-btn-primary:disabled{opacity:.6;cursor:default;box-shadow:none}
.cmp-btn-ghost{background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);color:var(--cmp-ink-3)}
.cmp-btn-ghost:hover{border-color:var(--rose-line);color:var(--rose)}
.cmp-btn-danger{background:var(--cmp-danger);color:var(--cmp-on-color)}
.cmp-btn-danger:hover{background:var(--cmp-danger-strong)}
.cmp-btn-danger:disabled{opacity:.6;cursor:default}

/* ===== Filter pills ===== */
.campaign-filter-pill{
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-radius:999px;
    padding:6px 14px;font-size:12px;font-weight:500;color:var(--cmp-ink-3);
    cursor:pointer;transition:all var(--cmp-motion) var(--cmp-ease);font-family:inherit;
}
.campaign-filter-pill:hover{border-color:var(--rose-line);color:var(--rose)}
.campaign-filter-pill.active{background:var(--rose);color:var(--cmp-on-color);border-color:var(--rose)}

/* ===== Compact filter menu ===== */
.cmp-filter{position:relative}
.cmp-filter-toggle{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-radius:10px;
    padding:8px 16px;font-size:12px;font-weight:600;color:var(--cmp-ink-2);
    cursor:pointer;font-family:inherit;transition:all var(--cmp-motion) var(--cmp-ease);
}
.cmp-filter-toggle:hover{border-color:var(--rose-line);color:var(--rose)}
.cmp-filter-toggle .material-symbols-outlined{font-size:18px}
.cmp-filter-chevron{transition:transform var(--cmp-motion) var(--cmp-ease)}
.cmp-filter.open .cmp-filter-chevron{transform:rotate(180deg)}
.cmp-filter-menu{
    display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:50;
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-radius:12px;
    padding:8px;min-width:176px;box-shadow:0 8px 24px color-mix(in srgb,var(--cmp-ink-1) 12%,transparent);
    flex-direction:column;gap:2px;
}
.cmp-filter.open .cmp-filter-menu{display:flex}
.cmp-filter-option{
    display:block;width:100%;text-align:left;border:none;border-radius:8px;
    padding:8px 16px;font-size:12px;font-weight:500;color:var(--cmp-ink-3);
    background:transparent;box-sizing:border-box;
}
.cmp-filter-option:hover{background:var(--rose-soft);color:var(--rose);border-color:transparent}
.cmp-filter-option.active{background:var(--rose);color:var(--cmp-on-color)}

/* ===== Status badge (cores fixas por status; era style inline) ===== */
.cmp-badge{
    display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.4px;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.cmp-badge--rascunho{background:color-mix(in srgb,var(--cmp-ink-3) 13%,transparent);color:var(--cmp-ink-3)}
.cmp-badge--programada{background:color-mix(in srgb,var(--cmp-info) 13%,transparent);color:var(--cmp-info)}
.cmp-badge--em_andamento{background:var(--dash-green);color:var(--cmp-on-color)}
.cmp-badge--finalizada{background:color-mix(in srgb,var(--cmp-done) 13%,transparent);color:var(--cmp-done)}
.cmp-badge--pausada{background:color-mix(in srgb,var(--cmp-warn) 13%,transparent);color:var(--cmp-warn)}
.cmp-badge--cancelada{background:color-mix(in srgb,var(--cmp-danger) 13%,transparent);color:var(--cmp-danger)}

/* ===== Tag badges (cores fixas por tag; era style inline) ===== */
.cmp-tag{
    display:inline-block;font-size:9px;font-weight:600;padding:2px 7px;
    border-radius:999px;white-space:nowrap;
}
.cmp-tag--instagram{background:color-mix(in srgb,var(--cmp-ch-instagram) 9%,transparent);color:var(--cmp-ch-instagram)}
.cmp-tag--facebook{background:color-mix(in srgb,var(--cmp-ch-facebook) 9%,transparent);color:var(--cmp-ch-facebook)}
.cmp-tag--tiktok{background:color-mix(in srgb,var(--cmp-ch-tiktok) 9%,transparent);color:var(--cmp-ch-tiktok)}
.cmp-tag--google_ads{background:color-mix(in srgb,var(--cmp-ch-google) 9%,transparent);color:var(--cmp-ch-google)}
.cmp-tag--email{background:color-mix(in srgb,var(--cmp-warn) 9%,transparent);color:var(--cmp-warn)}
.cmp-tag--whatsapp{background:color-mix(in srgb,var(--cmp-ch-whatsapp) 9%,transparent);color:var(--cmp-ch-whatsapp)}
.cmp-tag--influenciadores{background:var(--rose-soft);color:var(--rose-fill)}
.cmp-tag--conteudo_organico{background:color-mix(in srgb,var(--cmp-ok) 9%,transparent);color:var(--cmp-ok)}
.cmp-tag--anuncios_pagos{background:color-mix(in srgb,var(--cmp-info) 9%,transparent);color:var(--cmp-info)}
.cmp-tag--promocional{background:color-mix(in srgb,var(--cmp-danger) 9%,transparent);color:var(--cmp-danger)}
.cmp-tag--lancamento{background:color-mix(in srgb,var(--cmp-launch) 9%,transparent);color:var(--cmp-launch)}
.cmp-tag--outra{background:color-mix(in srgb,var(--cmp-ink-3) 9%,transparent);color:var(--cmp-ink-3)}

/* ===== Seletor de tags do modal (era style inline + JS de cor) ===== */
.cmp-tag-groups{display:flex;gap:20px;margin-bottom:8px;flex-wrap:wrap}
.cmp-tag-group{flex:1;min-width:0}
.cmp-tag-group-title{
    font-size:10px;color:var(--cmp-ink-4);text-transform:uppercase;
    letter-spacing:.5px;font-weight:600;margin-bottom:4px;
}
.cmp-tag-options{display:flex;flex-wrap:wrap;gap:5px}
.campaign-tag-option{
    font-size:11px;padding:4px 10px;border-radius:999px;
    border:1.5px solid var(--cmp-bd);background:var(--cmp-surface);color:var(--cmp-ink-3);
    cursor:pointer;transition:all var(--cmp-motion) var(--cmp-ease);font-family:inherit;font-weight:500;
}
.campaign-tag-option--instagram.selected{border-color:var(--cmp-ch-instagram);background:color-mix(in srgb,var(--cmp-ch-instagram) 9%,transparent);color:var(--cmp-ch-instagram)}
.campaign-tag-option--facebook.selected{border-color:var(--cmp-ch-facebook);background:color-mix(in srgb,var(--cmp-ch-facebook) 9%,transparent);color:var(--cmp-ch-facebook)}
.campaign-tag-option--tiktok.selected{border-color:var(--cmp-ch-tiktok);background:color-mix(in srgb,var(--cmp-ch-tiktok) 9%,transparent);color:var(--cmp-ch-tiktok)}
.campaign-tag-option--google_ads.selected{border-color:var(--cmp-ch-google);background:color-mix(in srgb,var(--cmp-ch-google) 9%,transparent);color:var(--cmp-ch-google)}
.campaign-tag-option--email.selected{border-color:var(--cmp-warn);background:color-mix(in srgb,var(--cmp-warn) 9%,transparent);color:var(--cmp-warn)}
.campaign-tag-option--whatsapp.selected{border-color:var(--cmp-ch-whatsapp);background:color-mix(in srgb,var(--cmp-ch-whatsapp) 9%,transparent);color:var(--cmp-ch-whatsapp)}
.campaign-tag-option--influenciadores.selected{border-color:var(--rose-fill);background:var(--rose-soft);color:var(--rose-fill)}
.campaign-tag-option--conteudo_organico.selected{border-color:var(--cmp-ok);background:color-mix(in srgb,var(--cmp-ok) 9%,transparent);color:var(--cmp-ok)}
.campaign-tag-option--anuncios_pagos.selected{border-color:var(--cmp-info);background:color-mix(in srgb,var(--cmp-info) 9%,transparent);color:var(--cmp-info)}
.campaign-tag-option--promocional.selected{border-color:var(--cmp-danger);background:color-mix(in srgb,var(--cmp-danger) 9%,transparent);color:var(--cmp-danger)}
.campaign-tag-option--lancamento.selected{border-color:var(--cmp-launch);background:color-mix(in srgb,var(--cmp-launch) 9%,transparent);color:var(--cmp-launch)}

/* ===== Icon action buttons (editar/excluir) ===== */
.campaign-action-btn{
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border:1.5px solid var(--cmp-bd);border-radius:8px;background:var(--cmp-surface);color:var(--cmp-ink-3);
    cursor:pointer;transition:all var(--cmp-motion) var(--cmp-ease);padding:0;
}
.campaign-action-btn .material-symbols-outlined{font-size:16px}
.campaign-action-btn:hover{border-color:var(--rose-line);color:var(--rose)}
.campaign-delete-btn:hover{border-color:var(--cmp-danger);color:var(--cmp-danger)}

/* ===== Empty / error state ===== */
.cmp-empty{
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-radius:12px;
    padding:48px 24px;text-align:center;
}
.cmp-empty .cmp-btn{margin-top:16px}
.cmp-empty-icon{font-size:48px;color:var(--rose-line);display:block;margin-bottom:12px}
.cmp-empty-icon--error{color:var(--cmp-danger)}
.cmp-empty-title{font-size:14px;font-weight:600;color:var(--cmp-ink-1);margin-bottom:4px}
.cmp-empty-subtitle{font-size:13px;color:var(--cmp-ink-3)}

/* ===== Modal (append no body: fora de .cmp-page, escopo global) ===== */
.campaign-modal-overlay{
    position:fixed;inset:0;background:color-mix(in srgb,var(--cmp-ink-1) 45%,transparent);z-index:1000;
    display:flex;align-items:center;justify-content:center;
}
.campaign-modal-panel{
    background:var(--cmp-surface);border-radius:14px;padding:20px 24px;width:660px;max-width:95vw;
    max-height:min(88vh,900px);box-shadow:0 20px 50px color-mix(in srgb,var(--cmp-ink-1) 18%,transparent);
    font-family:var(--sans);
    /* UM scroll so: cabecalho e rodape fixos, o corpo do form rola */
    display:flex;flex-direction:column;overflow:hidden;
}
.campaign-modal-panel .cmp-modal-header{flex-shrink:0}
.campaign-modal-panel .cmp-modal-footer{flex-shrink:0}
.campaign-form{display:flex;flex-direction:column;flex:1;min-height:0}
.campaign-form-body{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
.campaign-plan-selected{margin-right:auto;align-self:center;font-size:12px;color:var(--cmp-ink-4)}
.campaign-plan-all{width:16px;height:16px;accent-color:var(--rose);flex-shrink:0;cursor:pointer;margin:0}
.campaign-modal-panel--sm{width:400px}
.cmp-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cmp-modal-title{font-size:16px;font-weight:700;color:var(--cmp-ink-1);margin:0}
.cmp-modal-close{
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:8px;cursor:pointer;color:var(--cmp-ink-3);
    padding:0;transition:all var(--cmp-motion) var(--cmp-ease);
}
.cmp-modal-close:hover{background:var(--cmp-bd-soft);color:var(--cmp-ink-1)}
.cmp-modal-close .material-symbols-outlined{font-size:20px}
.cmp-modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.cmp-modal-footer--flush{margin-top:0}
.cmp-delete-body{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.cmp-delete-text{font-size:13px;color:var(--cmp-ink-3);margin:0;line-height:1.5}
.cmp-delete-text strong{color:var(--cmp-ink-1)}

/* ===== Toast (append no body) ===== */
.cmp-toast-container{
    position:fixed;right:20px;bottom:88px;z-index:2000;
    display:flex;flex-direction:column;gap:8px;
}
.cmp-toast-text{flex:1}
.cmp-toast-close{
    background:none;border:none;cursor:pointer;color:var(--cmp-ink-4);padding:0;
    display:flex;align-items:center;flex-shrink:0;
}
.cmp-toast-close:hover{color:var(--cmp-ink-1)}
.cmp-toast-close .material-symbols-outlined{font-size:16px}
.cmp-toast{
    display:flex;align-items:center;gap:8px;
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-left:3px solid var(--cmp-ok);
    border-radius:10px;padding:12px 16px;font-size:13px;color:var(--cmp-ink-1);
    box-shadow:0 8px 24px color-mix(in srgb,var(--cmp-ink-1) 12%,transparent);max-width:340px;
    animation:cmp-toast-in .18s ease;font-family:var(--sans);
}
.cmp-toast-error{border-left-color:var(--cmp-danger)}
.cmp-toast-icon{font-size:18px;color:var(--cmp-ok);flex-shrink:0}
.cmp-toast-error .cmp-toast-icon{color:var(--cmp-danger)}
.cmp-toast-out{opacity:0;transition:opacity var(--cmp-motion) var(--cmp-ease)}
@keyframes cmp-toast-in{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
    .cmp-toast{animation:none}
    .cmp-toast-out{transition:none}
}

/* ============================================================
   Campanhas 2026 — refinamento aprovado (somente #campaigns)
   ============================================================ */
.cmp-page{
    background:var(--surface-page);
}
.cmp-page .app{
    max-width:1280px;
    margin:0 auto;
    padding:var(--sp-6);
    gap:var(--sp-5);
}
.cmp-page .cmp-list{gap:var(--sp-5)}
.cmp-page .campaign-controls{gap:var(--sp-4)}
.cmp-page .head{gap:var(--sp-5)}
.cmp-page .kpis{gap:0}
.cmp-page .ano{gap:var(--sp-3)}
.cmp-page .cel{padding:var(--sp-3);gap:var(--sp-3)}
.cmp-page .cel--livre{gap:var(--sp-1)}
.cmp-page .cel--livre .cel__m{top:var(--sp-3);left:var(--sp-3)}
.cmp-page .steps{gap:var(--sp-2)}
.cmp-page .steps__bar{gap:var(--sp-1)}
.cmp-page .foot{gap:var(--sp-3);padding-top:var(--sp-3)}
.cmp-page .chans{gap:var(--sp-3)}
.cmp-page .annual-results{padding:var(--sp-5)}
.cmp-page .annual-results__title{margin:0 0 var(--sp-4)}
.cmp-page .annual-results__grid{gap:var(--sp-4)}
.cmp-page .annual-results__label{margin-top:var(--sp-1)}
.cmp-page .annual-results__note{margin-top:var(--sp-1)}
.cmp-page,
.cmp-page button,
.cmp-page select{font-family:var(--font-sans)}
.cmp-page .head h1{
    margin:0;
    color:var(--text-1);
    font-size:var(--fs-page-title);
    font-weight:var(--fw-medium);
    line-height:1.3;
    letter-spacing:normal;
}
.cmp-page .head__sub{
    margin-top:var(--sp-1);
    color:var(--text-3);
    font-family:var(--font-mono);
    font-size:var(--fs-control);
    font-weight:var(--fw-regular);
}
.cmp-page .kpi b{
    color:var(--text-1);
    font-family:var(--font-mono);
    font-size:var(--fs-metric-md);
    font-weight:var(--fw-medium);
    line-height:1.3;
    letter-spacing:normal;
}
.cmp-page .kpi span{
    color:var(--text-3);
    font-family:var(--font-sans);
    font-size:var(--fs-caption);
    font-weight:var(--fw-regular);
}
.cmp-page .cel__m{
    color:var(--text-3);
    font-family:var(--font-mono);
    font-size:var(--fs-caption);
    font-weight:var(--fw-regular);
    letter-spacing:.06em;
}
.cmp-page .cel__n{
    color:var(--text-1);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:var(--fw-medium);
    line-height:1.4;
    letter-spacing:normal;
}
.cmp-page .cel__d,
.cmp-page .steps__i{
    color:var(--text-3);
    font-family:var(--font-mono);
    font-size:var(--fs-caption);
    font-weight:var(--fw-regular);
}
.cmp-page .cel__d--language,
.cmp-page .cel--livre span:last-child{
    color:var(--text-3);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:var(--fw-regular);
    opacity:1;
}
.cmp-page .steps__now,
.cmp-page .pill{
    color:var(--text-1);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:var(--fw-medium);
}
.cmp-page .annual-results__title{
    color:var(--text-1);
    font-size:var(--fs-block-title);
    font-weight:var(--fw-medium);
}
.cmp-page .annual-results__value{
    color:var(--text-1);
    font-family:var(--font-mono);
    font-size:var(--fs-metric-lg);
    font-weight:var(--fw-medium);
}
.cmp-page .annual-results__label{
    color:var(--text-2);
    font-size:var(--fs-control);
    font-weight:var(--fw-regular);
}
.cmp-page .annual-results__note{
    color:var(--text-3);
    font-size:var(--fs-caption);
    font-weight:var(--fw-regular);
}

/* ===== Form ===== */
.campaign-form-cols{display:flex;gap:20px}
.campaign-form-col{flex:1;min-width:0;display:flex;flex-direction:column}
@media (max-width:680px){
    .campaign-form-cols{flex-direction:column;gap:0}
}
.campaign-form-group{margin-bottom:10px}
/* A coluna da esquerda tem menos campos que a direita: a descricao estica
   pra que as duas terminem na mesma altura. */
.campaign-form-group--grow{flex:1;display:flex;flex-direction:column}
.campaign-form-group--grow .campaign-form-input{flex:1;min-height:88px;resize:vertical}
.campaign-form-hint{display:block;font-size:11px;color:var(--cmp-ink-4);margin-top:4px}
.campaign-form-label{display:block;font-size:12px;font-weight:600;color:var(--cmp-ink-2);margin-bottom:4px}
.campaign-form-input{
    width:100%;padding:8px 12px;border:1.5px solid var(--cmp-bd);border-radius:8px;
    font-size:13px;color:var(--cmp-ink-1);background:var(--cmp-surface);outline:none;
    font-family:inherit;box-sizing:border-box;transition:border-color var(--cmp-motion) var(--cmp-ease);
}
.campaign-form-input:focus{border-color:var(--rose)}
.campaign-form-input::placeholder{color:var(--cmp-ink-4)}
.campaign-form-row{display:flex;gap:12px}
.campaign-form-row .campaign-form-group{flex:1}
/* Obrigatorio/opcional (#72) */
.campaign-form-required{color:var(--cmp-danger)}
.campaign-form-optional{color:var(--cmp-ink-4);font-weight:400}
/* Prefixo R$ dentro do campo (#83) */
.campaign-currency-wrap{position:relative}
.campaign-currency-prefix{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    font-size:13px;color:var(--cmp-ink-3);pointer-events:none;
}
.campaign-currency-wrap .campaign-form-input{padding-left:32px}
/* Mini calendario nos campos de data (#83) */
.campaign-date-wrap{position:relative}
.campaign-date-wrap .campaign-form-input{padding-right:36px}
.campaign-date-btn{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    width:26px;height:26px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:6px;cursor:pointer;color:var(--cmp-ink-4);
    padding:0;transition:all var(--cmp-motion) var(--cmp-ease);
}
.campaign-date-btn:hover{background:color-mix(in srgb,var(--rose) 9%,transparent);color:var(--rose)}
.campaign-date-btn .material-symbols-outlined{font-size:18px}
.campaign-datepicker{
    position:fixed;z-index:1100;width:252px;
    background:var(--cmp-surface);border:1.5px solid var(--cmp-bd);border-radius:12px;padding:10px;
    box-shadow:0 12px 32px color-mix(in srgb,var(--cmp-ink-1) 16%,transparent);font-family:var(--sans);
    animation:campaign-dp-in .12s ease both;
}
@keyframes campaign-dp-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.campaign-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.campaign-dp-title{font-size:12px;font-weight:600;color:var(--cmp-ink-1)}
.campaign-dp-nav{
    width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:6px;cursor:pointer;color:var(--cmp-ink-3);padding:0;
}
.campaign-dp-nav:hover{background:var(--cmp-bd-soft);color:var(--cmp-ink-1)}
.campaign-dp-nav .material-symbols-outlined{font-size:18px}
.campaign-dp-week,.campaign-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.campaign-dp-week span{
    text-align:center;font-size:10px;font-weight:600;color:var(--cmp-ink-4);
    text-transform:uppercase;padding:4px 0;
}
.campaign-dp-day{
    height:30px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:7px;cursor:pointer;
    font-size:12px;color:var(--cmp-ink-2);font-family:inherit;padding:0;
    transition:background-color var(--cmp-motion) var(--cmp-ease),color var(--cmp-motion) var(--cmp-ease);
}
.campaign-dp-day:hover:not(:disabled){background:color-mix(in srgb,var(--rose) 9%,transparent);color:var(--rose)}
.campaign-dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--cmp-bd);font-weight:600}
.campaign-dp-day.is-selected{background:var(--rose);color:var(--cmp-on-color);font-weight:600}
.campaign-dp-day:disabled{color:var(--cmp-ink-5);cursor:not-allowed}
.campaign-dp-day.is-blank{cursor:default}
.campaign-dp-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--cmp-bd-soft)}
.campaign-dp-action{
    flex:1;padding:5px 0;background:none;border:1.5px solid var(--cmp-bd);border-radius:7px;
    font-size:11px;font-weight:600;color:var(--cmp-ink-3);cursor:pointer;font-family:inherit;
    transition:all var(--cmp-motion) var(--cmp-ease);
}
.campaign-dp-action:hover{border-color:var(--rose);color:var(--rose)}
/* Erro inline: texto perto do campo, nao so cor (#69/#11) */
.campaign-form-error{display:none;align-items:center;gap:4px;font-size:11px;color:var(--cmp-danger);margin-top:4px}
.campaign-form-error.is-visible{display:flex}
.campaign-form-error .material-symbols-outlined{font-size:14px}
.campaign-form-input.is-error{border-color:var(--cmp-danger)}
.campaign-form-input.is-error:focus{border-color:var(--cmp-danger)}

/* Seletor de Planejamento (tarefas da campanha) */
.campaign-planning{border:1.5px solid var(--cmp-bd);border-radius:10px;padding:8px 16px}
.campaign-plan-group{border-bottom:1px solid var(--cmp-bd-soft)}
.campaign-plan-group:last-child{border-bottom:none}
.campaign-plan-group-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;cursor:pointer;user-select:none}
.campaign-plan-group-header:hover .campaign-plan-cat{color:var(--cmp-ink-1)}
.campaign-plan-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cmp-ink-3);display:flex;align-items:center;gap:8px;transition:color var(--cmp-motion) var(--cmp-ease)}
.campaign-plan-count{font-size:10px;font-weight:600;color:var(--rose);background:color-mix(in srgb,var(--rose) 9%,transparent);padding:2px 8px;border-radius:999px}
.campaign-plan-chevron{font-size:18px;color:var(--cmp-ink-4);transition:transform var(--cmp-motion) var(--cmp-ease)}
.campaign-plan-group.open .campaign-plan-chevron{transform:rotate(180deg)}
.campaign-plan-items{display:none;grid-template-columns:1fr 1fr;column-gap:24px;padding-bottom:10px}
.campaign-plan-items[hidden]{display:none!important}
.campaign-plan-group.open .campaign-plan-items{display:grid;animation:campaign-plan-open .18s ease both}
@keyframes campaign-plan-open{
    from{opacity:0;translate:0 -4px}
    to{opacity:1;translate:0 0}
}
@media (max-width:680px){.campaign-plan-items{grid-template-columns:1fr}}
.campaign-plan-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cmp-ink-2);padding:3px 0;cursor:pointer}
.campaign-plan-item input{accent-color:var(--rose);flex-shrink:0}
.campaign-plan-icon{font-size:16px;color:var(--cmp-ink-3);flex-shrink:0}
.campaign-plan-custom-add{display:flex;gap:8px;padding:8px 0 10px}
.campaign-plan-custom-add .campaign-form-input{flex:1}

/* Tarefa 120: propostas 3, 4 e 5 na tela interna. As paletas ficam
   isoladas no container de cada visao; nenhum token global e alterado. */
.campaigns-detail-view .cgd-switcher{display:flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid var(--cg-bd);border-radius:10px;background:var(--cg-surface-muted);overflow-x:auto}
/* Faixa de abas baixa: uma linha so, o subtitulo virou dica no hover (title). */
.campaigns-detail-view .cgd-view-btn{min-width:150px;min-height:32px;display:flex;flex:1;align-items:center;justify-content:center;padding:6px 14px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--cg-text-2);font-family:inherit;cursor:pointer}
.campaigns-detail-view .cgd-view-btn b{font-size:12px;font-weight:600}
.campaigns-detail-view .cgd-view-btn:hover{border-color:var(--cg-bd)}.campaigns-detail-view .cgd-view-btn.on{background:var(--cg-surface-card);border-color:var(--cg-bd-strong);color:var(--cg-text-1)}
.campaigns-detail-view .cgd-view-btn:focus-visible{outline:3px solid var(--cg-brand-soft);border-color:var(--cg-brand)}
.campaigns-detail-view .cgd-view{min-height:60vh;padding:20px;border-radius:12px;background:var(--cgd-bg);color:var(--cgd-ink);font-size:13px;line-height:1.48}
.campaigns-detail-view .cgd-view--mesa{--cgd-pink:#973a5b;--cgd-pink-strong:#742744;--cgd-pink-soft:#f2e7eb;--cgd-green:#356c59;--cgd-ink:#202427;--cgd-muted:#687076;--cgd-border:#d6dade;--cgd-border-soft:#e7e9eb;--cgd-surface:#fbfcfc;--cgd-muted-surface:#eef1f2;--cgd-bg:#f3f5f5}
.campaigns-detail-view .cgd-view--painel{--cgd-pink:#b54e73;--cgd-pink-strong:#8d3656;--cgd-pink-soft:#f5e9ed;--cgd-green:#376f62;--cgd-ink:#202326;--cgd-muted:#687078;--cgd-border:#d6dadd;--cgd-border-soft:#e7e9eb;--cgd-surface:#fcfcfb;--cgd-muted-surface:#f0f2f3;--cgd-bg:#f5f6f6;--cgd-rail:#252a2e}
.campaigns-detail-view .cgd-view--ritmo{--cgd-pink:#c05278;--cgd-pink-strong:#913b5b;--cgd-pink-soft:#f7e9ee;--cgd-now:var(--cg-live);--cgd-now-soft:color-mix(in srgb,var(--cg-live) 18%,var(--cgd-surface));--cgd-ink:#282722;--cgd-muted:#716f67;--cgd-border:#ddd9cf;--cgd-border-soft:#ebe8e0;--cgd-surface:#fffef9;--cgd-muted-surface:#f3f1ea;--cgd-bg:#f7f5ef}
.campaigns-detail-view[data-cg-theme="dark"] .cgd-view--mesa{--cgd-pink:#d47c9d;--cgd-pink-strong:#eda9c0;--cgd-pink-soft:#32232a;--cgd-green:#6da38e;--cgd-ink:#e9edef;--cgd-muted:#a2aaae;--cgd-border:#384045;--cgd-border-soft:#2d3337;--cgd-surface:#1a1f22;--cgd-muted-surface:#242a2e;--cgd-bg:#121619}
.campaigns-detail-view[data-cg-theme="dark"] .cgd-view--painel{--cgd-pink:#dc789b;--cgd-pink-strong:#f0a6bd;--cgd-pink-soft:#35242b;--cgd-green:#72a899;--cgd-ink:#edf0f1;--cgd-muted:#a6adb1;--cgd-border:#3b4246;--cgd-border-soft:#30363a;--cgd-surface:#1b1f22;--cgd-muted-surface:#252b2f;--cgd-bg:#13171a;--cgd-rail:#0f1214}
.campaigns-detail-view[data-cg-theme="dark"] .cgd-view--ritmo{--cgd-pink:#df7e9e;--cgd-pink-strong:#f2aec2;--cgd-pink-soft:#39262d;--cgd-now:var(--cg-live);--cgd-now-soft:color-mix(in srgb,var(--cg-live) 22%,var(--cgd-surface));--cgd-ink:#f0eee7;--cgd-muted:#ada99f;--cgd-border:#464139;--cgd-border-soft:#36332d;--cgd-surface:#211f1a;--cgd-muted-surface:#2b2822;--cgd-bg:#181713}
.cgd-view .cmpd-back{color:var(--cgd-muted)}.cgd-view .cmpd-back:hover{color:var(--cgd-pink)}
.cgd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.cgd-head h1,.cgd-head h2{margin:4px 0;color:var(--cgd-ink);font-size:26px}.cgd-head p,.cgd-card p{margin:4px 0;color:var(--cgd-muted)}
.cgd-eyebrow{font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--cgd-pink-strong)}.cgd-actions{display:flex;gap:8px}.cgd-view .cg-btn--primary{background:var(--cgd-pink-strong);border-color:var(--cgd-pink-strong)}
.cgd-metrics{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:18px;border:1px solid var(--cgd-border);border-radius:10px;background:var(--cgd-surface);overflow:hidden}.cgd-metrics>div{min-width:0;padding:13px 16px;border-right:1px solid var(--cgd-border)}.cgd-metrics>div:last-child{border:0}.cgd-metrics span,.cgd-kpis span,.cgd-hero-number span{display:block;font-size:10px;letter-spacing:.055em;text-transform:uppercase;color:var(--cgd-muted)}.cgd-metrics b,.cgd-kpis b,.cgd-hero-number b{display:block;margin-top:3px;color:var(--cgd-ink);font:650 18px ui-monospace,Consolas,monospace}.cgd-metrics small,.cgd-kpis small,.cgd-hero-number small{display:block;margin-top:3px;color:var(--cgd-muted);font-size:10px;line-height:1.25}
.cgd-operational{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.cgd-board{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:12px;align-items:start}.cgd-task-column{padding:11px;border:1px solid var(--cgd-border);border-radius:11px;background:var(--cgd-muted-surface)}.cgd-task-column>header{display:flex;justify-content:space-between;align-items:center;padding:3px 3px 11px}.cgd-task-column h2{margin:0;font-size:12px;letter-spacing:.07em;text-transform:uppercase}.cgd-task-column>header span{padding:2px 7px;border:1px solid var(--cgd-border);border-radius:99px;background:var(--cgd-surface);color:var(--cgd-muted)}
.cgd-task-card,.cgd-card{padding:15px;margin-bottom:9px;border:1px solid var(--cgd-border);border-radius:10px;background:var(--cgd-surface)}.cgd-task-card h3,.cgd-card h2,.cgd-card h3{margin:7px 0;font-size:13px}.cgd-task-card p,.cgd-task-card footer,.cgd-empty{color:var(--cgd-muted);font-size:11px}.cgd-task-card footer{padding-top:10px;border-top:1px solid var(--cgd-border-soft)}.cgd-tag{display:inline-block;padding:3px 7px;border-radius:99px;background:var(--cgd-pink-soft);color:var(--cgd-pink-strong);font-size:9px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}.cgd-task-toggle-wrap{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:9px;border-top:1px solid var(--cgd-border-soft);color:var(--cgd-muted);font-size:10px;cursor:pointer}.cgd-task-toggle{width:17px;height:17px;margin:0;accent-color:var(--cg-brand);cursor:pointer}.cgd-task-toggle:focus-visible{outline:2px solid var(--cg-brand);outline-offset:2px}.cgd-side{display:grid;gap:12px}.cgd-side .cgd-card{margin:0}.cgd-card dl,.cgd-rail dl{display:grid;grid-template-columns:1fr auto;gap:9px;margin:12px 0}.cgd-card dt,.cgd-rail dt{color:var(--cgd-muted)}.cgd-card dd,.cgd-rail dd{margin:0;font-weight:700}
.cgd-cockpit{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}.cgd-rail{position:sticky;top:88px;min-height:560px;padding:24px;border-radius:14px;background:var(--cgd-rail);color:var(--cmp-rail-ink);display:flex;flex-direction:column}.cgd-rail h1{margin:9px 0;font-size:26px;line-height:1.12}.cgd-rail p,.cgd-rail dt{color:var(--cmp-rail-ink-2)}.cgd-hero-number{margin:18px 0;padding:18px 0;border-top:1px solid var(--cmp-rail-line);border-bottom:1px solid var(--cmp-rail-line)}.cgd-hero-number b{color:var(--cmp-rail-ink);font-size:32px}.cgd-rail .cg-btn{margin-top:auto}.cgd-cockpit-content{min-width:0}.cgd-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cgd-panel-grid .cgd-card{margin:0;padding:20px}.cgd-wide{grid-column:1/-1}.cgd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;border:1px solid var(--cgd-border);border-radius:9px;background:var(--cgd-border);overflow:hidden}.cgd-kpis>div{padding:15px;background:var(--cgd-muted-surface)}.cgd-decision{padding:12px 0;border-top:1px solid var(--cgd-border-soft)}.cgd-decision b,.cgd-decision small{display:block}.cgd-decision small{color:var(--cgd-muted)}
.cgd-rhythm-head h1{font-family:Georgia,serif;font-size:38px}.cgd-metrics--four{grid-template-columns:repeat(4,1fr)}.cgd-rhythm-legend{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;color:var(--cgd-muted);font-size:11px}.cgd-rhythm-legend span{width:10px;height:10px;margin-left:8px;border-radius:50%;background:var(--cgd-border)}.cgd-rhythm-legend span:first-child{margin-left:0}.cgd-rhythm-legend .is-today{background:var(--cgd-now)}.cgd-rhythm-legend .is-done{background:var(--dash-violet)}.cgd-rhythm-legend .is-overdue{background:var(--cg-danger)}.cgd-timeline-wrap{overflow-x:auto;padding:16px 0}.cgd-timeline{min-width:max(800px,100%);display:flex;position:relative;padding-top:42px}.cgd-timeline:before{content:"";position:absolute;left:6%;right:6%;top:49px;height:2px;background:var(--cgd-border)}.cgd-day{position:relative;min-width:180px;flex:1;padding:32px 7px 0}.cgd-day>i{position:absolute;top:0;left:50%;translate:-50%;width:16px;height:16px;border:3px solid var(--cgd-border);border-radius:50%;background:var(--cgd-surface);z-index:1}.cgd-day.is-done>i{border-color:var(--dash-violet);background:var(--dash-violet)}.cgd-day.is-overdue>i{border-color:var(--cg-danger);background:var(--cg-danger)}.cgd-day.is-today>i{border-color:var(--cgd-now);background:var(--cgd-now);box-shadow:0 0 0 6px var(--cgd-now-soft)}.cgd-date{text-align:center;margin-bottom:12px}.cgd-date b,.cgd-date span{display:block}.cgd-date span{color:var(--cgd-muted);font-size:11px}.cgd-event{min-height:155px;padding:15px;border:1px solid var(--cgd-border);border-radius:10px;background:var(--cgd-surface)}.cgd-day.is-today .cgd-event{border-top:3px solid var(--cgd-now)}.cgd-day.is-done .cgd-event{border-top:3px solid var(--dash-violet)}.cgd-day.is-overdue .cgd-event{border-top:3px solid var(--cg-danger)}.cgd-event h3{font-size:13px}.cgd-event p{color:var(--cgd-muted)}.cgd-invalid-dates{margin-top:8px;padding:16px;border:1px solid var(--cg-danger);border-radius:var(--dash-radius);background:var(--cg-danger-soft)}.cgd-invalid-dates h2{margin:0 0 8px;color:var(--cg-danger);font-size:13px}.cgd-invalid-dates ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.cgd-invalid-dates li{display:flex;justify-content:space-between;gap:16px;color:var(--cgd-ink);font-size:11px}.cgd-invalid-dates li span{color:var(--cg-danger)}.cgd-rhythm-lower{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:18px}.cgd-rhythm-lower .cgd-card{margin:0;padding:20px}
@media(max-width:1100px){.cgd-operational,.cgd-cockpit{grid-template-columns:1fr}.cgd-rail{position:static;min-height:0}.cgd-rail .cg-btn{margin-top:16px}.cgd-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.campaigns-detail-view .cgd-view{padding:16px}.cgd-head{align-items:flex-start;flex-direction:column}.cgd-actions{width:100%}.cgd-actions .cg-btn{flex:1}.cgd-metrics,.cgd-metrics--four{grid-template-columns:repeat(2,1fr)}.cgd-board,.cgd-panel-grid,.cgd-rhythm-lower{grid-template-columns:1fr}.cgd-wide{grid-column:auto}.cgd-kpis{grid-template-columns:1fr}}
@media(max-width:480px){.campaigns-detail-view .cgd-switcher{padding:3px}.cgd-metrics,.cgd-metrics--four{grid-template-columns:1fr}.cgd-metrics>div{border-right:0;border-bottom:1px solid var(--cgd-border)}.cgd-rhythm-head h1{font-size:29px}}

/* Acabamento dos tres modos atuais da interna de campanhas. */
.campaigns-detail-view .cgd-view-btn{min-width:132px;padding-inline:12px}

/* Ofertas da campanha: cupom real de cada participante. */
.cgd-offer{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;padding:9px 0;border-top:1px solid var(--cgd-border-soft)}
.cgd-offer:first-of-type{padding-top:4px;border-top:0}
.cgd-offer-code{padding:2px 7px;border-radius:6px;background:var(--cgd-pink-soft);color:var(--cgd-pink-strong);font-family:var(--cg-font-mono);font-size:10px;font-weight:750;letter-spacing:.05em}
.cgd-offer b{font-size:12px}
.cgd-offer small{margin-left:auto;color:var(--cgd-muted);font-size:10px}
.cgd-timeline.is-dense .cgd-day{min-width:118px;padding-inline:4px}
.cgd-timeline.is-dense .cgd-event{min-height:108px;padding:10px}
.cgd-timeline.is-dense .cgd-event p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cgd-no-dates{margin:12px 0 0;padding:12px 14px;border:1px solid var(--cgd-border);border-radius:var(--dash-radius-sm);background:var(--cgd-muted-surface);color:var(--cgd-muted);font-size:12px}
@media(max-width:760px){.campaigns-detail-view .cgd-switcher{flex-wrap:wrap}.campaigns-detail-view .cgd-view-btn{min-width:calc(50% - 4px);flex-basis:calc(50% - 4px)}}
@media(max-width:480px){.campaigns-detail-view .cgd-view-btn{min-width:100%;flex-basis:100%}}