/* ═══════════════════════════════════════════════════
   NÍVEL 2 — O ESPAÇO DO CLIENTE
   ═══════════════════════════════════════════════════ */
#clientWorkspace { padding: 20px 28px 0; background: var(--bg); }

.cw-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px;
  flex-wrap: wrap;
}
.cw-crumb-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 3px 0;
  font-family: inherit; font-size: 12.5px; color: var(--text-secondary);
  transition: color var(--transition);
}
.cw-crumb-link:hover { color: var(--brand); }
.cw-crumb-sep { color: var(--border-strong); }
.cw-crumb-current { font-weight: 600; color: var(--brand); }

.cw-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cw-header-body {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; flex-wrap: wrap;
}
.cw-avatar-wrap { position: relative; flex-shrink: 0; }
.cw-avatar {
  width: 78px; height: 78px; border-radius: 20px; flex-shrink: 0;
  background: var(--brand-faint); color: var(--brand);
  border: 4px solid var(--surface); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 25px; font-weight: 600; overflow: hidden;
  padding: 0; font-family: inherit; cursor: pointer;
  position: relative; transition: var(--transition);
}
.cw-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* "Trocar foto" por cima das iniciais, ao passar o mouse. A legenda só cabe
   no tamanho grande; no celular fica só o ícone de câmera. */
.cw-avatar::after {
  content: 'Trocar imagem';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; text-align: center;
  font-size: 10.5px; font-weight: 600; line-height: 1.2;
  color: #fff; background: rgba(43, 43, 43, 0.55);
  opacity: 0; transition: var(--transition);
}
.cw-avatar:hover::after,
.cw-avatar:focus-visible::after { opacity: 1; }
.cw-avatar.is-busy { pointer-events: none; }
.cw-avatar.is-busy::after { content: 'Enviando…'; opacity: 1; }

/* O × de remover: só aparece quando existe foto (a classe entra pelo nav.js)
   e só ao passar o mouse pelo avatar. */
.cw-avatar-del {
  position: absolute; top: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  opacity: 0; transition: var(--transition);
}
.cw-avatar-wrap.has-photo .cw-avatar-del { display: flex; }
.cw-avatar-wrap.has-photo:hover .cw-avatar-del,
.cw-avatar-del:focus-visible { opacity: 1; }
.cw-avatar-del:hover { color: var(--error); border-color: currentColor; }

/* Quem não é da agência não troca foto nenhuma — e o gerente também não,
   enquanto estiver espiando pelos olhos do cliente ("Ver como cliente").
   Nos dois casos o avatar volta a ser só um enfeite. */
.role-client .cw-avatar,
.mode-client .cw-avatar { cursor: default; pointer-events: none; }
.role-client .cw-avatar::after,
.role-client .cw-avatar-del,
.mode-client .cw-avatar::after,
.mode-client .cw-avatar-del { display: none !important; }

.cw-ident { flex: 1; min-width: 200px; padding-bottom: 2px; }
.cw-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 4px;
}
.cw-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cw-name {
  font-size: 27px; font-weight: 600; letter-spacing: -0.4px;
  color: var(--text-primary); line-height: 1.15;
}
.cw-badge {
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--success-bg); color: var(--success);
}
.cw-meta { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-meta-item { font-size: 13px; color: var(--text-secondary); }
.cw-meta-item.cw-meta-empty { color: var(--text-muted); font-style: italic; }
.cw-meta-sep { color: var(--border-strong); }

.cw-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.cw-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cw-icon-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: var(--transition);
}
.cw-icon-btn:hover { border-color: var(--brand-light); color: var(--brand); }

/* logo da agência: só existe visualmente no modo cliente, no lugar da
   impressora (que é ferramenta de gerente). Mesmo padrão visual do avatar
   do cliente (div + background-image, com iniciais como reserva). */
.cw-agency-logo {
  display: none; position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  background-color: var(--brand-faint); background-position: center; background-size: cover; background-repeat: no-repeat;
  align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--brand);
}
.mode-client .cw-icon-btn   { display: none; }
.mode-client .cw-agency-logo { display: flex; }

/* botão do link do cliente: com rótulo, porque ícone de corrente sozinho
   não diz a ninguém o que vai acontecer */
.cw-link-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.cw-link-btn:hover { border-color: var(--brand-light); color: var(--brand); }
.cw-link-btn.is-ok { border-color: var(--success); color: var(--success); background: var(--success-bg); }

/* "Mais ações" do celular: no computador não existe (todos os botões cabem);
   no bloco mobile lá embaixo ele aparece e os secundários se recolhem.
   Vem DEPOIS das regras de .cw-link-btn de propósito: mesma especificidade,
   a última vence — é o que o mantém escondido no desktop. */
.cw-more-btn { display: none; }
.mode-client .cw-more-btn { display: none; }

/* cards das seções do cliente */
/* a faixa rola pro lado, então ela precisa de uma folga por fora dos cards:
   sem isso a caixa da rolagem corta a sombra, o contorno arredondado e a
   barrinha de rolagem fica por cima da base dos cards. A margem negativa
   devolve essa folga, deixando os cards no mesmo lugar de antes. */
