/* ============================================
   ECOSSISTEMA MUVUKA — Design System v2
   Dark theme · Figtree · Amber accents
   ============================================ */


:root {
  /* TDR-2685 (Alexandre, 24/ago/26) — A LINHA QUE FALTAVA HÁ MESES.
     `color-scheme: dark` avisa o NAVEGADOR que a página é escura. Sem ela, tudo que o
     navegador pinta sozinho (a lista aberta de um <select>, o calendário de <input
     type=date>, a barra de rolagem, o preenchimento automático) sai no tema CLARO do
     sistema — e o `color:` que a gente declara é herdado por dentro. Resultado: texto
     branco sobre fundo branco na lista do dropdown, invisível.
     Não dá para pegar isso revisando a tela: a lista aberta do <select> é desenhada pelo
     sistema operacional, não existe no DOM, nenhum revisor visual a enxerga. Por isso o
     conserto mora aqui, na raiz, e a trava é de código (sync/conferir-color-scheme.mjs).
     Uma linha aqui conserta TODOS os controles nativos da página de uma vez. */
  color-scheme: dark;

  --bg-base: #0B0F14;
  /* TDR-65: --bg-page era usada em ~20 pontos (selects/inputs) mas nunca foi definida —
     background caía em transparent e os dropdowns ficavam ilegíveis conforme o fundo.
     Valor = o fallback que o próprio código já declarava (var(--bg-page,#0F141B)). */
  --bg-page: #0F141B;
  --bg-surface: #111820;
  --bg-card: #161D27;
  --bg-card-hover: #1A2332;
  --bg-elevated: #1E2736;
  --bg-sidebar: #090D12;
  --border: #1E2A38;
  --border-light: #2A3A4E;

  --text: #E8ECF1;
  --text-secondary: #7B8A9E;
  /* @trava TDR-2437 — O CINZA APAGADO ERA METADE DO MÍNIMO LEGÍVEL (Vênus, 20/ago/26).
     `--text-muted` valia #4A5568: medido no Chrome do Alexandre, dá **2,25** de contraste sobre o
     fundo #161D27, contra o mínimo 4,5 da WCAG AA. O inventário da identidade descrevia o token
     como "placeholder / desativado" — mas na prática ele estava em ~40 telas carregando rótulo de
     formulário, legenda e instrução, que são texto para LER. No modal de priorizar da Pré-Seleção,
     8 de 22 elementos reprovavam, incluindo o × de fechar, que é alvo de clique.
     Clarear o token conserta as 40 telas de uma vez; caçar arquivo por arquivo deixaria o problema
     renascer na tela seguinte. O cinza antigo continua existindo como `--text-disabled`, para o que
     é de fato desativado — aí 2,25 é intencional, e a WCAG isenta controle nesse estado. */
  --text-muted: #7B8A9E;
  --text-disabled: #4A5568;
  --text-bright: #FFFFFF;

  /* Acento = LARANJA da paleta oficial da marca (MANUAL §69), o mesmo das sementes
     do logo. Substitui o âmbar #E8972C, que era cor do PRODUTO e não existe na
     paleta da marca. Contraste medido: 6,2–7,2 sobre os fundos escuros do app. */
  --accent: #F37C20;
  --accent-light: #F5964C;
  --accent-dim: rgba(243,124,32,.12);
  --accent-glow: rgba(243,124,32,.25);
  /* TDR-3336 (31/ago/26) — TINTA SOBRE O ACENTO. O marrom quase preto que se usa como TEXTO
     quando o fundo é o laranja da marca (ou o amarelo): branco sobre `--accent` não passa no
     contraste, e este tom mede 9,4:1. Já vivia solto em quatro lugares deste arquivo e nascia
     de novo em cada módulo com chip laranja; virou token para não brotar cor solta a cada
     página nova (§488: paleta diferente não é licença para cor solta). */
  --on-accent: #1a1206;

  --primary: #2E9E5A;
  /* TDR-2437b — SUPERFÍCIE DE BOTÃO COM TEXTO BRANCO (Vênus, 20/ago/26).
     Branco sobre `--primary` (#2E9E5A) mede 3,41 — abaixo do mínimo 4,5 para texto pequeno. Foi o
     último elemento a reprovar no modal, e é justamente o botão que confirma a ação. `--primary`
     continua sendo a cor da marca para texto, borda e ícone sobre fundo escuro; quando ele vira
     FUNDO de um controle com rótulo branco, usa-se este tom escurecido (5,33). */
  --primary-deep: #227A46;
  --primary-light: #3DBB6E;
  --primary-dim: rgba(46,158,90,.12);

  --blue: #4A9EF5;
  --blue-dim: rgba(74,158,245,.12);
  --purple: #9B6FE8;
  --purple-dim: rgba(155,111,232,.12);
  --red: #E85454;
  --red-dim: rgba(232,84,84,.12);
  --cyan: #34B8C8;
  --cyan-dim: rgba(52,184,200,.12);
  --yellow: #E8C94A;
  --lime: #B5D14F;
  --lime-dim: rgba(181,209,79,.14);
  /* TIPO DE AÇÃO do CRM (Alexandre, 12/ago/26) — família TERROSA, tirada da paleta da MARCA
     (terracota, terra, laranja queimado, ocre, oliva), e não da paleta de estado do produto
     (verde/azul/vermelho, que já é do Funil). Assim a tag de Tipo se distingue da tag de Funil
     pela FAMÍLIA de cor, não só pelo formato. Ele pediu "cores mais escuras": estes são os tons
     mais escuros que ainda passam de 4,5:1 sobre o fundo escuro do app — abaixo disso a tag
     deixa de ser legível na tela. Na versão para papel/creme, usar os hex da marca direto. */
  /* Alexandre 12/ago/26 — cores nomeadas por ele: Msg vermelho, Fup roxo, Reuniao azul,
     Visita azul (mesmo azul da Reuniao, a pedido: os dois sao encontro ao vivo). Task nao
     foi citada e fica no verde-oliva, que e a unica que sobra sem colidir. */
  --tipo-msg: var(--red);
  --tipo-fup: var(--purple);
  --tipo-reuniao: var(--blue);
  --tipo-task: #A9B96A;     /* oliva */
  --tipo-visita: var(--blue);
  /* MARCA — par terracota/ocre (TDR-1999, 12/ago/26). Nasceu solto na newsletter e travou
     o build; virou token porque e cor da MARCA e vai reaparecer (filtro ativo, destaque,
     selo). Mesmos hexes de antes: nomear nao mudou um pixel na tela. */
  --terracota: #591F16;         /* fundo/borda de estado ativo na familia da marca */
  --azul-noite: #123A4D;        /* agua — paleta oficial; SUPERFICIE, nunca tinta no escuro */
  --creme: #FBF6EC;             /* papel — tinta sobre as superficies escuras da marca */
  --ocre: #E4B463;              /* texto sobre o terracota */

  /* PUBLICACAO — paleta oficial "Noite na Roca" da MARCA (docs/comunicacao/identidade-visual.md,
     MANUAL Sec.92). A publicacao e peca de MARCA, nao UI de dashboard: a folha e creme FIXO e nao
     segue o tema escuro, do mesmo jeito que a folha do caderno (--papel-*). Os hexes moram aqui
     como token porque js/modules/*.js nao pode ter cor solta (trava sync/conferir-design.mjs).
     As 4 travas de contraste da marca: laranja e ocre NUNCA sao texto sobre claro; os dois
     quentes nao se encostam em texto corrido; verde claro e superficie, nunca tinta. */
  --pub-vinho:       #591F16;   /* terracota escurecido — base / disco */
  --pub-floresta:    #14432F;   /* verde noite — floresta */
  --pub-agua:        #123A4D;   /* azul noite — agua */
  --pub-terracota:   #A93726;   /* terracota claro — tinta sobre fundo claro */
  --pub-laranja:     #F37C20;   /* acao — nunca texto sobre claro */
  --pub-ocre:        #E4B463;   /* tinta sobre fundo escuro — nunca texto sobre claro */
  --pub-verde-claro: #8FB98A;   /* superficie, nao tinta */
  --pub-creme:       #FBF6EC;   /* papel */
  /* TINTA NEUTRA — pedido do Alexandre em 07/set/26: "o texto sem negrito precisa estar em preto,
     pq ficou ruim de ler com ele em terracota". O `--pub-tinta-2` e terracota rebaixado: funciona
     em titulo e destaque, cansa em paragrafo longo. Para CORPO DE TEXTO sobre papel claro, usar
     estes dois. Nao substituem `--pub-tinta-2` no resto da publicacao: o terracota continua sendo
     a tinta da marca em titulo, rotulo e numero. */
  --pub-tinta-preta:   #1C1917;              /* corpo de texto sobre papel — quase preto, morno */
  --pub-tinta-preta-2: rgba(28,25,23,.72);   /* secundario, legenda, rodape */
  /* MAPA TEMATICO — 3 derivados para quando a paleta nao da conta da legenda (TDR-3469).
     O mapa da bacia do Paraiba do Sul tem SETE unidades de planejamento oficiais e a marca tem
     quatro cores de superficie. Em vez de importar cor de fora, estes tres saem de MISTURA das
     cores da propria marca — nenhum hex novo entra na identidade, so combinacao das que existem.
     Sao de uso exclusivo de legenda categorica em mapa: nunca viram tinta de texto. */
  --pub-agua-clara:  #6F858C;   /* 60% azul noite + 40% creme */
  --pub-agua-verde:  #50796B;   /* 50% azul noite + 50% verde claro */
  --pub-verde-palido:#C0D4B6;   /* 55% verde claro + 45% creme */
  /* derivados da folha (so superficie e linha — nenhuma cor nova da marca) */
  --pub-papel:       #FBF6EC;
  --pub-papel-2:     #F3ECDD;   /* faixa/superficie sutil sobre o creme */
  --pub-linha:       rgba(89,31,22,.16);
  --pub-linha-forte: rgba(89,31,22,.34);
  --pub-tinta-2:     rgba(89,31,22,.62);
  --pub-tinta-3:     rgba(89,31,22,.40);
  --pub-ph-bg:       rgba(89,31,22,.05);   /* caixa de imagem a definir */
  --pub-ph-linha:    rgba(89,31,22,.13);   /* hachura da caixa */
  --pub-barra:       rgba(89,31,22,.13);   /* barra que finge linha de texto */
  --pub-sombra:      0 10px 34px rgba(0,0,0,.34);
  /* A MARCA NO ESCURO (TDR-3336, 31/ago/26) — os derivados da paleta oficial quando a
     superfície é NOTURNA (floresta, água, vinho) em vez de papel creme. A publicação usa
     tinta de vinho sobre creme; a página Funding faz o inverso, tinta de creme sobre o verde
     noite. Só alpha do creme: nenhuma cor nova entra na marca. Contraste medido sobre
     `--pub-floresta`: creme 10,4 · ocre 5,9 · verde claro 5,1 · laranja 4,1 (por isso o
     laranja fica em preenchimento, borda e número grande, nunca em texto pequeno). */
  --pub-creme-2:     rgba(251,246,236,.74);  /* texto secundário sobre superfície noturna */
  --pub-creme-3:     rgba(251,246,236,.52);  /* texto apagado sobre superfície noturna */
  --pub-linha-noite: rgba(251,246,236,.14);
  --pub-linha-noite-forte: rgba(251,246,236,.28);
  --pub-veu-noite:   rgba(251,246,236,.07);  /* superfície sutil sobre o verde noite */
  /* ESTADO em etiqueta (verde = ativo/ok, salmao = saiu/encerrado). O -dim e o fundo
     translucido da propria cor — alpha de proposito, nao e hex solto. */
  --estado-ok: #7fc8a0;
  --estado-ok-dim: rgba(120,200,150,.16);
  --estado-saiu: #e0967a;
  --estado-saiu-dim: rgba(230,150,120,.16);
  --chan-ig: #E1306C;   /* Instagram (rosa) — filtro do Calendário Editorial (TDR-1341) */
  --chan-ig-dim: rgba(225,48,108,.14);
  --chan-li: #4A9EF5;   /* LinkedIn (azul) — filtro do Calendário Editorial */
  --chan-li-dim: rgba(74,158,245,.12);

  /* PALETA PAPEL (TDR-1414/1417) — superfície CLARA para páginas de LEITURA LONGA (Insights).
     Por que existe: o dashboard inteiro é escuro, mas texto corrido de várias telas cansa menos
     em fundo claro. Em vez de deixar a página nascer com hex solto (foi o que travou o build em
     27/jul), a paleta virou TOKEN — quem precisar de superfície de leitura reusa estes nomes.
     NÃO usar em telas operacionais (kanban, tabelas, cards) — essas seguem a paleta escura. */
  --papel-bg: #FDFCF9;          /* fundo da página de leitura */
  --papel-surface: #FBFAF6;     /* cartão/campo sobre o fundo */
  --papel-border: #E7E5DD;      /* borda padrão */
  --papel-border-strong: #DAD6CA; /* borda em hover */
  --papel-text: #1F2421;        /* texto principal */
  --papel-text-secondary: #6B7269;
  --papel-text-muted: #9A9E96;
  --papel-tag-text: #9A6B1E;    /* etiqueta/kicker */
  --papel-tag-bg: #F7F0E1;
  --papel-tag-border: #E3C489;
  --papel-accent-hover: #C79A3A;
  --papel-shadow: 0 3px 14px rgba(31,36,33,.05);
  --papel-arq: #3F7D4E;         /* trilha Arquitetura */
  --papel-dad: #185FA5;         /* trilha Dados */
  --papel-chip-bg: #F5F3EC;     /* etiqueta neutra sobre papel */
  --papel-chip-text: #8A6A33;
  --papel-divider: #ECE7DB;     /* linha divisória interna do card */
  --papel-arq-bg: #E1F5EE;      /* etiqueta da trilha Arquitetura */
  --papel-arq-text: #2F6B45;
  --papel-dad-bg: #E6F1FB;      /* etiqueta da trilha Dados */

  /* PAPEL — DOCUMENTO (27/ago/26, página IDIS Filantropia). A folha branca sobre o dashboard
     escuro precisa de duas coisas que a paleta de leitura não tinha: a TERRACOTA da marca em
     versão papel (título de seção, link) e a SOMBRA que faz a folha flutuar. Sombra de leitura
     (--papel-shadow) é rasa de propósito; aqui a folha está sobre fundo escuro e some sem relevo. */
  --papel-marca: #8C4A2F;
  --papel-shadow-folha: 0 10px 34px rgba(0,0,0,.34);
  /* ETIQUETAS QUE NASCEM NO USO — o Alexandre inventa a tag no meio do evento e a cor sai por
     hash do nome (sem cadastro). Por isso a paleta é FECHADA e nomeada: 7 tons escuros que passam
     de 4,5:1 sobre a folha clara. Fundo e borda saem por color-mix da própria cor, para uma tag
     nova não exigir três tokens novos. */
  --papel-et-0: var(--papel-marca);  /* terracota */
  --papel-et-1: #1F6F5C;             /* verde-mata */
  --papel-et-2: #2F5D8C;             /* azul-noite claro */
  --papel-et-3: #6B3F8C;             /* roxo */
  --papel-et-4: #8C6A1F;             /* ocre */
  --papel-et-5: #8C2F4A;             /* vinho */
  --papel-et-6: #3D6B1F;             /* oliva */

  /* ESTRELA DE INTERESSE do caderno (31/ago/26, escala do Alexandre). A estrela É o bullet,
     então a cor tem de se ler no tamanho de uma bolinha: são versões ESCURECIDAS do verde,
     azul e vermelho, para segurar contraste sobre a folha clara num glifo de 14px. A ordem
     aqui é a ordem do interesse — preta (baixo) → verde → azul → vermelha (altíssimo). */
  --papel-star-preta: #1F2421;       /* baixo — mesma tinta do texto: é a bolinha de antes */
  --papel-star-verde: #1F6F3C;       /* médio */
  --papel-star-azul: #1B5AA8;        /* alto */
  --papel-star-vermelha: #B0231F;    /* altíssimo */

  /* ============================================================
     CAMADAS (z-index) — TDR-1635, 31/jul/26.
     Por que existe: a barra de subabas e sticky (z-index 80) e a topbar mora FORA
     do container que rola. Qualquer popover/modal criado DENTRO da aba nasce atras
     dessas duas, e nenhum z-index interno resolve — e stacking context, nao numero.
     REGRA: overlay (modal, popover, drawer, lightbox) vai no document.body, com
     position:fixed, usando SEMPRE um destes tokens. Nunca escrever z-index solto.
     ============================================================ */
  --z-sticky: 80;     /* subabas, cabecalho de tabela — dentro do fluxo */
  --z-drawer: 1000;   /* painel lateral + seu fundo escuro */
  --z-modal: 1100;    /* caixa central (adicionar/confirmar) */
  --z-popover: 1200;  /* editor ancorado numa celula — fica ACIMA do modal */
  --z-toast: 1400;    /* aviso efemero, nunca bloqueia clique */

  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.4);
  --transition: .2s ease;
  --sidebar-w: 230px;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* Fonte padrao Figtree em TODOS os controles nativos (button/input/date/number/checkbox/textarea/select nao herdam por default) */
