/* ═══════════════════════════════════════════════════════════════════
   PÁGINA DO EDITOR DE PUBLICAÇÃO (.pub-page)
   Tela própria com endereço #/…/publicacao/… — substitui o antigo
   modal .ce-modal. Três colunas: prévia · etapas · aprovação/histórico.
   ═══════════════════════════════════════════════════════════════════ */
.pub-page {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--sidebar-w);
  transition: left var(--transition);
  z-index: 60;               /* acima das .agency-view (40), abaixo dos modais (200) */
  background: var(--bg);
  overflow-y: auto;
}
.pub-page.open { display: block; }

/* ── Pelo LADO DO CLIENTE a página ocupa a tela inteira ──────────────
   Para a agência, deixar a lateral à mostra é certo: ela é a navegação
   da casa, e a publicação é uma tela A MAIS dentro do trabalho dela.
   Para o cliente que chega pelo link não é: ele veio ver UMA coisa, e
   a faixa de 230px à esquerda só devolvia um pedaço cortado do painel
   dele (o cartão com o nome truncado no meio da palavra) ao lado da
   tela que importa. Achado por ele em 10/08/2026, com print.

   A página da COLEÇÃO (.prod-page) já nasceu assim, `inset: 0` — esta
   aqui é que tinha ficado para trás. Vale também no "Ver como cliente":
   se o botão promete mostrar o que o cliente vê, tem de mostrar mesmo.
   O caminho de volta não se perde — a seta ← do topo continua ali.

   A barra de baixo (.pub-footer, o "Fechar") entra na MESMA regra: ela é
   fixa com o mesmo recuo, e deixá-la para trás reabriria o degrau que
   este conserto veio tirar. */
body.mode-client .pub-page,
body.mode-client .pub-footer { left: 0; }

/* ── topo: voltar · título · status · ações rápidas ── */
.pub-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px 0;
}
.pub-back {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--transition);
}
.pub-back:hover { border-color: var(--brand-light); color: var(--brand); }
.pub-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pub-title {
  font-size: 21px; font-weight: 600; color: var(--text-primary); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-topbar-actions { display: flex; gap: 8px; flex: none; }
.pub-top-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--fonte); font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.pub-top-btn:hover { border-color: var(--brand-light); color: var(--brand); }

/* Alfinete (fixar no topo do feed, até 3 — como no Instagram).
   `is-on` = está fixada. `is-off` = o teto de 3 já estourou: o botão FICA À
   VISTA, apagado, e o title diz a saída (desafixar uma). Sumir com ele faria
   a pessoa concluir que a função não existe. */
.pub-top-pin.is-on {
  border-color: var(--brand); color: var(--brand); background: var(--brand-faint);
}
.pub-top-pin.is-off { opacity: 0.45; }
.pub-top-pin.is-off:hover { border-color: var(--border); color: var(--text-secondary); cursor: not-allowed; }

/* ── faixa de contexto: cliente · formato · redes · vai ao ar · edição ── */
.pub-meta {
  display: flex; flex-wrap: wrap; gap: 10px 36px;
  margin: 16px 28px 0;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pub-meta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
}
.pub-meta-value {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.pub-meta-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--brand-faint) center/cover no-repeat;
  color: var(--brand); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── corpo em 3 colunas ── */
.pub-body {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  padding: 20px 28px 90px;   /* respiro pro rodapé fixo não cobrir conteúdo */
}
/* ⚠️ Aqui havia um `max-width: 1500px` SEM `margin: 0 auto` — a sobra toda
   se acumulava de um lado só. Enquanto a página nascia recuada pela lateral
   (1280 − 230 = 1050px) o teto nunca era alcançado e ninguém via. No dia em
   que ela passou a ocupar a tela inteira pelo link do cliente, o teto virou
   uma faixa morta: numa tela de 1740px a barra de cima terminava a 28px da
   borda, as colunas a 240px e o painel da direita a 268px — três
   alinhamentos diferentes na mesma tela. Medido, não achado.
   Sem o teto, tudo termina nos mesmos 28px do padding. */
.pub-preview { position: sticky; top: 20px; min-width: 0; }
.pub-editor { min-width: 0; }
.pub-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: box-shadow var(--transition);
}
.pub-card.is-flash { box-shadow: 0 0 0 3px var(--brand-ring); }
.pub-card-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.pub-card-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* abas de rede da prévia — só as redes escolhidas na publicação */
.pub-preview-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-pv-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); font-family: var(--fonte); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.pub-pv-tab:hover { border-color: var(--brand-light); color: var(--brand); }
.pub-pv-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* prévia de outras redes: texto acima da mídia (Facebook/LinkedIn) e ações */
.pv-feed-texto { padding: 0 12px 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-feed-acoes {
  display: flex; justify-content: space-around; gap: 8px;
  padding: 9px 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}

/* ── fluxo de etapas (stepper 1→5): bolinha em cima, nome embaixo — 5
   colunas iguais, cabe em qualquer largura sem rolar ── */
.pub-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  margin-bottom: 16px; position: relative;
}
.pub-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 8px 4px; border-radius: var(--radius); border: 1px solid transparent;
  background: none; font-family: var(--fonte); font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.pub-step:hover { color: var(--brand); }
.pub-step.is-active { background: var(--surface); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.pub-step-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--text-secondary); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pub-step.is-active .pub-step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.pub-step.is-done .pub-step-dot { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.pub-step-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── balão de conversa da etapa ──────────────────────────────────────────
   Um balãozinho de fala (com rabinha), NÃO uma bolinha de notificação: o que
   ele diz é "tem conversa aqui", não "erro". O número é o total de mensagens;
   a cor diz se está esperando alguém — roxo da marca quando cobra ação, cinza
   quando já foi respondida. `--balao-bg` existe pra rabinha (::after) mudar
   de cor junto com o corpo, sem repetir a regra. */
.pub-step { position: relative; }
.pub-step-msg {
  --balao-bg: var(--brand);
  position: absolute; top: 2px; left: calc(50% + 8px);
  min-width: 18px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--balao-bg); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0;
  /* canto de baixo-esquerda reto: é de lá que sai a rabinha */
  border-radius: 9px 9px 9px 2px;
  box-shadow: 0 1px 3px rgba(18, 19, 26, 0.16);
  pointer-events: none;   /* o clique é da etapa inteira */
}
.pub-step-msg::after {
  content: ''; position: absolute; left: 1px; bottom: -4px;
  border-style: solid; border-width: 5px 5px 0 0;
  border-color: var(--balao-bg) transparent transparent transparent;
}
/* já respondida: continua visível (a conversa existe), mas para de chamar */
.pub-step-msg.is-respondida {
  --balao-bg: var(--border-strong);
  color: var(--text-secondary); box-shadow: none;
}

/* painéis das etapas — cada um é um cartão */
.pub-panels .ce-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.pub-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.pub-panel-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pub-panels .field:last-child { margin-bottom: 0; }

/* ações de IA da etapa (motor entra com o IA Studio — ver iaEmBreve) */
.pub-ia-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-ia-bar button {
  padding: 5px 11px; border-radius: 18px; border: 1px solid var(--brand-ring);
  background: var(--brand-faint); font-family: var(--fonte); font-size: 11.5px; font-weight: 600;
  color: var(--brand); cursor: pointer; transition: all var(--transition);
}
.pub-ia-bar button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* navegação entre etapas */
.pub-step-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pub-nav-btn {
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); font-family: var(--fonte); font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.pub-nav-btn:hover { border-color: var(--brand-light); color: var(--brand); }
.pub-nav-next { border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* ── referências em cards ── */
.pub-refs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pub-ref-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); transition: all var(--transition);
}
.pub-ref-card:hover { border-color: var(--brand-light); }
.pub-ref-icon { font-size: 17px; flex: none; }
.pub-ref-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; text-decoration: none; }
.pub-ref-nome { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pub-ref-url { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-ref-info:hover .pub-ref-nome { color: var(--brand); }
.pub-ref-del {
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: none;
  background: none; color: var(--text-muted); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--transition);
}
.pub-ref-del:hover { background: var(--error-bg); color: var(--error); }
.pub-ref-add { display: flex; gap: 8px; }
.pub-ref-add input {
  flex: 1; min-width: 0; font-family: var(--fonte); font-size: 13px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-primary);
}
.pub-ref-add .btn-secondary { flex: 0 0 auto; }

