/* Estilos do app de coleta. Tudo dirigido pelos tokens do design system BNI. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-strong);
  background: var(--surface-subtle);
}
#root { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--text-brand); }

/* Cabeçalho */
.topo { background: var(--surface-page); border-bottom: var(--border-width) solid var(--border-subtle); }
.topo-linha {
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-4);
}
.topo-divisor { width: var(--border-width); align-self: stretch; background: var(--border-default); }
.topo-titulo {
  font-size: var(--text-body-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body);
}
.topo-org {
  margin-left: auto; font-size: var(--text-overline);
  letter-spacing: var(--tracking-caps-wide); text-transform: uppercase; color: var(--text-muted);
}
.topo-usuario {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.topo-usuario-nome { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.topo-usuario-papel {
  font-size: var(--text-overline); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}

/* Tela de login */
.login-tela {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-4);
  background: var(--surface-subtle); padding: var(--space-5);
}
.login-cartao {
  width: 100%; max-width: 380px; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle); border-top: var(--border-accent) solid var(--bni-red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.login-marca { margin-bottom: var(--space-1); }
.login-titulo {
  font-size: var(--text-body-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body);
}
.login-sub { margin: calc(var(--space-2) * -1) 0 0; color: var(--text-muted); font-size: var(--text-body-sm); }
.login-senha {
  min-height: 0; height: auto; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.login-rodape { font-size: var(--text-caption); color: var(--text-muted); }

/* Corpo: menu lateral + conteúdo */
.corpo { display: flex; flex: 1; align-items: stretch; }
.lateral {
  width: 248px; flex-shrink: 0;
  background: var(--surface-page);
  border-right: var(--border-width) solid var(--border-subtle);
  padding: var(--space-4) 0 var(--space-6);
  transition: width var(--transition-base);
  overflow: hidden;
}
.lateral nav { position: sticky; top: var(--space-4); display: flex; flex-direction: column; }
.grupo-menu { display: flex; flex-direction: column; gap: var(--space-1); }
.grupo-menu + .grupo-menu { margin-top: var(--space-5); }
.grupo-menu-rotulo {
  padding: 0 var(--space-4); margin-bottom: var(--space-2);
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden;
}
.item-menu {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-2) var(--space-4);
  border: none; background: none; font: inherit;
  font-size: var(--text-body-sm); color: var(--text-body);
  border-left: var(--border-accent) solid transparent;
  text-align: left; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.item-menu:hover { background: var(--grey-50); color: var(--text-strong); }
.item-menu.ativo {
  border-left-color: var(--bni-red);
  background: var(--bni-red-tint);
  color: var(--bni-red);
  font-weight: var(--weight-medium);
}
.item-menu svg { flex-shrink: 0; }
.item-menu-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral.recolhida { width: 64px; }
.lateral.recolhida .item-menu { justify-content: center; padding-left: var(--space-2); padding-right: calc(var(--space-2) + var(--border-accent)); }
.lateral.recolhida .item-menu-rotulo { display: none; }
.lateral.recolhida .grupo-menu-rotulo { display: none; }
.lateral.recolhida .grupo-menu + .grupo-menu {
  margin-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  padding-top: var(--space-4);
}

/* Conteúdo */
.conteudo {
  flex: 1; min-width: 0; width: 100%; max-width: var(--container-xl);
  margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8);
}

/* Resumo */
.resumo-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--space-5); }
.cartao-frente { cursor: pointer; transition: box-shadow var(--transition-base); }
.cartao-frente:hover { box-shadow: var(--shadow-md); }
.cartao-frente-entregavel {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-caption); color: var(--text-muted);
}
.resumo-secao { margin-top: var(--space-7); }
.resumo-aviso { margin-top: var(--space-6); }