button, input, select, textarea, optgroup { font-family:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif; }
html, body {
  height:100%; font-family:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-base); color:var(--text); font-size:14px;
  -webkit-font-smoothing:antialiased;
}

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

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); background:var(--bg-sidebar);
  display:flex; flex-direction:column; flex-shrink:0;
  border-right:1px solid var(--border); z-index:100;
  transition:width .25s ease;
  overflow:hidden;
}
.sidebar-header {
  padding:16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:56px;
}
.sidebar-brand { overflow:hidden; white-space:nowrap; }
/* Logo oficial da marca — MANUAL §81. Altura de 22px é o mínimo em tela para o
   lockup A; abaixo disso o manual manda usar só o símbolo. */
.sidebar-logo { display:block; height:22px; width:auto; }
.sidebar-logo-mini { display:none; height:26px; width:26px; }
.sidebar-header h1 { font-size:15px; font-weight:700; color:var(--text-bright); letter-spacing:-.3px; }
.sidebar-subtitle { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; text-transform:uppercase; letter-spacing:1.5px; }
.sidebar-toggle {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px; border-radius:4px; flex-shrink:0;
  transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.sidebar-toggle:hover { color:var(--text); background:rgba(255,255,255,.06); }
/* TDR-1954 — o rodape do menu virou o lugar do indicador de dados (#last-sync).
   O texto tem 3 pedacos ("2300 orgs · 2084 opps · supabase+static") e nao cabe em
   uma linha de 210px: aqui ele quebra em duas em vez de ser cortado. */
.sidebar-footer {
  padding:10px 16px; border-top:1px solid var(--border);
  font-size:10px; line-height:1.45; color:var(--text-muted);
  white-space:normal; overflow:hidden;
}
.sidebar.collapsed .sidebar-footer { display:none; }

.sidebar-nav { flex:1; padding:12px 8px; overflow-y:auto; }
.nav-section { margin-bottom:18px; }
.nav-section-title {
  font-size:9px; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-muted); padding:0 12px; margin-bottom:6px;
  white-space:nowrap; overflow:hidden;
}
.nav-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px;
  cursor:pointer; font-size:13px; transition:all var(--transition); color:var(--text-secondary);
  white-space:nowrap; overflow:hidden;
}
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-item.active { background:var(--accent-dim); color:var(--accent); font-weight:600; }
.nav-item .icon { width:18px; min-width:18px; text-align:center; font-size:14px; display:flex; align-items:center; justify-content:center; }
.nav-item .icon svg { stroke:currentColor; }
.nav-label { overflow:hidden; text-overflow:ellipsis; }
.nav-item .badge {
  margin-left:auto; background:var(--accent-dim); color:var(--accent);
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;
  flex-shrink:0;
}

