/* ==========================================================================
   DataHub Itaú -- base compartilhada (reset, tokens, topbar, login, home, chat)
   Identidade visual Banco Itaú (laranja #FF6201 + azul #2A3189 + cinza
   #E9EDEE -- paleta oficial confirmada em itau.com.br, Poppins, topbar
   escura com o mesh de marca) -- adaptado do template genérico
   (datahub-generico), que usava a paleta 4Data Driven. Trocar de marca de
   novo é só editar as variáveis abaixo (e os assets em src/frontend/img/) --
   nenhuma cor fica hardcoded fora daqui, exceto BRAND_COLORS em
   comms_overview.js (paleta do gráfico).
   ========================================================================== */

/* Tipografia oficial Itaú (Itaú Display Pro, pacote 2022 baixado do portal
   de marca) -- decisão tomada em 2026-09-17 (era experimento, aprovada
   depois de comparar com a Poppins antiga), aplicada em toda a aplicação.
   Arquivos em fonts/itau-display-pro/ (WOFF2 + WOFF, sem EOT -- só
   navegador moderno).

   Pesos MEDIDOS de verdade (usWeightClass real de cada arquivo .ttf via
   fontTools, não o nome do arquivo -- "Heavy" parecia semanticamente uma
   opção "média" pelo nome, mas na real é 850, mais pesado que ExtraBold):
   Lt=300, Rg=400, Bd=700, XBd=800, He=850, Blk=900. Só 5 pesos entram no
   @font-face -- "He" (850) fica de fora de propósito: não existe "Medium"
   (500)/"SemiBold" (600) de verdade nesta família, e o resto do CSS usa
   bastante `font-weight: 500` pra texto discreto (Big Numbers, labels de
   filtro, input de data...). Um 1º mapeamento errado (nesta sessão) tinha
   posto "He" em 500 -- isso fazia TODO texto com `font-weight: 500` do app
   inteiro renderizar quase preto (850 de verdade) em vez de discreto,
   causa raiz de várias telas "parecendo grossas demais" reportadas pelo
   Mario/Eduarda. Corrigido tirando o "He" da lista -- sem uma face pra
   500, o navegador cai sozinho pro 400 (Regular) nesse caso (regra padrão
   de font-matching do CSS: pedido de 500 sem face exata cai pro 400 mais
   próximo), que é exatamente o "mais fino" pedido. */
/* ascent-override/descent-override/line-gap-override (medidos via fontTools
   nos 5 arquivos, arquivo por arquivo -- idênticos nos 5): a fonte declara
   ascent=104.3% do em/descent=24.4% (hhea E OS/2, com o bit "use typo
   metrics" ligado -- soma 128.7%, bem mais alta que o normal). O ponto mais
   alto/baixo de tinta de verdade em qualquer glyph do arquivo (dígito,
   maiúscula acentuada, pontuação) é só 92%/-26.9% (bbox global do `head`) --
   ou seja, a fonte reserva ~12 pontos percentuais de "ascent" que nenhum
   caractere real usa. Como CSS/SVG posicionam texto pelas métricas
   DECLARADAS da fonte (não pela tinta real do glyph -- `line-height: 1`,
   `dominant-baseline: central` em SVG etc.), esse excesso empurra o topo do
   número pra fora de qualquer container com altura justa + `overflow:
   hidden` (o que causava números cortando em cima em várias telas, herdado
   de CSS ajustado pra Poppins/fallback, que tinha um ascent bem mais
   contido). Os 3 descritores abaixo corrigem só as métricas de LAYOUT (não
   redesenham o glyph) pra bater com o que os caracteres realmente usam, com
   uma folga pequena -- suportado em todo navegador moderno (Chrome 87+/
   Firefox 89+/Safari 16.4+).

   Folga aumentada em 2026-09-21 (92% -> 97% no ascent-override): a folga
   original deixava a tinta real encostando quase exato na borda de cima da
   "normal line-height" -- qualquer elemento com essa altura + `overflow:
   hidden` (ex. `.exp-bar-value`, valor do gráfico "Inserções por
   Diretoria") cortava uma fatia fina do topo de alguns dígitos (mais
   visível no "1", que tem o traço mais vertical/alto da fonte), reportado
   pelo Mario/Eduarda com print real. 97%/30% dá uma margem de verdade (não
   só arredondamento) sem distanciar tanto do bbox real a ponto de voltar a
   parecer "flutuando" dentro da linha. */