/* Barra de progresso (artefatos) */
.progresso-trilha {
  height: var(--space-2); background: var(--grey-100);
  border-radius: var(--radius-sm); overflow: hidden; margin-top: var(--space-3);
}
.progresso-preenchimento { height: 100%; background: var(--bni-red); transition: width var(--transition-base); }
.progresso-legenda { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }

/* Barra de ações da entidade */
.toolbar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: var(--space-5) 0 var(--space-4); }
.toolbar-busca { flex: 1; min-width: calc(var(--space-10) * 2); }
.toolbar-contagem { font-size: var(--text-caption); color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Tabela */
.tabela-envelope {
  overflow-x: auto; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thick) solid var(--border-subtle);
  white-space: nowrap;
}
.tabela td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-sm); color: var(--text-body);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--grey-50); }
.tabela tbody tr.linha-clicavel { cursor: pointer; }
.tabela tbody tr.linha-clicavel:hover { background: var(--bni-red-tint); }
.celula-forte { color: var(--text-strong); font-weight: var(--weight-medium); }
.celula-acoes { text-align: right; white-space: nowrap; width: 1%; }
.celula-acoes .acao { margin-left: var(--space-1); }
.artefato-numero { color: var(--text-brand); font-weight: var(--weight-bold); }
.celula-artefato { white-space: normal; max-width: 48ch; }
.link-detalhe { color: var(--text-strong); font-weight: var(--weight-medium); text-decoration: none; }
.link-detalhe:hover { color: var(--bni-red); text-decoration: underline; }
.linha-secundaria { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-1); }

/* Página de detalhe do artefato */
.voltar {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; margin-bottom: var(--space-4);
}
.voltar:hover { color: var(--bni-red); }
.detalhe-acoes { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0; }
.detalhe-atualizado { margin: 0; }
.detalhe-secao { margin-bottom: var(--space-6); }
.detalhe-secao .grupo-menu-rotulo { padding: 0; margin-bottom: var(--space-3); }
.detalhe-areas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.detalhe-texto { white-space: pre-line; color: var(--text-body); line-height: var(--leading-relaxed); }
.link-externo {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--bni-red); text-decoration: none; font-weight: var(--weight-medium);
}
.link-externo:hover { text-decoration: underline; color: var(--bni-red-hover); }
.vazio { padding: var(--space-8) var(--space-5); text-align: center; color: var(--text-muted); }
.vazio p { margin: 0 0 var(--space-4); }

/* Formulário */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.campo-cheio { grid-column: 1 / -1; }
.campo-rotulo {
  display: block; font-size: var(--text-body-sm); color: var(--text-body);
  font-weight: var(--weight-medium); margin-bottom: var(--space-1);
}
.campo-textarea {
  width: 100%; font: inherit; font-size: var(--text-body-md); color: var(--text-strong);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-card);
  min-height: var(--space-9); resize: vertical;
}
.campo-textarea:focus { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--border-width); }
.form-erro { margin-bottom: var(--space-4); }

/* Ficha completa de um registro */
.ficha-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
}
.ficha-rotulo {
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-1);
}
.ficha-valor { color: var(--text-strong); font-size: var(--text-body-md); word-break: break-word; }
.ficha-item-longa {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}
@media (max-width: 900px) { .ficha-grade { grid-template-columns: 1fr; } }

/* Grupos de acesso (papéis) */
.papel-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.papel-titulo { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-strong); }
.papel-secao {
  padding: 0; margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle);
}
.papel-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); }
.papel-switches { display: flex; flex-direction: column; gap: var(--space-3); }
.papel-fixo { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-body-sm); }
@media (max-width: 900px) { .papel-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .papel-areas { grid-template-columns: 1fr; } }

/* Anexos */
.lista-anexos { display: flex; flex-direction: column; }
.anexos-acoes { display: flex; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-4); }
.anexos-categoria { width: min(240px, 60%); }
.form-anexos {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--text-body-sm);
}
.linha-anexo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: var(--text-body);
}
.linha-anexo:last-child { border-bottom: none; }
.linha-anexo-nome { flex: 1; min-width: 0; }
.linha-anexo-nome .link-detalhe { word-break: break-word; }

