/* ==========================================================================
   ex-portal.css — Design system "Extrajud v1" do Portal Extrajudicial CGJ-RJ.
   SPEC-001 · Tasks T030 (tokens + layout/navbar/masthead/home) e T031 (BI).

   Regras de ouro (02_DESIGN_TOKENS.md):
   - Todo token usa o prefixo --ex-v1- e vive dentro de .page-ex{} (claro) e
     .page-ex[data-theme="dark"]{} (escuro). Nenhuma outra regra declara token.
   - Toda regra deste arquivo é escopada em .page-ex — nunca colide com
     Bootstrap nem com o app.css global.
   - Nenhum hex/rgb solto fora do bloco de tokens: tudo consome var(--ex-v1-*).
   - Nomenclatura BEM-like: .ex-bloco__elemento--modificador.
   - Breakpoint único do portal: @media (max-width: 991.98px).
   - Dourado (--ex-v1-gold / --ex-v1-gold-bright) NUNCA é cor de texto corrido
     sobre --ex-v1-paper (contraste ruim); sobre --ex-v1-navy passa (≈9.5:1).
     Sobre --ex-v1-surface como "vazio" (itálico) é o único uso literal citado
     no token snippet oficial — mantido como está.
   ========================================================================== */


/* ==========================================================================
   1) TOKENS (T030.AC2) — BASE OBRIGATÓRIA copiada integralmente de
   spec/spec-001-portal-cgjrj-blazor-home-bi/snippets/css_ex_tokens_v1.css.
   Não editar os valores aqui — qualquer ajuste de tema entra em bloco à
   parte, mais abaixo, sem tocar nesta fundação.
   ========================================================================== */

.page-ex {
  /* Cores — claro */
  --ex-v1-navy:        #0c1b2e;
  --ex-v1-navy-2:      #13294a;
  --ex-v1-navy-3:      #1c365c;
  --ex-v1-gold:        #c9a34e;
  --ex-v1-gold-bright: #e6c878;
  --ex-v1-gold-soft:   #f6edda;
  --ex-v1-teal:        #3f8a82;
  --ex-v1-paper:       #f5f1e8;
  --ex-v1-ink:         #1d2733;
  --ex-v1-neg:         #c0392b;
  --ex-v1-line:        #e3dbcb;
  --ex-v1-surface:     #ffffff;

  /* Texto sobre superfícies navy FIXAS (navbar/masthead/rodapé) — não muda no dark */
  --ex-v1-claro-sobre-navy: #f5f1e8;

  /* Variantes ESCURECIDAS para uso como TEXTO sobre paper/surface (WCAG 4.5:1) —
     o gold/teal puros só entram como acento/borda (02_DESIGN_TOKENS §8) */
  --ex-v1-gold-texto:  #8a6d2f;
  --ex-v1-teal-texto:  #2e6660;

  /* Forma */
  --ex-v1-radius:      10px;
  --ex-v1-radius-chip: 999px;
  --ex-v1-shadow-sm:   0 1px 3px rgba(12, 27, 46, .08);
  --ex-v1-shadow-md:   0 6px 18px rgba(12, 27, 46, .12);

  /* Tipografia */
  --ex-v1-font-display: 'Fraunces', Georgia, serif;
  --ex-v1-font-mono:    'IBM Plex Mono', Consolas, monospace;
  --ex-v1-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  background: var(--ex-v1-paper);
  color: var(--ex-v1-ink);
  font-family: var(--ex-v1-font-body);
}

/* Tema escuro — atributo alternado pela lâmpada (T021, ex-theme.js) */
.page-ex[data-theme="dark"] {
  --ex-v1-gold-texto:  #d9b76a;
  --ex-v1-teal-texto:  #5cbaab;
  --ex-v1-gold:        #d9b76a;
  --ex-v1-gold-bright: #efd89a;
  --ex-v1-gold-soft:   #2a2413;
  --ex-v1-teal:        #5cbaab;
  --ex-v1-paper:       #070c14;
  --ex-v1-ink:         #dbe6f2;
  --ex-v1-neg:         #ff6f61;
  --ex-v1-line:        #22314a;
  --ex-v1-surface:     #0e1a2b;
}

