.mkt-page {
  display: grid;
  gap: 18px;
}

.mkt-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid #2f9ba3;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.mkt-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2f6f77;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mkt-head h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
}

.mkt-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.mkt-head-side {
  min-width: 180px;
  padding: 14px 16px;
  background: #f4faf9;
  border: 1px solid #d5eceb;
  border-radius: 8px;
}

.mkt-head-side span,
.mkt-head-side small {
  display: block;
  color: #587079;
  font-size: .78rem;
}

.mkt-head-side strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: .95rem;
}

.mkt-alert {
  padding: 10px 14px;
  color: #735300;
  background: #fff7df;
  border: 1px solid #f0dc9e;
  border-radius: 8px;
  font-size: .88rem;
}

.mkt-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.mkt-metric {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 20px rgb(31 41 51 / 5%);
}

.mkt-metric span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mkt-metric strong {
  display: block;
  margin-top: 5px;
  font-size: 1.55rem;
  line-height: 1;
}

.mkt-tools {
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.mkt-search {
  display: grid;
  gap: 6px;
}

.mkt-search span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mkt-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.mkt-search input:focus {
  outline: none;
  background: #fff;
  border-color: #2f9ba3;
  box-shadow: 0 0 0 3px rgb(47 155 163 / 18%);
}

.mkt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mkt-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  color: #244b55;
  background: #eef7f7;
  border: 1px solid #d5eceb;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
}

.mkt-filter span {
  color: #5e7880;
  font-weight: 600;
}

.mkt-filter.is-active {
  color: #fff;
  background: #2f9ba3;
  border-color: #2f9ba3;
}

.mkt-filter.is-active span {
  color: rgb(255 255 255 / 82%);
}

.mkt-visible {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.mkt-folder {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}

.mkt-folder:first-child {
  border-top: none;
  padding-top: 4px;
}

.mkt-folder-head,
.mkt-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.mkt-folder-head h2,
.mkt-list-head h3 {
  margin: 0;
  color: var(--text);
}

.mkt-folder-head h2 {
  font-size: 1.22rem;
}

.mkt-list-head h3 {
  font-size: .98rem;
}

.mkt-folder-head span,
.mkt-list-head span {
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}

.mkt-list {
  margin-top: 18px;
}

.mkt-task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.mkt-task {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 8px 22px rgb(31 41 51 / 6%);
}

.mkt-task-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mkt-cat,
.mkt-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1;
}

