:root {
  --fundo: #F1F0EA;
  --superficie: #FFFFFF;
  --texto: #141317;
  --texto-2: #57555E;
  --mudo: #8B8992;
  --borda: rgba(20, 19, 23, .14);
  --azul: #1020E8;
  --azul-escuro: #0B18B0;
  --azul-claro: #E7E9FC;
  --rosa: #F70068;
  --rosa-escuro: #C40054;
  --rosa-claro: #FDE3ED;
  --amarelo: #ECF400;
  --fonte-titulo: 'Space Grotesk', sans-serif;
  --fonte-corpo: 'Instrument Sans', system-ui, sans-serif;
  --fonte-mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 14px;
}
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(20,19,23,.18); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.app { display: flex; height: 100vh; overflow: hidden; }

/* ===== Sidebar ===== */
.sidebar {
  width: 238px; flex: none; background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
}
.sidebar-marca {
  padding: 20px 20px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-marca img { height: 24px; width: auto; display: block; }
.sidebar-marca strong {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; display: block;
}
.sidebar-marca small {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mudo);
}
/* Caixa de busca global, logo abaixo da marca. Discreta, na paleta. */
.sidebar-busca { padding: 12px 12px 4px; }
.sidebar-busca input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--fundo);
  font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto);
}
.sidebar-busca input::placeholder { color: var(--mudo); }
.sidebar-busca input:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); background: var(--superficie); }

.sidebar-nav { flex: 1; overflow: auto; padding: 6px 12px 16px; }
/* Item de projeto favorito na sidebar — nome com bolinha de cor. */
.nav-favorito .nav-favorito-nome {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-favorito .nav-favorito-cor { width: 9px; height: 9px; border-radius: 99px; flex: none; }
/* Botão-estrela de favoritar (página do projeto / lista). */
.botao-estrela {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--mudo);
  border-radius: 8px; padding: 8px 12px; font-family: var(--fonte-corpo);
  font-weight: 600; font-size: 13.5px; line-height: 1;
}
.botao-estrela:hover { background: var(--fundo); }
.botao-estrela .estrela-icone { font-size: 15px; line-height: 1; }
.botao-estrela.favoritado { border-color: var(--amarelo); color: var(--texto); background: #FEFCCB; }
.nav-grupo {
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mudo); padding: 16px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px; color: var(--texto-2);
  text-decoration: none; font-weight: 500;
}
.nav-item:hover { background: var(--fundo); color: var(--texto); }
.nav-item.ativo { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.nav-item.desabilitado { color: var(--mudo); pointer-events: none; }
.nav-item .breve {
  font-family: var(--fonte-mono); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .06em; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 99px; padding: 1px 6px;
}
/* Marcas do item Automações (A4): badge de pendentes + selo "pausadas" (kill switch global). */
.nav-item-marcas { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.nav-item-badge {
  min-width: 16px; height: 16px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--rosa); color: #fff;
  font-family: var(--fonte-mono); font-size: 9.5px; font-weight: 700; line-height: 1;
}
.nav-item-pausado {
  font-family: var(--fonte-mono); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 6px; border-radius: 99px;
  background: var(--amarelo); color: var(--texto); border: 1px solid var(--borda);
}
.sidebar-rodape { border-top: 1px solid var(--borda); padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-rodape .nome { font-weight: 600; font-size: 13px; }
.sidebar-rodape .papel { color: var(--mudo); font-size: 11px; text-transform: capitalize; }

/* ===== Main ===== */
.main { flex: 1; overflow: auto; padding: 24px 28px; }
.pagina-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pagina-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 27px; letter-spacing: -.01em; color: var(--azul); margin: 0; }
.trilha { font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rosa); margin-bottom: 4px; }

/* ===== Componentes ===== */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }

.botao {
  display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--fonte-corpo); font-weight: 600; font-size: 13.5px;
  padding: 9px 16px; text-decoration: none;
  background: var(--azul); color: #fff;
}
.botao:hover { background: var(--azul-escuro); }
/* hub-demanda-v2 — botão desabilitado (ex.: "Enviar para aprovação" sem mídia): esmaecido,
   sem hover, cursor de bloqueado. Aplica a todas as variantes de .botao. */
.botao[disabled], .botao:disabled { opacity: .5; cursor: not-allowed; }
.botao[disabled]:hover, .botao:disabled:hover { background: var(--azul); }
.botao-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
.botao-secundario:hover { background: var(--fundo); }
.botao-perigo { background: var(--rosa-claro); color: var(--rosa-escuro); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--texto-2); }
.campo input, .campo select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: var(--fonte-corpo); font-size: 14px; background: var(--superficie); color: var(--texto);
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-family: var(--fonte-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mudo);
  padding: 8px 12px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }

.selo {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 99px; padding: 2px 9px;
}
.selo-ativo { background: var(--azul-claro); color: var(--azul); }
.selo-inativo { background: var(--fundo); color: var(--mudo); border: 1px solid var(--borda); }
.selo-admin { background: var(--rosa-claro); color: var(--rosa-escuro); }

.flash {
  background: var(--azul-claro); color: var(--azul); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.flash-desfazer { margin: 0; flex: none; }
.flash-desfazer-botao {
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 99px; padding: 4px 12px; font-weight: 600;
}
.flash-desfazer-botao:hover { background: rgba(255,255,255,.35); }
.erros { background: var(--rosa-claro); color: var(--rosa-escuro); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.erros ul { margin: 0; padding-left: 18px; }

/* ===== Toasts (acoes.js) ===== */
/* Pilha no canto inferior direito. Empilháveis, entrada/saída discretas, aria-live. */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 40px)); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--texto); color: var(--superficie);
  border-radius: 10px; padding: 11px 12px 11px 15px;
  box-shadow: 0 8px 24px rgba(20, 19, 23, .22);
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.toast-entrou { opacity: 1; transform: translateY(0); }
.toast.toast-saindo { opacity: 0; transform: translateY(8px); }
.toast-sucesso { background: var(--texto); color: var(--superficie); }
.toast-erro { background: var(--rosa-escuro); color: #fff; }
.toast-msg { flex: 1; min-width: 0; }
/* Botão de ação (ex.: Desfazer) — mesmo idioma do .flash-desfazer-botao. */
.toast-acao {
  flex: none; border: 1px solid rgba(255, 255, 255, .5); background: transparent;
  color: inherit; cursor: pointer; border-radius: 99px; padding: 4px 12px;
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700;
}
.toast-acao:hover { background: rgba(255, 255, 255, .16); }
.toast-fechar {
  flex: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px; opacity: .7;
}
.toast-fechar:hover { opacity: 1; }

/* Fade-out do elemento removido pelo contrato (remover: true). */
.saindo-fade { opacity: 0; transition: opacity .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .toast, .saindo-fade { transition: none; }
}

/* ===== Login ===== */
.login-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--fundo); }
.login-cartao { width: 360px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 32px; }
.login-cartao .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-cartao .logo img { height: 28px; }

/* ===== Tarefas ===== */
.tarefa-concluida .tarefa-titulo { text-decoration: line-through; color: var(--mudo); }
.selo-prioridade { font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; }
.selo-prioridade[data-prioridade-editar] { cursor: pointer; }

/* R1 — chips coloridos + edição inline na linha da tarefa.
   Chip de PRAZO (clicável → abre <input type=date>): rosa (atrasada), azul (hoje),
   neutro (futuro/sem data). O texto usa a mesma escala mono das outras metainfos. */
.chip-prazo {
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .02em;
  border-radius: 99px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: rgba(20, 19, 23, .05); color: var(--mudo);
}
.chip-prazo:hover { filter: brightness(.97); }
.chip-prazo:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.chip-prazo-atrasada { background: var(--rosa-claro); color: var(--rosa); }
.chip-prazo-hoje { background: var(--azul-claro); color: var(--azul); }
.chip-prazo-neutro { background: rgba(20, 19, 23, .05); color: var(--mudo); }
/* L3 — chip de PRAZO-LIMITE (deadline), urgência. Reusa .chip-prazo (mesma pílula
   clicável) + uma destas cores: ÂMBAR (falta <= 3 dias, texto escuro sobre --amarelo),
   VERMELHO/ROSA FORTE (vencido, texto branco) ou neutro (futuro/sem limite). Prefixo
   textual "!" no render — SEM emoji. */