.cw-tabs {
  display: flex; gap: 10px;
  margin: 10px -8px -4px;
  padding: 8px 8px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  scroll-padding-left: 8px;
}
/* ── Avatar de gente: iniciais por baixo, foto por cima ──
   Ver `avatarHTML()` em identity.js. As iniciais ficam de FUNDO e a foto
   por cima; quando ela falha, o `onerror` a remove e o que estava atrás
   aparece. Sem esta sobreposição, remover a imagem deixaria um quadrado
   vazio — e o objetivo é justamente nunca haver um buraco. */
/* ── Avatar de gente (ver `avatarHTML()` em identity.js) ──
   SEM posicionamento, de propósito. A primeira versão empilhava as duas
   camadas com `position: absolute; inset: 0` nas iniciais — e no avatar
   da equipe do dashboard, cuja caixa não estava marcada como âncora, o
   `inset: 0` se prendeu à TELA e virou um retângulo invisível de
   1370×900 que engolia todo clique do dashboard (08/08/2026).

   Aqui a foto vem primeiro no HTML e as iniciais depois; o seletor de
   IRMÃO tira as iniciais do caminho enquanto a foto existir. Quando o
   `onerror` remove a foto, a regra deixa de valer sozinha e as iniciais
   reaparecem — centralizadas pelo flex que cada caixa já tem.
   Nenhuma caixa precisa saber de nada. */
.av-ini { font-weight: 600; line-height: 1; }
.av-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-foto ~ .av-ini { display: none; }

.cw-tab {
  position: relative;
  /* `flex: 1` reparte a linha entre as abas — o que é bom com sete ou
     oito delas (~200px cada) e vira outdoor quando algumas somem: com
     Planejamento desligado sobram QUATRO, e cada botão passava de 400px
     para exibir uma palavra. O teto trava isso sem mudar nada no caso
     normal (200px já cabe folgado abaixo dele); o espaço que sobra fica
     em branco, que é composição, não defeito. */
  flex: 1 1 0; min-width: 118px; max-width: 240px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: left;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
/* notificação de quantas publicações esperam aprovação (Conteúdos) — mesmo
   estilo do coraçãozinho do cartão de cliente (cc-alert-count, home.js). */
.cw-tab-badge {
  position: absolute; top: -6px; right: -6px; box-sizing: border-box;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--error); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  border-radius: 20px; border: 2px solid var(--bg);
}
.cw-tab:hover { border-color: var(--brand-light); color: var(--brand); transform: translateY(-1px); }
.cw-tab-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-faint); color: var(--brand);
}
.cw-tab-name { font-size: 13.5px; font-weight: 600; }
.cw-tab.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--shadow);
}
.cw-tab.active .cw-tab-icon { background: rgba(255,255,255,0.18); color: #fff; }

@media (max-width: 768px) {
  .agency-view { left: 0; }
  .agency-inner { padding: 28px 18px 56px; }
  .agency-title { font-size: 26px; }
  #clientWorkspace { padding: 16px 16px 0; }
  .cw-header-body { padding: 18px 16px; position: relative; }
  .cw-avatar { width: 64px; height: 64px; border-radius: 16px; font-size: 21px; }
  /* no celular a logo vira um quadrado no canto direito, do mesmo tamanho
     da foto do cliente (canto esquerdo) — pedido do dono olhando o print
     do cabeçalho no celular. */
  .mode-client .cw-agency-logo {
    position: absolute; top: 18px; right: 16px;
    width: 88px; height: 88px; border-radius: 20px; font-size: 26px;
  }
  /* no celular não há "passar o mouse": a camerazinha fica sempre visível,
     mas num CANTINHO — cobrindo a foto inteira com véu escuro, o avatar
     parecia quebrado (achado do pente-fino mobile de 14/08) */
  .cw-avatar::after {
    content: '📷'; font-size: 11px; opacity: 1;
    inset: auto -2px -2px auto; width: 24px; height: 24px;
    border-radius: 50%; background: rgba(18, 19, 26, 0.6);
  }
  .cw-avatar.is-busy::after { content: '…'; font-size: 14px; }
  .cw-avatar-wrap.has-photo .cw-avatar-del { opacity: 1; }
  .cw-name { font-size: 22px; }

  /* no celular o cabeçalho empilha: identidade em cima, ações embaixo,
     ocupando a largura toda — sem isso a tela ganha rolagem lateral */
  .cw-ident { min-width: 0; flex: 1 1 100%; }
  .cw-meta-item { overflow-wrap: anywhere; }
  .cw-actions { align-items: stretch; width: 100%; }
  .cw-action-row { justify-content: flex-start; }
  .mode-group { flex: 1 1 100%; }
  .mode-btn { flex: 1; }
  .cw-link-btn { flex: 1 1 auto; justify-content: center; }
  /* O cabeçalho do cliente comia uma tela inteira: 4 botões empilhados
     antes de qualquer conteúdo. Os secundários se recolhem atrás do
     "Mais ações"; o toggle Editar/Ver como cliente fica sempre à vista.
     O :not() poupa o próprio "Mais ações" (ele também é .cw-link-btn);
     o body:not(.mode-client) impede a regra de reexibir a impressora
     na frente do cliente (.mode-client a esconde com menos peso). */
  .cw-more-btn { display: flex; flex: 1 1 auto; justify-content: center; }
  .cw-action-row .cw-link-btn:not(.cw-more-btn), .cw-action-row .cw-icon-btn { display: none; }
  .cw-action-row.acoes-abertas .cw-link-btn:not(.cw-more-btn) { display: flex; }
  body:not(.mode-client) .cw-action-row.acoes-abertas .cw-icon-btn { display: flex; }
  .cw-action-row.acoes-abertas .cw-more-btn span { transform: rotate(180deg); }
  .cw-more-btn span { transition: var(--transition); }
  .cw-tab { flex: 0 0 auto; min-width: 92px; }
  /* a barra de rolagem cinza embaixo da régua destoava; a rolagem continua
     (dedo e a rolagem automática do setTab), só o trilho some */
  .cw-tabs { scrollbar-width: none; }
  .cw-tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════
   CONTEÚDOS — planejamento (Tema/Conteúdo/Mídia/Legenda)
   ═══════════════════════════════════════════════════ */
#conteudosSection { display: none; }

/* O cliente enxerga Conteúdos, mas só pra VER e aprovar — nunca criar,
   editar, apagar ou reordenar (isso é só da agência). */
.mode-client #conteudosAddBtn,
/* configurar as etapas é decisão da AGÊNCIA — o cliente não escolhe o que
   vai aprovar. O banco também recusa (jp_etapas não está na lista de
   chaves que o link pode gravar, ver set_client_state); aqui é a tela. */
.mode-client #conteudosEtapasBtn,
.mode-client .ccg-drag-handle { display: none !important; }
.mode-client .conteudo-card { cursor: pointer; }

/* ── grade de cards ──
   3 por linha de propósito (como o grid do Instagram) pra já dar uma noção
   de feed enquanto planeja; a Prévia do feed (.igfeed-*) leva isso ao pé da
   letra, sem status/tema, só as mídias. Cartão pequeno e liso de propósito
   (pedido dele 29/07: "painel mais limpo e minimalista") — colunas com teto
   de largura em vez de esticar pelo painel largo, sem lift/sombra no hover.
   Prefixo `ccg-` (Conteúdo-Card-Grid) é de propósito DIFERENTE do `cc-*` do
   `.client-card` (cartão de cliente, home.js) — reaproveitar o mesmo prefixo
   foi um bug meu (colidia padding/estilo entre os dois), corrigido 29/07. */
.notes-toolbar-actions { display: flex; align-items: center; gap: 8px; }

/* abas Publicações/Reels/Stories — Story fica de fora da grade principal */
.ccg-tabs { display: flex; justify-content: center; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.ccg-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 2px; background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--fonte); font-size: 13px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: color var(--transition), border-color var(--transition);
}
.ccg-tab:hover { color: var(--text-primary); }
.ccg-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.conteudo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px)); /* 200px + 50% */
  gap: 14px;
  justify-content: center; /* centraliza a grade quando sobra espaço no painel largo */
}
/* Mobile: sempre 3 por linha (igual Instagram) — colunas fluidas em vez do
   teto fixo em px, senão 3×300px não cabe na tela; o 3:4 vem do .ccg-thumb. */
