/*
 * Ouvidoria em Números — Mashup
 * Fase 1: estrutura HTML/CSS estática (sem Qlik)
 *
 * Grade de 12 colunas, largura de referência 1440 px:
 *   padding lateral 48 px · gap 24 px · coluna = 90 px
 */

/* ==============================================| Fonte |============================================== */

/*
 * Source Sans 3 hospedada junto do mashup, e não no Google Fonts: na intranet o
 * fonts.googleapis.com não responde, e sem os arquivos locais o painel caía no
 * serif padrão do navegador. É a fonte variável (um arquivo cobre 200–900), em
 * dois subsets — latin e latin-ext, que cobrem o português.
 *
 * woff2 é suportado por Chrome 36+, Edge 14+, Firefox 39+, Safari/iOS 10+ e
 * Opera 23+. Fora disso vale a pilha de fontes do sistema em --ouv-fonte.
 */
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ==============================================| Tokens |============================================== */

:root {
  --ouv-azul: #1f5fa9;
  --ouv-azul-escuro: #16467d;
  --ouv-azul-kpi: #0e5ea8;
  --ouv-azul-barra: #1c6bab;
  --ouv-azul-claro: #12a0dc;
  --ouv-azul-topo: #007db8;
  --ouv-laranja: #ee9422;
  --ouv-dourado: #f2b441;
  --ouv-cinza-barra: #cbd2d8;

  --ouv-texto: #2e3b47;
  --ouv-texto-2: #5b6a78;
  --ouv-texto-3: #8a99a8;
  --ouv-texto-4: #a0aebb;

  --ouv-fundo: #f7f9fb;
  --ouv-branco: #ffffff;
  --ouv-borda: #e3e9ef;
  --ouv-borda-filtro: #cfd9e2;
  --ouv-trilho: #f3f7fa;
  --ouv-divisoria: #f0f4f7;

  /* -apple-system cobre iOS/macOS antes do system-ui; Roboto cobre Android */
  --ouv-fonte: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, system-ui, sans-serif;

  /* Sem teto: o conteúdo acompanha a largura da janela, com o respiro de --ouv-lateral */
  --ouv-largura: 100%;
  /*
   * Respiro lateral. O teto baixo (28px) aproveita melhor as telas largas sem
   * encostar na borda; o piso de 16px mantém a margem no celular.
   */
  --ouv-lateral: clamp(16px, 1.5vw, 28px);
  --ouv-gap: 24px;

  /* Mesma sombra que os objetos do app usavam internamente */
  --ouv-sombra-card: 0 2px 6px rgb(215, 231, 246);
}

/* ==============================================| Base |============================================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ouv-fundo);
  color: var(--ouv-texto);
  font-family: var(--ouv-fonte);
}

/* ==============================================| Topo fixo |============================================== */

.ouv-topo {
  position: sticky;
  top: 0;
  z-index: 999; /* abaixo do menu lateral do Senado (z-index 1000) */
}

/* Barra azul abaixo do título — sem menu, apenas a Data de Atualização à direita */
:not(#_) .sf-wrapper .navbar--sf.ouv-navbar {
  margin-bottom: 0;
  padding: 0 15px 10px;
  background-color: var(--ouv-azul-topo);
  justify-content: flex-end;
}

:not(#_) .sf-wrapper .ouv-atualizacao {
  margin-left: auto;
  min-height: 40px;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--ouv-branco);
  font-size: 16px;
}

/* ==============================================| Barra de filtros |============================================== */

.ouv-filtros {
  background: var(--ouv-branco);
  border-bottom: 2px solid var(--ouv-laranja);
  box-shadow: 0 1px 4px rgba(20, 40, 60, 0.07);
}

.ouv-filtros__inner {
  max-width: var(--ouv-largura);
  margin: 0 auto;
  padding: 14px var(--ouv-lateral);
  box-sizing: border-box;
}

/*
 * A linha dos filtros: a grade e a coluna de ações lado a lado.
 *
 * Era o próprio `__inner` até a v1.37.0. Virou um bloco à parte porque agora o
 * `__inner` tem dois filhos — esta linha e a barra fina do topo recolhido — e
 * eles se alternam.
 */
.ouv-filtros__conteudo {
  display: flex;
  align-items: center;
  gap: var(--ouv-gap);
}

/*
 * 10 blocos (9 filtros + Período) em duas linhas de 5. Cada um é um painel de
 * filtro do Qlik com uma caixa de lista dentro, então a largura é nossa.
 */
.ouv-filtros__grade {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

/*
 * min-height, e não height: o seletor de período do Qlik quebra a data em duas
 * linhas quando o filtro fica estreito, e com altura fixa ele era cortado. Com
 * altura mínima a linha da grade cresce e todos os filtros acompanham.
 */
.ouv-filtro {
  min-height: 54px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-borda-filtro);
  border-radius: 2px;
  font-size: 12px;
  color: #42505e;
}

.ouv-filtro > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ouv-filtro__seta {
  flex-shrink: 0;
  color: #9aa8b5;
}

.ouv-filtro--periodo {
  background: #f4f8fc;
  border-color: #b9cbdc;
  color: var(--ouv-azul);
}

.ouv-btn-limpar {
  flex-shrink: 0;
  min-height: 54px;
  padding: 0 14px;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-azul);
  border-radius: 2px;
  color: var(--ouv-azul);
  font-family: var(--ouv-fonte);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ouv-btn-limpar:hover {
  background: #f4f8fc;
  border-color: var(--ouv-azul-escuro);
  color: var(--ouv-azul-escuro);
}

.ouv-btn-limpar:focus-visible {
  outline: 2px solid var(--ouv-laranja);
  outline-offset: 2px;
}

/* ==============================================| Topo recolhido (v1.37.0) |============================================== */

/*
 * Ao rolar, o topo inteiro — título, faixa azul e as duas linhas de filtros —
 * ocupava 304 px fixos e comia um terço da tela. A partir da v1.37.0 o
 * Ouvidoria.js põe `ouv-topo--compacto` no <header> assim que a rolagem passa
 * do título, e o topo encolhe para duas faixas: a azul (sem as fichas, só os
 * ícones do Qlik e o Marcadores) e esta barra fina.
 *
 * O desenho é o do mashup BiblioBR (paineis.cultura.gov.br): "Filtros" com uma
 * seta à esquerda, o recorte no meio, "Limpar seleções" à direita, e o clique
 * abrindo os filtros por baixo.
 *
 * **Só vale a partir de 768 px.** Abaixo disso o topo já não é fixo (a página
 * rola por inteiro) e não há o que recolher — o mobile fica como está até a
 * rodada dele.
 */

/* A barra fina não existe enquanto o topo está inteiro. */
.ouv-filtros__resumo {
  display: none;
}

/*
 * Espaçador do topo recolhido: fica com altura 0 no estado inteiro e assume a
 * altura do topo quando ele sai do fluxo. Quem mexe na altura é o Ouvidoria.js.
 */
.ouv-topo__espaco {
  height: 0;
}

/*
 * ---- A APARÊNCIA do modo compacto ----
 *
 * Vale nos dois tamanhos: no desktop a classe entra ao rolar, no celular ela
 * fica sempre posta (v1.41.0). O que muda entre os dois é só o
 * **posicionamento**, nos dois blocos de media query logo abaixo.
 */

/*
 * A barra fina ocupa a faixa inteira: o padding que era do `__inner` passa
 * para ela, de modo que não sobre tira morta em cima nem embaixo. Quem
 * recebe o clique é a `.ouv-filtros`, de ponta a ponta (ver Ouvidoria.js).
 */
.ouv-topo--compacto .ouv-filtros__resumo {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
}

.ouv-topo--compacto .ouv-filtros {
  cursor: pointer;
}

/* Dentro do painel aberto o clique é dos filtros e dos botões, não da faixa. */
.ouv-topo--compacto .ouv-filtros__conteudo,
.ouv-topo--compacto .ouv-btn-limpar--resumo {
  cursor: default;
}

.ouv-topo--compacto .ouv-btn-limpar--resumo {
  cursor: pointer;
}

/*
 * Com o painel aberto, o "Limpar seleções" sai da barra: quem limpa é o
 * "Limpar filtros" que aparece dentro, junto dos filtros — como no BiblioBR.
 * Dois botões com o mesmo efeito na tela ao mesmo tempo só confundem.
 */