.chip-deadline-proximo { background: var(--amarelo); color: var(--texto); }
.chip-deadline-vencido { background: var(--rosa); color: #fff; }
.chip-deadline-neutro { background: rgba(20, 19, 23, .05); color: var(--mudo); }
/* Input de data inline (troca o chip enquanto edita). */
.chip-prazo-input {
  font-family: var(--fonte-mono); font-size: 11px; padding: 2px 6px;
  border: 1px solid var(--azul); border-radius: 8px; background: var(--superficie);
  color: var(--texto);
}
/* Chip de PROJETO (cor do projeto via style inline: fundo+alpha, texto na cor). */
.chip-projeto {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 99px; padding: 3px 10px; white-space: nowrap;
}
/* Chip de DEMANDA na linha: identidade AZUL-MARCA (R1). */
.selo-demanda-linha {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 99px; padding: 3px 10px;
  background: var(--azul-claro); color: var(--azul); border: 1px solid var(--azul);
}
/* Input do título inline (troca o link enquanto edita). */
.tarefa-titulo-input {
  flex: 1; font-family: var(--fonte-corpo); font-size: 14px; font-weight: 500;
  padding: 4px 8px; border: 1px solid var(--azul); border-radius: 8px;
  background: var(--superficie); color: var(--texto); min-width: 0;
}
.tarefa-linha { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--borda); }
.tarefa-linha:last-child { border-bottom: 0; }
/* Ação inline de excluir na linha da tarefa (projetos/ver e tarefas/visao). Discreta:
   aparece atenuada e ganha cor de perigo no hover da linha/botão. */
.tarefa-linha-excluir { margin: 0; flex: none; display: flex; }
.tarefa-excluir-botao {
  border: none; background: transparent; cursor: pointer; color: var(--mudo);
  font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 6px; opacity: .45;
}
.tarefa-linha:hover .tarefa-excluir-botao { opacity: .8; }
.tarefa-excluir-botao:hover { color: var(--rosa); opacity: 1; }

/* Task 4 — toggle "Mostrar/Ocultar concluídas" (cabeçalho) e nota discreta por seção. */
.botao-concluidas.ativo { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); }
.secao-concluidas-nota {
  margin-top: 8px; font-family: var(--fonte-mono); font-size: 10.5px;
  letter-spacing: .03em; color: var(--mudo);
}

/* Pickers inline de tarefa (selo/avatar clicáveis). Compartilhados por TODAS as telas de
   tarefa (Minhas tarefas, projeto, hub da demanda), por isso moram aqui — R1 levou o avatar
   clicável para todas as variantes, então o .qa-picker de atribuição precisa ser global.
   (A visão de Minhas tarefas ainda repete o .qa-picker inline; a duplicata é inofensiva.) */
.qa-picker { z-index: 60; min-width: 180px; max-height: 260px; overflow-y: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 19, 23, .16); padding: 4px; position: absolute; }
.qa-picker .qa-picker-item { display: block; width: 100%; text-align: left; border: none; background: transparent; font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.qa-picker .qa-picker-item:hover { background: var(--fundo); }
/* L2 — picker de MÚLTIPLA seleção de responsáveis (checkboxes + Aplicar). */
.qa-picker .qa-picker-check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.qa-picker .qa-picker-check input { flex: none; margin: 0; }
.qa-picker .qa-picker-rodape { border-top: 1px solid var(--borda); margin-top: 4px; padding: 6px 4px 2px; display: flex; justify-content: flex-end; }
.qa-picker .qa-picker-aplicar { border: none; background: var(--azul); color: #fff; font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.qa-picker .qa-picker-aplicar:hover { filter: brightness(1.08); }
/* Pilha de avatares empilhados (até 3 + "+N") — o empilhamento vem dos estilos inline. */
.tarefa-avatares { display: inline-flex; align-items: center; }
.qa-picker-prio { z-index: 60; min-width: 120px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 19, 23, .16); padding: 4px; }
.qa-picker-prio .qa-picker-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.qa-picker-prio .qa-picker-item:hover { background: var(--fundo); }
.qa-prio-ponto { width: 12px; height: 12px; border-radius: 4px; flex: none; }
/* Gatilho do quick-add colapsado (uma "+ Nova tarefa" que expande a caixa rica). */
.qa-gatilho { margin-top: 4px; }

/* ===== Time / Equipe ===== */
.time-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 4px; }
.time-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.time-aside { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) {
  .time-layout { grid-template-columns: minmax(0, 1fr); }
  .time-cards { grid-template-columns: minmax(0, 1fr); }
}

.membro-cartao { display: flex; flex-direction: column; gap: 14px; }
.membro-topo { display: flex; align-items: center; gap: 12px; }
.membro-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: var(--texto); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.membro-avatar-admin { background: var(--azul); }
.membro-info { min-width: 0; }
.membro-nome { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membro-cargo { font-size: 12px; color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membro-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.membro-acoes { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.selo-setor {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(20, 19, 23, .07); color: var(--texto-2);
  border-radius: 99px; padding: 3px 9px;
}
.selo-setor-admin { background: var(--texto); color: #fff; }
.selo-ferias { background: var(--amarelo); color: var(--texto); }
.selo-carga-alta { background: var(--rosa-claro); color: var(--rosa-escuro); }
.selo-trafego { background: var(--azul-claro); color: var(--azul); }

.painel-lateral { padding: 22px; }
.painel-lateral-topo { display: flex; justify-content: space-between; align-items: center; }
.painel-rotulo { font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); }
.painel-percent { font-family: var(--fonte-mono); font-size: 11px; color: var(--azul); font-weight: 700; }

.onboarding-nome { font-size: 15px; font-weight: 600; margin-top: 12px; }
.onboarding-barra { height: 8px; border-radius: 99px; background: rgba(20, 19, 23, .06); margin-top: 12px; overflow: hidden; }
.onboarding-barra-preench { height: 100%; border-radius: 99px; background: var(--azul); }
.onboarding-checklist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 13px; }
.onboarding-item { display: flex; gap: 10px; align-items: baseline; }
.onboarding-marca { font-family: var(--fonte-mono); font-size: 11px; color: var(--mudo); }
.onboarding-marca-ok { color: var(--azul); }
.onboarding-feito { color: var(--mudo); text-decoration: line-through; }

.ferias-lista { margin-top: 4px; }
.ferias-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(20, 19, 23, .08); }
.ferias-item:last-child { border-bottom: 0; }
.ferias-nome { font-size: 13.5px; font-weight: 500; }
.ferias-periodo { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--texto-2); }
.ferias-nota { font-size: 12px; color: var(--mudo); margin-top: 10px; }

/* ==================== PIPELINE / KANBAN ==================== */
.legenda-origem { display: flex; gap: 16px; align-items: center; }

.badge-origem {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(20, 19, 23, .07); color: var(--texto-2);
  border-radius: 99px; padding: 2px 8px;
}
.badge-origem.badge-organico { background: var(--azul-claro); color: var(--azul); }
.badge-origem.badge-pago { background: var(--amarelo); color: var(--texto); }
.badge-origem.badge-indicacao { background: var(--rosa-claro); color: var(--rosa-escuro); }

.kanban {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-top: 22px; align-items: start;
}
/* Kanban de PROJETO: nº de colunas = nº de seções (variável). Em vez das 5 colunas fixas
   das demandas, flui em colunas de largura mínima com rolagem horizontal quando não cabem. */
.kanban--secoes {
  /* cancela o grid-template-columns: repeat(5,1fr) do .kanban base — aqui o nº de colunas
     é o nº de seções (+1 "Sem seção"), então fluímos em colunas de largura mínima. */
  grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  overflow-x: auto; padding-bottom: 6px;
}
.kanban-coluna { background: rgba(20, 19, 23, .035); border-radius: 14px; padding: 12px; }
.kanban-coluna-header { display: flex; justify-content: space-between; padding: 4px 6px 10px; }
.kanban-coluna-rotulo { font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.kanban-coluna-contagem { font-family: var(--fonte-mono); font-size: 10.5px; color: var(--mudo); }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; }

.kanban-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 11px; padding: 14px; cursor: pointer;
  transition: border-color .12s ease;
}
.kanban-card:hover { border-color: rgba(20, 19, 23, .3); }
.kanban-card--fechado { border: 1.5px solid var(--azul); }
/* Card de tarefa concluída no quadro do projeto — esmaecido (respeita "Mostrar concluídas"). */
.kanban-card--feito { opacity: .6; }
/* Coluna do quadro de PROJETO vira flex-column: os cards ocupam o meio e o "+ Nova tarefa"
   ancora embaixo. min-height dá presença às colunas curtas (bom alvo de solto). */
