/* EDUSTAT Municipal — estilos do portal (homepage, shell dos territórios e componentes C01–C29).
   Usa apenas os tokens --em-* de tokens.css. Princípios: fundos neutros, a cor do nível só onde orienta (navegação
   ativa, ações, série do território), hierarquia pela tipografia em vez de caixas e sombras. */

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

/* Tokens derivados da cor do nível. Ficam no <body> (e não em :root) porque é no <body> que TerritoryTheme.BuildStyle
   define --em-theme-primary; declarados em :root resolveriam sempre para a cor por omissão. */
body {
  --em-theme-tint: color-mix(in srgb, var(--em-theme-primary) 8%, #FFFFFF);
  --em-chart-series-1: var(--em-theme-primary);
  --em-chart-bar: var(--em-theme-primary);
  --em-chart-bar-alt: color-mix(in srgb, var(--em-theme-primary) 45%, #FFFFFF);
  --em-chart-donut-1: var(--em-theme-primary);
  --em-chart-donut-2: color-mix(in srgb, var(--em-theme-primary) 35%, #FFFFFF);
  --em-chart-scatter: color-mix(in srgb, var(--em-theme-primary) 38%, #FFFFFF);
  --em-rank-bar: var(--em-theme-primary);
  --em-color-highlight-row: color-mix(in srgb, var(--em-theme-primary) 8%, #FFFFFF);
  --em-focus-ring: 0 0 0 3px color-mix(in srgb, var(--em-theme-primary) 30%, transparent);

  margin: 0;
  font-family: var(--em-font-sans);
  font-size: var(--em-fs-body);
  line-height: var(--em-lh-body);
  color: var(--em-color-text);
  background: var(--em-theme-bg-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }

.em-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.em-skip-link {
  position: absolute;
  left: var(--em-space-4);
  top: -100px;
  z-index: 20;
  padding: var(--em-space-2) var(--em-space-4);
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
  border-radius: var(--em-radius-md);
  font-weight: var(--em-fw-semibold);
  text-decoration: none;
}
.em-skip-link:focus { top: var(--em-space-3); }

/* Carregamento ao mudar de página (_Carregamento, em-loader.js): véu escuro neutro (azul-ardósia, igual nos três níveis:
   na cor do nível o magenta da CIM tingia a página toda) e, ao centro, o favicon num círculo branco com um anel na cor do
   nível a rodar — é o anel que identifica o nível. */
.em-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 25, 36, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.em-loader[hidden] { display: none; }
.em-loader--visivel { opacity: 1; }
.em-loader__box { display: flex; flex-direction: column; align-items: center; gap: var(--em-space-3); }
.em-loader__mark {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--em-color-surface);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.55);
}
/* Mesma animação do carregamento do Backoffice: o favicon roda como um diafragma (com balanço e "salto"), o arco roda
   com aceleração suave e uma onda na cor do nível sai do círculo. */
.em-loader__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--em-theme-primary) 35%, transparent);
  animation: em-loader-onda 2.2s ease-out infinite;
  z-index: -1;
}
.em-loader__icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: em-loader-diafragma 2.2s cubic-bezier(.68, -.4, .27, 1.4) infinite;
}
.em-loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: em-loader-rodar 1.1s cubic-bezier(.45, .05, .55, .95) infinite; }
.em-loader__track,
.em-loader__arc { fill: none; stroke-width: 4; }
.em-loader__track { stroke: color-mix(in srgb, var(--em-theme-primary) 9%, #FFFFFF); }
.em-loader__arc { stroke: var(--em-theme-primary); stroke-linecap: round; stroke-dasharray: 64 162; }
.em-loader__text { font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text-inverse); letter-spacing: 0.01em; }
@keyframes em-loader-rodar { to { transform: rotate(360deg); } }
@keyframes em-loader-diafragma {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(160deg) scale(.82); }
  65% { transform: rotate(330deg) scale(1.08); }
  80% { transform: rotate(360deg) scale(.97); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes em-loader-onda {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .em-loader__icon { animation: em-loader-pulso 2s ease-in-out infinite; }
  .em-loader__mark::before { animation: none; opacity: 0; }
  .em-loader__ring { animation-duration: 3s; }
}

/* Indicadores de espera dentro da página (sem mudar de página). */
.em-spinner {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--em-theme-primary) 18%, #FFFFFF);
  border-top-color: var(--em-theme-primary);
  border-radius: 50%;
  animation: em-loader-rodar 0.8s linear infinite;
}
/* Mapa do IMEQ enquanto chega a geometria. */
[data-mapa-imeq] { position: relative; }
.em-mapa-estado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  font-size: var(--em-fs-label);
  color: var(--em-color-text-muted);
}
/* Botão a preparar (download do Excel; evolução do cartão a carregar o ECharts): o ícone passa a um círculo a rodar. */
.em-btn.is-loading,
.em-kpi-card__evolucao.is-loading { pointer-events: none; }
.em-btn.is-loading { opacity: 0.8; }
.em-btn.is-loading > .fa-solid::before,
.em-kpi-card__evolucao.is-loading > .fa-solid::before { content: "\f110"; }
.em-btn.is-loading > .fa-solid,
.em-kpi-card__evolucao.is-loading > .fa-solid { animation: em-loader-rodar 0.9s linear infinite; }
@keyframes em-loader-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   C01 Cabeçalho
   ===================================================================== */
/* Acima da barra de filtros fixa (.em-sticky-filtros, z-index 30) para a lista da pesquisa passar por cima dela e do
   Partilhar; abaixo do Partilhar flutuante (60), do assistente (70) e do carregamento (1000). */
.em-header {
  position: relative;
  z-index: 40;
  height: var(--em-header-height);
  display: flex;
  align-items: center;
  gap: var(--em-space-8);
  /* Logótipo, seletor de nível e pesquisa dentro da mesma coluna do conteúdo (nome do território, separadores e
     gráficos), como .em-subnav__inner e .em-territory-band__inner. */
  padding: 0 max(var(--em-content-padding), calc((100% - var(--em-content-max)) / 2));
  background: var(--em-color-surface-header);
  border-bottom: var(--em-border-width) solid var(--em-color-border);
}
.em-header__brand { display: flex; align-items: center; flex: none; height: 100%; }
.em-header__brand img { height: 38px; width: auto; display: block; }
/* Logótipo SVG incorporado (SiteHeader), com as cores do ficheiro. Um pouco maior que o PNG: a
   faixa "MUNICIPAL" tem letras vazadas que, abaixo de ~44px de altura, se leem como riscos. */
.em-header__logo { height: 46px; width: auto; display: block; color: var(--em-color-text-strong); }

.em-header__menu { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--em-space-3); }
/* Seletor de nível territorial: controlo segmentado num trilho, com a cor de cada nível. */
.em-level-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--em-color-bg-muted);
  border-radius: var(--em-radius-full);
}
.em-level-switch__item {
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-2);
  height: 34px;
  padding: 0 var(--em-space-4);
  border-radius: var(--em-radius-full);
  color: var(--em-color-text-muted);
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--em-transition), color var(--em-transition), box-shadow var(--em-transition);
}
.em-level-switch__item:hover { color: var(--em-color-text-strong); background: rgba(255, 255, 255, 0.55); }
.em-level-switch__item--active,
.em-level-switch__item--active:hover {
  background: var(--em-color-surface);
  color: var(--em-color-text-strong);
  box-shadow: 0 1px 2px rgba(18, 33, 47, 0.10), 0 2px 8px -2px rgba(18, 33, 47, 0.12);
}
.em-level-switch__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity var(--em-transition), box-shadow var(--em-transition);
}
.em-level-switch__item:hover .em-level-switch__dot { opacity: 0.8; }
.em-level-switch__item--active .em-level-switch__dot { opacity: 1; box-shadow: 0 0 0 3px rgba(18, 33, 47, 0.08); }

/* Variante do hero (homepage): trilho de vidro sobre a imagem, separadores claros e o ativo em branco. */
.em-level-switch--hero {
  margin-bottom: var(--em-space-8);
  background: rgba(255, 255, 255, 0.12);
  border: var(--em-border-width) solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}
.em-level-switch--hero .em-level-switch__item { height: 38px; color: rgba(255, 255, 255, 0.82); font-size: var(--em-fs-body); }
.em-level-switch--hero .em-level-switch__item:hover { background: rgba(255, 255, 255, 0.14); color: var(--em-color-text-inverse); }
.em-level-switch--hero .em-level-switch__item--active,
.em-level-switch--hero .em-level-switch__item--active:hover { background: var(--em-color-surface); color: var(--em-color-text-strong); }
.em-level-switch--hero .em-level-switch__dot { opacity: 0.9; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.em-level-switch--hero .em-level-switch__item--active .em-level-switch__dot { box-shadow: 0 0 0 3px rgba(18, 33, 47, 0.08); }

/* Homepage: cabeçalho transparente por cima do hero, só com o logótipo. */
body.em-home { position: relative; }
.em-header--over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  /* Logótipo e seletor de nível alinhados com as margens do bloco de números (max-width 1152px), à esquerda e à direita. */
  padding: var(--em-space-5) max(var(--em-space-6), calc((100% - 1152px) / 2));
  background: transparent;
  border-bottom: 0;
}
.em-header--over-hero .em-header__brand { height: auto; }
/* Sem placa de fundo: o filtro SVG #em-logo-sobre-escuro (SiteHeader) põe os neutros do logótipo do site a branco e mantém as
   cores. Um logótipo carregado no Backoffice não leva filtro: fica com as cores do ficheiro. */
.em-header--over-hero .em-header__brand img { height: 40px; }
.em-header--over-hero .em-header__brand img.em-header__logo-padrao,
.em-header--over-band .em-header__brand img.em-header__logo-padrao { filter: url(#em-logo-sobre-escuro); }
.em-header--over-hero .em-header__logo { height: 48px; color: var(--em-color-text-inverse); }
.em-header__level { margin-left: auto; }

/* Páginas de território: cabeçalho transparente por cima da banda (a fotografia vai até ao topo), com o logótipo em
   claro, o seletor de nível em vidro (variante "hero") e a pesquisa translúcida, que fica branca ao escrever. */
.em-header--over-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  /* Sem linha por baixo: a fotografia da banda continua sem cortes até ao topo. */
  border-bottom: 0;
}
.em-header--over-band + .em-territory-band { padding-top: var(--em-header-height); }

.em-header--over-band .em-header__logo { color: var(--em-color-text-inverse); }
.em-header .em-level-switch--hero { margin-bottom: 0; }
.em-header .em-level-switch--hero .em-level-switch__item { height: 34px; font-size: var(--em-fs-label); }
.em-header--over-band .em-search--compact { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.18); }
.em-header--over-band .em-search--compact input { color: var(--em-color-text-inverse); }
.em-header--over-band .em-search--compact input::placeholder,
.em-header--over-band .em-search--compact .em-search__icon { color: rgba(255, 255, 255, 0.72); }
.em-header--over-band .em-search--compact:focus-within { background: var(--em-color-surface); border-color: var(--em-color-surface); }
.em-header--over-band .em-search--compact:focus-within input { color: var(--em-color-text-strong); }
.em-header--over-band .em-search--compact:focus-within input::placeholder,
.em-header--over-band .em-search--compact:focus-within .em-search__icon { color: var(--em-color-text-muted); }
.em-header--over-band .em-header__nav-toggle { color: var(--em-color-text-inverse); }
.em-header--over-band .em-header__nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.em-header--over-hero + .em-page .em-hero__inner { padding-top: 136px; }
/* .em-header__search width is managed by the collapsed/expanded toggle block below. */

/* Partilhar (_Partilhar, em-share.js): na barra de filtros, um botão claro "Partilhar" encostado à direita; nas páginas
   sem filtros, um botão redondo de vidro à direita da pesquisa do cabeçalho. Ao abrir, um balão na cor do nível com a
   ligação e as redes sociais. */
.em-share { position: relative; flex: none; }
.em-share__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  cursor: pointer;
  transition: background var(--em-transition), color var(--em-transition), border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-share--barra { margin-left: auto; }
/* O mesmo tamanho com e sem barra de filtros. */
.em-share--barra .em-share__toggle {
  height: 36px;
  padding: 0 14px;
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  color: var(--em-theme-primary);
  font: inherit;
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-semibold);
}
.em-share--barra .em-share__toggle:hover { border-color: var(--em-theme-primary); }
/* Aberto: o botão continua claro (não se funde com o balão azul), só com o contorno e um fundo ténue na cor do nível. */
.em-share--barra.em-share--open .em-share__toggle { background: var(--em-theme-tint); border-color: var(--em-theme-primary); color: var(--em-theme-primary); }
/* Sem barra de filtros: o botão numa linha compacta à direita, entre as abas e o primeiro gráfico. O conteúdo perde o
   espaço de cima (vai para esta linha), para a distância até ao primeiro cartão crescer pouco. (A flutuar sobre a borda
   da banda tapava a última aba.) */
.em-main:has(> .em-main__inner > .em-share-row) { padding-top: var(--em-space-3); }
.em-share-row { display: flex; justify-content: flex-end; margin-bottom: var(--em-space-3); }
.em-share-row .em-share--barra { margin-left: 0; }

/* Telemóvel (em-share.js passa o botão para o <body>): botão redondo flutuante no canto inferior direito, só com o ícone,
   e o balão abre para cima. Não ocupa espaço na página nem fica preso à barra de filtros fixa. */
.em-share--flutuante { position: fixed; right: var(--em-space-4); bottom: calc(var(--em-space-4) + env(safe-area-inset-bottom, 0px)); z-index: 60; margin: 0; }
.em-share--flutuante .em-share__toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
  box-shadow: 0 10px 24px -8px rgba(18, 33, 47, 0.45);
}
.em-share--flutuante .em-share__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.em-share--flutuante .em-share__panel { top: auto; bottom: calc(100% + 12px); }
.em-share--flutuante .em-share__panel::before {
  top: auto;
  bottom: -7px;
  right: 18px;
  border: 0;
  border-right: var(--em-border-width) solid var(--em-color-border);
  border-bottom: var(--em-border-width) solid var(--em-color-border);
  border-radius: 0 0 2px 0;
}
.em-share__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--em-space-2);
  padding: 10px var(--em-space-4);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  background: var(--em-color-surface);
  color: var(--em-color-text-strong);
  box-shadow: 0 18px 40px -18px rgba(18, 33, 47, 0.4);
  white-space: nowrap;
}
.em-share__panel[hidden] { display: none; }
/* Seta do balão, por baixo do botão (com o contorno do balão nos dois lados de cima). */
.em-share__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 13px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: var(--em-border-width) solid var(--em-color-border);
  border-left: var(--em-border-width) solid var(--em-color-border);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.em-share__label { margin-right: var(--em-space-1); font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); }
.em-share__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: 50%;
  background: var(--em-color-surface);
  color: var(--em-theme-primary);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--em-transition), color var(--em-transition), border-color var(--em-transition);
}
.em-share__item:hover,
.em-share__item:focus-visible { background: var(--em-theme-primary); border-color: var(--em-theme-primary); color: var(--em-color-text-inverse); outline: none; }
.em-share__feedback { font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); color: var(--em-color-success, #1E7A46); }
.em-share__feedback:empty { display: none; }

/* Campo com a ligação quando a cópia automática falha (em-share.js): selecionado para copiar à mão. */
.em-share__manual {
  width: 220px;
  height: 34px;
  padding: 0 var(--em-space-2);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-md);
  font: inherit;
  font-size: var(--em-fs-caption);
  color: var(--em-color-text);
}

/* Menu móvel: botão (aria-expanded) com o script do SiteHeader, escondido acima do breakpoint. */
.em-header__nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--em-radius-md);
  font-size: 18px;
  color: var(--em-color-text-strong);
  cursor: pointer;
}
.em-header__nav-toggle:hover { background: var(--em-color-bg-subtle); }
.em-header__nav-toggle:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }
.em-header__nav-backdrop { display: none; }

/* =====================================================================
   Pesquisa de território (homepage e cabeçalho)
   ===================================================================== */
.em-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--em-control-height);
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-full);
  transition: border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-search:focus-within { border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-search__icon { flex: none; padding-left: var(--em-space-4); color: var(--em-color-text-muted); }
.em-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--em-color-text-strong);
  padding: 0 var(--em-space-3);
}
.em-search input::placeholder { color: var(--em-color-text-muted); }
.em-search input::-webkit-calendar-picker-indicator { display: none !important; }
.em-search__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  height: calc(100% - 8px);
  min-width: calc(var(--em-control-height) - 8px);
  margin-right: 4px;
  padding: 0 var(--em-space-3);
  border: 0;
  border-radius: var(--em-radius-full);
  background: var(--em-theme-search-button);
  color: var(--em-color-text-inverse);
  font: inherit;
  font-weight: var(--em-fw-semibold);
  cursor: pointer;
  transition: background var(--em-transition);
}
.em-search__button:hover { background: var(--em-theme-primary-dark); }

.em-search--compact { background: var(--em-color-bg-subtle); border-color: transparent; }
.em-search--compact:focus-within { background: var(--em-color-surface); }
.em-search--compact .em-search__button { padding: 0; font-size: 13px; }

/* Pesquisa compacta no cabeçalho: só a circunferência com a lupa. Ao abrir, o campo e a lista crescem
   juntos; ao fechar, encolhem juntos. A lista acompanha a largura do campo (não aparece já larga). */
.em-header__search {
  flex: none;
  width: var(--em-control-height);
  overflow: visible;
  transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.em-header__search:has(.em-search--expanded) {
  width: min(340px, 100%);
}
.em-header__search:has(.em-search--encolher) {
  width: var(--em-control-height);
}
.em-header__search .em-search--compact {
  width: 100%;
  transition: background 0.34s ease, border-color 0.34s ease, box-shadow 0.34s ease;
}

/* Colapsado: o ícone e o campo saem do fluxo para a lupa ocupar a circunferência inteira. */
.em-header__search:not(:has(.em-search--expanded)) .em-search--compact {
  justify-content: center;
  height: var(--em-control-height);
  background: transparent;
  border-width: 0;
  box-shadow: none;
}
.em-header__search:not(:has(.em-search--expanded)) .em-search--compact:focus-within {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.em-header__search:not(:has(.em-search--expanded)) .em-search__icon,
.em-header__search:not(:has(.em-search--expanded)) input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* A lupa tem sempre o mesmo tamanho. Mudar a largura ou a margem no fecho fazia o botão saltar
   e deixava o campo branco sozinho, como um retângulo. */
.em-header__search .em-search--compact .em-search__button {
  flex: none;
  width: var(--em-control-height);
  height: var(--em-control-height);
  min-width: var(--em-control-height);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.em-header__search:not(:has(.em-search--expanded)) .em-search__button {
  border: var(--em-border-width) solid var(--em-color-border-strong);
  background: transparent;
  color: var(--em-color-text-strong);
  font-size: 15px;
}
.em-header__search:not(:has(.em-search--expanded)) .em-search__button:hover {
  border-color: var(--em-theme-primary);
  color: var(--em-theme-primary);
  background: var(--em-theme-tint);
}
/* Sobre a banda escura, a circunferência fica em vidro, com a lupa branca. */
.em-header--over-band .em-header__search:not(:has(.em-search--expanded)) .em-search__button {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--em-color-text-inverse);
  background: rgba(255, 255, 255, 0.12);
}
.em-header--over-band .em-header__search:not(:has(.em-search--expanded)) .em-search__button:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.22);
  color: var(--em-color-text-inverse);
}

/* Expandido: o campo volta ao fluxo e a lupa passa a ser o botão de pesquisa. */
.em-header__search .em-search--compact.em-search--expanded .em-search__icon,
.em-header__search .em-search--compact.em-search--expanded input {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}
.em-header__search .em-search--compact.em-search--expanded input {
  height: 100%;
  padding: 0 var(--em-space-3);
}
.em-header__search .em-search--compact.em-search--expanded .em-search__icon {
  padding-left: var(--em-space-4);
}
.em-header__search .em-search--compact.em-search--expanded .em-search__button {
  border: 0;
  background: var(--em-theme-search-button);
  color: var(--em-color-text-inverse);
  font-size: 13px;
}
.em-header__search .em-search--compact.em-search--expanded .em-search__button:hover {
  background: var(--em-theme-primary-dark);
  color: var(--em-color-text-inverse);
}
.em-header__search .em-search--compact.em-search--expanded:focus-within {
  border-color: var(--em-theme-primary);
  box-shadow: var(--em-focus-ring);
}
/* A fechar: a lista sai inteira e o campo branco encolhe por baixo da lupa, que não muda de tamanho. */
.em-header--over-band .em-header__search:has(.em-search--closing) .em-search--compact,
.em-header__search:has(.em-search--closing) .em-search--compact {
  background: var(--em-color-surface);
  border-color: var(--em-color-border);
  box-shadow: none;
}
.em-header__search:has(.em-search--closing) .em-search--compact .em-search__icon,
.em-header__search:has(.em-search--closing) .em-search--compact input {
  opacity: 0;
  transition: opacity 0.12s ease;
}
/* No encolher, o ícone e o texto saem do fluxo. Se ficam invisíveis mas a ocupar espaço,
   empurram a lupa para fora do campo branco. */
