/* ==========================================================================
   OCTOPUS - METRICOOL (item 147, 14/09/2026; repaginado em 14/09/2026)
   Pele do Metricool no painel da diretoria, no mesmo vocabulario da aba
   Respond.io (octopus-respondio.css):
     - Campanhas > Puxar do Metricool (janela com passos, resumo e cartoes)
     - Relatorio Social > caixa Metricool na lateral, faixa de status e bloco
       por rede com numeros e melhores conteudos
     - Vincular marcas (cliente do app x marca do Metricool)
   A base sai das variaveis da pele APEX (--surface, --surface2, --border,
   --text, --muted). Cor de rede e de avatar vem de --h e --s, com tom proprio
   no tema escuro.
   ========================================================================== */

/* ---- janela ---- */
.mc-ov {
  position:fixed; inset:0; z-index:9990; background:rgba(16,24,40,.55);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;
  animation:mcFade .15s ease-out;
}
.mc-modal {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  width:100%; max-width:1080px; box-shadow:0 24px 64px rgba(16,24,40,.28); overflow:hidden;
  display:flex; flex-direction:column; animation:mcSobe .18s ease-out;
}
.mc-modal.estreito { max-width:680px; }
@keyframes mcFade { from { opacity:0; } to { opacity:1; } }
@keyframes mcSobe { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.mc-cab {
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.mc-cab-ic {
  width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; background:rgba(206,160,70,.14); color:#8A6A20;
}
.mc-cab-txt { flex:1; min-width:0; }
.mc-cab-txt h3 { margin:0; font-size:16px; font-weight:700; color:var(--text); }
.mc-cab-txt p { margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45; }
.mc-x {
  border:0; background:none; color:var(--muted); font-size:22px; line-height:1; width:34px; height:34px;
  border-radius:8px; cursor:pointer; flex:0 0 auto;
}
.mc-x:hover { background:var(--surface2); color:var(--text); }
.mc-corpo { padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; }
.mc-pe {
  padding:12px 20px; border-top:1px solid var(--border); background:var(--surface2);
  font-size:12px; color:var(--muted); line-height:1.5;
}

/* ---- passos ---- */
.mc-passos { display:flex; gap:6px; flex-wrap:wrap; }
.mc-passo {
  display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  padding:4px 10px 4px 4px; border-radius:20px; background:var(--surface2); border:1px solid var(--border);
}
.mc-passo b {
  width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; background:var(--surface); border:1px solid var(--border2); color:var(--muted);
}
.mc-passo.on { color:var(--text); border-color:rgba(206,160,70,.55); }
.mc-passo.on b { background:#CEA046; border-color:#CEA046; color:#101828; }
.mc-passo.feito b { background:hsl(145 55% 40%); border-color:hsl(145 55% 40%); color:#fff; }

/* ---- campos ---- */
.mc-painel {
  display:grid; grid-template-columns:minmax(220px,1.3fr) minmax(0,2fr) auto; gap:14px; align-items:start;
  padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface2);
}
.mc-campo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.mc-rot { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.mc-wrap select, .mc-wrap input[type=date], .mc-wrap input[type=search], .mc-wrap input[type=text] {
  width:100%; box-sizing:border-box; min-height:36px; padding:7px 10px; font-size:13px;
  background:var(--surface); border:1px solid var(--border2); border-radius:8px; color:var(--text);
}
.mc-wrap select:focus, .mc-wrap input:focus { outline:none; border-color:#CEA046; box-shadow:0 0 0 3px rgba(206,160,70,.18); }
.mc-linha { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mc-datas { display:none; gap:8px; margin-top:6px; }
.mc-datas.on { display:flex; }
.mc-datas input { flex:1; min-width:0; }

/* ---- chips (filtro e alternancia) ---- */
.mc-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mc-wrap .mc-chip, .mc-side .mc-chip {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1.3; font-weight:500;
  padding:5px 11px; margin:0; border-radius:20px; border:1px solid var(--border2); background:var(--surface);
  color:var(--muted); cursor:pointer; white-space:nowrap; user-select:none; min-height:0; width:auto; box-shadow:none;
  transition:background .12s, color .12s, border-color .12s; position:relative;
}
.mc-wrap .mc-chip:hover, .mc-side .mc-chip:hover { border-color:var(--text); color:var(--text); }
.mc-wrap .mc-chip.on, .mc-side .mc-chip.on { background:var(--text); color:var(--surface); border-color:var(--text); }
.mc-chip input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.mc-chip i { font-style:normal; font-size:10.5px; opacity:.7; }
.mc-chip .mc-bola { width:8px; height:8px; border-radius:50%; background:hsl(var(--h) var(--s) 50%); }

/* ---- botoes ---- */
.mc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 14px; min-height:36px;
  font-size:13px; font-weight:600; border-radius:8px; border:1px solid var(--border2); background:var(--surface);
  color:var(--text); cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s;
}
.mc-btn:hover { border-color:#CEA046; }
.mc-btn:disabled { opacity:.55; cursor:default; }
.mc-btn.pri { background:#CEA046; border-color:#CEA046; color:#101828; }
.mc-btn.pri:hover { background:#B08A38; border-color:#B08A38; }
.mc-btn.ok { background:hsl(145 55% 38%); border-color:hsl(145 55% 34%); color:#fff; }
.mc-btn.ok:hover { background:hsl(145 55% 33%); }
.mc-btn.mini { min-height:30px; padding:0 10px; font-size:12px; }
.mc-btn.ic { padding:0; width:30px; min-height:30px; font-size:14px; }
.mc-link { border:0; background:none; padding:0; color:#8A6A20; font-weight:600; cursor:pointer; font-size:inherit; text-decoration:underline; text-underline-offset:2px; }
.mc-gira {
  display:inline-block; width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  border:2px solid currentColor; border-right-color:transparent; animation:mcGira .7s linear infinite; opacity:.8;
}
@keyframes mcGira { to { transform:rotate(360deg); } }

/* ---- avisos ---- */
.mc-aviso {
  display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:11px 14px; font-size:13px; line-height:1.5;
  background:rgba(206,160,70,.10); border:1px solid rgba(206,160,70,.40); color:var(--text);
}
.mc-aviso.erro { background:rgba(217,45,32,.08); border-color:rgba(217,45,32,.35); }
.mc-aviso.ok   { background:rgba(56,181,106,.09); border-color:rgba(56,181,106,.38); }
.mc-aviso.info { background:var(--surface2); border-color:var(--border); }
.mc-aviso-ic { font-size:16px; line-height:1.3; flex:0 0 auto; display:inline-flex; align-items:center; min-height:20px; }
.mc-aviso-txt { flex:1; min-width:0; }
.mc-aviso-txt b { font-weight:600; }
.mc-aviso-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.mc-aviso .mc-chips { margin-top:6px; }
.mc-muted { color:var(--muted); font-size:12px; }

/* ---- vazio e esqueleto ---- */
.mc-vazio { padding:34px 16px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }
.mc-vazio-ic {
  width:52px; height:52px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--surface2); border:1px solid var(--border);
}
.mc-vazio b { display:block; color:var(--text); font-size:14px; margin-bottom:2px; }
.mc-esq { pointer-events:none; }
.mc-esq i { display:block; height:10px; border-radius:6px; background:var(--surface2); animation:mcPisca 1.2s ease-in-out infinite; }
@keyframes mcPisca { 50% { opacity:.45; } }

/* ---- numeros (resumo e extras) ---- */
.mc-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.mc-kpi { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface); min-width:0; }
.mc-kpi span { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-kpi b { display:block; font-size:18px; font-weight:700; color:var(--text); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.mc-kpi small { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.mc-kpis.mini { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; }
.mc-kpis.mini .mc-kpi { padding:8px 10px; background:var(--surface2); }
.mc-kpis.mini .mc-kpi b { font-size:15px; }

/* ---- selos de rede, status e tipo ---- */
.mc-rede, .mc-pill {
  --h:220; --s:40%;
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; line-height:1.3;
  padding:2px 8px; border-radius:20px; white-space:nowrap;
  background:hsl(var(--h) var(--s) 94%); color:hsl(var(--h) var(--s) 32%); border:1px solid hsl(var(--h) var(--s) 84%);
}
.mc-rede::before { content:''; width:6px; height:6px; border-radius:50%; background:hsl(var(--h) var(--s) 48%); }
.mc-pill.ativa     { --h:145; --s:55%; }
.mc-pill.pausada   { --h:36;  --s:85%; }
.mc-pill.encerrada { --h:220; --s:10%; }
.mc-pill.ligada    { --h:145; --s:55%; }
.mc-pill.neutra    { --h:220; --s:12%; font-weight:500; }

:root[data-theme="dark"] .mc-rede, :root[data-theme="dark"] .mc-pill { background:hsl(var(--h) var(--s) 18%); color:hsl(var(--h) var(--s) 78%); border-color:hsl(var(--h) var(--s) 30%); }
:root[data-theme="dark"] .mc-cab-ic { color:#E0B45C; }
:root[data-theme="dark"] .mc-link { color:#E0B45C; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .mc-rede, :root[data-theme="auto"] .mc-pill { background:hsl(var(--h) var(--s) 18%); color:hsl(var(--h) var(--s) 78%); border-color:hsl(var(--h) var(--s) 30%); }
  :root[data-theme="auto"] .mc-cab-ic, :root[data-theme="auto"] .mc-link { color:#E0B45C; }
}

/* ---- barra de filtro da lista ---- */
.mc-barra { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-block:12px; }
.mc-barra .mc-busca { flex:1; min-width:200px; }
.mc-conta { font-size:12px; color:var(--muted); margin-left:auto; }

/* ---- cartoes de campanha ---- */
.mc-lista { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.mc-camp {
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; padding:14px 16px;
  border-bottom:1px solid var(--border); background:var(--surface); transition:background .12s;
}
.mc-camp:last-child { border-bottom:0; }
.mc-camp:hover { background:var(--surface2); }
.mc-camp.ligada { box-shadow:inset 3px 0 0 hsl(145 55% 42%); }
.mc-camp-topo { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.mc-camp-nome { font-size:14px; font-weight:600; color:var(--text); line-height:1.35; word-break:break-word; }
.mc-camp-sub { font-size:12px; color:var(--muted); margin-top:2px; display:flex; gap:10px; flex-wrap:wrap; }
.mc-nums { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:10px; }
.mc-num span { display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.mc-num b { display:block; font-size:13.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-num small { display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-acao { display:flex; flex-direction:column; gap:8px; justify-content:center; border-left:1px dashed var(--border); padding-left:16px; }
.mc-acao .mc-btn { width:100%; }
.mc-feito { font-size:11.5px; color:hsl(145 50% 36%); display:flex; align-items:center; gap:5px; }

/* ---- vinculos ---- */
.mc-resumo-vinc { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.mc-barra-prog { flex:1; min-width:160px; height:8px; border-radius:8px; background:var(--surface2); border:1px solid var(--border); overflow:hidden; }
.mc-barra-prog i { display:block; height:100%; background:hsl(145 55% 42%); border-radius:8px; transition:width .3s; }
.mc-vinc {
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(200px,260px) 22px; gap:10px; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface);
}
.mc-vinc:last-child { border-bottom:0; }
.mc-vinc:hover { background:var(--surface2); }
.mc-av {
  --h:220; --s:40%;
  width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; background:hsl(var(--h) var(--s) 90%); color:hsl(var(--h) var(--s) 30%); user-select:none;
}
:root[data-theme="dark"] .mc-av { background:hsl(var(--h) var(--s) 26%); color:hsl(var(--h) var(--s) 86%); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .mc-av { background:hsl(var(--h) var(--s) 26%); color:hsl(var(--h) var(--s) 86%); } }
.mc-vinc-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-vinc-redes { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.mc-vinc select { min-height:32px !important; padding:5px 8px !important; font-size:12.5px !important; }
.mc-vinc.ok select { border-color:hsl(145 45% 60%) !important; }
.mc-estado { font-size:14px; text-align:center; color:var(--muted); }
.mc-estado.ok { color:hsl(145 55% 40%); }
.mc-estado .mc-gira { width:12px; height:12px; }
.mc-rolagem { max-height:min(60vh,560px); overflow-y:auto; border:1px solid var(--border); border-radius:10px; }

/* ---- Relatorio Social: caixa na lateral ---- */
.mc-side {
  margin-top:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); padding:12px;
  display:flex; flex-direction:column; gap:10px;
}
.mc-side-cab { display:flex; align-items:center; gap:8px; }
.mc-side-cab b { font-size:13px; color:var(--text); flex:1; }
.mc-side .mc-rot { margin-bottom:-4px; }
.mc-side-ordem { display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:6px; }
.rel-sidebar .mc-side select { width:100%; min-width:0; min-height:32px; font-size:12.5px; padding:5px 8px; }
.rel-sidebar .mc-side label.mc-chip { padding:4px 10px; font-size:11.5px; }
.rel-sidebar .mc-side label.mc-chave { padding:0; }
.mc-chave { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:12.5px; color:var(--text); user-select:none; }
.mc-chave input { position:absolute; opacity:0; width:0; height:0; }
.mc-chave i {
  position:relative; width:34px; height:20px; border-radius:20px; background:var(--border2); flex:0 0 auto; transition:background .15s;
  border:1px solid var(--border2);
}
.mc-chave i::after {
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.25); transition:transform .15s;
}
.mc-chave input:checked + i { background:#CEA046; border-color:#CEA046; }
.mc-chave input:checked + i::after { transform:translateX(14px); }
.mc-chave input:focus-visible + i { box-shadow:0 0 0 3px rgba(206,160,70,.3); }
.mc-seg { display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:3px; margin-bottom:8px; }
.mc-seg button {
  flex:1; border:0; background:none; color:var(--muted); font-size:12px; font-weight:600; padding:5px 8px; border-radius:6px;
  cursor:pointer; min-height:0;
}
.mc-seg button.on { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(16,24,40,.12); }

/* selo do cliente na lista da lateral */
.mc-tag {
  --h:220; --s:10%;
  margin-left:auto; font-size:10px; font-weight:600; padding:1px 7px; border-radius:20px; white-space:nowrap;
  background:hsl(var(--h) var(--s) 94%); color:hsl(var(--h) var(--s) 40%); border:1px solid hsl(var(--h) var(--s) 84%);
}
.mc-tag.ok { --h:145; --s:55%; }
:root[data-theme="dark"] .mc-tag { background:hsl(var(--h) var(--s) 18%); color:hsl(var(--h) var(--s) 78%); border-color:hsl(var(--h) var(--s) 30%); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .mc-tag { background:hsl(var(--h) var(--s) 18%); color:hsl(var(--h) var(--s) 78%); border-color:hsl(var(--h) var(--s) 30%); } }

/* ---- Relatorio Social: faixa de status e bloco por rede ---- */
#rel-mc-aviso { margin-bottom:14px; }
#rel-mc-aviso:empty { display:none; }
.rel-mc-bloco:empty { display:none; }
.rel-mc-bloco {
  margin-top:14px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface);
}
.mc-bloco-cab {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; background:var(--surface2);
  border-bottom:1px solid var(--border); font-size:12px; color:var(--muted);
}
.mc-bloco-cab b { color:var(--text); font-size:12.5px; }
.mc-bloco-cab .mc-linha { margin-left:auto; }
.mc-bloco-corpo { padding:12px; display:flex; flex-direction:column; gap:12px; }
.mc-sec-tit { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.mc-top { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.mc-top-item {
  display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px;
  border-bottom:1px solid var(--border);
}
.mc-top-item:last-child { border-bottom:0; }
.mc-top-item:hover { background:var(--surface2); }
.mc-pos {
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; background:var(--surface2); border:1px solid var(--border); color:var(--muted);
}
.mc-top-item:nth-child(1) .mc-pos { background:#CEA046; border-color:#CEA046; color:#101828; }
.mc-top-txt { min-width:0; }
.mc-top-l1 { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.mc-top-l2 { font-size:12.5px; color:var(--text); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-top-nums { display:flex; gap:14px; align-items:center; }
.mc-top-nums div { text-align:right; }
.mc-top-nums span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.mc-top-nums b { display:block; font-size:12.5px; color:var(--text); font-variant-numeric:tabular-nums; }
.mc-top-nums .forte b { color:#8A6A20; }
:root[data-theme="dark"] .mc-top-nums .forte b { color:#E0B45C; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .mc-top-nums .forte b { color:#E0B45C; } }
.mc-avisos { font-size:12px; color:var(--muted); }
.mc-avisos summary { cursor:pointer; user-select:none; }
.mc-avisos ul { margin:6px 0 0 18px; padding:0; }

/* ---- selo na tabela de Campanhas ---- */
.mc-selo-camp { display:inline-flex; align-items:center; gap:4px; margin-left:6px; vertical-align:middle; }
.mc-selo-camp .mc-pill { font-size:10px; padding:1px 7px; }
.mc-refaz {
  border:1px solid var(--border2); background:var(--surface); color:var(--muted); border-radius:6px; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; padding:0; line-height:1;
}
.mc-refaz:hover { color:var(--text); border-color:#CEA046; }
.mc-refaz:disabled .mc-g { animation:mcGira .7s linear infinite; display:inline-block; }

/* ---- celular ---- */
@media (max-width:860px) {
  .mc-ov { padding:0; }
  .mc-modal { border-radius:0; min-height:100vh; }
  .mc-painel { grid-template-columns:1fr; }
  .mc-camp { grid-template-columns:1fr; }
  .mc-acao { border-left:0; padding-left:0; border-top:1px dashed var(--border); padding-top:10px; }
  .mc-nums { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mc-vinc { grid-template-columns:auto minmax(0,1fr) 22px; }
  .mc-vinc select { grid-column:1 / -1; }
  .mc-top-item { grid-template-columns:28px minmax(0,1fr); }
  .mc-top-nums { grid-column:2; justify-content:flex-start; }
}