@font-face {
  font-family: "Itau Display Pro";
  src: url("/fonts/itau-display-pro/ItauDisplayPro_W_Lt.woff2") format("woff2"),
       url("/fonts/itau-display-pro/ItauDisplayPro_W_Lt.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
  ascent-override: 97%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Itau Display Pro";
  src: url("/fonts/itau-display-pro/ItauDisplayPro_W_Rg.woff2") format("woff2"),
       url("/fonts/itau-display-pro/ItauDisplayPro_W_Rg.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 97%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Itau Display Pro";
  src: url("/fonts/itau-display-pro/ItauDisplayPro_W_Bd.woff2") format("woff2"),
       url("/fonts/itau-display-pro/ItauDisplayPro_W_Bd.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
  ascent-override: 97%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Itau Display Pro";
  src: url("/fonts/itau-display-pro/ItauDisplayPro_W_XBd.woff2") format("woff2"),
       url("/fonts/itau-display-pro/ItauDisplayPro_W_XBd.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
  ascent-override: 97%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Itau Display Pro";
  src: url("/fonts/itau-display-pro/ItauDisplayPro_W_Blk.woff2") format("woff2"),
       url("/fonts/itau-display-pro/ItauDisplayPro_W_Blk.woff") format("woff");
  font-weight: 900; font-style: normal; font-display: swap;
  ascent-override: 97%; descent-override: 30%; line-gap-override: 0%;
}

:root {
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #e9edee;
  --border: #dde2e3;
  --border-soft: #e9edee;
  --text: #232224;
  --text-muted: #8a898b;
  --text-soft: #a3a2a4;

  --accent: #ff6201;
  --accent-hover: #ff8c33;
  --accent-dim: rgba(255, 98, 1, 0.10);
  --accent-text: #ffffff;

  --green: #16a34a;
  --red: #dc2626;
  --yellow: #d97706;
  --blue: #2563eb;

  /* Azul institucional Itaú -- reservado pra pontos de texto/detalhe que
     queiram remeter à marca sem competir com o laranja (--accent segue
     sendo a cor de ação/destaque, igual ao app do Itaú). */
  --brand-navy: #2a3189;

  /* Topbar (fundo escuro de marca, contido -- ver login abaixo pro momento "drenched") */
  --dark-bg: #2a3189;
  --dark-border: rgba(255, 255, 255, 0.1);
  --dark-text: #f5f5f6;
  --dark-text-muted: rgba(245, 245, 246, 0.62);

  /* Login -- único momento "de marca" cheio (foto genérica de escritório +
     véu azul/laranja da marca por cima, no lugar do glow abstrato do
     template genérico). */
  --login-black: #12163f;

  --radius: 10px;
  --radius-lg: 14px;
  /* "Poppins" mantida como fallback (link do Google Fonts continua em todo
     template) -- se a Itaú Display Pro não carregar por algum motivo, cai
     nela em vez de ir direto pro fallback de sistema. */
  --font: "Itau Display Pro", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.info-icon, .warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
}
.info-icon { border: 1px solid var(--text-soft); color: var(--text-muted); }
.warn-icon { color: var(--yellow); border: none; font-size: 15px; }
/* Mesmo bug de sempre (ver CLAUDE.md) -- .warn-icon é escondido/mostrado
   via `hidden` (ex. ov-evolution-warn), mas o `display: inline-flex` do
   bloco compartilhado acima cancela o display:none nativo do atributo, sem
   isso o ícone aparecia sempre, mesmo com hidden=true. */
.warn-icon[hidden] { display: none; }

/* ==========================================================================
   Topbar -- "estrutura padrão" branca/clean, compartilhada por TODA tela
   depois do login (a home é a única exceção, sem topbar nenhum). Nasceu no redesign do Overview (referência: tela Comms
   Overview do DiDi GA) e foi promovida daqui pra `style.css` (2026-09-02,
   pedido do Mario: "documentado pra próximas telas a gente não ter que
   repetir") -- não duplicar essas regras por tela, só a MARCAÇÃO (back
   button + nome da tela) muda de um template pro outro, sempre com as
   mesmas classes. Substituiu a versão anterior (navy escuro + padrão
   mesh.svg) -- login continua com identidade própria (`.login-shell`), não
   usa nada daqui.
   ========================================================================== */

.topbar {
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.topbar-back-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* Logo + nome centralizados de verdade (não "sobra de espaço") -- absolute
   + translateX a partir do centro do .topbar (que já é o "position"
   necessário pra isso funcionar, por ser sticky). */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topbar-brand:hover { background: var(--surface-2); }

.topbar-brand-mark { height: 22px; width: auto; display: block; }

.topbar-actions { display: flex; align-items: center; gap: 14px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-name { font-size: 12.5px; color: var(--text-muted); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-link { font-size: 12px; color: var(--text-muted); }
.logout-link:hover { color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Wordmark de marca (compartilhado: login + topo da home) -- logo +       */
/* uma única linha "Data Intelligence Datahub". Tamanho/alinhamento        */
/* default pensado pro card do login (centralizado, compacto); a home usa  */
/* .home-brand-block pra sobrescrever pra maior + alinhado à esquerda.     */
/* ---------------------------------------------------------------------- */

.brand-mark {
  height: 30px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
}

.brand-tagline {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.brand-tagline .accent { color: var(--accent); }
.login-card .brand-tagline { margin-bottom: 26px; }

.home-brand-block { margin-bottom: 28px; }
.home-brand-block .brand-mark { height: 44px; margin: 0 0 16px; }
/* Tagline diferente do título "Comms Data Hub": mais leve, menor e em cinza
   (só "Comunicação" em laranja, um pouco mais forte). */
.home-brand-block .brand-tagline { font-size: 17px; font-weight: 400; letter-spacing: 0.01em; color: var(--text-muted); }
.home-brand-block .brand-tagline .accent { font-weight: 600; }
/* Marca Comms Data Hub na home -- mesmo ícone/cores do topo dos dashboards,
   em tamanho maior. */
.home-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.home-logo-mark {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #fff3ea; color: #c85f20; flex-shrink: 0;
  border: 2px solid #c85f20; box-sizing: border-box;
}
.home-logo-mark svg { display: block; }
.home-logo-text { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
/* Logo da 4Data Driven na mesma linha, encostado à direita. */
.home-logo-4dd { height: 28px; width: auto; display: block; margin-left: auto; }
@media (max-width: 560px) { .home-logo-4dd { height: 20px; } }

/* ---------------------------------------------------------------------- */
/* Login                                                                    */
/* ---------------------------------------------------------------------- */

/* O login é o único ecrã "drenched" do produto (ver PRODUCT.md): a foto
   oficial do Comms DataHub (commsdatahub.com.br/assets/app/fundo-login-...
   -- pessoa sorrindo no celular à esquerda, ambiente de escritório desfocado
   em P&B à direita, deixando o lado direito "vazio" de propósito pro card).
   Um véu leve azul/laranja da marca por cima só pra "assinar" a tela e
   garantir contraste, sem esconder a foto. O resto do produto (topbar, home,
   dashboard) fica no registro "sober report" de sempre -- não usar
   --login-black fora daqui. O card é deliberadamente da 4Data Driven
   (agência que constrói/mantém o portal, ver rodapé), não do Itaú -- a marca
   Itaú aparece a partir da home em diante, não no login. */

.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--login-black) url("/img/login-bg.jpg") center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* Véu bem leve (a foto já tem fundo claro do lado do card -- escurecer
   demais tiraria justamente a área que a foto deixou livre pra ele) +
   um glow laranja discreto atrás do card, pra "assinar" com a marca. */
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 22, 63, 0.35) 0%, rgba(18, 22, 63, 0.12) 40%, rgba(18, 22, 63, 0.22) 100%);
}
.login-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 60% at 78% 48%, rgba(255, 98, 1, 0.16) 0%, transparent 65%);
}

/* Escurece topo/base da foto pra o rodapé nunca perder contraste (o card
   tem seu próprio box-shadow pra se destacar do fundo claro atrás dele). */
.login-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8, 9, 20, 0.28) 0%, transparent 22%, transparent 68%, rgba(8, 9, 20, 0.55) 100%);
}

/* Área principal -- o card fica puxado pro lado direito (onde a foto
   oficial deixa espaço livre), recentralizando em telas estreitas onde a
   pessoa da foto e o card não cabem lado a lado. */
.login-main {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (min-width: 860px) {
  .login-main { justify-content: flex-end; padding-right: 9vw; }
}

/* Tudo dentro do card branco, nesta ordem: logo 4Data Driven, nome do
   produto ("Comms DataHub"), subtítulo com o cliente, botão Google. */
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.login-card-logo { height: 26px; width: auto; display: block; margin: 0 auto 20px; }

.login-product-name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.login-product-sub {
  margin: 0 0 26px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.login-product-sub .accent { color: var(--accent); font-weight: 700; }

/* .btn-google/.btn-microsoft compartilham o .btn-oauth -- a tela de login
   mostra um botão por provider de fato configurado, então podem aparecer
   os dois empilhados. */
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.btn-oauth:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.btn-oauth + .btn-oauth { margin-top: 10px; }

/* ---- Rodapé (atribuição "Powered by 4Data Driven" + 3 links: LinkedIn /
   Site / Fale Conosco -- canais da 4Data Driven, a agência que constrói e
   mantém este portal pro Itaú, não canais do próprio Itaú) ---- */

.login-footer {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 24px 28px;
}
.login-footer-caption {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 245, 246, 0.32);
}
.login-footer-links { display: flex; align-items: center; justify-content: center; gap: 18px; }
.login-footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 245, 246, 0.5);
}
.login-footer-link:hover { color: var(--dark-text); }
.login-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(245, 245, 246, 0.25); flex-shrink: 0; }

