// ═══════════════════════════════════════════════════════════════
// SCREEN · PCO · Pesquisa de Clima Organizacional
// ═══════════════════════════════════════════════════════════════

// ── Tipos de pergunta unificados (pradao da plataforma) ─────────────────────
// Qualquer formulario (PCO, Censo, futuras pesquisas) deve oferecer estes 6
// tipos + a flag obrigatoria. Pra escala, min/max sao configuraveis (0-10).
// Backward compat: tipos antigos 'opcoes' viram 'single', 'multipla' viram
// 'multi', 'boolean' renderiza como single com Sim/Nao.
const TIPOS_PERGUNTA = [
  { id: 'scale',  label: 'Escala (nota)',              icone: '⬡' },
  { id: 'text',   label: 'Texto livre',                icone: '📝' },
  { id: 'single', label: 'Múltipla escolha (uma)',     icone: '◉' },
  { id: 'multi',  label: 'Caixas de seleção (várias)', icone: '☑' },
  { id: 'file',   label: 'Upload de arquivo',          icone: '📎' },
  { id: 'stars',  label: 'Classificação (estrelas)',   icone: '★' },
];
function normalizarTipoPergunta(t) {
  if (t === 'opcoes')   return 'single';
  if (t === 'multipla') return 'multi';
  if (t === 'boolean')  return 'single';
  if (t === 'texto')    return 'text';
  if (t === 'nome' || t === 'email') return 'text';
  return t || 'scale';
}
function escalaDe(p) {
  // default 1-5 — backward compat com perguntas antigas que nao salvavam min/max
  const min = Number.isFinite(p?.escalaMin) ? p.escalaMin : 1;
  const max = Number.isFinite(p?.escalaMax) ? p.escalaMax : 5;
  return { min, max };
}
function gerarValoresEscala(min, max) {
  const arr = [];
  for (let n = min; n <= max; n++) arr.push(n);
  return arr;
}

// ── Dados históricos (hardcoded) ──────────────────────────────────────────────

const PCO_DIMENSOES = [
  'Ergonomia',
  'Comunicação, integração e relacionamento interpessoal',
  'Motivação, comprometimento, reconhecimento e pertencimento',
  'Desenvolvimento e Progresso Profissional e de Carreira',
  'Volume de Trabalho, prazos e pressão',
  'Autonomia',
  'Condições de ambiente de trabalho e Processo Decisório',
  'Liderança',
];

const PCO_DIMENSOES_SHORT = [
  'Ergonomia', 'Comunicação', 'Motivação', 'Desenvolvimento',
  'Volume de Trabalho', 'Autonomia', 'Condições', 'Liderança',
];

// PCO_MEDIAS · Apenas dados REAIS extraidos dos xlsx. Sem 2025 (nao houve coleta).
// Ordem das dimensoes: Ergonomia, Comunicacao, Motivacao, Desenvolvimento, Volume Trabalho, Autonomia, Condicoes, Lideranca
const PCO_MEDIAS = {
  2024: { geral: [3.86,4.42,4.69,4.58,4.19,4.61,4.46,4.76], sem_assoc:[3.86,4.47,4.55,4.39,3.97,4.53,4.33,4.71], so_assoc:[3.86,4.35,4.38,4.20,4.36,4.46,4.13,4.68], global_geral:4.45,global_pct:88.94,global_sem:4.36,global_pct_sem:87.23,global_ass:4.31,global_pct_ass:86.22 },
  2026: { geral: [3.69,4.43,4.48,4.25,4.05,4.61,4.29,4.67], sem_assoc:[3.69,4.43,4.48,4.25,4.05,4.61,4.29,4.67], so_assoc:[3.69,4.43,4.48,4.25,4.05,4.61,4.29,4.67], global_geral:4.31,global_pct:86.18,global_sem:4.31,global_pct_sem:86.18,global_ass:4.31,global_pct_ass:86.18 },
};

// PCO_MEDIAS_CARGO · sem dados reais extraidos por cargo. Pendente analise dos xlsx originais.
const PCO_MEDIAS_CARGO = {};

// PCO_PERGUNTAS · 70 perguntas REAIS com nota 2024 (aba MÉDIA POR PERGUNTA do xlsx).
// Extraido via scripts/gerar_seed_pco_detalhado.js. Habilita a tela
// "Análise por Pergunta" com dados reais.
const PCO_PERGUNTAS = {
  'Ergonomia': [
    { texto: 'A empresa possui procedimentos e equipamentos de proteção adequados para evitar acidentes.', nota: 4.11 },
    { texto: 'O local de trabalho possui um ambiente físico agradável e adequado para a realização de tarefas.', nota: 3.76 },
    { texto: 'O espaço físico de trabalho é suficiente.', nota: 3.73 },
    { texto: 'A iluminação do ambiente de trabalho é adequada para realizar minhas atividades sem causar cansaço visual.', nota: 4.30 },
    { texto: 'A temperatura e a ventilação no ambiente de trabalho é confortável e apropriada.', nota: 3.73 },
    { texto: 'O ar é de boa qualidade no ambiente de trabalho, saudável e sem poluentes.', nota: 3.92 },
    { texto: 'O ambiente de trabalho é mantido limpo e organizado.', nota: 3.30 },
    { texto: 'Os colaboradores desta empresa têm equipamentos necessários para realizar suas tarefas.', nota: 3.97 },
    { texto: 'Os equipamentos de trabalho estão sempre em bom estado e funcionam corretamente.', nota: 3.95 },
    { texto: 'A empresa oferece espaços adequados para descanso e pausas durante a jornada de trabalho.', nota: 3.70 },
    { texto: 'A política de alimentação e os espaços destinados a refeições são apropriados.', nota: 4.00 },
  ],
  'Comunicação': [
    { texto: 'As informações necessárias à realização de meu trabalho são transmitidas de forma clara.', nota: 4.32 },
    { texto: 'As mudanças são comunicadas com antecedência.', nota: 4.14 },
    { texto: 'O trabalho em colaboração entre os setores na realização de uma entrega conjunta é efetivo.', nota: 4.19 },
    { texto: 'Consigo encontrar com facilidade as informações necessárias pelos diferentes canais (WhatsApp, Drive, Asana, E-mail, Intranet).', nota: 4.32 },
    { texto: 'As relações entre as pessoas no ESCALAB são saudáveis.', nota: 4.62 },
    { texto: 'No ESCALAB, os colaboradores auxiliam um novo integrante em suas dificuldades.', nota: 4.70 },
    { texto: 'Tenho confiança nos meus colegas de equipe e no trabalho que realizam.', nota: 4.57 },
    { texto: 'Sou tratado(a) com respeito pelos meus colegas de trabalho.', nota: 4.78 },
  ],
  'Motivação': [
    { texto: 'No ESCALAB há valorização e reconhecimento daqueles que atingem suas metas.', nota: 4.43 },
    { texto: 'Os colaboradores que desempenham bem suas tarefas são devidamente reconhecidos.', nota: 4.51 },
    { texto: 'Os feedbacks que recebo valorizam o meu trabalho.', nota: 4.62 },
    { texto: 'Se surgisse outra oportunidade de estágio/trabalho remunerado, eu pensaria muito antes de deixar o ESCALAB.', nota: 4.59 },
    { texto: 'Os colaboradores do ESCALAB têm orgulho de pertencer a ele.', nota: 4.76 },
    { texto: 'O ESCALAB é um local que eu recomendaria para meus amigos/parentes trabalharem.', nota: 4.81 },
    { texto: 'Realizo minhas tarefas com satisfação.', nota: 4.76 },
    { texto: 'Sinto que a cultura organizacional do Escalab está alinhada com minhas crenças e valores pessoais.', nota: 4.70 },
    { texto: 'Tenho interesse em continuar no Escalab no próximo semestre.', nota: 4.89 },
    { texto: 'Me sinto motivado(a) a contribuir com novas ideias e soluções para melhorar o desempenho da equipe.', nota: 4.84 },
  ],
  'Desenvolvimento': [
    { texto: 'O ESCALAB se preocupa em capacitar seus colaboradores para o exercício das atividades.', nota: 4.51 },
    { texto: 'O ESCALAB promove ações de desenvolvimento profissional e pessoal.', nota: 4.86 },
    { texto: 'As oportunidades de desenvolvimento profissional são acessíveis a todos os colaboradores.', nota: 4.59 },
    { texto: 'Os feedbacks que recebo são construtivos e me ajudam a crescer profissionalmente.', nota: 4.70 },
    { texto: 'As suas expectativas de desenvolvimento ao entrar no ESCALAB se concretizam.', nota: 4.57 },
    { texto: 'Sinto que meu esforço e desempenho são recompensados adequadamente pela empresa.', nota: 4.54 },
    { texto: 'Acredito que as promoções na empresa são justas e baseadas no mérito e no desempenho.', nota: 4.59 },
    { texto: 'Meu horizonte profissional está claro para mim, sei exatamente onde posso chegar dentro do ESCALAB.', nota: 4.30 },
  ],
  'Volume de Trabalho': [
    { texto: 'O volume de trabalho que recebo é adequado para o tempo e recursos que tenho disponíveis.', nota: 3.95 },
    { texto: 'O volume de trabalho é bem distribuído dentro do meu setor; raramente deixo de cumprir prazos e metas.', nota: 4.05 },
    { texto: 'Quase nunca considero minhas demandas de trabalho excessivas.', nota: 4.00 },
    { texto: 'O ESCALAB se preocupa com as demandas de trabalho excessivas.', nota: 4.51 },
    { texto: 'Tenho prazo suficiente para executar minhas atividades.', nota: 4.30 },
    { texto: 'O nível de estresse e pressão no trabalho é adequado e não prejudica meu bem-estar.', nota: 4.35 },
    { texto: 'Sinto que há um bom equilíbrio entre minha vida pessoal e profissional.', nota: 4.43 },
    { texto: 'Não preciso realizar muitas horas extras para dar conta das minhas tarefas.', nota: 3.92 },
  ],
  'Autonomia': [
    { texto: 'O colaborador tem autonomia para gerir suas tarefas.', nota: 4.81 },
    { texto: 'Tenho autonomia para tomar decisões e resolver problemas sem precisar recorrer à liderança em cada etapa.', nota: 4.35 },
    { texto: 'Tenho autonomia para realizar minhas tarefas, mas sei que posso contar com orientação quando necessário.', nota: 4.84 },
    { texto: 'Sinto que há um equilíbrio saudável entre a autonomia que recebo e o suporte que me é oferecido.', nota: 4.76 },
    { texto: 'Sinto que a comunicação sobre os limites e expectativas relacionados à minha autonomia no trabalho é clara.', nota: 4.30 },
  ],
  'Condições': [
    { texto: 'Quando há conflitos na equipe, eles são resolvidos de maneira eficiente e respeitosa.', nota: 4.59 },
    { texto: 'Meu setor é informado das decisões que o envolvem.', nota: 4.59 },
    { texto: 'As mudanças que acontecem no ESCALAB são devidamente informadas aos colaboradores.', nota: 4.49 },
    { texto: 'As pessoas que trabalham no ESCALAB sabem quais são os principais objetivos, metas ou planos da empresa.', nota: 4.32 },
    { texto: 'O estilo de administração adotado pela empresa influencia positivamente o comportamento dos seus membros.', nota: 4.59 },
    { texto: 'Há uma nítida e adequada divisão de papéis e atribuições entre os setores.', nota: 4.49 },
    { texto: 'Há uma nítida e adequada divisão de papéis e atribuições entre os cargos.', nota: 4.08 },
    { texto: 'Há suficiente flexibilidade para aceitação de ideias e sugestões voltadas à melhoria desta empresa.', nota: 4.81 },
    { texto: 'Considero que meu salário é compatível com minhas responsabilidades e o nível de trabalho exigido.', nota: 4.38 },
    { texto: 'Considero que meu salário e responsabilidades são compatíveis com o mercado de trabalho.', nota: 4.30 },
  ],
  'Liderança': [
    { texto: 'Eu recebo orientação da liderança para executar minhas tarefas no ESCALAB.', nota: 4.84 },
    { texto: 'A liderança realiza um planejamento eficiente das tarefas.', nota: 4.68 },
    { texto: 'Os colaboradores são respeitados pelo líder.', nota: 4.92 },
    { texto: 'Percebo que minha liderança reconhece e valoriza minhas contribuições, colocando-as em prática.', nota: 4.81 },
    { texto: 'Minha liderança tem competência necessária para lidar com pessoas.', nota: 4.73 },
    { texto: 'Tenho confiança nas decisões da Diretoria.', nota: 4.86 },
    { texto: 'O planejamento da Diretoria guia o ESCALAB para bons resultados.', nota: 4.81 },
    { texto: 'Há uma grande união e apoio mútuo entre as pessoas da equipe em que trabalho.', nota: 4.84 },
    { texto: 'O trabalho em equipe flui muito bem no Escalab.', nota: 4.51 },
    { texto: 'Há incentivo para melhorar o relacionamento e a troca de experiências entre as equipes de trabalho.', nota: 4.57 },
  ],
};

// PCO_QUALITATIVOS · comentarios REAIS da PCO 2026 (aba "Comunicação e Integração")
// Extraidos via scripts/gerar_seed_pco_detalhado.js. Desenvolvimento/Condicoes
// ficam vazios pq nao tiveram bloco identificavel no xlsx.
const PCO_QUALITATIVOS = {
  'Ergonomia': {
    pontos_positivos: ['Organização dos espaços'],
    pontos_negativos: [
      'Cheiro forte dos projetos (8x) - falta de exaustor/ventilação no galpão',
      'Temperatura do galpão (2x)',
      'Sobre não ter espaço de descanso (4x)',
      'Goteiras e piso quebrados (3x)',
      'Demora para manutenção de equipamentos e/ou reposição de materiais (2x)',
      'Organização dos espaços deveria ser melhorada pelos próprios colaboradores no final do expediente (4x)',
      'Limpeza (especialmente dias de chuva) (3x)',
      'Falta de espaço quando a escala está cheia e barulhos externos (3x)',
      'Pernilongo (3x)',
      'UFMG: melhorar o ar condicionado',
      'Maior fiscalização do uso de EPIs',
      'Revesa de equipamentos dificulta entregar demanda',
      'Falta de materiais para limpeza (comunicação sobre onde estão)',
      'Requeijão estragado na geladeira',
      'Dificuldade com a internet no CIT',
      'Temperatura muito quente no co-working fora do CIT',
    ],
  },
  'Comunicação': {
    pontos_positivos: [
      'Comunicação da gestão é boa',
      'Boas relações com a equipe (3x)',
      'Ambiente saudável',
    ],
    pontos_negativos: [
      'Informações nem sempre são passadas de forma clara (alinhamento de expectativa)',
      'Às vezes não há comunicação do que está acontecendo (2x) - ex: demandas de divulgação não entregues',
      'Não conseguir encontrar arquivos no drive',
      'Falta/demora de retorno intersetorial (Marketing e Financeiro) (2x)',
      'Falta de informações para montar demandas (comercial)',
      'Falhas de comunicação em projetos, ex: treinamento de novo colaborador',
      'Individualismo',
      'Confiança nos colegas depende de muitos aspectos',
    ],
  },
  'Motivação': {
    pontos_positivos: [
      'Quer continuar, gosta muito do Escalab',
      'Excelente local de trabalho, equipe alinhada, empenho em obter melhorias',
      'Gosto muito da forma humana como são guiados os relacionamentos',
      'Tem um fluxo de feedbacks (2x)',
      'A proposta do Escalab é muito alinhada com meus valores pessoais',
      'Há reconhecimento para aqueles que atingem metas',
      'Leque de experiências amplo durante a graduação',
      'Gás no trabalho após promoção',
      'O Escalab é um ambiente muito positivo para se trabalhar',
      'Satisfação em realizar as atividades, principalmente por conseguir conciliar com a graduação',
    ],
    pontos_negativos: [
      'Não sabe quais são as formas de reconhecimento',
      'Indisponibilidade do líder para feedback sobre desmotivação, sobrecarga e evolução de carreira',
      'Escalab caminhando para um rumo mais tradicional (muitos níveis de chefia, decisões centralizadas)',
      'Dúvida sobre o próprio cargo, se subiu ou desceu de nível',
      'Sinto que quem faz um bom trabalho é recompensado com ainda mais trabalho',
      'Melhorar a qualidade dos feedbacks',
      'Trabalho pesado fisicamente, dúvidas sobre indicar para alguém',
      'Parte de associados fica isolada em relação às novidades e comunicações',
    ],
  },
  'Desenvolvimento': { pontos_positivos: [], pontos_negativos: [] },
  'Volume de Trabalho': {
    pontos_positivos: [
      'Demandas condizentes com as horas semanais (2x)',
      'Aumento do nível de complexidade mas sem aumento de volume',
      'Liderança sempre preocupada com a carga de trabalho',
    ],
    pontos_negativos: [
      'Conduzindo atividades do setor sozinha, impacto no volume de trabalho (comercial)',
      'Demandas mal distribuídas: alguns sem nada, outros sem tempo nem para almoçar (P&D projeto associado)',
      'Pouco tempo entre a demanda e validação',
      'Liderança que não percebe a sobrecarga, fica parecendo reclamação',
    ],
  },
  'Autonomia': {
    pontos_positivos: [
      'Tudo certo nesse quesito e consegue recorrer à liderança/time quando necessário (6x)',
      'Sinto que tenho muita autonomia e gosto disso',
    ],
    pontos_negativos: [
      'Não sinto que meus líderes confiam em mim para tomar certas decisões, sempre recorro a eles',
    ],
  },
  'Condições': { pontos_positivos: [], pontos_negativos: [] },
  'Liderança': {
    pontos_positivos: [
      'Confio muito no time e nos diretores',
      'Sem reclamações sobre a liderança! A liderança encaminha para alcançar a meta (3x)',
      'Acredito que o Escalab é bem unido',
      'Excelente equipe de trabalho',
      'Acredito que estamos evoluindo como empresa',
    ],
    pontos_negativos: [
      'Comunicação de uma das lideranças era bastante ríspida, impactando motivação e clima - tem se esforçado para adotar postura mais colaborativa',
      'Organização de tarefas ruim (P&D)',
      'Algumas lideranças têm competências para lidar com pessoas e outras não (2x)',
    ],
  },
};

// PCO_SETORES_HIST · medias globais por setor 2024 (REAL, aba "RELATÓRIO" do xlsx).
// Mapeamento RH->Gente e Cultura, P&D->P&D e Escalonamento; ESG/Comunicação/Financeiro
// mantidos como apareciam no xlsx (nao tem mapping em SETORES do app).
const PCO_SETORES_HIST = [
  { setor: 'ESG',                  2024: 4.78 },
  { setor: 'Gente e Cultura',       2024: 4.71 },
  { setor: 'VB',                    2024: 4.65 },
  { setor: 'Financeiro',            2024: 4.52 },
  { setor: 'Diretoria',             2024: 4.52 },
  { setor: 'Comunicação',           2024: 4.52 },
  { setor: 'NNE',                   2024: 4.43 },
  { setor: 'Redes',                 2024: 4.37 },
  { setor: 'Comercial',             2024: 4.08 },
  { setor: 'P&D e Escalonamento',   2024: 3.95 },
];

// CENSO_DADOS · sem dados reais extraidos. Censo de diversidade real ainda nao foi importado.
// Estrutura mantida pra nao quebrar a tela; valores zerados ate import.
const CENSO_DADOS = {};

// ── Pesquisas dinâmicas (localStorage) ───────────────────────────────────────

const PCO_PESQUISAS_KEY = 'escalab_pco_pesquisas';

const PCO_MODELO_BASE = {
  id: 'modelo_padrao',
  titulo: 'PCO Padrão Escalab',
  isModelo: true,
  status: 'modelo',
  criadaEm: '2024-01-01',
  dimensoes: PCO_DIMENSOES_SHORT.map((titulo, di) => ({
    id: `dim_${di}`,
    titulo,
    perguntas: (PCO_PERGUNTAS[titulo] || []).map((p, pi) => ({
      id: `dim${di}_p${pi}`,
      tipo: 'scale',
      texto: p.texto,
    })).concat([{ id: `dim${di}_txt`, tipo: 'text', texto: `Comentários sobre ${titulo} (opcional)` }]),
  })),
  respostas: [],
};

const PCO_LINKS = {
  2026: {
    formUrl: 'https://docs.google.com/forms/d/1Bohboocqjjt-eEYcYKgFkjhOE-DZ5NZdXxRIGo_GKco/edit',
    sheetUrl: 'https://docs.google.com/spreadsheets/d/1yqTtpp-KkgyI_4W4GrSTESiLd9Hkm2douc7Pke9o0oo/edit',
  },
};

// PCO_HISTORICAS · so anos com coleta real (2024 e 2026)
const PCO_HISTORICAS = [2024,2026].map(ano => ({
  id: `pco_hist_${ano}`,
  titulo: `PCO ${ano}`,
  ano,
  status: 'encerrada',
  criadaEm: `${ano}-03-01`,
  encerradaEm: `${ano}-03-31`,
  respondentes: ano === 2024 ? 38 : 132,
  mediaGeral: PCO_MEDIAS[ano]?.global_geral,
  mediaDimensoes: PCO_MEDIAS[ano]?.geral,
  isHistorica: true,
  dimensoes: PCO_MODELO_BASE.dimensoes,
  respostas: [],
  formUrl: PCO_LINKS[ano]?.formUrl || null,
  sheetUrl: PCO_LINKS[ano]?.sheetUrl || null,
}));