@media (max-width: 768px) {
  .conteudo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

.conteudo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
  transition: border-color var(--transition);
}
.conteudo-card:hover { border-color: var(--brand-light); }
.conteudo-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.conteudo-card.is-dragover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

/* Publicação de outro colaborador: mostra a capa (não abre buraco na
   noção de feed da grade) + de quem é — sem tema/legenda/status
   (ver conteudos.js#buildConteudoCard). */
.conteudo-card.cc-bloqueado { cursor: default; }
.conteudo-card.cc-bloqueado:hover { border-color: var(--border); }
.ccg-bloqueado-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 8px; font-size: 10.5px; font-weight: 600;
  color: #fff; background: rgba(43,43,43,0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ccg-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.ccg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ccg-thumb-empty { font-size: 10.5px; color: var(--text-muted); }
.ccg-format-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 20px;
  background: rgba(43,43,43,0.5); color: #fff;
}
.ccg-drag-handle {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 19px; height: 19px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #fff;
  background: rgba(43,43,43,0.5);
  opacity: 0; transition: opacity var(--transition);
}
.conteudo-card:hover .ccg-drag-handle { opacity: 1; }

/* ── alfinete do card (fixar no topo do feed, até 3 — como no Instagram) ──
   Fixada, ele fica ACESO e sempre visível: é estado, não ação escondida.
   Não fixada, aparece ao passar o mouse — e SEMPRE no celular, onde hover
   não existe (regra do @media lá embaixo). `is-off` = os 3 já foram usados:
   continua à vista, apagado, e o title diz como liberar. `is-selo` é o que o
   cliente vê — mostra que está fixada, sem clique (quem decide é a agência). */