@media (max-width: 480px) {
  .login-footer-links { flex-wrap: wrap; gap: 12px 16px; }
}

.login-dev-box {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
  text-align: left;
}
.login-dev-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 5px;
  padding: 2px 6px;
  margin-bottom: 10px;
}
.login-dev-box p { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.login-dev-box form { display: flex; gap: 8px; }
.login-dev-box input {
  flex: 1;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.login-dev-box button {
  padding: 9px 14px;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.login-dev-box button:hover { background: var(--accent-hover); }

.login-error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red);
  font-size: 12.5px;
  text-align: left;
}

/* ---------------------------------------------------------------------- */
/* Home (busca + dashboards)                                               */
/* ---------------------------------------------------------------------- */

.home-utility-bar {
  position: fixed;
  top: 18px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 50;
}

.home-view {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.home-content {
  width: 100%;
  max-width: 720px;
  padding: 64px 24px 60px;
  text-align: left;
}


.home-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 8px 30px rgba(20, 20, 31, 0.05);
}
.home-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.home-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  padding: 10px 0;
  color: var(--text);
}
.home-search::placeholder { color: var(--text-soft); }

.home-send-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 11px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
}
.home-send-btn:hover { background: var(--accent-hover); }

/* Sugestões como lista de texto limpa (referência: comms_home do DiDi GA) --
   nada de chips/botões em repouso, só uma linha que ganha fundo/seta no
   hover. */