.ouv-topo--compacto.ouv-topo--aberto .ouv-btn-limpar--resumo {
  display: none;
}

/*
 * O título fica (pedido do usuário em 22/09/2026), mas encolhe: 40 px de
 * corpo viram 22, a linha de 48 vira 28 e a margem de baixo sai. O bloco cai
 * de 76 para cerca de 36 px.
 *
 * O `:not(#_)` é o mesmo truque usado no resto do arquivo: o essencial-2020
 * do Senado estiliza esses elementos com seletores de especificidade alta e,
 * sem ele, nenhuma destas regras vale (visto em 22/09/2026).
 */
:not(#_) .ouv-topo--compacto .ouv-titulo h1 {
  margin-bottom: 0 !important;
  font-size: 22px !important;
  line-height: 28px !important;
}

:not(#_) .ouv-topo--compacto .menu-local .pt-2 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

:not(#_) .ouv-topo--compacto .ouv-titulo .ouv-atualizacao {
  font-size: 12px !important;
}

/*
 * Fichas de seleção fora: o que está selecionado passa a ser dito pelo
 * recorte, em texto, na barra de baixo. Sobram os ícones do Qlik (busca,
 * desfazer, refazer, limpar) e o botão Marcadores.
 */
.ouv-topo--compacto .ouv-selecoes .current-selections-item,
.ouv-topo--compacto .ouv-selecoes .qv-pager > div > .MuiGrid-container:not(.current-selections-item) {
  display: none !important;
}

/* Os filtros saem de cena e voltam pelo botão. */
.ouv-topo--compacto .ouv-filtros__conteudo {
  display: none;
}

.ouv-topo--compacto.ouv-topo--aberto .ouv-filtros__conteudo {
  display: flex;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ouv-borda);
}

/*
 * O padding vertical sai do `__inner` e vira altura da própria barra, para a
 * área de clique cobrir a faixa toda.
 */
.ouv-topo--compacto .ouv-filtros__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Aberto, o painel volta a respirar embaixo. */
.ouv-topo--compacto.ouv-topo--aberto .ouv-filtros__inner {
  padding-bottom: 12px;
}

/*
 * No celular esse respiro não vale: lá o painel paira (é `absolute`), e os
 * 12 px só empurrariam o conteúdo ao abrir o painel.
 */
@media (max-width: 767.98px) {
  .ouv-topo--compacto.ouv-topo--aberto .ouv-filtros__inner {
    padding-bottom: 0;
  }
}

/* Aberto, o painel paira sobre o conteúdo — daí a sombra. */
.ouv-topo--compacto.ouv-topo--aberto .ouv-filtros {
  box-shadow: 0 10px 24px rgba(20, 40, 60, 0.18);
}


/* ---- Celular: o topo já nasce recolhido ---- */

/*
 * Decisões do usuário em 22/09/2026: no celular a barra fina vale **desde a
 * abertura** (o `Ouvidoria.js` põe a classe e não a tira mais), o topo fica
 * preso no alto, a faixa azul continua com os ícones e o Marcadores, e a barra
 * cabe numa linha só — "Filtros", o recorte curto e o ícone de limpar.
 */
@media (max-width: 767.98px) {
  /* Numa linha só, com menos folga: 390 px não perdoam. */
  .ouv-topo--compacto .ouv-filtros__resumo {
    gap: 10px;
    min-height: 46px;
  }

  .ouv-filtros__abrir {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* O recorte cede o espaço que faltar aos dois botões. */
  .ouv-filtros__recorte {
    font-size: 11px;
    text-align: left;
  }

  /* O rótulo sai e fica o ícone: "Limpar seleções" não cabe aqui. */
  .ouv-btn-limpar--resumo .ouv-btn-limpar__texto {
    display: none;
  }

  .ouv-btn-limpar--resumo {
    min-height: 34px;
    padding: 0 10px;
  }

  /*
   * O painel aberto **paira**: sai do fluxo do topo para não empurrar o
   * conteúdo nem esticar a faixa fixa. Rola por dentro quando não couber.
   */
  .ouv-topo--compacto .ouv-filtros {
    position: relative;
  }

  .ouv-topo--compacto.ouv-topo--aberto .ouv-filtros__conteudo {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 12px var(--ouv-lateral);
    box-sizing: border-box;
    background: var(--ouv-branco);
    border-top: 1px solid var(--ouv-borda);
    box-shadow: 0 10px 24px rgba(20, 40, 60, 0.18);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}

/* ---- Desktop: o topo sai do fluxo ao recolher ---- */

@media (min-width: 768px) {
  /*
   * ---- Por que `fixed` e não `sticky` no modo compacto ----
   *
   * `sticky` ocupa lugar no fluxo. Encolhendo o topo de 260 para ~128 px, o
   * conteúdo abaixo subia 132 px de uma vez e a página dava um solavanco no
   * meio da rolagem — o defeito relatado em 22/09/2026.
   *
   * Aqui o topo sai do fluxo e o `.ouv-topo__espaco`, criado pelo
   * Ouvidoria.js, assume a altura que ele tinha. O fluxo não muda em momento
   * nenhum, e a troca entre os dois estados passa a ser invisível.
   */
  .ouv-topo--compacto {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}


.ouv-filtros__abrir {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-azul);
  border-radius: 2px;
  color: var(--ouv-azul);
  font-family: var(--ouv-fonte);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ouv-filtros__abrir:hover {
  background: #f4f8fc;
  border-color: var(--ouv-azul-escuro);
  color: var(--ouv-azul-escuro);
}

.ouv-filtros__abrir:focus-visible {
  outline: 2px solid var(--ouv-laranja);
  outline-offset: 2px;
}

.ouv-filtros__seta {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.ouv-topo--aberto .ouv-filtros__seta {
  transform: rotate(180deg);
}

/*
 * O recorte ocupa o meio e some em reticências quando não cabe — o texto
 * inteiro fica no `title`, que o navegador mostra ao passar o mouse.
 */
.ouv-filtros__recorte {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ouv-texto);
  font-size: 13px;
  text-align: center;
}

.ouv-filtros__recorte--vazio {
  color: #7b8a99;
  font-style: italic;
}

/* Mesmo botão do "Limpar filtros", um pouco mais baixo para caber na barra. */
.ouv-btn-limpar--resumo {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* No desktop o rótulo basta; o ícone é reserva do celular. */
.ouv-btn-limpar__icone {
  display: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767.98px) {
  .ouv-btn-limpar__icone {
    display: block;
  }
}

/* ---- Coluna de ações: "Exportar dados" em cima, "Limpar filtros" embaixo ---- */

/*
 * 54 + 8 + 54 = 116 px, a mesma altura das duas linhas da grade de filtros
 * (2 x 54 px com 8 px de intervalo). A barra continua com a altura de sempre;
 * o que muda é que o "Limpar filtros" deixa de ficar centralizado e passa a
 * ocupar a segunda linha, alinhado com a segunda fileira de filtros.
 */
.ouv-filtros__acoes {
  position: relative; /* âncora do aviso "Gerando o arquivo…" */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mesma moldura do "Limpar filtros", com o ícone antes do rótulo */
.ouv-btn-exportar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ouv-btn-exportar[hidden] {
  display: none;
}

.ouv-btn-exportar svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * O aviso de exportação é o mesmo dos cards, mas aqui não há card: ele desce
 * logo abaixo do botão, por cima do conteúdo, para não empurrar a barra.
 */
.ouv-filtros__acoes .ouv-export__aviso {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  max-width: 260px;
  box-shadow: 0 6px 18px rgba(20, 40, 60, 0.18);
}

/* ==============================================| Seleções atuais |============================================== */

/* Recebe o objeto "CurrentSelections" do Qlik, entre a barra de filtros e os KPIs */
.ouv-selecoes {
  background: var(--ouv-branco);
  border-bottom: 1px solid var(--ouv-borda);
}

.ouv-selecoes__inner {
  max-width: var(--ouv-largura);
  margin: 0 auto;
  padding: 0 var(--ouv-lateral);
  box-sizing: border-box;
  height: 38px;
  display: flex;
  align-items: stretch;
}

/* ---- Marcadores: botão à direita da barra e painel suspenso ---- */

/*
 * O objeto do Qlik continua ocupando a barra inteira; o botão é nosso e fica
 * ao lado dele, no espaço onde ficava o botão "Seleções" do próprio Qlik.
 */
.ouv-selecoes__qlik {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.ouv-marcadores__abrir {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--ouv-borda);
  /* Mesmo fundo e mesma cor de texto da barra do Qlik, medidos nela */
  background: #f2f2f2;
  color: #595959;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ouv-marcadores__abrir:hover {
  background: #e6e6e6;
}

.ouv-marcadores__abrir[aria-expanded="true"] {
  background: #e0e8ef;
}

.ouv-marcadores__icone {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ouv-azul);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/*
 * O painel é ancorado à barra, e não ao botão, porque a barra é quem tem a
 * largura da grade: assim ele acompanha a margem lateral em qualquer tela.
 * z-index 1002 para ficar acima do topo fixo (999) e do menu do Senado (1000).
 */
.ouv-selecoes {
  position: relative;
}

.ouv-marcadores {
  position: absolute;
  top: 100%;
  right: var(--ouv-lateral);
  z-index: 1002;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 16px 16px;
  box-sizing: border-box;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-borda);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.ouv-marcadores[hidden],
.ouv-marcadores__form[hidden],
.ouv-marcadores__erro[hidden],
.ouv-marcadores__rodape[hidden] {
  display: none;
}

.ouv-marcadores__secao + .ouv-marcadores__secao {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ouv-borda);
}

.ouv-marcadores__titulo {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ouv-texto-3);
}

.ouv-marcadores__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ouv-marcadores__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ouv-marcadores__item + .ouv-marcadores__item {
  margin-top: 2px;
}

/* O nome é o botão que aplica o marcador; ocupa toda a linha */
.ouv-marcadores__aplicar {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ouv-texto);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ouv-marcadores__aplicar:hover {
  background: #eef3f8;
}

.ouv-marcadores__aplicar[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.ouv-marcadores__excluir {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #9b1717;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ouv-marcadores__excluir:hover {
  background: #fbeaea;
}

.ouv-marcadores__vazio,
.ouv-marcadores__nota {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--ouv-texto-3);
}

.ouv-marcadores__nota {
  margin-top: 8px;
  padding: 0 8px;
  font-size: 11px;
}

.ouv-marcadores__form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ouv-borda);
}

.ouv-marcadores__rotulo {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ouv-texto-3);
}