.em-header__search:has(.em-search--encolher) .em-search--compact {
  justify-content: flex-end;
}
.em-header__search:has(.em-search--encolher) .em-search__icon,
.em-header__search:has(.em-search--encolher) .em-search--compact input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.em-header__search .em-search__list {
  left: 0;
  right: 0;
  width: auto;
  transform-origin: top center;
}
.em-header__search:has(.em-search--a-abrir) .em-search__list,
.em-header__search:has(.em-search--closing) .em-search__list {
  left: auto;
  right: 0;
  width: min(340px, 80vw);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  animation: none;
}
.em-header__search:has(.em-search--expanded):not(:has(.em-search--closing)):not(:has(.em-search--a-abrir)) .em-search__list {
  animation: em-search-abrir 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.em-header__search:has(.em-search--closing) .em-search__list {
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@keyframes em-search-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .em-header__search,
  .em-header__search .em-search__list,
  .em-header__search .em-search__button { transition: none; animation: none; }
}

.em-search--hero {
  max-width: 580px;
  height: 60px;
  border: 0;
  box-shadow: var(--em-shadow-raised);
}
.em-search--hero:focus-within { box-shadow: var(--em-shadow-raised), 0 0 0 4px rgba(255, 255, 255, 0.35); }
.em-search--hero .em-search__icon { padding-left: var(--em-space-5); font-size: 16px; }
.em-search--hero input { font-size: var(--em-fs-body-lg); padding: 0 var(--em-space-4); }
.em-search--hero .em-search__button { width: 48px; height: 48px; margin-right: 6px; padding: 0; font-size: 16px; }

/* Lista de sugestões (em-search.js) */
.em-search__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 320px;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  box-shadow: 0 18px 40px -16px rgba(18, 33, 47, 0.35);
  color: var(--em-color-text);
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--em-color-border-strong) transparent;
}
.em-search__list[hidden] { display: none; }
.em-search__option {
  display: block;
  padding: 9px var(--em-space-3);
  border-radius: var(--em-radius-md);
  font-size: var(--em-fs-body);
  cursor: pointer;
}
.em-search__option mark { background: none; color: var(--em-theme-primary); font-weight: var(--em-fw-bold); }
.em-search__option--active { background: var(--em-theme-tint); color: var(--em-color-text-strong); }
/* Contorno do campo quando o texto não corresponde a nenhum território. */
.em-search--invalid,
.em-search--invalid:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-color-warning) 45%, transparent); }
.em-search--hero.em-search--invalid,
.em-search--hero.em-search--invalid:focus-within { box-shadow: var(--em-shadow-raised), 0 0 0 4px color-mix(in srgb, var(--em-color-warning) 70%, transparent); }
.em-search__empty {padding: 10px var(--em-space-3); font-size: var(--em-fs-label); color: var(--em-color-text-muted); }
/* Lista da pesquisa do hero compacta: da largura do campo, com ~5 nomes à vista, para não tapar a página toda. */
.em-search--hero .em-search__list { top: calc(100% + 8px); max-height: 224px; padding: 4px; }
.em-search--hero .em-search__option { padding: 8px var(--em-space-3); font-size: 14px; }

/* =====================================================================
   Shell dos territórios: cabeçalho, barra de vistas (C02) e conteúdo a toda a largura (fixos só os filtros)
   ===================================================================== */
.em-main { padding: var(--em-space-8) var(--em-content-padding) var(--em-space-16); }
.em-main__inner { max-width: var(--em-content-max); margin: 0 auto; }

/* O cabeçalho e a banda (nome, ranking, vistas) saem com o scroll normal da página; o que fica fixo é a barra de filtros
   de cada ecrã, quando chega ao topo (.em-sticky-filtros). O .em-shell__scroll é só um invólucro (sem scroll próprio). */

/* Banda do território: cor do nível com a fotografia do Backoffice por baixo de um véu, o cabeçalho da página (nome do
   território, contexto, ranking) e as vistas do território (C02) na base, em separadores de vidro. */
.em-territory-band {
  position: relative;
  /* Acima do conteúdo, para as listas dos dropdowns da banda (ex.: ano) passarem por cima dos gráficos. */
  z-index: 2;
  isolation: isolate;
  background-color: var(--em-theme-hero-bg);
  color: var(--em-color-text-inverse);
}
.em-territory-band--photo { background-image: var(--em-hero-image); background-size: cover; background-position: center 40%; }
.em-territory-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--em-theme-hero-bg) 95%, transparent) 0%,
    color-mix(in srgb, var(--em-theme-hero-bg) 84%, transparent) 50%,
    color-mix(in srgb, var(--em-theme-hero-bg) 58%, transparent) 100%);
}
.em-territory-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 25%, #000 90%);
}
/* Acima da fila de separadores, para a lista do ano passar por cima delas. */
.em-territory-band__inner {
  position: relative;
  z-index: 2;
  max-width: calc(var(--em-content-max) + 2 * var(--em-content-padding));
  margin: 0 auto;
  padding: var(--em-space-4) var(--em-content-padding) var(--em-space-4);
}
.em-territory-band .em-territory-header,
.em-territory-band .em-page-heading { margin: 0; padding: 0; border: 0; }
.em-territory-band .em-territory-header__eyebrow { color: rgba(255, 255, 255, 0.72); }
.em-territory-header__eyebrow:empty { display: none; }
.em-territory-band .em-territory-header__title,
.em-territory-band .em-page-heading__title { color: var(--em-color-text-inverse); font-size: clamp(28px, 2.6vw, 40px); }
/* Sem o nível por cima do nome (MUNICÍPIO, CIM, CCDR): já está no seletor de nível do cabeçalho. */
.em-territory-band .em-territory-header__eyebrow { display: none; }
.em-territory-band .em-territory-header__subtitle,
.em-territory-band .em-page-heading__subtitle { margin-top: 2px; font-size: var(--em-fs-body); color: rgba(255, 255, 255, 0.8); }
/* Introdução opcional da página (Backoffice > Páginas do Portal): uma frase curta por baixo do subtítulo. */
.em-territory-header__intro { max-width: 720px; margin: var(--em-space-2) 0 0; font-size: var(--em-fs-label); line-height: 1.55; color: var(--em-color-text-muted); }
.em-territory-band .em-territory-header__intro { color: rgba(255, 255, 255, 0.72); }

/* Lado direito do cabeçalho na banda: um só painel de vidro com secções lado a lado (ano de referência, ranking IMEQ),
   separadas por uma linha fina, com rótulos e valores no mesmo estilo. */
.em-territory-band .em-territory-header__right {
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.1);
  border: var(--em-border-width) solid rgba(255, 255, 255, 0.2);
  border-radius: var(--em-radius-lg);
  backdrop-filter: blur(8px);
}
.em-territory-band .em-territory-header__right:not(:has(.em-year-select, .em-rank-widget, .em-header-action)) { display: none; }
.em-territory-band .em-territory-header__right > * + * { border-left: var(--em-border-width) solid rgba(255, 255, 255, 0.18); }

.em-territory-band .em-rank-widget {
  min-width: 220px;
  padding: var(--em-space-3) var(--em-space-5);
  background: none;
  border: 0;
  border-radius: 0;
}
.em-territory-band .em-rank-widget__label,
.em-territory-band .em-rank-widget__meta,
.em-territory-band .em-rank-widget__pos span { color: rgba(255, 255, 255, 0.72); }
.em-territory-band .em-rank-widget__pos { color: var(--em-color-text-inverse); }
.em-territory-band .em-rank-widget__scale { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.18)); }
.em-territory-band .em-rank-widget__marker { background: var(--em-theme-primary); border-color: var(--em-color-text-inverse); }

/* Seletor de ano como secção do painel: rótulo em cima (como o do ranking) e o ano em destaque, em branco. */
.em-territory-band .em-year-select {
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  padding: var(--em-space-3) var(--em-space-5);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.em-territory-band .em-year-select__label {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--em-fs-micro);
  font-weight: var(--em-fw-bold);
  letter-spacing: var(--em-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.em-territory-band .em-year-select .em-dropdown { flex: none; }
.em-territory-band .em-year-select__value {
  height: auto;
  margin-top: 2px;
  padding: 0 26px 0 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 2px center;
  color: var(--em-color-text-inverse);
  font-size: 22px;
  font-weight: var(--em-fw-bold);
  line-height: 1.2;
}
/* A lista do ano abre por baixo do painel inteiro (e não sobre ele), alinhada à esquerda do painel. */
.em-territory-band .em-year-select,
.em-territory-band .em-year-select .em-dropdown { position: static; }
.em-territory-band .em-year-select .em-dropdown__list { left: 0; top: calc(100% + 8px); min-width: 200px; }
/* Só no botão visível: o <select> nativo escondido (em-select.js) tem a mesma classe e, com este opacity, a seta branca
   dele aparecia como dois riscos por baixo do rótulo. */
.em-territory-band .em-year-select:hover .em-year-select__value:not(.em-dropdown__native) { opacity: 0.85; }
.em-territory-band .em-year-select:focus-within { box-shadow: none; }
.em-territory-band .em-year-select__value:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; border-radius: 4px; }

/* Painel compacto (ano, ranking, evolução): menos espaço interior, valores a 18px e o botão mais baixo. */
.em-territory-band .em-territory-header__right { border-radius: var(--em-radius-md); }
.em-territory-band .em-year-select,
.em-territory-band .em-rank-widget,
.em-territory-band .em-header-action { padding: var(--em-space-2) var(--em-space-4); }
.em-territory-band .em-year-select__value { margin-top: 0; padding-right: 22px; font-size: 18px; }
.em-territory-band .em-rank-widget { min-width: 180px; }
.em-territory-band .em-rank-widget__pos { margin-top: 0; font-size: 18px; }
.em-territory-band .em-rank-widget__pos span { font-size: var(--em-fs-caption); }
.em-territory-band .em-rank-widget__scale { height: 4px; margin: 6px 6px 4px; }
.em-territory-band .em-rank-widget__marker { width: 11px; height: 11px; }
.em-territory-band .em-rank-widget__meta { font-size: 12px; }
.em-territory-band .em-header-action { gap: 4px; }
.em-territory-band .em-header-action__value { height: 28px; padding: 0 var(--em-space-3) 0 5px; font-size: 13px; }
.em-territory-band .em-header-action__value .fa-solid { width: 18px; height: 18px; font-size: 8px; }
.em-territory-band .em-header-action__meta { font-size: 12px; }

/* Vistas do território: separadores de vidro na base da banda, alinhados com o título. No telemóvel formam uma fila que
   desliza até às margens da página; em ecrãs maiores quebram em linhas (regra min-width: 901px mais abaixo). */
/* C02 Vistas do território: barra de abas na base da banda, sempre numa só linha. Uma linha fina separa-a do cabeçalho;
   cada aba é só texto, e a ativa fica a branco com um traço na cor de destaque encostado à base da banda. Quando não
   cabem, as abas deslizam (arrastar, roda do rato, setas das pontas, em-subnav.js) com as pontas esbatidas. */
.em-subnav { position: relative; }
.em-subnav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.18) 80%, rgba(255, 255, 255, 0.04));
}
.em-subnav__frame { position: relative; }
.em-territory-band:not(:has(.em-territory-band__inner)) .em-subnav__frame { padding-top: var(--em-space-4); }
.em-subnav__inner {
  display: flex;
  align-items: stretch;
  gap: 2px;
  /* A primeira aba alinha com o nome do território (o texto, não a aba: daí os -9px do padding da aba). */
  padding: 0 max(var(--em-content-padding), calc((100% - var(--em-content-max)) / 2)) 0 calc(max(var(--em-content-padding), calc((100% - var(--em-content-max)) / 2)) - 9px);
  overflow-x: auto;
  scrollbar-width: none;
}
.em-subnav__inner::-webkit-scrollbar { display: none; }
.em-subnav--scrollable .em-subnav__inner { cursor: grab; }
.em-subnav__inner--dragging,
.em-subnav__inner--dragging .em-subnav__item { cursor: grabbing; user-select: none; }
/* Esbate as pontas quando há abas escondidas (classes postas por em-subnav.js). */
.em-subnav--more-start .em-subnav__inner { mask-image: linear-gradient(90deg, transparent 24px, #000 96px); }
.em-subnav--more-end .em-subnav__inner { mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent calc(100% - 24px)); }
.em-subnav--more-start.em-subnav--more-end .em-subnav__inner { mask-image: linear-gradient(90deg, transparent 24px, #000 96px, #000 calc(100% - 96px), transparent calc(100% - 24px)); }

.em-subnav__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--em-color-surface);
  color: var(--em-color-text-strong);
  font-size: 10px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color var(--em-transition);
}
.em-subnav__arrow:hover { color: var(--em-theme-primary); }
.em-subnav__arrow--prev { left: var(--em-space-3); }
.em-subnav__arrow--next { right: var(--em-space-3); }
.em-subnav--more-start .em-subnav__arrow--prev,
.em-subnav--more-end .em-subnav__arrow--next { display: flex; }

.em-subnav__item {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-2);
  height: 46px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--em-fw-semibold);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--em-transition);
}
/* Traço por baixo: aparece ténue ao passar o rato e cheio na aba ativa. */
.em-subnav__item::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--em-theme-accent) 55%, #FFFFFF);
  transform: scaleX(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.em-subnav__item:hover { color: var(--em-color-text-inverse); }
.em-subnav__item:hover::after { transform: scaleX(1); opacity: 0.35; }
.em-subnav__item--active,
.em-subnav__item--active:hover { color: var(--em-color-text-inverse); }
.em-subnav__item--active::after,
.em-subnav__item--active:hover::after { transform: scaleX(1); opacity: 1; }
.em-subnav__item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: -6px; border-radius: var(--em-radius-md); }
/* Os ícones (Backoffice > Páginas do Portal) não aparecem: só o texto, para as abas caberem numa linha. */
.em-subnav__icon { display: none; }

/* =====================================================================
   C03 Cabeçalho do território, C28 cabeçalho de página, títulos de secção
   ===================================================================== */
.em-territory-header,
.em-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--em-space-6);
  padding-bottom: var(--em-space-6);
  margin-bottom: var(--em-space-8);
  border-bottom: var(--em-border-width) solid var(--em-color-border);
}
.em-page-heading { display: block; }
.em-territory-header__eyebrow {
  margin: 0 0 var(--em-space-2);
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-bold);
  letter-spacing: var(--em-ls-eyebrow);
  text-transform: uppercase;
  color: var(--em-theme-primary);
}
.em-territory-header__title,
.em-page-heading__title {
  margin: 0;
  font-family: var(--em-font-display);
  font-size: var(--em-fs-entity);
  font-weight: var(--em-fw-bold);
  line-height: var(--em-lh-tight);
  letter-spacing: -0.025em;
  color: var(--em-color-text-strong);
}
.em-page-heading__title { font-size: var(--em-fs-page-title); margin-bottom: var(--em-space-2); }
.em-territory-header__subtitle,
.em-page-heading__subtitle {
  margin: var(--em-space-2) 0 0;
  font-size: var(--em-fs-body-lg);
  color: var(--em-color-text-muted);
}
.em-page-heading__subtitle { margin-top: 0; }
.em-territory-header__right { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: var(--em-space-4); }

.em-section-title {
  display: flex;
  align-items: center;
  gap: var(--em-space-4);
  margin: 0 0 var(--em-space-4);
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-bold);
  letter-spacing: var(--em-ls-eyebrow);
  text-transform: uppercase;
  color: var(--em-color-text-muted);
}
.em-section-title::after { content: ""; flex: 1; height: 1px; background: var(--em-color-border); }

/* =====================================================================
   Controlos: selects, seletor de ano (C03), barra de filtros (C07), botões (C19)
   ===================================================================== */
.em-field { min-width: 0; }
.em-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-semibold);
  color: var(--em-color-text-muted);
}
.em-select,
.em-year-select__value {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--em-color-text-strong);
  cursor: pointer;
  background-color: var(--em-color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E6A77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
.em-select {
  height: var(--em-control-height);
  min-width: 160px;
  max-width: 100%;
  padding: 0 36px 0 var(--em-space-3);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-md);
  transition: border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-select:hover { border-color: var(--em-color-text-subtle); }
.em-select:focus-visible { outline: 0; border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-select:disabled { cursor: not-allowed; color: var(--em-color-text-muted); background-color: var(--em-color-bg-subtle); }

.em-year-select {
  display: inline-flex;
  align-items: stretch;
  height: var(--em-control-height);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-md);
  background: var(--em-color-surface);
  position: relative;
}
.em-year-select:focus-within { border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-year-select__label {
  display: flex;
  align-items: center;
  padding: 0 var(--em-space-3);
  border-radius: calc(var(--em-radius-md) - 1px) 0 0 calc(var(--em-radius-md) - 1px);
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-semibold);
  color: var(--em-color-text-muted);
  background: var(--em-color-bg-subtle);
  border-right: var(--em-border-width) solid var(--em-color-border);
}
.em-year-select__value { border: 0; padding: 0 36px 0 var(--em-space-3); font-weight: var(--em-fw-semibold); font-variant-numeric: tabular-nums; }
.em-year-select__value:focus-visible { outline: 0; }

/* Dropdown do portal (em-select.js): o botão herda as classes do <select> (mesmo aspeto) e a lista segue o desenho da
   lista de sugestões da pesquisa. O <select> original fica escondido, só para o formulário. */
.em-dropdown { position: relative; display: inline-flex; max-width: 100%; vertical-align: top; }
.em-year-select .em-dropdown { align-self: stretch; flex: 1; }
.em-dropdown > .em-dropdown__button { flex: 1; }
.em-dropdown > .em-dropdown__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.em-dropdown__button {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.em-year-select .em-dropdown__button { height: 100%; /* sem overflow: hidden no contentor (a lista tem de sair dele), os cantos direitos têm de acompanhar o contorno */ border-radius: 0 calc(var(--em-radius-md) - 1px) calc(var(--em-radius-md) - 1px) 0; }
.em-dropdown--open .em-select { border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-dropdown__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  box-shadow: 0 18px 40px -16px rgba(18, 33, 47, 0.35);
  scrollbar-width: thin;
  scrollbar-color: var(--em-color-border-strong) transparent;
}
.em-dropdown__list[hidden] { display: none; }
.em-dropdown__list--right { left: auto; right: 0; }
.em-year-select .em-dropdown__list { top: calc(100% + 7px); }
.em-dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-4);
  padding: 9px var(--em-space-3);
  border-radius: var(--em-radius-md);
  font-size: var(--em-fs-body);
  font-weight: var(--em-fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--em-color-text);
  white-space: nowrap;
  cursor: pointer;
}
.em-dropdown__option--active { background: var(--em-theme-tint); color: var(--em-color-text-strong); }
.em-dropdown__option[aria-selected="true"] { font-weight: var(--em-fw-semibold); color: var(--em-theme-primary); }
.em-dropdown__check { font-size: 12px; color: var(--em-theme-primary); }

/* Barra de filtros (_FilterBar e afins): sem cartão à volta, só os filtros em linha, com o rótulo ao lado de cada select
   e cada select à largura do seu texto (até um limite), para não cortar opções longas. No telemóvel os rótulos voltam
   a ficar por cima e os selects ocupam a largura toda (regra max-width: 900px mais abaixo). */
.em-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--em-space-3) var(--em-space-6);
  margin-bottom: var(--em-space-6);
}
.em-filter-bar .em-field { display: flex; align-items: center; gap: var(--em-space-2); }
.em-filter-bar .em-field__label { margin-bottom: 0; white-space: nowrap; }
/* Com uma lista aberta, a barra sobe acima do conteúdo seguinte (cartões, gráficos, mapas posicionados). */
/* Não na barra fixa (.em-sticky-filtros): o position: relative tirava-lhe o sticky e, a meio da página, a barra voltava
   ao sítio original (fora do ecrã) e só a lista ficava à vista. A barra fixa já está acima do conteúdo (z-index 30). */