.home-suggestions { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; text-align: left; }

.home-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-soft);
  text-align: left;
}
.home-suggestion-row:hover { border-color: var(--border); background: var(--surface); color: var(--text-muted); }

.home-suggestion-arrow { flex-shrink: 0; color: transparent; transition: transform .15s, color .15s; }
.home-suggestion-row:hover .home-suggestion-arrow { color: var(--text-muted); transform: translateX(2px); }

/* Chat inativo -- mesmo tratamento visual dos cards "Coming soon"
   (.feature-item.soon abaixo): visível, esmaecido, sem cursor de clique. */
.home-search-wrap.soon, .home-suggestions.soon { opacity: 0.35; }
.home-search-wrap.soon:focus-within { border-color: var(--border); box-shadow: 0 8px 30px rgba(20, 20, 31, 0.05); }
.home-search-wrap.soon .home-search, .home-suggestion-row:disabled { cursor: default; }
.home-suggestion-row:disabled:hover { border-color: transparent; background: transparent; color: var(--text-soft); }

.features-title-primary { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 46px 0 14px; text-align: left; }

.features-grid-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .features-grid-primary { grid-template-columns: 1fr; }
}

.feature-item {
  position: relative;
  display: block;
  text-align: left;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.feature-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background .15s; }
.feature-item:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,20,31,0.06); }
.feature-item:hover::before { background: var(--accent); }
/* Ícone de linha (SVG, macro `icon` da home) num quadrado laranja claro --
   mesmo tratamento da marca "Comms Data Hub" do header dos dashboards. */
.feature-item-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px;
  background: #fff3ea; color: #c85f20;
}
.feature-item-icon svg { width: 20px; height: 20px; display: block; }

.feature-item-name { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.feature-item-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.feature-item.soon { opacity: 0.35; cursor: default; }

/* Painel de Acessos (home) -- mesmo card da grade de Dashboards, mas com
   borda laranja da marca + etiqueta "Restrito" no canto: só uma lista fixa de
   pessoas vê, não faz parte da suíte de dashboards de Comms. */
.feature-item-restricted { border: 1.5px solid var(--accent); }
.feature-item-restricted:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(255, 98, 1, 0.16); }
.feature-item-restricted:hover::before { background: var(--accent); }
.feature-item-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff;
}
.feature-item.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
.feature-item.soon:hover::before { background: transparent; }

/* Card "duplo" (Outras funcionalidades, na home) -- o card em
   si não é mais um <a> só (não faz sentido "clicar no card inteiro" quando
   ele leva a 2 lugares diferentes): vira um <div>, com até 2 links de ação
   (Adicionar/Editar) dentro. Sem hover de "levantar" o card inteiro (esse
   efeito só faz sentido pra um card-link único) -- o hover vive só nos
   botões de ação, ver .feature-item-action.

   `min-height` fixo -- os 4 cards nem sempre caem na mesma linha do grid
   (3 numa linha + 1 sozinho na de baixo, dependendo de quantos o usuário
   tem acesso), então o `align-items: stretch` automático do grid (que só
   iguala altura DENTRO da mesma linha) não bastava pra igualar os 4 entre
   si -- um valor fixo resolve independente de quantos ficam em cada linha. */