/* ── cartão Aprovação do cliente ── */
.pub-aprov-banner {
  padding: 9px 12px; border-radius: var(--radius); margin-bottom: 10px;
  background: var(--success-bg); color: var(--success);
  font-size: 12.5px; font-weight: 600;
}
.pub-aprov-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pub-aprov-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius); border: 1px solid transparent;
  background: none; font-family: var(--fonte); font-size: 12.5px; font-weight: 500;
  color: var(--text-primary); cursor: pointer; text-align: left; transition: all var(--transition);
}
.pub-aprov-row:hover { background: var(--bg); }
.pub-aprov-row.is-active { border-color: var(--brand-ring); background: var(--brand-faint); }
.pub-aprov-ok   { font-size: 11px; font-weight: 600; color: var(--success); }
.pub-aprov-pend { font-size: 11px; font-weight: 600; color: var(--warning); }
.pub-aprov-rasc { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* ── cartão Histórico (linha do tempo) ── */
.pub-hist-item { display: flex; gap: 10px; padding: 7px 0; }
.pub-hist-item + .pub-hist-item { border-top: 1px solid var(--border); }
.pub-hist-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--brand-light);
}
.pub-hist-body { min-width: 0; }
.pub-hist-txt { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.pub-hist-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── rodapé fixo com as ações principais ── */
.pub-footer {
  position: fixed; bottom: 0; right: 0; left: var(--sidebar-w);
  transition: left var(--transition);
  display: none; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 61;
}
.pub-page.open .pub-footer { display: flex; }
.pub-footer-space { flex: 1; }
.pub-footer .btn-primary, .pub-footer .btn-secondary, .pub-footer .btn-danger { flex: 0 0 auto; }
.pub-footer .btn-primary { min-width: 170px; }

/* ── aviso rápido (toast) ── */
.pub-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 16px);
  padding: 11px 18px; border-radius: var(--radius-lg);
  background: var(--text-primary); color: #fff;
  font-family: var(--fonte); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-xl); opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300; max-width: min(90vw, 480px); text-align: center;
}
.pub-toast.open { opacity: 1; transform: translate(-50%, 0); }

/* ── "não consegui salvar" (ver assets/js/avisos.js) ──────────────────
   Diferente do toast de propósito: este NÃO some sozinho. Toast é para
   confirmar; isto é para avisar que o trabalho da pessoa pode se perder,
   e some só quando ela fecha. Fica acima de tudo (z-index maior que o
   toast e que os painéis), inclusive no link do cliente, que também
   grava (aprovar/comentar). */
.aviso-nao-salvou {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  display: none; align-items: flex-start; gap: 12px;
  width: min(92vw, 560px); padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--error-bg); border: 1px solid var(--error);
  box-shadow: var(--shadow-xl);
  font-family: var(--fonte); font-size: 13px; line-height: 1.45;
  color: var(--text-primary); text-align: left;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
  /* ACIMA DE TUDO, de propósito. As camadas do app são: modais e
     seletores 200, sininho 220, toast 300, tela de entrada 500, definir
     senha 600. Este aviso é 700 porque é a mensagem mais urgente que o
     Órbitta tem para dar — nada pode escondê-la. Descoberto testando:
     em 400 ele nascia ATRÁS da tela de entrada. Se criar uma camada
     nova, ela fica ABAIXO de 700. */
  z-index: 700;
}
.aviso-nao-salvou.open { display: flex; opacity: 1; transform: translate(-50%, 0); }
.aviso-nao-salvou__icone { font-size: 18px; line-height: 1.2; flex: none; }
.aviso-nao-salvou__texto { flex: 1; min-width: 0; }
.aviso-nao-salvou__texto strong { display: block; margin-bottom: 3px; color: var(--error); }
.aviso-nao-salvou__texto span { display: block; color: var(--text-secondary); }
.aviso-nao-salvou__texto b { color: var(--text-primary); }
.aviso-nao-salvou__fechar {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: var(--radius-sm);
}
.aviso-nao-salvou__fechar:hover { color: var(--text-primary); background: rgba(0,0,0,0.06); }

@media (max-width: 640px) {
  .aviso-nao-salvou { bottom: 12px; width: calc(100vw - 24px); }
}

/* ── responsivo ── */
@media (max-width: 1200px) {
  /* 2 colunas: a lateral de aprovação/histórico desce pra baixo do editor */
  .pub-body { grid-template-columns: 300px minmax(0, 1fr); }
  .pub-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 768px) {
  .pub-page, .pub-footer { left: 0; }
  .pub-topbar { flex-wrap: wrap; padding: 14px 16px 0; }
  .pub-topbar-actions { width: 100%; overflow-x: auto; }
  .pub-meta { margin: 12px 16px 0; gap: 10px 22px; }
  .pub-body { grid-template-columns: 1fr; padding: 16px 16px 96px; }
  /* No celular o TRABALHO vem primeiro: etapas em cima, prévia depois,
     aprovação/conversa por último. Antes a pessoa rolava uma tela
     inteira de mockup para achar onde editar. */
  .pub-editor  { order: 1; }
  .pub-preview { order: 2; position: static; max-width: 340px; width: 100%; margin: 0 auto; }
  .pub-side    { order: 3; grid-template-columns: 1fr; }
  /* Etapas sem rótulo cortado ("Conteú…"): o nome aparece só na etapa
     ATIVA; as outras ficam como bolinhas numeradas — os estados feito/
     ativo continuam visíveis pela cor. */
  .pub-step:not(.is-active) .pub-step-name { display: none; }
  /* o ☰ some com o editor aberto (03-planejamento.css), então o rodapé
     recupera a largura toda; o env() respeita a barrinha do iPhone */
  .pub-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pub-footer .btn-primary { min-width: 0; flex: 1; }
}

/* ══ EQUIPE COM LOGIN PRÓPRIO (Configurações → Equipe) ══════════════
   Status do acesso no cartão da pessoa, atalhos de permissão e a caixa
   do link de convite. Ver assets/js/configuracoes.js e
   supabase/functions/equipe-convite. */
.modal.modal-lg { max-width: 560px; }

.eq-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 500;
  vertical-align: middle; letter-spacing: .01em;
}
.eq-tag-ok       { background: var(--success-bg); color: var(--success); }
.eq-tag-pendente { background: var(--warning-bg); color: var(--warning); }
.eq-tag-sem      { background: var(--surface-hover); color: var(--text-secondary); }

.eq-acesso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq-status {
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.eq-acesso .btn-secondary { padding: 7px 14px; font-size: 12.5px; }
.eq-revogar { color: var(--error); }

.eq-link-box {
  margin-top: 10px; padding: 12px; border-radius: var(--radius);
  background: var(--brand-faint); border: 1px solid var(--brand-ring);
  display: flex; flex-direction: column; gap: 8px;
}
.eq-link-txt { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.eq-link-box input {
  width: 100%; min-width: 0; padding: 8px 10px; font-size: 12px;
  font-family: inherit; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--text-primary);
}
.eq-link-box .btn-primary { align-self: flex-start; padding: 8px 16px; font-size: 12.5px; }

.eq-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.eq-preset {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: inherit; font-size: 12px; color: var(--text-secondary);
  transition: all .15s ease;
}
.eq-preset:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-faint); }

.eq-area span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.eq-area select { flex: 0 0 132px; }
.eq-area-nota { font-size: 11px; color: var(--text-secondary); font-style: normal; line-height: 1.35; }

@media (max-width: 768px) {
  .eq-acesso { gap: 8px; }
  .eq-acesso .btn-secondary { flex: 1 1 auto; }
}