.kanban--secoes .kanban-coluna { display: flex; flex-direction: column; min-height: 150px; }
.kanban--secoes .kanban-cards { flex: 1 0 auto; }
.kanban--secoes .kanban-cards:empty { min-height: 24px; }
/* Compacto "+ Nova tarefa" da coluna: botão colapsado full-width e discreto (tracejado). */
.kanban-add { margin-top: 8px; }
.kanban-add .qa-gatilho { width: 100%; justify-content: center; background: transparent; border: 1px dashed var(--borda); color: var(--mudo); font-size: 12.5px; padding: 8px; }
.kanban-add .qa-gatilho:hover { border-color: var(--azul); color: var(--azul); background: var(--superficie); }
/* Caixa expandida enxuta pra caber na coluna estreita (título + rodapé só). */
.kanban-add .qa-caixa { padding: 10px; }
.kanban-add .qa-titulo { font-size: 14px; }
.kanban-add .qa-rodape { margin-top: 10px; gap: 6px; flex-wrap: wrap; }
.kanban-add .qa-botoes { margin-left: 0; }
.kanban-add .qa-btn { padding: 6px 12px; font-size: 12.5px; }

.kanban-card-topo { display: flex; justify-content: space-between; align-items: center; }
.kanban-card-score { font-family: var(--fonte-mono); font-size: 11px; color: var(--mudo); }
.kanban-card-score.score-alto { color: var(--azul); font-weight: 700; }

.kanban-card-nome { display: block; font-size: 14px; font-weight: 600; margin-top: 10px; color: var(--texto); text-decoration: none; }
.kanban-card-nome:hover { text-decoration: underline; }
.kanban-card-meta { font-size: 12px; color: var(--mudo); margin-top: 2px; }

.kanban-card-valor { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--texto-2); margin-top: 10px; }
.kanban-card-valor--contrato { color: var(--azul); font-weight: 700; }

.kanban-card-nota { font-size: 11.5px; color: var(--mudo); margin-top: 8px; }
.kanban-card-nota--alerta { color: var(--rosa); font-weight: 600; }

/* ---- Demandas (kanban de produção) ---- */
.kanban-coluna-rotulo--rosa { color: var(--rosa); }

.kanban-card--aprovacao { border-color: var(--rosa); }
.kanban-card--publicado { opacity: .55; }

.kanban-card-meta--mono { font-family: var(--fonte-mono); font-size: 11px; }

.kanban-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--fundo); border: 1px solid var(--borda);
  font-family: var(--fonte-mono); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mudo); flex: none;
}

.kanban-card-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.kanban-prazo { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2); }
.kanban-prazo--vencido { color: var(--rosa); font-weight: 600; }
.kanban-editar { margin-left: auto; font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); text-decoration: none; }
.kanban-editar:hover { color: var(--azul); }

.kanban-filtros { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.kanban-chip {
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 99px; padding: 5px 12px; cursor: pointer; transition: background .12s ease;
}
.kanban-chip:hover { background: rgba(20, 19, 23, .04); }
.kanban-chip.ativo { background: #141317; color: #fff; border-color: #141317; }

.pipeline-rodape { margin-top: 16px; font-size: 12.5px; color: var(--mudo); }
.pipeline-rodape-destaque { color: var(--azul); }

/* ==================== BIBLIOTECA DE CRIATIVOS ==================== */
/* Chips de filtro (Todos / por cliente / Brand assets) */
.chip-criativo {
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); border: 1px solid var(--borda); background: var(--superficie);
  border-radius: 99px; padding: 5px 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.chip-criativo:hover { background: rgba(20, 19, 23, .04); }
.chip-criativo-ativo { background: var(--texto); color: #fff; border-color: var(--texto); }
.chip-criativo-ativo:hover { background: var(--texto); }

/* Card de criativo */
.card-criativo {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.card-criativo:hover { border-color: rgba(20, 19, 23, .3); }
.card-criativo-link { text-decoration: none; color: inherit; display: block; }

.card-criativo-thumb {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}
.card-criativo-thumb-img { background-size: cover; background-position: center; position: relative; }
.card-criativo-formato {
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
}
.card-criativo-formato-sobre {
  background: rgba(20, 19, 23, .62); color: #fff; padding: 3px 8px; border-radius: 6px;
}

.card-criativo-corpo { padding: 13px 15px; }
.card-criativo-titulo {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--texto);
}
.card-criativo-meta { font-family: var(--fonte-mono); font-size: 10px; color: var(--mudo); margin-top: 3px; }
.card-criativo-selos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

.card-criativo-acoes {
  display: flex; gap: 6px; align-items: center; padding: 0 15px 13px;
}
.card-criativo-acoes form { display: inline; margin: 0; }
.card-criativo-acao {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 7px; padding: 4px 9px; cursor: pointer; text-decoration: none; line-height: 1;
}
.card-criativo-acao:hover { background: rgba(20, 19, 23, .04); }
.card-criativo-acao-perigo { background: var(--rosa-claro); color: var(--rosa-escuro); border-color: transparent; }
.card-criativo-acao-perigo:hover { background: var(--rosa-claro); filter: brightness(.97); }

/* Sino de notificações (rodapé da sidebar) + badge do contador não-lido. */
.sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  color: var(--texto-2); border: 1px solid var(--borda); background: var(--superficie);
  text-decoration: none; transition: background .12s, color .12s;
}
.sino:hover { background: var(--fundo); color: var(--texto); }
.sino.ativo { color: var(--rosa); border-color: var(--rosa); background: var(--rosa-claro); }
.sino-badge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 999px; background: var(--rosa); color: #fff;
  font-family: var(--fonte-mono); font-size: 9.5px; font-weight: 700; line-height: 1;
}
.sino-badge[hidden] { display: none; }

/* Central de notificações — itens da lista, estado lida vs não-lida. */
.notif-lista { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-bottom: 1px solid var(--borda); background: var(--rosa-claro);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.notif-lida { background: transparent; }
.notif-icone { font-size: 18px; line-height: 1.2; flex: none; }
.notif-corpo { flex: 1; min-width: 0; }
.notif-cabecalho {
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mudo);
}
.notif-flag { color: var(--rosa-escuro); font-weight: 700; }
.notif-item.notif-lida .notif-flag { display: none; }
.notif-texto { font-size: 13.5px; color: var(--texto); margin-top: 3px; word-break: break-word; }
.notif-texto a { color: var(--texto); text-decoration: none; }
.notif-texto a:hover { text-decoration: underline; }
.notif-marcar { flex: none; font-size: 11px; padding: 4px 10px; }
.notif-item.notif-lida .notif-marcar { display: none; }
.notif-vazio { font-size: 13.5px; color: var(--mudo); }

/* ===== Popup (<dialog> nativo) — R2 ===== */
/* O <dialog> é o backdrop/centralizador; o cartão branco vive em .popup-cartao. */
dialog.popup {
  border: none; padding: 0; background: transparent; color: var(--texto);
  max-width: 92vw; max-height: 92vh; margin: auto;
}
dialog.popup::backdrop { background: rgba(20, 19, 23, .42); }
.popup-cartao {
  position: relative; width: 480px; max-width: 92vw; max-height: 92vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20, 19, 23, .22); padding: 22px 24px;
}
.popup-titulo {
  font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600;
  margin: 0 34px 4px 0; color: var(--texto);
}
.popup-sub {
  margin: 0 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--texto-2);
}
.popup-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; line-height: 1;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie);
  color: var(--mudo); font-size: 18px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.popup-x:hover { background: var(--fundo); color: var(--texto); }
.popup-acoes { display: flex; gap: 8px; margin-top: 18px; }

/* ===== Ajuda "i" do quick-add — gatilho + conteúdo do modal (#qa-ajuda-dialog) ===== */
/* Gatilho: um "i" discreto no rodapé da caixa de adicionar tarefa. Reusa o <dialog class=popup>. */
.qa-ajuda-abrir {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--mudo);
  font-family: var(--fonte-titulo); font-style: italic; font-size: 13px; line-height: 1;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.qa-ajuda-abrir:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }
/* Lista termo→descrição: grid de 2 colunas com trilhas compartilhadas (dt/dd direto no dl). */
.qa-ajuda-lista { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 11px 14px; align-items: baseline; }
.qa-ajuda-token {
  font-family: var(--fonte-mono); font-size: 12px; color: var(--azul); background: var(--azul-claro);
  border-radius: 6px; padding: 3px 8px; justify-self: start; white-space: nowrap;
}
.qa-ajuda-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto); }
.qa-ajuda-ex {
  display: inline-block; font-family: var(--fonte-mono); font-size: 11.5px; color: var(--texto-2);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; margin: 3px 4px 0 0;
}
.qa-ajuda-exemplo {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--borda);
  font-size: 12.5px; line-height: 1.5; color: var(--texto-2);
}
.qa-ajuda-exemplo .qa-ajuda-frase { font-family: var(--fonte-mono); color: var(--texto); }

/* aprovacao-polish (item 4) — RESULTADO da resposta do cliente na linha do criativo do
   hub: selo verde suave (aprovado) / âmbar (ajustes, mesma paleta dos avisos .imp-avisos)
   + comentário logo abaixo (truncado num <details> quando longo). */