/* Placeholders de carregamento (skeleton): pulsam até os dados chegarem */
@keyframes esqueleto-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.esqueleto {
  display: block;
  background: var(--grey-100);
  border-radius: var(--radius-sm);
  animation: esqueleto-pulso 1.15s ease-in-out infinite;
}
th .esqueleto, td .esqueleto { display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; opacity: 0.7; } }

.carregando-inicial {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--surface-subtle); padding: var(--space-5);
}
.carregando-cartao {
  width: 100%; max-width: 360px; background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--border-accent) solid var(--bni-red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.carregando-cartao .esqueleto { margin-top: var(--space-1); }

/* Registros vinculados (relação reversa na ficha, ex.: sistemas de um fornecedor) */
.lista-vinculos { display: flex; flex-direction: column; }
.linha-vinculo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; text-decoration: none; color: var(--text-body);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.linha-vinculo:last-child { border-bottom: none; }
.linha-vinculo svg { color: var(--text-muted); flex-shrink: 0; }
.linha-vinculo:hover .link-detalhe { color: var(--bni-red); text-decoration: underline; }
.vinculos-acao { margin-top: var(--space-4); }

/* Configurações · troca de senha */
.form-config { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
.config-acao { margin-top: var(--space-1); }
.config-nota { margin: 0; font-size: var(--text-caption); color: var(--text-muted); }

/* Aviso flutuante */
.aviso-flutuante {
  position: fixed; top: var(--space-5); right: var(--space-5); z-index: 70;
  max-width: var(--container-sm); box-shadow: var(--shadow-lg);
}

/* Diálogos nunca estouram a tela */
[role="dialog"] { max-width: calc(100vw - var(--space-5)); }

/* O SectionHeading do design system limita o subtítulo a 52ch (estilo inline);
   aqui o subtítulo ocupa a largura toda, sem quebra de linha artificial. */
.titulo-secao p { max-width: none !important; }

/* Rodapé */
.rodape { border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-page); }
.rodape-linha {
  max-width: var(--container-xl); margin: 0 auto; padding: var(--space-4) var(--gutter);
  font-size: var(--text-caption); color: var(--text-muted);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}

@media (max-width: 900px) {
  .resumo-grade { grid-template-columns: 1fr; }
  .form-grade { grid-template-columns: 1fr; }
}

/* Celular: o menu vira uma gaveta sobreposta, controlada pelo mesmo botão do topo */
@media (max-width: 720px) {
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 248px; padding-top: var(--space-5);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .lateral:not(.recolhida) { transform: none; }
  .lateral.recolhida { width: 248px; transform: translateX(-100%); }
  .lateral.recolhida .item-menu { justify-content: flex-start; padding: var(--space-2) var(--space-4); }
  .lateral.recolhida .item-menu-rotulo { display: inline; }
  .lateral.recolhida .grupo-menu-rotulo { display: block; }
  .lateral.recolhida .grupo-menu + .grupo-menu { border-top: none; padding-top: 0; margin-top: var(--space-5); }
  .pano-de-fundo { position: fixed; inset: 0; z-index: 55; background: rgba(22, 22, 23, 0.45); }

  .topo-linha { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .topo-org, .topo-divisor { display: none; }
  .conteudo { padding: var(--space-5) var(--space-4) var(--space-7); }
  .toolbar-busca { min-width: 100%; }
  .tabela td { max-width: 22ch; }
  .rodape-linha { flex-direction: column; gap: var(--space-1); }
  .aviso-flutuante { left: var(--space-4); right: var(--space-4); top: var(--space-4); }
}

/* Colunas e campos de check (booleano) dos acompanhamentos só de admin. */
.celula-check { text-align: center; white-space: nowrap; }
.celula-check input[type="checkbox"],
.campo-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--bni-red); cursor: pointer;
}
.campo-check { display: flex; align-items: center; gap: var(--space-2); }
.campo-rotulo-check { font-weight: var(--weight-medium); }