.feature-item-dual {
  display: flex;
  flex-direction: column;
  min-height: 104px;
}
.feature-item-dual:hover { transform: none; box-shadow: none; border-color: var(--border); }
.feature-item-dual:hover::before { background: transparent; }

/* Botões menores (cabem os 2 lado a lado sem estourar a largura do card) e
   `flex: 1` -- dividem a largura do card igualmente entre si (ou ocupam
   ela inteira sozinhos, se só um dos dois estiver liberado pro usuário) em
   vez de crescer no tamanho do próprio texto, que era o que empurrava
   "Editar" pra fora/pro fundo do card quando os dois textos juntos não
   cabiam numa linha só. */
.feature-item-actions { display: flex; gap: 6px; margin-top: 10px; }
.feature-item-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.feature-item-action:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.feature-item-action svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Chat                                                                     */
/* ---------------------------------------------------------------------- */

.chat-view { display: flex; flex-direction: column; height: calc(100vh - 56px); }

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.chat-new-btn { border: none; background: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.chat-new-btn:hover { color: var(--text); text-decoration: underline; }

.chat-messages { flex: 1; overflow-y: auto; padding: 26px 18px; }
.chat-messages-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.msg-row { display: flex; gap: 10px; align-items: flex-start; }
.msg-row.user { justify-content: flex-end; }

.msg-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.msg-row.bot .msg-avatar { background: var(--accent); color: #fff; }
.msg-row.user .msg-avatar { background: var(--surface-2); color: var(--text-muted); }

.msg-bubble {
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.msg-row.bot .msg-bubble { background: var(--surface); border: 1px solid var(--border); }
.msg-row.user .msg-bubble { background: var(--accent); color: #fff; }

.msg-bubble.loading { color: var(--text-soft); font-style: italic; }
.msg-bubble.error { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); color: var(--red); }

.chat-input-bar {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 18px 20px;
}
.chat-input-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px 5px 5px 16px;
}
.chat-input-inner:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.chat-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13.5px; padding: 9px 0; color: var(--text);
}
.chat-send-btn { border: none; background: var(--accent); color: #fff; border-radius: 10px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }
.chat-fake-note { max-width: 760px; margin: 8px auto 0; font-size: 11px; color: var(--text-soft); text-align: center; }

/* ---------------------------------------------------------------------- */
/* Admin (/admin/users) -- deliberadamente simples/sem graça, é só uma      */
/* tabela + form. Ninguém além de quem já é admin chega nela (ver          */
/* o gate de admin do back-end, 404 pra quem não é).                       */
/* ---------------------------------------------------------------------- */

.admin-view { min-height: calc(100vh - 56px); display: flex; justify-content: center; }
.admin-content { width: 100%; max-width: 820px; padding: 56px 24px 60px; }

.admin-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.admin-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.admin-sub { margin: 0 0 28px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.admin-error { margin: 0 0 20px; }

.admin-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.admin-form input[type="email"] {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: var(--font);
}
.admin-form input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.admin-form-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.admin-form-check input { accent-color: var(--accent); }
.admin-form-submit { border: none; background: var(--accent); color: #fff; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700; }
.admin-form-submit:hover { background: var(--accent-hover); }

.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border-soft); }
.admin-table th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-muted { color: var(--text-soft); }
.admin-table-actions { text-align: right; }

.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--accent-dim); color: var(--accent); }
.admin-badge-muted { background: var(--surface-2); color: var(--text-soft); }

