/* Regras que o gov.br DS 3.7.0 não cobre. Cores pelos tokens do DS. */

/* ---- Logotipo ---- */

.logo-superficie{
  display: inline-flex;
  background: var(--pure-0);
  border-radius: var(--surface-rounder-md);
  padding: var(--spacing-scale-half) var(--spacing-scale-base);
}
.logo-superficie img{
  height: 48px;
  width: auto;
}

/* ---- KPIs, filtros e medidores das páginas públicas ---- */

.kpi-label{
  font-size: var(--font-size-scale-down-01);
  color: var(--color);
}
.kpi-value{
  font-size: var(--font-size-scale-up-03);
  font-weight: var(--font-weight-bold);
  color: var(--color);
}

.filter-panel{ margin: var(--spacing-scale-2x) 0; }
.filter-label{
  display: block;
  font-size: var(--font-size-scale-down-01);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color);
  margin: var(--spacing-scale-base) 0 var(--spacing-scale-half);
}

.gauge-value{
  font-size: var(--font-size-scale-up-03);
  font-weight: var(--font-weight-bold);
}
.gauge-value.gauge-verde, .gauge-situacao-verde{ color: var(--success); }
.gauge-value.gauge-vermelho, .gauge-situacao-vermelho{ color: var(--danger); }
.gauge-meta{
  font-size: var(--font-size-scale-down-01);
  color: var(--color);
}
.gauge-situacao{
  font-size: var(--font-size-scale-down-01);
  font-weight: var(--font-weight-bold);
}

/* ---- Faixas da taxa de evasão (o texto da faixa também aparece na célula) ---- */

.evasao-baixa{ background: transparent; color: var(--color); }
.evasao-media{ background: transparent; color: var(--color); }
.evasao-alta{ background: transparent; color: var(--color); }

/* ---- Contêiner, toque e foco ---- */

:root{
  --alvo-toque-minimo: 24px;
  --menu-largura: 240px;
  --superficie-pagina: var(--gray-2);
}

/* A partir de 1600px o conteúdo para em --grid-tv-maxwidth e fica centralizado. */
@media (min-width: 1600px){
  .container-fluid{
    max-width: var(--grid-tv-maxwidth);
    margin-inline: auto;
  }
}

/* Área mínima de toque de 24 x 24px nos controles interativos. */
button, input, select, textarea, .br-button, [role="button"], .dash-dropdown-trigger{
  min-width: var(--alvo-toque-minimo);
  min-height: var(--alvo-toque-minimo);
}

:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: var(--spacing-scale-half);
}

/* ---- Menu: barra lateral fixa à esquerda a partir de 992px, sobreposto abaixo disso ---- */

@media (min-width: 992px){
  body{
    display: grid;
    grid-template-columns: var(--menu-largura) 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "cabecalho cabecalho"
      "menu      conteudo"
      "rodape    rodape";
    min-height: 100vh;
    padding-left: 0;
  }
  body > header.br-header{ grid-area: cabecalho; }
  body > .br-menu{ grid-area: menu; }
  body > main#main-content{ grid-area: conteudo; }
  body > footer.br-footer{ grid-area: rodape; }

  .br-menu{
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    align-self: stretch;
    width: auto;
    height: auto;
  }
  .br-menu .menu-container, .br-menu.active .menu-container{ display: block; position: static; }
  .br-menu .menu-body{ display: block; }
  .br-menu .menu-header, .br-menu .menu-scrim{ display: none; }
  .header-menu-trigger{ display: none; }
  .br-menu .menu-container{ height: 100%; }
  .br-menu .menu-panel{
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100%;
    background: var(--background);
    border-right: 1px solid var(--border-color);
    padding: var(--spacing-scale-3x) 0;
    gap: var(--spacing-scale-half);
  }
  .br-menu .menu-body .menu-item{
    padding: var(--spacing-scale-baseh) var(--spacing-scale-2x) var(--spacing-scale-baseh) var(--spacing-scale-3x);
    font-size: var(--font-size-scale-base);
    color: var(--color);
    background: transparent;
  }
  .br-menu .menu-body a.menu-item.active{
    background: color-mix(in srgb, var(--color-primary-default) 8%, var(--background));
    color: var(--color-primary-default);
    font-weight: var(--font-weight-bold);
    padding-left: var(--spacing-scale-baseh);
    gap: var(--spacing-scale-base);
  }
  .br-menu .menu-body a.menu-item.active::before{
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--color-primary-default);
  }
}

/* Sem o core.min.js o menu não abre: fica sempre à vista, como lista de links. */
.ds-sem-js .br-menu .menu-container{ display: block; }
.ds-sem-js .br-menu .menu-panel{ height: auto; }
.ds-sem-js .br-menu .menu-header, .ds-sem-js .br-menu .menu-scrim, .ds-sem-js .header-menu-trigger{ display: none; }

/* ---- dcc.Dropdown (Dash 4) pelas variáveis do DS ---- */

.filtro-dropdown.dash-dropdown{
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
}
.filtro-dropdown .dash-dropdown-trigger{
  background: var(--background);
  color: var(--color);
  border: 0;
  border-radius: inherit;
}
.dash-dropdown-content{
  background: var(--background);
  color: var(--color);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
}
/* O Dash foca a busca ao abrir o menu; esse foco automatico nao deve
   desenhar os contornos amarelo e roxo sobre o campo. */
.dash-dropdown-content .dash-dropdown-search-container:focus-within{
  border-color: var(--border-color);
  outline: none;
}
.dash-dropdown-content .dash-dropdown-search:focus-visible{ outline: none; }
.dash-dropdown-content input[type="checkbox"]{ accent-color: var(--nv-azul); }
.dash-dropdown-content .dash-dropdown-action-button{ color: var(--nv-azul); }
.dash-dropdown-option:hover, .dash-dropdown-option:focus-visible{
  background: var(--background-alternative);
}

body{
  background: var(--superficie-pagina);
  color: var(--color);
}

main#main-content{
  background: var(--background);
  padding: var(--spacing-scale-3x) var(--spacing-scale-2x) var(--spacing-scale-4x);
}

@media (min-width: 992px){
  main#main-content{
    padding: var(--spacing-scale-4x) var(--spacing-scale-3x) var(--spacing-scale-5x);
  }
}

/* ---- Sem rolagem lateral nas telas estreitas (achado na verificação visual) ---- */

.br-message .content{
  min-width: 0;
  overflow-wrap: anywhere;
}
pre{
  max-width: 100%;
  overflow-x: auto;
}
.br-button{
  max-width: 100%;
  height: auto;
  min-height: var(--button-size);
  white-space: normal;
}

/* ---- Cabeçalho público (visual do Figma) ---- */

.painel-publico{
  background: var(--color-primary-default);
  color: var(--pure-0);
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
}
.painel-publico .header-top{
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-scale-base);
  padding: var(--spacing-scale-baseh) var(--spacing-scale-2x);
}
.painel-publico .header-titulo{
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-bold);
  color: var(--pure-0);
  line-height: 1.2;
}
.painel-publico .header-actions{
  margin-left: auto;
}
.painel-publico .painel-menu{
  background: transparent;
  color: var(--pure-0);
  border-color: var(--pure-0);
}
@media (min-width: 992px){
  .painel-publico .header-top{
    gap: var(--spacing-scale-2x);
    padding: 0 var(--spacing-scale-3x);
  }
}

.br-footer.painel-publico{
  background: var(--color-primary-default);
  color: var(--pure-0);
  min-height: 48px;
  border-top: none;
}
.br-footer.painel-publico .container-fluid{ padding: var(--spacing-scale-2x) var(--spacing-scale-3x); }
.br-footer.painel-publico a{ color: var(--pure-0); }

/* ---- Página inicial Matrículas (visual do Figma) ---- */

.painel-landing,
.painel-dashboard{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-3x);
}

.painel-landing .cabecalho-pagina,
.painel-dashboard .cabecalho-pagina{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-scale-base) var(--spacing-scale-2x);
}
.painel-landing .cabecalho-pagina .titulo-bloco,
.painel-dashboard .cabecalho-pagina .titulo-bloco{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-half);
}
.painel-landing .cabecalho-pagina h1,
.painel-dashboard .cabecalho-pagina h1{
  font-size: var(--nv-fonte-titulo);
  font-weight: var(--font-weight-bold);
  color: var(--color);
  margin: 0;
  line-height: 1.2;
}
.painel-landing .cabecalho-pagina .subtitulo,
.painel-dashboard .cabecalho-pagina .subtitulo{
  font-size: var(--nv-fonte-md);
  color: var(--gray-60);
}
.painel-landing .cabecalho-pagina .atualizado,
.painel-dashboard .cabecalho-pagina .atualizado{
  margin-left: 0;
  font-size: var(--nv-fonte-sm);
  color: var(--gray-60);
  white-space: nowrap;
}

@media (min-width: 992px){
  .painel-landing .cabecalho-pagina, .painel-dashboard .cabecalho-pagina{ align-items: flex-end; }
  .painel-landing .cabecalho-pagina .atualizado, .painel-dashboard .cabecalho-pagina .atualizado{ margin-left: auto; }
}