.em-filter-bar:not(.em-sticky-filtros):has(.em-dropdown--open) { position: relative; z-index: 5; }
.em-filter-bar .em-select { width: auto; min-width: 120px; max-width: 340px; }
/* _FilterBar: os filtros num grupo próprio (que quebra em linhas) e o Partilhar à direita, centrado com a primeira linha
   de filtros; assim o botão nunca desce sozinho para uma linha nova quando há muitos filtros. */
.em-filter-bar:has(> .em-filter-bar__campos) { flex-wrap: nowrap; align-items: flex-start; column-gap: var(--em-space-4); }
/* 16px entre filtros (24px antes): os cinco filtros dos Salários cabem numa linha com o Partilhar a 1440px. */
.em-filter-bar__campos { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-space-3) var(--em-space-4); }
.em-filter-bar__campos ~ .em-share--barra { margin-top: calc((var(--em-control-height) - 36px) / 2); }

/* Barra de ferramentas (Rankings): separadores à esquerda e filtros à direita na mesma linha. Em ecrãs estreitos os
   filtros passam para baixo dos separadores. */
.em-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-3) var(--em-space-5);
  margin-bottom: var(--em-space-6);
}
.em-toolbar > .em-segmented,
.em-toolbar > .em-filter-bar { margin-bottom: 0; }

/* Barra de filtros fixa ao fazer scroll (em-subnav.js marca a barra e, quando está colada ao topo, is-stuck): o menu de
   vistas sai com a página e os filtros ficam sempre à mão, com fundo translúcido e sombra por cima do conteúdo. */
/* O espaço (margens negativas + padding) é o mesmo nos dois estados, para o conteúdo não saltar ao fixar. */
.em-sticky-filtros {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-left: calc(-1 * var(--em-space-4));
  margin-right: calc(-1 * var(--em-space-4));
  padding: var(--em-space-3) var(--em-space-4);
  border-radius: 0 0 var(--em-radius-lg) var(--em-radius-lg);
  transition: background var(--em-transition), box-shadow var(--em-transition);
}
.em-sticky-filtros.is-stuck {
  background: color-mix(in srgb, var(--em-color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 14px 28px -20px rgba(18, 33, 47, 0.5), 0 0 0 1px var(--em-color-border);
}
.em-sticky-filtros__sentinela { height: 1px; margin-bottom: -1px; }
/* Telemóvel: filtros em 2 colunas e, quando a barra está fixa, só as caixas (sem rótulos), para não tapar meio ecrã. */
@media (max-width: 760px) {
  form.em-filter-bar.em-sticky-filtros:not(:has(> .em-filter-bar__campos)),
  form.em-filter-bar.em-sticky-filtros > .em-filter-bar__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--em-space-2) var(--em-space-3); }
  form.em-filter-bar.em-sticky-filtros .em-field { min-width: 0; }
  .em-sticky-filtros.is-stuck .em-field__label { display: none; }
  .em-sticky-filtros.is-stuck { padding-top: var(--em-space-2); padding-bottom: var(--em-space-2); }
}

.em-btn,
.em-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  height: 44px;
  padding: 0 var(--em-space-6);
  border: var(--em-border-width) solid transparent;
  border-radius: var(--em-radius-md);
  font: inherit;
  font-weight: var(--em-fw-semibold);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--em-transition), border-color var(--em-transition), color var(--em-transition);
}
.em-btn--primary,
.em-button { background: var(--em-theme-primary); color: var(--em-color-text-inverse); }
.em-btn--primary:hover,
.em-button:hover { background: var(--em-theme-primary-dark); }
.em-btn--outline { background: var(--em-color-surface); border-color: var(--em-btn-outline-border); color: var(--em-color-text-strong); }
.em-btn--outline:hover { border-color: var(--em-theme-primary); color: var(--em-theme-primary); }
.em-btn--outline i { color: var(--em-theme-primary); }
.em-link-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--em-theme-link);
  font-weight: var(--em-fw-semibold);
  font-size: var(--em-fs-body);
  text-decoration: none;
}
.em-link-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   C04 Posição no ranking
   ===================================================================== */
.em-rank-widget {
  min-width: 210px;
  padding: var(--em-space-3) var(--em-space-4);
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
}
.em-rank-widget__label,
.em-index-summary__label {
  font-size: var(--em-fs-micro);
  font-weight: var(--em-fw-bold);
  letter-spacing: var(--em-ls-eyebrow);
  text-transform: uppercase;
  color: var(--em-color-text-muted);
}
.em-rank-widget__pos {
  margin-top: 2px;
  font-size: 22px;
  font-weight: var(--em-fw-bold);
  line-height: 1.2;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-rank-widget__pos span { font-size: var(--em-fs-label); font-weight: var(--em-fw-regular); color: var(--em-color-text-muted); }
.em-rank-widget__scale {
  position: relative;
  height: 6px;
  margin: var(--em-space-3) 7px var(--em-space-2);
  border-radius: var(--em-radius-full);
  background: linear-gradient(90deg, var(--em-theme-primary), color-mix(in srgb, var(--em-theme-primary) 10%, #FFFFFF));
}
.em-rank-widget__marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--em-color-surface);
  border: 3px solid var(--em-theme-primary-dark);
  transform: translate(-50%, -50%);
}
.em-rank-widget__meta { font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }

/* =====================================================================
   C05/C06 Índices EDUSTAT (IMEQ + três índices)
   ===================================================================== */
.em-index-panel {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  margin-bottom: var(--em-space-8);
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  overflow: hidden;
}
.em-index-panel:not(:has(.em-index-summary)) { grid-template-columns: 1fr; }
.em-index-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--em-space-6);
  background: var(--em-theme-tint);
  border-right: var(--em-border-width) solid var(--em-color-border);
}
.em-index-summary__label { color: var(--em-theme-primary); line-height: 1.4; }
.em-index-summary__value {
  margin: var(--em-space-1) 0;
  font-size: var(--em-fs-kpi-xl);
  font-weight: var(--em-fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-index-summary__value small { font-size: var(--em-fs-body-lg); font-weight: var(--em-fw-medium); letter-spacing: 0; color: var(--em-color-text-muted); }
.em-index-summary__note { font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }

.em-index-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cada índice numa coluna com separador fino, como nos painéis de indicadores; as barras ficam alinhadas em baixo. */
.em-index-bar { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--em-space-6); }
.em-index-bar + .em-index-bar { border-left: var(--em-border-width) solid var(--em-color-border); }
.em-index-bar__label { margin-bottom: var(--em-space-3); font-size: var(--em-fs-label); font-weight: var(--em-fw-medium); line-height: 1.4; color: var(--em-color-text); }
.em-index-bar__track { display: flex; align-items: center; gap: var(--em-space-3); }
.em-index-bar__chart { flex: 1; height: 8px; border-radius: var(--em-radius-full); background: var(--em-chart-track); overflow: hidden; }
.em-index-bar__chart > span { display: block; height: 100%; border-radius: inherit; background: var(--em-theme-primary); }
/* Relatório: barra do índice na escala verde–amarelo–vermelho (EscalaIndice, em --em-bar-cor). */
.em-index-bar__chart--escala { background: color-mix(in srgb, var(--em-bar-cor) 22%, #FFFFFF); }
.em-index-bar__chart--escala > span { background: var(--em-bar-cor); }
.em-index-bar__value { min-width: 3ch; text-align: right; font-size: 22px; font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }

/* Gauge de índice (partial _Gauge, desenhado por em-charts.js): meio anel de 0 a 100 com o valor ao centro. */
.em-gauge { width: 100%; max-width: 220px; height: 128px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.em-gauge__fallback { font-size: var(--em-fs-kpi-lg); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-gauge__fallback small { font-size: var(--em-fs-body); font-weight: var(--em-fw-medium); color: var(--em-color-text-muted); }
.em-index-bar--gauge { align-items: center; justify-content: space-between; text-align: center; padding-bottom: var(--em-space-4); }
.em-index-bar--gauge .em-index-bar__label { margin-bottom: var(--em-space-1); }

/* =====================================================================
   C09 Card, C10 indicadores, C08 variação
   ===================================================================== */
.em-card {
  min-width: 0;
  padding: var(--em-card-padding);
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
}
.em-card__title {
  margin: 0 0 var(--em-space-4);
  font-size: var(--em-fs-card-title);
  font-weight: var(--em-fw-bold);
  line-height: var(--em-lh-heading);
  color: var(--em-theme-section-title);
}

/* Os indicadores formam um único painel dividido por linhas finas, como uma tabela de síntese, em vez de cartões
   soltos; flex (e não grid) para a última linha ocupar a largura toda sem células vazias. */
.em-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: var(--em-space-8);
  background: var(--em-color-border);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  overflow: hidden;
}
/* Com o painel do ⓘ aberto num cartão, a grelha deixa-o sair (senão fica cortado pelos cantos arredondados). */
.em-kpi-grid:has(.em-info-pop[open]) { overflow: visible; }
.em-kpi-grid > .em-card {
  flex: 1 1 calc(25% - 1px);
  min-width: 200px;
  border: 0;
  border-radius: 0;
  padding: var(--em-space-5) var(--em-space-6) var(--em-space-6);
}
.em-kpi-grid--compact > .em-card { flex-basis: calc(25% - 1px); }
/* Título curto numa linha e, por baixo, o âmbito e o ano (.em-kpi-card__sub); sem subtítulo, o título reserva as duas
   linhas, para os valores ficarem alinhados entre cartões. */
.em-kpi-card__label {
  min-height: 2.7em;
  margin-bottom: var(--em-space-3);
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-semibold);
  line-height: 1.35;
  color: var(--em-color-text-strong);
  overflow-wrap: break-word;
}
.em-kpi-card__label:has(+ .em-kpi-card__sub) { min-height: 0; margin-bottom: 2px; }
.em-kpi-card__sub {
  min-height: 1.35em;
  margin: 0 0 var(--em-space-3);
  font-size: var(--em-fs-caption);
  line-height: 1.35;
  color: var(--em-color-text-muted);
}
.em-kpi-card__value {
  font-size: var(--em-fs-kpi-lg);
  font-weight: var(--em-fw-bold);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-kpi-card__deltas { display: flex; flex-direction: column; gap: 6px; margin-top: var(--em-space-4); }
.em-kpi-card__deltas:empty { display: none; }

.em-delta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--em-space-2); font-weight: var(--em-fw-bold); font-variant-numeric: tabular-nums; }
.em-delta--positive { color: var(--em-color-positive); }
.em-delta--negative { color: var(--em-color-negative); }
.em-delta__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--em-space-2);
  border-radius: var(--em-radius-full);
  font-size: var(--em-fs-caption);
  line-height: 1.5;
  white-space: nowrap;
}
.em-delta--positive .em-delta__badge { background: var(--em-color-positive-bg); }
.em-delta--negative .em-delta__badge { background: var(--em-color-negative-bg); }
.em-delta__arrow { font-size: 10px; }
.em-delta__value { font-size: var(--em-fs-caption); }
.em-delta__caption { font-size: var(--em-fs-caption); font-weight: var(--em-fw-regular); color: var(--em-color-text-muted); }
.em-delta--secondary { padding-top: var(--em-space-2); border-top: 1px solid var(--em-color-divider); margin-top: var(--em-space-3); }

/* C10 variantes: valor destacado com sparkline, contexto */
.em-kpi-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--em-space-4); }
.em-kpi-hero__value {
  font-size: var(--em-fs-kpi-xl);
  font-weight: var(--em-fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-kpi-hero__chart { width: 160px; height: 64px; flex: none; }
.em-kpi-hero__deltas { display: flex; flex-direction: column; gap: 6px; margin-top: var(--em-space-3); }
.em-kpi-context {
  padding: var(--em-space-4) var(--em-space-5);
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-left: 3px solid var(--em-theme-primary);
  border-radius: var(--em-radius-md);
}
.em-kpi-context__label { font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); margin-bottom: 2px; }
.em-kpi-context__value { font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-kpi-context__delta { font-size: var(--em-fs-caption); color: var(--em-color-text-muted); margin-top: 2px; }

/* =====================================================================
   Grelhas de conteúdo
   ===================================================================== */
.em-row { display: grid; gap: var(--em-grid-gap); margin-bottom: var(--em-grid-gap); }
.em-row > * { min-width: 0; }
.em-row--58-42 { grid-template-columns: 58fr 42fr; }
.em-row--1-1 { grid-template-columns: 1fr 1fr; }
.em-row--main-side { grid-template-columns: 1fr 280px; }
.em-row--main-side-wide { grid-template-columns: 1.3fr 1fr; align-items: start; }
.em-row .em-page-heading { padding: 0; margin: 0; border: 0; }

/* C21 Em síntese, C22 governação */
.em-summary-card p { margin: 0; font-size: var(--em-fs-body-lg); line-height: 1.7; color: var(--em-color-text); max-width: 72ch; }
.em-gov__intro { margin: 0 0 var(--em-space-4); font-size: var(--em-fs-body); font-weight: var(--em-fw-semibold); line-height: 1.5; color: var(--em-color-text-strong); }
.em-gov__row {
  display: flex;
  align-items: center;
  gap: var(--em-space-3);
  padding: var(--em-space-3) 0;
  border-top: var(--em-border-width) solid var(--em-color-divider);
  text-decoration: none;
  color: inherit;
}
a.em-gov__row:hover .em-gov__link { color: var(--em-theme-link); text-decoration: underline; text-underline-offset: 3px; }
.em-gov__link { flex: 1; font-size: var(--em-fs-body); font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); text-decoration: none; }
.em-gov__arrow { color: var(--em-color-text-subtle); font-size: 13px; transition: transform var(--em-transition); }
a.em-gov__row:hover .em-gov__arrow { transform: translateX(3px); color: var(--em-theme-link); }
.em-gov-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 28px;
  padding: 0 var(--em-space-2);
  border-radius: var(--em-radius-sm);
  color: #FFFFFF;
  font-weight: var(--em-fw-bold);
  font-size: var(--em-fs-label);
  letter-spacing: 0.04em;
  flex: none;
}

/* =====================================================================
   C13 Gráficos
   ===================================================================== */
.em-chart-card__legend { display: flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-4); font-size: var(--em-fs-caption); color: var(--em-color-text-muted); margin: calc(-1 * var(--em-space-2)) 0 var(--em-space-3); }
.em-chart-card__legend > span { display: inline-flex; align-items: center; }
.em-chart-card__legend-dot { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; }
.em-chart-card__chart { width: 100%; height: 280px; }
.em-chart-card__chart--sm { height: 200px; }

/* Painel de gráficos das áreas temáticas: grelha de 3 colunas em que os cartões ocupam 1, 2 ou 3 colunas e o gráfico
   de cada cartão estica até ao fundo (sem espaço em branco quando o cartão ao lado é mais alto). Os cartões entram com
   um fade-up escalonado (--i); os gráficos animam-se ao entrar no ecrã (em-charts.js). */
.em-dash {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--em-grid-gap);
  margin-bottom: var(--em-grid-gap);
}
.em-dash > .em-card {
  display: flex;
  flex-direction: column;
  animation: em-dash-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: box-shadow var(--em-transition), border-color var(--em-transition);
}
.em-dash > .em-card:hover { border-color: var(--em-color-border-strong); box-shadow: 0 10px 28px -18px rgba(18, 33, 47, 0.35); }
.em-dash__span-2 { grid-column: span 2; }
.em-dash__span-3 { grid-column: 1 / -1; }
.em-dash__tall { grid-row: span 2; }
.em-dash .em-chart-card__chart { flex: 1 1 auto; height: auto; min-height: 260px; }
.em-dash .em-chart-card__chart--sm { min-height: 170px; }
.em-dash .em-card__title { margin-bottom: var(--em-space-2); }
.em-dash__subtitle { margin: calc(-1 * var(--em-space-1)) 0 var(--em-space-3); font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }
@keyframes em-dash-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Cartão do indicador principal: valor e variações em cima, a série (área) a ocupar o resto do cartão. */
.em-kpi-spot__value {
  font-size: var(--em-fs-kpi-xl);
  font-weight: var(--em-fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-kpi-spot__deltas { display: flex; flex-wrap: wrap; gap: 6px var(--em-space-4); margin-top: var(--em-space-3); }
.em-kpi-spot__chart { flex: 1 1 auto; min-height: 96px; margin: var(--em-space-4) calc(-1 * var(--em-space-2)) 0; }
/* Comparação de um valor com a referência em barras (ex.: rácio alunos/docente), num cartão estreito do painel. */
.em-compare-bars { display: flex; flex-direction: column; gap: var(--em-space-4); margin: var(--em-space-2) 0 var(--em-space-4); }
.em-compare-bars__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--em-space-3); margin-bottom: 6px; }
.em-compare-bars__label { font-size: var(--em-fs-label); color: var(--em-color-text-muted); }
.em-compare-bars__value { font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-compare-bars__track { height: 12px; border-radius: var(--em-radius-full); background: var(--em-chart-track); overflow: hidden; }
.em-compare-bars__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--em-chart-series-1) 55%, #FFFFFF), var(--em-chart-series-1));
  transform-origin: left center;
  animation: em-bar-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.em-compare-bars__fill--ref { background: var(--em-chart-series-2); animation-delay: 0.45s; }
.em-dash .em-callout { margin-top: auto; }

/* Visão Geral: série em miniatura no fundo dos cartões de indicadores (alinhada entre cartões da mesma linha). */
.em-kpi-card--spark { display: flex; flex-direction: column; }
.em-kpi-card__spark { height: 46px; margin: var(--em-space-4) calc(-1 * var(--em-space-2)) calc(-1 * var(--em-space-2)); margin-top: auto; padding-top: var(--em-space-4); box-sizing: content-box; }

/* Visão Geral: IMEQ em destaque (anel) e os três índices EDUSTAT em gauge. */
.em-imeq-card { align-items: center; text-align: center; justify-content: center; }
.em-imeq-card .em-card__title { font-size: var(--em-fs-h4); }
.em-imeq-card .em-gauge--ring { max-width: 170px; height: 170px; margin: var(--em-space-2) auto var(--em-space-3); }
.em-imeq-card__rank { font-size: var(--em-fs-body); color: var(--em-color-text-muted); }
.em-imeq-card__rank strong { font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); margin-right: 4px; }
.em-imeq-card__note { margin-top: var(--em-space-2); font-size: var(--em-fs-caption); color: var(--em-color-text-subtle); }
.em-index-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--em-space-4); flex: 1 1 auto; align-items: center; }
.em-index-gauges__item { text-align: center; min-width: 0; }
.em-index-gauges__label { margin-top: var(--em-space-1); font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text); line-height: 1.35; }
/* ⓘ dos índices: o painel do último gauge abre para a esquerda (não sai do ecrã). */
.em-index-gauges__item:last-child .em-info-pop__panel { left: auto; right: -12px; }
.em-dash .em-index-scale { margin: var(--em-space-4) 0 0; justify-content: center; }

/* Legenda do mapa do IMEQ com a contagem de municípios por classe (barra empilhada que cresce ao entrar). */
.em-imeq-legend { margin-top: auto; padding-top: var(--em-space-4); border-top: 1px solid var(--em-color-divider); }
.em-imeq-legend__title { margin-bottom: var(--em-space-2); font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text); }
.em-imeq-legend__bar {
  display: flex;
  gap: 3px;
  height: 12px;
  border-radius: var(--em-radius-full);
  overflow: hidden;
  transform-origin: left center;
  animation: em-bar-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.em-imeq-legend__items { display: flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-4); margin: var(--em-space-3) 0 0; padding: 0; list-style: none; font-size: var(--em-fs-label); color: var(--em-color-text); }
.em-imeq-legend__items li { display: inline-flex; align-items: center; gap: 6px; }
.em-imeq-legend__items strong { color: var(--em-color-text-strong); }

/* Mapa do IMEQ dentro do painel: estica até à altura do cartão ao lado. */
.em-dash .em-mapa-imeq { flex: 1 1 auto; min-height: 380px; }
.em-dash .em-map-panel__map { flex: 1 1 auto; border: 0; }

/* Lista curta de municípios (melhores / piores) com a pill da classe do IMEQ. */
.em-rank-list { margin: 0; padding: 0; list-style: none; }
.em-rank-list li { display: flex; align-items: center; gap: var(--em-space-3); padding: 7px 0; border-bottom: 1px solid var(--em-color-divider); font-size: var(--em-fs-body); }
.em-rank-list li:last-child { border-bottom: 0; }
.em-rank-list__pos { width: 2.6em; flex: none; font-variant-numeric: tabular-nums; color: var(--em-color-text-subtle); font-size: var(--em-fs-label); }
.em-rank-list a { flex: 1; min-width: 0; color: var(--em-color-text-strong); font-weight: var(--em-fw-semibold); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-rank-list a:hover { color: var(--em-theme-link); text-decoration: underline; }
.em-rank-list__group { margin: var(--em-space-3) 0 var(--em-space-1); font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--em-color-text-muted); }
.em-rank-list__group:first-child { margin-top: 0; }

