/* ═══════════════════════════════════════════════════
   HOME — Tela "Todos os clientes" (galeria)
   ═══════════════════════════════════════════════════ */
/* (posicionamento e abertura: ver .agency-view, no fim do arquivo) */
.home-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 26px;
}
.home-title {
  font-size: 34px; font-weight: 600; letter-spacing: -0.5px;
  color: var(--text-primary); line-height: 1.1;
}
.home-subtitle { margin-top: 6px; color: var(--text-secondary); font-size: 15px; }
.home-count { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }

.home-new-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff;
  border: none; cursor: pointer;
  padding: 12px 20px; border-radius: var(--radius-lg);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
}
.home-new-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.home-new-btn .plus { font-size: 17px; line-height: 1; }

/* "Adicionar vários" anda junto do "+ Novo Cliente", mas em tom secundário:
   cadastrar um continua sendo o caminho normal; colar a lista é o atalho de
   quem está chegando com a agência inteira na mão. */
.home-new-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.home-lote-btn {
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border-strong); cursor: pointer;
  padding: 11px 16px; border-radius: var(--radius-lg);
  font-size: 13.5px; font-weight: 500;
  transition: color var(--transition), border-color var(--transition);
}
.home-lote-btn:hover { color: var(--brand); border-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   TELA DE CLIENTES — faixa de métricas, filtros, cartão e lista
   ───────────────────────────────────────────────────────────────────────
   Tudo aqui usa os tokens do design system Órbitta (--brand, --et-*,
   --shadow-*). As cores das etapas são as MESMAS da aba Conteúdos e da
   Agenda: o cartão é um resumo, não pode ter paleta própria.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FAIXA DE MÉTRICAS ───────────────────────────────────────────────── */
.home-metrics {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.home-metrics:empty { display: none; }

/* ── Botão "Filtros" do celular ─────────────────────────────────────
   No computador não existe (a fileira inteira cabe). No bloco mobile
   ele aparece e a .home-filtros se recolhe atrás dele. O número (badge)
   diz QUANTOS filtros valem; os chips dizem QUAIS. */
.home-filtros-toggle {
  display: none;
  align-items: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 14px; cursor: pointer;
}
.hft-badge[hidden] { display: none; }   /* o display acima venceria o hidden */
.hft-badge {
  min-width: 18px; height: 18px; border-radius: 99px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

.hm-card {
  display: flex; align-items: center; gap: 11px; min-height: 66px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.hm-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: block; position: relative;
}
/* o "ícone" é a bolinha colorida da etapa com um ponto no meio: sem
   biblioteca de ícones, e a cor já diz de qual etapa se trata */
.hm-ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: 50%; background: currentColor;
}
.hm-ico-criando     { background: var(--et-criando-bg);     color: var(--et-criando); }
.hm-ico-aprovacao   { background: var(--et-aprovacao-bg);   color: var(--et-aprovacao); }
.hm-ico-aprovados   { background: var(--et-aprovados-bg);   color: var(--et-aprovados); }
.hm-ico-agendados   { background: var(--et-agendados-bg);   color: var(--et-agendados); }
.hm-ico-finalizados { background: var(--et-finalizados-bg); color: var(--et-finalizados); }
.hm-ico-alerta      { background: var(--error-bg);          color: var(--error); }

/* "Precisam de você" é a pergunta que se faz ao abrir a tela: fica na frente
   e um pouco mais forte que os demais. Quando está zerado (dia limpo), perde
   o vermelho e vira verde — a ausência de trabalho também é informação. */
.hm-alerta { border-color: var(--error); }
.hm-alerta .hm-num { color: var(--error); }
.hm-alerta.is-calmo { border-color: var(--border); }
.hm-alerta.is-calmo .hm-num { color: var(--success); }
.hm-alerta.is-calmo .hm-ico-alerta { background: var(--success-bg); color: var(--success); }

/* cartão da faixa usado como FILTRO ligado */
.hm-card[aria-pressed] { position: relative; }
.hm-card.is-ligado {
  border-color: var(--brand); background: var(--brand-faint);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.hm-card.is-ligado .hm-pct { background: var(--surface); }

.hm-dados { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hm-num { font-size: 21px; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
/* o rótulo QUEBRA em duas linhas em vez de virar reticência: "Aguardando
   aprovação" cortado em "Aguard…" não diz nada a ninguém */
.hm-rot {
  font-size: 11.5px; line-height: 1.25; color: var(--text-secondary); margin-top: 2px;
}
.hm-pct {
  flex-shrink: 0; align-self: flex-start;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  background: var(--bg); border-radius: 999px; padding: 2px 7px;
}

/* ── TOOLBAR: busca + filtros ─────────────────────────────────────────
   Gruda no topo ao rolar: numa lista de 200 clientes, ter que voltar lá em
   cima pra trocar um filtro é o tipo de atrito que faz a pessoa desistir de
   filtrar. O fundo é opaco e as margens negativas cobrem o respiro lateral
   do .home-inner, senão os cartões apareceriam passando por baixo. */
.home-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  position: sticky; top: 0; z-index: 30;
  margin: 0 -32px 12px; padding: 12px 32px;
  background: var(--bg);
  /* filete + sombra rasa: parado parece um divisor entre filtros e lista;
     grudada no topo, é o que mostra que os cartões passam POR BAIXO dela */
  box-shadow: 0 1px 0 var(--border), 0 8px 14px -10px rgba(18,19,26,.16);
}
.home-search {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 16px; height: 44px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.home-search:focus-within { border-color: var(--brand-light); box-shadow: 0 0 0 3px var(--brand-ring); }
.home-search svg { color: var(--text-muted); flex-shrink: 0; }
.home-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text-primary); font-family: inherit;
}
/* lembrete do atalho "/" — some assim que o campo é usado, pra não virar
   enfeite competindo com o texto digitado */
.home-search-kbd {
  flex-shrink: 0; padding: 2px 7px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted);
  line-height: 1.4;
}
.home-search:focus-within .home-search-kbd { display: none; }

.home-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* filtro que não tem o que oferecer (nenhum segmento cadastrado, equipe
   ainda sem migração) some em vez de aparecer vazio e sem efeito */
.hf.hf-off { display: none; }

.home-sel {
  height: 44px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0 32px 0 13px; font-size: 13.5px; font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.home-sel:hover { border-color: var(--border-strong); }
/* filtro ligado ganha a cor da marca — dá pra ver de longe o que está ativo */
.home-sel.is-ativo {
  border-color: var(--brand); color: var(--brand);
  background-color: var(--brand-faint); font-weight: 600;
}

.home-fav-btn {
  height: 44px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.home-fav-btn:hover { border-color: var(--border-strong); }
.home-fav-btn span { color: var(--text-muted); font-size: 15px; line-height: 1; }
.home-fav-btn.is-ativo {
  border-color: var(--warning); background: var(--warning-bg);
  color: var(--warning); font-weight: 600;
}
.home-fav-btn.is-ativo span { color: var(--warning); }

/* alternador grade/lista */
.home-view {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); height: 44px;
  align-items: center;
}
.home-view-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.home-view-btn:hover { color: var(--text-secondary); background: var(--bg); }
.home-view-btn.is-ativo { background: var(--brand-faint); color: var(--brand); }

/* ── AVISO DA CONTA (uma vez, não por cartão) ────────────────────────── */
.home-aviso {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--warning-bg); border: 1px solid var(--warning);
  border-radius: var(--radius-lg);
}
.home-aviso-ico { font-size: 17px; flex-shrink: 0; line-height: 1; }
.home-aviso-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.home-aviso-txt strong { font-weight: 650; }
.home-aviso-btn {
  flex-shrink: 0; height: 34px; padding: 0 14px;
  background: var(--surface); color: var(--warning);
  border: 1px solid var(--warning); border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.home-aviso-btn:hover { background: var(--warning); color: #fff; }

/* ── CHIPS DOS FILTROS ATIVOS ────────────────────────────────────────── */
.home-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.home-chips:empty { display: none; }
.home-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px;
  background: var(--brand-faint); color: var(--brand);
  border: 1px solid var(--brand-light); border-radius: 999px;
  font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background var(--transition);
}
.home-chip:hover { background: var(--brand-ring); }
.home-chip span { font-size: 10px; opacity: .7; }
.home-chip-tudo {
  background: transparent; color: var(--text-secondary);
  border-color: var(--border-strong);
}
.home-chip-tudo:hover { background: var(--bg); color: var(--text-primary); }

/* ── GRADE DE CARTÕES ────────────────────────────────────────────────── */
/* 338px é calibrado: numa tela de notebook dá 3 cartões por fileira, e numa
   tela grande dá 4 — sem chegar a 5, que deixaria o cartão estreito demais
   pros cinco chips. */
.home-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(338px, 1fr));
}

/* O cartão em 4 faixas: mídia + identificação em cima, chips no meio,
   rodapé embaixo. Chips e rodapé atravessam a largura toda — é o que deixa
   os números alinhados de um cartão pro outro, mesmo com nomes de tamanhos
   diferentes. */
.cc {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cc:hover, .cc:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
  outline: none;
}
.cc:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--brand-ring); }
.cc.is-fav { border-color: var(--warning); }