.kpis-figma{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-scale-baseh);
}
.kpi-figma{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-scale-base);
  padding: var(--spacing-scale-3x);
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
}
.kpi-figma .rotulo{
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-bold);
  color: var(--color);
  text-align: left;
  overflow-wrap: anywhere;
}
.kpi-figma .valor{
  font-size: var(--nv-fonte-numero);
  line-height: 1.1;
  font-weight: var(--font-weight-semi-bold);
  color: var(--color);
  overflow-wrap: anywhere;
  white-space: nowrap;
}
.kpi-figma .valor--texto{
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  white-space: normal;
}
/* Valor com casas decimais ocupa duas colunas do grid abaixo de 992px. */
.kpi-figma--largo{
  grid-column: span 2;
}
.kpi-figma--destaque{
  background: color-mix(in srgb, var(--color-primary-default) 8%, var(--background));
  border-color: var(--color-primary-pastel-01);
}
.kpi-figma--destaque .valor{
  color: var(--color-primary-default);
}
.aviso-simulacao{
  margin: var(--spacing-scale-2x) 0 0;
  font-size: var(--nv-fonte-sm);
  color: var(--gray-60);
}
.card-chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-scale-baseh) var(--spacing-scale-2x);
  background: var(--background);
  border-radius: 12px;
  padding: var(--spacing-scale-2x);
}
.card-chips .rotulo-chips{
  font-size: var(--nv-fonte-md);
  font-weight: var(--font-weight-bold);
  color: var(--color);
}
.card-chips .chips-grupo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-scale-base) var(--spacing-scale-baseh);
}
.card-chips .form-check{ display: inline-flex; padding: 0; margin: 0; }
.card-chips input{ position: absolute; opacity: 0; width: 0; height: 0; }
.card-chips label.chip{
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-scale-4x);
  padding: var(--spacing-scale-base) var(--spacing-scale-2x);
  border: 1px solid var(--interactive);
  border-radius: 999px;
  color: var(--interactive);
  font-size: var(--nv-fonte-sm);
  line-height: 1;
  cursor: pointer;
}
.card-chips label.chip--ativo{
  background: var(--color-primary-default);
  color: var(--pure-0);
  font-weight: var(--font-weight-bold);
}
.card-chips .chip-input:focus-visible + label.chip,
.card-filtros .seg-input:focus-visible + label.seg,
.lateral-filtros .seg-input:focus-visible + label.seg{
  outline: 3px solid var(--focus-color);
  outline-offset: var(--spacing-scale-half);
}

.matriz-figma{
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.matriz-figma > .rolagem-tabela{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.matriz-figma > .rolagem-tabela:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: -3px;
}
.matriz-figma .tabela-landing{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--background);
  min-width: 790px;
}
.tabela-landing .col-total{ width: 160px; }
.tabela-landing .col-concluidas{ width: 110px; }
.tabela-landing .col-integralizadas{ width: 130px; }
.tabela-landing .col-em-curso{ width: 120px; }
.tabela-landing .col-evasoes{ width: 110px; }
.tabela-landing thead th{
  background: var(--color-primary-default);
  color: var(--pure-0);
  font-size: var(--nv-fonte-sm);
  font-weight: var(--font-weight-regular);
  padding: var(--spacing-scale-base) var(--spacing-scale-baseh);
  border: 1px solid var(--color-primary-default);
  text-align: right;
}
.tabela-landing thead th[rowspan="2"]:first-child,
.tabela-landing thead th[colspan]{
  text-align: center;
}
.tabela-landing thead th.negrito{
  font-weight: var(--font-weight-bold);
}
.tabela-landing tbody td{
  font-size: var(--nv-fonte-md);
  color: var(--color);
  padding: var(--spacing-scale-base) var(--spacing-scale-baseh);
  border-bottom: 1px solid var(--gray-10);
  height: 36px;
}
.tabela-landing tbody tr:nth-child(even) td{
  background: var(--gray-2);
}
.tabela-landing td.campus{ text-align: left; }
.tabela-hierarquica .matriz-rotulo{
  align-items: center;
  display: flex;
  gap: var(--spacing-scale-base);
  padding-left: calc(var(--nivel, 0) * var(--spacing-scale-3x));
}
/* position: relative faz a rolagem conter o .texto-leitor-tela (absoluto) das células. */
.tabela-publica-quadro .rolagem-tabela{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabela-publica-quadro .tabela-publica{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.tabela-publica-quadro .tabela-publica thead th{
  background: var(--color-primary-default);
  color: var(--pure-0);
  text-align: left;
}
.tabela-publica-quadro .tabela-publica th,
.tabela-publica-quadro .tabela-publica td{
  padding: var(--spacing-scale-base) var(--spacing-scale-baseh);
  border-bottom: 1px solid var(--border-color);
}
.tabela-publica-quadro .tabela-publica .num{ text-align: right; }
.tabela-publica-quadro .tabela-publica tfoot td{
  font-weight: var(--font-weight-bold);
  border-top: 2px solid var(--color-primary-default);
}
.tabela-hierarquica tr[class^="matriz-nivel-"]:not(.matriz-nivel-0) td:first-child{
  border-left: 3px solid color-mix(in srgb, var(--color-primary-default) 35%, transparent);
}
.matriz-expansor,
.matriz-expansor-espaco{
  align-items: center;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.matriz-expansor{
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--interactive);
  cursor: pointer;
  padding: 0;
}
.matriz-expansor:hover{ background: color-mix(in srgb, var(--interactive) 12%, transparent); }
.matriz-expansor:focus-visible{ outline: 3px solid var(--focus-color); }
.matriz-expansor[aria-expanded="false"] .fa-chevron-down{ transform: rotate(-90deg); }
.matriz-expansor .fa-chevron-down{ transition: transform .15s ease; }
.matriz-acoes{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 20px 12px; }
.matriz-acoes .matriz-acao{ gap: 6px; }
.tabela-landing td.num{ text-align: right; }
.tabela-landing td.vazio{ color: var(--gray-70); }
.tabela-landing td.evasao{
  text-align: right;
  color: var(--danger);
}
.tabela-landing tfoot td{
  font-weight: var(--font-weight-bold);
  border-top: 2px solid var(--color-primary-default);
  background: color-mix(in srgb, var(--color-primary-default) 10%, var(--background));
  height: 36px;
}

/* Ordenacao compartilhada pelas tabelas Dash e administrativas. */
table thead th.cabecalho-ordenavel{
  cursor: pointer;
  padding-right: 2rem;
  position: relative;
  user-select: none;
}
table thead th.cabecalho-ordenavel::after{
  content: "\2195";
  font-size: .85em;
  opacity: .55;
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
}
table thead th.cabecalho-ordenavel[aria-sort="descending"]::after{
  content: "\2193";
  opacity: 1;
}
table thead th.cabecalho-ordenavel[aria-sort="ascending"]::after{
  content: "\2191";
  opacity: 1;
}
table thead th.cabecalho-ordenavel:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: -3px;
}
.dica-rolagem{
  font-size: var(--nv-fonte-sm);
  color: var(--gray-60);
  margin: var(--spacing-scale-base) var(--spacing-scale-baseh);
}
@media (min-width: 992px){
  .dica-rolagem{ display: none; }
}
.card-filtros{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-scale-2x);
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: var(--spacing-scale-2x);
}
.card-filtros .filter-item{
  flex: 1 1 185px;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-half);
}
@media (min-width: 992px){
  .card-filtros .filter-item{ flex: 0 0 185px; width: 185px; }
}
.card-filtros .filter-label{
  font-size: var(--nv-fonte-sm);
  font-weight: var(--font-weight-regular);
  color: var(--gray-60);
  margin: 0;
}
.card-filtros .filtro-dropdown.dash-dropdown{
  border-radius: var(--surface-rounder-sm);
}
.card-filtros .filtro-dropdown .dash-dropdown-trigger{
  min-height: 40px;
}
.card-filtros .fic-segmentado,
.lateral-filtros .fic-segmentado{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-half);
}
.card-filtros .fic-segmentado .seg-grupo,
.lateral-filtros .fic-segmentado .seg-grupo{ display: flex; }
.card-filtros .fic-segmentado .form-check,
.lateral-filtros .fic-segmentado .form-check{ display: inline-flex; padding: 0; margin: 0; }
.card-filtros .fic-segmentado input,
.lateral-filtros .fic-segmentado input{ position: absolute; opacity: 0; width: 0; height: 0; }
.card-filtros .fic-segmentado label.seg,
.lateral-filtros .fic-segmentado label.seg{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--spacing-scale-2x);
  border: 1px solid var(--interactive);
  color: var(--interactive);
  font-size: var(--nv-fonte-md);
  line-height: 1;
  background: var(--background);
  cursor: pointer;
}
.card-filtros .fic-segmentado label.seg:first-of-type,
.lateral-filtros .fic-segmentado label.seg:first-of-type{
  border-radius: var(--surface-rounder-sm) 0 0 var(--surface-rounder-sm);
}
.card-filtros .fic-segmentado label.seg:last-of-type,
.lateral-filtros .fic-segmentado label.seg:last-of-type{
  border-radius: 0 var(--surface-rounder-sm) var(--surface-rounder-sm) 0;
  margin-left: -1px;
}
.card-filtros .fic-segmentado label.seg--ativo,
.lateral-filtros .fic-segmentado label.seg--ativo{
  background: var(--color-primary-default);
  color: var(--pure-0);
  font-weight: var(--font-weight-bold);
}
.card-filtros .br-button.primary{
  border-radius: 999px;
  font-weight: var(--font-weight-bold);
  min-height: 40px;
}

/* Escolha de pasta do envio (correcoes-envio-pastas). O widget e proprio — o
   .br-upload do pacote esconde o input sem dar controle visivel —, entao a
   superficie do campo e desenhada aqui, so com tokens do DS (AD-003). */
.campo-pasta{
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-base);
  padding: var(--spacing-scale-2x);
}
.campo-pasta .br-button.secondary{
  align-self: flex-start;
  border-color: var(--interactive);
  color: var(--interactive);
}
.campo-pasta .br-button.secondary:hover{
  background: color-mix(in srgb, var(--interactive) 12%, transparent);
}
.campo-pasta .br-button:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.campo-pasta-status{
  color: var(--gray-60);
  font-size: var(--nv-fonte-md);
  line-height: 1.4;
  margin: 0;
}
/* Campo de arquivo das Configuracoes (logotipo, fatores). O .br-upload do
   pacote esconde o input e, com `required`, o navegador barrava o envio sem
   aviso; aqui o input nativo fica visivel, com superficie so de tokens. */