.ouv-marcadores__campo {
  width: 100%;
  padding: 7px 8px;
  box-sizing: border-box;
  border: 1px solid var(--ouv-borda-filtro);
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
}

.ouv-marcadores__erro {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9b1717;
}

.ouv-marcadores__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.ouv-marcadores__rodape {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ouv-borda);
}

.ouv-marcadores__acao {
  padding: 8px 12px;
  border: 1px solid var(--ouv-azul);
  border-radius: 3px;
  background: var(--ouv-azul);
  color: var(--ouv-branco);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ouv-marcadores__acao:hover {
  filter: brightness(0.94);
}

.ouv-marcadores__acao--secundaria {
  background: transparent;
  color: var(--ouv-azul);
}

/* Em telas estreitas o botão fica só com o ícone, para não comer a barra */
@media (max-width: 767.98px) {
  .ouv-marcadores__abrir span {
    display: none;
  }

  .ouv-marcadores__abrir {
    padding: 0 10px;
  }
}

/*
 * Ferramenta de seleções (o botão "Seleções", à direita da barra).
 *
 * O problema: ao abrir, o Qlik anexa o painel `.qv-global-selections` ao
 * `<body>`, em `position: absolute; top: 38px; z-index: 502` — ou seja, ele
 * presume que a barra de seleções é a **primeira coisa da página** e tem
 * 38 px de altura. Aqui a barra fica abaixo do topo fixo, que tem z-index 999,
 * então o painel nascia atrás do topo: a parte de cima dele (justamente a
 * lista de valores selecionados) ficava escondida sob a barra de filtros.
 *
 * A correção usa o gancho do próprio Qlik: enquanto a ferramenta está aberta
 * ele marca o `<body>` com `qv-global-selections-enabled`. Nesse intervalo o
 * topo fixo sai de cena e a barra de seleções assume o topo da janela — que é
 * exatamente a geometria que o painel espera. Fechada a ferramenta, o Qlik
 * tira a classe e tudo volta ao lugar, sem nenhuma linha de JavaScript.
 *
 * A barra precisa continuar visível porque é nela que está o botão que fecha a
 * ferramenta: o Esc não fecha (testado).
 */
body.qv-global-selections-enabled .ouv-topo .menu-local,
body.qv-global-selections-enabled .ouv-topo .ouv-filtros {
  display: none !important;
}

/*
 * Com o título e os filtros fora de cena, o que sobra do topo é a faixa da
 * barra de seleções — e é ela que vai para o alto da janela. Antes da v1.19.0
 * a barra era um bloco à parte e bastava escondê-lo inteiro; agora ela é filha
 * do topo, então quem se fixa é o próprio topo.
 */
body.qv-global-selections-enabled .ouv-topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* acima do topo (999) e do menu lateral do Senado (1000) */
}

/* 39 px = os 38 px do `.ouv-selecoes__inner` mais a borda de baixo */
body.qv-global-selections-enabled .qv-global-selections {
  position: fixed !important;
  top: 39px !important;
  bottom: 0 !important;
  height: auto !important;
  z-index: 1001 !important;
}

/*
 * Botão "Seleções" oculto por decisão do usuário (18/09/2026), depois de ele
 * validar no navegador que a ferramenta passou a abrir por inteiro.
 *
 * Esconde o contêiner inteiro (`.buttons-end`), e não só o botão, porque ele
 * desenha a borda da esquerda que deixaria uma caixa vazia no fim da barra.
 *
 * Para devolver a ferramenta ao usuário, basta apagar esta regra: a correção
 * acima é independente e continua valendo.
 */
#barraSelecoes .buttons-end {
  display: none !important;
}

/* ==============================================| Exportação por objeto |============================================== */

/*
 * Botões de exportação no canto superior direito de cada card.
 *
 * Dois modos, decididos pela largura do card (ver EXPORTACAO no Ouvidoria.js):
 *   - largo:    os três ícones lado a lado, cada um com `title` (o hint nativo);
 *   - compacto: três pontos na vertical, abrindo o menu com os três nomes.
 *
 * Os botões ficam no `.ouv-card`, e não no `.ouv-slot`: o slot é esvaziado
 * (`textContent = ""`) antes de entregar a área ao Qlik, e levaria os botões
 * junto.
 *
 * O menu mora no <body>, não no card: o card tem `overflow: hidden` (é o que
 * mantém a moldura única, item 10 dos travados) e recortaria o menu. Ele é
 * posicionado por `position: fixed` a partir do retângulo do botão.
 */

.ouv-card {
  /* âncora dos botões; não altera o desenho do card */
  position: relative;
}

.ouv-export {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  /* Só aparece ao passar o mouse, para não competir com o título do objeto */
  opacity: 0;
  transition: opacity 0.12s ease-in;
}

.ouv-card:hover .ouv-export,
.ouv-export:focus-within,
.ouv-export--aberto {
  opacity: 1;
}

/* No card de destaque (fundo azul) os ícones são brancos */
.ouv-card--destaque .ouv-export__btn {
  color: rgba(255, 255, 255, 0.9);
}

.ouv-export__btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #808080;
  cursor: pointer;
}

.ouv-export__btn:hover {
  background: #eef3f8;
  color: var(--ouv-azul);
}

.ouv-export__btn:focus-visible {
  outline: 2px solid var(--ouv-laranja);
  outline-offset: 1px;
}

.ouv-export__btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.ouv-export__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Modo compacto: some com os três ícones, entra o de três pontos ---- */

.ouv-export__kebab {
  display: none;
}

.ouv-export--compacto .ouv-export__btn--formato {
  display: none;
}

.ouv-export--compacto .ouv-export__kebab {
  display: flex;
}

/* ---- Menu (no <body>, posicionado por JS) ---- */

.ouv-export-menu {
  position: fixed;
  z-index: 1003; /* acima do topo fixo (999) e do menu do Senado (1000) */
  min-width: 190px;
  padding: 4px;
  box-sizing: border-box;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-borda);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.ouv-export-menu[hidden] {
  display: none;
}

