/* Modo apresentação — esconde o que não pode aparecer numa tela virada pro
   cliente. Estado em core/apresentacao.service.js (compartilhado entre
   main.js e features/projetos/); este CSS é só a parte visual, não conhece
   nenhum dos dois. Fica em features/apresentacao/ (e não em estilo.css)
   pelo mesmo padrão que features/projetos/projetos.css já usa: CSS por
   feature, um <link> dedicado no index.html.

   O que esconde:
   - .valor-rs: qualquer trecho que mostra reais, marcado à mão nas telas de
     Projetos e Tarefas (ver relatório da Task 15 pra lista completa).
   - .kpi-valor: o card de KPI inteiro quando o valor É o KPI (ex: "Valor em
     carteira") — esconder só o número deixaria o rótulo órfão.
   - [data-view="leads"|"metas"|"dashboard"|"tarefas"]: os itens do menu
     lateral pra essas 4 telas ficam inalcançáveis enquanto o modo está
     ligado. Comercial = funil de prospecção; Metas e Dashboard têm valores e
     KPIs; Tarefas lista tarefas de TODOS os clientes (nome de cliente no
     card, dropdown de projeto) — vazaria outros clientes numa tela virada
     pro cliente. As tarefas do projeto apresentado já aparecem dentro do
     próprio detalhe do projeto (não se perde nada). main.js garante que o
     boot nunca abre nelas com apresentação ativa (evita depender só do CSS
     pra não vazar por trás da faixa).

   Paleta da marca: ciano #00E4FC sobre escuro (mesmo tom hardcoded que
   features/projetos/projetos.css já usa pra barra de progresso — não o
   var(--cyan) de estilo.css, que é um tom levemente diferente, #00E5FF). */

body.apresentando .valor-rs,
body.apresentando .kpi-valor,
body.apresentando [data-view="leads"],
body.apresentando [data-view="metas"],
body.apresentando [data-view="dashboard"],
body.apresentando [data-view="tarefas"],
body.apresentando [data-view="cerebro"],
body.apresentando #viewCerebro{ display:none !important; }

/* Faixa fixa no topo — nunca deixa o modo ligado em silêncio (persiste em
   localStorage, sobrevive a reload). Abaixo dela, empurra o resto do app
   (padding no body) e realinha os elementos que também ficam grudados no
   topo (barra superior e menu lateral), pra nada ficar por baixo. */
body.apresentando{ padding-top:40px; }
body.apresentando .topbar{ top:40px; }
body.apresentando .sidebar{ top:40px; height:calc(100vh - 40px); }

.faixa-apres{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:40px; padding:0 16px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#00E4FC; color:#04222a;
  font-size:13px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
.faixa-apres button{
  background:rgba(4,34,42,.14); color:#04222a; border:1px solid rgba(4,34,42,.4);
  border-radius:999px; padding:5px 14px; font-size:12px; font-weight:700;
}
.faixa-apres button:hover{ background:rgba(4,34,42,.26); }