/* ── mídia: a miniatura da publicação ────────────────────────────────── */
/* A miniatura é SEMPRE quadrada (1:1), igual em todo cartão — foto em pé e
   foto deitada passam a ocupar o mesmo espaço, então a fileira fica alinhada.
   O `aspect-ratio` define a altura da linha; o resto do cartão foi encolhido
   pra caber dentro dela, senão sobraria um vão embaixo da foto. */
/* A foto abraça a identificação E a linha de chips (linhas 1–2), e o lado do
   quadrado é a largura da coluna (158px).

   ⚠️ Aqui NÃO se usa `aspect-ratio`: com ele, um cartão de conteúdo mais alto
   (um cliente "Pausado" ganha etiqueta de status, por exemplo) deixaria uma
   faixa branca embaixo da foto — e forçar altura junto com aspect-ratio
   estica a LARGURA e a foto vaza pra fora do cartão (aconteceu no celular).
   `stretch` + `min-height` resolve os dois: quadrada no caso comum, um
   pouquinho mais alta quando o texto pede, e vão branco nunca. */
.cc-media {
  grid-column: 1; grid-row: 1;
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; align-self: start;
  display: flex; align-items: center; justify-content: center;
}
.cc-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sem publicação com mídia, a foto do cliente entra menor e centralizada —
   logo esticada em corte de capa fica horrível */
.cc-thumb-avatar {
  width: 66px; height: 66px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.cc-iniciais {
  font-size: 30px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.22);
}

.cc-star {
  position: absolute; top: 8px; left: 8px;
  width: 28px; height: 28px; border: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.86); backdrop-filter: blur(4px);
  color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.cc:hover .cc-star, .cc:focus-within .cc-star, .cc-star.is-on { opacity: 1; }
.cc-star:hover { background: #fff; color: var(--warning); }
.cc-star.is-on { color: var(--warning); }

/* selo de urgência: fica colado na base da imagem, sobre um véu escuro pra
   ler em cima de qualquer foto */
.cc-urg {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 9px;
  font-size: 10.5px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72) 42%);
  display: block; line-height: 1.3;
}
.cc-urg-atrasado::before  { content: '⚠ '; }
.cc-urg-recado::before    { content: '💬 '; }
.cc-urg-aprovacao::before { content: '⏳ '; }
.cc-urg-parado::before    { content: '· '; }