.ccg-pin {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(43,43,43,0.5);
  cursor: pointer; opacity: 0; transition: opacity var(--transition), background var(--transition);
}
.conteudo-card:hover .ccg-pin { opacity: 1; }
.ccg-pin:hover { background: rgba(43,43,43,0.78); }
.ccg-pin.is-on { opacity: 1; background: var(--brand); }
.ccg-pin.is-on:hover { background: var(--brand); filter: brightness(1.08); }
.ccg-pin.is-off:hover { background: rgba(43,43,43,0.5); cursor: not-allowed; }
.ccg-pin.is-selo { cursor: default; }
.ccg-pin.is-selo:hover { background: var(--brand); }

/* Celular: sem mouse não há hover, então o alfinete nunca apareceria. */
@media (max-width: 768px) {
  .ccg-pin { opacity: 1; }
}

.ccg-body { padding: 8px 10px 11px; }
.ccg-body-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.ccg-status {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 20px;
}
.ccg-status-criando      { background: var(--bg); color: var(--text-muted); }
.ccg-status-em_aprovacao { background: var(--warning-bg); color: var(--warning); }
.ccg-status-aprovada     { background: var(--success-bg); color: var(--success); }
.ccg-status-agendada     { background: var(--et-agendados-bg); color: var(--et-agendados); }
.ccg-status-postada      { background: var(--brand-faint); color: var(--brand); }

/* Aviso de atenção no card: pedido de alteração (precisa de ação) vence
   aprovação (só informativo) — ver conteudoComentariosPendentes, conteudos.js */
.ccg-alert {
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ccg-alert-comentario { background: var(--stories-bg); color: var(--stories); }
.ccg-alert-aprovado    { background: var(--success-bg); color: var(--success); }
.ccg-tema {
  font-size: 12.5px; color: var(--text-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── editor grande (mockup + sub-abas) ── */
/* (o editor de publicação deixou de ser modal — virou a página .pub-page,
   no fim deste arquivo; a prévia .ig-mock e as peças de mídia continuam) */

/* seletor de proporção — só pra Estático/Carrossel (atualizarMockup esconde
   pra Reels/Story, que usam o quadro vertical cheio) */
.ig-ratio-picker { display: flex; gap: 6px; margin-bottom: 10px; }
.ig-ratio-btn {
  flex: 1; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-secondary); font-family: var(--fonte);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--transition);
}
.ig-ratio-btn:hover { border-color: var(--brand-light); color: var(--brand); }
.ig-ratio-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── dia/horário que a publicação vai ao ar (etapa Agendamento — só agência,
   ver .pub-page.is-readonly) ── */
.ce-schedule-row { display: flex; gap: 8px; max-width: 420px; }
.ce-schedule-row input {
  flex: 1; font-family: var(--fonte); font-size: 13px;
  padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary);
}
.ce-schedule-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* Espelho só-leitura, só pra cliente (agência já vê/mexe em #ceSchedule
   acima — os dois nunca aparecem juntos, ver .pub-page.is-readonly). */