/* Filtros por opção de um campo (ex.: Situação no Parque de máquinas). */
.toolbar-filtros { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-4); }
.toolbar-filtro { display: flex; align-items: center; gap: var(--space-3); }
.toolbar-filtro-rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--granite-grey, #64666A); }
.filtro-check { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.filtro-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--bni-red); cursor: pointer; }

/* ---- BI de membros (painel exclusivo dos administradores) ---- */
.bi-grade-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin: 0 0 var(--space-5);
}
.bi-grade-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); margin: 0 0 var(--space-5); align-items: start;
}
.bi-cartao-titulo {
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--granite-grey); margin: 0 0 var(--space-3);
}

/* Barras horizontais. */
.bi-barras { display: flex; flex-direction: column; gap: var(--space-2); }
.bi-barra-linha { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: var(--space-2); align-items: center; }
.bi-barra-rotulo {
  font-size: var(--text-body-sm); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bi-barra-trilha { display: block; height: 10px; background: var(--grey-100); border-radius: 999px; overflow: hidden; }
.bi-barra-preenchida { display: block; height: 100%; background: var(--bni-red); border-radius: 999px; }
.bi-barra-valor { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--granite-grey); font-variant-numeric: tabular-nums; }
.bi-barras-nota { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--text-muted); }

/* Colunas mensais (renovações). */
.bi-colunas { display: flex; gap: var(--space-2); align-items: stretch; height: 190px; }
.bi-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; }
.bi-coluna-valor { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--granite-grey); font-variant-numeric: tabular-nums; }
.bi-coluna-trilha { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; background: var(--grey-100); border-radius: var(--radius-sm); overflow: hidden; }
.bi-coluna-preenchida { display: block; width: 100%; background: var(--bni-red); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bi-coluna-rotulo { font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap; }

/* Busca e paginação. */
.bi-busca-secao { margin-top: var(--space-5); }
.bi-paginacao { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); justify-content: flex-end; }
.bi-paginacao-info { font-size: var(--text-body-sm); color: var(--granite-grey); }

@media (max-width: 1080px) {
  .bi-grade-stats { grid-template-columns: repeat(2, 1fr); }
  .bi-grade-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bi-grade-stats { grid-template-columns: 1fr; }
  /* 12 colunas não cabem na largura do cartão: rolagem horizontal no gráfico. */
  .bi-colunas { height: 150px; overflow-x: auto; padding-bottom: var(--space-1); }
  .bi-coluna { min-width: 42px; }
  .bi-coluna-rotulo { font-size: var(--text-caption); }
}

/* Popup de detalhe do membro no BI. */
.bi-detalhe-situacao { margin: 0 0 var(--space-4); }
.bi-detalhe-grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}
.bi-detalhe-item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bi-detalhe-rotulo {
  font-size: var(--text-overline); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--granite-grey);
}
.bi-detalhe-valor { font-size: var(--text-body); color: var(--text-strong); overflow-wrap: break-word; }
@media (max-width: 560px) { .bi-detalhe-grade { grid-template-columns: 1fr; } }