.campo-arquivo{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-half);
}
.campo-arquivo label{ font-weight: var(--font-weight-semi-bold); }
.campo-arquivo input[type="file"]{
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-sm);
  max-width: 100%;
  padding: var(--spacing-scale-base);
}
.campo-arquivo input[type="file"]:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
/* Cards de origem em "Atualizar dados" (cards-atualizar-dados). A classe
   .br-card do pacote e position:absolute (feita para menu flutuante/
   cookiebar, ver .br-cookiebar .br-card no core.min.css) e quebraria o
   layout de pagina; a superficie aqui usa so os tokens de card do DS
   (AD-003), no mesmo padrao ja usado por .card-filtros. */
.card-atualizar{
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
  box-shadow: var(--surface-shadow-sm);
  flex: 1 1 0;
  padding: var(--card-padding, var(--spacing-scale-2x));
}
.card-atualizar > h2:first-child{ margin-top: 0; }

/* ---- Páginas públicas: coluna lateral (logotipo, menu e filtros) e gráficos ---- */

/* Abaixo de 992px a lateral some da grade: o menu segue sobreposto (regras do DS)
   e o bloco de filtros cai no fluxo, como cartão depois do conteúdo. */
.painel-lateral{
  display: contents;
}
.painel-com-lateral{
  display: flex;
  flex-direction: column;
}
.painel-conteudo{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-3x);
  min-width: 0;
  order: 1;
}
.lateral-filtros{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-scale-base) var(--spacing-scale-2x);
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: var(--spacing-scale-2x);
  margin-top: var(--spacing-scale-3x);
  margin-bottom: var(--spacing-scale-3x);
  order: 2;
}
.lateral-titulo{
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-bold);
  color: var(--color);
  margin: 0;
}
/* No celular os filtros dividem a linha em duas colunas, para o bloco não tomar a tela. */
.lateral-filtros > .lateral-titulo,
.lateral-filtros > .fic-segmentado,
.lateral-filtros > .br-button{
  grid-column: 1 / -1;
}
.lateral-filtros .filter-item{ min-width: 0; }
/* O campo de foco invisível do dcc.Dropdown mede 207px e, na coluna da direita, alargava a página. */
.lateral-filtros .dash-dropdown-focus-target{ max-width: 100%; }
.lateral-logo{
  display: flex;
  justify-content: center;
  background: var(--pure-0);
  border-radius: var(--surface-rounder-md);
  padding: var(--spacing-scale-base);
}
.lateral-logo img{
  max-width: 100%;
  max-height: 6rem;
  width: auto;
  height: auto;
  margin-inline: auto;
}

.linha-cartoes-grafico{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-3x);
}
.medidores{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-scale-2x);
}
.grafico-medidor{ width: 100%; }
.grafico-evasoes{ width: 100%; height: 136px; }
.card-grafico{
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
  padding: var(--spacing-scale-2x);
  min-width: 0;
}
.grafico-titulo{
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-bold);
  color: var(--color);
  margin: 0 0 var(--spacing-scale-base);
}

.texto-leitor-tela{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* O Plotly grava a cor do texto no atributo style do SVG. */
.grafico-medidor text,
.grafico-evasoes text{
  fill: var(--color) !important;
}

/* Celular: cada medidor é uma linha (rótulo e situação à esquerda, gráfico à direita), em vez
   de um semicírculo de 170px por medidor. O Plotly grava tamanho e fonte inline. */
.medidor{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-areas:
    "rotulo grafico"
    "situacao grafico";
  align-items: center;
  column-gap: var(--spacing-scale-base);
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--surface-rounder-md);
  padding: var(--spacing-scale-base) var(--spacing-scale-2x);
}
.medidor .rotulo{ grid-area: rotulo; align-self: end; font-weight: var(--font-weight-bold); }
.medidor .medidor-situacao{ grid-area: situacao; align-self: start; }
.medidor .grafico-medidor{ grid-area: grafico; height: 100px !important; }
.grafico-medidor .numbers text,
.grafico-medidor .numbers tspan{ font-size: 20px !important; }