.selo-resposta-aprovado { background: #E3F4E8; color: #1B7A3D; }
.selo-resposta-ajustes { background: #FBEAD7; color: #9A5B00; }
.cr-resposta { margin-top: 6px; }
.cr-resposta-coment { margin-top: 4px; font-size: 12.5px; color: var(--texto); word-break: break-word; }
.cr-resposta-coment > summary { cursor: pointer; color: var(--texto-2); }
.cr-resposta-coment > summary:hover { color: var(--texto); }
.cr-resposta-coment-todo { margin-top: 4px; }

/* aprovacao-polish — grupo de radios dentro de popup (ex.: motivo do arquivamento).
   O reset global .campo input { width:100% } esticava o radio e jogava o texto para a
   direita; aqui o input volta a width:auto e cada opção é label flex (radio à esquerda,
   texto ao lado), empilhadas verticalmente. label.popup-radio vence .campo label por
   ordem (mesma especificidade, definido depois). */
.popup-radios { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
label.popup-radio {
  display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--texto);
}
.popup-radio input[type="radio"] {
  width: auto; margin: 0; padding: 0; flex: none; accent-color: var(--azul);
}

/* ============================================================================
   R3 — Preview de importação de criativos por documento (escopo .imp-*).
   ============================================================================ */
.imp-avisos {
  background: #FBEAD7; border: 1px solid rgba(154, 91, 0, .28); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; color: #9A5B00;
}
.imp-avisos-titulo {
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 6px;
}
.imp-avisos ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.imp-vazio { color: var(--mudo); font-size: 14px; padding: 10px 0; }
.imp-lista { display: flex; flex-direction: column; gap: 10px; }
.imp-item {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px;
  background: var(--superficie);
}
.imp-check { padding-top: 4px; }
.imp-check input { width: 17px; height: 17px; accent-color: var(--azul); cursor: pointer; }
.imp-corpo { flex: 1; min-width: 0; }
.imp-linha-topo { display: flex; align-items: center; gap: 8px; }
.imp-num {
  font-family: var(--fonte-mono); font-size: 12px; color: var(--mudo); flex: none;
}
.imp-titulo {
  flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--borda);
  border-radius: 8px; font-family: var(--fonte-corpo); font-size: 14px;
  font-weight: 500; color: var(--texto); background: var(--superficie);
}
.imp-titulo:focus { outline: none; border-color: var(--azul); }
.imp-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.imp-chip {
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .02em;
  border-radius: 99px; padding: 3px 9px;
}
.imp-tag {
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .03em;
  color: var(--texto-2); background: rgba(20, 19, 23, .05);
  border-radius: 6px; padding: 3px 7px;
}
.imp-tag-mudo { color: var(--mudo); }
.imp-desc { margin-top: 8px; font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.imp-copy { margin-top: 8px; }
.imp-copy summary {
  cursor: pointer; font-size: 12.5px; color: var(--azul);
  font-family: var(--fonte-mono); letter-spacing: .02em;
}
.imp-copy-pre {
  margin: 8px 0 0; padding: 10px 12px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; white-space: pre-wrap;
  word-break: break-word; font-family: var(--fonte-mono); font-size: 12px;
  line-height: 1.5; color: var(--texto);
}
.imp-textarea {
  width: 100%; min-height: 220px; padding: 12px 14px; border: 1px solid var(--borda);
  border-radius: 10px; font-family: var(--fonte-mono); font-size: 12.5px;
  line-height: 1.55; color: var(--texto); background: var(--superficie); resize: vertical;
}
.imp-textarea:focus { outline: none; border-color: var(--azul); }
/* Copy no detalhe/edição do criativo (details discreto). */
.criativo-copy { margin-top: 4px; }
.criativo-copy summary {
  cursor: pointer; font-size: 12.5px; color: var(--azul);
  font-family: var(--fonte-mono); letter-spacing: .02em;
}
.criativo-copy-pre {
  margin: 8px 0 0; padding: 10px 12px; background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px; white-space: pre-wrap;
  word-break: break-word; font-family: var(--fonte-mono); font-size: 12px;
  line-height: 1.5; color: var(--texto);
}

/* ── Dropzona de mídia do criativo (Sprint L1) ─────────────────────────────── */
/* Melhora progressiva sobre <input type=file>: sem JS o input aparece normal; com JS
   o midia.js liga a zona (arrastar-soltar + preview). Estilo discreto, no padrão .campo. */
.dropzona {
  position: relative; border: 1.5px dashed var(--borda); border-radius: 10px;
  padding: 14px; background: var(--fundo); cursor: pointer; transition: border-color .12s, background .12s;
}
.dropzona:hover { border-color: var(--azul); }
.dropzona-ativa { border-color: var(--azul); background: var(--azul-claro); }
.dropzona-texto { font-size: 13px; color: var(--mudo); margin-top: 8px; word-break: break-word; }
.dropzona input[type="file"] { display: block; font-size: 12.5px; }
.dropzona-preview:empty { display: none; }
.dropzona-preview { margin-top: 10px; }
.dropzona-thumb {
  max-width: 160px; max-height: 120px; border-radius: 8px; display: block;
  border: 1px solid var(--borda); object-fit: cover; background: #000;
}
.dropzona-arquivo {
  display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--superficie);
  border: 1px solid var(--borda); font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2);
}

/* Preview da mídia ATUAL no edit/hub (miniatura). */
.criativo-midia-atual {
  max-width: 180px; max-height: 130px; border-radius: 8px; display: block; margin-top: 6px;
  border: 1px solid var(--borda); object-fit: cover; background: #000;
}

/* ── Detalhe da tarefa em 2 colunas (Sprint L4) ────────────────────────────── */
/* Esquerda = edição/subtarefas/transformar; direita (mais larga) = comentários +
   quadro Links & Anexos. Abaixo de 980px empilha numa coluna só. Os cartões
   internos ocupam 100% da coluna (o max-width:640px legado é dropado dentro do grid). */
.detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}
.detalhe-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detalhe-grid .cartao { max-width: none; margin-bottom: 0; width: 100%; }
/* Texto livre (descrição/comentários) nunca transborda a coluna — tokens longos quebram. */
.detalhe-grid .cartao { overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .detalhe-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Quadro Links & Anexos: lista clicável de links extraídos + anexos da tarefa. */
.quadro-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.quadro-link {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--fundo); text-decoration: none; color: var(--azul); font-size: 13px;
  overflow: hidden;
}
.quadro-link:hover { background: var(--azul-claro); }
.quadro-link span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.quadro-vazio { color: var(--mudo); font-size: 13px; margin-bottom: 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
   hub-demanda-v2 — upload inline por criativo, lightbox navegável e mockup do IG.
   Tudo escopado em .cru-* / .ig-*; cores via variáveis; sem asset externo.
   ───────────────────────────────────────────────────────────────────────────── */

/* Bloco 4 — link público do pacote ativo (readonly + copiar). */
.hub-link-ativo {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); flex-wrap: wrap;
}
.hub-link-ativo input {
  flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--borda);
  border-radius: 8px; font-family: var(--fonte-mono); font-size: 12px; color: var(--texto);
  background: var(--superficie);
}