.ce-schedule-display { display: none; }
.pub-page.is-readonly .ce-schedule-display:not(:empty) { display: block; }
.ce-schedule-display label { font-size: 11.5px; color: var(--text-muted); display: block; margin-bottom: 6px; }
.ce-schedule-display-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.ig-mock {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.ig-mock-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.ig-mock-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--brand-faint) center/cover no-repeat;
  color: var(--brand); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ig-mock-headtext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ig-mock-handle { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ig-mock-sub { font-size: 10.5px; color: var(--text-muted); }
.ig-mock-dots { color: var(--text-muted); font-size: 14px; }

.ig-mock-midia {
  position: relative;
  aspect-ratio: 1 / 1; /* fallback — .ig-ratio-* abaixo manda de verdade */
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ig-mock-midia.ig-ratio-1-1 { aspect-ratio: 1 / 1; }
.ig-mock-midia.ig-ratio-4-5 { aspect-ratio: 4 / 5; }
.ig-mock-midia.ig-ratio-3-4 { aspect-ratio: 3 / 4; }
.ig-mock-midia img, .ig-mock-midia video { width: 100%; height: 100%; object-fit: cover; }
.ig-mock-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 0 24px;
}
.ig-mock-empty-icon {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ig-mock-empty small { color: var(--text-muted); font-size: 11px; }

/* ── navegação entre mídias (carrossel/story com mais de 1 arquivo) ── */
.ig-nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.85); color: var(--text-primary); font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3;
}
.ig-nav-arrow:disabled { opacity: 0.35; cursor: default; }
.ig-nav-prev { left: 8px; }
.ig-nav-next { right: 8px; }
.ig-nav-counter {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px;
}
.ig-nav-dots { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 4px; }
.ig-nav-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; }
.ig-nav-dot.active { background: #fff; }

/* ── Reels/Story: quadro vertical cheio, tudo desenhado por CIMA da mídia ── */
.ig-mock-vertical {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
}
.ig-vert-midia { position: absolute; inset: 0; }
.ig-vert-midia img, .ig-vert-midia video { width: 100%; height: 100%; object-fit: cover; }

.ig-vert-head {
  position: absolute; top: 10px; left: 10px; right: 44px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
}
.ig-mock-avatar.sm { width: 24px; height: 24px; font-size: 10px; border: 1.5px solid #fff; }
.ig-mock-avatar.xs { width: 26px; height: 26px; font-size: 10px; border: 2px solid #fff; margin-bottom: 2px; }
.ig-mock-handle.light, .ig-mock-sub.light { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.ig-mock-sub.light { font-size: 10.5px; opacity: 0.9; }

.ig-vert-icons {
  position: absolute; right: 10px; bottom: 74px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: #fff; font-size: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

.ig-vert-caption {
  position: absolute; left: 10px; right: 56px; bottom: 14px; z-index: 2;
  color: #fff; font-size: 12px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.ig-story-progress { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; }
.ig-story-seg { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.35); }
.ig-story-seg.done { background: #fff; }
.ig-story-seg.active { background: rgba(255,255,255,0.75); }
.ig-story-reply {
  border: 1px solid rgba(255,255,255,0.6); border-radius: 20px;
  padding: 8px 14px; font-size: 12px; color: #fff; width: fit-content;
}

.ig-mock-actions { display: flex; gap: 12px; padding: 10px 12px 0; font-size: 17px; color: var(--text-primary); }
.ig-mock-save { margin-left: auto; }
.ig-mock-likes { padding: 8px 12px 0; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ig-mock-legenda { padding: 4px 12px 14px; font-size: 12.5px; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }

/* ── sub-abas do painel direito ── */
/* (as sub-abas .ce-tab viraram o fluxo de etapas .pub-steps — fim do arquivo) */
.ce-fr-label { font-size: 11px; color: var(--text-muted); }
.ce-fr-edit {
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  margin-left: auto; transition: all var(--transition);
}
.ce-fr-edit:hover { border-color: var(--brand-light); color: var(--brand); }

/* ── editor de texto simples (Conteúdo) ── */
.rte-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.rte-toolbar button {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-primary); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--transition);
}
.rte-toolbar button:hover { border-color: var(--brand-light); color: var(--brand); }
.rte-emoji {
  display: none; flex-wrap: wrap; gap: 4px; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: 6px;
}
.rte-emoji.open { display: flex; }
.rte-emoji button { border: none; background: none; font-size: 17px; cursor: pointer; padding: 2px 4px; }
.rte-box {
  min-height: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-size: 13px; line-height: 1.6; color: var(--text-primary); outline: none;
}
.rte-box:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); background: var(--surface); }
.rte-box:empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* ── mídia (arrastar e soltar) ── */
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 32px 20px; text-align: center; cursor: pointer; transition: all var(--transition);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand-light); background: var(--brand-faint); }
.dropzone-icon { font-size: 26px; margin-bottom: 8px; }
.dropzone-text { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.dropzone-hint { font-size: 11px; color: var(--text-muted); }

.ce-midia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; }
.ce-midia-thumb {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg); cursor: grab; transition: opacity var(--transition), box-shadow var(--transition);
}
.ce-midia-thumb img, .ce-midia-thumb video { width: 100%; height: 100%; object-fit: cover; }
.ce-midia-thumb.is-dragging { opacity: 0.4; cursor: grabbing; }
.ce-midia-thumb.is-dragover { box-shadow: 0 0 0 3px var(--brand-ring); }
.ce-midia-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(43,43,43,0.6); color: #fff; font-size: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── barra de progresso de upload (mídia e capa do Reel) ── */
.ce-midia-thumb.ce-midia-uploading { cursor: default; }
.ce-midia-thumb.ce-midia-uploading img,
.ce-midia-thumb.ce-midia-uploading video { filter: brightness(0.6); }
.ce-upload-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 8px; text-align: center;
}
.ce-upload-bar {
  width: 80%; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.35); overflow: hidden;
}
.ce-upload-bar-fill {
  height: 100%; background: var(--brand-light, #fff); border-radius: 4px;
  transition: width 0.15s linear;
}
.ce-upload-pct { font-size: 10.5px; font-weight: 600; color: #fff; }
.ce-upload-overlay.ce-upload-erro {
  background: rgba(194,65,65,0.85);
}
.ce-upload-overlay.ce-upload-erro span {
  font-size: 10.5px; color: #fff; line-height: 1.3;
}
.ce-upload-overlay.ce-upload-erro .ce-midia-del {
  position: static; background: rgba(255,255,255,0.25);
}

/* ── modo cliente: só ver (a página abre travada) ──
   Ações de edição somem via CSS; readOnly/contentEditable quem trava é o JS
   (aplicarModoLeituraConteudo, em conteudos.js). */
.pub-page.is-readonly .rte-toolbar,
.pub-page.is-readonly .dropzone,
.pub-page.is-readonly .ce-fr-edit,
.pub-page.is-readonly .ce-midia-del,
.pub-page.is-readonly .pub-ia-bar,
.pub-page.is-readonly .pub-ref-add,
.pub-page.is-readonly .pub-ref-del,
.pub-page.is-readonly #igRatioPicker,
.pub-page.is-readonly #ceSchedule,
.pub-page.is-readonly #ceBtnSalvar { display: none !important; }
.pub-page.is-readonly textarea:read-only,
.pub-page.is-readonly .rte-box[contenteditable="false"] { background: var(--bg); cursor: default; }

/* ── aprovação por seção (cartões da lateral da página) ── */
.ce-approve-btn { width: 100%; margin-bottom: 4px; }
.ce-approve-hint { font-size: 12.5px; color: var(--text-muted); }
.ce-approve-ok {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--success);
}
/* a data da aprovação acompanha o ✓ sem competir com ele */
.ce-approve-quando { font-weight: 500; color: var(--text-muted); }
/* ── histórico de mensagens (chat) por seção ── */
.ce-chat-history {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.ce-chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.ce-chat-msg.ce-chat-cliente { align-self: flex-start; }
.ce-chat-msg.ce-chat-agencia { align-self: flex-end; align-items: flex-end; }
.ce-chat-bubble {
  padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ce-chat-cliente .ce-chat-bubble { background: var(--bg); color: var(--text-primary); border-bottom-left-radius: 4px; }
.ce-chat-agencia .ce-chat-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ce-chat-data { font-size: 10px; color: var(--text-muted); margin-top: 2px; padding: 0 4px; }

.pub-chat-box { margin-top: 12px; }
.pub-chat-box textarea {
  width: 100%; resize: vertical; font-family: var(--fonte); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary);
}
.ce-chat-autor { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; padding: 0 4px; }
.ce-comment-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ce-comment-status { font-size: 12px; font-weight: 600; color: var(--success); }

/* ── capa do Reel (campo condicional dentro de Mídia) ── */
.ce-capa-field { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--border); }
.ce-capa-dropzone { padding: 20px; }
.ce-capa-field .ce-midia-grid { grid-template-columns: 120px; }

/* ── modal Formato e Redes ── */
.fr-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 18px 0 10px;
}
.fr-section-label:first-of-type { margin-top: 4px; }
.fr-radio-list, .fr-check-list { display: flex; flex-direction: column; gap: 8px; }
.fr-radio, .fr-check {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
.fr-radio:has(input:checked), .fr-check:has(input:checked) {
  border-color: var(--brand); background: var(--brand-faint);
}
.fr-radio span { display: flex; flex-direction: column; }
.fr-radio small { color: var(--text-muted); font-size: 11.5px; }


/* ── PRÉVIA DO FEED — mockup completo de perfil do Instagram ──
   Chrome decorativo (status bar, destaques, botões de ação, abas, nav de
   baixo) é só pra parecer o app de verdade — não tem dado real por trás.
   Nome/foto/handle/segmento e o grid usam o cliente e os conteúdos reais. */
.igp-header-actions { display: flex; align-items: center; gap: 8px; }
.igp-download-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; }