/* Mapa do Brasil com pins por cidade. */
.bi-mapa-cartao { margin: 0 0 var(--space-5); }
.bi-mapa-nota { margin: 0 0 var(--space-3); font-size: var(--text-caption); color: var(--text-muted); }
.bi-mapa { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; }
.bi-mapa-uf {
  fill: var(--grey-100); stroke: var(--granite-grey);
  stroke-width: 1; stroke-opacity: 0.7;
  cursor: pointer; transition: fill var(--transition-fast);
}
.bi-mapa-uf:hover { fill: var(--bni-red-tint); }
.bi-mapa-uf.ativo { fill: var(--bni-red-tint); stroke: var(--bni-red); stroke-opacity: 0.9; }
.bi-mapa-pin {
  fill: var(--bni-red); fill-opacity: 0.5;
  stroke: var(--bni-red); stroke-width: 1;
  cursor: pointer; transition: fill-opacity var(--transition-fast);
}
.bi-mapa-pin:hover, .bi-mapa-pin:focus-visible { fill-opacity: 0.9; outline: none; }
.bi-mapa-pin.ativo { fill-opacity: 0.95; stroke: var(--power-black); stroke-width: 1.5; }

/* Chip do filtro vindo do mapa (removível). */
.bi-filtro-ativo { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.bi-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: var(--border-width) solid var(--bni-red);
  background: var(--bni-red-tint); color: var(--bni-red);
  border-radius: 999px; padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  cursor: pointer;
}
.bi-chip:hover { background: var(--bni-red); color: var(--surface-card); }

/* Zoom e navegação do mapa. */
.bi-mapa-envelope { position: relative; }
.bi-mapa-controles {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--space-2);
}
.bi-mapa { cursor: grab; touch-action: none; }
.bi-mapa:active { cursor: grabbing; }
.bi-mapa-uf, .bi-mapa-pin { vector-effect: non-scaling-stroke; }
.bi-mapa-zoom-nota {
  margin: var(--space-2) 0 0; text-align: center;
  font-size: var(--text-caption); color: var(--text-muted);
}

/* Cabeçalho do cartão do mapa (título + mostrar/esconder). */
.bi-mapa-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bi-mapa-cabecalho .bi-cartao-titulo { margin: 0; }
.bi-mapa-cabecalho + .bi-mapa-nota { margin-top: var(--space-3); }

/* Rótulos do mapa (estados e municípios) e tooltip do pin. */
.bi-mapa-uf-rotulo {
  fill: var(--granite-grey); font-weight: var(--weight-bold);
  text-anchor: middle; text-transform: uppercase; letter-spacing: 0.06em;
  pointer-events: none; user-select: none; opacity: 0.85;
}
.bi-mapa-pin-rotulo {
  fill: var(--text-strong); font-weight: var(--weight-medium);
  pointer-events: none; user-select: none;
}
.bi-mapa-tooltip {
  position: absolute; z-index: 3; pointer-events: none; user-select: none;
  transform: translate(-50%, -100%) translateY(-10px);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-top: var(--border-accent) solid var(--bni-red);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm); color: var(--text-body);
  white-space: nowrap;
}
.bi-mapa-tooltip strong { color: var(--text-strong); }
.bi-mapa-tooltip-acao { font-size: var(--text-caption); color: var(--bni-red); }

/* Sem anel de foco do navegador nos elementos do mapa (o clique é a ação). */
.bi-mapa-uf:focus, .bi-mapa-uf:focus-visible { outline: none; }
.bi-mapa-pin:focus { outline: none; }

/* Cartão de filtros da lista de membros (facetados). */
.bi-filtros-cartao { margin: 0 0 var(--space-4); }
.bi-filtros-linha { display: flex; align-items: center; gap: var(--space-3); }
.bi-filtros-busca { flex: 1; min-width: 0; }
.bi-filtros-grade {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin-top: var(--space-4);
}
.bi-filtros-cartao .bi-filtro-ativo { margin: var(--space-4) 0 0; }
@media (max-width: 1080px) { .bi-filtros-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .bi-filtros-grade { grid-template-columns: 1fr; }
  .bi-filtros-linha { flex-wrap: wrap; }
}

/* Grupos de acesso: ações do topo, cabeçalho do cartão e transferência. */
.papeis-acoes { margin: 0 0 var(--space-4); display: flex; justify-content: flex-end; }
.papel-acoes { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.papel-transferencia { margin-top: var(--space-4); }