.ouv-export-menu__item {
  width: 100%;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ouv-texto);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.ouv-export-menu__item:hover {
  background: #eef3f8;
}

.ouv-export-menu__item[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.ouv-export-menu__item svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Enquanto o Qlik gera o arquivo, o botão vira um anel girando.
 *
 * Não é frescura: medido em 21/09/2026 no Qlik Sense Desktop, o XLSX sai em
 * 18 ms, mas o PDF leva ~108 s e o PNG só falha depois de ~105 s. Sem sinal na
 * tela o usuário clica, não vê nada e conclui que o botão não funciona.
 */
.ouv-export__btn--ocupado svg,
.ouv-export-menu__item--ocupado svg {
  display: none;
}

.ouv-export__btn--ocupado::after,
.ouv-export-menu__item--ocupado::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ouv-girar 0.8s linear infinite;
}

@keyframes ouv-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ouv-export__btn--ocupado::after,
  .ouv-export-menu__item--ocupado::after {
    animation-duration: 3s;
  }
}

/* Aviso curto no rodapé do card: informação (azul) ou erro (vermelho) */
.ouv-export__aviso {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border-radius: 3px;
  background: #fbeaea;
  color: #9b1717;
  font-size: 12px;
}

.ouv-export__aviso[hidden] {
  display: none;
}

.ouv-export__aviso--info {
  background: #eaf2fb;
  color: var(--ouv-azul);
}

/* ==============================================| Conteúdo e grade |============================================== */

.ouv-conteudo {
  max-width: var(--ouv-largura);
  margin: 0 auto;
  padding: 24px var(--ouv-lateral) 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ouv-gap);
}

.ouv-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--ouv-gap);
}

.ouv-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ouv-gap);
}

.ouv-col-3 {
  grid-column: span 3;
}

.ouv-col-4 {
  grid-column: span 4;
}

.ouv-col-6 {
  grid-column: span 6;
}

.ouv-col-8 {
  grid-column: span 8;
}

.ouv-col-12 {
  grid-column: span 12;
}

/*
 * Altura fixa por faixa.
 *
 * As faixas de séries e de perfil usam a mesma altura; na maquete cada uma
 * tinha a sua (316 e 300 px), o que deixava os cards de tamanhos diferentes a
 * cada rolagem. São 350 px desde a v1.12.0 — subiram a 587 px entre a v1.36.0
 * e a v1.41.0 e **voltaram aos 350 px na v1.42.0**, a pedido do usuário.
 *
 * A Distribuição Geográfica é a faixa que foge do padrão de propósito: mapa e
 * árvore mais altos que o resto, porque o mapa do Brasil é o objeto que mais
 * precisa de altura e a árvore de regiões acompanha para a linha ficar
 * alinhada; e o gráfico de UF em classe própria (`.ouv-h-geo-barras`) — ver a
 * nota dele adiante. Na v1.43.0 os três ficaram um terço mais baixos.
 *
 * O Assunto seguiu o mesmo caminho das séries: 450 px até a v1.35.0, 587 px
 * daí à v1.41.0, e de volta aos **450 px na v1.42.0**.
 */
.ouv-h-kpi {
  height: 148px;
}
/*
 * Séries e Perfil voltaram aos 350 px da v1.12.0 na v1.42.0 (23/09/2026), a
 * pedido do usuário: a padronização em 587 px da v1.36.0 foi desfeita em todo
 * o painel, menos na Distribuição Geográfica. **O item 15 da 1.13.0 volta a
 * valer para estas duas faixas.**
 *
 * O card "Cor" acompanha, ainda que seja o placeholder "Em breve": ele divide
 * a linha do Perfil e ficar mais alto que os vizinhos desalinharia a faixa.
 */
.ouv-h-serie {
  height: 350px;
}
.ouv-h-perfil {
  height: 350px;
}
/*
 * 880 px até a v1.42.0; **587 px (880 x 2/3) na v1.43.0** (24/09/2026), a
 * pedido do usuário. É a mesma altura da v1.33.0, que ele tinha desfeito na
 * v1.34.0 por achar que mapa e árvore perdiam demais.
 */
.ouv-h-geo {
  height: 587px;
}

/*
 * O gráfico de UF é a exceção da faixa: ocupa a linha inteira sozinho.
 *
 * 587 px da v1.33.0 à v1.42.0; **391 px (587 x 2/3) na v1.43.0** (24/09/2026),
 * a pedido do usuário. **É a proporção que decide o desenho dele**: em 1833 x
 * 587 o gráfico de barras do Qlik desenha barras verticais com as 27 UFs de uma
 * vez; mais alto, volta para barras horizontais com rolagem, mostrando 7.
 * Mexer nesta altura muda o gráfico, não só o espaço dele.
 */
.ouv-h-geo-barras {
  height: 391px;
}
/*
 * De volta aos 450 px na v1.42.0 (23/09/2026). Entre a v1.35.0 e a v1.41.0 a
 * faixa acompanhou o gráfico de UF em 587 px; o usuário desfez a padronização
 * fora da Distribuição Geográfica. **O item 15 da 1.13.0 volta a valer aqui**,
 * com a tabela de tópicos de novo em 18 linhas visíveis (eram 20 a 587 px).
 */
.ouv-h-assunto {
  height: 450px;
}

/* Título de seção */
.ouv-secao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.ouv-secao__titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ouv-azul);
  white-space: nowrap;
}

.ouv-secao__linha {
  flex: 1 1 auto;
  height: 2px;
  background: var(--ouv-laranja);
  opacity: 0.5;
}

/* ==============================================| Card e slot do objeto |============================================== */

/*
 * A sombra fica na moldura externa, nunca no objeto.
 *
 * Vários objetos do app trazem sombra própria, e dentro do card ela desenhava
 * um segundo retângulo — a "borda dentro da borda". A sombra foi movida para
 * cá (mesmos valores do app) e removida do objeto, na seção "Slot ocupado pelo
 * Qlik". A borda de 8 px que esses objetos têm continua onde está: é da cor do
 * fundo, não aparece, e é ela que mantém o conteúdo na posição atual.
 */
.ouv-card {
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  display: flex;
  overflow: hidden;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-borda);
  border-radius: 3px;
  box-shadow: var(--ouv-sombra-card);
}

/* O card de destaque é chapado, sem sombra */
.ouv-card--destaque {
  box-shadow: none;
}

/* Área que receberá o objeto Qlik; o conteúdo atual é placeholder */
.ouv-slot {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ouv-card__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.ouv-card__titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ouv-texto);
}

.ouv-card__sub {
  margin-top: -8px;
  font-size: 11px;
  color: var(--ouv-texto-3);
}

/* ==============================================| Slot ocupado pelo Qlik |============================================== */

/* Aplicada pelo Ouvidoria.js quando o objeto do app substitui o placeholder */
.ouv-slot--qlik {
  display: block;
  gap: 0;
}

.ouv-slot--qlik > * {
  height: 100%;
}

/*
 * Moldura única nos cards.
 *
 * Vários objetos do app trazem moldura própria — borda de 8 px (14 px no
 * gráfico "Cor") numa cor de fundo, mais sombra —, o que desenhava um segundo
 * retângulo dentro do card. Não dá para simplesmente zerar o padding do card e
 * deixar o objeto preencher: seis objetos (Evolução, Mapa, Satisfação, Canal,
 * UF e Regiões) não têm essa borda, e neles o conteúdo encostaria na moldura.
 *
 * Então a borda continua ocupando o espaço, apenas transparente: a posição dos
 * elementos não muda, o retângulo some e a sombra passa para o .ouv-card.
 */
.ouv-card .ouv-slot--qlik .qv-object {
  border-color: transparent !important;
  /* background-color, e não background: a forma abreviada apagaria o
     background-image, e é dele que vêm os ícones dos indicadores */
  background-color: transparent !important;
  box-shadow: none !important;
}