.mkt-cat-instagram { color: #7d265d; background: #fde8f4; }
.mkt-cat-redes_sociais { color: #7a4d00; background: #fff0c7; }
.mkt-cat-site { color: #244f86; background: #e7f0fb; }
.mkt-cat-whatsapp { color: #0f6a3d; background: #e1f6eb; }
.mkt-cat-youtube { color: #9e1b1b; background: #fee5e5; }
.mkt-cat-outra { color: #56616e; background: #eef2f6; }
.mkt-cat-facebook { color: #1d4d8f; background: #e3edfb; }
.mkt-cat-trafego_pago { color: #7a3d0a; background: #fdecd8; }

.mkt-status {
  color: #576474;
  background: #eef2f6;
}

.mkt-status-closed,
.mkt-status-done,
.mkt-status-complete,
.mkt-status-concluido {
  color: #0f6a3d;
  background: #e1f6eb;
}

.mkt-task h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.mkt-task-resumo,
.mkt-desc,
.mkt-meta {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.mkt-desc {
  color: #354252;
}

.mkt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mkt-tags span {
  padding: 3px 7px;
  color: #526272;
  background: #f3f6fa;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}

.mkt-materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mkt-shot,
.mkt-file {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  background: #f9fbfd;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.mkt-shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eef4f8;
}

.mkt-shot span,
.mkt-file span {
  display: block;
  min-width: 0;
  flex: 1;
  padding: 7px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}

.mkt-file {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding-left: 8px;
}

.mkt-file strong {
  flex: 0 0 auto;
  min-width: 38px;
  color: #fff;
  background: #526272;
  border-radius: 6px;
  padding: 5px 6px;
  text-align: center;
  font-size: .7rem;
}

.mkt-file-video strong { background: #9e1b1b; }
.mkt-file-pdf strong { background: #b8402b; }
.mkt-file-documento strong { background: #244f86; }

.mkt-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  color: #2f6f77;
  font-size: .84rem;
  font-weight: 800;
}

.mkt-open svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 820px) {
  .mkt-head,
  .mkt-folder-head,
  .mkt-list-head {
    display: grid;
  }

  .mkt-head-side {
    min-width: 0;
  }

  .mkt-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .mkt-head,
  .mkt-tools,
  .mkt-task {
    padding: 14px;
  }

  .mkt-metrics,
  .mkt-task-grid,
  .mkt-materials {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   Galeria de materiais, visualizador e progresso da sincronizacao
   =================================================================== */

/* .mkt-shot e .mkt-file viraram <button> (abrem o visualizador em vez de
   mandar a pessoa para outra aba). Sem este reset herdariam o visual de botao
   do navegador. */
button.mkt-shot,
button.mkt-file {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.mkt-file { display: flex; padding-left: 8px; }

button.mkt-shot:hover,
button.mkt-file:hover { border-color: var(--komgroup); }

.mkt-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.mkt-tabs button {
  border: 0;
  background: none;
  padding: 10px 4px;
  margin-bottom: -1px;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.mkt-tabs button.is-active {
  color: var(--komgroup);
  border-bottom-color: var(--komgroup);
}

/* Progresso: enquanto o cron le o ClickUp, a tela conta o que esta fazendo. */
.mkt-sync {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #eef5fd;
  border: 1px solid #cfe0f4;
  border-radius: 10px;
}

.mkt-sync-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  align-items: baseline;
  font-size: .9rem;
}

.mkt-sync-topo span { color: var(--muted); }

.mkt-sync-bar {
  height: 6px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: #d7e6f7;
  overflow: hidden;
}

.mkt-sync-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--komgroup), var(--accent));
  transition: width .5s ease;
}

.mkt-sync p { margin: 0; color: var(--muted); font-size: .82rem; }

.mkt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 16px;
}

.mkt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.mkt-card:hover {
  box-shadow: 0 10px 24px rgba(20, 30, 45, .10);
  transform: translateY(-2px);
}

.mkt-card > .mkt-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.mkt-card-midia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #eef4f8;
  cursor: zoom-in;
}

.mkt-card-midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mkt-card-video {
  background: linear-gradient(135deg, #1d2b3a, #38506a);
  cursor: pointer;
}

.mkt-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  position: relative;
}

.mkt-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #1d2b3a;
}

.mkt-midia-rotulo {
  position: absolute;
  bottom: 8px;
  right: 10px;
  color: #fff;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}

.mkt-card-doc { background: #f2f5f9; }
.mkt-card-doc-pdf { background: #fdeee9; }
.mkt-card-doc-documento { background: #eaf1fb; }

.mkt-midia-ext {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: #526272;
}

.mkt-card-doc-pdf .mkt-midia-ext { color: #b8402b; }
.mkt-card-doc-documento .mkt-midia-ext { color: #244f86; }

.mkt-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 12px 13px 13px;
}

.mkt-card-body h4 {
  margin: 0;
  font-size: .9rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mkt-card-acoes {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.mkt-btn {
  flex: 1;
  border: 1px solid var(--komgroup);
  background: var(--komgroup);
  color: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.mkt-btn-ghost {
  background: #fff;
  color: var(--komgroup);
}

.mkt-btn:hover { filter: brightness(1.06); }

/* Visualizador */
.mkt-visor {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mkt-visor-fundo {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 30, .78);
}

.mkt-visor-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.mkt-visor-caixa header {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.mkt-visor-caixa header strong { display: block; font-size: .95rem; }
.mkt-visor-caixa header span { display: block; color: var(--muted); font-size: .76rem; }
.mkt-visor-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
.mkt-visor-acoes .mkt-btn { flex: 0 0 auto; }

.mkt-visor-corpo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: #10161d;
  overflow: auto;
}

/* 62vh e nao 78vh porque abaixo da midia fica a ficha e a observacao: a pessoa
   precisa ver o arquivo E escrever sobre ele sem rolar a caixa inteira. */
.mkt-visor-corpo img,
.mkt-visor-corpo video {
  max-width: 100%;
  max-height: 62vh;
  display: block;
}

.mkt-visor-corpo iframe {
  width: 100%;
  height: 62vh;
  border: 0;
  background: #fff;
}

.mkt-vis-sem { padding: 48px 24px; text-align: center; color: #fff; }
.mkt-vis-sem strong { display: block; font-size: 1.6rem; margin-bottom: 8px; }
.mkt-vis-sem p { margin: 0; opacity: .8; font-size: .85rem; }

@media (max-width: 520px) {
  .mkt-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .mkt-visor { padding: 0; }
  .mkt-visor-caixa { border-radius: 0; height: 100%; }
}

.mkt-midia-selo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(16, 22, 29, .82);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* ===================================================================
   Ficha de identificacao e observacao humana
   =================================================================== */

/* Local, arquivo, quem anexou e quando: rotulo e valor em duas colunas para a
   leitura ser em diagonal, nao em bloco de texto. */
.mkt-ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 6px 0 0;
  font-size: .74rem;
  line-height: 1.35;
}

.mkt-ficha dt {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .65rem;
  letter-spacing: .04em;
  padding-top: 1px;
}

.mkt-ficha dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.mkt-ficha-tarefa { color: var(--muted); }
.mkt-ficha-tarefa a { color: var(--komgroup); }

.mkt-obs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.mkt-obs-add {
  width: 100%;
  padding: 7px 10px;
  color: #244b55;
  background: #eef7f7;
  border: 1px dashed #b8dcda;
  border-radius: 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

.mkt-obs-add:hover {
  background: #e2f2f2;
  border-color: #2f9ba3;
}

.mkt-obs-texto {
  position: relative;
  padding: 9px 11px;
  background: #fffaef;
  border: 1px solid #f0e2be;
  border-radius: 8px;
}

.mkt-obs-texto strong {
  display: block;
  color: #8a6d1f;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mkt-obs-texto p {
  margin: 4px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mkt-obs-texto small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .7rem;
}

.mkt-obs-link {
  margin-top: 6px;
  padding: 0;
  color: var(--komgroup);
  background: none;
  border: 0;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.mkt-obs-form label {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.mkt-obs-form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: .82rem;
  line-height: 1.4;
  resize: vertical;
}

.mkt-obs-form textarea:focus {
  outline: none;
  border-color: #2f9ba3;
  box-shadow: 0 0 0 3px rgb(47 155 163 / 18%);
}

.mkt-obs-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mkt-obs-acoes .mkt-btn { flex: 0 0 auto; }

.mkt-obs-aviso {
  color: var(--muted);
  font-size: .74rem;
}

.mkt-obs-form > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .7rem;
}

/* Material ja identificado ganha um ponto na miniatura: da para varrer a
   tarefa inteira com o olho e ver o que ainda falta. */
button.mkt-shot.is-anotado,
button.mkt-file.is-anotado {
  border-color: #e0b93c;
  box-shadow: inset 0 0 0 1px #f2dc9c;
}

.mkt-panel-nota {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.mkt-visor-info {
  flex: 0 0 auto;
  max-height: 30vh;
  padding: 12px 16px 16px;
  overflow: auto;
  background: #fff;
  border-top: 1px solid var(--border-soft);
}

.mkt-visor-info .mkt-obs { border-top-color: var(--border-soft); }

/* ===================================================================
   Numero fixo do anexo (#img1) e referencia a ele dentro da observacao
   =================================================================== */

/* O selo e um <button>: um clique copia "#img1" para colar na observacao. */
.mkt-rotulo {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border: 0;
  border-radius: 5px;
  background: rgba(16, 22, 29, .82);
  color: #fff;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .03em;
  cursor: copy;
}

.mkt-rotulo:hover { background: var(--komgroup); }
.mkt-rotulo.is-copiado { background: #1f7a44; cursor: default; }

/* O selo e irmao do botao da miniatura, nunca filho: botao dentro de botao e
   HTML invalido e o clique de copiar se perderia. */
.mkt-material {
  position: relative;
  min-width: 0;
}

.mkt-rotulo-mini {
  top: 6px;
  right: 6px;
  left: auto;
  z-index: 1;
}

.mkt-rotulo-visor {
  position: static;
  display: inline-block;
  margin-bottom: 4px;
  background: var(--komgroup);
}

/* Referencia escrita na observacao: clicar abre aquele anexo. */
.mkt-ref {
  padding: 1px 6px;
  border: 1px solid #cfe6e5;
  border-radius: 999px;
  background: #eef7f7;
  color: #1d5d63;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.mkt-ref:hover { background: #d9eeee; border-color: #2f9ba3; }

/* Referencia que nao encontra anexo nenhum na tarefa. Aparece marcada de
   proposito: melhor a pessoa ver que o numero nao existe do que confiar nele. */
.mkt-ref.is-orfa {
  background: #fdeeee;
  border-color: #f0c9c9;
  color: #9a3b3b;
  text-decoration: line-through;
  cursor: help;
}

/* A observacao da tarefa fala de todos os anexos; ganha mais peso que a de um
   material solto. */
.mkt-obs-tarefa {
  margin-top: 12px;
  padding-top: 12px;
}

.mkt-obs-form code {
  padding: 1px 4px;
  background: #eef2f5;
  border-radius: 4px;
  font-size: .95em;
}

.mkt-panel-nota code {
  padding: 1px 5px;
  background: #eef2f5;
  border-radius: 4px;
}

/* So aparece quando o filtro esconde algum anexo da tarefa - senao a pessoa
   olha um punhado de miniaturas sem saber que ha mais. */
.mkt-materials-nota {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .76rem;
}

/* ===================================================================
   Caixa de sugestao e acao muda
   =================================================================== */

.mkt-sug {
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.mkt-sug summary {
  color: var(--komgroup);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}

.mkt-sug label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.mkt-sug textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: .84rem;
  line-height: 1.4;
  resize: vertical;
}

.mkt-sug textarea:focus {
  outline: none;
  background: #fff;
  border-color: #2f9ba3;
  box-shadow: 0 0 0 3px rgb(47 155 163 / 18%);
}

.mkt-sug-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.mkt-sug-acoes .mkt-btn { flex: 0 0 auto; }

.mkt-sug-aviso {
  color: var(--muted);
  font-size: .78rem;
}

/* Formato sem leitor no navegador: o lugar do botao fica ocupado por um aviso,
   para a linha de acoes nao mudar de altura de card para card. */
.mkt-btn.is-mudo {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--muted);
  cursor: default;
  font-weight: 500;
}

.mkt-vis-sem .mkt-btn {
  display: inline-block;
  flex: 0 0 auto;
  margin-top: 14px;
  text-decoration: none;
}

/* ===================================================================
   Painel por rede social: visao do dono, so leitura
   =================================================================== */

.mkt-painel-aviso {
  margin: 0 0 4px;
  padding: 10px 14px;
  color: #2f6f77;
  background: #eef7f7;
  border: 1px solid #d5eceb;
  border-radius: 8px;
  font-size: .84rem;
}

.mkt-painel-secao {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.mkt-painel-secao:first-of-type {
  border-top: none;
  padding-top: 6px;
}

.mkt-painel-secao-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mkt-painel-secao-head span:last-child {
  color: var(--muted);
  font-size: .84rem;
}

.mkt-painel-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.mkt-painel-tarefa {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-painel-produto {
  margin: 2px 0 0;
  color: var(--text);
  font-size: .8rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ===================================================================
   Relatorio: lista de resumos por IA, so leitura
   =================================================================== */

.mkt-relatorio-lista {
  display: grid;
  gap: 12px;
}

.mkt-relatorio-item {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
}

.mkt-relatorio-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mkt-relatorio-topo h4 {
  margin: 0;
  font-size: .96rem;
  line-height: 1.3;
}

.mkt-relatorio-topo h4 a {
  color: var(--text);
}

.mkt-relatorio-resumo {
  margin: 0;
  color: var(--text);
  font-size: .86rem;
  line-height: 1.5;
}

.mkt-relatorio-data {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .72rem;
}