/* ══ PERMISSÕES POR ÁREA (equipe com login próprio) ═════════════════
   As classes vêm de assets/js/perm.js, que as liga no <body> a partir
   do que o Administrador marcou em Configurações → Equipe.
     body.perm-<area>-nada  → a área inteira some (item de menu, aba)
     body.perm-<area>-ver   → some só o que EDITA (criar, salvar, excluir)
   ⚠️ Isto é conveniência, não segurança: a trava de verdade é a RLS do
   banco (supabase/equipe-acessos.sql). Ver a Skill `seguranca`. */
body.perm-clientes-nada [data-perm="clientes"] { display: none !important; }
body.perm-agenda-nada [data-perm="agenda"] { display: none !important; }
body.perm-conteudos-nada [data-perm="conteudos"] { display: none !important; }
body.perm-tarefas-nada [data-perm="tarefas"] { display: none !important; }
body.perm-reunioes-nada [data-perm="reunioes"] { display: none !important; }
body.perm-marca-nada [data-perm="marca"] { display: none !important; }
body.perm-metricas-nada [data-perm="metricas"] { display: none !important; }
body.perm-agendageral-nada [data-perm="agendageral"] { display: none !important; }
body.perm-relatorios-nada [data-perm="relatorios"] { display: none !important; }
body.perm-crm-nada [data-perm="crm"] { display: none !important; }
body.perm-financeiro-nada [data-perm="financeiro"] { display: none !important; }
body.perm-configuracoes-nada [data-perm="configuracoes"] { display: none !important; }
/* `producoes` entrou na lista de áreas (perm.js) mas ficou SEM estas duas
   linhas até 07/08/2026 — o resultado é que quem tinha "sem acesso a
   Produções" via o menu e a aba assim mesmo. Não era brecha (o banco
   recusava tudo), era promessa de tela não cumprida. */
body.perm-producoes-nada [data-perm="producoes"] { display: none !important; }

body.perm-clientes-ver [data-perm-editar="clientes"] { display: none !important; }
body.perm-agenda-ver [data-perm-editar="agenda"] { display: none !important; }
body.perm-conteudos-ver [data-perm-editar="conteudos"] { display: none !important; }
body.perm-tarefas-ver [data-perm-editar="tarefas"] { display: none !important; }
body.perm-reunioes-ver [data-perm-editar="reunioes"] { display: none !important; }
body.perm-marca-ver [data-perm-editar="marca"] { display: none !important; }
body.perm-metricas-ver [data-perm-editar="metricas"] { display: none !important; }
body.perm-agendageral-ver [data-perm-editar="agendageral"] { display: none !important; }
body.perm-relatorios-ver [data-perm-editar="relatorios"] { display: none !important; }
body.perm-crm-ver [data-perm-editar="crm"] { display: none !important; }
body.perm-financeiro-ver [data-perm-editar="financeiro"] { display: none !important; }
body.perm-configuracoes-ver [data-perm-editar="configuracoes"] { display: none !important; }
body.perm-producoes-ver [data-perm-editar="producoes"] { display: none !important; }

/* ══ CHAVE DE RECURSO: MÓDULO PRODUÇÕES ════════════════════════════
   Vem de `Producoes.aplicarVisibilidade()`, a partir da chave
   `producoes` em platform_flags (Central → Flags). É DIFERENTE da
   permissão acima: permissão é sobre esta PESSOA; a chave é sobre a
   conta inteira ter o módulo liberado ou não.

   Publicamos o módulo desligado de propósito — o código vive no ar sem
   aparecer para ninguém até você ligar, conta por conta. Esconder aqui
   é conveniência; quem recusa de verdade é o banco (a portaria do link
   confere a mesma chave, ver supabase/producoes-flag.sql). */
/* Chave da CONTA desligada: o módulo não existe para esta agência, então
   some tudo — lateral, aba e o interruptor do cadastro junto. */
body.sem-producoes [data-perm="producoes"] { display: none !important; }

/* Módulo existe, mas ESTE cliente não usa: some só a aba dele.
   ⚠️ Pelo ID, e jamais por `[data-perm="producoes"]` — o interruptor que
   religa o módulo também carrega esse atributo, e escondê-lo aqui foi o
   defeito de 08/08/2026: desligar virava uma decisão sem volta. A regra
   geral, para qualquer módulo futuro: o interruptor de uma coisa não
   pode ser escondido pela própria coisa que ele desliga. */
body.prod-cliente-off #tabProducoes { display: none !important; }

/* Planejamento desligado para este cliente (interruptor na ficha dele):
   somem as três abas do calendário editorial. Pelos IDS, e não por
   data-perm, porque `data-perm` é PERMISSÃO — quem pode ver o quê — e
   isto é outra pergunta: se este cliente USA o módulo. Misturar as duas
   faria uma mexer na outra sem querer no dia em que uma delas mudasse. */
body.sem-planejamento #tabConteudos,
body.sem-planejamento #tabMetricas { display: none !important; }

/* ⚠️ A AGENDA NÃO ENTRA NESSA LISTA (corrigido em 08/08/2026, por ele).
   Ela não é o calendário editorial: guarda REUNIÕES, GRAVAÇÕES e
   CAPTAÇÕES — que um fotógrafo usa mais que ninguém — e, desde a
   integração de hoje, os PRAZOS DE ENTREGA. Escondê-la deixava o prazo
   sendo desenhado numa aba que o dono da entrega não conseguia abrir.

   O que some dentro dela é só o que é de PUBLICAÇÃO: o placar de etapas
   do mês, a barra de progresso, os filtros (que filtram status de
   conteúdo) e a opção "Conteúdo" no seletor do botão +. */
body.sem-planejamento #monthStats,
body.sem-planejamento #progressInline,
body.sem-planejamento #filterMenu,
body.sem-planejamento .picker-card.pc-conteudo { display: none !important; }

/* Marca e Métricas montam os botões por JS (não dá pra marcar um por um no
   HTML): em modo "só visualiza", some com os botões de ação da seção
   inteira. O que sobra — os números e o dossiê — continua legível. */
body.perm-marca-ver    #marcaSection .btn-primary,
body.perm-marca-ver    #marcaSection .progress-add-btn,
body.perm-metricas-ver #metricasSection .btn-primary,
body.perm-metricas-ver #metricasSection .progress-add-btn { display: none !important; }
/* Cartões e ações que são exclusividade do Administrador da conta. */
body.nao-owner [data-so-owner] { display: none !important; }
/* Coluna de mensalidade do Panorama: some pra quem não tem a área
   Financeiro (o valor nem chega do banco — ver clients_financeiro). */