/*
 * ---- Blindagem contra o tema do servidor (v1.24.0, 21/09/2026) ----
 *
 * No Qlik Sense Desktop o `qlik.theme.apply("Senado_Tema_Padrao")` sempre
 * falhou com "Invalid theme id" — o tema não existe lá. Então as 23 versões
 * anteriores foram todas validadas **sem tema nenhum aplicado**.
 *
 * No servidor o tema existe e aplica. E tema do Qlik pinta o fundo dos objetos:
 * a folha dele é injetada depois da nossa, e o filtro de Período apareceu azul
 * -escuro, o card de destaque com o miolo claro.
 *
 * A regra acima já protegia os cards, mas só o `.qv-object`, e só dentro de
 * `.ouv-card` — os filtros não são card e ficaram descobertos. Aqui a proteção
 * passa a valer para a cadeia inteira do objeto e também para os filtros.
 *
 * `background-color`, nunca `background`: a abreviada apagaria o
 * `background-image` de onde saem os ícones dos indicadores e da barra.
 *
 * Isto é cinto e suspensório: o `TEMA` no Ouvidoria.js também passou a ser "".
 * Se um dia o tema voltar a ser aplicado de propósito, o painel continua com a
 * aparência aprovada.
 */
.ouv-card .ouv-slot--qlik .qv-object-wrapper,
.ouv-card .ouv-slot--qlik .qv-object,
.ouv-card .ouv-slot--qlik .qv-inner-object,
.ouv-card .ouv-slot--qlik .qv-object-content-container,
.ouv-card .ouv-slot--qlik .qv-object-content,
.ouv-card .ouv-slot--qlik .qv-object-content > .ng-scope,
.ouv-card .ouv-slot--qlik .sn-kpi,
.ouv-card .ouv-slot--qlik .sn-kpi-data,
.ouv-filtro.ouv-slot--qlik,
.ouv-filtro.ouv-slot--qlik .qv-object-wrapper,
.ouv-filtro.ouv-slot--qlik .qv-object,
.ouv-filtro.ouv-slot--qlik .qv-inner-object,
.ouv-filtro.ouv-slot--qlik .qv-object-content-container,
.ouv-filtro.ouv-slot--qlik .qv-object-content,
.ouv-filtro.ouv-slot--qlik .qv-object-content > .ng-scope,
.ouv-filtro.ouv-slot--qlik .sn-kpi,
.ouv-filtro.ouv-slot--qlik .sn-kpi-data {
  background-color: transparent !important;
}

/*
 * O Período é a exceção: ele tem fundo próprio, o leve destaque da maquete.
 * Vem depois da regra acima de propósito, para reconquistar a cor.
 */
.ouv-filtro--periodo.ouv-slot--qlik {
  background-color: #f4f8fc !important;
}

/*
 * Moldura dos filtros: uma só, e nossa.
 *
 * Cada objeto do Qlik desenha a própria caixa, e cada um com uma altura: o
 * painel de filtro desenha 34 px encostados no topo, o seletor de datas 22 px,
 * dentro de contêineres de 54 px. Com as duas molduras ficava caixa dentro de
 * caixa; com só a do Qlik, os dez filtros não se alinhavam entre si.
 *
 * Aqui a moldura interna do Qlik é removida, a nossa fica valendo para os dez,
 * e o conteúdo de cada um é centralizado na altura do contêiner.
 */
.ouv-filtro.ouv-slot--qlik {
  padding: 0;
  overflow: hidden;
  background: var(--ouv-branco);
  border: 1px solid var(--ouv-borda-filtro);
}

/* O Período mantém o leve destaque definido na maquete */
.ouv-filtro--periodo.ouv-slot--qlik {
  background: #f4f8fc;
  border-color: #b9cbdc;
}

/* ---- Painel de filtro: tira a moldura interna e centraliza o rótulo ---- */

.ouv-filtro.ouv-slot--qlik .folded-listbox > .MuiGrid-container {
  border: 0 !important;
}

.ouv-filtro.ouv-slot--qlik .MuiBox-root > .MuiGrid-item {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.ouv-filtro.ouv-slot--qlik .listbox-popover-container,
.ouv-filtro.ouv-slot--qlik .folded-listbox {
  width: 100% !important;
}

/*
 * Calendário do seletor de datas.
 *
 * A extensão o anexa ao <body> e o fixa em z-index 2, e o topo fixo tem 999:
 * o calendário abria por baixo da barra de filtros. Aqui ele sobe para 999, o
 * mesmo do topo — como vem depois no DOM, fica por cima — e continua abaixo do
 * menu lateral do Senado, que usa 1000.
 *
 * O seletor repete `.dropdown-menu` de propósito: a regra da extensão é
 * `.qlik-daterangepicker.dropdown-menu { z-index: 2 !important }`, com duas
 * classes. Entre duas declarações !important vence a de maior especificidade,
 * então é preciso igualar as duas classes e acrescentar o `body >`.
 *
 * Escala de empilhamento da página:
 *   3     máscara do menu lateral (.sidebar-overlay)
 *   502   painel da ferramenta de seleções, como o Qlik o entrega
 *   999   topo fixo (.ouv-topo) e este calendário
 *   1000  menu lateral do Senado (.sidebar)
 *   1001  barra de seleções e painel, enquanto a ferramenta está aberta
 *   1020  menus de seleção do Qlik
 */
body > .qlik-daterangepicker.dropdown-menu {
  z-index: 999 !important;
}

/* ---- Seletor de datas: o ícone de calendário já identifica, o título sai ---- */

.ouv-filtro--periodo.ouv-slot--qlik .qv-object-header {
  display: none !important;
}

.ouv-filtro--periodo.ouv-slot--qlik .qv-object-content > .ng-scope {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.ouv-slot--erro {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ouv-texto-3);
}

/* ==============================================| Títulos dos objetos |============================================== */

/*
 * Um só padrão de título para gráficos e tabelas, igual ao dos indicadores.
 *
 * No app os objetos ficavam dentro de um layout container de fundo azul, e
 * cada um trazia de lá o seu próprio título: 15 px nos gráficos, 21,1 px nos
 * KPIs, e no gráfico de Evolução a cor **branca** — que sobre o card claro do
 * mashup simplesmente sumia. Desmembrados do container, esses títulos passaram
 * a conviver na mesma tela sem combinar entre si.
 *
 * Aqui os títulos dos gráficos e da tabela recebem exatamente a tipografia dos
 * títulos dos indicadores ("Arquivadas"): 21,1071 px, peso 700 e #808080 — o
 * cinza que o próprio Qlik já usa nos demais. A cor é declarada para todos, e
 * não só para a Evolução, para que nenhum objeto volte a trazer a sua.
 *
 * O `:not(.ouv-kpi)` deixa os indicadores de fora (têm regra própria na seção
 * seguinte) e o `.ouv-card` deixa de fora os filtros e a barra de seleções,
 * que não ficam dentro de card.
 */
.ouv-card .ouv-slot--qlik:not(.ouv-kpi) .qv-object-title-text {
  font-size: 21.1071px !important;
  font-weight: 700 !important;
  color: #808080 !important;
  /*
   * Título maior não cabe mais em uma linha nos cards estreitos: o Qlik o
   * cortaria com reticências ("Manifestações por canal de at…"). Aqui ele
   * quebra em duas linhas, e o cabeçalho cresce junto — medido: nenhum
   * cabeçalho passa por cima do conteúdo do objeto.
   */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/*
 * Subtítulo no tamanho que o título tinha antes (15 px) e sem negrito, para
 * ficar claramente subordinado ao título novo. Hoje só o gráfico de Satisfação
 * usa subtítulo ("Média das menções"), mas a regra vale para todos.
 */
.ouv-card .ouv-slot--qlik:not(.ouv-kpi) .qv-object-subtitle {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #808080 !important;
}

/*
 * Rótulos dos eixos da Evolução das Manifestações.
 *
 * Mesma origem do título branco: o objeto foi desenhado para o fundo azul do
 * container, então os valores do eixo Y e as datas do eixo X também vieram em
 * branco e ficavam invisíveis no card. #595959 é o cinza que os outros doze
 * objetos já usam nos seus rótulos — conferido um a um.
 *
 * O seletor pega só `text` dentro do conteúdo: a linha e os pontos do gráfico
 * são `path` e `circle`, e continuam laranja.
 */
#grfEvolucao .qv-object-content text {
  fill: #595959 !important;
}

/* ==============================================| Indicadores |============================================== */

/*
 * Os quatro indicadores com o mesmo título e o mesmo número.
 *
 * O KPI de Quantidade traz do app um título de 21,1 px em peso 700 e um valor
 * de 53,6 px em peso 400; os outros três vinham com 15 px e 28,5 px. Os valores
 * são fixos — conferido em 1920, 1440 e 1100 px, o Qlik não os reescala —,
 * então dá para igualar sem quebrar em tela menor.
 *
 * Só o número principal muda: o percentual ao lado fica como está, e é por isso
 * que o seletor desce por `.sn-kpi-no-shrink` (valor) e não pelo
 * `.sn-kpi-secondary-wrapper` (percentual), que são irmãos.
 */
.ouv-card:not(.ouv-card--destaque) .ouv-kpi .qv-object-title-text {
  font-size: 21.1071px !important;
  font-weight: 700 !important;
}

.ouv-card:not(.ouv-card--destaque) .ouv-kpi .sn-kpi-value-wrapper > .sn-kpi-no-shrink span {
  font-size: 53.6054px !important;
  font-weight: 400 !important;
}

/*
 * O ícone é background-image do objeto inteiro, centralizado em toda a altura
 * dele — inclusive a faixa do título. O número fica só na área de dados, abaixo
 * do título, e por isso os dois não se alinhavam. Os 8 px descem o ícone até o
 * centro do número.
 *
 * O valor é empírico: a arte tem margem transparente e ocupa 128x102 com
 * `contain`, então não sobra espaço vertical e a conta pela porcentagem não
 * fecha. Foi calibrado comparando os centros no print.
 */
.ouv-card:not(.ouv-card--destaque) .ouv-kpi .qv-object {
  background-position: 0% calc(50% + 8px) !important;
}

/*
 * Respiro entre o número e o percentual. O wrapper alinha à direita
 * (`flex-end`), então o gap empurra o número para a esquerda e o percentual
 * fica onde está.
 */
.ouv-card:not(.ouv-card--destaque) .ouv-kpi .sn-kpi-value-wrapper {
  gap: 5px !important;
}

/* Percentual dois pontos maior (era 16,2649 px) */
.ouv-card:not(.ouv-card--destaque) .ouv-kpi .sn-kpi-secondary-wrapper span {
  font-size: 18.2649px !important;
}

/*
 * O card de destaque **não tem ícone** — removido a pedido do usuário em
 * 22/09/2026, com o painel já em validação.
 *
 * Até a 1.30.0 havia aqui um SVG embutido no fundo do objeto Qlik (uma caixa
 * com tampa, em traço branco), porque o app não tem ícone para a Quantidade e
 * os três que existem são PNG de fundo branco opaco, que num card azul viravam
 * um retângulo branco. Se um dia voltar a ser pedido, está na v1.10.0 e no zip
 * da 1.30.0 — mas volte também a conferir se o app já não ganhou um ícone
 * próprio, que seria o caminho melhor.
 */

/* ==============================================| Placeholders — KPIs |============================================== */

.ouv-card--destaque {
  background: var(--ouv-azul-kpi);
  border-color: var(--ouv-azul-kpi);
}

.ouv-card--destaque .ouv-card__titulo {
  color: #cfe2f3;
}

.ouv-kpi {
  justify-content: center;
}

.ouv-kpi__destaque {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--ouv-dourado);
  font-variant-numeric: tabular-nums;
}