.admin-remove-btn { border: none; background: transparent; color: var(--red); font-size: 11.5px; font-weight: 600; }
.admin-remove-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* Admin -- acesso por dashboard/funcionalidade, por usuário (feature-level  */
/* access control, catálogo no back-end). Admins têm acesso total           */
/* sempre -- os checkboxes continuam editáveis/salvos pra eles (valem se um */
/* dia forem rebaixados), só não têm efeito enquanto seguem admin.          */
/* ---------------------------------------------------------------------- */

.perm-empty {
  padding: 18px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
  font-size: 12.5px;
  text-align: center;
}

.perm-card-save {
  border: none;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.perm-card-save:hover { background: var(--accent); color: #fff; }

.perm-group-title {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}
.perm-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 5px 0;
  cursor: pointer;
}
.perm-check input { accent-color: var(--accent); flex-shrink: 0; }
.perm-check:hover { color: var(--text); }

.perm-check-strong { color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* ---------------------------------------------------------------------- */
/* Dropdown de seleção múltipla por linha (Dashboards/Outras funcionalidades/ */
/* Gerência em /admin/users) -- mesma ideia visual do .filter-multiselect   */
/* do topo da página, só que 1 instância por linha da tabela e "portado"    */
/* pro <body> (position: fixed) em vez de posicionado relativo à própria   */
/* célula -- `.admin-table-wrap` tem overflow-x: auto, um painel relativo   */
/* ficaria cortado/mal posicionado ao rolar a tabela pros lados.            */
/* ---------------------------------------------------------------------- */

.row-ms { position: relative; }
.perm-select {
  min-width: 150px;
  padding: 6px 28px 6px 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  appearance: none;
  cursor: pointer;
}

.row-ms-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 150px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.row-ms-btn:hover { border-color: var(--accent); }
.row-ms-btn:disabled { color: var(--text-soft); cursor: default; }
.row-ms-btn:disabled:hover { border-color: var(--border); }
.row-ms-caret { flex-shrink: 0; color: var(--text-soft); }

.row-ms-panel {
  position: fixed;
  z-index: 1000;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(20, 20, 31, 0.16);
}
.row-ms-actions { display: flex; gap: 14px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.row-ms-action { border: none; background: none; padding: 0; color: var(--accent); font-size: 11px; font-weight: 700; }
.row-ms-action:hover { text-decoration: underline; }
.row-ms-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); padding: 4px 0; cursor: pointer; }
.row-ms-check input { accent-color: var(--accent); flex-shrink: 0; }
.row-ms-check:hover { color: var(--text); }

/* ---------------------------------------------------------------------- */
/* Admin -- tabelona de usuários (busca + filtro múltiplo de permissão +   */
/* edição inline por linha). admin-content-wide alarga o container padrão  */
/* (820px) só nesta tela -- a tabela tem muitas colunas.                   */
/* ---------------------------------------------------------------------- */

.admin-content-wide { max-width: 1180px; }

.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

.admin-search-wrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.admin-search-icon { color: var(--text-soft); flex-shrink: 0; }
.admin-search { flex: 1; border: none; outline: none; background: none; font-size: 13px; font-family: var(--font); color: var(--text); }
.admin-search::placeholder { color: var(--text-soft); }

.filter-multiselect { position: relative; }
.filter-multiselect-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.filter-multiselect-btn:hover { border-color: var(--accent); }
/* [hidden] precisa de mais especificidade -- "display: inline-flex" abaixo
   cancela o display:none padrão do atributo hidden (mesmo padrão de
   comms_form_acao.css/comms_overview.css: toda classe com `display`
   explícito que também usa `hidden` precisa dessa regra extra). Sem isso, o
   badge "0" aparece sempre, mesmo sem filtro nenhum selecionado. */
.filter-multiselect-count[hidden] { display: none; }
.filter-multiselect-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.filter-multiselect-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(20, 20, 31, 0.12);
}
.filter-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); padding: 4px 0; cursor: pointer; }
.filter-check input { accent-color: var(--accent); flex-shrink: 0; }
.filter-check:hover { color: var(--text); }
.filter-check-strong { color: var(--text); font-weight: 700; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.filter-multiselect-clear {
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border: none;
  border-top: 1px dashed var(--border-soft);
  background: none;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
}
.filter-multiselect-clear:hover { text-decoration: underline; }

.admin-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
.admin-table-users { min-width: 980px; }
.admin-table-users th, .admin-table-users td { vertical-align: top; }

.admin-user-cell { display: flex; flex-direction: column; gap: 1px; }
.admin-user-name { font-weight: 700; }
.admin-user-email { font-size: 11px; color: var(--text-soft); }

.admin-role-toggle { position: relative; display: inline-flex; cursor: pointer; }
.admin-role-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.admin-role-badge { cursor: pointer; }

.admin-table-actions-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; }

.admin-table-empty-row td { text-align: center; color: var(--text-soft); padding: 24px 14px; }

.admin-permissions-hint { margin-top: 14px; }

/* "Carregando..." por gráfico nos dashboards -- aparece por cima do gráfico
   quando a troca de um botão/filtro demora a voltar do servidor (ver
   postJSON/showChartLoading em cada comms_*.js). */
.chart-loading-pos { position: relative; }
.chart-loading-host { min-height: 90px; }
.chart-loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(1.5px);
  border-radius: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  animation: chart-loading-in 0.15s ease-out;
}
.chart-loading-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  animation: chart-loading-spin 0.8s linear infinite;
}
@keyframes chart-loading-spin { to { transform: rotate(360deg); } }
@keyframes chart-loading-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- "Copiar como PNG" (chart_png.js) -- "..." no canto dos cards dos
   dashboards que não tinham menu próprio. Aparece ao passar o mouse no card
   (ou enquanto o menu está aberto), pra não poluir os Big Numbers.
   Seletor reforçado: o CSS de cada tela carrega depois e põe
   .xx-bar-menu-wrap { position: relative } -- sem isso o botão entrava no
   fluxo do card (aumentava a altura e ia pro rodapé). ---- */