.igfeed-modal { max-width: 400px; padding: 20px; }
.igp-phone {
  max-width: 340px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; color: #262626;
  font-family: var(--fonte);
}

/* barra de status do celular — só moldura */
.igp-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 2px; font-size: 12px; font-weight: 600;
}
.igp-status-icons { display: flex; align-items: center; gap: 4px; }

/* topo: voltar / @handle / sino + menu — só moldura, exceto o handle */
.igp-topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; font-size: 14px;
}
.igp-back { font-size: 22px; width: 24px; }
.igp-topnav-name { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.igp-topnav-icons { display: flex; align-items: center; gap: 14px; }

.igp-profile { display: flex; align-items: center; gap: 22px; padding: 8px 16px 0; }
.igp-avatar {
  width: 78px; height: 78px; border-radius: 50%; flex: none;
  background: var(--brand-faint) center/cover no-repeat;
  color: var(--brand); font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.igp-stats { flex: 1; display: flex; }
.igp-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.igp-stat strong { font-size: 16px; font-weight: 700; }
.igp-stat span { font-size: 12px; color: #262626; }

.igp-identity { padding: 10px 16px 0; }
.igp-name { font-size: 13.5px; font-weight: 700; }
.igp-sub { font-size: 12.5px; color: #8e8e8e; margin-top: 1px; }
.igp-bio { font-size: 12.5px; line-height: 1.4; margin-top: 4px; white-space: pre-line; }
.igp-handle-row { font-size: 12.5px; color: #8e8e8e; margin-top: 4px; }

.igp-actions { display: flex; align-items: center; gap: 6px; padding: 10px 16px; }
.igp-action-chip {
  flex: 1; text-align: center; padding: 6px 0; border-radius: 8px;
  background: #efefef; font-size: 12.5px; font-weight: 600;
}
.igp-action-icon {
  width: 30px; height: 30px; border-radius: 8px; background: #efefef; flex: none;
  display: flex; align-items: center; justify-content: center;
}

/* destaques — 5 bolinhas decorativas, sem dado (o app não tem essa feature) */
.igp-highlights { display: flex; gap: 16px; padding: 14px 16px 10px; overflow: hidden; }
.igp-highlight {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  border: 1px solid #dbdbdb; background: #fafafa;
}

.igp-tabs { display: flex; border-top: 1px solid #dbdbdb; }
.igp-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 0; color: #8e8e8e; border-bottom: 1px solid transparent;
  background: none; border-left: none; border-right: none; border-top: none; cursor: default;
}
button.igp-tab { cursor: pointer; }
.igp-tab.active { color: #262626; border-bottom-color: #262626; }

/* grade do feed — 3 colunas, mídia em 3:4 (retrato), gapless como o Instagram real */
.igfeed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.igfeed-tile {
  position: relative; aspect-ratio: 3/4; background: var(--bg);
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.igfeed-tile img, .igfeed-tile video { width: 100%; height: 100%; object-fit: cover; }
.igfeed-tile-empty { font-size: 9.5px; color: var(--text-muted); text-align: center; padding: 0 6px; }
.igfeed-tile-icon {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* alfinete das fixadas — canto ESQUERDO pra não brigar com o ▶/⧉ do formato,
   que fica no direito. Igual ao Instagram: o pin é branco sobre a foto. */
.igfeed-tile-pin {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  display: flex; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.65));
}

/* nav de baixo do celular — só moldura */
.igp-bottomnav {
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 12px; border-top: 1px solid #dbdbdb; color: #262626;
}

/* ══════════════════════════════════════════════════════════════════
   ABA MARCA — dossiê da marca do cliente (marca.js)
   ══════════════════════════════════════════════════════════════════ */
/* mesma caixa das outras abas (.kanban-wrap/.reunioes-wrap): sem isso os
   cards encostavam nas bordas da tela */
.marca-wrap { padding: 4px 28px 28px; max-width: 1860px; margin: 0 auto; }

/* barra de progresso do dossiê + copiar tudo */
#marcaToolbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.marca-progresso { flex: 1; min-width: 240px; }
.marca-progresso-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px;
}
.marca-progresso-num { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.marca-progresso-pct { font-size: 12px; font-weight: 600; color: var(--brand); }
.marca-progresso-bar {
  height: 6px; border-radius: 999px; background: var(--border); overflow: hidden;
}
.marca-progresso-fill {
  height: 100%; border-radius: 999px; background: var(--grad-brand);
  transition: width var(--transition);
}
.marca-progresso-falta { margin-top: 7px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.marca-progresso-falta.is-ok { color: var(--success); }
.marca-copiar-tudo {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.marca-copiar-tudo:hover { border-color: var(--brand); color: var(--brand); }
.marca-copiar-tudo.is-ok { border-color: var(--success); color: var(--success); }

/* grade: auto-fill em vez de 2 colunas fixas — 3 blocos curtos preenchiam
   uma linha e meia e deixavam um buraco do tamanho de um card na tela larga.
   align-items:start impede que o card curto estique até a altura do vizinho. */
.marca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}
.marca-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;   /* filho de grid sem isso alarga a página no celular (bug clássico daqui) */
}
.marca-card-wide { grid-column: 1 / -1; }
.marca-card.is-vazio { background: var(--surface-hover); border-style: dashed; box-shadow: none; }

.marca-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.marca-card-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--brand-faint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.marca-card-title { font-weight: 600; font-size: 15px; color: var(--text-primary); flex: 1; min-width: 0; }
.marca-card-falta {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--warning);
  background: var(--warning-bg); border-radius: 999px; padding: 2px 8px;
}
.marca-edit-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.marca-edit-btn:hover { border-color: var(--brand); color: var(--brand); }
.marca-card-foot {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted);
}

.marca-field { margin-bottom: 12px; }
.marca-field:last-child { margin-bottom: 0; }
.marca-field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 3px;
}
.marca-field-label > span:first-child { min-width: 0; }
.marca-field-value { font-size: 13.5px; color: var(--text-primary); white-space: pre-line; line-height: 1.55; overflow-wrap: break-word; }

/* botão de copiar do campo: discreto, aparece ao passar o mouse (no toque
   fica sempre visível, senão não haveria como alcançá-lo) */
.marca-copy {
  border: none; background: none; padding: 2px; margin-left: auto; flex-shrink: 0;
  color: var(--text-muted); cursor: pointer; line-height: 0;
  opacity: 0; transition: var(--transition);
}
.marca-field:hover .marca-copy, .marca-copy:focus-visible { opacity: 1; }
.marca-copy:hover { color: var(--brand); }
.marca-copy.is-ok { opacity: 1; color: var(--success); }
.marca-copy.is-ok svg { display: none; }
.marca-copy.is-ok::after { content: '✓'; font-size: 12px; line-height: 1; }
@media (hover: none) { .marca-copy { opacity: .55; } }

/* campo de restrição ("o que NUNCA divulgar"): é a regra que não pode passar
   batido na hora de escrever a legenda, então não fica igual ao resto */
.marca-field.is-alerta {
  background: var(--warning-bg); border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.marca-field.is-alerta .marca-field-label { color: var(--warning); }

/* campo ainda em branco: em vez de sumir (e ninguém notar que falta), vira
   um convite clicável */
.marca-field.is-empty { cursor: pointer; opacity: .7; }
.marca-field.is-empty:hover { opacity: 1; }
.marca-field.is-empty .marca-field-value {
  font-size: 12.5px; color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 5px 9px;
}
.marca-field.is-empty:hover .marca-field-value { border-color: var(--brand); color: var(--brand); }

/* estado vazio do card: diz o que entra ali e oferece a ação */
.marca-empty { text-align: left; }
.marca-empty-dica { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
.marca-empty-btn {
  border: 1px solid var(--brand); background: var(--brand-faint); color: var(--brand);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.marca-empty-btn:hover { background: var(--brand); color: #fff; }
.marca-empty-cli { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* paleta de cores — clicar copia o hex (é o que se cola na arte) */
.marca-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-swatch {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 14px 4px 4px; font: inherit; text-align: left;
  background: var(--surface); cursor: pointer; transition: var(--transition);
}
.marca-swatch:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.marca-swatch.is-ok { border-color: var(--success); }
.marca-swatch i {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(18,19,26,.16);   /* contorno firme: cor clara sumia no card branco */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.marca-swatch-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marca-swatch b { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.marca-swatch em {
  font-style: normal; font-size: 10.5px; letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted);
}
.marca-swatch.is-ok em { color: var(--success); }

/* logos e arquivos da marca */
.marca-fundo-btn {
  margin-left: auto; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; transition: var(--transition);
}
.marca-fundo-btn:hover { border-color: var(--brand); color: var(--brand); }
.marca-files {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 10px; border-radius: var(--radius); border: 1px solid var(--border);
  /* xadrez: logo com fundo transparente desaparecia no branco chapado */
  background:
    linear-gradient(45deg, #EFEFF3 25%, transparent 25%, transparent 75%, #EFEFF3 75%),
    linear-gradient(45deg, #EFEFF3 25%, transparent 25%, transparent 75%, #EFEFF3 75%), #fff;
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  transition: var(--transition);
}
.marca-files.is-escuro { background: #12131A; border-color: #2A2B36; }
.marca-files.is-so-botao { background: none; border: none; padding: 0; }
.marca-file {
  position: relative; width: 92px; height: 92px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: transparent;
}
.marca-files.is-escuro .marca-file { border-color: rgba(255,255,255,.14); }
.marca-file a { display: block; width: 100%; height: 100%; }
.marca-file img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca-file-nome {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(18,19,26,.72); color: #fff; font-size: 9.5px; line-height: 1.3;
  padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: var(--transition); pointer-events: none;
}
.marca-file:hover .marca-file-nome { opacity: 1; }
.marca-file-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: rgba(18,19,26,.65); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.marca-file.is-uploading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: var(--surface); }
.marca-file-pct { font-size: 10.5px; color: var(--text-secondary); }
.marca-file-erro { font-size: 10px; color: var(--error); padding: 6px; text-align: center; }
.marca-file-add {
  width: 92px; height: 92px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: rgba(255,255,255,.7); color: var(--text-muted); cursor: pointer; font: inherit; font-size: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: var(--transition);
}
.marca-files.is-escuro .marca-file-add { background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }
.marca-file-add span { font-size: 18px; }
.marca-file-add:hover { border-color: var(--brand); color: var(--brand); }

/* materiais e links */
.marca-links { display: flex; flex-direction: column; gap: 8px; }
.marca-link {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  text-decoration: none; color: var(--text-primary); transition: var(--transition);
}
.marca-link:hover { border-color: var(--brand); background: var(--surface-hover); }
.marca-link svg { color: var(--brand); flex-shrink: 0; }
.marca-link-title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* só o domínio, não a URL inteira: o endereço cru do Drive ocupava a linha
   toda e escondia justamente o nome do material */
.marca-link-url { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.marca-link-go { margin-left: auto; color: var(--text-muted) !important; opacity: 0; transition: var(--transition); }
.marca-link:hover .marca-link-go { opacity: 1; color: var(--brand) !important; }

/* modal: linhas dinâmicas (cor / link) */
.marca-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.marca-row input[type="color"] {
  width: 38px; height: 34px; padding: 2px; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
.marca-row input[type="text"] { flex: 1; min-width: 0; }
/* input.classe (e não .classe) porque a regra genérica acima usa o seletor de
   atributo [type="text"] e ganharia na especificidade */
.marca-row input.mk-cor-txt {
  flex: 0 0 104px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: .04em;
}
.marca-row input.mk-cor-txt.is-invalido { border-color: var(--error); }
.marca-row input.mk-link-titulo { flex: 0 0 38%; }
.marca-row-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px; flex-shrink: 0; }
.marca-row-del:hover { color: var(--error); }
.marca-add-row { margin-top: 2px; font-size: 12.5px; padding: 6px 12px; }
#marcaModalDica { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: -6px 0 16px; }
#marcaModalDica:empty { display: none; }
.field-alerta label { color: var(--warning); }

/* cliente (link secreto ou "Ver como cliente"): só leitura — some tudo que edita */
.mode-client #marcaToolbar,
.mode-client .marca-edit-btn,
.mode-client .marca-card-falta,
.mode-client .marca-file-add,
.mode-client .marca-file-del { display: none; }
.mode-client .marca-grid { margin-top: 20px; }

@media (max-width: 768px) {
  .marca-wrap { padding: 4px 16px 20px; }
  .marca-grid { grid-template-columns: 1fr; }
  #marcaToolbar { gap: 14px; }
  .marca-copiar-tudo { width: 100%; justify-content: center; }
  .marca-edit-btn span { display: none; }   /* só o lápis: o título do card vinha quebrando em duas linhas */
  .marca-edit-btn { padding: 6px 8px; }
}