.ouv-kpi__legenda {
  font-size: 11.5px;
  color: #9ec0de;
}

.ouv-kpi__linha {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ouv-kpi__icone {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--ouv-azul-kpi);
  stroke-width: 1.6;
}

.ouv-kpi__numeros {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.ouv-kpi__valor {
  font-size: 30px;
  font-weight: 600;
  color: var(--ouv-azul);
}

.ouv-kpi__pct {
  font-size: 17px;
  font-weight: 600;
  color: var(--ouv-laranja);
}

/* ==============================================| Placeholders — gráficos |============================================== */

/* Linha */
.ouv-grafico {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.ouv-grafico svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Medidor */
.ouv-medidor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.ouv-medidor__escala {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ouv-texto-3);
}

.ouv-medidor__trilho {
  position: relative;
  height: 26px;
  background: var(--ouv-trilho);
}

.ouv-medidor__valor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--ouv-laranja);
}

.ouv-medidor__alvo {
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 0;
  width: 3px;
  background: var(--ouv-texto);
}

.ouv-medidor__numero {
  text-align: right;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ouv-azul);
}

.ouv-medidor__nota {
  padding-top: 8px;
  border-top: 1px solid #edf2f6;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ouv-texto-3);
}

/* Barras verticais */
.ouv-vbarras {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 6px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.ouv-vbarras--largo {
  gap: 26px;
  padding: 8px 12px 0;
}

.ouv-vbarras--estreito {
  gap: 8px;
}

.ouv-vb {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.ouv-vb__valor {
  font-size: 11px;
  color: var(--ouv-texto-2);
}

.ouv-vb__barra {
  width: 100%;
  background: var(--ouv-azul-barra);
}

.ouv-vb__barra--claro {
  background: var(--ouv-azul-claro);
}

.ouv-vb__barra--cinza {
  background: var(--ouv-cinza-barra);
}

.ouv-vb__rotulo {
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--ouv-texto-2);
}

/* Barras horizontais */
.ouv-hbarras {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}

.ouv-hbarras--largo {
  gap: 9px;
}

.ouv-hl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ouv-texto-2);
}

.ouv-hl__rotulo {
  flex-shrink: 0;
  width: 26px;
  text-align: right;
}

.ouv-hbarras--largo .ouv-hl__rotulo {
  width: 120px;
}

.ouv-hl__trilho {
  flex: 1 1 auto;
  height: 13px;
  background: var(--ouv-trilho);
}

.ouv-hl__barra {
  height: 13px;
  background: var(--ouv-azul-barra);
}

.ouv-hl__barra--cinza {
  background: var(--ouv-cinza-barra);
}

.ouv-hl__valor {
  flex-shrink: 0;
  width: 40px;
}

/* Visualização incompleta (objeto "Cor") */
.ouv-incompleto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--ouv-borda-filtro);
  background: repeating-linear-gradient(135deg, #f7fafc 0 6px, #ffffff 6px 12px);
  font-size: 12px;
  color: var(--ouv-texto-3);
}

.ouv-incompleto svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #a6b4c1;
  stroke-width: 1.6;
}

/* Mapa */
.ouv-mapa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf1f6;
}

.ouv-mapa svg {
  height: 100%;
  max-height: 300px;
}

.ouv-mapa-legenda {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.ouv-mapa-legenda__titulo {
  font-size: 11px;
  color: var(--ouv-texto-2);
}

.ouv-mapa-legenda__sub {
  font-size: 10px;
  color: var(--ouv-texto-4);
}

.ouv-mapa-legenda__escala {
  flex: 1 1 auto;
}

.ouv-mapa-legenda__gradiente {
  height: 9px;
  background: linear-gradient(90deg, #dce7f0, #1b4e7e);
}

.ouv-mapa-legenda__limites {
  display: flex;
  justify-content: space-between;
  padding-top: 2px;
  font-size: 10px;
  color: var(--ouv-texto-3);
}

/* Treemap */
.ouv-treemap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 3px;
}

.ouv-treemap__col {
  flex-basis: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ouv-treemap__linha {
  flex-basis: 0;
  min-height: 0;
  display: flex;
  gap: 3px;
}

.ouv-tm {
  flex-basis: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ouv-branco);
}

.ouv-tm--cinza {
  background: var(--ouv-cinza-barra);
  color: #42505e;
}

/* Tabela */
.ouv-tabela {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: #4a5a69;
}

.ouv-tabela__cab {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ouv-borda);
  font-size: 11px;
  color: var(--ouv-texto-3);
}

.ouv-tabela__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--ouv-divisoria);
}

.ouv-tabela__linha--total {
  font-weight: 600;
  color: var(--ouv-texto);
}

/* ==============================================| Responsivo |============================================== */


/* Abaixo de 1200 px: faixas de 4 viram 2+2; objetos de 6 colunas ocupam a linha inteira */
@media (max-width: 1199.98px) {
  .ouv-col-3 {
    grid-column: span 6;
  }

  /*
   * O mapa (8) e a árvore (4) da Distribuição Geográfica passam cada um a
   * ocupar a linha inteira. Deixar a árvore em meia linha só abriria um vão ao
   * lado, porque o gráfico de UF já vem sozinho na linha de baixo.
   */
  .ouv-col-4,
  .ouv-col-6,
  .ouv-col-8 {
    grid-column: span 12;
  }
}