body.perm-financeiro-nada .rel-col-fin { display: none !important; }
.eq-admin-nota { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* `hidden` não vale nada quando a regra da classe define display — o
   display do CSS vence o do user-agent. Estes três são escondidos por
   JS (configuracoes.js: caixa do link, atalhos e lista de áreas), então
   precisam dizer isso explicitamente. Pego em produção 03/08. */
.eq-link-box[hidden], .eq-presets[hidden], .eq-areas[hidden] { display: none !important; }

/* ── CONTA FORA DO AR (conta-suspensa-bloqueia.sql) ────────────────────────
   Aviso de "o teste terminou", no rodapé da barra lateral (escura), logo
   acima do cartão do plano. Amarelo e não vermelho de propósito: nada está
   quebrado e nada foi perdido — só não dá para editar. Vermelho aqui faria
   a pessoa achar que o trabalho dela sumiu.
   Quem liga/desliga é o app.js#pintarAvisoAcesso, pelo atributo `hidden`. */
.aviso-acesso {
  margin: 0 12px 10px;
  padding: 11px 13px;
  background: rgba(217, 119, 6, 0.16);
  border: 1px solid rgba(217, 119, 6, 0.42);
  color: #F0C173;                 /* amarelo legível sobre a lateral escura */
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.aviso-acesso a { color: #FFD79A; font-weight: 600; text-decoration: underline; }
.aviso-acesso[hidden] { display: none !important; }
/* na régua de ícones (lateral encolhida) o texto não cabe — some junto */
body.sidebar-collapsed .aviso-acesso { display: none; }

/* Botão discreto da tela de conta bloqueada ("Sair"): a ação principal ali
   é falar com a gente, então esta fica em texto, sem peso de botão. */
.entry-linkbtn {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px;
  color: var(--text-secondary); text-decoration: underline;
}
.entry-linkbtn:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════
   PRODUÇÕES (Coleções de entrega e aprovação) — producoes.js
   ───────────────────────────────────────────────────────────────────
   Um módulo, dois lugares: a lista da AGÊNCIA (lateral, todas as
   coleções) e a aba DENTRO DO CLIENTE — que é a mesma que o cliente vê
   pelo link secreto. Por isso não existe estilo "da agência" e "do
   cliente": existe o cartão, e o que muda é o que a tela mostra dentro
   dele. Se fossem dois estilos, um dia divergiriam, e a diferença
   apareceria justo na frente do cliente.

   Só tokens (--brand, --surface, --border…): nenhuma cor solta, para o
   white label da agência continuar valendo aqui como vale no resto.
   ═══════════════════════════════════════════════════════════════════ */

/* A aba nasce ESCONDIDA, como toda aba do cliente (#tarefasSection,
   #reunioesSection, #marcaSection…). Sem esta linha, entrar num cliente
   mostrava a Agenda com Produções inteira empilhada embaixo — o
   enterClient não chama setTab, então quem esconde a seção no primeiro
   desenho é o CSS. Mesmo defeito da aba Conteúdos em 30/07/2026. */
#producoesSection { display: none; }

/* ── O placar do topo (nível agência) ────────────────────────────── */
/* `auto-fit` + `1fr` estica os cartões para preencher a linha inteira:
   com três indicadores num monitor largo, cada um virava um outdoor de
   440px para exibir um número de um dígito. O `max-width` segura a
   FILEIRA (não o cartão) e o resto da linha fica em branco de propósito
   — espaço vazio é composição, esticar é acidente. */
.prod-kpis {
  display: grid; gap: 12px; margin-bottom: 18px; max-width: 860px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.prod-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.prod-kpi b    { display: block; font-size: 26px; line-height: 1.1; color: var(--text-primary); }
.prod-kpi span { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.prod-kpi i    { display: block; font-size: 11.5px; color: var(--text-muted); font-style: normal; margin-top: 2px; }
/* "Precisam de você" só ganha cor quando existe alguma. Destaque
   permanente em cima de zero é ruído: ensina a ignorar o destaque. */
.prod-kpi.destaque { border-color: var(--brand); background: var(--brand-faint); }
.prod-kpi.destaque b { color: var(--brand-dark); }
.prod-kpi.alerta   { border-color: var(--error); }
.prod-kpi.alerta b { color: var(--error); }

/* ── Barra de busca + botão ──────────────────────────────────────── */
.prod-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
/* ⚠️ O `max-width` não é enfeite: sem ele, num monitor largo o campo de
   busca esticava para ~1470px — um campo de UMA LINHA com um metro e
   meio de comprimento, onde o cursor fica a um palmo do texto digitado.
   A busca de Clientes nunca teve esse problema porque divide a linha
   com os filtros; esta aqui está sozinha e precisa do próprio freio. */
.prod-busca {
  flex: 1; max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 12px; height: 42px;
  color: var(--text-muted);
}
/* o botão de criar fica na ponta oposta, e não colado na busca */
.prod-bar > .btn-primary { margin-left: auto; }
.prod-busca:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.prod-busca input {
  flex: 1; border: 0; outline: 0; background: none; height: 100%;
  font-family: inherit; font-size: 14px; color: var(--text-primary);
}
/* Mesmo molde de `.marca-wrap` / `.metricas-wrap` / `.reunioes-wrap`: é o
   invólucro que toda aba do cliente tem e que só Produções não tinha —
   por isso a barra e a lista nasciam grudadas na lateral. */
.prod-cliente-wrap { padding: 4px 28px 28px; max-width: 1860px; margin: 0 auto; }
.prod-bar-cliente { margin-top: 4px; }
/* O botão não cresce: quem ocupa a sobra é a busca. Sem isto ele vira
   uma faixa roxa de ponta a ponta e rouba a hierarquia da tela. */
.prod-bar .prod-nova-btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Chips de status (o resumo que também filtra) ─────────────────── */
.prod-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.prod-chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text-secondary);
  transition: var(--transition);
}
.prod-chip b { color: var(--text-primary); margin-left: 3px; }
.prod-chip:hover { border-color: var(--border-strong); }
.prod-chip.ativo { background: var(--brand); border-color: var(--brand); color: #fff; }
.prod-chip.ativo b { color: #fff; }
/* Chip zerado continua clicável, só recuado: sumir com ele faria a
   fileira dançar a cada mudança de status. */
.prod-chip.vazio { opacity: 0.5; }

/* ── A lista de cartões ──────────────────────────────────────────── */
/* Colunas de 300px, no lugar dos 240px de antes: a galeria de Clientes
   — a tela irmã desta — usa 338px, e uma coleção tem mais a dizer que um
   cartão de cliente (capa, selo, placar, prazo, responsável). Com 240px
   um monitor de 1920 abria SEIS colunas, e uma entrega só ficava
   perdida num campo de futebol vazio.
   `auto-fill` (e não `auto-fit`) de propósito: com uma coleção só,
   `auto-fit` esticaria aquele cartão sozinho por 1600px, que é o
   exagero oposto. Cartão tem tamanho; a lista é que se acomoda. */
.prod-lista {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.prod-card {
  display: flex; flex-direction: column; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  font-family: inherit; padding: 0; transition: var(--transition);
}
.prod-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.prod-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Mosaico de até 4 miniaturas — a "cara" da entrega antes de abrir */
.prod-capa {
  display: grid; gap: 2px; aspect-ratio: 4 / 3; background: var(--border);
}
.prod-capa-1 { grid-template-columns: 1fr; }
.prod-capa-2 { grid-template-columns: 1fr 1fr; }
.prod-capa-3 { grid-template-columns: 1fr 1fr; }
.prod-capa-3 .prod-capa-img:first-child { grid-row: span 2; }
.prod-capa-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.prod-capa-img { background: var(--surface-hover) center/cover no-repeat; }
/* Coleção SEM capa não merece os mesmos 4/3 de quem tem: eram 192px de
   cartão inteiramente vazios (56% da altura) para dizer "sem capa" —
   um buraco que fazia a entrega parecer defeituosa em vez de nova.
   Vira uma faixa fina: informa o mesmo e devolve o espaço ao que
   importa (título, placar, prazo). */
.prod-capa-vazia {
  aspect-ratio: auto; min-height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-hover); border-bottom: 1px solid var(--border);
}
.prod-capa-vazia span {
  font-size: 11.5px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.prod-card-corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.prod-card-topo  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-card-titulo {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-card-sub    { font-size: 12.5px; color: var(--text-secondary); }
.prod-card-rodape { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted); margin-top: auto; }
.prod-cat { background: var(--surface-hover); border-radius: 999px; padding: 1px 8px; }

/* ── Selos de status ─────────────────────────────────────────────── */
.prod-selo {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.prod-selo-cinza   { background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border); }
.prod-selo-roxo    { background: var(--brand-faint);   color: var(--brand-dark); }
.prod-selo-laranja { background: var(--warning-bg);    color: var(--warning); }
.prod-selo-verde   { background: var(--success-bg);    color: var(--success); }
.prod-selo-azul    { background: #E8F1FE;              color: #1558C0; }

/* o recíproco do aviso no cartão do cliente: a agência falou por último */
.prod-card-tag {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-faint); color: var(--brand); white-space: nowrap;
}
/* a régua do cliente no placar: o que espera ELE ganha a cor de ação */
.prod-card-conta.espera-voce { color: var(--brand); font-weight: 600; }

.prod-prazo { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.prod-prazo.perde, .prod-prazo.perto { color: var(--warning); font-weight: 600; }
.prod-prazo.hoje     { color: var(--warning); font-weight: 600; }
.prod-prazo.atrasada { color: var(--error);   font-weight: 600; }

/* ── A barrinha de aprovados ─────────────────────────────────────── */
.prod-card-placar { display: flex; align-items: center; gap: 8px; }
.prod-barra { flex: 1; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.prod-barra span { display: block; height: 100%; background: var(--success); border-radius: 999px; transition: width var(--transition); }
.prod-card-conta { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }

/* ── Vazio e carregando ──────────────────────────────────────────── */
.prod-vazio {
  grid-column: 1 / -1; text-align: center; padding: 54px 20px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.prod-vazio-icone  { color: var(--text-muted); margin-bottom: 10px; }
.prod-vazio-titulo { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.prod-vazio-dica   { font-size: 13px; color: var(--text-secondary); margin: 6px auto 0; max-width: 380px; line-height: 1.5; }
.prod-carregando   { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

.nc-opcional { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.field-hint  { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.field input.erro, .field textarea.erro { border-color: var(--error); box-shadow: 0 0 0 3px rgba(222,59,59,0.15); }

/* ── Celular ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 150px dava DUAS colunas num celular de 375: cartões de 164px, com o
     título de uma entrega espremido em duas linhas cortadas. Uma coluna
     por vez — no celular a pessoa varre, não compara. */
  .prod-lista { grid-template-columns: 1fr; gap: 12px; }
  .prod-bar   { flex-wrap: wrap; }
  .prod-busca { max-width: none; }        /* no celular a busca usa a linha toda */
  .prod-bar > .btn-primary { margin-left: 0; }
  .prod-bar .prod-nova-btn { width: 100%; }
  .prod-kpis  { grid-template-columns: 1fr 1fr; }
  .prod-card-titulo { font-size: 13.5px; }
}

/* Recado curto do módulo (producoes.js#recado) — aparece e some sozinho.
   Não é alert(): alert TRAVA a página, e a regra da casa é avisar sem
   travar. Fica acima de tudo, mas longe do polegar no celular. */
.prod-recado {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 9999; max-width: min(420px, calc(100vw - 32px));
  background: var(--text-primary); color: #fff;
  padding: 12px 18px; border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.45; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition);
}
.prod-recado.aberto { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════════════
   PRODUÇÕES · a PÁGINA da coleção e o VISUALIZADOR (fase 5b)
   ───────────────────────────────────────────────────────────────────
   A página fica POR CIMA da aba, como a de publicação — e por isso é
   `position: fixed` com o corpo travado. `.is-readonly` é o modo
   cliente: o CSS esconde o que ele não pode fazer, e o JS recusa junto.
   Esconder sem recusar seria teatro; recusar sem esconder seria maldade.
   ═══════════════════════════════════════════════════════════════════ */
body.prod-page-aberta { overflow: hidden; }

.prod-page {
  position: fixed; inset: 0; z-index: 300; display: none;
  flex-direction: column; background: var(--bg);
}
.prod-page.aberta { display: flex; }

.prod-page-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.prod-voltar {
  display: flex; align-items: center; gap: 6px; border: 0; background: none;
  cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary); padding: 6px 4px;
}
.prod-voltar:hover { color: var(--brand); }
.prod-page-tit { flex: 1; min-width: 220px; }
.prod-page-tit h2 { font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.prod-page-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-secondary); margin-top: 4px;
}
.prod-sep { color: var(--text-muted); }
.prod-page-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-page-acoes button { white-space: nowrap; }

.prod-page-corpo { flex: 1; display: flex; min-height: 0; }
.prod-page-main  { flex: 1; overflow-y: auto; padding: 22px 24px 60px; }
.prod-descricao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.55; color: var(--text-secondary);
}

/* ── Arrastar e soltar ───────────────────────────────────────────── */
.prod-drop {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: 18px; margin-bottom: 20px;
  cursor: pointer; color: var(--text-secondary); transition: var(--transition);
}
.prod-drop.grande { padding: 52px 20px; flex-direction: column; text-align: center; }
.prod-drop:hover, .prod-drop.sobre { border-color: var(--brand); background: var(--brand-faint); color: var(--brand-dark); }
.prod-drop b    { display: block; font-size: 14.5px; color: var(--text-primary); }
.prod-drop span { display: block; font-size: 12.5px; margin-top: 2px; }
.prod-page.is-readonly .prod-drop { display: none; }

/* Fila de envio: um por linha, com barra própria. Um que falhe fica
   vermelho com o motivo e os outros seguem — nunca um alert que trava. */
.prod-fila { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.prod-fila-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px;
}
.prod-fila-item.erro { border-color: var(--error); }
.prod-fila-nome  { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-fila-erro  { color: var(--error); font-weight: 600; }
.prod-fila-barra { width: 120px; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.prod-fila-barra i { display: block; height: 100%; background: var(--brand); transition: width 0.2s ease; }

/* ── A grade de arquivos ─────────────────────────────────────────── */

/* ═══ AS PASTAS DENTRO DA ENTREGA (27/08/2026) ══════════════════════
   Um nível só. O título da seção é também o ALVO de soltar — por isso
   ele tem área de sobra em volta, e por isso o destaque de "pode
   soltar aqui" é da SEÇÃO inteira, não da linha do título. */
.prod-org {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 4px;
}
.prod-org-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: none; color: var(--text-secondary);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.prod-org-btn:hover { border-color: var(--brand); color: var(--brand); border-style: solid; }
.prod-org-dica { font-size: 12px; color: var(--text-muted); }
/* no celular a dica fala de arrastar, que lá não existe — some */
@media (max-width: 640px) { .prod-org-dica { display: none; } }

/* ── O CARTÃO DE PASTA (nela se ENTRA, como no Drive) ─────────────── */
.prod-pastas {
  display: grid; gap: 10px; margin: 6px 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.prod-pasta-caixa {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: var(--transition);
}
.prod-pasta-caixa:hover { border-color: var(--brand); box-shadow: var(--shadow); }
/* "pode soltar aqui": o contorno cerca o cartão INTEIRO, então não há
   dúvida sobre em qual pasta o arquivo vai cair */
.prod-pasta-caixa.alvo-pasta,
.prod-caminho-raiz.alvo-pasta {
  border-color: var(--brand); background: var(--brand-faint);
}
.prod-pasta-card {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 14px; border: 0; border-radius: var(--radius);
  background: none; color: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
}
.prod-pasta-ico { flex: none; display: flex; color: var(--brand); }
.prod-pasta-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-pasta-card-nome {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-pasta-card-qtd { font-size: 12px; color: var(--text-muted); }

.prod-pasta-menu {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-muted);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: var(--transition);
}
.prod-pasta-menu:hover { background: var(--bg); color: var(--text-primary); }

/* ── O CAMINHO DE VOLTA (dentro de uma pasta) ─────────────────────── */
.prod-caminho {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 12px;
}
.prod-caminho-voltar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer; transition: var(--transition);
}
.prod-caminho-voltar:hover { border-color: var(--brand); color: var(--brand); }
.prod-caminho-raiz {
  padding: 5px 9px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text-muted);
  font-family: inherit; font-size: 13px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
  transition: var(--transition);
}
.prod-caminho-raiz:hover { color: var(--text-primary); background: var(--surface); }
.prod-caminho-sep { color: var(--text-muted); }
.prod-caminho-atual { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.prod-caminho-qtd { font-size: 12px; color: var(--text-muted); }
.prod-caminho .prod-pasta-menu { position: static; transform: none; margin-left: auto; }

/* a caixa de pergunta quando o que se pede é um NOME, não um texto */
#prodAskTextarea.uma-linha { min-height: 46px; height: 46px; resize: none; }

.prod-pasta-vazia {
  padding: 18px 14px; border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: 12.5px; text-align: center;
}

/* A caixinha de marcar. À ESQUERDA porque a direita já é da lixeira e
   da estrela — e SEMPRE visível, inclusive sem hover: no celular ela é
   o único caminho para mover arquivo de pasta. */
.prod-item-sel {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.85);
  background: rgba(18,19,26,0.5); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: var(--transition);
}
.prod-item-sel:hover { border-color: var(--brand); }
.prod-item-sel.on { background: var(--brand); border-color: var(--brand); }
.prod-item-caixa.escolhido .prod-item-thumb {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-faint);
}

/* A barra dos marcados. Só existe no DOM quando há seleção (ver
   pintarSelecao) — caixa invisível esticada sobre a tela foi o defeito
   de 08/08 que comia todo clique da página.
   Camada 350: acima da página da coleção (300) e abaixo do
   visualizador (400) e da pergunta (500). */
.prod-sel-barra {
  position: fixed; z-index: 350;
  left: 50%; transform: translateX(-50%); bottom: 22px;
  width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 999px;
  background: var(--text-primary); color: var(--bg, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  font-size: 13px;
}
.prod-sel-conta { opacity: 0.9; }
.prod-sel-conta b { font-weight: 700; }
.prod-sel-barra button {
  padding: 6px 13px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.prod-sel-mover  { background: var(--brand); color: #fff; }
.prod-sel-mover:hover { filter: brightness(1.08); }
.prod-sel-limpar { background: rgba(255,255,255,0.14); color: inherit; }
.prod-sel-limpar:hover { background: rgba(255,255,255,0.24); }
.prod-grade {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.prod-item {
  display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0;
  background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.prod-item-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.prod-item:hover .prod-item-thumb { border-color: var(--brand); box-shadow: var(--shadow); }
.prod-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-item-icone { color: var(--text-muted); }
.prod-item.enviando .prod-item-thumb { opacity: 0.55; }
.prod-item-v, .prod-item-chat {
  position: absolute; top: 6px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; background: rgba(18,19,26,0.78); color: #fff;
}
.prod-item-v    { right: 6px; }
.prod-item-chat { left: 6px; background: var(--brand); }
.prod-item-nome {
  font-size: 12.5px; color: var(--text-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-item-selo { align-self: flex-start; }

/* ── Painel lateral ──────────────────────────────────────────────── */
.prod-lateral {
  width: 340px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
}
.prod-lateral-abas { display: flex; border-bottom: 1px solid var(--border); }
.prod-lat-aba {
  flex: 1; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 13px 6px; border-bottom: 2px solid transparent;
}
.prod-lat-aba.ativo { color: var(--brand); border-bottom-color: var(--brand); }
.prod-lateral-corpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* A coluna dividida ao meio: placar em cima (encolhe se tiver pouco a
   dizer, nunca passa da metade), conversa embaixo com o resto — ela é
   quem mais precisa de altura, é ali que se lê e se escreve. */
.prod-lat-cima {
  flex: 0 1 auto; max-height: 50%; min-height: 0;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border);
}
.prod-lat-baixo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.prod-lat-rotulo {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  padding: 12px 16px 8px; border-bottom: 1px solid var(--border);
}

.prod-placar { padding: 18px; }
.prod-placar-barra { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.prod-placar-barra span { display: block; height: 100%; background: var(--success); transition: width var(--transition); }
.prod-placar-num  { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-top: 10px; }
.prod-placar-lista { list-style: none; margin: 14px 0 0; font-size: 13px; color: var(--text-secondary); }
.prod-placar-lista li { padding: 4px 0; }
.prod-placar-lista b { color: var(--text-primary); }
.prod-placar-dica { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }

/* ── Conversa ────────────────────────────────────────────────────── */
.prod-chat-lista { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.prod-chat-vazio { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; padding: 16px; }
.prod-msg { background: var(--surface-hover); border-radius: var(--radius); padding: 10px 12px; }
.prod-msg.do-cliente { background: var(--brand-faint); }
.prod-msg-quem { font-size: 11.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.prod-msg-quem span { font-weight: 400; color: var(--text-muted); margin-left: 5px; }
.prod-msg-txt { font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.prod-chat-envio { border-top: 1px solid var(--border); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.prod-chat-envio textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--text-primary);
}
.prod-chat-envio textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

/* ── Histórico ───────────────────────────────────────────────────── */
.prod-linha-tempo { padding: 16px; }
.prod-evento { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.prod-evento-ponto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  margin-top: 5px; flex-shrink: 0;
}
.prod-evento-txt  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.prod-evento-txt b { color: var(--text-primary); }
.prod-evento-hora { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── O VISUALIZADOR ──────────────────────────────────────────────── */
body.prod-viewer-aberto { overflow: hidden; }
.prod-viewer {
  position: fixed; inset: 0; z-index: 400; display: none;
  flex-direction: column; background: #0E0F14;
}
.prod-viewer.aberto { display: flex; }
.prod-viewer-topo {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.prod-viewer-x {
  border: 0; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; font-size: 15px; font-family: inherit;
}
.prod-viewer-x:hover { background: rgba(255,255,255,0.2); }
.prod-viewer-nome { flex: 1; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-viewer-nav  { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.65); }
.prod-viewer-nav button {
  border: 0; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; font-family: inherit;
}
.prod-viewer-nav button:hover { background: rgba(255,255,255,0.2); }

.prod-viewer-corpo { flex: 1; display: flex; min-height: 0; }
.prod-viewer-palco {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; min-width: 0; overflow: auto;
}
.prod-viewer-palco img,
.prod-viewer-palco video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
.prod-viewer-palco iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); background: #fff; }
.prod-viewer-palco audio  { width: min(520px, 100%); }
.prod-palco-vazio { color: rgba(255,255,255,0.6); font-size: 14px; text-align: center; }
.prod-palco-vazio p { margin-bottom: 12px; }
.prod-palco-link { text-align: center; }
.prod-palco-link a { color: #fff; font-size: 16px; word-break: break-all; }
.prod-palco-link span { display: block; color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 6px; }

.prod-viewer-lado {
  width: 340px; flex-shrink: 0; background: var(--surface);
  display: flex; flex-direction: column; overflow-y: auto;
}
.prod-v-status { display: flex; align-items: center; gap: 10px; padding: 16px 16px 0; }
.prod-v-num    { font-size: 12px; color: var(--text-muted); }
.prod-acoes-v  { display: flex; gap: 8px; padding: 14px 16px; flex-wrap: wrap; }
.prod-acoes-v button { flex: 1; min-width: 120px; }
.prod-ja { padding: 14px 16px; color: var(--success); font-size: 13px; font-weight: 600; }
.prod-v-hist { padding: 4px 16px 14px; border-bottom: 1px solid var(--border); }
.prod-v-hist-tit { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.prod-v-linha { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; color: var(--text-secondary); }
.prod-v-linha.atual { color: var(--text-primary); font-weight: 600; }
.prod-v-quando { color: var(--text-muted); margin-left: auto; }
.prod-v-voltar { border: 0; background: none; color: var(--brand); cursor: pointer; font-family: inherit; font-size: 12px; text-decoration: underline; }
.prod-v-nota { font-size: 12px; color: var(--text-muted); padding: 0 0 6px 2px; font-style: italic; }

/* ── Celular ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .prod-page-corpo, .prod-viewer-corpo { flex-direction: column; }
  .prod-lateral, .prod-viewer-lado {
    width: 100%; max-height: 46vh; border-left: 0; border-top: 1px solid var(--border);
  }
  /* no celular a coluna vira rodapé baixo: o placar encolhe mais para a
     conversa continuar utilizável */
  .prod-lat-cima { max-height: 38%; }
  .prod-page-main { padding: 16px 14px 40px; }
  .prod-page-head { padding: 12px 14px; }
  .prod-grade { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .prod-page-acoes { width: 100%; }
  .prod-page-acoes button { flex: 1; }
}

/* Miniatura que não carrega (arquivo removido, rede caída) some por
   `onerror` e deixa à mostra o ícone do formato, que fica ATRÁS dela.
   O quadrado quebrado do navegador é a única coisa pior que nenhuma
   imagem: parece defeito nosso mesmo quando não é. */
.prod-item-thumb { position: relative; }
.prod-item-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.prod-item-thumb img { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   PRODUÇÕES · FASE 6 — o lado do CLIENTE
   ───────────────────────────────────────────────────────────────────
   Tudo aqui aparece SÓ para quem entra pelo link secreto. É a parte do
   app que a agência não vê no dia a dia — e por isso a que mais precisa
   dizer sozinha o que fazer.
   ═══════════════════════════════════════════════════════════════════ */

/* A faixa que ocupa, na tela do cliente, o lugar da zona de arrastar da
   agência. Mesmo espaço porque responde a mesma pergunta: "e agora?" */
.prod-faixa {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; margin-bottom: 18px;
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--brand);
  background: var(--brand-faint);
}
.prod-faixa b { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.prod-faixa span { font-size: 12.5px; color: var(--text-secondary); }
/* os dois estados de descanso usam os mesmos pares de cor do resto do
   app (--warning-bg / --success-bg), não tons novos */
.prod-faixa.aviso { background: var(--warning-bg); border-left-color: var(--warning); }
.prod-faixa.ok    { background: var(--success-bg); border-left-color: var(--success); }

/* endereço externo que não passou pelo normalizeLink: vira texto, e a
   pessoa entende que o problema é o link, não a tela */
.prod-palco-ruim { color: var(--text-muted); word-break: break-all; }

/* ── A pergunta curta (no lugar de prompt/confirm) ────────────────── */
.modal.prod-ask { max-width: 480px; }
.prod-ask-txt {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  margin: 0 0 16px;
  /* O texto vem por textContent, e vários avisos já mandavam \n para
     separar parágrafo — inclusive o "o cliente já respondeu" do apagar,
     desde 08/08. Sem esta linha o \n virava um espaço e o aviso saía
     grudado num parágrafo só. Não muda nada em texto sem quebra. */
  white-space: pre-line;
}
.prod-ask .field { margin-bottom: 4px; }
.prod-ask textarea { resize: vertical; min-height: 92px; }
.prod-ask-erro {
  font-size: 12.5px; color: var(--error); margin-top: 6px; font-weight: 500;
}

/* (O bloco .ic-entregas-* do Início antigo do cliente saiu em 28/08/2026
   junto com a tela — a Home nova mora em 11-cliente-mobile.css.) */

/* arquivo cujo envio não se completou: mesma caixa do "você aprovou",
   mas em tom de recado, não de conquista — não há nada a comemorar */
.prod-ja.prod-ja-vazio { color: var(--text-secondary); font-weight: 500; line-height: 1.5; }

/* ── O BRIEFING DA ENTREGA (producoes.js#pintarBriefing) ──────────── */
.prod-brief {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 14px 16px; margin-bottom: 18px;
}
.prod-brief-topo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.prod-brief-topo b {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.prod-brief-acoes { margin-left: auto; display: flex; gap: 12px; }
.prod-brief-acoes button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--brand);
  text-decoration: underline;
}
.prod-brief-campo + .prod-brief-campo { margin-top: 12px; }
.prod-brief-rotulo {
  font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px;
}
/* `pre-wrap` é o ponto do bloco: um roteiro escrito em linhas TEM de
   chegar ao cliente em linhas. Sem isto ele vira um parágrafo só. */
.prod-brief-texto {
  font-size: 13.5px; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.prod-brief-texto a { color: var(--brand); text-decoration: underline; }

/* Fechado: mostra o começo e some no gradiente, em vez de cortar seco —
   a borda desfeita é o que diz "tem mais coisa aqui embaixo". */
.prod-brief.fechado .prod-brief-corpo {
  max-height: 108px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* O convite, quando não há briefing nenhum. Só a agência vê. */
.prod-brief-vazio {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 13px 16px; margin-bottom: 18px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: none; color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  transition: var(--transition);
}
.prod-brief-vazio:hover { border-color: var(--brand); color: var(--brand); }
.prod-brief-vazio span { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* aviso do topo da caixa de briefing: diz de qual tipo são as perguntas */
.prod-brief-aviso {
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  background: var(--brand-faint); border-radius: var(--radius);
  padding: 10px 12px; margin: 0 0 16px;
}
.prod-brief-aviso b { color: var(--text-primary); }

/* A dica herda o CAIXA-ALTA do rótulo do campo — e aqui as dicas são
   frases inteiras, que em maiúsculas viram grito e ocupam duas linhas.
   Mesmo remendo do selo Insider na lateral: devolver o texto ao normal
   sem mexer no rótulo, que continua sendo rótulo. */
.prod-brief.editando .field-hint {
  text-transform: none; letter-spacing: normal; font-size: 12px;
}

/* ── O briefing em modo ESCRITA (mesmo cartão, dentro da página) ──── */
.prod-brief.editando { border-color: var(--brand); }
.prod-brief.editando .field { margin-bottom: 14px; }
.prod-brief.editando .field:last-child { margin-bottom: 0; }
.prod-brief.editando textarea { resize: vertical; }
.prod-brief-rodape {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* `flex: none` explícito: sem ele o Salvar estica e vira uma barra roxa
   do tamanho da tela, enquanto o Cancelar fica miúdo do lado */
.prod-brief-rodape button { flex: none; }
@media (max-width: 768px) {
  .prod-brief-rodape { flex-direction: column-reverse; }
  .prod-brief-rodape button { width: 100%; }
}

/* lista de links de referência do briefing — os cartões são os MESMOS de
   Conteúdos (.pub-ref-card); aqui só entra o arranjo da lista */
.prod-brief-refs { display: flex; flex-direction: column; gap: 6px; }
.prod-brief-refs:empty { display: none; }
.prod-brief-add { display: flex; gap: 8px; margin-top: 8px; }
.prod-brief-add input { flex: 1; min-width: 0; }
.prod-brief-add button { flex: none; white-space: nowrap; }
@media (max-width: 480px) {
  .prod-brief-add { flex-direction: column; }
  .prod-brief-add button { width: 100%; }
}

/* botão de baixar, dentro do visualizador */
.prod-v-baixar { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.prod-v-baixar button { width: 100%; }
.prod-v-baixar span { font-size: 11.5px; color: var(--text-muted); text-align: center; }

/* ── Escolher a capa da entrega (producoes.js#cardItem) ───────────── */
/* O cartão do arquivo virou uma CAIXA com dois botões dentro (abrir e
   "usar de capa"). Botão dentro de botão é HTML inválido — o navegador
   desmonta a marcação sozinho e o clique de dentro nunca chega. */
.prod-item-caixa { position: relative; }
.prod-item-caixa .prod-item { width: 100%; }

/* SEMPRE VISÍVEL. Nasceu aparecendo só no hover e o resultado foi o
   previsível: o dono do app não achou a estrelinha. Função escondida
   atrás de um gesto é função que não existe — no celular nem gesto há.
   Discreta em repouso, cheia quando é a capa. */
/* ⚠️ O `z-index: 2` é o que faz este botão EXISTIR. A miniatura tem
   `z-index: 1` (posto lá em cima para o ícone de reserva ficar atrás
   dela), e sem número aqui o botão perdia para a imagem e ficava
   escondido embaixo dela.

   AO LADO DA LIXEIRA e SÓ NO HOVER (pedido dele, 07/08): os dois botões
   de ação do cartão moram juntos no canto de cima e aparecem quando o
   mouse chega. A EXCEÇÃO é a estrela cheia da capa atual: ela fica
   sempre à mostra porque é informação ("esta é a capa"), não ação —
   escondê-la deixaria a coleção sem nenhum sinal de qual foto é a cara
   dela. */
.prod-capa-btn {
  position: absolute; top: 6px; right: 38px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(18,19,26,0.62); color: #fff;
  font-family: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; opacity: 0; transition: var(--transition);
}
.prod-item-caixa:hover .prod-capa-btn,
.prod-capa-btn:focus-visible { opacity: 1; }
.prod-capa-btn:hover { background: var(--brand) !important; }
.prod-capa-btn.ativa { opacity: 1; background: var(--brand) !important; }
/* no celular não existe hover: os botões ficam sempre visíveis */
@media (hover: none) { .prod-capa-btn { opacity: 1; } }

/* ── A PERGUNTA CURTA TEM DE FICAR POR CIMA DE TUDO ──────────────────
   As camadas do módulo: página da coleção 300, visualizador 400. E o
   `.modal-overlay` do app inteiro vive em 200 — ou seja, a caixa de
   "pedir ajuste" nascia ATRÁS do visualizador e o cliente só a via
   depois de fechar a tela cheia. A ação mais importante que ele faz
   aqui estava, na prática, invisível.

   500 porque ela é a última coisa que aparece: quem a abriu já está
   dentro do visualizador, que já está dentro da página. */
#prodAskOverlay { z-index: 500; }

/* ── Menu de opções dentro da caixa de pergunta ───────────────────── */
.prod-ask-opcao {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); transition: var(--transition);
}
.prod-ask-opcao:hover { border-color: var(--brand); background: var(--brand-faint); }
.prod-ask-opcao b { font-size: 14px; color: var(--text-primary); }
.prod-ask-opcao span { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* A opção COM MINIATURA (escolher a capa): a imagem à esquerda, ocupando
   as duas linhas do texto. Escolher capa é escolha visual — uma lista de
   "IMG_4821.jpg" não ajuda ninguém a achar a foto bonita. */
.prod-ask-opcao.com-mini {
  display: grid; grid-template-columns: 54px 1fr;
  align-items: center; column-gap: 12px; row-gap: 2px;
}
.prod-ask-mini {
  grid-row: 1 / span 2; width: 54px; height: 54px; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg) center / cover no-repeat;
}
/* as opções sem imagem (enviar, voltar ao automático) ganham um quadrado
   com um sinal — sem ele a lista alterna alturas e parece desalinhada */
.prod-ask-mini-sinal {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 20px; line-height: 1;
}
.prod-ask-opcao.com-mini:hover .prod-ask-mini-sinal { color: var(--brand); }

/* Entrega com 40 arquivos: a lista rola dentro da janela em vez de
   empurrar os botões para fora da tela. */
#prodAskMenu { max-height: min(58vh, 460px); overflow-y: auto; }
/* o que destrói não pode parecer o que arquiva */
.prod-ask-opcao.perigo b { color: var(--error); }
.prod-ask-opcao.perigo:hover { border-color: var(--error); background: var(--error-bg); }

/* ── Apagar um arquivo da entrega ─────────────────────────────────── */
.prod-item-apagar {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(18,19,26,0.62); color: #fff;
  cursor: pointer; opacity: 0; transition: var(--transition);
}
.prod-item-caixa:hover .prod-item-apagar,
.prod-item-apagar:focus-visible { opacity: 1; }
.prod-item-apagar:hover { background: var(--error); }
/* no celular não há hover — e apagar é justamente o que não pode ficar
   escondido atrás de um gesto que não existe */
@media (hover: none) { .prod-item-apagar { opacity: 1; } }

/* ── Arrastar para organizar ──────────────────────────────────────── */
.prod-item-caixa[draggable="true"] { cursor: grab; }
.prod-item-caixa.arrastando { opacity: 0.4; cursor: grabbing; }
/* a linha roxa mostra ONDE o arquivo vai cair, em vez de só destacar o
   cartão de baixo — sem isso não dá para saber se cai antes ou depois */
.prod-item-caixa.alvo .prod-item-thumb {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-faint);
}

/* ── Ações rápidas no cartão da coleção (⋯) ───────────────────────── */
/* O cartão virou uma caixa: o <button> do cartão + o ⋯ por fora dele
   (botão dentro de botão é HTML inválido). A caixa herda o lugar do
   cartão na grade, e o cartão volta a ocupar a caixa inteira. */
.prod-card-caixa { position: relative; display: flex; }
.prod-card-caixa .prod-card { width: 100%; }
.prod-card-acoes {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(18,19,26,0.62); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: var(--transition);
}
.prod-card-acoes:hover { background: var(--brand); }

/* aviso de "quem edita" para quem é da equipe mas não é o responsável —
   ocupa o lugar da zona de arrastar, que é onde os olhos procuram */
.prod-so-responsavel {
  padding: 12px 16px; margin-bottom: 18px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}

/* etiqueta "sobre <arquivo>" na conversa unificada — clicável, abre o
   arquivo; é o que deixa a conversa ser UMA sem perder o contexto */
.prod-msg-arquivo {
  display: inline-block; border: 0; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--brand-faint); border-radius: 999px;
  padding: 2px 9px; margin: 2px 0 4px;
}
.prod-msg-arquivo:hover { text-decoration: underline; }
/* no viewer as mensagens são leitura: sem caixa, o bloco não estica */
.prod-chat-so-leitura { flex: none; }

/* ── A régua de VERSÕES em miniaturas (viewer) ────────────────────── */
.prod-v-grade {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  margin-bottom: 8px;
}
.prod-v-thumb {
  position: relative; aspect-ratio: 1; padding: 0; border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--surface);
  overflow: hidden; cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.prod-v-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-v-thumb svg { width: 22px; height: 22px; }
.prod-v-thumb:hover { border-color: var(--brand); }
/* a que está NO PALCO agora: moldura roxa */
.prod-v-thumb.na-tela { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-faint); }
.prod-v-thumb b {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(18,19,26,0.78); border-radius: 999px; padding: 1px 7px;
}
.prod-v-thumb .prod-v-tag {
  position: absolute; right: 4px; top: 4px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: #fff; background: var(--brand); border-radius: 999px; padding: 1px 6px;
}
.prod-v-linha.na-tela-info { padding-top: 2px; }

/* "refizemos depois do seu pedido" — colada na decisão do visualizador.
   ROXO de propósito: verde diria "acabou", e isto ainda pede o clique
   de aprovar — roxo é a cor de "é com você" no app inteiro. */
.prod-refeito {
  padding: 10px 16px 0; font-size: 12.5px; line-height: 1.5;
  color: var(--brand); font-weight: 600;
}

/* ═══ ENVIAR PARA O CLIENTE (compartilhar.js) ═══════════════════════
   A janela que entrega UMA tela funda ao cliente: o link direto para
   a publicação/coleção, e o atalho para mandar no WhatsApp. Usada
   pelos dois módulos — o miolo é desenhado pelo JS. */
.cmp-modal { max-width: 460px; }

/* O link é longo e a pessoa precisa ver que ele é um endereço, não um
   código: fonte de máquina e a linha inteira selecionável num clique. */
.cmp-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px !important;
  background: var(--surface-hover);
}

/* "Ainda não dá" — o motivo em cima, a saída embaixo. A saída é a
   parte que resolve, então ela é que ganha o peso da marca. */
.cmp-bloqueio { padding: 4px 0 4px; }
.cmp-bloqueio-motivo {
  margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-primary);
}
.cmp-bloqueio-saida {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--brand); font-weight: 600;
}

/* Aviso que NÃO impede (ex.: a publicação ainda está pela metade) —
   amarelo de atenção, nunca vermelho: não é erro, é escolha dele. */
.cmp-aviso {
  margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
}

/* Para onde a mensagem vai. Escrito na tela DE PROPÓSITO: o número é
   deduzido a partir do que foi digitado no cadastro, e dedução que
   ninguém confere é dedução que erra calada. */
.cmp-destino {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
.cmp-destino b { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.cmp-destino-sem { color: var(--text-muted); }

/* O subtítulo carrega o NOME do cliente, que pode ser longo ("Quatro
   Estações Modas e Acessórios LTDA"). Sem esta folga ele encosta no ✕
   — medido 0px de distância no celular. Os outros modais da casa têm
   subtítulo fixo e curto, por isso nunca precisaram disto. */
.cmp-modal .modal-header #compartilharSub { padding-right: 10px; }


/* ═══ ETAPAS DE APROVAÇÃO (janela de liga/desliga) ═══════════════════
   Reusa o componente de chavinha da ficha do cliente (.field-switch /
   .sw-*) de propósito: é o mesmo gesto, tem de ter a mesma cara. */
.etapas-modal { max-width: 470px; }
/* A última etapa de pé fica travada — e travado precisa PARECER travado,
   senão a pessoa clica, nada acontece e a tela parece quebrada. */
.etapa-sw:disabled + .sw-trilho { opacity: 0.5; }
.etapa-sw:disabled ~ .sw-texto { opacity: 0.7; }
.etapa-sw:disabled + .sw-trilho,
.sw-linha:has(.etapa-sw:disabled) { cursor: not-allowed; }
.sw-linha:has(.etapa-sw:disabled):hover {
  border-color: var(--border); background: var(--surface);
}