/* Mapa Educativo: mapa das escolas (Leaflet) a encher o cartão, legenda que liga/desliga públicas e privadas. */
/* Cabeçalho das tabelas de escolas (Alunos, Docentes, Mapa Educativo): título à esquerda e pesquisa à direita
   (_PesquisaTabela, em-table-search.js). */
.em-table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--em-space-3) var(--em-space-6); margin-bottom: var(--em-space-4); }
.em-table-head .em-card__title { margin-bottom: 0; }
.em-table-head .em-dash__subtitle { margin-bottom: 0; }
.em-table-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 300px;
  min-width: 200px;
}
.em-table-search > i { position: absolute; left: var(--em-space-3); font-size: 13px; color: var(--em-color-text-subtle); pointer-events: none; }
.em-table-search input {
  width: 100%;
  height: var(--em-control-height);
  padding: 0 var(--em-space-3) 0 34px;
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-md);
  background: var(--em-color-surface);
  color: var(--em-color-text-strong);
  font: inherit;
  font-size: var(--em-fs-label);
  transition: border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-table-search input:hover { border-color: var(--em-color-text-subtle); }
.em-table-search input:focus-visible { outline: 0; border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-table-search:focus-within > i { color: var(--em-theme-primary); }
.em-table-search__empty { margin: var(--em-space-4) 0 0; text-align: center; font-size: var(--em-fs-label); color: var(--em-color-text-muted); }
.em-table-search__empty[hidden] { display: none; }
@media (max-width: 560px) { .em-table-search { flex-basis: 100%; } }

.em-escolas-map__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--em-space-3); }
.em-escolas-map__toggles { display: flex; flex-wrap: wrap; gap: var(--em-space-2); }
.em-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  font: inherit;
  font-size: var(--em-fs-label);
  color: var(--em-color-text-muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--em-transition), border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-map-toggle strong { color: var(--em-color-text-strong); }
.em-map-toggle.is-on { opacity: 1; border-color: var(--em-color-border-strong); color: var(--em-color-text); }
.em-map-toggle:hover { box-shadow: 0 4px 12px -6px rgba(18, 33, 47, 0.3); }
.em-map-toggle:focus-visible { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }
.em-escolas-map {
  flex: 1 1 auto;
  min-height: 520px;
  margin-top: var(--em-space-3);
  border-radius: var(--em-radius-md);
  overflow: hidden;
  isolation: isolate;
  background: var(--em-color-bg-tint);
}
/* Fundo do OpenStreetMap em tons claros e dessaturados, para os pontos das escolas sobressaírem. */
.em-escolas-map .leaflet-tile-pane { filter: grayscale(0.9) brightness(1.06) contrast(0.88); }
/* Pontos das escolas a crescer ao abrir o mapa (CSS e não temporizadores JS, que o browser pausa em separadores
   escondidos); o atraso escalonado é posto por ponto no MapaEducativo.cshtml. */
.em-escolas-map path.leaflet-interactive {
  transform-box: fill-box;
  transform-origin: center;
  animation: em-ponto-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes em-ponto-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Resumo do Mapa Educativo (MapaEducativo): quatro cartões com ícone na cor do nível, valor que conta ao abrir e uma
   linha de contexto (ou a barra pública/privada). */
.em-mapa-resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--em-space-4);
  margin-bottom: var(--em-space-6);
}
.em-mapa-resumo__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--em-space-4);
  min-width: 0;
  padding: var(--em-space-5);
  overflow: hidden;
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  animation: em-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Filete na cor do nível à esquerda. */
.em-mapa-resumo__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--em-theme-primary), var(--em-theme-accent));
}
.em-mapa-resumo__item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--em-theme-primary) 25%, var(--em-color-border));
  box-shadow: 0 18px 32px -26px rgba(18, 33, 47, 0.45);
}
.em-mapa-resumo__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--em-theme-primary) 10%, #FFFFFF);
  color: var(--em-theme-primary);
  font-size: 18px;
}
.em-mapa-resumo__body { min-width: 0; flex: 1; }
.em-mapa-resumo__label { margin: 0; font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); }
.em-mapa-resumo__value {
  margin: 2px 0 0;
  font-size: var(--em-fs-kpi-md);
  font-weight: var(--em-fw-bold);
  line-height: 1.15;
  color: var(--em-color-text-strong);
  font-variant-numeric: tabular-nums;
}
.em-mapa-resumo__context { margin: var(--em-space-1) 0 0; font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }
.em-mapa-resumo__barra {
  height: 6px;
  margin-top: var(--em-space-2);
  overflow: hidden;
  border-radius: var(--em-radius-full);
  background: var(--em-map-private, #E99B35);
}
.em-mapa-resumo__barra > span {
  display: block;
  height: 100%;
  background: var(--em-map-public, #1D4ED8);
  transform-origin: left center;
  animation: em-bar-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@media (max-width: 1180px) { .em-mapa-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .em-mapa-resumo { gap: var(--em-space-3); }
  .em-mapa-resumo__item { padding: var(--em-space-4); gap: var(--em-space-3); }
  .em-mapa-resumo__icon { width: 36px; height: 36px; font-size: 15px; }
}

/* Ficha da escola selecionada no mapa ou na tabela. */
.em-escola-ficha.is-updated { animation: em-ficha-in 0.35s ease-out; }
@keyframes em-ficha-in { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Ao mudar de escola: os quadrados dos números dão um pulso na cor do nível (os números contam, MapaEducativo) e as
   ofertas entram em cascata. */
.em-escola-ficha.is-updated .em-escola-ficha__stats > div { animation: em-ficha-pulso 0.7s ease-out; }
.em-escola-ficha.is-updated .em-escola-ficha__stats > div + div { animation-delay: 0.08s; }
.em-escola-ficha.is-updated .em-escola-ficha__ofertas li { animation: em-ficha-item 0.4s ease-out backwards; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
@keyframes em-ficha-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--em-theme-primary) 35%, transparent); background: color-mix(in srgb, var(--em-theme-primary) 10%, var(--em-color-bg-subtle)); }
  100% { box-shadow: 0 0 0 10px transparent; background: var(--em-color-bg-subtle); }
}
@keyframes em-ficha-item { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .em-escola-ficha.is-updated,
  .em-escola-ficha.is-updated .em-escola-ficha__stats > div,
  .em-escola-ficha.is-updated .em-escola-ficha__ofertas li { animation: none; }
}
.em-escola-ficha__eyebrow { margin: 0 0 var(--em-space-1); font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--em-color-text-muted); }
.em-escola-ficha__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--em-space-4); }
.em-escola-ficha__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--em-radius-full);
  background: color-mix(in srgb, var(--chip-cor, var(--em-theme-primary)) 14%, #FFFFFF);
  color: var(--em-color-text-strong);
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-semibold);
}
.em-escola-ficha__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-cor, var(--em-theme-primary)); }
.em-escola-ficha__chip--muted { background: var(--em-color-bg-subtle); color: var(--em-color-text); }
.em-escola-ficha__chip--muted::before { display: none; }
.em-escola-ficha__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--em-space-3); margin-bottom: var(--em-space-4); }
.em-escola-ficha__stats > div { padding: var(--em-space-3); border-radius: var(--em-radius-md); background: var(--em-color-bg-subtle); }
.em-escola-ficha__num { display: block; font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-escola-ficha__lbl { font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }
.em-escola-ficha__attrs { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--em-space-3); margin: 0 0 var(--em-space-4); font-size: var(--em-fs-label); }
.em-escola-ficha__attrs dt { color: var(--em-color-text-muted); }
.em-escola-ficha__attrs dd { margin: 0; color: var(--em-color-text-strong); }
.em-escola-ficha__ofertas-title { font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text); margin-bottom: var(--em-space-1); }
.em-escola-ficha__ofertas { margin: 0; padding-left: 18px; font-size: var(--em-fs-label); color: var(--em-color-text); line-height: 1.6; }

/* Tabela longa com scroll próprio e linhas clicáveis (escolas do Mapa Educativo). */
/* Altura até ao fim do ecrã (o cartão com o título e a pesquisa ocupa ~240px), com um mínimo para ecrãs baixos. */
.em-table-wrap--scroll { max-height: max(440px, calc(100vh - 240px)); overflow-y: auto; }
.em-table-wrap--scroll thead th { position: sticky; top: 0; z-index: 1; }
.em-table--clickable tbody tr { cursor: pointer; transition: background var(--em-transition); }
/* Alertas e tendências: linha com o título e o ⓘ por cima das listas e dos contadores. */
.em-alert-info-row { display: flex; align-items: center; gap: var(--em-space-1); margin-bottom: var(--em-space-2); font-weight: var(--em-fw-semibold); }
/* Linhas que agregam entidades sem nome: não se vêem no mapa, por isso não se clicam. */
.em-table--clickable tbody tr.em-table__row--estatica { cursor: default; }
.em-table--clickable tbody tr.em-table__row--estatica:hover { background: transparent; }
.em-table--clickable tbody tr:hover,
.em-table--clickable tbody tr:focus-visible { background: color-mix(in srgb, var(--em-theme-primary) 6%, #FFFFFF); outline: none; }

/* Comparação: uma cor por território selecionado (chips, barras, cabeçalho da tabela). No body, onde o tema do nível
   (TerritoryTheme) define as cores dos gráficos. */
body {
  --em-cmp-1: var(--em-chart-series-1);
  --em-cmp-2: var(--em-chart-scatter-highlight);
  --em-cmp-3: var(--em-map-vocational);
  --em-cmp-4: var(--em-map-arts);
  --em-cmp-5: var(--em-chart-series-2);
}
.em-compare-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--em-space-4); margin-bottom: var(--em-space-5); }
.em-compare-picker__chips { flex: 1 1 360px; min-width: 0; }
.em-compare-picker__chips .em-field__label { display: inline-block; margin-bottom: 0; }
.em-compare-picker__chips .em-info-pop { margin-left: 4px; vertical-align: middle; }
.em-compare-picker__chips .em-chip-box { margin-top: 6px; }
.em-compare-chip { border-color: color-mix(in srgb, var(--cmp) 40%, #FFFFFF); background: color-mix(in srgb, var(--cmp) 8%, #FFFFFF); }
.em-compare-chip__dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--cmp); vertical-align: middle; }
.em-compare-list { display: flex; flex-direction: column; gap: var(--em-space-3); margin: var(--em-space-2) 0 0; padding: 0; list-style: none; flex: 1 1 auto; justify-content: space-around; }
.em-compare-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--em-space-3); margin-bottom: 5px; }
.em-compare-list__name { display: inline-flex; align-items: center; min-width: 0; font-size: var(--em-fs-label); color: var(--em-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-compare-list__value { flex: none; font-size: var(--em-fs-body); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-compare-list__best { margin-right: 4px; color: #E0A100; font-size: 12px; }
.em-compare-list__item.is-best .em-compare-list__name { font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); }
.em-compare-list__track { height: 10px; border-radius: var(--em-radius-full); background: var(--em-chart-track); overflow: hidden; }
.em-compare-list__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cmp) 55%, #FFFFFF), var(--cmp));
  transform-origin: left center;
  animation: em-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--d, 0ms));
}
.em-compare-table__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--em-space-3); margin-bottom: var(--em-space-3); }
.em-compare-table__head .em-compare-chip__dot { margin-right: 6px; }
/* Melhor valor de cada indicador na tabela da Comparação (estrela e valor em destaque) e a nota das taxas em que
   valores mais baixos são melhores. */
.em-compare-table__best { margin-right: 4px; color: #E0A100; font-size: 12px; }
.em-compare-table__cell--best { font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-compare-table__nota { display: block; font-size: var(--em-fs-caption); font-weight: var(--em-fw-regular, 400); color: var(--em-color-text-muted); }

/* Rankings: cartões de resumo (posição do território, 1.º lugar) e barras da tabela a crescer ao abrir. */
.em-rank-spot { justify-content: center; }
.em-rank-spot__pos { font-size: var(--em-fs-kpi-xl); font-weight: var(--em-fw-bold); line-height: 1.05; color: var(--em-theme-primary); font-variant-numeric: tabular-nums; }
.em-rank-spot__pos span { font-size: var(--em-fs-body); font-weight: var(--em-fw-medium); color: var(--em-color-text-muted); }
.em-rank-spot__scale {
  position: relative;
  height: 8px;
  margin: var(--em-space-4) 0 6px;
  border-radius: var(--em-radius-full);
  background: linear-gradient(90deg, var(--em-theme-primary), color-mix(in srgb, var(--em-theme-primary) 12%, #FFFFFF));
}
.em-rank-spot__marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: var(--em-theme-primary);
  box-shadow: 0 2px 6px rgba(18, 33, 47, 0.3);
  transform: translate(-50%, -50%);
  animation: em-marker-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes em-marker-in { from { left: 0; opacity: 0; } }
.em-rank-spot__scale-labels { display: flex; justify-content: space-between; font-size: var(--em-fs-caption); color: var(--em-color-text-subtle); }
.em-rank-spot__value { margin-top: var(--em-space-3); font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-rank-spot__value span { margin-left: 4px; font-size: var(--em-fs-body); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); }
/* Indicador do ranking (etiqueta na cor do nível), por baixo do território / "1.º lugar". */
.em-rank-spot__tema {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: var(--em-space-1) 0 var(--em-space-3);
  padding: 4px 10px;
  border-radius: var(--em-radius-full);
  background: color-mix(in srgb, var(--em-theme-primary) 10%, #FFFFFF);
  color: var(--em-theme-primary);
  font-size: var(--em-fs-caption);
  font-weight: var(--em-fw-semibold);
  line-height: 1.3;
}
/* Pódio (os três primeiros) no cartão ao lado da posição: o 1.º maior, com troféu; ouro, prata e bronze. */
.em-rank-podio { display: flex; flex-direction: column; gap: var(--em-space-2); margin: 0; padding: 0; list-style: none; }
.em-rank-podio__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--em-space-3);
  padding: var(--em-space-2) var(--em-space-3);
  border-radius: var(--em-radius-md);
  background: var(--em-color-bg-subtle);
  --medalha: #B0710F;
}
.em-rank-podio__item--1 { padding-block: var(--em-space-3); background: #FFF6DC; --medalha: #E0A100; }
.em-rank-podio__item--2 { --medalha: #8D97A3; }
.em-rank-podio__item--atual { box-shadow: inset 3px 0 0 var(--em-theme-primary); }
.em-rank-podio__medalha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--medalha) 18%, #FFFFFF);
  color: var(--medalha);
  font-size: 13px;
  font-weight: var(--em-fw-bold);
}
.em-rank-podio__item--1 .em-rank-podio__medalha { width: 32px; height: 32px; background: var(--medalha); color: #FFFFFF; font-size: 15px; }
.em-rank-podio__nome { overflow: hidden; font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); text-overflow: ellipsis; white-space: nowrap; }
.em-rank-podio__item--1 .em-rank-podio__nome { font-size: var(--em-fs-body-lg); font-weight: var(--em-fw-bold); }
.em-rank-podio__valor { font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-rank-podio__item--1 .em-rank-podio__valor { font-size: var(--em-fs-h3); }
.em-rank-podio__valor span { margin-left: 2px; font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); }
.em-rank-table { animation: em-dash-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
/* Barras curtas, centradas por baixo do cabeçalho da coluna: o espaço livre separa o valor de um indicador da barra
   do seguinte. */
.em-rank-table .em-bar-cell--escala { min-width: 0; justify-content: center; gap: var(--em-space-3); }
.em-rank-table .em-bar-cell--escala .em-bar-cell__bar { flex: 0 1 96px; }
.em-rank-table .em-bar-cell__bar > span { transform-origin: left center; animation: em-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }

/* Relatórios: secções em azulejos (checkbox escondida, o azulejo inteiro liga/desliga), pré-visualização e botão. */
.em-report-pick__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--em-space-3); margin-bottom: var(--em-space-3); }
.em-report-pick__actions { display: flex; gap: var(--em-space-4); }
.em-link-button { padding: 0; border: 0; background: none; font: inherit; font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-theme-link, var(--em-theme-primary)); cursor: pointer; }
.em-link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Secções em linhas compactas (3 colunas): ícone pequeno, nome e uma caixa de visto à direita; a linha inteira liga/desliga
   (checkbox escondida). Os cartões não esticam até à altura do vizinho (antes os azulejos cresciam para encher o espaço). */
/* Os dois cartões com a mesma altura, lado a lado (o conteúdo fica em cima). */
#relatorio-form > .em-card { align-self: stretch; }
.em-report-gen__fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--em-space-3); margin-bottom: var(--em-space-3); }
.em-report-gen__fields .em-report-gen__field { margin-bottom: 0; min-width: 0; }
.em-report-gen__fields .em-select { min-width: 0; }
.em-report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--em-space-2); }
.em-report-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--em-space-3);
  min-height: 48px;
  padding: var(--em-space-2) var(--em-space-3);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-md);
  background: var(--em-color-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--em-transition), background var(--em-transition);
  animation: em-dash-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.1s + var(--d, 0ms) / 2);
}
.em-report-tile:hover { border-color: var(--em-color-border-strong); background: var(--em-color-bg-subtle); }
.em-report-tile__input { position: absolute; opacity: 0; pointer-events: none; }
.em-report-tile__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--em-radius-sm);
  background: var(--em-color-bg-subtle);
  color: var(--em-color-text-muted);
  font-size: 13px;
  transition: background var(--em-transition), color var(--em-transition);
}
.em-report-tile__title { flex: 1; min-width: 0; font-size: var(--em-fs-label); font-weight: var(--em-fw-semibold); color: var(--em-color-text); line-height: 1.3; }
.em-report-tile__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--em-color-border-strong);
  border-radius: 5px;
  color: transparent;
  font-size: 10px;
  transition: background var(--em-transition), border-color var(--em-transition), color var(--em-transition);
}
.em-report-tile:has(.em-report-tile__input:checked) { border-color: color-mix(in srgb, var(--em-theme-primary) 45%, var(--em-color-border)); background: color-mix(in srgb, var(--em-theme-primary) 4%, #FFFFFF); }
.em-report-tile:has(.em-report-tile__input:checked) .em-report-tile__icon { background: color-mix(in srgb, var(--em-theme-primary) 12%, #FFFFFF); color: var(--em-theme-primary); }
.em-report-tile:has(.em-report-tile__input:checked) .em-report-tile__title { color: var(--em-color-text-strong); }
.em-report-tile:has(.em-report-tile__input:checked) .em-report-tile__check { background: var(--em-theme-primary); border-color: var(--em-theme-primary); color: #FFFFFF; }
.em-report-tile:has(.em-report-tile__input:focus-visible) { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }

.em-report-gen .em-card__title { margin-bottom: var(--em-space-4); }
.em-report-gen__field { display: block; margin-bottom: var(--em-space-4); }
.em-report-gen__field .em-field__label { display: block; margin-bottom: 6px; }
.em-report-gen__field .em-select { width: 100%; }
.em-report-gen__field .em-dropdown { display: flex; width: 100%; }
/* Resumo do que vai no PDF, numa linha por cima do botão. */
.em-report-summary {
  display: flex;
  align-items: center;
  gap: var(--em-space-2);
  margin: 0 0 var(--em-space-3);
  padding: 10px var(--em-space-3);
  border-radius: var(--em-radius-md);
  background: var(--em-color-bg-subtle);
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-semibold);
  color: var(--em-color-text);
}
.em-report-summary i { color: var(--em-theme-primary); }
/* Botão do tamanho normal (não a toda a largura do cartão). */
.em-report-gen__submit { align-self: flex-start; height: 38px; padding: 0 var(--em-space-4); gap: var(--em-space-2); font-size: var(--em-fs-label); }
.em-report-gen__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.em-report-gen__submit.is-loading i { animation: em-pulse 0.9s ease-in-out infinite; }
@keyframes em-pulse { 50% { opacity: 0.35; transform: translateY(-2px); } }
.em-report-gen__note { margin: var(--em-space-3) 0 0; font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }

/* Alertas e tendências: resumo por severidade (filtra a lista), itens com faixa da severidade, temas em barras. */
.em-alert-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--em-grid-gap); margin-bottom: var(--em-grid-gap); }
.em-alert-stat {
  --sev: var(--em-color-info);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--em-space-4);
  align-items: center;
  padding: var(--em-space-4) var(--em-space-5);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-lg);
  background: var(--em-color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--em-transition), box-shadow var(--em-transition), transform var(--em-transition);
  animation: em-dash-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.em-alert-stat--danger { --sev: var(--em-color-danger); }
.em-alert-stat--warning { --sev: var(--em-color-warning); }
.em-alert-stat--success { --sev: var(--em-color-success, var(--em-color-positive)); }
.em-alert-stat:hover:not(:disabled) { border-color: var(--sev); box-shadow: 0 10px 24px -18px rgba(18, 33, 47, 0.45); transform: translateY(-1px); }
.em-alert-stat.is-active { border-color: var(--sev); box-shadow: inset 0 0 0 1px var(--sev); background: color-mix(in srgb, var(--sev) 6%, #FFFFFF); }
.em-alert-stat:disabled { cursor: default; opacity: 0.55; }
.em-alert-stat:focus-visible { outline: 2px solid var(--sev); outline-offset: 2px; }
.em-alert-stat__icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sev) 14%, #FFFFFF);
  color: var(--sev);
  font-size: 18px;
}
.em-alert-stat__num { font-size: var(--em-fs-kpi-lg); font-weight: var(--em-fw-bold); line-height: 1.05; color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-alert-stat__label { font-size: var(--em-fs-label); color: var(--em-color-text-muted); }

.em-alert-tabs__count { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 6px; border-radius: var(--em-radius-full); background: rgba(18, 33, 47, 0.08); font-size: var(--em-fs-caption); text-align: center; }
.em-alert-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-space-3); margin: var(--em-space-2) 0; font-size: var(--em-fs-label); color: var(--em-color-text); }
.em-alert-filter[hidden] { display: none; }
.em-alert-tabs .em-alert-item {
  position: relative;
  margin-top: var(--em-space-3);
  padding: var(--em-space-4) var(--em-space-4) var(--em-space-4) var(--em-space-5);
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-md);
  overflow: hidden;
  animation: em-dash-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.15s + var(--d, 0ms));
  transition: box-shadow var(--em-transition), border-color var(--em-transition);
}
.em-alert-tabs .em-alert-item:last-child { border-bottom: var(--em-border-width) solid var(--em-color-border); }
.em-alert-tabs .em-alert-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--em-color-info); }
.em-alert-tabs .em-alert-item--danger::before { background: var(--em-color-danger); }
.em-alert-tabs .em-alert-item--warning::before { background: var(--em-color-warning); }
.em-alert-tabs .em-alert-item--success::before { background: var(--em-color-success, var(--em-color-positive)); }
.em-alert-tabs .em-alert-item:hover { border-color: var(--em-color-border-strong); box-shadow: 0 10px 24px -18px rgba(18, 33, 47, 0.4); }
.em-alert-tabs .em-alert-item[hidden] { display: none; }
.em-alert-tabs [data-sem-resultados][hidden] { display: none; }