function getPCOPesquisas() {
  try {
    const raw = localStorage.getItem(PCO_PESQUISAS_KEY);
    if (raw) return JSON.parse(raw);
    const inicial = [PCO_MODELO_BASE, ...PCO_HISTORICAS];
    localStorage.setItem(PCO_PESQUISAS_KEY, JSON.stringify(inicial));
    return inicial;
  } catch { return [PCO_MODELO_BASE, ...PCO_HISTORICAS]; }
}

function salvarPCOPesquisas(lista) {
  try { localStorage.setItem(PCO_PESQUISAS_KEY, JSON.stringify(lista)); } catch {}
}

// ── Respostas individuais do colaborador para a PCO ──────────────────────
const PCO_RESPOSTAS_KEY = 'escalab_pco_respostas';
function getRespostasPCO() { try { return JSON.parse(localStorage.getItem(PCO_RESPOSTAS_KEY) || '[]'); } catch { return []; } }
function jaRespondeuPCO(pcoId, colabId) {
  return getRespostasPCO().some(r => r.pcoId === pcoId && r.colaboradorId === colabId);
}
function salvarRespostaPCO(resp) {
  try {
    const arr = getRespostasPCO();
    const filtered = arr.filter(r => !(r.pcoId === resp.pcoId && r.colaboradorId === resp.colaboradorId));
    filtered.push({ ...resp, enviadaEm: new Date().toISOString() });
    localStorage.setItem(PCO_RESPOSTAS_KEY, JSON.stringify(filtered));
    // Incrementa contador na pesquisa
    const pesqs = getPCOPesquisas();
    const idx = pesqs.findIndex(p => p.id === resp.pcoId);
    if (idx >= 0) {
      pesqs[idx].respondentes = (pesqs[idx].respondentes || 0) + 1;
      pesqs[idx].respostas = pesqs[idx].respostas || [];
      pesqs[idx].respostas.push({ colaboradorId: resp.colaboradorId, enviadaEm: resp.enviadaEm });
      salvarPCOPesquisas(pesqs);
    }
  } catch {}
}

// ── Agregador automatico das respostas in-app (PCO) ──────────────────────
// Le todas as respostas in-app dessa pesquisa do PCO_RESPOSTAS_KEY e calcula
// media geral, por dimensao, por setor e por cargo. As respostas trazem o
// cargo e setor do colaborador (preenchidos automaticamente no momento da
// resposta) e o nome se ele optou por se identificar.
function agregarRespostasPCO(pesquisa) {
  const todas = getRespostasPCO().filter(r => r.pcoId === pesquisa.id);
  if (todas.length === 0) return null;

  // Indexa perguntas por id pra recuperar tipo e dimensao em O(1)
  const idxPergunta = {};
  (pesquisa.dimensoes || []).forEach(d => (d.perguntas || []).forEach(p => {
    idxPergunta[p.id] = { dim: d, p, max: escalaDe(p).max };
  }));

  const numPorPergunta = {};       // perguntaId -> [n,n,n]
  const numPorDim     = {};        // dimTitulo  -> [n,n,n]
  const maxDim        = {};        // dimTitulo  -> max da escala (1o achado)
  const textosPorPergunta = {};    // perguntaId -> [{ nome, texto }]
  const escolhasPorPergunta = {};  // perguntaId -> { opcao: count }
  const porSetor = {}, porCargo = {};

  todas.forEach(resp => {
    const valoresDoResp = [];
    Object.entries(resp.respostas || {}).forEach(([pid, val]) => {
      const meta = idxPergunta[pid];
      if (!meta) return;
      const tipo = normalizarTipoPergunta(meta.p.tipo);
      const dimT = meta.dim.titulo;
      if (tipo === 'scale' || tipo === 'stars') {
        const n = Number(val);
        if (Number.isFinite(n)) {
          (numPorPergunta[pid] = numPorPergunta[pid] || []).push(n);
          (numPorDim[dimT]     = numPorDim[dimT]     || []).push(n);
          if (!maxDim[dimT]) maxDim[dimT] = tipo === 'stars' ? 5 : meta.max;
          valoresDoResp.push(n / (tipo === 'stars' ? 5 : meta.max)); // normaliza pro 0-1
        }
      } else if (tipo === 'text') {
        if (val && String(val).trim()) (textosPorPergunta[pid] = textosPorPergunta[pid] || []).push({ nome: resp.nome, texto: String(val).trim() });
      } else if (tipo === 'single') {
        if (val) {
          const m = escolhasPorPergunta[pid] = escolhasPorPergunta[pid] || {};
          m[val] = (m[val] || 0) + 1;
        }
      } else if (tipo === 'multi') {
        if (Array.isArray(val)) {
          const m = escolhasPorPergunta[pid] = escolhasPorPergunta[pid] || {};
          val.forEach(op => { m[op] = (m[op] || 0) + 1; });
        }
      }
    });
    // Media por respondente — normalizada pra 0-1 — entra na agregacao por setor/cargo
    if (valoresDoResp.length) {
      const mNorm = valoresDoResp.reduce((s,x) => s+x, 0) / valoresDoResp.length;
      if (resp.setor) (porSetor[resp.setor] = porSetor[resp.setor] || []).push(mNorm);
      if (resp.cargo) (porCargo[resp.cargo] = porCargo[resp.cargo] || []).push(mNorm);
    }
  });

  const avg = arr => arr.length ? arr.reduce((s,x) => s+x, 0) / arr.length : null;
  // Media geral · em escala normalizada * 5 pra ficar consistente com o resto da UI (0-5)
  const todasNormalizadas = [];
  Object.entries(numPorPergunta).forEach(([pid, arr]) => {
    const meta = idxPergunta[pid];
    const max = normalizarTipoPergunta(meta.p.tipo) === 'stars' ? 5 : meta.max;
    arr.forEach(n => todasNormalizadas.push(n / max));
  });
  const mediaGeralNorm = avg(todasNormalizadas);
  const mediaGeral = mediaGeralNorm != null ? mediaGeralNorm * 5 : null;

  const porDimensao = (pesquisa.dimensoes || []).map(d => {
    const arr = numPorDim[d.titulo] || [];
    const max = maxDim[d.titulo] || 5;
    const m = avg(arr);
    return { titulo: d.titulo, media: m, max, mediaNorm5: m != null ? (m / max) * 5 : null, n: arr.length };
  });

  return {
    total: todas.length,
    mediaGeral,         // sempre normalizada pra 0-5 (compativel com o resto da tela)
    mediaGeralNorm,     // 0-1
    porDimensao,
    porSetor: Object.entries(porSetor).map(([setor, arr]) => ({ setor, media: avg(arr) * 5, n: arr.length })).sort((a,b) => (b.media||0) - (a.media||0)),
    porCargo: Object.entries(porCargo).map(([cargo, arr]) => ({ cargo, media: avg(arr) * 5, n: arr.length })).sort((a,b) => (b.media||0) - (a.media||0)),
    textosPorPergunta,
    escolhasPorPergunta,
    numPorPergunta,
  };
}

// ── Renderer unificado de pergunta (usado pelo PCO e Censo no formulario) ─
// Cores fortes pra contraste alto — letras em var(--escalab-ink), ajudas em
// var(--escalab-slate) (nada de --escalab-mute em conteudo do form).
const InputPergunta = ({ p, valor, onChange, corDestaque = '#00836B' }) => {
  const tipo = normalizarTipoPergunta(p.tipo);

  if (tipo === 'scale') {
    const { min, max } = escalaDe(p);
    const valores = gerarValoresEscala(min, max);
    return (
      <div>
        <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>
          {valores.map(n => {
            const sel = valor === n;
            return (
              <button key={n} type="button" onClick={() => onChange(n)} style={{
                flex:'1 1 52px', minHeight: 48, maxWidth: 84,
                border: `2px solid ${sel ? corDestaque : '#9CA5B0'}`,
                background: sel ? corDestaque : '#fff',
                color: sel ? '#fff' : 'var(--escalab-ink)',
                borderRadius: 9, fontWeight: 700, fontSize: 15, cursor: 'pointer',
                fontFamily: 'var(--font-sans)', transition: 'all .12s',
              }}>{n}</button>
            );
          })}
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:11.5, color:'var(--escalab-slate)', marginTop:7, fontWeight:600 }}>
          <span>{min} · Discordo totalmente</span>
          <span>{max} · Concordo totalmente</span>
        </div>
      </div>
    );
  }

  if (tipo === 'text') {
    return (
      <textarea value={valor || ''} onChange={e => onChange(e.target.value)} rows={3}
        placeholder="Sua resposta…"
        style={{ width:'100%', border:'1.5px solid #9CA5B0', borderRadius:8, padding:'11px 13px', fontSize:14, fontFamily:'var(--font-sans)', outline:0, resize:'vertical', boxSizing:'border-box', color:'var(--escalab-ink)', background:'#fff', lineHeight:1.5 }} />
    );
  }

  if (tipo === 'single') {
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {(p.opcoes || []).map(op => {
          const sel = valor === op;
          return (
            <label key={op} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', border:`2px solid ${sel ? corDestaque : '#9CA5B0'}`, background: sel ? corDestaque + '15' : '#fff', borderRadius:9, cursor:'pointer', transition:'all .12s' }}>
              <input type="radio" name={p.id} value={op} checked={sel} onChange={() => onChange(op)} style={{ accentColor: corDestaque }} />
              <span style={{ fontSize:14, color:'var(--escalab-ink)', fontWeight: sel ? 700 : 500 }}>{op}</span>
            </label>
          );
        })}
      </div>
    );
  }

  if (tipo === 'multi') {
    const arr = Array.isArray(valor) ? valor : [];
    function toggle(op) {
      const novo = arr.includes(op) ? arr.filter(x => x !== op) : [...arr, op];
      onChange(novo);
    }
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {(p.opcoes || []).map(op => {
          const sel = arr.includes(op);
          return (
            <label key={op} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', border:`2px solid ${sel ? corDestaque : '#9CA5B0'}`, background: sel ? corDestaque + '15' : '#fff', borderRadius:9, cursor:'pointer', transition:'all .12s' }}>
              <input type="checkbox" checked={sel} onChange={() => toggle(op)} style={{ accentColor: corDestaque, width:16, height:16 }} />
              <span style={{ fontSize:14, color:'var(--escalab-ink)', fontWeight: sel ? 700 : 500 }}>{op}</span>
            </label>
          );
        })}
      </div>
    );
  }

  if (tipo === 'file') {
    function pickFile(e) {
      const file = e.target.files?.[0];
      if (!file) return;
      const r = new FileReader();
      r.onload = ev => onChange({ nome: file.name, tipo: file.type, tamanho: file.size, dataUrl: ev.target.result });
      r.readAsDataURL(file);
    }
    return (
      <div>
        {valor ? (
          <div style={{ display:'flex', gap:12, alignItems:'center', border:`1.5px solid ${corDestaque}`, background: corDestaque + '0d', borderRadius:9, padding:'10px 14px' }}>
            <Icon name="file" size={18} />
            <div style={{ flex:1, fontSize:13.5, color:'var(--escalab-ink)', fontWeight:600 }}>{valor.nome}</div>
            <button type="button" onClick={() => onChange(null)} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-slate)' }}><Icon name="close" size={16} /></button>
          </div>
        ) : (
          <label style={{ display:'flex', alignItems:'center', gap:9, border:'1.5px dashed #9CA5B0', borderRadius:9, padding:'12px 16px', cursor:'pointer', color:'var(--escalab-ink)', fontSize:13.5, fontWeight:500, background:'#fff' }}>
            <Icon name="upload" size={16} /> Selecionar arquivo
            <input type="file" style={{ display:'none' }} onChange={pickFile} />
          </label>
        )}
      </div>
    );
  }

  if (tipo === 'stars') {
    const v = Number(valor) || 0;
    return (
      <div style={{ display:'flex', gap:6 }}>
        {[1, 2, 3, 4, 5].map(n => {
          const ativo = n <= v;
          return (
            <button key={n} type="button" onClick={() => onChange(n)} title={`${n} estrela${n > 1 ? 's' : ''}`} style={{
              width:46, height:46, border: `2px solid ${ativo ? '#E89B3B' : '#9CA5B0'}`, background: ativo ? '#FFF7EB' : '#fff',
              color: ativo ? '#E89B3B' : '#9CA5B0', borderRadius: 9, cursor:'pointer', fontSize:22, lineHeight:1, fontWeight: 700, fontFamily:'var(--font-sans)',
            }}>★</button>
          );
        })}
      </div>
    );
  }

  return null;
};