/* Sidebar accordion: retractable subtab list under each group */
.nav-caret {
  margin-left:auto; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:transform var(--transition); flex-shrink:0;
  padding:2px; border-radius:4px;
}
.nav-caret:hover { color:var(--text); background:rgba(255,255,255,.06); }
.nav-item .badge + .nav-caret { margin-left:6px; }
.nav-item.group-open .nav-caret { transform:rotate(180deg); }
.nav-subitems {
  max-height:0; overflow:hidden;
  transition:max-height var(--transition);
  margin:2px 0 2px 0;
}
.nav-subitems.expanded { max-height:600px; }
.nav-subitem {
  display:flex; align-items:center; gap:8px;
  padding:7px 12px 7px 40px; margin:1px 0; border-radius:6px;
  cursor:pointer; font-size:12.5px; color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; transition:all var(--transition);
  position:relative;
}
.nav-subitem::before {
  content:''; position:absolute; left:22px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--text-muted); opacity:.5;
}
.nav-subitem:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-subitem.active { color:var(--accent); font-weight:600; }
.nav-subitem.active::before { background:var(--accent); opacity:1; }
.nav-subitem-label { overflow:hidden; text-overflow:ellipsis; }
.nav-subitem-tag {
  font-size:8.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  background:var(--accent-dim); color:var(--accent);
  padding:1px 5px; border-radius:4px; flex-shrink:0;
}
.nav-subitem .badge {
  margin-left:auto; background:var(--accent-dim); color:var(--accent);
  font-size:9px; font-weight:700; padding:1px 6px; border-radius:9px; flex-shrink:0;
}
/* Collapsed sidebar: hide the accordion entirely (icons-only mode) */
.sidebar.collapsed .nav-subitems,
.sidebar.collapsed .nav-caret { display:none; }

/* TDR-1119 (Alexandre 16/jul): paginas vivem SO no menu horizontal superior (#subtabs).
   A lista de paginas na lateral (.nav-subitems) e o caret de expandir (.nav-caret) ficam
   ocultos — a lateral fica so com secao + grupo. Clicar no grupo navega e popula as subabas
   horizontais (navigateGroup -> renderSubtabs). */
.nav-subitems, .nav-caret { display:none !important; }

/* Sidebar collapsed state */
.sidebar.collapsed { width:56px; }
.sidebar.collapsed .sidebar-subtitle,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-item .badge,
.sidebar.collapsed .sidebar-footer-extra { display:none; }
/* Recolhido: cai para o símbolo puro (MANUAL §81 — abaixo de 22px não se usa o lockup).
   Símbolo e botão empilham, senão os dois não cabem nos 56px e o símbolo é cortado. */
.sidebar.collapsed .sidebar-logo { display:none; }
.sidebar.collapsed .sidebar-logo-mini { display:block; }
.sidebar.collapsed .sidebar-brand { flex:0 0 auto; overflow:visible; }
.sidebar.collapsed .sidebar-header { flex-direction:column; justify-content:center; gap:8px; padding:12px 8px; }
.sidebar.collapsed .sidebar-toggle svg { transform:rotate(180deg); }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px 0; }
.sidebar.collapsed .sidebar-footer { text-align:center; padding:12px 4px; }

/* Main content */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
/* TDR-1954 — a .topbar (migalha + titulo + contadores) foi removida do HTML em
   11/ago/26: eram 48px de altura em toda pagina pra repetir o que o menu lateral
   e o titulo da aba do Chrome ja dizem. O indicador de dados virou o .sidebar-footer.
   As regras da .topbar sairam junto; nao ha mais elemento pra estilizar. */

/* TDR-1954: sem a barra de cima, quem encosta no topo e o .content. O respiro de
   cima encolheu (24 -> 14px) pra barra de subabas subir sem colar na borda. */
.content { flex:1; overflow-y:auto; padding:14px 24px 24px; }

/* ============================================
   Subtabs (menu horizontal de pílulas)
   ============================================ */
.subtabs {
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 24px;
  margin:-8px -24px 16px -24px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:80;
  background:var(--bg-base);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.subtabs:empty { display:none; }
.subtab-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  background:var(--bg-surface); color:var(--text-secondary);
  border:1px solid var(--border);
  font-size:12px; font-weight:500; cursor:pointer;
  transition:all var(--transition);
  user-select:none;
}
.subtab-pill:hover {
  background:rgba(255,255,255,.05); color:var(--text);
  border-color:var(--text-muted);
}
.subtab-pill.active {
  background:var(--accent-dim); color:var(--accent);
  border-color:var(--accent); font-weight:600;
}
.subtab-pill .badge {
  background:rgba(255,255,255,.08); color:var(--text-secondary);
  font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:10px;
  min-width:18px; text-align:center;
}
.subtab-pill.active .badge {
  background:var(--accent); color:var(--bg-base);
}
.subtab-pill .pill-tag {
  background:var(--primary); color:var(--text-bright);
  font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:4px;
  letter-spacing:.5px;
}

/* Cards */
.card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; margin-bottom:16px;
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:13px; font-weight:700; color:var(--text-bright); text-transform:uppercase; letter-spacing:.8px; }
.card-subtitle { font-size:11px; color:var(--text-muted); }

/* KPI row */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.kpi-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px; display:flex; flex-direction:column;
}
.kpi-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.kpi-value { font-size:28px; font-weight:700; color:var(--text-bright); line-height:1.1; }
.kpi-value.accent { color:var(--accent); }
.kpi-sub { font-size:11px; color:var(--text-secondary); margin-top:4px; }

/* Funnel bar */
.funnel { display:flex; gap:2px; height:36px; border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.funnel-segment {
  display:flex; align-items:center; justify-content:center; color:var(--text-bright);
  font-size:11px; font-weight:600; transition:flex var(--transition); cursor:pointer;
  position:relative;
}
.funnel-segment:hover { filter:brightness(1.2); }
.funnel-segment .funnel-tooltip {
  display:none; position:absolute; top:-34px; background:var(--bg-elevated); color:var(--text);
  padding:4px 10px; border-radius:4px; font-size:11px; white-space:nowrap; z-index:10;
  border:1px solid var(--border-light);
}
.funnel-segment:hover .funnel-tooltip { display:block; }

/* Pipeline Kanban */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; min-height:400px; }
.kanban-col {
  min-width:280px; max-width:320px; flex:1; background:var(--bg-surface);
  border-radius:var(--radius-lg); border:1px solid var(--border); display:flex; flex-direction:column;
}
.kanban-col-header {
  padding:12px 14px; font-weight:600; font-size:12px; color:var(--text-bright);
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;
  position:sticky; top:0; background:var(--bg-surface); z-index:2;
  text-transform:uppercase; letter-spacing:.5px;
}
.kanban-col-header .col-indicator { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.kanban-col-header .count {
  margin-left:auto; font-size:10px; padding:2px 7px; border-radius:10px; font-weight:700;
  background:rgba(255,255,255,.06); color:var(--text-secondary);
}
.kanban-col-body { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; max-height:60vh; }

.kanban-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; cursor:pointer; transition:all var(--transition);
  border-left:3px solid transparent;
}
.kanban-card:hover { background:var(--bg-card-hover); border-color:var(--border-light); box-shadow:var(--shadow); }
.kanban-card.tier-1 { border-left-color:var(--red); }
.kanban-card.tier-2 { border-left-color:var(--accent); }
.kanban-card.tier-3 { border-left-color:var(--blue); }
.kanban-card .org-name { font-weight:600; font-size:12px; color:var(--text-bright); margin-bottom:5px; }
.kanban-card .org-meta { font-size:11px; color:var(--text-secondary); display:flex; gap:8px; flex-wrap:wrap; }
.kanban-card .org-meta span { display:flex; align-items:center; gap:3px; }
.kanban-card .org-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.kanban-card .tag {
  font-size:10px; padding:2px 8px; border-radius:3px;
  background:var(--primary-dim); color:var(--primary-light); border:1px solid rgba(46,158,90,.2);
}

/* Alert card */
.alert-card {
  background:var(--accent-dim); border:1px solid rgba(243,124,32,.25);
  border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:16px;
  display:flex; align-items:center; gap:14px;
}
.alert-icon { font-size:20px; color:var(--accent); }
.alert-card .alert-text { flex:1; font-size:13px; color:var(--text); }
.alert-card .alert-text strong { color:var(--accent); }
.alert-days { text-align:center; }
.alert-days .num { font-size:28px; font-weight:700; color:var(--accent); line-height:1; }
.alert-days .label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

/* Table */
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table thead th {
  text-align:left; padding:8px 10px; font-weight:600; font-size:10px;
  text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted);
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-card);
}
.data-table tbody td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; }
.data-table tbody td .cell-wrap { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:16px; max-height:32px; word-break:break-word; }
.data-table tbody tr { transition:background var(--transition); }
.data-table tbody tr:hover { background:var(--bg-card-hover); }

/* Filters */
.filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.filter-btn {
  padding:5px 12px; border-radius:20px; border:1px solid var(--border);
  background:transparent; font-size:11px; cursor:pointer; transition:all var(--transition);
  color:var(--text-secondary); font-family:inherit;
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); font-weight:600; }

input[type="text"], input[type="search"], select {
  padding:7px 12px; border:1px solid var(--border); border-radius:6px;
  font-size:13px; background:var(--bg-surface); color:var(--text); outline:none;
  transition:border var(--transition); font-family:inherit;
}
input:focus, select:focus { border-color:var(--accent); }
input::placeholder, textarea::placeholder { color:var(--text-disabled); }
/* TDR-164 #7 (Alexandre 17/jul): FUNDO ESCURO PADRÃO em textarea e demais inputs —
   antes o CSS global só cobria text/search/select, então TEXTAREA (e number/email/etc.)
   caíam no fundo BRANCO do navegador (feio). Não seto padding aqui pra não mexer no layout;
   quem tem classe/estilo próprio continua vencendo. Corrige o dashboard inteiro de uma vez. */