/* Bloco 1 — dropzone compacta por linha do criativo no hub. */
.cru-upload {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-top: 8px;
  border: 1.5px dashed var(--borda); border-radius: 9px; background: var(--fundo);
  cursor: pointer; transition: border-color .12s, background .12s; max-width: 320px;
}
.cru-upload:hover { border-color: var(--azul); }
.cru-upload.dropzona-ativa { border-color: var(--azul); background: var(--azul-claro); }
.cru-upload.cru-enviando { opacity: .7; cursor: progress; }
.cru-upload[aria-busy="true"] { pointer-events: none; }
.cru-upload-icone {
  flex: none; width: 18px; height: 18px; color: var(--mudo); display: inline-flex;
}
.cru-upload-texto {
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cru-upload.cru-tem-midia { max-width: 180px; }
.cru-upload input[type="file"] { display: none; }
.cru-thumb { cursor: zoom-in; }

/* Bloco 2 — lightbox (dialog grande). Reusa .popup mas mais largo. */
.cru-lightbox { width: min(1080px, 94vw); max-width: 94vw; padding: 0; }
.cru-lb-cartao { position: relative; padding: 20px; }
.cru-lb-grade {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.cru-lb-midia {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #0b0b0d; border-radius: 12px; min-height: 320px; padding: 12px;
}
.cru-lb-palco {
  display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0;
}
.cru-lb-img { max-width: 100%; max-height: 68vh; border-radius: 6px; display: block; }
.cru-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--texto); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.cru-lb-nav:hover { background: #fff; }
.cru-lb-prev { left: 10px; }
.cru-lb-next { right: 10px; }
.cru-lb-contador {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 99px;
}
.cru-lb-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cru-lb-titulo { margin: 0; font-size: 18px; }
.cru-lb-copy { min-width: 0; }
.cru-lb-copy .criativo-copy-pre { margin-top: 0; max-height: 200px; overflow: auto; }

/* Mockup do post do Instagram — puramente CSS + SVG. */
.ig-card {
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: var(--superficie); max-width: 360px; align-self: start; width: 100%;
}
.ig-cab { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.ig-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rosa), var(--azul));
  color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.ig-handle { font-weight: 600; font-size: 13px; color: var(--texto); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-mais { color: var(--mudo); letter-spacing: 1px; font-size: 15px; }
.ig-quadro {
  width: 100%; aspect-ratio: 1 / 1; background: #0b0b0d; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ig-quadro img, .ig-quadro video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-acoes { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 4px; }
.ig-acoes-esq { display: flex; align-items: center; gap: 14px; }
.ig-acoes svg { color: var(--texto); }
.ig-legenda {
  padding: 2px 12px 14px; font-size: 13px; line-height: 1.45; color: var(--texto);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ig-legenda strong { font-weight: 600; }

@media (max-width: 820px) {
  .cru-lb-grade { grid-template-columns: minmax(0, 1fr); }
  .cru-lb-midia { min-height: 240px; }
  .ig-card { max-width: none; }
}

/* ===== Tráfego ===== */
/* Índice da central + popup Conectar ao Reportei (T0). As telas de relatório da
   onda T1 ganham a própria seção tematizada por --tema. */
.trafego-contagem { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2); }
.trafego-candidatos {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0; max-height: 260px; overflow-y: auto;
}
.trafego-candidatos-dica { color: var(--mudo); font-size: 13px; margin: 0; }
.trafego-candidato {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  cursor: pointer; font-size: 13.5px;
}
.trafego-candidato:hover { border-color: var(--azul); }
.trafego-candidato:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.trafego-telas-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trafego-tela-pill {
  --tema: var(--azul);
  font-family: var(--fonte-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borda);
  color: var(--texto-2); text-decoration: none;
}
.trafego-tela-pill:hover { border-color: var(--tema); color: var(--tema); }
.trafego-tela-pill.ativa { background: var(--tema); border-color: var(--tema); color: #fff; }

/* ===== Tráfego: telas ===== */
/* Telas de relatório (T1): tudo tematizado por --tema (a cor da tela em Telas::TODAS),
   setado no wrapper .trafego-relatorio e sobrescrito por bloco quando preciso. */
.trafego-relatorio { --tema: var(--azul); }
.trafego-cabecalho { align-items: flex-start; }
.trafego-cab-cliente { display: flex; align-items: center; gap: 14px; }
.trafego-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: var(--tema); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.trafego-subtitulo { color: var(--texto-2); font-size: 13px; margin-top: 3px; }
.trafego-cab-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.trafego-cab-acoes form { margin: 0; }

/* Toggle Semana | Mês | Período (chips mono, ativo na cor-tema). */
.trafego-periodo-toggle { display: flex; align-items: center; gap: 6px; }
.trafego-periodo-chip {
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 99px; padding: 6px 13px; cursor: pointer; text-decoration: none; list-style: none;
}
.trafego-periodo-chip:hover { border-color: var(--tema); color: var(--tema); }
.trafego-periodo-chip.ativo { background: var(--tema); border-color: var(--tema); color: #fff; }
.trafego-periodo-custom { position: relative; }
.trafego-periodo-custom summary::-webkit-details-marker { display: none; }
.trafego-periodo-custom summary { display: inline-block; }
.trafego-periodo-form {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  display: flex; align-items: flex-end; gap: 10px; padding: 14px;
  box-shadow: 0 8px 24px rgba(20, 19, 23, .16); white-space: nowrap;
}
.trafego-periodo-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mudo);
}
.trafego-periodo-form input[type="date"] {
  padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto); background: var(--superficie);
}

/* Selo de frescor: aparece quando o payload servido passou do TTL (stale). */
.trafego-frescor {
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  background: #FBEAD7; color: #9A5B00; border-radius: 99px; padding: 5px 11px; white-space: nowrap;
}

.trafego-erro-carga { margin-top: 14px; }
.trafego-erro-carga p { color: var(--texto-2); margin: 10px 0 0; max-width: 60ch; }
.trafego-erro-carga .trafego-erro-dica { color: var(--mudo); font-size: 12.5px; }

/* Grade 12 colunas dos blocos da tela. */
.trafego-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.tg-span-2 { grid-column: span 2; }
.tg-span-3 { grid-column: span 3; }
.tg-span-4 { grid-column: span 4; }
.tg-span-5 { grid-column: span 5; }
.tg-span-6 { grid-column: span 6; }
.tg-span-7 { grid-column: span 7; }
.tg-span-8 { grid-column: span 8; }
.tg-span-12 { grid-column: span 12; }
@media (max-width: 1150px) {
  .tg-span-2, .tg-span-3, .tg-span-4 { grid-column: span 6; }
  .tg-span-5, .tg-span-6, .tg-span-7, .tg-span-8 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .tg-span-2, .tg-span-3, .tg-span-4 { grid-column: span 12; }
}
.tg-bloco { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.tg-vazio { color: var(--mudo); font-size: 13px; padding: 6px 0; }
.tg-selo {
  align-self: flex-start; margin-top: 6px;
  font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(20, 19, 23, .06); color: var(--texto-2); border-radius: 99px; padding: 2px 9px;
}

/* Hero — o número-manchete colorido da tela. */
.tg-hero { background: var(--tema); border-color: var(--tema); color: #fff; justify-content: center; gap: 6px; }
.tg-hero-rotulo { font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .82; }
.tg-hero-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 44px; letter-spacing: -.02em; line-height: 1.05; }
.tg-hero-delta { font-size: 12.5px; opacity: .9; display: flex; align-items: center; gap: 7px; }
.tg-delta-pill {
  font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 700;
  background: rgba(255, 255, 255, .2); border-radius: 99px; padding: 2px 9px;
}
.tg-hero-sub { font-size: 13px; opacity: .92; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 9px; margin-top: 4px; }
.tg-hero-vazio { background: var(--superficie); border-color: var(--borda); color: var(--texto); }

/* KPI pequeno com ▲/▼ vs. anterior. */
.tg-kpi { gap: 4px; justify-content: center; }
.tg-kpi-rotulo { font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); }
.tg-kpi-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
.tg-kpi-delta { font-family: var(--fonte-mono); font-size: 10.5px; }
.tg-delta-sobe { color: #1B7A3D; }
.tg-delta-desce { color: var(--rosa-escuro); }
.tg-kpi-nota { color: var(--mudo); font-size: 11.5px; }

/* Donut conic-gradient + legenda (mesmo idioma do financeiro). */
.tg-donut-corpo { display: flex; align-items: center; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.tg-donut-grafico { position: relative; width: 128px; height: 128px; border-radius: 50%; flex: none; }
.tg-donut-grafico::after { content: ''; position: absolute; inset: 27%; background: var(--superficie); border-radius: 50%; }
.tg-donut-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tg-donut-legenda li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; }
.tg-donut-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.tg-donut-rotulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-donut-valor { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2); white-space: nowrap; }

/* Funil em barras decrescentes com taxa de passagem. */
.tg-funil-etapas { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.tg-funil-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tg-funil-rotulo { font-size: 13px; font-weight: 600; }
.tg-funil-valor { font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.tg-funil-barra { height: 13px; border-radius: 99px; background: rgba(20, 19, 23, .06); margin-top: 5px; overflow: hidden; }
.tg-funil-barra span { display: block; height: 100%; border-radius: 99px; background: var(--tema); }
.tg-funil-taxa { font-family: var(--fonte-mono); font-size: 10.5px; color: var(--mudo); margin: 5px 0 9px 2px; }
.tg-funil-alerta {
  align-self: flex-start; display: inline-block; margin: 4px 0 9px;
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  background: var(--rosa-claro); color: var(--rosa-escuro); border-radius: 99px; padding: 3px 10px;
}
.tg-funil-etapa { display: flex; flex-direction: column; }

/* Barras verticais por dia/hora/público (destaque = pill amarela no maior). */
.tg-barras-area { display: flex; align-items: stretch; gap: 8px; height: 170px; margin-top: 14px; }
.tg-barra { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.tg-barra-haste { width: 100%; max-width: 44px; background: var(--tema); opacity: .5; border-radius: 7px 7px 0 0; }
.tg-barra-destaque .tg-barra-haste { opacity: 1; }
.tg-barra-valor { font-family: var(--fonte-mono); font-size: 9.5px; color: var(--texto-2); white-space: nowrap; }
.tg-barra-destaque .tg-barra-valor { background: var(--amarelo); color: var(--texto); border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.tg-barra-rotulo { font-family: var(--fonte-mono); font-size: 9px; letter-spacing: .02em; color: var(--mudo); white-space: nowrap; }

/* Tabela com destaque "melhor" e ranking opcional. */
.tg-tabela-rolagem { overflow-x: auto; margin-top: 10px; }
.tg-tabela-dados td { font-size: 13px; }
.tg-col-direita { text-align: right; font-family: var(--fonte-mono); font-size: 12px; white-space: nowrap; }
th.tg-col-direita { font-size: 10px; }
.tg-col-rank { width: 34px; }
.tg-rank-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 99px;
  font-family: var(--fonte-mono); font-size: 10px; color: var(--texto-2);
  background: rgba(20, 19, 23, .06);
}
.tg-linha-melhor td { background: #FEFCCB; }
.tg-pill-melhor {
  font-family: var(--fonte-mono); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--amarelo); color: var(--texto); border-radius: 99px; padding: 2px 7px; margin-left: 7px;
  white-space: nowrap;
}
/* Link opcional na 1ª célula (R2-A): permalink do post → afordância de clique discreta. */
.tg-link-celula {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--borda); transition: color .12s, text-decoration-color .12s;
}
.tg-link-celula:hover { color: var(--azul); text-decoration-color: var(--azul); }

/* Card campeão (criativo/palavra/público). */
.tg-campeao { border: 1.5px solid var(--tema); gap: 6px; }
/* Título de seção da tela Campeões (T3.2): kicker mono ocupando a linha da grade. */
.tg-secao-titulo {
  grid-column: 1 / -1; margin-top: 8px;
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-2); font-weight: 700;
}
.tg-secao-titulo:first-child { margin-top: 0; }
.tg-campeao-selo { font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--tema); font-weight: 700; }
.tg-campeao-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.tg-campeao-sub { color: var(--texto-2); font-size: 12.5px; }
.tg-campeao-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tg-campeao-stat-rotulo { font-family: var(--fonte-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--mudo); }
.tg-campeao-stat-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 15.5px; margin-top: 2px; }

/* Combo barras + linha (SVG normalizado sobre a área das barras). */
.tg-combo-area { position: relative; }
.tg-combo-linha { position: absolute; left: 0; right: 0; top: 16px; bottom: 32px; width: 100%; height: calc(100% - 48px); pointer-events: none; }
.tg-combo-legendas { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--texto-2); align-items: center; }
.tg-combo-legendas > span { display: inline-flex; align-items: center; gap: 7px; }
.tg-legenda-quadrado { width: 10px; height: 10px; border-radius: 3px; background: var(--tema); opacity: .55; }
.tg-legenda-traco { width: 18px; height: 2px; background: var(--rosa); }