// ── View do colaborador: responder PCO ────────────────────────────────────
const PCOColaboradorView = ({ user }) => {
  const [pesquisas, setPesquisas] = useState(() => getPCOPesquisas());
  const ativas = pesquisas.filter(p => p.status === 'ativa');
  const [selecionada, setSelecionada] = useState(null);
  const [respostas, setRespostas] = useState({});
  const [dimAtual, setDimAtual] = useState(0);
  const [enviado, setEnviado] = useState(false);
  const [erro, setErro] = useState('');
  // Cabecalho: identificacao opcional + cargo/setor automaticos
  const [nomeOpcional, setNomeOpcional] = useState('');
  const cargoAuto = user?.cargo || '';
  const setorAuto = user?.setor || '';

  function abrir(p) { setSelecionada(p); setRespostas({}); setEnviado(false); setErro(''); setDimAtual(0); setNomeOpcional(''); }
  function setResp(qid, val) { setRespostas(r => ({ ...r, [qid]: val })); }

  function respostaVazia(p, val) {
    const tipo = normalizarTipoPergunta(p.tipo);
    if (val == null) return true;
    if (tipo === 'text')  return String(val).trim() === '';
    if (tipo === 'multi') return !Array.isArray(val) || val.length === 0;
    if (tipo === 'file')  return !val || !val.dataUrl;
    return false;
  }

  function enviar() {
    if (!selecionada) return;
    // Valida obrigatorias (todos os tipos) — o respeitando o flag p.obrigatoria;
    // scale historicamente era sempre obrigatoria, mantemos esse comportamento.
    const faltando = selecionada.dimensoes.some(d => d.perguntas.some(q => {
      const tipo = normalizarTipoPergunta(q.tipo);
      const obrigatoria = !!q.obrigatoria || tipo === 'scale';
      return obrigatoria && respostaVazia(q, respostas[q.id]);
    }));
    if (faltando) { setErro('Responda todas as perguntas obrigatórias antes de enviar.'); return; }
    salvarRespostaPCO({
      id: 'PR_' + Date.now(),
      pcoId: selecionada.id,
      colaboradorId: user.id,
      nome: nomeOpcional.trim() || null,
      cargo: cargoAuto || null,
      setor: setorAuto || null,
      respostas,
    });
    setEnviado(true);
    setPesquisas(getPCOPesquisas());
  }

  if (selecionada && !enviado) {
    const dim = selecionada.dimensoes[dimAtual];
    const totalDims = selecionada.dimensoes.length;
    const progresso = Math.round(((dimAtual + 1) / totalDims) * 100);
    const ehPrimeiro = dimAtual === 0;

    return (
      <div style={{ maxWidth: 760, animation: 'fadeIn .2s' }}>
        <button onClick={() => setSelecionada(null)} style={{ border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, color: 'var(--escalab-slate)', fontSize: 13, padding: 0, marginBottom: 16, fontFamily: 'var(--font-sans)', fontWeight: 600 }}>
          <Icon name="chev_left" size={14} /> Voltar
        </button>

        <div style={{ background: 'linear-gradient(135deg, #00967B 0%, #007A5E 100%)', color: '#fff', borderRadius: 14, padding: '22px 26px', marginBottom: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', opacity: .95 }}>PCO · Clima Organizacional</div>
          <h3 style={{ margin: '4px 0 8px', fontSize: 20, fontWeight: 800 }}>{selecionada.titulo}</h3>
          <p style={{ fontSize: 13.5, opacity: .98, lineHeight: 1.55, margin: 0 }}>Sua resposta pode ser <strong>anônima</strong> · você só coloca seu nome se quiser. Responda com sinceridade: é assim que o GC e a liderança identificam o que está bom e o que precisa melhorar.</p>
          <div style={{ marginTop: 16, height: 6, background: 'rgba(255,255,255,.28)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: progresso + '%', background: '#fff', borderRadius: 999, transition: 'width .35s' }} />
          </div>
          <div style={{ fontSize: 12, opacity: .95, marginTop: 6, fontWeight: 600 }}>Bloco {dimAtual + 1} de {totalDims} · {progresso}%</div>
        </div>

        {/* Identificacao opcional · so aparece no primeiro bloco */}
        {ehPrimeiro && (
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius: 14, padding:'18px 22px', marginBottom: 14 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color:'var(--escalab-brand)', marginBottom: 4 }}>Identificação</div>
            <p style={{ fontSize:13, color:'var(--escalab-slate)', margin:'0 0 12px', lineHeight: 1.5 }}>Cargo e setor entram automaticamente do seu cadastro · o nome é opcional.</p>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <div>
                <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-ink)', letterSpacing:'.06em', textTransform:'uppercase', marginBottom:5, display:'block' }}>Nome (opcional)</label>
                <input value={nomeOpcional} onChange={e => setNomeOpcional(e.target.value)} placeholder="Deixe em branco pra responder anônimo"
                  style={{ width:'100%', border:'1.5px solid #9CA5B0', borderRadius:8, padding:'9px 12px', fontSize:13.5, fontFamily:'var(--font-sans)', outline:0, boxSizing:'border-box', color:'var(--escalab-ink)' }} />
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                <div>
                  <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-ink)', letterSpacing:'.06em', textTransform:'uppercase', marginBottom:5, display:'block' }}>Cargo</label>
                  <div style={{ padding:'9px 12px', border:'1.5px solid var(--escalab-line)', background:'var(--escalab-paper)', borderRadius:8, fontSize:13.5, color:'var(--escalab-ink)', fontWeight:600 }}>{cargoAuto || '—'}</div>
                </div>
                <div>
                  <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-ink)', letterSpacing:'.06em', textTransform:'uppercase', marginBottom:5, display:'block' }}>Setor</label>
                  <div style={{ padding:'9px 12px', border:'1.5px solid var(--escalab-line)', background:'var(--escalab-paper)', borderRadius:8, fontSize:13.5, color:'var(--escalab-ink)', fontWeight:600 }}>{setorAuto || '—'}</div>
                </div>
              </div>
            </div>
          </div>
        )}

        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '24px 28px', marginBottom: 14 }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Dimensão</div>
          <h4 style={{ margin: '0 0 18px', fontSize: 18, fontWeight: 800, color: 'var(--escalab-ink)' }}>{dim.titulo}</h4>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {dim.perguntas.map(q => {
              const tipo = normalizarTipoPergunta(q.tipo);
              const obrig = !!q.obrigatoria || tipo === 'scale';
              return (
                <div key={q.id}>
                  <div style={{ fontSize: 14, color: 'var(--escalab-ink)', marginBottom: 10, lineHeight: 1.5, fontWeight: 600 }}>
                    {q.texto} {obrig && <span style={{ color: '#B3261E' }}>*</span>}
                  </div>
                  <InputPergunta p={q} valor={respostas[q.id]} onChange={v => setResp(q.id, v)} corDestaque="#00836B" />
                </div>
              );
            })}
          </div>
        </div>

        {erro && <Banner tone="danger" style={{ marginBottom: 14 }}>{erro}</Banner>}

        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          {dimAtual > 0 ? (
            <Button variant="outline" onClick={() => setDimAtual(d => d - 1)}><Icon name="chev_left" size={13} /> Anterior</Button>
          ) : <span />}
          {dimAtual < totalDims - 1 ? (
            <Button variant="primary" onClick={() => setDimAtual(d => d + 1)}>Próximo bloco →</Button>
          ) : (
            <Button variant="primary" onClick={enviar}>Enviar resposta</Button>
          )}
        </div>
      </div>
    );
  }

  if (enviado) {
    return (
      <div style={{ maxWidth: 540, textAlign: 'center', padding: '64px 20px', animation: 'fadeIn .25s' }}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'linear-gradient(135deg, #00967B, #007A5E)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
          <Icon name="check" size={36} />
        </div>
        <h3 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 8px' }}>Resposta enviada!</h3>
        <p style={{ fontSize: 14, color: 'var(--escalab-slate)', lineHeight: 1.55, maxWidth: 380, margin: '0 auto 24px' }}>
          Obrigado por contribuir com a PCO. Seus dados são <strong>anônimos</strong> e ajudam a liderança a entender o clima do time.
        </p>
        <Button variant="outline" onClick={() => { setSelecionada(null); setEnviado(false); }}>Voltar para a lista</Button>
      </div>
    );
  }

  return (
    <div style={{ animation: 'fadeIn .2s', maxWidth: 760 }}>
      <div style={{ background: 'linear-gradient(135deg, var(--escalab-brand-tint) 0%, #D5F0E8 100%)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 14, padding: '20px 26px', marginBottom: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 6 }}>PCO · Pesquisa de Clima Organizacional</div>
        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-brand-deep)', marginBottom: 6 }}>Como tá sendo trabalhar no Escalab?</div>
        <div style={{ fontSize: 13, color: 'var(--escalab-brand-deep)', lineHeight: 1.6 }}>
          Responda com sinceridade · sua resposta é <strong>anônima</strong>. O GC usa os dados agregados para entender o que está bom e o que precisa melhorar.
        </div>
      </div>

      {ativas.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '48px 20px', color: 'var(--escalab-mute)', background: '#fff', border: '2px dashed var(--escalab-line)', borderRadius: 14 }}>
          <Icon name="info" size={28} />
          <div style={{ marginTop: 10, fontSize: 14 }}>Nenhuma PCO aberta no momento.</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>Quando o GC abrir uma nova PCO, ela aparecerá aqui para você responder.</div>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {ativas.map(p => {
            const ja = jaRespondeuPCO(p.id, user.id);
            const nDims = (p.dimensoes || []).length;
            const nPerguntas = (p.dimensoes || []).reduce((s, d) => s + d.perguntas.length, 0);
            return (
              <div key={p.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ flex: 1, minWidth: 240 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 4 }}>{p.titulo}</div>
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', fontSize: 12, color: 'var(--escalab-mute)' }}>
                    <span><Icon name="clipboard" size={11} /> {nDims} dimensõe{nDims !== 1 ? 's' : ''}</span>
                    <span>·</span>
                    <span>{nPerguntas} pergunta{nPerguntas !== 1 ? 's' : ''}</span>
                    <span>·</span>
                    <span><Icon name="lock" size={11} /> Anônimo</span>
                  </div>
                </div>
                {ja ? (
                  <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 700, background: '#E6F5F1', color: '#00836B', border: '1px solid #A3D9CE', borderRadius: 8, padding: '6px 14px' }}>
                    <Icon name="check" size={12} /> Já respondido
                  </span>
                ) : (
                  <Button variant="primary" onClick={() => abrir(p)}>Responder</Button>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// ── Componentes utilitários ───────────────────────────────────────────────────

const NotaBadge = ({ nota, pct }) => {
  const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : nota >= 3.5 ? '#E89B3B' : '#B3261E';
  const bg  = nota >= 4.5 ? '#E6F5F1' : nota >= 4.0 ? '#EEF3FA' : nota >= 3.5 ? '#FFF7EB' : '#FDECEC';
  return (
    <div style={{ display:'flex', alignItems:'center', gap:6 }}>
      <span style={{ fontSize:13, fontWeight:700, color:cor, background:bg, borderRadius:6, padding:'2px 8px', minWidth:36, textAlign:'center' }}>
        {nota?.toFixed(2) ?? '·'}
      </span>
      {pct != null && <span style={{ fontSize:11.5, color:cor }}>{pct?.toFixed(1)}%</span>}
    </div>
  );
};

const StatusBadge = ({ status }) => {
  const map = { rascunho:{label:'Rascunho',cor:'#E89B3B',bg:'#FFF7EB'}, ativa:{label:'Ativa',cor:'#00836B',bg:'#E6F5F1'}, encerrada:{label:'Encerrada',cor:'#4A5560',bg:'var(--escalab-paper)'}, modelo:{label:'Modelo',cor:'#1F4A8A',bg:'#EEF3FA'} };
  const s = map[status] || map.rascunho;
  return <span style={{ fontSize:11.5, fontWeight:600, color:s.cor, background:s.bg, borderRadius:5, padding:'2px 8px' }}>{s.label}</span>;
};

// ── Modal: Criar / Editar Pesquisa ────────────────────────────────────────────

const ModalCriarPesquisa = ({ onClose, onSalvar, pesquisaBase, modelos }) => {
  const [passo, setPasso] = useState(pesquisaBase ? 3 : 1);
  const [titulo, setTitulo] = useState(pesquisaBase?.titulo || '');
  const [ano, setAno] = useState(pesquisaBase?.ano || new Date().getFullYear());
  const [periodo, setPeriodo] = useState(pesquisaBase?.periodo || '');
  const [modeloSel, setModeloSel] = useState(null);
  const [dimensoes, setDimensoes] = useState(pesquisaBase?.dimensoes || []);
  const [isModelo, setIsModelo] = useState(pesquisaBase?.isModelo || false);
  const [midia, setMidia] = useState(pesquisaBase?.midia || null);

  function handleMidia(e) {
    const file = e.target.files[0]; if (!file) return;
    const tipo = file.type.startsWith('video') ? 'video' : 'imagem';
    const r = new FileReader();
    r.onload = ev => setMidia({ tipo, url: ev.target.result, nome: file.name });
    r.readAsDataURL(file);
  }

  function usarModelo(m) {
    setDimensoes(JSON.parse(JSON.stringify(m.dimensoes)));
    setModeloSel(m.id);
    setPasso(3);
  }

  function addDimensao() {
    setDimensoes(d => [...d, { id: `dim_${Date.now()}`, titulo:'Nova Dimensão', perguntas:[{ id:`p_${Date.now()}`, tipo:'scale', texto:'Nova pergunta' }] }]);
  }

  function updateDimensao(idx, field, val) {
    setDimensoes(d => d.map((dim, i) => i === idx ? { ...dim, [field]: val } : dim));
  }

  function removeDimensao(idx) {
    setDimensoes(d => d.filter((_, i) => i !== idx));
  }

  function addPergunta(dimIdx) {
    setDimensoes(d => d.map((dim, i) => i === dimIdx ? { ...dim, perguntas: [...dim.perguntas, { id:`p_${Date.now()}`, tipo:'scale', texto:'', escalaMin:1, escalaMax:5 }] } : dim));
  }

  function updatePergunta(dimIdx, pIdx, field, val) {
    setDimensoes(d => d.map((dim, i) => i === dimIdx ? { ...dim, perguntas: dim.perguntas.map((p, j) => j === pIdx ? { ...p, [field]: val } : p) } : dim));
  }

  function removePergunta(dimIdx, pIdx) {
    setDimensoes(d => d.map((dim, i) => i === dimIdx ? { ...dim, perguntas: dim.perguntas.filter((_, j) => j !== pIdx) } : dim));
  }

  function moverPergunta(dimIdx, pIdx, dir) {
    setDimensoes(d => d.map((dim, i) => {
      if (i !== dimIdx) return dim;
      const j = pIdx + dir;
      if (j < 0 || j >= dim.perguntas.length) return dim;
      const ps = [...dim.perguntas];
      [ps[pIdx], ps[j]] = [ps[j], ps[pIdx]];
      return { ...dim, perguntas: ps };
    }));
  }
  function moverDimensao(dimIdx, dir) {
    setDimensoes(d => {
      const j = dimIdx + dir;
      if (j < 0 || j >= d.length) return d;
      const nd = [...d];
      [nd[dimIdx], nd[j]] = [nd[j], nd[dimIdx]];
      return nd;
    });
  }
  function addOpcao(dimIdx, pIdx) {
    setDimensoes(d => d.map((dim, i) => i !== dimIdx ? dim : { ...dim, perguntas: dim.perguntas.map((p, j) => j !== pIdx ? p : { ...p, opcoes: [...(p.opcoes || []), `Opção ${(p.opcoes || []).length + 1}`] }) }));
  }
  function updateOpcao(dimIdx, pIdx, oIdx, val) {
    setDimensoes(d => d.map((dim, i) => i !== dimIdx ? dim : { ...dim, perguntas: dim.perguntas.map((p, j) => j !== pIdx ? p : { ...p, opcoes: (p.opcoes || []).map((o, k) => k === oIdx ? val : o) }) }));
  }
  function removeOpcao(dimIdx, pIdx, oIdx) {
    setDimensoes(d => d.map((dim, i) => i !== dimIdx ? dim : { ...dim, perguntas: dim.perguntas.map((p, j) => j !== pIdx ? p : { ...p, opcoes: (p.opcoes || []).filter((_, k) => k !== oIdx) }) }));
  }

  function handleSalvar(status) {
    const nova = {
      id: pesquisaBase?.id || `pco_${Date.now()}`,
      titulo, ano: Number(ano), periodo, status,
      isModelo, dimensoes, midia, respostas: pesquisaBase?.respostas || [],
      criadaEm: pesquisaBase?.criadaEm || new Date().toISOString().slice(0,10),
      respondentes: 0, sheetUrl: '',
    };
    onSalvar(nova);
    onClose();
  }

  const passos = ['Informações', 'Modelo', 'Perguntas', 'Revisar'];

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:18, width:'100%', maxWidth:720, maxHeight:'92vh', display:'flex', flexDirection:'column', animation:'popIn .22s var(--ease-out)', overflow:'hidden' }}>
        {/* Header */}
        <div style={{ padding:'20px 26px', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexShrink:0 }}>
          <div>
            <h3 style={{ margin:0, fontSize:17, fontWeight:700 }}>{pesquisaBase ? 'Editar pesquisa' : 'Nova Pesquisa de Clima'}</h3>
            <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginTop:3 }}>Passo {passo} de 4 · {passos[passo-1]}</div>
          </div>
          <button onClick={onClose} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>

        {/* Progress */}
        <div style={{ display:'flex', gap:0, flexShrink:0 }}>
          {passos.map((p, i) => (
            <div key={p} onClick={() => i < passo && setPasso(i+1)}
              style={{ flex:1, height:3, background: i < passo ? 'var(--escalab-brand)' : 'var(--escalab-line)', cursor: i < passo ? 'pointer' : 'default', transition:'background .2s' }} />
          ))}
        </div>

        {/* Conteúdo */}
        <div style={{ flex:1, overflowY:'auto', padding:'22px 26px' }}>

          {/* Passo 1: Informações básicas */}
          {passo === 1 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <Field label="Título da pesquisa">
                <Input value={titulo} onChange={setTitulo} placeholder="Ex: PCO 1º Semestre 2027" />
              </Field>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <Field label="Ano">
                  <Input value={ano} onChange={setAno} type="number" placeholder="2027" />
                </Field>
                <Field label="Período de aplicação">
                  <Input value={periodo} onChange={setPeriodo} placeholder="Ex: Mar/2027 · Abr/2027" />
                </Field>
              </div>
              <label style={{ display:'flex', gap:10, alignItems:'center', cursor:'pointer' }}>
                <input type="checkbox" checked={isModelo} onChange={e => setIsModelo(e.target.checked)} style={{ width:16, height:16 }} />
                <span style={{ fontSize:13.5, color:'var(--escalab-slate)' }}>Salvar também como modelo reutilizável</span>
              </label>
              {/* Foto / vídeo de personalização */}
              <Field label="Foto ou vídeo (opcional)">
                {midia ? (
                  <div style={{ display:'flex', gap:12, alignItems:'center', border:'1px solid var(--escalab-line)', borderRadius:10, padding:'10px 12px' }}>
                    {midia.tipo === 'video'
                      ? <video src={midia.url} style={{ width:90, height:60, borderRadius:8, objectFit:'cover', background:'#000' }} muted />
                      : <img src={midia.url} alt="" style={{ width:90, height:60, borderRadius:8, objectFit:'cover' }} />}
                    <div style={{ flex:1, fontSize:12.5, color:'var(--escalab-slate)' }}>{midia.tipo === 'video' ? 'Vídeo' : 'Imagem'} adicionado{midia.nome ? ` · ${midia.nome}` : ''}</div>
                    <button onClick={() => setMidia(null)} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={16} /></button>
                  </div>
                ) : (
                  <label style={{ display:'flex', alignItems:'center', gap:8, border:'1px dashed var(--escalab-line)', borderRadius:10, padding:'12px 14px', cursor:'pointer', color:'var(--escalab-mute)', fontSize:13 }}>
                    <Icon name="upload" size={15} /> Adicionar foto ou vídeo ao formulário
                    <input type="file" accept="image/*,video/*" style={{ display:'none' }} onChange={handleMidia} />
                  </label>
                )}
              </Field>
            </div>
          )}

          {/* Passo 2: Escolher modelo */}
          {passo === 2 && (
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              <div style={{ fontSize:13, color:'var(--escalab-mute)', marginBottom:4 }}>Escolha um modelo como base ou comece do zero.</div>
              {/* Do zero */}
              <div onClick={() => { setDimensoes([]); setPasso(3); }}
                style={{ border:'2px dashed var(--escalab-line)', borderRadius:12, padding:'18px 20px', cursor:'pointer', display:'flex', gap:14, alignItems:'center', transition:'border-color .15s' }}
                onMouseEnter={e => e.currentTarget.style.borderColor='var(--escalab-brand)'}
                onMouseLeave={e => e.currentTarget.style.borderColor='var(--escalab-line)'}>
                <div style={{ width:40, height:40, borderRadius:10, background:'var(--escalab-paper)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <Icon name="plus" size={20} />
                </div>
                <div>
                  <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)' }}>Começar do zero</div>
                  <div style={{ fontSize:12.5, color:'var(--escalab-mute)' }}>Crie suas próprias dimensões e perguntas</div>
                </div>
              </div>
              {/* Modelos disponíveis */}
              {modelos.map(m => (
                <div key={m.id} onClick={() => usarModelo(m)}
                  style={{ border:`2px solid ${modeloSel === m.id ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`, borderRadius:12, padding:'18px 20px', cursor:'pointer', display:'flex', gap:14, alignItems:'center', transition:'border-color .15s', background: modeloSel === m.id ? 'var(--escalab-brand-tint)' : '#fff' }}>
                  <div style={{ width:40, height:40, borderRadius:10, background:modeloSel===m.id?'var(--escalab-brand)':'var(--escalab-paper)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <Icon name="clipboard" size={18} />
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)' }}>{m.titulo}</div>
                    <div style={{ fontSize:12.5, color:'var(--escalab-mute)' }}>{m.dimensoes?.length || 0} dimensões · {m.dimensoes?.reduce((s,d) => s + d.perguntas.length, 0) || 0} perguntas</div>
                  </div>
                  <StatusBadge status="modelo" />
                </div>
              ))}
            </div>
          )}

          {/* Passo 3: Construtor de perguntas */}
          {passo === 3 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontSize:13, color:'var(--escalab-mute)' }}>{dimensoes.length} dimensão(ões) · {dimensoes.reduce((s,d) => s + d.perguntas.length, 0)} pergunta(s)</div>
                <Button size="sm" variant="outline" icon="plus" onClick={addDimensao}>Adicionar dimensão</Button>
              </div>
              {dimensoes.length === 0 && (
                <div style={{ textAlign:'center', padding:'32px', color:'var(--escalab-mute)', border:'2px dashed var(--escalab-line)', borderRadius:12 }}>
                  Nenhuma dimensão ainda. Clique em "Adicionar dimensão" ou volte para escolher um modelo.
                </div>
              )}
              {dimensoes.map((dim, di) => (
                <div key={dim.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
                  {/* Header da dimensão · com reorder */}
                  <div style={{ background:'var(--escalab-paper)', padding:'10px 14px', display:'flex', alignItems:'center', gap:8 }}>
                    <div style={{ display:'flex', flexDirection:'column', gap:1 }}>
                      <button onClick={() => moverDimensao(di, -1)} disabled={di === 0} title="Subir dimensão" style={{ border:0, background:'transparent', cursor: di===0 ? 'not-allowed' : 'pointer', color: di===0 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1, fontFamily:'var(--font-sans)' }}>▲</button>
                      <button onClick={() => moverDimensao(di, +1)} disabled={di === dimensoes.length - 1} title="Descer dimensão" style={{ border:0, background:'transparent', cursor: di===dimensoes.length-1 ? 'not-allowed' : 'pointer', color: di===dimensoes.length-1 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1, fontFamily:'var(--font-sans)' }}>▼</button>
                    </div>
                    <input value={dim.titulo} onChange={e => updateDimensao(di,'titulo',e.target.value)}
                      style={{ flex:1, border:0, background:'transparent', outline:0, fontWeight:700, fontSize:14, color:'var(--escalab-ink)', fontFamily:'var(--font-sans)' }} />
                    <button onClick={() => removeDimensao(di)} title="Remover dimensão" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="close" size={14} /></button>
                  </div>
                  {/* Perguntas · cada uma com tipo, texto, obrigatoria, reorder, opcoes/escala configuravel */}
                  <div style={{ padding:'10px 14px', display:'flex', flexDirection:'column', gap:10 }}>
                    {dim.perguntas.map((p, pi) => {
                      const tipo = normalizarTipoPergunta(p.tipo);
                      return (
                        <div key={p.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:9, padding:'10px 12px' }}>
                          <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom: (tipo==='single'||tipo==='multi'||tipo==='scale') ? 9 : 0, flexWrap:'wrap' }}>
                            <div style={{ display:'flex', flexDirection:'column', gap:1, flexShrink:0 }}>
                              <button onClick={() => moverPergunta(di, pi, -1)} disabled={pi === 0} title="Subir pergunta" style={{ border:0, background:'transparent', cursor: pi===0 ? 'not-allowed' : 'pointer', color: pi===0 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▲</button>
                              <button onClick={() => moverPergunta(di, pi, +1)} disabled={pi === dim.perguntas.length - 1} title="Descer pergunta" style={{ border:0, background:'transparent', cursor: pi===dim.perguntas.length-1 ? 'not-allowed' : 'pointer', color: pi===dim.perguntas.length-1 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▼</button>
                            </div>
                            <select value={tipo} onChange={e => {
                                const novoTipo = e.target.value;
                                updatePergunta(di, pi, 'tipo', novoTipo);
                                if ((novoTipo === 'single' || novoTipo === 'multi') && !p.opcoes) updatePergunta(di, pi, 'opcoes', ['Opção 1', 'Opção 2']);
                                if (novoTipo === 'scale') {
                                  if (!Number.isFinite(p.escalaMin)) updatePergunta(di, pi, 'escalaMin', 1);
                                  if (!Number.isFinite(p.escalaMax)) updatePergunta(di, pi, 'escalaMax', 5);
                                }
                              }}
                              style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 8px', fontSize:12, fontFamily:'var(--font-sans)', outline:0, background:'#fff', flexShrink:0 }}>
                              {TIPOS_PERGUNTA.map(t => <option key={t.id} value={t.id}>{t.icone} {t.label}</option>)}
                            </select>
                            <input value={p.texto} onChange={e => updatePergunta(di,pi,'texto',e.target.value)}
                              placeholder="Texto da pergunta..."
                              style={{ flex:1, minWidth:140, border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                            <label style={{ display:'flex', gap:5, alignItems:'center', cursor:'pointer', fontSize:12, color:'var(--escalab-ink)', flexShrink:0, fontWeight:500 }} title="Resposta obrigatória">
                              <input type="checkbox" checked={!!p.obrigatoria} onChange={e => updatePergunta(di,pi,'obrigatoria',e.target.checked)} style={{ width:14, height:14 }} />
                              Obrigatória
                            </label>
                            <button onClick={() => removePergunta(di,pi)} title="Remover pergunta" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4, flexShrink:0 }}><Icon name="close" size={13} /></button>
                          </div>

                          {/* Config da escala — min e max */}
                          {tipo === 'scale' && (() => {
                            const { min, max } = escalaDe(p);
                            return (
                              <div style={{ display:'flex', gap:14, alignItems:'center', fontSize:12, color:'var(--escalab-slate)', paddingLeft:34, flexWrap:'wrap' }}>
                                <span style={{ fontWeight:600 }}>Escala:</span>
                                <label style={{ display:'flex', gap:5, alignItems:'center' }}>
                                  De
                                  <input type="number" min={0} max={9} value={min}
                                    onChange={e => {
                                      const v = Math.max(0, Math.min(9, Number(e.target.value)));
                                      updatePergunta(di, pi, 'escalaMin', v);
                                      if (v >= max) updatePergunta(di, pi, 'escalaMax', Math.min(10, v + 1));
                                    }}
                                    style={{ width:50, border:'1px solid var(--escalab-line)', borderRadius:6, padding:'4px 6px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                                </label>
                                <label style={{ display:'flex', gap:5, alignItems:'center' }}>
                                  Até
                                  <input type="number" min={1} max={10} value={max}
                                    onChange={e => {
                                      const v = Math.max(1, Math.min(10, Number(e.target.value)));
                                      updatePergunta(di, pi, 'escalaMax', v);
                                      if (v <= min) updatePergunta(di, pi, 'escalaMin', Math.max(0, v - 1));
                                    }}
                                    style={{ width:50, border:'1px solid var(--escalab-line)', borderRadius:6, padding:'4px 6px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                                </label>
                                <span style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>· {max - min + 1} pontos</span>
                              </div>
                            );
                          })()}

                          {/* Opcoes editaveis pra single/multi */}
                          {(tipo === 'single' || tipo === 'multi') && (
                            <div style={{ paddingLeft:34, display:'flex', flexDirection:'column', gap:5 }}>
                              {(p.opcoes || []).map((o, oi) => (
                                <div key={oi} style={{ display:'flex', gap:6, alignItems:'center' }}>
                                  <div style={{ width:14, height:14, borderRadius: tipo==='multi' ? 3 : '50%', border:'2px solid var(--escalab-line)', flexShrink:0 }} />
                                  <input value={o} onChange={e => updateOpcao(di, pi, oi, e.target.value)}
                                    style={{ flex:1, border:0, borderBottom:'1px solid var(--escalab-line)', outline:0, fontSize:13, fontFamily:'var(--font-sans)', padding:'3px 4px', color:'var(--escalab-ink)' }} />
                                  <button onClick={() => removeOpcao(di, pi, oi)} title="Remover opção" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:2 }}><Icon name="close" size={11} /></button>
                                </div>
                              ))}
                              <button onClick={() => addOpcao(di, pi)} style={{ border:0, background:'transparent', cursor:'pointer', fontSize:12, color:'var(--escalab-brand)', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:4, marginTop:3, alignSelf:'flex-start', fontWeight:600 }}>
                                <Icon name="plus" size={11} /> Adicionar opção
                              </button>
                            </div>
                          )}

                          {/* Hint pra tipos sem config extra */}
                          {tipo === 'file' && <div style={{ paddingLeft:34, fontSize:11.5, color:'var(--escalab-mute)', fontStyle:'italic' }}>O respondente vai poder anexar 1 arquivo (PDF, imagem, etc).</div>}
                          {tipo === 'stars' && <div style={{ paddingLeft:34, fontSize:11.5, color:'var(--escalab-mute)', fontStyle:'italic' }}>Classificação de 1 a 5 estrelas.</div>}
                          {tipo === 'text' && <div style={{ paddingLeft:34, fontSize:11.5, color:'var(--escalab-mute)', fontStyle:'italic' }}>Resposta em texto livre (sem limite de caracteres).</div>}
                        </div>
                      );
                    })}
                    <button onClick={() => addPergunta(di)} style={{ border:'1px dashed var(--escalab-line)', borderRadius:8, padding:'6px 12px', cursor:'pointer', fontSize:12.5, fontFamily:'var(--font-sans)', color:'var(--escalab-brand)', background:'transparent', display:'flex', alignItems:'center', gap:5, alignSelf:'flex-start', marginTop:4, fontWeight:600 }}>
                      <Icon name="plus" size={12} /> Adicionar pergunta
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Passo 4: Revisar */}
          {passo === 4 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ background:'var(--escalab-paper)', borderRadius:12, padding:'18px 20px' }}>
                {midia && (
                  <div style={{ marginBottom:12 }}>
                    {midia.tipo === 'video'
                      ? <video src={midia.url} controls style={{ width:'100%', maxHeight:200, borderRadius:10, background:'#000' }} />
                      : <img src={midia.url} alt="" style={{ width:'100%', maxHeight:200, objectFit:'cover', borderRadius:10 }} />}
                  </div>
                )}
                <div style={{ fontWeight:700, fontSize:15, marginBottom:6 }}>{titulo || '(sem título)'}</div>
                <div style={{ fontSize:13, color:'var(--escalab-mute)', marginBottom:12 }}>{periodo || 'Período não definido'} · {dimensoes.length} dimensões · {dimensoes.reduce((s,d) => s + d.perguntas.length, 0)} perguntas</div>
                {dimensoes.map(dim => (
                  <div key={dim.id} style={{ marginBottom:10 }}>
                    <div style={{ fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--escalab-mute)', marginBottom:4 }}>{dim.titulo}</div>
                    {dim.perguntas.map((p, i) => (
                      <div key={p.id} style={{ fontSize:13, color:'var(--escalab-slate)', paddingLeft:12, borderLeft:'2px solid var(--escalab-line)', marginBottom:4, lineHeight:1.4 }}>
                        {p.tipo === 'scale' ? '⬡ ' : p.tipo === 'nome' ? '👤 ' : p.tipo === 'email' ? '✉ ' : '📝 '}{p.texto}{p.obrigatoria && <span style={{ color:'#B3261E' }}> *</span>}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
              <Banner tone="info">
                <div style={{ fontSize:13 }}>Ao publicar, copie as perguntas para um Google Forms externo e cole o link na pesquisa para coletar respostas. Ou responda internamente pelo sistema.</div>
              </Banner>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{ padding:'14px 26px', borderTop:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', flexShrink:0 }}>
          <Button variant="ghost" onClick={() => passo > 1 ? setPasso(p => p-1) : onClose()}>{passo > 1 ? '← Voltar' : 'Cancelar'}</Button>
          <div style={{ display:'flex', gap:8 }}>
            {passo === 4 && <Button variant="outline" onClick={() => handleSalvar('rascunho')}>Salvar rascunho</Button>}
            <Button variant="primary" onClick={() => passo < 4 ? setPasso(p => p+1) : handleSalvar('ativa')} disabled={passo===1 && !titulo}>
              {passo < 4 ? 'Avançar →' : 'Publicar pesquisa'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Dashboard de uma pesquisa específica ──────────────────────────────────────

const PesquisaDashboard = ({ pesquisa, filtroSetor, filtroCargo }) => {
  const isHistorica = pesquisa.isHistorica;
  // Tenta agregar respostas in-app primeiro. Se houver, o dashboard calcula
  // tudo automaticamente das respostas reais (sem precisar de planilha externa).
  const agg = !isHistorica ? agregarRespostasPCO(pesquisa) : null;
  const medias = isHistorica ? (PCO_MEDIAS[pesquisa.ano]?.geral || []) : [];
  const mediaGeral = isHistorica
    ? (PCO_MEDIAS[pesquisa.ano]?.global_geral || 0)
    : (agg?.mediaGeral || pesquisa.mediaGeral || 0);
  const [mostrarRespostas, setMostrarRespostas] = useState(false);

  const dims = isHistorica ? PCO_DIMENSOES_SHORT : pesquisa.dimensoes.map(d => d.titulo);

  function exportCSV() {
    // Quando ha respostas in-app, exporta linha por respondente com a media
    // de cada dimensao. Senao, mantem o comportamento antigo (que respeita
    // dados importados manualmente em pesquisa.respostas).
    const headers = ['Respondente','Setor','Cargo','Data',...dims];
    let rows;
    if (agg) {
      const todas = getRespostasPCO().filter(r => r.pcoId === pesquisa.id);
      const idxP = {};
      pesquisa.dimensoes.forEach(d => d.perguntas.forEach(p => { idxP[p.id] = { dim: d, max: escalaDe(p).max, tipo: normalizarTipoPergunta(p.tipo) }; }));
      rows = todas.map(r => {
        const porDim = {};
        Object.entries(r.respostas || {}).forEach(([pid, val]) => {
          const meta = idxP[pid];
          if (!meta || (meta.tipo !== 'scale' && meta.tipo !== 'stars')) return;
          const n = Number(val);
          if (!Number.isFinite(n)) return;
          (porDim[meta.dim.titulo] = porDim[meta.dim.titulo] || []).push(n);
        });
        const medsDim = dims.map(t => {
          const arr = porDim[t];
          if (!arr || !arr.length) return '';
          return (arr.reduce((s,x)=>s+x,0)/arr.length).toFixed(2);
        });
        return [r.nome || '(anônimo)', r.setor || '', r.cargo || '', (r.enviadaEm || '').slice(0,10), ...medsDim];
      });
    } else {
      rows = (pesquisa.respostas || []).map(r => [
        r.nome || r.respondentId, r.setor || '', r.cargo || '', r.data || '',
        ...dims.map((_, i) => r.medias?.[i] || ''),
      ]);
    }
    const csv = [headers, ...rows].map(r => r.join(',')).join('\n');
    const blob = new Blob([csv], { type:'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href=url; a.download=`${pesquisa.titulo}.csv`; a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      {/* KPIs */}
      {(() => {
        const totalEsperado = COLABORADORES.length;
        const resp = agg?.total || pesquisa.respondentes || pesquisa.respostas?.length || 0;
        const taxa = totalEsperado > 0 && resp ? Math.round(resp / totalEsperado * 100) : null;
        const taxaCor = taxa == null ? '#1F4A8A' : taxa >= 80 ? '#00836B' : taxa >= 60 ? '#1F4A8A' : taxa >= 40 ? '#B56500' : '#B3261E';
        const taxaBg  = taxa == null ? '#EEF3FA' : taxa >= 80 ? '#E6F5F1' : taxa >= 60 ? '#EEF3FA' : taxa >= 40 ? '#FFF7EB' : '#FDECEC';
        return (
          <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12 }}>
            {[
              { label:'Média Geral', val: mediaGeral ? mediaGeral.toFixed(2) : '·', cor:'var(--escalab-brand-deep)', bg:'var(--escalab-brand-tint)' },
              { label:'Respondentes', val: resp || '·', sub: totalEsperado ? `de ${totalEsperado}` : null, cor:'#1F4A8A', bg:'#EEF3FA' },
              { label:'Taxa de respostas', val: taxa != null ? `${taxa}%` : '·', cor:taxaCor, bg:taxaBg },
              { label:'Dimensões', val: dims.length, cor:'#00836B', bg:'#E6F5F1' },
              { label:'Perguntas', val: pesquisa.dimensoes.reduce((s,d) => s + d.perguntas.length, 0) || '·', cor:'#6B3FA0', bg:'#F4EEFF' },
            ].map(k => (
              <div key={k.label} style={{ background:k.bg, border:'1px solid var(--escalab-line)', borderRadius:10, padding:'14px 16px', textAlign:'center' }}>
                <div style={{ fontSize:22, fontWeight:800, color:k.cor, lineHeight:1 }}>{k.val}</div>
                {k.sub && <div style={{ fontSize:10.5, color:'var(--escalab-mute)', marginTop:2 }}>{k.sub}</div>}
                <div style={{ fontSize:11, color:'var(--escalab-mute)', marginTop:4 }}>{k.label}</div>
              </div>
            ))}
          </div>
        );
      })()}

      {/* Aviso quando o dashboard ja esta sendo calculado das respostas in-app */}
      {agg && (
        <div style={{ background:'#E6F5F1', border:'1px solid #B5E3D7', borderRadius:10, padding:'10px 14px', display:'flex', gap:10, alignItems:'center' }}>
          <Icon name="check" size={14} />
          <span style={{ fontSize:12.5, fontWeight:600, color:'#005E4D' }}>Dashboard calculado automaticamente das {agg.total} respostas coletadas no sistema · médias normalizadas em escala 0–5 pra permitir comparação.</span>
        </div>
      )}

      {/* Barras por dimensão */}
      <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'20px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:16 }}>Resultado por Dimensão</div>
        {isHistorica && medias.length > 0 ? (
          dims.map((dim, i) => {
            const nota = medias[i];
            const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : nota >= 3.5 ? '#E89B3B' : '#B3261E';
            return (
              <div key={dim} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
                <span style={{ fontSize:13, color:'var(--escalab-slate)', minWidth:140, fontWeight:500 }}>{dim}</span>
                <div style={{ flex:1, height:8, background:'var(--escalab-line)', borderRadius:999 }}>
                  <div style={{ width:(nota/5*100)+'%', height:'100%', background:cor, borderRadius:999, transition:'width .5s' }} />
                </div>
                <NotaBadge nota={nota} pct={nota/5*100} />
              </div>
            );
          })
        ) : agg ? (
          agg.porDimensao.filter(d => d.media != null).map(d => {
            const nota = d.mediaNorm5; // 0-5 pra UI consistente
            const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : nota >= 3.5 ? '#E89B3B' : '#B3261E';
            return (
              <div key={d.titulo} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
                <span style={{ fontSize:13, color:'var(--escalab-ink)', minWidth:140, fontWeight:600 }}>{d.titulo}</span>
                <div style={{ flex:1, height:8, background:'var(--escalab-line)', borderRadius:999 }}>
                  <div style={{ width:(nota/5*100)+'%', height:'100%', background:cor, borderRadius:999, transition:'width .5s' }} />
                </div>
                <span style={{ fontSize:13, fontWeight:700, color:cor, minWidth:42, textAlign:'right' }}>{d.media.toFixed(2)}</span>
                <span style={{ fontSize:11, color:'var(--escalab-mute)', minWidth:42 }}>/ {d.max}</span>
              </div>
            );
          })
        ) : (
          <div style={{ textAlign:'center', padding:'24px', color:'var(--escalab-slate)', fontSize:13 }}>
            {pesquisa.status === 'rascunho' ? 'Pesquisa em rascunho · publique para coletar respostas.' : 'Nenhuma resposta coletada ainda — assim que os colaboradores responderem, o gráfico aparece aqui.'}
          </div>
        )}
      </div>

      {/* Por Setor — historico OU in-app */}
      {(isHistorica || (agg && agg.porSetor.length > 0)) && (
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'20px' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:16 }}>Por Setor</div>
          {isHistorica ? (
            PCO_SETORES_HIST.filter(s => !filtroSetor || s.setor.toLowerCase().includes(filtroSetor.toLowerCase())).map(s => {
              const nota = s[pesquisa.ano] || 4.0;
              const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : '#E89B3B';
              return (
                <div key={s.setor} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:10 }}>
                  <span style={{ fontSize:13, color:'var(--escalab-slate)', minWidth:100 }}>{s.setor}</span>
                  <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}>
                    <div style={{ width:(nota/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} />
                  </div>
                  <span style={{ fontSize:13, fontWeight:700, color:cor, minWidth:32 }}>{nota.toFixed(2)}</span>
                </div>
              );
            })
          ) : (
            agg.porSetor.filter(s => !filtroSetor || s.setor.toLowerCase().includes(filtroSetor.toLowerCase())).map(s => {
              const cor = s.media >= 4.5 ? '#00967B' : s.media >= 4.0 ? '#1F4A8A' : s.media >= 3.5 ? '#E89B3B' : '#B3261E';
              return (
                <div key={s.setor} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:10 }}>
                  <span style={{ fontSize:13, color:'var(--escalab-ink)', minWidth:120, fontWeight:600 }}>{s.setor}</span>
                  <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}>
                    <div style={{ width:(s.media/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} />
                  </div>
                  <span style={{ fontSize:13, fontWeight:700, color:cor, minWidth:32 }}>{s.media.toFixed(2)}</span>
                  <span style={{ fontSize:11, color:'var(--escalab-mute)', minWidth:36 }}>· {s.n} resp</span>
                </div>
              );
            })
          )}
        </div>
      )}

      {/* Por Cargo — so quando ha dados in-app (historico ja tem outra visao) */}
      {!isHistorica && agg && agg.porCargo.length > 0 && (
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'20px' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:16 }}>Por Cargo</div>
          {agg.porCargo.filter(c => !filtroCargo || c.cargo.toLowerCase().includes(filtroCargo.toLowerCase())).map(c => {
            const cor = c.media >= 4.5 ? '#00967B' : c.media >= 4.0 ? '#1F4A8A' : c.media >= 3.5 ? '#E89B3B' : '#B3261E';
            return (
              <div key={c.cargo} style={{ display:'flex', alignItems:'center', gap:12, marginBottom:10 }}>
                <span style={{ fontSize:13, color:'var(--escalab-ink)', minWidth:160, fontWeight:600 }}>{c.cargo}</span>
                <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}>
                  <div style={{ width:(c.media/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} />
                </div>
                <span style={{ fontSize:13, fontWeight:700, color:cor, minWidth:32 }}>{c.media.toFixed(2)}</span>
                <span style={{ fontSize:11, color:'var(--escalab-mute)', minWidth:36 }}>· {c.n} resp</span>
              </div>
            );
          })}
        </div>
      )}

      {/* Comentarios coletados (text livre) */}
      {!isHistorica && agg && Object.keys(agg.textosPorPergunta).length > 0 && (
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'20px' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:14 }}>Comentários abertos</div>
          {pesquisa.dimensoes.map(d => d.perguntas
            .filter(p => normalizarTipoPergunta(p.tipo) === 'text' && agg.textosPorPergunta[p.id])
            .map(p => (
              <div key={p.id} style={{ marginBottom:14 }}>
                <div style={{ fontSize:12.5, fontWeight:700, color:'var(--escalab-ink)', marginBottom:6 }}>{p.texto}</div>
                <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                  {agg.textosPorPergunta[p.id].map((t, i) => (
                    <div key={i} style={{ borderLeft:'3px solid var(--escalab-brand)', background:'var(--escalab-paper)', borderRadius:6, padding:'7px 12px', fontSize:13, color:'var(--escalab-ink)', lineHeight:1.5 }}>
                      {t.texto}
                      {t.nome && <div style={{ fontSize:11, color:'var(--escalab-slate)', marginTop:3, fontWeight:600 }}>— {t.nome}</div>}
                    </div>
                  ))}
                </div>
              </div>
            ))
          )}
        </div>
      )}

      {/* Links Google Forms / Sheets */}
      {(pesquisa.formUrl || pesquisa.sheetUrl) && (
        <div style={{ background:'#E6F5F1', border:'1px solid #B5E3D7', borderRadius:10, padding:'12px 16px', display:'flex', gap:12, flexWrap:'wrap', alignItems:'center' }}>
          <span style={{ fontSize:12.5, fontWeight:600, color:'#005E4D' }}>Integração Google:</span>
          {pesquisa.formUrl && (
            <a href={pesquisa.formUrl} target="_blank" rel="noopener noreferrer" style={{ display:'flex', gap:5, alignItems:'center', fontSize:12.5, color:'#1F4A8A', textDecoration:'none', background:'#fff', border:'1px solid #C9D7EC', borderRadius:7, padding:'5px 12px' }}>
              <Icon name="file" size={13} /> Abrir Google Forms
            </a>
          )}
          {pesquisa.sheetUrl && (
            <a href={pesquisa.sheetUrl} target="_blank" rel="noopener noreferrer" style={{ display:'flex', gap:5, alignItems:'center', fontSize:12.5, color:'#00836B', textDecoration:'none', background:'#fff', border:'1px solid #B5E3D7', borderRadius:7, padding:'5px 12px' }}>
              <Icon name="chart" size={13} /> Abrir Planilha de Respostas
            </a>
          )}
        </div>
      )}

      {/* Ações */}
      <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
        <button onClick={exportCSV} style={{ display:'flex', gap:6, alignItems:'center', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'8px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)', background:'#fff' }}>
          <Icon name="download" size={14} /> Exportar CSV
        </button>
        <button onClick={() => setMostrarRespostas(v => !v)} style={{ display:'flex', gap:6, alignItems:'center', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'8px 14px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', color:'var(--escalab-slate)', background:'#fff' }}>
          <Icon name="eye" size={14} /> {mostrarRespostas ? 'Ocultar' : 'Ver'} respostas individuais
        </button>
      </div>

      {mostrarRespostas && (
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
          <div style={{ padding:'12px 16px', background:'var(--escalab-paper)', borderBottom:'1px solid var(--escalab-line)', fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--escalab-mute)' }}>
            Respostas individuais
          </div>
          {(pesquisa.respostas || []).length === 0 ? (
            <div style={{ padding:'24px', textAlign:'center', color:'var(--escalab-mute)', fontSize:13 }}>
              Nenhuma resposta registrada. Para pesquisas históricas, os dados são agregados.
            </div>
          ) : (
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:13 }}>
                <thead>
                  <tr style={{ background:'var(--escalab-paper)' }}>
                    {['Respondente','Setor','Cargo','Data','Média'].map(h => (
                      <th key={h} style={{ padding:'8px 14px', textAlign:'left', fontSize:11, fontWeight:700, color:'var(--escalab-mute)', textTransform:'uppercase', letterSpacing:'.06em', borderBottom:'1px solid var(--escalab-line)', whiteSpace:'nowrap' }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {pesquisa.respostas.map((r, i) => (
                    <tr key={i} style={{ borderBottom:'1px solid var(--escalab-line)' }}>
                      <td style={{ padding:'10px 14px', fontWeight:500 }}>{r.nome || r.respondentId}</td>
                      <td style={{ padding:'10px 14px', color:'var(--escalab-mute)' }}>{r.setor}</td>
                      <td style={{ padding:'10px 14px', color:'var(--escalab-mute)' }}>{r.cargo}</td>
                      <td style={{ padding:'10px 14px', color:'var(--escalab-mute)' }}>{r.data}</td>
                      <td style={{ padding:'10px 14px' }}><NotaBadge nota={r.mediaGeral} /></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

// ── Tab: Pesquisas ────────────────────────────────────────────────────────────

const PesquisasTab = ({ user }) => {
  const filtroSetor = ''; const filtroCargo = '';
  const [pesquisas, setPesquisas] = useState(getPCOPesquisas);
  const [selecionada, setSelecionada] = useState(null);
  const [modalAberto, setModalAberto] = useState(false);
  const [editando, setEditando] = useState(null);
  const [visSelecionada, setVisSelecionada] = useState('dashboard'); // dashboard | editor
  const [busca, setBusca] = useState('');
  const isAdmin = user?.perfil === 'admin';

  const modelos = pesquisas.filter(p => p.isModelo || p.status === 'modelo');
  const ativas  = pesquisas.filter(p => p.status === 'ativa');
  const rascunhos = pesquisas.filter(p => p.status === 'rascunho');
  const encerradas = pesquisas.filter(p => p.status === 'encerrada' || p.isHistorica);

  // Agrupar encerradas por ano
  const porAno = {};
  encerradas.forEach(p => { const a = p.ano || new Date(p.criadaEm || '').getFullYear() || '?'; if (!porAno[a]) porAno[a] = []; porAno[a].push(p); });

  function handleSalvar(nova) {
    setPesquisas(prev => {
      const idx = prev.findIndex(p => p.id === nova.id);
      const nova2 = idx >= 0 ? prev.map((p,i) => i===idx ? nova : p) : [...prev, nova];
      salvarPCOPesquisas(nova2);
      return nova2;
    });
    setSelecionada(nova);
  }

  function duplicar(p) {
    const copia = { ...JSON.parse(JSON.stringify(p)), id:`pco_${Date.now()}`, titulo:`${p.titulo} (cópia)`, status:'rascunho', criadaEm:new Date().toISOString().slice(0,10), respondentes:0, respostas:[], isHistorica:false };
    handleSalvar(copia);
    setEditando(copia);
    setModalAberto(true);
  }

  function excluir(id) {
    setPesquisas(prev => { const n = prev.filter(p => p.id !== id); salvarPCOPesquisas(n); return n; });
    if (selecionada?.id === id) setSelecionada(null);
  }

  function alterarStatus(id, novoStatus) {
    setPesquisas(prev => {
      const n = prev.map(p => p.id === id ? { ...p, status: novoStatus, ...(novoStatus === 'encerrada' ? { encerradaEm: new Date().toISOString().slice(0,10) } : {}) } : p);
      salvarPCOPesquisas(n);
      return n;
    });
    if (selecionada?.id === id) setSelecionada(s => ({ ...s, status: novoStatus }));
  }

  function encerrar(p) {
    if (!window.confirm(`Encerrar a pesquisa "${p.titulo}"? Ninguém vai conseguir responder depois disso (igual a AVD).`)) return;
    alterarStatus(p.id, 'encerrada');
  }

  function reabrir(p) {
    if (!window.confirm(`Reabrir a pesquisa "${p.titulo}"? Vai voltar a aparecer pros colaboradores responderem.`)) return;
    alterarStatus(p.id, 'ativa');
  }

  const PesquisaItem = ({ p }) => {
    const [hov, setHov] = useState(false);
    const ativa = selecionada?.id === p.id;
    return (
      <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderRadius:8, cursor:'pointer', background: ativa ? 'var(--escalab-brand-tint)' : hov ? 'var(--escalab-paper)' : 'transparent', transition:'background .12s' }}>
        <div onClick={() => setSelecionada(p)} style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13.5, fontWeight:ativa?700:500, color: ativa?'var(--escalab-brand-deep)':'var(--escalab-ink)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{p.titulo}</div>
          <div style={{ fontSize:11.5, color:'var(--escalab-mute)', marginTop:2 }}>
            {p.respondentes ? `${p.respondentes} respondentes` : 'Sem respostas'}
            {p.mediaGeral ? ` · ${p.mediaGeral.toFixed(2)}` : ''}
          </div>
        </div>
        <StatusBadge status={p.status} />
        {isAdmin && hov && (
          <div style={{ display:'flex', gap:2 }}>
            <button onClick={e => { e.stopPropagation(); duplicar(p); }} title="Duplicar" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="clipboard" size={13} /></button>
            {!p.isHistorica && <button onClick={e => { e.stopPropagation(); setEditando(p); setModalAberto(true); }} title="Editar" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="settings" size={13} /></button>}
          </div>
        )}
      </div>
    );
  };

  return (
    <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:16, animation:'fadeIn .2s' }}>
      {/* Painel esquerdo: lista */}
      <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, overflow:'hidden', maxHeight:'70vh', display:'flex', flexDirection:'column' }}>
        {/* Busca */}
        <div style={{ padding:'10px', borderBottom:'1px solid var(--escalab-line)', flexShrink:0 }}>
          <div style={{ display:'flex', alignItems:'center', gap:7, background:'var(--escalab-paper)', borderRadius:8, padding:'6px 10px' }}>
            <Icon name="search" size={13} />
            <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar pesquisas..." style={{ border:0, outline:0, background:'transparent', fontSize:13, flex:1, fontFamily:'var(--font-sans)' }} />
          </div>
        </div>
        <div style={{ overflowY:'auto', flex:1 }}>
          {/* Ativas */}
          {ativas.length > 0 && (
            <div style={{ padding:'10px 14px 4px' }}>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'#00836B', marginBottom:4 }}>Ativas</div>
              {ativas.filter(p => !busca || p.titulo.toLowerCase().includes(busca.toLowerCase())).map(p => <PesquisaItem key={p.id} p={p} />)}
            </div>
          )}
          {/* Rascunhos */}
          {rascunhos.length > 0 && (
            <div style={{ padding:'10px 14px 4px' }}>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'#E89B3B', marginBottom:4 }}>Rascunhos</div>
              {rascunhos.filter(p => !busca || p.titulo.toLowerCase().includes(busca.toLowerCase())).map(p => <PesquisaItem key={p.id} p={p} />)}
            </div>
          )}
          {/* Encerradas por ano */}
          {Object.keys(porAno).sort((a,b) => b-a).map(a => (
            <div key={a} style={{ padding:'10px 14px 4px' }}>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:4 }}>{a}</div>
              {porAno[a].filter(p => !busca || p.titulo.toLowerCase().includes(busca.toLowerCase())).map(p => <PesquisaItem key={p.id} p={p} />)}
            </div>
          ))}
          {/* Modelos */}
          <div style={{ padding:'10px 14px 4px', borderTop:'1px solid var(--escalab-line)', marginTop:8 }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'#1F4A8A', marginBottom:4 }}>Modelos</div>
            {modelos.filter(p => !busca || p.titulo.toLowerCase().includes(busca.toLowerCase())).map(p => <PesquisaItem key={p.id} p={p} />)}
          </div>
        </div>
        {/* Botão nova pesquisa */}
        {isAdmin && (
          <div style={{ padding:'10px', borderTop:'1px solid var(--escalab-line)', flexShrink:0 }}>
            <button onClick={() => { setEditando(null); setModalAberto(true); }} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:7, border:'1px dashed var(--escalab-line)', borderRadius:8, padding:'9px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', color:'var(--escalab-brand)', background:'transparent', fontWeight:600 }}>
              <Icon name="plus" size={14} /> Nova pesquisa
            </button>
          </div>
        )}
      </div>

      {/* Painel direito: detalhes da pesquisa selecionada */}
      <div>
        {!selecionada ? (
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, padding:'48px 32px', textAlign:'center', color:'var(--escalab-mute)' }}>
            <Icon name="clipboard" size={32} />
            <div style={{ marginTop:12, fontSize:15, fontWeight:600, color:'var(--escalab-ink)' }}>Selecione uma pesquisa</div>
            <div style={{ fontSize:13.5, marginTop:6 }}>Clique em qualquer pesquisa à esquerda para ver o dashboard e as respostas.</div>
            {isAdmin && <div style={{ marginTop:16 }}><Button variant="primary" icon="plus" onClick={() => setModalAberto(true)}>Criar nova pesquisa</Button></div>}
          </div>
        ) : (
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, overflow:'hidden' }}>
            {/* Header da pesquisa */}
            <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:10 }}>
              <div>
                <div style={{ fontSize:17, fontWeight:700, color:'var(--escalab-ink)', marginBottom:4 }}>{selecionada.titulo}</div>
                <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
                  <StatusBadge status={selecionada.status} />
                  {selecionada.periodo && <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>{selecionada.periodo}</span>}
                  {selecionada.criadaEm && <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>Criada: {selecionada.criadaEm}</span>}
                </div>
              </div>
              <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                {isAdmin && !selecionada.isHistorica && (
                  <Button size="sm" variant="outline" icon="settings" onClick={() => { setEditando(selecionada); setModalAberto(true); }}>Editar</Button>
                )}
                {isAdmin && !selecionada.isHistorica && selecionada.status === 'ativa' && (
                  <button onClick={() => encerrar(selecionada)} style={{ border:'1px solid #F4C7C3', background:'#FDECEC', color:'#B3261E', borderRadius:8, padding:'7px 13px', cursor:'pointer', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:5 }}>
                    <Icon name="lock" size={12} /> Encerrar pesquisa
                  </button>
                )}
                {isAdmin && !selecionada.isHistorica && selecionada.status === 'encerrada' && (
                  <button onClick={() => reabrir(selecionada)} style={{ border:'1px solid #B5E3D7', background:'#E6F5F1', color:'#00836B', borderRadius:8, padding:'7px 13px', cursor:'pointer', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:5 }}>
                    <Icon name="check" size={12} /> Reabrir
                  </button>
                )}
                {isAdmin && (
                  <Button size="sm" variant="outline" icon="clipboard" onClick={() => duplicar(selecionada)}>Duplicar</Button>
                )}
              </div>
            </div>
            {/* Dashboard */}
            <div style={{ padding:'20px' }}>
              <PesquisaDashboard pesquisa={selecionada} filtroSetor={filtroSetor} filtroCargo={filtroCargo} />
            </div>
          </div>
        )}
      </div>

      {/* Modal criar/editar */}
      {modalAberto && (
        <ModalCriarPesquisa
          onClose={() => { setModalAberto(false); setEditando(null); }}
          onSalvar={handleSalvar}
          pesquisaBase={editando}
          modelos={modelos}
        />
      )}
    </div>
  );
};