textarea,
input[type="number"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="date"], input[type="datetime-local"], input:not([type]) {
  background:var(--bg-surface); color:var(--text);
  border:1px solid var(--border); border-radius:6px; font-family:inherit; outline:none;
  color-scheme:dark;
}
textarea:focus,
input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input:not([type]):focus {
  border-color:var(--accent);
}

.btn {
  padding:7px 14px; border-radius:6px; font-size:12px; font-weight:600;
  border:none; cursor:pointer; transition:all var(--transition); display:inline-flex;
  align-items:center; gap:6px; font-family:inherit;
}
.btn-primary { background:var(--accent); color:var(--bg-base); }
.btn-primary:hover { background:var(--accent-light); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity var(--transition);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg);
  width:90%; max-width:560px; max-height:85vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); padding:20px;
}
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h3 { color:var(--text-bright); font-size:16px; }
/* TDR-2437 (Vênus, 20/ago/26) — medido no Chrome do Alexandre: o × do modal estava em
   --text-muted (#4A5568) sobre #161D27 = contraste 2,25, contra o mínimo 4,5 da WCAG AA. E ele é
   um ALVO DE CLIQUE: não é decoração que se pode deixar apagada. --text-muted é o token de
   placeholder e desativado (é o que diz o próprio inventário em identidade_visual.js); rótulo,
   instrução e controle usam --text-secondary, que mede 4,85 no mesmo fundo. */
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-secondary); }
.modal-close:hover { color:var(--text); }

/* View toggle */
.view-toggle { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.view-toggle button {
  padding:5px 12px; border:none; background:transparent; font-size:11px;
  cursor:pointer; transition:all var(--transition); color:var(--text-muted); font-family:inherit;
}
.view-toggle button:hover { color:var(--text); }
.view-toggle button.active { background:var(--accent); color:var(--bg-base); font-weight:600; }

/* Status badges */
.status-badge {
  font-size:10px; padding:3px 8px; border-radius:10px; font-weight:600;
  display:inline-flex; align-items:center; gap:4px; letter-spacing:.3px;
}
.status-mapeado { background:var(--blue-dim); color:var(--blue); }
.status-priorizado { background:var(--accent-dim); color:var(--accent); }
.status-prospeccao { background:var(--purple-dim); color:var(--purple); }
.status-qualificado { background:var(--primary-dim); color:var(--primary-light); }
.status-universo { background:rgba(255,255,255,.04); color:var(--text-muted); }
.status-aberta { background:var(--primary-dim); color:var(--primary-light); border:1px solid rgba(46,158,90,.3); }
.status-urgente { background:var(--red-dim); color:var(--red); }
.status-declinado { background:rgba(220,80,80,.12); color:#E85D5D; }
/* Projetos status badges */
.status-not-started { background:rgba(255,255,255,.06); color:var(--text-muted); }
.status-draft { background:rgba(255,255,255,.08); color:var(--text-secondary); }
.status-review { background:var(--accent-dim); color:var(--accent); }
.status-sent { background:var(--blue-dim); color:var(--blue); }
.status-approved { background:var(--primary-dim); color:var(--primary-light); }
.status-executing { background:rgba(52,184,200,.12); color:var(--cyan); }
.status-completed { background:rgba(46,158,90,.15); color:var(--green); }
.status-declined { background:rgba(231,76,60,.15); color:#e74c3c; }

/* Fit bar */
.fit-bar { display:flex; align-items:center; gap:8px; margin-top:4px; }
.fit-bar-track { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.fit-bar-fill { height:100%; border-radius:2px; transition:width .5s; }
.fit-bar-label { font-size:11px; font-weight:600; min-width:32px; text-align:right; }

/* Search */
.search-box { position:relative; }
.search-box input { padding-left:32px; width:260px; }
.search-box::before { content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:2px solid var(--text-muted); border-radius:50%; }
.search-box::after { content:""; position:absolute; left:22px; top:calc(50% + 6px); width:2px; height:6px; background:var(--text-muted); transform:rotate(-45deg); }

/* Progress bar */
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:8px; }
.progress-bar-fill { height:100%; border-radius:3px; transition:width .5s ease; }

/* Phase card */
.phase-card { border-left:3px solid var(--text-muted); }
.phase-card.phase-active { border-left-color:var(--accent); }
.phase-card.phase-done { border-left-color:var(--primary); }

/* Placeholder tabs */
.placeholder-content { text-align:center; padding:80px 20px; }
.placeholder-icon { font-size:48px; margin-bottom:16px; opacity:.6; }
.placeholder-title { font-size:16px; font-weight:600; color:var(--text-bright); margin-bottom:8px; }
.placeholder-desc { color:var(--text-secondary); max-width:420px; margin:0 auto; font-size:13px; line-height:1.6; }

/* Responsive */
@media (max-width:768px) {
  .sidebar { width:56px; }
  .sidebar-brand, .sidebar-subtitle, .nav-section-title, .nav-label { display:none; }
  .nav-item .badge { display:none; }
  .sidebar-header { justify-content:center; padding:16px 8px; }
  .sidebar-toggle svg { transform:rotate(180deg); }
  .nav-item { justify-content:center; padding:10px 0; }
  .nav-subitems, .nav-caret { display:none; }
  .sidebar-footer-extra { display:none; }
  .sidebar-footer { text-align:center; padding:12px 4px; }
  .content { padding:16px; }
  .kanban { flex-direction:column; }
  .kanban-col { min-width:100%; max-width:100%; }

  /* TDR-1605/TDR-1954 — a barra de cima nao existe mais (nem no celular nem no
     desktop). O que sobrou dela e o indicador de dados no rodape do menu lateral. */
}

/* Tab content */
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* Section divider */
.section-label {
  font-size:9px; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-muted); margin-bottom:12px; padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* ============================================================
 * NOVOS PROJETOS — wizard multipágina (Typeform-style)
 * ============================================================ */
.np-wizard { max-width:860px; margin:0 auto; display:flex; flex-direction:column; min-height:calc(100vh - 140px); }
.np-progress { margin-bottom:24px; }
.np-progress-bar { height:4px; background:var(--bg-card); border-radius:3px; overflow:hidden; }
.np-progress-fill { height:100%; background:var(--accent); border-radius:3px; transition:width var(--transition); }
.np-steps { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.np-step-dot {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-secondary); font-size:11px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition);
}
.np-step-dot:hover { border-color:var(--accent); color:var(--text); }
.np-step-dot.active { background:var(--accent); color:#1a1206; border-color:var(--accent); }
.np-step-dot.done { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.np-autosave { margin-top:8px; font-size:11px; color:var(--text-muted); text-align:right; }
.np-saved-flash { color:var(--primary-light) !important; transition:color .2s; }

.np-page { flex:1; }
.np-h2 { font-size:22px; font-weight:700; color:var(--text-bright); margin-bottom:6px; letter-spacing:-.3px; }
.np-sub { font-size:13px; color:var(--text-secondary); margin-bottom:22px; line-height:1.5; }
.np-field { margin-bottom:22px; }
.np-label { display:block; font-size:12px; font-weight:600; color:var(--text); margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.np-textarea {
  width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:12px; font-size:13px; font-family:inherit; resize:vertical; line-height:1.5;
}
.np-textarea:focus { outline:none; border-color:var(--accent); }

.np-radios { display:grid; gap:10px; }
.np-radio {
  display:block; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); cursor:pointer; transition:all var(--transition);
}
.np-radio:hover { border-color:var(--border-light); background:var(--bg-card-hover); }
.np-radio.sel { border-color:var(--accent); background:var(--accent-dim); }
.np-radio input { display:none; }
.np-radio-title { display:block; font-size:14px; font-weight:600; color:var(--text-bright); }
.np-radio-desc { display:block; font-size:12px; color:var(--text-secondary); margin-top:3px; }

.np-dropzone {
  margin-top:10px; border:1.5px dashed var(--border-light); border-radius:var(--radius);
  padding:24px; text-align:center; color:var(--text-secondary); cursor:pointer; transition:all var(--transition);
  display:flex; flex-direction:column; gap:6px;
}
.np-dropzone:hover { border-color:var(--accent); background:var(--accent-dim); }
.np-dropzone small { color:var(--text-muted); font-size:11px; }

.np-bloco-tag {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  background:var(--accent-dim); color:var(--accent); padding:3px 9px; border-radius:5px; margin-bottom:10px;
}
.np-placeholder {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; color:var(--text-secondary); font-size:13px; line-height:1.6;
}
.np-placeholder p { margin:0 0 8px; }
.np-placeholder p:last-child { margin:0; }

.np-review-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.np-review-table th, .np-review-table td {
  text-align:left; padding:9px 12px; font-size:12.5px; border-bottom:1px solid var(--border);
}
.np-review-table th { color:var(--text-muted); text-transform:uppercase; font-size:10px; letter-spacing:.5px; }
.np-review-table td { color:var(--text); }

.np-note { display:block; margin-top:8px; color:var(--text-muted); font-size:11px; }

.np-footer {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:28px; padding-top:18px; border-top:1px solid var(--border);
}
.np-step-label { font-size:12px; color:var(--text-muted); }
.np-btn {
  padding:9px 18px; border-radius:var(--radius); border:1px solid var(--border-light);
  background:var(--bg-card); color:var(--text); font-size:13px; font-weight:600; cursor:pointer;
  transition:all var(--transition);
}
.np-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.np-btn:disabled { opacity:.4; cursor:not-allowed; }
.np-btn-primary { background:var(--accent); color:#1a1206; border-color:var(--accent); }
.np-btn-primary:hover:not(:disabled) { background:var(--accent-light); color:#1a1206; }

/* Novos Projetos — campos do formulário */
.np-input, .np-select {
  width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:9px 11px; font-size:13px; font-family:inherit;
}
.np-input:focus, .np-select:focus { outline:none; border-color:var(--accent); }
.np-field-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.np-field-head .np-label { margin-bottom:0; }
.np-ia-btn {
  font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 9px; border-radius:5px;
  background:var(--purple-dim); color:var(--purple); border:1px solid transparent; cursor:pointer; transition:all var(--transition);
}
.np-ia-btn:hover { border-color:var(--purple); }
.np-prop-row { display:flex; gap:8px; align-items:center; }
.np-prop-row .np-select { flex:1; }

.np-chips { display:flex; flex-wrap:wrap; gap:8px; }
.np-chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary);
  font-size:12.5px; cursor:pointer; transition:all var(--transition);
}
.np-chip:hover { border-color:var(--border-light); color:var(--text); }
.np-chip.sel { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); font-weight:600; }
.np-chip input { display:none; }

.np-repeater { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.np-rep-row { display:flex; gap:10px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.np-rep-grid { flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.np-rep-cell { display:flex; flex-direction:column; gap:4px; }
.np-rep-label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }
.np-rep-del { background:var(--red-dim); color:var(--red); border:none; border-radius:6px; width:28px; height:28px; cursor:pointer; flex-shrink:0; font-size:13px; }
.np-rep-del:hover { background:var(--red); color:var(--text-bright); }
.np-btn-sm { padding:6px 12px; font-size:12px; }
.np-btn-danger { background:var(--red-dim); color:var(--red); border-color:transparent; }
.np-btn-danger:hover:not(:disabled) { border-color:var(--red); color:var(--red); }
.np-ok { color:var(--primary-light); font-weight:600; }

/* Modal de proponentes */
.np-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.np-modal {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.np-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.np-modal-head h3 { font-size:15px; font-weight:700; color:var(--text-bright); }
.np-modal-close { background:none; border:none; color:var(--text-secondary); font-size:16px; cursor:pointer; }
.np-modal-close:hover { color:var(--text); }
.np-modal-body { padding:20px; overflow-y:auto; }
.np-prop-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; }
.np-prop-item small { color:var(--text-muted); }
.np-prop-actions { display:flex; gap:6px; }
.np-subsection { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.np-subsection-title { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--accent); margin-bottom:10px; font-weight:700; }
.np-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }

/* Novos Projetos — Fases 4-7 (intake, docs, chat) */
.np-dropzone.drag { border-color:var(--accent); background:var(--accent-dim); }
.np-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.np-file-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:4px 10px; font-size:12px; color:var(--text); }
.np-file-chip button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:12px; }
.np-file-chip button:hover { color:var(--red); }
.np-gen-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.np-gen-preview { margin-top:18px; font-size:13px; color:var(--text); line-height:1.6; }
.np-gen-preview h1,.np-gen-preview h2,.np-gen-preview h3 { color:var(--text-bright); margin:14px 0 6px; }
.np-gen-preview table { border-collapse:collapse; width:100%; }
.np-gen-preview td,.np-gen-preview th { border:1px solid var(--border); padding:6px; }
.np-chat-log { display:flex; flex-direction:column; gap:12px; margin:16px 0; max-height:46vh; overflow-y:auto; }
.np-msg { display:flex; }
.np-msg-user { justify-content:flex-end; }
.np-msg-bubble { max-width:78%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; }
.np-msg-user .np-msg-bubble { background:var(--accent-dim); color:var(--text); border:1px solid var(--accent); }
.np-msg-assistant .np-msg-bubble { background:var(--bg-card); color:var(--text); border:1px solid var(--border); }
.np-chat-input { display:flex; gap:10px; align-items:flex-end; }
.np-chat-input .np-textarea { flex:1; }

.np-wizard { display:flex !important; flex-direction:row !important; gap:24px; align-items:flex-start; max-width:1040px; margin:0; }
.np-nav { width:215px; flex-shrink:0; position:sticky; top:8px; }
.np-nav-list { display:flex; flex-direction:column; gap:2px; }
.np-nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:none; background:none; border-radius:6px; cursor:pointer; text-align:left; color:var(--text-secondary); font-size:12.5px; transition:all var(--transition); width:100%; }
.np-nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.np-nav-item.active { background:var(--accent-dim); color:var(--accent); font-weight:600; }
.np-nav-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.np-nav-item.done .np-nav-num { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.np-nav-item.active .np-nav-num { background:var(--accent); color:#1a1206; border-color:var(--accent); }
.np-nav-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-main { flex:1; min-width:0; }

.np-edital-field { background:var(--blue-dim); border:1px solid var(--blue); border-radius:8px; padding:12px 14px; }
.np-edital-tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:var(--blue); color:var(--text-bright); padding:1px 6px; border-radius:4px; vertical-align:middle; }
.np-ed-menu { background:none; border:1px solid var(--border); color:var(--text-secondary); border-radius:5px; cursor:pointer; padding:2px 9px; font-weight:700; }
.np-ed-menu:hover { color:var(--text); border-color:var(--blue); }

.np-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.np-charlim { width:60px; padding:3px 6px; font-size:11px; background:var(--bg-card); border:1px solid var(--border); border-radius:5px; color:var(--text); }
.np-orc-sub { text-align:right; font-size:12px; color:var(--text-secondary); margin-top:6px; }
.np-orc-total { text-align:right; font-size:14px; color:var(--accent); font-weight:700; margin-top:14px; padding-top:10px; border-top:1px solid var(--border); }
.np-rep-row[draggable] { cursor:grab; }
.np-dragging { opacity:.45; }

.np-instr-cards { display:flex; gap:12px; flex-wrap:wrap; }
.np-instr-card { flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); color:var(--text-secondary); cursor:pointer; transition:all var(--transition); }
.np-instr-card:hover { border-color:var(--border-light); color:var(--text); }
.np-instr-card.sel { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
.np-instr-card svg { width:30px; height:30px; }
.np-instr-card span { font-size:13px; font-weight:600; text-align:center; }
.np-rep-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--accent-dim); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; align-self:flex-start; margin-top:6px; }