.png-card > .png-corner-wrap.png-corner-wrap { position: absolute; top: 8px; right: 8px; left: auto; bottom: auto; margin: 0; z-index: 3; opacity: 0; transition: opacity 0.15s; }
.png-card > .png-corner-wrap.png-corner-wrap-low { top: 30px; }
.png-card:hover > .png-corner-wrap.png-corner-wrap,
.png-card > .png-corner-wrap.png-corner-wrap.open,
.png-card > .png-corner-wrap.png-corner-wrap:focus-within { opacity: 1; }
.png-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: #26262b; color: #fff; font-size: 13px; font-weight: 500;
  padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 20, 31, 0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 1000;
}
.png-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ⚠ de mês em curso posto pelo chart_png.js -- o símbolo vem daqui (não do
   texto do título), pra não entrar no nome do arquivo exportado. */
.warn-icon-auto { margin-left: 6px; vertical-align: middle; }
.warn-icon-auto::before { content: "\26A0"; }

/* ===================================================================
   Modo escuro dos dashboards (botão de lua ao lado de "Recolher",
   theme_toggle.js). Só troca fundo claro -> preto e texto escuro ->
   branco; cores de gráfico, marca, bordas e destaques ficam iguais.
   =================================================================== */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex-shrink: 0; margin-right: 16px;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--text-soft); cursor: pointer;
}
.theme-toggle-btn svg { display: block; }
.theme-toggle-btn .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: block; }
.theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