/* Card KPI (Home §3.3 e BI) */
.ex-kpi {
  position: relative;
  background: var(--ex-v1-surface);
  border: 1px solid var(--ex-v1-line);
  border-radius: var(--ex-v1-radius);
  box-shadow: var(--ex-v1-shadow-sm);
  padding: 16px 20px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.ex-kpi:hover { box-shadow: var(--ex-v1-shadow-md); }
.ex-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ex-v1-gold);
}
.ex-kpi--teal::before { background: var(--ex-v1-teal); }
.ex-kpi--navy::before { background: var(--ex-v1-navy-3); }
.ex-kpi__label {
  font-family: var(--ex-v1-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.ex-kpi__valor {
  font-family: var(--ex-v1-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ex-kpi__delta        { font-size: .72rem; color: var(--ex-v1-teal); }
.ex-kpi__delta--down  { color: var(--ex-v1-neg); }
.ex-kpi__vazio        { font-style: italic; color: var(--ex-v1-gold-texto); }

/* Grids do BI (T031) — layout FULL-BLEED no padrão gestao_fundo.aspx do portal
   FUNARPEN: a página inteira ocupa a largura da viewport (sem a caixa de leitura
   de 1200px), com sidebar sticky de 230px + área de conteúdo elástica, gap 0 e
   a separação feita por borda (não por espaço em branco). */
.ex-bi-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0;
                min-height: 80vh; }
.ex-grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ex-chart-container {
  background: var(--ex-v1-surface);
  border: 1px solid var(--ex-v1-line);
  border-radius: var(--ex-v1-radius);
  box-shadow: var(--ex-v1-shadow-sm);
  padding: 1.2rem;
}
.ex-chart      { width: 100%; }
.ex-chart--md  { height: 19rem; }
.ex-chart--lg  { height: 24rem; }
.ex-filtros    { border-left: 4px solid var(--ex-v1-teal); padding: 12px 16px;
                 background: var(--ex-v1-surface); border-radius: 0 var(--ex-v1-radius)
                 var(--ex-v1-radius) 0; box-shadow: var(--ex-v1-shadow-sm); }

/* Breakpoint único (01_SPEC §4) */
@media (max-width: 991.98px) {
  .ex-bi-layout { grid-template-columns: 1fr; }
  .ex-bi-layout > aside { display: none; }
  .ex-grid-2 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   2) ESQUELETO DA PÁGINA — .page-ex, container, rodapé fixo no fim (sticky
   footer), tipografia genérica de título.
   ========================================================================== */

.page-ex,
.page-ex *,
.page-ex *::before,
.page-ex *::after {
  box-sizing: border-box;
}

.page-ex {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-ex main {
  display: block;
  flex: 1 0 auto;
}

/* Seções de largura de leitura (1200px) — tudo que NÃO é masthead/navbar/
   rodapé (esses são full-bleed, com padding próprio).
   O BI Analytics NÃO entra aqui: desde a adoção do design do gestao_fundo.aspx
   ele é full-bleed (hero + tabnav + .ex-bi-layout ocupam a viewport inteira). */
.page-ex .ex-kpi-faixa,
.page-ex .ex-acesso-rapido,
.page-ex .ex-servicos,
.page-ex .ex-page-header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.page-ex h1,
.page-ex h2 {
  font-family: var(--ex-v1-font-display);
  color: var(--ex-v1-ink);
  font-weight: 600;
}


/* ==========================================================================
   3) NAVBAR — .ex-navbar (Bootstrap navbar-expand-lg sobre fundo navy).
   ========================================================================== */

.page-ex .ex-navbar {
  background: linear-gradient(135deg, var(--ex-v1-navy) 0%, var(--ex-v1-navy-2) 100%);
  padding: 10px 24px;
  font-family: var(--ex-v1-font-body);
  font-size: .9rem;
}

.page-ex .ex-navbar .container-fluid {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 16px;
}

.page-ex .ex-navbar .navbar-brand {
  font-family: var(--ex-v1-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ex-v1-gold-bright);
}

/* Brasão institucional à esquerda — PNG monocromático claro sobre o navy. */
.page-ex .ex-navbar .ex-navbar__logo {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 4px;
}
/* Altura calibrada pelo portal CGJ-RJ de referência (marca ~62px de conteúdo
   visível). O PNG tem ~21% de margem transparente na vertical, então a altura
   da caixa é 62 / 0.79 ≈ 78px para o desenho bater com a referência. */
.page-ex .ex-navbar .ex-navbar__logo img {
  height: 78px;
  width: auto;
  display: block;
}

/* Bloco à direita da navbar: marca textual + lâmpada de tema. */
.page-ex .ex-navbar__direita {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-ex .ex-navbar__direita .navbar-brand {
  margin-right: 0;
}
@media (max-width: 991.98px) {
  .page-ex .ex-navbar .ex-navbar__logo img { height: 58px; }
}

@media (max-width: 575.98px) {
  .page-ex .ex-navbar .ex-navbar__logo img { height: 46px; }
  .page-ex .ex-navbar__direita .navbar-brand { font-size: 1rem; }
}

.page-ex .ex-navbar .navbar-toggler {
  border-color: var(--ex-v1-line);
  padding: 4px 8px;
}
.page-ex .ex-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem var(--ex-v1-gold-soft);
}
.page-ex .ex-navbar .navbar-toggler-icon {
  /* Ícone padrão do Bootstrap é escuro — invertido para ficar legível sobre
     o navy do masthead/navbar, sem introduzir hex fora do bloco de tokens. */
  filter: invert(1) brightness(1.8);
}

.page-ex .ex-navbar .navbar-nav {
  gap: 2px;
  align-items: center;
}

.page-ex .ex-navbar .nav-link {
  color: var(--ex-v1-claro-sobre-navy);
  padding: 8px 12px;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.page-ex .ex-navbar .nav-link:hover,
.page-ex .ex-navbar .nav-link:focus {
  color: var(--ex-v1-gold-bright);
  background-color: var(--ex-v1-navy-3);
}
.page-ex .ex-navbar .nav-link.active {
  border-bottom-color: var(--ex-v1-gold);
  color: var(--ex-v1-claro-sobre-navy);
  font-weight: 600;
}

.page-ex .ex-navbar .dropdown-menu {
  background: var(--ex-v1-surface);
  border: 1px solid var(--ex-v1-line);
  border-radius: var(--ex-v1-radius);
  box-shadow: var(--ex-v1-shadow-md);
  padding: 6px;
  margin-top: 4px;
}
.page-ex .ex-navbar .dropdown-item {
  color: var(--ex-v1-ink);
  font-family: var(--ex-v1-font-body);
  font-size: .88rem;
  border-radius: 6px;
  padding: 8px 12px;
  transition: background-color .2s ease, color .2s ease;
}
.page-ex .ex-navbar .dropdown-item:hover,
.page-ex .ex-navbar .dropdown-item:focus {
  background-color: var(--ex-v1-gold-soft);
  color: var(--ex-v1-ink);
}


/* ==========================================================================
   4) RODAPÉ — .ex-rodape (fundo navy, texto paper, links dourados).
   ========================================================================== */

.page-ex .ex-rodape {
  flex-shrink: 0;
  background: var(--ex-v1-navy);
  color: var(--ex-v1-claro-sobre-navy);
  padding: 32px 24px;
  margin-top: 48px;
  text-align: center;
  font-size: .85rem;
  font-family: var(--ex-v1-font-body);
}
.page-ex .ex-rodape p {
  margin: 4px 0;
  opacity: .85;
}
.page-ex .ex-rodape a {
  color: var(--ex-v1-gold-bright);
  text-decoration: none;
}
.page-ex .ex-rodape a:hover,
.page-ex .ex-rodape a:focus {
  text-decoration: underline;
}


/* ==========================================================================
   5) MASTHEAD (Home) — .ex-masthead + elementos.
   ========================================================================== */

.page-ex .ex-masthead {
  background: linear-gradient(135deg, var(--ex-v1-navy) 0%, var(--ex-v1-navy-2) 100%);
  color: var(--ex-v1-claro-sobre-navy);
  padding: 48px 24px;
}

.page-ex .ex-masthead__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 10px;
}

.page-ex .ex-masthead__eyebrow {
  font-family: var(--ex-v1-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-v1-gold);
}

.page-ex .ex-masthead__badge {
  display: inline-block;
  font-family: var(--ex-v1-font-mono);
  font-size: .68rem;
  border: 1px solid var(--ex-v1-gold);
  color: var(--ex-v1-gold-bright);
  border-radius: var(--ex-v1-radius-chip);
  padding: 3px 12px;
}

.page-ex .ex-masthead__titulo {
  font-family: var(--ex-v1-font-display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: .3em 0 .25em;
  max-width: 22ch;
  color: var(--ex-v1-claro-sobre-navy);
}
.page-ex .ex-masthead__titulo em {
  font-style: italic;
  color: var(--ex-v1-gold-bright);
}

.page-ex .ex-masthead__lede {
  max-width: 56ch;
  color: var(--ex-v1-claro-sobre-navy);
  opacity: .85;
  line-height: 1.55;
  margin: 0;
  font-family: var(--ex-v1-font-body);
}


/* ==========================================================================
   6) ELEMENTOS GENÉRICOS DE SEÇÃO — .ex-eyebrow, .ex-badge (fora do
   masthead — portanto sobre paper/surface: dourado nunca vira texto aqui).
   ========================================================================== */

.page-ex .ex-eyebrow {
  display: inline-block;
  font-family: var(--ex-v1-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-v1-teal-texto);
}

.page-ex .ex-badge {
  display: inline-block;
  font-family: var(--ex-v1-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  background: var(--ex-v1-gold-soft);
  border: 1px solid var(--ex-v1-gold);
  color: var(--ex-v1-ink);
  border-radius: var(--ex-v1-radius-chip);
  padding: 3px 12px;
}

.page-ex .ex-page-header {
  padding-top: 32px;
  padding-bottom: 8px;
}
.page-ex .ex-page-header h1 {
  font-size: 2rem;
  margin: .3em 0;
}
.page-ex .ex-page-header .ex-badge {
  margin-left: 4px;
}

/* Cabeçalho de seção no padrão .section-header do gestao_fundo.aspx: eyebrow
   curto sobre o título e régua navy de 2px fechando o bloco. */
.page-ex .ex-section-header {
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--ex-v1-navy-3);
}
.page-ex .ex-section-header h2 {
  font-size: 1.45rem;
  margin: .2em 0 0;
}


/* ==========================================================================
   7) FAIXA DE KPIs (Home) — .ex-kpi-faixa + .ex-kpi__delta-ref.
   ========================================================================== */

.page-ex .ex-kpi-faixa {
  margin-top: 48px;
}
.page-ex .ex-kpi-faixa__cabecalho {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.page-ex .ex-kpi-faixa__ano {
  font-family: var(--ex-v1-font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  opacity: .7;
}
.page-ex .ex-kpi__delta-ref {
  font-family: var(--ex-v1-font-body);
  font-size: .66rem;
  opacity: .6;
  margin-left: 4px;
}


/* ==========================================================================
   8) ACESSO RÁPIDO — .ex-acesso-rapido, .ex-chips, .ex-chip.
   ========================================================================== */

.page-ex .ex-acesso-rapido {
  margin-top: 48px;
}

.page-ex .ex-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.page-ex .ex-chip {
  display: inline-block;
  background: var(--ex-v1-gold-soft);
  border: 1px solid var(--ex-v1-line);
  color: var(--ex-v1-ink);
  border-radius: var(--ex-v1-radius-chip);
  padding: 8px 16px;
  font-size: .85rem;
  font-family: var(--ex-v1-font-body);
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.page-ex .ex-chip:hover,
.page-ex .ex-chip:focus {
  border-color: var(--ex-v1-gold);
  box-shadow: var(--ex-v1-shadow-md);
  color: var(--ex-v1-ink);
}


/* ==========================================================================
   9) SERVIÇOS — .ex-servicos, .ex-card-servico + elementos.
   ========================================================================== */

.page-ex .ex-servicos {
  margin-top: 48px;
}

.page-ex .ex-card-servico {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  background: var(--ex-v1-surface);
  border: 1px solid var(--ex-v1-line);
  border-radius: var(--ex-v1-radius);
  box-shadow: var(--ex-v1-shadow-sm);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ex-v1-ink);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.page-ex .ex-card-servico:hover,
.page-ex .ex-card-servico:focus {
  box-shadow: var(--ex-v1-shadow-md);
  border-color: var(--ex-v1-gold);
}
.page-ex .ex-card-servico__titulo {
  font-family: var(--ex-v1-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ex-v1-ink);
}
.page-ex .ex-card-servico__desc {
  font-family: var(--ex-v1-font-body);
  font-size: .9rem;
  opacity: .8;
  line-height: 1.5;
  color: var(--ex-v1-ink);
}


/* ==========================================================================
   10) BI ANALYTICS — sidebar, conteúdo, filtros, grid de KPI, estados
   vazio/erro (T031).
   ========================================================================== */

/* --- HERO do BI — full-bleed navy, no padrão da <section class="hero"> do
   gestao_fundo.aspx: gradiente navy, eyebrow mono, título editorial com termo em
   itálico dourado, lede curto e faixa de 4px dourado/teal/dourado na base. --- */

.page-ex .ex-bi-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ex-v1-navy) 0%, var(--ex-v1-navy-2) 45%,
              var(--ex-v1-navy-3) 100%);
  color: var(--ex-v1-claro-sobre-navy);
  padding: 1.75rem 2.5rem 2rem;
}
.page-ex .ex-bi-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ex-v1-gold), var(--ex-v1-teal),
              var(--ex-v1-gold));
}
.page-ex .ex-bi-hero__eyebrow {
  display: inline-block;
  font-family: var(--ex-v1-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-v1-gold);
}
.page-ex .ex-bi-hero__titulo {
  font-family: var(--ex-v1-font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: .3em 0 .25em;
  color: var(--ex-v1-claro-sobre-navy);
}
.page-ex .ex-bi-hero__titulo em {
  font-style: italic;
  color: var(--ex-v1-gold-bright);
}
.page-ex .ex-bi-hero__lede {
  max-width: 62ch;
  margin: 0 0 12px;
  line-height: 1.55;
  opacity: .85;
  color: var(--ex-v1-claro-sobre-navy);
}
.page-ex .ex-bi-hero__badge {
  display: inline-block;
  font-family: var(--ex-v1-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  border: 1px solid var(--ex-v1-gold);
  color: var(--ex-v1-gold-bright);
  border-radius: var(--ex-v1-radius-chip);
  padding: 3px 12px;
}

/* --- TABNAV — faixa de abas de rolagem sob o hero (.tabnav do gestao_fundo):
   full-bleed, sticky no topo, item ativo sublinhado em dourado. --- */

.page-ex .ex-bi-tabnav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--ex-v1-surface);
  border-bottom: 1px solid var(--ex-v1-line);
  padding: 0 2.5rem;
}
.page-ex .ex-bi-tabnav__item {
  flex-shrink: 0;
  font-family: var(--ex-v1-font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ex-v1-ink);
  text-decoration: none;
  padding: 12px 18px;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.page-ex .ex-bi-tabnav__item:hover,
.page-ex .ex-bi-tabnav__item:focus {
  color: var(--ex-v1-teal-texto);
  background-color: var(--ex-v1-gold-soft);
}
.page-ex .ex-bi-tabnav__item.ativo {
  color: var(--ex-v1-gold-texto);
  border-bottom-color: var(--ex-v1-gold);
  font-weight: 600;
}

/* --- SIDEBAR — coluna de navegação sticky de altura total (.sidebar-nav do
   gestao_fundo): superfície própria, borda à direita separando do conteúdo,
   rótulos de grupo em maiúsculas e marcador dourado à esquerda no item ativo. --- */

.page-ex .ex-bi-sidebar {
  position: sticky;
  /* 46px = altura da tabnav sticky; a sidebar encosta logo abaixo dela e nunca
     fica encoberta (a tabnav tem z-index maior). */
  top: 46px;
  align-self: start;
  height: calc(100vh - 46px);
  overflow-y: auto;
  background: var(--ex-v1-surface);
  border-right: 1px solid var(--ex-v1-line);
  padding: .6rem 0 1.5rem;
  z-index: 50;
}
.page-ex .ex-bi-sidebar nav {
  display: flex;
  flex-direction: column;
}
.page-ex .ex-bi-sidebar__grupo {
  font-family: var(--ex-v1-font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  padding: .6rem 1rem .2rem;
  margin-top: .3rem;
  border-top: 1px solid var(--ex-v1-line);
}
.page-ex .ex-bi-sidebar__grupo:first-child {
  border-top: none;
  margin-top: 0;
}
.page-ex .ex-bi-sidebar__link {
  display: block;
  font-family: var(--ex-v1-font-body);
  font-size: .78rem;
  color: var(--ex-v1-ink);
  text-decoration: none;
  padding: .3rem 1rem;
  border-left: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.page-ex .ex-bi-sidebar__link:hover,
.page-ex .ex-bi-sidebar__link:focus {
  color: var(--ex-v1-teal-texto);
  background-color: var(--ex-v1-gold-soft);
}
.page-ex .ex-bi-sidebar__link.ativo {
  color: var(--ex-v1-gold-texto);
  background-color: var(--ex-v1-gold-soft);
  border-left-color: var(--ex-v1-gold);
  font-weight: 600;
}

/* --- CONTEÚDO — respiro interno do .content-area do gestao_fundo (2rem 2.5rem),
   já que o grid não tem mais gap nem caixa de leitura. --- */

.page-ex .ex-bi-conteudo {
  min-width: 0;
  overflow-x: hidden;
  padding: 2rem 2.5rem 3rem;
}
.page-ex .ex-bi-conteudo > section {
  margin-top: 32px;
  scroll-margin-top: 60px;   /* a tabnav sticky não pode cobrir o título ancorado */
}
.page-ex .ex-bi-conteudo > section:first-child {
  margin-top: 0;
}
.page-ex .ex-bi-conteudo section h2 {
  font-size: 1.45rem;
  margin: 0 0 4px;
}
.page-ex .ex-bi-conteudo .ex-chart-container {
  scroll-margin-top: 72px;
}
/* Elevação no hover dos cards, como o .kpi-card do gestao_fundo. */
.page-ex .ex-bi-conteudo .ex-kpi {
  transition: box-shadow .2s ease, transform .2s ease;
}
.page-ex .ex-bi-conteudo .ex-kpi:hover,
.page-ex .ex-bi-conteudo .ex-chart-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--ex-v1-shadow-md);
}
.page-ex .ex-bi-conteudo .ex-chart-container {
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Faixa de filtros — grupo label + select por .ex-filtro (T031). */
.page-ex .ex-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.page-ex .ex-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.page-ex .ex-filtro--acao {
  justify-content: flex-end;
}
.page-ex .ex-filtro label {
  font-family: var(--ex-v1-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.page-ex .ex-filtro select,
.page-ex .ex-filtro .form-select {
  font-family: var(--ex-v1-font-body);
  font-size: .85rem;
  background-color: var(--ex-v1-surface);
  color: var(--ex-v1-ink);
  border: 1px solid var(--ex-v1-line);
  border-radius: 6px;
  padding: 6px 10px;
}
.page-ex .ex-filtro select:focus,
.page-ex .ex-filtro .form-select:focus {
  outline: 2px solid var(--ex-v1-teal);
  outline-offset: 1px;
  border-color: var(--ex-v1-teal);
  box-shadow: none;
}

/* Grid de KPI do BI (repeat auto-fit — não listado no snippet base). */
.page-ex .ex-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* Título mono dos containers de gráfico (padrão do preview.html canônico). */
.page-ex .ex-chart-container h3 {
  font-family: var(--ex-v1-font-mono);
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
  margin: 0 0 10px;
}

/* Painel de erro (carga inicial dos filtros falhou) — reskin do alert-danger
   do Bootstrap com os tokens do portal. */
.page-ex .alert-danger {
  background: var(--ex-v1-surface);
  border: 1px solid var(--ex-v1-neg);
  color: var(--ex-v1-neg);
  border-radius: var(--ex-v1-radius);
  font-family: var(--ex-v1-font-body);
  font-size: .9rem;
  padding: 12px 16px;
}

/* Utilitários de estado (T031) — para uso direto em markup futuro que ainda
   não tenha uma classe BEM própria. .ex-vazio só deve ser aplicado sobre
   --ex-v1-surface (nunca sobre --ex-v1-paper — regra §8 dos tokens). */
.page-ex .ex-vazio {
  font-style: italic;
  color: var(--ex-v1-gold-texto);
}
.page-ex .ex-erro {
  color: var(--ex-v1-neg);
  font-family: var(--ex-v1-font-body);
  font-size: .9rem;
}


/* ==========================================================================
   11) BREAKPOINT ÚNICO — @media (max-width: 991.98px) — ajustes adicionais
   além dos já cobertos no bloco de tokens (item 1: sidebar do BI some,
   .ex-bi-layout e .ex-grid-2 viram 1 coluna).
   ========================================================================== */

@media (max-width: 991.98px) {
  .page-ex .ex-masthead {
    padding: 32px 24px;
  }
  .page-ex .ex-masthead__titulo {
    font-size: 1.9rem;
  }
  .page-ex .ex-filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .page-ex .ex-filtro {
    min-width: 0;
  }
  .page-ex .ex-filtro--acao {
    justify-content: flex-start;
  }
  /* BI full-bleed no celular: hero, tabnav e conteúdo perdem o respiro largo
     de 2.5rem (a sidebar já sai de cena pela regra do bloco 1). */
  .page-ex .ex-bi-hero {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .page-ex .ex-bi-hero__titulo {
    font-size: 1.7rem;
  }
  .page-ex .ex-bi-tabnav {
    padding: 0 1.25rem;
  }
  .page-ex .ex-bi-conteudo {
    padding: 1.25rem 1.25rem 2rem;
  }
}