.np-banner { padding:12px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:18px; }
.np-banner.ok { background:var(--primary-dim); color:var(--primary-light); border:1px solid var(--primary); }
.np-banner.err { background:var(--red-dim); color:var(--red); border:1px solid var(--red); }

/* Multi-select filter checkboxes */
.filter-multi-container { position:relative; }
.filter-multi-btn { white-space:nowrap; }
.filter-checkbox-label {
  display:flex; align-items:center; gap:8px; padding:4px 6px;
  font-size:11px; color:var(--text-secondary); cursor:pointer;
  border-radius:4px; transition:background .15s;
}
.filter-checkbox-label:hover { background:rgba(255,255,255,.04); }
.filter-checkbox-label input[type="checkbox"] {
  width:14px; height:14px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;
}
.filter-checkbox-label .filter-count { color:var(--text-muted); font-size:10px; margin-left:auto; }


/* Modal Projetos GRANDE (TDR-57, Vênus 17/jul): ocupa a tela com folga controlada */
.proj-modal-wide {
  max-width:1280px !important;
  width:min(1280px, calc(100vw - 48px)) !important;
  max-height:92vh !important;
}
/* TDR-57 (Vênus): blocos do modo visualização em grade 2 colunas na tela larga —
   blocos densos (INFOS/ESCOPO) em largura total; os curtos (VALOR/LOCAL/EQUIPE/DOCUMENTOS) lado a lado */
.proj-blocos-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px; align-items:start; }
.proj-blocos-grid .proj-bloco-full { grid-column:1 / -1; }
/* INFOS: pares rótulo/valor em colunas duplas na larga (corta a altura pela metade) */
.proj-view-rows-2col { display:grid; grid-template-columns:130px minmax(0,1fr) 130px minmax(0,1fr); gap:6px 14px; font-size:13px; min-width:0; }
@media (max-width: 900px) {
  .proj-blocos-grid { grid-template-columns:1fr; }
  .proj-view-rows-2col { grid-template-columns:130px minmax(0,1fr); }
}
/* affordance: o título do bloco é clicável — dar sinal visual */
.proj-bloco > div:first-child:hover { background:var(--bg-card-hover); border-radius:6px; }
.proj-modal-wide input,
.proj-modal-wide select,
.proj-modal-wide textarea {
  max-width:100%;
  box-sizing:border-box;
}
.proj-modal-wide .proj-bloco > div:nth-child(2) > div {
  min-width:0;
}


/* tfoot alinhado igual tbody — força padding/align e box-sizing pra garantir alinhamento das colunas */
.data-table tfoot td {
  padding: 8px 10px !important;
  text-align: left !important;
  vertical-align: middle;
  box-sizing: border-box;
  border-top: 2px solid var(--border);
  background: rgba(255,255,255,.03);
}


/* ============================================
   GLOBAL select dark — força legibilidade em TODOS os <select> e <option> da plataforma
   Resolve bug Windows que ignora color-scheme:dark nas options de selects nativos.
   ============================================ */
select {
  color-scheme: dark !important;
  background: var(--bg-page) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 4px;
}
select option {
  background-color: var(--bg-surface) !important;
  color: var(--text) !important;
}
select option:hover,
select option:focus,
select option:checked {
  background-color: var(--bg-surface) !important;
  color: var(--text) !important;
  font-weight: 600;
}


/* ============ AUDITORIA FASE 3A: utility classes pra reduzir 350+ inline styles em talentos.js / tarefas.js ============ */
.tag-pill { display:inline-block; padding:1px 5px; border-radius:3px; font-size:9px; margin:1px 2px; white-space:nowrap; }
/* PADRÃO ÚNICO de tag/pill em células de tabela (combinado 31/jul, ref: coluna Tipo da Pipeline).
   Forma FIXA (radius 4px, padding 2px 6px, cantos arredondados nunca quadrados); a cor muda por
   semântica via style inline (background: tint; color: cor). Ver docs/design-system.md §4.1. */
