/* ===========================================================
   marketing.css — Meta feeds (comments + videos) for the CRM
   Complements reports.css (dashboard/kpi/panel classes are reused).
   =========================================================== */

.mkt-section { margin-top: 1.25rem; }
.mkt-section-head {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .6rem; flex-wrap: wrap;
}
.mkt-section-head h3 { margin: 0; font-size: 1rem; }
.mkt-section-head .mkt-count {
  font-size: .75rem; color: var(--fg-subtle);
  background: var(--bg-subtle, #00000010); padding: 1px 8px; border-radius: 999px;
}
.mkt-section-head .mkt-spacer { flex: 1; }

/* network badge (shared FB/IG pill) */
.mkt-net {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.mkt-net.fb { background: #1877f21a; color: #1877f2; border-color: #1877f255; }
.mkt-net.ig { background: #e1306c1a; color: #e1306c; border-color: #e1306c55; }

/* filter chips */
.mkt-chips { display: inline-flex; gap: .35rem; }
.mkt-chip {
  cursor: pointer; font-size: 12px; font-weight: 600; padding: 3px 11px;
  border-radius: 999px; border: 1px solid var(--border, #d0d0d8);
  background: transparent; color: var(--fg-subtle); transition: .12s;
}
.mkt-chip:hover { border-color: var(--accent); color: var(--accent); }
.mkt-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* month dropdown next to the count chips */
.mkt-select {
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border, #d0d0d8); background: transparent;
  color: var(--fg, inherit); cursor: pointer; transition: .12s; max-width: 150px;
}
.mkt-select:hover { border-color: var(--accent); color: var(--accent); }
.mkt-select:focus { outline: none; border-color: var(--accent); }
.mkt-section-head .mkt-vid-controls { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* ---- comments feed ---- */
.mkt-comments { display: flex; flex-direction: column; gap: .5rem; }
.mkt-comment {
  display: flex; gap: .7rem; padding: .6rem .75rem;
  border: 1px solid var(--border, #e3e3ea); border-radius: 12px;
  background: var(--bg-card, #fff); cursor: pointer; transition: .12s;
  text-decoration: none; color: inherit;
}
.mkt-comment:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 12px #0000000f; }
.mkt-comment .avatar {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px;
}
.mkt-comment .avatar.fb { background: #1877f2; }
.mkt-comment .avatar.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.mkt-comment .c-body { flex: 1; min-width: 0; }
.mkt-comment .c-top { display: flex; align-items: center; gap: .5rem; margin-bottom: 2px; }
.mkt-comment .c-author { font-weight: 600; font-size: .85rem; }
.mkt-comment .c-time { font-size: .72rem; color: var(--fg-subtle); margin-left: auto; white-space: nowrap; }
.mkt-comment .c-text { font-size: .88rem; line-height: 1.35; word-break: break-word; }
.mkt-comment .c-meta { font-size: .72rem; color: var(--fg-subtle); margin-top: 3px; }
.mkt-comment .c-meta .c-post { font-style: italic; }

/* ---- video gallery ---- */
.mkt-videos {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.mkt-video {
  border: 1px solid var(--border, #e3e3ea); border-radius: 14px; overflow: hidden;
  background: var(--bg-card, #fff); cursor: pointer; transition: .14s;
  display: flex; flex-direction: column;
}
.mkt-video:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px #00000014; }
.mkt-video .v-thumb {
  position: relative; aspect-ratio: 9/16; background: #111 center/cover no-repeat;
  display: grid; place-items: center;
}
.mkt-video .v-thumb::after {
  content: "▶"; color: #fff; font-size: 1.6rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: #0007; display: grid; place-items: center;
  backdrop-filter: blur(2px); transition: .14s;
}
.mkt-video:hover .v-thumb::after { background: var(--accent); transform: scale(1.08); }
.mkt-video .v-net { position: absolute; top: 6px; left: 6px; z-index: 2; }
.mkt-video .v-dur {
  position: absolute; bottom: 6px; right: 6px; z-index: 2;
  font-size: 11px; font-weight: 600; color: #fff; background: #000a;
  padding: 1px 6px; border-radius: 6px;
}
.mkt-video .v-body { padding: .5rem .6rem .6rem; }
.mkt-video .v-title { font-size: .8rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-video .v-stats { font-size: .72rem; color: var(--fg-subtle); margin-top: 4px; display: flex; gap: .6rem; }

/* ---- video lightbox modal ---- */
.mkt-modal {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; background: #000d; padding: 1rem;
}
.mkt-modal.open { display: flex; }
.mkt-modal-box {
  position: relative; background: #000; border-radius: 14px; overflow: hidden;
  max-width: 420px; width: 100%; max-height: 92vh; display: flex; flex-direction: column;
}
.mkt-modal-box video, .mkt-modal-box iframe {
  width: 100%; aspect-ratio: 9/16; max-height: 80vh; border: 0; background: #000; display: block;
}
.mkt-modal-foot {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: #111; color: #fff;
}
.mkt-modal-foot .m-title { font-size: .82rem; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-modal-foot a { color: #4ea1ff; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mkt-modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #000a; color: #fff; font-size: 1.1rem; line-height: 1;
}
.mkt-modal-close:hover { background: var(--danger, #e0245e); }

.mkt-feed-empty, .mkt-feed-error { font-size: .85rem; color: var(--fg-subtle); padding: .8rem; text-align: center; }
.mkt-feed-error { color: var(--warn, #c97a00); }

/* ---- animated percentage loader ---- */
.mkt-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem 1rem; min-height: 240px;
}
.mkt-loader-ring { position: relative; width: 120px; height: 120px; }
.mkt-loader-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.mkt-loader-ring .ring-bg {
  fill: none; stroke: var(--border, #e3e3ea); stroke-width: 9;
}
.mkt-loader-ring .ring-fg {
  fill: none; stroke: var(--accent, #2f6df6); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .12s linear;
}
.mkt-loader-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 700; color: var(--accent, #2f6df6);
  font-variant-numeric: tabular-nums;
}
.mkt-loader-label {
  margin: 0; font-size: .9rem; color: var(--fg-subtle);
  letter-spacing: .02em;
}
.mkt-loader-label::after {
  content: ""; display: inline-block; width: 1em; text-align: left;
  animation: mkt-dots 1.2s steps(4, end) infinite;
}
@keyframes mkt-dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }

/* Comentarios en anuncios (dark posts) — leads que no salen en el feed orgánico */
.mkt-net.ad { background: #7c3aed1a; color: #7c3aed; border-color: #7c3aed55; }
.mkt-comment .avatar.ad { background: #7c3aed; }
.mkt-lead-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: #ef44441f; color: #ef4444; border: 1px solid #ef444455;
}
.mkt-comment.is-lead { border-left: 3px solid #ef4444; background: #ef44440a; }