.em-alert-themes { display: flex; flex-direction: column; gap: var(--em-space-2); margin: var(--em-space-2) 0 0; padding: 0; list-style: none; }
.em-alert-theme {
  display: flex;
  align-items: center;
  gap: var(--em-space-3);
  width: 100%;
  padding: var(--em-space-2) var(--em-space-3);
  border: var(--em-border-width) solid transparent;
  border-radius: var(--em-radius-md);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--em-transition), border-color var(--em-transition);
}
.em-alert-theme:hover { background: var(--em-color-bg-subtle); }
.em-alert-theme.is-active { border-color: var(--em-theme-primary); background: color-mix(in srgb, var(--em-theme-primary) 6%, #FFFFFF); }
.em-alert-theme:focus-visible { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }
.em-alert-theme__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--em-radius-md); background: color-mix(in srgb, var(--em-theme-primary) 12%, #FFFFFF); color: var(--em-theme-primary); }
.em-alert-theme__body { flex: 1; min-width: 0; }
.em-alert-theme__head { display: flex; justify-content: space-between; gap: var(--em-space-2); margin-bottom: 5px; font-size: var(--em-fs-label); color: var(--em-color-text); }
.em-alert-theme__head strong { color: var(--em-color-text-strong); }
.em-alert-theme__track { display: block; height: 8px; border-radius: var(--em-radius-full); background: var(--em-chart-track); overflow: hidden; }
.em-alert-theme__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--em-theme-primary) 55%, #FFFFFF), var(--em-theme-primary));
  transform-origin: left center;
  animation: em-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--d, 0ms));
}

/* Várias comparações agrupadas (ex.: conclusão por tipo de curso), separadas por linhas finas. */
.em-compare-groups { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-around; }
.em-compare-groups__item + .em-compare-groups__item { padding-top: var(--em-space-4); border-top: 1px solid var(--em-color-divider); }
.em-compare-groups__name { margin-top: var(--em-space-2); font-size: var(--em-fs-body); font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); }
.em-compare-groups .em-compare-bars { gap: var(--em-space-3); }

/* Cartão de leitura em texto (síntese), com o tom do tema do nível. */
.em-dash__note {
  justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--em-chart-series-1) 7%, #FFFFFF), var(--em-color-surface) 70%);
}
.em-dash__note p { margin: 0; font-size: var(--em-fs-body-lg); line-height: 1.65; color: var(--em-color-text); }
.em-dash__note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--em-space-4);
  border-radius: var(--em-radius-full);
  background: color-mix(in srgb, var(--em-chart-series-1) 14%, #FFFFFF);
  color: var(--em-chart-series-1);
  font-size: 17px;
}
@keyframes em-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.em-kpi-spot__periodo { display: flex; justify-content: space-between; font-size: var(--em-fs-caption); color: var(--em-color-text-subtle); }

/* =====================================================================
   C17 Tabs segmentadas, C18 chips, C20 checkboxes
   ===================================================================== */
.em-segmented {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  margin-bottom: var(--em-space-6);
  background: var(--em-color-bg-muted);
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.em-segmented::-webkit-scrollbar { display: none; }
.em-segmented__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--em-space-4);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--em-color-text-muted);
  font: inherit;
  font-weight: var(--em-fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--em-transition), color var(--em-transition);
}
.em-segmented__item:hover { color: var(--em-color-text-strong); }
.em-segmented__item--active,
.em-segmented__item--active:hover { background: var(--em-color-surface); color: var(--em-theme-primary); box-shadow: var(--em-shadow-pop); }

.em-chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-space-2);
  min-height: var(--em-control-height);
  padding: 5px;
  background: var(--em-color-surface);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-md);
}
.em-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-2);
  height: 28px;
  padding: 0 6px 0 var(--em-space-3);
  background: var(--em-theme-tint);
  border-radius: var(--em-radius-full);
  color: var(--em-theme-primary);
  font-weight: var(--em-fw-semibold);
  font-size: var(--em-fs-label);
}
.em-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-weight: var(--em-fw-bold);
  text-decoration: none;
  cursor: pointer;
}
.em-chip__remove:hover { background: var(--em-theme-primary); color: var(--em-color-text-inverse); }

.em-checklist { display: flex; flex-direction: column; gap: var(--em-space-1); margin: var(--em-space-3) 0 var(--em-space-6); }
.em-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--em-space-3);
  padding: var(--em-space-2) var(--em-space-3);
  border-radius: var(--em-radius-md);
  font-size: var(--em-fs-body);
  color: var(--em-color-text);
  cursor: pointer;
}
.em-checklist__item:hover { background: var(--em-color-bg-subtle); }
.em-checklist__box { width: 18px; height: 18px; margin: 0; accent-color: var(--em-theme-checkbox); flex: none; cursor: pointer; }

/* =====================================================================
   C21 Callouts, C29 rácio
   ===================================================================== */
.em-callout {
  display: flex;
  gap: var(--em-space-3);
  align-items: flex-start;
  padding: var(--em-space-3) var(--em-space-4);
  border-radius: var(--em-radius-md);
  font-size: var(--em-fs-body);
  color: var(--em-color-text);
}
.em-callout--info { background: var(--em-color-info-bg); }
.em-callout__icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--em-color-info);
  color: var(--em-color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--em-fw-bold);
  flex: none;
}
.em-callout--positive,
.em-callout--warning { flex-direction: column; gap: 2px; }
.em-callout--positive { background: var(--em-color-positive-bg); }
.em-callout--warning { background: var(--em-color-warning-bg); }
.em-callout__value { font-size: var(--em-fs-kpi-md); font-weight: var(--em-fw-bold); font-variant-numeric: tabular-nums; }
.em-callout--positive .em-callout__value { color: var(--em-color-positive); }
.em-callout--warning .em-callout__value { color: var(--em-color-warning); }
.em-callout__desc { font-size: var(--em-fs-body); color: var(--em-color-text); }
.em-callout--note { background: var(--em-color-bg-subtle); font-size: var(--em-fs-label); color: var(--em-color-text-muted); }

.em-ratio-compare { display: flex; gap: var(--em-space-10); margin-bottom: var(--em-space-4); }
.em-ratio-compare__value { font-size: var(--em-fs-kpi-lg); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.em-ratio-compare__value--muted { color: var(--em-color-text-muted); }
.em-ratio-compare__label { font-size: var(--em-fs-label); color: var(--em-color-text-muted); margin-top: 4px; }

/* =====================================================================
   C14 Tabela, C15 pills de valor, C16 paginação
   ===================================================================== */
.em-table-wrap { border: var(--em-border-width) solid var(--em-color-border); border-radius: 10px; overflow-x: auto; }
.em-table-wrap .em-table { min-width: 480px; }
.em-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.em-table th {
  padding: 10px 14px;
  background: var(--em-color-bg-subtle);
  border-bottom: var(--em-border-width) solid var(--em-color-border);
  text-align: center;
  font-size: var(--em-fs-micro);
  font-weight: var(--em-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--em-color-text-muted);
  white-space: nowrap;
}
.em-table td {
  padding: 11px 14px;
  border-top: var(--em-border-width) solid var(--em-color-divider);
  text-align: center;
  font-size: var(--em-fs-body);
  color: var(--em-color-text);
}
.em-table th:first-child,
.em-table td:first-child { text-align: left; }
.em-table tbody tr:first-child td { border-top: 0; }
.em-table tbody tr { transition: background var(--em-transition); }
.em-table tbody tr:hover td { background: var(--em-color-bg-tint); }
.em-table tr.em-table__row--highlight td { background: var(--em-color-highlight-row); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-table tr.em-table__row--highlight td:first-child { box-shadow: inset 3px 0 0 var(--em-theme-primary); }
.em-table--compact th, .em-table--compact td { padding: 8px 12px; }
.em-table--compact td { font-size: var(--em-fs-label); }
.em-table .num { text-align: center; }
.em-table .em-table__text { text-align: left; }
.em-table .em-table__rank { width: 64px; text-align: left; color: var(--em-color-text-muted); font-weight: var(--em-fw-semibold); }
.em-table tr.em-table__row--highlight .em-table__rank { color: var(--em-theme-primary); }

/* Barra horizontal dentro de uma célula (rankings): valor exato à direita da barra. */
.em-bar-cell { display: flex; align-items: center; gap: var(--em-space-3); min-width: 220px; }
.em-bar-cell__bar { flex: 1; max-width: 360px; height: 8px; border-radius: var(--em-radius-full); background: var(--em-chart-track); overflow: hidden; }
.em-bar-cell__bar > span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--em-theme-primary) 55%, #FFFFFF); }
.em-table__row--highlight .em-bar-cell__bar > span { background: var(--em-theme-primary); }
.em-bar-cell__value { min-width: 5ch; font-variant-numeric: tabular-nums; }
/* Barras dos Rankings: cor da escala verde–amarelo–vermelho da coluna (EscalaIndice, em --em-bar-cor) sobre um trilho
   do mesmo tom; mais compactas, para caberem vários indicadores lado a lado. */
.em-bar-cell--escala { min-width: 120px; gap: var(--em-space-2); }
.em-bar-cell--escala .em-bar-cell__value { min-width: 6ch; text-align: right; white-space: nowrap; }
.em-bar-cell--escala .em-bar-cell__bar { background: color-mix(in srgb, var(--em-bar-cor) 22%, #FFFFFF); }
.em-bar-cell--escala .em-bar-cell__bar > span { background: var(--em-bar-cor); }
/* Cabeçalho que ordena a tabela (Rankings). */
.em-table__sort { color: inherit; text-decoration: none; }
.em-table__sort:hover { color: var(--em-theme-primary); text-decoration: underline; }
.em-table__sort--active { color: var(--em-theme-primary); }
.em-table .em-delta { justify-content: center; }
.em-table__link { margin-top: var(--em-space-3); display: flex; justify-content: flex-end; }
.em-table__cell-link { color: var(--em-theme-link); font-weight: var(--em-fw-semibold); text-decoration: none; }
.em-table__cell-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.em-value-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 0 var(--em-space-2); border-radius: var(--em-radius-sm); font-weight: var(--em-fw-bold); font-size: var(--em-fs-label); color: var(--em-color-text-strong); }
.em-value-pill--high { background: var(--em-value-pill-high); }
.em-value-pill--mid { background: var(--em-value-pill-mid); }
.em-value-pill--low { background: var(--em-value-pill-low); }
/* Pill do IMEQ pela escala do mapa (1: ≥ 85 … 4: < 65), com as cores --em-choropleth-* do nível (tabela da CIM). */
/* As mesmas cores do mapa e da legenda; a classe 1 (a primária, escura) leva o número em branco. */
.em-value-pill--c1 { background: var(--em-choropleth-1); color: var(--em-color-text-inverse); }
.em-value-pill--c2 { background: var(--em-choropleth-2); }
.em-value-pill--c3 { background: var(--em-choropleth-3); }
.em-value-pill--c4 { background: var(--em-choropleth-4); }

.em-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: var(--em-space-5); }
.em-pagination__item {
  min-width: 34px;
  height: 34px;
  padding: 0 var(--em-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--em-radius-md);
  font-size: var(--em-fs-body);
  font-weight: var(--em-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--em-color-text-muted);
  text-decoration: none;
}
.em-pagination__item:hover { background: var(--em-color-bg-subtle); color: var(--em-color-text-strong); }
.em-pagination__item--active,
.em-pagination__item--active:hover { background: var(--em-theme-pagination-active); color: var(--em-color-text-inverse); }
.em-pagination__ellipsis { color: var(--em-color-text-muted); padding: 0 4px; }

/* =====================================================================
   C23 Alertas
   ===================================================================== */
.em-alert-item { display: flex; gap: var(--em-space-4); padding: var(--em-space-4) 0; border-bottom: var(--em-border-width) solid var(--em-color-divider); }
.em-alert-item:last-child { border-bottom: 0; }
.em-alert-item__icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; color: var(--em-color-text-inverse); }
.em-alert-item__icon--danger { background: var(--em-color-danger); }
.em-alert-item__icon--warning { background: var(--em-color-warning); }
.em-alert-item__icon--info { background: var(--em-color-info); }
.em-alert-item__icon--success { background: var(--em-color-success); }
.em-alert-item__body { flex: 1; min-width: 0; }
.em-alert-item__title { margin: 0 0 4px; font-size: var(--em-fs-h4); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-alert-item__desc { margin: 0; font-size: var(--em-fs-body); color: var(--em-color-text-muted); }
.em-alert-item__meta { text-align: right; flex: none; }
.em-tag { display: inline-block; padding: 2px 10px; border-radius: var(--em-radius-full); background: var(--em-color-bg-subtle); font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); }
.em-alert-item__date { display: block; margin-top: 6px; font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }
.em-alert-item__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--em-fs-caption); font-weight: var(--em-fw-semibold); color: var(--em-theme-primary); text-decoration: none; }
.em-alert-item__link:hover { text-decoration: underline; }

/* Separadores Alertas / Tendências (radio + label, sem JS). */
.em-alert-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.em-alert-tabs__list { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--em-space-2); border-radius: var(--em-radius-md); background: var(--em-color-bg-subtle); }
.em-alert-tabs__tab { padding: 8px 18px; border-radius: var(--em-radius-sm); font-size: var(--em-fs-body); font-weight: var(--em-fw-semibold); color: var(--em-color-text-muted); cursor: pointer; transition: background var(--em-transition), color var(--em-transition); }
.em-alert-tabs__tab:hover { color: var(--em-color-text-strong); }
#em-alert-tab-alertas:checked ~ .em-alert-tabs__list [for="em-alert-tab-alertas"],
#em-alert-tab-tendencias:checked ~ .em-alert-tabs__list [for="em-alert-tab-tendencias"] { background: var(--em-theme-primary); color: var(--em-color-text-inverse); }
#em-alert-tab-alertas:focus-visible ~ .em-alert-tabs__list [for="em-alert-tab-alertas"],
#em-alert-tab-tendencias:focus-visible ~ .em-alert-tabs__list [for="em-alert-tab-tendencias"] { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }
.em-alert-tabs__panel { display: none; }
#em-alert-tab-alertas:checked ~ .em-alert-tabs__panel--alertas,
#em-alert-tab-tendencias:checked ~ .em-alert-tabs__panel--tendencias { display: block; }
.em-alert-tabs__empty { margin: var(--em-space-4) 0; color: var(--em-color-text-muted); }
.em-alert-tabs__note { margin: var(--em-space-4) 0 0; padding-top: var(--em-space-3); border-top: var(--em-border-width) solid var(--em-color-divider); font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }

/* =====================================================================
   C24 Mapa
   ===================================================================== */
.em-map-panel { display: flex; gap: var(--em-grid-gap); align-items: flex-start; }
.em-map-panel__map {
  flex: 1 1 60%;
  min-height: 480px;
  border-radius: var(--em-radius-lg);
  border: var(--em-border-width) solid var(--em-color-border);
  background: var(--em-color-bg-tint);
  position: relative;
  /* Contexto de empilhamento próprio: os painéis do Leaflet (z-index 400–1000) ficam contidos no mapa e as listas dos
     dropdowns da barra de filtros passam por cima dele. */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-map-panel__map img { max-height: 85%; opacity: .5; }
.em-map-panel__side { flex: 1 1 40%; display: flex; flex-direction: column; gap: var(--em-grid-gap); min-width: 0; }
.em-map-legend__item { display: flex; align-items: center; gap: var(--em-space-2); font-size: var(--em-fs-label); color: var(--em-color-text); margin-bottom: var(--em-space-2); }
.em-map-legend__item:last-child { margin-bottom: 0; }
/* Legenda numa só linha (escala do mapa do IMEQ na CIM/CCDR). */
.em-map-legend--inline { display: flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-5); margin-top: var(--em-space-4); }
.em-map-legend--inline .em-map-legend__item { margin-bottom: 0; }
.em-map-legend__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.em-map-detail__attr { font-size: var(--em-fs-body); color: var(--em-color-text); margin-bottom: 4px; }
.em-map-detail__courses { margin: var(--em-space-2) 0; padding-left: 18px; font-size: var(--em-fs-body); color: var(--em-color-text); }
.em-choropleth-placeholder {
  flex-direction: column;
  gap: var(--em-space-3);
  min-height: 320px;
  padding: var(--em-space-6);
  text-align: center;
  color: var(--em-color-text-muted);
  font-size: var(--em-fs-label);
  background: color-mix(in srgb, var(--em-choropleth-2, var(--em-theme-tint)) 22%, var(--em-color-surface));
}
.em-choropleth-placeholder i { font-size: 36px; color: var(--em-choropleth-1, var(--em-theme-primary)); }

/* =====================================================================
   T9 Visão geral CIM/CCDR: índices e lista de indicadores
   ===================================================================== */
/* Cartões de índice da visão geral (CIM e CCDR, mockup): sigla a negrito, valor grande na cor do nível (CCDR) ou gauge
   em anel (CIM), e a variação face ao ano anterior por baixo, centrada (o caption da variação passa para a linha de baixo). */
.em-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--em-grid-gap); margin-bottom: var(--em-space-8); }
.em-index-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--em-space-5) var(--em-space-4); text-align: center; box-shadow: 0 1px 3px rgba(18, 33, 47, 0.06); }
.em-index-card__acronym { margin: 0; font-size: var(--em-fs-h4); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-index-card__value { margin: var(--em-space-3) 0; font-size: var(--em-fs-kpi-xl); font-weight: var(--em-fw-bold); line-height: var(--em-lh-tight); letter-spacing: -0.02em; color: var(--em-theme-primary); font-variant-numeric: tabular-nums; }
.em-index-card .em-delta { flex-direction: column; justify-content: center; gap: 2px; }
.em-index-card .em-delta__badge { background: none; padding: 0; font-size: var(--em-fs-h4); }
.em-index-card .em-delta__arrow { font-size: 13px; }
.em-index-card .em-delta__value { font-size: var(--em-fs-h4); }
.em-gauge--ring { max-width: 124px; height: 124px; margin: var(--em-space-2) auto 0; }

.em-indicator-list { list-style: none; margin: 0; padding: 0; }
.em-indicator-list__item { display: flex; align-items: center; gap: var(--em-space-4); padding: var(--em-space-3) 0; border-top: var(--em-border-width) solid var(--em-color-divider); }
.em-indicator-list__item:first-child { border-top: 0; padding-top: 0; }
.em-indicator-list__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--em-radius-md);
  background: var(--em-theme-tint);
  font-size: 15px;
  color: var(--em-theme-primary);
  flex: none;
}
.em-indicator-list__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.em-indicator-list__label { font-size: var(--em-fs-caption); color: var(--em-color-text-muted); }
.em-indicator-list__value { font-size: var(--em-fs-h4); font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); font-variant-numeric: tabular-nums; }
.em-indicator-list__deltas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.em-indicator-list__deltas .em-delta { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }

/* =====================================================================
   Homepage: C25 hero (com as categorias C26), C27 números
   ===================================================================== */
body.em-home { background: var(--em-color-surface); }

@keyframes em-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes em-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* Sem isolation/z-index no hero: o .em-hero__inner (z-index 2) tem de competir com o bloco de números (z-index 1) para a
   lista da pesquisa passar por cima dele. Os véus (::before/::after) ficam por baixo do inner com z-index 0. */
.em-hero {
  position: relative;
  /* Contém a margem de baixo do bloco de números (sem isto colapsava para fora e deixava uma faixa branca). */
  display: flow-root;
  background-color: var(--em-theme-hero-bg);
  color: var(--em-color-text-inverse);
}
.em-hero--photo { background-image: var(--em-hero-image); background-size: cover; background-position: center; }
/* Véu da cor do nível: opaco à esquerda (legibilidade), transparente à direita (deixa ver a fotografia), um brilho da cor
   de destaque no canto do mapa e um escurecimento em baixo, onde assenta o bloco de números. */
.em-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(55% 70% at 82% 30%, color-mix(in srgb, var(--em-theme-accent) 38%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--em-theme-hero-bg) 75%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--em-theme-hero-bg) 96%, transparent) 0%,
      color-mix(in srgb, var(--em-theme-hero-bg) 86%, transparent) 42%,
      color-mix(in srgb, var(--em-theme-hero-bg) 30%, transparent) 100%);
}
/* Grelha de pontos discreta sobre o véu (textura de "mapa de dados"; sem fotografia evita um bloco liso). */
.em-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 20%, #000 90%);
}
/* Acima do bloco de números (z-index 1) para a lista da pesquisa passar por cima dele. */
.em-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--em-space-16) var(--em-space-6) var(--em-space-6);
  /* Alinhado ao topo (não centrado): com o bloco de texto de altura fixa (.em-hero__texto), a pesquisa e o mapa ficam
     sempre no mesmo sítio. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--em-space-12);
}
.em-header--over-hero + .em-page .em-hero__inner { padding-top: 132px; }
/* O espaço em baixo é o da lista de sugestões da pesquisa (.em-search--hero .em-search__list, 224px + 8px), para ela
   abrir sempre dentro do hero e não sobre a faixa branca. */
.em-hero__content { flex: 1; min-width: 0; max-width: 760px; padding-bottom: 248px; }
/* Até 3 linhas de título e 2 de subtítulo; menos texto fica encostado em baixo (a pesquisa não sobe). */
.em-hero__texto { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; margin-bottom: var(--em-space-8); }
/* backwards (não both): no fim da entrada não fica transformação nenhuma nos blocos do hero. */
.em-hero__content > * { animation: em-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.em-hero__content > :nth-child(2) { animation-delay: 0.08s; }
.em-hero__content > :nth-child(3) { animation-delay: 0.16s; }
.em-hero__content > :nth-child(n+4) { animation-delay: 0.24s; }

.em-hero__title {
  margin: 0;
  font-family: var(--em-font-display);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--em-color-text-inverse);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.22);
}
/* Traço de marca sob o título, da cor de destaque do nível para o branco. */
.em-hero__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: var(--em-space-6);
  border-radius: var(--em-radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--em-theme-accent) 70%, #FFFFFF), #FFFFFF);
}
.em-hero__subtitle {
  margin: var(--em-space-5) 0 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.86);
}
.em-hero__tagline { margin: var(--em-space-5) 0 0; font-style: italic; font-size: 15px; color: rgba(255, 255, 255, 0.75); }

/* Pesquisa: pílula branca com um anel de vidro à volta. */
/* Por cima da faixa dos números (.em-home-destaques) para a lista de sugestões; camada própria (will-change), que o
   Chrome por vezes compunha outras camadas por cima dela. */
.em-hero .em-search--hero {
  z-index: 5;
  will-change: transform;
  max-width: 600px;
  height: 62px;
  border-radius: var(--em-radius-full);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.14);
}
.em-hero .em-search--hero:focus-within { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.32); }
.em-hero .em-search--hero .em-search__button { border-radius: 50%; }

/* Coluna da direita: o mapa, a flutuar devagar com um halo claro. */
/* Presa ao topo (não centrada com o texto): o título muda de nível para nível e o mapa tem de ficar sempre no mesmo sítio. */
.em-hero__aside {
  flex: none;
  align-self: flex-start;
  width: min(34%, 360px);
  margin-top: var(--em-space-6);
  display: flex;
  justify-content: flex-end;
}
/* Mapa desenhado (em-mapa-hero.js): caixa de tamanho fixo e o mesmo enquadramento nos três níveis, para não mudar de
   posição. Pintado opaco (áreas claras, limites na cor do fundo, que as camadas seguintes tapam por dentro) e a
   transparência aplicada ao mapa todo, para assentar no véu como a imagem anterior. */
.em-hero__mapa {
  display: block;
  width: 100%;
  height: clamp(300px, 56vh, 500px);
  overflow: visible;
  opacity: 0.42;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.4));
  animation: em-float 7s ease-in-out infinite alternate;
}
/* O traço na própria cor fecha as frestas entre municípios vizinhos (a geometria simplificada não encaixa ao milímetro). */
.em-hero__mapa-area { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1; stroke-linejoin: round; }
.em-hero__mapa-area--1 { fill: #DCE5EF; stroke: #DCE5EF; }
.em-hero__mapa-area--2 { fill: #BFCFE0; stroke: #BFCFE0; }
.em-hero__mapa-limite { fill: none; stroke: var(--em-theme-hero-bg, #03274A); stroke-width: 3.2; stroke-linejoin: round; }
.em-hero__mapa--municipio .em-hero__mapa-limite { stroke-width: 2.2; }
.em-hero__mapa-municipios { fill: none; stroke: var(--em-theme-hero-bg, #03274A); stroke-opacity: 0.28; stroke-width: 0.6; stroke-linejoin: round; }

/* Faixa branca entre o hero e o rodapé (Home/Index), toda dentro do branco: título da secção e, em "bento", os cartões
   do que se pode consultar (2×2) ao lado do painel dos números na cor do nível. */
.em-home-destaques {
  max-width: 1152px;
  margin: 0 auto;
  padding: 72px var(--em-space-6) 88px;
}
.em-home-destaques__head { margin-bottom: var(--em-space-8); animation: em-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.em-home-destaques__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-2);
  margin: 0 0 var(--em-space-2);
  font-size: 12px;
  font-weight: var(--em-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--em-theme-primary);
}
.em-home-destaques__eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--em-theme-accent); }
.em-home-destaques__title {
  margin: 0;
  font-family: var(--em-font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--em-color-text-strong);
}

.em-home-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: var(--em-space-5);
  align-items: stretch;
}
.em-home-bento--single { grid-template-columns: minmax(0, 1fr); }

/* C26 categorias: cartões claros 2×2, ícone ao lado do texto; ao passar o rato o cartão ganha a cor do nível. */
.em-category-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--em-space-4);
}
.em-home-bento--single .em-category-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.em-category-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--em-space-4);
  padding: var(--em-space-6);
  overflow: hidden;
  background: var(--em-color-bg-subtle);
  border: var(--em-border-width) solid transparent;
  border-radius: 20px;
  color: var(--em-color-text);
  animation: em-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(0.1s + var(--em-i, 0) * 0.07s);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
a.em-category-card { text-decoration: none; }
.em-category-card:hover,
.em-category-card:focus-visible {
  transform: translateY(-3px);
  background: var(--em-color-surface);
  border-color: color-mix(in srgb, var(--em-theme-primary) 22%, var(--em-color-border));
  box-shadow: 0 22px 40px -26px rgba(18, 33, 47, 0.45);
}
.em-category-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--em-color-surface);
  color: var(--em-theme-primary);
  font-size: 19px;
  box-shadow: 0 6px 14px -8px rgba(18, 33, 47, 0.35);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.em-category-card:hover .em-category-card__icon, .em-category-card:focus-visible .em-category-card__icon { transform: rotate(-6deg); background: var(--em-theme-primary); color: var(--em-color-text-inverse); }
.em-category-card__icon--image { padding: 6px; }
.em-category-card:hover .em-category-card__icon--image { background: var(--em-color-surface); }
.em-category-card__icon--image img { width: 100%; height: 100%; object-fit: contain; }
.em-category-card__body { position: relative; z-index: 1; min-width: 0; padding-top: 2px; }
.em-category-card__title { margin: 0 0 4px; font-size: 17px; font-weight: var(--em-fw-bold); letter-spacing: -0.01em; color: var(--em-color-text-strong); }
.em-category-card__description { margin: 0; font-size: 14px; line-height: 1.5; color: var(--em-color-text-muted); }

/* C27 números: painel na cor do nível, com os valores em destaque e as colunas de texto em lista com visto. */
.em-stats-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--em-space-6);
  padding: var(--em-space-8);
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--em-theme-accent) 55%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--em-theme-primary), var(--em-theme-primary-dark));
  color: var(--em-color-text-inverse);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--em-theme-primary-dark) 80%, transparent);
  animation: em-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards;
}
/* A grelha de pontos do hero, discreta, no canto do painel. */
.em-stats-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  pointer-events: none;
}
.em-stats-panel > * { position: relative; }
.em-stats-panel__numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--em-space-5); }
.em-stats-panel__value {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.em-stats-panel__label { margin: var(--em-space-2) 0 0; font-size: 12px; font-weight: var(--em-fw-bold); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.72); }
.em-stats-panel__facts {
  margin: 0;
  padding: var(--em-space-5) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--em-space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.em-stats-panel__facts li { display: flex; align-items: flex-start; gap: var(--em-space-3); font-size: 14px; font-weight: var(--em-fw-semibold); line-height: 1.45; }
.em-stats-panel__facts i {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10px;
}

/* =====================================================================
   Rodapé (todas as páginas): faixa escura da cor do nível, colunas e logótipo da Fundação
   ===================================================================== */
.em-footer {
  position: relative;
  --em-footer-max: 1152px;
  background: color-mix(in srgb, var(--em-theme-hero-bg) 82%, #05090D);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--em-fs-label);
}
body:not(.em-home) .em-footer { --em-footer-max: var(--em-content-max); margin-top: var(--em-space-12); }
.em-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--em-theme-primary), var(--em-theme-accent), color-mix(in srgb, var(--em-theme-accent) 40%, #FFFFFF));
}
.em-footer__main,
.em-footer__bottom {
  max-width: calc(var(--em-footer-max) + 2 * var(--em-space-6));
  margin: 0 auto;
  padding-left: var(--em-space-6);
  padding-right: var(--em-space-6);
}
.em-footer__main {
  display: grid;
  /* Marca mais larga; Sobre, contactos e promotor (cada um opcional) repartem o resto em colunas iguais, sem o
     espaço vazio no meio de quando ficavam encostadas à direita. */
  grid-template-columns: minmax(0, 1.5fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--em-space-10);
  padding-top: var(--em-space-14, 56px);
  padding-bottom: var(--em-space-12);
}
/* O nome do site alinha pelo topo com os títulos das colunas. */
.em-footer__wordmark { margin: -4px 0 var(--em-space-4); font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--em-color-text-inverse); }
.em-footer__wordmark span { font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.em-footer__about { margin: 0; max-width: 320px; font-size: var(--em-fs-body); line-height: 1.6; }
.em-footer__heading {
  margin: 0 0 var(--em-space-4);
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--em-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--em-color-text-inverse);
}
/* Logótipo da Fundação: versão branca oficial, diretamente sobre a faixa escura. */
.em-footer__logo-link { display: inline-flex; align-items: center; text-decoration: none; opacity: 0.92; transition: opacity var(--em-transition); }
.em-footer__logo-link:hover { opacity: 1; }
.em-footer__logo { height: 64px; width: auto; max-width: 100%; display: block; }
.em-footer__org { font-size: 18px; font-weight: var(--em-fw-bold); color: var(--em-color-text-inverse); }
/* Contactos: email e redes sociais (Backoffice > Página Inicial > Rodapé). */
/* Coluna "Sobre": páginas de conteúdo do rodapé, uma por linha. */
.em-footer__lista { display: flex; flex-direction: column; gap: var(--em-space-3); margin: 0; padding: 0; list-style: none; line-height: 1.35; }
.em-footer__lista a { color: var(--em-color-text-inverse); text-decoration: none; font-size: var(--em-fs-body); }
.em-footer__lista a:hover { text-decoration: underline; }
.em-footer__email { display: inline-flex; align-items: center; gap: var(--em-space-2); max-width: 100%; color: var(--em-color-text-inverse); text-decoration: none; font-size: var(--em-fs-body); line-height: 1.35; overflow-wrap: anywhere; }
.em-footer__email:hover { text-decoration: underline; }
/* Email e telefone, um por linha. */
.em-footer__contacts .em-footer__email { display: flex; width: fit-content; }
.em-footer__email + .em-footer__email { margin-top: var(--em-space-2); }
.em-footer__social { display: flex; gap: var(--em-space-2); margin: var(--em-space-4) 0 0; padding: 0; list-style: none; }
.em-footer__social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--em-color-text-inverse); background: rgba(255, 255, 255, 0.10); text-decoration: none;
  transition: background var(--em-transition);
}
.em-footer__social a:hover { background: rgba(255, 255, 255, 0.22); }
/* Fontes dos dados e data da última atualização (fim da última execução do ETL com sucesso). */
.em-footer__data {
  max-width: calc(var(--em-footer-max) + 2 * var(--em-space-6));
  margin: 0 auto;
  padding: var(--em-space-4) var(--em-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
}
.em-footer__data i { margin-right: var(--em-space-2); opacity: 0.7; }
.em-footer__links { display: inline-flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-6); }
.em-footer__links a { color: inherit; text-decoration: none; }
.em-footer__links a:hover { color: var(--em-color-text-inverse); text-decoration: underline; }
.em-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--em-space-2) var(--em-space-6);
  padding-top: var(--em-space-5);
  padding-bottom: var(--em-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
}
/* Ecrã médio: a marca numa linha inteira e as outras colunas por baixo, lado a lado. */
@media (max-width: 1024px) and (min-width: 761px) {
  .em-footer__main { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--em-space-8); }
  .em-footer__brand { grid-column: 1 / -1; }
  .em-footer__about { max-width: 520px; }
}

@media (max-width: 900px) {
  .em-hero__inner { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: var(--em-space-12) var(--em-space-5) var(--em-space-16); }
  .em-hero__aside { display: none; }
  /* Ecrã estreito: o texto ocupa o que precisa e a lista de sugestões pode passar por cima do que está abaixo. */
  .em-hero__texto { min-height: 0; }
  .em-hero__content { padding-bottom: 0; }
  .em-home-bento { grid-template-columns: minmax(0, 1fr); }
  .em-home-bento--single .em-category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .em-header--over-hero + .em-page .em-hero__inner { padding-top: 156px; }
  .em-hero__title::after { margin-top: var(--em-space-4); }
  .em-hero__subtitle { font-size: var(--em-fs-body-lg); margin: var(--em-space-4) 0 0; }
  .em-hero__texto { margin-bottom: var(--em-space-6); }
  .em-hero .em-search--hero { height: 54px; }
  .em-hero .em-search--hero .em-search__button { width: 42px; height: 42px; }
  .em-home-destaques { padding: var(--em-space-12) var(--em-space-4); }
  .em-home-destaques__head { margin-bottom: var(--em-space-6); }
  .em-category-cards,
  .em-home-bento--single .em-category-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .em-category-card { padding: var(--em-space-4) var(--em-space-5); }
  .em-stats-panel { padding: var(--em-space-6); }
  .em-stats-panel__value { font-size: 38px; }
  .em-footer__main { grid-template-columns: 1fr; grid-auto-flow: row; gap: var(--em-space-8); padding-top: var(--em-space-12); padding-bottom: var(--em-space-8); }
  .em-footer__main, .em-footer__bottom, .em-footer__data { padding-left: var(--em-space-4); padding-right: var(--em-space-4); }
  /* Espaço para os botões flutuantes (acessibilidade e assistente) não taparem a linha de baixo. */
  .em-footer__bottom { padding-bottom: 88px; }
}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1180px) {
  .em-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-kpi-grid > .em-card,
  .em-kpi-grid--compact > .em-card { flex-basis: calc(50% - 1px); }
  .em-index-panel { grid-template-columns: 1fr; }
  .em-index-summary { border-right: 0; border-bottom: var(--em-border-width) solid var(--em-color-border); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: var(--em-space-4); }
  .em-index-summary__label { flex-basis: 100%; }
  .em-row--main-side { grid-template-columns: 1fr; }
  .em-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-dash__span-2 { grid-column: 1 / -1; }
  .em-dash__tall { grid-row: auto; }
  /* Com 2 colunas, o indicador principal ocupa a linha toda para os cartões estreitos ficarem aos pares. */
  .em-dash__lead { grid-column: 1 / -1; }
  /* Cartão estreito que, a 3 colunas, acompanha um gráfico largo: a 2 colunas ficaria sozinho, por isso ocupa a linha. */
  .em-dash__solo { grid-column: 1 / -1; }
  .em-alert-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .em-dash { grid-template-columns: minmax(0, 1fr); }
  .em-index-gauges { gap: var(--em-space-2); }
  .em-escolas-map { min-height: 380px; }
}