.tag-pill-std { display:inline-block; padding:2px 6px; border-radius:4px; font-size:10px; margin:0 3px 2px 0; white-space:nowrap; line-height:15px; }
.tag-pill-cargo { background:rgba(46,158,90,0.15); color:rgba(140,255,180,0.95); }
.tag-pill-papel { background:rgba(232,201,74,0.12); color:rgba(255,220,140,0.95); }
.tag-pill-esp { background:rgba(99,179,237,0.12); color:rgba(140,200,255,0.95); }
.tag-pill-gt { background:rgba(155,111,232,0.18); color:#b89aef; border:1px solid rgba(155,111,232,0.35); }
.status-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:500; }
.modal-readonly-calc { padding:6px 10px; background:rgba(255,255,255,0.03); border:1px dashed var(--border); border-radius:5px; font-weight:600; font-size:13px; display:inline-block; min-width:80px; }
.tag-cell { max-width:0; overflow:hidden; font-size:11px; cursor:pointer; }
.tag-cell-wrap { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:16px; max-height:54px; word-break:break-word; }
.cell-centered { text-align:center; }


/* ============ #106 FASE 3A continuação: utility classes adicionais pra talentos.js ============ */
.cell-truncate { max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-fs11 { font-size:11px; }
.cell-fs10 { font-size:10px; }
.cell-clickable { cursor:pointer; }
.cell-center { text-align:center; }
.cell-pad-zero { padding:0 4px; }

.btn-table-action { 
  background:rgba(99,179,237,.12); 
  border:1px solid rgba(99,179,237,.3); 
  color:var(--accent); 
  font-size:14px; 
  font-weight:700; 
  cursor:pointer; 
  padding:2px 8px; 
  border-radius:4px; 
  line-height:1; 
}
.btn-table-action:hover { background:rgba(99,179,237,.28); color:var(--text-bright); }

.row-h32 { height:32px; }

/* Seções do menu recolhíveis (TDR) */
.nav-section-title { cursor:pointer; display:flex; align-items:center; gap:6px; user-select:none; }
.nav-section-title::after { content:''; margin-left:auto; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.55; transition:transform .18s ease; }
.nav-section-title:hover::after { opacity:.9; }
.nav-section.section-collapsed .nav-section-title::after { transform:rotate(-90deg); }
.nav-section.section-collapsed .nav-item, .nav-section.section-collapsed .nav-subitems { display:none; }
.sidebar.collapsed .nav-section-title::after { display:none; }

/* Gestão Financeira — "?" tooltip do glossário (inline, no modal de lançamento) */
.fin-tip { position:relative; display:inline-block; margin-left:6px; min-width:14px; height:14px; line-height:13px; padding:0 3px; text-align:center; border-radius:50%; border:1px solid var(--text-muted); color:var(--text-muted); font-size:10px; font-weight:700; cursor:help; vertical-align:middle; box-sizing:border-box; }
.fin-tip .fin-tip-box {
  display:none; position:absolute; top:20px; right:0; width:260px; background:var(--bg-elevated); color:var(--text);
  padding:8px 10px; border-radius:6px; font-size:11px; font-weight:400; line-height:1.55; white-space:normal;
  text-align:left; z-index:100; border:1px solid var(--border-light); box-shadow:var(--shadow);
}
.fin-tip:hover .fin-tip-box { display:block; }

/* Gestão Financeira — rubricas: drag & drop (FASE 4) */
#fin-rub-table tr.fin-drop-tgt > td { box-shadow: inset 0 2px 0 0 var(--accent); background: rgba(243,124,32,0.10) !important; }
#fin-rub-table .fin-drag-h { opacity: .5; transition: opacity .12s, color .12s; }
#fin-rub-table .fin-drag-h:hover { opacity: 1; color: var(--accent) !important; }
#fin-rub-table .fin-drag-h:active { cursor: grabbing; }

/* FIX (Alexandre 10/jul, TDR-859): o .content tem padding-top e a .subtabs (sticky top:0) gruda ABAIXO dele,
   deixando uma faixa descoberta por onde o conteudo rolado aparecia acima das pilulas — em TODAS as abas.
   A pseudo-barra cobre essa faixa com o fundo da pagina. */
.subtabs::before{content:'';position:absolute;left:0;right:0;top:-26px;height:26px;background:var(--bg-base);pointer-events:none;}

/* TDR-650 — popup do fit (a conta, sem jargão) */
.rb-fitdot{cursor:pointer;}
.rb-fitpop{position:absolute;z-index:9999;width:340px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 14px 34px rgba(0,0,0,.5);font-family:'Figtree',system-ui,sans-serif;}
.rb-fp-h{font-size:12.5px;font-weight:800;color:var(--text-bright);display:flex;align-items:center;}
.rb-fp-x{margin-left:auto;cursor:pointer;color:var(--text-muted);font-size:15px;}
.rb-fp-s{font-size:11px;color:var(--text-muted);margin:4px 0 8px;line-height:1.5;}
.rb-fp-s b{color:var(--text-bright);}
.rb-fp-t{width:100%;border-collapse:collapse;font-size:11px;}
.rb-fp-t th{text-align:center;font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);padding:3px;border-bottom:1px solid var(--border);}
.rb-fp-t th.c,.rb-fp-t td.c{text-align:left;}
.rb-fp-t td{text-align:center;padding:5px 3px;border-bottom:1px solid var(--border);color:var(--text);}
.rb-fp-t tr.off{opacity:.45;}
.rb-fp-t td.c .b{font-size:9.5px;color:var(--text-muted);}
.rb-fp-f{margin-top:8px;font-size:12.5px;color:var(--text-bright);}
.rb-fp-f.er{color:#e2445c;}
.rb-fp-nm{font-size:10px;color:var(--text-muted);margin-top:6px;}
.rb-mmuni{color:var(--text-muted);font-weight:500;}

/* TDR-805 — caixa de feedback do Refinar busca */
.rb-fbm{max-width:520px;}
.rb-fbm h3{margin:0;font-size:15px;color:var(--text-bright);}
.rb-fbs{font-size:11.5px;color:var(--text-muted);margin-top:3px;max-width:420px;line-height:1.5;}
.rb-fbb{padding:14px 16px 16px;}
.rb-fbl{display:block;font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;margin:10px 0 5px;}
.rb-fbl:first-child{margin-top:0;}
.rb-fbsel,.rb-fbta{width:100%;background:var(--bg-page,var(--bg-base));color:var(--text-bright);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit;}
.rb-fbta{resize:vertical;line-height:1.5;}
.rb-fbck{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:11.5px;color:var(--text-muted);cursor:pointer;line-height:1.5;}
.rb-fbck b{color:var(--text-bright);}
.rb-fbact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.rb-fbg{font-size:11.5px;background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:7px 14px;border-radius:7px;cursor:pointer;}
.rb-fbp{font-size:11.5px;background:#C4653F;color:var(--text-bright);border:none;padding:7px 16px;border-radius:7px;cursor:pointer;font-weight:700;}
.rb-fbp:hover{background:#9A4B2C;}

/* TDR-881 — popup da BANCA (hover na bolinha do fit) */
.rb-fitpop{width:440px;}
.rb-fp-b{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px;}
.rb-fp-b th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);padding:4px 5px;border-bottom:1px solid var(--border);}
.rb-fp-b td{padding:6px 5px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;line-height:1.45;}
.rb-fp-b td.a{font-weight:700;color:var(--text-bright);white-space:nowrap;}
.rb-fp-b td.n{text-align:center;font-weight:800;white-space:nowrap;}
.rb-fp-b tr.er td.n{color:#e2445c;} .rb-fp-b tr.wa td.n{color:var(--accent);}
.rb-fp-b td.d{color:var(--text-muted);}
.rb-fp-b tr.off{opacity:.5;}

/* TDR-896 — card que precisa da ajuda do Alexandre (fonte com login) */
/* TDR-2382 — erro de coleta no card da Pré-Seleção. Nasceu do card do ICV, que
   entrou como sendo do Instituto Federal do Acre sem ninguém ficar sabendo.
   Fica ANTES do título: a coluna é estreita e o que vem depois some no corte. */
/* TDR-3015 (26/ago/26): o selo ⚠ do card foi retirado — quem avisa "tem defeito" é a
   borda vermelha + o fundo avermelhado (.rb-card.rb-needhelp, mais abaixo). As classes
   .rb-errocol/.rb-errograve saíram junto: não havia mais quem as usasse. */
.rb-errobox{margin:8px 0 10px;padding:9px 12px;border-radius:8px;background:var(--red-dim);border-left:3px solid var(--red);}
.rb-errobox-h{font-size:11px;font-weight:700;color:var(--text-bright);margin-bottom:5px;}
.rb-errobox ul{margin:0;padding-left:16px;font-size:12px;line-height:1.5;}
.rb-errobox li{margin-bottom:3px;}
.rb-erroaj{color:var(--accent);font-style:normal;}
.rb-curinc{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--red-dim);color:var(--red);border:1px solid var(--red-dim);white-space:nowrap;flex:0 0 auto;}
.rb-curpar{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--red-dim);color:var(--yellow);border:1px solid var(--border-light);white-space:nowrap;flex:0 0 auto;}
/* TDR-3183 (Alexandre, 28/ago/26) — A AMPLIAÇÃO SAIU: *"nao gostei, tudo ficou muito grande,
   volta para o jeito que era que eu tento explicar de outra forma o que eu preciso"*.

   O que a TDR-3113 tinha feito: `zoom:1.375` no body quando a Pré-Seleção está ativa — a razão
   entre o zoom que ele usa no Chrome (80%) e o que ele tinha pedido (110%). A conta estava certa e
   o resultado, errado: ampliar TUDO junto não é o que ele queria dizer com "maior". Fica a lição —
   pedido de tamanho quase nunca é sobre escala global; é sobre uma coisa específica ficar legível,
   e a resposta certa costuma ser tipografia e espaçamento em um lugar, não um multiplicador na
   página inteira. A regra volta a não existir; ele vai reformular o pedido.

   O `column-gap` da segunda linha de filtros também sai: ele só existia para pagar 3px que a
   ampliação cobrava. */
}