/* Celular: um objeto por linha; topo deixa de ser fixo para não ocupar a tela */
@media (max-width: 767.98px) {
  /*
   * O topo voltou a ficar preso no alto no celular (v1.41.0, a pedido do
   * usuário). Ele tinha deixado de ser fixo em 18/09/2026 justamente porque
   * ocupava 576 px de tela; agora ele é sempre o topo **recolhido**, que custa
   * pouco mais de 120 px, e o filtro fica a um toque em qualquer ponto da
   * página.
   */
  .ouv-topo {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .ouv-filtros__conteudo {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Celular: dois filtros por linha */
  .ouv-filtros__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ouv-col-3,
  .ouv-col-4,
  .ouv-col-6,
  .ouv-col-8 {
    grid-column: span 12;
  }

  .ouv-secao__titulo {
    white-space: normal;
  }

  :not(#_) .sf-wrapper .ouv-atualizacao {
    width: auto;
  }
}

/* ==============================================| Fonte única |============================================== */

/*
 * Esta seção é a última do arquivo de propósito.
 *
 * O Qlik injeta as folhas de estilo dele em tempo de execução, depois do nosso
 * <link>, e o tema do app ainda define Roboto e "QlikView Sans" nos objetos.
 * Sem !important o painel fica com quatro fontes diferentes ao mesmo tempo.
 *
 * Os ícones são a armadilha: Material Icons, LUI icons (Qlik) e o Font Awesome
 * que vem no essencial-2020 do Senado desenham glifos a partir da própria
 * font-family. Por isso eles são restaurados no fim da seção, depois do
 * override, e com especificidade maior.
 */

html,
body {
  font-family: var(--ouv-fonte) !important;
  /* impede o Safari/iOS de aumentar o texto ao girar a tela */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Objetos do Qlik, inclusive os rótulos desenhados em SVG nos gráficos.
 * .qvt-selections e .qv-panel-* cobrem a barra de seleções atuais, que não
 * carrega a classe .qv-object.
 */
.qv-object,
.qv-object *,
.qv-inner-object,
.qv-object-content,
.qv-object-content *,
.qv-selection-toolbar,
.qv-selection-toolbar *,
.qvt-selections,
.qvt-selections *,
[class*="qv-panel-"],
[class*="qv-panel-"] *,
[class*="qv-subtoolbar"],
[class*="qv-subtoolbar"] *,
[class*="listbox"],
[class*="listbox"] *,
[class*="popover"],
[class*="popover"] *,
svg text,
svg tspan {
  font-family: var(--ouv-fonte) !important;
}

/* No WebKit os campos e botões não herdam font-family */
input,
textarea,
button,
select,
input::placeholder,
textarea::placeholder {
  font-family: var(--ouv-fonte) !important;
}

/* Firefox — reforço; o Qlik às vezes reaplica a fonte pelo estilo inline */
@supports (-moz-appearance: none) {
  .qv-object,
  .qv-object *,
  .qv-inner-object,
  .qv-object-content,
  .qv-object-content *,
  .qvt-selections,
  .qvt-selections *,
  [class*="qv-panel-"],
  [class*="qv-panel-"] *,
  svg text,
  svg tspan {
    font-family: var(--ouv-fonte) !important;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Safari / WebKit no iOS — reforço; a garantia vem do forçador em Ouvidoria.js */
@supports (-webkit-touch-callout: none) {
  .qv-object,
  .qv-object *,
  .qv-inner-object,
  .qv-object-content,
  .qv-object-content *,
  .qvt-selections,
  .qvt-selections *,
  [class*="qv-panel-"],
  [class*="qv-panel-"] *,
  [class*="listbox"],
  [class*="listbox"] *,
  [class*="popover"],
  [class*="popover"] *,
  svg text,
  svg tspan {
    font-family: var(--ouv-fonte) !important;
    -webkit-font-smoothing: antialiased;
  }
}

/* ---- Ícones: precisam da própria font-family, não podem ser sobrescritos ---- */

/* Font Awesome do essencial-2020 (topo e rodapé do Senado) */
html body .fa,
html body .fas,
html body .far,
html body .fab,
html body [class^="fa-"],
html body [class*=" fa-"],
html body [class^="fa-"]::before,
html body [class*=" fa-"]::before {
  font-family: "Essencial 5 Free", "Essencial 5 Brands", "Font Awesome 5 Free",
    "Font Awesome 5 Brands", FontAwesome !important;
}

/* Material Icons e Leonardo UI icons (Qlik) */
html body .material-icons,
html body .material-symbols-outlined,
html body .material-symbols-rounded,
html body .material-symbols-sharp {
  font-family: "Material Icons" !important;
}

html body .lui-icon,
html body .lui-icon::before,
html body [class*="lui-icon"] {
  font-family: "LUI icons" !important;
}

/* Ícones próprios do Qlik dentro dos objetos */
html body [class*="qui-icon"],
html body [class*="qs-icon"],
html body [class*="qv-icon"] {
  font-family: "LUI icons", "QlikView Sans" !important;
}

/* ==============================================| Barra de seleções na faixa azul |============================================== */

/*
 * A barra de seleções saiu de baixo da barra de filtros e subiu para a faixa
 * azul, logo abaixo do título. Lá o cinza do Qlik destoava de tudo, então o
 * objeto é reestilizado inteiro: fundo transparente, texto e ícones em branco,
 * e os quatro botões com desenho nosso.
 *
 * O objeto continua sendo o `CurrentSelections` do Qlik — pesquisa inteligente,
 * voltar, avançar, limpar e as fichas de seleção seguem sendo dele. Só a
 * aparência é nossa.
 */

/*
 * Título e data na mesma linha, com a data encostada à direita.
 *
 * Os contêineres do essencial.js não ocupam a largura toda, daí o `width: 100%`
 * nos dois níveis acima. E o padding lateral deles é de 15px fixos, enquanto a
 * barra e a grade de filtros usam `--ouv-lateral` (16 a 28px): a diferença
 * entra como padding para que título, fichas de seleção e filtros comecem na
 * mesma vertical.
 */
:not(#_) .sf-wrapper .menu-local .pt-2,
:not(#_) .sf-wrapper .ouv-titulo {
  width: 100%;
}

.ouv-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  padding: 0 calc(var(--ouv-lateral) - 15px);
}

:not(#_) .sf-wrapper .ouv-titulo .ouv-atualizacao {
  min-height: 0;
  width: auto;
  flex: 0 0 auto;
  font-size: 14px;
  white-space: nowrap;
}

/*
 * No celular o título quebra em várias linhas e a data não cabe ao lado: as
 * duas passam a ficar uma sob a outra, a data alinhada à esquerda.
 */
@media (max-width: 575.98px) {
  .ouv-titulo {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* No celular o essencial.js centraliza o título; a data acompanha */
  :not(#_) .sf-wrapper .ouv-titulo .ouv-atualizacao {
    margin-left: 0;
    justify-content: center;
    font-size: 13px;
  }
}

/* A faixa azul passa a ser só o berço da barra */
:not(#_) .sf-wrapper .navbar--sf.ouv-navbar {
  padding: 0;
  display: block;
}

.ouv-selecoes {
  background: transparent;
  border-bottom: 0;
}

/* ---- O objeto do Qlik, sem a roupa cinza ---- */

.ouv-selecoes .qvt-selections,
.ouv-selecoes .qv-selections-pager,
.ouv-selecoes .qv-pager,
.ouv-selecoes .qv-global-search-container {
  background: transparent !important;
  color: var(--ouv-branco) !important;
}

/*
 * ---- O container da busca global não pode comer clique ----
 *
 * O objeto de seleções do Qlik desenha o container da busca **fora** da faixa
 * dele: 38 px de altura e 1690 de largura, logo abaixo da barra, invisível e
 * por cima do que vier embaixo. Com a barra fina da v1.37.0 isso ficou
 * gritante — metade dela não respondia ao clique (visto em 22/09/2026) —, mas
 * o problema é antigo: ele já cobria a faixa de cima dos filtros.
 *
 * Fechado, o container **não tem nenhum filho** (medido). Então ele deixa o
 * clique passar e os filhos recebem de volta: quando o usuário abre a busca
 * pela lupa, o campo aparece como filho e continua clicável.
 */
.ouv-selecoes .qv-global-search-container {
  pointer-events: none;
}

.ouv-selecoes .qv-global-search-container * {
  pointer-events: auto;
}

/*
 * As divisórias do Qlik entre os blocos da barra somem.
 *
 * O `:not(#_)` não seleciona nada de especial — serve só para pesar como um id
 * na conta de especificidade. Sem ele a regra empata com a do próprio Qlik
 * (`.bright.qv-panel-current-selections .buttons.border-bottom`), e como a
 * folha dele é injetada depois da nossa, o empate seria dele. É o mesmo truque
 * já usado nas regras do topo do Senado.
 */
:not(#_) .ouv-selecoes .qv-selections-pager .buttons,
:not(#_) .ouv-selecoes .qv-selections-pager .buttons-end,
:not(#_) .ouv-selecoes .qv-selections-pager .wrap {
  border: 0 !important;
}

/*
 * Espaçamento do bloco de botões: pouco entre um ícone e outro, e um respiro
 * maior antes das fichas de seleção. O `align-items: center` é o que tira os
 * ícones do rodapé da barra — eles vinham alinhados pela linha de base do
 * texto, 8 px abaixo do centro.
 */
:not(#_) .ouv-selecoes .qv-selections-pager .buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding-right: 16px;
  box-sizing: content-box;
}

/* Texto "Nenhuma seleção aplicada": vinha no cinza do Qlik, ilegível no azul */
.ouv-selecoes .qv-pager .MuiTypography-root {
  color: rgba(255, 255, 255, 0.85) !important;
}

/*
 * ...e vinha em 12 px, bem menor que o "Marcadores" do outro lado da barra.
 * Passa ao mesmo tamanho dele (16 px) e sem negrito, a pedido do usuário
 * (reunião de 21/09/2026).
 *
 * O `:not(.current-selections-item)` é o que separa este texto das fichas: as
 * duas coisas moram dentro do mesmo `.qv-pager` e usam as mesmas classes do
 * MUI. A ficha é um `MuiGrid-container` que carrega aquela classe; o estado
 * vazio é um container irmão, sem ela.
 */
.ouv-selecoes .qv-pager > div > .MuiGrid-container:not(.current-selections-item) > .MuiGrid-item > p {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/*
 * Os quatro botões. O glifo do Qlik vem de uma fonte de ícones (LUI icons);
 * `font-size: 0` apaga o glifo sem apagar o botão, e o desenho novo entra como
 * imagem de fundo — SVG embutido, traço branco, no mesmo peso dos outros
 * ícones do painel. Imagem de fundo, e não `mask`, para não depender de
 * suporte a máscara no Safari e no Firefox.
 */
.ouv-selecoes .qv-subtoolbar-button {
  width: 40px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 3px;
  background-color: transparent !important;
}

.ouv-selecoes .qv-subtoolbar-button:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

.ouv-selecoes .qv-subtoolbar-button.disabled {
  opacity: 0.45;
}

/* Os desenhos subiram 2 pontos (19 -> 21 px) na reunião de 21/09/2026. */
.ouv-selecoes .qv-subtoolbar-button .lui-icon {
  display: block !important;
  font-size: 0 !important;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
}

/* Pesquisa inteligente — lupa */
.ouv-selecoes .lui-icon--selection-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E");
}

/* Voltar uma etapa — seta de desfazer */
.ouv-selecoes .lui-icon--selections-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7L4 12l5 5'/%3E%3Cpath d='M4 12h9a6 6 0 0 1 0 12h-2'/%3E%3C/svg%3E");
}

/* Avançar uma etapa — a mesma seta, espelhada */
.ouv-selecoes .lui-icon--selections-forward {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 7l5 5-5 5'/%3E%3Cpath d='M20 12h-9a6 6 0 0 0 0 12h2'/%3E%3C/svg%3E");
}

/* Limpar todas as seleções — borracha */
.ouv-selecoes .lui-icon--clear-selections {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6.5 16.5l-2-2a1.5 1.5 0 0 1 0-2.1l8-8a1.5 1.5 0 0 1 2.1 0l4.5 4.5a1.5 1.5 0 0 1 0 2.1l-7.5 7.5H8z'/%3E%3Cpath d='M10 7.5l6.5 6.5'/%3E%3C/svg%3E");
}

/*
 * A pesquisa inteligente abre uma faixa branca logo abaixo da barra, por cima
 * dos filtros — é assim que o Qlik a entrega. Aqui ela só ganha o mesmo
 * respiro lateral do resto da página e uma sombra, para descolar dos filtros.
 */
:not(#_) .ouv-selecoes .qv-global-search-input {
  padding-left: var(--ouv-lateral);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* ---- Fichas de seleção ---- */

/*
 * A ficha vem verde do Qlik — cor de "selecionado" na tela dele, mas sobre o
 * azul do Senado ela grita.
 *
 * Até a v1.21.0 ela era uma pastilha translúcida branca. Na reunião de
 * 21/09/2026 os usuários pediram o azul institucional #005B9E no lugar do
 * verde, e o usuário confirmou que é a ficha da barra — isto substitui a
 * pastilha translúcida do item 19 da v1.20.0.
 *
 * O fundo é chapado, e não translúcido, porque a faixa atrás é #007db8: um
 * azul mais claro. O #005B9E recorta bem sobre ele; translúcido, os dois se
 * misturariam. O contorno branco esmaecido continua, para fechar o desenho da
 * pastilha, e o hover escurece em vez de clarear — clarear aproximaria a ficha
 * da cor da faixa.
 */
.ouv-selecoes .current-selections-item {
  background-color: #005b9e !important;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-sizing: border-box;
}

.ouv-selecoes .current-selections-item:hover {
  background-color: #004c85 !important;
}

.ouv-selecoes .current-selections-item,
.ouv-selecoes .current-selections-item * {
  color: var(--ouv-branco) !important;
  fill: var(--ouv-branco) !important;
}

.ouv-selecoes .current-selections-item .MuiDivider-root {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/*
 * Texto da ficha, 2 pontos acima do que o Qlik entrega (reunião de 21/09/2026):
 * o nome do campo passa de 11 para 13 px e a contagem ("14 de 2438"), de 10
 * para 12 px. São dois `<p>` irmãos, sem classe própria — o primeiro é o nome,
 * o segundo é a contagem.
 */
.ouv-selecoes .current-selections-item p.MuiTypography-root {
  font-size: 13px !important;
}

.ouv-selecoes .current-selections-item p.MuiTypography-root + p.MuiTypography-root {
  font-size: 12px !important;
}

/*
 * A barrinha de 4 px no pé da ficha mostra a proporção da seleção em três
 * trechos — selecionado, alternativo e excluído —, que vêm do Qlik em verde e
 * dois cinzas. Os cinzas claros viravam um risco branco sobre o azul; aqui os
 * três passam a ser branco em intensidades diferentes.
 *
 * Os trechos não têm classe própria (o MUI gera nomes embaralhados), então a
 * distinção é pela posição: 1º selecionado, 2º alternativo, 3º excluído. Se o
 * Qlik mudar essa estrutura, o que se perde é a cor de uma tira de 4 px.
 */
.ouv-selecoes .current-selections-item > .MuiGrid-item + .MuiGrid-item .MuiGrid-item:nth-child(1) {
  background-color: var(--ouv-branco) !important;
}

.ouv-selecoes .current-selections-item > .MuiGrid-item + .MuiGrid-item .MuiGrid-item:nth-child(2) {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

.ouv-selecoes .current-selections-item > .MuiGrid-item + .MuiGrid-item .MuiGrid-item:nth-child(3) {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

/* ---- Botão "Marcadores" na faixa azul ---- */

.ouv-marcadores__abrir {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--ouv-branco);
}

.ouv-marcadores__abrir:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ouv-marcadores__abrir[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24);
}

.ouv-marcadores__icone {
  stroke: var(--ouv-branco);
  /* Acompanha os 2 pontos dos ícones do Qlik, para a barra ficar coerente */
  width: 18px;
  height: 18px;
}