/* Rodapé de marca das telas de relatório. */
.trafego-rodape {
  margin: 28px 0 8px; text-align: center;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 14px;
  color: var(--mudo); letter-spacing: .02em;
}

/* ===== Tráfego T4.3: barras DENSAS (>12 itens, ex. 24 horas do Instagram) =====
   O partial já corta os números fora do pico; aqui só apertamos o vão e
   alternamos os rótulos (o do pico permanece sempre visível). */
.tg-barras-densas { gap: 3px; }
.tg-barras-densas .tg-barra-haste { border-radius: 4px 4px 0 0; }
.tg-barras-densas .tg-barra-rotulo { font-size: 8px; }
.tg-barras-densas .tg-barra:nth-child(even):not(.tg-barra-destaque) .tg-barra-rotulo { visibility: hidden; }

/* ===== Tráfego T4.1: popup do link público ===== */
.trafego-link-secao { margin-top: 16px; }
.trafego-link-telas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.trafego-link-tela {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 10px; cursor: pointer;
}
.trafego-link-tela:hover { border-color: var(--azul); }
.trafego-link-tela:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.trafego-link-periodos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.trafego-link-periodo {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  border: 1px solid var(--borda); border-radius: 99px; padding: 6px 12px; cursor: pointer;
}
.trafego-link-periodo:hover { border-color: var(--azul); }
.trafego-link-periodo:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.trafego-link-datas { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.trafego-link-datas label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.trafego-link-datas input[type="date"] {
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px;
  font-family: var(--fonte-corpo); font-size: 13px; background: var(--superficie); color: var(--texto);
}
.trafego-link-trocar { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 12px; cursor: pointer; }
.trafego-link-url-linha { display: flex; gap: 8px; margin-top: 8px; }
.trafego-link-url-linha input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px;
  font-family: var(--fonte-mono); font-size: 11.5px; color: var(--texto-2); background: var(--fundo);
}
.trafego-link-acesso { font-family: var(--fonte-mono); font-size: 10.5px; color: var(--mudo); margin-top: 7px; }
.trafego-link-revogado { color: var(--rosa-escuro); font-size: 12.5px; margin: 14px 0 0; }
.trafego-link-revogar-form { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--borda); }

/* ===== Tráfego R2-B: marcos na linha do tempo (card da Visão geral + popup) =====
   Chip de cor na paleta LEGÍVEL do relatório: o amarelo do chip é #B58900 (têxtil
   legível — o --amarelo #ECF400 da marca some sobre superfície clara). */