/* ── identificação ───────────────────────────────────────────────────── */
.cc-main {
  grid-column: 2; grid-row: 1;
  min-width: 0; padding: 11px 12px 9px;
  display: flex; flex-direction: column; justify-content: center;
}
.cc-topo { display: flex; justify-content: flex-end; margin-bottom: 3px; }
.cc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.cc-nome {
  margin: 0; font-size: 16px; font-weight: 650; color: var(--text-primary);
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-handle {
  margin-top: 2px; font-size: 12.5px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-muted { color: var(--text-muted); font-style: italic; }

.cc-tags { margin-top: 7px; display: flex; gap: 5px; flex-wrap: wrap; }
.cc-tag {
  font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 7px;
  background: var(--bg); color: var(--text-secondary);
  border: 1px solid var(--border);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Responsáveis: fotos sobrepostas + o nome de quem cuida.
   Sem `margin-top:auto` de propósito — empurrar isto pro rodapé do bloco
   abria um vão branco no meio do cartão quando o cliente não tinha segmento
   ou responsável. O conteúdo agora se empilha de cima pra baixo, e ponto. */
.cc-equipe {
  margin-top: 7px;
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.cc-avs { display: flex; flex-shrink: 0; }
.cc-av {
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--surface); margin-left: -6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-faint); color: var(--brand);
  font-size: 9.5px; font-weight: 700; flex-shrink: 0;
}
.cc-av:first-child { margin-left: 0; }
.cc-av img { width: 100%; height: 100%; object-fit: cover; }
.cc-av-mais { background: var(--border); color: var(--text-secondary); }
.cc-equipe-nome {
  font-size: 12px; color: var(--text-secondary); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-mais { color: var(--text-muted); margin-left: 4px; }
/* uma linha só: quebrado em duas, este aviso engordava o cartão inteiro */
.cc-equipe-vazia {
  margin-top: 7px;
  font-size: 11.5px; color: var(--text-muted); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── chips das etapas ────────────────────────────────────────────────── */
/* Chips das etapas: caixinhas discretas. O fundo colorido é só pra separar
   as cinco etapas — quanto menor a "moldura", menos ruído entre o número
   (que é o que importa) e o resto do cartão. */
.cc-chips {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  align-content: start;
  /* 8px de respiro entre a base da foto e a fileira de números — sem isso
     as etiquetas encostam na foto e parecem parte dela */
  padding: 8px 12px 10px;
}
.cc-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 3px 2px; border-radius: 6px; min-width: 0;
}
.cc-chip strong { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.cc-chip-rot {
  font-size: 8.5px; font-weight: 500; line-height: 1.2; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-chip-criando     { background: var(--et-criando-bg);     color: var(--et-criando); }
.cc-chip-aprovacao   { background: var(--et-aprovacao-bg);   color: var(--et-aprovacao); }
.cc-chip-aprovados   { background: var(--et-aprovados-bg);   color: var(--et-aprovados); }
.cc-chip-agendados   { background: var(--et-agendados-bg);   color: var(--et-agendados); }
.cc-chip-finalizados { background: var(--et-finalizados-bg); color: var(--et-finalizados); }
/* Entregas (módulo Produções). Cor da marca para se distinguir das cinco
   etapas de publicação — não é mais uma etapa da esteira, é outro
   assunto. Vira laranja de aviso quando alguma espera a agência. */
.cc-chip-entrega { background: var(--brand-faint); color: var(--brand); }
.cc-chip-entrega.is-alerta { background: var(--warning-bg); color: var(--warning); }
/* etapa zerada sai do caminho da leitura, mas continua na linha pro
   alinhamento entre cartões não quebrar */
.cc-chip.is-zero { background: transparent; color: var(--text-muted); }

/* cliente sem publicação nenhuma: em vez de cinco zeros, o próximo passo */
.cc-chips-vazio {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.cc-vazio { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.cc-vazio-btn {
  flex-shrink: 0; height: 26px; padding: 0 10px;
  background: transparent; color: var(--brand);
  border: 1px dashed var(--brand-light); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--transition), border-style var(--transition);
}
.cc-vazio-btn:hover { background: var(--brand-faint); border-style: solid; }

/* ── ÚLTIMA MENSAGEM DO CLIENTE ──────────────────────────────────────────
   UMA linha, cortada com reticências — é a voz do cliente, não um chat. O
   `min-width:0` no container é o que deixa o ellipsis funcionar dentro da
   grade; sem ele o texto esticaria o cartão. */
.cc-msg {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  margin-top: 7px;
}
.cc-msg-ico { flex-shrink: 0; font-size: 11px; }
.cc-msg-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-secondary); font-style: italic;
}

/* ── rodapé: quando publica + ações ──────────────────────────────────── */
.cc-rodape {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-top: 1px solid var(--border);
  background: var(--surface-hover);
}
.cc-quando { display: flex; flex-direction: column; min-width: 0; }
/* o rótulo NÃO quebra: "Próxima / publicação" em duas linhas empurraria o
   rodapé pra baixo e desalinharia os cartões da mesma fileira */
.cc-quando-rot {
  font-size: 9px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.cc-quando-val {
  font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-quando-val.is-vazio { color: var(--text-muted); font-weight: 500; }

.cc-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; }
.cc-abrir {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--brand-light); border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cc:hover .cc-abrir, .cl:hover .cc-abrir { background: var(--brand); color: #fff; border-color: var(--brand); }
.cc-abrir:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }

.cc-mais-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cc-mais-btn:hover { background: var(--surface); color: var(--text-primary); border-color: var(--border); }

/* menu de ações rápidas — abre pra cima, senão o último cartão da página
   abriria o menu pra fora da tela */
.cc-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  min-width: 178px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.cc-menu[hidden] { display: none; }
.cc-menu button {
  text-align: left; padding: 9px 11px; border: none; background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; color: var(--text-primary); cursor: pointer;
  white-space: nowrap;
}
.cc-menu button:hover { background: var(--brand-faint); color: var(--brand); }

/* cliente fora de movimento entra apagadinho (só aparece quando o filtro
   pede — ver visibleClients em home.js) */
.cc.is-guardado .cc-media { filter: grayscale(.7); opacity: .78; }

/* ── VISÃO EM LISTA ──────────────────────────────────────────────────── */
.home-lista {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.cl-cabecalho, .cl {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 30px 44px minmax(150px, 1.5fr) 116px minmax(120px, 1fr)
                         minmax(210px, 1.3fr) 104px minmax(120px, 1fr) 118px;
  padding: 10px 16px;
}
.cl-cabecalho {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
}
.cl {
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background var(--transition);
}
.cl:last-child { border-bottom: none; }
.cl:hover, .cl:focus-visible { background: var(--surface-hover); outline: none; }
.cl:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-ring); }

.cl-star {
  width: 26px; height: 26px; border: none; background: transparent;
  color: var(--text-muted); font-size: 15px; cursor: pointer; border-radius: 7px;
}
.cl-star:hover { color: var(--warning); background: var(--bg); }
.cl-star.is-on { color: var(--warning); }
.cl-foto {
  width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.cl-foto .cc-iniciais { font-size: 15px; }
.cl-foto .cc-thumb-avatar { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.cl-id { display: flex; flex-direction: column; min-width: 0; }
.cl-nome {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-sub {
  font-size: 11.5px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-status {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.cl-equipe { min-width: 0; }
.cl-equipe .cc-equipe, .cl-equipe .cc-equipe-vazia { margin-top: 0; padding-top: 0; }
/* na lista o aviso de "sem responsável" cabe numa linha só: quebrado em duas
   ele engorda a linha e desalinha a tabela inteira */
.cl-equipe .cc-equipe-vazia {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cl-chips .cc-chip { padding: 4px 2px; }
.cl-chips .cc-chip strong { font-size: 12px; }
.cl-chips .cc-chip-rot { display: none; }   /* na lista o número basta; a cor diz a etapa */
.cl-prox { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.cl-urg { min-width: 0; }
.cl-urg .cc-urg {
  position: static; background: none; padding: 0; color: var(--text-secondary);
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-urg .cc-urg-atrasado { color: var(--error); }
.cl-urg .cc-urg-recado   { color: var(--brand); }
.cl-acoes { display: flex; align-items: center; gap: 4px; position: relative; justify-content: flex-end; }
/* na lista as ações só aparecem na linha sob o cursor — 300 linhas com
   botão sempre aceso viram uma parede de roxo */
.cl .cc-abrir, .cl .cc-mais-btn { opacity: 0; transition: opacity var(--transition); }
.cl:hover .cc-abrir, .cl:hover .cc-mais-btn,
.cl:focus-within .cc-abrir, .cl:focus-within .cc-mais-btn { opacity: 1; }

/* ── PAGINAÇÃO ───────────────────────────────────────────────────────── */
.home-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 22px; flex-wrap: wrap;
}
.home-pager:empty { display: none; }
.hp-nums { display: flex; align-items: center; gap: 4px; }
.hp-num, .hp-nav {
  min-width: 34px; height: 34px; padding: 0 9px;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.hp-num:hover:not(.is-atual), .hp-nav:hover:not(:disabled) {
  border-color: var(--border-strong); color: var(--text-primary);
}
.hp-num.is-atual {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.hp-nav:disabled { opacity: .4; cursor: default; }
.hp-gap { color: var(--text-muted); padding: 0 2px; }
.hp-por {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-secondary);
}
.hp-por select {
  height: 34px; padding: 0 8px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; cursor: pointer;
}

/* ── STATUS DO CLIENTE: uma paleta só, em toda tela ──────────────────────
   As mesmas 4 cores valem pra bolinha (.cc-dot), pra etiqueta do cartão
   (.cc-status/.cl-status) e pra do cabeçalho do cliente (.cw-badge) — por
   isso as regras são de classe (.st-*), não do componente. Fonte da verdade
   do status: clienteStatus() no utils.js. */
.cc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }

.cc-status.st-ativo,      .cl-status.st-ativo,      .cw-badge.st-ativo      { background: var(--success-bg); color: var(--success); }
.cc-status.st-negociacao, .cl-status.st-negociacao, .cw-badge.st-negociacao { background: var(--warning-bg); color: var(--warning); }
.cc-status.st-pausado,    .cl-status.st-pausado,    .cw-badge.st-pausado    { background: var(--border);     color: var(--text-secondary); }
.cc-status.st-encerrado,  .cl-status.st-encerrado,  .cw-badge.st-encerrado  { background: var(--bg);         color: var(--text-muted); border: 1px solid var(--border); }

/* link no contador: "N pausados ou encerrados" abre o filtro */
.home-count-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--fonte); font-size: inherit; color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.home-count-link:hover { color: var(--brand-dark); }

/* ── RESPONSIVO ──────────────────────────────────────────────────────── */
/* A lista vira cartão empilhado bem antes do celular: 9 colunas não cabem
   num tablet sem virar papinha. */
@media (max-width: 1180px) {
  .cl-cabecalho { display: none; }
  .cl {
    grid-template-columns: 30px 44px minmax(0, 1fr) auto;
    grid-template-areas:
      'star foto id status'
      '.    .    equipe equipe'
      '.    .    chips chips'
      '.    .    prox acoes';
    row-gap: 8px; padding: 12px 16px;
  }
  .cl-star { grid-area: star; } .cl-foto { grid-area: foto; }
  .cl-id { grid-area: id; }     .cl-status { grid-area: status; }
  .cl-equipe { grid-area: equipe; } .cl-chips { grid-area: chips; }
  .cl-prox { grid-area: prox; } .cl-acoes { grid-area: acoes; }
  .cl-urg { display: none; }
  .cl .cc-abrir, .cl .cc-mais-btn { opacity: 1; }
}

@media (max-width: 768px) {
  .home-inner { padding: 28px 18px 56px; }
  .home-title { font-size: 26px; }
  .home-topbar { flex-direction: column; }
  /* o respiro lateral muda no celular, e a barra fixa tem que acompanhar */
  .home-toolbar { margin: 0 -18px 12px; padding: 10px 18px; }
  .home-search-kbd { display: none; }   /* sem teclado físico, o atalho não existe */
  .home-new-btn { align-self: stretch; justify-content: center; }
  .home-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Os 6 números viram uma FITA compacta que rola de lado: a informação
     continua à mão, mas a lista de clientes (o trabalho de verdade) sobe
     duas telas — antes ela ficava enterrada sob números + filtros. */
  .home-metrics {
    display: flex; overflow-x: auto; gap: 8px; margin-bottom: 14px;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .home-metrics::-webkit-scrollbar { display: none; }
  .hm-card { flex: 0 0 auto; min-height: 0; padding: 8px 12px; gap: 8px; }
  /* A fileira de filtros vive atrás do botão "Filtros" */
  .home-filtros-toggle { display: inline-flex; }
  .home-filtros { display: none; }
  .home-toolbar.filtros-abertos .home-filtros { display: flex; }
  /* Aviso com botão do lado espremia o texto numa coluna de 8 letras:
     no celular o botão desce e ocupa a largura toda. */
  .home-aviso { flex-wrap: wrap; }
  .home-aviso-btn { flex: 1 1 100%; }
  /* A janela de rolagem das telas da agência TERMINA ACIMA da barra de
     navegação: assim nenhum botão jamais fica coberto por ela (a peneira
     reprova botão com o clique comido — já pegou isso duas vezes).
     58px ≈ altura da barra; o env() soma a barrinha de gesto do iPhone. */
  /* `body` no seletor: a definição base (.agency-view, bottom: 0) vive
     mais ABAIXO neste arquivo e ganharia no empate — o body desempata. */
  body .agency-view { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .agency-inner { padding-bottom: 40px; }
  .hm-ico { width: 28px; height: 28px; }
  .hm-num { font-size: 18px; }
  .hm-pct { display: none; }
  /* no celular cada filtro ocupa metade da largura: dois por linha, sem
     seletor espremido nem rolagem lateral */
  .home-filtros { width: 100%; }
  .home-filtros .hf { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .home-sel { width: 100%; }
  .home-fav-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .home-view { margin-left: auto; }
}

@media (max-width: 480px) {
  .cc { grid-template-columns: 116px minmax(0, 1fr); }

  .cc-main { padding: 11px 12px 9px; }
  .cc-chips { padding: 8px 12px 10px; gap: 4px; }
  .cc-chip-rot { font-size: 8px; }
  .cc-rodape { padding: 10px 12px; gap: 10px; }
  .cc-star { opacity: 1; }   /* sem cursor não existe hover: a estrela fica */
}

/* estado vazio */
.home-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 64px 24px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}
.home-empty-icon { font-size: 40px; margin-bottom: 12px; }
.home-empty-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.home-empty-text { margin: 8px auto 20px; max-width: 380px; color: var(--text-secondary); font-size: 14px; }
.home-empty .home-new-btn { margin: 0 auto; }

/* ═══════════════════════════════════════════════════
   NÍVEL 1 — TELAS DA AGÊNCIA
   Ocupam o espaço branco ao lado da lateral, que continua visível.
   ═══════════════════════════════════════════════════ */
.agency-view {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--sidebar-w);
  transition: left var(--transition);
  z-index: 40;
  background: var(--bg);
  overflow-y: auto;
}
.agency-view.open { display: block; }

/* fora de um cliente, o painel do cliente nem existe na tela */
body:not(.in-client) .main { display: none; }
/* e o inverso: dentro de um cliente, NENHUM painel da agência aparece, por
   via das dúvidas — trava de CSS além da limpeza feita em JS (Nav.openClient/
   startClientLink), pra um painel "aberto" de um estado anterior nunca ficar
   sobreposto ao espaço do cliente (bug visto 02/08). */
body.in-client .agency-view { display: none !important; }

/* O cliente (link secreto ou "Ver como cliente") nunca vê a lateral da
   agência nem o rastro "Agência › Clientes › Fulano" — pra ele, o espaço do
   cliente É o app inteiro, não uma sub-tela dentro de algo maior. */
.mode-client .sidebar,
.mode-client .sidebar-toggle,
.mode-client .sidebar-overlay,
.mode-client .cw-crumb { display: none !important; }
.mode-client .main { margin-left: 0 !important; }

/* Sem a lateral, o conteúdo do cliente ficava esparramado de beirada a
   beirada em monitor grande (calendário, métricas e cards nadando na tela).
   O teto de largura vale só do CONTEÚDO pra baixo — decisão dele 04/08: o
   cabeçalho do cliente e a fileira de abas continuam usando a tela toda,
   quem precisa de limite é o que vem depois delas. */
body.mode-client #inicioSection,
body.mode-client #mensagensSection,
/* na Agenda o teto vale pro miolo, não pra seção inteira: a barra do mês
   (.top-bar) fica de ponta a ponta junto com o cabeçalho e o menu — pedido
   dele 04/08 */
body.mode-client #agendaSection > :not(.top-bar),
body.mode-client #conteudosSection,
body.mode-client #tarefasSection,
body.mode-client #marcaSection,
body.mode-client #reunioesSection,
body.mode-client #metricasSection {
  /* o width: 100% é obrigatório: margem automática nas laterais desliga o
     "estica sozinho" do flex, e sem ele a seção encolhe até o tamanho do
     conteúdo em vez de ocupar o teto de largura */
  width: 100%;
  max-width: var(--client-max);
  margin-left: auto;
  margin-right: auto;
}
/* as caixas internas seguem o teto de fora (senão cada aba se centralizaria
   por conta própria, com largura diferente da vizinha) */
body.mode-client .calendar-wrap,
body.mode-client .reunioes-wrap,
body.mode-client .marca-wrap,
body.mode-client .metricas-wrap { max-width: 100%; }

.agency-inner { max-width: 1860px; margin: 0 auto; padding: 40px 32px 64px; }

.agency-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand);
  background: var(--brand-faint);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
/* dentro do selo: "Agência" apagadinho, a barra bem sutil e a página em destaque */
.eyebrow-root { color: var(--text-secondary); font-weight: 500; }
.eyebrow-sep  { color: var(--text-secondary); opacity: 0.45; font-weight: 400; }
.eyebrow-page { color: var(--brand); }
.agency-head { margin-bottom: 30px; }
.agency-title {
  font-size: 34px; font-weight: 600; letter-spacing: -0.5px;
  color: var(--text-primary); line-height: 1.1;
}
.agency-subtitle { margin-top: 6px; color: var(--text-secondary); font-size: 15px; }

/* ── Configurações: logo da agência ── */
.config-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 24px 28px; margin-bottom: 20px;
}
.config-section-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.config-section-text { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.config-logo-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.config-logo-preview {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--brand-faint); background-position: center; background-size: cover; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--brand);
}
.config-logo-actions { display: flex; gap: 10px; }
.config-logo-row.is-busy { opacity: 0.6; pointer-events: none; }

.agency-soon {
  text-align: center; padding: 72px 24px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}
.agency-soon-icon {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--brand-faint); color: var(--brand);
}
.agency-soon-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.agency-soon-text {
  margin: 8px auto 0; max-width: 420px;
  color: var(--text-secondary); font-size: 14px; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD GERAL — centro de comando (dashboard.js)
   Os mesmos blocos (.db-panel, .db-card…) servem também ao Início do
   cliente (inicio-cliente.js) — componentes reutilizados, não copiados.
   ═══════════════════════════════════════════════════════════════════ */
.db-inner { padding-top: 32px; }

/* ── cabeçalho: saudação + busca + ação rápida ── */
.db-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.db-title { font-size: 26px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.db-sub { margin-top: 4px; font-size: 14px; color: var(--text-secondary); }
.db-header-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.db-search input {
  border: none; outline: none; background: none; font-family: inherit;
  font-size: 13.5px; color: var(--text-primary); width: 170px;
}
.db-quick { position: relative; }
.db-quick-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; }
.db-quick-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 6px;
  min-width: 210px;
}
.db-quick-menu.open { display: block; }
.db-quick-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; background: none; border: none; border-radius: var(--radius);
  cursor: pointer; font-family: inherit; font-size: 13.5px; text-align: left;
  color: var(--text-primary);
}
.db-quick-item:hover { background: var(--brand-faint); color: var(--brand); }

/* ── cards de resumo do dia ── */
.db-resumo {
  display: grid; gap: 14px; margin-bottom: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
}
.db-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 18px 20px;
  box-shadow: var(--shadow-sm); cursor: pointer; font-family: inherit;
  text-align: left; display: flex; flex-direction: column; gap: 2px;
  border-top: 3px solid var(--border-strong); min-width: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.db-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.db-card-value { font-size: 30px; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.db-card-label { font-size: 13.5px; font-weight: 500; color: var(--text-primary); margin-top: 6px; }
.db-card-sub { font-size: 12px; color: var(--text-muted); }
.db-c-aprovacao { border-top-color: var(--stories); }
.db-c-ajuste    { border-top-color: var(--warning); }
.db-c-pub       { border-top-color: var(--feed); }
.db-c-reuniao   { border-top-color: var(--reuniao); }

/* card de destaque: o CTA do dia */
.db-c-cta {
  cursor: default; border-top-color: var(--brand);
  background: linear-gradient(135deg, var(--brand-faint) 0%, var(--surface) 60%);
}
.db-c-cta:hover { transform: none; box-shadow: var(--shadow-sm); }
.db-cta-icone { font-size: 20px; }
.db-cta-titulo { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.db-cta-texto { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.db-cta-btn { margin-top: 10px; align-self: flex-start; font-size: 13px; padding: 9px 16px; }

/* ── painéis (bloco branco padrão) ── */
.db-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  overflow: hidden; min-width: 0; display: flex; flex-direction: column;
}
.db-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px 10px; flex-wrap: wrap;   /* no celular a dica desce de linha */
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.db-panel-title { font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
.db-panel-hint { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.db-panel-link {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--brand); white-space: nowrap;
}
.db-panel-link:hover { text-decoration: underline; }
.db-vazio {
  padding: 36px 24px; text-align: center; color: var(--text-secondary);
  font-size: 13.5px; line-height: 1.7;
}
.db-vazio-cta {
  margin-top: 6px; background: var(--brand-faint); color: var(--brand);
  border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.db-carregando { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }

/* ── faixa do meio: timeline / alertas / calendário ── */
/* (o respiro entre faixas é da .db-sec — margem aqui dobraria o vão) */
.db-meio {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}

/* timeline do dia */
.db-tl { display: flex; flex-direction: column; }
.db-tl-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 22px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border); font-family: inherit; text-align: left;
}
.db-tl-row:last-child { border-bottom: none; }
.db-tl-row:hover { background: var(--surface-hover); }
.db-tl-hora { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); width: 42px; flex-shrink: 0; }
.db-tl-ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.db-tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.db-tl-titulo {
  font-size: 13.5px; font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-tl-meta { font-size: 12px; color: var(--text-muted); }
.db-tl-badge { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.tl-reuniao  { background: var(--reuniao-bg); color: var(--reuniao); }
.tl-gravacao { background: var(--gravacao-bg); color: var(--gravacao); }
.tl-interno  { background: var(--et-criando-bg); color: var(--et-criando); }
.tl-pub      { background: var(--feed-bg); color: var(--feed); }
span.db-tl-ponto.tl-reuniao  { background: var(--reuniao); }
span.db-tl-ponto.tl-gravacao { background: var(--gravacao); }
span.db-tl-ponto.tl-interno  { background: var(--et-criando); }
span.db-tl-ponto.tl-pub      { background: var(--feed); }

/* alertas */
.db-alertas { display: flex; flex-direction: column; }
.db-alerta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 22px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border); font-family: inherit; text-align: left;
}
.db-alerta:last-child { border-bottom: none; }
.db-alerta:hover { background: var(--surface-hover); }
.db-alerta-icone {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--bg);
}
/* g3 = recado do cliente esperando resposta. Cor da marca, não o vermelho de
   erro: tem gente aguardando, mas nada quebrou. */
.db-alerta-g3 .db-alerta-icone { background: var(--brand-faint); }
.db-alerta-g2 .db-alerta-icone { background: var(--error-bg); }
.db-alerta-g1 .db-alerta-icone { background: var(--warning-bg); }
/* Aprovação: verde de coisa cumprida. É `tom`, não grau — a prioridade
   dela continua no pé da lista; o verde só evita que boa notícia use a
   mesma roupa de um problema. */
.db-alerta-bom .db-alerta-icone { background: var(--success-bg); }

/* Pisca de confirmação do `Dashboard.focar()`. Existe para o clique
   sempre ACUSAR: quando o painel de destino já está à vista, não há o que
   rolar, e sem isto o botão parecia quebrado. */
@keyframes db-pulso {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  100% { box-shadow: 0 0 0 14px rgba(138, 43, 255, 0); }
}
.db-pulso { animation: db-pulso 900ms ease-out; border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  /* sem animação, mas o aviso continua: a borda da marca por um instante */
  .db-pulso { animation: none; }
}
.db-alerta-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* o título de um recado é texto de gente (comprido): uma linha e reticências,
   igual ao meta — o alerta é pra varrer com o olho, o texto todo está no clique */
.db-alerta-titulo { font-size: 13.5px; font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-alerta-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Carimbo de quando aconteceu. `tabular-nums` para as horas ficarem
   alinhadas uma embaixo da outra — número de largura variável faz uma
   coluna de horários dançar, e é justamente para comparar que ele está
   ali. Não encolhe: o texto do recado é que cede espaço. */
.db-alerta-quando {
  flex-shrink: 0; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 4px;
}
.db-alerta-go { color: var(--text-muted); font-size: 18px; flex-shrink: 0; }

/* janela "Todos os alertas" — o painel do dashboard mostra 6; aqui vai a
   lista inteira. As linhas são as MESMAS do painel e do sininho
   (`.db-alerta`), então a margem negativa desfaz o padding do modal pra
   elas encostarem nas bordas e a divisória correr de ponta a ponta. */
.alertas-todos-modal { max-width: 560px; }
.alertas-todos-lista {
  margin: 4px -32px -28px; border-top: 1px solid var(--border);
  max-height: 60vh; overflow-y: auto;
}
.alertas-todos-lista .db-vazio { padding: 28px 22px; }
@media (max-width: 480px) {
  .alertas-todos-lista { margin-left: -20px; margin-right: -20px; }
}

/* mini calendário */
.db-cal { padding: 14px 18px 16px; }
.db-cal-sem {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px;
}
.db-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.db-cal-dia {
  position: relative; height: 34px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--text-primary);
  border-radius: 9px;
}
.db-cal-hoje { background: var(--brand); color: #fff; font-weight: 600; }
.db-cal-marcas { position: absolute; bottom: 3px; display: flex; gap: 2px; }
.db-cal-p, .db-cal-c { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
.db-cal-p { background: var(--brand); }
.db-cal-c { background: var(--reuniao); }
.db-cal-hoje .db-cal-p, .db-cal-hoje .db-cal-c { background: #fff; }
.db-cal-legenda {
  display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-muted);
}
.db-cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }

/* ── Precisa de você: cards de cliente ── */
.db-pv {
  display: grid; gap: 14px; padding: 18px 22px 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.db-pv-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  border-top: 3px solid var(--border-strong); min-width: 0;
}
.pv-grave { border-top-color: var(--error); }
.pv-medio { border-top-color: var(--warning); }
.pv-leve  { border-top-color: var(--stories); }
.db-pv-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-pv-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600;
}
.db-pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.db-pv-nome {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.db-pv-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pv-atraso    { background: var(--error-bg); color: var(--error); }
.pv-ajuste    { background: var(--warning-bg); color: var(--warning); }
.pv-aprovacao { background: var(--stories-bg); color: var(--stories); }
.db-pv-prazo { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.db-pv-btn {
  margin-top: auto; align-self: stretch; padding: 9px 12px;
  background: var(--brand-faint); color: var(--brand); border: none;
  border-radius: var(--radius); cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600;
}
.db-pv-btn:hover { background: var(--brand); color: #fff; }

/* ── bandas nomeadas: um rótulo discreto por faixa da tela ── */
.db-sec { margin-bottom: 26px; }
.db-sec-rotulo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted);
}
/* o fio depois do rótulo dá a régua horizontal sem pesar */
.db-sec-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* "+N itens" no pé de uma lista comprida — sempre honesto, nunca paredão */
.db-mais {
  width: 100%; padding: 12px 22px; background: none; border: none;
  border-top: 1px solid var(--border); cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--brand); text-align: center;
}
.db-mais:hover { background: var(--brand-faint); }

/* boas-vindas da conta vazia: o próximo passo, não uma fileira de zeros */
.db-onboard { align-items: center; text-align: center; padding: 56px 24px; gap: 6px; }
.db-onboard-icone { font-size: 34px; }
.db-onboard-titulo { font-size: 20px; font-weight: 600; color: var(--text-primary); }
.db-onboard-texto { max-width: 440px; margin: 4px 0 14px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* só a primeira letra maiúscula ("Segunda-feira, 3 de agosto") — capitalize
   do CSS pegaria cada palavra e viraria "3 De Agosto" */
.db-data::first-letter { text-transform: uppercase; }
.db-data { display: inline-block; }

/* ── faixa de insights: atividade / sugestões / performance ── */
.db-insights {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.db-ativ { display: flex; flex-direction: column; }
.db-ativ-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 22px; border-bottom: 1px solid var(--border);
}
.db-ativ-row:last-child { border-bottom: none; }
.db-ativ-ini {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-faint); color: var(--brand);
  font-size: 11px; font-weight: 600;
}
.db-ativ-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.db-ativ-txt { font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.db-ativ-meta { font-size: 11.5px; color: var(--text-muted); }

.db-sug { display: flex; flex-direction: column; }
.db-sug-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 12px 22px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border); font-family: inherit; text-align: left;
}
.db-sug-row:last-child { border-bottom: none; }
.db-sug-row:hover { background: var(--surface-hover); }
.db-sug-icone { font-size: 15px; flex-shrink: 0; }
.db-sug-txt { flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.db-perf { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.db-perf-row { display: flex; flex-direction: column; gap: 5px; }
.db-perf-rotulo { font-size: 12.5px; color: var(--text-secondary); }
.db-perf-valor { font-size: 17px; font-weight: 600; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; }
.db-perf-up   { font-size: 11.5px; font-weight: 600; color: var(--success); }
.db-perf-down { font-size: 11.5px; font-weight: 600; color: var(--error); }
.db-perf-eq   { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.db-perf-barra { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.db-perf-barra i { display: block; height: 100%; border-radius: 999px; }

/* ── rodapé: equipe / ações rápidas / plano ── */
.db-rodape {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.db-eq { display: flex; flex-direction: column; }
.db-eq-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 22px; border-bottom: 1px solid var(--border);
}
.db-eq-row:last-child { border-bottom: none; }
.db-eq-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-faint); color: var(--brand); font-size: 12px; font-weight: 600;
}
.db-eq-avatar img { width: 100%; height: 100%; object-fit: cover; }
.db-eq-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.db-eq-nome { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.db-eq-meta { font-size: 12px; color: var(--text-muted); }

.db-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 22px 20px; }
.db-acao {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--text-primary); text-align: left;
}
.db-acao:hover { background: var(--brand-faint); border-color: var(--brand-ring); color: var(--brand); }
.db-acao span { font-size: 16px; display: inline-flex; align-items: center; }

.db-plano { padding: 16px 22px 20px; }
.db-plano-nome { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.db-plano-uso { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.db-plano-barra { margin-top: 10px; height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.db-plano-barra i { display: block; height: 100%; border-radius: 999px; background: var(--grad-brand); }
.db-plano-btn { margin-top: 14px; font-size: 13px; }

/* ── responsivo do dashboard ── */
/* Em tela larga a faixa do meio vira três colunas de MESMA altura: as
   listas rolam por dentro do painel, a página não fica serrilhada. */
@media (min-width: 1101px) {
  .db-meio { align-items: stretch; }
  .db-meio .db-panel { max-height: 470px; }
  .db-meio .db-tl, .db-meio .db-alertas { overflow-y: auto; }
}
@media (max-width: 1100px) {
  .db-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-c-cta { grid-column: 1 / -1; }
  .db-meio { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .db-inner { padding-top: 16px; }
  .db-title { font-size: 21px; }
  .db-header-tools { width: 100%; }
  .db-search { flex: 1; }
  .db-search input { width: 100%; flex: 1; }
}
@media (max-width: 480px) {
  .db-resumo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .db-card { padding: 14px 16px; }
  .db-card-value { font-size: 24px; }
}

/* ═══ INÍCIO — a Home do CLIENTE ═══
   Desde 28/08/2026 o desenho mora em 11-cliente-mobile.css (.cm-home,
   a mesma tela no celular e no desktop); o bloco .ic-* antigo saiu
   junto com o HTML que o usava. */
#inicioSection { display: none; }

/* a aba Início é do cliente: some no modo editor (agência editando) */
.mode-editor #tabInicio, .mode-editor #inicioSection { display: none !important; }

/* ═══ SININHO DE ALERTAS (sino.js) — lateral + painel flutuante ═══ */
.sino-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 8px; padding: 9px 12px;
  background: transparent; border: 1px solid var(--sidebar-line);
  border-radius: var(--radius); cursor: pointer; font-family: inherit;
  color: var(--sidebar-text); font-size: 13px; font-weight: 500;
  transition: background var(--transition);
}
.sino-btn:hover { background: var(--sidebar-hover); color: #fff; }
.sino-icone { position: relative; display: flex; flex-shrink: 0; }
.sino-badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--error); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  border: 2px solid var(--sidebar-bg);   /* recorte sobre o fundo escuro */
}
/* cliente não tem alertas da agência; lateral encolhida mostra só o ícone */
body.role-client .sino-btn { display: none; }
@media (min-width: 769px) {
  body.sidebar-collapsed .sino-rotulo { display: none; }
  body.sidebar-collapsed .sino-btn { justify-content: center; padding: 9px 0; }
}

.sino-painel {
  display: none; position: fixed; z-index: 220;   /* acima da gaveta mobile (200) */
  left: calc(var(--sidebar-w) + 12px); bottom: 16px;
  width: 380px; max-width: calc(100vw - var(--sidebar-w) - 24px);
  max-height: 70vh;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg, var(--shadow));
  flex-direction: column; overflow: hidden;
}
.sino-painel.open { display: flex; }
.sino-painel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.sino-painel-fechar {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-muted); font-size: 14px; padding: 4px 6px; border-radius: 8px;
}
.sino-painel-fechar:hover { background: var(--bg); color: var(--text-primary); }
.sino-lista { overflow-y: auto; }
@media (max-width: 768px) {
  /* no celular a lateral é gaveta: o painel ocupa a base da tela */
  .sino-painel { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* ── sub-item da lateral: "Clientes › Fulano" ── */
.nav-sub { display: flex; align-items: stretch; gap: 0; padding: 2px 0 4px 22px; position: relative; }
.nav-sub-line {
  position: absolute; left: 20px; top: 0; bottom: 8px;
  width: 2px; background: var(--sidebar-line); border-radius: 2px;
}
.nav-sub-item {
  flex: 1; display: flex; align-items: center; gap: 8px;
  margin-left: 10px; padding: 7px 10px;
  background: var(--sidebar-hover); border: none; border-radius: var(--radius);
  cursor: pointer; font-family: inherit; text-align: left;
  min-width: 0;
}
.nav-sub-avatar {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9.5px; font-weight: 600;
}
.nav-sub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-sub-name {
  font-size: 12.5px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* a lateral é da agência: no acesso por link (cliente) ela não existe */
body.role-client #agencyNav { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   ÓRBITTA FLOW — o mural de post-its (notas.js). A 1ª regra é a chave
   do recurso: com `assistente_whatsapp` desligada na Central, o body
   ganha `sem-assistente` e TUDO que tem data-flag="assistente" some
   (item da lateral e a view) — mesmo mecanismo do body.sem-producoes
   em 08-editor-producoes.css.
   Post-it: cor = ORIGEM (WhatsApp verde, manual lilás) — a mesma
   informação dos selos, agora no fundo do papel.
   ═══════════════════════════════════════════════════════════════════ */
body.sem-assistente [data-flag="assistente"] { display: none !important; }

/* sem teto próprio: o respiro é o do .agency-inner (1860px), como toda
   tela da agência — teto menor deixava um vão morto nas bordas (14/08) */
.notas-inner { position: relative; }

.notas-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.notas-bar select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-primary); font: inherit;
  font-size: 13.5px;
}
/* o btn-primary global é largura total (padrão de modal); na barra o
   botão é inline à direita — mesma correção que o CRM faz no crm-novo-btn */
.notas-nova-btn { margin-left: auto; width: auto; flex: 0 0 auto; }
.notas-chips { margin: 0; }

/* ── o mural: 5 colunas lado a lado, rolagem horizontal no aperto ── */
.mural {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.mural-col {
  /* mesmo reparte-largura do funil do CRM: as 5 colunas dividem a tela
     inteira (sem max-width — era ele que deixava o vão à direita) */
  flex: 1 1 0; min-width: 224px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px); padding: 10px;
  transition: var(--transition);
}
/* o alvo aceso enquanto um post-it sobrevoa a coluna */
.mural-col.mural-alvo {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
  background: var(--brand-faint);
}
.mural-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 8px;
}
.mural-col-titulo { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mural-col-conta {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.mural-col-corpo { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.mural-vazio {
  font-size: 12px; color: var(--text-muted); text-align: center;
  padding: 14px 6px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius, 10px);
}

/* ── o post-it ────────────────────────────────────────────────────── */
.postit {
  border-radius: var(--radius, 10px); padding: 9px 10px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(18,19,26,.06);
  transition: var(--transition);
}
.postit[draggable="true"] { cursor: grab; }
.postit[draggable="true"]:hover {
  transform: rotate(-0.6deg) translateY(-1px);
  box-shadow: var(--shadow, 0 4px 10px rgba(18,19,26,.08));
}
/* as duas cores do papel: a origem, contada pelo fundo */
.postit-whats  { background: var(--success-bg); border-color: rgba(31,157,91,.25); }
.postit-manual { background: var(--brand-faint); border-color: var(--brand-ring); }

.postit-topo { display: flex; align-items: center; gap: 6px; }
.postit-cliente {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postit-cliente-sem { color: var(--text-muted); font-weight: 500; font-style: italic; }
.postit-selo { margin-left: auto; font-size: 12px; }
/* o texto vem do usuário: escHtml + quebras preservadas */
.postit-texto {
  margin-top: 5px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-primary); white-space: pre-line; word-break: break-word;
}
.postit-transcricao { margin-top: 6px; font-size: 11.5px; }
.postit-transcricao summary { cursor: pointer; color: var(--text-secondary); user-select: none; }
.postit-transcricao div {
  margin-top: 4px; padding: 6px 8px; border-left: 2px solid var(--border-strong);
  color: var(--text-secondary); white-space: pre-line; font-style: italic;
}
.postit-rodape {
  display: flex; align-items: center; margin-top: 7px; min-height: 18px; gap: 6px;
}
.postit-meta { font-size: 11px; color: var(--text-muted); }
.postit-acoes { margin-left: auto; display: flex; gap: 2px; opacity: .45; transition: var(--transition); }
.postit:hover .postit-acoes { opacity: 1; }
.postit-btn {
  border: 0; background: none; cursor: pointer; font-size: 12px;
  color: var(--text-secondary); border-radius: 6px; padding: 2px 5px;
  line-height: 1;
}
.postit-btn:hover { color: var(--brand); background: var(--surface); }
.postit-btn-x:hover { color: var(--error); }
.postit-btn-ok:hover { color: var(--success); }

/* nota PEDIDA para alguém: a pílula "👉 para fulano" — e quando o
   fulano sou eu, ela acende (é a minha caixa de pedidos) */
.postit-para {
  display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600;
  color: var(--text-secondary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.postit-para-mim { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-faint); }
/* no papel lilás (manual) a pílula neutra sumia — o fundo dela é o surface */

/* concluída (Histórico): o papel esmaece, o texto fica riscado de leve */
.postit-feita { opacity: .75; }
.postit-feita .postit-texto { text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* a coluna única do Histórico ocupa a largura de leitura, não a tela toda */
.mural-col-historico { max-width: 560px; flex: 1 1 560px; }

.notas-meuwhats-btn { margin-left: auto; width: auto; flex: 0 0 auto; }

/* o convite pra primeira nota (modal Meu WhatsApp): verde de "vai lá",
   largura cheia, acima dos botões do modal */
.meuwhats-chamar {
  display: block; text-align: center; text-decoration: none;
  background: var(--success); border-color: var(--success);
  margin: 6px 0 2px;
}
.meuwhats-chamar:hover { filter: brightness(1.06); }
.meuwhats-chamar[hidden] { display: none !important; }
.meuwhats-numero {
  margin: 4px 0 2px; font-size: 12.5px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.meuwhats-numero b { color: var(--text-primary); letter-spacing: .3px; }
.meuwhats-copiar { opacity: 1; font-size: 11.5px; }
.notas-meuwhats-btn + .notas-nova-btn { margin-left: 0; }

@media (max-width: 768px) {
  .notas-bar select { flex: 1 1 100%; }
  .notas-nova-btn { margin-left: 0; }
  /* no toque não existe hover: as ações (setinhas, editar, excluir)
     ficam sempre à vista, com alvo confortável */
  .postit-acoes { opacity: 1; }
  .postit-btn { font-size: 14px; padding: 4px 7px; }
  .mural-col { flex-basis: 78vw; min-width: 78vw; }
}


/* ── atalho Google Agenda (barra da Agenda Geral) ────────────────── */
.agv-google-btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
/* o cartão acende ao chegar pelo atalho — a pessoa sabe onde caiu */
#gaCard.ga-acende {
  outline: 2px solid var(--brand); outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--brand-ring);
  transition: box-shadow .4s ease, outline-color .4s ease;
}


/* ── aviso de novidade: Meu Assistente (avisoFlowOverlay) ────────── */
.aviso-flow { max-width: 480px; padding: 0 0 16px; overflow: hidden; }
.aviso-flow-topo {
  background: var(--grad-brand); color: #fff; text-align: center;
  padding: 26px 22px 20px;
}
.aviso-flow-emoji { font-size: 40px; display: block; margin-bottom: 6px; }
.aviso-flow-chapeu {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; opacity: .85;
}
.aviso-flow-titulo { margin: 4px 0 2px; font-size: 24px; font-weight: 700; color: #fff; }
.aviso-flow-tagline { font-size: 14px; opacity: .92; font-style: italic; }
.aviso-flow-lista {
  list-style: none; margin: 16px 22px 4px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.aviso-flow-lista li { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); }
.aviso-flow-acoes { padding: 10px 22px 4px; }
@media (max-width: 768px) {
  .aviso-flow { max-width: 94vw; }
  .aviso-flow-titulo { font-size: 20px; }
}