@media (min-width: 992px){
  body.pagina-publica{
    grid-template-areas:
      "cabecalho cabecalho"
      "conteudo conteudo"
      "rodape rodape";
  }
  body.pagina-publica > main#main-content{ padding-left: 0; }

  .painel-com-lateral{
    display: grid;
    grid-template-columns: var(--menu-largura) minmax(0, 1fr);
    gap: var(--spacing-scale-3x);
  }
  .painel-lateral{
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    top: 0;
    background: var(--background);
    border-right: 1px solid var(--border-color);
  }
  .lateral-filtros{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-2x);
    background: transparent;
    border: none;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--spacing-scale-2x);
    width: 100%;
  }
  .linha-cartoes-grafico--lado{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .linha-cartoes-grafico--lado .kpis-figma{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-figma--largo{ grid-column: auto; }
  .medidores{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .medidor{
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .medidor .grafico-medidor{ height: 170px !important; }
  .grafico-medidor .numbers text,
  .grafico-medidor .numbers tspan{ font-size: 28px !important; }
}

/* Cartões dos tipos de divergência PNP × Sistec (microdados-pnp). Reusam a
   superfície de .card-atualizar; cada cartão é um link com cara de botão no
   rodapé, e o selecionado fica preenchido, só com tokens do DS (AD-003). */
.grupos-divergencia{
  display: grid;
  gap: var(--spacing-scale-2x);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grupo-divergencia{
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.grupo-divergencia:hover{
  border-color: var(--interactive);
  box-shadow: var(--surface-shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
.grupo-divergencia.ativo{
  background: color-mix(in srgb, var(--interactive) 10%, var(--background));
  border: 2px solid var(--interactive);
}
.grupo-divergencia:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.grupo-divergencia h3{
  color: var(--interactive);
  font-size: var(--font-size-scale-up-01);
  margin: var(--spacing-scale-base) 0;
}
.grupo-divergencia-quantidade{
  font-size: var(--font-size-scale-up-04);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.grupo-divergencia-botao{
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--interactive);
  border-radius: 100em;
  color: var(--interactive);
  display: inline-flex;
  font-weight: var(--font-weight-semi-bold);
  gap: var(--spacing-scale-base);
  margin-top: auto;
  padding: var(--spacing-scale-base) var(--spacing-scale-2x);
}
.grupo-divergencia:hover .grupo-divergencia-botao{
  background: color-mix(in srgb, var(--interactive) 12%, transparent);
}
.grupo-divergencia-botao.selecionado{
  background: var(--interactive);
  color: var(--background);
}
.grupo-divergencia:hover .grupo-divergencia-botao.selecionado{
  background: var(--interactive);
}

/* Filtros da página de divergências PNP × Sistec (microdados-pnp). O DS só
   desenha o campo de .br-input para <input>; aqui o <select> nativo ganha a
   mesma superfície (altura, borda, raio e tipografia), com seta própria. */
.filtros-divergencia .br-input label{
  display: block;
  font-weight: var(--font-weight-semi-bold);
}
.filtros-divergencia .br-input select{
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--background-light);
  background-image: linear-gradient(45deg, transparent 50%, var(--interactive) 50%),
                    linear-gradient(135deg, var(--interactive) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: var(--border-width) var(--border-style) var(--border-color-alternative);
  border-radius: var(--surface-rounder-sm);
  color: var(--color-light);
  display: block;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-medium);
  height: var(--input-size);
  margin-top: var(--spacing-scale-half);
  padding: 0 calc(var(--spacing-scale-2x) + 20px) 0 var(--spacing-scale-2x);
  text-overflow: ellipsis;
  width: 100%;
}
.filtros-divergencia .br-input select:hover{
  background-color: color-mix(in srgb, var(--interactive) 6%, var(--background-light));
}
.filtros-divergencia .br-input select:focus-visible{
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}
.filtros-divergencia-acoes{
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scale-2x);
  justify-content: flex-end;
}

/* Novo visual público (Figma "Painel novo design"). O DS continua responsável pelos controles. */
:root{
  --nv-marinho: var(--blue-warm-vivid-90);
  --nv-azul: var(--blue-warm-vivid-70);
  --nv-vermelho: var(--red-vivid-60);
  --nv-fundo: var(--gray-2);
  --nv-cabecalho: var(--blue-warm-vivid-5);
  --nv-borda: var(--gray-20);
  --nv-lateral: 300px;
  /* Escala de fonte do visual público: use só estes passos. */
  --nv-fonte-xs: 11px;    /* notas, fonte da tabela, eixo dos gráficos */
  --nv-fonte-sm: 12px;    /* textos auxiliares, cabeçalho de tabela, rodapé */
  --nv-fonte-md: 13px;    /* rótulos e células de tabela */
  --nv-fonte-base: 14px;  /* menu, botões e rótulos em destaque */
  --nv-fonte-lg: 15px;    /* valores das barras e do detalhe, título dos filtros */
  --nv-fonte-xl: 17px;    /* títulos de card e do cabeçalho do celular */
  --nv-fonte-2xl: 24px;   /* nome da instituição no menu */
  --nv-fonte-numero: clamp(23px, 2.2vw, 30px);  /* números grandes dos cards */
  --nv-fonte-destaque: clamp(32px, 3.4vw, 44px);  /* número do cartão em destaque */
  --nv-fonte-titulo: clamp(24px, 2.6vw, 34px);  /* título da página */
  /* Escala de fonte da área administrativa: use só estes passos (15px e 22px foram absorvidos por 16px e 20px). */
  --adm-fonte-md: 16px;   /* corpo de formulário, h3 de card, valores de versão */
  --adm-fonte-lg: 18px;   /* título de bloco da prévia */
  --adm-fonte-xl: 20px;   /* título de card, data em KPI */
  --adm-fonte-2xl: 24px;  /* título de seção e marca do acesso */
  --adm-fonte-3xl: 32px;  /* valor de KPI e título do login */
  --adm-fonte-titulo: 36px;  /* h1 da página */
  --adm-fonte-titulo-mobile: 28px;  /* h1 do login no celular */
}
body.pagina-publica{ background: var(--nv-fundo); }
body.pagina-publica > main#main-content{ background: var(--nv-fundo); padding: 0; max-width: none; margin: 0; }
body.pagina-publica .container-fluid{ max-width: none; }
body.pagina-publica .aviso-simulacao{
  background: var(--pure-0); border: 1px solid var(--nv-borda); border-radius: 6px;
  color: var(--gray-80); font-size: var(--nv-fonte-sm); padding: 14px 16px; margin: 0 24px 24px;
}
.aviso-simulacao strong{ display: block; color: var(--nv-marinho); font-size: var(--nv-fonte-md); }
.aviso-simulacao p{ margin: 4px 0 0; font-size: inherit; }

/* Título da página */
.painel-conteudo{ padding: 24px; gap: 24px; }
.cabecalho-pagina{ display: flex; flex-wrap: wrap; align-items: end; gap: 8px 20px; margin-bottom: 24px; }
/* Blocos vazios (avisos que só aparecem às vezes) não podem somar espaço ao gap da coluna. */
.painel-conteudo > :empty{ display: none; }
.cabecalho-pagina .titulo-bloco{ display: flex; flex-direction: column; gap: 2px; }
.painel-dashboard .cabecalho-pagina h1, .cabecalho-pagina h1{
  color: var(--nv-marinho); font-size: var(--nv-fonte-titulo); font-weight: var(--font-weight-bold); margin: 0; line-height: 1.15;
}
.cabecalho-pagina .subtitulo{ display: none; }
.cabecalho-pagina .atualizado{ color: var(--gray-70); font-size: var(--nv-fonte-sm); margin-left: auto; }
.cabecalho-pagina--com-nota .atualizado{ font-size: var(--nv-fonte-md); }
.cabecalho-pagina .nota-dados{ margin: 4px 0 0; color: var(--gray-70); font-size: var(--nv-fonte-md); }
.cabecalho-pagina .nota-dados a{ color: var(--nv-azul); text-decoration: underline; text-underline-offset: 2px; }
.matriz-acoes-dica{ margin-right: auto; align-self: center; color: var(--gray-70); font-size: var(--nv-fonte-md); }

/* Cartões de indicador */
.kpis-figma{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi-figma{ min-height: 104px; border-radius: 6px; padding: 16px; gap: 8px; position: relative; background: var(--pure-0); border: 1px solid var(--nv-borda); }
.kpi-figma .kpi-icone{ position: absolute; top: 17px; right: 16px; color: var(--nv-azul); font-size: var(--nv-fonte-base); }
.kpi-figma .rotulo{ color: var(--gray-80); font-size: var(--nv-fonte-md); font-weight: var(--font-weight-regular); padding-right: 22px; }
.kpis-figma--rotulo-forte .kpi-figma .rotulo{ color: var(--nv-marinho); font-size: var(--nv-fonte-base); font-weight: var(--font-weight-bold); }
.kpi-figma .valor{ color: var(--nv-marinho); font-size: var(--nv-fonte-numero); font-weight: var(--font-weight-bold); }
.kpi-figma--destaque{ border: 2px solid var(--nv-azul); }
.kpi-figma--destaque .valor{ color: var(--nv-azul); font-size: var(--nv-fonte-destaque); }
.kpi-figma--destaque{ grid-column: span 2; }
.kpi-figma--abaixo{ border: 1px solid var(--nv-vermelho); }
.kpi-figma--abaixo .valor, .kpi-figma--abaixo .kpi-icone{ color: var(--nv-vermelho); }
.kpi-figma .meta-texto{ color: var(--gray-70); font-size: var(--nv-fonte-sm); }

/* Cards de gráfico, detalhe, filtros e tabela */
.card-grafico, .card-detalhe, .lateral-filtros, .card-detalhamento{
  background: var(--pure-0); border: 1px solid var(--nv-borda); border-radius: 6px; padding: 20px;
}
.card-grafico h2, .card-detalhe h2, .card-detalhamento h2, .card-grafico .grafico-titulo{
  color: var(--nv-marinho); font-size: var(--nv-fonte-xl); font-weight: var(--font-weight-bold); margin: 0 0 4px;
}
.card-grafico .subtitulo, .card-detalhe .subtitulo{ color: var(--gray-70); font-size: var(--nv-fonte-sm); margin: 0 0 18px; }
.graficos-duplos{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.graficos-duplos > .card-grafico, .graficos-duplos > .card-detalhe{ min-width: 0; }
.evasao-graficos{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.evasao-graficos > *{ min-width: 0; }
.evasao-campi-coluna{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.evasao-coluna-mensal{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.evasao-coluna-mensal .kpis-figma{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1600px){
  .evasao-graficos{ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
  /* Card de campi estica até o fim da coluna mensal (gráfico + cards). */
  .evasao-graficos > :first-child, .evasao-graficos > :first-child > div, #evasao-campus{ height: 100%; }
  #evasao-campus > .evasao-campi-coluna{ height: 100%; }
  .evasao-campi-coluna > .card-grafico{ flex: 1; box-sizing: border-box; }
  /* Gráfico mensal cresce para as duas colunas terminarem na mesma linha. */
  .evasao-coluna-mensal{ height: 100%; }
  .evasao-coluna-mensal > :first-child, .evasao-coluna-mensal > :first-child > div, #evasao-grafico{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
  /* O 2º filho do dcc.Loading (spinner) ocupa 32px no fluxo; tira do fluxo. */
  .evasao-coluna-mensal > :first-child > :nth-child(2){ position: absolute; inset: 0; }
  #evasao-grafico > .card-grafico{ flex: 1; display: flex; flex-direction: column; }
  #evasao-grafico .grafico-evasoes{ flex: 1; height: auto !important; min-height: 136px; }
}

.barra-linha{ display: grid; grid-template-columns: minmax(82px, 150px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; margin: 9px 0; font-size: var(--nv-fonte-md); color: var(--gray-80); }
.barra-rotulo{ overflow-wrap: anywhere; }
.card-grafico--barras{ overflow-x: auto; }
.card-grafico--barras .barra-linha{ grid-template-columns: 190px minmax(100px, 1fr) 64px; min-width: 390px; }
.card-grafico--barras .barra-rotulo{ white-space: nowrap; }
.card-grafico--barras .barra-valor{ font-size: var(--nv-fonte-lg); }
.card-grafico--barras .barra-linha{ margin: 4px 0; }
.barra-trilho{ height: 9px; background: var(--gray-2); position: relative; border-radius: 2px; }
.barra-preenchimento{ display: block; height: 100%; border-radius: 2px; background: var(--nv-azul); }
.barra--cinza .barra-preenchimento{ background: var(--gray-20); }
.barra--escura .barra-preenchimento{ background: var(--gray-80); }
.barra--vermelha .barra-preenchimento{ background: var(--nv-vermelho); }
.barra-trilho.barra--escura .barra-preenchimento{ background: var(--gray-60); }
.barra-linha--rotulo-meta{ margin-top: 22px; }
.barra-meta-rotulo{ position: absolute; top: -21px; margin-left: 5px; font-size: var(--nv-fonte-xs); line-height: 1; color: var(--gray-70); white-space: nowrap; }
.barra-meta{ position: absolute; height: 17px; top: -4px; border-left: 2px solid var(--nv-marinho); }
.barra-valor{ color: var(--nv-azul); font-weight: var(--font-weight-bold); text-align: right; font-size: var(--nv-fonte-md); }
.barra--cinza .barra-valor, .barra--escura .barra-valor{ color: var(--gray-80); }
.barra-nota{ color: var(--gray-70); font-size: var(--nv-fonte-md); margin: 18px 0 0; }

.detalhe-item{ --detalhe-cor: var(--nv-azul); display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
.detalhe-linha{ display: contents; font-size: var(--nv-fonte-md); color: var(--gray-80); }
.detalhe-linha > span{ grid-column: 1 / -1; }
.detalhe-linha strong{ grid-column: 2; grid-row: 2; color: var(--detalhe-cor); font-size: var(--nv-fonte-lg); text-align: right; }
.detalhe-item > .barra-trilho{ grid-column: 1; grid-row: 2; }
.detalhe-item:has(.barra--vermelha){ --detalhe-cor: var(--nv-vermelho); }
.detalhe-item:has(.barra--escura){ --detalhe-cor: var(--gray-60); }
.detalhe-item:has(.barra--cinza){ --detalhe-cor: var(--gray-80); }
.detalhe-destaque{ color: var(--nv-azul); font-size: var(--nv-fonte-numero); font-weight: var(--font-weight-bold); margin: -6px 0 18px; }
.detalhe-lista{ margin: 0; }
.detalhe-lista-linha{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--nv-borda); padding: 12px 0; }
.detalhe-lista-linha dt{ color: var(--gray-80); font-size: var(--nv-fonte-md); font-weight: var(--font-weight-regular); }
.detalhe-lista-linha dd{ color: var(--nv-marinho); font-size: var(--nv-fonte-xl); font-weight: var(--font-weight-bold); margin: 0; }

/* Card de filtros */
.lateral-filtros{ display: flex; flex-direction: column; gap: 16px; margin: 0; order: 0; }
.filtros-topo{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lateral-filtros .lateral-titulo{ display: flex; align-items: center; gap: 8px; color: var(--nv-marinho); font-size: var(--nv-fonte-lg); font-weight: var(--font-weight-bold); margin: 0; }
.lateral-filtros .lateral-titulo i{ color: var(--nv-azul); font-size: var(--nv-fonte-md); }
.lateral-filtros .limpar-filtros{ color: var(--nv-azul); font-weight: var(--font-weight-semi-bold); gap: 8px; }
.lateral-filtros .limpar-filtros i{ font-size: var(--nv-fonte-base); }
/* Botões pequenos do DS (16,8px) ficam no passo do menu dentro dos cards. */
.lateral-filtros .limpar-filtros, .matriz-acoes .matriz-acao{ font-size: var(--nv-fonte-base); }
.filtros-campos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; }
.lateral-filtros .filter-item{ min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lateral-filtros .filter-label{ color: var(--nv-marinho); font-size: var(--nv-fonte-md); font-weight: var(--font-weight-bold); margin: 0; }
.filtros-rodape{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; border-top: 1px solid var(--gray-10); padding-top: 14px; }
.filtros-exibindo{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--nv-fonte-xs); color: var(--gray-70); }
.filtros-exibindo span:not(:first-child){ background: var(--nv-cabecalho); color: var(--nv-azul); padding: 4px 8px; border-radius: 3px; }
.fic-radios{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.fic-radios-grupo{ display: flex; gap: 14px; }
.fic-radios-grupo .form-check{ display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.fic-radios-grupo .fic-radio-input{ accent-color: var(--nv-azul); width: 18px; height: 18px; margin: 0; }
.fic-radios-grupo .fic-radio{ color: var(--gray-70); font-size: var(--nv-fonte-sm); cursor: pointer; }
.fic-radios-grupo .fic-radio--ativo{ color: var(--nv-azul); }

/* Card da tabela: título, "Ver tabela por" e tabela sem moldura própria */
.card-detalhamento{ padding: 0; overflow: hidden; }
.card-detalhamento > .titulo-tabela{ padding: 20px 20px 10px; margin: 0; }
.card-detalhamento > .card-chips{ background: transparent; border: 0; box-shadow: none; padding: 0 20px 14px; gap: 10px; flex-wrap: wrap; }
.card-chips .rotulo-chips{ color: var(--nv-marinho); font-weight: var(--font-weight-bold); font-size: var(--nv-fonte-md); }
.card-chips label.chip{ border: 0; background: transparent; color: var(--gray-70); font-size: var(--nv-fonte-sm); padding: 4px 4px 4px 34px; position: relative; }
.card-chips label.chip::before{ content: ""; width: 26px; height: 16px; border-radius: 12px; background: var(--gray-20); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.card-chips label.chip::after{ content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pure-0); position: absolute; left: 2px; top: 50%; transform: translateY(-50%); }
.card-chips label.chip--ativo{ background: transparent; color: var(--nv-azul); font-weight: var(--font-weight-bold); }
.card-chips label.chip--ativo::before{ background: var(--nv-azul); }
.card-chips label.chip--ativo::after{ left: 12px; }
.card-detalhamento .matriz-figma, .card-detalhamento .tabela-publica-quadro{ border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.card-detalhamento .matriz-figma > .titulo-tabela{ display: none; }
/* Eficiência: a legenda da tabela fica só para leitor de tela. */
#eficiencia-matriz caption{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-detalhamento .br-message{ margin: 0 20px 20px; }
.matriz-figma .tabela-landing thead th, .tabela-publica-quadro .tabela-publica thead th{
  background: var(--nv-cabecalho); color: var(--nv-marinho); border-color: var(--nv-borda); font-size: var(--nv-fonte-sm); font-weight: var(--font-weight-bold);
}
.matriz-figma .tabela-landing td, .tabela-publica-quadro .tabela-publica td{ font-size: var(--nv-fonte-md); }
.matriz-figma .tabela-landing thead th:first-child, .tabela-publica-quadro .tabela-publica thead th:first-child{ text-align: left; }
.matriz-figma tfoot td, .tabela-publica-quadro tfoot td{
  background: var(--nv-cabecalho); color: var(--nv-marinho); border-top: 2px solid var(--nv-azul); font-weight: var(--font-weight-bold);
}
.matriz-figma tfoot td:first-child, .tabela-publica-quadro tfoot td:first-child{ text-transform: uppercase; }
.tabela-landing td.evasao, .matriz-figma tfoot td.evasao{ color: inherit; }
.matriz-figma .fonte-tabela, .tabela-publica-quadro .fonte-tabela{ margin: 12px 20px 16px; color: var(--gray-70); font-size: var(--nv-fonte-xs); }

/* Rodapé */
.br-footer.painel-publico{ background: var(--nv-fundo); color: var(--gray-80); border: 0; padding: 0 24px 24px; min-height: 0; }
.br-footer.painel-publico .container-fluid{ padding: 0; }
.br-footer.painel-publico .info{ padding: 0; }
.br-footer.painel-publico a{ color: var(--nv-azul); }
.rodape-publico{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: var(--nv-fonte-sm); }
.rodape-publico .rodape-admin{ font-weight: var(--font-weight-semi-bold); margin-left: auto; }
.rodape-publico a{ display: inline-flex; align-items: center; min-height: 24px; }

/* Menu lateral */
.br-menu .menu-panel{ background: var(--nv-marinho); color: var(--pure-0); }
.br-menu .menu-body .menu-item{ color: var(--blue-warm-vivid-10); font-size: var(--nv-fonte-base); line-height: 1.35; }
.br-menu .menu-body .menu-item i{ width: 20px; margin-right: 12px; text-align: center; }
.br-menu .menu-body a.menu-item.active{ background: var(--nv-azul); color: var(--pure-0); font-weight: var(--font-weight-bold); }
.br-menu .menu-body a.menu-item.active::before{ display: none; }
.menu-brand{ display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 36px 36px; text-align: center; color: var(--pure-0); }
.menu-brand img{ max-width: 96px; max-height: 112px; object-fit: contain; }
.menu-brand strong{ font-size: var(--nv-fonte-2xl); font-weight: var(--font-weight-regular, 400); line-height: 1.2; hyphens: none; overflow-wrap: normal; word-break: normal; }
.menu-grupo{ display: block; color: var(--blue-warm-vivid-10); font-size: var(--nv-fonte-xs); letter-spacing: .04em; padding: 28px 36px 14px; border-top: 1px solid var(--blue-warm-vivid-80); }

.linha-cartoes-grafico--lado{ display: flex; flex-direction: column; }
.linha-cartoes-grafico--lado .kpis-figma{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cabeçalho do celular: mesmo marinho da lateral, com logotipo pequeno. */
header.br-header.painel-publico{ background: var(--nv-marinho); box-shadow: var(--surface-shadow-md); }
.painel-publico .header-top{ min-height: 64px; gap: 12px; }
.painel-publico .header-logo-mobile{ display: inline-flex; flex: 0 0 auto; }
.painel-publico .header-logo-mobile img{ height: 40px; width: auto; max-width: 64px; object-fit: contain; }
.painel-publico .header-titulo{ font-size: var(--nv-fonte-xl); font-weight: var(--font-weight-extra-bold, 800); letter-spacing: -.01em; line-height: 1.2; }
.painel-publico .painel-menu{ border: 0; }
.painel-publico .painel-menu:hover{ background: var(--blue-warm-vivid-80); }

@media (min-width: 992px){
  body.pagina-publica{ display: block; }
  body.pagina-publica > header.br-header{ display: none; }
  body.pagina-publica > main#main-content, .br-footer.painel-publico{ margin-left: var(--nv-lateral); width: auto; }
  .painel-com-lateral{ display: block; min-height: 0; }
  .painel-lateral{ display: block; position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; width: var(--nv-lateral); overflow-y: auto; background: var(--nv-marinho); border: 0; z-index: 900; }
  .painel-lateral .br-menu, .painel-lateral .br-menu .menu-container, .painel-lateral .br-menu .menu-panel{ position: static; min-height: 100%; height: auto; border: 0; }
  .painel-lateral .br-menu .menu-panel{ padding: 0; }
  .painel-lateral .br-menu .menu-body .menu-item{ margin: 6px 16px; border-radius: 4px; padding: 14px 18px; }
  .painel-conteudo{ order: 0; min-width: 0; padding: 24px 32px; max-width: 1600px; }
  body.pagina-publica .aviso-simulacao{ margin: 0 32px 24px; max-width: calc(1600px - 64px); }
  .br-footer.painel-publico{ padding: 0 32px 24px; max-width: 1600px; }
  .lateral-filtros{ display: grid; grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); width: auto; margin: 0; }
  .linha-cartoes-grafico--lado{ display: flex; flex-direction: column; }
  .linha-cartoes-grafico--lado .kpis-figma{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  .painel-conteudo{ padding: 16px; }
  .painel-lateral{ display: contents; }
  .painel-com-lateral{ display: flex; flex-direction: column; }
  .graficos-duplos{ grid-template-columns: 1fr; }
  .barra-linha{ grid-template-columns: minmax(65px, 110px) minmax(0, 1fr) 52px; gap: 6px; }
  /* Barras por campus cabem na largura do celular: rótulo pode quebrar,
     trilho encolhe e o valor fica sempre visível. */
  .card-grafico--barras{ overflow-x: visible; }
  .card-grafico--barras .barra-linha{ grid-template-columns: minmax(0, 46%) minmax(28px, 1fr) 56px; min-width: 0; gap: 8px; }
  .card-grafico--barras .barra-rotulo{ white-space: normal; font-size: var(--nv-fonte-sm); line-height: 1.2; }
  .card-grafico--barras .barra-valor{ font-size: var(--nv-fonte-md); }
  .lateral-filtros{ grid-template-columns: 1fr; }
  .filtros-campos{ grid-template-columns: 1fr; }
  .linha-cartoes-grafico--lado .kpis-figma{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pagina-publica .aviso-simulacao{ margin: 0 16px 16px; }
  .br-footer.painel-publico{ padding: 0 16px 18px; }
  .cabecalho-pagina .atualizado{ margin-left: 0; }
}

/* Shell das páginas administrativas. */
body.pagina-admin{ --admin-sidebar: 260px; display: block; background: var(--gray-2); color: var(--gray-80); }
.pagina-admin .admin-header{ position: relative; display: flex; align-items: center; gap: 16px; padding: 32px 32px 0; margin-left: var(--admin-sidebar); min-height: 52px; }
.pagina-admin .admin-user{ position: relative; color: var(--gray-70); font-size: 12px; margin-left: auto; white-space: nowrap; }
.pagina-admin .admin-user-botao{ display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--gray-70); font: inherit; cursor: pointer; }
.pagina-admin .admin-user-botao:hover,
.pagina-admin .admin-user-botao[aria-expanded="true"]{ background: var(--gray-10); }
.pagina-admin .admin-user-nome{ overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.pagina-admin .admin-user-lista{ position: absolute; top: 100%; right: 0; z-index: 950; min-width: 180px; max-width: calc(100vw - 32px); margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--pure-0); border: 1px solid var(--gray-20); border-radius: 4px; box-shadow: var(--surface-shadow-md); }
.pagina-admin .admin-user-lista[hidden]{ display: none; }
.pagina-admin .admin-user-lista a{ display: block; padding: 10px 16px; color: var(--nv-marinho); font-size: 14px; text-decoration: none; }
.pagina-admin .admin-user-lista a:hover,
.pagina-admin .admin-user-lista a:focus{ background: var(--gray-5); }
.pagina-admin .admin-menu-trigger{ display: none; }
.pagina-admin > main#main-content{ background: transparent; margin-left: var(--admin-sidebar); width: auto; max-width: none; min-width: 0; padding: 8px 32px 0; }
.pagina-admin > main#main-content h1{ color: var(--nv-marinho); font-size: var(--adm-fonte-titulo); font-weight: 700; line-height: 1.2; margin: 0 0 48px; }
.pagina-admin > .admin-footer{ background: transparent; border: 0; color: var(--gray-70); font-size: 12px; min-height: 0; margin-left: var(--admin-sidebar); width: auto; padding: 24px 32px 32px; }
.pagina-admin > .admin-footer .container-fluid{ padding: 0; max-width: none; }
.pagina-admin .admin-menu{ position: fixed; top: 0; bottom: 0; left: 0; width: var(--admin-sidebar); height: 100vh; z-index: 900; background: var(--gray-5); }
.pagina-admin .admin-menu .menu-container,
.pagina-admin .admin-menu.active .menu-container{ display: block; height: 100%; }
.pagina-admin .admin-menu .menu-panel{ display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; min-height: 0; overflow-y: auto; background: var(--gray-5); border: 0; padding: 28px 22px 24px; }
.pagina-admin .admin-menu .menu-brand{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 18px; min-height: 176px; text-align: center; background: var(--nv-marinho); border-radius: 8px; color: var(--pure-0); }
.pagina-admin .admin-menu .menu-brand img{ display: block; max-width: 100%; height: 104px; object-fit: contain; }
.pagina-admin .admin-menu .menu-header,
.pagina-admin .admin-menu .menu-scrim{ display: none; }
.pagina-admin .admin-menu .menu-body{ display: block; margin-top: 28px; border-top: 1px solid var(--gray-20); padding-top: 24px; }
.pagina-admin .admin-menu .menu-grupo{ color: var(--gray-70); padding: 0 2px 17px; border: 0; font-size: 12px; font-weight: 600; }
.pagina-admin .admin-menu .menu-body .menu-item{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 0 7px; padding: 10px 14px 10px 16px; border-radius: 4px; background: var(--gray-5); color: var(--nv-marinho); font-size: var(--adm-fonte-md); line-height: 1.25; }
.pagina-admin .admin-menu .menu-body .menu-item.active{ background: var(--nv-marinho); color: var(--pure-0); padding: 10px 14px 10px 16px; }
.pagina-admin .admin-menu .menu-body .menu-item.active::before{ display: none; }
.pagina-admin .admin-chevron{ flex: 0 0 auto; font-size: 22px; font-weight: 600; line-height: 1; }
.pagina-admin .admin-menu .menu-item:not(.active) .admin-chevron{ visibility: hidden; }
@media (max-width: 991px){
  .pagina-admin .admin-menu-trigger{ display: inline-flex; flex: 0 0 auto; }
  .pagina-admin .admin-header{ margin-left: 0; padding: 16px; flex-wrap: wrap; }
  .pagina-admin > main#main-content{ margin-left: 0; padding: 12px 16px 0; }
  .pagina-admin > main#main-content h1{ font-size: var(--adm-fonte-titulo-mobile); margin-bottom: 24px; }
  .pagina-admin > .admin-footer{ margin-left: 0; padding: 24px 16px; }
  .pagina-admin .admin-menu{ transform: translateX(-100%); transition: transform .2s ease; width: min(260px, 85vw); }
  .pagina-admin .admin-menu.active{ transform: translateX(0); }
  .pagina-admin .admin-menu .menu-header{ display: block; }
  .pagina-admin .admin-menu .menu-panel{ padding-top: 12px; }
  .pagina-admin .admin-menu .menu-body{ margin-top: 20px; }
}

/* Componentes reutilizáveis das telas administrativas. */
.pagina-admin{
  --admin-azul: var(--nv-marinho);
  --admin-acao: var(--nv-azul);
  --admin-borda: var(--gray-20);
  --admin-painel: var(--blue-warm-vivid-5);
}
.pagina-admin .admin-card{ min-width: 0; padding: 24px; background: var(--pure-0); border: 1px solid var(--admin-borda); border-radius: 8px; }
.pagina-admin .admin-card-title{ margin: 0 0 16px; color: var(--admin-azul); font-size: var(--adm-fonte-xl); line-height: 1.3; font-weight: 700; }
.pagina-admin .admin-chip{ display: inline-flex; align-items: center; min-height: 27px; padding: 6px 8px; border-radius: 16px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.pagina-admin .admin-chip--oficial{ background: var(--green-cool-vivid-5); color: var(--green-cool-vivid-70); }
.pagina-admin .admin-chip--experimental{ background: var(--yellow-vivid-5); color: var(--yellow-vivid-70); }
.pagina-admin .admin-button{ display: inline-flex; align-items: center; justify-content: center; min-height: 40px; max-width: 100%; padding: 9px 16px; border: 1px solid var(--admin-acao); border-radius: 5px; font-size: 14px; line-height: 1.3; font-weight: 600; text-decoration: none; cursor: pointer; }
.pagina-admin .admin-button--primary{ background: var(--admin-acao); color: var(--pure-0); }
.pagina-admin .admin-button--secondary{ background: var(--pure-0); color: var(--admin-acao); }
.pagina-admin .admin-button:hover{ filter: brightness(.94); }
.pagina-admin .admin-panel{ min-width: 0; padding: 16px; background: var(--admin-painel); border: 1px solid var(--admin-borda); border-radius: 8px; }
.pagina-admin .admin-alert{ padding: 16px; background: var(--yellow-vivid-5); border: 1px solid var(--admin-borda); border-radius: 8px; color: var(--yellow-vivid-70); font-size: 13px; }
.pagina-admin .admin-kpi{ min-width: 0; padding: 16px; background: var(--pure-0); border: 1px solid var(--admin-borda); border-radius: 8px; }
.pagina-admin .admin-kpi-label{ color: var(--gray-70); font-size: 12px; }
.pagina-admin .admin-kpi-value{ display: block; margin-top: 6px; color: var(--admin-azul); font-size: var(--adm-fonte-3xl); line-height: 1.1; font-weight: 700; }
.pagina-admin .admin-table-wrap{ max-width: 100%; overflow-x: auto; border: 1px solid var(--admin-borda); border-radius: 8px; }
.pagina-admin .admin-table{ width: 100%; border-collapse: collapse; color: var(--gray-80); font-size: 14px; }
.pagina-admin .admin-table th{ background: var(--admin-painel); color: var(--admin-azul); font-weight: 600; text-align: left; }
.pagina-admin .admin-table th,
.pagina-admin .admin-table td{ padding: 12px 16px; border-bottom: 1px solid var(--admin-borda); }
.pagina-admin .admin-input{ display: block; width: 100%; min-height: 40px; padding: 8px 12px; background: var(--pure-0); border: 1px solid var(--admin-borda); border-radius: 5px; color: var(--gray-80); font-size: 14px; }
.pagina-admin .admin-input:focus-visible,
.pagina-admin .admin-button:focus-visible{ outline: 3px solid var(--focus-color); outline-offset: 2px; }
.pagina-admin .admin-intro{ margin: 0 0 18px; font-size: 14px; }
/* O logotipo da instituição é claro (feito para o fundo azul-marinho do menu): a prévia usa o mesmo fundo. */
.pagina-admin .admin-card .logo-superficie{ background: var(--nv-marinho); }
.pagina-admin .admin-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.pagina-admin .admin-form-grid > div{ min-width: 0; margin-bottom: 12px; }
.pagina-admin .admin-form-grid .br-input, .pagina-admin .admin-form-grid .br-input input{ width: 100%; box-sizing: border-box; }
@media (max-width: 991px){
  .pagina-admin .admin-form-grid{ grid-template-columns: 1fr; }
}
.pagina-admin .admin-secoes{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px; }
.pagina-admin .admin-secoes a{ color: var(--nv-marinho); font-size: 14px; font-weight: 600; }
.pagina-admin .admin-config.com-abas .admin-secoes{ gap: 0; border-bottom: 1px solid var(--admin-borda, var(--gray-20)); }
.pagina-admin .admin-config.com-abas .admin-secoes a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; text-decoration: none; }
.pagina-admin .admin-config.com-abas .admin-secoes a[aria-selected="true"]{ color: var(--nv-azul); border-bottom-color: var(--nv-azul); }
.pagina-admin .admin-config.com-abas .admin-secao[hidden]{ display: none; }
.pagina-admin .admin-cursos-rodape{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 16px; }
.pagina-admin .admin-secao{ margin: 0 0 32px; scroll-margin-top: 16px; }
.pagina-admin .admin-secao-titulo{ color: var(--nv-marinho); font-size: var(--adm-fonte-2xl); font-weight: 700; line-height: 1.2; margin: 0 0 16px; }
.pagina-admin .sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pagina-admin .admin-cursos-filtros{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; margin: 16px 0 8px; }
.pagina-admin .admin-cursos-filtros > :first-child{ grid-column: 1 / -1; }
.pagina-admin .admin-cursos-tabela .responsive{ overflow-x: auto; }
.pagina-admin .admin-cursos-tabela tr[hidden]{ display: none; }
.pagina-admin .admin-cursos-tabela .br-checkbox{ margin: 0; }
@media (max-width: 991px){
  .pagina-admin .admin-cursos-filtros{ grid-template-columns: 1fr; }
}
.pagina-admin .admin-dados-leitura{ display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.pagina-admin .admin-dados-leitura dt{ font-weight: 600; }
.pagina-admin .admin-dados-leitura dd{ margin: 0; }
.pagina-admin .origem-painel[hidden]{ display: none; }
.pagina-admin .origem-painel{ margin-bottom: 18px; }
.pagina-admin #card-dados{ margin-bottom: 18px; }
.pagina-admin .origem-seletor .br-button[aria-pressed="true"]{ box-shadow: inset 0 -3px 0 var(--nv-marinho); }
.pagina-admin .admin-update-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 18px; }
.pagina-admin .admin-update-grid .card-atualizar, .pagina-admin .admin-update-grid .card-atualizar.admin-card + .admin-card{ box-shadow: none; margin: 0; }
.pagina-admin .admin-update-grid .admin-chip{ margin-bottom: 14px; }
.pagina-admin .admin-update-grid p{ font-size: 14px; }
.pagina-admin .admin-folder-list{ display: grid; gap: 12px; }
.pagina-admin .admin-folder-list .campo-pasta{ background: var(--admin-painel); padding: 16px; gap: 10px; }
.pagina-admin .admin-folder-list strong{ color: var(--admin-azul); font-size: 14px; }
.pagina-admin .admin-folder-list .br-button{ background: var(--pure-0); border: 1px solid var(--admin-acao); border-radius: 5px; color: var(--admin-acao); font-size: 14px; min-height: 40px; }
.pagina-admin .admin-update-steps{ list-style: decimal-leading-zero; padding-left: 24px; font-size: 14px; line-height: 1.85; }
.pagina-admin .admin-update-grid .aviso-experimental{ margin: 0; }
.pagina-admin .admin-preview{ display: grid; gap: 20px; margin: 18px 0; }
.pagina-admin .admin-preview[hidden]{ display: none; }
.pagina-admin .admin-preview .admin-card > p{ margin-top: 0; }
.pagina-admin .admin-preview .previa-paginas{ display: grid; gap: 16px; }
.pagina-admin .previa-pagina-bloco{ border: 1px solid var(--gray-20); border-radius: 8px; padding: 16px; background: var(--pure-0); }
.pagina-admin .previa-pagina-cabecalho{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.pagina-admin .previa-pagina-cabecalho h3, .pagina-admin .previa-pagina-bloco h4{ margin: 0; color: var(--nv-marinho); font-size: var(--adm-fonte-lg); }
.pagina-admin .comparativo-previa .previa-pagina-bloco{ margin-top: 12px; }
.pagina-admin .comparativo-tabela th, .pagina-admin .comparativo-tabela td{ font-size: 14px; }
.pagina-admin .comparativo-tabela td:not(:first-child){ white-space: nowrap; }
.pagina-admin .cmp-melhor{ color: var(--success); font-weight: 600; }
.pagina-admin .cmp-pior{ color: var(--danger); font-weight: 600; }
.pagina-admin .cmp-neutro{ color: var(--gray-70); }
@media (max-width: 991px){
  .pagina-admin .previa-pagina-bloco{ padding: 12px; }
}
.pagina-admin .admin-publicacao{ margin-top: 18px; }
.pagina-admin .admin-version-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 16px 0; }
.pagina-admin .admin-version-grid small{ display: block; color: var(--gray-70); font-size: 12px; }
.pagina-admin .admin-version-grid strong{ display: block; color: var(--admin-azul); font-size: var(--adm-fonte-md); }
@media (max-width: 991px){
  .pagina-admin .admin-card{ padding: 16px; }
  .pagina-admin .admin-table{ min-width: 600px; }
  .pagina-admin .admin-update-grid, .pagina-admin .admin-version-grid{ grid-template-columns: 1fr; }
}

/* Composição dos cartões das demais telas administrativas. */
.pagina-admin .admin-config,
.pagina-admin .admin-access-page{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pagina-admin .admin-config > *, .pagina-admin .admin-access-page > *{ min-width: 0; }
.pagina-admin .admin-config h1{ margin-bottom: 0 !important; }
.pagina-admin .admin-config .admin-card + .admin-card{ margin-top: 0; }
.pagina-admin .admin-config-top{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pagina-admin .admin-config .admin-card > p:first-of-type{ margin-top: 0; }
.pagina-admin .admin-config .admin-card hr{ border-top: 1px solid var(--admin-borda); margin: 20px 0; }
.pagina-admin .admin-kpi-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 237px)); gap: 16px; margin: 14px 0; }
.pagina-admin .admin-kpi-date{ font-size: var(--adm-fonte-xl); }
.pagina-admin .admin-campi-lista .admin-campi-actions{ margin: 0 0 16px; }
.pagina-admin .admin-campi-toolbar{ display: flex; align-items: end; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--admin-borda); margin-bottom: 16px; }
.pagina-admin .admin-campi-toolbar form{ flex: 1 1 300px; }
.pagina-admin .admin-campi-toolbar .admin-campi-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.pagina-admin .admin-campus-form .admin-panel{ margin-top: 16px; }
.pagina-admin .admin-campus-form--new .row > .col-md-6:nth-child(n+3){ flex: 0 0 33.333333%; max-width: 33.333333%; }
.pagina-admin .admin-form-note{ color: var(--gray-70); font-size: 12px; }
.pagina-admin .admin-card + .admin-card{ margin-top: 16px; }
.pagina-admin .admin-table tbody tr:nth-child(odd){ background: var(--gray-2); }
.pagina-admin .admin-table tbody tr:last-child td{ border-bottom: 0; }
.pagina-admin .grupos-divergencia .grupo-divergencia{ box-shadow: none; }
.pagina-admin .grupo-divergencia-quantidade{ color: var(--admin-azul); }
/* Classificação de cada tipo: a etiqueta colorida indica a prioridade de ação, e o texto dela repete o sentido. */
.pagina-admin .grupo-divergencia-classe{ align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pagina-admin .grupo-divergencia--necessaria .grupo-divergencia-classe{ background: var(--red-vivid-5); color: var(--red-vivid-70); }
.pagina-admin .grupo-divergencia--verificar .grupo-divergencia-classe{ background: var(--orange-vivid-5); color: var(--orange-vivid-70); }
.pagina-admin .grupo-divergencia--alerta .grupo-divergencia-classe{ background: var(--yellow-vivid-5); color: var(--yellow-vivid-70); }
.pagina-admin .grupo-divergencia--informativa .grupo-divergencia-classe{ background: var(--gray-5); color: var(--gray-70); }

/* Login e instalação compartilham o painel institucional sem navegação: marca à esquerda, formulário à direita. */
body:has(.admin-access-brand){ --admin-sidebar: 50vw; background: var(--pure-0); color: var(--gray-80); }
body:has(.admin-access-brand) > .br-header{ display: none; }
body:has(.admin-access-brand) > main#main-content{ margin-left: var(--admin-sidebar); width: auto; padding: 0 clamp(32px, 5vw, 80px); max-width: none; min-width: 0; }
body:has(.admin-access-brand) > .br-footer{ margin-left: var(--admin-sidebar); background: transparent; border: 0; padding: 16px clamp(32px, 5vw, 80px) 24px; color: var(--gray-70); font-size: 12px; }
body:has(.admin-access-brand) > .br-footer a{ color: var(--nv-azul); }
.admin-access-brand{ position: fixed; z-index: 1; inset: 0 auto 0 0; width: var(--admin-sidebar); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; background: var(--nv-marinho); color: var(--pure-0); text-align: center; }
.admin-access-logo img{ display: block; width: 168px; height: 168px; object-fit: contain; margin: 0 auto 28px; }
.admin-access-logo span,.admin-access-logo small{ display: block; }
.admin-access-logo span{ margin: 0 auto; font-size: var(--adm-fonte-2xl); font-weight: 700; line-height: 1.25; }
.admin-access-logo small{ margin-top: 4px; font-size: 12px; letter-spacing: .12em; color: var(--blue-warm-vivid-20); }
.admin-access-brand > p{ border-top: 1px solid var(--blue-warm-vivid-80); padding-top: 24px; margin: 32px auto 0; font-size: var(--adm-fonte-md); line-height: 1.5; max-width: 32ch; color: var(--blue-warm-vivid-10); }
.admin-access-page .admin-access-breadcrumb{ color: var(--gray-70); font-size: 13px; }
.admin-access-page h1{ color: var(--nv-marinho); font-size: var(--adm-fonte-titulo); margin: 0 0 24px; }
.admin-access-page .admin-card{ padding: 24px; background: var(--pure-0); border: 1px solid var(--gray-20); border-radius: 8px; }
.admin-access-page .admin-card-title{ color: var(--nv-marinho); font-size: var(--adm-fonte-xl); margin: 0 0 16px; }
.admin-login-page{ min-height: calc(100vh - 64px); align-content: center; }
.admin-login-card{ width: min(100%, 440px); margin: 0 auto; }
.admin-login-card h1{ font-size: var(--adm-fonte-3xl); margin-bottom: 8px; }
.admin-login-card .admin-intro{ margin: 0 0 32px; color: var(--gray-70); font-size: var(--adm-fonte-md); }
.admin-login-card .br-input{ margin-bottom: 20px; }
.admin-login-card .br-input label{ color: var(--nv-marinho); font-size: 14px; font-weight: 700; }
.admin-login-card .br-input input{ height: 48px; font-size: var(--adm-fonte-md); }
.admin-login-card .br-message{ margin-bottom: 20px; }
.admin-login-card .br-button.block{ min-height: 48px; font-size: var(--adm-fonte-md); }
.admin-login-card .br-input.input-button .br-button{ min-width: 44px; min-height: 44px; }
.admin-login-ajuda{ margin: 20px 0 0; text-align: center; font-size: 14px; }
.admin-access-page .admin-panel{ padding: 16px; background: var(--blue-warm-vivid-5); border: 1px solid var(--gray-20); border-radius: 8px; }
.admin-access-page .admin-intro{ margin: 0 0 4px; }
.admin-login-card .admin-intro{ margin: 0 0 32px; }
.admin-install-page .admin-card + .admin-card{ margin-top: 0; }
@media (max-width: 991px){
  .pagina-admin .admin-config-top{ grid-template-columns: 1fr; }
  .pagina-admin .admin-kpi-grid{ grid-template-columns: 1fr; }
  .pagina-admin .admin-campus-form--new .row > .col-md-6:nth-child(n+3){ flex: 0 0 100%; max-width: 100%; }
  body:has(.admin-access-brand){ --admin-sidebar: 0px; }
  body:has(.admin-access-brand) > main#main-content,
  body:has(.admin-access-brand) > .br-footer{ margin-left: 0; padding-left: 24px; padding-right: 24px; }
  body:has(.admin-access-brand) > main#main-content{ padding-top: 0; }
  .admin-access-brand{ position: static; width: auto; padding: 32px 24px 28px; margin: 0 -24px 32px; }
  .admin-access-brand > p{ display: none; }
  .admin-access-logo img{ width: 96px; height: 96px; margin-bottom: 12px; }
  .admin-access-logo span{ max-width: none; font-size: 17px; }
  .admin-login-page{ min-height: 0; padding-bottom: 24px; }
  .admin-login-card h1{ font-size: var(--adm-fonte-titulo-mobile); }
}

/* Botões do admin: cantos pouco arredondados, como no Figma. */
.pagina-admin .br-button, body:has(.admin-access-brand) .br-button{ border-radius: 4px; }
.pagina-admin .admin-card h3{ color: var(--nv-marinho); font-size: var(--adm-fonte-md); font-weight: 700; line-height: 1.3; margin: 20px 0 8px; }
/* Salvar e Restaurar lado a lado: o formulário de salvar vira "contents" e o de restaurar
   segue na mesma linha, sem mover o botão para fora do seu formulário. */
.pagina-admin .admin-card:has(> form.confirm-form.mt-2){ display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; }
.pagina-admin .admin-card:has(> form.confirm-form.mt-2) > *{ flex: 0 0 100%; }
.pagina-admin .admin-card > form:has(+ form.confirm-form.mt-2){ display: contents; }
.pagina-admin .admin-card > form:has(+ form.confirm-form.mt-2) > *{ flex: 0 0 100%; }
.pagina-admin .admin-card > form:has(+ form.confirm-form.mt-2) > .br-button{ flex: 0 0 auto; }
.pagina-admin .admin-card > form.confirm-form.mt-2{ flex: 0 0 auto; margin-top: 8px; }
/* Tipos de divergência: cartão ativo azul-claro e ação como texto, como no Figma. */
.pagina-admin .grupo-divergencia.ativo{ background: color-mix(in srgb, var(--interactive) 8%, var(--background)); border: 2px solid var(--interactive); }
.pagina-admin .grupo-divergencia .grupo-divergencia-botao{ border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--interactive); font-size: 13px; }
.pagina-admin .grupo-divergencia:hover .grupo-divergencia-botao, .pagina-admin .grupo-divergencia-botao.selecionado{ background: transparent; color: var(--interactive); }

/* Carregamento: bloco reservado com texto, no lugar do spinner solto. */
.carregando{ display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 120px; padding: 16px; box-sizing: border-box;
  background: var(--pure-0); border: 1px solid var(--nv-borda); border-radius: 6px; }
.carregando-texto{ color: var(--gray-70); font-size: var(--nv-fonte-md); }
.carregando-barra{ height: 9px; border-radius: 2px; background: var(--gray-5); }
.carregando-barra:nth-child(3){ width: 70%; }
.carregando-barra:nth-child(4){ width: 45%; }

/* Glossário recolhido sob o cabeçalho da página. */
.como-ler{ margin: 0; color: var(--gray-80); font-size: var(--nv-fonte-md); }
.como-ler summary{ display: inline-flex; align-items: center; min-height: 24px; color: var(--nv-azul); font-weight: var(--font-weight-bold); cursor: pointer; }
.como-ler summary:focus-visible{ outline: 3px solid var(--focus-color); outline-offset: 2px; }
.como-ler dl{ margin: 8px 0 0; display: grid; gap: 8px; max-width: 72ch; }
.como-ler dt{ font-weight: var(--font-weight-bold); color: var(--nv-marinho); }
.como-ler dd{ margin: 0; }
.como-ler-guia{ margin: 10px 0 0; }
.como-ler-guia a{ display: inline-flex; align-items: center; min-height: 24px; }
td.num.vazio{ color: var(--gray-70); }

/* Movimento: feedback e estado, sem coreografia de página. Conteúdo visível no estado padrão. */
:root{ --mov-saida: cubic-bezier(.16, 1, .3, 1); }

/* Barras de dado: crescem da esquerda ao renderizar (a barra "mede" o valor). transform, sem tocar na largura. */
@keyframes barra-medir{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.barra-preenchimento{ transform-origin: left center; animation: barra-medir .5s var(--mov-saida) both; }
.barra-linha:nth-child(2) .barra-preenchimento{ animation-delay: 40ms; }
.barra-linha:nth-child(3) .barra-preenchimento{ animation-delay: 80ms; }
.barra-linha:nth-child(4) .barra-preenchimento{ animation-delay: 120ms; }
.barra-linha:nth-child(n+5) .barra-preenchimento{ animation-delay: 160ms; }

/* Carregamento: esqueleto pulsa devagar para indicar que o painel está vivo. */
@keyframes carregando-pulso{ 0%, 100%{ opacity: 1; } 50%{ opacity: .45; } }
.carregando-barra{ animation: carregando-pulso 1.4s ease-in-out infinite; }
.carregando-barra:nth-child(3){ animation-delay: .15s; }
.carregando-barra:nth-child(4){ animation-delay: .3s; }

/* Glossário: conteúdo entra suave ao abrir. */
@keyframes como-ler-entrada{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.como-ler[open] dl{ animation: como-ler-entrada .2s var(--mov-saida) both; }

/* Dados atualizados: números e gráficos aparecem com um fade curto, para o olho notar que mudaram.
   Números sobem 3px; gráficos (canvas) só mudam a opacidade. Cartões em sequência, no máximo 4 passos. */
@keyframes dado-entrada{ from{ opacity: 0; transform: translateY(3px); } to{ opacity: 1; transform: none; } }
@keyframes grafico-entrada{ from{ opacity: 0; } to{ opacity: 1; } }
.kpi-figma .valor{ animation: dado-entrada .3s var(--mov-saida) both; }
.kpis-figma > .kpi-figma:nth-child(2) .valor{ animation-delay: 40ms; }
.kpis-figma > .kpi-figma:nth-child(3) .valor{ animation-delay: 80ms; }
.kpis-figma > .kpi-figma:nth-child(n+4) .valor{ animation-delay: 120ms; }
.medidor .grafico-medidor, .grafico-evasoes{ animation: grafico-entrada .4s var(--mov-saida) both; }

/* Feedback de controles. */
.painel-publico .painel-menu,
.pagina-admin .admin-button,
.pagina-admin .admin-user-botao,
.pagina-admin .admin-user-lista a,
.matriz-expansor,
.dash-dropdown-option{ transition: background-color .15s ease, color .15s ease, filter .15s ease; }
.card-chips label.chip, .card-filtros label.seg, .lateral-filtros label.seg{ transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.pagina-admin .admin-button:active{ transform: translateY(1px); }

@media (prefers-reduced-motion: reduce){
  .barra-preenchimento{ animation: none; }
  .carregando-barra{ animation: none; }
  .como-ler[open] dl{ animation: none; }
  .kpi-figma .valor{ animation-name: grafico-entrada; animation-delay: 0s !important; }
  .medidor .grafico-medidor, .grafico-evasoes{ animation-duration: .15s; }
  .pagina-admin .admin-button:active{ transform: none; }
  .pagina-admin .admin-menu, .matriz-expansor .fa-chevron-down{ transition: none; }
}

/* Hierarquia dos cartões: um número lidera a página, os demais apoiam */
.kpi-figma--destaque{ grid-column: span 2; }
.kpi-figma--destaque .rotulo{ color: var(--nv-marinho); font-size: var(--nv-fonte-base); font-weight: var(--font-weight-bold); }
.kpi-figma--destaque .valor{ font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; }
.kpi-figma--destaque .meta-texto{ font-size: var(--nv-fonte-md); }
.kpis-figma:has(.kpi-figma--destaque) .kpi-figma:not(.kpi-figma--destaque){ min-height: 0; padding: 12px 14px; background: transparent; }
.kpis-figma:has(.kpi-figma--destaque) .kpi-figma:not(.kpi-figma--destaque) .kpi-icone{ display: none; }
.kpis-figma:has(.kpi-figma--destaque) .kpi-figma:not(.kpi-figma--destaque) .rotulo{ padding-right: 0; font-size: var(--nv-fonte-md); }
.kpis-figma:has(.kpi-figma--destaque) .kpi-figma:not(.kpi-figma--destaque) .valor{ font-size: clamp(18px, 1.6vw, 22px); }