/* ============================================================
   Campanhas — COMPONENTES compartilhados (indice iframe + interna)
   Constroi em cima de campanhas-tokens.css (linkar ANTES deste).
   Regra de tipo: SANS para titulos/texto; MONO para dado e metadado
   (datas, contadores, valores, rotulos de secao, badges).
   Cada componente tem UMA definicao aqui. As classes do indice
   (.c/.cel/.pill/.steps__bar) sao a referencia canonica e ficam
   intactas no mockup; estes componentes espelham os mesmos valores
   via tokens para o app principal.
   ============================================================ */

/* ---- Card (borda fina, raio grande, fundo do tema, SEM sombra) ---- */
.cg-card{
    background:var(--cg-surface-card);
    border:var(--cg-bd-w) solid var(--cg-bd);
    border-radius:var(--cg-r-card);
    transition:border-color var(--cg-motion-fast) ease;
}
/* variante tracejada: area que poderia ter conteudo (estado vazio) */
.cg-card--dash{background:transparent;border-style:dashed;border-width:1px}

/* ---- Section header (padrao unico: mono, caixa alta, apagado) ---- */
.cg-section{
    margin:0 0 var(--cg-sp-3) 0;
    font:600 var(--cg-fs-caption)/1.3 var(--cg-font-mono);
    text-transform:uppercase;letter-spacing:.08em;
    color:var(--cg-text-3);
}