.rb-card.rb-needhelp{border-color:rgba(226,68,92,.55)!important;background:linear-gradient(0deg, rgba(226,68,92,.06), rgba(226,68,92,.06))!important;}
/* TDR-1138: card ja refinado pelo Alexandre = destaque verde "ja revisei" (borda-esquerda + tint leve) */
.rb-card.rb-refinado{border-left:3px solid var(--primary)!important;background:linear-gradient(0deg, var(--primary-dim), var(--primary-dim))!important;}
.rb-help{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:5px;background:rgba(226,68,92,.16);color:#f08096;margin-left:6px;}

/* TDR-897 — aviso no cabeçalho da Pré-Seleção */
.rb-ajuda{margin-top:8px;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#f08096;background:rgba(226,68,92,.12);border:1px solid rgba(226,68,92,.4);border-radius:9px;padding:7px 12px;cursor:pointer;line-height:1.5;}
.rb-ajuda:hover{background:rgba(226,68,92,.2);}
.rb-ajuda.on{background:rgba(226,68,92,.28);border-color:#e2445c;}
.rb-ajuda b{color:#ff9db0;}
.rb-ajuda-x{font-weight:700;text-decoration:underline;}

/* TDR-898 — evolução do índice de preenchimento no cabeçalho */
.rb-qual{margin-top:8px;display:inline-block;font-size:11.5px;padding:6px 11px;border-radius:9px;line-height:1.5;}
.rb-qual.up{background:rgba(46,158,90,.12);border:1px solid rgba(46,158,90,.4);color:#5cc182;}
.rb-qual.ok{background:rgba(46,158,90,.18);border:1px solid var(--primary);color:#5cc182;}
.rb-qual.wa{background:rgba(243,124,32,.12);border:1px solid rgba(243,124,32,.45);color:var(--accent);}
.rb-qual.er{background:rgba(226,68,92,.14);border:1px solid rgba(226,68,92,.5);color:#f08096;}
.rb-qual.off{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted);}
.rb-qual b{color:var(--text-bright);}
.rb-qual-nm{opacity:.75;font-size:10.5px;}

/* TDR-579 — Gestão de Projetos (Melissa PMO) — tema escuro do app (Figtree + paleta Muvuka) */
.gp-wrap{padding:6px 2px;font-family:'Figtree',system-ui,sans-serif;color:var(--text,#E8ECF1)}
.gp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gp-head h2{margin:0 0 4px;font-size:21px;color:var(--text-bright,#fff)}
.gp-tag{font-size:11px;background:rgba(243,124,32,.18);color:var(--accent);border-radius:6px;padding:2px 8px;vertical-align:middle;font-weight:600}
.gp-sub{color:#9aa7b4;font-size:13px;max-width:760px;margin:0}
.gp-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.gp-kpi{background:#131A22;border:1px solid var(--border,#1E2A38);border-radius:10px;padding:11px 16px;min-width:120px}
.gp-kpi b{display:block;font-size:23px;line-height:1.1;color:var(--text-bright,#fff)}
.gp-kpi span{font-size:11px;color:#8a97a4}
.gp-kpi.wa{border-color:#7a5a1a;background:#1e1808}
.gp-sec{margin-bottom:20px}
.gp-sec h3{font-size:14px;margin:0 0 9px;color:#c7d0d9}
.gp-riscos{display:flex;flex-direction:column;gap:8px}
.gp-risco{border-left:3px solid #445;background:#121820;border-radius:0 8px 8px 0;padding:9px 13px}
.gp-risco b{display:block;font-size:13px;color:var(--text)}
.gp-risco-acao{font-size:12px;color:#5FBF8F}
.gp-risco-itens{font-size:11px;color:#8a97a4;margin-top:3px}
.gp-r-gargalo{border-color:var(--accent)}.gp-r-parado{border-color:#E5604D}.gp-r-organizacao,.gp-r-organização{border-color:var(--blue)}
.gp-fila{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.gp-fila li{font-size:13px;padding:7px 11px;background:#121820;border-radius:8px;border:1px solid var(--border,#1E2A38);color:#dbe3ea}
.gp-fila-st{font-size:10px;border-radius:4px;padding:1px 6px;margin-right:6px;font-weight:600}
.gp-st-in_progress{background:rgba(95,191,143,.16);color:#5FBF8F}.gp-st-to_do{background:#22303c;color:#9aa7b4}
.gp-fila-acao{display:block;font-size:11px;color:#8a97a4;margin-top:2px}
.gp-projs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.gp-proj{background:#131A22;border:1px solid var(--border,#1E2A38);border-radius:10px;padding:12px 14px}
.gp-proj-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.gp-proj-top b{font-size:13px;color:var(--text)}
.gp-chip{font-size:10px;border-radius:5px;padding:1px 7px;font-weight:600}
.gp-bar{height:7px;background:#22303c;border-radius:4px;overflow:hidden;margin-bottom:7px}
.gp-bar span{display:block;height:100%;background:#5FBF8F;border-radius:4px}
.gp-proj-nums{font-size:11px;color:#8a97a4}
.gp-warn{color:#E5604D;font-weight:600}
.gp-quando{font-size:11px;color:#6b7883;margin-top:16px}
.gp-empty{color:#8a97a4;padding:20px 0}
@media(max-width:640px){.gp-projs{grid-template-columns:1fr}.gp-kpi{min-width:88px;padding:8px 10px}.gp-head{gap:8px}}

/* TDR-983 — Histórico de Financiadores */
.fin-wrap{padding:8px 4px}
.fin-head h2{margin:0 0 4px;font-size:20px}
.fin-sub{color:#6b6b6b;font-size:13px;max-width:820px;margin:0 0 12px}
.fin-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.fin-input{padding:7px 10px;border:1px solid #ddd;border-radius:6px;min-width:220px}
.fin-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fin-kpi{background:#FAF7F2;border:1px solid #EDE6DA;border-radius:8px;padding:8px 14px;min-width:130px}
.fin-kpi b{display:block;font-size:20px}
.fin-kpi span{font-size:11px;color:#777}
.fin-tbl{overflow:auto}
.fin-ok{color:#2E7D5B;font-weight:600;cursor:help}
.fin-sem{color:#999;font-size:12px}
.fin-temas{font-size:12px;color:#666;max-width:220px}
@media (max-width:900px){.fin-kpis{gap:6px}.fin-kpi{min-width:104px;padding:6px 10px}.fin-temas{display:none}}
/* TDR-1027 — selo do revisor da Pré-Seleção */
.rb-revisor{font-size:9px;font-weight:700;border:1px solid;border-radius:4px;padding:0 4px;margin-left:5px;cursor:help;vertical-align:middle}

/* ============================================
   TDR-104 (Vênus, 17/jul/26): reforma da página Círculos e Papéis
   ============================================ */
/* 1. Cabeçalho de colunas só no 1º nível — nos GTs colapsa (larguras preservadas, ruído zero) */
.cp-gtbloco .cp-table thead th { padding:0 10px !important; font-size:0 !important; height:0 !important; line-height:0 !important; border-bottom:0 !important; }
/* 2. Linhas compactas — mata os vãos gigantes */
.cp-table td { padding:4px 10px !important; line-height:1.4; }
.cp-table { border-collapse:collapse; }
/* 3. Zebra sutil + hover de linha (tabelas longas ficam escaneáveis) */
.cp-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.015); }
.cp-table tbody tr:hover td { background:var(--bg-card-hover); }
/* 9. Headers do 1º nível com contraste melhor */
.cp-subbloco > div + div .cp-table thead th, .cp-subbloco .cp-table thead th { color:var(--text-secondary) !important; }
/* 5. Botões "+ Adicionar pessoa" viram pílulas tracejadas (affordance real) */
.cp-add-row button { border:1px dashed var(--border-light) !important; border-radius:12px !important; padding:3px 12px !important; transition:all var(--transition); }
.cp-add-row button:hover { color:var(--accent) !important; border-color:var(--accent) !important; background:var(--accent-dim) !important; }
/* 6. Nome da pessoa sinaliza o clique (abre o perfil) */
.cp-table td[data-col="pessoa"] span[onclick]:hover { text-decoration:underline; color:var(--text-bright) !important; }
/* 10. Toda célula editável dá sinal no hover (hoje é invisível) */
.cp-table .cp-edit:hover { background:var(--bg-card-hover); outline:1px dashed var(--border-light); outline-offset:-1px; }
/* 7. Chip de contagem na toolbar */
.cp-chip { font-size:11px; color:var(--text-secondary); border:1px solid var(--border); border-radius:12px; padding:2px 10px; background:var(--bg-surface); }
/* chips de projeto em 1 linha (nome longo trunca; o title mostra completo) */
.cp-table .cp-proj-chip { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }

/* ============================================
   CALENDÁRIO PADRÃO DO DASHBOARD (TDR-164 · combinado 17/jul/26)
   Toda edição de campo de DATA usa este calendário (flatpickr pt-BR, 1 mês,
   estilo Airbnb): popover flutuante, dias grandes clicáveis, dark do DS.
   ============================================ */
.flatpickr-calendar {
  background:var(--bg-card) !important;
  border:1px solid var(--border-light) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow-lg), 0 12px 40px rgba(0,0,0,.5) !important;
  font-family:'Figtree','Segoe UI',system-ui,sans-serif !important;
  padding:8px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display:none; }
.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekday { background:transparent !important; color:var(--text) !important; fill:var(--text) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color:var(--text-bright) !important; font-weight:700 !important; background:transparent !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background:var(--bg-surface); }
.flatpickr-weekday { color:var(--text-muted) !important; font-size:10px !important; font-weight:600 !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color:var(--text-secondary) !important; fill:var(--text-secondary) !important; border-radius:50%; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color:var(--text-bright) !important; fill:var(--text-bright) !important; background:var(--bg-card-hover); }
.flatpickr-day {
  color:var(--text) !important; border-radius:50% !important; border:1px solid transparent !important;
  font-weight:500; max-width:36px; height:36px; line-height:35px;
}
.flatpickr-day:hover { background:var(--bg-card-hover) !important; border-color:var(--border-light) !important; }
.flatpickr-day.today { border-color:var(--accent) !important; color:var(--accent) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background:var(--accent) !important; border-color:var(--accent) !important; color:var(--bg-base) !important; font-weight:700;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:var(--text-muted) !important; opacity:.45; }
.flatpickr-innerContainer { border:0 !important; }
.flatpickr-days { border:0 !important; }

/* ============================================================
   APP DE TELA INICIAL (PWA) — iPhone/Android · TDR-1605
   So entra em acao quando o dashboard roda como APP instalado
   (display-mode:standalone). No navegador normal, nada muda.
   Por que existe: em standalone o iOS entrega a tela INTEIRA, entao o
   conteudo passa por baixo do relogio/bateria (notch) e da barrinha de
   gestos embaixo. As variaveis env(safe-area-inset-*) sao a medida que o
   proprio iOS informa — nunca chutar pixel de aparelho.
   ============================================================ */
@media (display-mode: standalone) {
  /* 100dvh acompanha a barra do Safari sumindo/aparecendo; 100vh nao */
  .app { height:100dvh; }
  .sidebar { padding-top:env(safe-area-inset-top); }
  /* TDR-1954: a .topbar saiu; quem encosta no topo agora e o .content, e a barra de
     subabas (sticky) precisa respeitar o entalhe do iPhone. */
  .content { padding-top:calc(24px + env(safe-area-inset-top)); }
  .content {
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
  }
  /* nao deixa o "puxar pra atualizar" do iOS sacudir a tela inteira */
  body { overscroll-behavior-y:none; }
}

/* ============================================================
   MENU DE BAIXO DO CELULAR — TDR-1626 (pedido Alexandre 31/jul/26)
   No celular as duas primeiras camadas (SEÇÃO e MENU) vão pro rodapé, na
   zona do polegar; a terceira (PÁGINAS, as pílulas) fica no topo, como já era.
   Acima de 768px nada muda: some e a sidebar da esquerda volta a mandar.
   ============================================================ */
.mobilebar { display:none; }

@media (max-width:768px) {
  /* a sidebar da esquerda sai de cena — quem navega agora é a barra de baixo */
  .sidebar { display:none; }

  /* A faixa que sobra ABAIXO do nosso viewport (barrinha de gestos do iPhone)
     e pintada pelo html, nao pelo app. Pintando o html com a cor da barra, o
     rodape parece encostar no fim da tela em vez de flutuar. TDR-1632. */
  html { background:var(--bg-sidebar); }

  .mobilebar {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--bg-sidebar); border-top:1px solid var(--border);
    /* --mb-safe e definido em tempo de execucao por App.ajustarRodapeMobile():
       vale env(safe-area-inset-bottom) SO quando o nosso viewport chega mesmo
       ao fim da tela; se o iOS ja reservou a faixa, vale 0 (senao conta dobrado
       e sobram 34pt de preto morto). Nunca chutar pixel de aparelho. */
    padding-bottom:var(--mb-safe, 0px);
    box-shadow:0 -6px 20px rgba(0,0,0,.45);
  }

  /* faixa 1 — SEÇÕES */
  .mb-secoes {
    display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:4px 6px 0;
    border-bottom:1px solid var(--border);
  }
  .mb-secoes::-webkit-scrollbar { display:none; }
  .mb-secao {
    /* flex:1 1 0 + minimo pequeno = as 5 secoes CABEM em 390px sem rolar */
    flex:1 1 0; min-width:0; background:transparent; border:none; cursor:pointer;
    font-family:inherit; font-size:9.5px; font-weight:700; letter-spacing:.2px;
    text-transform:uppercase; color:var(--text-muted);
    padding:7px 2px 6px; border-radius:6px 6px 0 0; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
    border-bottom:2px solid transparent; transition:var(--transition);
  }
  .mb-secao.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--accent-dim); }

  /* faixa 2 — MENUS da seção aberta (4 a 5 itens: cabe sem rolar) */
  .mb-menus {
    display:flex; gap:2px; padding:5px 6px 6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mb-menus::-webkit-scrollbar { display:none; }
  .mb-menu {
    flex:1 1 0; min-width:60px; background:transparent; border:none; cursor:pointer;
    font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 4px; border-radius:9px; color:var(--text-secondary); transition:var(--transition);
  }
  .mb-menu.active { color:var(--accent); background:var(--accent-dim); }
  .mb-menu .mb-ico { display:flex; line-height:0; }
  .mb-menu .mb-ico svg { width:19px; height:19px; }
  .mb-menu .mb-lbl {
    font-size:9.5px; font-weight:600; line-height:1.15; text-align:center;
    /* ALTURA TRAVADA em 2 linhas (TDR-1632): "Estrategia Captacao" quebra em
       duas e "Propostas" nao — sem esta trava a barra mudava 10pt de altura de
       uma secao pra outra e o rodape "pulava" ao trocar de secao. */
    height:calc(2 * 1.15em); display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
  }

  /* folga do conteudo = altura REAL da barra (medida no JS) + um respiro.
     Numero escrito a mao envelhece quando a barra muda; medido, nao. TDR-1632. */
  .content { padding-bottom:calc(var(--mb-altura, 92px) + 12px); }
}

/* Tela bem estreita (iPhone SE, 320px): so encolhe a letra da faixa de secoes,
   pra "Dashboard" e "Captacao" nao virarem reticencias. TDR-1626. */
@media (max-width:360px) {
  .mb-secao { font-size:8.5px; letter-spacing:0; padding:7px 1px 6px; }
  .mb-menu .mb-lbl { font-size:9px; }
}

/* ==========================================================================
   TDR-2463 — EDIÇÃO DE LINHA PELO BOTÃO "⋯"  (Design System §4.6.1, regra 15)
   Alexandre, 20/ago/26: "toda tabela que permite edição precisa abrir um modal
   seguindo o design system de modal com os campos de edição e um botão ...
   padrão ao final da linha à direita para abrir esse modal."
   O botão é discreto em repouso e ganha contorno no hover da linha — presença
   sem poluição, que é o critério da Vênus para affordance em tabela densa.
   ========================================================================== */
.col-acoes { width: 34px; }
.btn-row-edit {
  font-family: inherit; font-size: 15px; line-height: 1;
  padding: 1px 7px; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent;
}
tr:hover > td > .btn-row-edit { color: var(--text-secondary); border-color: var(--border-light); }
.btn-row-edit:hover { color: var(--text-bright); background: var(--bg-card-hover); border-color: var(--accent); }
.btn-row-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.row-edit-campo { display: block; margin-bottom: 12px; }
.row-edit-campo > span {
  display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em;
}
.row-edit-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12.5px;
  padding: 7px 9px; border-radius: 5px; color-scheme: dark;
  background: var(--bg-page); color: var(--text); border: 1px solid var(--border-light);
}
.row-edit-input:focus { outline: none; border-color: var(--accent); }
textarea.row-edit-input { resize: vertical; min-height: 62px; }
.row-edit-erro { font-size: 11.5px; color: var(--red, #e05252); min-height: 15px; margin-top: 4px; }

/* ── TDR-2928 — SELO DO VALOR NO CABEÇALHO DO CARD (26/ago/26) ──────────────────────────
   Mockup 2, aprovado pelo Alexandre. As cores da paleta que ele escolheu entram como FUNDO,
   não como texto: sobre o card escuro elas dão contraste 1,32 e 1,40 (o mínimo é 4,5), e
   como fundo com o creme por cima dão 11,9 e 11,2. Mesma cor, papel certo.

   O terceiro estado NÃO é enfeite: 42% dos cards não sabem dizer de onde veio o valor, e
   pintá-los de estimado seria a tela afirmando o que ninguém conferiu. Ele é tracejado e
   sem cor de propósito — quem não sabe não deve parecer que sabe. */
.vl-selo{
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:6px;
  font-weight:800; font-size:14px; font-variant-numeric:tabular-nums;
  white-space:nowrap; letter-spacing:-.01em;
}
.vl-est{ background:var(--terracota); color:var(--creme); }
.vl-dec{ background:var(--azul-noite); color:var(--creme); }
.vl-sei{ background:transparent; color:var(--text-muted); border:1px dashed var(--border-light); font-weight:600; }

/* TDR-3075 (26/ago/26) — A FAIXA DE AVISO DO TOPO.

   Ela existe para uma coisa só: dizer que algo quebrou num lugar que ele vê sem procurar. O
   primeiro caso é o envio de e-mail — se o canal de e-mail quebrar, o aviso não pode ir por e-mail.

   POR QUE VERMELHA E NÃO AMARELA: amarelo é "atenção", e atenção se ignora. Esta faixa só acende
   quando algo que deveria ter acontecido NÃO aconteceu, e isso é falha, não aviso. Se um dia ela
   acender por coisa pequena, o problema é quem acendeu — não a cor.

   POR QUE `hidden` POR PADRÃO: faixa que mora na tela vazia treina o olho a pular a região. Ela
   aparece só com conteúdo, e some sozinha quando o problema é resolvido no banco. */
.aviso-topo {
  margin: 0 0 14px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--red, #b3261e);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--red, #b3261e) 12%, transparent);
  color: var(--text-bright, #fff);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.aviso-topo[hidden] { display: none; }
.aviso-topo b { color: var(--red, #ff8b80); }
.aviso-topo .aviso-desde { color: var(--text-muted, #9c968e); font-size: 12.5px; }