@media (max-width: 520px) {
  .em-report-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .em-report-tile { min-height: 44px; }
  /* Gauges em lista: o gauge à esquerda e o nome do índice à direita, para o valor não ficar apertado. */
  .em-index-gauges { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .em-index-gauges__item { display: flex; align-items: center; gap: var(--em-space-4); text-align: left; padding: var(--em-space-2) 0; border-bottom: 1px solid var(--em-color-divider); }
  .em-index-gauges__item:last-child { border-bottom: 0; }
  .em-index-gauges .em-gauge { flex: none; width: 170px; height: 128px; margin: 0; }
  .em-index-gauges__label { margin-top: 0; font-size: var(--em-fs-body); }
  .em-subnav__inner { padding: 0 var(--em-space-4); }
  .em-territory-band__inner { padding: var(--em-space-8) var(--em-space-4) var(--em-space-5); }
  .em-territory-band .em-territory-header__title, .em-territory-band .em-page-heading__title { font-size: 32px; }
  .em-subnav__item { height: 44px; padding: 0 10px; }
  .em-subnav__item::after { left: 10px; right: 10px; }
  .em-subnav__arrow { display: none !important; }
  .em-main { padding: var(--em-space-6) var(--em-space-4) var(--em-space-12); }
  .em-territory-header { flex-direction: column; align-items: stretch; gap: var(--em-space-4); margin-bottom: var(--em-space-6); }
  .em-territory-header__right { justify-content: flex-start; }
  .em-territory-header__title { font-size: 34px; }
  .em-page-heading__title { font-size: 28px; }

  .em-index-bars { grid-template-columns: 1fr; }
  .em-index-bar { padding: var(--em-space-4) var(--em-space-5); }
  .em-index-bar + .em-index-bar { border-left: 0; border-top: var(--em-border-width) solid var(--em-color-border); }
  .em-index-bar__label { margin-bottom: var(--em-space-2); }
  .em-row--58-42,
  .em-row--1-1,
  .em-row--main-side-wide { grid-template-columns: 1fr; }

  .em-filter-bar .em-field { display: block; }
  .em-filter-bar .em-field__label { margin-bottom: 6px; }
  .em-filter-bar .em-field { flex: 1 1 160px; }
  .em-filter-bar .em-select { width: 100%; }
  .em-filter-bar .em-dropdown { display: flex; width: 100%; }
  .em-map-panel { flex-direction: column; }
  .em-map-panel__map { min-height: 340px; width: 100%; }
  .em-ratio-compare { gap: var(--em-space-6); }
  .em-alert-item { flex-direction: column; gap: var(--em-space-3); }
  .em-alert-item__meta { text-align: left; }
  .em-kpi-hero { flex-wrap: wrap; }
  .em-kpi-hero__value { font-size: 36px; }

}

@media (max-width: 760px) {
  /* Telemóvel: o botão de partilhar fica ao lado do menu (o gap do cabeçalho é menor) e o balão sem o rótulo. */
  /* Na grelha de 2 colunas dos filtros, o botão fica numa linha própria, à direita (o balão abre para a esquerda). */
  /* O botão vai para o canto do ecrã (.em-share--flutuante): a linha própria e o espaço que ela tirava desaparecem. */
  .em-share-row { display: none; }
  /* Até em-share.js o passar para o canto, o botão não aparece na barra de filtros (evita vê-lo saltar ao abrir a página). */
  .em-share:not(.em-share--flutuante) { display: none; }
  .em-main:has(> .em-main__inner > .em-share-row) { padding-top: var(--em-space-6); }
  .em-share__label { display: none; }
  .em-share__panel { gap: 6px; padding: var(--em-space-2) var(--em-space-3); }
  .em-header.em-header--over-hero { padding: var(--em-space-4); }
  .em-header--over-hero .em-header__brand img { height: 30px; }
  .em-header--over-hero .em-header__logo { height: 38px; }
  .em-header.em-header--over-hero { flex-wrap: wrap; row-gap: var(--em-space-4); }
  .em-header__level { width: 100%; margin-left: 0; }
  .em-header--over-hero + .em-page .em-hero__inner { padding-top: 156px; }
  .em-level-switch--hero { display: flex; margin-bottom: var(--em-space-6); }
  .em-level-switch--hero .em-level-switch__item { flex: 1 1 auto; justify-content: center; padding: 0 var(--em-space-3); }
  .em-header { gap: var(--em-space-3); padding: 0 var(--em-space-3) 0 var(--em-space-4); }
  .em-header__brand img { height: 32px; }
  .em-header__logo { height: 38px; }
  .em-header__nav-toggle { display: flex; }
  .em-header__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--em-space-2) 0 var(--em-space-4);
    background: var(--em-color-surface-header);
    border-bottom: var(--em-border-width) solid var(--em-color-border);
    box-shadow: var(--em-shadow-raised);
    visibility: hidden;
  }
  .em-header__menu .em-level-switch { display: flex; margin: var(--em-space-2) var(--em-space-4) 0; }
  .em-header__menu .em-level-switch__item { flex: 1; justify-content: center; height: 38px; padding: 0 var(--em-space-2); }
  .em-header--over-band .em-header__menu { background: var(--em-theme-hero-bg); border-bottom-color: rgba(255, 255, 255, 0.12); }
  .em-header__search { order: -1; width: auto; padding: var(--em-space-4); overflow: visible; transition: none; }
  .em-header__search .em-search__list { opacity: 1; transform: none; animation: none; transition: none; }
  .em-header__search .em-search--compact { justify-content: flex-start; background: var(--em-color-surface); border: var(--em-border-width) solid var(--em-color-border); }
  .em-header__search .em-search--compact .em-search__icon,
  .em-header__search .em-search--compact input {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    opacity: 1;
    pointer-events: auto;
  }
  .em-header__search .em-search--compact input { height: 100%; padding: 0 var(--em-space-3); color: var(--em-color-text); }
  .em-header__search .em-search--compact .em-search__icon { padding-left: var(--em-space-4); }
  .em-header__search .em-search__list { width: auto; left: 0; right: 0; }
  .em-header__search .em-search--compact .em-search__button {
    width: auto;
    height: calc(var(--em-control-height) - 10px);
    min-width: calc(var(--em-control-height) - 10px);
    margin-right: 5px;
    padding: 0 var(--em-space-3);
    border-radius: var(--em-radius-full);
    border: 0;
    background: var(--em-theme-search-button);
    color: var(--em-color-text-inverse);
  }
  .em-header--menu-aberto .em-header__menu { visibility: visible; }
  .em-header--menu-aberto .em-header__nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--em-header-height) 0 0 0;
    z-index: 9;
    background: rgba(18, 33, 47, 0.35);
  }

  .em-search--hero { height: 54px; }
  .em-search--hero .em-search__button { width: 42px; height: 42px; }
}

@media (max-width: 520px) {
  .em-territory-band .em-territory-header__right > * + * { border-left: 0; border-top: var(--em-border-width) solid rgba(255, 255, 255, 0.18); }
  .em-level-switch__item { min-width: 0; }
  .em-bar-cell { min-width: 96px; gap: var(--em-space-2); }
  .em-table th, .em-table td { padding-left: 10px; padding-right: 10px; }
  .em-table-wrap .em-table:has(.em-bar-cell) { min-width: 0; }
  .em-kpi-grid > .em-card,
  .em-kpi-grid--compact > .em-card { min-width: 0; padding: var(--em-space-4); }
  .em-kpi-card__value { font-size: var(--em-fs-kpi-md); }
  .em-territory-header__right { flex-direction: column; align-items: stretch; }
  .em-territory-header__right > * { width: 100%; }
  .em-year-select__value { flex: 1; }
  .em-ratio-compare { flex-direction: column; gap: var(--em-space-3); }
}

/* =====================================================================
   Evolução animada (barras em corrida, em-evolucao.js)
   ===================================================================== */
.em-level-switch__icon { font-size: 12px; opacity: 0.8; }
.em-race__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--em-space-3);
  margin-bottom: var(--em-space-4);
}
.em-race__play { min-width: 148px; }
.em-race__restart { width: 44px; padding: 0; }
.em-race__timeline { flex: 1 1 220px; display: flex; align-items: center; }
.em-race__timeline input { width: 100%; accent-color: var(--em-theme-primary); cursor: pointer; }
.em-race__year {
  min-width: 72px;
  font-weight: var(--em-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--em-color-text-strong);
  text-align: right;
}
.em-race__chart { width: 100%; min-height: 240px; }
.em-race__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--em-space-2) var(--em-space-5);
  margin-top: var(--em-space-4);
}
.em-race__legend .em-map-legend__item { margin: 0; }
.em-race__posicao {
  min-height: 1.5em;
  margin: calc(-1 * var(--em-space-2)) 0 var(--em-space-3);
  color: var(--em-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.em-race__posicao:empty { display: none; }
.em-race__posicao strong { color: var(--em-theme-primary); font-weight: var(--em-fw-bold); }
/* Lugares ganhos ou perdidos face ao ano anterior (em-evolucao.js). */
.em-race__var { font-weight: var(--em-fw-bold); }
.em-race__var--sobe { color: #1F7A52; }
.em-race__var--desce { color: #B23A48; }

/* Botão "Evolução" (partial _EvolucaoTrigger) como secção do painel do lado direito da banda do território (Município,
   CIM, CCDR): rótulo em cima, a ação numa pílula branca na cor do nível (lê-se como botão) e uma linha de apoio por baixo,
   alinhados com o ano letivo e o ranking. O foco e o hover ficam na pílula, sem caixa retangular no painel. */
.em-header-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: var(--em-space-3) var(--em-space-5);
  border: 0;
  background: none;
  color: var(--em-color-text-inverse);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.em-header-action__label {
  font-size: var(--em-fs-micro);
  font-weight: var(--em-fw-bold);
  letter-spacing: var(--em-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.em-header-action__value {
  display: inline-flex;
  align-items: center;
  gap: var(--em-space-2);
  height: 36px;
  padding: 0 var(--em-space-4) 0 var(--em-space-3);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  color: var(--em-theme-primary);
  font-size: 15px;
  font-weight: var(--em-fw-bold);
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  transition: transform var(--em-transition), box-shadow var(--em-transition), background var(--em-transition);
}
.em-header-action__value .fa-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
  font-size: 9px;
  padding-left: 2px;
}
.em-header-action__meta { font-size: var(--em-fs-caption); color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.em-header-action:hover .em-header-action__value { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5); }
.em-header-action:active .em-header-action__value { transform: none; }
.em-header-action:focus-visible { outline: 0; }
.em-header-action:focus-visible .em-header-action__value { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* Pop-up (dialog nativo): a caixa interior ocupa o diálogo todo, para um clique no fundo (::backdrop) o fechar. */
.em-modal {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--em-radius-xl);
  background: var(--em-color-surface);
  color: var(--em-color-text);
  box-shadow: var(--em-shadow-raised);
}
.em-modal::backdrop { background: rgba(14, 24, 34, 0.6); backdrop-filter: blur(2px); }
.em-modal__box { padding: var(--em-space-6) var(--em-space-8) var(--em-space-5); }
.em-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--em-space-4);
  margin-bottom: var(--em-space-4);
}
.em-modal__eyebrow {
  margin: 0 0 var(--em-space-1);
  font-size: 12px;
  font-weight: var(--em-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--em-color-text-muted);
}
.em-modal__title { margin: 0; font-size: 24px; font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  color: var(--em-color-text-strong);
  font-size: 18px;
  cursor: pointer;
}
.em-modal__close:hover { border-color: var(--em-theme-primary); color: var(--em-theme-primary); }
.em-modal__filters { margin-bottom: var(--em-space-5); padding: 0; border: 0; }
.em-modal__status { margin: var(--em-space-8) 0; color: var(--em-color-text-muted); text-align: center; }
.em-modal__status[hidden] { display: none; }
@media (max-width: 640px) {
  .em-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .em-modal__box { padding: var(--em-space-4); }
  .em-modal__title { font-size: 20px; }
}
@media (min-width: 641px) {
  .em-modal__filters .em-field:first-child .em-select { width: 300px; }
}

/* Botão de evolução no canto do cartão de indicador (_KpiCard) e o pop-up de linhas (em-kpi-evolucao.js). */
.em-kpi-card--standard,
.em-card:has(> .em-kpi-card__evolucao) { position: relative; }
.em-kpi-card--standard:has(.em-kpi-card__evolucao) .em-kpi-card__label,
.em-card:has(> .em-kpi-card__evolucao) > .em-card__title { padding-right: 36px; }
.em-kpi-card__evolucao {
  position: absolute;
  top: var(--em-space-4);
  right: var(--em-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  color: var(--em-theme-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--em-transition), border-color var(--em-transition), color var(--em-transition);
}
.em-kpi-card__evolucao:hover { border-color: var(--em-theme-primary); background: var(--em-theme-primary); color: var(--em-color-text-inverse); }
.em-kpi-card__evolucao:focus-visible { outline: 2px solid var(--em-theme-primary); outline-offset: 2px; }
.em-modal--kpi { width: min(860px, calc(100vw - 32px)); }
.em-modal__subtitle { margin: var(--em-space-1) 0 0; color: var(--em-color-text-muted); font-size: 14px; }
.em-modal--kpi .em-segmented { margin-bottom: var(--em-space-4); }
.em-segmented[hidden] { display: none; }
.em-kpi-evolucao__chart { width: 100%; height: 380px; }
@media print {
  .em-kpi-card__evolucao { display: none; }
}

/* Mapa coroplético do IMEQ (_MapaImeq, em-mapa.js) na visão geral da CIM e da CCDR. */
.em-mapa-imeq { display: block; min-height: 420px; background: var(--em-color-surface); cursor: pointer; }
.em-mapa-imeq__fonte { margin: var(--em-space-2) 0 0; font-size: 12px; color: var(--em-color-text-subtle); }
.em-mapa-imeq__fonte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Escala de cores dos índices EDUSTAT (EscalaIndice, _EscalaIndices): contínua de vermelho (mais baixo) a verde (mais alto),
   amarelo na mediana. O texto usa a cor da escala escurecida, para manter o contraste sobre branco. */
.em-indice-cor { color: color-mix(in srgb, var(--em-indice-cor) 78%, #000000) !important; }
.em-index-scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--em-space-2);
  margin: calc(-1 * var(--em-space-3)) 0 var(--em-space-6);
  font-size: var(--em-fs-caption);
  color: var(--em-color-text-muted);
}
.em-index-scale__item { white-space: nowrap; }
/* Faixa contínua vermelho → amarelo → verde, com uma marca no meio (mediana). */
.em-index-scale__ramp {
  position: relative;
  flex: 0 0 140px;
  height: 8px;
  border-radius: var(--em-radius-full);
  background: linear-gradient(90deg, var(--em-indice-fraco), var(--em-indice-medio), var(--em-indice-bom));
}
.em-index-scale__tick { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--em-color-surface, #FFFFFF); box-shadow: 0 0 0 1px color-mix(in srgb, var(--em-color-text-muted) 35%, transparent); }
/* Explicação antes da escala, separada por um traço vertical. */
.em-index-scale__note { margin-right: var(--em-space-2); padding-right: var(--em-space-3); border-right: var(--em-border-width) solid var(--em-color-border); }

/* =====================================================================
   Assistente de dados (_Assistente, em-assistente.js): botão redondo no canto inferior direito e painel de conversa
   por cima dele. No telemóvel o painel ocupa o ecrã e o botão Partilhar flutuante sobe para não ficar por baixo.
   ===================================================================== */
.em-assistente {
  position: fixed;
  right: var(--em-space-6);
  bottom: calc(var(--em-space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--em-space-3);
  font-family: var(--em-font-sans);
}
.em-assistente__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(18, 33, 47, 0.55);
  transition: background var(--em-transition), transform var(--em-transition);
}
.em-assistente__toggle:hover { background: var(--em-theme-primary-dark); transform: translateY(-1px); }
.em-assistente__toggle:focus-visible { outline: none; box-shadow: var(--em-focus-ring), 0 12px 28px -10px rgba(18, 33, 47, 0.55); }
.em-assistente__toggle-fechar { display: none; }
.em-assistente--aberto .em-assistente__toggle-abrir { display: none; }
.em-assistente--aberto .em-assistente__toggle-fechar { display: inline; }

.em-assistente__painel {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 2 * var(--em-space-6)));
  height: min(600px, calc(100vh - 140px));
  overflow: hidden;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-xl);
  background: var(--em-color-surface);
  box-shadow: var(--em-shadow-raised);
}
.em-assistente__painel[hidden] { display: none; }

.em-assistente__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--em-space-3);
  padding: var(--em-space-3) var(--em-space-3) var(--em-space-3) var(--em-space-4);
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
}
.em-assistente__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 15px;
}
.em-assistente__titulo { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: var(--em-lh-heading); }
.em-assistente__titulo strong { font-size: var(--em-fs-card-title); font-weight: var(--em-fw-semibold); }
.em-assistente__titulo span { font-size: var(--em-fs-micro); opacity: 0.85; }
.em-assistente__icone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--em-radius-md);
  background: transparent;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
}
.em-assistente__icone:hover { background: rgba(255, 255, 255, 0.16); }
.em-assistente__icone:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: -2px; }

.em-assistente__mensagens {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--em-space-3);
  overflow-y: auto;
  padding: var(--em-space-4);
  background: var(--em-color-bg-main);
  overscroll-behavior: contain; padding: 0;
}
.em-assistente__boas-vindas { color: var(--em-color-text); font-size: var(--em-fs-body); line-height: var(--em-lh-body); }
.em-assistente__boas-vindas[hidden] { display: none; }
.em-assistente__boas-vindas p { margin: 0 0 var(--em-space-3); }
.em-assistente__sugestoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--em-space-2); }
.em-assistente__sugestoes button {
  padding: var(--em-space-2) var(--em-space-3);
  border: var(--em-border-width) solid var(--em-chip-border);
  border-radius: var(--em-radius-lg);
  background: var(--em-chip-bg);
  color: var(--em-color-text-strong);
  font: inherit;
  font-size: var(--em-fs-label);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--em-transition), background var(--em-transition);
}
.em-assistente__sugestoes button:hover { border-color: var(--em-theme-primary); background: var(--em-color-highlight-row); }

.em-assistente__msg {
  max-width: 88%;
  padding: var(--em-space-2) var(--em-space-3);
  border-radius: var(--em-radius-lg);
  font-size: var(--em-fs-body);
  line-height: var(--em-lh-body);
  overflow-wrap: anywhere;
}
.em-assistente__msg--utilizador {
  align-self: flex-end;
  border-bottom-right-radius: var(--em-radius-sm);
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
  white-space: pre-wrap;
}
.em-assistente__msg--assistente {
  align-self: flex-start;
  border: var(--em-border-width) solid var(--em-color-border);
  border-bottom-left-radius: var(--em-radius-sm);
  background: var(--em-color-surface);
  color: var(--em-color-text);
}
.em-assistente__msg--erro { border-color: color-mix(in srgb, #B42318 35%, var(--em-color-border)); background: #FEF3F2; color: #912018; }
.em-assistente__msg p { margin: 0 0 var(--em-space-2); }
.em-assistente__msg p:last-child, .em-assistente__msg ul:last-child, .em-assistente__msg ol:last-child { margin-bottom: 0; }
.em-assistente__msg ul, .em-assistente__msg ol { margin: 0 0 var(--em-space-2); padding-left: var(--em-space-5); }
.em-assistente__msg code { padding: 1px 4px; border-radius: var(--em-radius-sm); background: var(--em-color-bg-subtle); font-size: 0.92em; }
.em-assistente__msg a { color: var(--em-theme-primary); text-decoration: underline; text-underline-offset: 2px; }
.em-assistente__subtitulo { font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); }
.em-assistente__tabela { max-width: 100%; margin: 0 0 var(--em-space-2); overflow-x: auto; }
.em-assistente__tabela table { border-collapse: collapse; font-size: var(--em-fs-caption); font-variant-numeric: tabular-nums; }
.em-assistente__tabela th, .em-assistente__tabela td { padding: 4px 8px; border-bottom: var(--em-border-width) solid var(--em-color-border); text-align: left; white-space: nowrap; }
.em-assistente__tabela th { background: var(--em-color-bg-subtle); font-weight: var(--em-fw-semibold); color: var(--em-color-text-strong); }

.em-assistente__espera { display: inline-flex; align-items: center; gap: var(--em-space-2); color: var(--em-color-text-muted); font-size: var(--em-fs-label); }
.em-assistente__pontos { display: inline-flex; gap: 3px; }
.em-assistente__pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--em-theme-primary); animation: em-assistente-pontos 1.2s infinite ease-in-out; }
.em-assistente__pontos i:nth-child(2) { animation-delay: 0.15s; }
.em-assistente__pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes em-assistente-pontos {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .em-assistente__pontos i { animation: none; opacity: 0.6; }
}

.em-assistente__form {
  display: flex;
  align-items: flex-end;
  gap: var(--em-space-2);
  padding: var(--em-space-3) var(--em-space-3) var(--em-space-2);
  border-top: var(--em-border-width) solid var(--em-color-border);
  background: var(--em-color-surface);
}
.em-assistente__input {
  flex: 1 1 auto;
  min-height: var(--em-control-height);
  max-height: 120px;
  padding: 9px var(--em-space-3);
  border: var(--em-border-width) solid var(--em-color-border-strong);
  border-radius: var(--em-radius-lg);
  color: var(--em-color-text-strong);
  font: inherit;
  font-size: var(--em-fs-body);
  line-height: 1.4;
  resize: none;
}
.em-assistente__input:focus { outline: none; border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-assistente__enviar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--em-control-height);
  height: var(--em-control-height);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--em-theme-primary);
  color: var(--em-color-text-inverse);
  font-size: 15px;
  cursor: pointer;
}
.em-assistente__enviar:hover { background: var(--em-theme-primary-dark); }
.em-assistente__enviar:disabled { opacity: 0.45; cursor: default; }
.em-assistente__enviar:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }
.em-assistente__aviso { margin: 0; padding: 0 var(--em-space-3) var(--em-space-2); background: var(--em-color-surface); color: var(--em-color-text-subtle); font-size: var(--em-fs-micro); text-align: center; }