html[data-theme="dark"] {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-2: #1a1a1a;
  --text: #ffffff;
  color-scheme: dark;
}
/* Fundos claros escritos direto (sem token) */
html[data-theme="dark"] .ov-nav-tab.active,
html[data-theme="dark"] .esf-nav-tab.active,
html[data-theme="dark"] .exp-nav-tab.active,
html[data-theme="dark"] .cc-nav-tab.active,
html[data-theme="dark"] .lk-nav-tab.active { background: #1f1206; }
html[data-theme="dark"] .ov-period-group,
html[data-theme="dark"] .esf-period-group { background: var(--surface-2); }
html[data-theme="dark"] .esf-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .exp-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .cc-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .lk-table tbody tr:nth-child(even) td { background: #141414; }
html[data-theme="dark"] .esf-table tbody tr:hover td,
html[data-theme="dark"] .exp-table tbody tr:hover td,
html[data-theme="dark"] .cc-table tbody tr:hover td,
html[data-theme="dark"] .lk-table tbody tr:hover td { background: #1f1206; }
html[data-theme="dark"] .cc-ceos-summary { background: #1f1206; }
/* Etiqueta de fundo claro dentro da tabela (Tipo de ação em "Detalhe dos
   esforços"): o texto herdava o branco do modo escuro e sumia no fundo claro */
/* Pílula laranja clara do valor do Itaú nos evolutivos de Concorrentes
   (as variantes verde/vermelha/cinza já têm cor própria) */
html[data-theme="dark"] .cc-evo-chip-text:not(.cc-evo-chip-text-green):not(.cc-evo-chip-text-red):not(.cc-evo-chip-text-gray) { fill: #232224; }
html[data-theme="dark"] .esf-td-badge,
html[data-theme="dark"] .cc-news-badge { color: #232224; }
/* Pílulas de variação do LinkedIn: o verde/vermelho pastel some no preto */
html[data-theme="dark"] .lk-bn-delta-up,
html[data-theme="dark"] .lk-metric-delta span.up { color: #ffffff; background: #2e7d32; }
html[data-theme="dark"] .lk-bn-delta-down,
html[data-theme="dark"] .lk-metric-delta span.down { color: #ffffff; background: #c62828; }
/* Mesmo tratamento nas outras telas: fundo verde/vermelho forte, texto branco */
html[data-theme="dark"] .ov-bn-delta-up .ov-bn-delta-pill,
html[data-theme="dark"] .esf-bn-delta-up .esf-bn-delta-pill,
html[data-theme="dark"] .exp-bn-delta-up .exp-bn-subdelta-pill,
html[data-theme="dark"] .cc-ranking-delta-up { color: #ffffff; background: #2e7d32; }
html[data-theme="dark"] .ov-bn-delta-down .ov-bn-delta-pill,
html[data-theme="dark"] .esf-bn-delta-down .esf-bn-delta-pill,
html[data-theme="dark"] .exp-bn-delta-down .exp-bn-subdelta-pill,
html[data-theme="dark"] .cc-ranking-delta-down { color: #ffffff; background: #c62828; }
html[data-theme="dark"] .ov-bn-delta-up .ov-bn-delta-ly,
html[data-theme="dark"] .ov-bn-delta-down .ov-bn-delta-ly,
html[data-theme="dark"] .esf-bn-delta-up .esf-bn-delta-ly,
html[data-theme="dark"] .esf-bn-delta-down .esf-bn-delta-ly,
html[data-theme="dark"] .exp-bn-delta-up .exp-bn-subdelta-ly,
html[data-theme="dark"] .exp-bn-delta-down .exp-bn-subdelta-ly { color: rgba(255, 255, 255, 0.8); }
html[data-theme="dark"] .exp-gauge-delta-pill.exp-bn-delta-up { fill: #2e7d32; }
html[data-theme="dark"] .exp-gauge-delta-pill.exp-bn-delta-down { fill: #c62828; }
html[data-theme="dark"] .exp-gauge-delta-text.exp-bn-delta-up,
html[data-theme="dark"] .exp-gauge-delta-text.exp-bn-delta-down { fill: #ffffff; }
html[data-theme="dark"] .exp-gauge-delta-text.exp-bn-delta-up .exp-gauge-delta-ly,
html[data-theme="dark"] .exp-gauge-delta-text.exp-bn-delta-down .exp-gauge-delta-ly { fill: rgba(255, 255, 255, 0.8); }
html[data-theme="dark"] .esf-cal-day-today,
html[data-theme="dark"] .cc-ceos-tile { background: var(--surface); }
html[data-theme="dark"] .chart-loading-overlay { background: rgba(0, 0, 0, 0.72); }
html[data-theme="dark"] .ov-content-loading,
html[data-theme="dark"] .esf-content-loading,
html[data-theme="dark"] .exp-content-loading,
html[data-theme="dark"] .cc-content-loading,
html[data-theme="dark"] .lk-content-loading { background: rgba(0, 0, 0, 0.72); }
/* Texto escuro escrito direto (sem token) */
html[data-theme="dark"] .lk-bn-value,
html[data-theme="dark"] .lk-metric-value,
html[data-theme="dark"] .lk-donut-legend-value,
html[data-theme="dark"] .lk-col-value { color: #ffffff; }
html[data-theme="dark"] .cc-radar-label,
html[data-theme="dark"] .lk-donut-leader-value { fill: #ffffff; }
/* Valores sobre os gráficos: texto branco, contorno ("halo") preto */
html[data-theme="dark"] .ov-evo-bar-value,
html[data-theme="dark"] .esf-evo-bar-value,
html[data-theme="dark"] .exp-evo-total-value,
html[data-theme="dark"] .lk-evo-bar-value,
html[data-theme="dark"] .cc-evo-bar-value,
html[data-theme="dark"] .cc-gcol-value,
html[data-theme="dark"] .esf-bar-total,
html[data-theme="dark"] .exp-evo-bar-value,
html[data-theme="dark"] .ov-map-label,
html[data-theme="dark"] .esf-map-label,
html[data-theme="dark"] .exp-map-label,
html[data-theme="dark"] .cc-map-label { fill: #ffffff; stroke: rgba(0, 0, 0, 0.9); }

/* Modo escuro na home: o botão fica no canto superior direito (sem o
   recuo usado ao lado do Share nos dashboards) e o logo da 4Data Driven
   troca pela versão de letras brancas (o laranja continua igual). */
.home-utility-bar .theme-toggle-btn { margin-right: 0; }
.home-logo-4dd-dark { display: none; }
html[data-theme="dark"] .home-logo-4dd-light { display: none; }
html[data-theme="dark"] .home-logo-4dd-dark { display: block; }

/* ---- Ajuda (botão no canto superior direito da home + modal) ---- */
.help-open-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.help-open-btn:hover { border-color: var(--accent); color: var(--accent); }
.help-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(18, 22, 63, 0.35);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.help-backdrop[hidden] { display: none; }
.help-modal {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-lg); padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.help-close {
  position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.help-close:hover { color: var(--accent); }
.help-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); }
.help-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.help-type { position: relative; cursor: pointer; }
.help-type input { position: absolute; opacity: 0; pointer-events: none; }
.help-type span {
  display: block; text-align: center; padding: 10px 8px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.help-type input:checked + span { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.help-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.help-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.help-hint { font-size: 12px; color: var(--text-muted); }
.help-field input, .help-field select, .help-field textarea {
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
}
.help-field textarea { resize: vertical; min-height: 96px; }
.help-field input:focus, .help-field select:focus, .help-field textarea:focus { outline: none; border-color: var(--accent); }
.help-error { margin: 0 0 12px; font-size: 12.5px; color: var(--red); }
.help-error[hidden] { display: none; }
.help-submit {
  width: 100%; border: none; border-radius: var(--radius); background: var(--accent); color: var(--accent-text);
  padding: 11px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.help-submit:hover { background: var(--accent-hover); }
.help-submit:disabled { opacity: 0.6; cursor: default; }
.help-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--green); padding: 10px 0 2px; }
.help-done[hidden] { display: none; }
.help-done-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.help-done .help-hint { margin: 0 0 10px; }