// ── Tab: Visão Geral (histórico) ──────────────────────────────────────────────

const PCOVisaoGeral = () => {
  // Só listar anos com dados reais em PCO_MEDIAS. 2025 nao teve coleta.
  const anosDisp = Object.keys(PCO_MEDIAS).map(Number).sort();
  const anoMaisRecente = anosDisp[anosDisp.length - 1];
  const anoAnterior = anosDisp[anosDisp.length - 2] || anoMaisRecente;
  const [anoA, setAnoA]     = useState(anoAnterior);
  const [anoB, setAnoB]     = useState(anoMaisRecente);
  const [anoC, setAnoC]     = useState(anoMaisRecente);
  const [visao, setVisao]   = useState('geral');
  const [filtroSetor, setFiltroSetor] = useState('');
  // Setor: quais anos mostrar
  const [anosSetor, setAnosSetor] = useState(anosDisp);
  const dadosA = PCO_MEDIAS[anoA], dadosB = PCO_MEDIAS[anoB], dadosC = PCO_MEDIAS[anoC];
  const getKey = v => v === 'sem_assoc' ? 'sem_assoc' : v === 'so_assoc' ? 'so_assoc' : 'geral';
  const setoresUnicos = [...new Set(COLABORADORES.map(c => c.setor))].sort();
  const setoresFiltrados = filtroSetor
    ? PCO_SETORES_HIST.filter(s => s.setor.toLowerCase().includes(filtroSetor.toLowerCase()))
    : PCO_SETORES_HIST;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
      {/* Controles */}
      <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'14px 18px', display:'flex', gap:14, alignItems:'center', flexWrap:'wrap' }}>
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-mute)', textTransform:'uppercase', letterSpacing:'.08em' }}>Comparar:</span>
          {[{val:anoA,set:setAnoA},{val:anoB,set:setAnoB}].map(({val,set},i)=>(
            <React.Fragment key={i}>
              {i>0 && <span style={{ color:'var(--escalab-mute)', fontSize:12 }}>vs</span>}
              <select value={val} onChange={e => set(Number(e.target.value))} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'5px 9px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
                {anosDisp.map(a => <option key={a}>{a}</option>)}
              </select>
            </React.Fragment>
          ))}
        </div>
        <div style={{ display:'flex', gap:6, background:'var(--escalab-paper)', borderRadius:8, padding:3 }}>
          {[{id:'geral',label:'Geral'},{id:'sem_assoc',label:'Fixos'},{id:'so_assoc',label:'Associados'},{id:'cargo',label:'Por Cargo'}].map(v => (
            <button key={v.id} onClick={() => setVisao(v.id)} style={{ border:0, borderRadius:6, padding:'5px 12px', cursor:'pointer', fontSize:12.5, fontFamily:'var(--font-sans)', fontWeight:visao===v.id?600:400, background:visao===v.id?'#fff':'transparent', color:visao===v.id?'var(--escalab-ink)':'var(--escalab-mute)', boxShadow:visao===v.id?'0 1px 4px rgba(0,0,0,.1)':'none' }}>{v.label}</button>
          ))}
        </div>
      </div>

      {/* ─── Visão por CARGO ─── */}
      {visao === 'cargo' && (
        <div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            {[{ano:anoA,cor:'#1F4A8A',bg:'#EEF3FA'},{ano:anoB,cor:'#00967B',bg:'#E6F5F1'}].map(col => {
              const cargos = PCO_MEDIAS_CARGO[col.ano] || [];
              return (
                <div key={col.ano} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
                  <div style={{ background:col.bg, padding:'12px 16px', borderBottom:'1px solid var(--escalab-line)' }}>
                    <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:col.cor }}>Por Cargo · {col.ano}</div>
                  </div>
                  <div style={{ display:'flex', flexDirection:'column' }}>
                    {cargos.map((c,i) => {
                      const cor2 = c.nota >= 4.5 ? '#00967B' : c.nota >= 4.0 ? '#1F4A8A' : '#E89B3B';
                      return (
                        <div key={c.cargo} style={{ padding:'10px 16px', borderBottom:i<cargos.length-1?'1px solid var(--escalab-line)':0, display:'flex', alignItems:'center', gap:10 }}>
                          <div style={{ flex:1, minWidth:0 }}>
                            <div style={{ fontSize:12, fontWeight:600, color:'var(--escalab-ink)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.cargo}</div>
                            <div style={{ height:5, background:'var(--escalab-line)', borderRadius:999, marginTop:5 }}>
                              <div style={{ width:(c.nota/5*100)+'%', height:'100%', background:cor2, borderRadius:999 }}/>
                            </div>
                          </div>
                          <span style={{ fontSize:13, fontWeight:700, color:cor2, flexShrink:0 }}>{c.nota.toFixed(2)}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ─── Visão Geral/Fixos/Associados · 3 colunas ─── */}
      {visao !== 'cargo' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
          {[
            { ano:anoA, label:`${anoA}`, dados:dadosA, color:'#1F4A8A', bg:'#EEF3FA' },
            { ano:anoB, label:`${anoB}`, dados:dadosB, color:'#00967B', bg:'#E6F5F1' },
          ].map(col => (
            <div key={col.ano} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
              <div style={{ background:col.bg, padding:'10px 14px', borderBottom:'1px solid var(--escalab-line)' }}>
                <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:col.color }}>{col.label}</div>
              </div>
              {PCO_DIMENSOES_SHORT.map((dim, i) => {
                const nota = col.dados[getKey(visao)][i];
                const pct = (nota/5*100).toFixed(1);
                const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : '#E89B3B';
                return (
                  <div key={dim} style={{ padding:'9px 14px', borderBottom:i<PCO_DIMENSOES_SHORT.length-1?'1px solid var(--escalab-line)':0, display:'flex', alignItems:'center', gap:8 }}>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:11, color:'var(--escalab-ink)', fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{dim}</div>
                      <div style={{ height:4, background:'var(--escalab-line)', borderRadius:999, marginTop:3 }}>
                        <div style={{ width:pct+'%', height:'100%', background:cor, borderRadius:999 }} />
                      </div>
                    </div>
                    <span style={{ fontSize:12, fontWeight:700, color:cor, flexShrink:0 }}>{nota.toFixed(2)}</span>
                  </div>
                );
              })}
              <div style={{ padding:'10px 14px', background:col.bg, borderTop:`2px solid ${col.color}30` }}>
                <div style={{ display:'flex', justifyContent:'space-between' }}>
                  <span style={{ fontSize:11, fontWeight:700, color:col.color, textTransform:'uppercase' }}>Global</span>
                  <span style={{ fontSize:13, fontWeight:800, color:col.color }}>{(visao==='geral'?col.dados.global_geral:visao==='sem_assoc'?col.dados.global_sem:col.dados.global_ass).toFixed(2)}</span>
                </div>
              </div>
            </div>
          ))}
          {/* Variação A→B */}
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
            <div style={{ background:'var(--escalab-paper)', padding:'10px 14px', borderBottom:'1px solid var(--escalab-line)' }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>{anoA}→{anoB}</div>
            </div>
            {PCO_DIMENSOES_SHORT.map((dim, i) => {
              const va = dadosA[getKey(visao)][i], vb = dadosB[getKey(visao)][i], diff = vb - va;
              const cor = diff > 0.02 ? '#00967B' : diff < -0.02 ? '#B3261E' : 'var(--escalab-mute)';
              return (
                <div key={dim} style={{ padding:'9px 14px', borderBottom:i<PCO_DIMENSOES_SHORT.length-1?'1px solid var(--escalab-line)':0, display:'flex', alignItems:'center', gap:8 }}>
                  <span style={{ fontSize:11, color:'var(--escalab-mute)', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{dim}</span>
                  <span style={{ fontSize:12.5, fontWeight:700, color:cor }}>{diff > 0 ? '+' : ''}{diff.toFixed(2)}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ─── Comparativo por Setor com anos selecionáveis ─── */}
      {(() => {
        const CORES_ANO = { 2024:'#1F4A8A', 2025:'#6B3FA0', 2026:'#00967B' };
        const anosAtivos = anosSetor.filter(a => anosDisp.includes(a)).sort();
        const toggleAno = a => setAnosSetor(p => p.includes(a) ? p.filter(x=>x!==a) : [...p,a]);
        const melhorAno = anosAtivos[anosAtivos.length-1] || anoMaisRecente;
        const piorAno   = anosAtivos[0] || anoAnterior;
        return (
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'20px' }}>
            <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16, flexWrap:'wrap' }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', flex:1 }}>Comparativo por Setor</div>
              {/* Seleção de anos */}
              <div style={{ display:'flex', gap:6, alignItems:'center' }}>
                <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>Mostrar:</span>
                {anosDisp.map(a => {
                  const sel = anosSetor.includes(a);
                  return (
                    <button key={a} onClick={()=>toggleAno(a)} style={{ border:`2px solid ${sel?CORES_ANO[a]:'var(--escalab-line)'}`, borderRadius:7, padding:'4px 10px', background:sel?CORES_ANO[a]+'18':'#fff', color:sel?CORES_ANO[a]:'var(--escalab-mute)', cursor:'pointer', fontSize:12.5, fontWeight:sel?700:400, fontFamily:'var(--font-sans)' }}>{a}</button>
                  );
                })}
              </div>
              <select value={filtroSetor} onChange={e => setFiltroSetor(e.target.value)} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'5px 9px', fontSize:12.5, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
                <option value="">Todos os setores</option>
                {setoresUnicos.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </div>
            {/* Legenda de anos */}
            {anosAtivos.length > 0 && (
              <div style={{ display:'flex', gap:14, marginBottom:12, paddingLeft:90 }}>
                {anosAtivos.map(a=>(
                  <div key={a} style={{ display:'flex', alignItems:'center', gap:5, fontSize:12 }}>
                    <div style={{ width:10, height:10, borderRadius:2, background:CORES_ANO[a] }}/>
                    <span style={{ color:'var(--escalab-mute)', fontWeight:600 }}>{a}</span>
                  </div>
                ))}
              </div>
            )}
            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              {setoresFiltrados.sort((a,b) => (b[melhorAno]||0)-(a[melhorAno]||0)).map(s => {
                const vals = anosAtivos.map(a => ({ ano:a, v:s[a]||0, c:CORES_ANO[a] })).filter(x=>x.v);
                const maxV = Math.max(...vals.map(x=>x.v), 5);
                const diff = vals.length >= 2 ? vals[vals.length-1].v - vals[0].v : null;
                return (
                  <div key={s.setor} style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <span style={{ fontSize:13, color:'var(--escalab-ink)', minWidth:85, fontWeight:500, flexShrink:0 }}>{s.setor}</span>
                    <div style={{ flex:1, display:'flex', flexDirection:'column', gap:4 }}>
                      {vals.map(p=>(
                        <div key={p.ano} style={{ display:'flex', alignItems:'center', gap:8 }}>
                          <span style={{ fontSize:10.5, color:'var(--escalab-mute)', minWidth:32 }}>{p.ano}</span>
                          <div style={{ flex:1, height:7, background:'var(--escalab-line)', borderRadius:999 }}>
                            <div style={{ width:(p.v/maxV*100)+'%', height:'100%', background:p.c, borderRadius:999 }}/>
                          </div>
                          <span style={{ fontSize:12, fontWeight:700, color:p.c, minWidth:34 }}>{p.v.toFixed(2)}</span>
                        </div>
                      ))}
                    </div>
                    {diff !== null && <span style={{ fontSize:11, color:diff>0?'#00967B':'#B3261E', minWidth:40, textAlign:'right', fontWeight:600 }}>{diff>0?'+':''}{diff.toFixed(2)}</span>}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })()}
    </div>
  );
};

// ── Tab: Análise por Pergunta ─────────────────────────────────────────────────

const PCOAnalisePerguntas = () => {
  const [dimSel, setDimSel]   = useState('Ergonomia');
  const [anoSel, setAnoSel]   = useState(2026);
  const [pergSel, setPergSel] = useState(null);
  const [filtroSetor, setFiltroSetor] = useState('');
  const [filtroCargo, setFiltroCargo] = useState('');

  const perguntas = PCO_PERGUNTAS[dimSel] || [];
  const cargosUnicos  = [...new Set(COLABORADORES.map(c => c.cargo.replace(/ [IVX]+$/, '')))].slice(0,6);
  const setoresUnicos = [...new Set(COLABORADORES.map(c => c.setor))];

  const setoresFiltrados = filtroSetor
    ? setoresUnicos.filter(s => s.toLowerCase().includes(filtroSetor.toLowerCase()))
    : setoresUnicos.slice(0,6);

  const cargosFiltrados = filtroCargo
    ? cargosUnicos.filter(c => c.toLowerCase().includes(filtroCargo.toLowerCase()))
    : cargosUnicos;

  // Mock notas por cargo e setor baseadas na pergunta selecionada
  const seed = pergSel || 0;
  const notasPorCargo  = cargosFiltrados.map((c,i) => ({ cargo:c, nota: 3.4 + ((seed*7+i*3) % 14)/10 })).sort((a,b) => b.nota-a.nota);
  const notasPorSetor  = setoresFiltrados.map((s,i) => ({ setor:s, nota: 3.5 + ((seed*5+i*4) % 12)/10 })).sort((a,b) => b.nota-a.nota);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
      {/* Lista de perguntas */}
      <div>
        <div style={{ display:'flex', gap:8, marginBottom:14, flexWrap:'wrap', alignItems:'center' }}>
          <select value={dimSel} onChange={e => { setDimSel(e.target.value); setPergSel(null); }}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff', flex:'1 1 160px' }}>
            {PCO_DIMENSOES_SHORT.map(d => <option key={d}>{d}</option>)}
          </select>
          <select value={anoSel} onChange={e => setAnoSel(Number(e.target.value))}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
            {[2024,2025,2026].map(a => <option key={a}>{a}</option>)}
          </select>
          <select value={filtroSetor} onChange={e => setFiltroSetor(e.target.value)}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
            <option value="">Todos os setores</option>
            {setoresUnicos.map(s => <option key={s}>{s}</option>)}
          </select>
          <select value={filtroCargo} onChange={e => setFiltroCargo(e.target.value)}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
            <option value="">Todos os cargos</option>
            {cargosUnicos.map(c => <option key={c}>{c}</option>)}
          </select>
        </div>
        <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
          <div style={{ padding:'12px 16px', background:'var(--escalab-paper)', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <span style={{ fontSize:12, fontWeight:700, color:'var(--escalab-mute)', textTransform:'uppercase', letterSpacing:'.08em' }}>Dimensão: {dimSel}</span>
            <span style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>Clique para ver análise detalhada</span>
          </div>
          {perguntas.map((p, i) => {
            const nota = p.notas[anoSel], notaAnt = p.notas[anoSel-1];
            const cor = nota >= 4.5 ? '#00967B' : nota >= 4.0 ? '#1F4A8A' : nota >= 3.5 ? '#E89B3B' : '#B3261E';
            const isAtual = pergSel === i;
            return (
              <div key={i} onClick={() => setPergSel(isAtual ? null : i)}
                style={{ padding:'13px 16px', borderBottom:i<perguntas.length-1?'1px solid var(--escalab-line)':0, cursor:'pointer', background:isAtual?'var(--escalab-brand-tint)':'transparent', transition:'background .12s' }}>
                <div style={{ fontSize:13.5, color:'var(--escalab-ink)', lineHeight:1.45, marginBottom:8 }}>{p.texto}</div>
                <div style={{ display:'flex', gap:12, alignItems:'center' }}>
                  <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}>
                    <div style={{ width:(nota/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} />
                  </div>
                  <span style={{ fontSize:13, fontWeight:700, color:cor, minWidth:32 }}>{nota?.toFixed(2)}</span>
                  {notaAnt && <span style={{ fontSize:11, color:(nota-notaAnt)>0?'#00967B':'#B3261E', minWidth:36 }}>{(nota-notaAnt)>0?'↑':'↓'} {Math.abs(nota-notaAnt).toFixed(2)}</span>}
                  <div style={{ color:'var(--escalab-mute)' }}><Icon name="chev_right" size={13} /></div>
                </div>
              </div>
            );
          })}
          {perguntas.length === 0 && <div style={{ padding:'24px', textAlign:'center', color:'var(--escalab-mute)', fontSize:13 }}>Dados detalhados não disponíveis.</div>}
        </div>
      </div>

      {/* Análise sempre visível à direita */}
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          {pergSel != null ? (
            <div style={{ background:'var(--escalab-brand-tint)', border:'1px solid var(--escalab-brand-soft)', borderRadius:12, padding:'14px 16px' }}>
              <div style={{ fontSize:11, fontWeight:600, color:'var(--escalab-brand)', marginBottom:6, textTransform:'uppercase', letterSpacing:'.08em' }}>Pergunta selecionada</div>
              <div style={{ fontSize:13.5, color:'var(--escalab-ink)', lineHeight:1.5 }}>{perguntas[pergSel]?.texto}</div>
            </div>
          ) : (
            <div style={{ background:'var(--escalab-paper)', borderRadius:12, padding:'14px 16px', fontSize:13, color:'var(--escalab-mute)', textAlign:'center' }}>
              <Icon name="info" size={16} /><div style={{ marginTop:6 }}>Selecione uma pergunta para ver a análise detalhada. Os filtros por setor e cargo estão sempre ativos.</div>
            </div>
          )}
          {/* Por cargo */}
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:12 }}>Média por Cargo{filtroCargo?` (filtro: ${filtroCargo})`:''}</div>
            {notasPorCargo.map(c => {
              const cor = c.nota >= 4.5 ? '#00967B' : c.nota >= 4.0 ? '#1F4A8A' : c.nota >= 3.5 ? '#E89B3B' : '#B3261E';
              return (
                <div key={c.cargo} style={{ display:'flex', alignItems:'center', gap:10, marginBottom:9 }}>
                  <span style={{ fontSize:12, color:'var(--escalab-slate)', minWidth:130, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.cargo}</span>
                  <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}><div style={{ width:(c.nota/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} /></div>
                  <span style={{ fontSize:12.5, fontWeight:700, color:cor, minWidth:32 }}>{c.nota.toFixed(2)}</span>
                </div>
              );
            })}
          </div>
          {/* Por setor */}
          <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:12 }}>Média por Setor{filtroSetor?` (filtro: ${filtroSetor})`:''}</div>
            {notasPorSetor.map(s => {
              const cor = s.nota >= 4.5 ? '#00967B' : s.nota >= 4.0 ? '#1F4A8A' : s.nota >= 3.5 ? '#E89B3B' : '#B3261E';
              return (
                <div key={s.setor} style={{ display:'flex', alignItems:'center', gap:10, marginBottom:9 }}>
                  <span style={{ fontSize:12, color:'var(--escalab-slate)', minWidth:90 }}>{s.setor}</span>
                  <div style={{ flex:1, height:6, background:'var(--escalab-line)', borderRadius:999 }}><div style={{ width:(s.nota/5*100)+'%', height:'100%', background:cor, borderRadius:999 }} /></div>
                  <span style={{ fontSize:12.5, fontWeight:700, color:cor, minWidth:32 }}>{s.nota.toFixed(2)}</span>
                </div>
              );
            })}
          </div>
      </div>
    </div>
  );
};

// ── Análise de temas (extrai palavras-chave dos comentários) ─────────────────

const STOPWORDS = new Set(['e','de','do','da','dos','das','o','a','os','as','um','uma','uns','umas','para','por','com','em','no','na','nos','nas','ao','aos','à','às','que','não','se','é','são','foi','mas','mais','como','ou','seu','sua','seus','suas','este','esta','esses','essas','isso','aqui','quando','muito','bem','ter','que','ser','por','pra','já','só','ainda','também','sobre','entre','assim','desta','deste','neste','nessa','nessa']);

function extrairTemas(texto) {
  return texto.toLowerCase().replace(/[^a-záàâãéêíóôõúüç ]/gi,'').split(/\s+/)
    .filter(w => w.length > 3 && !STOPWORDS.has(w));
}

function gerarAnaliseTemas() {
  const positivos = {}, negativos = {};
  Object.values(PCO_QUALITATIVOS).forEach(d => {
    d.pontos_positivos.forEach(c => { extrairTemas(c).forEach(w => { positivos[w] = (positivos[w]||0) + 1; }); });
    d.pontos_negativos.forEach(c => { extrairTemas(c).forEach(w => { negativos[w] = (negativos[w]||0) + 1; }); });
  });
  const toArr = (obj) => Object.entries(obj).sort((a,b) => b[1]-a[1]).slice(0,15).map(([texto,freq]) => ({ texto, freq }));
  return { positivos: toArr(positivos), negativos: toArr(negativos) };
}

const AnaliseTemasCard = () => {
  const { positivos, negativos } = React.useMemo(gerarAnaliseTemas, []);
  const maxFreq = Math.max(...positivos.map(t=>t.freq), ...negativos.map(t=>t.freq), 1);
  const [visao, setVisao] = useState('ambos');

  return (
    <div style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:14, overflow:'hidden', marginBottom:16 }}>
      {/* Header */}
      <div style={{ padding:'14px 18px', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10 }}>
        <div>
          <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>Análise de Temas Recorrentes</div>
          <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginTop:2 }}>Palavras mais frequentes nos comentários abertos · agrupadas por sentimento</div>
        </div>
        <div style={{ display:'flex', gap:4, background:'var(--escalab-paper)', borderRadius:8, padding:3 }}>
          {[{id:'ambos',label:'Ambos'},{id:'positivos',label:'Positivos'},{id:'negativos',label:'Negativos'}].map(v => (
            <button key={v.id} onClick={() => setVisao(v.id)} style={{ border:0, borderRadius:6, padding:'5px 11px', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)', fontWeight:visao===v.id?600:400, background:visao===v.id?'#fff':'transparent', color:visao===v.id?'var(--escalab-ink)':'var(--escalab-mute)', boxShadow:visao===v.id?'0 1px 4px rgba(0,0,0,.08)':'none' }}>{v.label}</button>
          ))}
        </div>
      </div>
      <div style={{ padding:'16px 18px', display:'grid', gridTemplateColumns: visao==='ambos' ? '1fr 1fr' : '1fr', gap:20 }}>
        {(visao === 'ambos' || visao === 'positivos') && (
          <div>
            <div style={{ fontSize:11.5, fontWeight:700, color:'#00836B', textTransform:'uppercase', letterSpacing:'.08em', marginBottom:10, display:'flex', alignItems:'center', gap:6 }}>
              <div style={{ width:8, height:8, borderRadius:'50%', background:'#00836B' }} /> Temas positivos
            </div>
            {positivos.slice(0,10).map(t => (
              <div key={t.texto} style={{ display:'flex', alignItems:'center', gap:10, marginBottom:7 }}>
                <span style={{ fontSize:12.5, color:'var(--escalab-slate)', minWidth:120, fontWeight:500 }}>{t.texto}</span>
                <div style={{ flex:1, height:6, background:'#E6F5F1', borderRadius:999 }}>
                  <div style={{ width:(t.freq/maxFreq*100)+'%', height:'100%', background:'#00836B', borderRadius:999, transition:'width .4s' }} />
                </div>
                <span style={{ fontSize:11.5, color:'#00836B', fontWeight:700, minWidth:16 }}>{t.freq}×</span>
              </div>
            ))}
          </div>
        )}
        {(visao === 'ambos' || visao === 'negativos') && (
          <div>
            <div style={{ fontSize:11.5, fontWeight:700, color:'#B3261E', textTransform:'uppercase', letterSpacing:'.08em', marginBottom:10, display:'flex', alignItems:'center', gap:6 }}>
              <div style={{ width:8, height:8, borderRadius:'50%', background:'#B3261E' }} /> Temas negativos / pontos de atenção
            </div>
            {negativos.slice(0,10).map(t => (
              <div key={t.texto} style={{ display:'flex', alignItems:'center', gap:10, marginBottom:7 }}>
                <span style={{ fontSize:12.5, color:'var(--escalab-slate)', minWidth:120, fontWeight:500 }}>{t.texto}</span>
                <div style={{ flex:1, height:6, background:'#FDECEC', borderRadius:999 }}>
                  <div style={{ width:(t.freq/maxFreq*100)+'%', height:'100%', background:'#B3261E', borderRadius:999, transition:'width .4s' }} />
                </div>
                <span style={{ fontSize:11.5, color:'#B3261E', fontWeight:700, minWidth:16 }}>{t.freq}×</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Tab: Dados Qualitativos ───────────────────────────────────────────────────

const PCOQualitativos = () => {
  const dims = Object.keys(PCO_QUALITATIVOS);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <Banner tone="info">Os comentários abaixo foram coletados na última Pesquisa de Clima (2026) e agrupados por frequência dentro de cada dimensão.</Banner>
      <AnaliseTemasCard />
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(340px, 1fr))', gap:14 }}>
        {dims.map(dim => {
          const d = PCO_QUALITATIVOS[dim];
          return (
            <div key={dim} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
              <div style={{ background:'var(--escalab-paper)', padding:'12px 16px', borderBottom:'1px solid var(--escalab-line)', fontSize:12, fontWeight:700, color:'var(--escalab-ink)', letterSpacing:'.05em', textTransform:'uppercase' }}>{dim}</div>
              <div style={{ padding:'14px 16px', display:'flex', flexDirection:'column', gap:12 }}>
                {d.pontos_positivos.length > 0 && (
                  <div>
                    <div style={{ fontSize:11.5, fontWeight:600, color:'#00836B', marginBottom:7, textTransform:'uppercase', letterSpacing:'.08em' }}>Pontos positivos</div>
                    {d.pontos_positivos.map((c,i) => (
                      <div key={i} style={{ display:'flex', gap:8, alignItems:'flex-start', padding:'5px 0', borderBottom:i<d.pontos_positivos.length-1?'1px solid var(--escalab-line)':0 }}>
                        <div style={{ width:7, height:7, borderRadius:'50%', background:'#00836B', flexShrink:0, marginTop:5 }} />
                        <span style={{ fontSize:13, color:'var(--escalab-slate)', lineHeight:1.4 }}>{c}</span>
                      </div>
                    ))}
                  </div>
                )}
                {d.pontos_negativos.length > 0 && (
                  <div>
                    <div style={{ fontSize:11.5, fontWeight:600, color:'#B3261E', marginBottom:7, textTransform:'uppercase', letterSpacing:'.08em' }}>Pontos negativos</div>
                    {d.pontos_negativos.map((c,i) => (
                      <div key={i} style={{ display:'flex', gap:8, alignItems:'flex-start', padding:'5px 0', borderBottom:i<d.pontos_negativos.length-1?'1px solid var(--escalab-line)':0 }}>
                        <div style={{ width:7, height:7, borderRadius:'50%', background:'#B3261E', flexShrink:0, marginTop:5 }} />
                        <span style={{ fontSize:13, color:'var(--escalab-slate)', lineHeight:1.4 }}>{c}</span>
                      </div>
                    ))}
                  </div>
                )}
                {d.pontos_positivos.length === 0 && d.pontos_negativos.length === 0 && (
                  <div style={{ fontSize:13, color:'var(--escalab-mute)', fontStyle:'italic' }}>Sem comentários registrados.</div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ── Censo: dados e modelo ────────────────────────────────────────────────────

const CENSO_KEY = 'escalab_censo_pesquisas';

const CENSO_MODELO_BASE = {
  id: 'censo_modelo_padrao',
  titulo: 'Censo de Diversidade Padrão',
  isModelo: true,
  status: 'modelo',
  criadaEm: '2024-01-01',
  dimensoes: [
    { id:'censo_dim0', titulo:'Identidade e Pertencimento', perguntas: [
      { id:'c0_p0', tipo:'opcoes', texto:'Com qual gênero você se identifica?', opcoes:['Mulher cisgênero','Homem Cisgênero','Mulher Transgênero','Homem Transgênero','Não-binário','Gênero fluido - Sente que seu gênero pode variar ao longo do tempo','Prefiro não declarar'] },
      { id:'c0_p1', tipo:'opcoes', texto:'Qual sua orientação sexual?', opcoes:['Heterossexual','Homossexual (gay/lésbica)','Bissexual','Pansexual','Prefiro não responder'] },
    ]},
    { id:'censo_dim1', titulo:'Raça e Etnia', perguntas: [
      { id:'c1_p0', tipo:'opcoes', texto:'Como você se autodeclara?', opcoes:['Branca','Preta','Parda','Amarela','Indígena','Prefiro não responder'] },
    ]},
    { id:'censo_dim2', titulo:'Deficiência (PCD)', perguntas: [
      { id:'c2_p0', tipo:'opcoes', texto:'Você possui alguma deficiência?', opcoes:['Sim','Não','Prefiro não responder'] },
      { id:'c2_p1', tipo:'text', texto:'Se sim, qual o tipo? (opcional)' },
    ]},
    { id:'censo_dim3', titulo:'Dados Demográficos', perguntas: [
      { id:'c3_p0', tipo:'opcoes', texto:'Faixa etária', opcoes:['18–22','23–27','28–32','33–40','41+'] },
      { id:'c3_p1', tipo:'opcoes', texto:'Escolaridade', opcoes:['Superior incompleto','Superior completo','Pós-graduação','Mestrado completo','Mestrado incompleto','Doutorado incompleto','Doutorado completo'] },
    ]},
  ],
  respostas: [],
};

function getCensoPesquisas() {
  try {
    const raw = localStorage.getItem(CENSO_KEY);
    if (raw) return JSON.parse(raw);
    const inicial = [CENSO_MODELO_BASE];
    localStorage.setItem(CENSO_KEY, JSON.stringify(inicial));
    return inicial;
  } catch { return [CENSO_MODELO_BASE]; }
}

function salvarCensoPesquisas(lista) {
  try { localStorage.setItem(CENSO_KEY, JSON.stringify(lista)); } catch {}
}

// ── Modal criar pesquisa de censo (reutiliza o builder PCO + suporte a opcoes) ─

const ModalCriarCenso = ({ onClose, onSalvar, pesquisaBase, modelos }) => {
  const [passo, setPasso] = useState(pesquisaBase ? 3 : 1);
  const [titulo, setTitulo] = useState(pesquisaBase?.titulo || '');
  const [ano, setAno] = useState(pesquisaBase?.ano || new Date().getFullYear());
  const [dimensoes, setDimensoes] = useState(pesquisaBase?.dimensoes || []);
  const [modeloSel, setModeloSel] = useState(null);
  const [isModelo, setIsModelo] = useState(pesquisaBase?.isModelo || false);
  const [midia, setMidia] = useState(pesquisaBase?.midia || null);

  function handleMidia(e) {
    const file = e.target.files[0]; if (!file) return;
    const tipo = file.type.startsWith('video') ? 'video' : 'imagem';
    const r = new FileReader();
    r.onload = ev => setMidia({ tipo, url: ev.target.result, nome: file.name });
    r.readAsDataURL(file);
  }

  function usarModelo(m) { setDimensoes(JSON.parse(JSON.stringify(m.dimensoes))); setModeloSel(m.id); setPasso(3); }
  function addDimensao() { setDimensoes(d => [...d, { id:`dim_${Date.now()}`, titulo:'Nova Categoria', perguntas:[{ id:`p_${Date.now()}`, tipo:'single', texto:'Nova pergunta', opcoes:['Opção 1','Opção 2'] }] }]); }
  function updateDim(idx, field, val) { setDimensoes(d => d.map((x,i) => i===idx ? {...x,[field]:val} : x)); }
  function removeDim(idx) { setDimensoes(d => d.filter((_,i) => i!==idx)); }
  function addPerg(di) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:[...x.perguntas,{id:`p_${Date.now()}`,tipo:'single',texto:'',opcoes:['Opção 1','Opção 2']}]} : x)); }
  function updatePerg(di, pi, field, val) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:x.perguntas.map((p,j) => j===pi?{...p,[field]:val}:p)} : x)); }
  function removePerg(di, pi) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:x.perguntas.filter((_,j)=>j!==pi)} : x)); }
  function moverPerg(di, pi, dir) {
    setDimensoes(d => d.map((x,i) => {
      if (i !== di) return x;
      const j = pi + dir;
      if (j < 0 || j >= x.perguntas.length) return x;
      const ps = [...x.perguntas];
      [ps[pi], ps[j]] = [ps[j], ps[pi]];
      return { ...x, perguntas: ps };
    }));
  }
  function moverDim(di, dir) {
    setDimensoes(d => {
      const j = di + dir;
      if (j < 0 || j >= d.length) return d;
      const nd = [...d];
      [nd[di], nd[j]] = [nd[j], nd[di]];
      return nd;
    });
  }
  function updateOpcao(di, pi, oi, val) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:x.perguntas.map((p,j) => j===pi?{...p, opcoes:(p.opcoes||[]).map((o,k)=>k===oi?val:o)}:p)} : x)); }
  function addOpcao(di, pi) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:x.perguntas.map((p,j) => j===pi?{...p, opcoes:[...(p.opcoes||[]),`Opção ${(p.opcoes||[]).length+1}`]}:p)} : x)); }
  function removeOpcao(di, pi, oi) { setDimensoes(d => d.map((x,i) => i===di ? {...x, perguntas:x.perguntas.map((p,j) => j===pi?{...p, opcoes:(p.opcoes||[]).filter((_,k)=>k!==oi)}:p)} : x)); }

  function handleSalvar(status) {
    onSalvar({ id:pesquisaBase?.id||`censo_${Date.now()}`, titulo, ano:Number(ano), status, isModelo, dimensoes, midia, respostas:pesquisaBase?.respostas||[], criadaEm:pesquisaBase?.criadaEm||new Date().toISOString().slice(0,10) });
    onClose();
  }

  const passos = ['Informações','Modelo','Perguntas','Revisar'];

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.55)', backdropFilter:'blur(4px)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:18, width:'100%', maxWidth:720, maxHeight:'92vh', display:'flex', flexDirection:'column', animation:'popIn .22s var(--ease-out)', overflow:'hidden' }}>
        <div style={{ padding:'20px 26px', borderBottom:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexShrink:0 }}>
          <div>
            <h3 style={{ margin:0, fontSize:17, fontWeight:700 }}>{pesquisaBase ? 'Editar Censo' : 'Novo Censo de Diversidade'}</h3>
            <div style={{ fontSize:12.5, color:'var(--escalab-mute)', marginTop:3 }}>Passo {passo} de 4 · {passos[passo-1]}</div>
          </div>
          <button onClick={onClose} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ display:'flex', gap:0, flexShrink:0 }}>{passos.map((_,i) => <div key={i} style={{ flex:1, height:3, background:i<passo?'var(--escalab-brand)':'var(--escalab-line)', transition:'background .2s' }} />)}</div>

        <div style={{ flex:1, overflowY:'auto', padding:'22px 26px' }}>
          {passo === 1 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <Field label="Título do censo"><Input value={titulo} onChange={setTitulo} placeholder="Ex: Censo de Diversidade 2027" /></Field>
              <Field label="Ano"><Input value={ano} onChange={setAno} type="number" placeholder="2027" /></Field>
              <label style={{ display:'flex', gap:10, alignItems:'center', cursor:'pointer' }}>
                <input type="checkbox" checked={isModelo} onChange={e=>setIsModelo(e.target.checked)} style={{ width:16, height:16 }} />
                <span style={{ fontSize:13.5, color:'var(--escalab-slate)' }}>Salvar como modelo reutilizável</span>
              </label>
              <Field label="Foto ou vídeo (opcional)">
                {midia ? (
                  <div style={{ display:'flex', gap:12, alignItems:'center', border:'1px solid var(--escalab-line)', borderRadius:10, padding:'10px 12px' }}>
                    {midia.tipo === 'video'
                      ? <video src={midia.url} style={{ width:90, height:60, borderRadius:8, objectFit:'cover', background:'#000' }} muted />
                      : <img src={midia.url} alt="" style={{ width:90, height:60, borderRadius:8, objectFit:'cover' }} />}
                    <div style={{ flex:1, fontSize:12.5, color:'var(--escalab-slate)' }}>{midia.tipo === 'video' ? 'Vídeo' : 'Imagem'} adicionado{midia.nome ? ` · ${midia.nome}` : ''}</div>
                    <button onClick={() => setMidia(null)} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)' }}><Icon name="close" size={16} /></button>
                  </div>
                ) : (
                  <label style={{ display:'flex', alignItems:'center', gap:8, border:'1px dashed var(--escalab-line)', borderRadius:10, padding:'12px 14px', cursor:'pointer', color:'var(--escalab-mute)', fontSize:13 }}>
                    <Icon name="upload" size={15} /> Adicionar foto ou vídeo ao formulário
                    <input type="file" accept="image/*,video/*" style={{ display:'none' }} onChange={handleMidia} />
                  </label>
                )}
              </Field>
            </div>
          )}
          {passo === 2 && (
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              <div onClick={() => { setDimensoes([]); setPasso(3); }} style={{ border:'2px dashed var(--escalab-line)', borderRadius:12, padding:'18px 20px', cursor:'pointer', display:'flex', gap:14, alignItems:'center' }}>
                <div style={{ width:40, height:40, borderRadius:10, background:'var(--escalab-paper)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name="plus" size={20} /></div>
                <div><div style={{ fontSize:14, fontWeight:600 }}>Começar do zero</div><div style={{ fontSize:12.5, color:'var(--escalab-mute)' }}>Crie suas próprias categorias e perguntas</div></div>
              </div>
              {modelos.map(m => (
                <div key={m.id} onClick={() => usarModelo(m)} style={{ border:`2px solid ${modeloSel===m.id?'var(--escalab-brand)':'var(--escalab-line)'}`, borderRadius:12, padding:'18px 20px', cursor:'pointer', display:'flex', gap:14, alignItems:'center', background:modeloSel===m.id?'var(--escalab-brand-tint)':'#fff' }}>
                  <div style={{ width:40, height:40, borderRadius:10, background:modeloSel===m.id?'var(--escalab-brand)':'var(--escalab-paper)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name="users" size={18} /></div>
                  <div style={{ flex:1 }}><div style={{ fontSize:14, fontWeight:600 }}>{m.titulo}</div><div style={{ fontSize:12.5, color:'var(--escalab-mute)' }}>{m.dimensoes?.length||0} categorias · {m.dimensoes?.reduce((s,d)=>s+d.perguntas.length,0)||0} perguntas</div></div>
                  <StatusBadge status="modelo" />
                </div>
              ))}
            </div>
          )}
          {passo === 3 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontSize:13, color:'var(--escalab-mute)' }}>{dimensoes.length} categoria(s) · {dimensoes.reduce((s,d)=>s+d.perguntas.length,0)} pergunta(s)</div>
                <Button size="sm" variant="outline" icon="plus" onClick={addDimensao}>Adicionar categoria</Button>
              </div>
              {dimensoes.map((dim,di) => (
                <div key={dim.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:12, overflow:'hidden' }}>
                  <div style={{ background:'var(--escalab-paper)', padding:'10px 14px', display:'flex', alignItems:'center', gap:8 }}>
                    <div style={{ display:'flex', flexDirection:'column', gap:1 }}>
                      <button onClick={() => moverDim(di, -1)} disabled={di === 0} title="Subir categoria" style={{ border:0, background:'transparent', cursor: di===0 ? 'not-allowed' : 'pointer', color: di===0 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▲</button>
                      <button onClick={() => moverDim(di, +1)} disabled={di === dimensoes.length - 1} title="Descer categoria" style={{ border:0, background:'transparent', cursor: di===dimensoes.length-1 ? 'not-allowed' : 'pointer', color: di===dimensoes.length-1 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▼</button>
                    </div>
                    <input value={dim.titulo} onChange={e=>updateDim(di,'titulo',e.target.value)} style={{ flex:1, border:0, background:'transparent', outline:0, fontWeight:700, fontSize:14, color:'var(--escalab-ink)', fontFamily:'var(--font-sans)' }} />
                    <button onClick={()=>removeDim(di)} title="Remover categoria" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="close" size={14} /></button>
                  </div>
                  <div style={{ padding:'10px 14px', display:'flex', flexDirection:'column', gap:10 }}>
                    {dim.perguntas.map((p,pi) => {
                      const tipo = normalizarTipoPergunta(p.tipo);
                      return (
                        <div key={p.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:8, padding:'10px 12px' }}>
                          <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom: (tipo==='single'||tipo==='multi'||tipo==='scale') ? 9 : 0, flexWrap:'wrap' }}>
                            <div style={{ display:'flex', flexDirection:'column', gap:1, flexShrink:0 }}>
                              <button onClick={() => moverPerg(di, pi, -1)} disabled={pi === 0} title="Subir pergunta" style={{ border:0, background:'transparent', cursor: pi===0 ? 'not-allowed' : 'pointer', color: pi===0 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▲</button>
                              <button onClick={() => moverPerg(di, pi, +1)} disabled={pi === dim.perguntas.length - 1} title="Descer pergunta" style={{ border:0, background:'transparent', cursor: pi===dim.perguntas.length-1 ? 'not-allowed' : 'pointer', color: pi===dim.perguntas.length-1 ? '#CCC' : 'var(--escalab-slate)', padding:'1px 4px', fontSize:11, lineHeight:1 }}>▼</button>
                            </div>
                            <select value={tipo} onChange={e => {
                                const novoTipo = e.target.value;
                                updatePerg(di, pi, 'tipo', novoTipo);
                                if ((novoTipo === 'single' || novoTipo === 'multi') && !p.opcoes) updatePerg(di, pi, 'opcoes', ['Opção 1', 'Opção 2']);
                                if (novoTipo === 'scale') {
                                  if (!Number.isFinite(p.escalaMin)) updatePerg(di, pi, 'escalaMin', 1);
                                  if (!Number.isFinite(p.escalaMax)) updatePerg(di, pi, 'escalaMax', 5);
                                }
                              }}
                              style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'5px 8px', fontSize:12, fontFamily:'var(--font-sans)', outline:0, background:'#fff', flexShrink:0 }}>
                              {TIPOS_PERGUNTA.map(t => <option key={t.id} value={t.id}>{t.icone} {t.label}</option>)}
                            </select>
                            <input value={p.texto} onChange={e=>updatePerg(di,pi,'texto',e.target.value)} placeholder="Texto da pergunta..." style={{ flex:1, minWidth:140, border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                            <label style={{ display:'flex', gap:5, alignItems:'center', cursor:'pointer', fontSize:12, color:'var(--escalab-ink)', flexShrink:0, fontWeight:500 }} title="Resposta obrigatória">
                              <input type="checkbox" checked={!!p.obrigatoria} onChange={e=>updatePerg(di,pi,'obrigatoria',e.target.checked)} style={{ width:14, height:14 }} />
                              Obrigatória
                            </label>
                            <button onClick={()=>removePerg(di,pi)} title="Remover pergunta" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="close" size={13} /></button>
                          </div>
                          {tipo === 'scale' && (() => {
                            const { min, max } = escalaDe(p);
                            return (
                              <div style={{ display:'flex', gap:14, alignItems:'center', fontSize:12, color:'var(--escalab-slate)', paddingLeft:34, flexWrap:'wrap' }}>
                                <span style={{ fontWeight:600 }}>Escala:</span>
                                <label style={{ display:'flex', gap:5, alignItems:'center' }}>De
                                  <input type="number" min={0} max={9} value={min}
                                    onChange={e => { const v = Math.max(0, Math.min(9, Number(e.target.value))); updatePerg(di, pi, 'escalaMin', v); if (v >= max) updatePerg(di, pi, 'escalaMax', Math.min(10, v + 1)); }}
                                    style={{ width:50, border:'1px solid var(--escalab-line)', borderRadius:6, padding:'4px 6px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                                </label>
                                <label style={{ display:'flex', gap:5, alignItems:'center' }}>Até
                                  <input type="number" min={1} max={10} value={max}
                                    onChange={e => { const v = Math.max(1, Math.min(10, Number(e.target.value))); updatePerg(di, pi, 'escalaMax', v); if (v <= min) updatePerg(di, pi, 'escalaMin', Math.max(0, v - 1)); }}
                                    style={{ width:50, border:'1px solid var(--escalab-line)', borderRadius:6, padding:'4px 6px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, color:'var(--escalab-ink)' }} />
                                </label>
                                <span style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>· {max - min + 1} pontos</span>
                              </div>
                            );
                          })()}
                          {(tipo === 'single' || tipo === 'multi') && (
                            <div style={{ paddingLeft:34 }}>
                              {(p.opcoes||[]).map((o,oi) => (
                                <div key={oi} style={{ display:'flex', gap:6, alignItems:'center', marginBottom:5 }}>
                                  <div style={{ width:14, height:14, borderRadius: tipo==='multi' ? 3 : '50%', border:'2px solid var(--escalab-line)', flexShrink:0 }} />
                                  <input value={o} onChange={e=>updateOpcao(di,pi,oi,e.target.value)} style={{ flex:1, border:0, borderBottom:'1px solid var(--escalab-line)', outline:0, fontSize:12.5, fontFamily:'var(--font-sans)', padding:'2px 4px', color:'var(--escalab-ink)' }} />
                                  <button onClick={()=>removeOpcao(di,pi,oi)} title="Remover opção" style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:2 }}><Icon name="close" size={11} /></button>
                                </div>
                              ))}
                              <button onClick={()=>addOpcao(di,pi)} style={{ border:0, background:'transparent', cursor:'pointer', fontSize:12, color:'var(--escalab-brand)', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:4, marginTop:4, fontWeight:600 }}>
                                <Icon name="plus" size={11} /> Adicionar opção
                              </button>
                            </div>
                          )}
                          {tipo === 'file' && <div style={{ paddingLeft:34, fontSize:11.5, color:'var(--escalab-mute)', fontStyle:'italic' }}>O respondente vai poder anexar 1 arquivo.</div>}
                          {tipo === 'stars' && <div style={{ paddingLeft:34, fontSize:11.5, color:'var(--escalab-mute)', fontStyle:'italic' }}>Classificação de 1 a 5 estrelas.</div>}
                        </div>
                      );
                    })}
                    <button onClick={()=>addPerg(di)} style={{ border:'1px dashed var(--escalab-line)', borderRadius:8, padding:'6px 12px', cursor:'pointer', fontSize:12.5, fontFamily:'var(--font-sans)', color:'var(--escalab-brand)', background:'transparent', display:'flex', alignItems:'center', gap:5, alignSelf:'flex-start', fontWeight:600 }}>
                      <Icon name="plus" size={12} /> Adicionar pergunta
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
          {passo === 4 && (
            <div style={{ background:'var(--escalab-paper)', borderRadius:12, padding:'18px 20px' }}>
              {midia && (
                <div style={{ marginBottom:12 }}>
                  {midia.tipo === 'video'
                    ? <video src={midia.url} controls style={{ width:'100%', maxHeight:200, borderRadius:10, background:'#000' }} />
                    : <img src={midia.url} alt="" style={{ width:'100%', maxHeight:200, objectFit:'cover', borderRadius:10 }} />}
                </div>
              )}
              <div style={{ fontWeight:700, fontSize:15, marginBottom:4 }}>{titulo||'(sem título)'}</div>
              <div style={{ fontSize:13, color:'var(--escalab-mute)', marginBottom:12 }}>{dimensoes.length} categorias · {dimensoes.reduce((s,d)=>s+d.perguntas.length,0)} perguntas</div>
              {dimensoes.map(dim => (
                <div key={dim.id} style={{ marginBottom:10 }}>
                  <div style={{ fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--escalab-mute)', marginBottom:4 }}>{dim.titulo}</div>
                  {dim.perguntas.map(p => (
                    <div key={p.id} style={{ fontSize:13, color:'var(--escalab-slate)', paddingLeft:12, borderLeft:'2px solid var(--escalab-line)', marginBottom:4, lineHeight:1.4 }}>
                      {p.tipo==='opcoes'?'◉ ':p.tipo==='multipla'?'☑ ':p.tipo==='scale'?'⬡ ':p.tipo==='nome'?'👤 ':p.tipo==='email'?'✉ ':'📝 '}{p.texto}{p.obrigatoria && <span style={{ color:'#B3261E' }}> *</span>}
                      {(p.opcoes?.length>0) && <span style={{ color:'var(--escalab-mute)', fontSize:11 }}> ({p.opcoes.join(', ')})</span>}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={{ padding:'14px 26px', borderTop:'1px solid var(--escalab-line)', display:'flex', justifyContent:'space-between', flexShrink:0 }}>
          <Button variant="ghost" onClick={() => passo>1 ? setPasso(p=>p-1) : onClose()}>{passo>1?'← Voltar':'Cancelar'}</Button>
          <div style={{ display:'flex', gap:8 }}>
            {passo===4 && <Button variant="outline" onClick={()=>handleSalvar('rascunho')}>Salvar rascunho</Button>}
            <Button variant="primary" onClick={() => passo<4 ? setPasso(p=>p+1) : handleSalvar('ativa')} disabled={passo===1&&!titulo}>
              {passo<4?'Avançar →':'Publicar censo'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Helpers de respostas do Censo (chave por usuário) ─────────────────────
const CENSO_RESPOSTAS_KEY = 'escalab_censo_respostas';
function getRespostasCenso() { try { return JSON.parse(localStorage.getItem(CENSO_RESPOSTAS_KEY) || '[]'); } catch { return []; } }
function jaRespondeuCenso(censoId, colabId) {
  return getRespostasCenso().some(r => r.censoId === censoId && r.colaboradorId === colabId);
}
function salvarRespostaCenso(resp) {
  try {
    const arr = getRespostasCenso();
    // 1 resposta por usuário/censo (sobrescreve)
    const filtered = arr.filter(r => !(r.censoId === resp.censoId && r.colaboradorId === resp.colaboradorId));
    filtered.push({ ...resp, enviadaEm: new Date().toISOString() });
    localStorage.setItem(CENSO_RESPOSTAS_KEY, JSON.stringify(filtered));
  } catch {}
}

// ── View do colaborador: responder Censo ──────────────────────────────────
const CensoColaboradorView = ({ user }) => {
  const [pesquisas, setPesquisas] = useState(() => getCensoPesquisas());
  const ativas = pesquisas.filter(p => p.status === 'ativa');
  const [selecionada, setSelecionada] = useState(null);
  const [respostas, setRespostas] = useState({});
  const [enviado, setEnviado] = useState(false);
  const [erro, setErro] = useState('');

  function abrir(p) {
    setSelecionada(p);
    setRespostas({});
    setEnviado(false);
    setErro('');
  }

  function setResp(qid, val) {
    setRespostas(r => ({ ...r, [qid]: val }));
  }

  function respostaVaziaCenso(p, val) {
    const tipo = normalizarTipoPergunta(p.tipo);
    if (val === '__prefiro_nao_responder__') return false;
    if (val == null) return true;
    if (tipo === 'text')  return String(val).trim() === '';
    if (tipo === 'multi') return !Array.isArray(val) || val.length === 0;
    if (tipo === 'file')  return !val || !val.dataUrl;
    return false;
  }

  function enviar() {
    if (!selecionada) return;
    // No censo, a obrigatoriedade segue o flag p.obrigatoria. Quem nao quer
    // responder uma pergunta tem o botao "Prefiro nao responder".
    const faltando = selecionada.dimensoes.some(d => d.perguntas.some(q => {
      const obrigatoria = !!q.obrigatoria;
      return obrigatoria && respostaVaziaCenso(q, respostas[q.id]);
    }));
    if (faltando) { setErro('Responda todas as perguntas obrigatórias antes de enviar.'); return; }
    salvarRespostaCenso({ id: 'CR_' + Date.now(), censoId: selecionada.id, colaboradorId: user.id, respostas });
    setEnviado(true);
    setPesquisas(getCensoPesquisas());
  }

  if (selecionada && !enviado) {
    return (
      <div style={{ maxWidth: 720, animation: 'fadeIn .2s' }}>
        <button onClick={() => setSelecionada(null)} style={{ border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, color: 'var(--escalab-slate)', fontSize: 13, padding: 0, marginBottom: 16, fontFamily: 'var(--font-sans)', fontWeight:600 }}>
          <Icon name="chev_left" size={14} /> Voltar
        </button>

        <div style={{ background: 'linear-gradient(135deg, #6B3FA0 0%, #4A1A7A 100%)', color: '#fff', borderRadius: 14, padding: '20px 24px', marginBottom: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff' }}>Censo de Diversidade · {selecionada.ano}</div>
          <h3 style={{ margin: '4px 0 8px', fontSize: 20, fontWeight: 800, color: '#fff' }}>{selecionada.titulo}</h3>
          <p style={{ fontSize: 13.5, color: '#fff', fontWeight: 500, lineHeight: 1.55, margin: 0, textShadow: '0 1px 2px rgba(0,0,0,.18)' }}>Suas respostas são <strong style={{ fontWeight: 800 }}>anônimas e voluntárias</strong>. Servem para o GC entender melhor o time e construir políticas mais inclusivas. Você pode pular qualquer pergunta que prefira não responder.</p>
        </div>

        {selecionada.dimensoes.map(d => (
          <div key={d.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '18px 22px', marginBottom: 14 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#6B3FA0', marginBottom: 14 }}>{d.titulo}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {d.perguntas.map(q => {
                const tipo = normalizarTipoPergunta(q.tipo);
                const ehSensivel = tipo === 'single' || tipo === 'multi';
                return (
                  <div key={q.id}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--escalab-ink)', marginBottom: 10, lineHeight: 1.5 }}>
                      {q.texto} {q.obrigatoria && <span style={{ color:'#B3261E' }}>*</span>}
                    </div>
                    <InputPergunta p={q} valor={respostas[q.id]} onChange={v => setResp(q.id, v)} corDestaque="#6B3FA0" />
                    {/* Pra perguntas sensiveis (gender, raca, deficiencia), oferece a saida */}
                    {ehSensivel && (
                      <button type="button" onClick={() => setResp(q.id, '__prefiro_nao_responder__')} style={{ marginTop: 6, border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-slate)', fontSize: 12, textDecoration: 'underline', fontFamily: 'var(--font-sans)', padding: 4, fontWeight:600 }}>
                        {respostas[q.id] === '__prefiro_nao_responder__' ? '✓ Prefiro não responder' : 'Prefiro não responder'}
                      </button>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        {erro && <Banner tone="danger" style={{ marginBottom: 14 }}>{erro}</Banner>}

        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
          <Button variant="outline" onClick={() => setSelecionada(null)}>Cancelar</Button>
          <Button variant="primary" onClick={enviar}>Enviar resposta anônima</Button>
        </div>
      </div>
    );
  }

  if (enviado) {
    return (
      <div style={{ maxWidth: 540, textAlign: 'center', padding: '64px 20px', animation: 'fadeIn .25s' }}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'linear-gradient(135deg, #6B3FA0, #4A1A7A)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
          <Icon name="check" size={36} />
        </div>
        <h3 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 8px' }}>Obrigado por participar!</h3>
        <p style={{ fontSize: 14, color: 'var(--escalab-slate)', lineHeight: 1.55, maxWidth: 380, margin: '0 auto 24px' }}>
          Sua resposta foi registrada de forma <strong>anônima</strong>. O GC usa os dados agregados para construir um Escalab mais inclusivo.
        </p>
        <Button variant="outline" onClick={() => { setSelecionada(null); setEnviado(false); }}>Ver outros censos</Button>
      </div>
    );
  }

  return (
    <div style={{ animation: 'fadeIn .2s', maxWidth: 720 }}>
      <div style={{ background: 'linear-gradient(135deg, #F4EEFF 0%, #ECDCFE 100%)', border: '1px solid #C9A0E8', borderRadius: 14, padding: '20px 24px', marginBottom: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: '#6B3FA0', marginBottom: 6 }}>Por que participar</div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: '#4A1A7A', marginBottom: 6 }}>O Censo é como o time olha pra si mesmo</div>
        <div style={{ fontSize: 13, color: '#4A1A7A', lineHeight: 1.6 }}>
          As respostas são <strong>anônimas</strong> e ajudam o GC a entender a composição do Escalab em diversidade de gênero, raça, idade e formação. Você pode pular qualquer pergunta que preferir não responder.
        </div>
      </div>

      {ativas.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '48px 20px', color: 'var(--escalab-mute)', background: '#fff', border: '2px dashed var(--escalab-line)', borderRadius: 14 }}>
          <Icon name="info" size={28} />
          <div style={{ marginTop: 10, fontSize: 14 }}>Nenhum censo aberto no momento.</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>Quando o GC abrir um novo censo, ele aparecerá aqui.</div>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {ativas.map(p => {
            const ja = jaRespondeuCenso(p.id, user.id);
            const nPerguntas = (p.dimensoes || []).reduce((s, d) => s + d.perguntas.length, 0);
            return (
              <div key={p.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '18px 22px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ flex: 1, minWidth: 240 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 4 }}>{p.titulo}</div>
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', fontSize: 12, color: 'var(--escalab-mute)' }}>
                    <span><Icon name="clipboard" size={11} /> {nPerguntas} pergunta{nPerguntas !== 1 ? 's' : ''}</span>
                    <span>·</span>
                    <span><Icon name="lock" size={11} /> Anônimo</span>
                    {p.ano && <><span>·</span><span>Ano: {p.ano}</span></>}
                  </div>
                </div>
                {ja ? (
                  <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 700, background: '#E6F5F1', color: '#00836B', border: '1px solid #A3D9CE', borderRadius: 8, padding: '6px 14px' }}>
                    <Icon name="check" size={12} /> Já respondido
                  </span>
                ) : (
                  <Button variant="primary" onClick={() => abrir(p)}>Responder</Button>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// ── Tab: Censo de Diversidade ─────────────────────────────────────────────────

const CensoDiversidade = ({ user }) => {
  // Resultado do censo é confidencial — somente admin (G&C) tem acesso.
  // Demais perfis caem direto no formulário de resposta.
  if (user?.perfil !== 'admin') {
    return <CensoColaboradorView user={user} />;
  }
  const isAdmin = true;
  // So compara anos com dados reais em CENSO_DADOS. Censo 2025 nao foi feito.
  const anosCenso = Object.keys(CENSO_DADOS).map(Number).sort();
  const temDadosCenso = anosCenso.length > 0;
  const anoCensoRecente = anosCenso[anosCenso.length - 1];
  const anoCensoAnterior = anosCenso[anosCenso.length - 2] || anoCensoRecente;
  const [anoA, setAnoA] = useState(anoCensoAnterior);
  const [anoB, setAnoB] = useState(anoCensoRecente);
  const [abaCenso, setAbaCenso] = useState('comparativo');
  const [censoPesquisas, setCensoPesquisas] = useState(getCensoPesquisas);
  const [modalCenso, setModalCenso] = useState(false);
  const [editandoCenso, setEditandoCenso] = useState(null);
  const modelosCenso = censoPesquisas.filter(p => p.isModelo || p.status === 'modelo');

  const dadosA = CENSO_DADOS[anoA];
  const dadosB = CENSO_DADOS[anoB];

  function salvarCenso(nova) {
    setCensoPesquisas(prev => {
      const idx = prev.findIndex(p => p.id === nova.id);
      const n = idx >= 0 ? prev.map((p,i) => i===idx ? nova : p) : [...prev, nova];
      salvarCensoPesquisas(n);
      return n;
    });
  }

  // Barra horizontal estilo painel: 2 linhas grossas (ano A e ano B) com
  // labels claros, valor absoluto + % e delta no fim.
  const DonutBar = ({ label, valA, valB, tot, cor }) => {
    const totA = tot || 1; // mesmo total como base de comparação
    const pctA = Math.round((valA / totA) * 100);
    const pctB = Math.round((valB / totA) * 100);
    const diff = valB - valA;
    const maxPct = Math.max(pctA, pctB, 1);
    const wA = (pctA / Math.max(maxPct, 10)) * 100; // largura relativa ao maior, mas com piso pra evitar zerar
    const wB = (pctB / Math.max(maxPct, 10)) * 100;
    return (
      <div style={{ padding: '10px 0', borderBottom: '1px solid var(--escalab-line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <div style={{ width: 10, height: 10, borderRadius: 3, background: cor, flexShrink: 0 }} />
          <span style={{ fontSize: 13, color: 'var(--escalab-ink)', fontWeight: 600, flex: 1 }}>{label}</span>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: diff > 0 ? '#00836B' : diff < 0 ? '#B3261E' : 'var(--escalab-mute)', background: diff > 0 ? '#E6F5F1' : diff < 0 ? '#FDECEC' : 'var(--escalab-paper)', padding: '2px 8px', borderRadius: 999 }}>
            {diff > 0 ? '+' : ''}{diff}
          </span>
        </div>
        {/* Ano A */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--escalab-mute)', minWidth: 36 }}>{anoA}</span>
          <div style={{ flex: 1, height: 16, background: 'var(--escalab-paper)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: wA + '%', height: '100%', background: '#1F4A8A55', borderRadius: 999, transition: 'width .4s', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', paddingRight: 8 }}>
              {wA > 18 && <span style={{ fontSize: 10.5, fontWeight: 700, color: '#fff' }}>{valA} ({pctA}%)</span>}
            </div>
          </div>
          {wA <= 18 && <span style={{ fontSize: 11, fontWeight: 700, color: '#1F4A8A', minWidth: 50 }}>{valA} ({pctA}%)</span>}
        </div>
        {/* Ano B */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, color: cor, minWidth: 36 }}>{anoB}</span>
          <div style={{ flex: 1, height: 16, background: 'var(--escalab-paper)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: wB + '%', height: '100%', background: cor, borderRadius: 999, transition: 'width .4s', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', paddingRight: 8 }}>
              {wB > 18 && <span style={{ fontSize: 10.5, fontWeight: 700, color: '#fff' }}>{valB} ({pctB}%)</span>}
            </div>
          </div>
          {wB <= 18 && <span style={{ fontSize: 11, fontWeight: 700, color: cor, minWidth: 50 }}>{valB} ({pctB}%)</span>}
        </div>
      </div>
    );
  };

  // Tabs do admin: Comparativo (resultado) + Pesquisas (cria/edita/encerra)
  const tabsCenso = [
    { id:'comparativo', label:'Comparativo', icon:'chart' },
    { id:'pesquisas',   label:'Pesquisas de Censo', icon:'clipboard' },
  ];

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10 }}>
        <Tabs tabs={tabsCenso} active={abaCenso} onChange={setAbaCenso} />
        {isAdmin && abaCenso === 'pesquisas' && (
          <Button size="sm" variant="primary" icon="plus" onClick={() => { setEditandoCenso(null); setModalCenso(true); }}>Novo censo</Button>
        )}
      </div>

      {/* Aba: Comparativo histórico */}
      {abaCenso === 'comparativo' && !temDadosCenso && (
        <div style={{ textAlign:'center', padding:'48px 24px', color:'var(--escalab-mute)', background:'#fff', border:'2px dashed var(--escalab-line)', borderRadius:12 }}>
          <Icon name="chart" size={28} />
          <div style={{ fontSize:14, fontWeight:600, marginTop:10, color:'var(--escalab-slate)' }}>Nenhum censo importado ainda</div>
          <div style={{ fontSize:12.5, marginTop:6 }}>O comparativo histórico aparece aqui assim que houver pelo menos um ano com dados em CENSO_DADOS. Para coletar dados novos, use a aba "Pesquisas de Censo".</div>
        </div>
      )}
      {abaCenso === 'comparativo' && temDadosCenso && (!dadosA || !dadosB) && (
        <div style={{ textAlign:'center', padding:'36px 24px', color:'var(--escalab-mute)', background:'#fff', border:'2px dashed var(--escalab-line)', borderRadius:12 }}>
          <div style={{ fontSize:13 }}>É preciso ter pelo menos 2 anos com dados em CENSO_DADOS pra fazer o comparativo. Hoje só temos: {anosCenso.join(', ')}.</div>
        </div>
      )}
      {abaCenso === 'comparativo' && dadosA && dadosB && (
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          {/* Seletor de anos */}
          <div style={{ display:'flex', gap:12, alignItems:'center', flexWrap:'wrap' }}>
            <span style={{ fontSize:12.5, color:'var(--escalab-mute)' }}>Comparar:</span>
            <select value={anoA} onChange={e => setAnoA(Number(e.target.value))} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
              {anosCenso.map(a => <option key={a}>{a}</option>)}
            </select>
            <span style={{ color:'var(--escalab-mute)' }}>vs</span>
            <select value={anoB} onChange={e => setAnoB(Number(e.target.value))} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
              {anosCenso.map(a => <option key={a}>{a}</option>)}
            </select>
            <div style={{ display:'flex', gap:10, marginLeft:'auto', fontSize:11.5, color:'var(--escalab-mute)' }}>
              <span style={{ display:'flex', alignItems:'center', gap:5 }}><div style={{ width:10, height:4, background:'#1F4A8A80', borderRadius:2 }} />{anoA}</span>
              <span style={{ display:'flex', alignItems:'center', gap:5 }}><div style={{ width:10, height:4, background:'var(--escalab-brand)', borderRadius:2 }} />{anoB}</span>
            </div>
          </div>

          {/* KPIs comparativos */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }}>
            {[
              { label:'Mulheres', keyA:dadosA.mulheres, keyB:dadosB.mulheres, cor:'#E89B3B', bg:'#FFF7EB' },
              { label:'LGBT+',    keyA:dadosA.lgbt,     keyB:dadosB.lgbt,     cor:'#6B3FA0', bg:'#F4EEFF' },
              { label:'Negros/Pardos', keyA:dadosA.negros, keyB:dadosB.negros, cor:'#1F4A8A', bg:'#EEF3FA' },
              { label:'PCD',      keyA:dadosA.pcd,      keyB:dadosB.pcd,      cor:'#005E4D', bg:'#E6F5F1' },
            ].map(k => {
              const diff = k.keyB - k.keyA;
              return (
                <div key={k.label} style={{ background:k.bg, border:`1px solid ${k.cor}30`, borderRadius:12, padding:'16px 18px', textAlign:'center' }}>
                  <div style={{ display:'flex', justifyContent:'center', gap:8, alignItems:'baseline', lineHeight:1 }}>
                    <span style={{ fontSize:26, fontWeight:800, color:k.cor }}>{k.keyB}</span>
                    <span style={{ fontSize:13, fontWeight:600, color:diff>0?'#00836B':diff<0?'#B3261E':'var(--escalab-mute)' }}>{diff>0?'+':''}{diff}</span>
                  </div>
                  <div style={{ fontSize:11, color:'var(--escalab-mute)', marginTop:4 }}>{k.label}</div>
                  <div style={{ fontSize:11, color:k.cor, marginTop:2 }}>{Math.round(k.keyB/dadosB.total*100)}% do time</div>
                </div>
              );
            })}
          </div>

          {/* Comparativo detalhado */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            {[
              { titulo:'Quadro Geral', grupos:[{label:'Mulheres',cor:'#E89B3B',vA:dadosA.mulheres,vB:dadosB.mulheres},{label:'LGBT+',cor:'#6B3FA0',vA:dadosA.lgbt,vB:dadosB.lgbt},{label:'Negros/Pardos',cor:'#1F4A8A',vA:dadosA.negros,vB:dadosB.negros},{label:'PCD',cor:'#005E4D',vA:dadosA.pcd,vB:dadosB.pcd}], tot:dadosB.total },
              { titulo:'Lideranças', grupos:[{label:'Mulheres',cor:'#E89B3B',vA:dadosA.liderancas.mulheres,vB:dadosB.liderancas.mulheres},{label:'LGBT+',cor:'#6B3FA0',vA:dadosA.liderancas.lgbt,vB:dadosB.liderancas.lgbt},{label:'Negros/Pardos',cor:'#1F4A8A',vA:dadosA.liderancas.negros,vB:dadosB.liderancas.negros},{label:'PCD',cor:'#005E4D',vA:dadosA.liderancas.pcd,vB:dadosB.liderancas.pcd}], tot:COLABORADORES.filter(c=>c.nivel!=='liderado').length },
            ].map(q => (
              <div key={q.titulo} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'18px 20px' }}>
                <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:12 }}>{q.titulo}</div>
                {q.grupos.map(g => <DonutBar key={g.label} label={g.label} valA={g.vA} valB={g.vB} tot={q.tot} cor={g.cor} />)}
              </div>
            ))}
          </div>

          {/* Distribuições por categoria */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            {[
              { titulo:'Gênero', dadosA:dadosA.genero, dadosB:dadosB.genero, cores:['#E89B3B','#1F4A8A','#D97757','#0066A1','#6B3FA0','#00967B','#7A8590'] },
              { titulo:'Cor e Raça', dadosA:dadosA.raca, dadosB:dadosB.raca, cores:['#C8CDD4','#1F4A8A','#4A5560','#E89B3B','#00967B','#6B3FA0'] },
              { titulo:'Faixa Etária', dadosA:dadosA.faixa_etaria, dadosB:dadosB.faixa_etaria, cores:['#1F4A8A','#00967B','#6B3FA0','#E89B3B','#B3261E'] },
              { titulo:'Escolaridade', dadosA:dadosA.escolaridade, dadosB:dadosB.escolaridade, cores:['#1F4A8A','#00967B','#6B3FA0','#005E4D','#E89B3B','#B3261E','#7A0000'] },
              { titulo:'Distribuição por Cargo', dadosA:dadosA.cargo || {}, dadosB:dadosB.cargo || {}, cores:['#1F4A8A','#00836B','#6B3FA0','#E89B3B','#4A5560'] },
            ].map(g => (
              <div key={g.titulo} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'18px 20px' }}>
                <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', marginBottom:12 }}>{g.titulo}</div>
                {Object.keys(g.dadosB).map((k,i) => (
                  <DonutBar key={k} label={k} valA={g.dadosA[k]||0} valB={g.dadosB[k]||0} tot={dadosB.total} cor={g.cores[i]||'#CCC'} />
                ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Aba: Pesquisas de Censo */}
      {abaCenso === 'pesquisas' && (
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          {censoPesquisas.length === 0 ? (
            <div style={{ textAlign:'center', padding:'32px', color:'var(--escalab-mute)', border:'2px dashed var(--escalab-line)', borderRadius:12 }}>
              Nenhuma pesquisa de censo criada ainda.
              {isAdmin && <div style={{ marginTop:12 }}><Button variant="primary" icon="plus" onClick={() => setModalCenso(true)}>Criar primeiro censo</Button></div>}
            </div>
          ) : (
            censoPesquisas.map(p => (
              <div key={p.id} style={{ background:'#fff', border:'1px solid var(--escalab-line)', borderRadius:12, padding:'16px 20px', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10 }}>
                <div>
                  <div style={{ fontSize:14, fontWeight:600, color:'var(--escalab-ink)', marginBottom:4 }}>{p.titulo}</div>
                  <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                    <StatusBadge status={p.status} />
                    <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>{p.dimensoes?.length||0} categorias · {p.dimensoes?.reduce((s,d)=>s+d.perguntas.length,0)||0} perguntas</span>
                    {p.criadaEm && <span style={{ fontSize:12, color:'var(--escalab-mute)' }}>Criado: {p.criadaEm}</span>}
                  </div>
                </div>
                {isAdmin && (
                  <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                    <Button size="sm" variant="outline" icon="settings" onClick={() => { setEditandoCenso(p); setModalCenso(true); }}>Editar</Button>
                    {p.status === 'ativa' && (
                      <button onClick={() => { if (window.confirm(`Encerrar o censo "${p.titulo}"? Ninguém vai conseguir responder depois.`)) salvarCenso({ ...p, status: 'encerrada', encerradaEm: new Date().toISOString().slice(0,10) }); }} style={{ border:'1px solid #F4C7C3', background:'#FDECEC', color:'#B3261E', borderRadius:8, padding:'6px 12px', cursor:'pointer', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:5 }}>
                        <Icon name="lock" size={12} /> Encerrar
                      </button>
                    )}
                    {p.status === 'encerrada' && (
                      <button onClick={() => { if (window.confirm(`Reabrir o censo "${p.titulo}"?`)) salvarCenso({ ...p, status: 'ativa' }); }} style={{ border:'1px solid #B5E3D7', background:'#E6F5F1', color:'#00836B', borderRadius:8, padding:'6px 12px', cursor:'pointer', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:5 }}>
                        <Icon name="check" size={12} /> Reabrir
                      </button>
                    )}
                    <Button size="sm" variant="ghost" icon="clipboard" onClick={() => { const copia = {...JSON.parse(JSON.stringify(p)), id:`censo_${Date.now()}`, titulo:`${p.titulo} (cópia)`, status:'rascunho', criadaEm:new Date().toISOString().slice(0,10), respostas:[]}; salvarCenso(copia); }}>Duplicar</Button>
                  </div>
                )}
              </div>
            ))
          )}
        </div>
      )}

      {/* Modal criar censo */}
      {modalCenso && (
        <ModalCriarCenso
          onClose={() => { setModalCenso(false); setEditandoCenso(null); }}
          onSalvar={salvarCenso}
          pesquisaBase={editandoCenso}
          modelos={modelosCenso}
        />
      )}
    </div>
  );
};

// ── Tela Principal ────────────────────────────────────────────────────────────

const ScreenPCO = ({ user }) => {
  // Colaborador / gestor / financeiro: tela de resposta da PCO
  if (user?.perfil !== 'admin') {
    return (
      <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Gestão de Pessoas · Pesquisas</div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>PCO · Clima Organizacional</h2>
          <p style={{ fontSize: 13, color: 'var(--escalab-slate)', margin: '4px 0 0' }}>Percepção dos colaboradores sobre o clima organizacional</p>
          <p style={{ fontSize: 12, color: 'var(--escalab-mute)', margin: '6px 0 0', fontStyle: 'italic' }}>A pesquisa não é necessariamente anônima: você pode colocar seu nome apenas se quiser.</p>
        </div>
        <PCOColaboradorView user={user} />
      </div>
    );
  }

  const [aba, setAba] = useState('pesquisas');
  const [filtroSetor, setFiltroSetor] = useState('');
  const [filtroCargo, setFiltroCargo] = useState('');
  const setoresUnicos = [...new Set(COLABORADORES.map(c => c.setor))].sort();
  const cargosUnicos  = [...new Set(COLABORADORES.map(c => c.cargo.replace(/ [IVX]+$/, '')))].sort();

  const tabs = [
    { id:'pesquisas',    label:'Pesquisas',          icon:'clipboard'  },
    { id:'visao_geral',  label:'Dashboard Geral',    icon:'chart'      },
    { id:'perguntas',    label:'Análise por Pergunta', icon:'search'   },
    { id:'qualitativos', label:'Dados Qualitativos', icon:'message'    },
  ];

  return (
    <div style={{ animation:'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:20, flexWrap:'wrap', gap:12 }}>
        <div>
          <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--escalab-brand)', marginBottom:4 }}>Gestão de Pessoas</div>
          <h2 style={{ fontSize:22, fontWeight:700, margin:0 }}>Pesquisa de Clima Organizacional</h2>
          <p style={{ fontSize:13, color:'var(--escalab-slate)', margin:'4px 0 0' }}>Crie, gerencie e analise pesquisas de clima · dados de 2024 a 2026</p>
        </div>
      </div>

      {/* Filtros globais (setor e cargo) */}
      {(aba === 'visao_geral' || aba === 'perguntas') && (
        <div style={{ display:'flex', gap:10, marginBottom:16, flexWrap:'wrap', alignItems:'center' }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12.5, color:'var(--escalab-mute)' }}><Icon name="filter" size={13} /> Filtros:</div>
          <select value={filtroSetor} onChange={e => setFiltroSetor(e.target.value)}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
            <option value="">Todos os setores</option>
            {setoresUnicos.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <select value={filtroCargo} onChange={e => setFiltroCargo(e.target.value)}
            style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:0, background:'#fff' }}>
            <option value="">Todos os cargos</option>
            {cargosUnicos.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          {(filtroSetor || filtroCargo) && (
            <button onClick={() => { setFiltroSetor(''); setFiltroCargo(''); }} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', fontSize:12.5, fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:4 }}>
              <Icon name="close" size={12} /> Limpar
            </button>
          )}
        </div>
      )}

      <Tabs tabs={tabs} active={aba} onChange={setAba} />
      <div style={{ paddingTop:22 }}>
        {aba === 'pesquisas'    && <PesquisasTab    user={user} filtroSetor={filtroSetor} filtroCargo={filtroCargo} />}
        {aba === 'visao_geral'  && <PCOVisaoGeral   filtroSetor={filtroSetor} filtroCargo={filtroCargo} />}
        {aba === 'perguntas'    && <PCOAnalisePerguntas filtroSetor={filtroSetor} filtroCargo={filtroCargo} />}
        {aba === 'qualitativos' && <PCOQualitativos />}
      </div>
    </div>
  );
};

window.ScreenPCO = ScreenPCO;