.tg-marcos-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tg-marco-linha { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tg-marco-chip { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; background: var(--mudo); }
.tg-marco-chip-azul { background: var(--azul); }
.tg-marco-chip-rosa { background: var(--rosa); }
.tg-marco-chip-amarelo { background: #B58900; }
.tg-marco-chip-verde { background: #1B7A3D; }
.tg-marco-chip-cinza { background: var(--mudo); }
.tg-marco-data { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2); flex: none; }
.tg-marco-texto { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tg-marco-titulo { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.tg-marco-desc { color: var(--texto-2); font-size: 12.5px; overflow-wrap: anywhere; }

/* Popup "Marcos": lista com ações inline (lápis/×) + forms de editar/adicionar. */
.tg-marcos-popup-lista { margin-top: 16px; }
.tg-marco-item { border: 1px solid var(--borda); border-radius: 10px; padding: 9px 12px; }
.tg-marco-item .tg-marco-linha { flex-wrap: nowrap; }
.tg-marco-item .tg-marco-texto { flex: 1; }
.tg-marco-acoes { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; align-self: center; }
.tg-marco-acoes form { display: inline-flex; }
.tg-marco-acao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--mudo); font-size: 14px; line-height: 1;
  cursor: pointer; text-decoration: none; padding: 0;
}
.tg-marco-acao:hover { border-color: var(--borda); background: var(--fundo); color: var(--texto); }
.tg-marco-acao-excluir:hover { color: var(--rosa); border-color: var(--rosa-claro); }
.tg-marco-form { margin-top: 10px; }
.tg-marco-form-novo { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.tg-marco-form-novo .tg-marco-campos { margin-top: 8px; }
.tg-marco-campos { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.tg-marco-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tg-marco-campo > span {
  font-family: var(--fonte-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mudo);
}
.tg-marco-campo input[type="date"],
.tg-marco-campo input[type="text"] {
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 9px;
  font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto); background: var(--superficie);
}
.tg-marco-campo-desc { grid-column: 1 / -1; }
.tg-marco-campo-cor { grid-column: 1 / -1; }
.tg-marco-cores { display: inline-flex; gap: 8px; }
.tg-marco-cor-opcao { position: relative; display: inline-flex; padding: 4px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.tg-marco-cor-opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tg-marco-cor-opcao .tg-marco-chip { width: 14px; height: 14px; }
.tg-marco-cor-opcao:hover { border-color: var(--borda); }
.tg-marco-cor-opcao:has(input:checked) { border-color: var(--texto); }
.tg-marco-form-acoes { margin-top: 12px; display: flex; gap: 8px; }
@media (max-width: 700px) {
  .tg-marco-campos { grid-template-columns: 1fr; }
}

/* ===== Tráfego R2-C: metas do mês (card na Visão geral + popup) ===== */
/* Card: uma linha por meta ativa — rótulo + alvo, barra de progresso na cor da
   tela e status ("X% · faltam Y", selo verde quando bate, dica sem cache). */
.tg-metas-sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.tg-metas-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.tg-meta-linha {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; min-width: 0;
}
.tg-meta-cabeca { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tg-meta-rotulo { font-weight: 600; font-size: 13.5px; }
.tg-meta-alvo { font-family: var(--fonte-mono); font-size: 11px; color: var(--texto-2); }
.tg-meta-barra {
  height: 10px; border-radius: 999px; background: var(--fundo);
  border: 1px solid var(--borda); overflow: hidden;
}
.tg-meta-barra-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--tema, var(--azul));
}
.tg-meta-batida .tg-meta-barra-fill { background: #1B7A3D; }
.tg-meta-status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.tg-meta-numeros { font-size: 12.5px; color: var(--texto-2); }
.tg-meta-numeros strong { color: var(--texto); font-size: 13px; }
.tg-meta-selo-batida {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: #E7F4EC; color: #1B7A3D; border: 1px solid #BFE3CD;
  font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
}
.tg-meta-dica { font-size: 12px; color: var(--mudo); font-style: italic; }
/* Popup: campo alvo + select no mesmo idioma dos campos de marco. */
.tg-metas-popup-lista { margin-top: 16px; }
.tg-meta-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tg-meta-campos .tg-marco-form-acoes { margin-top: 0; }
.tg-meta-campos .tg-marco-campo select {
  border: 1px solid var(--borda); border-radius: 8px; padding: 7px 9px;
  font-family: var(--fonte-corpo); font-size: 13px; color: var(--texto); background: var(--superficie);
}
.tg-marco-form-novo .tg-meta-campos { margin-top: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 700px) {
  .tg-meta-linha { grid-template-columns: 1fr; gap: 6px; }
  .tg-meta-status { justify-content: flex-start; white-space: normal; }
  .tg-meta-campos, .tg-marco-form-novo .tg-meta-campos { grid-template-columns: 1fr; }
}

/* ===== Tráfego T4.2: portal público (chrome próprio, sem sidebar) ===== */
.trafego-publico-corpo { padding: 26px 22px 12px; }
.trafego-publico-wrap { max-width: 1180px; margin: 0 auto; }
.trafego-publico-marca {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  margin-bottom: 16px;
}
.trafego-publico-marca::after { content: '.'; color: var(--rosa); }
.trafego-publico-rodape { margin-top: 34px; font-size: 12.5px; font-weight: 500; }
@media (max-width: 700px) {
  .trafego-publico-corpo { padding: 18px 12px 10px; }
  .trafego-publico-corpo .pagina-topo { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===== Aba Integrações (E1): grid de cards de provedores/secrets ===== */
.selo-ok { background: #E3F4E8; color: #1B7A3D; }
.integracoes-intro { color: var(--mudo); font-size: 13px; margin: -6px 0 18px; max-width: 640px; }
.integracoes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; align-items: start;
}
.integracao-card { padding: 18px 18px 16px; }
.integracao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.integracao-nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; color: var(--texto); }
.integracao-nota { color: var(--mudo); font-size: 12px; margin-top: 3px; }
.integracao-mascara { color: var(--mudo); font-size: 11.5px; font-family: var(--fonte-mono); margin-top: 6px; }
.integracao-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); margin: 8px 0 0; cursor: pointer; }
.integracao-check input { width: auto; }
.integracao-acoes { margin-top: 16px; }

/* ============================================================================
   Automações (A1) — motor de regras, dry-run, kill switch, auditoria.
   ============================================================================ */
.selo-evento { background: var(--azul-claro); color: var(--azul); }
.automacao-selo-falhou { background: var(--rosa-claro); color: var(--rosa-escuro); }

/* Banner do kill switch */
.automacao-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; border: 1px solid var(--borda);
}
.automacao-banner-on { background: var(--superficie); }
.automacao-banner-off { background: var(--rosa-claro); border-color: var(--rosa); }
.automacao-banner-texto { display: flex; flex-direction: column; gap: 3px; }
.automacao-banner-texto strong { font-family: var(--fonte-titulo); font-size: 15px; }
.automacao-banner-texto span { color: var(--texto-2); font-size: 12.5px; max-width: 60ch; }
.automacao-banner-off .automacao-banner-texto strong { color: var(--rosa-escuro); }

/* Lista */
.automacao-tabela td { vertical-align: top; }
.automacao-inativa td { opacity: .62; }
.automacao-nome { text-decoration: none; color: var(--texto); }
.automacao-nome:hover { text-decoration: underline; }
.automacao-desc { color: var(--mudo); font-size: 12px; margin-top: 3px; max-width: 42ch; }
.automacao-cond-resumo { color: var(--mudo); font-size: 11px; margin-top: 5px; }
.automacao-acao-chip {
  display: inline-block; margin: 0 4px 4px 0; background: var(--fundo);
  color: var(--texto-2); border: 1px solid var(--borda); text-transform: none;
  font-family: var(--fonte-corpo); letter-spacing: 0; font-size: 11.5px;
}
.automacao-tier-sensivel { color: var(--rosa-escuro); font-weight: 600; }

/* Estado vazio */
.automacao-vazio { text-align: center; padding: 40px 24px; }
.automacao-vazio p { margin: 0 0 8px; }
.automacao-vazio-dica { color: var(--mudo); font-size: 13px; max-width: 52ch; margin: 0 auto 16px; }

/* Form */
.automacao-form { display: flex; flex-direction: column; gap: 16px; }
.automacao-secao { padding: 20px 22px; }
.automacao-secao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.automacao-secao-titulo { font-family: var(--fonte-titulo); font-size: 15px; margin: 0; }
.automacao-secao-nota { color: var(--texto-2); font-size: 12.5px; margin: 4px 0 0; max-width: 70ch; }
.automacao-secao-nota code { font-family: var(--fonte-mono); font-size: 11.5px; background: var(--fundo); padding: 1px 5px; border-radius: 4px; }
.automacao-linha-dupla { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.automacao-evento-nota { display: block; color: var(--mudo); font-size: 12px; margin-top: 5px; }

.automacao-cond-linha, .automacao-acao-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.automacao-cond-campo { flex: 1 1 30%; }
.automacao-cond-op { flex: 0 0 auto; }
.automacao-cond-valor { flex: 1 1 30%; }
.automacao-remover { flex: 0 0 auto; }

.automacao-acao-linha { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--fundo); }
.automacao-acao-tipo { flex: 1 1 auto; }
.automacao-acao-params { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.automacao-param { display: flex; flex-direction: column; gap: 4px; }
.automacao-param-label { font-size: 12px; color: var(--texto-2); }
.automacao-obr { color: var(--rosa); }
.automacao-param-input { width: 100%; }

.automacao-form-acoes { display: flex; gap: 10px; }

/* Dry-run */
.automacao-dryrun { margin-top: 18px; padding: 20px 22px; }
.automacao-dryrun-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.automacao-dryrun-resultado { margin-top: 16px; border-top: 1px solid var(--borda); padding-top: 14px; }
.automacao-dryrun-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.automacao-dryrun-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.automacao-dryrun-lista li { display: flex; align-items: center; gap: 8px; }
.automacao-dryrun-preview { font-size: 13px; color: var(--texto); }

/* Auditoria */
.automacao-log-quando { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--texto-2); white-space: nowrap; }
.automacao-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
/* Linha desfeita: esmaecida, para separar o efeito revertido do que ainda vale. */
.automacao-log-desfeito td { opacity: 0.55; }
.automacao-log-desfeito td:last-child { opacity: 1; }

@media (max-width: 720px) {
  .automacao-linha-dupla, .automacao-acao-params { grid-template-columns: 1fr; }
  .automacao-cond-linha { flex-wrap: wrap; }
}

/* ===== Escala E6 — Cliente 360 + Health Score ===== */
.selo-health { font-family: var(--fonte-mono); font-size: 10.5px; letter-spacing: .05em; border-radius: 99px; padding: 3px 10px; font-weight: 700; display: inline-block; }
.selo-health-verde { background: #E3F4E8; color: #1B7A3D; }
.selo-health-amarelo { background: #FBEAD7; color: #9A5B00; }
.selo-health-vermelho { background: var(--rosa-claro); color: var(--rosa-escuro); }
.selo-health-cinza { background: var(--fundo); color: var(--mudo); border: 1px solid var(--borda); }
.health-barra { height: 8px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; min-width: 160px; }
.health-barra > span { display: block; height: 100%; border-radius: 99px; }
.health-barra-verde > span { background: #1B7A3D; }
.health-barra-amarelo > span { background: #C98A00; }
.health-barra-vermelho > span { background: var(--rosa); }
.grade-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.bloco-360 h2 { margin: 0 0 12px; font-size: 15.5px; }
.bloco-360 h2 a { color: inherit; text-decoration: none; }
.bloco-360 h2 a:hover { text-decoration: underline; }
.linha-360 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.linha-360:last-child { border-bottom: none; }
.timeline-360 { list-style: none; margin: 0; padding: 0; }
.timeline-360 li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; align-items: baseline; }
.timeline-360 li:last-child { border-bottom: none; }
.timeline-360 .tl-quando { color: var(--mudo); font-family: var(--fonte-mono); font-size: 11px; white-space: nowrap; }
.timeline-360 .tl-tipo { font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap; }

/* ============================================================================
   E9 — Permissões editáveis (/permissoes + bloco de override no form de usuário).
   Toggle 100% CSS (checkbox estilizado, padrão visual da casa — sem lib).
   ============================================================================ */
.perm-grade th.perm-col, .perm-grade td.perm-col { text-align: center; }
.perm-col-admin { color: var(--mudo); }
.perm-nota-admin {
  display: block; font-family: var(--fonte-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mudo); font-weight: 400; margin-top: 2px;
}
.perm-secao-chave { display: block; font-family: var(--fonte-mono); font-size: 10.5px; color: var(--mudo); }

.perm-switch { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
/* O input cobre o switch inteiro (hit target real + acessível), invisível por opacity. */
.perm-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.perm-switch input:disabled { cursor: not-allowed; }
.perm-switch-trilho {
  width: 36px; height: 20px; border-radius: 99px; background: var(--fundo);
  border: 1px solid var(--borda); position: relative; transition: background .15s, border-color .15s;
}
.perm-switch-trilho::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--superficie); border: 1px solid var(--borda);
  transition: left .15s;
}
.perm-switch input:checked + .perm-switch-trilho { background: var(--azul); border-color: var(--azul); }
.perm-switch input:checked + .perm-switch-trilho::after { left: 18px; border-color: var(--azul-escuro); }
.perm-switch input:focus-visible + .perm-switch-trilho { outline: 2px solid var(--azul); outline-offset: 2px; }
.perm-switch input:disabled + .perm-switch-trilho { opacity: .55; }
.perm-switch-travado { cursor: not-allowed; }

.perm-legenda { color: var(--texto-2); font-size: 12.5px; margin: 10px 2px 0; }
.perm-log-titulo { font-family: var(--fonte-titulo); font-size: 15px; margin: 0 0 12px; }
.perm-log-vazio { color: var(--mudo); font-size: 13px; margin: 0; }
.perm-selo-ve { background: #E3F4E8; color: #1B7A3D; }
.perm-selo-naove { background: var(--fundo); color: var(--mudo); border: 1px solid var(--borda); }
.perm-selo-herda { background: var(--azul-claro); color: var(--azul); }

.perm-usuario-nota { color: var(--texto-2); font-size: 12.5px; margin: 0 0 12px; }
.perm-usuario-linha {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--borda); font-size: 13.5px;
}
.perm-usuario-linha:last-child { border-bottom: none; }
.perm-usuario-secao { flex: 1 1 auto; }
.perm-tristate { display: inline-flex; gap: 2px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 2px; }
.perm-tristate-opcao { position: relative; cursor: pointer; }
.perm-tristate-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.perm-tristate-opcao span {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; color: var(--texto-2);
}
.perm-tristate-opcao input:checked + span { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); font-weight: 600; }
.perm-tristate-opcao input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 1px; }
.perm-usuario-linha .selo { min-width: 52px; text-align: center; }

/* ============================================================================
   == MOBILE == (M1) — o painel usável no celular.
   Topbar + drawer da sidebar, tabelas com rolagem própria, kanban em colunas
   roláveis DENTRO do container. Regra de ouro: o body NUNCA rola horizontal.
   Desktop (>900px) permanece IDÊNTICO: tudo aqui vive atrás do breakpoint,
   e os elementos novos (topbar/overlay) ficam display:none acima dele.
   ============================================================================ */

/* Elementos novos do layout: invisíveis no desktop. */
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 900px) {
  /* ── Estrutura: app vira coluna (topbar em cima, main embaixo); a sidebar sai
     do fluxo e vira drawer fixo, fechado por padrão (translateX(-100%)). */
  .app { flex-direction: column; }
  .main { width: 100%; padding: 16px 14px 28px; overflow-x: hidden; }

  .mobile-topbar {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 10px 12px; background: var(--superficie);
    border-bottom: 1px solid var(--borda);
  }
  .mobile-menu-botao {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
    padding: 0;
  }
  .mobile-menu-botao:hover { background: var(--fundo); }
  .mobile-topbar-marca { display: flex; align-items: center; gap: 8px; }
  .mobile-topbar-marca img { height: 20px; width: auto; display: block; }
  .mobile-topbar-marca strong {
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px;
    letter-spacing: -.01em;
  }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 220;
    width: min(300px, 86vw);
    transform: translateX(-105%); transition: transform .18s ease;
    box-shadow: 0 8px 40px rgba(20, 19, 23, .3);
  }
  body.menu-aberto .sidebar { transform: translateX(0); }
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 210;
    background: rgba(20, 19, 23, .42);
  }
  .sidebar-overlay[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
  }
  /* Alvos de toque generosos no menu. */
  .nav-item { padding: 11px 10px; }

  /* ── Cabeçalho de página: título + ações quebram linha em vez de espremer.
     O filho direto costuma ser um flex inline (style=) sem wrap — destrava aqui. */
  .pagina-topo { flex-wrap: wrap; gap: 10px; }
  .pagina-topo > div { flex-wrap: wrap; }
  .pagina-titulo { font-size: 22px; }

  /* ── Linha de tarefa: chips/avatares quebram linha em vez de estourar. */
  .tarefa-linha { flex-wrap: wrap; row-gap: 4px; }
  /* Popups ancorados (salvar filtro / duplicar projeto / salvar playbook):
     no mobile viram painel fixo colado às bordas — nunca estouram a viewport. */
  .main .filtro-salvar-form,
  .main .projeto-duplicar-form,
  .main .trafego-periodo-form {
    position: fixed; left: 14px; right: 14px; top: 30vh;
    max-width: none; flex-wrap: wrap; z-index: 120; white-space: normal;
  }
  .main .projeto-duplicar-form input { max-width: 100%; }

  /* ── Tabelas: cada tabela rola horizontalmente DENTRO do próprio cartão.
     display:block faz o elemento <table> virar a área de rolagem — as views
     não precisam de wrapper. */
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { white-space: nowrap; }

  /* ── Kanban (demandas/pipeline/projeto): colunas roláveis horizontalmente
     dentro do container, com scroll-snap e coluna ~82vw. */
  .kanban {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: min(82vw, 300px);
    overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }
  .kanban-coluna { scroll-snap-align: start; }

  /* ── Popups/dialogs: nunca maiores que a viewport. */
  .popup-cartao { width: 100%; max-width: calc(100vw - 24px); padding: 18px 16px; }

  /* ── Login: o cartao de 360px ganha respiro nos 375px. */
  .login-cartao { width: calc(100vw - 32px); max-width: 360px; }

  /* ── Filtros/ações em linha viram fluxo quebrável. */
  .kanban-filtros, .legenda-origem { flex-wrap: wrap; }
  .trafego-cab-acoes { justify-content: flex-start; }

  /* ── Grades que só definiam colunas largas: empilham. */
  .trafego-link-telas { grid-template-columns: 1fr; }
  .grade-360 { grid-template-columns: 1fr; }
  .grade-360 > *, .main .rel-grade > * { min-width: 0; }
  .main .rel-risco-item, .main .rel-cabecalho { flex-wrap: wrap; }
  .linha-360 { flex-wrap: wrap; }
  .health-barra { min-width: 0; flex: 1 1 120px; }
  .integracoes-grid { grid-template-columns: 1fr; }

  /* ── Financeiro: gráfico de 12 meses rola horizontalmente dentro do cartão. */
  .main .caixa-grafico { overflow-x: auto; padding-bottom: 6px; }
  .main .caixa-grafico .caixa-coluna { flex: 0 0 46px; }
  /* Lista de lançamentos: a grade de 7 colunas vira cartão de 2 colunas. */
  .main .fluxo-cab { display: none; }
  .main .fluxo-linha-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  /* Auditoria: linha do log vira bloco de 1 coluna; cabeçalho de grade some. */
  .main .log-cab-grid { display: none; }
  .main .log-linha { grid-template-columns: 1fr; row-gap: 3px; overflow-wrap: anywhere; }

  /* Fiscal: mesma receita — some o cabeçalho de grade, linha vira 2 colunas. */
  .main .tabela-cab-grid.fiscal-grid { display: none; }
  .main .fiscal-linha.fiscal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .main .fiscal-cab { flex-wrap: wrap; }
  .main .selo-embreve { white-space: normal; }

  /* ── Links longos (tokens públicos etc.) quebram em qualquer ponto. */
  .main a { overflow-wrap: anywhere; }

  /* ── Calendário editorial: o mês (7 colunas) rola horizontal dentro do wrapper. */
  .main .cal-rolagem { overflow-x: auto; padding-bottom: 8px; }
  .main .cal-rolagem .cal-semana,
  .main .cal-rolagem .cal-grade { min-width: 640px; }

  /* ── Grids declarados INLINE nas views (style="grid-template-columns:…"):
     no mobile todos empilham numa coluna. O !important é necessário para vencer
     o style= — e é seguro: empilhar é sempre o comportamento certo a 375px.
     min-width:0 nos filhos impede que conteúdo largo (tabelas) trave a coluna. */
  .main div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .main div[style*="grid-template-columns"] > * { min-width: 0; }
}