@media (max-width: 760px) {
  .em-assistente { right: var(--em-space-4); bottom: calc(var(--em-space-4) + env(safe-area-inset-bottom, 0px)); }
  .em-assistente__toggle { width: 52px; height: 52px; font-size: 20px; }
  /* O Partilhar flutuante (em-share.js) fica por cima do botão do assistente. */
  body:has(.em-assistente) .em-share--flutuante { bottom: calc(var(--em-space-4) + 52px + var(--em-space-3) + env(safe-area-inset-bottom, 0px)); }
  .em-assistente--aberto { inset: 0; gap: 0; }
  .em-assistente--aberto .em-assistente__painel { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .em-assistente--aberto .em-assistente__toggle { display: none; }
  /* Abaixo de 16px o iOS amplia a página ao escrever. */
  .em-assistente__input { font-size: 16px; }
}

/* =====================================================================
   Páginas de conteúdo (/pagina/{endereço}, Backoffice > Páginas de conteúdo):
   coluna de leitura com o texto do editor do Backoffice.
   ===================================================================== */
.em-content { max-width: 820px; margin: 0 auto; padding: var(--em-space-10) var(--em-space-6) var(--em-space-12); }
.em-content .em-page-heading__subtitle { margin-top: var(--em-space-2); font-size: var(--em-fs-body-lg); color: var(--em-color-text-muted); }
.em-content__updated { margin-top: var(--em-space-10); font-size: var(--em-fs-label); color: var(--em-color-text-muted); }
/* Na banda do nível (_LayoutEmShell): o título está na banda e o conteúdo começa logo, já dentro do espaço do .em-main. */
.em-content--na-banda { margin: 0; padding: 0; }
.em-prose { font-size: var(--em-fs-body-lg); line-height: 1.7; color: var(--em-color-text); }
.em-prose > :first-child { margin-top: 0; }
.em-prose h2 { margin: var(--em-space-10) 0 var(--em-space-3); font-size: 24px; font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); letter-spacing: -0.01em; }
.em-prose h3 { margin: var(--em-space-8) 0 var(--em-space-2); font-size: 19px; font-weight: var(--em-fw-bold); color: var(--em-color-text-strong); }
.em-prose p { margin: 0 0 var(--em-space-4); }
.em-prose ul, .em-prose ol { margin: 0 0 var(--em-space-4); padding-left: 1.4em; }
.em-prose li + li { margin-top: var(--em-space-1); }
.em-prose a { color: var(--em-theme-primary); text-underline-offset: 2px; }
.em-prose a:hover { color: var(--em-theme-accent); }
.em-prose blockquote { margin: var(--em-space-6) 0; padding: var(--em-space-3) var(--em-space-5); border-left: 3px solid var(--em-theme-accent); color: var(--em-color-text-muted); background: color-mix(in srgb, var(--em-theme-primary) 4%, transparent); }
.em-prose table { width: 100%; margin: var(--em-space-6) 0; border-collapse: collapse; font-size: var(--em-fs-body); }
.em-prose th, .em-prose td { padding: var(--em-space-2) var(--em-space-3); border-bottom: 1px solid var(--em-color-border); text-align: left; }
.em-prose img { max-width: 100%; height: auto; border-radius: var(--em-radius-md, 8px); }

/* Ligações às páginas de conteúdo na linha de baixo do rodapé. */
.em-footer__links { display: inline-flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-5); }


/* ⓘ junto ao indicador (Rankings): abre um painel ali mesmo (_InfoIndicador, <details>), sem mudar de página. */
.em-info-pop { position: relative; display: inline-block; margin-left: 6px; vertical-align: 2px; font-size: initial; font-weight: initial; }
.em-info-pop > summary { list-style: none; cursor: pointer; }
.em-info-pop > summary::-webkit-details-marker { display: none; }
.em-info-pop[open] > summary { color: #FFFFFF; background: var(--em-theme-primary); }
.em-info-pop__panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: -12px; width: min(380px, 80vw); max-height: 60vh; overflow: auto;
  padding: var(--em-space-4); border: 1px solid var(--em-color-border); border-radius: 12px; text-align: left;
  background: var(--em-color-surface); box-shadow: 0 18px 40px -12px rgba(15, 25, 36, .35);
  animation: em-info-entrar .14s ease-out;
}
.em-info-pop__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #FFFFFF; border-radius: 14px 14px 0 0;
                    background: linear-gradient(90deg, var(--em-theme-primary-dark), var(--em-theme-primary)); }
.em-info-pop__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 19px; background: rgba(255, 255, 255, .18); }
.em-info-pop__title { margin: 0; font-size: 16px; line-height: 1.25; font-weight: var(--em-fw-bold); color: #FFFFFF; }
.em-info-pop__body { display: grid; gap: 14px; padding: 16px 18px 18px; }
.em-info-pop__desc { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--em-color-text); text-wrap: pretty; }
/* Nota metodológica: bloco tingido com a cor do território e barra lateral. */
.em-info-pop__box { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; border-left: 3px solid var(--em-theme-primary);
                    background: color-mix(in srgb, var(--em-theme-primary) 7%, var(--em-color-surface)); }
.em-info-pop__box-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px;
                         color: var(--em-theme-primary); background: color-mix(in srgb, var(--em-theme-primary) 14%, transparent); }
.em-info-pop__label { margin: 1px 0 3px; font-size: 11.5px; font-weight: var(--em-fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--em-theme-primary); }
.em-info-pop__nota { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-line; color: var(--em-color-text); }
/* Fonte: faixa discreta com o ícone num círculo. */
.em-info-pop__fonte { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.4;
                      color: var(--em-color-text-muted); background: color-mix(in srgb, var(--em-color-text) 5%, var(--em-color-surface)); }
.em-info-pop__fonte-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px;
                           color: var(--em-theme-primary); background: var(--em-color-surface); box-shadow: 0 0 0 1px var(--em-color-border); }
/* Entre o <details> abrir e o em-info.js mover o painel para o <body> (evento "toggle", assíncrono) o painel ainda está
   no sítio original: fica invisível para não "piscar" junto ao ⓘ antes de ir para o sítio certo. */
.em-info-pop__panel:not(.is-floating) { visibility: hidden; }
/* Painel aberto: em-info.js move-o para o <body> e posiciona-o (fixed) dentro do viewport. */
.em-info-pop__panel.is-floating {
  position: fixed; z-index: 1100; top: 0; left: 0; margin: 0; padding: 0; box-sizing: border-box;
  font-size: var(--em-fs-body); font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: normal;
  overscroll-behavior: contain;
}
/* Desktop: balão compacto com seta a apontar para o ⓘ; sem botão de fechar (clicar fora / Esc). */
@media (min-width: 641px) {
  .em-info-pop__panel.is-floating { font-size: 14px; border-radius: 14px; overflow: visible;
                                    box-shadow: 0 12px 32px -10px rgba(15, 25, 36, .35);
                                    transform-origin: var(--seta-x, 24px) 0; animation: em-info-pop-in .18s cubic-bezier(.2, .8, .3, 1) both; }
  .em-info-pop__panel.is-floating.is-above { transform-origin: var(--seta-x, 24px) 100%; animation-name: em-info-pop-in-above; }
  .em-info-pop__panel.is-floating.is-closing { animation: em-info-pop-out .12s ease-in forwards; pointer-events: none; }
  .em-info-pop__panel.is-floating.is-above.is-closing { animation-name: em-info-pop-out-above; }
  .em-info-pop__panel.is-floating .em-info-pop__close { display: none; }
  .em-info-pop__panel.is-floating .em-info-pop__desc { font-size: 14px; line-height: 1.6; }
  .em-info-pop__panel.is-floating .em-info-pop__nota { font-size: 13px; }
  .em-info-pop__panel.is-floating .em-info-pop__fonte { font-size: 12px; }
  /* Seta em triângulo, com a ponta junto ao ⓘ; mesma cor do cabeçalho (gradiente horizontal) no ponto onde toca:
     --seta-pct = posição da seta em % da largura. */
  .em-info-pop__panel.is-floating:not(.sem-seta)::before {
    content: ""; position: absolute; left: var(--seta-x, 24px); top: -9px; width: 18px; height: 9px; margin-left: -9px;
    background: color-mix(in srgb, var(--em-theme-primary) calc(var(--seta-pct, 0) * 1%), var(--em-theme-primary-dark));
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }
  .em-info-pop__panel.is-floating.is-above:not(.sem-seta)::before { top: 100%; background: var(--em-color-surface); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1px 0 var(--em-color-border)); }
}
.em-info-pop__close {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; color: #FFFFFF; background: transparent;
}
.em-info-pop__close:hover { background: rgba(255, 255, 255, .2); }
.em-info-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 25, 36, .45); display: none; }
@media (max-width: 640px) {
  .em-info-backdrop { display: block; animation: em-info-fade .18s ease-out; }
  .em-info-pop__panel.is-floating.is-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75vh; max-height: 75dvh;
    border-radius: 16px 16px 0 0; border-width: 0;
    animation: em-info-sheet .26s cubic-bezier(.2, .8, .3, 1) both;
  }
  .em-info-pop__panel.is-floating.is-sheet.is-closing { animation: em-info-sheet-out .2s ease-in forwards; pointer-events: none; }
  .em-info-backdrop.is-closing { animation: em-info-fade-out .2s ease-in forwards; pointer-events: none; }
  .em-info-pop__panel.is-floating.is-sheet::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .5);
  }
  .em-info-pop__panel.is-floating.is-sheet .em-info-pop__head { padding: 22px 52px 14px var(--em-space-5); border-radius: 0; }
  .em-info-pop__panel.is-floating.is-sheet .em-info-pop__body { padding: var(--em-space-4) var(--em-space-5) calc(var(--em-space-5) + env(safe-area-inset-bottom)); }
}
@keyframes em-info-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-info-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes em-info-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes em-info-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes em-info-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes em-info-pop-in-above { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes em-info-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes em-info-pop-out-above { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .em-info-pop__panel.is-floating, .em-info-backdrop { animation-duration: .01ms !important; }
}
@keyframes em-info-entrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.em-info-indicador { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                     font-size: 12px; text-decoration: none; color: var(--em-theme-primary); background: color-mix(in srgb, var(--em-theme-primary) 10%, transparent); }
.em-info-indicador:hover { color: #FFFFFF; background: var(--em-theme-primary); }
/* O cartão com o painel ⓘ aberto fica por cima dos seguintes (os cartões entram com animação e cada um empilha à parte). */
.em-card:has(.em-info-pop[open]) { position: relative; z-index: 30; }

/* ⓘ dos cartões de indicador: sempre no canto superior direito, para não ficar solto no fim de um título comprido
   (também nos cartões sem evolução, como o do ITEQ). Com o botão de evolução, os dois ficam em coluna (ⓘ em cima,
   evolução por baixo). Só os ⓘ das legendas dos medidores (Índices) continuam junto ao texto. */
.em-card:has(> .em-card__title > .em-info-pop) { position: relative; }
.em-card > .em-card__title > .em-info-pop {
  position: absolute; top: var(--em-space-4); right: calc(var(--em-space-4) + 4px); margin: 0; vertical-align: baseline;
}
.em-card > .em-card__title:has(> .em-info-pop) { padding-right: 36px; }
.em-imeq-card > .em-card__title:has(> .em-info-pop) { padding-left: 36px; }   /* título centrado: mesmo espaço dos dois lados */
.em-card:has(> .em-card__title > .em-info-pop) > .em-kpi-card__evolucao { top: calc(var(--em-space-4) + 22px + 6px); }
/* Legendas dos medidores: o ⓘ alinhado ao meio da linha do texto. */
.em-index-gauges__label .em-info-pop { margin-left: 8px; vertical-align: middle; }

/* =====================================================================
   Rodapé sempre no fundo do ecrã: com pouco conteúdo (ex.: uma página sem dados) o conteúdo estica até ao rodapé, em
   vez de o rodapé subir e deixar uma faixa vazia por baixo. _LayoutEmShell (body.em-shell) e _LayoutEm (main.em-page).
   ===================================================================== */
body.em-shell,
body:has(> main.em-page) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.em-shell > *,
body:has(> main.em-page) > * { flex-shrink: 0; }
body.em-shell > .em-shell__scroll { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
body.em-shell > .em-shell__scroll > .em-main { flex: 1 0 auto; }
body:has(> main.em-page) > main.em-page { flex: 1 0 auto; width: 100%; }

/* Sem dados: cartão da página (em-sem-dados.js) e aviso dentro de um gráfico sem valores (em-charts.js). */
.em-sem-dados { margin-top: var(--em-space-4); }
.em-chart-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--em-space-2);
  color: var(--em-color-text-muted);
  font-size: var(--em-fs-caption);
  text-align: center;
  pointer-events: none;
}
.em-chart-vazio i { font-size: 1.5rem; opacity: .45; }

/* =====================================================================
   Relatório de qualidade web (nov. 2026): áreas de toque (M4) e barra fixa dos Rankings em telemóvel (B4)
   ===================================================================== */
/* Alvos de pelo menos 24×24 px (WCAG 2.2, 2.5.8); o aspeto não muda, só a área clicável. */
.em-table__sort { display: inline-block; padding: 6px 2px; margin: -6px -2px; }
.em-chip__remove { min-width: 28px; min-height: 28px; }
.em-dropdown__button { min-height: 32px; }

@media (max-width: 760px) {
  .em-table__sort { padding: 10px 4px; margin: -10px -4px; }
  .em-chip__remove { min-width: 32px; min-height: 32px; margin-right: -4px; }
  /* Rankings: separadores e região numa só linha e fundo opaco quando a barra fica fixa (antes ocupava 18% do ecrã
     e o conteúdo via-se por entre os elementos). */
  .em-toolbar.em-sticky-filtros { flex-wrap: nowrap; gap: var(--em-space-2); }
  .em-toolbar.em-sticky-filtros > .em-segmented { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .em-toolbar.em-sticky-filtros > .em-filter-bar { flex: 0 1 45%; min-width: 0; }
  .em-toolbar.em-sticky-filtros.is-stuck { background: var(--em-color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .em-toolbar.em-sticky-filtros.is-stuck .em-field__label { display: none; }
}


/* Nota do IMEQ e dos índices com um ano anterior escolhido: a origem não tem índices por ano (A2). */
.em-indices-sem-ano { display: flex; gap: 6px; align-items: flex-start; margin: var(--em-space-3) 0 0; padding: var(--em-space-2) var(--em-space-3); border-radius: var(--em-radius-md); background: var(--em-color-bg-subtle); color: var(--em-color-text-muted); font-size: var(--em-fs-caption); line-height: 1.45; text-align: left; }
.em-indices-sem-ano .fa-solid { margin-top: 2px; color: var(--em-theme-primary); }

/* Pesquisa da página inicial (a ação principal) visível logo ao abrir: entra primeiro e mais depressa que o texto (B5);
   sem animações de entrada no topo com "reduzir movimento". */
.em-hero__content > .em-search--hero { animation-delay: 0s; animation-duration: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .em-hero__content > *,
  .em-category-card { animation: none; }
}

/* =====================================================================
   Todos os territórios (/territorios, /cim/territorios, /ccdr/territorios): separadores do nível e filtro numa barra,
   grupos em cartões (municípios por CIM, CIM por região) com a cor do nível.
   ===================================================================== */
.em-territorios__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--em-space-3) var(--em-space-5); margin-bottom: var(--em-space-6); }
.em-territorios__barra .em-segmented { margin-bottom: 0; }
.em-territorios__filtro {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 320px;
  min-width: 0;
}
.em-territorios__filtro .fa-solid { position: absolute; left: 14px; color: var(--em-color-text-muted); font-size: 14px; pointer-events: none; }
.em-territorios__filtro input {
  width: 100%;
  height: 44px;
  padding: 0 var(--em-space-4) 0 40px;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: var(--em-radius-full);
  background: var(--em-color-surface);
  font: inherit;
  font-size: var(--em-fs-label);
  color: var(--em-color-text);
  transition: border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-territorios__filtro input:focus { outline: none; border-color: var(--em-theme-primary); box-shadow: var(--em-focus-ring); }
.em-territorios__titulo { margin: 0 0 var(--em-space-4); font-size: 20px; font-weight: var(--em-fw-bold); letter-spacing: -0.01em; color: var(--em-color-text-strong); }
/* Colunas em cascata: cada cartão fica logo por baixo do anterior, sem os espaços de uma grelha com alturas diferentes. */
.em-territorios__grupos { columns: 260px auto; column-gap: var(--em-space-4); }
.em-territorios__grupos > .em-territorios__grupo { break-inside: avoid; margin-bottom: var(--em-space-4); }
.em-territorios__grupo {
  padding: var(--em-space-4) var(--em-space-3) var(--em-space-3);
  border: var(--em-border-width) solid var(--em-color-border);
  border-top: 3px solid var(--em-theme-primary);
  border-radius: var(--em-radius-lg);
  background: var(--em-color-surface);
  box-shadow: 0 10px 24px -22px rgba(18, 33, 47, 0.5);
  animation: em-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.em-territorios__grupo[hidden] { display: none; }

.em-territorios__subtitulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-2);
  margin: 0 var(--em-space-2) var(--em-space-2);
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--em-theme-primary);
}
.em-territorios__contagem {
  flex: none;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--em-radius-full);
  background: var(--em-theme-tint);
  font-size: var(--em-fs-caption);
  letter-spacing: 0;
  text-align: center;
}
.em-territorios__lista { margin: 0; padding: 0; list-style: none; }
.em-territorios__lista li[hidden] { display: none; }
.em-territorios__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-2);
  min-height: 36px;
  padding: 6px var(--em-space-2);
  border-radius: var(--em-radius-md);
  color: var(--em-color-text-strong);
  font-size: var(--em-fs-body, 15px);
  text-decoration: none;
  transition: background var(--em-transition), color var(--em-transition);
}
.em-territorios__lista a .fa-solid { font-size: 11px; color: var(--em-color-text-muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--em-transition), transform var(--em-transition); }
.em-territorios__lista a:hover,
.em-territorios__lista a:focus-visible { background: var(--em-theme-tint); color: var(--em-theme-primary); outline: none; }
.em-territorios__lista a:hover .fa-solid,
.em-territorios__lista a:focus-visible .fa-solid { opacity: 1; transform: none; color: var(--em-theme-primary); }
.em-territorios__vazio { padding: var(--em-space-8) 0; color: var(--em-color-text-muted); text-align: center; }
@media (max-width: 760px) {
  .em-territorios__filtro { flex-basis: 100%; }
  .em-territorios__barra .em-segmented { width: 100%; }
  .em-territorios__barra .em-segmented__item { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .em-territorios__grupo { animation: none; }
}
/* Título do cartão como ligação para a página do território do nível de cima (CIM ou região). */
.em-territorios__subtitulo a { color: inherit; text-decoration: none; }
.em-territorios__subtitulo a:hover,
.em-territorios__subtitulo a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* CCDR em "Todos os territórios": cartões grandes por região, com faixa da cor do nível, nome, resumo e as CIM em
   etiquetas (distinto da página das CIM, que lista as mesmas CIM agrupadas). */
.em-territorios__regioes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--em-space-4); }
.em-territorios__regiao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--em-space-3);
  padding: var(--em-space-6);
  overflow: hidden;
  border: var(--em-border-width) solid var(--em-color-border);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--em-theme-primary) 12%, transparent) 0%, transparent 60%),
    var(--em-color-surface);
  box-shadow: 0 14px 30px -26px rgba(18, 33, 47, 0.55);
  animation: em-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.em-territorios__regiao[hidden] { display: none; }
.em-territorios__regiao::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--em-theme-primary); }
.em-territorios__regiao:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--em-theme-primary) 30%, var(--em-color-border)); box-shadow: 0 22px 40px -26px rgba(18, 33, 47, 0.5); }
.em-territorios__regiao-nome { margin: 0; font-size: 21px; font-weight: var(--em-fw-bold); letter-spacing: -0.015em; line-height: 1.25; }
.em-territorios__regiao-nome a { display: inline-flex; align-items: baseline; gap: var(--em-space-2); color: var(--em-color-text-strong); text-decoration: none; }
.em-territorios__regiao-nome .fa-solid { font-size: 14px; color: var(--em-theme-primary); transition: transform var(--em-transition); }
.em-territorios__regiao-nome a:hover,
.em-territorios__regiao-nome a:focus-visible { color: var(--em-theme-primary); outline: none; }
.em-territorios__regiao-nome a:hover .fa-solid,
.em-territorios__regiao-nome a:focus-visible .fa-solid { transform: translateX(3px); }
.em-territorios__regiao-resumo { margin: -4px 0 0; color: var(--em-color-text-muted); font-size: var(--em-fs-label); font-variant-numeric: tabular-nums; }
.em-territorios__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--em-space-1) 0 0; padding: 0; list-style: none; }
.em-territorios__etiquetas li[hidden] { display: none; }
.em-territorios__etiquetas a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--em-radius-full);
  background: var(--em-theme-tint);
  color: var(--em-theme-primary);
  font-size: var(--em-fs-label);
  font-weight: var(--em-fw-semibold);
  text-decoration: none;
  transition: background var(--em-transition), color var(--em-transition);
}
.em-territorios__etiquetas a:hover,
.em-territorios__etiquetas a:focus-visible { background: var(--em-theme-primary); color: var(--em-color-text-inverse); outline: none; }
@media (max-width: 760px) {
  .em-territorios__regioes { grid-template-columns: minmax(0, 1fr); }
  .em-territorios__regiao { padding: var(--em-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .em-territorios__regiao { animation: none; transition: none; }
}