/* ---- StatusBadge (ciclo de vida; texto vem de _statusDerivado) ---- */
.cg-badge{
    display:inline-block;padding:3px 10px;border-radius:var(--cg-r-pill);
    font:600 10px/1.4 var(--cg-font-mono);
    text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
    background:var(--cg-surface-muted);color:var(--cg-text-3);
}
.cg-badge--rascunho{background:var(--cg-surface-muted);color:var(--cg-text-3)}
.cg-badge--programada{background:rgba(59,91,246,.12);color:#3B5BF6}
.cg-badge--em_andamento{background:rgba(14,143,99,.12);color:var(--cg-live)}
.cg-badge--finalizada{background:rgba(75,85,241,.12);color:#4B55F1}
.cg-badge--pausada{background:rgba(217,145,19,.14);color:#D99113}
.cg-badge--cancelada{background:var(--cg-danger-soft);color:var(--cg-danger)}
:root[data-theme="dark"] .cg-badge--programada,[data-cg-theme="dark"] .cg-badge--programada{color:#8FA3FB}
:root[data-theme="dark"] .cg-badge--finalizada,[data-cg-theme="dark"] .cg-badge--finalizada{color:#9AA1F8}
:root[data-theme="dark"] .cg-badge--pausada,[data-cg-theme="dark"] .cg-badge--pausada{color:#E3B45C}

/* ---- Tag/chip (canais, estrategia) ---- */
.cg-tag{
    display:inline-block;padding:3px 10px;border-radius:var(--cg-r-pill);
    font:500 var(--cg-fs-caption)/1.4 var(--cg-font-mono);white-space:nowrap;
    background:var(--cg-brand-soft);color:var(--cg-brand);
}

/* ---- ProgressBar (uma so: trilho + fill; contador mono no markup) ---- */
.cg-progress{
    height:var(--cg-progress-h);border-radius:var(--cg-progress-r);
    background:var(--cg-progress-track);overflow:hidden;
}
.cg-progress__fill{
    display:block;height:100%;border-radius:var(--cg-progress-r);
    background:var(--cg-progress-fill);
    transition:width var(--cg-motion-fast) ease-out;
}
/* barra segmentada: um .cg-progress por etapa, gap fixo */
.cg-segbar{display:flex;gap:3px}
.cg-segbar .cg-progress{flex:1}
@media (prefers-reduced-motion:reduce){.cg-progress__fill{transition:none}}

/* ---- EmptyState ---- */
/* bloco: dentro de um .cg-card--dash */
.cg-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:var(--cg-sp-1);padding:var(--cg-sp-6) var(--cg-sp-5);text-align:center;
    color:var(--cg-text-3);font-size:var(--cg-fs-body);
}
.cg-empty__title{font:500 var(--cg-fs-block)/1.3 var(--cg-font-sans);color:var(--cg-text-2)}
.cg-empty__sub{font-size:var(--cg-fs-control)}
.cg-empty__icon{font-size:40px;color:var(--cg-text-3);opacity:.6}
/* inline: campo vazio dentro de card com conteudo ("Sem descricao.") */
.cg-empty-inline{
    margin:0;font:var(--cg-fs-control)/1.5 var(--cg-font-mono);color:var(--cg-text-3);
}

/* ---- Botoes ---- */
.cg-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:var(--cg-sp-2) var(--cg-sp-4);border-radius:var(--cg-r-control);
    border:var(--cg-bd-w) solid transparent;cursor:pointer;font-family:inherit;
    font:500 var(--cg-fs-control)/1.3 var(--cg-font-sans);
    transition:border-color var(--cg-motion-fast) ease,color var(--cg-motion-fast) ease,background var(--cg-motion-fast) ease;
}
.cg-btn:disabled{opacity:.5;cursor:not-allowed}
.cg-btn--primary{background:var(--cg-brand);color:var(--cg-brand-on);border-color:var(--cg-brand)}
.cg-btn--primary:hover:not(:disabled){filter:brightness(1.07)}
.cg-btn--ghost{background:var(--cg-surface-card);border-color:var(--cg-bd);color:var(--cg-text-2)}
.cg-btn--ghost:hover:not(:disabled){border-color:var(--cg-bd-strong);color:var(--cg-text-1)}
.cg-btn--danger{background:var(--cg-danger);color:#FFF9FC;border-color:var(--cg-danger)}
.cg-btn--danger:hover:not(:disabled){filter:brightness(1.08)}
.cg-btn:focus-visible{outline:2px solid var(--cg-brand);outline-offset:2px}
.cg-icon-btn{
    width:28px;height:28px;border-radius:var(--cg-r-control);padding:0;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    background:var(--cg-surface-card);border:var(--cg-bd-w) solid var(--cg-bd);color:var(--cg-text-2);
    transition:border-color var(--cg-motion-fast) ease,color var(--cg-motion-fast) ease;
}
.cg-icon-btn:hover{border-color:var(--cg-bd-strong);color:var(--cg-text-1)}
.cg-icon-btn:focus-visible{outline:2px solid var(--cg-brand);outline-offset:2px}
.cg-icon-btn .material-symbols-outlined{font-size:16px}

/* ---- Menu dropdown (padrao do indice: 150ms, abre pra baixo, direita) ---- */
.cg-menuwrap{position:relative}
.cg-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:60;min-width:176px;
    display:flex;flex-direction:column;gap:2px;padding:var(--cg-sp-1);
    background:var(--cg-surface-card);border:var(--cg-bd-w) solid var(--cg-bd);
    border-radius:10px;box-shadow:var(--cg-shadow-pop);
    animation:cg-menu-in 150ms ease-out}
.cg-menu[hidden]{display:none}
.cg-menu__item{
    display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
    border:0;border-radius:7px;background:none;cursor:pointer;text-align:left;
    font:500 var(--cg-fs-control)/1.3 var(--cg-font-sans);color:var(--cg-text-1);
    transition:background var(--cg-motion-fast) ease,color var(--cg-motion-fast) ease;
}
.cg-menu__item .material-symbols-outlined{font-size:16px;color:var(--cg-text-3)}
.cg-menu__item:hover,.cg-menu__item:focus-visible{background:var(--cg-surface-muted);outline:none}
.cg-menu__item--danger:hover,.cg-menu__item--danger:focus-visible{background:var(--cg-danger-soft);color:var(--cg-danger)}
.cg-menu__item--danger:hover .material-symbols-outlined,
.cg-menu__item--danger:focus-visible .material-symbols-outlined{color:var(--cg-danger)}
@keyframes cg-menu-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.cg-menu{animation:none}}

/* ---- ThemeToggle (sol/lua; padrao do toggle da pagina Clientes,
   reimplementado p/ o iframe — documento separado do app principal) ---- */
.cg-theme-toggle{
    width:40px;height:40px;border-radius:var(--cg-r-control);padding:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:var(--cg-surface-card);border:var(--cg-bd-w) solid var(--cg-bd);color:var(--cg-text-2);
    transition:border-color var(--cg-motion-fast) ease,color var(--cg-motion-fast) ease;
}
.cg-theme-toggle:hover{border-color:var(--cg-bd-strong);color:var(--cg-text-1)}
.cg-theme-toggle:focus-visible{outline:2px solid var(--cg-brand);outline-offset:2px}
.cg-theme-toggle svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.cg-theme-toggle{transition:none}}